From 1a111efc6e82f022adfbb9e8b5247b5fbea78df0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E8=B5=B5=E9=9C=84?= <zhaoxiaox0053@163.com>
Date: Tue, 22 Aug 2023 17:23:15 +0800
Subject: [PATCH] =?UTF-8?q?update=20=E6=96=87=E6=A1=A3=E5=BA=93=E6=94=B9?=
 =?UTF-8?q?=E4=BD=BF=E7=94=A8JTable?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/assets/less/common.less                  |   7 +
 src/common/lang/zh-cn.js                     |   5 +-
 src/components/customField/Search.vue        |  40 +---
 src/components/jero/JTable.vue               | 123 +++++++----
 src/mixins/ConfigurableTableMixin.js         | 204 +++++++++++++++++++
 src/views/dashboard/Analysis.vue             |  15 +-
 src/views/documentManage/DocumentLibrary.vue | 164 +++++++++------
 7 files changed, 421 insertions(+), 137 deletions(-)
 create mode 100644 src/mixins/ConfigurableTableMixin.js

diff --git a/src/assets/less/common.less b/src/assets/less/common.less
index a3be1e76..015d4dc3 100644
--- a/src/assets/less/common.less
+++ b/src/assets/less/common.less
@@ -305,3 +305,10 @@
     }
   }
 }
+
+/*表格中换行文本的样式*/
+.table-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
diff --git a/src/common/lang/zh-cn.js b/src/common/lang/zh-cn.js
index 3aa2814a..e46b955f 100644
--- a/src/common/lang/zh-cn.js
+++ b/src/common/lang/zh-cn.js
@@ -359,6 +359,7 @@ module.exports = {
     updateLog: '更新log',
     problemKnowledgeBase: '知识分享',
     collection: '收藏',
+    subscribe: '订阅',
     textInformation: '文本信息',
     standardBreakdown: '标准分解单',
     standardOne: '标准',
@@ -371,8 +372,8 @@ module.exports = {
     documentLibraryDetails: '文档库详情',
     confirmCollection: '确定收藏？',
     cancelConfirmCollection: '确定取消收藏？',
-    confirmSubscribe: '确定订阅?',
-    cancelConfirmSubscribe: '确定取消订阅?',
+    confirmSubscribe: '确定订阅？',
+    cancelConfirmSubscribe: '确定取消订阅？'
   },
   // 文档工具
   docTool: {
diff --git a/src/components/customField/Search.vue b/src/components/customField/Search.vue
index e8a3601b..2f268b33 100644
--- a/src/components/customField/Search.vue
+++ b/src/components/customField/Search.vue
@@ -59,23 +59,6 @@
                                  :triggerChange="false" :dictCode="item.dict_field"/>
             </a-form-item>
           </template>
-          <!--  单选框  -->
-<!--          <template v-else-if="item.field_show_type === '12'">-->
-<!--            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
-<!--              <a-select :placeholder="$t('pleaseSelect')+item.db_field_txt"-->
-<!--                        :getPopupContainer="triggerNode=> triggerNode.parentNode"-->
-<!--                        allowClear-->
-<!--                        v-model="queryParam[item.db_field_name]">-->
-<!--                <a-select-option v-for="(item, key) in item.option"-->
-<!--                                 :key="key"-->
-<!--                                 :value="item.value">-->
-<!--                       <span style="display: inline-block;width: 100%" :title=" item.name">-->
-<!--                             {{ item.name }}-->
-<!--                       </span>-->
-<!--                </a-select-option>-->
-<!--              </a-select>-->
-<!--            </a-form-item>-->
-<!--          </template>-->
         </template>
 
         <template v-if="index >= minLength && toggleSearchStatus">
@@ -127,22 +110,6 @@
                                  :triggerChange="false" :dictCode="item.dict_field"/>
             </a-form-item>
           </template>
-<!--          <template v-else-if="item.field_show_type === '12'">-->
-<!--            <a-form-item :label="item.db_field_txt" :labelCol="labelCol" :wrapperCol="wrapperCol">-->
-<!--              <a-select :placeholder="$t('pleaseSelect')+item.db_field_txt"-->
-<!--                        :getPopupContainer="triggerNode=> triggerNode.parentNode"-->
-<!--                        allowClear-->
-<!--                        v-model="queryParam[item.db_field_name]">-->
-<!--                <a-select-option v-for="(item, key) in item.option"-->
-<!--                                 :key="key"-->
-<!--                                 :value="item.value">-->
-<!--                       <span style="display: inline-block;width: 100%" :title=" item.name">-->
-<!--                             {{ item.name }}-->
-<!--                       </span>-->
-<!--                </a-select-option>-->
-<!--              </a-select>-->
-<!--            </a-form-item>-->
-<!--          </template>-->
         </template>
       </a-col>
       <span style="float: right;overflow: hidden;margin-right: 11px" class="table-page-search-submitButtons">
@@ -160,7 +127,6 @@
 </template>
 
 <script>
-import { getAction } from '@/api/manage'
 import JDictSelectTag from '../dict/JDictSelectTag'
 import JMultiSelectTag from '../dict/JMultiSelectTag'
 import { FieldType } from '../../enums/commonEnums'
@@ -268,11 +234,13 @@ export default {
   },
   methods: {
     searchQuery () {
-      eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
+      this.$emit('search', JSON.parse(JSON.stringify(this.queryParam)))
+      // eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
     },
     searchReset () {
       this.queryParam = {}
-      eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
+      this.$emit('reset', JSON.parse(JSON.stringify(this.queryParam)))
+      // eventBus.$emit('searchQuery', JSON.parse(JSON.stringify(this.queryParam)))
     },
     // 获取查询条件列表
     getSearch () {
diff --git a/src/components/jero/JTable.vue b/src/components/jero/JTable.vue
index 678a92b7..77e358d0 100644
--- a/src/components/jero/JTable.vue
+++ b/src/components/jero/JTable.vue
@@ -3,22 +3,28 @@
     class="j-table"
     ref="table"
     :bordered="bordered"
-    :table-key="tableKey"
     :columns="resultColumns"
     :components="components"
     :scroll="scroll || selfScroll"
     v-bind="$attrs"
     v-on="$listeners">
 
-      <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
+    <!-- 如果插槽是作用域插槽，将作用域插槽的props包装成对象传递给slot -->
     <template v-for="(_, slotName) in $scopedSlots" :slot="slotName" slot-scope="text, record, index">
       <slot :name="slotName" v-bind="{text, record, index}" />
     </template>
     <!-- 如果是普通插槽，直接使用$slots渲染 -->
-    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName"/>
+    <slot v-for="(_, slotName) in $slots" :name="slotName" :slot="slotName" />
+
+    <template slot="text" slot-scope="text">
+      <a-tooltip overlay-class-name="tooltip-style">
+        <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+        <div class="table-text">{{ text || text === 0 ? text : global.emptyLine }}</div>
+      </a-tooltip>
+    </template>
 
     <div slot="settingDropdown">
-      <a-card>
+      <a-card v-if="needSettingColumnHideOrFreeze">
         <a-table
           rowKey="key"
           :style="settingStyle"
@@ -41,7 +47,8 @@
         </a-table>
       </a-card>
     </div>
-    <a-icon ref="settingBtn" slot="settingIcon" type="setting" :style="{ fontSize:'16px', color: '#108ee9' }" />
+    <a-icon ref="settingBtn" slot="settingIcon" type="setting" :style="{ fontSize:'16px', color: '#108ee9' }"
+            v-if="needSettingColumnHideOrFreeze" />
 
   </a-table>
 </template>
@@ -66,7 +73,8 @@ export default {
     // 用于持久化存储列配置，保证唯一
     tableKey: {
       type: String,
-      required: true
+      required: false,
+      default: 'j-table'
     },
     columns: {
       type: Array,
@@ -98,6 +106,24 @@ export default {
     bordered: {
       type: Boolean,
       required: false
+    },
+    // 是否需要设置冻结列和显隐列
+    needSettingColumnHideOrFreeze: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否需要将冻结和显隐的设置存储在localStorage中
+    needSaveSettingInLocal: {
+      type: Boolean,
+      required: false,
+      default: false
+    },
+    // 是否可拖拽
+    canDrag: {
+      type: Boolean,
+      required: false,
+      default: false
     }
   },
   data () {
@@ -106,8 +132,22 @@ export default {
       // 设置表格
       settingColumns: [
         { title: '列名', dataIndex: 'title', align: 'center', ellipsis: true, width: 150 },
-        { title: '隐藏', dataIndex: 'hide', align: 'center', ellipsis: true, width: 60, scopedSlots: { customRender: 'hide' } },
-        { title: '冻结', dataIndex: 'freeze', align: 'center', ellipsis: true, width: 60, scopedSlots: { customRender: 'freeze' } }
+        {
+          title: '隐藏',
+          dataIndex: 'hide',
+          align: 'center',
+          ellipsis: true,
+          width: 60,
+          scopedSlots: { customRender: 'hide' }
+        },
+        {
+          title: '冻结',
+          dataIndex: 'freeze',
+          align: 'center',
+          ellipsis: true,
+          width: 60,
+          scopedSlots: { customRender: 'freeze' }
+        }
       ],
       settingDataSource: [],
       settingColumnsObj: { hide: [], freeze: [] }, // 本地存储的配置对象
@@ -157,26 +197,29 @@ export default {
     setResultColumns (columns) {
       // 深度克隆，防止直接修改父组件数据
       columns = cloneDeep(columns)
-      // 设置按钮插槽配置
-      const settingOption = {
-        filterDropdown: 'settingDropdown',
-        filterIcon: 'settingIcon'
+      // 有设置功能再进行这个插槽的配置
+      if (this.needSettingColumnHideOrFreeze) {
+        // 设置按钮插槽配置
+        const settingOption = {
+          filterDropdown: 'settingDropdown',
+          filterIcon: 'settingIcon'
+        }
+        let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
+        // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列）
+        if (findActionIndex === -1) {
+          findActionIndex = columns.length - 1
+        }
+        if (columns[findActionIndex].scopedSlots instanceof Object) {
+          Object.assign(columns[findActionIndex].scopedSlots, settingOption)
+        } else {
+          columns[findActionIndex].scopedSlots = settingOption
+        }
+        // 自定义设置弹框（尝试解决表格刷新丢失弹框的问题）此方法会出现两个弹框
+        // columns[findActionIndex].filterDropdownVisible = this.settingVisible
+        // columns[findActionIndex].onFilterDropdownVisibleChange = (visible) => {
+        //   this.settingVisible = visible
+        // }
       }
-      let findActionIndex = columns.findIndex(col => col && (getKey(col) === actionKey))
-      // 将设置按钮放到表格右上角，如果有操作栏就固定到右侧（操作栏固定右侧，没有的话就最后一列）
-      if (findActionIndex === -1) {
-        findActionIndex = columns.length - 1
-      }
-      if (columns[findActionIndex].scopedSlots instanceof Object) {
-        Object.assign(columns[findActionIndex].scopedSlots, settingOption)
-      } else {
-        columns[findActionIndex].scopedSlots = settingOption
-      }
-      // 自定义设置弹框（尝试解决表格刷新丢失弹框的问题）此方法会出现两个弹框
-      // columns[findActionIndex].filterDropdownVisible = this.settingVisible
-      // columns[findActionIndex].onFilterDropdownVisibleChange = (visible) => {
-      //   this.settingVisible = visible
-      // }
 
       // 最后过滤掉需要隐藏的字段,按定位进行排序
       const startArr = [] // 冻结左侧的列
@@ -191,6 +234,11 @@ export default {
         col.width = col.width && parseInt(col.width + '')
         // 如果没有最小宽度就获取统一设置的最小宽度
         col.minWidth = (col.minWidth && parseInt(col.minWidth + '')) || this.columnMinWidth
+        if (!col.scopedSlots) {
+          col.scopedSlots = {
+            customRender: 'text'
+          }
+        }
         if (!col.hide) {
           // 如果没有宽度就取minWidth（不添加原数据的width属性，这里只对需要固定的minWidth生效）
           const width = col.width || col.minWidth
@@ -218,18 +266,19 @@ export default {
         ...midArr,
         ...endArr
       ]
+      console.log(this.resultColumns)
       return this.resultColumns
     },
     // 初始化表格拖拽
     initDrag (columns) {
       // 没有边框就不能拖拽
-      if (!this.bordered) {
+      if (!this.bordered || !this.canDrag) {
         return
       }
       // 如果没有任何列开启拖拽就不需要拖拽
-      if (!columns.some(col => col.resizable)) {
-        return
-      }
+      // if (!columns.some(col => col.resizable)) {
+      //   return
+      // }
       // 第一步：列宽映射
       const draggingMap = {}
       columns.forEach((col) => {
@@ -248,10 +297,10 @@ export default {
         if (key === 'selection-column') {
           col = {}
         } else {
-          col = columns.find(col => getKey(col) === key)
+          col = columns.find(col => getKey(col) === key) || {}
         }
         // 没有开启拖拽 或 没有宽度 或 有定位，都不能拖拽（防止布局异常，至少有一列不设width并且不能有fixed）
-        if (!col.resizable || !col.width || !!col.fixed) {
+        if (!col.width || !!col.fixed) {
           return <th {...restProps}>{children}</th>
         }
         // 开始拖拽监听
@@ -361,6 +410,9 @@ export default {
     },
     // 配置保存到本地
     saveSetting () {
+      if (!this.needSaveSettingInLocal) {
+        return
+      }
       // 获取所有的jtable缓存的key数组（用于清除缓存，没有就初始化数组）
       const jTableKeys = Vue.ls.get(J_TABLE_KEYS) || []
       const saveKey = this.tableKey + saveSuffix
@@ -397,7 +449,10 @@ export default {
   mounted () {
     // 备份默认配置
     this.columnsBak = cloneDeep(this.columns)
-    const settingColumnsObj = Vue.ls.get(this.tableKey + saveSuffix)
+    let settingColumnsObj
+    if (this.needSaveSettingInLocal) {
+      settingColumnsObj = Vue.ls.get(this.tableKey + saveSuffix)
+    }
     // 第一次进页面或清空缓存进行初始化
     if (settingColumnsObj) {
       this.settingColumnsObj = settingColumnsObj
diff --git a/src/mixins/ConfigurableTableMixin.js b/src/mixins/ConfigurableTableMixin.js
new file mode 100644
index 00000000..2af8be9b
--- /dev/null
+++ b/src/mixins/ConfigurableTableMixin.js
@@ -0,0 +1,204 @@
+/**
+ * 表头通过标签管理配置的模块的表格数据的混入
+ */
+import { getAction, postAction } from '@api/manage'
+
+// 模拟接口返回的表头数据
+const TempApiReturnColumns = [
+  {
+    db_field_txt: '编号',
+    sort: 'true',
+    db_field_name: 'serial_number',
+    click: 'true'
+  },
+  { db_field_txt: '标题', db_field_name: 'title', click: 'true' },
+  {
+    db_field_txt: '状态',
+    sort: 'true',
+    db_field_name: 'state'
+  },
+  { db_field_txt: '适用地区', db_field_name: 'region' },
+  {
+    db_field_txt: '技术领域',
+    db_field_name: 'technology_territory'
+  },
+  { db_field_txt: '发布日期', sort: 'true', db_field_name: 'issue_time' }
+]
+
+export const ConfigurableTableMixin = {
+  data () {
+    return {
+      /* 分页参数 */
+      ipagination: {
+        current: 1,
+        pageSize: 50,
+        pageSizeOptions: ['10', '50', '100', '150', '200'],
+        showTotal: (total, range) => {
+          return range[0] + '-' + range[1] + ' ' + this.$t('total') + ' ' + total + ' ' + this.$t('strip')
+        },
+        showQuickJumper: true,
+        showSizeChanger: true,
+        total: 0
+      },
+      columns: [],
+      selectedRowKeys: [],
+      dataSource: [],
+      isTrue: false, // 是否显示
+      searchParams: {},
+      loading: false,
+      orderBy: '1',
+      orderByField: '',
+      getTableHeaderData: null, // 获取表头数据的方法
+      // 操作列的column
+      operateColumn: {
+        title: this.$t('operation'),
+        align: 'center',
+        fixed: 'right',
+        scopedSlots: { customRender: 'operation' }
+      },
+      type: '' // 这个字段不知道什么含义
+    }
+  },
+  mounted () {
+    this.getTableHeader()
+    this.loadData()
+  },
+  methods: {
+    /**
+     * 查询，通过search组件$emit事件获取查询参数
+     * @param queryParam
+     */
+    searchQuery (queryParam) {
+      Object.keys(queryParam).forEach(res => {
+        if (queryParam[res] instanceof Array) {
+          queryParam[res] = queryParam[res].join(',')
+        }
+      })
+      this.searchParams = queryParam
+      this.getTableHeader()
+      this.loadData()
+    },
+    searchReset () {
+      this.searchParams = {}
+      this.selectedRowKeys = []
+      this.getData()
+      this.getTableList()
+    },
+    /**
+     * 获取表头数据
+     */
+    getTableHeader () {
+      if (!this.url.tableHeader) {
+        this.columns = this.dealColumns(TempApiReturnColumns)
+        return
+      }
+      const params = { flag: this.flag }
+      getAction(this.url.tableHeader, params).then(res => {
+        if (res.success) {
+          this.columns = this.dealColumns(res.result || [])
+          this.isTrue = false
+          this.$nextTick(() => {
+            this.isTrue = true
+          })
+        }
+      })
+    },
+    /**
+     * 处理表头数据
+     * @param columns
+     * @returns {*[]}
+     */
+    dealColumns (columns) {
+      const tempColumns = []
+      columns.forEach(item => {
+        // 可点击项加入插槽
+        if (item.click === 'true') {
+          item.scopedSlots = {
+            customRender: 'detailClick'
+          }
+        } else if (item.urlClick === 'true') {
+          this.columns[index].scopedSlots = {
+            customRender: 'urlClick'
+          }
+        }
+        // 是否可排序
+        item.sorter = item.sort === 'true'
+        item.width = 215
+        item.title = item.db_field_txt
+        item.dataIndex = item.db_field_name
+        item.align = 'left'
+        tempColumns.push(item)
+      })
+      if (this.showAction && this.operateColumn) {
+        let width = 0
+        if (this.operationList.length > 0) {
+          for (let i = 0; i < this.operationList.length; i++) {
+            width += this.getTextWith(this.operationList[i].text)
+          }
+        }
+        const operateColumn = JSON.parse(JSON.stringify(this.operateColumn))
+        operateColumn.width = width
+        tempColumns.push(operateColumn)
+      }
+      return tempColumns
+    },
+    /**
+     * 通过文字获取列宽
+     * @param text
+     * @param fontStyle
+     * @returns {number}
+     */
+    getTextWith (text, fontStyle) {
+      const canvas = document.createElement('canvas')
+      const context = canvas.getContext('2d')
+      context.font = fontStyle || '14px' // 设置字体样式
+      const dimension = context.measureText(text)
+      return dimension.width + 40
+    },
+    getQueryParams () {
+      const pageNo = this.ipagination.current
+      const pageSize = this.ipagination.pageSize
+      const params = {
+        ...this.searchParams,
+        orderBy: this.orderBy,
+        orderByField: this.orderByField,
+        type: this.type,
+        pageNo: pageNo,
+        pageSize: pageSize
+      }
+      return params
+    },
+    loadData () {
+      if (!this.url.list) {
+        this.$message.error('请设置url.list属性!')
+        return
+      }
+      const params = this.getQueryParams()
+      this.loading = true
+      postAction(this.url.list, params).then((res) => {
+        if (res.success) {
+          if (res.result.current > 1 && res.result.records.length === 0) {
+            this.ipagination.current = res.result.current - 1
+            this.loadData()
+            return
+          }
+          this.dataSource = res.result.records || []
+          this.ipagination.total = res.result.total
+        } else {
+          this.$message.warn(res.message)
+        }
+      }).finally(() => {
+        this.loading = false
+      })
+    },
+    tableOnChange (pagination, filters, sorter) {
+      this.orderBy = sorter.order === 'ascend' ? '1' : '2'
+      this.orderByField = sorter.columnKey
+      this.ipagination = pagination
+      this.loadData()
+    },
+    onSelectChange (selectedRowKeys) {
+      this.selectedRowKeys = selectedRowKeys
+    }
+  }
+}
diff --git a/src/views/dashboard/Analysis.vue b/src/views/dashboard/Analysis.vue
index 6aa4b8db..6b88a26c 100644
--- a/src/views/dashboard/Analysis.vue
+++ b/src/views/dashboard/Analysis.vue
@@ -1,21 +1,30 @@
 <template>
   <div>
+    <a-button @click="previewFileByOnlyOffice('1693528070103957505')">打开预览onlyOffice</a-button>
+    <a-button @click="editFileByOnlyOffice('1693528070103957505')">打开编辑onlyOffice</a-button>
+    <j-upload />
   </div>
 </template>
 
 <script>
+import onlyOfficePreview from '@/common/onlyOffice/onlyOfficePreview'
+import onlyOfficeEdit from '@/common/onlyOffice/onlyOfficeEdit'
 
 export default {
   name: 'Analysis',
   data () {
-    return {
-    }
+    return {}
   },
   created () {
 
   },
   methods: {
-
+    previewFileByOnlyOffice (fileId) {
+      onlyOfficePreview(fileId, '文件名')
+    },
+    editFileByOnlyOffice (fileId) {
+      onlyOfficeEdit(fileId, '文件名')
+    }
   }
 }
 </script>
diff --git a/src/views/documentManage/DocumentLibrary.vue b/src/views/documentManage/DocumentLibrary.vue
index f3722fa4..7af18b1d 100644
--- a/src/views/documentManage/DocumentLibrary.vue
+++ b/src/views/documentManage/DocumentLibrary.vue
@@ -1,60 +1,83 @@
 <template>
   <a-card :bordered="false">
     <div class="table-page-search-wrapper">
-      <search ref="searchRef" :flag="'1'" :url="url"/>
+      <search ref="searchRef" :flag="'1'" :url="url" @search="searchQuery" @reset="searchReset" />
     </div>
     <div class="table-operator">
       <div class="operator-text" @click="handleBatchDel">
-        <a-icon type="delete"/>
+        <a-icon type="delete" />
         {{ $t('batchDelete') }}
       </div>
       <div class="operator-text" @click="handleExportXls">
-        <a-icon type="export"/>
+        <a-icon type="export" />
         {{ $t('dataExport') }}
       </div>
       <div class="operator-text" @click="handleFileExport">
-        <a-icon type="mail"/>
+        <a-icon type="mail" />
         {{ $t('exportWithFile') }}
       </div>
       <div class="operator-text" @click="handleCompare">
-        <a-icon type="share-alt"/>
+        <a-icon type="share-alt" />
         {{ $t('share') }}
       </div>
       <div class="operator-text" @click="downTemplate">
-        <a-icon type="download"/>
+        <a-icon type="download" />
         {{ $t('templateDownload') }}
       </div>
-      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl" @change="handleImport">
+      <a-upload name="file" :showUploadList="false" :multiple="false" :headers="tokenHeader" :action="importExcelUrl"
+                @change="handleImport">
         <div class="operator-text">
-          <a-icon type="import"/>
+          <a-icon type="import" />
           {{ $t('import') }}
         </div>
       </a-upload>
       <div class="operator-text" @click="handleAdd">
-        <a-icon type="plus"/>
+        <a-icon type="plus" />
         {{ $t('newlyAdded') }}
       </div>
     </div>
     <div>
-      <!--
-      showAction是否有操作按钮
-      OperationList操作列表的list
-      onSelectChange 选中的id值
-      editTable再传操作按钮的同时把事件定义名称也传过去
-      -->
-      <table-data
-        ref="tableData"
-        :flag="'1'"
-        :operationList="operationList"
-        @editTable="editTable"
-        @deleteTable="deleteTable"
-        :url="url"
-        showAction
-        @collection="collection"
-        @subscribe="subscribe"
-        @onSelectChange="onSelectChange"
-        @detailClick="detailClick"
-      />
+      <j-table
+        v-if="columns && columns.length > 0"
+        :columns="columns"
+        :dataSource="dataSource"
+        :bordered="true"
+        :can-drag="true"
+        rowKey="id"
+        :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }"
+        :pagination="ipagination"
+        :scroll="{x: '100%'}"
+        @change="tableOnChange">
+
+        <tempalte slot="operation" slot-scope="{text, record}">
+          <a v-for="(operation, index) in operationList" :key="index" @click="operationClick(operation,record)">
+            <!--            v-has="operation.has"-->
+            <span v-if="operation.text === $t('docLibrary.cancelCollection')" class="text">
+              {{ !record.collectFlag || record.collectFlag === '0' ? $t('docLibrary.collection') : $t('docLibrary.cancelCollection')
+              }}
+            </span>
+            <!--            v-has="operation.has"-->
+            <span v-else-if="operation.text === $t('docLibrary.cancelSubscribe')" class="text">
+              {{ !record.subscribeFlag || record.subscribeFlag === '0' ? $t('docLibrary.subscribe') : $t('docLibrary.cancelSubscribe')
+              }}
+            </span>
+            <!--            v-has="operation.has"-->
+            <span v-else class="text">
+              {{ operation.text }}
+            </span>
+          </a>
+        </tempalte>
+
+        <!--        详情-->
+        <template slot="detailClick" slot-scope="{text, record}">
+          <a-tooltip overlay-class-name="tooltip-style">
+            <template slot="title">{{ text || text === 0 ? text : global.emptyLine }}</template>
+            <a class="table-text textName" @click="detailClick(record)" v-if="text || text === 0">{{ text }}</a>
+            <div class="table-text" v-else>{{ global.emptyLine }}</div>
+          </a-tooltip>
+        </template>
+
+      </j-table>
     </div>
     <library-add-form
       ref="addFormRef"
@@ -72,8 +95,6 @@
 <script>
 // 搜索组件
 import Search from '@/components/customField/Search'
-// 表格组件
-import TableData from '@/components/customField/TableData'
 // 新增、编辑组件
 import LibraryAddForm from './modules/LibraryAddForm'
 // 推送组件
@@ -83,10 +104,13 @@ import { ACCESS_TOKEN } from '@/store/mutation-types'
 import { downFile, downloadFile, getAction } from '@/api/manage'
 import Modal from 'ant-design-vue'
 import store from '@/store'
+import JTable from '@comp/jero/JTable.vue'
+import { ConfigurableTableMixin } from '@/mixins/ConfigurableTableMixin'
 
 export default {
   name: 'DocumentLibrary',
-  components: { Search, TableData, LibraryPush, LibraryAddForm },
+  components: { JTable, Search, LibraryPush, LibraryAddForm },
+  mixins: [ConfigurableTableMixin],
   data () {
     return {
       operationList: [
@@ -116,9 +140,10 @@ export default {
       tokenHeader: { 'X-Access-Token': Vue.ls.get(ACCESS_TOKEN) },
       // url传参严格按照当前命名
       url: {
-        tableHeader: '/document/bussDocumentLibraryEO/getHeader', // 表格头部字段
+        // tableHeader: '/document/bussDocumentLibraryEO/getHeader', // 表格头部字段
+        tableHeader: '', // 表格头部字段
         getSearchList: '/document/bussDocumentLibraryEO/queryCondition', // 搜索字段
-        tableList: 'document/bussDocumentLibraryEO/queryPageInfo', // 表格数据
+        list: 'document/bussDocumentLibraryEO/queryPageInfo', // 表格数据
         getAddForm: 'document/bussDocumentLibraryEO/getAddForm', // 表单的字段
         addInfo: 'document/bussDocumentLibraryEO/addInfo', // 新增
         updateInfo: 'document/bussDocumentLibraryEO/updateInfo', // 编辑
@@ -132,7 +157,21 @@ export default {
         exportZipUrl: '', // 带文件导出
         downTemplateUrl: '' // 下载导入模板
       },
-      idList: []
+      showAction: true, // 是否显示操作列
+      dataSource: [
+        {
+          collectFlag: '0',
+          id: 'fd045f5c5d734087a884a63664ee91f1',
+          issue_time: '',
+          region: '',
+          serial_number: '0621001编号',
+          state: '现行',
+          subscribeFlag: '0',
+          technology_territory: '',
+          title: '0621001标题',
+          title_en: '0621001Title'
+        }
+      ]
     }
   },
   computed: {
@@ -147,16 +186,16 @@ export default {
     },
     // 批量删除
     handleBatchDel () {
-      if (this.idList.length > 0) {
+      if (this.selectedRowKeys.length > 0) {
         this.$confirm({
           content: this.$t('confirmBatchDeletion'),
           onOk: () => {
-            const idList = JSON.parse(JSON.stringify(this.idList))
-            this.verifyBind(idList.join(','), () => {
-              getAction(this.url.deleteBatch, { ids: idList.join(',') }).then((res) => {
+            const selectedRowKeys = JSON.parse(JSON.stringify(this.selectedRowKeys))
+            this.verifyBind(selectedRowKeys.join(','), () => {
+              getAction(this.url.deleteBatch, { ids: selectedRowKeys.join(',') }).then((res) => {
                 if (res.success) {
                   this.$message.success(this.$t('operationSuccessful'))
-                  this.idList = []
+                  this.selectedRowKeys = []
                   this.$refs.tableData.$emit('searchGetData')
                 } else {
                   this.$message.warning(this.$t('operationFailed'))
@@ -170,8 +209,8 @@ export default {
       }
     },
     // 验证传入的idList是否都可以删除，不明白具体为什么要判断？？
-    verifyBind (idList, callBack) {
-      getAction(this.url.verifyBind, { ids: idList }).then((res) => {
+    verifyBind (selectedRowKeys, callBack) {
+      getAction(this.url.verifyBind, { ids: selectedRowKeys }).then((res) => {
         if (res.success) {
           callBack && callBack()
         } else {
@@ -181,14 +220,19 @@ export default {
     },
     // 推送
     handleCompare () {
-      if (this.idList.length > 0) {
+      if (this.selectedRowKeys.length > 0) {
         this.$nextTick(() => {
-          this.$refs.libraryPushRef.getPush(this.idList)
+          this.$refs.libraryPushRef.getPush(this.selectedRowKeys)
         })
       } else {
         this.$message.warning(this.$t('selectLeastOne'))
       }
     },
+    operationClick (operation, record) {
+      if (this[operation.clickEvent]) {
+        this[operation.clickEvent](record)
+      }
+    },
     // 编辑按钮
     editTable (val) {
       this.$refs.addFormRef.edit(val)
@@ -214,10 +258,10 @@ export default {
     // 收藏按钮
     collection (val) {
       this.$confirm({
-        content: val.collectFlag === 0 || !val.collectFlag ? this.$t('docLibrary.confirmCollection') : this.$t('docLibrary.cancelConfirmCollection'),
+        content: val.collectFlag === '0' || !val.collectFlag ? this.$t('docLibrary.confirmCollection') : this.$t('docLibrary.cancelConfirmCollection'),
         onOk: () => {
           let url = ''
-          if (val.collectFlag === 0 || !val.collectFlag) {
+          if (val.collectFlag === '0' || !val.collectFlag) {
             url = 'document/bussDocumentLibraryEO/addCollect'
           } else {
             url = 'document/bussDocumentLibraryEO/cancelCollect'
@@ -236,10 +280,10 @@ export default {
     // 订阅按钮
     subscribe (val) {
       this.$confirm({
-        content: val.subscribeFlag === 0 || !val.subscribeFlag ? this.$t('docLibrary.confirmSubscribe') : this.$t('docLibrary.cancelConfirmSubscribe'),
+        content: val.subscribeFlag === '0' || !val.subscribeFlag ? this.$t('docLibrary.confirmSubscribe') : this.$t('docLibrary.cancelConfirmSubscribe'),
         onOk: () => {
           let url = ''
-          if (val.subscribeFlag === 0 || !val.subscribeFlag) {
+          if (val.subscribeFlag === '0' || !val.subscribeFlag) {
             url = 'document/bussDocumentLibraryEO/addSubscribe'
           } else {
             url = 'document/bussDocumentLibraryEO/cancelSubscribe'
@@ -255,10 +299,6 @@ export default {
         }
       })
     },
-    // 选中的id
-    onSelectChange (value) {
-      this.idList = value
-    },
     // 处理列表中的点击事件
     detailClick (item) {
       const newUrl = this.$router.resolve({
@@ -269,7 +309,7 @@ export default {
     },
     // 清楚表格选中
     clearSelected () {
-      this.idList = []
+      this.selectedRowKeys = []
     },
     // 下载模板
     downTemplate (fileName) {
@@ -280,24 +320,24 @@ export default {
     },
     deselect () {
       this.$refs.tableDataRef.selectedRowKeys = []
-      this.idList = []
+      this.selectedRowKeys = []
     },
     // 带文件导出
     handleFileExport (fileName) {
-      if (this.idList.length > 0) {
+      if (this.selectedRowKeys.length > 0) {
         if (!fileName || typeof fileName !== 'string') {
           fileName = '导出文件'
         }
         const param = {
           ...this.$refs.searchRef.queryParam,
-          id: this.idList.join(','),
+          id: this.selectedRowKeys.join(','),
           flag: 'file'
         }
         console.log('导出参数', param)
         // 加一个大的提示
         const modalLoading = this.$info({
           title: '提示',
-          content: <span>正在导出，请稍候 <a-spin size="small"/></span>,
+          content: <span>正在导出，请稍候 <a-spin size="small" /></span>,
           keyboard: false
         })
         // 把知道了这个按钮去掉
@@ -324,13 +364,13 @@ export default {
       }
       const param = {
         ...this.$refs.searchRef.queryParam,
-        id: this.idList.join(',')
+        id: this.selectedRowKeys.join(',')
       }
       console.log('导出参数', param)
       // 加一个大的提示
       const modalLoading = this.$info({
         title: '提示',
-        content: <span>正在导出，请稍候 <a-spin size="small"/></span>,
+        content: <span>正在导出，请稍候 <a-spin size="small" /></span>,
         keyboard: false
       })
       // 把知道了这个按钮去掉
@@ -377,14 +417,14 @@ export default {
               message = message.split('</br>')
               message.forEach(res => {
                 if (res) {
-                  content.push(< div > {res} < /div>)
+                  content.push(< div> {res} < /div>)
                 }
               })
             }
             this.$warning({
               title: name,
               content: (
-                < div >
+                < div>
                   {content}
                 < /div>
               )
@@ -420,14 +460,14 @@ export default {
             message = message.split('</br>')
             message.forEach(res => {
               if (res) {
-                content.push(< div > {res} < /div>)
+                content.push(< div> {res} < /div>)
               }
             })
           }
           this.$warning({
             title: name,
             content: (
-              < div >
+              < div>
                 {content}
               < /div>
             )