wt_project_web_bak/src/components/basic-form/sub.vue

<template>
  <div>
    <el-col v-if='item.type ==="input" ' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div class='label  full-width padding-left text-left bold' >
              {{ item.label }}
            </div>
          </template>
          <div class='full-width text-left flex full-width'>
            <input v-model='editData[item.prop]' :disabled='disable' :placeholder='`请输入` + item.label'
                   @change='change($event,item)'
                   class='full-width'/>
            <el-icon v-if='!disable' class="padding-right">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
    <!--textarea-->
    <el-col v-if='item.type ==="textarea" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div :style='`height:` + item.rows * 35 + `px`'
                 class='label white-bg full-width text-left padding-left bold'>
              {{ item.label }}
            </div>
          </template>
          <div class='full-width flex flex-align-start full-height text-left full-width'
               style='white-space: pre-wrap;text-overflow: ellipsis;'>
              <textarea v-model='editData[item.prop]' :disabled='disable'
                        :placeholder='`请输入` + item.label'
                        :style='`height:` + item.rows * 35 + `px`'
                        class='full-width padding-right full-height padding-top'
                        @change='change($event,item)'
                        style='line-height:20px;resize:none '/>
            <el-icon v-if='!disable' class="padding-right padding-top">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
    <!--    autoinput-->
    <el-col v-if='item.type ==="autoInput" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div :style='`height:` + item.rows * 35 + `px`'
                 class='label white-bg full-width text-left padding-left bold'>
              {{ item.label }}
            </div>
          </template>
          <div class='full-width flex flex-align-start full-height text-left full-width'
               style='white-space: pre-wrap;text-overflow: ellipsis;'>
            <el-select v-model="editData[item.prop]" class="m-2" :placeholder="`请选择${item.label}`"
                       @change='change($event,item)'>
              <el-option
                  v-for="item in item.dict"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            <el-icon v-if='!disable' class="padding-right padding-top">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
    <el-col v-if='item.type ==="select" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div :style='`height:` + item.rows * 35 + `px`'
                 class='label white-bg full-width text-left padding-left bold'>
              {{ item.label }}
            </div>
          </template>
          <div class='full-width flex flex-align-start full-height text-left full-width'
               style='white-space: pre-wrap;text-overflow: ellipsis;'>
            <el-select v-if='!disable' class="m-2" v-model="editData[item.prop]" :placeholder="`请选择${item.label}`" @change='change($event,item)'>
              <el-option
                  v-for="item in item.dict"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
              />
            </el-select>
            <input v-else disabled v-model='editData[item.prop]' />
            <el-icon v-if='!disable' class="padding-right padding-top">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
    <el-col v-if='item.type ==="area" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div :style='`height:` + item.rows * 35 + `px`'
                 class='label white-bg full-width text-left padding-left bold'>
              {{ item.label }}
            </div>
          </template>
          <div class='full-width flex flex-align-start full-height text-left full-width'
               style='white-space: pre-wrap;text-overflow: ellipsis;'>
            <el-cascader v-if='!disable' ref='area' :options="item.dict" v-model="editData[item.prop]" :disabled='disable' class="m-2"
                         :placeholder="`请选择${item.label}`" @change='change($event,item)'>
            </el-cascader>
            <input v-else disabled v-model='editData[item.prop]' />
            <el-icon v-if='!disable' class="padding-right padding-top">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
    <!--   daterange -->
    <el-col v-if='item.type ==="daterange" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div :style='`height:` + item.rows * 35 + `px`'
                 class='label white-bg full-width text-left padding-left bold'>
              {{ item.label }}
            </div>
          </template>
          <div class='full-width flex flex-align-start full-height text-left full-width'
               style='white-space: pre-wrap;text-overflow: ellipsis;'>
            <el-date-picker
                v-if='!disable'
                v-model="editData[item.prop]"
                :disabled='disable'
                type="daterange"
                @change='change($event,item)'
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder='结束日期'
                value-format='YYYY-MM-DD'
                format='YYYY-MM-DD'
            />
            <input v-else disabled v-model='editData[item.prop]' />
            <el-icon v-if='!disable' class="padding-right padding-top">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
    <!--number-->
    <el-col v-if='item.type ==="number" ' :style='`height:` + item.rows * 35 + `px`' class='full-width'>
      <div class='flex item full-width'>
        <el-form-item class='full-width '>
          <template v-slot:label>
            <div :style='`height:` + item.rows * 35 + `px`'
                 class='label white-bg full-width text-left padding-left bold'>
              {{ item.label }}
            </div>
          </template>
          <div class='full-width flex  flex-align-center full-height text-left full-width'
               style='white-space: pre-wrap;text-overflow: ellipsis;'>
            <input v-model='editData[item.prop]' :disabled='disable' type='number' class='full-width'
                             :placeholder='`请输入` + item.label' step='2'
                             @change='change($event,item)'/>
            <el-icon v-if='!disable' class="padding-right padding-top">
              <edit/>
            </el-icon>
          </div>
        </el-form-item>
      </div>
    </el-col>
  </div>
</template>

<script>
export default {
  name: 'sub',
  props: {
    form: {
      type: Object,
      default: null
    },
    item: {
      type: Object,
      default: null
    },
    disable: {
      type: Boolean,
      default: false
    }
  },
  watch: {
    item: {
      handler (val) {
        if (val.type === 'autoInput') {
          this.getDic(val).then(res => {
            val.dict = res
          })
          console.log(val.dict)
        } else if (val.type === 'area') {
          const tmp = {
            dict: '/blade-system/region/lazy-list',
            props: {
              label: 'name',
              value: 'id'
            }
          }
          val.expand = JSON.stringify(tmp, null, 4)
          val.expand = JSON.parse(val.expand)
          this.getDic(val).then(res => {
            val.dict = res
          })
        } else if (val.type === 'select') {
          this.getDic(val).then(res => {
            val.dict = res
          })
        }
      },
      immediate: true
    },
    form: {
      handler (val) {
        this.editData = val
      },
      immediate: true
    },
    editData: {
      deep: true,
      immediate: false
    }
  },
  data () {
    return {
      data: {},
      dic: [],
      editData: null
    }
  },
  methods: {
    async getDic (item) {
      let result = []
      if (item.type === 'area') {
        const local = localStorage.getItem('lazy-list')
        if (local) {
          return JSON.parse(local)
        }
        const tmp = await this.$api.common.basicFormRequest(item.expand.dict)
        result = tmp.data.map(sub => this.mapTree(sub, item.expand))
        localStorage.setItem('lazy-list', JSON.stringify(result))
      } else {
        const tmp = await this.$api.common.basicFormRequest(item.expand.dict)
        result = tmp.data.map(sub => this.mapTree(sub, item.expand))
      }
      return result
    },
    mapTree (item, expand) {
      const haveChildren = Array.isArray(item.children) && item.children.length > 0
      return {
        key: item.label,
        value: item[expand.props.value],
        label: item[expand.props.label],
        children: haveChildren ? item.children.map(i => this.mapTree(i, expand)) : []
      }
    },
    change (res, item) {
      if (item.type === 'area') {
        this.editData[item.prop] = res[0]
        const tmp = this.$refs.area.getCheckedNodes()[0].pathLabels
        const keys = Object.keys(res)
        if (keys.length === 3) {
          this.editData.provinceCode = res[0]
          this.editData.province = tmp[0]
          this.editData.cityCode = res[1]
          this.editData.city = tmp[1]
          this.editData.districtCode = res[2]
          this.editData.district = tmp[2]
        } else if (keys.length === 2) {
          this.editData.provinceCode = res[0]
          this.editData.province = tmp[0]
          this.editData.cityCode = res[1]
          this.editData.city = res[1]
        } else {
          this.editData.provinceCode = res[0]
          this.editData.province = res[0]
        }
      }
      this.$emit('change', this.editData)
    }

  }

}
</script>

<style lang='scss' scoped>
.form {
  border-right: #CCCFCE solid 1px;
  border-left: #CCCFCE solid 1px;
  border-bottom: #CCCFCE solid 1px;

  .item {
    :deep(.el-form-item--default) {
      margin-bottom: 0;
      padding: 0;
    }
  }

  .label {
    padding-right: 10px;
    border-right: #CCCFCE solid 1px;
  }

  .sub-item {
    border-left: #CCCFCE solid 1px;
  }

  .sub-item:first-child {
    border-left: none;
  }
}

.form:first-child {
  padding: 0;
  border: #CCCFCE solid 1px;
}
</style>