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

@@ -1,42 +1,550 @@
<template>

  <div>

  </div>

</template>



<script>

  import { getFormTemplate } from '../../api/common';

  export default {

    name: 'FormTemplate',

    props: {

      visible: {

        type: Boolean,

        default: false

      },

    },

    created() {

      this.getFormTemplate()

    },

    data() {

      return {

        load: false

      }

    },

    methods: {

      getFormTemplate() {

        this.load = true

        getFormTemplate({

          templateOid: '78B8C7C5-A042-0B96-FE6D-65421451782A',

          codeClassifyOid: '4524E801-6CC6-92E8-1AC3-2AB9604E8F96'

        }).then(res => {

          console.log(res);

        }).catch(err => {

          console.log(err);

        })

      }

    }

  }

</script>



<style lang='less' scoped>



</style>
<template>
  <el-dialog
    :visible.sync="dialogVisible"
    v-if="dialogVisible"
    v-dialogDrag
    top="0vh"
    :title="title"
    class="avue-dialog avue-dialog--top"
    :width="width"
    append-to-body
    @opened="openDialog"
  >
    <FormTempalte
      v-bind="$attrs"
      :visible="visible"
      :type="type"
      :rowOid="rowOid"
      :templateOid="templateOid"
      ref="FormTempalte"
      @getFormData="getFormData"
    ></FormTempalte>

    <div
      class="tab_box"
      v-if="
        type !== 'detail' &&
        dialogVisible &&
        (showCodeApply || showResembleQuery) &&
        type !== 'preview'
      "
    >
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="码值申请" name="codeApply">
          <FormTempalte
            v-bind="$attrs"
            :type="type"
            :selfColumnType="selfColumnType"
            :selfColumnConfig="selfColumnConfig"
            ref="CodeApply"
            @getFormData="getFormData"
            @referConfigDataUpdate="referConfigDataUpdate"
          ></FormTempalte>
        </el-tab-pane>
        <el-tab-pane
          label="相似项查询"
          name="resembleQuery"
          v-if="showResembleQuery"
        >
          <ResembleQuery
            v-bind="$attrs"
            ref="resembleQueryRef"
            :hasResemble="this.hasResemble"
            :column="this.resembleTableColumn"
            :codeClassifyOid="codeClassifyOid"
            :form="this.form"
            :templateOid="templateOid"
          ></ResembleQuery>
        </el-tab-pane>
      </el-tabs>
    </div>
    <div class="avue-dialog__footer" v-if="type !== 'detail'">
      <el-button @click="close()">取 消</el-button>
      <el-button @click="submit()" type="primary" :loading="submitBtnLoading">{{
        submitText
      }}</el-button>
      <el-button
        @click="resembleQuerySubmit"
        type="primary"
        v-if="showResembleQuery"
        >相似像查询</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js";
import FormTempalte from "./FormTempalte";
import ResembleQuery from "./ResembleQuery";
export default {
  name: "FormTemplateDialog",
  components: { ResembleQuery, FormTempalte },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    type: {
      type: String,
      default: "add",
    },
    title: {
      type: String,
      default: "编码申请",
    },
    width: {
      type: String,
      default: "80%",
    },
    rowOid: "",
    codeClassifyOid: {
      type: String,
      default: "",
    },
    templateOid: {
      type: String,
      default: "",
    },
    submitText: {
      type: String,
      default: "确 定",
    },
  },
  data() {
    return {
      loading: false,
      submitBtnLoading: false,
      hasResemble: false,
      resembleTableColumn: [],
      secVOList: [],
      form: {},
      activeName: "codeApply",
      showCodeApply: true,
      showResembleQuery: true,
      selfColumnType: {
        codefixedsec: "combox",
        codeclassifysec: "refer",
        codevariablesec: "text",
        coderefersec: "refer",
      },
      selfColumnConfig: {
        function: {
          required: this.isRequired,
          dicData: this.getOptionList,
          type: this.getType,
          referConfig: this.getReferConfig,
          readOnly: this.getDisabled,
        },
        exchange: {
          text: "name",
          field: "oid",
          prop: "oid",
          showField: "name",
          parentClassifySecOid: "parentClassifySecOid",
          label: "name",
          maxlength: "codeSecLength",
          data: "fixedValueVOList",
        },
        directVoluation: {
          search: true,
          props: {
            label: "id",
            value: "id",
          },
        },
      },
    };
  },
  created() {},
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    openDialog() {
      this.getFormTemplate();
      if (this.type === "add") {
        this.getCodeRule();
      }
    },
    close() {
      this.dialogVisible = false;
    },
    // 接口获取表单数据
    getFormTemplate() {
      getFormTemplate({
        templateOid: this.templateOid,
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          if (res.status === 200) {
            this.hasResemble =
              res.data.resembleTableVO &&
              res.data.resembleTableVO.cols &&
              res.data.resembleTableVO.cols.length > 0;
            this.resembleTableColumn = res.data.resembleTableVO.cols || [];
            if (this.hasResemble) {
              this.activeName = "resembleQuery";
              this.showResembleQuery = true;
            }
            this.$refs.FormTempalte.templateRender(res.data.formDefineVO.items);
          }
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    // 获取码值申请数据
    getCodeRule() {
      getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {
        if (res.data && res.data.code === 200) {
          const typeList = [
            "codefixedsec",
            "codeclassifysec",
            "codevariablesec",
            "coderefersec",
          ];

          this.secVOList = [
            {
              btmname: "codebasicsec",
              checkInBy: "",
              checkInTime: null,
              checkOutBy: "",
              checkOutTime: null,
              codeDateFormatStr: "",
              codeFillFlag: "",
              codeFillLength: "",
              codeFillLimit: 0,
              codeFillSeparator: "",
              codeFillType: "",
              codeFillTypeText: "",
              codeGetValueType: "",
              codeGetValueTypeText: "",
              codeLevelType: "",
              codeLevelTypeText: "",
              codeLevelValue: 0,
              codeSecLength: "10",
              codeSecLengthType: "code_sec_length_variable",
              codeSecLengthTypeText: "",
              componentCodeFlag: "false",
              copyFromVersion: "",
              createTime: "2023-06-06 14:10:27.000",
              creator: "1",
              customCodeSerialClass: "",
              data: null,
              description: "",
              displayFlag: "false",
              filterSql: "",
              firstR: "1",
              firstV: "1",
              fixedValueVOList: null,
              getValueClass: "",
              id: "0001",
              lastModifier: "1",
              lastModifyTime: "2023-06-06 14:10:27.000",
              lastR: "1",
              lastV: "1",
              lcStatus: "Exist",
              lcStatusText: "存在",
              lctid: "defaultLC",
              matchClassifyValueFlag: "false",
              name: "分类码段父",
              nameOid: "C2998D32-E89E-6D41-0782-88E97E9EC65B",
              nullableFlag: "false",
              oid: "1668926002119708672",
              orderNum: 1,
              owner: "1",
              parentClassifySecOid: "",
              parentClassifySecText: "",
              pkCodeRule: "B4766355-E4E1-490A-833B-D5AB73E9B877",
              referAttributeId: "",
              referAttributeName: "",
              referBtmId: "",
              referBtmName: "",
              referCodeClassifyOid: "",
              referCodeClassifyOidName: "",
              referConfig: "",
              referValueInfo: "",
              revisionOid: "F0049108-6AAE-EAAD-BC76-E6714C2B8F2A",
              revisionRule: "",
              revisionSeq: 1,
              revisionValue: "",
              secretGrade: null,
              secretGradeText: "",
              sectype: "codeclassifysec",
              sectypeText: "分类码段",
              serialDependFlag: "false",
              serialDependOrder: 0,
              serialStart: "",
              serialStep: 0,
              ts: "2023-06-06 14:10:27.716",
              valueCutLength: 0,
              valueCutType: "",
              valueCutTypeText: "",
              versionRule: "0",
              versionSeq: 1,
              versionValue: "1",
            },
            {
              btmname: "codebasicsec",
              checkInBy: "",
              checkInTime: null,
              checkOutBy: "",
              checkOutTime: null,
              codeDateFormatStr: "",
              codeFillFlag: "",
              codeFillLength: "",
              codeFillLimit: 0,
              codeFillSeparator: "",
              codeFillType: "",
              codeFillTypeText: "",
              codeGetValueType: "",
              codeGetValueTypeText: "",
              codeLevelType: "",
              codeLevelTypeText: "",
              codeLevelValue: 0,
              codeSecLength: "10",
              codeSecLengthType: "code_sec_length_variable",
              codeSecLengthTypeText: "",
              componentCodeFlag: "false",
              copyFromVersion: "",
              createTime: "2023-06-06 14:10:50.000",
              creator: "1",
              customCodeSerialClass: "",
              data: null,
              description: "",
              displayFlag: "false",
              filterSql: "",
              firstR: "1",
              firstV: "1",
              fixedValueVOList: null,
              getValueClass: "",
              id: "000101",
              lastModifier: "1",
              lastModifyTime: "2023-06-06 14:10:50.000",
              lastR: "1",
              lastV: "1",
              lcStatus: "Exist",
              lcStatusText: "存在",
              lctid: "defaultLC",
              matchClassifyValueFlag: "false",
              name: "分类码段子",
              nameOid: "1FDB20E3-9F68-A5B0-D097-2142EA054F9B",
              nullableFlag: "false",
              oid: "00AD9FE0-A31D-7962-10DF-DC6115EF80A5",
              orderNum: 2,
              owner: "1",
              parentClassifySecOid: "1668926002119708672",
              parentClassifySecText: "分类码段",
              pkCodeRule: "B4766355-E4E1-490A-833B-D5AB73E9B877",
              referAttributeId: "",
              referAttributeName: "",
              referBtmId: "",
              referBtmName: "",
              referCodeClassifyOid: "",
              referCodeClassifyOidName: "",
              referConfig: "",
              referValueInfo: "",
              revisionOid: "95183EF9-C9AD-2941-1C99-9E9024330D40",
              revisionRule: "",
              revisionSeq: 1,
              revisionValue: "",
              secretGrade: null,
              secretGradeText: "",
              sectype: "codeclassifysec",
              sectypeText: "分类码段",
              serialDependFlag: "false",
              serialDependOrder: 0,
              serialStart: "",
              serialStep: 0,
              ts: "2023-06-06 14:10:50.084",
              valueCutLength: 0,
              valueCutType: "",
              valueCutTypeText: "",
              versionRule: "0",
              versionSeq: 1,
              versionValue: "1",
            },
          ];
          // this.secVOList = (res.data.data.secVOList || []).filter((item) =>
          //   typeList.includes(item)
          // );
          this.$nextTick(() => {
            if (this.secVOList.length > 0 && this.type === "add") {
              this.showCodeApply = true;
              this.activeName = "codeApply";
              this.$refs.CodeApply.templateRender(this.secVOList);
            } else {
              this.showCodeApply = false;
            }
          });
        }
      });
    },
    getFormData(form) {
      this.form = form;
    },
    // 参照组件数据变更
    referConfigDataUpdate(data) {
      const { field } = data;
      this.secVOList = this.secVOList.map((item) => {
        if (item.parentClassifySecOid === field) {
          this.$refs.CodeApply.form[item.oid] = undefined;
          this.$refs.CodeApply.form[item.name] = undefined;
        }
      });
      this.$refs.CodeApply.templateRender();
    },
    resembleQuerySubmit() {
      this.activeName = "resembleQuery";
      this.$refs.resembleQueryRef.resembleQuery(this.form);
    },
    handleClick() {
      if (this.activeName === "resembleQuery") {
        this.resembleQuerySubmit();
      }
    },
    async submit() {
      // 进行表单校验
      const formValidate = await this.$refs.FormTempalte.validate();
      if (!formValidate) return;
      let codeValidate = true;
      // 进行码值申请校验
      if (this.showCodeApply) {
        codeValidate = await this.$refs.codeApply.validate();
        if (!codeValidate) return;
      }
      // 进行相似项查询
      const resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
        this.form
      );
      if (resembleQueryList.length === 0) {
        this.$emit("submit", this.form);
      } else {
        this.$confirm(
          `该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
          "需要您确认",
          {
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        )
          .then(() => {
            this.$emit("submit", this.form);
          })
          .catch(() => {});
      }
    },
    getType(item) {
      return this.selfColumnType[item.sectype];
    },
    getReferConfig(item) {
      let params = {};
      if (item.sectype == "codeclassifysec") {
        params = {
          isMuti: false,
          type: "grid",
          tableConfig: {
            limit: -1,
            cols: [
              {
                field: "id",
                title: "英文名称",
                sort: true,
                width: 150,
              },
              {
                field: "name",
                title: "中文名称",
                sort: true,
                width: 150,
              },
              {
                field: "description",
                title: "描述",
                width: 250,
              },
            ],
            queryColumns: [
              {
                field: "id",
                title: "英文名称",
              },
              {
                field: "name",
                title: "中文名称",
              },
            ],
          },
          url: "api/ubcs-code/ubcs-code/mdmEngineController/listCodeClassifyValueBySecOid",
          extraParams: {
            classifySecOid: item.oid,
            parentClassifyValueOid: "",
          },
        };
      }
      return item.referConfig || params;
    },
    getDisabled(item) {
      if (item.sectype === "codeclassifysec") {
        if (item.parentClassifySecOid) {
          if (!this.form[item.parentClassifySecOid]) {
            return true;
          } else {
            return false;
          }
        }
      }
    },
    isRequired(item) {
      return item.nullableFlag != "true";
    },
    getOptionList(item) {
      if (
        Array.isArray(item.fixedValueVOList) &&
        item.fixedValueVOList.length > 0
      ) {
        const configAttr = {
          key: "id",
          value: "id",
        };
        const optionList = item.fixedValueVOList.map((item) => {
          for (const key in configAttr) {
            if (Object.hasOwnProperty.call(configAttr, key)) {
              const element = configAttr[key];
              item[key] = item[element];
            }
          }
          return item;
        });
        return optionList;
      } else {
        return [];
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.key_attr_icon {
  font-size: 24px;
  position: relative;
  top: 2px;
  color: red;
}
// 解决swich组件不垂直居中的问题
/deep/ .el-switch {
  vertical-align: baseline;
}
</style>