Source/UBCS-WEB/src/components/code-dialog-page/maxSerialnumDialog.vue

@@ -1,302 +1,304 @@
<template>
    <el-dialog title="最大流水号" width="30%" append-to-body="true" class="avue-dialog avue-dialog--top" top="-3%" :visible.sync="dialogVisible">
        <el-form :label-position="right" ref="ruleForm" label-width="80px" :model="formModel" :rules="rules">
            <el-form-item label="流水号" prop="maxSecNum">
                <el-input v-model="formModel.maxSecNum"></el-input>
            </el-form-item>
        </el-form>
        <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
            <el-tab-pane label="最大流水号" name="codeApply">
                <form-template v-bind="$attrs" type="add" :selfColumnType="selfColumnType" :trendsSpan="24"
                    :selfColumnConfig="selfColumnConfig" ref="CodeApply" @getFormData="getCodeApplyFormData"
                    @referConfigDataUpdate="referConfigDataUpdate"></form-template>
            </el-tab-pane>
        </el-tabs>
        <div slot="footer" class="dialog-footer">
            <el-button @click="cancel">取 消</el-button>
            <el-button type="primary" :loading="confirmLoadding" @click="comfirm">确 定</el-button>
        </div>
    </el-dialog>
  <el-dialog title="最大流水号" width="30%" append-to-body="true" class="avue-dialog avue-dialog--top" top="-3%" :visible.sync="dialogVisible">
    <el-form :label-position="right" ref="ruleForm" label-width="80px" :model="formModel" :rules="rules">
      <el-form-item label="流水号" prop="maxSecNum">
        <el-input v-model="formModel.maxSecNum"></el-input>
      </el-form-item>
    </el-form>
    <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
      <el-tab-pane label="最大流水号" name="codeApply">
        <form-template v-bind="$attrs" type="add" :selfColumnType="selfColumnType" :trendsSpan="24"
                       :selfColumnConfig="selfColumnConfig" ref="CodeApply" @getFormData="getCodeApplyFormData"
                       @referConfigDataUpdate="referConfigDataUpdate"></form-template>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="cancel">取 消</el-button>
      <el-button type="primary" :loading="confirmLoadding" @click="comfirm">确 定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import FormTemplate from "@/components/FormTemplate/FormTemplate";
import { getCodePrice, saveMaxSerialNum } from "@/api/code/maxSerialNum.js"
export default {
    name: 'maxSerialnumDialog',
    components: {
        FormTemplate
  name: 'maxSerialnumDialog',
  components: {
    FormTemplate
  },
  props: {
    // 是否打开
    visible: {
      typeof: Boolean,
      default: false
    },
    props: {
        // 是否打开
        visible: {
            typeof: Boolean,
            default: false
        },
        // ruleOid
        ruleOid: {
            typeof: String,
            default: ""
        }
    },
    watch: {
        visible(n) {
            this.dialogVisible = n;
        },
        dialogVisible(n) {
            this.$emit('update:visible', n)
            if (n) this.apiGetCode()
        },
        selfColumnConfig: {
            handler(newval) {
                // console.log('selfColumnConfig', newval)
            },
            immediate: true,
            deep: true
        }
    },
    data() {
        return {
            dialogVisible: this.visible,
            activeName: 'codePrice',
            confirmLoadding: false,
            codeApplyForm: {},
            secVOList: [],
            formModel: {
                maxSecNum: '',
                codeRuleOid: '',
                secDTOList: []
            },
            rules: {
                maxSecNum: [
                    { required: true, message: '请输入流水号', trigger: 'blur' }
                ],
            },
            selfColumnType: {
              codefixedsec: "combox",//固定码段
              codeclassifysec: "refer",//分类码段
              codevariablesec: "text",//可变码段
              coderefersec: "refer",//引用码段
              codeattrsec: "text",
              codelevelsec: "text",
              codedatesec: "date"
            },
            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",
                    dateFormate: "codeDateFormatStr"
                },
                directVoluation: {
                    search: true,
                    props: {
                        label: "id",
                        value: "id",
                    },
                },
            },
        }
    },
    methods: {
        // 获取码段
        async apiGetCode() {
            this.activeName = "codeApply";
            const response = await getCodePrice({ ruleOid: this.ruleOid })
            const res = response.data
            if (res.success && res.code === 200) {
                const typeList = [
                    "codefixedsec",
                    "codeclassifysec",
                    "codevariablesec",
                    "coderefersec",
                    "codeattrsec",
                    "codelevelsec",
                    "codedatesec"
                ];
                this.secVOList = (res.data.secVOList || []).filter((item) =>
                    typeList.includes(item.secType)
                );
                if (this.secVOList.length > 0) {
                    this.$nextTick(() => {
                        this.$refs.CodeApply.templateRender(this.secVOList);
                    });
                } else {
                  this.$refs.CodeApply.loading = false;
                }
            }
        },
        handleClick(tab, event) {
            // console.log(event)
        },
        getCodeApplyFormData(codeApplyForm) {
            this.codeApplyForm = codeApplyForm;
        },
        // 取消
        cancel() {
            this.dialogVisible = false
            this.formModel['secDTOList'] = []
            this.formModel['codeRuleOid'] = ''
            this.formModel['maxSecNum'] = ''
            this.$refs.ruleForm.clearValidate('maxSecNum')

        },
        // 确认
        async comfirm() {
            const objcodekey = Object.keys(this.codeApplyForm)
            const filteredObj = objcodekey.reduce((acc, key) => {
                const pattern = /[\u4e00-\u9fa5]/; // 匹配中文字符的正则表达式
                const patterns = /\$/;
                if (!pattern.test(key)&&!patterns.test(key)) {
                    acc[key] = this.codeApplyForm[key];
                }
                return acc;
            }, {});

            const arrCode = Object.entries(filteredObj).map(([key, value]) => {
                return {
                    secOid: key,
                    secValue: value
                }
            })
            this.formModel['secDTOList'] = arrCode
            this.formModel['codeRuleOid'] = this.ruleOid
            this.confirmLoadding = true
            const rule = await this.$refs.CodeApply.validate()
            this.$refs.ruleForm.validate(res => {
                if (rule && res) {
                    saveMaxSerialNum(this.formModel).then(res => {
                        if (res.data.success) {
                            this.$message.success('操作成功！');
                            this.confirmLoadding = false
                            this.cancel()
                        }
                    }).catch(error=>{
                      this.confirmLoadding = false
                    })
                } else {
                    this.confirmLoadding = false
                }
            })

        },
        // 参照组件数据变更
        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;
                }
                return item;
            });
            this.$refs.CodeApply.templateRender(this.secVOList);
        },
        isRequired(item) {
            return item.nullableFlag != "true";
        },
        getType(item) {
            return this.selfColumnType[item.secType];
        },
        getDisabled(item) {
            if (item.secType === "codeclassifysec") {
                if (item.parentClassifySecOid) {
                    if (!this.codeApplyForm[item.parentClassifySecOid]) {
                        return true;
                    } else {
                        return false;
                    }
                }
            }
        },
        getReferConfig(item) {
            let params = {};
            if (item.secType == "codeclassifysec") {
                params = {
                    isMuti: false,
                    valueField: 'id',
                    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: item.parentClassifySecOid
                            ? this.codeApplyForm[item.parentClassifySecOid]
                            : "",
                    },
                };
            } else if (item.secType == "coderefersec") {
                params = JSON.parse(item.referValueInfo);
            }
            // console.log(params)
            return params;

        },
        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 [];
            }
        },
    // ruleOid
    ruleOid: {
      typeof: String,
      default: ""
    }
  },
  watch: {
    visible(n) {
      this.dialogVisible = n;
    },
    dialogVisible(n) {
      this.$emit('update:visible', n)
      if (n) this.apiGetCode()
    },
    selfColumnConfig: {
      handler(newval) {
        // console.log('selfColumnConfig', newval)
      },
      immediate: true,
      deep: true
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      activeName: 'codePrice',
      confirmLoadding: false,
      codeApplyForm: {},
      secVOList: [],
      formModel: {
        maxSecNum: '',
        codeRuleOid: '',
        secDTOList: []
      },
      rules: {
        maxSecNum: [
          { required: true, message: '请输入流水号', trigger: 'blur' }
        ],
      },
      selfColumnType: {
        codefixedsec: "combox",//固定码段
        codeclassifysec: "refer",//分类码段
        codevariablesec: "text",//可变码段
        coderefersec: "refer",//引用码段
        codeattrsec: "text",
        codelevelsec: "text",
        codedatesec: "date"
      },
      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",
          dateFormate: "codeDateFormatStr"
        },
        directVoluation: {
          search: true,
          props: {
            label: "id",
            value: "id",
          },
        },
      },
    }
  },
  methods: {
    // 获取码段
    async apiGetCode() {
      this.activeName = "codeApply";
      const response = await getCodePrice({ ruleOid: this.ruleOid })
      const res = response.data
      if (res.success && res.code === 200) {
        const typeList = [
          "codefixedsec",
          "codeclassifysec",
          "codevariablesec",
          "coderefersec",
          "codeattrsec",
          "codelevelsec",
          "codedatesec"
        ];
        this.secVOList = (res.data.secVOList || []).filter((item) =>
          typeList.includes(item.secType)
        );
        if (this.secVOList.length > 0) {
          this.$nextTick(() => {
            this.$refs.CodeApply.templateRender(this.secVOList);
          });
        } else {
          this.$refs.CodeApply.loading = false;
        }
      }
    },
    handleClick(tab, event) {
      // console.log(event)
    },
    getCodeApplyFormData(codeApplyForm) {
      this.codeApplyForm = codeApplyForm;
    },
    // 取消
    cancel() {
      this.dialogVisible = false
      this.formModel['secDTOList'] = []
      this.formModel['codeRuleOid'] = ''
      this.formModel['maxSecNum'] = ''
      this.$refs.ruleForm.clearValidate('maxSecNum')

    },
    // 确认
    async comfirm() {
      const objcodekey = Object.keys(this.codeApplyForm)
      const filteredObj = objcodekey.reduce((acc, key) => {
        const pattern = /[\u4e00-\u9fa5]/; // 匹配中文字符的正则表达式
        const patterns = /\$/;
        if (!pattern.test(key)&&!patterns.test(key)) {
          acc[key] = this.codeApplyForm[key];
        }
        return acc;
      }, {});

      const arrCode = Object.entries(filteredObj).map(([key, value]) => {
        return {
          secOid: key,
          secValue: value
        }
      })
      this.formModel['secDTOList'] = arrCode
      this.formModel['codeRuleOid'] = this.ruleOid
      this.confirmLoadding = true
      const rule = await this.$refs.CodeApply.validate()
      this.$refs.ruleForm.validate(res => {
        if (rule && res) {
          saveMaxSerialNum(this.formModel).then(res => {
            if (res.data.success) {
              this.$message.success('操作成功！');
              this.confirmLoadding = false
              this.cancel()
            }
          }).catch(error=>{
            this.confirmLoadding = false
          })
        } else {
          this.confirmLoadding = false
        }
      })

    },
    // 参照组件数据变更
    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;
          item.readOnly = false;
          item.referConfig.extraParams.parentClassifyValueOid = data.value;
        }
        return item;
      });
      this.$refs.CodeApply.templateRender(this.secVOList);
    },
    isRequired(item) {
      return item.nullableFlag != "true";
    },
    getType(item) {
      return this.selfColumnType[item.secType];
    },
    getDisabled(item) {
      if (item.secType === "codeclassifysec") {
        if (item.parentClassifySecOid) {
          if (!this.codeApplyForm[item.parentClassifySecOid]) {
            return true;
          } else {
            return false;
          }
        }
      }
    },
    getReferConfig(item) {
      let params = {};
      if (item.secType == "codeclassifysec") {
        params = {
          isMuti: false,
          valueField: 'id',
          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: item.parentClassifySecOid
              ? this.codeApplyForm[item.parentClassifySecOid]
              : "",
          },
        };
      } else if (item.secType == "coderefersec") {
        params = JSON.parse(item.referValueInfo);
      }
      // console.log(params)
      return params;

    },
    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>