update 文档库改使用JTable

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>
             )