oms/src/benyun/components/byForm/byForm.vue

<template>
  <div class="by-form">
    <el-form class="byForm" 
    :style="{ height: attrs.height ? attrs.height + 'px' : 'auto' }" 
    :model="value" 
    ref="byForm" 
    :validate-on-rule-change="false" 
    :size="attrs.size ? attrs.size : 'small'" 
    :inline-message="true" 
    v-bind="$attrs" 
    :disabled="attrs.disabled"
    :label-width="attrs.labelWidth"
    :rules="attrs.readonly?[]:attrs.rules"
    :label-position="attrs.labelPosition ? attrs.labelPosition : ''">
      <el-row class="form-row" v-for="(itemChild,index) of columns" :key="index">
        <el-col  v-for="(item,_ind) of itemChild" :span="item.span" :key="'itemChild'+_ind">
          <el-form-item class="by-form-item" 
            :label="item.label" 
            :rules="attrs.readonly?[]:item.rules" 
            :prop="item.prop" 
            :required="item.required"
            :error="item.error"
            :size="item.size"
            :label-width="item.labelWidth?item.labelWidth:'100px'">
            <component v-bind:is="item.component" 
              class="form-comp"
              :propConfig="item.compConfig" 
              :ref="item.prop+'Comp'" 
              :propValue="value[item.prop]" 
              @onChange="onChange($event,item)" 
              v-bind="$attrs" 
              v-on="$listeners" 
              />
              <slot v-if="item.slot" :name='item.prop' :value='value'></slot>
              <!-- <slot :[item.prop]="value" ></slot> -->
              <div class="readonly-cover" v-if="attrs.readonly"></div>
          </el-form-item>
        </el-col>
      </el-row>
  </el-form>
  </div>
</template>

<script lang="ts">
/*
  基础配置
  config:{
    attr:{
      disabled:true/false //表单禁用
      readonly:true/false //表单只读
      size:medium / small / mini, //表单域下组件的尺寸,
      height:'',  //高度
      labelPosition: right/left/top //标签位置
      labelWidth:  '' //标签的宽度
      rules:[]  //验证规则
    },
    columns: [[{   //表单列
        span:''  //分栏，
        label:''  //标签
        prop:''  //字段
        labelWidth:'' 标签的的宽度
        rule:{}  //验证规则
        size：medium / small / mini  //表单域下组件的尺寸,
        component:''   //组件
        compConfig:{}  //组件配置
    }]]
    request:{
      url:'',
      method:'',
      headers:{},
      data:{}
    }
  }
 */
import { Component, Prop, Vue, Watch } from "vue-property-decorator";
import VueViews from '@/benyun/compVue/VueViews'
@Component
export default class ByForm extends VueViews {
  value:any={}
  
  get columns(){
    let columns:Array<any> = this.config?.columns ? this.config.columns : []
      //分栏设置
    if(columns.length > 0){
      for (const itemChild of columns) {
        let spans = 24
        let n = itemChild.length
        for(const item of itemChild){
          if (item && ((Number(item.span) > 0 && Number(item.span) <= 24))) {
            spans = spans - Number(item.span)
            n--;
          }
        }

        for(const item of itemChild){
          if (Number(item.span) > 0 && Number(item.span) <= 24) {
            item.span = Number(item.span)
          } else {
            item.span = spans / n
          }
        }
        
      }
    }
    return columns
  }

  created(){
    if(this.propConfig){
      this.setConfig(this.propConfig)
    }
  }
  mounted(){}

  //设置数据
  setValue(data:any){
    this.clearChildrenComp();
    if(data){
      this.value = (this as any).$lodash.cloneDeep(data);
    }else{
      this.value = {};
    }
    this.setChildrenComValue();
  }

  //获取数据
  getValue(){
    return (this as any).$lodash.cloneDeep(this.value);
  }

  setConfigAfter(){
    if(this.columns.length > 0){
      for(const itemData of this.columns){
        for(const item of itemData){
          if(this.$refs[item.prop+'Comp'] && (this.$refs[item.prop+'Comp'] as any)[0] && (this.$refs[item.prop+'Comp'] as any)[0].setConfig){
            (this.$refs[item.prop+'Comp'] as any)[0].setConfig(item.compConfig)
          }
        }
      }
    }
  }

  //清除下级组件组件值
  clearChildrenComp(){
    for(const key in this.$refs){
      if(key.indexOf('Comp') >= 0 && (this as any).$refs[key][0] && (this as any).$refs[key][0].clearValue){
        (this as any).$refs[key][0].clearValue()
      }
    }
  }

  //设置下级组件值
  setChildrenComValue(){
    if(this.value){
      for(const key in this.value){
        const code = key +'Comp';
        if((this as any).$refs[code] && (this as any).$refs[code][0] && (this as any).$refs[code][0].setValue){
        (this as any).$refs[code][0].setValue(this.value[key])
      }
      }
    }
  }

  //表单数据变化
  onChange(v:any,config:any){
    let code = config.prop;
    if (v && (v as any).constructor === Object){
      for(const key in v){
        this.changeSetValue(key,v[key])
      }
    }else{
      this.changeSetValue(code,v)
    }
    
    this.$emit('formChange',{value:v,code:code})
  }
  changeSetValue(code:string,v:any){
    if(this.value[code]){
      this.value[code] = v;
      }else{
        Vue.set(this.value, code, v);
      }
  }
  //表单验证
  validate(parames?:any):Promise<any>{
    return new Promise((resolve:Function, reject:Function) => {
      (this as any).$refs.byForm.validate((valid:any) => {
          if (valid) {
            resolve(true)
          } else {
            if(!parames || !parames.noMsg){
              (this as any).$message({
                message: '验证未通过，请检查！',
                type: 'warning',
              })
            }
            
            reject()
          }
        });
    })
  }
}
</script>

<style lang="scss" scoped>
.by-form{
  width: 100%;
  .form-comp{
    width: 100%;
  }
  .readonly-cover{
    position: absolute;
    height: 100%;
    width: 100%;
    left: 0;
    top: 0;
  }
}
</style>

<style lang="scss">
.by-form-item{
  margin-bottom: 10px !important;
}
</style>