mec-cloud_-intelligent-manufacturing_client/zkqy-ui/src/components/FormGroup/Approve.vue

<template>
  <div class="list-wrap">
    <div
      class="list-item"
      v-for="(item, index) in formArray"
      :key="index + new Date().getTime()"
    >
      <k-form-build
        :dynamicData="item.template.dfFormSql || {}"
        :defaultValue="item.template.defaultValue || {}"
        class="formBuild"
        :ref="item.tableName"
        :value="item.template.dfVueTemplate"
      />
      <el-divider></el-divider>
    </div>

    <!-- <div class="log-list"></div> -->
    <el-descriptions
      v-for="(item, index) in nodeLogList"
      :key="index"
      :title="item.taskNodeName"
    >
      <el-descriptions-item label="审批人">{{
        item.createBy
      }}</el-descriptions-item>
      <el-descriptions-item label="审批结果">{{
        statusObj[item.taskNodeOtherState]
      }}</el-descriptions-item>
      <el-descriptions-item label="审批意见">{{
        item.taskRemark || "无"
      }}</el-descriptions-item>
    </el-descriptions>
    <el-divider></el-divider>
    <el-form
      :model="form"
      ref="form"
      :rules="rules"
      label-width="80px"
      :inline="false"
      size="normal"
    >
      <el-form-item prop="approvalStatus" label="审批:">
        <el-select
          v-model="form.approvalStatus"
          placeholder="请选择审批结果"
          clearable
          filterable
        >
          <el-option
            v-for="item in statusOptions"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="审批意见:" size="normal">
        <el-input
          type="textarea"
          :rows="3"
          v-model="form.approvalRemark"
          placeholder="请输入"
          :maxlength="-1"
          :show-word-limit="false"
          :autosize="{ minRows: 2, maxRows: 4 }"
        >
        </el-input>
      </el-form-item>

      <!-- <el-form-item>
        <el-button type="primary" @click="onSubmit">立即创建</el-button>
        <el-button>取消</el-button>
      </el-form-item> -->
    </el-form>
  </div>
</template>

<script>
// import formList from "@/assets/js/formArray";
import { camelCase, toUnderline } from "@/utils/index";
import { disableFormItem } from "@/utils/kFormDesign";
import { uuid as uuidv4 } from "uuid";
export default {
  name: "Approve",
  props: {
    formList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    nodeLogList: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {},
  data() {
    return {
      // formList: [
      //   {
      //     formJson: formList,
      //   },
      // ],
      formArray: [],
      form: {
        approvalStatus: "", //审批结果
        approvalRemark: "", //审批备注
      },
      statusOptions: [
        {
          value: "pass",
          label: "通过",
        },
        {
          value: "noPass",
          label: "不通过",
        },
        {
          value: "reject",
          label: "驳回",
        },
      ],
      statusObj: {
        pass: "通过",
        noPass: "不通过",
        reject: "驳回",
      },
      rules: {
        approvalStatus: [
          {
            required: true,
            message: "请选择审批结果",
            trigger: "change",
          },
        ],
        approvalRemark: [
          {
            required: true,
            message: "请输入审批备注",
            trigger: "blur",
          },
        ],
      },
      defaultValue: {}, //表单默认值
      defaultValueObj: {},
    };
  },
  computed: {
    myFormList() {
      return this.formList;
      // return this.disableHandler(this.formList);
      // this.formList.forEach((item) => {
      //   item.template.dfFormSql = JSON.parse(item.template.dfFormSql);
      //   item.template.dfVueTemplate = JSON.parse(item.template.dfVueTemplate);
      // });
      // return this.formList;
    },
  },
  watch: {
    myFormList: {
      handler(val) {
        // this.$emit("update:formList", val);
        this.formArray = this.disableHandler(val);
        this.$nextTick(() => {
          this.setDefaultValue();
        });
        // console.log(this.formArray);
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 延迟
    sleep(ms) {
      var unixtime_ms = new Date().getTime();
      while (new Date().getTime() < unixtime_ms + ms) {}
      return "";
    },
    setDefaultValue() {
      console.log("this.defaultValueObj", this.defaultValueObj);
      for (const key in this.defaultValueObj) {
        // console.log(this.$refs[key], key);
        this.$refs[key][0]?.setData(this.defaultValueObj[key]);
      }
    },
    getUUID() {
      return uuidv4();
    },
    /**
     *
     * @param {array} formList 表单列表
     * @return {array} 处理后的表单列表-添加disable属性

     */
    disableHandler(formList) {
      // console.log(formList);
      this.resetForm();
      this.defaultValueObj = {};
      if (formList.length == 0) return [];
      formList.forEach((item) => {
        item.template.dfFormSql =
          typeof item.template.dfFormSql == "object"
            ? item.template.dfFormSql
            : JSON.parse(item.template.dfFormSql);
        item.template.dfVueTemplate = disableFormItem(
          typeof item.template.dfVueTemplate == "object"
            ? item.template.dfVueTemplate
            : JSON.parse(item.template.dfVueTemplate)
        );
        if (item.template.resultMap) {
          if (item.template.resultMap[0]?.batch) {
            item.template.defaultValue = item.template.resultMap[0];
          } else {
            item.template.defaultValue = item.template.resultMap[0]?.resultMap
              ? item.template.resultMap[0].resultMap
              : {};
          }
        }

        for (const key of Object.keys(item.template?.defaultValue || {})) {
          item.template.defaultValue[toUnderline(key)] =
            item.template.defaultValue[key];
        }
        let tableName = (this.defaultValueObj[item.tableName] =
          item.template.defaultValue);
        // this.$nextTick(() => {
        //   Object.assign(this.defaultValue, item.template.defaultValue);
        // });
        // item.formInfo.jsonData = disableFormItem(item.formInfo.jsonData);
      });
      return formList;
    },
    // 获取表单信息
    getformInfo() {
      let res = {
        flag: false,
      };
      return new Promise((resolve) => {
        this.$refs.form.validate((valid) => {
          if (valid) {
            // alert('submit!');
            res.flag = true;
            res.data = this.form;
            // console.log(res);
            // return res;
            resolve(res);
          } else {
            resolve(res);
          }
        });
      });
    },
    // 重置审批表单
    resetForm() {
      Object.assign(this.form, {
        approvalStatus: "",
        approvalRemark: "",
      });
    },
  },
  mounted() {},
};
</script>

<style scoped lang="scss">
// .list-wrap {
//   display: flex;
//   flex-direction: column;
//   .list-item {
//     margin-top: 10px;
//     &::after {
//       content: "";
//       display: block;
//       border: 1px dashed #41baeb; /* 设置虚线样式 */
//     }
//     &:last-child::after {
//       display: none;
//     }
//   }
// }
</style>