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

@@ -26,12 +26,14 @@
      </template>
      <template :slot="item.prop + ''" v-for="item in slotColumnList">
        <vciWebRefer
          :key="item.dataKey" :data-key="item.dataKey"
          v-if="item.type == 'refer'"
          :referConfig="item.referConfig || {}"
          :value="form[item.referConfig.field] || item.value"
          :text="form[item.referConfig.showField]"
          :disabled="item.disabled"
          :display="item.display"
          :reloadData="item.referConfig.reloadData || false"
          @setReferValue="setReferValue"
        ></vciWebRefer>
      </template>
@@ -41,7 +43,7 @@

<script>
import { getFormDetail } from "@/api/formTemplate";
import { getDictionary } from "../../api/system/dict";
import { getEnumDictionary } from "../../api/system/dict";
import vciWebRefer from "../refer/vciWebRefer.vue";
export default {
  name: "FormTemplate",
@@ -60,6 +62,10 @@
      type: String,
      default: "",
    },
    LoadingStatus:{
      type: String,
      default : "code"
    },
    // 列表数据oid
    rowOid: {
      type: String,
@@ -68,7 +74,7 @@
    // 表单类型（add, edit, detail）
    type: {
      type: String,
      default: "add",
      default: "",
    },
    // 自定义表单类型
    selfColumnType: {
@@ -84,10 +90,21 @@
    trendsSpan: {
      type: Number,
      default: 8,
    },
    TreeValue:{
      type: String,
      default: "",
    },
    eventList:{
      type:Array
    }
  },
  data() {
    return {
      codeattrsecValue:'',
      ValidataValue:false,
      eventFlag:{},
      TreeValueForm:'',
      updateIndex: 0,
      form: {},
      option: {
@@ -117,6 +134,13 @@
  mounted() {
    this.handleResize();
  },
  updated() {
  },
  created() {
    if (this.LoadingStatus === 'code') {
      this.loading = false;
    }
  },
  computed: {
    localTrendsSpan() {
      if (this.trendsSpan) {
@@ -126,20 +150,45 @@
        return 24 / Math.floor(windowWidth / 500);
      }
    },

  },
  watch: {
    // 表单数据修改反馈到父组件
    form: {
      deep: true,
      immediate: true,
      handler(newV) {
        this.$emit("getFormData", newV);
      },
    },
    TreeValue:{
      handler(newval,oldval){
        if(newval){
          this.TreeValueForm=newval;
        }
      },
      deep:true,
      immediate:true
    },
  },
  methods: {
    // 渲染表单模板
    templateRender(formItemList) {
    templateRender(formItemList,TreeValue) {
      if (this.eventList) {
        this.eventFlag= this.eventList.some(item => {
          if (item.classifyInvokeEditFlag === 'true') {
            this.eventObject = item;
            return true;
          }
        });
      }
      // 无需分组数据
      let column = [];
      let group = [];
      let dictKeys = [];
      let slotColumnList = [];
      let value=''
      formItemList.forEach((formItem) => {
        formItem = this.resetFormConfig(formItem);
        // console.log('formItem',formItem)
        // console.log('formItem.dicData.value',formItem.dicData)
        if (formItem.type === "line") {
          group.push({
            label: formItem.text,
@@ -173,12 +222,23 @@
          trigger = "blur";
        }
        let fieldMapKey=''
        if( formItem.type == "refer"){
          if(!formItem.fieldMap){
            fieldMapKey=formItem.field+'Id'
          }
        if( formItem.type == "refer" && !formItem.fieldMap){
          fieldMapKey=formItem.field+'Id'
          formItem.fieldMap={}
          formItem.fieldMap[fieldMapKey]='id'
          formItem.fieldMap[formItem.field+'id']='id'
        }


        let columnItem = {
          change:(val)=>{
            // console.log(val)
            if(val.column.field === "drawingno"){
              this.codeattrsecValue=val.value;
            }
            console.log(this.codeattrsecValue)
          },
          dataKey:formItem.dataKey || formItem.field,
          label: formItem.text,
          labelslot: true,
          prop: this.$utilFunc.isValuableObj(formItem.referConfig)
@@ -187,7 +247,7 @@
          field: formItem.field,
          type: this.columnType[formItem.type],
          dicData: this.getDataList(formItem.type, formItem.data),
          disabled: this.type === "detail" ? true : formItem.readOnly,
          disabled: this.type === "detail" ? true : formItem.readOnly || (formItem.codeValueApplyStatus && formItem.codeValueApplyStatus == 2 ?true : false) ,
          prepend: this.preOrSufFixShow("text", formItem.prefix),
          append: this.preOrSufFixShow("text", formItem.suffix),
          prefixIcon: this.preOrSufFixShow("icon", formItem.prefix),
@@ -195,30 +255,33 @@
          valueFormat:formItem.dateFormate,
          format: formItem.dateFormate,
          keyAttr: formItem.keyAttr,
          value: formItem.dicData && formItem.dicData.length > 0 && formItem.type == 'combox' ? formItem.dicData[0].id : null,
          value: (formItem.dicData && formItem.dicData.length > 0 && formItem.secType == "codefixedsec" ? formItem.dicData[0].id : null) ||
            (formItem.secType == "codedatesec" ? formItem.codeDateValue: null) || ( TreeValue && formItem.secType == "codelevelsec" ? TreeValue : null) ||
            (formItem.secType == "codeattrsec" ? this.codeattrsecValue : null),
          placeholder: formItem.inputTip,
          comboxKey: formItem.comboxKey,
          tip: formItem.tooltips,
          // readonly:true,
          // hidden:formItem.secType && formItem.codeValueApplyStatus == 3 ? true : false,
          // readonly:formItem.codeValueApplyStatus && formItem.codeValueApplyStatus == 2 ?true : false ,
          display: !formItem.hidden,
          maxlength: formItem.maxlength,
          filterable: true,
          referConfig:
            formItem.type == "refer"
              ? {
                  title: formItem.text,
                  showField: formItem.showField || formItem.field,
                  field: formItem.field,
                  fieldMap:formItem.fieldMap || {fieldMapKey:'id'},
                  placeholder: formItem.inputTip,
                  options: formItem.referConfig
                }
                title: formItem.text,
                showField: formItem.showField || formItem.field,
                field: formItem.field,
                fieldMap:formItem.fieldMap || {},
                placeholder: formItem.inputTip,
                options: formItem.referConfig
              }
              : {},
          span: formItem.span
            ? formItem.span
            : formItem.type === "textarea"
            ? 24
            : this.localTrendsSpan,
              ? 24
              : this.localTrendsSpan,
          rules: [
            {
              required: formItem.required,
@@ -233,14 +296,12 @@
            },
          ],
          props: {
            label: "value",
            label: "itemName",
            value: "key",
          },
        };
        if(columnItem.type == "select"){

        }
        console.log('columnItem',columnItem)
        // console.log('formItem',formItem)
        // console.log('columnItem',columnItem)
        slotColumnList.push(columnItem);
        if (group.length === 0) {
          column.push(columnItem);
@@ -259,6 +320,121 @@
      this.geDictData(dictKeys);
      this.getFormDetail();

    },
    //修改级联项
    changeChildItem(items,TreeValue) {
      let column = this.option.column;
      let group = this.option.group;
      let that=this;
      items.forEach((item) => {
        let formItem = this.resetFormConfig(item);
        if (formItem.field == "lcstatus") {
          formItem.field = formItem.field + "_text";
          formItem.readOnly = true;
        }
        // 设置表单校验的规则，文本
        let message = "请选择";
        let trigger = "change";
        if (formItem.type === "text") {
          message = "请输入";
          trigger = "blur";
        }
        let fieldMapKey = ''
        if (formItem.type == "refer" && !formItem.fieldMap) {
          fieldMapKey = formItem.field + 'Id'
          formItem.fieldMap = {}
          formItem.fieldMap[fieldMapKey] = 'id'
          formItem.fieldMap[formItem.field + 'id'] = 'id'
        }
        let columnItem = {
          label: formItem.text,
          labelslot: true,
          prop: this.$utilFunc.isValuableObj(formItem.referConfig)
            ? formItem.showField || formItem.field
            : formItem.field,
          field: formItem.field,
          type: this.columnType[formItem.type],
          dicData: this.getDataList(formItem.type, formItem.data),
          disabled: this.type === "detail" ? true : formItem.readOnly || (formItem.codeValueApplyStatus && formItem.codeValueApplyStatus == 2 ? true : false),
          prepend: this.preOrSufFixShow("text", formItem.prefix),
          append: this.preOrSufFixShow("text", formItem.suffix),
          prefixIcon: this.preOrSufFixShow("icon", formItem.prefix),
          suffixIcon: this.preOrSufFixShow("icon", formItem.suffix),
          valueFormat: formItem.dateFormate,
          format: formItem.dateFormate,
          keyAttr: formItem.keyAttr,
          value: (formItem.dicData && formItem.dicData.length > 0 && formItem.secType == "codefixedsec" ? formItem.dicData[0].id : null) ||
            (formItem.secType == "codedatesec" ? formItem.codeDateValue : null) || (TreeValue && formItem.secType == "codelevelsec" ? TreeValue : null),
          placeholder: formItem.inputTip,
          comboxKey: formItem.comboxKey,
          tip: formItem.tooltips,
          // hidden:formItem.secType && formItem.codeValueApplyStatus == 3 ? true : false,
          // readonly:formItem.codeValueApplyStatus && formItem.codeValueApplyStatus == 2 ?true : false ,
          display: !formItem.hidden,
          maxlength: formItem.maxlength,
          filterable: true,
          referConfig:
            formItem.type == "refer"
              ? {
                title: formItem.text,
                showField: formItem.showField || formItem.field,
                field: formItem.field,
                fieldMap: formItem.fieldMap || {},
                placeholder: formItem.inputTip,
                options: formItem.referConfig
              }
              : {},
          span: formItem.span
            ? formItem.span
            : formItem.type === "textarea"
              ? 24
              : this.localTrendsSpan,
          rules: [
            {
              required: formItem.required,
              message: `${message}${formItem.text}`,
              trigger,
            },
            {
              // 如果没有正则则匹配任何字符
              pattern: formItem.verify ? formItem.verify : /[\s\S.]*/g,
              message: formItem.tooltips,
              trigger,
            },
          ],
          props: {
            label: "value",
            value: "key",
          },
        };

        if (group.length === 0) {
          that.slotColumnList.forEach((colItem,index) => {
            if (colItem.field == columnItem.field) {
              that.slotColumnList[index] = columnItem;
              column[index] = columnItem;
              return;
            }
          })
        } else {
          that.slotColumnList.forEach((colItem,index) => {
            if (colItem.field == columnItem.field) {
              that.slotColumnList[index] = columnItem;
              return;
            }
          })
          group.forEach((groupItem,index) => {
            groupItem.column.forEach((colItem,colIndex) => {
              if (colItem.field == columnItem.field) {
                group[index].column[colIndex] = columnItem;
                return;
              }
            })
          });
        }
      });
      that.$set(that.option, "column", column);
      that.$set(that.option, "group", group);
    },
    // 使用传入的表单数据配置
    resetFormConfig(formItem) {
@@ -326,7 +502,8 @@
    // 异步获取字典数据
    geDictData(dictKeys) {
      dictKeys.forEach((dictObj) => {
        getDictionary({ code: dictObj.dictKey }).then((res) => {
        getEnumDictionary({ code: dictObj.dictKey }).then((res) => {
          console.log(res)
          if (res.data && res.data.code === 200) {
            this.option.column = this.option.column.map((item) => {
              if (item.field === dictObj.field) {
@@ -350,6 +527,7 @@
          if (valid) {
            done();
            resolve(true);
            this.ValidataValue=true;
          } else {
            resolve(false);
          }
@@ -380,21 +558,24 @@
              if (!_item.attributes) {
                _item.attributes = _item;
              }
              if (!_item.attributes.data) {
                _item.attributes.data = {};
              }
              if (mapFields.length == 1) {
                var mapField = mapFields[0];
                if (mapField.indexOf("attribute.") > -1) {
                  temp = _item['attributes'][mapField.subString("attribute.".length)];
                  temp = _item['attributes'][mapField.subString("attribute.".length)] || _item['attributes']['data'][mapField.subString("attribute.".length)];
                } else {
                  temp = _item['attributes'][mapField] || _item[mapField];
                  temp = _item['attributes'][mapField] ||_item['attributes']['data'][mapField] || _item[mapField];
                }
              } else {
                //有多个
                var mutiTemp = [];
                layui.each(mapFields, function (_indexField, _itemField) {
                  if (_itemField.indexOf("attribute.") > -1) {
                    mutiTemp.push(_item['attributes'][_itemField.subString("attribute.".length)]);
                    mutiTemp.push(_item['attributes'][_itemField.subString("attribute.".length)] || _item['attributes']['data'][_itemField.subString("attribute.".length)]);
                  } else {
                    mutiTemp.push(_item['attributes'][_itemField] || _item[_itemField]);
                    mutiTemp.push(_item['attributes'][_itemField] || _item['attributes']['data'][_itemField] || _item[_itemField]);
                  }
                });
                temp = mutiTemp.join(' ');
@@ -406,19 +587,9 @@
            this.form[key] = value.join(',');
          }
        }
        this.$emit("getFormData", this.form);
        this.$emit("referConfigDataUpdate", data);
        this.$emit("getFormData", this.form);
      }
    },
  },
  watch: {
    // 表单数据修改反馈到父组件
    form: {
      deep: true,
      immediate: true,
      handler(newV) {
        this.$emit("getFormData", newV);
      },
    },
  },
};