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

@@ -1,5 +1,5 @@
<template>
  <div class="UI-dynamic" :id="'UI-dynamic-'+areasName+componentVO.oid">
  <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>
@@ -16,13 +16,13 @@
        </span>
      </template>
      <template slot="menuForm">
        <dynamic-button type="form" :butttonList="componentVO.buttons" @buttonClick="buttonClick"></dynamic-button>
        <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"
                     referType="master"
                     :ref="'referFormRef'+item.prop"
                     :data-key="item.prop"
                     :disabled="item.disabled || false"
                     :display="item.display || true"
@@ -30,8 +30,8 @@
                     :reloadFormKey="(item.referConfig.useFormKey && item.referConfig.formValues && item.referConfig.formValues[item.referConfig.useFormKey]) || ''"
                     :text="item.referConfig.showProp"
                     :value="item.prop || item.value"
                     @setReferValue="setReferValue"
                     :ref="'referFormRef'+item.prop">
                     referType="master"
                     @setReferValue="setReferValue">

        </vciWebRefer>
      </template>
@@ -40,9 +40,10 @@
</template>

<script>
import vciWebRefer from '@/components/refer/vciWebRefer'

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

export default {
  name: "dynamic-form",
  components: {VciWebRefer},
@@ -59,14 +60,14 @@
      type: String,
      default: ''
    },
    sourceData:{
      //菜单源数据或者弹窗时按钮所属区域的上一区域选中数据
      type:Object,
    sourceData: {
      //所属区域的上一区域选中数据
      type: Object,
      default: {}
    },
    dataStore:{
    dataStore: {
      //弹窗时按钮所属区域选中数据
      type:Array,
      type: Array,
      default: []
    },
    paramVOS: {
@@ -82,7 +83,6 @@
  data() {
    return {
      form: {},
      ruleForm:{}
    }
  },
  mounted() {
@@ -100,14 +100,14 @@
      return this.getColumnData()
    }
  },
  watch:{
    slotData:{
      handler(newV){
       this.getDictList(newV)
  watch: {
    slotData: {
      handler(newV) {
        this.getDictList(newV)
      },
      immediate: true,
    },
    ruleForm: {
    form: {
      handler(val) {
        if (val) {
          if (Array.isArray(val)) { // 检查 val 是否为数组
@@ -130,7 +130,7 @@
      deep: true,
      immediate: true,
    },
    sourceData:{
    sourceData: {
      handler(newval) {
        //源数据有变化时变更当前区域数据
        console.log(this.areasName);
@@ -141,39 +141,39 @@
  methods: {
    //转化数据
    formColumn(formList) {
        return formList.map(item => {
          const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;
      return formList.map(item => {
        const typeValue = item.type === 'text' ? 'input' : item.type === 'combox' ? 'select' : item.type;

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

          } : undefined;
        } : 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"
            }]
          };
        });
        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"
          }]
        };
      });
    },

    //数据判空
@@ -228,7 +228,7 @@
        if (code.type == "refer") {
          if (code.referConfig && code.referConfig.useFormKey) {
            if (verifyNull(code.referConfig.formValuesKey)) {
              code.referConfig.formValuesKey = "ruleForm";
              code.referConfig.formValuesKey = "form";
            }
            code.referConfig.formValues = this[code.referConfig.formValuesKey];
          }
@@ -249,8 +249,8 @@
    },
    setReferValue(data) {
      if (data && data.prop) {
        this.ruleForm[data.prop] = data.value || "";
        this.ruleForm[data.showProp] = data.text || "";
        this.form[data.prop] = data.value || "";
        this.form[data.showProp] = data.text || "";
        if (data.propMap) {
          //说明需要映射
          for (let key in data.propMap) {
@@ -278,7 +278,7 @@
                value.push(temp);
              }
            });
            this.ruleForm[key] = value.join(",");
            this.form[key] = value.join(",");
          }
        }
      }