@tongfun/tf-widget 0.1.18 → 0.1.22

package/package/tf-widget/src/children/basic-data/dependcy/common-table.vue

@@ -1,750 +1,750 @@
-<template>
-  <div ref="commonTableMain" class="common-table-main" @click="closeAllVisible">
-    <!--    表格主体-->
-    <!-- 开启双击是开启显示tag -->
-    <div v-if="doubleSelect">
-      <el-tag
-        v-for="tag in selectData"
-        :key="tag.head__code"
-        closable
-        @close="handleTagClose(tag)"
-      >
-        {{ tag.head__name }}
-      </el-tag>
-    </div>
-    <ux-grid
-      ref="commonTable"
-      column-key
-      :data="tableData"
-      class="common-table"
-      beautify-table
-      show-header-overflow
-      show-overflow="tooltip"
-      show-summary
-      :summary-method="getSummaries"
-      :checkbox-config="{highlight: true,trigger: 'row'}"
-      :sort-config="{showIcon: false}"
-      :width-resize="true"
-      :header-cell-style="headCellStyle"
-      highlight-current-row
-      :cell-style="getCellStyle"
-      @current-change="handleRowSelect"
-      @selection-change="selectionChange"
-      @header-dragend="changeColumnWidth"
-      @row-dblclick="handleDbclick"
-      @select="handleSelect"
-    >
-      <ux-table-column type="checkbox" align="center" fixed="left" width="60" />
-      <template v-for="(item,index) in tableLayout">
-        <ux-table-column
-          v-if="!item.hiddenFlag"
-          :key="index"
-          :field="item.fieldName"
-          :title="item.title"
-          :align="item.align"
-          :width="item.width ? item.width : tableLayout.length < 15 ? '' : '150' "
-          :fixed="item.fixed ? item.fixed : '' "
-          :sortable="item.sortable"
-          :formatter="formatterDec"
-          resizable
-        >
-          <template v-slot:header="{ column }">
-            <div class="common-header-filter" @click="sortTableData(item,column)">
-              <span>{{ column.title }}</span>
-              <i v-if="column.order==='asc'" class="el-icon-top" />
-              <i v-if="column.order==='desc'" class="el-icon-bottom" />
-              <div v-if="item.isQuick" id="popover" class="popover">
-                <el-popover
-                  v-model="quickFilterData[item.fieldName + 'Visible']"
-                  placement="bottom"
-                  width="160"
-                  trigger="manual"
-                >
-                  <el-input
-                    v-model="quickFilterData[item.fieldName]"
-                    class="popover-input"
-                    clearable
-                    :placeholder="`请输入${item.title}`"
-                    @input="inputChange(item.fieldName)"
-                  />
-                  <div class="header-filter">
-                    <el-scrollbar style="height: 100%">
-                      <el-checkbox-group v-if="quickFilterData[item.fieldName+ 'Checked']" v-model="quickFilterData[item.fieldName+ 'Checked']" @change="bindCheckBox(item.fieldName + 'Checked')">
-                        <el-checkbox label="全选" @change="changeAll(item.fieldName, $event)" />
-                        <template v-for="key in quickFilterData[item.fieldName+ 'CheckedList']">
-                          <el-checkbox :key="key" :label="key" />
-                        </template>
-                      </el-checkbox-group>
-                    </el-scrollbar>
-                  </div>
-                  <div style="text-align: right; margin: 5px 0 0 0">
-                    <el-button class="common-header-button" type="primary" size="mini" @click="closeVisible(item.fieldName)">取消</el-button>
-                    <el-button class="common-header-button" type="primary" size="mini" @click="confirmVisible(item.fieldName)">筛选</el-button>
-                  </div>
-                  <div slot="reference" class="reference">
-                    <i
-                      v-show="!quickFilterData[item.fieldName + 'Visible'] && ( quickFilterData[item.fieldName + 'Checked_True'] && quickFilterData[item.fieldName + 'Checked_True'].length === 0 )"
-                      class="el-icon-arrow-down"
-                      style="cursor: pointer"
-                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = true"
-                    />
-                    <SvgIcon
-                      v-show="!quickFilterData[item.fieldName + 'Visible'] && ( quickFilterData[item.fieldName + 'Checked_True'] && quickFilterData[item.fieldName + 'Checked_True'].length !== 0 )"
-                      icon-class="filter"
-                      style="width:15px;height: 15px;cursor: pointer"
-                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = true"
-                    />
-                    <i
-                      v-show="quickFilterData[item.fieldName + 'Visible']"
-                      class="el-icon-arrow-up"
-                      style="cursor: pointer"
-                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = false"
-                    />
-                  </div>
-                </el-popover>
-              </div>
-            </div>
-          </template>
-          <template v-if="item.controlType ==='small_pictures'" v-slot:default="scope">
-            <div v-if="scope.row[item.fieldName]" class="view-picture">
-              <span style="color:#0c4c8e;border-bottom:1px solid #0c4c8e;cursor: pointer;" @click="handelClickViewPicture(scope.row, item.fieldName)">
-                查看图片
-              </span>
-            </div>
-            <div v-else style="color:red">
-              暂无图片
-            </div>
-          </template>
-          <!-- 对于复选框的类型，value和label后端没有进行处理，前端处理成展示的值 建国需求：2021.8.11 T-BUG -->
-          <template v-else-if="item.controllType === 'check_box'" v-slot:default="scope">
-            <div>
-              {{ scope.row[item.fieldName] | checkedFilter }}
-            </div>
-          </template>
-        </ux-table-column>
-      </template>
-      <ux-table-column v-if="isShow" title="操作" align="center" width="100">
-        <template v-slot:default="scope">
-          <slot ref="control" name="tableControl" :value="scope.row" />
-        </template>
-      </ux-table-column>
-      <!--<ux-table-column type="setting" resizable align="center" fixed="right" width="50">
-        <template slot="header">
-          <i class="el-icon-setting" style="cursor: pointer" @click="tableControlClick" />
-        </template>
-      </ux-table-column>-->
-      <template slot="empty">
-        <SvgIcon icon-class="table-empty" style="width: 100px;height: 100px;margin-top: 100px" />
-        <div style="font-size: 18px;margin-bottom: 100px">
-          数据为空
-        </div>
-      </template>
-    </ux-grid>
-    <!--    表格分页-->
-    <div ref="commonTablePagination" class="common-table-pagination">
-      <Pagination ref="commonTablePage" :total="paging.total" :paging="paging" :selected-total="selectedTotal" @pageChange="pageChange" />
-    </div>
-    <!--  列表控制弹框组件-->
-    <TableControl
-      :table-layout="tableLayout"
-      :dialog-table-visible="dialogTableVisible"
-      @closeDialog="closeDialog"
-      @updateColumn="updateColumn"
-    />
-    <!-- 查看图片的弹框 -->
-    <ViewPicture
-      :dialog-visible="viewPictureVisable"
-      :view-picture-data="viewPictureData"
-      @handelClose="handelClose"
-    />
-  </div>
-</template>
-
-<script>
-import Sortable from 'sortablejs/modular/sortable.core.esm.js'
-import Pagination from './pagination'
-import TableControl from './table-control'
-import ViewPicture from './view-picture'
-import { getFastSearchSuggestionVos } from '@/api/table'
-export default {
-  name: 'CommonTable',
-  components: {
-    Pagination, TableControl, ViewPicture
-  },
-  filters: {
-    checkedFilter (value) {
-      if (!value) return ''
-      if (value === '0') return '否'
-      if (value === '1') return '是'
-      return '不兼容的选项'
-    }
-  },
-  props: {
-    // 绑定字段，字段变化时修改对应行颜色
-    fieldChangeData: {
-      type: Object,
-      default: () => {}
-    },
-    // 选中行数
-    selectedTotal: {
-      type: Number,
-      default: 0
-    },
-    // 表格ID
-    tableId: {
-      type: String,
-      default: ''
-    },
-    // 表格数据
-    tableData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 表格布局
-    tableLayout: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 表格数据
-    getTableDataFunc: {
-      type: Function,
-      default: () => {
-        return null
-      }
-    },
-    // 分页
-    paging: {
-      type: Object,
-      default: () => {
-        return {}
-      }
-    },
-    // 合计数据
-    totalData: {
-      type: Array,
-      default: () => {
-        return []
-      }
-    },
-    // 是否开启单选模式
-    singleSelect: {
-      type: Boolean,
-      default: false
-    },
-    // 双击行编辑功能(默认开启)
-    dbClickAction: {
-      type: Boolean,
-      default: true
-    },
-    // 快捷过滤信息
-    quickFilterData: {
-      type: Object,
-      default: () => {}
-    },
-    // 是否开启双选
-    doubleSelect: {
-      type: Boolean,
-      default: false
-    },
-    // 表头的表名
-    headName: {
-      type: String,
-      default: ''
-    },
-    isShowTableSlot: {
-      type: Boolean,
-      default: null
-    }
-  },
-  data () {
-    return {
-      dialogTableVisible: false,
-      maxHeight: '60vh', // 表格最大宽度
-      // currentTableData: this.tableData,
-      tableTitle: null,
-      cities: [1, 2, 3],
-      checked: [],
-      selectData: [], // 暂存选中的数据
-      viewPictureVisable: false, // 打开查看图片模态框
-      viewPictureData: ''// 要传给图片模态框的值
-    }
-  },
-  computed: {
-    currentTableData: function () {
-      return this.tableData
-    },
-    isShow: function () {
-      if (this.isShowTableSlot === null) {
-        this.$nextTick(() => {
-          const slotArr = Object.keys(this.$scopedSlots)
-          if (slotArr.indexOf('tableControl') !== -1) {
-            return true
-          } else {
-            return false
-          }
-        })
-      }
-      return this.isShowTableSlot
-    }
-  },
-  watch: {
-    currentTableData: {
-      handler (newVal) {
-        this.$emit('updateParentTableData', newVal)
-      },
-      deep: true
-    },
-    // 用于刷新合计
-    totalData: {
-      handler (newVal) {
-        this.$refs.commonTable.updateData()
-      },
-      deep: true
-    },
-    tableLayout: {
-      handler (newVal) {
-      },
-      deep: true
-    }
-  },
-
-  mounted () {
-    this.columnDrop()
-  },
-
-  beforeDestroy () {
-    this.$emit('tableBeforeDestroy', this.tableTitle)
-  },
-
-  methods: {
-    // 表头单元格的style回调方法
-    headCellStyle () {
-      return 'font-family: Source Han Sans SC, Source Han Sans SC-Normal;font-weight: Normal;font-size:1.4vh'
-    },
-    // 表头点击事件 ---> 排序
-
-    /**
-     * 关闭所有表头筛选
-     */
-    closeAllVisible () {
-      for (const key in this.quickFilterData) {
-        if (key.indexOf('Visible') !== -1 && this.quickFilterData[key] === true) {
-          this.quickFilterData[key] = false
-        }
-      }
-    },
-
-    /**
-     * 表头点击事件 ---> 排序
-     */
-    sortTableData (item, column) {
-      if (column.order === 'desc') {
-        this.$refs.commonTable.clearSort()
-      } else if (column.order === 'asc') {
-        this.$refs.commonTable.sort(column.property, 'desc')
-      } else {
-        this.$refs.commonTable.sort(column.property, 'asc')
-      }
-    },
-
-    /**
-     * 点击查看图片
-     */
-    handelClickViewPicture (item, fieldName) {
-      this.viewPictureVisable = true
-      this.viewPictureData = item[fieldName]
-    },
-
-    /**
-     * 图片模态框子组件传来的方法，点击取消关闭模态框
-     */
-    handelClose (item) {
-      this.viewPictureVisable = item
-    },
-
-    /**
-     * 表头过滤的输入框input事件
-     */
-    inputChange (fieldName) {
-      const data = {
-        fastSearchSuggestQueryDtos: [{
-          columnName: fieldName.split('__')[1],
-          tableName: this.headName,
-          value: this.quickFilterData[fieldName]
-        }
-        ]
-      }
-      getFastSearchSuggestionVos(data).then(res => {
-        this.quickFilterData[fieldName + 'CheckedList'] = res.data[0].suggestions
-        this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
-      })
-      // // 过滤数组
-      // this.quickFilterData[fieldName + 'CheckedList'] = this.quickFilterData[fieldName + 'CheckedList_Bak'].filter(item => {
-      //   return item.indexOf(this.quickFilterData[fieldName]) !== -1
-      // })
-      // 默认全选
-      // this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
-    },
-
-    /**
-     * 表头过滤选中数组change事件
-     */
-    bindCheckBox (value) {
-      // 实现单选功能
-      // if (this.quickFilterData[value].length > 1) {
-      //   this.quickFilterData[value].splice(0, 1)
-      // }
-
-    },
-
-    /**
-     * 表头筛选的全选|取消全选
-     * @param fieldName 字段
-     * @param value true为全选，false为取消全选
-     */
-    changeAll (fieldName, value) {
-      if (value) {
-        // 全选
-        this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
-      } else {
-        // 取消全选
-        this.quickFilterData[fieldName + 'Checked'] = []
-      }
-    },
-
-    /**
-     * 取消筛选
-     * @param fieldValue 字段
-     */
-    closeVisible: function (fieldValue) {
-      this.quickFilterData[fieldValue + 'Visible'] = false
-      this.quickFilterData[fieldValue] = ''
-      // this.quickFilterData[fieldValue + 'Checked'] = []
-    },
-
-    /**
-     * 确认筛选
-     * @param fieldValue 字段
-     */
-    confirmVisible: function (fieldValue) {
-      this.quickFilterData[fieldValue + 'Visible'] = false
-      this.quickFilterData[fieldValue + 'Checked_True'] = this.quickFilterData[fieldValue + 'Checked']
-      this.$emit('quickSearch')
-    },
-
-    /**
-     * 表格数据格式化： 数字精度统一为2
-     */
-    formatterDec ({ cellValue, row, column }) {
-      const reg = /^[0-9]+.?[0-9]*$/ // 判断字符串是否为数字
-      if (reg.test(cellValue)) {
-        const y = String(cellValue).indexOf('.') + 1 // 获取小数点的位置
-        const count = String(cellValue).length - y // 获取小数点后的个数
-        if (y > 0 && count > 2) {
-          return Number(cellValue).toFixed(2)
-        } else {
-          return cellValue
-        }
-      } else {
-        return cellValue
-      }
-    },
-
-    /**
-     * 表格双击
-     * @param row 行
-     */
-    handleDbclick (row) {
-      try {
-        if (this.$refs.commonTable.$children[0].$children[0].$children) {
-          const arr = this.$refs.commonTable.$children[0].$children[0].$children
-          arr.forEach(item => {
-            if (item.$options._componentTag === 'elx-tooltip') {
-              item.targetMouseleaveEvent()
-            }
-          })
-        }
-      } catch (e) {
-        console.log(e)
-      }
-      this.$emit('dbClick', row)
-    },
-
-    /**
-     * 表格选择项change事件
-     */
-    selectionChange (value) {
-      if (this.selectData.length === 0) {
-        this.$emit('selectionChange', value)
-      } else {
-        this.$emit('selectionChange', this.selectData)
-      }
-    },
-
-    /**
-     * 手动勾选数据行的 Checkbox 时触发事件
-     */
-    handleSelect (selection, row) {
-      if (this.doubleSelect) {
-        const selectData = new Set(this.selectData)
-        if (this.selectData.indexOf(row) === -1) {
-          selectData.add(row)
-          this.selectData = Array.from(selectData)
-        } else {
-          this.selectData = Array.from(selectData)
-          this.selectData.splice(this.selectData.indexOf(row), 1)
-        }
-        if (this.selectData.length > 2) {
-          this.$message.error('最多选择两条数据')
-          this.selectData.pop()
-        }
-        this.$refs.commonTable.clearSelection()
-        this.selectData.forEach(element => {
-          this.$refs.commonTable.toggleRowSelection([
-            {
-              row: element,
-              selected: true
-            }
-          ])
-        })
-      }
-    },
-
-    /**
-     * 关闭tag
-     * @param tag
-     */
-    handleTagClose (tag) {
-      this.selectData.splice(this.selectData.indexOf(tag), 1)
-      this.$refs.commonTable.clearSelection()
-      this.selectData.forEach(element => {
-        this.$refs.commonTable.toggleRowSelection([
-          {
-            row: element,
-            selected: true
-          }
-        ])
-      })
-    },
-
-    /**
-     * 动态设定单元格样式
-     * 根据绑定的字段，依据字段值获取表格内容样式
-     */
-    getCellStyle ({ row, column, rowIndex, columnIndex }) {
-      if (this.fieldChangeData && this.fieldChangeData.fieldName) {
-        const fieldName = this.fieldChangeData.fieldName
-        const findIndex = this.fieldChangeData.changeList.findIndex(d => d.key === row[fieldName])
-        if (findIndex !== -1) {
-          return {
-            color: this.fieldChangeData.changeList[findIndex].value
-          }
-        }
-      }
-    },
-
-    /**
-     * 表格当前行change事件
-     * @param row
-     */
-    handleRowSelect (row) {
-      if (this.singleSelect) {
-        this.$refs.commonTable.clearSelection()
-        this.$refs.commonTable.setCurrentRow(row)
-      }
-    },
-
-    /**
-     * 表格合计
-     */
-    getSummaries (param) {
-      return [this.totalData]
-    },
-
-    arraySorting (newValue) {
-      const arr = {}
-      newValue.forEach(item => {
-        arr[item.index] = item
-      })
-      arr.length = newValue.length
-      this.tableTitle = Array.from(arr)
-    },
-
-    /**
-     * 拖动表单列
-     */
-    columnDrop () {
-      this.$nextTick(() => {
-        const table = this.$refs.commonTable
-        this.sortable = Sortable.create(table.$el.querySelector('.body--wrapper .elx-table--header .elx-header--row'), {
-          handle: '.elx-header--column:not(.col--fixed)',
-          ghostClass: 'dragColbg',
-          chosenClass: 'dragColbg',
-          onEnd: ({ item, newIndex, oldIndex, ...arg }) => {
-            // fullColumn: 全量表头列   tableColumn: 当前渲染中的表头列
-            const { fullColumn, tableColumn } = table.getTableColumn()
-            const targetThElem = item
-            const wrapperElem = targetThElem.parentNode
-            const newColumn = fullColumn[newIndex]
-            if (newColumn.fixed) {
-              // 错误的移动
-              if (newIndex > oldIndex) {
-                wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
-              } else {
-                wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
-              }
-              return this.$message.error('固定列不允许拖动!')
-            }
-            // 转换真实索引
-            const oldColumnIndex = table.getColumnIndex(tableColumn[oldIndex])
-            const newColumnIndex = table.getColumnIndex(tableColumn[newIndex])
-            // 移动到目标列
-            const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
-            fullColumn.splice(newColumnIndex, 0, currRow)
-            // 加载列
-            // 向父组件发送表格顺序
-            this.$emit('columnChange', fullColumn)
-            table.loadColumn(fullColumn)
-          }
-        })
-      })
-    },
-
-    /**
-     * 改变表格列宽度
-     */
-    changeColumnWidth ({ column, $columnIndex }) {
-      try {
-        this.$emit('changeWidth', column)
-        // this.tableTitle[$columnIndex].width = column['renderWidth']
-      } catch (err) {
-        throw new Error(err)
-      }
-    },
-
-    /**
-     * 页签变化
-     */
-    async pageChange (value) {
-      this.$emit('pageChange', value)
-    },
-
-    /**
-     * 刷新表格数据
-     */
-    refreshTableData () {
-      this.$refs.commonTablePage.changePage()
-    },
-
-    /**
-     * 打开列表控制弹框
-     */
-    tableControlClick () {
-      this.dialogTableVisible = true
-    },
-
-    /**
-     * 子传父关闭Dialog
-     * @param value
-     */
-    closeDialog (value) {
-      this.dialogTableVisible = value
-    },
-
-    /**
-     * 更新表格列配置
-     */
-    updateColumn () {
-      this.$nextTick(() => {
-        this.$refs.commonTable.refreshColumn()
-      })
-    }
-
-  }
-}
-</script>
-
-<style lang="less" scoped>
-@import "@/assets/styles/common-table";
-@paginationHeight: 8vh;
-.common-table-main{
-  height: 100%;
-  >div:nth-child(1) {
-    margin-bottom: 0.5vh;
-    ::v-deep .el-tag {
-      margin-right: 0.2vw;
-      height: 3vh;
-      line-height: 3vh;
-    }
-  }
-}
-.common-header-filter{
-  position: relative;
-  .popover{
-    position: absolute;
-    right: 2px;
-    bottom: 0;
-  }
-}
-// 分页组件定位
-.common-table-pagination{
-  margin-top: -0.5vh;
-  height: @paginationHeight;
-  ::v-deep .pagination{
-    height: @paginationHeight;
-    //display: flex;
-    .el-pagination{
-      padding: 0;
-    }
-    .el-pagination__total, .el-pagination__sizes{
-      height: @paginationHeight;
-      line-height: @paginationHeight;
-    }
-    .btn-prev,  .btn-next,  .el-pager,  .el-pager li{
-      height: @paginationHeight;
-      line-height: @paginationHeight;
-    }
-    .el-select__caret{
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-    .el-pagination__editor{
-      height: @paginationHeight;
-      line-height: @paginationHeight;
-    }
-  }
-  // position: absolute;
-  // bottom: 1.5vh;
-  // right: 2vw;
-}
-// 表头快捷过滤样式
-.el-popover{
-  .popover-input{
-    ::v-deep .el-input__inner{
-      height: 3vh;
-      margin-bottom: 1vh;
-    }
-    ::v-deep .el-input__suffix{
-      height: 3vh;
-    }
-  }
-  .el-checkbox{
-    display: block !important;
-  }
-  // 表头筛选
-  .header-filter{
-    height: 12vh;
-    ::v-deep .el-scrollbar{
-      .el-scrollbar__wrap{
-        overflow-x: hidden;
-      }
-    }
-  }
-}
-
-</style>
+<template>
+  <div ref="commonTableMain" class="common-table-main" @click="closeAllVisible">
+    <!--    表格主体-->
+    <!-- 开启双击是开启显示tag -->
+    <div v-if="doubleSelect">
+      <el-tag
+        v-for="tag in selectData"
+        :key="tag.head__code"
+        closable
+        @close="handleTagClose(tag)"
+      >
+        {{ tag.head__name }}
+      </el-tag>
+    </div>
+    <ux-grid
+      ref="commonTable"
+      column-key
+      :data="tableData"
+      class="common-table"
+      beautify-table
+      show-header-overflow
+      show-overflow="tooltip"
+      show-summary
+      :summary-method="getSummaries"
+      :checkbox-config="{highlight: true,trigger: 'row'}"
+      :sort-config="{showIcon: false}"
+      :width-resize="true"
+      :header-cell-style="headCellStyle"
+      highlight-current-row
+      :cell-style="getCellStyle"
+      @current-change="handleRowSelect"
+      @selection-change="selectionChange"
+      @header-dragend="changeColumnWidth"
+      @row-dblclick="handleDbclick"
+      @select="handleSelect"
+    >
+      <ux-table-column type="checkbox" align="center" fixed="left" width="60" />
+      <template v-for="(item,index) in tableLayout">
+        <ux-table-column
+          v-if="!item.hiddenFlag"
+          :key="index"
+          :field="item.fieldName"
+          :title="item.title"
+          :align="item.align"
+          :width="item.width ? item.width : tableLayout.length < 15 ? '' : '150' "
+          :fixed="item.fixed ? item.fixed : '' "
+          :sortable="item.sortable"
+          :formatter="formatterDec"
+          resizable
+        >
+          <template v-slot:header="{ column }">
+            <div class="common-header-filter" @click="sortTableData(item,column)">
+              <span>{{ column.title }}</span>
+              <i v-if="column.order==='asc'" class="el-icon-top" />
+              <i v-if="column.order==='desc'" class="el-icon-bottom" />
+              <div v-if="item.isQuick" id="popover" class="popover">
+                <el-popover
+                  v-model="quickFilterData[item.fieldName + 'Visible']"
+                  placement="bottom"
+                  width="160"
+                  trigger="manual"
+                >
+                  <el-input
+                    v-model="quickFilterData[item.fieldName]"
+                    class="popover-input"
+                    clearable
+                    :placeholder="`请输入${item.title}`"
+                    @input="inputChange(item.fieldName)"
+                  />
+                  <div class="header-filter">
+                    <el-scrollbar style="height: 100%">
+                      <el-checkbox-group v-if="quickFilterData[item.fieldName+ 'Checked']" v-model="quickFilterData[item.fieldName+ 'Checked']" @change="bindCheckBox(item.fieldName + 'Checked')">
+                        <el-checkbox label="全选" @change="changeAll(item.fieldName, $event)" />
+                        <template v-for="key in quickFilterData[item.fieldName+ 'CheckedList']">
+                          <el-checkbox :key="key" :label="key" />
+                        </template>
+                      </el-checkbox-group>
+                    </el-scrollbar>
+                  </div>
+                  <div style="text-align: right; margin: 5px 0 0 0">
+                    <el-button class="common-header-button" type="primary" size="mini" @click="closeVisible(item.fieldName)">取消</el-button>
+                    <el-button class="common-header-button" type="primary" size="mini" @click="confirmVisible(item.fieldName)">筛选</el-button>
+                  </div>
+                  <div slot="reference" class="reference">
+                    <i
+                      v-show="!quickFilterData[item.fieldName + 'Visible'] && ( quickFilterData[item.fieldName + 'Checked_True'] && quickFilterData[item.fieldName + 'Checked_True'].length === 0 )"
+                      class="el-icon-arrow-down"
+                      style="cursor: pointer"
+                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = true"
+                    />
+                    <SvgIcon
+                      v-show="!quickFilterData[item.fieldName + 'Visible'] && ( quickFilterData[item.fieldName + 'Checked_True'] && quickFilterData[item.fieldName + 'Checked_True'].length !== 0 )"
+                      icon-class="filter"
+                      style="width:15px;height: 15px;cursor: pointer"
+                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = true"
+                    />
+                    <i
+                      v-show="quickFilterData[item.fieldName + 'Visible']"
+                      class="el-icon-arrow-up"
+                      style="cursor: pointer"
+                      @click.stop="quickFilterData[item.fieldName + 'Visible'] = false"
+                    />
+                  </div>
+                </el-popover>
+              </div>
+            </div>
+          </template>
+          <template v-if="item.controlType ==='small_pictures'" v-slot:default="scope">
+            <div v-if="scope.row[item.fieldName]" class="view-picture">
+              <span style="color:#0c4c8e;border-bottom:1px solid #0c4c8e;cursor: pointer;" @click="handelClickViewPicture(scope.row, item.fieldName)">
+                查看图片
+              </span>
+            </div>
+            <div v-else style="color:red">
+              暂无图片
+            </div>
+          </template>
+          <!-- 对于复选框的类型，value和label后端没有进行处理，前端处理成展示的值 建国需求：2021.8.11 T-BUG -->
+          <template v-else-if="item.controllType === 'check_box'" v-slot:default="scope">
+            <div>
+              {{ scope.row[item.fieldName] | checkedFilter }}
+            </div>
+          </template>
+        </ux-table-column>
+      </template>
+      <ux-table-column v-if="isShow" title="操作" align="center" width="100">
+        <template v-slot:default="scope">
+          <slot ref="control" name="tableControl" :value="scope.row" />
+        </template>
+      </ux-table-column>
+      <!--<ux-table-column type="setting" resizable align="center" fixed="right" width="50">
+        <template slot="header">
+          <i class="el-icon-setting" style="cursor: pointer" @click="tableControlClick" />
+        </template>
+      </ux-table-column>-->
+      <template slot="empty">
+        <SvgIcon icon-class="table-empty" style="width: 100px;height: 100px;margin-top: 100px" />
+        <div style="font-size: 18px;margin-bottom: 100px">
+          数据为空
+        </div>
+      </template>
+    </ux-grid>
+    <!--    表格分页-->
+    <div ref="commonTablePagination" class="common-table-pagination">
+      <Pagination ref="commonTablePage" :total="paging.total" :paging="paging" :selected-total="selectedTotal" @pageChange="pageChange" />
+    </div>
+    <!--  列表控制弹框组件-->
+    <TableControl
+      :table-layout="tableLayout"
+      :dialog-table-visible="dialogTableVisible"
+      @closeDialog="closeDialog"
+      @updateColumn="updateColumn"
+    />
+    <!-- 查看图片的弹框 -->
+    <ViewPicture
+      :dialog-visible="viewPictureVisable"
+      :view-picture-data="viewPictureData"
+      @handelClose="handelClose"
+    />
+  </div>
+</template>
+
+<script>
+import Sortable from 'sortablejs/modular/sortable.core.esm.js'
+import Pagination from './pagination'
+import TableControl from './table-control'
+import ViewPicture from './view-picture'
+import { getFastSearchSuggestionVos } from '@/api/table'
+export default {
+  name: 'CommonTable',
+  components: {
+    Pagination, TableControl, ViewPicture
+  },
+  filters: {
+    checkedFilter (value) {
+      if (!value) return ''
+      if (value === '0') return '否'
+      if (value === '1') return '是'
+      return '不兼容的选项'
+    }
+  },
+  props: {
+    // 绑定字段，字段变化时修改对应行颜色
+    fieldChangeData: {
+      type: Object,
+      default: () => {}
+    },
+    // 选中行数
+    selectedTotal: {
+      type: Number,
+      default: 0
+    },
+    // 表格ID
+    tableId: {
+      type: String,
+      default: ''
+    },
+    // 表格数据
+    tableData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 表格布局
+    tableLayout: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 表格数据
+    getTableDataFunc: {
+      type: Function,
+      default: () => {
+        return null
+      }
+    },
+    // 分页
+    paging: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    },
+    // 合计数据
+    totalData: {
+      type: Array,
+      default: () => {
+        return []
+      }
+    },
+    // 是否开启单选模式
+    singleSelect: {
+      type: Boolean,
+      default: false
+    },
+    // 双击行编辑功能(默认开启)
+    dbClickAction: {
+      type: Boolean,
+      default: true
+    },
+    // 快捷过滤信息
+    quickFilterData: {
+      type: Object,
+      default: () => {}
+    },
+    // 是否开启双选
+    doubleSelect: {
+      type: Boolean,
+      default: false
+    },
+    // 表头的表名
+    headName: {
+      type: String,
+      default: ''
+    },
+    isShowTableSlot: {
+      type: Boolean,
+      default: null
+    }
+  },
+  data () {
+    return {
+      dialogTableVisible: false,
+      maxHeight: '60vh', // 表格最大宽度
+      // currentTableData: this.tableData,
+      tableTitle: null,
+      cities: [1, 2, 3],
+      checked: [],
+      selectData: [], // 暂存选中的数据
+      viewPictureVisable: false, // 打开查看图片模态框
+      viewPictureData: ''// 要传给图片模态框的值
+    }
+  },
+  computed: {
+    currentTableData: function () {
+      return this.tableData
+    },
+    isShow: function () {
+      if (this.isShowTableSlot === null) {
+        this.$nextTick(() => {
+          const slotArr = Object.keys(this.$scopedSlots)
+          if (slotArr.indexOf('tableControl') !== -1) {
+            return true
+          } else {
+            return false
+          }
+        })
+      }
+      return this.isShowTableSlot
+    }
+  },
+  watch: {
+    currentTableData: {
+      handler (newVal) {
+        this.$emit('updateParentTableData', newVal)
+      },
+      deep: true
+    },
+    // 用于刷新合计
+    totalData: {
+      handler (newVal) {
+        this.$refs.commonTable.updateData()
+      },
+      deep: true
+    },
+    tableLayout: {
+      handler (newVal) {
+      },
+      deep: true
+    }
+  },
+
+  mounted () {
+    this.columnDrop()
+  },
+
+  beforeDestroy () {
+    this.$emit('tableBeforeDestroy', this.tableTitle)
+  },
+
+  methods: {
+    // 表头单元格的style回调方法
+    headCellStyle () {
+      return 'font-family: Source Han Sans SC, Source Han Sans SC-Normal;font-weight: Normal;font-size:1.4vh'
+    },
+    // 表头点击事件 ---> 排序
+
+    /**
+     * 关闭所有表头筛选
+     */
+    closeAllVisible () {
+      for (const key in this.quickFilterData) {
+        if (key.indexOf('Visible') !== -1 && this.quickFilterData[key] === true) {
+          this.quickFilterData[key] = false
+        }
+      }
+    },
+
+    /**
+     * 表头点击事件 ---> 排序
+     */
+    sortTableData (item, column) {
+      if (column.order === 'desc') {
+        this.$refs.commonTable.clearSort()
+      } else if (column.order === 'asc') {
+        this.$refs.commonTable.sort(column.property, 'desc')
+      } else {
+        this.$refs.commonTable.sort(column.property, 'asc')
+      }
+    },
+
+    /**
+     * 点击查看图片
+     */
+    handelClickViewPicture (item, fieldName) {
+      this.viewPictureVisable = true
+      this.viewPictureData = item[fieldName]
+    },
+
+    /**
+     * 图片模态框子组件传来的方法，点击取消关闭模态框
+     */
+    handelClose (item) {
+      this.viewPictureVisable = item
+    },
+
+    /**
+     * 表头过滤的输入框input事件
+     */
+    inputChange (fieldName) {
+      const data = {
+        fastSearchSuggestQueryDtos: [{
+          columnName: fieldName.split('__')[1],
+          tableName: this.headName,
+          value: this.quickFilterData[fieldName]
+        }
+        ]
+      }
+      getFastSearchSuggestionVos(data).then(res => {
+        this.quickFilterData[fieldName + 'CheckedList'] = res.data[0].suggestions
+        this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
+      })
+      // // 过滤数组
+      // this.quickFilterData[fieldName + 'CheckedList'] = this.quickFilterData[fieldName + 'CheckedList_Bak'].filter(item => {
+      //   return item.indexOf(this.quickFilterData[fieldName]) !== -1
+      // })
+      // 默认全选
+      // this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
+    },
+
+    /**
+     * 表头过滤选中数组change事件
+     */
+    bindCheckBox (value) {
+      // 实现单选功能
+      // if (this.quickFilterData[value].length > 1) {
+      //   this.quickFilterData[value].splice(0, 1)
+      // }
+
+    },
+
+    /**
+     * 表头筛选的全选|取消全选
+     * @param fieldName 字段
+     * @param value true为全选，false为取消全选
+     */
+    changeAll (fieldName, value) {
+      if (value) {
+        // 全选
+        this.quickFilterData[fieldName + 'Checked'] = [...this.quickFilterData[fieldName + 'CheckedList'], '全选']
+      } else {
+        // 取消全选
+        this.quickFilterData[fieldName + 'Checked'] = []
+      }
+    },
+
+    /**
+     * 取消筛选
+     * @param fieldValue 字段
+     */
+    closeVisible: function (fieldValue) {
+      this.quickFilterData[fieldValue + 'Visible'] = false
+      this.quickFilterData[fieldValue] = ''
+      // this.quickFilterData[fieldValue + 'Checked'] = []
+    },
+
+    /**
+     * 确认筛选
+     * @param fieldValue 字段
+     */
+    confirmVisible: function (fieldValue) {
+      this.quickFilterData[fieldValue + 'Visible'] = false
+      this.quickFilterData[fieldValue + 'Checked_True'] = this.quickFilterData[fieldValue + 'Checked']
+      this.$emit('quickSearch')
+    },
+
+    /**
+     * 表格数据格式化： 数字精度统一为2
+     */
+    formatterDec ({ cellValue, row, column }) {
+      const reg = /^[0-9]+.?[0-9]*$/ // 判断字符串是否为数字
+      if (reg.test(cellValue)) {
+        const y = String(cellValue).indexOf('.') + 1 // 获取小数点的位置
+        const count = String(cellValue).length - y // 获取小数点后的个数
+        if (y > 0 && count > 2) {
+          return Number(cellValue).toFixed(2)
+        } else {
+          return cellValue
+        }
+      } else {
+        return cellValue
+      }
+    },
+
+    /**
+     * 表格双击
+     * @param row 行
+     */
+    handleDbclick (row) {
+      try {
+        if (this.$refs.commonTable.$children[0].$children[0].$children) {
+          const arr = this.$refs.commonTable.$children[0].$children[0].$children
+          arr.forEach(item => {
+            if (item.$options._componentTag === 'elx-tooltip') {
+              item.targetMouseleaveEvent()
+            }
+          })
+        }
+      } catch (e) {
+        console.log(e)
+      }
+      this.$emit('dbClick', row)
+    },
+
+    /**
+     * 表格选择项change事件
+     */
+    selectionChange (value) {
+      if (this.selectData.length === 0) {
+        this.$emit('selectionChange', value)
+      } else {
+        this.$emit('selectionChange', this.selectData)
+      }
+    },
+
+    /**
+     * 手动勾选数据行的 Checkbox 时触发事件
+     */
+    handleSelect (selection, row) {
+      if (this.doubleSelect) {
+        const selectData = new Set(this.selectData)
+        if (this.selectData.indexOf(row) === -1) {
+          selectData.add(row)
+          this.selectData = Array.from(selectData)
+        } else {
+          this.selectData = Array.from(selectData)
+          this.selectData.splice(this.selectData.indexOf(row), 1)
+        }
+        if (this.selectData.length > 2) {
+          this.$message.error('最多选择两条数据')
+          this.selectData.pop()
+        }
+        this.$refs.commonTable.clearSelection()
+        this.selectData.forEach(element => {
+          this.$refs.commonTable.toggleRowSelection([
+            {
+              row: element,
+              selected: true
+            }
+          ])
+        })
+      }
+    },
+
+    /**
+     * 关闭tag
+     * @param tag
+     */
+    handleTagClose (tag) {
+      this.selectData.splice(this.selectData.indexOf(tag), 1)
+      this.$refs.commonTable.clearSelection()
+      this.selectData.forEach(element => {
+        this.$refs.commonTable.toggleRowSelection([
+          {
+            row: element,
+            selected: true
+          }
+        ])
+      })
+    },
+
+    /**
+     * 动态设定单元格样式
+     * 根据绑定的字段，依据字段值获取表格内容样式
+     */
+    getCellStyle ({ row, column, rowIndex, columnIndex }) {
+      if (this.fieldChangeData && this.fieldChangeData.fieldName) {
+        const fieldName = this.fieldChangeData.fieldName
+        const findIndex = this.fieldChangeData.changeList.findIndex(d => d.key === row[fieldName])
+        if (findIndex !== -1) {
+          return {
+            color: this.fieldChangeData.changeList[findIndex].value
+          }
+        }
+      }
+    },
+
+    /**
+     * 表格当前行change事件
+     * @param row
+     */
+    handleRowSelect (row) {
+      if (this.singleSelect) {
+        this.$refs.commonTable.clearSelection()
+        this.$refs.commonTable.setCurrentRow(row)
+      }
+    },
+
+    /**
+     * 表格合计
+     */
+    getSummaries (param) {
+      return [this.totalData]
+    },
+
+    arraySorting (newValue) {
+      const arr = {}
+      newValue.forEach(item => {
+        arr[item.index] = item
+      })
+      arr.length = newValue.length
+      this.tableTitle = Array.from(arr)
+    },
+
+    /**
+     * 拖动表单列
+     */
+    columnDrop () {
+      this.$nextTick(() => {
+        const table = this.$refs.commonTable
+        this.sortable = Sortable.create(table.$el.querySelector('.body--wrapper .elx-table--header .elx-header--row'), {
+          handle: '.elx-header--column:not(.col--fixed)',
+          ghostClass: 'dragColbg',
+          chosenClass: 'dragColbg',
+          onEnd: ({ item, newIndex, oldIndex, ...arg }) => {
+            // fullColumn: 全量表头列   tableColumn: 当前渲染中的表头列
+            const { fullColumn, tableColumn } = table.getTableColumn()
+            const targetThElem = item
+            const wrapperElem = targetThElem.parentNode
+            const newColumn = fullColumn[newIndex]
+            if (newColumn.fixed) {
+              // 错误的移动
+              if (newIndex > oldIndex) {
+                wrapperElem.insertBefore(targetThElem, wrapperElem.children[oldIndex])
+              } else {
+                wrapperElem.insertBefore(wrapperElem.children[oldIndex], targetThElem)
+              }
+              return this.$message.error('固定列不允许拖动!')
+            }
+            // 转换真实索引
+            const oldColumnIndex = table.getColumnIndex(tableColumn[oldIndex])
+            const newColumnIndex = table.getColumnIndex(tableColumn[newIndex])
+            // 移动到目标列
+            const currRow = fullColumn.splice(oldColumnIndex, 1)[0]
+            fullColumn.splice(newColumnIndex, 0, currRow)
+            // 加载列
+            // 向父组件发送表格顺序
+            this.$emit('columnChange', fullColumn)
+            table.loadColumn(fullColumn)
+          }
+        })
+      })
+    },
+
+    /**
+     * 改变表格列宽度
+     */
+    changeColumnWidth ({ column, $columnIndex }) {
+      try {
+        this.$emit('changeWidth', column)
+        // this.tableTitle[$columnIndex].width = column['renderWidth']
+      } catch (err) {
+        throw new Error(err)
+      }
+    },
+
+    /**
+     * 页签变化
+     */
+    async pageChange (value) {
+      this.$emit('pageChange', value)
+    },
+
+    /**
+     * 刷新表格数据
+     */
+    refreshTableData () {
+      this.$refs.commonTablePage.changePage()
+    },
+
+    /**
+     * 打开列表控制弹框
+     */
+    tableControlClick () {
+      this.dialogTableVisible = true
+    },
+
+    /**
+     * 子传父关闭Dialog
+     * @param value
+     */
+    closeDialog (value) {
+      this.dialogTableVisible = value
+    },
+
+    /**
+     * 更新表格列配置
+     */
+    updateColumn () {
+      this.$nextTick(() => {
+        this.$refs.commonTable.refreshColumn()
+      })
+    }
+
+  }
+}
+</script>
+
+<style lang="less" scoped>
+@import "@/assets/styles/common-table";
+@paginationHeight: 8vh;
+.common-table-main{
+  height: 100%;
+  >div:nth-child(1) {
+    margin-bottom: 0.5vh;
+    ::v-deep .el-tag {
+      margin-right: 0.2vw;
+      height: 3vh;
+      line-height: 3vh;
+    }
+  }
+}
+.common-header-filter{
+  position: relative;
+  .popover{
+    position: absolute;
+    right: 2px;
+    bottom: 0;
+  }
+}
+// 分页组件定位
+.common-table-pagination{
+  margin-top: -0.5vh;
+  height: @paginationHeight;
+  ::v-deep .pagination{
+    height: @paginationHeight;
+    //display: flex;
+    .el-pagination{
+      padding: 0;
+    }
+    .el-pagination__total, .el-pagination__sizes{
+      height: @paginationHeight;
+      line-height: @paginationHeight;
+    }
+    .btn-prev,  .btn-next,  .el-pager,  .el-pager li{
+      height: @paginationHeight;
+      line-height: @paginationHeight;
+    }
+    .el-select__caret{
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+    .el-pagination__editor{
+      height: @paginationHeight;
+      line-height: @paginationHeight;
+    }
+  }
+  // position: absolute;
+  // bottom: 1.5vh;
+  // right: 2vw;
+}
+// 表头快捷过滤样式
+.el-popover{
+  .popover-input{
+    ::v-deep .el-input__inner{
+      height: 3vh;
+      margin-bottom: 1vh;
+    }
+    ::v-deep .el-input__suffix{
+      height: 3vh;
+    }
+  }
+  .el-checkbox{
+    display: block !important;
+  }
+  // 表头筛选
+  .header-filter{
+    height: 12vh;
+    ::v-deep .el-scrollbar{
+      .el-scrollbar__wrap{
+        overflow-x: hidden;
+      }
+    }
+  }
+}
+
+</style>