From 3619242076500edcfd395dced62961c896406b62 Mon Sep 17 00:00:00 2001 From: chenghongxing <1126263215@qq.com> Date: Mon, 5 Oct 2020 16:48:50 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20add=20document=20for=20AdvanceTable.vue?= =?UTF-8?q?;=20:bug:=20=E6=96=B0=E5=A2=9E=EF=BC=9A=E7=BB=99=20AdvanceTable?= =?UTF-8?q?.vue=20=E5=A2=9E=E5=8A=A0=E8=AF=B4=E6=98=8E=E6=96=87=E6=A1=A3?= =?UTF-8?q?=EF=BC=9B?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 11 +- .../table/advance/ActionColumns.vue | 15 +- src/components/table/advance/AdvanceTable.vue | 23 +-- src/components/table/advance/SearchArea.vue | 160 +++++++++++------- src/components/table/api/ApiTable.vue | 49 ++++++ src/mock/extend/index.js | 5 + src/mock/goods/index.js | 51 ++++++ src/mock/index.js | 3 +- src/pages/components/table/Api.vue | 152 +++++++++++++++++ src/pages/components/{ => table}/Table.vue | 118 +++++++------ src/pages/components/table/index.js | 2 + src/router/config.js | 4 +- src/services/api.js | 3 +- src/services/dataSource.js | 8 + src/services/index.js | 4 +- src/utils/request.js | 25 ++- yarn.lock | 5 + 17 files changed, 488 insertions(+), 150 deletions(-) create mode 100644 src/components/table/api/ApiTable.vue create mode 100644 src/mock/goods/index.js create mode 100644 src/pages/components/table/Api.vue rename src/pages/components/{ => table}/Table.vue (53%) create mode 100644 src/pages/components/table/index.js create mode 100644 src/services/dataSource.js diff --git a/package.json b/package.json index 3112105b..22b25645 100644 --- a/package.json +++ b/package.json @@ -22,15 +22,16 @@ "core-js": "^3.6.5", "date-fns": "^2.14.0", "enquire.js": "^2.1.6", + "highlight.js": "^10.2.1", "js-cookie": "^2.2.1", "mockjs": "^1.1.0", + "nprogress": "^0.2.0", "viser-vue": "^2.4.8", "vue": "^2.6.11", "vue-i18n": "^8.18.2", "vue-router": "^3.3.4", "vuedraggable": "^2.23.2", - "vuex": "^3.4.0", - "nprogress": "^0.2.0" + "vuex": "^3.4.0" }, "devDependencies": { "@ant-design/colors": "^4.0.1", @@ -39,7 +40,9 @@ "@vue/cli-service": "^4.4.0", "@vuepress/plugin-back-to-top": "^1.5.2", "babel-eslint": "^10.1.0", + "babel-plugin-transform-remove-console": "^6.9.4", "babel-polyfill": "^6.26.0", + "compression-webpack-plugin": "^2.0.0", "deepmerge": "^4.2.2", "eslint": "^6.7.2", "eslint-plugin-vue": "^6.2.2", @@ -51,9 +54,7 @@ "vue-template-compiler": "^2.6.11", "vuepress": "^1.5.2", "webpack-theme-color-replacer": "^1.3.12", - "whatwg-fetch": "^3.0.0", - "compression-webpack-plugin": "^2.0.0", - "babel-plugin-transform-remove-console": "^6.9.4" + "whatwg-fetch": "^3.0.0" }, "eslintConfig": { "root": true, diff --git a/src/components/table/advance/ActionColumns.vue b/src/components/table/advance/ActionColumns.vue index 667c3d8e..8e357c4b 100644 --- a/src/components/table/advance/ActionColumns.vue +++ b/src/components/table/advance/ActionColumns.vue @@ -1,6 +1,5 @@ @@ -28,7 +27,6 @@ - @@ -87,12 +85,14 @@ }, setSearch(col) { this.$set(col, 'searchAble', !col.searchAble) + console.log(col) if (!col.searchAble && col.search) { this.resetSearch(col) } }, resetSearch(col) { - col.search.value = col.dataType === 'boolean' ? false : undefined + // col.search.value = col.dataType === 'boolean' ? false : undefined + col.search.value = undefined col.search.backup = undefined }, resetColumns() { @@ -114,7 +114,8 @@ } else { this.$set(column, 'fixed', undefined) } - column.searchAble = back.searchAble + this.$set(column, 'searchAble', back.searchAble) + // column.searchAble = back.searchAble this.resetSearch(column) }) this.checkedCounts = counts diff --git a/src/components/table/advance/AdvanceTable.vue b/src/components/table/advance/AdvanceTable.vue index 1dd73a21..3f180d69 100644 --- a/src/components/table/advance/AdvanceTable.vue +++ b/src/components/table/advance/AdvanceTable.vue @@ -8,7 +8,7 @@
- + @@ -19,11 +19,13 @@ - - - + + + + + @@ -85,7 +87,8 @@ customHeaderRow: Function, customRow: Function, getPopupContainer: Function, - transformCellText: Function + transformCellText: Function, + formatConditions: Boolean }, provide() { return { @@ -97,7 +100,7 @@ id: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`, sSize: this.size || 'default', fullScreen: false, - conditions: [] + conditions: {} } }, computed: { @@ -118,9 +121,9 @@ refresh() { this.$emit('refresh', this.conditions) }, - onSearchChange(conditions) { + onSearchChange(conditions, searchOptions) { this.conditions = conditions - this.$emit('search', conditions) + this.$emit('search', conditions, searchOptions) }, toggleScreen() { if (this.fullScreen) { diff --git a/src/components/table/advance/SearchArea.vue b/src/components/table/advance/SearchArea.vue index e611b95b..35561586 100644 --- a/src/components/table/advance/SearchArea.vue +++ b/src/components/table/advance/SearchArea.vue @@ -2,35 +2,36 @@
-
+
- + +
-
+
- +
-
+
- +
- +
-
+
@@ -38,23 +39,24 @@
- -
+
+ -
:  {{col | searchValue}}
- -
-
- 取消 - 确认 -
-
- -
- +
:  {{col.search.format && typeof col.search.format === 'function' ? col.search.format(col.search.value) : col.search.value}}
+ +
+ 取消 + 确认 +
+
+ +
+ + +
@@ -65,35 +67,31 @@ export default { name: 'SearchArea', - props: ['columns'], + props: ['columns', 'formatConditions'], inject: ['table'], created() { this.columns.forEach(item => { - this.$set(item, 'search', {...item.search, visible: false, value: item.dataType === 'boolean' ? false : undefined, format: this.getCalendarFormat(item)}) + this.$set(item, 'search', {...item.search, visible: false, value: undefined, format: this.getFormat(item)}) }) - }, - filters: { - searchValue(col) { - if (col.dataType === 'time' && col.search.value) { - return col.search.value.format('HH:mm:ss') - } - return col.search.value - } + console.log(this.columns) }, watch: { searchCols(newVal, oldVal) { if (newVal.length != oldVal.length) { const newConditions = this.getConditions(newVal) + const newSearchOptions = this.getSearchOptions(newVal) if (!fastEqual(newConditions, this.conditions)) { this.conditions = newConditions - this.$emit('change', this.conditions) + this.searchOptions = newSearchOptions + this.$emit('change', this.conditions, this.searchOptions) } } } }, data() { return { - conditions: [] + conditions: {}, + searchOptions: [] } }, computed: { @@ -105,72 +103,99 @@ } }, methods: { + onCloseClick(e, col) { + e.preventDefault() + e.stopPropagation() + col.search.value = undefined + const {backup, value} = col.search + if (backup !== value) { + this.backupAndEmitChange(col) + } + }, onCancel(col) { col.search.value = col.search.backup col.search.visible = false }, onConfirm(col) { - col.search.backup = col.search.value + const {backup, value} = col.search col.search.visible = false - const conditions = this.getConditions(this.searchCols) - if (!fastEqual(conditions, this.conditions)) { - this.conditions = conditions - this.$emit('change', this.conditions) + if (backup !== value) { + this.backupAndEmitChange(col) } }, - onSwitchChange() { - this.conditions = this.getConditions(this.searchCols) - this.$emit('change', this.conditions) + onSwitchChange(col) { + const {backup, value} = col.search + if (backup !== value) { + this.backupAndEmitChange(col) + } }, - onSelectChange() { - this.conditions = this.getConditions(this.searchCols) - this.$emit('change', this.conditions) + onSelectChange(col) { + this.backupAndEmitChange(col) }, onCalendarOpenChange(open, col) { col.search.visible = open - const {momentEqual, getConditions} = this + const {momentEqual, backupAndEmitChange} = this const {value, backup, format} = col.search if (!open && !momentEqual(value, backup, format)) { - col.search.backup = moment(value) - this.conditions = getConditions(this.searchCols) - this.$emit('change', this.conditions) + backupAndEmitChange(col, moment(value)) } }, onCalendarChange(date, dateStr, col) { - const {momentEqual, getConditions} = this + const {momentEqual, backupAndEmitChange} = this const {value, backup, format} = col.search if (!col.search.visible && !momentEqual(value, backup, format)) { - col.search.backup = moment(value) - this.conditions = getConditions(this.searchCols) - this.$emit('change', this.conditions) + backupAndEmitChange(col, moment(value)) } }, onDateChange(col) { - const {momentEqual, getConditions} = this - const {value, backup} = col.search - if (!momentEqual(value, backup, 'YYYY-MM-DD')) { - col.search.backup = moment(value) - this.conditions = getConditions(this.searchCols) - this.$emit('change', this.conditions) + const {momentEqual, backupAndEmitChange} = this + const {value, backup, format} = col.search + if (!momentEqual(value, backup, format)) { + backupAndEmitChange(col, moment(value)) } }, - getCalendarFormat(col) { + getFormat(col) { + if (col.search && col.search.format) { + return col.search.format + } const dataType = col.dataType switch(dataType) { case 'time': return 'HH:mm:ss' case 'date': return 'YYYY-MM-DD' case 'datetime': return 'YYYY-MM-DD HH:mm:ss' - default: return col.search && col.search.format + default: return undefined } }, + backupAndEmitChange(col, backValue = col.search.value) { + const {getConditions, getSearchOptions} = this + col.search.backup = backValue + this.conditions = getConditions(this.searchCols) + this.searchOptions = getSearchOptions(this.searchCols) + this.$emit('change', this.conditions, this.searchOptions) + }, getConditions(columns) { const conditions = {} columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null) .forEach(col => { - conditions[col.dataIndex] = col.search.value + const {value, format} = col.search + if (this.formatConditions && format) { + if (typeof format === 'function') { + conditions[col.dataIndex] = format(col.search.value) + } else if (typeof format === 'string' && value.constructor.name === 'Moment') { + conditions[col.dataIndex] = value.format(format) + } else { + conditions[col.dataIndex] = value + } + } else { + conditions[col.dataIndex] = value + } }) return conditions }, + getSearchOptions(columns) { + return columns.filter(item => item.search.value !== undefined && item.search.value !== '' && item.search.value !== null) + .map(({dataIndex, search}) => ({field: dataIndex, value: search.value, format: search.format})) + }, onVisibleChange(col, index) { if (!col.search.visible) { col.search.value = col.search.backup @@ -214,6 +239,15 @@ user-select: none; display: inline-flex; align-items: center; + .close{ + color: @text-color-second; + margin-left: 4px; + font-size: 12px; + vertical-align: middle; + :hover{ + color: @text-color; + } + } .switch{ margin-left: 4px; } @@ -233,6 +267,7 @@ display: inline-block; overflow: hidden; flex:1; + vertical-align: middle; max-width: 144px; text-overflow: ellipsis; word-break: break-all; @@ -243,7 +278,7 @@ } } .icon-down{ - margin-left: 4px; + vertical-align: middle; font-size: 12px; } } @@ -259,6 +294,7 @@ } .operations{ display: flex; + margin: -6px 0; justify-content: space-between; .btn{ } diff --git a/src/components/table/api/ApiTable.vue b/src/components/table/api/ApiTable.vue new file mode 100644 index 00000000..1a73ecaa --- /dev/null +++ b/src/components/table/api/ApiTable.vue @@ -0,0 +1,49 @@ + + + + + \ No newline at end of file diff --git a/src/mock/extend/index.js b/src/mock/extend/index.js index b3741a69..769dc7f8 100644 --- a/src/mock/extend/index.js +++ b/src/mock/extend/index.js @@ -50,6 +50,8 @@ const welcomeMessages = [ } ] +const goods = ['运动鞋', '短裤', 'T恤', '七分裤', '风衣', '寸衫'] + Random.extend({ admin () { return this.pick(admins) @@ -69,6 +71,9 @@ Random.extend({ position () { return this.pick(positions) }, + goods () { + return this.pick(goods) + }, saying () { return this.pick(sayings) }, diff --git a/src/mock/goods/index.js b/src/mock/goods/index.js new file mode 100644 index 00000000..4bdfa175 --- /dev/null +++ b/src/mock/goods/index.js @@ -0,0 +1,51 @@ +import Mock from 'mockjs' +import '@/mock/extend' +import {parseUrlParams} from '@/utils/request' + +const current = new Date().getTime() + +const goodsList = Mock.mock({ + 'list|100': [{ + 'id|+1': 0, + 'name': '@GOODS', + 'orderId': `${current}-@integer(1,100)`, + 'status|1-4': 1, + 'send': '@BOOLEAN', + 'sendTime': '@DATETIME', + 'orderDate': '@DATE', + 'auditTime': '@TIME' + }] +}) + +Mock.mock(RegExp(`${process.env.VUE_APP_API_BASE_URL}/goods` + '.*'),'get', ({url}) => { + const params = parseUrlParams(decodeURI(url)) + let {page, pageSize} = params + page = eval(page) - 1 || 0 + pageSize = eval(pageSize) || 10 + delete params.page + delete params.pageSize + let result = goodsList.list.filter(item => { + for (let [key, value] of Object.entries(params)) { + if (item[key] != value) { + return false + } + } + return true + }) + const total = result.length + if ((page) * pageSize > total) { + result = [] + } else { + result = result.slice(page * pageSize, (page + 1) * pageSize) + } + return { + code: 0, + message: 'success', + data: { + page: page + 1, + pageSize, + total, + list: result + } + } +}) \ No newline at end of file diff --git a/src/mock/index.js b/src/mock/index.js index dc180beb..5a1ed69e 100644 --- a/src/mock/index.js +++ b/src/mock/index.js @@ -4,8 +4,9 @@ import '@/mock/project' import '@/mock/user/login' import '@/mock/workplace' import '@/mock/user/routes' +import '@/mock/goods' // 设置全局延时 Mock.setup({ - timeout: '300-600' + timeout: '200-400' }) diff --git a/src/pages/components/table/Api.vue b/src/pages/components/table/Api.vue new file mode 100644 index 00000000..505c6496 --- /dev/null +++ b/src/pages/components/table/Api.vue @@ -0,0 +1,152 @@ + + + + + \ No newline at end of file diff --git a/src/pages/components/Table.vue b/src/pages/components/table/Table.vue similarity index 53% rename from src/pages/components/Table.vue rename to src/pages/components/table/Table.vue index 87cc41d2..7625a107 100644 --- a/src/pages/components/Table.vue +++ b/src/pages/components/table/Table.vue @@ -1,5 +1,5 @@ - \ No newline at end of file diff --git a/src/pages/components/table/index.js b/src/pages/components/table/index.js new file mode 100644 index 00000000..d6c5b8e6 --- /dev/null +++ b/src/pages/components/table/index.js @@ -0,0 +1,2 @@ +import Table from './Table' +export default Table \ No newline at end of file diff --git a/src/router/config.js b/src/router/config.js index cac44b5c..34bf0981 100644 --- a/src/router/config.js +++ b/src/router/config.js @@ -193,7 +193,7 @@ const options = { }, { path: 'components', - name: '小组件', + name: '内置组件', meta: { icon: 'appstore-o' }, @@ -212,7 +212,7 @@ const options = { { path: 'table', name: '高级表格', - component: () => import('@/pages/components/Table') + component: () => import('@/pages/components/table') } ] }, diff --git a/src/services/api.js b/src/services/api.js index a5d1d406..26eee91e 100644 --- a/src/services/api.js +++ b/src/services/api.js @@ -4,5 +4,6 @@ const BASE_URL = process.env.VUE_APP_API_BASE_URL module.exports = { LOGIN: `${BASE_URL}/login`, - ROUTES: `${BASE_URL}/routes` + ROUTES: `${BASE_URL}/routes`, + GOODS: `${BASE_URL}/goods`, } diff --git a/src/services/dataSource.js b/src/services/dataSource.js new file mode 100644 index 00000000..18461898 --- /dev/null +++ b/src/services/dataSource.js @@ -0,0 +1,8 @@ +import {GOODS} from './api' +import {METHOD, request} from '@/utils/request' + +export async function goodsList(params) { + return request(GOODS, METHOD.GET, params) +} + +export default {goodsList} \ No newline at end of file diff --git a/src/services/index.js b/src/services/index.js index 3dfe985f..221ac09b 100644 --- a/src/services/index.js +++ b/src/services/index.js @@ -1,5 +1,7 @@ import userService from './user' +import dataSource from './dataSource' export { - userService + userService, + dataSource } diff --git a/src/utils/request.js b/src/utils/request.js index 5375dfd3..df436424 100644 --- a/src/utils/request.js +++ b/src/utils/request.js @@ -134,6 +134,28 @@ function loadInterceptors(interceptors, options) { }) } +/** + * 解析 url 中的参数 + * @param url + * @returns {Object} + */ +function parseUrlParams(url) { + const params = {} + if (!url || url === '' || typeof url !== 'string') { + return params + } + const paramsStr = url.split('?')[1] + if (!paramsStr) { + return params + } + const paramsArr = paramsStr.replace(/&|=/g, ' ').split(' ') + for (let i = 0; i < paramsArr.length / 2; i++) { + const value = paramsArr[i * 2 + 1] + params[paramsArr[i * 2]] = value === 'true' ? true : (value === 'false' ? false : value) + } + return params +} + export { METHOD, AUTH_TYPE, @@ -141,5 +163,6 @@ export { setAuthorization, removeAuthorization, checkAuthorization, - loadInterceptors + loadInterceptors, + parseUrlParams } diff --git a/yarn.lock b/yarn.lock index 9be1a23f..2d8e9417 100644 --- a/yarn.lock +++ b/yarn.lock @@ -5302,6 +5302,11 @@ hex-color-regex@^1.1.0: resolved "https://registry.npm.taobao.org/hex-color-regex/download/hex-color-regex-1.1.0.tgz#4c06fccb4602fe2602b3c93df82d7e7dbf1a8a8e" integrity sha1-TAb8y0YC/iYCs8k9+C1+fb8aio4= +highlight.js@^10.2.1: + version "10.2.1" + resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-10.2.1.tgz#09784fe2e95612abbefd510948945d4fe6fa9668" + integrity sha1-CXhP4ulWEqu+/VEJSJRdT+b6lmg= + highlight.js@^9.6.0: version "9.18.1" resolved "https://registry.npm.taobao.org/highlight.js/download/highlight.js-9.18.1.tgz#ed21aa001fe6252bb10a3d76d47573c6539fe13c"