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

@@ -5,569 +5,146 @@
    top="0vh"
    :title="title"
    class="avue-dialog avue-dialog--top"
    :width="dialogOptions.width"
    :width="width"
    append-to-body
    v-if="dialogVisible"
    @opened="openDialog"
  >
    <avue-form
      v-model="form"
      :option="option"
      v-loading="loading"
      ref="form"
      :key="index"
    <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)
      "
    >
      <template :slot="item.prop + 'Label'" v-for="item in option.column">
        <span>
          <span>{{ item.label }} </span>
          <el-tooltip
            v-if="item.keyAttr"
            class="item"
            effect="dark"
            content="该属性为关键属性"
            placement="top-start"
          >
            <i class="el-icon-star-on key_attr_icon"></i>
          </el-tooltip>
          <el-tooltip
            v-if="item.tip"
            class="item"
            effect="dark"
            :content="item.tip"
            placement="top-start"
          >
            <i class="el-icon-warning"></i>
          </el-tooltip>
        </span>
      </template>
    </avue-form>
    <FindLike ref="findLike"></FindLike>
      <el-tabs v-model="activeName" type="border-card" @tab-click="handleClick">
        <el-tab-pane label="码值申请" name="codeApply" v-if="showCodeApply">
          <FormTempalte
            v-bind="$attrs"
            :type="type"
            :selfColumnType="selfColumnType"
            :selfColumnConfig="selfColumnConfig"
            ref="CodeApply"
            @getFormData="getFormData"
          ></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="close()" type="primary" :loading="submitBtnLoading">确 定</el-button>
      <el-button @click="findLinkSubmit" type="primary">相似像查询</el-button>
      <el-button @click="submit()" type="primary" :loading="submitBtnLoading"
        >确 定</el-button
      >
      <el-button
        @click="resembleQuerySubmit"
        type="primary"
        v-if="showResembleQuery"
        >相似像查询</el-button
      >
    </div>
  </el-dialog>
</template>

<script>
import { getFormTemplate, executeCode, findLike } from "@/api/formTemplate";
import { getDictionary } from "../../api/system/dict";
import FindLike from "./FindLike.vue";
import { getCodeRule, getFormTemplate } from "@/api/formTemplate.js";
import FormTempalte from "./FormTempalte";
import ResembleQuery from "./ResembleQuery";
export default {
  name: "FormTemplate",
  components: { FindLike },
  name: "FormTemplateDialog",
  components: { ResembleQuery, FormTempalte },
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    disabledProp: {
      type: Array,
      default: () => ["id"],
    type: {
      type: String,
      default: "add",
    },
    title: {
      type: String,
      default: "编码申请",
    },
    width: {
      type: String,
      default: "80%",
    },
    rowOid: "",
    codeClassifyOid: {
      type: String,
      default: "",
    },
    templateOid: {
      type: String,
      default: "",
    },
    codeClassifyOid: {
      type: String,
      default: "",
    },
    type: {
      type: String,
      default: 'add'
    },
    title: {
      type: String,
      default: '表单模板'
    }
  },
  data() {
    return {
      index: 0,
      form: {},
      loading: false,
      dialogOptions: {
        width: "60%",
      submitBtnLoading: false,
      hasResemble: false,
      resembleTableColumn: [],
      secVOList: [],
      form: {},
      activeName: "codeApply",
      showCodeApply: true,
      showResembleQuery: true,
      selfColumnType: {
        codefixedsec: "combox",
        codeclassifysec: "refer",
        codevariablesec: "text",
        coderefersec: "refer",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "120",
        column: [],
      selfColumnConfig: {
        function: {
          required: this.isRequired,
          dicData: this.getOptionList,
          type: this.getType,
        },
        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",
          },
        },
      },
      templateData: {},
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        textarea: "textarea",
        datetime: "datetime",
        date: "date"
      },
      // 假数据
      testItems: [
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "id",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "传值禁用功能",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "state",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: true,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "接口禁用功能",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "oldcode",
          hidden: false,
          keyAttr: false,
          prefix: "el-icon-search",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "文本后缀测试",
          text: "前后缀功能",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "materialname",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: true,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "正则校验功能",
          tooltips: "请输入数字",
          type: "text",
          unique: false,
          verify: "/[0-9]/",
        },
        {
          comboxKey: null,
          customClass: null,
          data: [
            {
              attributes: {},
              key: "model_type",
              value: "模型",
            },
            {
              attributes: {},
              key: "part_type",
              value: "零件",
            },
          ],
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "dataSelect",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "直接返回下拉",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          comboxKey: "formTemplateTest",
          customClass: null,
          data: [],
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "dictSelect",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "字典返回下拉",
          tooltips: "",
          type: "combox",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "firstfl",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "数字输入框",
          tooltips: "",
          type: "number",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "yyyy-MM-dd HH:mm:ss",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "datetime",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "日期时间选择器",
          tooltips: "",
          type: "datetime",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "time",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "时间选择器",
          tooltips: "",
          type: "date",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "false",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "xiaoshouwl",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "开关",
          tooltips: "",
          type: "truefalse",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "我是默认值",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "tuhao",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "默认值功能",
          tooltips: "提示",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "xinghaoguige",
          hidden: false,
          keyAttr: true,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "属性关键值",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "jiliangdw",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          tip: "我是提示功能",
          required: false,
          selectLibFlag: "",
          showField: "jiliangdwname",
          suffix: "",
          text: "提示功能",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2",
          extendAttrMap: null,
          extendAttrString: null,
          field: "fun1",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "参数1测试js",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: "this.form.sum = this.form.fun1 + this.form.fun2",
          extendAttrMap: null,
          extendAttrString: null,
          field: "fun2",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          required: false,
          selectLibFlag: "",
          showField: "hesuanfenleiname",
          suffix: "",
          text: "参数2测试js",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: "",
          extendAttrMap: null,
          extendAttrString: null,
          field: "sum",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: true,
          required: false,
          selectLibFlag: "",
          showField: "",
          suffix: "",
          text: "参数1参数2求和",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "textarea",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "文本域",
          tooltips: "",
          type: "textarea",
          unique: false,
          verify: "",
        },
        {
          comboxKey: null,
          customClass: null,
          data: null,
          dateFormate: "",
          defaultValue: "",
          displayExtension: null,
          extendAttrMap: null,
          extendAttrString: null,
          field: "cz",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: true,
          referConfig: true,
          required: false,
          selectLibFlag: "",
          showField: "depId",
          suffix: "",
          text: "参照",
          tooltips: "",
          type: "text",
          unique: false,
          verify: "",
        },
      ],
      submitBtnLoading: false
    };
  },
  created() {},
@@ -582,167 +159,136 @@
    },
  },
  methods: {
    openDialog() {
      this.getFormTemplate();
      if (this.type === 'add') {
        this.getCodeRule();
      }
    },
    close() {
      this.dialogVisible = false;
    },
    // 接口获取表单数据
    getFormTemplate() {
      this.loading = true;
      getFormTemplate({
        templateOid: this.templateOid,
        codeClassifyOid: this.codeClassifyOid,
      })
        .then((res) => {
          if (res.status === 200) {
            this.templateData = res.data;
            this.templateRender();
            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);
          }
          this.loading = false;
          console.log(res.data);
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    templateRender() {
      const items = this.templateData.formDefineVO.items;
      let column = [];
      let dictKeys = [];
      items.forEach((item) => {
        // 隐藏表单元素
        if (item.hide) {
          return;
    // 获取码值申请数据
    getCodeRule() {
      getCodeRule({ codeClassifyOid: this.codeClassifyOid }).then((res) => {
        if (res.data && res.data.code === 200) {
          const typeList = [
            "codefixedsec",
            "codeclassifysec",
            "codevariablesec",
            "coderefersec",
          ];
          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
            }
          });
        }
        if (
          item.type === "combox" &&
          item.comboxKey &&
          (!Array.isArray(item.dicData) || item.dicData.length === 0)
        ) {
          dictKeys.push({ dictKey: item.comboxKey, field: item.field });
        }
        // 禁用部分属性（外部传值禁用和参照禁用）
        if (this.disabledProp.includes(item.field) || this.$utilFunc.isValuableObj(item.referConfig)) {
          item.readOnly = true;
        }
        // 设置表单校验的规则，文本
        let message = "请选择";
        let trigger = "change";
        if (item.type === "text") {
          message = "请输入";
          trigger = "blur";
        } else if (item.type === "file") {
          message = "请上传";
        }
        let columnItem = {
          label: item.text,
          labelslot: true,
          prop: this.$utilFunc.isValuableObj(item.referConfig) ? (item.showField || item.field) : item.field,
          type: this.columnType[item.type],
          dicData: this.getDataList(item.type, item.data),
          disabled: this.type === 'detail' ? true : item.readOnly,
          prepend: this.preOrSufFixShow("text", item.prefix),
          append: this.preOrSufFixShow("text", item.suffix),
          prefixIcon: this.preOrSufFixShow("icon", item.prefix),
          suffixIcon: this.preOrSufFixShow("icon", item.suffix),
          valueFormat: item.dateFormate,
          format: item.dateFormate,
          keyAttr: item.keyAttr,
          value: item.defaultValue,
          tip: item.tip,
          comboxKey: item.comboxKey,
          change: () => {
            this.changeFun(item.displayExtension, item.prop);
          },
          span: item.type === "file" || item.type === "textarea" ? 24 : null,
          click: this.clickFun(item.referConfig),
          rules: [
            {
              required: item.required,
              message: `请${message}${item.text}`,
              trigger,
            },
            {
              // 如果没有正则则匹配任何字符
              pattern: item.verify ? item.verify : /[\s\S.]*/g,
              message: item.tooltips,
              trigger,
            },
          ],
          props: {
            label: "value",
            value: "key",
          },
        };
        column.push(columnItem);
        this.$set(this.option, "column", column);
      });
      this.index++;
      this.geDictData(dictKeys);
    },
    changeFun(displayExtension, prop) {
      // executeCode({displayExtension, data: this.form}).then(res => {
      //   this.form[prop] = res.data.data
      // })
    getFormData(form) {
      this.form = form;
    },
    clickFun(referConfig) {
      if (this.type === 'detail') {
        return
    resembleQuerySubmit() {
      this.activeName = "resembleQuery";
      this.$refs.resembleQueryRef.resembleQuery(this.form);
    },
    handleClick() {
      if (this.activeName === "resembleQuery") {
        this.resembleQuerySubmit();
      }
    },
    // 前后缀
    preOrSufFixShow(type, val) {
      if (this.$utilFunc.isEmpty(val) && typeof val !== "string") return;
      const isIcon = val.slice(0, 8) === "el-icon-";
      if ((type === "text" && !isIcon) || (type === "icon" && isIcon)) {
        return val;
    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;
      }
    },
    // 获取swich和已拿到的下拉数据
    getDataList(type, dicData) {
      if (type === "truefalse") {
        return [
      // 进行相似项查询
      const resembleQueryList = await this.$refs.resembleQueryRef.resembleQuery(
        this.form
      );
      if (resembleQueryList.length === 0) {
        this.$emit("submit", this.form);
      } else {
        this.$confirm(
          `该物料已有${resembleQueryList.length}条相似数据，是否继续保存？`,
          "需要您确认",
          {
            key: false,
            value: "否",
          },
          {
            key: true,
            value: "是",
          },
        ];
      } else if (type === "combox") {
        return dicData;
      }
      return [];
    },
    // 获取字典数据
    geDictData(dictKeys) {
      dictKeys.forEach((dictObj) => {
        getDictionary({ code: dictObj.dictKey }).then((res) => {
          if (res.data && res.data.code === 200) {
            this.option.column = this.option.column.map((item) => {
              if (item.field === dictObj.field) {
                let dictData = (res.data.data || []).map((itm) => {
                  itm.value = itm.dictValue;
                  itm.key = itm.dictKey;
                  return itm;
                });
                item.dicData = dictData;
              }
              return item;
            });
            confirmButtonText: "确定",
            cancelButtonText: "取消",
            type: "warning",
          }
        });
      });
        )
          .then(() => {
            this.$emit("submit", this.form);
          })
          .catch(() => {});
      }
    },
    findLinkSubmit() {
      this.templateData.templateVO.data = this.form
      console.log(this.$refs.findLike, 'this.$refs.findLike');
      this.$refs.findLike.findLinkClick(this.templateData.templateVO)
    }
  },
  watch: {
    visible(newV) {
      if (newV) {
        this.getFormTemplate();
        // this.templateRender()
    getType(item) {
      return this.selfColumnType[item.sectype];
    },
    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 [];
      }
    },
  },