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

@@ -1,9 +1,9 @@
<template>
  <!--动态模板-->
  <avue-form ref="formRef" :option="option" v-model="form">
  <avue-form ref="form" :option="option" v-model="form">
    <template v-for="item in allColumn" :slot="item.prop+ ''">
      <vciWebRefer
        v-if="item.propType === 'refer' || item.type === 'refer'"
        v-if="item.type === 'refer'"
        :key="item.prop"
        referType="master"
        :data-key="item.prop"
@@ -16,9 +16,18 @@
        @setReferValue="setReferValue"
      ></vciWebRefer>
      <!--   富文本控件       -->
      <rich-text v-if="item.type === 'richText'" :value="form[subitemName]" @input="form[subitemName] = $event"></rich-text>
      <rich-text v-else-if="item.type === 'richText'"
                 :key="item.prop"
                 :data-key="item.prop"
                 :disabled="item.disabled || false"
                 :display="item.display || true"
                 :value="form[subitemName]" @input="form[subitemName] = $event"></rich-text>
      <!--   表单上传文件组件       -->
      <form-upload v-if="item.type === 'upload'"></form-upload>
      <form-upload v-else-if="item.type === 'upload'"
                   :key="item.prop"
                   :data-key="item.prop"
                   :disabled="item.disabled || false"
                   :display="item.display || true"></form-upload>
    </template>
  </avue-form>
</template>
@@ -57,6 +66,15 @@
      type:Boolean,
      default:false
    },
    isEdit:{
      //表单是否可编辑
      type:Boolean,
      default:true
    },
    initValue:{
      type: Object,
      default: () => {},
    },
  },
  data() {
    return {
@@ -89,10 +107,13 @@
  watch: {
    formItems: {
      handler(val) {
        if(val[0] &&val[0].column && val[0].column.isArray()){
        if (val[0] && val[0].column && val[0].column.isArray()) {
          this.getInitGroup(val);
        }else{
        } else {
          this.getInit(val);
        }
        if (this.initValue) {
          Object.assign(this.form, this.initValue);
        }
      },
      immediate: true,
@@ -107,7 +128,7 @@
      handler(val) {
        for (let code of this.option.column) {
          if (
              (code.propType == "refer"  || code.type == 'refer' )&&
            code.type == 'refer' &&
            code.referConfig &&
            code.referConfig.useFormKey
          ) {
@@ -118,7 +139,7 @@
        for (let code of this.option.group) {
          for (let col of code.column) {
            if (
                (col.propType == "refer"  || col.type == 'refer')&&
              col.type == 'refer'&&
              col.referConfig &&
              col.referConfig.useFormKey
            ) {
@@ -127,7 +148,7 @@
            }
          }
        }
        this.$emit("input", val);
        this.$emit("getFormData", val);
      },
      deep: true,
      immediate: true
@@ -140,7 +161,6 @@
        code = this.initItem(code);
        column.push(code);
        this.allColumn.push(code);
        console.log('allColumn',this.allColumn)
      }
      this.option.column = column;
    },
@@ -158,7 +178,7 @@
      this.option.group = group;
    },
    initItem(item){
      const type=this.columnType[item.type] || item.type
      const type=this.columnType[item.type] || item.type;
      const col= {
        ...item,
        label: item.text,
@@ -166,24 +186,40 @@
        showProp:item.showField,
        type: type,
        labelWidth: this.labelWidth || (item.text.length >= 6 ? 115 : 90),
        disabled: item.readOnly || this.disabled,
        disabled: !this.isEdit || item.readOnly || 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: [{
        valueFormat: item.dateFormate || "yyyy-MM-dd HH:mm:ss",
        format: item.dateFormate,
        rules: this.isEdit?(type=="select" || type=="refer" || type=="date" || type=="datetime"?[{
          required: item.required,
          message: `请选择${item.text}!`,
          trigger: "change"
        },{
          required: item.required,
          message: `请选择${item.text}!`,
          trigger: "submit"
        }]:[{
          required: item.required,
          message: `请输入${item.text}!`,
          trigger: "blur"
        }]
        },{
          required: item.required,
          message: `请输入${item.text}!`,
          trigger: "submit"
        }]):[]
      };
      if(!this.isEdit){
        col.placeholder=col.label;
      }
      if(col.type === 'richText'){
        this.subitemName = col.field;
@@ -191,8 +227,16 @@
        console.log('col',col)
      }
      if (col.type === "select") {
        // console.log('col',col)
        if(!validatenull(col.dictCode)) {
        if(col.data && col.data.length>0){
          col.dicData = col.data.map((d) => {
            return {
              label: d.key,
              key: d.value,
              value: d.value,
              attributes:d.attributes
            };
          });
        }else if(!validatenull(col.dictCode)) {
          getDicts(col.dictCode).then((res) => {
            if (res.data.success){
              if(res.data.data && res.data.obj == null){
@@ -211,7 +255,7 @@
          });
        }
      }
      if (col.propType === "refer"|| col.type==='refer') {
      if (col.type==='refer') {
        if (col.referConfig && col.referConfig.useFormKey) {
          if (validatenull(col.referConfig.formValuesKey)) {
            col.referConfig.formValuesKey = "form";
@@ -266,6 +310,27 @@
          }
        }
      }
    },
    // 表单校验
    validate(done) {
      return new Promise((resolve) => {
        this.$refs.form.validate((valid,fields) => {
          done(valid,fields);
          if (valid) {
            resolve(true);
            this.ValidataValue = true;
          } else {
            resolve(false);
            return false;
          }
        });
      });
    },
    resetFields(){
      this.$refs.form.resetFields()
    },
    clearValidate(props){
      this.$refs.form.clearValidate(props)
    }
  },
};