chenghongxing
5 years ago
parent
3d3e56de12
commit
517c1959d8
7 changed files with 886 additions and 0 deletions
@ -0,0 +1,166 @@ |
||||
<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" />列展示 |
||||
<a-button @click="resetColumns" style="float: right" type="link" size="small">重置</a-button> |
||||
</div> |
||||
<a-list style="width: 100%" size="small" :key="i" v-for="(col, i) in columns" slot="content"> |
||||
<a-list-item> |
||||
<a-checkbox v-model="col.visible" @change="e => onCheckChange(e, col)"/> |
||||
<template v-if="col.title"> |
||||
{{col.title}}: |
||||
</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-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-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-icon :class="{active: col.searchAble}" @click="setSearch(col)" type="search" /> |
||||
</a-tooltip> |
||||
</template> |
||||
</a-list-item> |
||||
</a-list> |
||||
<a-icon class="action" type="setting" /> |
||||
</a-popover> |
||||
</a-tooltip> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import cloneDeep from 'lodash.clonedeep' |
||||
|
||||
export default { |
||||
name: 'ActionColumns', |
||||
props: ['columns', 'visibleColumns'], |
||||
data() { |
||||
return { |
||||
visible: false, |
||||
indeterminate: false, |
||||
checkAll: true, |
||||
checkedCounts: this.columns.length, |
||||
backColumns: cloneDeep(this.columns) |
||||
} |
||||
}, |
||||
watch: { |
||||
checkedCounts(val) { |
||||
this.checkAll = val === this.columns.length |
||||
this.indeterminate = val > 0 && val < this.columns.length |
||||
} |
||||
}, |
||||
created() { |
||||
this.$emit('update:visibleColumns', [...this.columns]) |
||||
for (let col of this.columns) { |
||||
if (col.visible === undefined) { |
||||
this.$set(col, 'visible', true) |
||||
} |
||||
if (!col.visible) { |
||||
this.checkedCounts -= 1 |
||||
this.$set(col, 'colSpan', 0) |
||||
this.$set(col, 'customCell', () => ({style: 'display: none;'})) |
||||
} |
||||
} |
||||
}, |
||||
methods: { |
||||
onCheckChange(e, col) { |
||||
if (!col.visible) { |
||||
this.checkedCounts -= 1 |
||||
this.$set(col, 'colSpan', 0) |
||||
this.$set(col, 'customCell', () => ({style: 'display: none;'})) |
||||
} else { |
||||
this.checkedCounts += 1 |
||||
this.$set(col, 'colSpan', undefined) |
||||
this.$set(col, 'customCell', undefined) |
||||
} |
||||
}, |
||||
fixColumn(fixed, col) { |
||||
if (fixed !== col.fixed) { |
||||
this.$set(col, 'fixed', fixed) |
||||
} else { |
||||
this.$set(col, 'fixed', undefined) |
||||
} |
||||
}, |
||||
setSearch(col) { |
||||
this.$set(col, 'searchAble', !col.searchAble) |
||||
if (!col.searchAble && col.search) { |
||||
this.resetSearch(col) |
||||
} |
||||
}, |
||||
resetSearch(col) { |
||||
col.search.value = col.dataType === 'boolean' ? false : undefined |
||||
col.search.backup = undefined |
||||
}, |
||||
resetColumns() { |
||||
const {columns, backColumns} = this |
||||
let counts = columns.length |
||||
backColumns.forEach((back, index) => { |
||||
const column = columns[index] |
||||
column.visible = back.visible === undefined || back.visible |
||||
if (column.visible) { |
||||
this.$set(column, 'colSpan', undefined) |
||||
this.$set(column, 'customCell', undefined) |
||||
} else { |
||||
counts -= 1 |
||||
this.$set(column, 'colSpan', 0) |
||||
this.$set(column, 'customCell', () => ({style: 'display: none;'})) |
||||
} |
||||
if (back.fixed !== undefined) { |
||||
column.fixed = back.fixed |
||||
} else { |
||||
this.$set(column, 'fixed', undefined) |
||||
} |
||||
column.searchAble = back.searchAble |
||||
this.resetSearch(column) |
||||
}) |
||||
this.checkedCounts = counts |
||||
this.visible = false |
||||
this.$emit('reset', this.getConditions(columns)) |
||||
}, |
||||
onCheckAllChange(e) { |
||||
if (e.target.checked) { |
||||
this.checkedCounts = this.columns.length |
||||
this.columns.forEach(col => { |
||||
col.visible = true |
||||
this.$set(col, 'colSpan', undefined) |
||||
this.$set(col, 'customCell', undefined) |
||||
}) |
||||
} else { |
||||
this.checkedCounts = 0 |
||||
this.columns.forEach(col => { |
||||
col.visible = false |
||||
this.$set(col, 'colSpan', 0) |
||||
this.$set(col, 'customCell', () => ({style: 'display: none;'})) |
||||
}) |
||||
} |
||||
}, |
||||
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 |
||||
}) |
||||
return conditions |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.action-columns{ |
||||
display: inline-block; |
||||
.check-all{ |
||||
margin-right: 8px; |
||||
} |
||||
.left,.right{ |
||||
transform: rotate(-90deg); |
||||
} |
||||
.active{ |
||||
color: @primary-color; |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,44 @@ |
||||
<template> |
||||
<div class="action-size" ref="root"> |
||||
<a-tooltip title="密度"> |
||||
<a-dropdown placement="bottomCenter" :trigger="['click']" :get-popup-container="() => $refs.root"> |
||||
<a-icon class="action" type="column-height" /> |
||||
<a-menu :selected-keys="[value]" slot="overlay" @click="onClick"> |
||||
<a-menu-item key="default"> |
||||
默认 |
||||
</a-menu-item> |
||||
<a-menu-item key="middle"> |
||||
中等 |
||||
</a-menu-item> |
||||
<a-menu-item key="small"> |
||||
紧密 |
||||
</a-menu-item> |
||||
</a-menu> |
||||
</a-dropdown> |
||||
</a-tooltip> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
export default { |
||||
name: 'ActionSize', |
||||
props: ['value'], |
||||
inject: ['table'], |
||||
data() { |
||||
return { |
||||
selectedKeys: ['middle'] |
||||
} |
||||
}, |
||||
methods: { |
||||
onClick({key}) { |
||||
this.$emit('input', key) |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.action-size{ |
||||
display: inline-block; |
||||
} |
||||
</style> |
||||
@ -0,0 +1,239 @@ |
||||
<template> |
||||
<div ref="table" :id="id" class="advanced-table"> |
||||
<a-spin :spinning="loading"> |
||||
<div :class="['header-bar', size]"> |
||||
<div class="title"> |
||||
<template v-if="title">{{title}}</template> |
||||
<slot v-else-if="$slots.title" name="title"></slot> |
||||
<template v-else>高级表格</template> |
||||
</div> |
||||
<div class="search"> |
||||
<search-area @change="onSearchChange" :columns="columns" > |
||||
<template :slot="slot" v-for="slot in slots"> |
||||
<slot :name="slot"></slot> |
||||
</template> |
||||
</search-area> |
||||
</div> |
||||
<div class="actions"> |
||||
<a-tooltip title="刷新"> |
||||
<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="全屏"> |
||||
<a-icon @click="toggleScreen" class="action" :type="fullScreen ? 'fullscreen-exit' : 'fullscreen'" /> |
||||
</a-tooltip> |
||||
</div> |
||||
</div> |
||||
<a-table |
||||
v-bind="{...$options.propsData, title: undefined, loading: false}" |
||||
:size="sSize" |
||||
@expandedRowsChange="onExpandedRowsChange" |
||||
@change="onChange" |
||||
@expand="onExpand" |
||||
> |
||||
<template slot-scope="text, record, index" :slot="slot" v-for="slot in scopedSlots "> |
||||
<slot :name="slot" v-bind="{text, record, index}"></slot> |
||||
</template> |
||||
<template :slot="slot" v-for="slot in slots"> |
||||
<slot :name="slot"></slot> |
||||
</template> |
||||
<template slot-scope="record, index, indent, expanded" :slot="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"> |
||||
<slot v-bind="{record, index, indent, expanded}" :name="$scopedSlots.expandedRowRender ? 'expandedRowRender' : ''"></slot> |
||||
</template> |
||||
</a-table> |
||||
</a-spin> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import ActionSize from '@/components/table/advance/ActionSize' |
||||
import ActionColumns from '@/components/table/advance/ActionColumns' |
||||
import SearchArea from '@/components/table/advance/SearchArea' |
||||
export default { |
||||
name: 'AdvanceTable', |
||||
components: {SearchArea, ActionColumns, ActionSize}, |
||||
props: { |
||||
tableLayout: String, |
||||
bordered: Boolean, |
||||
childrenColumnName: Array[String], |
||||
columns: Array, |
||||
components: Object, |
||||
dataSource: Array, |
||||
defaultExpandAllRows: Array[String], |
||||
expandedRowKeys: Array[String], |
||||
expandedRowRender: Function, |
||||
expandIcon: Function, |
||||
expandRowByClick: Boolean, |
||||
expandIconColumnIndex: Number, |
||||
footer: Function, |
||||
indentSize: Number, |
||||
loading: Boolean, |
||||
locale: Object, |
||||
pagination: Object, |
||||
rowClassName: Function, |
||||
rowKey: [String, Function], |
||||
rowSelection: Object, |
||||
scroll: Object, |
||||
showHeader: Boolean, |
||||
size: String, |
||||
title: String, |
||||
customHeaderRow: Function, |
||||
customRow: Function, |
||||
getPopupContainer: Function, |
||||
transformCellText: Function |
||||
}, |
||||
provide() { |
||||
return { |
||||
table: this |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
id: `${new Date().getTime()}-${Math.floor(Math.random() * 10)}`, |
||||
sSize: this.size || 'default', |
||||
fullScreen: false, |
||||
conditions: [] |
||||
} |
||||
}, |
||||
computed: { |
||||
slots() { |
||||
return Object.keys(this.$slots).filter(slot => slot !== 'title') |
||||
}, |
||||
scopedSlots() { |
||||
return Object.keys(this.$scopedSlots).filter(slot => slot !== 'expandedRowRender' && slot !== 'title') |
||||
} |
||||
}, |
||||
created() { |
||||
this.addListener() |
||||
}, |
||||
beforeDestroy() { |
||||
this.removeListener() |
||||
}, |
||||
methods: { |
||||
refresh() { |
||||
this.$emit('refresh', this.conditions) |
||||
}, |
||||
onSearchChange(conditions) { |
||||
this.conditions = conditions |
||||
this.$emit('search', conditions) |
||||
}, |
||||
toggleScreen() { |
||||
if (this.fullScreen) { |
||||
this.outFullScreen() |
||||
} else { |
||||
this.inFullScreen() |
||||
} |
||||
}, |
||||
inFullScreen() { |
||||
const el = this.$refs.table |
||||
if (el.requestFullscreen) { |
||||
el.requestFullscreen() |
||||
return true |
||||
} else if (el.webkitRequestFullScreen) { |
||||
el.webkitRequestFullScreen() |
||||
return true |
||||
} else if (el.mozRequestFullScreen) { |
||||
el.mozRequestFullScreen() |
||||
return true |
||||
} else if (el.msRequestFullscreen) { |
||||
el.msRequestFullscreen() |
||||
return true |
||||
} |
||||
this.$message.warn('对不起，您的浏览器不支持全屏模式') |
||||
return false |
||||
}, |
||||
outFullScreen() { |
||||
if (document.exitFullscreen) { |
||||
document.exitFullscreen() |
||||
} else if (document.webkitCancelFullScreen) { |
||||
document.webkitCancelFullScreen(); |
||||
} else if (document.mozCancelFullScreen) { |
||||
document.mozCancelFullScreen() |
||||
} else if (document.msExitFullscreen) { |
||||
document.msExiFullscreen() |
||||
} |
||||
}, |
||||
onColumnsReset(conditions) { |
||||
this.$emit('reset', conditions) |
||||
}, |
||||
onExpandedRowsChange(expandedRows) { |
||||
this.$emit('expandedRowsChange', expandedRows) |
||||
}, |
||||
onChange(pagination, filters, sorter, options) { |
||||
this.$emit('expandedRowsChange', pagination, filters, sorter, options) |
||||
}, |
||||
onExpand(expanded, record) { |
||||
this.$emit('expandedRowsChange', expanded, record) |
||||
}, |
||||
addListener() { |
||||
document.addEventListener('fullscreenchange', this.fullScreenListener) |
||||
document.addEventListener('webkitfullscreenchange', this.fullScreenListener) |
||||
document.addEventListener('mozfullscreenchange', this.fullScreenListener) |
||||
document.addEventListener('msfullscreenchange', this.fullScreenListener) |
||||
}, |
||||
removeListener() { |
||||
document.removeEventListener('fullscreenchange', this.fullScreenListener) |
||||
document.removeEventListener('webkitfullscreenchange', this.fullScreenListener) |
||||
document.removeEventListener('mozfullscreenchange', this.fullScreenListener) |
||||
document.removeEventListener('msfullscreenchange', this.fullScreenListener) |
||||
}, |
||||
fullScreenListener(e) { |
||||
if (e.target.id === this.id) { |
||||
this.fullScreen = !this.fullScreen |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.advanced-table{ |
||||
background-color: @component-background; |
||||
.header-bar{ |
||||
padding: 16px 24px; |
||||
display: flex; |
||||
align-items: center; |
||||
border-radius: 4px; |
||||
transition: all 0.3s; |
||||
&.middle{ |
||||
padding: 12px 16px; |
||||
} |
||||
&.small{ |
||||
padding: 8px 12px; |
||||
border: 1px solid @border-color; |
||||
border-bottom: 0; |
||||
.title{ |
||||
font-size: 16px; |
||||
} |
||||
} |
||||
.title{ |
||||
transition: all 0.3s; |
||||
font-size: 18px; |
||||
color: @title-color; |
||||
font-weight: 700; |
||||
} |
||||
.search{ |
||||
flex: 1; |
||||
text-align: right; |
||||
margin: 0 24px; |
||||
} |
||||
.actions{ |
||||
text-align: right; |
||||
font-size: 17px; |
||||
color: @text-color; |
||||
.action{ |
||||
margin: 0 8px; |
||||
cursor: pointer; |
||||
&:hover{ |
||||
color: @primary-color; |
||||
} |
||||
} |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,262 @@ |
||||
<template> |
||||
<div class="search-area" ref="root"> |
||||
<div class="search-item" :key="index" v-for="(col, index) in searchCols"> |
||||
<div v-if="col.dataType === 'boolean'" class="title active"> |
||||
<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="否" /> |
||||
</div> |
||||
<div v-else-if="col.dataType === 'time'" class="title active"> |
||||
<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" /> |
||||
</div> |
||||
<div v-else-if="col.dataType === 'date'" class="title 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="onDateChange(col)" class="date-picker" size="small" /> |
||||
</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)" show-time class="datetime-picker" size="small" /> |
||||
</div> |
||||
<div v-else-if="col.dataType === 'select'" class="title active"> |
||||
<template v-if="col.title"> |
||||
{{col.title}}: |
||||
</template> |
||||
<slot v-else-if="col.slots && col.slots.title" :name="col.slots.title"></slot> |
||||
<a-select :allowClear="true" :options="col.search.selectOptions" v-model="col.search.value" placeholder="请选择..." @change="onSelectChange(col)" class="select" slot="content" size="small"> |
||||
</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}]"> |
||||
<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> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import fastEqual from 'fast-deep-equal' |
||||
import moment from 'moment' |
||||
|
||||
export default { |
||||
name: 'SearchArea', |
||||
props: ['columns'], |
||||
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)}) |
||||
}) |
||||
}, |
||||
filters: { |
||||
searchValue(col) { |
||||
if (col.dataType === 'time' && col.search.value) { |
||||
return col.search.value.format('HH:mm:ss') |
||||
} |
||||
return col.search.value |
||||
} |
||||
}, |
||||
watch: { |
||||
searchCols(newVal, oldVal) { |
||||
if (newVal.length != oldVal.length) { |
||||
const newConditions = this.getConditions(newVal) |
||||
if (!fastEqual(newConditions, this.conditions)) { |
||||
this.conditions = newConditions |
||||
this.$emit('change', this.conditions) |
||||
} |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
conditions: [] |
||||
} |
||||
}, |
||||
computed: { |
||||
searchCols() { |
||||
return this.columns.filter(item => item.searchAble) |
||||
}, |
||||
searchIdPrefix() { |
||||
return this.table.id + '-ipt-' |
||||
} |
||||
}, |
||||
methods: { |
||||
onCancel(col) { |
||||
col.search.value = col.search.backup |
||||
col.search.visible = false |
||||
}, |
||||
onConfirm(col) { |
||||
col.search.backup = col.search.value |
||||
col.search.visible = false |
||||
const conditions = this.getConditions(this.searchCols) |
||||
if (!fastEqual(conditions, this.conditions)) { |
||||
this.conditions = conditions |
||||
this.$emit('change', this.conditions) |
||||
} |
||||
}, |
||||
onSwitchChange() { |
||||
this.conditions = this.getConditions(this.searchCols) |
||||
this.$emit('change', this.conditions) |
||||
}, |
||||
onSelectChange() { |
||||
this.conditions = this.getConditions(this.searchCols) |
||||
this.$emit('change', this.conditions) |
||||
}, |
||||
onCalendarOpenChange(open, col) { |
||||
col.search.visible = open |
||||
const {momentEqual, getConditions} = 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) |
||||
} |
||||
}, |
||||
onCalendarChange(date, dateStr, col) { |
||||
const {momentEqual, getConditions} = 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) |
||||
} |
||||
}, |
||||
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) |
||||
} |
||||
}, |
||||
getCalendarFormat(col) { |
||||
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 |
||||
} |
||||
}, |
||||
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 |
||||
}) |
||||
return conditions |
||||
}, |
||||
onVisibleChange(col, index) { |
||||
if (!col.search.visible) { |
||||
col.search.value = col.search.backup |
||||
} else { |
||||
let input = document.getElementById(`${this.searchIdPrefix}${index}`) |
||||
if (input) { |
||||
setTimeout(() => {input.focus()}, 0) |
||||
} else { |
||||
this.$nextTick(() => { |
||||
input = document.getElementById(`${this.searchIdPrefix}${index}`) |
||||
input.focus() |
||||
}) |
||||
} |
||||
} |
||||
}, |
||||
momentEqual(target, source, format) { |
||||
if (target === source) { |
||||
return true |
||||
} else if (target && source && target.format(format) === source.format(format)) { |
||||
return true |
||||
} |
||||
return false |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped lang="less"> |
||||
.search-area{ |
||||
margin: -4px 0; |
||||
.search-item{ |
||||
margin: 4px 4px; |
||||
display: inline-block; |
||||
.title{ |
||||
padding: 4px 8px; |
||||
cursor: pointer; |
||||
border-radius: 4px; |
||||
user-select: none; |
||||
display: inline-flex; |
||||
align-items: center; |
||||
.switch{ |
||||
margin-left: 4px; |
||||
} |
||||
.time-picker{ |
||||
margin-left: 4px; |
||||
width: 96px; |
||||
} |
||||
.date-picker{ |
||||
margin-left: 4px; |
||||
width: 120px; |
||||
} |
||||
.datetime-picker{ |
||||
margin-left: 4px; |
||||
width: 195px; |
||||
} |
||||
.value{ |
||||
display: inline-block; |
||||
overflow: hidden; |
||||
flex:1; |
||||
max-width: 144px; |
||||
text-overflow: ellipsis; |
||||
word-break: break-all; |
||||
white-space: nowrap; |
||||
} |
||||
&.active{ |
||||
background-color: @layout-bg-color; |
||||
} |
||||
} |
||||
.icon-down{ |
||||
margin-left: 4px; |
||||
font-size: 12px; |
||||
} |
||||
} |
||||
.search-overlay{ |
||||
padding: 8px 0px; |
||||
text-align: center; |
||||
} |
||||
.select{ |
||||
margin-left: 4px; |
||||
max-width: 144px; |
||||
min-width: 96px; |
||||
} |
||||
.operations{ |
||||
display: flex; |
||||
justify-content: space-between; |
||||
.btn{ |
||||
} |
||||
} |
||||
} |
||||
</style> |
||||
@ -0,0 +1,2 @@ |
||||
import AdvanceTable from './AdvanceTable' |
||||
export default AdvanceTable |
||||
@ -0,0 +1,168 @@ |
||||
<template> |
||||
<div> |
||||
<advance-table |
||||
:columns="columns" |
||||
:data-source="dataSource" |
||||
title="高级表格-Beta" |
||||
:loading="loading" |
||||
rowKey="id" |
||||
@search="onSearch" |
||||
@refresh="onRefresh" |
||||
@reset="onReset" |
||||
> |
||||
<template slot="statusTitle"> |
||||
状态<a-icon style="margin: 0 4px" type="info-circle" /> |
||||
</template> |
||||
<template slot="send" slot-scope="{text}"> |
||||
{{text ? '是' : '否'}} |
||||
</template> |
||||
<template slot="status" slot-scope="{text}"> |
||||
{{text | statusStr}} |
||||
</template> |
||||
</advance-table> |
||||
</div> |
||||
</template> |
||||
|
||||
<script> |
||||
import AdvanceTable from '@/components/table/advance/AdvanceTable' |
||||
import moment from 'moment' |
||||
|
||||
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}, |
||||
filters: { |
||||
statusStr(val) { |
||||
switch (val) { |
||||
case 1: return '已下单' |
||||
case 2: return '已付款' |
||||
case 3: return '已审核' |
||||
case 4: return '已发货' |
||||
} |
||||
} |
||||
}, |
||||
data() { |
||||
return { |
||||
loading: false, |
||||
columns: [ |
||||
{ |
||||
title: '商品名称', |
||||
dataIndex: 'name', |
||||
searchAble: true |
||||
}, |
||||
{ |
||||
title: '订单号', |
||||
dataIndex: 'orderId' |
||||
}, |
||||
{ |
||||
searchAble: true, |
||||
dataIndex: 'status', |
||||
dataType: 'select', |
||||
slots: {title: 'statusTitle'}, |
||||
scopedSlots: {customRender: 'status'}, |
||||
search: { |
||||
selectOptions: [ |
||||
{title: '已下单', value: 1}, |
||||
{title: '已付款', value: 2}, |
||||
{title: '已审核', value: 3}, |
||||
{title: '已发货', value: 4} |
||||
] |
||||
} |
||||
}, |
||||
{ |
||||
title: '发货', |
||||
searchAble: true, |
||||
dataIndex: 'send', |
||||
dataType: 'boolean', |
||||
scopedSlots: {customRender: 'send'} |
||||
}, |
||||
{ |
||||
title: '发货时间', |
||||
dataIndex: 'sendTime', |
||||
dataType: 'datetime' |
||||
}, |
||||
{ |
||||
title: '下单日期', |
||||
searchAble: true, |
||||
dataIndex: 'orderDate', |
||||
dataType: 'date' |
||||
}, |
||||
{ |
||||
title: '审核时间', |
||||
searchAble: true, |
||||
dataIndex: 'auditTime', |
||||
dataType: 'time', |
||||
}, |
||||
], |
||||
dataSource: dataSource |
||||
} |
||||
}, |
||||
methods: { |
||||
onSearch(conditions) { |
||||
this.loading = true |
||||
this.searchGoods(conditions).then(result => { |
||||
this.dataSource = result |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
onRefresh(conditions) { |
||||
this.loading = true |
||||
this.searchGoods(conditions).then(result => { |
||||
this.dataSource = result |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
onReset(conditions) { |
||||
this.loading = true |
||||
this.searchGoods(conditions).then(result => { |
||||
this.dataSource = result |
||||
this.loading = false |
||||
}) |
||||
}, |
||||
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 |
||||
} |
||||
} |
||||
} |
||||
</script> |
||||
|
||||
<style scoped> |
||||
|
||||
</style> |
||||
Loading…
Reference in new issue