From aab0ce981c0f6d42ee3682154d83362613cd8e13 Mon Sep 17 00:00:00 2001 From: ruibaby Date: Thu, 18 Apr 2019 10:45:50 +0800 Subject: [PATCH] Components load on demand. --- src/components/Table/README.md | 333 ---------------------------- src/components/Table/index.js | 290 ------------------------ src/components/index.js | 2 - src/core/lazy_lib/components_use.js | 183 +++++++-------- src/core/lazy_use.js | 6 +- src/core/use.js | 3 - src/main.js | 3 +- 7 files changed, 99 insertions(+), 721 deletions(-) delete mode 100644 src/components/Table/README.md delete mode 100644 src/components/Table/index.js diff --git a/src/components/Table/README.md b/src/components/Table/README.md deleted file mode 100644 index 6db95403..00000000 --- a/src/components/Table/README.md +++ /dev/null @@ -1,333 +0,0 @@ -Table 重封装组件说明 -==== - - -封装说明 ----- - -> 基础的使用方式与 API 与 [官方版(Table)](https://vuecomponent.github.io/ant-design-vue/components/table-cn/) 本一致，在其基础上，封装了加载数据的方法。 -> -> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 Table 组件传递绑定 `:data="Promise"` 对象即可 - -该 `table` 由 [@Saraka](https://github.com/saraka-tsukai) 完成封装 - - -例子1 ----- -（基础使用） - -```vue - - - - - -``` - - - -例子2 ----- - -（简单的表格，最后一列是各种操作） - -```vue - - - -``` - - - -内置方法 ----- - -通过 `this.$refs.table` 调用 - -`this.$refs.table.refresh(true)` 刷新列表 (用户新增/修改数据后，重载列表数据) - -> 注意：要调用 `refresh(bool)` 需要给表格组件设定 `ref` 值 -> -> `refresh()` 方法可以传一个 `bool` 值，当有传值 或值为 `true` 时，则刷新时会强制刷新到第一页（常用户页面 搜索 按钮进行搜索时，结果从第一页开始分页） - - -内置属性 ----- -> 除去 `a-table` 自带属性外，还而外提供了一些额外属性属性 - - -| 属性 | 说明 | 类型 | 默认值 | -| -------------- | ----------------------------------------------- | ----------------- | ------ | -| alert | 设置是否显示表格信息栏 | [object, boolean] | null | -| showPagination | 显示分页选择器，可传 'auto' \| boolean | [string, boolean] | 'auto' | -| data | 加载数据方法 必须为 `Promise` 对象 **必须绑定** | Promise | - | - - -`alert` 属性对象： - -```javascript -alert: { - show: Boolean, - clear: [Function, Boolean] -} -``` - -注意事项 ----- - -> 你可能需要为了与后端提供的接口返回结果一致而去修改以下代码： -(需要注意的是，这里的修改是全局性的，意味着整个项目所有使用该 table 组件都需要遵守这个返回结果定义的字段。) - -修改 `@/components/table/index.js` 第 132 行起 - - - -```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 - }) - - // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页 - if (r.data.length == 0 && this.localPagination.current != 1) { - this.localPagination.current-- - this.loadData() - return - } - - // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false - // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能 - !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 -} -``` - - - -更新时间 ----- - -该文档最后更新于： 2019-01-21 AM 08:37 \ No newline at end of file diff --git a/src/components/Table/index.js b/src/components/Table/index.js deleted file mode 100644 index 535cd256..00000000 --- a/src/components/Table/index.js +++ /dev/null @@ -1,290 +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({}, this.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 - }, - size: { - type: String, - default: 'default' - }, - /** - * { - * 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' - } - }), - 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) { - Object.assign(this.localPagination, { - pageSize: val - }) - }, - 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: { - /** - * 表格重新加载方法 - * 如果参数为 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 - const parameter = Object.assign({ - pageNo: (pagination && pagination.current) || - this.localPagination.current || this.pageNum, - pageSize: (pagination && pagination.pageSize) || - this.localPagination.pageSize || this.pageSize - }, - (sorter && sorter.field && { - sortField: sorter.field - }) || {}, - (sorter && sorter.order && { - sortOrder: sorter.order - }) || {}, { - ...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 = Object.assign({}, this.localPagination, { - current: r.pageNo, // 返回结果中的当前分页数 - total: r.totalCount, // 返回结果中的总记录数 - showSizeChanger: this.showSizeChanger, - pageSize: (pagination && pagination.pageSize) || - this.localPagination.pageSize - }) - // 为防止删除数据后导致页面当前页面数据长度为 0 ,自动翻页到上一页 - if (r.data.length === 0 && this.localPagination.current !== 1) { - this.localPagination.current-- - this.loadData() - return - } - - // 这里用于判断接口是否有返回 r.totalCount 或 this.showPagination = false - // 当情况满足时，表示数据不满足分页大小，关闭 table 分页功能 - - (!this.showPagination || !r.totalCount && this.showPagination === 'auto') && (this.localPagination.hideOnSinglePage = true) - 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 - }, - /** - * 用于更新已选中的列表数据 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 ( - { - callback() - this.clearSelected() - }}>清空 - ) - }, - renderAlert() { - // 绘制统计列数据 - const needTotalItems = this.needTotalList.map((item) => { - return ( - {item.title}总计 {!item.customRender ? item.total : item.customRender(item.total)} - ) - }) - - // 绘制 清空 按钮 - const clearItem = (typeof this.alert.clear === 'boolean' && this.alert.clear) ? ( - this.renderClear(this.clearSelected) - ) : (this.alert !== null && typeof this.alert.clear === 'function') ? ( - this.renderClear(this.alert.clear) - ) : null - - // 绘制 alert 组件 - return ( - - - - ) - } - }, - - 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] = { - 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] - } - } - props[k] = this[k] - return props[k] - }) - const table = ( - - { Object.keys(this.$slots).map(name => ()) } - - ) - - return ( -
- { showAlert ? this.renderAlert() : null } - { table } -
- ) - } -} diff --git a/src/components/index.js b/src/components/index.js index 0efcdf73..be59b47e 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -6,7 +6,6 @@ import NumberInfo from '@/components/NumberInfo' import DescriptionList from '@/components/DescriptionList' import Tree from '@/components/Tree/Tree' import Trend from '@/components/Trend' -import STable from '@/components/Table' import MultiTab from '@/components/MultiTab' import Result from '@/components/Result' import ExceptionPage from '@/components/Exception' @@ -20,7 +19,6 @@ export { DescriptionList, DescriptionList as DetailList, Tree, - STable, MultiTab, Result, ExceptionPage diff --git a/src/core/lazy_lib/components_use.js b/src/core/lazy_lib/components_use.js index cd44520e..5f654bbe 100644 --- a/src/core/lazy_lib/components_use.js +++ b/src/core/lazy_lib/components_use.js @@ -1,98 +1,103 @@ /* eslint-disable */ -/** - * 该文件是为了按需加载，剔除掉了一些不需要的框架组件。 - * 减少了编译支持库包大小 - * - * 当需要更多组件依赖时，在该文件加入即可 - */ import Vue from 'vue' import { - LocaleProvider, - Layout, + Anchor, + AutoComplete, + Alert, + Avatar, + Badge, + Breadcrumb, + Button, + Card, + Collapse, + Checkbox, + Col, + DatePicker, + Divider, + Dropdown, + Form, + Icon, Input, InputNumber, - Button, - Switch, - Radio, - Checkbox, - Select, - Card, - Form, - Row, - Col, - Modal, - Table, - Tabs, - Icon, - Badge, - Popover, - Dropdown, + Layout, List, - Avatar, - Breadcrumb, - Steps, - Spin, - Menu, - Drawer, - Tooltip, - Alert, - Tag, - Divider, - DatePicker, - TimePicker, - Upload, - Progress, - Skeleton, - Popconfirm, + LocaleProvider, message, - notification -} from 'ant-design-vue' -// import VueCropper from 'vue-cropper' + Menu, + Modal, + notification, + Pagination, + Popconfirm, + Popover, + Progress, + Radio, + Row, + Select, + Spin, + Switch, + Table, + Tree, + TreeSelect, + Tabs, + Tag, + TimePicker, + Tooltip, + Upload, + Drawer, + Skeleton, + Comment, + ConfigProvider, +} from 'ant-design-vue'; -Vue.use(LocaleProvider) -Vue.use(Layout) -Vue.use(Input) -Vue.use(InputNumber) -Vue.use(Button) -Vue.use(Switch) -Vue.use(Radio) -Vue.use(Checkbox) -Vue.use(Select) -Vue.use(Card) -Vue.use(Form) -Vue.use(Row) -Vue.use(Col) -Vue.use(Modal) -Vue.use(Table) -Vue.use(Tabs) -Vue.use(Icon) -Vue.use(Badge) -Vue.use(Popover) -Vue.use(Dropdown) -Vue.use(List) -Vue.use(Avatar) -Vue.use(Breadcrumb) -Vue.use(Steps) -Vue.use(Spin) -Vue.use(Menu) -Vue.use(Drawer) -Vue.use(Tooltip) -Vue.use(Alert) -Vue.use(Tag) -Vue.use(Divider) -Vue.use(DatePicker) -Vue.use(TimePicker) -Vue.use(Upload) -Vue.use(Progress) -Vue.use(Skeleton) -Vue.use(Popconfirm) -// Vue.use(VueCropper) -Vue.use(notification) +Vue.use(Anchor); +Vue.use(AutoComplete); +Vue.use(Alert); +Vue.use(Avatar); +Vue.use(Badge); +Vue.use(Breadcrumb); +Vue.use(Button); +Vue.use(Card); +Vue.use(Collapse); +Vue.use(Checkbox); +Vue.use(Col); +Vue.use(DatePicker); +Vue.use(Divider); +Vue.use(Drawer); +Vue.use(Dropdown); +Vue.use(Form); +Vue.use(Icon); +Vue.use(Input); +Vue.use(InputNumber); +Vue.use(Layout); +Vue.use(List); +Vue.use(LocaleProvider); +Vue.use(Menu); +Vue.use(Modal); +Vue.use(Pagination); +Vue.use(Popconfirm); +Vue.use(Popover); +Vue.use(Progress); +Vue.use(Radio); +Vue.use(Row); +Vue.use(Select); +Vue.use(Spin); +Vue.use(Switch); +Vue.use(Table); +Vue.use(Tree); +Vue.use(TreeSelect); +Vue.use(Tabs); +Vue.use(Tag); +Vue.use(TimePicker); +Vue.use(Tooltip); +Vue.use(Upload); +Vue.use(Skeleton); +Vue.use(Comment); +Vue.use(ConfigProvider); -Vue.prototype.$confirm = Modal.confirm -Vue.prototype.$message = message -Vue.prototype.$notification = notification -Vue.prototype.$info = Modal.info -Vue.prototype.$success = Modal.success -Vue.prototype.$error = Modal.error -Vue.prototype.$warning = Modal.warning +Vue.prototype.$message = message; +Vue.prototype.$notification = notification; +Vue.prototype.$info = Modal.info; +Vue.prototype.$success = Modal.success; +Vue.prototype.$error = Modal.error; +Vue.prototype.$warning = Modal.warning; +Vue.prototype.$confirm = Modal.confirm; diff --git a/src/core/lazy_use.js b/src/core/lazy_use.js index d8392d62..6d7dd3e1 100644 --- a/src/core/lazy_use.js +++ b/src/core/lazy_use.js @@ -5,10 +5,12 @@ import config from '@/config/defaultSettings' // base library import '@/core/lazy_lib/components_use' import Viser from 'viser-vue' +import VueCropper from 'vue-cropper' +import 'ant-design-vue/dist/antd.less' +import '../style/main.less' // ext library import VueClipboard from 'vue-clipboard2' -// import PermissionHelper from '@/utils/helper/permission' VueClipboard.config.autoSetContainer = true @@ -16,4 +18,4 @@ Vue.use(Viser) Vue.use(VueStorage, config.storageOptions) Vue.use(VueClipboard) -// Vue.use(PermissionHelper) +Vue.use(VueCropper) diff --git a/src/core/use.js b/src/core/use.js index c4b34cb8..bb9eed3b 100644 --- a/src/core/use.js +++ b/src/core/use.js @@ -11,8 +11,6 @@ import '../style/main.less' // ext library import VueClipboard from 'vue-clipboard2' -// import PermissionHelper from '@/utils/helper/permission' -// import '@/components/use' VueClipboard.config.autoSetContainer = true @@ -21,5 +19,4 @@ Vue.use(Viser) Vue.use(VueStorage, config.storageOptions) Vue.use(VueClipboard) -// Vue.use(PermissionHelper) Vue.use(VueCropper) diff --git a/src/main.js b/src/main.js index 3aed4b83..ddef4d91 100644 --- a/src/main.js +++ b/src/main.js @@ -5,9 +5,8 @@ import router from './router' import store from './store/' import './logger' -import './core/use' +import './core/lazy_use' import bootstrap from './core/bootstrap' -// import '@/permission' // permission control import '@/utils/filter' // global filter import animated from 'animate.css'