Source/UBCS-WEB/src/components/FormTemplate/index.vue

@@ -1,77 +1,88 @@
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    v-dialogDrag
    top="5vh"
    :title="title"
    :visible.sync="dialogVisible"
    :width="width"
    append-to-body
    class="avue-dialog avue-dialog--top"
    top="-5vh"
    @opened="openDialog"
  >
    <FormTemplate
      v-bind="$attrs"
      :type="type"
      :rowOid="rowOid"
      :templateOid="templateOid"
      v-if="dialogVisible"
      v-if="dialogVisible" key="masterForm"
      ref="FormTemplate"
      v-bind="$attrs"
      :TreeValue="TreeValue"
      :eventList="eventList"
      :rowOid="rowOid"
      :status="status"
      :templateOid="templateOid"
      :type="type"
      data-key="masterForm"
      @dataYearCode="dataYearHandler"
      @getFormData="getFormData"
      @isShow="isShowHandler"
    ></FormTemplate>
    <div
      class="tab_box"
      v-if="
        type !== 'detail' &&
        dialogVisible &&
        (showCodeApply || showResembleQuery) &&
        type !== 'preview'
      "
      class="tab_box"
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
        <el-tab-pane v-if="showCodeApply" label="码值申请" name="codeApply">
          <FormTemplate
            v-bind="$attrs"
            :type="type"
            :selfColumnType="selfColumnType"
            key="codeApplyForm" ref="CodeApply"
            :selfColumnConfig="selfColumnConfig"
            ref="CodeApply"
            :selfColumnType="selfColumnType"
            :type="type"
            data-key="codeApplyForm"
            secDTOListv-bind="$attrs"
            @attrList="attrListForm"
            @getFormData="getCodeApplyFormData"
            @referConfigDataUpdate="referConfigDataUpdate"
          ></FormTemplate>
        </el-tab-pane>
        <el-tab-pane
          v-if="showResembleQuery"
          label="相似项查询"
          name="resembleQuery"
          v-if="showResembleQuery"
        >
          <ResembleQuery
            v-bind="$attrs"
            ref="resembleQueryRef"
            :hasResemble="this.hasResemble"
            :column="this.resembleTableColumn"
            v-bind="$attrs"
            :codeClassifyOid="codeClassifyOid"
            :column="this.resembleTableColumn"
            :form="this.form"
            :hasResemble="this.hasResemble"
            :templateOid="templateOid"
          ></ResembleQuery>
        </el-tab-pane>
      </el-tabs>
    </div>
    <template #footer>
      <div class="" v-if="type !== 'detail'">
        <el-button @click="close()" size="small">取 消</el-button>
      <div v-if="type !== 'detail'" class="">
        <el-button size="small" @click="close()">取 消</el-button>
        <el-button
          @click="submit()"
          type="primary"
          :loading="submitBtnLoading"
          size="small"
          >{{ submitText }}</el-button
          type="primary"
          @click="submit()"
        >{{ submitText }}
        </el-button
        >
        <el-button
          @click="resembleQuerySubmit"
          type="primary"
          size="small"
          v-if="showResembleQuery"
          >相似像查询</el-button
          size="small"
          type="primary"
          @click="resembleQuerySubmit"
        >相似像查询
        </el-button
        >
      </div>
    </template>
@@ -79,16 +90,25 @@
</template>

<script>
import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js";
import {getCodeRule, getFormTemplate} from "@/api/formTemplate.js";
import FormTemplate from "./FormTemplate";
import ResembleQuery from "./ResembleQuery";

export default {
  name: "FormTemplateDialog",
  components: { ResembleQuery, FormTemplate },
  components: {ResembleQuery, FormTemplate},
  props: {
    status: {
      type: String,
      default: "",
    },
    visible: {
      type: Boolean,
      default: false,
    },
    TreeValue: {
      type: String,
      default: "",
    },
    type: {
      type: String,
@@ -122,6 +142,11 @@
  },
  data() {
    return {
      isSeriesType: {},
      attrList: [],
      eventList: [],
      //码值的第二种只读隐藏情况
      codeValueApplyStatus: '',
      loading: false,
      submitBtnLoading: false,
      hasResemble: false,
@@ -133,10 +158,13 @@
      showCodeApply: false,
      showResembleQuery: false,
      selfColumnType: {
        codefixedsec: "combox",
        codeclassifysec: "refer",
        codevariablesec: "text",
        coderefersec: "refer",
        codefixedsec: "combox",//固定码段
        codeclassifysec: "refer",//分类码段
        codevariablesec: "text",//可变码段
        coderefersec: "refer",//引用码段
        codeattrsec: "text",
        codelevelsec: "text",
        codedatesec: "date"
      },
      selfColumnConfig: {
        function: {
@@ -155,6 +183,7 @@
          label: "name",
          maxlength: "codeSecLength",
          data: "fixedValueVOList",
          dateFormate: "codeDateFormatStr"
        },
        directVoluation: {
          search: true,
@@ -197,9 +226,11 @@
        "secretgrade",
      ],
      codeRuleOid: "",
      isShowStatus: ""
    };
  },
  created() {},
  created() {
  },
  computed: {
    dialogVisible: {
      get() {
@@ -210,11 +241,20 @@
      },
    },
  },
  watch: {
    codeApplyForm: {
      handler(newval, oldval) {
        // console.log('newval',newval)
      }
    }
  },
  methods: {
    openDialog() {
      //新增和修改共同调用
      this.getFormTemplate();
      if (this.type === "add") {
      if (this.type === "add" || (this.type !== "add" && this.status === "amend")) {
        this.getCodeRule();
        return;
      }
    },
    close() {
@@ -222,6 +262,7 @@
    },
    // 接口获取表单数据
    getFormTemplate() {
      //新增和修改共同调用
      getFormTemplate({
        templateOid: this.templateOid,
        codeClassifyOid: this.codeClassifyOid,
@@ -239,11 +280,13 @@
            } else {
              this.showResembleQuery = false;
            }
            console.log(this.hasResemble, "this.hasResemblethis.hasResemble");
            //传递表单上方区域数据 （新增和修改）
            this.$nextTick(() => {
              this.$refs.FormTemplate.templateRender(
                res.data.formDefineVO.items
              );
              this.eventList = res.data.templateVO.attributes
              // this.$refs.FormTemplate.$emit('eventList',  res.data.templateVO.attributes);
              if (Object.keys(this.setForm).length > 0) {
                this.$refs.FormTemplate.form = this.setForm;
              }
@@ -256,47 +299,109 @@
    },
    // 获取码值申请数据
    getCodeRule() {
      getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {
      let that = this;
      getCodeRule({codeClassifyOid: that.codeClassifyOid}).then((res) => {
        if (res.data && res.data.code === 200) {
          this.codeRuleOid = res.data.data.oid;
          that.codeRuleOid = res.data.data.oid;
          const typeList = [
            "codefixedsec",
            "codeclassifysec",
            //属性码段 只读
            "codeattrsec",
            //可变码段
            "codevariablesec",
            //固定码段
            "codefixedsec",
            //分类码段
            "codeclassifysec",
            //日期码段 只读
            "codedatesec",
            //引用码段
            "coderefersec",
            //层级码段 只读
            "codelevelsec",
            //流水码段 隐藏
          ];
          this.secVOList = (res.data.data.secVOList || []).filter((item) =>
          that.secVOList = (res.data.data.secVOList || []).filter((item) =>
            typeList.includes(item.secType)
          );
          if (this.secVOList.length > 0 && this.type === "add") {
            this.showCodeApply = true;
            this.activeName = "codeApply";
          if (that.secVOList.length > 0 && that.type === "add" ||(that.type !== "add" &&  that.status === "amend")) {
            that.showCodeApply = true;
            that.activeName = "codeApply";

            this.$nextTick(() => {
              this.$refs.CodeApply.templateRender(this.secVOList);
              that.$refs.CodeApply.templateRender(that.secVOList, this.TreeValue);
            });
          } else {
            this.showCodeApply = false;
            that.showCodeApply = false;
          }
        }
      });
    },
    getFormData(form) {
      this.form = form;
      //属性码段赋值
      if (this.attrList) {
        this.attrList.forEach(item => {
          if (this.form.hasOwnProperty(item.referAttributeId)) {
            this.codeApplyForm[item.oid] = this.form[item.referAttributeId];
          }
        })
      }

    },
    //系列号规则
    isShowHandler(val) {
      this.isShowStatus = val;

      this.secVOList.forEach(item => {
        if (item.name === "系列号") {
          this.$set(item, "readOnly", val)
        }
      })
      if (this.$refs.CodeApply) { // 添加一个判断语句，检查对象是否为undefined
        this.$refs.CodeApply.changeChildItem(this.secVOList, this.TreeValue, this.type);
      }
    },
    //年代号
    dataYearHandler(val) {
      const readOnlyValue = val && Object.values(val).every(value => value !== '');

      this.secVOList.forEach(item => {
        if (item.name === "年代号") {
          const year = readOnlyValue ? val.value.slice(0, 4) : item.codeDateValue;
          this.codeApplyForm[item.oid] = year;
          this.$set(item, "readOnly", readOnlyValue);
        }
      });

      if (this.$refs.CodeApply) {
        this.$refs.CodeApply.changeChildItem(this.secVOList, this.TreeValue, this.type);
      }
    },
    //属性码段赋值
    attrListForm(attrListForm) {
      this.attrList = attrListForm;
    },
    getCodeApplyFormData(codeApplyForm) {
      // console.log("codeApplyForm",codeApplyForm)
      this.codeApplyForm = codeApplyForm;
    },
    // 参照组件数据变更
    referConfigDataUpdate(data) {
      const { field } = data;
      const {field} = data;
      let childItems = [];
      this.secVOList = this.secVOList.map((item) => {
        if (item.parentClassifySecOid === field) {
          this.$refs.CodeApply.form[item.oid] = undefined;
          this.$refs.CodeApply.form[item.name] = undefined;
          item.readOnly = false;
          item.referConfig.extraParams.parentClassifyValueOid = data.value;
          item.referConfig.reloadData = true;
          childItems.push(item)
        }
        return item;
      });
      this.$refs.CodeApply.templateRender(this.secVOList);
      //this.$refs.CodeApply.templateRender(this.secVOList,this.TreeValue);
      this.$refs.CodeApply.changeChildItem(childItems, this.TreeValue, this.type);
    },
    resembleQuerySubmit() {
      this.activeName = "resembleQuery";
@@ -308,30 +413,29 @@
      }
    },
    async submit() {
      // 进行表单校验
      const formValidate = await this.$refs.FormTemplate.validate();
      if (!formValidate) return;
      let codeValidate = true;
      // 进行码值申请校验
      if (this.showCodeApply) {
        codeValidate = await this.$refs.CodeApply.validate();
        if (!codeValidate) {
          this.activeName = "codeApply";
          return false;
      if(this.status){
        // 进行表单校验
        const formValidate = await this.$refs.FormTemplate.validate();
        if (!formValidate) return;
        let resembleQueryList = [];
        if (this.showResembleQuery && this.$refs.resembleQueryRef) {
          // 进行相似项查询
          resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
            this.form
          );
        }
      }
      let resembleQueryList = [];
      if (this.$refs.resembleQueryRef) {
        // 进行相似项查询
        resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
          this.form
        );
      }
      if (resembleQueryList.length === 0) {
        let resForm = {};
        const { defaultValue, formValue } = this.getDefaultValueAndFormValues(
          this.form
        );
        if (resembleQueryList.length > 0) {
          await this.$confirm(
            `该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
            "需要您确认",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
        }
        // 排除一些字段
        const noData = [
          "jiliangdwname",
          "materialtypeText",
@@ -342,68 +446,126 @@
          "lcstatus_text",
          "hesuanfenleiname",
          "$kucunwl",
          "lastmodifier"
        ];

        let resForm = {};
        const {defaultValue, formValue} = this.getDefaultValueAndFormValues(
          this.form
        );
        noData.forEach((item) => {
          this.$delete(formValue, item);
        });
        resForm.data = formValue;
        resForm = Object.assign({}, resForm, defaultValue);
        resForm.secDTOList = [];
        for (const key in this.codeApplyForm) {
          if (Object.hasOwnProperty.call(this.codeApplyForm, key)) {
            const value = this.codeApplyForm[key];
            if (value) {
              resForm.secDTOList.push({ secOid: key, secValue: value });
        const keys = Object.keys(formValue);
        keys.forEach((item, index) => {
          keys.forEach((itm, idx) => {
            if ((item === ('$' + itm)) && idx !== index) {
              this.$delete(formValue, keys[index]);
            }
          })
        });

        resForm.data = formValue;
        resForm.data = Object.assign({}, resForm.data, defaultValue);
        resForm.secDTOList = this.secVOList.map((item) => {
          return {
            secOid: item.oid,
            secValue: this.codeApplyForm[item.oid],
          };
        });
        //标准特定
        const mappings = {
          codeStandardEditType: 'operationType',
          reviseSeries: 'series',
          oldcode: 'oldCode',
          releaseDate: 'releaseTime',
          isSeries: 'isEditseries'
        };

        for (const key in mappings) {
          if (formValue[key]) {
            resForm[mappings[key]] = formValue[key];
          }
        }
        //
        resForm.codeClassifyOid = this.codeClassifyOid;
        resForm.codeRuleOid = this.codeRuleOid;
        resForm.templateOid = this.templateOid;
        this.$emit("submit", resForm);
      } else {
        this.$confirm(
          `该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
          "需要您确认",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            // 排除一些字段
            const noData = [
              "jiliangdwname",
              "materialtypeText",
              "morengongysname",
              "$caigouwl",
              "$xiaoshouwl",
              "$shifoupihaoguanli",
              "lcstatus_text",
              "hesuanfenleiname",
              "$kucunwl",
            ];
            let resForm = {};
            const { defaultValue, formValue } =
              this.getDefaultValueAndFormValues(this.form);
            noData.forEach((item) => {
              this.$delete(formValue, item);
            });
            resForm.data = formValue;
            resForm = Object.assign({}, resForm, defaultValue);
            resForm.secDTOList = this.secVOList.map((item) => {
              return {
                secOid: item.oid,
                secValue: this.codeApplyForm[item.oid],
              };
            });
            resForm.codeClassifyOid = this.codeClassifyOid;
            resForm.codeRuleOid = this.codeRuleOid;
            resForm.templateOid = this.templateOid;
            this.$emit("submit", resForm);
      }else {
        // 进行表单校验
        const formValidate = await this.$refs.FormTemplate.validate();
        if (!formValidate) return;
        let codeValidate = true;
        // 进行码值申请校验
        // if (this.showCodeApply) {
        //   codeValidate = await this.$refs.CodeApply.validate();
        //   if (!codeValidate) {
        //     this.activeName = "codeApply";
        //     return false;
        //   }
        // }
        let resembleQueryList = [];
        if (this.showResembleQuery && this.$refs.resembleQueryRef) {
          // 进行相似项查询
          resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
            this.form
          );
        }
        if (resembleQueryList.length > 0) {
          await this.$confirm(
            `该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
            "需要您确认",
            {
              confirmButtonText: "确定",
              cancelButtonText: "取消",
              type: "warning",
            }
          );
        }
        // 排除一些字段
        const noData = [
          "jiliangdwname",
          "materialtypeText",
          "morengongysname",
          "$caigouwl",
          "$xiaoshouwl",
          "$shifoupihaoguanli",
          "lcstatus_text",
          "hesuanfenleiname",
          "$kucunwl",
          "oldcode",
          "lastmodifier"
        ];

        let resForm = {};
        const {defaultValue, formValue} = this.getDefaultValueAndFormValues(
          this.form
        );
        noData.forEach((item) => {
          this.$delete(formValue, item);
        });
        const keys = Object.keys(formValue);
        keys.forEach((item, index) => {
          keys.forEach((itm, idx) => {
            if ((item === ('$' + itm)) && idx !== index) {
              this.$delete(formValue, keys[index]);
            }
          })
          .catch(() => {});
        });

        resForm.data = formValue;
        resForm = Object.assign({}, resForm, defaultValue);
        resForm.secDTOList = this.secVOList.map((item) => {
          return {
            secOid: item.oid,
            secValue: this.codeApplyForm[item.oid],
          };
        });
        resForm.codeClassifyOid = this.codeClassifyOid;
        resForm.codeRuleOid = this.codeRuleOid;
        resForm.templateOid = this.templateOid;
        this.$emit("submit", resForm);
      }
    },
    getDefaultValueAndFormValues(form) {
@@ -430,6 +592,7 @@
    getReferConfig(item) {
      let params = {};
      if (item.secType == "codeclassifysec") {
        //分类码段
        params = {
          isMuti: false,
          type: "grid",
@@ -474,6 +637,7 @@
          },
        };
      } else if (item.secType == "coderefersec") {
        //引用码段
        params = JSON.parse(item.referValueInfo);
      }
      return params;
@@ -484,14 +648,19 @@
          if (!this.codeApplyForm[item.parentClassifySecOid]) {
            return true;
          } else {
            return false;
            return item.readOnly || false;
          }
        } else {
          return item.readOnly || false;
        }
      } else {
        return item.readOnly || false;
      }
    },
    isRequired(item) {
      return item.nullableFlag != "true";
    },
    //默认值
    getOptionList(item) {
      if (
        Array.isArray(item.fixedValueVOList) &&
@@ -526,6 +695,7 @@
  top: 2px;
  color: red;
}

// 解决swich组件不垂直居中的问题
/deep/ .el-switch {
  vertical-align: baseline;