diff --git a/src/components/list/QueryList.vue b/src/components/list/QueryList.vue index 6e8c417..cc77c23 100644 --- a/src/components/list/QueryList.vue +++ b/src/components/list/QueryList.vue @@ -79,8 +79,24 @@
+
+ 新建 + 批量操作 + + + 删除 + 审批 + + + 更多操作 + + +
@@ -99,8 +115,11 @@ import ADatePicker from 'vue-antd-ui/es/date-picker/index' import AButton from 'vue-antd-ui/es/button/button' import AIcon from 'vue-antd-ui/es/icon/icon' import StandardTable from '../table/StandardTable' +import ADropdown from 'vue-antd-ui/es/dropdown' +import AMenu from 'vue-antd-ui/es/menu/index' const ASelectOption = ASelect.Option +const AMenuItem = AMenu.Item const columns = [ { @@ -115,26 +134,40 @@ const columns = [ title: '服务调用次数', dataIndex: 'callNo', sorter: true, - needTotal: true + needTotal: true, + customRender: (text) => text + ' 次' }, { title: '状态', - dataIndex: 'status' + dataIndex: 'status', + needTotal: true }, { title: '更新时间', dataIndex: 'updatedAt', sorter: true - }, - { - title: '操作', - key: 'action' } ] +const dataSource = [] + +for (let i = 0; i < 100; i++) { + dataSource.push({ + key: i, + no: 'NO ' + i, + description: '这是一段描述', + callNo: Math.floor(Math.random() * 1000), + status: Math.floor(Math.random() * 10) % 4, + updatedAt: '2018-07-26' + }) +} + export default { name: 'QueryList', components: { + AMenuItem, + AMenu, + ADropdown, StandardTable, AIcon, AButton, @@ -151,12 +184,38 @@ export default { data () { return { advanced: true, - columns: columns + columns: columns, + dataSource: dataSource, + selectedRowKeys: [], + selectedRows: [] } }, methods: { toggleAdvanced () { this.advanced = !this.advanced + }, + onchange (selectedRowKeys, selectedRows) { + this.selectedRowKeys = selectedRowKeys + this.selectedRows = selectedRows + }, + remove () { + this.dataSource = this.dataSource.filter(item => this.selectedRowKeys.indexOf(item.key) < 0) + this.selectedRows = this.selectedRows.filter(item => this.selectedRowKeys.indexOf(item.key) < 0) + }, + addNew () { + this.dataSource.unshift({ + key: this.dataSource.length, + no: 'NO ' + this.dataSource.length, + description: '这是一段描述', + callNo: Math.floor(Math.random() * 1000), + status: Math.floor(Math.random() * 10) % 4, + updatedAt: '2018-07-26' + }) + }, + handleMenuClick (e) { + if (e.key === 'delete') { + this.remove() + } } } } @@ -170,6 +229,9 @@ export default { width: calc(100% - 216px); display: inline-block } + .operator{ + margin-bottom: 18px; + } @media screen and (max-width: 900px) { .fold { width: 100%; diff --git a/src/components/table/StandardTable.vue b/src/components/table/StandardTable.vue index 76fe27d..341e3be 100644 --- a/src/components/table/StandardTable.vue +++ b/src/components/table/StandardTable.vue @@ -1,11 +1,16 @@