mirror of
https://github.com/iczer/vue-antd-admin
synced 2025-04-06 04:00:06 +08:00
feat: add document for AdvanceTable.vue; 🐛
新增：给 AdvanceTable.vue 增加说明文档；
This commit is contained in:
chenghongxing
parent
a4281b62dc
commit
3619242076
11
package.json
11
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,
|
||||
|
||||
@ -1,6 +1,5 @@
|
||||
<template>
|
||||
<div class="action-columns" ref="root">
|
||||
<a-tooltip title="列设置" :get-popup-container="() => $refs.root">
|
||||
<a-popover v-model="visible" placement="bottomRight" trigger="click" :get-popup-container="() => $refs.root">
|
||||
<div slot="title">
|
||||
<a-checkbox :indeterminate="indeterminate" :checked="checkAll" @change="onCheckAllChange" class="check-all" />列展示
|
||||
@ -14,13 +13,13 @@
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<template slot="actions">
|
||||
<a-tooltip title="固定在列头" :get-popup-container="() => $refs.root">
|
||||
<a-tooltip title="固定在列头" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
|
||||
<a-icon :class="['left', {active: col.fixed === 'left'}]" @click="fixColumn('left', col)" type="vertical-align-top" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="固定在列尾" :get-popup-container="() => $refs.root">
|
||||
<a-tooltip title="固定在列尾" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
|
||||
<a-icon :class="['right', {active: col.fixed === 'right'}]" @click="fixColumn('right', col)" type="vertical-align-bottom" />
|
||||
</a-tooltip>
|
||||
<a-tooltip title="添加搜索" :get-popup-container="() => $refs.root">
|
||||
<a-tooltip title="添加搜索" :mouseEnterDelay="0.5" :get-popup-container="() => $refs.root">
|
||||
<a-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
@ -28,7 +27,6 @@
|
||||
</a-list>
|
||||
<a-icon class="action" type="setting" />
|
||||
</a-popover>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@ -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
|
||||
|
||||
@ -8,7 +8,7 @@
|
||||
<template v-else>高级表格</template>
|
||||
</div>
|
||||
<div class="search">
|
||||
<search-area @change="onSearchChange" :columns="columns" >
|
||||
<search-area :format-conditions="formatConditions" @change="onSearchChange" :columns="columns" >
|
||||
<template :slot="slot" v-for="slot in slots">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
@ -19,11 +19,13 @@
|
||||
<a-icon @click="refresh" class="action" :type="loading ? 'loading' : 'reload'" />
|
||||
</a-tooltip>
|
||||
<action-size v-model="sSize" class="action" />
|
||||
<action-columns :columns="columns" @reset="onColumnsReset" class="action">
|
||||
<template :slot="slot" v-for="slot in slots">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
</action-columns>
|
||||
<a-tooltip title="列配置">
|
||||
<action-columns :columns="columns" @reset="onColumnsReset" class="action">
|
||||
<template :slot="slot" v-for="slot in slots">
|
||||
<slot :name="slot"></slot>
|
||||
</template>
|
||||
</action-columns>
|
||||
</a-tooltip>
|
||||
<a-tooltip title="全屏">
|
||||
<a-icon @click="toggleScreen" class="action" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" />
|
||||
</a-tooltip>
|
||||
@ -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) {
|
||||
|
||||
@ -2,35 +2,36 @@
|
||||
<div class="search-area" ref="root">
|
||||
<div class="select-root" ref="selectRoot"></div>
|
||||
<div class="search-item" :key="index" v-for="(col, index) in searchCols">
|
||||
<div v-if="col.dataType === 'boolean'" class="title active">
|
||||
<div v-if="col.dataType === 'boolean'" :class="['title', {active: col.search.value !== undefined}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-switch @change="onSwitchChange" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
|
||||
<a-switch @change="onSwitchChange(col)" class="switch" v-model="col.search.value" size="small" checked-children="是" un-checked-children="否" />
|
||||
<a-icon v-if="col.search.value !== undefined" class="close" @click="e => onCloseClick(e, col)" type="close-circle" theme="filled" />
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'time'" class="title active">
|
||||
<div v-else-if="col.dataType === 'time'" :class="['title', {active: col.search.value}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-time-picker v-model="col.search.value" placeholder="选择时间" @change="(time, timeStr) => onCalendarChange(time, timeStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="time-picker" size="small" :get-popup-container="() => $refs.root"/>
|
||||
<a-time-picker :format="col.search.format" v-model="col.search.value" placeholder="选择时间" @change="(time, timeStr) => onCalendarChange(time, timeStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="time-picker" size="small" :get-popup-container="() => $refs.root"/>
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'date'" class="title active">
|
||||
<div v-else-if="col.dataType === 'date'" :class="['title', {active: col.search.value}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-date-picker v-model="col.search.value" @change="onDateChange(col)" class="date-picker" size="small" :getCalendarContainer="() => $refs.root"/>
|
||||
<a-date-picker :format="col.search.format" v-model="col.search.value" @change="onDateChange(col)" class="date-picker" size="small" :getCalendarContainer="() => $refs.root"/>
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'datetime'" class="title datetime active">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<a-date-picker v-model="col.search.value" @change="(date, dateStr) => onCalendarChange(date, dateStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="datetime-picker" size="small" show-time :getCalendarContainer="() => $refs.root"/>
|
||||
<a-date-picker :format="col.search.format" v-model="col.search.value" @change="(date, dateStr) => onCalendarChange(date, dateStr, col)" @openChange="open => onCalendarOpenChange(open, col)" class="datetime-picker" size="small" show-time :getCalendarContainer="() => $refs.root"/>
|
||||
</div>
|
||||
<div v-else-if="col.dataType === 'select'" class="title active" >
|
||||
<div v-else-if="col.dataType === 'select'" :class="['title', {active: col.search.value !== undefined}]">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}:
|
||||
</template>
|
||||
@ -38,23 +39,24 @@
|
||||
<a-select :allowClear="true" :options="col.search.selectOptions" v-model="col.search.value" placeholder="请选择..." @change="onSelectChange(col)" class="select" slot="content" size="small" :get-popup-container="() => $refs.selectRoot">
|
||||
</a-select>
|
||||
</div>
|
||||
<a-popover v-else @visibleChange="onVisibleChange(col, index)" v-model="col.search.visible" placement="bottom" :trigger="['click']" :get-popup-container="() => $refs.root">
|
||||
<div :class="['title', {active: col.search.value}]">
|
||||
<div v-else :class="['title', {active: col.search.value}]">
|
||||
<a-popover @visibleChange="onVisibleChange(col, index)" v-model="col.search.visible" placement="bottom" :trigger="['click']" :get-popup-container="() => $refs.root">
|
||||
<template v-if="col.title">
|
||||
{{col.title}}
|
||||
</template>
|
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot>
|
||||
<div class="value " v-if="col.search.value">: {{col | searchValue}}</div>
|
||||
<a-icon class="icon-down" type="down"/>
|
||||
</div>
|
||||
<div class="operations" slot="content">
|
||||
<a-button @click="onCancel(col)" class="btn" size="small" type="link">取消</a-button>
|
||||
<a-button @click="onConfirm(col)" class="btn" size="small" type="primary">确认</a-button>
|
||||
</div>
|
||||
<div class="search-overlay" slot="title">
|
||||
<a-input :id="`${searchIdPrefix}${index}`" :allow-clear="true" @keyup.esc="onCancel(col)" @keyup.enter="onConfirm(col)" v-model="col.search.value" size="default" />
|
||||
</div>
|
||||
</a-popover>
|
||||
<div class="value " v-if="col.search.value">: {{col.search.format && typeof col.search.format === 'function' ? col.search.format(col.search.value) : col.search.value}}</div>
|
||||
<a-icon v-if="!col.search.value" class="icon-down" type="down"/>
|
||||
<div class="operations" slot="content">
|
||||
<a-button @click="onCancel(col)" class="btn" size="small" type="link">取消</a-button>
|
||||
<a-button @click="onConfirm(col)" class="btn" size="small" type="primary">确认</a-button>
|
||||
</div>
|
||||
<div class="search-overlay" slot="title">
|
||||
<a-input :id="`${searchIdPrefix}${index}`" :allow-clear="true" @keyup.esc="onCancel(col)" @keyup.enter="onConfirm(col)" v-model="col.search.value" size="small" />
|
||||
</div>
|
||||
</a-popover>
|
||||
<a-icon v-if="col.search.value" @click="e => onCloseClick(e, col)" class="close" type="close-circle" theme="filled"/>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
@ -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{
|
||||
}
|
||||
|
||||
49
src/components/table/api/ApiTable.vue
Normal file
49
src/components/table/api/ApiTable.vue
Normal file
@ -0,0 +1,49 @@
|
||||
<template>
|
||||
<a-table :data-source="apiSource" :pagination="false">
|
||||
<h2 v-if="title" style="margin: 0 16px 0" slot="title">{{title}}</h2>
|
||||
<a-table-column width="20%" data-index="param" title="参数">
|
||||
<div slot-scope="text" v-html="text"></div>
|
||||
</a-table-column>
|
||||
<a-table-column width="50%" data-index="desc" title="说明">
|
||||
<div slot-scope="text" v-html="text"></div>
|
||||
</a-table-column>
|
||||
<a-table-column v-if="isApi" width="15%" data-index="type" title="类型">
|
||||
<div slot-scope="text" v-html="text"></div>
|
||||
</a-table-column>
|
||||
<a-table-column v-if="isApi" width="15%" data-index="default" title="默认值">
|
||||
<div slot-scope="text" v-html="text"></div>
|
||||
</a-table-column>
|
||||
<a-table-column v-if="!isApi" width="30%" data-index="callback" title="回调函数">
|
||||
<div slot-scope="text" v-html="text"></div>
|
||||
</a-table-column>
|
||||
</a-table>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'ApiTable',
|
||||
props: {
|
||||
title: {
|
||||
type: String,
|
||||
default: 'API'
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: 'api',
|
||||
validator(value) {
|
||||
return ['api', 'event'].includes(value)
|
||||
}
|
||||
},
|
||||
apiSource: Array
|
||||
},
|
||||
computed: {
|
||||
isApi() {
|
||||
return this.type === 'api'
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
@ -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)
|
||||
},
|
||||
|
||||
51
src/mock/goods/index.js
Normal file
51
src/mock/goods/index.js
Normal file
@ -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
|
||||
}
|
||||
}
|
||||
})
|
||||
@ -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'
|
||||
})
|
||||
|
||||
152
src/pages/components/table/Api.vue
Normal file
152
src/pages/components/table/Api.vue
Normal file
@ -0,0 +1,152 @@
|
||||
<template>
|
||||
<div class="api">
|
||||
<div class="introduce">
|
||||
<h2 class="title">说明</h2>
|
||||
<p class="content">
|
||||
AdvanceTable 是基于 Ant Design Vue Table 组件封装，支持其所有 API。<br/>
|
||||
主要添加了<em>列设置</em>及<em>搜索控件配置</em>的功能，可用于一些需要动态配置表格展示、动态配置搜索条件的场景。<br/>
|
||||
使用方式 与 antd table 基本无异。添加了部分API，如下：
|
||||
</p>
|
||||
</div>
|
||||
<api-table :api-source="apiSource" />
|
||||
<api-table type="event" title="事件" :api-source="events" />
|
||||
<api-table title="Column" :api-source="columnApi" />
|
||||
<api-table title="Search" :api-source="searchApi" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import ApiTable from '@/components/table/api/ApiTable'
|
||||
export default {
|
||||
name: 'Api',
|
||||
components: {ApiTable},
|
||||
data() {
|
||||
return {
|
||||
apiSource: [
|
||||
{
|
||||
key: 0,
|
||||
param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table API</a>',
|
||||
desc: '支持 Ant Design Vue Table 组件 所有 api',
|
||||
type: '--',
|
||||
default: '--',
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
param: 'title',
|
||||
desc: '表格标题',
|
||||
type: 'string | slot',
|
||||
default: '\'高级表格\''
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
param: 'formatConditions',
|
||||
desc: `是否格式化搜索条件的值，格式化规则参考 <a>Search 配置</a>。
|
||||
<br/>false：取搜索输入控件的原值 <br/>true：取搜索输入控件格式化后的值`,
|
||||
type: 'boolean',
|
||||
default: 'false',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
param: 'columns',
|
||||
desc: `表格列配置，参考 <a>Column 配置</a>`,
|
||||
type: 'array',
|
||||
default: '--',
|
||||
}
|
||||
],
|
||||
events: [
|
||||
{
|
||||
key: 0,
|
||||
param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table Events API</a>',
|
||||
desc: '支持 Ant Design Vue Table 所有事件',
|
||||
callback: '--',
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
param: 'search',
|
||||
desc: '搜索条件变化时触发',
|
||||
callback: 'Function(conditions, searchOptions: [{field, value, format}])',
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
param: 'refresh',
|
||||
desc: '表头刷新图标点击时触发',
|
||||
callback: 'Function(conditions, searchOptions: [{field, value, format}])',
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
param: 'reset',
|
||||
desc: '列配置重置按钮点击时触发',
|
||||
callback: 'Function(conditions, searchOptions: [{field, value, format}])',
|
||||
},
|
||||
],
|
||||
columnApi: [
|
||||
{
|
||||
key: 0,
|
||||
param: '<a href="https://www.antdv.com/components/table-cn/#API" target="_blank">Ant Design Vue Table Column API</a>',
|
||||
desc: '支持 Ant Design Vue Table 组件 Column 配置所有 api',
|
||||
type: '--',
|
||||
default: '--'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
param: 'searchAble',
|
||||
desc: '是否启用列搜索',
|
||||
type: 'boolean',
|
||||
default: 'false'
|
||||
},
|
||||
{
|
||||
key: 2,
|
||||
param: 'dataType',
|
||||
desc: `数据类型，该配置将决定列搜索输入控件的类型，与列搜索输入控件对应关系如下：<br/>
|
||||
string: 输入框组件<br/>
|
||||
boolean: 开关组件<br/>
|
||||
select: 下拉输入框组件<br/>
|
||||
date: 日期选择器<br/>
|
||||
time: 时间选择器<br/>
|
||||
datetime: 带时间选择器的日期选择器`,
|
||||
type: `'string' | 'boolean' | 'select' | 'date' | 'time' | 'datetime'`,
|
||||
default: `'string'`
|
||||
},
|
||||
{
|
||||
key: 3,
|
||||
param: 'search',
|
||||
desc: '列搜索配置，参考 <a>Search 配置</a>',
|
||||
type: 'object',
|
||||
default: '--'
|
||||
},
|
||||
],
|
||||
searchApi: [
|
||||
{
|
||||
key: 0,
|
||||
param: 'format',
|
||||
desc: `列搜索输入控件值的格式化配置。<br/>如果输入控件支持格式化，则可设置该值为字符串，如日期输入组件，可设为为 'YYYY-MM-DD'。
|
||||
<br/>不支持格式化的输入控件，可设置为一个接收控件的输入值作为参数的函数，如 (value) => {return \`prefix\${value}\`}。`,
|
||||
type: 'string | Function(value)',
|
||||
default: '取输入控件默认的格式化配置'
|
||||
},
|
||||
{
|
||||
key: 1,
|
||||
param: 'selectOptions',
|
||||
desc: `select 数据类型的下拉输入组件的选项配置，可参考 <a href="https://www.antdv.com/components/select-cn/#API" target="_blank">Ant Design Vue Select Option props Api</a>`,
|
||||
type: 'array',
|
||||
default: '--'
|
||||
}
|
||||
],
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.api{
|
||||
.introduce{
|
||||
padding: 16px;
|
||||
.content{
|
||||
em{
|
||||
margin: 0 4px;
|
||||
color: @primary-color;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<div>
|
||||
<div class="table">
|
||||
<advance-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
@ -8,7 +8,19 @@
|
||||
rowKey="id"
|
||||
@search="onSearch"
|
||||
@refresh="onRefresh"
|
||||
:format-conditions="true"
|
||||
@reset="onReset"
|
||||
:pagination="{
|
||||
current: page,
|
||||
pageSize: pageSize,
|
||||
total: total,
|
||||
showSizeChanger: true,
|
||||
showLessItems: true,
|
||||
showQuickJumper: true,
|
||||
showTotal: (total, range) => `第 ${range[0]}-${range[1]} 条，总计 ${total} 条`,
|
||||
onChange: onPageChange,
|
||||
onShowSizeChange: onSizeChange,
|
||||
}"
|
||||
>
|
||||
<template slot="statusTitle">
|
||||
状态<a-icon style="margin: 0 4px" type="info-circle" />
|
||||
@ -20,31 +32,18 @@
|
||||
{{text | statusStr}}
|
||||
</template>
|
||||
</advance-table>
|
||||
<api />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import AdvanceTable from '@/components/table/advance/AdvanceTable'
|
||||
import moment from 'moment'
|
||||
import {dataSource as ds} from '@/services'
|
||||
import Api from '@/pages/components/table/Api'
|
||||
|
||||
const goods = ['运动鞋', 'T恤', '长裤', '短裤']
|
||||
const dataSource = []
|
||||
const current = new Date().getTime()
|
||||
for (let i = 0; i < 100; i++) {
|
||||
dataSource.push({
|
||||
id: i,
|
||||
name: goods[Math.floor((Math.random() * 4))],
|
||||
orderId: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`,
|
||||
status: Math.floor((Math.random() * 4) + 1),
|
||||
send: (i % 2) === 1,
|
||||
sendTime: moment(current - Math.floor((Math.random() * 8000000))).format('YYYY-MM-DD HH:mm:ss'),
|
||||
orderDate: moment(current - Math.floor((Math.random() * 800000000))).format('YYYY-MM-DD'),
|
||||
auditTime: moment(current - Math.floor((Math.random() * 8000000))).format('HH:mm:ss'),
|
||||
})
|
||||
}
|
||||
export default {
|
||||
name: 'Table',
|
||||
components: {AdvanceTable},
|
||||
components: {Api, AdvanceTable},
|
||||
filters: {
|
||||
statusStr(val) {
|
||||
switch (val) {
|
||||
@ -58,6 +57,9 @@
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
page: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
columns: [
|
||||
{
|
||||
title: '商品名称',
|
||||
@ -103,66 +105,62 @@
|
||||
},
|
||||
{
|
||||
title: '审核时间',
|
||||
searchAble: true,
|
||||
dataIndex: 'auditTime',
|
||||
dataType: 'time',
|
||||
},
|
||||
],
|
||||
dataSource: dataSource
|
||||
dataSource: [],
|
||||
conditions: {}
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.getGoodList()
|
||||
},
|
||||
methods: {
|
||||
onSearch(conditions) {
|
||||
getGoodList() {
|
||||
this.loading = true
|
||||
this.searchGoods(conditions).then(result => {
|
||||
this.dataSource = result
|
||||
const {page, pageSize, conditions} = this
|
||||
ds.goodsList({page, pageSize, ...conditions}).then(result => {
|
||||
const {list, page, pageSize, total} = result.data.data
|
||||
this.dataSource = list
|
||||
this.page = page
|
||||
this.total = total
|
||||
this.pageSize = pageSize
|
||||
this.loading = false
|
||||
})
|
||||
},
|
||||
onSearch(conditions, searchOptions) {
|
||||
console.log(conditions)
|
||||
console.log(searchOptions)
|
||||
this.page = 1
|
||||
this.conditions = conditions
|
||||
this.getGoodList()
|
||||
},
|
||||
onSizeChange(current, size) {
|
||||
this.page = 1
|
||||
this.pageSize = size
|
||||
this.getGoodList()
|
||||
},
|
||||
onRefresh(conditions) {
|
||||
this.loading = true
|
||||
this.searchGoods(conditions).then(result => {
|
||||
this.dataSource = result
|
||||
this.loading = false
|
||||
})
|
||||
this.conditions = conditions
|
||||
this.getGoodList()
|
||||
},
|
||||
onReset(conditions) {
|
||||
this.loading = true
|
||||
this.searchGoods(conditions).then(result => {
|
||||
this.dataSource = result
|
||||
this.loading = false
|
||||
})
|
||||
this.conditions = conditions
|
||||
this.getGoodList()
|
||||
},
|
||||
async searchGoods(conditions) {
|
||||
const promise = new Promise((resolve, reject) => {
|
||||
try {
|
||||
const result = dataSource.filter(item => {
|
||||
for (let key of Object.keys(conditions)) {
|
||||
if (key === 'sendTime') {
|
||||
if (conditions[key].format('YYYY-MM-DD HH:mm:ss') !== item[key]) return false
|
||||
} else if (key === 'orderDate') {
|
||||
if (conditions[key].format('YYYY-MM-DD') !== item[key]) return false
|
||||
} else if (key === 'auditTime') {
|
||||
if (conditions[key].format('HH:mm:ss') !== item[key]) return false
|
||||
} else if (item[key] !== conditions[key]) {
|
||||
return false
|
||||
}
|
||||
}
|
||||
return true
|
||||
})
|
||||
setTimeout(() => {
|
||||
resolve(result)
|
||||
}, 300)
|
||||
} catch (e) {
|
||||
reject(e)
|
||||
}
|
||||
})
|
||||
return promise
|
||||
onPageChange(page, pageSize) {
|
||||
this.page = page
|
||||
this.pageSize = pageSize
|
||||
this.getGoodList()
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
<style scoped lang="less">
|
||||
.table{
|
||||
background-color: @base-bg-color;
|
||||
padding: 24px;
|
||||
}
|
||||
</style>
|
||||
2
src/pages/components/table/index.js
Normal file
2
src/pages/components/table/index.js
Normal file
@ -0,0 +1,2 @@
|
||||
import Table from './Table'
|
||||
export default Table
|
||||
@ -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')
|
||||
}
|
||||
]
|
||||
},
|
||||
|
||||
@ -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`,
|
||||
}
|
||||
|
||||
8
src/services/dataSource.js
Normal file
8
src/services/dataSource.js
Normal file
@ -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}
|
||||
@ -1,5 +1,7 @@
|
||||
import userService from './user'
|
||||
import dataSource from './dataSource'
|
||||
|
||||
export {
|
||||
userService
|
||||
userService,
|
||||
dataSource
|
||||
}
|
||||
|
||||
@ -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
|
||||
}
|
||||
|
||||
@ -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"
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user