soc_web/src/views/resumptionEvaluate/evaluate/editDialog.vue

<template>
  <div class="rule-type">
    <DialogCom
      @colse="onHide"
      :title="`${id ? '编辑' : '新增'}外包履职评价计划`"
      :visible.sync="isShow"
      width="1500px"
    >
      <div class="page-body">
        <el-form
          :model="formData"
          :rules="formDataRules"
          size="small"
          ref="formData"
          label-position="right"
          label-width="130px"
          label-prefix=":"
        >
          <el-row>
            <el-col :span="8">
              <el-form-item prop="evaluateName" label="外包评价名称:">
                <el-input
                  v-model="formData.evaluateName"
                  name="evaluateName"
                  placeholder="请输入外包评价名称"
                  clearable
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="orgType" label="评价机构类型:">
                <el-select
                  label="评价机构类型"
                  name="orgType"
                  v-model="formData.orgType"
                  placeholder="请选择评价机构类型"
                  @change="onOrgTypeChanged"
                  clearable
                >
                  <el-option
                    v-for="item in dict.type.sys_org_type"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item prop="roleIds" label="评价角色:">
                <el-select
                  label="评价角色"
                  v-model="formData.roleIds"
                  placeholder="请选择评价角色"
                  multiple
                  @change="handleRolesChange"
                >
                  <el-option
                    v-for="item in resumptionRoles"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="8">
              <el-form-item prop="evaluateCycle" label="评价周期:">
                <el-select
                  label="评价周期"
                  v-model="formData.evaluateCycle"
                  placeholder="请选择评价周期"
                >
                  <el-option
                    v-for="item in dict.type.evaluate_cycle"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="4">
              <el-form-item prop="buildTaskNow" label="立即生效:" v-if="!id">
                <el-checkbox v-model="formData.buildTaskNow" size="medium"
                  >勾选后当前周期开始生效</el-checkbox
                >
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button
          @click="openSelect"
          type="primary"
          style="margin-bottom: 10px"
          >新增评价内容</el-button
        >

        <el-table :data="tableData" style="width: 100%" height="400px">
          <el-table-column label="序号" type="index" width="100">
          </el-table-column>
          <el-table-column prop="content" label="评价内容"> </el-table-column>
          <el-table-column prop="code" label="编号"> </el-table-column>
          <el-table-column
            prop="contentType"
            label="评价类型"
            :formatter="typeFormat"
          >
          </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button
                type="text"
                @click="removeRow(row)"
                v-if="row.code !== 0"
                >移除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="onSubmit">确定</el-button>
        <el-button @click="onHide">取消</el-button>
      </div>
      <DialogSelect
        ref="dialogEvaluate"
        :orgType="formData.orgType"
        @submitHandler="onSelect"
      ></DialogSelect>
    </DialogCom>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import * as api from "@/api/resumption/plan";

import { findAllRole } from "@/api/system/role";
import DialogSelect from "./addEvaluate.vue";
import {
  addEvaluate,
  getEvaluateById,
  editEvaluate,
} from "@/api/resumption/outsourcing.js";

export default {
  dicts: ["evaluate_cycle", "sys_org_type"],
  data() {
    return {
      selectedValues: [],
      resumptionRoles: [],
      evaluateName: null,
      planType: null,
      evaluateCycle: null,
      planStatus: null,
      orgType: null,
      roleNames: null,

      tableData: [
        {
          contentType: "1",
          code: 0,
          content: "被评价外包机构名称",
        },
      ],
      id: null,
      isShow: false,
      formData: {
        evaluateName: "",
        roleIds: [],
        orgType: "",
        evaluateCycle: "",
        planStatus: "",
        buildTaskNow:'',
      },
      formDataRules: {
        evaluateName: [{ required: true, message: "请输入评价名称" }],
        roleIds: [
          { required: true, message: "请选择评价角色", trigger: "blur" },
        ],
        orgType: [{ required: true, message: "请选择评价机构类型" }],
        evaluateCycle: [{ required: true, message: "请选择评价周期" }],
        planStatus: [{ required: true, message: "请选择计划状态" }],
      },
    };
  },
  props: {
    orgTypeOptions: {
      type: Array,
    },
    ruleTypeOptions: {
      type: Array,
    },
  },
  watch: {},
  computed: {
    ...mapGetters(["orgId", "orgName"]),
  },
  mounted() {},
  components: { DialogSelect },
  methods: {
    //数据格式化
    typeFormat(row) {
      switch (row.contentType) {
        case "1":
          return "文本输入";
          break;
        case "2":
          return "评价打分";
          break;

        default:
          break;
      }
    },

    getRolesByOrg(falg = "") {
      if (falg) {
        this.formData.roleIds = [];
      }
      if (this.formData.orgType != null) {
        let params = {
          orgType: this.formData.orgType,
        };

        findAllRole(params).then((res) => {
          this.resumptionRoles = res.data;
        });
      }
    },

    onSelect(form) {
      let isAdd = false;
      let falg = false;
      this.tableData.forEach((item) => {
        if (item.uid == form.uid) {
          Object.assign(item, form);
        } else {
          isAdd = true;
        }
        if (item.code == form.code) {
          falg = true;
        }
      });
      if (falg) {
        return this.$message.error("编号重复请修改");
      }
      if (isAdd || this.tableData.length == 0) {
        this.tableData.push(form);
      }
      console.log(this.tableData);
    },
    onOrgTypeChanged() {
      this.getRolesByOrg(1);
    },
    async show(id = "", other = {}) {
      this.id = id;
      this.tableData = [
        {
          contentType: "1",
          code: 0,
          content: "被评价外包机构名称",
        },
      ];

      // await this.refresh(id, other);

      if (id) {
        await getEvaluateById(id).then((res) => {
          let { code, msg, data } = res;
          if (code == 200) {
            Object.assign(this.formData, data);
            this.getRolesByOrg();
            this.tableData = data.coreEvaluateContentList;
            delete this.formData.coreEvaluateContentList;
          } else {
            this.$message.error(msg);
          }
        });
      }
      this.isShow = true;
    },
    removeRow(row) {
      this.$modal
        .confirm("是否确认删除？")
        .then(function () {})
        .then(() => {
          this.tableData = this.tableData.filter(
            (item) => item.uid !== row.uid
          );
          this.$modal.msgSuccess("删除成功");
        });
    },
    // 事件
    onHide() {
      this.$refs.formData.resetFields();
      this.isShow = false;
      this.formData = {
        evaluateName: "",
        roleIds: [],
        orgType: "",
        evaluateCycle: "",
        planStatus: "",
      };

      this.tableData = [];
    },

    openSelect() {
      this.$refs.dialogEvaluate.show();
    },
    onSubmit() {
      this.$refs.formData.validate((isValidate) => {
        if (isValidate) {
          if (this.tableData.length == 0) {
            return this.$message.error("评价内容项,不能为空");
          }

          let obj = {
            ...this.formData,
            coreEvaluateContentList: this.tableData,
          };

          let falg = true;

          this.tableData.forEach((item) => {
            if (item.contentType == "2") {
              falg = false;
            }
          });
          if (falg) {
            return this.$message.error(
              "评价内容所有项,至少有一项评价类型为打分"
            );
          }
          if (this.formData.id) {
            //编辑

            editEvaluate(obj).then((res) => {
              let { code, msg } = res;
              if (code == 200) {
                this.$message.success(msg);
                this.$emit("success");
                this.onHide();
              } else {
                this.$message.error(msg);
              }
            });
          } else {
            //新增
            addEvaluate(obj).then((res) => {
              let { code, msg } = res;
              if (code == 200) {
                this.$message.success(msg);
                this.$emit("success");
                this.onHide();
              } else {
                this.$message.error(msg);
              }
            });
          }
          // this.$emit("success");
          // this.onHide();
        }
      });
    },
    handleRolesChange(val) {
      this.selectedValues = val.toString().split(",");
    },
    // 事件
    //apimark//
  },
};
</script>

<style lang="scss" scoped>
.brand_info {
  .el-form {
    width: 600px;
    padding-top: 40px;
  }
}
.form-item-comment {
  font-size: 12px;
  color: #999;
  height: 10px;
}
</style>