vue2-client 1.12.43 → 1.12.45

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "vue2-client",
-  "version": "1.12.43",
+  "version": "1.12.45",
   "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

@@ -24,7 +24,7 @@ export default {
   data () {
     return {
       // 查询配置文件名
-      queryParamsName: 'ceshiCRUD',
+      queryParamsName: 'outpatientRefund2CRUD',
       // 查询配置左侧tree
       // xTreeConfigName: 'addressType',
       // 新增表单固定值

package/src/base-client/components/common/XReportGrid/XReportTrGroup.vue

@@ -24,7 +24,7 @@
           </template>
           <template v-else-if="cell.type === 'slot'">
             <template
-              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions'].includes(cell.slotType)">
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse','x-h-descriptions', 'x-sidebar'].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
                 :key="cellIndex"
@@ -59,7 +59,7 @@
           </template>
           <template v-else-if="cell.type === 'slot'">
             <template
-              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions'].includes(cell.slotType)">
+              v-if="['x-form-table','x-add-native-form','x-tree-pro', 'x-his-editor', 'x-tab', 'x-form-group', 'x-report', 'x-buttons', 'x-label-select', 'x-conversation', 'x-check-list', 'x-cardSet', 'x-collapse', 'x-h-descriptions', 'x-sidebar'].includes(cell.slotType)">
               <component
                 :is="getComponentName(cell.slotConfig, cell.serviceName, cell.slotType)"
                 :key="cellIndex"
@@ -106,6 +106,7 @@ export default {
     XCardSet: () => import('@vue2-client/base-client/components/common/XCardSet/XCardSet.vue'),
     XCollapse: () => import('@vue2-client/base-client/components/common/XCollapse/XCollapse.vue'),
     XHDescriptions: () => import('@vue2-client/base-client/components/his/XHDescriptions/XHDescriptions.vue'),
+    XSidebar: () => import('@vue2-client/base-client/components/his/XSidebar/XSidebar.vue'),
   },
   props: {
     // 每一行的配置

package/src/base-client/components/common/XTable/XTableWrapper.vue

@@ -37,7 +37,13 @@
         />
       </template>
       <span v-else-if="item.slotType === 'rate'" :key="'rate-' + c_index">
-        <x-rate :value="text" :disabled="true" :allow-half="item.allowHalf" :icon="item.rateIcon" :max-count="item.maxCount" />
+        <x-rate
+          :value="text"
+          :disabled="true"
+          :allow-half="item.allowHalf"
+          :icon="item.rateIcon"
+          :max-count="item.maxCount"
+          style="zoom:0.9"/>
       </span>
       <span v-else-if="item.slotType === 'index'" :key="'index-' + c_index">
         {{ index + 1 }}
@@ -107,7 +113,10 @@
       </span>
     </template>
     <template slot="footer">
-      <slot name="footer" :selectedRowKeys="tableContext.selectedRowKeys" :selectedRows="tableContext.selectedRows"></slot>
+      <slot
+        name="footer"
+        :selectedRowKeys="tableContext.selectedRowKeys"
+        :selectedRows="tableContext.selectedRows"></slot>
     </template>
   </s-table>
 </template>
@@ -120,6 +129,7 @@ import XFormItem from '@vue2-client/base-client/components/common/XForm/XFormIte
 import CustomFuncCel from '@vue2-client/base-client/components/common/XTable/CustomFuncCel.vue'
 import { executeStrFunctionByContext } from '@vue2-client/utils/runEvalFunction'
 import XRate from '@vue2-client/base-client/components/common/XRate/index.vue'
+
 export default {
   name: 'XTableWrapper',
   components: {

package/src/base-client/components/his/XSidebar/XSidebar.vue

@@ -0,0 +1,197 @@
+<template>
+  <div
+    class="drawer"
+    :class="{ 'drawer-collapsed': !isOpen }">
+    <div
+      class="drawer-toggle"
+      :class="{ 'toggle-collapsed': !isOpen }"
+      @click="toggleDrawer">
+      <div class="arrow">
+        {{ isOpen ? '›' : '‹' }}
+      </div>
+    </div>
+    <div class="drawer-content" v-if="isOpen">
+      <x-report
+        :configName="queryParamsName"
+        :server-name="serverName"
+        :show-img-in-cell="true"
+        :display-only="true"
+        :edit-mode="false"
+        :show-save-button="false"
+        :no-padding="true"
+        :dont-format="true">
+      </x-report>
+    </div>
+  </div>
+</template>
+
+<script>
+
+import XReport from '@vue2-client/base-client/components/common/XReportGrid'
+
+export default {
+  components: {
+    XReport
+  },
+  name: 'XSidebar',
+  props: {
+    // 配置参数
+    queryParamsName: {
+      type: String,
+      default: ''
+    },
+    serverName: {
+      type: String,
+      default: 'af-his'
+    }
+  },
+  data () {
+    return {
+      isOpen: true,
+      // 定义主内容区域的最大和最小宽度百分比
+      mainWithData: [{ max: 36, min: 25 }, { max: 60, min: 47 }]
+    }
+  },
+  mounted () {
+    // 在挂载后调整父元素宽度
+    this.updateLayout(this.isOpen)
+  },
+  methods: {
+
+    toggleDrawer () {
+      this.isOpen = !this.isOpen
+      this.$emit('on-drawer-change', this.isOpen)
+      this.updateLayout(this.isOpen)
+    },
+    // 获取同级的其他所有a-col元素
+    getSiblingCols () {
+      try {
+        // 找到当前组件所在的a-col
+        let currentCol = this.$el.parentNode
+        while (currentCol && !currentCol.className.includes('ant-col')) {
+          currentCol = currentCol.parentNode
+        }
+        if (!currentCol) {
+          console.warn('当前组件不在a-col内')
+          return []
+        }
+        // 找到a-col的父元素(a-row)
+        const row = currentCol.parentNode
+        if (!row || !row.className.includes('ant-row')) {
+          console.warn('未找到父级a-row元素')
+          return []
+        }
+        // 获取a-row中的所有a-col
+        const allCol1 = Array.from(row.querySelectorAll('.ant-col-6'))
+        const allCol2 = Array.from(row.querySelectorAll('.ant-col-12'))
+        const allCols = [...allCol1, ...allCol2]
+        // 过滤掉当前a-col，返回其他所有a-col
+        return allCols.filter(col => col !== currentCol)
+      } catch (error) {
+        console.error('获取同级a-col时出错:', error)
+        return []
+      }
+    },
+    updateLayout (isOpen) {
+      this.$nextTick(() => {
+        try {
+          // 获取所有同级a-col
+          const otherCols = this.getSiblingCols()
+          console.log('otherCols =', otherCols)
+          // 如果找到同级列，调整它们的宽度
+          if (otherCols.length > 0) {
+            // 获取当前组件所在的a-col
+            let currentCol = this.$el.parentNode
+            while (currentCol && !currentCol.className.includes('ant-col')) {
+              currentCol = currentCol.parentNode
+            }
+            if (currentCol) {
+              // 更新当前列的宽度
+              const drawerWidth = isOpen ? 28 : 2
+              currentCol.style.flex = `0 0 ${drawerWidth}%`
+              currentCol.style.maxWidth = `${drawerWidth}%`
+              // 根据mainWithData设置其他列的宽度
+              otherCols.forEach((col, index) => {
+                // 确保不超出mainWithData数组范围
+                if (index < this.mainWithData.length) {
+                  // 抽屉打开用min值，关闭用max值
+                  const widthValue = isOpen ? this.mainWithData[index].min : this.mainWithData[index].max
+                  col.style.flex = `0 0 ${widthValue}%`
+                  col.style.maxWidth = `${widthValue}%`
+                }
+              })
+              // 触发重新计算
+              window.dispatchEvent(new Event('resize'))
+            }
+          }
+        } catch (error) {
+          console.error('布局更新失败:', error)
+        }
+      })
+    }
+  },
+  watch: {
+    configData: {
+      handler (newValue) {
+        console.log('configData changed:', newValue)
+        this.renderingComponent(newValue)
+      },
+      immediate: true
+    }
+  }
+}
+</script>
+
+<style scoped>
+.drawer {
+  position: relative;
+  height: 88vh;
+  width: 100%;
+  background-color: #fff;
+  border-left: solid rgba(240, 242, 245) 2px;
+  transition: all 0.3s;
+  border-radius: 10px;
+}
+
+.drawer-collapsed {
+  width: 24px;
+  box-shadow: none;
+}
+.drawer-toggle {
+  position: absolute;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 24px;
+  height: 48px;
+  background-color: #fff;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
+  transition: all 0.3s;
+}
+/* 打开状态：箭头在抽屉内 */
+.drawer:not(.drawer-collapsed) .drawer-toggle {
+  left: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+/* 关闭状态：箭头在抽屉内 */
+.drawer-collapsed .drawer-toggle {
+  left: 0;
+  border-radius: 0;
+  box-shadow: none;
+}
+.arrow {
+  font-size: 20px;
+  line-height: 1;
+  color: rgba(24, 144, 245);
+}
+.drawer-content {
+  height: 100%;
+  overflow-y: auto;
+  padding: 20px;
+  padding-left: 44px; /* 为开关留出空间 */
+}
+</style>

package/src/components/STable/index.js

@@ -1,426 +1,435 @@
-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>
-    )
-  }
-}
+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 () {
+      const themeColor = this.$store.state.setting.theme.color
+      return this.hexToRgba(themeColor || '#1890ff', 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, index) {
+      if (this.rowKey === '序号') {
+        this.clickedRowKey = index
+      } else {
+        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, index) => {
+      const isRowKeySequence = this.rowKey === '序号'
+      const isCurrentRow = isRowKeySequence
+        ? this.clickedRowKey === index
+        : this.clickedRowKey === record[this.rowKey]
+      console.log(record, index, this.rowKey, isCurrentRow)
+      return {
+        on: {
+          click: () => this.handleRowClick(record, index)
+        },
+        style: {
+          'background-color': isCurrentRow ? 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>
+    )
+  }
+}

package/src/router/async/router.map.js

@@ -56,10 +56,10 @@ routerResource.example = {
   // component: () => import('@vue2-client/base-client/components/common/XAddNativeForm/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XFormGroup/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XReport/XReportDemo.vue'),
-  // component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
+  component: () => import('@vue2-client/base-client/components/common/XFormTable/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XDatePicker/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XTab/XTabDemo.vue'),
-  component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
+  // component: () => import('@vue2-client/base-client/components/common/XRate/demo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XForm/demo.vue'),
   // component: () => import('@vue2-client/pages/WorkflowDetail/WorkFlowDemo.vue'),
   // component: () => import('@vue2-client/base-client/components/common/XConversation/XConversationDemo.vue'),