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

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

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

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2020-04-29 15:46:26
 */

<!-- 搜索表单 -->
<template>
<div class="ces-search">
    <el-form ref='searchForm' class="searchForm newBorderTop" :size="size" inline :label-width="labelWidth" :model="searchData" :rules="searchRules">
        <el-form-item v-for='item in searchForm' :label="item.label" :prop='item.prop' :key="item.label">
            <!-- 输入框 -->
            <el-input v-if="item.type==='input'" :placeholder="item.placeholder" clearable v-model="searchData[item.prop]" :size="size || item.size" :style="{width:item.width}"
                @change="item.change(that,searchData[item.prop])"
                :disabled="item.disable && item.disable(searchData[item.prop])">
            </el-input>
            <!-- 输入框 带输入建议-->
            <el-autocomplete v-if="item.type==='autocomplete'"  :fetch-suggestions="item.querySearchAsync(that)" :placeholder="item.placeholder" clearable v-model="searchData[item.prop]" :size="size || item.size" :style="{width:item.width}"
                @select="item.change(that,searchData[item.prop])"
                :disabled="item.disable && item.disable(searchData[item.prop])">
            </el-autocomplete>
            <!-- 下拉框 -->
            <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}"
                @change="item.change(that,searchData[item.prop])"
                :disabled="item.disable && item.disable(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"></el-option>
                </div>
                <div v-else>
                    <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
                </div>
            </el-select>
            <!-- 单选 -->
            <el-radio-group v-if="item.type==='radio'" v-model="searchData[item.prop]" :style="{width:item.width}"
                @change="item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(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}"
                @change="item.change && item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(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}"
                @change="item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(searchData[item.prop])">
                <el-checkbox v-for="ch in item.checkboxs" :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]" :style="{width:item.width}"
                @change="item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(searchData[item.prop])"></el-date-picker>
            <!-- 时间 -->
            <el-time-select v-if="item.type==='time'" :placeholder="item.placeholder" v-model="searchData[item.prop]" type='' :style="{width:item.width}"
                @change="item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(searchData[item.prop])"></el-time-select>
            <!-- 日期时间 -->
            <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' :style="{width:item.width}" v-model="searchData[item.prop]"
                @change="item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(searchData[item.prop])"></el-date-picker>
            <!-- 时间段 -->
            <el-date-picker v-if="item.type==='datetimerange'" range-separator="至" start-placeholder="开始时间" end-placeholder="结束时间"  type='datetimerange' :style="{width:item.width}" v-model="searchData[item.prop]"
                @change="item.change(that,searchData[item.prop])" :size="size || item.size"
                :disabled="item.disable && item.disable(searchData[item.prop])"></el-date-picker>
            <!-- 滑块 -->
            <!-- <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"
                @change="item.change(that,searchData[item.prop])" :style="{width:item.width}"
                :disabled="item.disable && item.disable(searchData[item.prop])"></el-switch>
        </el-form-item>
        <el-form-item>
          <el-form inline v-if='isHandle'>
            <el-form-item v-for='item in searchHandle' :key="item.label">
                <el-button :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>
            </el-form-item>
          </el-form>
        </el-form-item>
    </el-form>
</div>
</template>

<script>
export default {
  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 {}
  },
  methods: {},
  mounted() {
    this.searchForm.forEach(val => {
      if (val.prop === 'community') {
        //这里如果有公用的可以根据类型来进行统一处理
      }
    })
  }

}

</script>
<style>

</style>

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

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2020-04-29 15:46:28
 */

<!-- 搜索表单 -->
<template>
    <el-form ref='editForm' :size="size" inline :label-width="labelWidth" :model="editData" :rules="editRules">
        <el-form-item v-for='item in editCfg' :label="item.label" :prop='item.prop' :key="item.label"  >
            <!-- 输入框 -->
            <el-input v-if="item.type==='input'" :placeholder="item.placeholder" v-model="editData[item.prop]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)"
                :style="{width:item.width}"></el-input>
            <!-- 文本域 -->
            <el-input v-if="item.type==='textarea'" :placeholder="item.placeholder" type="textarea"
                :rows = "item.row"
                :maxlength="item.maxlength"
                :show-word-limit="item.isShowWord"
                :disabled="item.disabled && item.disabled(editData)"
                @change="item.change && item.change(editData[item.prop])"
                 v-model="editData[item.prop]"  :style="{width:item.width}"></el-input>
            <!-- 下拉框 -->
            <el-select v-if="item.type==='select'" v-model="editData[item.prop]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)">
                <el-option v-for="op in item.options" :label="op.label" :value="op.value" :key="op.value"></el-option>
            </el-select>
            <!-- 单选 -->
            <el-radio-group v-if="item.type==='radio'" v-model="editData[item.prop]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)">
                <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="editData[item.prop]"
                    @change="item.change && item.change(editData[item.prop])"
                    :disabled="item.disabled && item.disabled(editData)">
                <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="editData[item.prop]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)">
                <el-checkbox v-for="ch in item.checkboxs" :label="ch.value" :key='ch.value'>{{ch.label}}</el-checkbox>
            </el-checkbox-group>
            <!-- 日期 -->
            <el-date-picker v-if="item.type==='date'" v-model="editData[item.prop]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)"></el-date-picker>
            <!-- 时间 -->
            <el-time-select v-if="item.type==='time'" v-model="editData[item.prop]" type=''
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)"></el-time-select>
            <!-- 日期时间 -->
            <el-date-picker v-if="item.type==='dateTime'" type='datetime' v-model="editData[item.prop]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disable && item.disable(editData[item.prop])"></el-date-picker>
            <!-- 滑块 -->
            <!-- <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]"
                @change="item.change && item.change(editData[item.prop])"
                :disabled="item.disabled && item.disabled(editData)"></el-switch>
        </el-form-item>
    </el-form>
</template>

<script>
export default {
  props: {

    labelWidth: {
      type: String,
      default: '100px'
    },
    size: {
      type: String,
      default: 'mini'
    },
    editCfg: {
      type: Array,
      default: () => []
    },
    editData: {
      type: Object,
      default: () => {}
    },
    editRules: {
      type: Object,
      default: null
    }
  },
  data () {
    return {
      that: this
    }
  },
  methods: {
    // getThat(){
    //     this.$emit('that',this)
    // }
  }

}

</script>
<style>

</style>

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

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2020-04-29 15:22:59
 */
<!--表格组件 -->
<template>
<section class="ces-table-page">
  <!-- 表格操作按钮 -->
    <section class="ces-handle" v-if='isHandle'>
      <el-button
        v-for='item in tableHandles'
        :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?'ces-table':'ces-table1'">
        <el-table :id='tableId' :height="'100%'" :data='tableData' :size='size'
          ref='refTable'
          max-height="100%"
          :border ='isBorder'
          :stripe ='isStripe'
          :highlight-current-row = 'isHighlight'
          :row-style="isRowStyle?rowStyle:rowStyle1"
          @select='select'
          @select-all='selectAll'
          @current-change="chooseTable"
          v-loading='loading'
          :defaultSelections='defaultSelections'
          >
            <el-table-column v-if="isSelection" type="selection" align="center"></el-table-column>
            <el-table-column v-if="isIndex" type="index" :label="indexLabel" align="center" width="50"></el-table-column>
            <!-- 数据栏 -->
            <template  v-for="(item,index) in tableCols">
              <el-table-column
                :key="index"
                v-if="item.isShow==='show'||!item.isShow"
                :prop="item.prop"
                :label="item.label"
                :width="item.width"
                :align="item.align"
                :render-header="item.require?renderHeader:null"
                >
                  <template slot-scope="scope" >
                    <!-- html -->
                    <span v-if="item.type==='html'" v-html="item.html(scope.row)"></span>
                    <!-- 按钮 -->
                    <span v-if="item.type==='button'" >
                      <el-button v-for="btn in item.btnList" :key="btn.label"
                        :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>
                      </span>
                    <!-- 输入框 -->
                    <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-input>
                    <!-- 下拉框 -->
                    <el-select v-if="item.type==='select'" v-model="scope.row[item.prop]" :size="size || btn.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-option>
                    </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(scope.row)" :size="size || btn.size"
                      @change='item.change && item.change(scope.row)'></el-rate>
                    <!-- 开关 -->
                    <el-switch v-if="item.type==='switch'" v-model="scope.row[item.prop]" :size="size || btn.size"
                      :active-value='item.values&&item.values[0]'
                      :inactive-value='item.values&&item.values[1]'
                      :disabled="item.isDisabled && item.isDisabled(scope.row)"
                      @change='item.change && item.change(scope.row)'></el-switch>
                    <!-- 图像 -->
                    <img v-if="item.type==='image'" :src="scope.row[item.prop]" @click="item.handle && item.handle(scope.row)"/>
                    <!-- 滑块 -->
                    <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)'></el-slider>
                    <!-- 默认 -->
                    <span v-if="!item.type"
                      :style="item.itemStyle && item.itemStyle(scope.row)" :size="size || btn.size"
                      :class="item.itemClass && item.item.itemClass(scope.row)">{{(item.formatter && item.formatter(scope.row)) || scope.row[item.prop]}}</span>
                  </template>
              </el-table-column>
            </template>
        </el-table>
    </section>
    <!-- 分页 -->
    <section class="ces-pagination"  v-if='isPagination'>
        <el-pagination style='display: flex;justify-content: center;height: 100%;align-items: center;'
            @current-change="handleCurrentChange"
            @size-change="handleSizeChange"
            layout="total,sizes ,prev, pager, next,jumper"
            :page-sizes="[10, 20, 30, 40]"
            :page-size="tablePage.pageSize"
            :current-page="tablePage.pageNum"
            :total="tablePage.total"
        ></el-pagination>
    </section>
</section>
</template>

<script>

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},
    // 表格操作
    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: ''},
    // 表格列配置
    // eslint-disable-next-line standard/object-curly-even-spacing
    tableCols: { type: Array, default: () => []},
    // 是否显示表格复选框
    isSelection: {type: Boolean, default: false},
    // eslint-disable-next-line standard/object-curly-even-spacing
    defaultSelections: { type: [Array, Object], default: () => null},
    // 是否显示表格索引
    isIndex: {type: Boolean, default: false},
    indexLabel: {type: String, default: '序号'},
    // 是否显示分页
    isPagination: {type: Boolean, default: true},
    // 分页数据
    // eslint-disable-next-line standard/object-curly-even-spacing
    tablePage: { type: Object, default: () => ({pageSize: 10, pageNum: 1, total: 0})}
  },
  data() {
    return {
      isShow: true
    }
  },
  watch: {
    'defaultSelections'(val) {
      this.$nextTick(function() {
        if (Array.isArray(val)) {
          val.forEach(row => {
            this.$refs.cesTable.toggleRowSelection(row)
          })
        } else {
          this.$refs.cesTable.toggleRowSelection(val)
        }
      })
    },
    tableData: {
      handler(newValue, oldValue) {
        if (this.isHighlight) {
          if (newValue.length > 0) {
            this.$refs.refTable.setCurrentRow(this.tableData[0])
          }
        }
      },
      deep: true
    }
  },
  methods: {
    // 表格选中
    chooseTable(row) {
      this.$emit('selectRow', row)
    },
    // 表格勾选
    select(rows, row) {
      this.$emit('select', rows, row)
    },
    // 全选
    selectAll(rows) {
      this.$emit('select', rows)
    },
    // 颜色样式
    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)' : ''))
      }
    },
    rowStyle1() {},
    //
    handleCurrentChange(val) {
      this.tablePage.pageNum = val
      this.$emit('refresh')
    },
    handleSizeChange(val) {
      this.tablePage.pageNum = 1
      this.tablePage.pageSize = val
      this.$emit('refresh')
    },

    // tableRowClassName({rowIndex}) {
    //     if (rowIndex % 2 === 0) {
    //         return "stripe-row";
    //     }
    //     return "";
    // }
    renderHeader(h, obj) {
      return h('span', {class: 'ces-table-require'}, obj.column.label)
    }
  },
  mounted() {
    if (this.tableData.length) {
      this.$refs.refTable.setCurrentRow(this.tableData[0])
    }
  }
}
</script>
<style>
.ces-table-require::before{
  content:'*';
  color:red;
}
.ces-table{
  min-height: calc(150px - 50px);
  max-height:calc(100% - 50px);
  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;
}
</style>

4.弹框组件

/*
 * @Author: duyan
 * @Date: 2020-03-31 10:20:35
 * @Last Modified by: duyan
 * @Last Modified time: 2020-04-29 16:04:04
 */
<template>
<transition name="el-fade-in">
  <div v-if="modalCfg.visible" style="width:100%;height:100%;position:fixed;top:0px;left:0px;z-index:8;text-align:left">
      <!-- 遮罩 -->
      <div class="ces-mask"></div>
      <div class="ces-modal-wrap">
        <div class="ces-modal" :style="{width:width}">
          <!-- 标题头部 -->
            <section  style="padding:10px;border-bottom: solid 1px #f1f1f1;" v-if="isHeader">
                <div class="ces-modal__header" >
                <div>{{modalCfg.title}}</div>
                <i class="el-icon-close ces-modal-close" @click="modalCfg.close(that)"></i>
                </div>
            </section>
            <!-- body -->
            <section class="ces-modal__body" style="padding:10px;" v-loading="modalLoading">
                <slot></slot>
            </section>
            <!-- 操作底部 -->
            <section style="padding:10px;border-top: solid 1px #f1f1f1;" v-if='isHandle'>
                <div class="ces-modal__footer">
                <span>
                  <el-button v-for='item in modalCfg.handles' :key="item.label"
                      :type='item.type'
                      :icon='item.icon'
                      :size='item.size'
                      :disabled='item.disabled'
                      @click="item.handle(that)">{{item.label}}</el-button>
                </span>
                </div>
            </section>
        </div>
    </div>
  </div>
</transition>
</template>

<script>

export default {
  props: {
    that: { type: Object, default: this },
    modalCfg: {
      visible: false,
      title: '',
      handles: []
    },
    width: {
      type: String,
      default: '50%'
    },
    isHeader: {
      type: Boolean,
      default: true
    },
    modalLoading: {
      type: Boolean,
      default: false
    },
    isHandle: {
      type: Boolean,
      default: true
    }

  },
  computed: {

  },
  methods: {
    close() {
      this.$emit('close')
    }
  }
}
</script>

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.页面展示图：

参考链接