update 文档库改使用JTable

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
+    }
+  }
+}