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

<template>
  <div class="by-form">
    <el-descriptions v-if="attrs.showType=='desc'" :title="attrs.title" :column="attrs.itemCount" :border="attrs.border" :direction="attrs.direction" 
    :size="attrs.size?attrs.size:'medium'" :colon="attrs.colon">
      <template v-for="(itemChild,index) of columns">
        <el-descriptions-item :label="item.label" v-for="(item,_ind) of itemChild" :span="item.colspan" :key="index+'-'+_ind">
          <slot v-if="item.descSlot" :name='item.prop+"_desc"' :value='value'></slot>
          <template v-else>{{value[item.prop]?value[item.prop]:'--'}}</template>
        </el-descriptions-item>
      </template>
    </el-descriptions>
    <el-form class="byForm" 
    v-else
    :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+suffixCode" 
              :parentValue="value"
              :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>
    <!-- <el-button @click="getValueData">获取数据</el-button> -->
  </div>
</template>

<script lang="ts">
/*
  基础配置
  config:{
    attr:{
      showType: ''  //展示形式
      title:''  //标题（desc的时候用）
      itemCount:''  //每行展示几列（desc的时候用）
      border：true/false  //是否有边框（desc的时候用）
      direction: vertical / horizontal  排列的方向（desc的时候用）
      colon：true/false  //是否显示冒号 （desc的时候用）
      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:{}  //组件配置
        slot：true/false  //插槽
        colspan：‘’  //在itemCount的基础上 列的数量（desc的时候用）
        descSlot：true/false  //插槽（desc的时候用）
    }]]
    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={}
  suffixCode="--comp"
  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(){
    if(this.attrs.data){
      this.setValue(this.attrs.data);
    }
  }
  getValueData(){
    console.log('表单数据',this.value)
  }
  //设置数据
  setValue(data:any){
    if(data){
      this.value = (this as any).$lodash.cloneDeep(data);
    }else{
      this.value = {};
    }
    this.$nextTick(()=>{
      this.setChildrenComValue();
    })
    
    this.$forceUpdate();
  }

  clearValue(){
    this.value = {};
    this.clearChildrenComp();
    this.defaultHandle();
  }

  //获取数据
  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+this.suffixCode] && (this.$refs[item.prop+this.suffixCode] as any)[0] && (this.$refs[item.prop+this.suffixCode] as any)[0].setConfig){
            (this.$refs[item.prop+this.suffixCode] as any)[0].setConfig(item.compConfig)
          }
        }
      }
    }
  }

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

  //设置下级组件值
  setChildrenComValue(){
    for(const key in (this as any).$refs){
      if(key.indexOf(this.suffixCode) >= 0 && (this as any).$refs[key] && (this as any).$refs[key][0] && (this as any).$refs[key][0].setValue){
        const code = key.split(this.suffixCode)[0];
        if(this.value){
          (this as any).$refs[key][0].setValue(this.value[code])
        }else{
          (this as any).$refs[key][0].setValue(null)
        }
      }
    }
  }

  //表单数据变化
  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)
    }
    if((this as any).$refs.byForm){
      (this as any).$refs.byForm.validateField(code);
    }
    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) => {
      if(!this.$refs.byForm){
        resolve(true)
      }
      (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()
          }
        });
    })
  }
  //清除过滤提示
  clearValidate(){
    if(this.$refs.byForm){
      (this.$refs.byForm as any).clearValidate();
    }
  }
}
</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>