Source/ProjectWeb/src/views/custom-ui/test2.vue

@@ -1,12 +1,556 @@
<template>
  <basic-container>
    测试自定义组件展示222222222
    <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 :butttonList="componentVO.buttons" 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>
          <!--   富文本控件       -->
          <rich-text v-if="item.type === 'richText'" :value="form[subitemName]" @input="form[subitemName] = $event"></rich-text>
          <!--   表单上传文件组件       -->
          <form-upload v-if="item.type === 'upload'"></form-upload>
        </template>
      </avue-form>
    </div>
  </basic-container>
</template>

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

export default {
  name: "test2"
  name: "test2",
  components: {VciWebRefer},
  props: {
    componentVO: {
      type: Object,
      default: {}
    },
    inDialog: {
      type: Boolean,
      default: false
    },
    areasName: {
      type: String,
      default: ''
    },
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type: Array,
      default: []
    },
    paramVOS: {
      type: Object,
      default: {}
    },
    isShow: {
      //所在区域是否已显示，针对tab和collapse
      type: Boolean,
      default: true
    },
  },
  data() {
    return {
      formDefine: {
        "formDefineVO": {
          "btmType": "material",
          "columnOneRow": 3,
          "freeMarkerEls": [],
          "id": "materialform",
          "items": [
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "id",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": true,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "材料代码",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "name",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": true,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "材料名称",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "specification",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "规格及标准",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "materialtrademark",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "材料牌号及标准",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "technicalrequirement",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "技术要求",
              "tooltips": null,
              "type": "text",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "classofexpenditure",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": {
                showProp: "userIdName",
                type: 'user',
                extraParams: {
                  aaa: '111'
                },//查询条件，可选
                paramForFormKey: 'formDeptId', //使用表单上的数据作为查询条件参数,没有时使用useFormKey
                formValuesKey: 'ruleForm',//页面上的表单数据对象名称，默认值‘form’
                useFormKey: 'deptId',//需要从formValues中获取的表单字段,根据部门树参照选中数据动态查询用户
                isMuti: true,//是否多选，可选
                width: '1000px',
                referBusCode: "user",
                mapProps: {
                  'personClassifyText': 'personClassify'
                },
                defalutValue: '1', //参照默认值
                defalutText: '测试默认值' //参照默认显示值
              },
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "消耗分类",
              "tooltips": null,
              "type": "refer",
              "unique": false,
              "verify": ""
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "measurementunit",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "计量单位",
              "tooltips": null,
              "type": "upload",
              "unique": false,
              "verify": "",
              "uploadList":['.png','.xls','.']
            },
            {
              "comboxKey": null,
              "customClass": null,
              "data": null,
              "dateFormate": null,
              "defaultValue": "",
              "displayExtension": "",
              "extendAttrMap": null,
              "extendAttrString": null,
              "field": "description",
              "hidden": false,
              "keyAttr": false,
              "prefix": null,
              "readOnly": false,
              "referConfig": null,
              "required": false,
              "selectLibFlag": null,
              "showField": null,
              "suffix": null,
              "text": "备注",
              "tooltips": null,
              "type": "richText",
              "unique": false,
              "verify": ""
            }
          ],
          "linkTypeFlag": false,
          "oid": "ED51077B-253F-2AB9-A0E6-BA289052B03C",
          "queryTemplateName": ""
        },
        "id": null,
        "lastModifier": null,
        "lastModifyTime": null,
        "lastR": null,
        "lastV": null,
        "lcStatus": null,
        "lcStatusText": null,
        "lctid": null,
        "name": "表单显示",
        "nameOid": null,
        "oid": "88BF207E-6F02-8E76-5086-5061DBD35A98",
        "orderNum": 1,
        "owner": null,
        "pkLayout": "0D6C19B4-4C8B-F540-7441-2ABAFE606031",
        "revisionOid": null,
        "revisionRule": null,
        "revisionSeq": 0,
        "revisionValue": null,
        "secretGrade": null,
        "secretGradeText": null,
        "tableDefineVO": null,
        "treeDefineVO": null,
        "treeTableDefineVO": null,
        "ts": null,
        "uiComponentType": "form",
        "uiComponentTypeText": "表单",
        "uiParseClass": "",
        "versionRule": null,
        "versionSeq": 0,
        "versionValue": null
      },
      form: {
      },
      subitemName:''
    }
  },
  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);
        }
      },
      deep: true,
      immediate: true,
    },
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
        console.log(newval);
      }
    }
  },
  methods: {
    //转化数据
    formColumn(formList) {
      return formList.map(item => {
        const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
        if(item.type === 'richText'){
          this.subitemName = item.field;
        }else if(item.type === 'upload'){

        }


        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,
          referConfig: item.referConfig,
          rules: [{
            required: item.required,
            message: `请输入${item.text}!`,
            trigger: "blur"
          }]
        };
      });
    },

    //数据判空
    getColumnData() {
      if (this.formDefine && this.formDefine.formDefineVO && this.formDefine.formDefineVO.items && this.formDefine.formDefineVO.items.length > 0) {
        return this.formColumn(this.formDefine.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>