elementui二次封装（搜索表单+编辑表单+编辑表格+弹框）

根据需求封装一个适配自己系统的搜索表单

1.搜索组件代码（新建searchForm.vue）

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2021-01-14 19:07:03
 */

<!-- 搜索表单 -->
<template>
  <div class="ces-search">
    <el-form ref="searchForm" :size="size" :label-width="labelWidth" :model="searchData" :rules="searchRules" class="searchForm newBorderTop" inline>
      <el-form-item v-for="item in searchForm" v-show="item.newShow ?(item.newShow && item.newShow(searchData)):true" :prop="item.prop" :key="item.label" :label-width="item.labelWidth">
        <span v-if="item.newShow ?(item.newShow && item.newShow(searchData)):true" slot="label" >{{ item.label?item.label:'' }}</span>
        <el-row v-if="item.newShow ?(item.newShow && item.newShow(searchData)):true">
          <!-- 输入框 -->
          <el-input
            v-if="item.type==='input'"
            :placeholder="item.placeholder"
            v-model="searchData[item.prop]"
            :size="size || item.size"
            :style="{width:item.width}"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            clearable
            @change="item.change(that,searchData[item.prop])"
            @input.native="item.inputChange&&item.inputChange(that,searchData[item.prop])"/>
          <!-- 输入框 带输入建议-->
          <el-autocomplete
            v-if="item.type==='autocomplete'"
            :fetch-suggestions="item.querySearchAsync(that)"
            :placeholder="item.placeholder"
            v-model="searchData[item.prop]"
            :size="size || item.size"
            :style="{width:item.width}"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            clearable
            @select="item.handleSelect"/>
          <!-- 下拉框isMultiple（是否多选） -->
          <el-select
            v-if="item.type==='select'"
            :clearable="item.isClearable"
            :collapse-tags="item.isCollapseTags"
            :multiple="item.isMultiple"
            :placeholder="item.placeholder"
            v-model="searchData[item.prop]"
            :size="size || item.size"
            :style="{width:item.width}"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change(that,searchData[item.prop])">
            <div v-if="item.prop==='community'">
              <el-option v-for="op in communityData" :label="op.parkName" :value="op.parkId" :key="op.id"/>
            </div>
            <div v-else>
              <el-option v-for="op in (item.options&&item.options(that))" :label="op.label" :value="op.value" :key="op.value"/>
            </div>
          </el-select>
          <!-- 下拉树 -->
          <treeselect
            v-if="item.type==='selectTree'"
            :style="{width:item.width}"
            v-model="searchData[item.prop]"
            :options="item.options"
            :multiple="item.multiple"
            :disabled="item.disabled && item.disabled(searchData)"
            :disable-branch-nodes="item.branchNodes"
            :show-count="true"
            :clearable="item.clearable"
            :auto-select-descendants="item.autoSelectDescendants"
            :flat="item.flat"
            :max-height="200"
            :placeholder="item.placeholder"
            value-consists-of="LEAF_PRIORITY"
            no-results-text="无匹配选项"
            no-options-text="无可用选项"
            no-children-text="无子节点"
            style="width: 100%;"
            @select="item.change && item.change(that,searchData[item.prop])"
          />
          <!-- Cascader 级联选择器 -->
          <el-cascader
            v-if="item.type==='cascader'"
            :ref="item.ref"
            v-model="searchData[item.prop]"
            :style="{width:item.width}"
            :options="item.options&&item.options(that)"
            :placeholder="item.placeholder"
            :disabled="item.disabled&&item.disabled(searchData[item.prop])"
            :show-all-levels="item.showAllLevel"
            :clearable="item.isClearable"
            :props="item.props&&item.props(that)"
            @change="item.change(that,searchData[item.prop])"/>
          <!-- 单选 -->
          <el-radio-group
            v-if="item.type==='radio'"
            v-model="searchData[item.prop]"
            :style="{width:item.width}"
            :size="size || item.size"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change(that,searchData[item.prop])">
            <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
          </el-radio-group>
          <!-- 单选按钮 -->
          <el-radio-group
            v-if="item.type==='radioButton'"
            v-model="searchData[item.prop]"
            :style="{width:item.width}"
            :size="size || item.size"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change && item.change(that,searchData[item.prop])">
            <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio-button>
          </el-radio-group>
          <!-- 复选框 -->
          <el-checkbox-group
            v-if="item.type==='checkbox'"
            v-model="searchData[item.prop]"
            :style="{width:item.width}"
            :size="size || item.size"
            :max="item.max"
            :min="item.min"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change(that,searchData[item.prop])">
            <el-checkbox v-for="ch in item.checkboxs||item.checkboxsNew&&item.checkboxsNew()" :label="ch.value" :key="ch.value">{{ ch.label }}</el-checkbox>
          </el-checkbox-group>
          <!-- 日期 -->
          <el-date-picker
            v-if="item.type==='date'"
            :placeholder="item.placeholder"
            v-model="searchData[item.prop]"
            :type="item.dateType"
            :style="{width:item.width}"
            :value-format="item.valueForm"
            :format="item.format"
            :clearable="item.isClearable"
            :size="size || item.size"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change(that,searchData[item.prop])"/>
          <!-- 时间 -->
          <el-time-select
            v-if="item.type==='time'"
            :placeholder="item.placeholder"
            v-model="searchData[item.prop]"
            :style="{width:item.width}"
            :size="size || item.size"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            type=""
            @change="item.change(that,searchData[item.prop])"/>
          <!-- 日期时间 -->
          <el-date-picker
            v-if="item.type==='dateTime'"
            :picker-options="item.pickerOptions"
            :format="item.format"
            :value-format="item.valueFormat"
            :placeholder="item.placeholder"
            :type="item.dateType"
            :clearable="item.isClearable"
            :style="{width:item.width}"
            v-model="searchData[item.prop]"
            :size="size || item.size"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change(that,searchData[item.prop])"/>
          <!-- 时间段 -->
          <el-date-picker
            v-if="item.type==='datetimerange'||item.type==='daterange'"
            :style="{width:item.width}"
            v-model="searchData[item.prop]"
            :size="size || item.size"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            :start-placeholder="item.type==='datetimerange'?'开始时间':'开始日期'"
            :end-placeholder="item.type==='datetimerange'?'结束时间':'结束日期'"
            :picker-options="item.pickerOptions"
            :type="item.type"
            range-separator="至"
            @change="item.change(that,searchData[item.prop])"/>
          <!-- 滑块 -->
          <!-- <el-slider v-if="item.type==='Slider'" v-model="searchData[item.prop]"></el-slider> -->
          <!-- 开关 -->
          <el-switch
            v-if="item.type==='switch'"
            v-model="searchData[item.prop]"
            :size="size || item.size"
            :style="{width:item.width}"
            :disabled="item.disable && item.disable(searchData[item.prop])"
            @change="item.change(that,searchData[item.prop])"/>
          <!-- 默认 -->
          <span
            v-if="!item.type&&!item.custom"
            :style="item.itemStyle && item.itemStyle(searchData[item.prop])"
            :size="size || btn.size"
            :class="item.itemClass && item.item.itemClass(searchData[item.prop])">
            {{ (item.formatter && item.formatter(searchData[item.prop])) || searchData[item.prop] }}</span>
          <el-button
            v-if="item.type==='button'"
            :disabled="item.disabled && item.disabled()"
            :loading="item.loading&&item.loading(that)"
            :style="item.itemStyle"
            :type="item.buttonType"
            :icon="item.icon"
            :size="size || item.size"
            style="margin:auto"
            @click="item.handle(that)">{{ item.buttonLabel }}</el-button>
          <!-- 自定义-->
          <div v-if="item.custom">
            <slot :name="item.customName"/>
          </div>
        </el-row>
      </el-form-item>
    </el-form>
    <div v-if="isHandle" class="buttonContent">
      <el-button
        v-for="item in searchHandle"
        v-show="item.isShow?(item.isShow==='true'?true:false):true"
        :loading="item.loading&&item.loading(that)"
        :key="item.label"
        :disabled="item.disabled && item.disabled()"
        :style="item.itemStyle"
        :type="item.type"
        :icon="item.icon"
        :size="size || item.size"
        @click="item.handle(that)">{{ item.label }}</el-button>
    </div>
  </div>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import { mapState } from 'vuex'
// import * as commonApi from '@/api/common'
export default {
  components: {
    Treeselect
  },
  props: {
    that: { type: Object, default: this },
    isHandle: {
      type: Boolean,
      default: true
    },
    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'mini'
    },
    searchForm: {
      type: Array,
      default: () => []
    },
    searchHandle: {
      type: Array,
      default: () => []
    },
    searchData: {
      type: Object,
      default: () => {}
    },
    searchRules: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      communityData: [],
      selectedCommunity: {}
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    this.searchForm.forEach(val => {
      if (val.prop === 'community') {
        this.getCommunity(val)
        this.selectedCommunity = val
      }
    })
  },
  methods: {
    // 得到社区数据
    getCommunity(val) {
      if (this.user && this.user.baseUserInfo && Object.keys(this.user.baseUserInfo).length !== 0) {
        this.doParkListData(val, this.user.baseUserInfo)
      }
    },
    doParkListData(val, data) {
      if (data.guardParkList.length > 0) {
        this.communityData = data.guardParkList
        if (!val.isMultiple) {
          if (val.isShowAllCommunity) {
            if (data.guardParkList.length > 1) {
              const allCommunity = {}
              allCommunity.id = '123'
              allCommunity.parkName = '全部社区'
              const parkIds = this.$route.query.parkId
              allCommunity.parkId = parkIds
              this.communityData.unshift(allCommunity)
            }
          }
          this.searchData.community = this.communityData[0].parkId

          this.$emit('getCommunity', data)
        } else {
          this.communityData.forEach((val, index) => {
            this.searchData.community && this.searchData.community.push(val.parkId)
            if (index === this.communityData.length - 1) {
              this.$emit('getCommunity', data)
            }
          })
        }
      } else {
        this.searchData.communityIds = '暂无小区'
      }
    },
    // 重置
    rest() {
      this.$refs.searchForm.resetFields()
      // this.getCommunity(this.selectedCommunity)
    },
    // 重置某个属性
    restOne(val) {
      const fields = this.$refs.searchForm.fields
      for (let i = 0; i < fields.length; i++) {
        if (fields[i].prop === val) {
          fields[i].resetField()
          break
        }
      }
    }
  }

}

</script>
<style>
.el-date-editor .el-range-separator{
  width: 10%;
}
.buttonContent{
  text-align:left;
}
.ces-search /deep/ .el-form-item{
  /* margin-bottom: 10px !important */
}
.vue-treeselect__control {
  height: 28px !important;
  font-size: 12px;
}
.vue-treeselect__single-value {
  line-height: 28px !important;
}

</style>

2.编辑表单封装（新建editForm.vue）

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2021-01-06 10:48:28
 */

<!-- 编辑表单 -->
<template>
  <el-form ref="editForm" :size="size" :label-width="labelWidth" :model="editData" :rules="editRules" inline>
    <div v-for="item in editCfg" v-show="item.newShow ?(item.newShow && item.newShow(editData)):true" :key="item.label" :style="{ width:item.itemWidth? `calc(${item.itemWidth} - 10px)`:`calc(50% - 10px)`}" style="display:inline-block">
      <div v-if="item.newShow ?(item.newShow && item.newShow(editData)):true" style="width:100%;">
        <div v-if="item.formSlot">
          <slot :name="item.formSlotName"/>
        </div>
        <el-form-item
          v-else
          :prop="item.prop"
          :label-width="item.labelWidth?item.labelWidth:labelWidth"
          :class="item.type==='button'?'noLabelWidth':''"
          :rules="item.rules&&item.rules"
          style="width:100%">
          <span slot="label" >{{ item.label?item.label:'' }}</span>
          <!-- 输入框 -->
          <el-input
            v-if="item.type==='input'"
            :placeholder="item.placeholder"
            v-model="editData[item.prop]"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            :style="{width:item.width?item.width:'100%'}"
            clearable
            @input.native="item.input && item.input(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 文本域 -->
          <el-input
            v-if="item.type==='textarea'"
            :placeholder="item.placeholder"
            :rows = "item.row"
            :maxlength="item.maxlength"
            :show-word-limit="item.isShowWord"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            v-model="editData[item.prop]"
            :style="{width:item.width?item.width:'100%'}"
            type="textarea"
            clearable
            @input.native="item.input && item.input(editData[item.prop])"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 下拉框 -->
          <el-select
            v-if="item.type==='select'"
            :collapse-tags="item.isCollapseTags"
            :multiple="item.isMultiple"
            :placeholder="item.placeholder"
            :filterable="item.filterable"
            :clearable="item.isClearable"
            :allow-create="item.isAllowCreate"
            :reserve-keyword="item.reserveKeyword"
            :remote="item.isRemote"
            :loading="item.loading"
            :remote-method="item.remoteMethod"
            :style="{width:item.width?item.width:'100%'}"
            v-model="editData[item.prop]"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            @change="item.change &&item.change(that,editData[item.prop])">
            <div v-if="item.prop==='community'">
              <el-option v-for="op in communityData" :label="op.parkName" :value="op.parkId" :key="op.id"/>
            </div>
            <div v-else-if="item.mySelf">
              <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value">
                <span style="float: left">{{ op.label }}</span>
                <span style="float: right; color: #8492a6; font-size: 13px">{{ op.mySelf }}</span>
              </el-option>
            </div>
            <div v-else>
              <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"/>
            </div>
            <el-pagination
              v-show="item.isPage"
              :current-page="item.currentPage?item.currentPage:1"
              :total="item.totalPage?item.totalPage:0"
              :page-size="item.pageSize?item.pageSize:10"
              small
              layout="prev, pager, next"
              @current-change="handleCurrentChange"/>
          </el-select>
          <!-- 下拉树 -->
          <treeselect
            v-if="item.type==='selectTree'"
            v-model="editData[item.prop]"
            :options="item.options"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            :style="{width:item.width}"
            :disable-branch-nodes="item.branchNodes"
            :show-count="true"
            :placeholder="item.placeholder"
            size="mini"
            value-consists-of="LEAF_PRIORITY"
            no-results-text="无匹配选项"
            no-options-text="无可用选项"
            no-children-text="无子节点"
            style="width: 100%;"
            @select="selectTree"
          />
          <!-- Cascader 级联选择器 -->
          <el-cascader
            v-if="item.type==='cascader'"
            :ref="item.ref"
            v-model="editData[item.prop]"
            :options="item.options&&item.options(that)"
            :placeholder="item.placeholder"
            :show-all-levels="item.showAllLevel"
            :clearable="item.isClearable"
            :props="item.props&&item.props(that)"
            @change="item.change&&item.change(that,searchData[item.prop])||''"/>
          <!-- 关键字搜索 -->
          <el-autocomplete
            v-if="item.type==='autocomplete'"
            v-model="editData[item.prop]"
            :fetch-suggestions="item.querySearchAsync"
            :placeholder="item.placeholder"
            :size="size || item.size"
            :clearable="item.isClearable"
            @select="item.handleSelect"
            @blur="item.blur &&item.blur(that,editData[item.prop])"
            @input="e => editData[item.prop] =item.filterContent&&item.filterContent (e)||editData[item.prop]"
          />
          <!-- 单选 -->
          <el-radio-group
            v-if="item.type==='radio'"
            v-model="editData[item.prop]"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            @change="item.change && item.change(editData[item.prop])">
            <el-radio v-for="ra in item.radios||(item.radioList&&item.radioList(that,editData[item.prop]))" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
          </el-radio-group>
          <!-- 单选按钮 -->
          <el-radio-group
            v-if="item.type==='radioButton'"
            v-model="editData[item.prop]"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            @change="item.change && item.change(editData[item.prop])">
            <el-radio-button v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio-button>
          </el-radio-group>
          <!-- 计数器 -->
          <el-input-number
            v-if="item.type==='inputNumber'"
            v-model="editData[item.prop]"
            :min="item.min"
            :max="item.max"
            :step="item.step"
            :label="item.label"
            :disabled="disabled||(item.disabled && item.disabled(editData))"

            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 复选框 -->
          <el-checkbox-group
            v-if="item.type==='checkbox'"
            v-model="editData[item.prop]"
            :max="item.max"
            :min="item.min"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            @change="item.change && item.change(editData[item.prop])">
            <el-checkbox v-for="ch in item.checkboxs||item.checkboxsNew&&item.checkboxsNew()" :label="ch.value" :key="ch.value">{{ ch.label }}</el-checkbox>
          </el-checkbox-group>
          <!-- 日期 -->
          <el-date-picker
            v-if="item.type==='date'"
            :type="item.dateType"
            v-model="editData[item.prop]"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 任意时间 -->
          <el-time-picker
            v-if="item.type==='timePicker'"
            :format="item.format"
            :value-format="item.valueFormat"
            v-model="editData[item.prop]"
            :picker-options="item.pickerOptions"
            :disabled="disabled||(item.disabled && item.disabled(editData))"

            :placeholder="item.placeholder"/>
          <!-- 固定时间段 -->
          <el-time-select
            v-if="item.type==='time'"
            v-model="editData[item.prop]"
            :picker-options="item.pickerOptions"
            :format="item.format"
            :placeholder="item.placeholder"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 日期时间 -->
          <el-date-picker
            v-if="item.type==='dateTime'"
            :format="item.format"
            :value-format="item.valueFormat"
            :default-time="item.default"
            :picker-options="item.pickerOptions"
            v-model="editData[item.prop]"
            :placeholder="item.placeholder"
            :disabled="disabled||(item.disable && item.disable(editData[item.prop]))"
            type="datetime"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 时间段 -->
          <el-date-picker
            v-if="item.type==='datetimerange'||item.type==='daterange'"
            v-model="editData[item.prop]"
            :size="size || item.size"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            :start-placeholder="item.type==='datetimerange'?'开始时间':'开始日期'"
            :end-placeholder="item.type==='datetimerange'?'结束时间':'结束日期'"
            :picker-options="item.pickerOptions"
            :type="item.type"
            range-separator="至"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 评分 -->
          <el-rate
            v-if="item.type==='rate'"
            :colors="item.colors"
            :icon-classes="item.iconClasses"
            :texts="item.texts"
            :value="score"
            :show-text="item.showText"
            :disabled="scoreDisabled"
            @change="changeScore"
          />
          <!-- 滑块 -->
          <!-- <el-slider v-if="item.type==='Slider'" v-model="editData[item.prop]"></el-slider> -->
          <!-- 开关 -->
          <el-switch
            v-if="item.type==='switch'"
            v-model="editData[item.prop]"
            :disabled="disabled||(item.disabled && item.disabled(editData))"
            :active-color="item.activeColor"
            :inactive-color="item.inactiveColor"
            :active-text="item.activeText"
            :inactive-text="item.inactiveText"
            :active-value="item.activeValue"
            :inactive-value="item.inactiveValue"
            @change="item.change && item.change(editData[item.prop])"/>
          <!-- 按钮 -->
          <el-button
            v-if="item.type==='button'"
            :loading="item.btnLoading&&item.btnLoading(that)"
            :type="item.btnType"
            :icon="item.btnIcon"
            :size="item.btnSize?item.btnSize:'mini'"
            :disabled="item.disabled ? item.disabled(editData):disabled"
            @click.native="item.btnHandle?item.btnHandle(that):btnHandle(item.prop)">{{ item.btnLabel }}</el-button>
          <!-- html -->
          <div v-if="item.type==='span'">
            <span>{{ (item.formatter && item.formatter(editData[item.prop])||editData[item.prop]) }}</span>
          </div>
          <div v-if="item.custom">
            <slot :name="item.customName"/>
          </div>
        </el-form-item>
      </div>
    </div>
  </el-form>
</template>

<script>
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'

import { mapState } from 'vuex'
export default {
  components: {
    Treeselect
  },
  props: {
    labelWidth: {
      type: String,
      default: '100px'
    },
    scoreDisabled: {
      type: Boolean,
      default: true
    },
    size: {
      type: String,
      default: 'mini'
    },
    editCfg: {
      type: Array,
      default: () => []
    },
    editData: {
      type: Object,
      default: () => {
      }
    },
    editRules: {
      type: Object,
      default: null
    },
    disabled: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      that: this,
      communityData: [],
      score: 5
    }
  },
  computed: {
    ...mapState(['user'])
  },
  mounted() {
    this.editCfg.forEach(val => {
      if (val.prop === 'community') {
        this.getCommunity(val)
      }
    })
  },
  methods: {
    selectTree(data1) {
      this.$emit('selectTree', data1.id)
    },
    // 重置
    rest() {
      this.$refs.editForm.resetFields()
    },
    // 重置某个属性
    restOne(val) {
      const fields = this.$refs.editForm.fields
      for (let i = 0; i < fields.length; i++) {
        if (fields[i].prop === val) {
          fields[i].resetField()
          break
        }
      }
    },
    changeScore(val) {
      this.score = val
      this.$emit('changeScore', val)
    },
    // 得到社区数据
    getCommunity(val) {
      if (Object.keys(this.user.baseUserInfo).length !== 0) {
        this.doParkListData(val, this.user.baseUserInfo)
      }
    },
    doParkListData(val, data) {
      if (data.guardParkList.length > 0) {
        this.communityData = data.guardParkList
        if (!val.isMultiple) {
          if (val.isShowAllCommunity) {
            if (data.guardParkList.length > 1) {
              const allCommunity = {}
              allCommunity.id = '123'
              allCommunity.parkName = '全部社区'
              const parkIds = this.$route.query.parkId
              allCommunity.parkId = parkIds
              this.communityData.unshift(allCommunity)
            }
          }
          this.editData.community = this.communityData[0].parkId
          this.$emit('getCommunity', data)
        } else {
          this.communityData.forEach((val, index) => {
            this.editData.community.push(val.parkId)
            if (index === this.communityData.length - 1) {
              this.$emit('getCommunity', data)
            }
          })
        }
      } else {
        this.editData.communityIds = '暂无小区'
      }
    },
    // 页码修改
    handleCurrentChange(val) {
      this.$emit('refreshPage', val)
    }
    // getThat(){
    //     this.$emit('that',this)
    // }
  }

}

</script>
<style scoped lang="scss">
.vue-treeselect__control {
  height: 28px !important;
  font-size: 12px;
}
.vue-treeselect__single-value {
  line-height: 28px !important;
}
.noLabelWidth{
  margin-left:10px;
  ::v-deep .el-form-item__label{
    display: none;
  }
   ::v-deep .el-form-item__content{
    .el-form-item__error{
      display: none
    }
  }
}
::v-deep .el-form-item__content{
  .el-select{
    width: 100% !important;
  }
  .el-cascader{
    width: 100% !important;
  }
  .el-input{
    width: 100% !important;
  }
  .el-input-number{
    width: 100% !important;
  }
  .el-range-editor.el-input__inner{
    width: 100%;
  }
}
</style>

3.编辑表格（新建table.vue）

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: jackQian
 * @Last Modified time: 2021-12-14 11:22:56
 */
<!--表格组件 -->
<template>
  <section class="ces-table-page">
    <!-- 表格操作按钮 -->
    <section v-if="isHandle" class="ces-handle">
      <el-button
        v-for="item in tableHandles"
        :plain="item.plain"
        :key="item.label"
        :size="size || item.size"
        :type="item.type"
        :icon="item.icon"
        @click="item.handle(that)">{{ item.label }}</el-button>
    </section>
    <!-- 数据表格 -->
    <section :class="isPagination?(isHandle?'ces-table2':'ces-table'):'ces-table1'">
      <el-table
        v-loading="loading"
        ref="refTable"
        :id="tableId"
        :row-drop-data="rowDropData"
        :column-drop-data="columnDropData"
        :height="'100%'"
        :data="tableData"
        :size="size"
        :border ="isBorder"
        :stripe ="isStripe"
        :tree-props="childrenData"
        :lazy="lazy"
        :load="load"
        :highlight-current-row = "isHighlight"
        :row-style="isRowStyle?rowStyle:rowStyle1"
        :default-expand-all="defaultExpandAll"
        :expand-row-keys="expands"
        :row-key="rowKey"
        max-height="100%"
        @select="select"
        @select-all="selectAll"
        @current-change="chooseTable"
        @expand-change="expandChange"
      >
        <el-table-column v-if="isExpand" type="expand" >
          <template slot-scope="props" >
            <slot :propsData="props.row" name="expandData"/>
          </template>
        </el-table-column>
        <el-table-column v-if="isSelection" type="selection" align="center"/>
        <el-table-column v-if="isIndex" :label="indexLabel" type="index" align="center" width="50"/>
        <!-- 数据栏 -->
        <template v-for="(item,index) in tableCols">
          <el-table-column
            v-if="item.tableColumnShow?item.tableColumnShow(123):true"
            :sortable="item.isSortable"
            :show-overflow-tooltip="item.showTooltip"
            :fixed="item.fixed&&item.fixed"
            :key="index"
            :prop="item.prop"
            :label="item.label"
            :width="item.width"
            :align="item.align"
            :render-header="item.require?renderHeader:null"
            :formatter="(row, column, cellValue, index)=>{if(cellValue.indexOf('null')){return ''}}"
          >
            <template slot-scope="scope" >
              <div v-show="item.isShow?(item.isShow && item.isShow(scope.row)):true">
                <!-- html -->
                <span v-if="item.type==='html'" v-html="item.html(scope.row)"/>
                <!-- 按钮 -->
                <div v-if="item.type==='button'">
                  <div
                    v-for="(btn,index1) in item.btnList"
                    v-show="btn.btnShow?(btn.btnShow&&btn.btnShow(scope.row)):true"
                    :key="btn.label?btn.label:index1+'a'"
                    style="margin:0 5px;display: inline-block;">
                    <el-tooltip v-if="btn.tip" :content="btn.label" class="item" effect="dark" placement="top-start">
                      <el-button
                        :disabled="btn.disabled && btn.disabled(scope.row)"
                        :type="btn.type"
                        :plain="btn.plain"
                        :size="size || btn.size"
                        :icon="btn.icon"
                        @click="btn.handle(that,scope.row)"
                      />
                    </el-tooltip>
                    <el-popover
                      v-else-if="btn.popover &&btn.popover(scope.row)"
                      :ref="scope.row.id"
                      placement="left"
                      width="200">
                      <p>{{ btn.content }}</p>
                      <div style="text-align: right; margin: 0">
                        <el-button size="mini" type="text" @click="doCloseClick(scope.row.id,btn.popoverIndex)">取消</el-button>
                        <el-button type="primary" size="mini" @click="btn.handle(scope.row),doCloseClick(scope.row.id,btn.popoverIndex)">确定</el-button>
                      </div>
                      <el-tooltip
                        v-if="btn.tipLabel"
                        slot="reference"
                        :content="btn.tipLabel"
                        class="item"
                        effect="dark"
                        placement="top-start">
                        <el-button
                          :plain="btn.plain"
                          :disabled="btn.disabled && btn.disabled(scope.row)"
                          :type="btn.type"
                          :size="size || btn.size"
                          :icon="btn.icon"
                        >{{ btn.label }}</el-button>
                      </el-tooltip>
                      <el-button
                        v-else
                        :plain="btn.plain"
                        :disabled="btn.disabled && btn.disabled(scope.row)"
                        :type="btn.type"
                        :size="size || btn.size"
                        :icon="btn.icon"
                      >{{ btn.label }}</el-button>
                    </el-popover>
                    <el-button
                      v-else
                      :plain="btn.plain"
                      :disabled="btn.disabled && btn.disabled(scope.row)"
                      :type="btn.type"
                      :size="size || btn.size"
                      :icon="btn.icon"
                      @click="btn.handle(that,scope.row)">{{ btn.label }}</el-button>
                  </div>
                </div>
                <!-- 输入框 -->
                <el-input
                  v-if="item.type==='input'"
                  v-model="scope.row[item.prop]"
                  :size="size || btn.size"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  @focus="item.focus && item.focus(scope.row)"/>
                <!-- 下拉框 -->
                <el-select
                  v-if="item.type==='select'"
                  v-model="scope.row[item.prop]"
                  :size="size || item.size"
                  :props="item.props"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  @change="item.change && item.change(that,scope.row)">
                  <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"/>
                </el-select>
                <!-- 单选 -->
                <el-radio-group
                  v-if="item.type==='radio'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(that,scope.row)">
                  <el-radio v-for="ra in item.radios" :label="ra.value" :key="ra.value">{{ ra.label }}</el-radio>
                </el-radio-group>
                <!-- 复选框 -->
                <el-checkbox-group
                  v-if="item.type==='checkbox'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(that,scope.row)">
                  <el-checkbox v-for="ra in item.checkboxs" :label="ra.value" :key="ra.value">{{ ra.label }}</el-checkbox>
                </el-checkbox-group>
                <!-- 评价 -->
                <el-rate
                  v-if="item.type==='rate'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled||(item.isDisabled && item.isDisabled(scope.row))"
                  :size="size || btn.size"
                  @click="item.handle && item.handle(scope.row)"
                  @change="item.change && item.change(scope.row)"/>
                <!-- 开关 -->
                <el-switch
                  v-if="item.type==='switch'"
                  :value="(item.formatter && item.formatter(scope.row)) || scope.row[item.prop]"
                  :size="size || btn.size"
                  :active-value="item.values&&item.values[0]"
                  :inactive-value="item.values&&item.values[1]"
                  :active-text="item.text&&item.text[0]"
                  :inactive-text="item.text&&item.text[1]"
                  :active-color="item.color&&item.color[0]"
                  :inactive-color="item.color&&item.color[1]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  @change="item.change && item.change"/>
                <!-- 图像 -->
                <div v-if="item.type==='image'&&scope.row[item.prop]" class="pic-content">
                  <el-image
                    :src="scope.row[item.prop].split(',')[0]"
                    :preview-src-list="scope.row[item.prop].split(',')"
                    style="width: 35px; height: 35px"
                    fit="contain"/>
                </div>
                <!-- <img v-if="item.type==='image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)"> -->
                <!-- 缩略图 -->
                <div v-if="item.type==='thumbnail'">
                  <el-popover placement="right" title="" trigger="hover">
                    <img :src="scope.row[item.prop]" style="width: 500px ;overflow: auto;">
                    <img slot="reference" :src="scope.row[item.prop]" :alt="scope.row[item.prop]" style="height: 35px;overflow: auto;">
                  </el-popover>
                </div>
                <!-- 滑块 -->
                <el-slider
                  v-if="item.type==='slider'"
                  v-model="scope.row[item.prop]"
                  :disabled="item.isDisabled && item.isDisabled(scope.row)"
                  :size="size || btn.size"
                  @change="item.change && item.change(scope.row)"/>

                <!-- 图标 -->
                <i
                  v-if="item.type==='icon'"
                  :style="item.itemStyle && item.itemStyle(scope.row)"
                  :size="size || btn.size"
                  :class="(item.itemClass && item.itemClass(scope.row))||item.itemClass"
                ><span :style="item.itemStyle1 && item.itemStyle1(scope.row)">
                  {{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}
                </span>
                </i>
                <!-- 标签 -->
                <el-tag
                  v-if="item.type==='tag'"
                  :size="size || item.size"
                  :type="item.tagType&& item.tagType(scope.row)"
                  :effect="item.effect"
                  :hit="item.hit"
                  :closable="item.closable"
                  :style="item.itemStyle && item.itemStyle(scope.row)"
                  :class="item.itemClass && item.item.itemClass(scope.row)"
                > {{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}</el-tag>
                <!-- 默认 -->
                <span
                  v-if="!item.type"
                  :style="item.itemStyle && item.itemStyle(scope.row)"
                  :size="size || item.size"
                  :class="item.itemClass && item.item.itemClass(scope.row)">
                  {{ (item.formatter && item.formatter(scope.row)) || scope.row[item.prop] }}</span>
                <!-- 自定义-->
                <div v-if="item.custom">
                  <slot :row="scope" :name="item.customName"/>
                </div>
              </div>
            </template>
          </el-table-column>
        </template>
      </el-table>
    </section>
    <!-- 分页 -->
    <section v-if="isPagination" class="ces-pagination">
      <el-pagination
        :page-sizes="tablePageSizes"
        :page-size="tablePage.pageSize"
        :current-page="tablePage.pageNum"
        :total="tablePage.total"
        :layout="pageOut"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange"
      />
    </section>
  </section>
</template>

<script>
import Sortable from 'sortablejs'

export default {
  props: {
    that: { type: Object, default: this },
    // 表格型号：mini,medium,small
    size: { type: String, default: 'medium' },
    refTable: { type: String, default: 'cesTable' },
    isBorder: { type: Boolean, default: true },
    isStripe: { type: Boolean, default: false },
    isRowStyle: { type: Boolean, default: false },
    isHighlight: { type: Boolean, default: true },
    loading: { type: Boolean, default: false },
    rowKey: { type: String, default: 'id' },
    // 表格操作
    isHandle: { type: Boolean, default: false },
    tableHandles: { type: Array, default: () => [] },
    // 表格数据
    // eslint-disable-next-line standard/object-curly-even-spacing
    tableData: { type: Array, default: () => [] },
    tableId: { type: String, default: '' },
    // 行拖拽
    rowDropData: {
      type: Object,
      default: () => ({
        disabled: true, // 拖拽不可用? false 启用
        ghostClass: 'sortable-ghost', // 拖拽样式
        animation: 150 // 拖拽延时，效果更好看
      })
    },
    // 列拖拽
    columnDropData: {
      type: Object,
      default: () => ({
        disabled: true, // 拖拽不可用? false 启用
        ghostClass: 'sortable-ghost', // 拖拽样式
        animation: 150, // 拖拽延时，效果更好看
        delay: 0,
        filter: '.cannotDrag'
      })
    },
    // 表格列配置
    // eslint-disable-next-line standard/object-curly-even-spacing
    tableCols: { type: Array, default: () => [] },
    // 是否显示表格复选框
    isSelection: { type: Boolean, default: false },
    // 是否默认选中第一行
    defaultSelections: {
      type: Boolean, default: true
    },
    // 是否显示表格索引
    isIndex: { type: Boolean, default: false },
    indexLabel: { type: String, default: '序号' },
    // 是否显示分页
    isPagination: { type: Boolean, default: true },
    // 表格展开行
    isExpand: { type: Boolean, default: false },
    // 自定义表格
    custom: { type: Boolean, default: false },
    // 要展开的行，数值的元素是row的key值
    expands: { type: Array, default: () => [] },
    // 是否默认展开表格
    defaultExpandAll: { type: Boolean, default: false },
    // 分页数据
    // eslint-disable-next-line standard/object-curly-even-spacing
    tablePage: { type: Object, default: () => ({
      pageSize: 10,
      pageNum: 1,
      total: 0 }) },
    tablePageSizes: {
      type: Array,
      default: () => {
        return [10, 20, 30, 40]
      }
    },
    // 分页要展示的数据
    pageOut: {
      type: String,
      default: 'total ,sizes ,prev, pager, next,jumper'
    },
    // 操作的子
    // 渲染嵌套数据的配置选项
    childrenData: {
      type: Object,
      default: () => ({
        children: 'children',
        hasChildren: 'hasChildren'
      })
    },
    // 是否懒加载子节点数据
    lazy: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      isShow: true,
      currentChangeTableData: {}
    }
  },
  watch: {
    // 'defaultSelections'(val) {
    //   this.$nextTick(function() {
    //     if (Array.isArray(val)) {
    //       val.forEach(row => {
    //         this.$refs.refTable.toggleRowSelection(row)
    //       })
    //     } else {
    //       this.$refs.refTable.toggleRowSelection(val)
    //     }
    //   })
    // },
    tableData: {
      handler(newValue, oldValue) {
        if (this.isHighlight && this.defaultSelections) {
          if (newValue.length > 0) {
            this.$refs.refTable.setCurrentRow(this.tableData[0])
          }
        }
      },
      deep: true
    },
    rowDropData: {
      handler(newValue, oldValue) {
        this.rowDrop(newValue)
      },
      deep: true
    },
    columnDropData: {
      handler(newValue, oldValue) {
        this.columnDrop(newValue)
      },
      deep: true
    }
  },
  created() {
    this.keyboardClick()
  },
  mounted() {
    if (this.tableData.length && this.isHighlight) {
      this.$refs.refTable.setCurrentRow(this.tableData[0])
    }
    // 阻止默认行为
    document.body.ondrop = function(event) {
      event.preventDefault()
      event.stopPropagation()
    }
    this.rowDrop(this.rowDropData)
    this.columnDrop(this.columnDropData)
  },
  methods: {
    // 表格选中
    chooseTable(row) {
      this.currentChangeTableData = row
      this.$emit('selectRow', row)
    },
    // 表格勾选
    select(rows, row) {
      this.$emit('select', rows, row)
    },
    // 全选
    selectAll(rows) {
      this.$emit('select', rows)
    },
    // 加载子
    load(tree, treeNode, resolve) {
      this.$emit('load', tree, treeNode, resolve)
    },
    // 展开子
    expandChange(row, expandedRows) {
      const that = this
      if (expandedRows.length) { // 此时展开
        // that.expands = []
        that.$emit('expandChange', row, expandedRows)
      } else { // 折叠
        // that.expands = []
      }
    },
    // 颜色样式
    rowStyle({ row, rowIndex }) {
      if (row.status) {
        return 'background:' + (row.status === 'CRETE' ? 'rgba(241, 37, 37, 0.1);' : (row.status === 'LOADING' ? 'rgba(229, 232, 20, 0.1)' : (row.status === 'COMPLETE' ? 'rgb(192, 196, 204, 0.1)' : '')))
      } else if (row.actionResult) {
        return 'background:' + (row.actionResult === 'OFFLINE' ? 'rgba(241, 37, 37, 0.1);' : (row.actionResult === 'ONLINE' ? 'rgba(33, 232, 20, 0.1)' : ''))
      } else if (row.registerStatus === 'UNREGISTERED') {
        return 'background:rgba(241, 37, 37, 0.1);'
      }
    },
    rowStyle1() {},
    //
    handleCurrentChange(val) {
      this.tablePage.pageNum = val
      this.$emit('refresh')
    },
    handleSizeChange(val) {
      this.tablePage.pageNum = 1
      this.tablePage.pageSize = val
      this.$emit('refresh')
    },
    // 行拖拽
    rowDrop(rowDropData) {
      const tbody = document.querySelector('.el-table__body-wrapper tbody')
      const _this = this
      Sortable.create(tbody, Object.assign(rowDropData, {
        onEnd({ newIndex, oldIndex }) {
          const listTemp = [..._this.tableData]
          const currRow = listTemp.splice(oldIndex, 1)[0]
          listTemp.splice(newIndex, 0, currRow)

          _this.$emit('rowDrop', listTemp, currRow, newIndex)
        }
      }))
    },
    // 列拖拽
    columnDrop(columnDropData) {
      const _this = this
      const wrapperTr = document.querySelector('.el-table__header-wrapper tr')
      _this.sortable = Sortable.create(wrapperTr, Object.assign(columnDropData, {
        onEnd: evt => {
          const oldItem = _this.tableCols[evt.oldIndex]
          _this.tableCols.splice(evt.oldIndex, 1)
          _this.tableCols.splice(evt.newIndex, 0, oldItem)
          _this.$emit('columnDrop', oldItem, evt.newIndex)
        }
      }))
    },
    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', { class: 'ces-table-require' }, obj.column.label)
    },
    // 键盘监听事件上下移动
    keyboardClick() {
      // 监听键盘事件
      var _this = this
      document.onkeydown = function(e) {
        const key = window.event.keyCode
        if (key === 13) {
          // _this.searchClick()
        } else {
          if (_this.tableData.length) {
            const count = _this.tableData.indexOf(_this.currentChangeTableData)
            if (key === 38) {
              if (count === 0) {
                _this.$refs.refTable.setCurrentRow(_this.tableData[_this.tableData.length - 1])
              } else {
                _this.$refs.refTable.setCurrentRow(_this.tableData[count - 1])
              }
            } else if (key === 40) {
              if (count === _this.tableData.length - 1) {
                _this.$refs.refTable.setCurrentRow(_this.tableData[0])
              } else {
                _this.$refs.refTable.setCurrentRow(_this.tableData[count + 1])
              }
            }
          }
        }
      }
    },
    doCloseClick(val, index) {
      this.$refs[val] && this.$refs[val][index] && this.$refs[val][index].doClose()
    }

  }
}
</script>
<style lang="scss" scoped>
.ces-table-require::before{
  content:'*';
  color:red;
}
.ces-table{
  min-height: calc(150px - 40px);
  max-height:calc(100% - 40px);
  flex:1;
}
.ces-table2{
  min-height: calc(150px - 40px - 40px);
  max-height:calc(100% - 40px - 40px);
  flex:1;
}
.ces-table1{
  min-height: 100px;
  max-height:100%;
  flex:1;
}
.newComponents .el-table--scrollable-y .el-table__body-wrapper{
  /* max-height: 100% !important; */
  overflow: auto;
}
.ces-pagination{
  text-align:left;
  justify-content: left;
}
</style>

4.弹框组件

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2021-01-14 16:52:55
 */
<template>
  <el-dialog :visible.sync="modalCfg.visible" :close-on-click-modal="false" :width="width" append-to-body @close="close">
    <div v-if="isHeader" slot="title" style="font-size:18px;">
      {{ modalCfg.title }}
    </div>
    <slot/>
    <div v-if="isHandle" slot="footer">
      <!-- 操作底部 -->
      <el-button
        v-for="item in modalCfg.handles"
        v-show="item.isShow==='show'||!item.isShow"
        :loading="item.loading&&item.loading(that)"
        :key="item.label"
        :type="item.type"
        :icon="item.icon"
        :size="item.size?item.size:'mini'"
        :disabled="item.disabled"
        @click="item.handle(that)">{{ item.label }}</el-button>
    </div>
  </el-dialog>
</template>

<script>

export default {
  props: {
    that: { type: Object, default: this },
    modalCfg: {
      type: Object,
      // eslint-disable-next-line vue/require-valid-default-prop
      default: {
        visible: false,
        title: '',
        handles: []
      }
    },
    width: {
      type: String,
      default: '50%'
    },
    isHeader: {
      type: Boolean,
      default: true
    },
    isHandle: {
      type: Boolean,
      default: true
    }

  },
  computed: {

  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>
<style scoped>
 ::v-deep .el-dialog__header{
  background-color: #e3e3e3;
}
</style>

5.使用（新建index.vue）

/*
 * @Author: duyan
 * @Date: 2020-04-07 10:46:56
 * @Last Modified by: duyan
 * @Last Modified time: 2020-04-29 16:33:24
 */
<template>
  <div class='abnormalAlarm newComponents'>
    <!-- 搜索 -->
    <search-form
      ref="searchForm"
      :that='that'
      size='mini'
      labelWidth = '80px'
      :searchData = "searchData"
      :searchForm = "searchForm"
      :searchRules= "searchRules"
      :searchHandle= "searchHandle">
    </search-form>
    <!-- 操作表格 -->
    <div class="container_bottom">
      <div class="searchTable">
        <div class="line-left-right">
          <el-button
            size="mini"
            disabled
            style="color:#333 !important;position:relative;bottom:15px;left:20px"
          >异常信息查询</el-button>
        </div>
        <editTable
          :that='that'
          size='mini'
          :isRowStyle = 'true'
          :isSelection='true'
          :isPagination='true'
          :isHandle='false'
          :isIndex ='false'
          :isStripe='false'
          :isHighlight='false'
          :isBorder ='true'
          :tableData='tableData'
          :tableCols='tableCols'
          :tablePage='tablePage'
          @refresh="refreshPage"
          @select ="selectTable"
        ></editTable>
      </div>
      <div class="websocketData">
        <div class="line-left-right">
          <el-button
            size="mini"
            disabled
            style="color:#333 !important;position:relative;bottom:15px;left:20px"
          >异常信息推送</el-button>
        </div>
        <!-- <div class="websocketStatus">连接状态:<span>{{websocketStatus}}</span></div> -->
        <!-- 操作表格 -->
        <editTable
          :that='that'
          size='mini'
          :isSelection='false'
          :isPagination='false'
          :isHandle='false'
          :isIndex ='false'
          :isStripe='false'
          :isHighlight='false'
          :isBorder ='false'
          :tableData='websocketData'
          :tableCols='tableCols1'
        ></editTable>
      </div>
    </div>
    <!-- 弹窗 -->
    <dialogModal width='450px'
      :that='that' :modalCfg='modalCfg'>
        <editForm ref='editForm' :that='that'
          :editCfg='editForm'
          :editData='editData'
          :editRules='editRules' ></editForm>
      </dialogModal>
  </div>
</template>

<script>
// import '../../../assets/media'
import filtersMethod from '@/assets/js/filters.js'
import searchForm from '@/components/common/form/searchForm'
import editTable from '@/components/common/table/table'
import editForm from '@/components/common/form/editForm'
import dialogModal from '@/components/common/dialog/dialog'
const StatusOption = [{label: '未处理', value: 'CRETE'}, {label: '已受理', value: 'LOADING'}, {label: '已处理', value: 'COMPLETE'}]
const typeOption = [{label: '全部', value: 'ALLTYPE'}, {label: '设备离线', value: 'ACCESS_EQUIPMENT_OFFLINE'}, {label: '注册失败', value: 'USER_REGISTER_FAIL'}, {label: '卡失效', value: 'SWING_OPEN_FAIL'}]
export default {
  // 名字
  name: 'abnormalAlarm',
  // 数据
  data() {
    return {
      that: this,
      parkIds: '',
      userId: '',
      searchData: {
        status: [
          'CRETE', 'LOADING', 'COMPLETE'
        ],
        community: '全部社区',
        type: 'ALLTYPE',
        createTime: [new Date().setTime(new Date().getTime() - 3600 * 1000 * 24 * 1), new Date().setTime(new Date().getTime() + 3600 * 1000 * 24 * 1)]
      },
      searchForm: [
        {type: 'select', label: '社区:', prop: 'community', options: '', width: '150px', placeholder: '选择社区', change: that => that.changeSearchData()},
        {type: 'select', label: '类型:', isMultiple: false, prop: 'type', options: typeOption, width: '130px', placeholder: '请选择类型', change: that => that.changeSearchData()},
        {type: 'select', label: '状态:', isMultiple: true, prop: 'status', options: StatusOption, width: '250px', placeholder: '请选择状态', change: that => that.changeSearchData()},
        {type: 'input', label: '操作人:', prop: 'operatorId', placeholder: '请输入操作人', change: that => that.changeSearchData(), width: '130px'},
        {type: 'datetimerange', label: '创建时间:', prop: 'createTime', width: '180px', change: that => that.changeSearchData()}
      ],
      searchRules: {},
      searchHandle: [
        {label: '查询',
          itemStyle: 'margin-right:.8rem',
          type: 'primary',
          icon: 'el-icon-search',
          handle: that => that.searchFormClick(that.$refs.searchForm)},
        {label: '批量受理',
          type: 'primary',
          disabled: () => {
            return this.bathDisabled1
          },
          icon: 'el-icon-copy-document',
          handle: that => that.batchUpdateStatua('LOADING')},
        {label: '批量完成',
          type: 'success',
          disabled: () => {
            return this.bathDisabled2
          },
          icon: 'el-icon-copy-document',
          handle: that => that.showEditModal('batch')}
        // {label: '23', type: 'success', icon: 'el-icon-bell', handle: that => that.searchFormClick(that.$refs.searchForm)}
      ],
      tableData: [
        {carPlate: '多社区西墨2',
          createDateTime: '2020-04-29T16:00:42',
          currentGuardLevel: 1,
          detils: '故障时间:2020-04-29 16:00:41  设备:多社区西墨2-1栋-2单元门禁设备  编号:V1949374554',
          gateId: 'V1949374554',
          id: '4567',
          parkId: '123',
          remark: null,
          showLevel: 1,
          status: 'CRETE',
          type: 'ACCESS_EQUIPMENT_OFFLINE',
          upReportTimeLine: null
        }
      ],
      tableCols: [
        {label: '事件状态',
          itemStyle: (row) => {
            // return 'color:' + (row.status === 'CRETE' ? '#f56c6c' : (row.status === 'LOADING' ? '#e5e814' : (row.status === 'COMPLETE' ? '#c0c4cc' : '')))
          },
          prop: 'status',
          width: '100px',
          formatter: row => filtersMethod.usageAbnormalAlarmStatus(row.status)},
        {label: '创建时间', prop: 'createDateTime', width: '150px', formatter: row => filtersMethod.usageTime1(row.createDateTime)},
        {label: '事件类型', prop: 'type', width: '120px', formatter: row => filtersMethod.usageAbnormalAlarmType(row.type)},
        {label: '社区',
          prop: 'carPlate',
          width: '150px',
          formatter: row => {
            if (!row.carPlate) {
              return '云智社区用户'
            }
          }},
        {label: '操作人', isShow: 'show', prop: 'operatorId', width: '120px'},
        {label: '操作时间', isShow: 'show', prop: 'operatorDateTime', width: '150px', formatter: row => filtersMethod.usageTime1(row.operatorDateTime)},
        {label: '备注', isShow: this.tableHeadShowRemark, prop: 'remark', width: '120px'},
        {label: '次数', prop: 'currentGuardLevel', width: '50px'},
        {label: '详情', prop: 'detils'},
        {label: '操作',
          type: 'button',
          width: '200px',
          btnList: [
            {type: 'primary',
              label: '受理',
              handle: (that, row) => that.updateStatua(row, 'LOADING')},
            {type: 'success',
              label: '完成',
              disabled: row => {
                if (row.status === 'COMPLETE') {
                  return true
                } else {
                  return false
                }
              },
              handle: (that, row) => that.showEditModal(row)}
          ]}
      ],
      tablePage: {
        pageSize: 10,
        total: 0,
        pageNum: 1
      },
      tableCols1: [
        {label: '完成时间', width: '250px', prop: 'nowTime'},
        {label: '事件类型',
          width: '150px',
          prop: 'type',
          itemStyle: (row) => {
            return 'color:' + (row.type === 'ACCESS_EQUIPMENT_OFFLINE' ? '#f56c6c' : (row.type === 'USER_REGISTER_FAIL' ? '#e5e814' : (row.type === 'SWING_OPEN_FAIL' ? '#c0c4cc' : '')))
          },
          formatter: row => filtersMethod.usageAbnormalAlarmType(row.type)},
        {label: '社区', width: '150px', prop: 'carPlate'},
        {label: '详情', prop: 'detatails'}
      ],
      websocketData: [
      ],
      modalCfg: {
        visible: false,
        title: null,
        close: that => that.hideEditModal(),
        handles: [
          {label: '确定', type: 'primary', size: 'mini', handle: that => that.editFormClick(that.$refs.editForm)},
          {label: '取消', type: 'primary', size: 'mini', handle: that => that.hideEditModal()}
        ]
      },
      editForm: [
        {label: '备注', prop: 'mark', type: 'textarea', maxlength: '200', isShowWord: true, placeholder: '请输入备注', row: '3', width: '280px'}
      ],
      editData: {
        mark: null
      },
      editSelectedData: {},
      editRules: {
        mark: [
          { required: true, message: '请输入备注', trigger: 'blur' }
        ]
      },
      // 批量事件Id
      ids: [],
      // 语音播报token
      tokon: '',
      src: '',
      isHidden: false,
      bathDisabled1: false,
      bathDisabled2: false
    }
  },
  // 部件
  components: {
    searchForm,
    editTable,
    dialogModal,
    editForm
  },
  // 静态
  props: {
  },
  filters: {
  },
  // 对象内部的属性监听，也叫深度监听
  watch: {
  },
  // 属性的结果会被缓存，除非依赖的响应式属性变化才会重新计算。主要当作属性来使用；
  computed: {
  },
  // 方法表示一个具体的操作，主要书写业务逻辑；
  methods: {
    // 动态展示表头
    showTableDead(value) {
      let tableCols1 = JSON.parse(JSON.stringify(this.tableCols))
      tableCols1.forEach((val, index) => {
        if (val.label === '操作人' || val.label === '操作时间') {
          // this.$set(tableCols1[index], 'isShow', val)
          this.tableCols[index].isShow = value
        }
      })
    },
    // 得到搜索表单数据
    getSearchForm() {
    },
    // 表单查询
    searchFormClick(that) {
      that.$refs.searchForm.validate(valid => {
        if (valid) {
          this.getTableData()
        }
      })
    },
    // 参数修改
    changeSearchData(val) {
      this.bathDisabled1 = false
      this.bathDisabled2 = false
      this.getTableData()
    },
    // 得到表单数据
    getTableData() {
    },
    // 单个更新状态
    updateStatua(val, status) {
      console.log(val)
    },
    // 批量更新状态
    batchUpdateStatua(status) {
    },
    // 弹框展示
    showEditModal(val) {
      this.modalCfg.visible = true
      this.modalCfg.title = '单个事件处理'
    },
    hideEditModal() {
      this.modalCfg.visible = false
      this.modalCfg.title = null
    },
    // 确认处理
    editFormClick(that) {
      that.$refs.editForm.validate(valid => {
        if (valid) {
          if (this.modalCfg.title === '单个事件处理') {
            this.updateStatua(this.editSelectedData, 'COMPLETE')
          } else if (this.modalCfg.title === '批量事件处理') {
            this.batchUpdateStatua('COMPLETE')
          }
        }
      })
    },
    // 页码刷新
    // 刷新页面
    refreshPage() {
      this.getTableData()
    },
    // 表单勾选
    selectTable(value) {
      console.log(value)
    }
  },
  // 请求数据
  created() {
  },
  mounted() {
    this.parkIds = this.$route.query.parkId.replace(/,/g, '@')
    this.userId = this.$route.query.userId
  },
  destroyed() {
  }
}
</script>

<style scoped lang="stylus">
/deep/ .el-table__body .el-table_1_column_10 .cell {
  text-align: left !important;
}
/deep/ .el-table__body .el-table_2_column_15 .cell {
  text-align: left !important;
}
.abnormalAlarm
  .container_bottom
    height: calc(100% - 120px);
  .searchTable
    height: calc(100% * 0.6)
    .ces-table-page
      height: calc(100% - 23px)
  .websocketData
    height: calc(100% * 0.4)
    .ces-table-page
      height: calc(100% - 23px);
.isHidden{
  display:none
}
.ces-table{
  height 100% !important
}

.line-left-right{
    margin: 10px 0;
    padding: 0 0px 0px;
    line-height: 1px;
    border-top: 1px solid #409eff;
    text-align: left;
    height: 2px;
  }
.websocketData{
  height: 90%;
  overflow: auto;
  .websocketItem{
    text-align: left;
    padding: .5rem;
    box-sizing: border-box;
    word-wrap:break-word
    .websocketDetail{
      margin-left:.5rem
    }
  }
  /deep/ .el-table__body td{
    color:#ff0000
    background:#ffffff !important
  }
}
/deep/ .el-table .cell{
  text-align center
}
</style>

6.页面展示图：

参考链接