通用表单组件

 Source/ProjectWeb/src/actions/base/AddAction.js

@@ -5,6 +5,7 @@
import {validatenull} from "@/util/validate";
import Vue from "vue";


export const doAction = (options) => {
  options.paramVOS = paramLow(options.paramVOS)
  const paramVOS = Object.assign({

 Source/ProjectWeb/src/api/base/ui.js

@@ -43,3 +43,17 @@
    data: formData
  })
}

//UI上下文表单查询
export const dataForm = (params) => {
  let formData = new FormData()
  for(let key in params){
    formData.append(key.replaceAll('"',''),params[key])
  }
  return request({
    url: '/api/uiDataController/dataFormQuery',
    method: 'post',
    headers:{"Content-Type": "application/text"},
    data: formData
  })
}

 Source/ProjectWeb/src/components/PLT-basic-component/BasicForm.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,251 @@
<template>
  <!--动态模板-->
  <avue-form ref="formRef" :option="option" v-model="form">
    <template v-for="item in allColumn" :slot="`${item.prop}`" v-if="item.propType === 'refer' || item.type === 'refer'">
      <vciWebRefer
        :key="item.prop"
        referType="master"
        :data-key="item.prop"
        :disabled="item.disabled || false"
        :display="item.display || true"
        :referConfig="item.referConfigTemp || {}"
        :reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
        :text="form[item.referConfig.showProp]"
        :value="form[item.prop]"
        @setReferValue="setReferValue"
      ></vciWebRefer>
    </template>
  </avue-form>
</template>
<script>
// è¡¨å•æ¨¡æ¿
import vciWebRefer from "@/components/refer/vciWebRefer.vue";
import { formatMilliseconds } from "@/util/formatTime";
import { validatenull } from "@/util/validate";

export default {
  name: "basicForm",
  components: { vciWebRefer },
  props: {
    formItems:{
      type: Array,
      default: () => [],
    },
    formData:{
      type: Object,
      default: () => {},
    },
    labelWidth:{
      type:Number,
      default:120
    },
    span:{
      type:Number,
      default:12
    },
    detail:{
      type:Boolean,
      default:false
    },
    disabled:{
      type:Boolean,
      default:false
    },
  },
  data() {
    return {
      form: this.formData,
      option: {
        menuBtn:false,
        submitBtn: false,
        emptyBtn: false,
        detail: this.$props.detail,
        labelWidth: this.$props.labelWidth,
        column: [],
        group: [],
      },
      allColumn:[],
      columnType: {
        text: "input",
        combox: "select",
        truefalse: "switch",
        number: "number",
        textarea: "textarea",
        datetime: "datetime",
        date: "date",
        refer: "refer",
      }
    };
  },
  watch: {
    formItems: {
      handler(val) {
        if(val[0] &&val[0].column && val[0].column.isArray()){
          this.getInitGroup(val);
        }else{
          this.getInit(val);
        }
      },
      immediate: true,
    },
    formData: {
      handler(val) {
        this.form=this.$props.formData;
      },
      immediate: true,
    },
    form: {
      handler(val) {
        for (let code of this.option.column) {
          if (
              (code.propType == "refer"  || code.type == 'refer' )&&
            code.referConfig &&
            code.referConfig.useFormKey
          ) {
            code.referConfig.formValues = val;
            code.referConfigTemp.options = code.referConfig;
          }
        }
        for (let code of this.option.group) {
          for (let col of code.column) {
            if (
                (col.propType == "refer"  || col.type == 'refer')&&
              col.referConfig &&
              col.referConfig.useFormKey
            ) {
              col.referConfig.formValues = val;
              col.referConfigTemp.options = col.referConfig;
            }
          }
        }
        this.$emit("input", val);
      },
      deep: true,
      immediate: true
    },
  },
  methods: {
    getInit(val) {
      const column=[];
      for (let code of val) {
        code = this.initItem(code);
        column.push(code);
        this.allColumn.push(code);
      }
      this.option.column = column;
    },
    getInitGroup(val) {
      const group=[];
      for (let code of val) {
        const column=[];
        for (let col of code.column) {
          col = this.initItem(col)
          column.push(col);
          this.allColumn.push(col);
        }
        group.push(column)
      }
      this.option.group = group;
    },
    initItem(item){
      const type=this.columnType[this.type] || this.type
      const col= {
        ...item,
        label: item.text,
        prop: item.field,
        type: type,
        labelWidth: this.labelWidth || (item.text.length >= 6 ? 115 : 90),
        disabled: item.disabled || this.disabled,
        span: item.span
          ? item.span
          : item.type === "textarea"
            ? 24
            : this.span,
        value: item.defaultValue,
        dicData: type === 'select' ? item.dicData : item.dicUrl,
        display: !item.hidden,
        labelSuffix: item.suffix,
        suffixIcon: item.prefix,
        tip: item.tooltips,
        dictCode: item.comboxKey,
        rules: [{
          required: item.required,
          message: `请输入${item.text}!`,
          trigger: "blur"
        }]
      }
      if (col.propType === "dict") {
        if(!validatenull(col.dictCode)) {
          /*this.getDicts(col.dictCode).then((res) => {
            if (res.success) {
              const dic = res.obj.data;
              col.dicData = dic.map((d) => {
                return {
                  label: d.name,
                  key: d.code,
                  value: d.code,
                };
              });
            }
          });*/
        }
      }
      if (col.propType === "refer"|| col.type==='refer') {
        if (col.referConfig && col.referConfig.useFormKey) {
          if (validatenull(col.referConfig.formValuesKey)) {
            col.referConfig.formValuesKey = "form";
          }
          col.referConfig.formValues = this[col.referConfig.formValuesKey];
        }
        col.referConfigTemp = {
          title: col.label,
          showProp: col.showProp || col.referConfig.showProp || col.prop + "Name",
          prop: col.prop,
          propMap: col.propMap || {},
          placeholder: col.placeholder
            ? col.placeholder
            : ` è¯·é€‰æ‹©` + col.label,
          options: col.referConfig,
        };
      }
      return col;
    },
    setReferValue(data) {
      if (data.prop) {
        this.form[data.prop] = data.value || "";
        this.form[data.showProp] = data.text || "";
        if (data.propMap) {
          //说明需要映射
          for (let key in data.propMap) {
            let mapFields = data.propMap[key].split(",");
            let value = [];
            data.rawData.forEach((_item) => {
              var temp;
              if (!_item.extendData) {
                _item.extendData = {};
              }
              if (mapFields.length == 1) {
                var mapField = mapFields[0];
                temp = _item[mapField] || _item["extendData"][mapField];
              } else {
                //有多个
                var mutiTemp = [];
                mapFields.forEach((_itemField) => {
                  mutiTemp.push(
                    _item[_itemField] || _item["extendData"][_itemField]
                  );
                });
                temp = mutiTemp.join(" ");
              }
              if (temp != null && temp != "") {
                value.push(temp);
              }
            });
            this.form[key] = value.join(",");
          }
        }
      }
    }
  },
};
</script>

 Source/ProjectWeb/src/components/actions/formDialog.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,16 @@
<template>
  <dialog>

  </dialog>
</template>

<script>

export default {
  name: "formDialog"
}
</script>

<style scoped>

</style>

 Source/ProjectWeb/src/components/dynamic-components/dynamic-button.vue

@@ -318,55 +318,54 @@
          item=item.replace(/:/g,'=');
        }
      }
      /*if (paramVOS['initvalue']) {
        var values = paramVOS['initvalue'].split(';');
        var initValues = []
        layui.each(values, function (i, item) {
          item=item.replace(':','=');
      paramVOS['initvalue']=paramVOS['initvalue'] || paramVOS['initValue'];
      let isShow = true;
      if (paramVOS['initvalue']) {
        let values = paramVOS['initvalue'].split(';');
        let initValues = {}
        values.forEach((i, item) => {
          item = item.replace(':', '=');
          if (item.indexOf('${') > -1) {
            if (item.split('=')[1].indexOf('.') > -1) {
              if (sourceData.length<1 || !sourceData[0].oid) {
              if (this.sourceData.length < 1 || !this.sourceData.oid) {
                isShow = false;
                $webUtil.showErrorMsg("请先选择一条来源数据");
                this.$message.error("请先选择一条来源数据");
                return false;
              }
              var name = item.split('=')[1].split('.')[1].replace('${', '').replace('}', '');
              if (name == 'oid') {
                item = item.split('=')[0] + '=' + sourceData[0]['oid']
              } else {
                item = item.split('=')[0] + '=' + sourceData[0][name]
              }
              let name = item.split('=')[1].split('.')[1].replace('${', '').replace('}', '');
              initValues[item.split('=')[0]] = this.sourceData[name]
            } else {
              if (dataStore.length < 1) {
              if (this.dataStore.length < 1) {
                isShow = false;
                $webUtil.showErrorMsg("请先选择一条数据");
                this.$message.error("请先选择一条数据");
                return false;
              }
              var name = item.split('=')[1].replace('${', '').replace('}', '');
              item = item.split('=')[0] + '=' + dataStore[0][name];
              let name = item.split('=')[1].replace('${', '').replace('}', '');
              initValues[item.split('=')[0]] = this.dataStore[0][name];

            }
          }
          initValues.push(item)
        })
        paramVOS['initvalue'] = initValues.join(';')
      }*/
        paramVOS['initvalue'] = initValues
      }
      if(paramVOS['BSContent'] || paramVOS['BSContext']){
        paramVOS['context']=paramVOS['BSContext'] || paramVOS['BSContent']
        paramVOS['content']=paramVOS['BSContext'] || paramVOS['BSContent'];
      }

      const that=this;
      doAction(item, {
        paramVOS: paramVOS,
        dataStore: this.dataStore || [],
        sourceData: this.sourceData || {},
        callback: function () {
          if (that.$parent.handleRefresh) {
            that.$parent.handleRefresh()
      if(isShow){
        doAction(item, {
          paramVOS: paramVOS,
          dataStore: this.dataStore || [],
          sourceData: this.sourceData || {},
          callback: function () {
            if (that.$parent.handleRefresh) {
              that.$parent.handleRefresh()
            }
          }
        }
      });
        });
      }
    }
  },
}

 Source/ProjectWeb/src/components/dynamic-components/dynamic-form.vue

@@ -1,52 +1,17 @@
<template>
  <div :id="'UI-dynamic-'+areasName+componentVO.oid" class="UI-dynamic">
    <avue-form v-model="form" :option="option">
      <template v-for="item in slotData" :slot="item.prop + 'Label'">
        <span>
          <span>{{ item.label }} </span>
          <el-tooltip
            v-if="item.keyAttr"
            class="item"
            content="该属性为关键属性"
            effect="dark"
            placement="top-start"
          >
            <i class="el-icon-star-on" style="font-size: 17px !important; color: red;vertical-align: baseline;"></i>
          </el-tooltip>
        </span>
      </template>
      <template slot="menuForm">
        <dynamic-button :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData" type="form" @buttonClick="buttonClick"></dynamic-button>
      </template>

      <template v-for="item in slotData" :slot="item.prop + ''">
        <vciWebRefer v-if="item.type == 'refer'"
                     :key="item.prop"
                     :ref="'referFormRef'+item.prop"
                     :data-key="item.prop"
                     :disabled="item.disabled || false"
                     :display="item.display || true"
                     :referConfig="item.referConfig || {}"
                     :reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
                     :text="item.referConfig.showProp"
                     :value="item.prop || item.value"
                     referType="master"
                     @setReferValue="setReferValue">

        </vciWebRefer>
      </template>
    </avue-form>
    <dynamic-button v-if="componentVO && componentVO.buttons" :componentVO="componentVO" :butttonList="componentVO.buttons" :dataStore="[form]" :sourceData="sourceData" type="form"></dynamic-button>
    <basic-form :span="this.componentVO.formDefineVO.columnOneRow?(24/this.componentVO.formDefineVO.columnOneRow) : 12"
                :formItems="this.componentVO.formDefineVO && this.componentVO.formDefineVO.items"
                :formData="form">
    </basic-form>
  </div>
</template>

<script>

import VciWebRefer from "@/components/refer/vciWebRefer";
import {verifyNull, verifySlash} from "@/util/validate";

export default {
  name: "dynamic-form",
  components: {VciWebRefer},
  props: {
    //ui上下文的业务类型（或链接类型）
    uiBtmType: {
@@ -95,202 +60,32 @@
  },
  mounted() {
  },
  computed: {
    option() {
      return {
        submitBtn: false,
        emptyBtn: false,
        height: 300,
        column: this.getColumnData()
      }
    },
    slotData() {
      return this.getColumnData()
    }
  },
  watch: {
    slotData: {
      handler(newV) {
        this.getDictList(newV)
      },
      immediate: true,
    },
    form: {
      handler(val) {
        if (val) {
          if (Array.isArray(val)) { // æ£€æŸ¥ val æ˜¯å¦ä¸ºæ•°ç»„
            for (let code of val) {
              if (
                code.type == "refer" &&
                code.referConfig &&
                code.referConfig.useFormKey
              ) {
                code.referConfig.formValues = val;
                // code.referConfigTemp.options = code.referConfig;
              }
            }
          } else if (typeof val === 'object') { // æ£€æŸ¥ val æ˜¯å¦ä¸ºå¯¹è±¡
            // è¿­ä»£å¯¹è±¡çš„逻辑
          }
          this.$emit("input", val);
    form:{
      handler(newval) {
        if(newval) {
          this.$emit("setDataStore", {
            area: this.areasName,
            type:this.componentVO.uiComponentType,
            btmType:this.componentVO.treeDefineVO.btmType,
            dataStore:[newval]
          });
        }
      },
      deep: true,
      immediate: true,
      }
    },
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
        console.log(newval);
        this.handleRefresh();
      }
    }
  },
  methods: {
    //转化数据
    formColumn(formList) {
      return formList.map(item => {
        const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
    handleRefresh(){

        const focusFunc = item.type === 'refer' ? (i) => {

        } : undefined;


        return {
          label: item.text,
          prop: item.field,
          type: typeValue,
          labelWidth: item.text.length >= 6 ? 115 : 90,
          value: item.defaultValue,
          dicData: item.type === 'combox' ? item.dicData : item.dicUrl,
          readonly: item.readOnly,
          disabled: item.disabled,
          display: !item.hidden,
          labelSuffix: item.suffix,
          suffixIcon: item.prefix,
          placeholder: item.placeholder,
          clearable: item.clearable,
          tip: item.tooltips,
          keyAttr: item.keyAttr,
          focus: focusFunc,
          referConfig: item.referConfig,
          rules: [{
            required: item.required,
            message: `请输入${item.text}!`,
            trigger: "blur"
          }]
        };
      });
    },

    //数据判空
    getColumnData() {
      if (this.componentVO && this.componentVO.formDefineVO && this.componentVO.formDefineVO.items && this.componentVO.formDefineVO.items.length > 0) {
        return this.formColumn(this.componentVO.formDefineVO.items)
      } else {
        return null;
      }
    },

    buttonClick(item) {
      console.log(item.id)
    },
    async getDictList(val) {
      for (let code of val) {
        if (!verifyNull(code.dictData) && code.type == "select") {
          if (
            verifySlash(code.dictCode) &&
            Object.prototype.hasOwnProperty.call(code, "dictCode")
          ) {
            const res = await getlistByCode(code.dictCode);
            if (res.success) {
              const dic = res.data;
              code.dictData = dic.map((d) => {
                return {
                  label: d.name,
                  key: d.code,
                  value: d.id,
                };
              });
            }
          } else {
            this.getDicts(code.dictCode)
              .then((res) => {
                if (res.success) {
                  const dic = res.obj.datas;
                  code.dictData = dic.map((d) => {
                    return {
                      label: d.name,
                      key: d.code,
                      value: d.code,
                    };
                  });
                }
              })
              .catch(() => {
                this.$message.error(` æ•°æ®å­—å…¸${code.dictCode}错误`);
              });
          }
        }
        if (code.type == "refer") {
          if (code.referConfig && code.referConfig.useFormKey) {
            if (verifyNull(code.referConfig.formValuesKey)) {
              code.referConfig.formValuesKey = "form";
            }
            code.referConfig.formValues = this[code.referConfig.formValuesKey];
          }
          code.referConfigTemp = {
            title: code.label,
            showProp:
              code.showProp || code.referConfig.showProp || code.prop + "Name",
            prop: code.prop,
            propMap: code.propMap || {},
            placeholder: code.placeholder
              ? code.placeholder
              : ` è¯·é€‰æ‹©` + code.label,
            options: code.referConfig,
          };
        }
      }
      this.formTemplateData = val;
    },
    setReferValue(data) {
      if (data && data.prop) {
        this.form[data.prop] = data.value || "";
        this.form[data.showProp] = data.text || "";
        if (data.propMap) {
          //说明需要映射
          for (let key in data.propMap) {
            let mapFields = data.propMap[key].split(",");
            let value = [];
            data.rawData.forEach((_item) => {
              var temp;
              if (!_item.extendData) {
                _item.extendData = {};
              }
              if (mapFields.length == 1) {
                var mapField = mapFields[0];
                temp = _item[mapField] || _item["extendData"][mapField];
              } else {
                //有多个
                var mutiTemp = [];
                mapFields.forEach((_itemField) => {
                  mutiTemp.push(
                    _item[_itemField] || _item["extendData"][_itemField]
                  );
                });
                temp = mutiTemp.join(" ");
              }
              if (temp != null && temp != "") {
                value.push(temp);
              }
            });
            this.form[key] = value.join(",");
          }
        }
      }
    },
    }
  }
}
</script>

 Source/ProjectWeb/src/main.js

@@ -24,13 +24,15 @@
import website from '@/config/website';
import crudCommon from '@/mixins/crud';
import Divider from  '@/components/Divider/index'
//表单组件
import basicForm from "@/components/PLT-basic-component/basicForm";
// ä¸šåŠ¡ç»„件
import tenantPackage from './views/system/tenantpackage';
// åŸºç¡€ç»‘定表单按钮
import dynamicButton from '@/components/dynamic-components/dynamic-button'
// åŸºç¡€åŠ¨æ€å¼¹çª—表单组件
import dynamicTableForm from '@/components/dynamic-components/dynamic-table-form'
// å›ºå®šè¡¨å•ç»„件
// ui定义表单组件
import dynamicForm from '@/components/dynamic-components/dynamic-form'
// å¯Œæ–‡æœ¬ç»„件
import richText from '@/components/PLT-basic-component/richText'
@@ -41,6 +43,7 @@
// æ³¨å†Œå…¨å±€å®¹å™¨
Vue.component('basicContainer', basicContainer);
Vue.component('basicBlock', basicBlock);
Vue.component('basicForm', basicForm);
Vue.component('thirdRegister', thirdRegister);
Vue.component('avueUeditor', avueUeditor);
Vue.component('flowDesign', flowDesign);