vue2-client 1.11.3 → 1.11.4

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.11.3",
+  "version": "1.11.4",
   "private": false,
   "scripts": {
     "serve": "SET NODE_OPTIONS=--openssl-legacy-provider && vue-cli-service serve --no-eslint",

package/src/base-client/components/common/XFormTable/demo.vue

@@ -1,60 +1,60 @@
-<template>
-  <a-card :bordered="false">
-    <!--    <a-button @click="()=>{queryParamsName = 'MeterBookUnallocatedUserCRUD'}">测试1</a-button>-->
-    <!--    <a-button @click="()=>{queryParamsName = 'MeterBookUnallocatedAreaCRUD'}">测试2</a-button>-->
-    <x-form-table
-      title="示例表单"
-      :queryParamsName="queryParamsName"
-      :fixedAddForm="fixedAddForm"
-      service-name="af-revenue"
-      @action="action"
-      @columnClick="columnClick"
-      ref="xFormTable">
-    </x-form-table>
-  </a-card>
-</template>
-
-<script>
-import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
-import { microDispatch } from '@vue2-client/utils/microAppUtils'
-export default {
-  name: 'Demo',
-  components: {
-    XFormTable
-  },
-  data () {
-    return {
-      // 查询配置文件名
-      queryParamsName: 'ExceptionQueryCRUD',
-      // 查询配置左侧tree
-      // xTreeConfigName: 'addressType',
-      // 新增表单固定值
-      fixedAddForm: {},
-      // 是否显示详情抽屉
-      detailVisible: false,
-      // 当前记录
-      record: {}
-    }
-  },
-  methods: {
-    columnClick (key, value, record) {
-      microDispatch({ type: 'v3route', path: '/bingliguanli/dianzibingliluru', props: { selected: arguments[0].his_f_admission_id } })
-    },
-    action (record, id, actionType) {
-      this.detailVisible = true
-      console.log('触发了详情操作', record, id, actionType)
-    },
-    onClose () {
-      this.detailVisible = false
-      // 关闭详情之后重新查询表单
-      this.$refs.xFormTable.refreshTable(true)
-    }
-  },
-  computed: {
-  },
-}
-</script>
-
-<style scoped>
-
-</style>
+<template>
+  <a-card :bordered="false">
+    <!--    <a-button @click="()=>{queryParamsName = 'MeterBookUnallocatedUserCRUD'}">测试1</a-button>-->
+    <!--    <a-button @click="()=>{queryParamsName = 'MeterBookUnallocatedAreaCRUD'}">测试2</a-button>-->
+    <x-form-table
+      title="示例表单"
+      :queryParamsName="queryParamsName"
+      :fixedAddForm="fixedAddForm"
+      service-name="af-system"
+      @action="action"
+      @columnClick="columnClick"
+      ref="xFormTable">
+    </x-form-table>
+  </a-card>
+</template>
+
+<script>
+import XFormTable from '@vue2-client/base-client/components/common/XFormTable/XFormTable.vue'
+import { microDispatch } from '@vue2-client/utils/microAppUtils'
+export default {
+  name: 'Demo',
+  components: {
+    XFormTable
+  },
+  data () {
+    return {
+      // 查询配置文件名
+      queryParamsName: 'ceshiCRUD',
+      // 查询配置左侧tree
+      // xTreeConfigName: 'addressType',
+      // 新增表单固定值
+      fixedAddForm: {},
+      // 是否显示详情抽屉
+      detailVisible: false,
+      // 当前记录
+      record: {}
+    }
+  },
+  methods: {
+    columnClick (key, value, record) {
+      microDispatch({ type: 'v3route', path: '/bingliguanli/dianzibingliluru', props: { selected: arguments[0].his_f_admission_id } })
+    },
+    action (record, id, actionType) {
+      this.detailVisible = true
+      console.log('触发了详情操作', record, id, actionType)
+    },
+    onClose () {
+      this.detailVisible = false
+      // 关闭详情之后重新查询表单
+      this.$refs.xFormTable.refreshTable(true)
+    }
+  },
+  computed: {
+  },
+}
+</script>
+
+<style scoped>
+
+</style>

package/src/components/STable/index.js

@@ -1,390 +1,426 @@
-import T from 'ant-design-vue/es/table/Table'
-import get from 'lodash.get'
-
-export default {
-  data () {
-    return {
-      needTotalList: [],
-
-      selectedRows: [],
-      selectedRowKeys: [],
-
-      localLoading: false,
-      localDataSource: [],
-      localPagination: Object.assign({}, this.pagination),
-
-      sortField: undefined,
-      sortOrder: undefined,
-      pageNum: 1,
-      pageSize: 10
-    }
-  },
-  props: Object.assign({}, T.props, {
-    rowKey: {
-      type: [String, Function],
-      default: 'key'
-    },
-    data: {
-      type: Function,
-      required: true
-    },
-    setScrollYHeight: {
-      type: Function,
-      required: true
-    },
-    showSizeChanger: {
-      type: Boolean,
-      default: true
-    },
-    showSummary: {
-      type: Boolean,
-      default: false
-    },
-    selectRowMode: {
-      type: String,
-      default: 'default'
-    },
-    size: {
-      type: String,
-      default: 'default'
-    },
-    /**
-     * alert: {
-     *   show: true,
-     *   clear: Function
-     * }
-     */
-    alert: {
-      type: [Object, Boolean],
-      default: null
-    },
-    rowSelection: {
-      type: Object,
-      default: null
-    },
-    /** @Deprecated */
-    showAlertInfo: {
-      type: Boolean,
-      default: false
-    },
-    showPagination: {
-      type: String | Boolean,
-      default: 'auto'
-    },
-    // 是否隐藏翻页，如果隐藏，彻底不显示翻译
-    hidePagination: {
-      type: Boolean,
-      default: false
-    },
-    // 是否显示表头已选择部分
-    showSelected: {
-      type: Boolean,
-      default: true
-    },
-    /**
-     * enable page URI mode
-     *
-     * e.g:
-     * /users/1
-     * /users/2
-     * /users/3?queryParam=test
-     * ...
-     */
-    pageURI: {
-      type: Boolean,
-      default: false
-    }
-  }),
-  watch: {
-    'localPagination.current' (val) {
-      this.pageURI && this.$router.push({
-        ...this.$route,
-        name: this.$route.name,
-        params: Object.assign({}, this.$route.params, {
-          pageNo: val
-        })
-      })
-      // change pagination, reset total data
-      this.needTotalList = this.initTotalList(this.columns)
-      if (this.selectRowMode === 'default') {
-        this.selectedRowKeys = []
-        this.selectedRows = []
-      }
-    },
-    pageNum (val) {
-      Object.assign(this.localPagination, {
-        current: val
-      })
-    },
-    pageSize (val) {
-      Object.assign(this.localPagination, {
-        pageSize: val
-      })
-    },
-    showSizeChanger (val) {
-      Object.assign(this.localPagination, {
-        showSizeChanger: val
-      })
-    }
-  },
-  created () {
-    const { pageNo } = this.$route.params
-    const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum
-    this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
-      current: localPageNum,
-      pageSize: this.pageSize,
-      showSizeChanger: this.showSizeChanger
-    }) || false
-    this.needTotalList = this.initTotalList(this.columns)
-    // this.loadData()
-  },
-  methods: {
-    /**
-     * 表格重新加载方法
-     * 如果参数为 true, 则强制刷新到第一页
-     * @param Boolean bool
-     */
-    refresh (bool = false) {
-      bool && (this.localPagination = Object.assign({}, {
-        current: 1, pageSize: this.pageSize
-      }))
-      this.loadData()
-    },
-    /**
-     * 加载数据方法
-     * @param {Object} pagination 分页选项器
-     * @param {Object} filters 过滤条件
-     * @param {Object} sorter 排序条件
-     */
-    loadData (pagination, filters, sorter) {
-      this.localLoading = true
-      // 暂存排序方式，避免 refresh 之后排序失效
-      if (sorter && sorter.field) {
-        this.sortField = sorter.field
-      }
-      if (sorter && sorter.order) {
-        this.sortOrder = sorter.order
-      }
-      const parameter = Object.assign({
-          querySummary: !pagination && this.showSummary, // 分页查询的情况不重新获取汇总数据
-          pageNo: (pagination && pagination.current) ||
-            this.showPagination && this.localPagination.current || this.pageNum,
-          pageSize: (pagination && pagination.pageSize) ||
-            this.showPagination && this.localPagination.pageSize || this.pageSize
-        },
-        (this.sortField && { sortField: this.sortField }) || {},
-        (this.sortOrder && { sortOrder: this.sortOrder }) || {},
-        { ...filters }
-      )
-      const result = this.data(parameter)
-      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
-      // eslint-disable-next-line
-      if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
-        result.then(r => {
-          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
-            current: r.pageNo, // 返回结果中的当前分页数
-            total: r.totalCount, // 返回结果中的总记录数
-            showSizeChanger: this.showSizeChanger,
-            pageSize: (pagination && pagination.pageSize) || this.localPagination.pageSize
-          }) || false
-          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
-          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
-            this.localPagination.current--
-            this.loadData()
-            return
-          }
-
-          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = 'auto' 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
-          // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
-          try {
-            if ((['auto'].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
-              this.localPagination.hideOnSinglePage = true
-            }
-          } catch (e) {
-            this.localPagination = false
-          }
-          this.localDataSource = r.data // 返回结果中的数组数据
-          this.localLoading = false
-          this.setScrollYHeight({ type: 'default' })
-        }, () => {
-          this.localLoading = false
-          this.setScrollYHeight({ type: 'default' })
-        })
-      }
-    },
-    initTotalList (columns) {
-      const totalList = []
-      columns && columns instanceof Array && columns.forEach(column => {
-        if (column.needTotal) {
-          totalList.push({
-            ...column,
-            total: 0
-          })
-        }
-      })
-      return totalList
-    },
-    /**
-     * 用于更新已选中的列表数据 total 统计
-     * @param selectedRowKeys
-     * @param selectedRows
-     */
-    updateSelect (selectedRowKeys, selectedRows) {
-      this.selectedRows = selectedRows
-      this.selectedRowKeys = selectedRowKeys
-      const list = this.needTotalList
-      this.needTotalList = list.map(item => {
-        return {
-          ...item,
-          total: selectedRows.reduce((sum, val) => {
-            const total = sum + parseInt(get(val, item.dataIndex))
-            return isNaN(total) ? 0 : total
-          }, 0)
-        }
-      })
-    },
-    /**
-     * 清空 table 已选中项
-     */
-    clearSelected () {
-      if (this.rowSelection) {
-        this.rowSelection.onChange([], [])
-        this.updateSelect([], [])
-      }
-    },
-    /**
-     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
-     * @param callback
-     * @returns {*}
-     */
-    renderClear (callback) {
-      if (this.selectedRowKeys.length <= 0) return null
-      return (
-        <a style="margin-left: 24px" onClick={() => {
-          callback()
-          this.clearSelected()
-        }}>清空</a>
-      )
-    },
-    renderAlert () {
-      // 绘制统计列数据
-      const needTotalItems = this.needTotalList.map((item) => {
-        return (<span style="margin-right: 12px">
-          {item.title}总计 <a
-          style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
-        </span>)
-      })
-
-      // 绘制 清空 按钮
-      const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
-        this.renderClear(this.clearSelected)
-      ) : (typeof this.alert.clear === 'function') ? (
-        this.renderClear(this.alert.clear)
-      ) : null
-
-      // 绘制 alert 组件
-      return (
-        <a-alert showIcon={true} style={{ marginBottom: '8px', fontSize: '14px' }}>
-          <template slot="message">
-            <span style="margin-right: 12px;">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
-            {needTotalItems}
-            {clearItem}
-          </template>
-        </a-alert>
-      )
-    },
-    onExpand (expanded, record) {
-      this.$emit('expand', expanded, record)
-    }
-  },
-
-  render () {
-    const props = {}
-    const localKeys = Object.keys(this.$data)
-    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
-
-    Object.keys(T.props).forEach(k => {
-      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
-      if (localKeys.includes(localKey)) {
-        props[k] = this[localKey]
-        return props[k]
-      }
-      if (k === 'rowSelection') {
-        if (showAlert && this.rowSelection) {
-          // 如果需要使用alert，则重新绑定 rowSelection 事件
-          props[k] = {
-            ...this.rowSelection,
-            selectedRows: this.selectedRows,
-            selectedRowKeys: this.selectedRowKeys,
-            onChange: (selectedRowKeys, selectedRows) => {
-              this.updateSelect(selectedRowKeys, selectedRows)
-              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
-            }
-          }
-          return props[k]
-        } else if (!this.rowSelection) {
-          // 如果没打算开启 rowSelection 则清空默认的选择项
-          props[k] = null
-          return props[k]
-        }
-      }
-      this[k] && (props[k] = this[k])
-      return props[k]
-    })
-    // 取消原有的分页组件 产品设计分页组件和汇总在一行 重新分页逻辑
-    props.pagination = false
-    // 自定义底部汇总插槽组件
-    const pagination = (
-      !!this.showPagination && <a-row type={'flex'} justify={'start'} style={{ marginTop: '8px' }}>
-        <a-col flex="1" style={{
-          alignItems: 'center',
-          display: 'flex',
-          justifyContent: 'start',
-          boxSizing: 'border-box',
-          paddingRight: '2rem'
-        }}>
-          {this.$slots.fixedfooter}
-        </a-col>
-        <a-col flex="0 0">
-          <a-pagination
-            total={this.localPagination.total}
-            onChange={(page, pageSize) => {
-              this.pageSize = pageSize
-              this.pageNum = page
-              this.loadData({
-                current: page,
-                pageSize: pageSize
-              })
-            }
-            }
-            onShowSizeChange={(page, pageSize) => {
-              this.pageSize = pageSize
-              this.pageNum = page
-              this.loadData({
-                current: page,
-                pageSize: pageSize
-              })
-            }
-            }
-            show-total={(total, range) => range[0] === range[1] ? `${range[0]} | 共 ${total} 项` : `${range[0]}-${range[1]} | 共 ${total} 项`}
-            default-current={this.localPagination.current}
-            showSizeChanger={this.localPagination.showSizeChanger}/>
-        </a-col>
-      </a-row>
-    )
-    const table = (
-      <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}
-               onExpand={(expanded, record) => this.onExpand(expanded, record)}>
-        {Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>))}
-      </a-table>
-    )
-
-    return (
-      <div class="table-wrapper">
-        {showAlert && this.showSelected && this.selectRowMode === 'default' ? this.renderAlert() : null}
-        {table}
-        {!this.hidePagination ? pagination : null}
-      </div>
-    )
-  }
-}
+import T from 'ant-design-vue/es/table/Table'
+import get from 'lodash.get'
+import { mapState } from 'vuex'
+
+export default {
+  data () {
+    return {
+      clickedRowKey: null,
+      needTotalList: [],
+
+      selectedRows: [],
+      selectedRowKeys: [],
+
+      localLoading: false,
+      localDataSource: [],
+      localPagination: Object.assign({}, this.pagination),
+
+      sortField: undefined,
+      sortOrder: undefined,
+      pageNum: 1,
+      pageSize: 10
+    }
+  },
+  props: Object.assign({}, T.props, {
+    rowKey: {
+      type: [String, Function],
+      default: 'key'
+    },
+    data: {
+      type: Function,
+      required: true
+    },
+    setScrollYHeight: {
+      type: Function,
+      required: true
+    },
+    showSizeChanger: {
+      type: Boolean,
+      default: true
+    },
+    showSummary: {
+      type: Boolean,
+      default: false
+    },
+    selectRowMode: {
+      type: String,
+      default: 'default'
+    },
+    size: {
+      type: String,
+      default: 'default'
+    },
+    /**
+     * alert: {
+     *   show: true,
+     *   clear: Function
+     * }
+     */
+    alert: {
+      type: [Object, Boolean],
+      default: null
+    },
+    rowSelection: {
+      type: Object,
+      default: null
+    },
+    /** @Deprecated */
+    showAlertInfo: {
+      type: Boolean,
+      default: false
+    },
+    showPagination: {
+      type: String | Boolean,
+      default: 'auto'
+    },
+    // 是否隐藏翻页，如果隐藏，彻底不显示翻译
+    hidePagination: {
+      type: Boolean,
+      default: false
+    },
+    // 是否显示表头已选择部分
+    showSelected: {
+      type: Boolean,
+      default: true
+    },
+    /**
+     * enable page URI mode
+     *
+     * e.g:
+     * /users/1
+     * /users/2
+     * /users/3?queryParam=test
+     * ...
+     */
+    pageURI: {
+      type: Boolean,
+      default: false
+    }
+  }),
+  computed: {
+    ...mapState('setting', ['theme']), // 添加 theme 到计算属性
+
+    // 计算点击行的背景色，使用 10% 透明度
+    clickedRowColor () {
+      if (!this.theme?.color) return '#e6f7ff'
+      return this.hexToRgba(this.theme.color, 0.1)
+    }
+  },
+  watch: {
+    'localPagination.current' (val) {
+      this.pageURI && this.$router.push({
+        ...this.$route,
+        name: this.$route.name,
+        params: Object.assign({}, this.$route.params, {
+          pageNo: val
+        })
+      })
+      // change pagination, reset total data
+      this.needTotalList = this.initTotalList(this.columns)
+      if (this.selectRowMode === 'default') {
+        this.selectedRowKeys = []
+        this.selectedRows = []
+      }
+    },
+    pageNum (val) {
+      Object.assign(this.localPagination, {
+        current: val
+      })
+    },
+    pageSize (val) {
+      Object.assign(this.localPagination, {
+        pageSize: val
+      })
+    },
+    showSizeChanger (val) {
+      Object.assign(this.localPagination, {
+        showSizeChanger: val
+      })
+    }
+  },
+  created () {
+    const { pageNo } = this.$route.params
+    const localPageNum = this.pageURI && (pageNo && parseInt(pageNo)) || this.pageNum
+    this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, {
+      current: localPageNum,
+      pageSize: this.pageSize,
+      showSizeChanger: this.showSizeChanger
+    }) || false
+    this.needTotalList = this.initTotalList(this.columns)
+    // this.loadData()
+  },
+  methods: {
+    /**
+     * 表格重新加载方法
+     * 如果参数为 true, 则强制刷新到第一页
+     * @param Boolean bool
+     */
+    refresh (bool = false) {
+      bool && (this.localPagination = Object.assign({}, {
+        current: 1, pageSize: this.pageSize
+      }))
+      this.loadData()
+    },
+    /**
+     * 加载数据方法
+     * @param {Object} pagination 分页选项器
+     * @param {Object} filters 过滤条件
+     * @param {Object} sorter 排序条件
+     */
+    loadData (pagination, filters, sorter) {
+      this.localLoading = true
+      // 暂存排序方式，避免 refresh 之后排序失效
+      if (sorter && sorter.field) {
+        this.sortField = sorter.field
+      }
+      if (sorter && sorter.order) {
+        this.sortOrder = sorter.order
+      }
+      const parameter = Object.assign({
+          querySummary: !pagination && this.showSummary, // 分页查询的情况不重新获取汇总数据
+          pageNo: (pagination && pagination.current) ||
+            this.showPagination && this.localPagination.current || this.pageNum,
+          pageSize: (pagination && pagination.pageSize) ||
+            this.showPagination && this.localPagination.pageSize || this.pageSize
+        },
+        (this.sortField && { sortField: this.sortField }) || {},
+        (this.sortOrder && { sortOrder: this.sortOrder }) || {},
+        { ...filters }
+      )
+      const result = this.data(parameter)
+      // 对接自己的通用数据接口需要修改下方代码中的 r.pageNo, r.totalCount, r.data
+      // eslint-disable-next-line
+      if ((typeof result === 'object' || typeof result === 'function') && typeof result.then === 'function') {
+        result.then(r => {
+          this.localPagination = this.showPagination && Object.assign({}, this.localPagination, {
+            current: r.pageNo, // 返回结果中的当前分页数
+            total: r.totalCount, // 返回结果中的总记录数
+            showSizeChanger: this.showSizeChanger,
+            pageSize: (pagination && pagination.pageSize) || this.localPagination.pageSize
+          }) || false
+          // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页
+          if (r.data.length === 0 && this.showPagination && this.localPagination.current > 1) {
+            this.localPagination.current--
+            this.loadData()
+            return
+          }
+
+          // 这里用于判断接口是否有返回 r.totalCount 且 this.showPagination = 'auto' 且 pageNo 和 pageSize 存在 且 totalCount 小于等于 pageNo * pageSize 的大小
+          // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能
+          try {
+            if ((['auto'].includes(this.showPagination) && r.totalCount <= (r.pageNo * this.localPagination.pageSize))) {
+              this.localPagination.hideOnSinglePage = true
+            }
+          } catch (e) {
+            this.localPagination = false
+          }
+          this.localDataSource = r.data // 返回结果中的数组数据
+          this.localLoading = false
+          this.setScrollYHeight({ type: 'default' })
+        }, () => {
+          this.localLoading = false
+          this.setScrollYHeight({ type: 'default' })
+        })
+      }
+    },
+    initTotalList (columns) {
+      const totalList = []
+      columns && columns instanceof Array && columns.forEach(column => {
+        if (column.needTotal) {
+          totalList.push({
+            ...column,
+            total: 0
+          })
+        }
+      })
+      return totalList
+    },
+    /**
+     * 用于更新已选中的列表数据 total 统计
+     * @param selectedRowKeys
+     * @param selectedRows
+     */
+    updateSelect (selectedRowKeys, selectedRows) {
+      this.selectedRows = selectedRows
+      this.selectedRowKeys = selectedRowKeys
+      const list = this.needTotalList
+      this.needTotalList = list.map(item => {
+        return {
+          ...item,
+          total: selectedRows.reduce((sum, val) => {
+            const total = sum + parseInt(get(val, item.dataIndex))
+            return isNaN(total) ? 0 : total
+          }, 0)
+        }
+      })
+    },
+    /**
+     * 清空 table 已选中项
+     */
+    clearSelected () {
+      if (this.rowSelection) {
+        this.rowSelection.onChange([], [])
+        this.updateSelect([], [])
+      }
+    },
+    /**
+     * 处理交给 table 使用者去处理 clear 事件时，内部选中统计同时调用
+     * @param callback
+     * @returns {*}
+     */
+    renderClear (callback) {
+      if (this.selectedRowKeys.length <= 0) return null
+      return (
+        <a style="margin-left: 24px" onClick={() => {
+          callback()
+          this.clearSelected()
+        }}>清空</a>
+      )
+    },
+    renderAlert () {
+      // 绘制统计列数据
+      const needTotalItems = this.needTotalList.map((item) => {
+        return (<span style="margin-right: 12px">
+          {item.title}总计 <a
+          style="font-weight: 600">{!item.customRender ? item.total : item.customRender(item.total)}</a>
+        </span>)
+      })
+
+      // 绘制 清空 按钮
+      const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? (
+        this.renderClear(this.clearSelected)
+      ) : (typeof this.alert.clear === 'function') ? (
+        this.renderClear(this.alert.clear)
+      ) : null
+
+      // 绘制 alert 组件
+      return (
+        <a-alert showIcon={true} style={{ marginBottom: '8px', fontSize: '14px' }}>
+          <template slot="message">
+            <span style="margin-right: 12px;">已选择: <a style="font-weight: 600">{this.selectedRows.length}</a></span>
+            {needTotalItems}
+            {clearItem}
+          </template>
+        </a-alert>
+      )
+    },
+    onExpand (expanded, record) {
+      this.$emit('expand', expanded, record)
+    },
+    handleRowClick (record) {
+      this.clickedRowKey = record[this.rowKey]
+      this.$emit('rowClick', record)
+    },
+    hexToRgba (hex, alpha = 1) {
+      try {
+        const r = parseInt(hex.slice(1, 3), 16)
+        const g = parseInt(hex.slice(3, 5), 16)
+        const b = parseInt(hex.slice(5, 7), 16)
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`
+      } catch (e) {
+        return '#e6f7ff'
+      }
+    },
+  },
+
+  render () {
+    const props = {}
+    const localKeys = Object.keys(this.$data)
+    const showAlert = (typeof this.alert === 'object' && this.alert !== null && this.alert.show) && typeof this.rowSelection.selectedRowKeys !== 'undefined' || this.alert
+
+    Object.keys(T.props).forEach(k => {
+      const localKey = `local${k.substring(0, 1).toUpperCase()}${k.substring(1)}`
+      if (localKeys.includes(localKey)) {
+        props[k] = this[localKey]
+        return props[k]
+      }
+      if (k === 'rowSelection') {
+        if (showAlert && this.rowSelection) {
+          // 如果需要使用alert，则重新绑定 rowSelection 事件
+          props[k] = {
+            ...this.rowSelection,
+            selectedRows: this.selectedRows,
+            selectedRowKeys: this.selectedRowKeys,
+            onChange: (selectedRowKeys, selectedRows) => {
+              this.updateSelect(selectedRowKeys, selectedRows)
+              typeof this[k].onChange !== 'undefined' && this[k].onChange(selectedRowKeys, selectedRows)
+            }
+          }
+          return props[k]
+        } else if (!this.rowSelection) {
+          // 如果没打算开启 rowSelection 则清空默认的选择项
+          props[k] = null
+          return props[k]
+        }
+      }
+      this[k] && (props[k] = this[k])
+      return props[k]
+    })
+    // 取消原有的分页组件 产品设计分页组件和汇总在一行 重新分页逻辑
+    props.pagination = false
+    // 在 props 中添加自定义行属性
+    props.customRow = (record) => {
+      return {
+        on: {
+          click: () => this.handleRowClick(record)
+        },
+        style: {
+          'background-color': this.clickedRowKey === record[this.rowKey] ? this.clickedRowColor : ''
+        }
+      }
+    }
+    // 自定义底部汇总插槽组件
+    const pagination = (
+      !!this.showPagination && <a-row type={'flex'} justify={'start'} style={{ marginTop: '8px' }}>
+        <a-col flex="1" style={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'start',
+          boxSizing: 'border-box',
+          paddingRight: '2rem'
+        }}>
+          {this.$slots.fixedfooter}
+        </a-col>
+        <a-col flex="0 0">
+          <a-pagination
+            total={this.localPagination.total}
+            onChange={(page, pageSize) => {
+              this.pageSize = pageSize
+              this.pageNum = page
+              this.loadData({
+                current: page,
+                pageSize: pageSize
+              })
+            }
+            }
+            onShowSizeChange={(page, pageSize) => {
+              this.pageSize = pageSize
+              this.pageNum = page
+              this.loadData({
+                current: page,
+                pageSize: pageSize
+              })
+            }
+            }
+            show-total={(total, range) => range[0] === range[1] ? `${range[0]} | 共 ${total} 项` : `${range[0]}-${range[1]} | 共 ${total} 项`}
+            default-current={this.localPagination.current}
+            showSizeChanger={this.localPagination.showSizeChanger}/>
+        </a-col>
+      </a-row>
+    )
+    const table = (
+      <a-table {...{ props, scopedSlots: { ...this.$scopedSlots } }} onChange={this.loadData}
+               onExpand={(expanded, record) => this.onExpand(expanded, record)}>
+        {Object.keys(this.$slots).map(name => (<template slot={name}>{this.$slots[name]}</template>))}
+      </a-table>
+    )
+
+    return (
+      <div class="table-wrapper">
+        {showAlert && this.showSelected && this.selectRowMode === 'default' ? this.renderAlert() : null}
+        {table}
+        {!this.hidePagination ? pagination : null}
+      </div>
+    )
+  }
+}