From 5eb15c695e161b4b200f9c763265bfdb18b14431 Mon Sep 17 00:00:00 2001 From: 刘汉宸 Date: Wed, 17 Jun 2020 18:07:13 +0800 Subject: [PATCH] feat: 完善Scheme支持接口对接与表格多选 --- packages/scheme/index.vue | 225 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++--------------------------- 1 file changed, 198 insertions(+), 27 deletions(-) diff --git a/packages/scheme/index.vue b/packages/scheme/index.vue index a9f3e86..c86ea25 100644 --- a/packages/scheme/index.vue +++ b/packages/scheme/index.vue @@ -13,8 +13,8 @@ display: flex; flex-wrap: wrap; align-items: center; - line-height: 1; justify-content: flex-start; + line-height: 1; .el-button + .el-button { margin-left: 0; } @@ -23,6 +23,20 @@ margin-bottom: 10px; } } + &__table { + &-operation { + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: flex-start; + .el-button + .el-button { + margin-left: 0; + } + .el-button { + margin-right: 10px; + } + } + } &__dialog-button { display: flex; align-items: center; @@ -32,6 +46,27 @@ &__footer { margin-top: 10px; text-align: right; + display: flex; + justify-content: space-between; + align-items: center; + .selection-info { + word-break: break-all; + white-space: nowrap; + font-size: 12px; + color: #606266; + .num { + color: #000; + font-weight: bold; + padding: 0 5px; + font-size: 16px; + } + .el-button { + margin-left: 5px; + } + } + .el-pagination { + flex: auto; + } } } @@ -42,7 +77,7 @@
- +
@@ -52,17 +87,38 @@
- + +
-
+
+
+ 已选中 + {{ selection.length }} + 项 + + 清除 + +
- +
@@ -105,12 +161,26 @@ export default { type: Boolean, default: true, }, + pagination: { + type: Boolean, + default: true, + }, size: { type: String, default: 'mini', }, + tableProps: { + type: Object, + default: () => ({}), + }, formModel: Object, filterModel: Object, + auto: Boolean, + realSelection: Boolean, + searchAPI: Function, + submitAPI: Function, + getAPI: Function, + deleteAPI: Function, }, data() { return { @@ -121,17 +191,23 @@ export default { dialogType: 'none', dialogLoading: false, dialogTitle: '', - dialogCloseCallback: undefined, currentPage: 1, - pageSize: 10, + // pageSize: 10, + pageSize: 5, total: 127, - pageSizes: [10, 20, 50], - tableData: [ - { name: '张三', age: 16, driver: { name: '王五', bank: { name: '中国银行' } } }, - { name: '李四', age: 24 }, - ], + // pageSizes: [10, 20, 50], + pageSizes: [1, 2, 5], + tableData: [], + submitting: false, + loading: false, + selection: [], }; }, + created() { + if (this.auto) { + this.search(); + } + }, filters: { noRulesFilter(val = []) { let list = cloneDeep(val); @@ -163,17 +239,95 @@ export default { }, }, methods: { + // 空Promise + emptyPromise() { + return new Promise(resolve => { + resolve(); + }); + }, + // 设置第二行选中 + toggleRowSelection() { + this.tableData.forEach(row => { + if (this.selection.find(item => item.id === row.id)) { + this.$refs.table && this.$refs.table.toggleRowSelection(row); + } + }); + }, + // 表格选中状态 + onTableSelectionChange(selection, type) { + if (this.realSelection) { + if (type === 'check') { + const result = this.selection || []; + selection.forEach(item => { + if (!result.find(i => i.id === item.id)) { + result.push(item); + } + }); + this.selection = result; + } else if (type === 'uncheck') { + selection.forEach(i => { + this.selection = this.selection.filter(item => item.id !== i.id); + }); + } + } + }, + // 表格选中 + onTableSelection(selection) { + if (!this.realSelection) { + this.selection = selection; + } + }, + // 清除表格选中 + clearSelection() { + this.$refs.table && this.$refs.table.clearSelection(); + this.selection = []; + }, + // 搜索 + async search() { + this.loading = true; + const params = { + ...this._filterModel, + currentPage: this.currentPage, + pageSize: this.pageSize, + }; + const searchAPI = this.searchAPI || this.emptyPromise; + await searchAPI(params) + .then(response => { + const { result, totalCount } = response || {}; + this.tableData = result; + this.total = totalCount; + this.$nextTick(() => { + this.toggleRowSelection(); + }); + }) + .catch(() => { + this.$message.error('失败'); + }); + this.loading = false; + }, + // 更新筛选model onFilterInput(val) { this.filterForm = val || {}; this.$emit('update:filterModel', val || {}); }, + // 更新表单model onFormInput(val) { this.editForm = val || {}; this.$emit('update:formModel', val || {}); }, - onFormValidate(valid, model) { + // 表单提交且通过校验 + async onFormValidate(valid, model) { if (valid) { - console.log(model); + this.submitting = true; + const submitAPI = this.submitAPI || this.emptyPromise; + await submitAPI(model, { type: this.dialogType }) + .then(() => { + this.closeDialog(); + }) + .catch(() => { + this.$message.error('失败'); + }); + this.submitting = false; } }, // 表单按钮确定 @@ -193,13 +347,31 @@ export default { this.openDialog('new', '新增'); }, // 打开编辑弹出框 - openEdit({ row }) { + async openEdit({ row }) { this.dialogLoading = true; - setTimeout(() => { - this.editForm = { ...row }; - this.dialogLoading = false; - }, 300); this.openDialog('edit', '编辑'); + const getRow = () => { + this.editForm = { ...row }; + }; + const getAPI = this.getAPI || getRow; + await getAPI(row).then(result => { + this.editForm = { ...result }; + }); + this.dialogLoading = false; + }, + // 删除 + async handleDelete({ row, $index }) { + const deleteAPI = this.deleteAPI || this.emptyPromise; + const loading = this.$loading({ + text: '处理中', + spinner: 'el-icon-loading', + background: 'rgba(255, 255, 255, 0.5)', + }); + await deleteAPI(row).then(() => { + this.tableData.splice($index, 1); + this.$message.success('删除成功'); + }); + loading.close(); }, // 打开弹出框 openDialog(type, title) { @@ -207,32 +379,31 @@ export default { this.dialogRender = true; this.dialogType = type; this.dialogTitle = title; - this.dialogCloseCallback = undefined; }, // 关闭弹出框 - closeDialog(callback) { + closeDialog() { this.dialogVisible = false; - this.dialogCloseCallback = callback instanceof Event ? undefined : callback; }, // 清空表单 clearEditForm() { this.editForm = {}; }, - // 弹出框关闭 + // 弹出框关闭动画结束 onDialogClosed() { this.clearEditForm(); this.dialogRender = false; this.dialogType = 'none'; - this.dialogCloseCallback && this.dialogCloseCallback(); }, // 分页-每页个数 handleSizeChange(val) { this.pageSize = val; this.currentPage = 1; + this.$nextTick(this.search); }, // 分页-当前页数 handleCurrentChange(val) { this.currentPage = val; + this.$nextTick(this.search); }, }, }; -- libgit2 0.21.0