From bcb0016168921235248dec6dd551be3c39bc23a8 Mon Sep 17 00:00:00 2001 From: zer0Black Date: Thu, 25 Mar 2021 17:41:16 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E4=BF=AE=E6=94=B9=E3=80=91STable=20re?= =?UTF-8?q?place=20JTable?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../{table/jTable.vue => jero/JTable.vue} | 0 .../src/components/onlineForm/onlineForm.js | 2 +- jero-web/src/components/table/README.md | 292 ------------------ .../src/components/table/StandardTable.vue | 252 --------------- jero-web/src/components/table/index.js | 269 ---------------- jero-web/src/config/router.config.js | 4 - .../jtable1.vue => demo/list/JTableDemo.vue} | 2 +- .../src/views/demo/list/PermissionList.vue | 8 +- jero-web/src/views/demo/list/RoleList.vue | 8 +- .../views/demo/list/TableInnerEditList.vue | 8 +- jero-web/src/views/demo/list/TableList.vue | 8 +- jero-web/src/views/demo/list/UserList.vue | 8 +- .../src/views/demo/profile/basic/Index.vue | 20 +- 13 files changed, 32 insertions(+), 849 deletions(-) rename jero-web/src/components/{table/jTable.vue => jero/JTable.vue} (100%) delete mode 100644 jero-web/src/components/table/README.md delete mode 100644 jero-web/src/components/table/StandardTable.vue delete mode 100644 jero-web/src/components/table/index.js rename jero-web/src/views/{jero/jtable1.vue => demo/list/JTableDemo.vue} (99%) diff --git a/jero-web/src/components/table/jTable.vue b/jero-web/src/components/jero/JTable.vue similarity index 100% rename from jero-web/src/components/table/jTable.vue rename to jero-web/src/components/jero/JTable.vue diff --git a/jero-web/src/components/onlineForm/onlineForm.js b/jero-web/src/components/onlineForm/onlineForm.js index 308e100e..86860902 100644 --- a/jero-web/src/components/onlineForm/onlineForm.js +++ b/jero-web/src/components/onlineForm/onlineForm.js @@ -24110,7 +24110,7 @@ tab: "报表参数", forceRender: !0 } - }, [n("report-params-table", { + }, [n("report-paramj-table", { ref: "table2", attrs: { loading: e.confirmLoading, diff --git a/jero-web/src/components/table/README.md b/jero-web/src/components/table/README.md deleted file mode 100644 index ad5f6413..00000000 --- a/jero-web/src/components/table/README.md +++ /dev/null @@ -1,292 +0,0 @@ -Table 重封装组件说明 -==== - - -封装说明 ----- - -> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。 -> -> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可 - - - -例子1 ----- -（基础使用） - -```vue - - - - - -``` - - - -例子2 ----- - -（简单的表格，最后一列是各种操作） - -```vue - - - -``` - - - -内置方法 ----- - -通过 `this.$refs.table` 调用 - -`this.$refs.table.refresh()` 刷新列表 (用户新增/修改数据后，重载列表数据) - -> 注意：要调用 `refresh()` 需要给表格组件设定 `ref` 值 - - - -注意事项 ----- - -> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码： -(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。) - -修改 `@/components/table/index.js` 第 106 行起 - - - -```javascript -result.then(r => { - this.localPagination = Object.assign({}, this.localPagination, { - current: r.pageNo, // 返回结果中的当前分页数 - total: r.totalCount, // 返回结果中的总记录数 - showSizeChanger: this.showSizeChanger, - pageSize: (pagination && pagination.pageSize) || - this.localPagination.pageSize - }); - - !r.totalCount && ['auto', false].includes(this.showPagination) && (this.localPagination = false) - this.localDataSource = r.data; // 返回结果中的数组数据 - this.localLoading = false -}); -``` -返回 JSON 例子： -```json -{ - "message": "", - "result": { - "data": [{ - id: 1, - cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png', - title: 'Alipay', - description: '那是一种内在的东西， 他们到达不了，也无法触及的', - status: 1, - updatedAt: '2018-07-26 00:00:00' - }, - { - id: 2, - cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png', - title: 'Angular', - description: '希望是一个好东西，也许是最好的，好东西是不会消亡的', - status: 1, - updatedAt: '2018-07-26 00:00:00' - }, - { - id: 3, - cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png', - title: 'Ant Design', - description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆', - status: 1, - updatedAt: '2018-07-26 00:00:00' - }, - { - id: 4, - cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png', - title: 'Ant Design Pro', - description: '那时候我只会想自己想要什么，从不想自己拥有什么', - status: 1, - updatedAt: '2018-07-26 00:00:00' - }, - { - id: 5, - cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png', - title: 'Bootstrap', - description: '凛冬将至', - status: 1, - updatedAt: '2018-07-26 00:00:00' - }, - { - id: 6, - cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png', - title: 'Vue', - description: '生命就像一盒巧克力，结果往往出人意料', - status: 1, - updatedAt: '2018-07-26 00:00:00' - } - ], - "pageSize": 10, - "pageNo": 0, - "totalPage": 6, - "totalCount": 57 - }, - "status": 200, - "timestamp": 1534955098193 -} -``` - - - -更新时间 ----- - -该文档最后更新于： 2018-10-31 PM 08:15 \ No newline at end of file diff --git a/jero-web/src/components/table/StandardTable.vue b/jero-web/src/components/table/StandardTable.vue deleted file mode 100644 index bc6044ac..00000000 --- a/jero-web/src/components/table/StandardTable.vue +++ /dev/null @@ -1,252 +0,0 @@ - - - - - \ No newline at end of file diff --git a/jero-web/src/components/table/index.js b/jero-web/src/components/table/index.js deleted file mode 100644 index ffb65110..00000000 --- a/jero-web/src/components/table/index.js +++ /dev/null @@ -1,269 +0,0 @@ -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({}, T.props.pagination) - }; - }, - props: Object.assign({}, T.props, { - rowKey: { - type: [String, Function], - default: 'id' - }, - data: { - type: Function, - required: true - }, - pageNum: { - type: Number, - default: 1 - }, - pageSize: { - type: Number, - default: 10 - }, - showSizeChanger: { - type: Boolean, - default: true - }, - showAlertInfo: { - type: Boolean, - default: false - }, - showPagination: { - default: 'auto' - } - }), - watch: { - 'localPagination.current'(val) { - this.$router.push({ - name: this.$route.name, - params: Object.assign({}, this.$route.params, { - pageNo: val - }), - }); - }, - pageNum(val) { - Object.assign(this.localPagination, { - current: val - }); - }, - pageSize(val) { - console.log('pageSize:', val) - Object.assign(this.localPagination, { - pageSize: val - }); - }, - showSizeChanger(val) { - console.log('showSizeChanger', val) - Object.assign(this.localPagination, { - showSizeChanger: val - }); - } - }, - created() { - this.localPagination = ['auto', true].includes(this.showPagination) && Object.assign({}, this.localPagination, { - current: this.pageNum, - pageSize: this.pageSize, - showSizeChanger: this.showSizeChanger - }); - this.needTotalList = this.initTotalList(this.columns) - this.loadData(); - }, - methods: { - refresh() { - this.loadData(); - }, - loadData(pagination, filters, sorter) { - - this.localLoading = true - var result = this.data( - Object.assign({ - pageNo: (pagination && pagination.current) || - this.localPagination.current, - pageSize: (pagination && pagination.pageSize) || - this.localPagination.pageSize - }, - (sorter && sorter.field && { - sortField: sorter.field - }) || {}, - (sorter && sorter.order && { - sortOrder: sorter.order - }) || {}, { - ...filters - } - ) - ); - - if (result instanceof Promise) { - result.then(r => { - this.localPagination = Object.assign({}, this.localPagination, { - current: r.pageNo, // 返回结果中的当前分页数 - total: r.totalCount, // 返回结果中的总记录数 - showSizeChanger: this.showSizeChanger, - pageSize: (pagination && pagination.pageSize) || - this.localPagination.pageSize - }); - //update--begin--autor:wangshuai-----date:20200724------for：判断showPagination是否为false------ - (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination = false) - //update--end--autor:wangshuai-----date:20200724------for：判断showPagination是否为false----- - this.localDataSource = r.data; // 返回结果中的数组数据 - this.localLoading = false - }); - } - }, - initTotalList(columns) { - const totalList = [] - columns && columns instanceof Array && columns.forEach(column => { - if (column.needTotal) { - totalList.push({ ...column, - total: 0 - }) - } - }) - return totalList - }, - updateSelect(selectedRowKeys, selectedRows) { - this.selectedRowKeys = selectedRowKeys - this.selectedRows = selectedRows - let list = this.needTotalList - this.needTotalList = list.map(item => { - return { - ...item, - total: selectedRows.reduce((sum, val) => { - let total = sum + get(val, item.dataIndex) - return isNaN(total) ? 0 : total - }, 0) - } - }) - // this.$emit('change', selectedRowKeys, selectedRows) - }, - updateEdit() { - this.selectedRows = [] - }, - onClearSelected() { - // 【TESTA-262】页面清空后还能才做所选行，增加 this.$emit('clearAll') - this.selectedRowKeys = [] - this.selectedRows = [] - this.updateSelect([], []) - this.$emit('clearAll') - }, - renderMsg(h) { - const _vm = this - let d = [] - // 构建 已选择 - d.push( - h('span', { - style: { - marginRight: '12px' - } - }, ['已选择 ', h('a', { - style: { - fontWeight: 600 - } - }, this.selectedRows.length)]) - ); - - // 构建 列统计 - this.needTotalList.map(item => { - d.push(h('span', { - style: { - marginRight: '12px' - } - }, - [ - `${ item.title }总计 `, - h('a', { - style: { - fontWeight: 600 - } - }, `${ !item.customRender ? item.total : item.customRender(item.total) }`) - ])) - }); - - // 构建 清空选择 - d.push(h('a', { - style: { - marginLeft: '24px' - }, - on: { - click: _vm.onClearSelected - } - }, '清空')) - - return d - }, - renderAlert(h) { - return h('span', { - slot: 'message' - }, this.renderMsg(h)) - }, - }, - - render(h) { - const _vm = this - - let props = {}, - localKeys = Object.keys(this.$data); - - Object.keys(T.props).forEach(k => { - let localKey = `local${k.substring(0,1).toUpperCase()}${k.substring(1)}`; - if (localKeys.includes(localKey)) { - return props[k] = _vm[localKey]; - } - return props[k] = _vm[k]; - }) - - - // 显示信息提示 - if (this.showAlertInfo) { - - props.rowSelection = { - selectedRowKeys: this.selectedRowKeys, - onChange: (selectedRowKeys, selectedRows) => { - _vm.updateSelect(selectedRowKeys, selectedRows) - _vm.$emit('onSelect', { selectedRowKeys: selectedRowKeys, selectedRows: selectedRows }) - } - }; - - return h('div', {}, [ - h("a-alert", { - style: { - marginBottom: '16px' - }, - props: { - type: 'info', - showIcon: true - } - }, [_vm.renderAlert(h)]), - h("a-table", { - tag: "component", - attrs: props, - on: { - change: _vm.loadData - }, - scopedSlots: this.$scopedSlots - }, this.$slots.default) - ]); - - } - - return h("a-table", { - tag: "component", - attrs: props, - on: { - change: _vm.loadData - }, - scopedSlots: this.$scopedSlots - }, this.$slots.default); - - } -}; \ No newline at end of file diff --git a/jero-web/src/config/router.config.js b/jero-web/src/config/router.config.js index 1ca9f4cd..30d38365 100644 --- a/jero-web/src/config/router.config.js +++ b/jero-web/src/config/router.config.js @@ -359,10 +359,6 @@ export const constantRouterMap = [ } ] }, - { - path: '/jtable', - component: () => import(/* webpackChunkName: "fail" */ '@/views/jero/jtable1') - }, { path: '/404', component: () => import(/* webpackChunkName: "fail" */ '@/views/exception/404') diff --git a/jero-web/src/views/jero/jtable1.vue b/jero-web/src/views/demo/list/JTableDemo.vue similarity index 99% rename from jero-web/src/views/jero/jtable1.vue rename to jero-web/src/views/demo/list/JTableDemo.vue index 20a1eae9..8dcd76f9 100644 --- a/jero-web/src/views/jero/jtable1.vue +++ b/jero-web/src/views/demo/list/JTableDemo.vue @@ -13,7 +13,7 @@