soc_web/src/views/evaluationRule/editEvaluationRuleDialog.vue

<template>
  <div class="rule-type">
    <DialogCom
      @colse="onHide"
      :title="`${id ? '编辑' : '新增'}评价规则`"
      :visible.sync="isShow"
      width="900px"
   
    >
      <div class="page-body">
        <el-form
          :model="queryParams"
          :rules="formDataRules"
          size="small"
          ref="form"
          label-position="right"
          label-width="130px"
          label-prefix=":"
        >
          <el-row>
            <el-col :span="12">
              <el-form-item prop="orgType" label="机构类型:">
                <el-select
                  label="机构类型"
                  name="orgType"
                  v-model="queryParams.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="12">
              <el-form-item prop="typeCode" label="指标类型:">
                <el-select
                  label="指标类型"
                  v-model="queryParams.typeCode"
                  placeholder="请选择指标类型"
                  @change="changeTargetList"
                >
                  <el-option
                    v-for="item in targetList"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item prop="projectCode" label="指标项目:">
                <el-select
                  label="指标项目"
                  v-model="queryParams.projectCode"
                  placeholder="请选择指标项目"
                  @change="changeTargetListChild"
                >
                  <el-option
                    v-for="item in targetListChild"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="pointCode" label="指标要点:">
                <el-select
                  label="指标要点"
                  v-model="queryParams.pointCode"
                  placeholder="请选择指标要点"
                >
                  <el-option
                    v-for="item in targetListGrandson"
                    :key="item.id"
                    :label="item.name"
                    :value="item.code"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="12">
              <el-form-item label="扣分方式:">
                <el-radio-group v-model="queryParams.deductionType">
                  <el-radio :label="1">直接扣分</el-radio>
                  <el-radio :label="2">最高扣分</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="score" label="分值:">
                <el-input
                  placeholder="请输入分值"
                  v-model.number="queryParams.score"
                  clearable
                >
                </el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item prop="formula" label="公式说明:">
                <el-input
                  v-model="queryParams.formula"
                  clearable
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row>
            <el-col :span="24">
              <el-form-item label="备注:">
                <el-input
                  v-model="queryParams.remark"
                  type="textarea"
                  :autosize="{ minRows: 2, maxRows: 4 }"
                  clearable
                />
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
        <el-button @click="openSelect">新增扣分规则</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="indicatorNote" label="计算项目">
          </el-table-column>
          <el-table-column
            prop="calculateType"
            label="计算类型"
            :formatter="formatterCalculateType"
          >
          </el-table-column>
          <el-table-column prop="indicatorDays" label="连续数">
          </el-table-column>
          <el-table-column prop="itemValue" label="系数"> </el-table-column>
          <el-table-column label="操作">
            <template v-slot="{ row }">
              <el-button type="text" @click="removeRow(row)">移除</el-button>
              <el-button type="text" @click="editRow(row)">编辑</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>
    </DialogCom>
    <DialogSelect
      ref="dialogEvaluate"
      :orgType="queryParams.orgType"
      @submitHandler="onSelect"
    ></DialogSelect>
  </div>
</template>

<script>
import dayjs from "dayjs";
import { mapGetters } from "vuex";
import { targetChange } from "./targetChangeMixins.js";
import { findAllRole } from "@/api/system/role";
import DialogSelect from "./addEvaluate.vue";
import { guid } from "@/utils/index.js";
import {
  addTargetEvaluate,
  getEvaluateById,
  editTargetEvaluate,
} from "@/api/evaluateRule/rule.js";

export default {
  mixins: [targetChange],
  dicts: ["evaluate_cycle", "sys_org_type"],
  data() {
    return {
      input: "",
      evaluateName: null,
      planType: null,
      typeCode: null,
      planStatus: null,
      orgType: null,
      roleNames: null,

      tableData: [],
      id: null,
      isShow: false,
      queryParams: {
        pointCode: "",
        typeCode: "",
        orgType: "",
        projectCode: "",
        deductionType: 1,
        formula: "",
        score: "",
        remark: "",
      },
      formDataRules: {
        pointCode: [{ required: true, message: "请选择指标要点" }],
        score: [
          { type: "number", message: "分值只能为数字" },
          { required: true, message: "请输入分值" },
        ],
        orgType: [{ required: true, message: "请选择评价机构类型" }],
        typeCode: [{ required: true, message: "请选择指标类型" }],
        projectCode: [{ required: true, message: "请选择指标项目" }],
      },
    };
  },
  props: {
    targetList: {
      type: Array,
    },
  },
  watch: {},
  computed: {
    ...mapGetters(["orgId", "orgName"]),
  },
  mounted() {},
  components: { DialogSelect },
  methods: {
    //数据格式化
    formatterCalculateType(row) {
      switch (row.calculateType) {
        case 1:
          return "累计数";
          break;
        case 2:
          return "连续数";
          break;
        case 3:
          return "分类";
          break;
        case 4:
          return "固化值";
          break;

        default:
          break;
      }
    },

    onSelect(form) {
      console.log(form);
      let isAdd = true;
      this.tableData?.forEach((item) => {
        console.log("item", item);
        if (item.uid == form.uid) {
          Object.assign(item, form);
          //当前是编辑
          isAdd = false;
        }
      });
      if (isAdd || this.tableData.length == 0) {
        this.tableData.push(form);
      }
      
      console.log(this.tableData);
    },
    onOrgTypeChanged() {},
    async show(id = "", other = {}) {
      this.id = id;
      this.tableData = [];

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

      if (id) {
        await getEvaluateById(id).then((res) => {
          let { code, msg, data } = res;
          if (code == 200) {
            Object.assign(this.queryParams, data);
            this.changeTargetList(this.queryParams.typeCode, 1);
            this.changeTargetListChild(this.queryParams.projectCode, 1);
            this.tableData = data.itemList;
            this.tableData.forEach((item) => {
              item.uid = guid();
            });
            delete this.queryParams.itemList;
            console.log(this.queryParams);
          } 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("删除成功");
        });
    },
    editRow(row) {
      this.$refs.dialogEvaluate.show();
      this.$refs.dialogEvaluate.ruleForm = JSON.parse(JSON.stringify(row));
    },
    // 事件
    onHide() {
      this.$refs.form.resetFields();
      this.isShow = false;
      this.queryParams = {
        pointCode: "",
        typeCode: "",
        orgType: "",
        score: "",
        projectCode: "",
        deductionType: 1,
        formula: "",
        remark: "",
      };

      this.tableData = [];
    },

    openSelect() {
      this.$refs.dialogEvaluate.show();
    },
    onSubmit() {
      this.$refs.form.validate(async (isValidate) => {
        if (isValidate) {
          if (this.tableData.length == 0) {
            return this.$message.error("扣分规则项不能为空");
          }

          let obj = {
            ...this.queryParams,
            itemList: this.tableData,
          };

          if (this.queryParams.id) {
            //编辑

            editTargetEvaluate(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 {
            //新增
            addTargetEvaluate(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();
        }
      });
    },

    // 事件
    //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;
}
.el-select {
  width: 100%;
}
</style>