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

@@ -1,790 +1,789 @@
<template>

  <el-dialog

    :visible.sync="dialogVisible"

    v-dialogDrag

    top="0vh"

    title="提示"

    class="avue-dialog avue-dialog--top"

    :width="dialogOptions.width"

    append-to-body

  >

    <avue-form

      v-model="form"

      :option="option"

      v-loading="loading"

      ref="form"

      :key="index"

    >

      <template :slot="item.prop + 'Label'" v-for="item in option.column">

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

      </template>

    </avue-form>

    <div class="avue-dialog__footer">

      <el-button @click="close()">取 消</el-button>

      <el-button @click="close()" type="primary">确 定</el-button>

    </div>

    <el-dialog title="测试参照" :visible.sync="visible2" append-to-body>

      <div style="height: 100px;">

        <p>部门数据 {depName: '我是部门名称', depId: '我是部门id'}</p>

      </div>

      <div class="avue-dialog__footer">

        <el-button @click="visible2 = false">取 消</el-button>

        <el-button @click="czSubmit" type="primary">确 定</el-button>

      </div>

    </el-dialog>

  </el-dialog>

</template>



<script>

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

import { getDictionary } from "../../api/system/dict";

export default {

  name: "FormTemplate",

  props: {

    visible: {

      type: Boolean,

      default: false,

    },

    disabledProp: {

      type: Array,

      default: () => ["id"],

    },

  },

  data() {

    return {

      index: 0,

      form: {},

      loading: false,

      dialogOptions: {

        width: "60%",

      },

      option: {

        emptyBtn: false,

        submitBtn: false,

        labelWidth: "120",

        column: [],

      },

      templateData: {},

      columnType: {

        text: "input",

        combox: "select",

        truefalse: "switch",

        number: "number",

        textarea: "textarea",

        datetime: "datetime",

        date: "date",

        file: "upload",

      },

      // 假数据

      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: "beizhushuoming",

          hidden: false,

          keyAttr: false,

          prefix: "",

          readOnly: false,

          referConfig: null,

          required: false,

          selectLibFlag: "",

          showField: null,

          suffix: "",

          text: "文件功能",

          tooltips: "",

          type: "file",

          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: "",

        },

      ],

      visible2: false,

    };

  },

  created() {

  },

  computed: {

    dialogVisible: {

      get() {

        return this.visible;

      },

      set(val) {

        this.$emit("update:visible", val);

      },

    },

  },

  methods: {

    getFormTemplate() {

      this.loading = true;

      getFormTemplate({

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

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

        page: 1,

        limit: 30,

      })

        .then((res) => {

          if (res.status === 200) {

            this.templateData = res.data;

            this.templateRender();

          }

          this.loading = false;

          console.log(res.data);

        })

        .catch((err) => {

          this.loading = false;

          console.log(err);

        });

    },

    templateRender() {

      // const items = this.templateData.formDefineVO.items;

      const items = this.testItems;

      let column = [];

      let dictKeys = [];

      items.forEach((item) => {

        // 隐藏表单元素

        if (item.hide) {

          return;

        }

        // 手机字典key统一异步请求获取

        if (!this.$utilFunc.isEmpty(item.comboxKey)) {

          dictKeys.push({ dictKey: item.comboxKey, field: item.field });

        }

        // 禁用部分属性

        if (this.disabledProp.includes(item.field)) {

          item.disabled = 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: item.referConfig ? item.showField : item.field,

          type: this.columnType[item.type],

          dicData: this.getDataList(item.type, item.data),

          disabled: item.disabled,

          readonly: 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: ({ value, column }) => {

            this.changeFun(value, column, item.displayExtension);

          },

          click: this.clickFun(item.referConfig),

          // action:

          //   item.type === "file"

          //     ? "/api/ubcs-resource/oss/endpoint/put-file"

          //     : "",

          // propsHttp: {

          //   res: "data",

          //   url: "link",

          // },

          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(value, column, jsCode) {

      if (typeof jsCode === "string" && jsCode.length > 0) {

        eval(jsCode);

      }

    },

    clickFun(referConfig) {

      if (referConfig) {

        return () => {

          this.visible2 = true

        }

      }

    },

    czSubmit() {

      this.visible2 = false

      this.form = Object.assign(this.form, {

        depName: "我是部门名称",

        depId: "我是部门id",

      });

    },

    close() {

      this.dialogVisible = false;

    },

    // 前后缀

    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;

      }

    },

    // 获取swich和已拿到的下拉数据

    getDataList(type, dicData) {

      if (type === "truefalse") {

        return [

          {

            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;

            });

          }

        });

      });

    },

  },

  watch: {

    visible(newV) {

      if (newV) {

        this.getFormTemplate();

      }

    },

  },

};

</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>

<template>
  <el-dialog
    :visible.sync="dialogVisible"
    v-dialogDrag
    top="0vh"
    title="提示"
    class="avue-dialog avue-dialog--top"
    :width="dialogOptions.width"
    append-to-body
  >
    <avue-form
      v-model="form"
      :option="option"
      v-loading="loading"
      ref="form"
      :key="index"
    >
      <template :slot="item.prop + 'Label'" v-for="item in option.column">
        <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>
      </template>
    </avue-form>
    <div class="avue-dialog__footer">
      <el-button @click="close()">取 消</el-button>
      <el-button @click="close()" type="primary">确 定</el-button>
    </div>
    <el-dialog title="测试参照" :visible.sync="visible2" append-to-body>
      <div style="height: 100px;">
        <p>部门数据 {depName: '我是部门名称', depId: '我是部门id'}</p>
      </div>
      <div class="avue-dialog__footer">
        <el-button @click="visible2 = false">取 消</el-button>
        <el-button @click="czSubmit" type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </el-dialog>
</template>

<script>
import { getFormTemplate } from "../../api/common";
import { getDictionary } from "../../api/system/dict";
export default {
  name: "FormTemplate",
  props: {
    visible: {
      type: Boolean,
      default: false,
    },
    disabledProp: {
      type: Array,
      default: () => ["id"],
    },
  },
  data() {
    return {
      index: 0,
      form: {},
      loading: false,
      dialogOptions: {
        width: "60%",
      },
      option: {
        emptyBtn: false,
        submitBtn: false,
        labelWidth: "120",
        column: [],
      },
      templateData: {},
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        textarea: "textarea",
        datetime: "datetime",
        date: "date",
        file: "upload",
      },
      // 假数据
      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: "beizhushuoming",
          hidden: false,
          keyAttr: false,
          prefix: "",
          readOnly: false,
          referConfig: null,
          required: false,
          selectLibFlag: "",
          showField: null,
          suffix: "",
          text: "文件功能",
          tooltips: "",
          type: "file",
          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: "",
        },
      ],
      visible2: false,
    };
  },
  created() {
  },
  computed: {
    dialogVisible: {
      get() {
        return this.visible;
      },
      set(val) {
        this.$emit("update:visible", val);
      },
    },
  },
  methods: {
    getFormTemplate() {
      this.loading = true;
      getFormTemplate({
        templateOid: "78B8C7C5-A042-0B96-FE6D-65421451782A",
        codeClassifyOid: "4524E801-6CC6-92E8-1AC3-2AB9604E8F96",
        page: 1,
        limit: 30,
      })
        .then((res) => {
          if (res.status === 200) {
            this.templateData = res.data;
            this.templateRender();
          }
          this.loading = false;
          console.log(res.data);
        })
        .catch((err) => {
          this.loading = false;
          console.log(err);
        });
    },
    templateRender() {
      // const items = this.templateData.formDefineVO.items;
      const items = this.testItems;
      let column = [];
      let dictKeys = [];
      items.forEach((item) => {
        // 隐藏表单元素
        if (item.hide) {
          return;
        }
        // 手机字典key统一异步请求获取
        if (!this.$utilFunc.isEmpty(item.comboxKey)) {
          dictKeys.push({ dictKey: item.comboxKey, field: item.field });
        }
        // 禁用部分属性
        if (this.disabledProp.includes(item.field)) {
          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: item.referConfig ? item.showField : item.field,
          type: this.columnType[item.type],
          dicData: this.getDataList(item.type, item.data),
          disabled: 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: ({ value, column }) => {
            this.changeFun(value, column, item.displayExtension);
          },
          click: this.clickFun(item.referConfig),
          // action:
          //   item.type === "file"
          //     ? "/api/ubcs-resource/oss/endpoint/put-file"
          //     : "",
          // propsHttp: {
          //   res: "data",
          //   url: "link",
          // },
          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(value, column, jsCode) {
      if (typeof jsCode === "string" && jsCode.length > 0) {
        eval(jsCode);
      }
    },
    clickFun(referConfig) {
      if (referConfig) {
        return () => {
          this.visible2 = true
        }
      }
    },
    czSubmit() {
      this.visible2 = false
      this.form = Object.assign(this.form, {
        depName: "我是部门名称",
        depId: "我是部门id",
      });
    },
    close() {
      this.dialogVisible = false;
    },
    // 前后缀
    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;
      }
    },
    // 获取swich和已拿到的下拉数据
    getDataList(type, dicData) {
      if (type === "truefalse") {
        return [
          {
            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;
            });
          }
        });
      });
    },
  },
  watch: {
    visible(newV) {
      if (newV) {
        this.getFormTemplate();
      }
    },
  },
};
</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>