hjjc-workbench-web/src/views/achievements/components/addPoint.vue

<template>
  <div>
    <xy-dialog
      ref="dialog"
      :is-show.sync="isShow"
      type="form"
      :title="type === 'add' ? '新增绩效指标' : '编辑绩效指标'"
      :form="form"
      :rules="rules"
      @submit="submit"
    >
      <template v-slot:target_type_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            一级指标 ：
          </div>
          <div class="xy-table-item-content">
            <el-select
              value-key="id"
              :value="typeFormat"
              clearable
              placeholder="请选择一级指标"
              style="width: 300px"
              @change="e => {
                form.target_type_id = e.id;
                target_type2s = e.children;
              }"
            >
              <el-option
                v-for="item in target_types"
                :key="item.id"
                :label="item.name"
                :value="item"
              ></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:target_type2_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            二级指标 ：
          </div>
          <div class="xy-table-item-content">
            <el-select
              v-model="form.target_type2_id"
              clearable
              placeholder="请选择二级指标"
              style="width: 300px"
            >
              <el-option
                v-for="item in target_type2s"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:name>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            名称 ：
          </div>
          <div class="xy-table-item-content">
            <el-input
              v-model="form.name"
              clearable
              placeholder="请输入名称"
              style="width: 300px"
            ></el-input>
          </div>
        </div>
      </template>
      <template v-slot:unit_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            单位 ：
          </div>
          <div class="xy-table-item-content">
            <el-select
              v-model="form.unit_id"
              clearable
              placeholder="请选择单位"
              style="width: 300px"
            >
              <el-option
                v-for="item in unit_ids"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:symbol_id>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            计算符号 ：
          </div>
          <div class="xy-table-item-content">
            <el-select
              ref="symbolSelect"
              v-model="form.symbol_id"
              clearable
              placeholder="请选择计算符号"
              style="width: 300px"
            >
              <el-option
                v-for="item in symbol_ids"
                :key="item.id"
                :label="item.value"
                :value="item.id"
              ></el-option>
            </el-select>
          </div>
        </div>
      </template>
      <template v-slot:half_target>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            半年（程）指标值 ：
          </div>
          <div class="xy-table-item-content">
            <template v-if="isDingxing">
              <el-input
                v-model="form.half_target"
                clearable
                placeholder="请输入半年（程）指标值"
                style="width: 300px"
              ></el-input>
            </template>
            <template v-else>
              <el-input-number
                v-model="form.half_target"
                clearable
                placeholder="请输入半年（程）指标值"
                style="width: 300px"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </template>
          </div>
        </div>
      </template>
      <template v-slot:year_target>
        <div class="xy-table-item">
          <div class="xy-table-item-label">
            <span style="color: red; font-weight: 600; padding-right: 4px"
              >*</span
            >
            全年（程）指标值 ：
          </div>
          <div class="xy-table-item-content">
            <template v-if="isDingxing">
              <el-input
                v-model="form.year_target"
                clearable
                placeholder="请输入全年（程）指标值"
                style="width: 300px"
              ></el-input>
            </template>
            <template v-else>
              <el-input-number
                v-model="form.year_target"
                clearable
                placeholder="请输入全年（程）指标值"
                style="width: 300px"
                :controls="false"
                :precision="2"
              ></el-input-number>
            </template>
          </div>
        </div>
      </template>
    </xy-dialog>
  </div>
</template>

<script>
import { show, save } from "@/api/achievements/points";
export default {
  props: {
    target_types: {
      type: Array,
      default: () => [],
    },
    unit_ids: {
      type: Array,
      default: () => [],
    },
    symbol_ids: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      isDingxing: false,
      isShow: false,
      id: "",
      type: "",
      target_type2s: [],

      form: {
        target_type_id: "",
        target_type2_id: "",
        name: "",
        unit_id: "",
        symbol_id: "",
        half_target: "",
        year_target: "",
      },
      rules: {
        target_type_id: [
          {
            required: true,
            message: "请填写一级指标",
          },
        ],
        target_type2_id: [
          {
            required: true,
            message: "请填写二级指标",
          },
        ],
        name: [
          {
            required: true,
            message: "请填写名称",
          },
        ],
        unit_id: [
          {
            required: true,
            message: "请填写单位",
          },
        ],
        symbol_id: [
          {
            required: true,
            message: "请填写计算符号",
          },
        ],
        half_target: [
          {
            required: true,
            message: "请填写半年（程）指标值",
          },
        ],
        year_target: [
          {
            required: true,
            message: "请填写全年（程）指标值",
          },
        ],
      },
    };
  },
  methods: {
    show() {
      this.isShow = true;
    },
    hidden() {
      this.isShow = false;
    },
    init() {
      this.form = {
        target_type_id: "",
        target_type2_id: "",
        name: "",
        unit_id: "",
        symbol_id: "",
        half_target: "",
        year_target: "",
      };
    },
    setForm(key = [], value = []) {
      if (key instanceof Array) {
        key.forEach((key, index) => {
          this.form[key] = value[index] ?? "";
        });
      }
      if (typeof key === "string") {
        this.form[key] = value;
      }
      if (!key) {
        this.init();
      }
    },

    async getDetail() {
      const res = await show({ id: this.id });
      this.$integrateData(this.form, res);

      this.target_type2s = this.target_types?.filter(i => i.id === this.form.target_type_id)[0]?.children
    },

    submit() {
      if (this.type === "add") {
        if (this.form.hasOwnProperty("id")) {
          delete this.form.id;
        }
      }
      if (this.type === "editor") {
        Object.defineProperty(this.form, "id", {
          value: this.id,
          enumerable: true,
          configurable: true,
          writable: true,
        });
      }
      save(this.form).then((res) => {
        this.$message({
          type: "success",
          message:
            this.type === "add" ? "新增绩效指标" : "编辑绩效指标" + "成功",
        });
        this.isShow = false;
        this.$emit("refresh");
      });
    },
  },
  computed:{
    typeFormat() {
      return this.target_types.filter(item => item.id === this.form.target_type_id)[0]?.name || "";
    },
  },
  watch: {
    isShow(val) {
      if (val) {
        if (this.type === "editor") {
          this.getDetail();
        }
      } else {
        this.id = "";
        this.type = "";
        this.init();
        this.$refs["dialog"].clearValidate();
        delete this.form.id;
      }
    },
    "form.symbol_id": {
      handler:function(val) {
        this.$nextTick(() => {
          this.isDingxing = this.$refs['symbolSelect']?.selectedLabel === '定形';
        })
      },
      immediate: true
    }
  },
};
</script>

<style scoped lang="scss">
::v-deep .el-input__inner {
  text-align: left;
}

.xy-table-item-label{
  width: 200px;
}
</style>