From f04b9a03bb97ce24f3c022b091cc351c59f63280 Mon Sep 17 00:00:00 2001 From: elunez <42142420+elunez@users.noreply.github.com> Date: Thu, 5 Mar 2020 09:33:33 +0800 Subject: [PATCH] =?UTF-8?q?=E5=90=8C=E4=B8=80=E7=95=8C=E9=9D=A2=E5=86=85?= =?UTF-8?q?=EF=BC=8C=E5=A4=9ACRUD=E5=85=B1=E5=AD=98=20(#79)?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * 同一界面内，多CRUD共存 * 解决多crud，对inject修改造成注入混乱，弃用Vue注入方式 * 自定义数据id字段名 --- src/components/Crud/UD.operation.vue | 2 +- src/components/Crud/crud.js | 123 ++++++++++++++------------- 2 files changed, 67 insertions(+), 58 deletions(-) diff --git a/src/components/Crud/UD.operation.vue b/src/components/Crud/UD.operation.vue index d99d2b1..c60abd7 100644 --- a/src/components/Crud/UD.operation.vue +++ b/src/components/Crud/UD.operation.vue @@ -5,7 +5,7 @@

{{ msg }}

取消 - 确定 + 确定
diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js index b950dd6..0f0e7da 100644 --- a/src/components/Crud/crud.js +++ b/src/components/Crud/crud.js @@ -8,9 +8,13 @@ import Vue from 'vue' * @param {*} options
* @return crud instance. * @example + * 要使用多crud时，请在关联crud的组件处使用crud-tag进行标记，如： */ function CRUD(options) { const defaultOptions = { + tag: 'default', + // id字段名 + idField: 'id', // 标题 title: '', // 请求数据的url @@ -34,7 +38,7 @@ function CRUD(options) { // CRUD Method crudMethod: { add: (form) => {}, - delete: (id) => {}, + del: (id) => {}, edit: (form) => {}, get: (id) => {} }, @@ -163,7 +167,7 @@ function CRUD(options) { return } crud.status.edit = CRUD.STATUS.PREPARED - crud.getDataStatus(data.id).edit = CRUD.STATUS.PREPARED + crud.getDataStatus(crud.getDataId(data)).edit = CRUD.STATUS.PREPARED callVmHook(crud, CRUD.HOOK.afterToEdit, crud.form) callVmHook(crud, CRUD.HOOK.afterToCU, crud.form) }, @@ -172,7 +176,7 @@ function CRUD(options) { * @param {*} data 数据项 */ toDelete(data) { - crud.getDataStatus(data.id).delete = CRUD.STATUS.PREPARED + crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.PREPARED }, /** * 取消删除 @@ -182,7 +186,7 @@ function CRUD(options) { if (!callVmHook(crud, CRUD.HOOK.beforeDeleteCancel, data)) { return } - crud.getDataStatus(data.id).delete = CRUD.STATUS.NORMAL + crud.getDataStatus(crud.getDataId(data)).delete = CRUD.STATUS.NORMAL callVmHook(crud, CRUD.HOOK.afterDeleteCancel, data) }, /** @@ -202,7 +206,7 @@ function CRUD(options) { return } crud.status.edit = CRUD.STATUS.NORMAL - crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL + crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL } crud.resetForm() if (addStatus === CRUD.STATUS.PREPARED) { @@ -266,7 +270,7 @@ function CRUD(options) { crud.status.edit = CRUD.STATUS.PROCESSING crud.crudMethod.edit(crud.form).then(() => { crud.status.edit = CRUD.STATUS.NORMAL - crud.getDataStatus(crud.form.id).edit = CRUD.STATUS.NORMAL + crud.getDataStatus(crud.getDataId(crud.form)).edit = CRUD.STATUS.NORMAL crud.editSuccessNotify() crud.resetForm() callVmHook(crud, CRUD.HOOK.afterSubmit) @@ -287,11 +291,11 @@ function CRUD(options) { if (data instanceof Array) { delAll = true data.forEach(val => { - ids.push(val.id) + ids.push(this.getDataId(val)) }) } else { - ids.push(data.id) - dataStatus = crud.getDataStatus(data.id) + ids.push(this.getDataId(data)) + dataStatus = crud.getDataStatus(this.getDataId(data)) } if (!callVmHook(crud, CRUD.HOOK.beforeDelete, data)) { return @@ -401,7 +405,7 @@ function CRUD(options) { const dataStatus = {} function resetStatus(datas) { datas.forEach(e => { - dataStatus[e.id] = { + dataStatus[crud.getDataId(e)] = { delete: 0, edit: 0 } @@ -441,7 +445,7 @@ function CRUD(options) { */ selectChange(selection, row) { // 如果selection中存在row代表是选中，否则是取消选中 - if (selection.find(val => { return val.id === row.id })) { + if (selection.find(val => { return this.getDataId(val) === this.getDataId(row) })) { if (row.children) { row.children.forEach(val => { crud.findVM('presenter').$refs['table'].toggleRowSelection(val, true) @@ -482,6 +486,12 @@ function CRUD(options) { }, updateProp(name, value) { Vue.set(crud.props, name, value) + }, + getDataId(data) { + if (!data.hasOwnProperty(this.idField)) { + console.error('[CRUD error]: no property [%s] in %o', this.idField, data) + } + return data[this.idField] } } const crud = Object.assign({}, data) @@ -530,6 +540,7 @@ function callVmHook(crud, hook) { if (crud.debug) { console.log('callVmHook: ' + hook) } + const tagHook = crud.tag ? hook + '$' + crud.tag : null let ret = true const nargs = [crud] for (let i = 2; i < arguments.length; ++i) { @@ -542,6 +553,9 @@ function callVmHook(crud, hook) { if (vm[hook]) { ret = vm[hook].apply(vm, nargs) !== false && ret } + if (tagHook && vm[tagHook]) { + ret = vm[tagHook].apply(vm, nargs) !== false && ret + } }) return ret } @@ -558,20 +572,36 @@ function mergeOptions(src, opts) { return optsRet } +/** + * 查找crud + * @param {*} vm + * @param {string} tag + */ +function lookupCrud(vm, tag) { + tag = tag || vm.$attrs['crud-tag'] || 'default' + // function lookupCrud(vm, tag) { + if (vm.$crud) { + const ret = vm.$crud[tag] + if (ret) { + return ret + } + } + return vm.$parent ? lookupCrud(vm.$parent, tag) : undefined +} + /** * crud主页 */ function presenter(crud) { return { - inject: ['crud'], beforeCreate() { - // 由于initInjections在initProvide之前执行，如果该组件自己就需要crud，需要在initInjections前准备好crud - this._provided = { - crud, - 'crud.query': crud.query, - 'crud.page': crud.page, - 'crud.form': crud.form + this.$crud = this.$crud || {} + if (this.$crud[crud.tag]) { + console.error('[CRUD error]: ' + 'crud with tag [' + crud.tag + ' is already exist') } + this.$crud[crud.tag] = crud + this.crud = crud + crud.registerVM('presenter', this, 0) }, data() { return { @@ -582,13 +612,12 @@ function presenter(crud) { parseTime }, created() { - this.crud.registerVM('presenter', this, 0) if (crud.queryOnPresenterCreated) { crud.toQuery() } }, - beforeDestroy() { - this.crud.unregisterVM(this) + destroyed() { + crud.unregisterVM(this) }, mounted() { const columns = [] @@ -615,18 +644,12 @@ function presenter(crud) { */ function header() { return { - inject: { - crud: { - from: 'crud' - }, - query: { - from: 'crud.query' - } - }, - created() { + beforeCreate() { + this.crud = lookupCrud(this) + this.query = this.crud.query this.crud.registerVM('header', this, 1) }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } } @@ -637,18 +660,12 @@ function header() { */ function pagination() { return { - inject: { - crud: { - from: 'crud' - }, - page: { - from: 'crud.page' - } - }, - created() { + beforeCreate() { + this.crud = lookupCrud(this) + this.page = this.crud.page this.crud.registerVM('pagination', this, 2) }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } } @@ -659,20 +676,16 @@ function pagination() { */ function form(defaultForm) { return { - inject: { - crud: { - from: 'crud' - }, - form: { - from: 'crud.form' - } + beforeCreate() { + this.crud = lookupCrud(this) + this.form = this.crud.form + this.crud.registerVM('form', this, 3) }, created() { - this.crud.registerVM('form', this, 3) this.crud.defaultForm = defaultForm this.crud.resetForm() }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } } @@ -687,15 +700,11 @@ function crud(options = {}) { } options = mergeOptions(defaultOptions, options) return { - inject: { - crud: { - from: 'crud' - } - }, - created() { + beforeCreate() { + this.crud = lookupCrud(this) this.crud.registerVM(options.type, this) }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } }