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

@@ -1,28 +1,48 @@
<!-- eslint-disable vue/valid-v-for -->

<!-- eslint-disable vue/require-v-for-key -->

<template>

  <avue-form v-model="form" :option="option" v-loading="loading" ref="form">

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

      </span>

    </template>

  </avue-form>

  <div>

    <avue-form

      v-model="form"

      :option="option"

      v-loading="loading"

      ref="form"

      :style="{ minHeight: loading ? '300px' : '' }"

    >

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

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

        </span>

      </template>

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

        <vciWebRefer

          v-if="item.type == 'refer'"

          :value="item.value"

          :options="item.referConfig || {}"

        ></vciWebRefer>

      </template>

    </avue-form>

  </div>

</template>



<script>

import { getFormTemplate } from "@/api/formTemplate";

import { getFormTemplate, getFormDetail } from "@/api/formTemplate";

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

import vciWebRefer from "../refer/vciWebRefer.vue";

export default {

  name: "FormTemplate",

  components: { vciWebRefer },

  props: {

    // 默认禁用元素

    disabledProp: {

      type: Array,

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

@@ -35,22 +55,22 @@
      type: String,

      default: "",

    },

    editForm: {

      type: Object,

      default: () => ({}),

    // 列表数据oid

    rowOid: {

      type: String,

      default: "",

    },

    // 表单类型（add, edit, detail）

    type: {

      type: String,

      default: "add",

    },

    dialogOpen: {

      type: Boolean,

      default: false,

    },

    // 自定义表单类型

    selfColumnType: {

      type: Object,

      default: () => ({}),

    },

    // 自定义表单属性

    selfColumnConfig: {

      type: Object,

      default: () => ({}),

@@ -63,12 +83,11 @@
      option: {

        emptyBtn: false,

        submitBtn: false,

        labelWidth: "130",

        labelWidth: "140",

        column: [],

        group: [],

      },

      loading: false,

      templateData: {},

      loading: true,

      columnType: {

        text: "input",

        combox: "select",

@@ -77,6 +96,7 @@
        textarea: "textarea",

        datetime: "datetime",

        date: "date",

        refer: "refer",

      },

      // 假数据

      testItems: [

@@ -421,79 +441,6 @@
          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,

@@ -527,14 +474,14 @@
          keyAttr: false,

          prefix: "",

          readOnly: true,

          referConfig: true,

          referConfig: {},

          required: false,

          selectLibFlag: "",

          showField: "depId",

          suffix: "",

          text: "参照",

          tooltips: "",

          type: "text",

          type: "refer",

          unique: false,

          verify: "",

        },

@@ -543,41 +490,47 @@
      defaultValue: {},

      // 表单属性

      attributes: [],

      // 表单元素

      items: [],

      slotColumnList: [],

    };

  },

  mounted() {

    this.handleResize();

  },

  methods: {

    // 初始化

    init(columnList) {

      if (Array.isArray(columnList)) {

        this.templateRender(columnList);

      } else {

        this.getFormTemplate();

      }

    },

    // 接口获取表单数据

    getFormTemplate() {

      this.loading = true;

      getFormTemplate({

        templateOid: this.templateOid,

        codeClassifyOid: this.codeClassifyOid,

      })

        .then((res) => {

          if (res.status === 200) {

            this.templateData = res.data;

            // 表单元素（过滤需要隐藏的属性）

            this.items = res.data.formDefineVO.items;

            this.templateRender();

            this.templateRender(res.data.formDefineVO.items);

            this.$emit("getFormTemplateEnd", res.data);

          }

          this.loading = false;

        })

        .catch((err) => {

          this.loading = false;

          console.log(err);

        });

    },

    templateRender() {

    // 渲染表单模板

    templateRender(formItemList) {

      // 无需分组数据

      let column = [];

      let group = [];

      let dictKeys = [];

      this.items.forEach((formItem) => {

      let slotColumnList = [];

      formItemList.forEach((formItem) => {

        formItem = this.resetFormConfig(formItem);

        if (formItem.type === "line") {

          group.push({

            label: formItem.text,

@@ -594,10 +547,7 @@
          dictKeys.push({ dictKey: formItem.comboxKey, field: formItem.field });

        }

        // 禁用部分属性（外部传值禁用和参照禁用）

        if (

          this.disabledProp.includes(formItem.field) ||

          this.$utilFunc.isValuableObj(formItem.referConfig)

        ) {

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

          formItem.readOnly = true;

        }

        // 设置表单校验的规则，文本

@@ -606,8 +556,6 @@
        if (formItem.type === "text") {

          message = "请输入";

          trigger = "blur";

        } else if (formItem.type === "file") {

          message = "请上传";

        }

        let columnItem = {

          label: formItem.text,

@@ -627,16 +575,17 @@
          format: formItem.dateFormate,

          keyAttr: formItem.keyAttr,

          value: formItem.defaultValue,

          tip: formItem.tooltips,

          tipPlacement: "right",

          // tip: formItem.tooltips,

          // tipPlacement: "right",

          placeholder: formItem.inputTip,

          comboxKey: formItem.comboxKey,

          display: !formItem.hidden,

          maxlength: formItem.maxlength,

          filterable: true,

          change: () => {

            this.changeFun(formItem.displayExtension, formItem.prop);

          },

          span: formItem.type === "textarea" ? 24 : this.trendsSpan,

          click: this.clickFun(formItem.referConfig),

          rules: [

            {

              required: formItem.required,

@@ -655,28 +604,53 @@
            value: "key",

          },

        };

        columnItem = this.resetFormConfig(columnItem);

        slotColumnList.push(columnItem);

        if (group.length === 0) {

          column.push(columnItem);

        } else {

          group[group.length - 1]["column"].push(columnItem);

        }

      });

      this.slotColumnList = slotColumnList;

      this.$set(this.option, "column", column);

      this.$set(this.option, "group", group);

      this.formIndex++;

      this.loading = false;

      this.geDictData(dictKeys);

      this.getFormDetail()

    },

    // 使用传入的表单数据配置

    resetFormConfig(formItem) {

      for (const key in this.selfColumnConfig) {

        if (Object.hasOwnProperty.call(this.selfColumnConfig, key)) {

          const element = this.selfColumnConfig[key];

          formItem[key] = element;

      for (const configType in this.selfColumnConfig) {

        if (Object.hasOwnProperty.call(this.selfColumnConfig, configType)) {

          const element = this.selfColumnConfig[configType];

          if (configType === "function") {

            for (const attr in element) {

              if (Object.hasOwnProperty.call(element, attr)) {

                const fun = element[attr];

                formItem[attr] = fun(formItem);

              }

            }

          } else if (configType === "exchange") {

            for (const newAttr in element) {

              if (Object.hasOwnProperty.call(element, newAttr)) {

                const oldAttr = element[newAttr];

                formItem[newAttr] = formItem[oldAttr];

              }

            }

          } else if (configType === "directVoluation") {

            for (const attr in element) {

              if (Object.hasOwnProperty.call(element, attr)) {

                const value = element[attr];

                formItem[attr] = value;

              }

            }

          }

        }

      }

      return formItem;

    },

    // 根据屏幕动态配置表单布局

    handleResize() {

      let windowWidth = document.body.clientWidth;

      this.trendsSpan = 24 / Math.floor(windowWidth / 500);

@@ -694,11 +668,6 @@
      // executeCode({displayExtension, data: this.form}).then(res => {

      //   this.form[prop] = res.data.data

      // })

    },

    clickFun(referConfig) {

      if (this.type === "detail") {

        return;

      }

    },

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

    getDataList(type, dicData) {

@@ -718,7 +687,7 @@
      }

      return [];

    },

    // 获取字典数据

    // 异步获取字典数据

    geDictData(dictKeys) {

      dictKeys.forEach((dictObj) => {

        getDictionary({ code: dictObj.dictKey }).then((res) => {

@@ -738,16 +707,30 @@
        });

      });

    },

    // 表单校验

     validate() {

      return new Promise((resolve) => {

        this.$refs.form.validate((valid, done, msg) => {

          console.error(msg, valid)

        if (valid) {

          resolve(true)

        } else {

          resolve(false);

        }

      });

      })

      
    },

    // 获取表单数据

    getFormDetail() {

      if (this.type === 'add') return

      getFormDetail({templateOid: this.templateOid, oid: this.rowOid}).then(res => {

        console.log(res, 'res');

      })

    }

  },

  watch: {

    dialogOpen: {

      immediate: true,

      handler(newV) {

        if (newV) {

          this.getFormTemplate();

        }

      },

    },

    // 表单数据修改反馈到父组件

    form: {

      deep: true,

      immediate: true,

@@ -759,4 +742,10 @@
};

</script>



<style lang="less" scoped></style>

<style lang="scss" scoped>

.key_attr_icon {

  font-size: 20px !important;

  vertical-align: baseline;

  color: red;

}

</style>