form表单二次封装

/**
* AUTOR: shj
* TIME: 2022 3 22
* FUNCTION: 组件化表单控件
  czlx
      1   基本输入框
      103 有后缀的数字输入框
      104 有正则数字输入框
      997 树形+select多选
      999 树形+select多选
      998 树形+select单选 
      102 文本域输入框
      401 数字输入框
      201 单选下拉框
      202 多选下拉框
      311 时间日期范围选择器
      312 时间日期选择器
**/
<template>
  <div class="FormItemTreeSelect" >
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '1'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-input
          v-model.trim="formInfo[itemInformation.prop]"
          :placeholder="itemInformation.placeholder"
          :disabled="itemInformation.disabled"
          :type="itemInformation.type || 'text'"
          :maxlength="itemInformation.max"
          :minlength="itemInformation.min"
          clearable
        >
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '103'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-input
          type="number"
          v-model="formInfo[itemInformation.prop]"
          :placeholder="itemInformation.placeholder"
          :disabled="itemInformation.disabled"
           :maxlength="itemInformation.max"
          :minlength="itemInformation.min"
        >
          <template slot="append">{{ itemInformation.appendInfo }}</template>
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '104'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-input
          v-model="formInfo[itemInformation.prop]"
          :placeholder="itemInformation.placeholder"
          :disabled="itemInformation.disabled"
          oninput="value=value.replace(/[^\d]/g,'')"
          clearable
           :maxlength="itemInformation.max"
          :minlength="itemInformation.min"
          @clear='formInfo[itemInformation.prop]=""'
        >
          <!-- <template slot="append">{{ itemInformation.appendInfo }}</template> -->
        </el-input>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '102'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-input
          type="textarea"
          :rows="1"
          :placeholder="itemInformation.placeholder"
          v-model="formInfo[itemInformation.prop]"
          :disabled="itemInformation.disabled"
          :autosize="itemInformation.autofocus"
          :maxlength="itemInformation.max"
          :minlength="itemInformation.min"
          clearable
        ></el-input>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '401'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-input-number
          style="text-align:left;"
          v-model="formInfo[itemInformation.prop]"
          :controls="itemInformation.control"
          :disabled="itemInformation.disabled"
          :placeholder="itemInformation.placeholder"
          :label="itemInformation.label"
          :min="itemInformation.min ? itemInformation.min : -Infinity"
          :max="itemInformation.max ? itemInformation.max : Infinity"
        ></el-input-number>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '201'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-select
          v-model="formInfo[itemInformation.prop]"
          style="width:100%"
          :disabled="itemInformation.disabled"
          :placeholder="itemInformation.placeholder"
     
          clearable
        >
          <el-option
            v-for="(item, index) in itemInformation.option"
            :key="index"
            :label="itemInformation.select.label"
            :value="itemInformation.select.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '202'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-select
          v-model="formInfo[itemInformation.prop]"
          :placeholder="itemInformation.placeholder"
          multiple
          :disabled="itemInformation.disabled"
          :collapse-tags="true"
        >
          <el-option
            v-for="(item, index) in itemInformation.option"
            :key="index"
            :label="itemInformation.select.label"
            :value="itemInformation.select.value"
          ></el-option>
        </el-select>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '311'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-date-picker
          v-model="formInfo[itemInformation.prop]"
          type="daterange"
          range-separator="至"
          :disabled="itemInformation.disabled"
          :start-placeholder="itemInformation.start"
          :end-placeholder="itemInformation.end"
          :value-format="itemInformation.dateType ? 'yyyy-MM' : 'yyyy-MM-dd'"
          clearable
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '312'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-date-picker
          v-model="formInfo[itemInformation.prop]"
          :type="itemInformation.dateType ? itemInformation.dateType : 'date'"
          :disabled="itemInformation.disabled"
          clearable
          :value-format="itemInformation.dateType ? itemInformation.dateType == 'year' ? 'yyyy' : 'yyyy-MM' : 'yyyy-MM-dd'"
          :placeholder="itemInformation.placeholder"
        ></el-date-picker>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '999'">
      <slot :name="itemInformation.name"></slot>
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-popover style="max-height: 200px" v-model="itemInformation.ShowVisible" trigger="click" :disabled="itemInformation.disabled">
          <el-tree
            :check-strictly="true"
            show-checkbox
            @check-change="handleSslyCheckChange"
            :data="itemInformation.data"
            node-key="sjz"
            ref="treeModels"
            :props="itemInformation.defaultProps"
            accordion
            :key="itemInformation.treeKey"
          ></el-tree>
          <el-select
            allow-create
            collapse-tags
            multiple
            :disabled="itemInformation.disabled"
            :id="itemInformation.treeInputId"
            v-model="formInfo[itemInformation.prop]"
            size="small"
            :placeholder="itemInformation.placeholder"
            slot="reference"
            popper-class="ssly_item"
            style="width: 100%;"
          >
            <el-option
              v-for="oItem in itemInformation.ChildrenOptions"
              :value="oItem.sjbm"
              :label="oItem.sjzqc"
              :key="oItem.sjbm"
            ></el-option>
          </el-select>
        </el-popover>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '997'">
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-popover style="max-height: 200px" v-model="itemInformation.ShowVisible" trigger="click" :disabled="itemInformation.disabled">
          <el-tree
            :check-strictly="true"
            show-checkbox
            @check-change="handleSslyCheckChange"
            :data="itemInformation.data"
             node-key="name"
            :ref="itemInformation.ref"
            :props="itemInformation.defaultProps"
            accordion
            :key="itemInformation.treeKey"
          ></el-tree>
           <el-select
            allow-create
            collapse-tags
            multiple
            @remove-tag="clearSelect"
            :disabled="itemInformation.disabled"
            :id="itemInformation.treeInputId"
            v-model.trim="formInfo[itemInformation.prop]"
            size="small"
            :placeholder="itemInformation.placeholder"
            slot="reference"
            popper-class="ssly_item"
            style="width: 100%;"
          >
            <el-option
              v-for="oItem in itemInformation.ChildrenOptions"
              :value="oItem.sjbm"
              :label="oItem.sjzqc"
              :key="oItem.sjbm"
            ></el-option>
          </el-select>
            <el-input
            v-model="formInfo[itemInformation.inputStr]"
            size="small"               
            :placeholder="itemInformation.placeholder"
            slot="reference"
            :disabled="itemInformation.disabled"
            style="width:100%;display:none;"
          ></el-input>
        </el-popover>
      </el-form-item>
    </el-col>
    <el-col :span="itemInformation.span" v-if="itemInformation.czlx == '998'">
      <slot :name="itemInformation.name"></slot>
      <el-form-item :label="itemInformation.label" :prop="itemInformation.prop" :label-width="itemInformation.labelWidth" :rules="itemInformation.rules">
        <el-popover
          style="max-height:650px!important"
          v-model="itemInformation.ShowVisible"
          trigger="click"
          :width="itemInformation.treeInputWidth"
          :disabled="itemInformation.disabled"
        >
          <el-tree
            style="width:200px;overflow-x: scroll;"
            :data="itemInformation.data"
            node-key="dictId"
            ref="treeModel"
            :props="itemInformation.defaultProps"
            accordion
            @node-click="handleNodeClick"
          ></el-tree>
          <el-input
            maxlength="0"
            :title="formInfo[itemInformation.prop]"
            v-model.trim="formInfo[itemInformation.prop]"
            size="small"
            :placeholder="itemInformation.placeholder"
            @click="showTreePopover(itemInformation)"
             slot="reference"
            :disabled="itemInformation.disabled"
            :id="itemInformation.treeInputId ? itemInformation.treeInputId : 'treeInput'"
            style="width:100%"
            clearable
            @clear='formInfo[itemInformation.prop]="",formInfo[itemInformation.propzdCode]=[]'
          ></el-input>
        </el-popover>
         <!-- <div class="hasEditButton-button">
            <el-button
              style="padding:9px;margin-top:3px"
              type="text"
              @click="editZdsj(itemInformation)"
            >编辑</el-button>
          </div> -->
      </el-form-item>
    </el-col>
  </div>
</template>
<script>

export default {
  props: ['itemInformation', 'formInfo'],
  data() {
    return {}
  },
  created() {},
  watch:{
    formInfo:{
      handler(newV,oldV) {
        if(this.itemInformation.czlx == 997){
          if((newV[this.itemInformation.inputStr])!=null){
            this.$refs[this.itemInformation.ref].setCheckedKeys((newV[this.itemInformation.inputStr]).split(','))
          }
        }
      }
    }
  },
  mounted(){
   
  },
  methods: {
    handleNodeClick(data) {
      console.log(data);
      let arr=[]
      this.formInfo[this.itemInformation.prop] = data.dictValue
      this.formInfo[this.itemInformation.propCode] = data.dictId
      // arr.push(data.code)
      // this.formInfo[this.itemInformation.propzdCode] = arr
      this.showTreePopover(this.itemInformation)
    },
    showTreePopover(item) {
      console.log(item,'lsskskl')
      item.ShowVisible = !item.ShowVisible
    },
    handleSslyCheckChange(data, checked, indeterminate) {
      let str=""
      let arr=[]
      let checkedNodes = this.$refs[this.itemInformation.ref?this.itemInformation.ref:'treeModels'].getCheckedNodes()
      let ssly = []
      console.log(data, checked, indeterminate);
      
      for (let item of checkedNodes) {
        arr.push(item.dictId)
        ssly.push(item.dictValue)
        str+=item.name+','
      }
      this.formInfo[this.itemInformation.inputStr] = str.substring(0,str.length-1)
      this.formInfo[this.itemInformation.prop] = ssly
      this.formInfo[this.itemInformation.propzdCode] = arr
    },
    clearSelect(data){
      let checkedNodes = this.$refs[this.itemInformation.ref?this.itemInformation.ref:'treeModels'].getCheckedNodes(true)
      console.log(checkedNodes,data)
    },
    Clearitem(child,data){
        for (let i = 0; i < child.length; i++) {
           if(child[i].children){
              this.Clearitem(child[i].children,data)
           }else{
             if(child[i].name==data){
                child[i].splice(i,1)
             }
           }
        }
        return child;
    }
  }
}
</script>
<style lang="less" scoped>
.el-popper[x-placement^='bottom'] {
  margin-top: 12px;
  overflow: auto;
  max-height: 650px;
}
/deep/ .el-tag__close{
  display: none;
}
.hasEditButton-button {
  margin-left: 10px;
  text-align: center;
  position: absolute;
  right: 30px;
  z-index: 100;
  top: 0;
}
</style>