From 0c771b34dfc8cd28942ad98365e78cec1a453612 Mon Sep 17 00:00:00 2001 From: Moxun1639 Date: Wed, 26 Feb 2020 13:54:51 +0800 Subject: [PATCH 1/5] =?UTF-8?q?=E5=90=8C=E4=B8=80=E7=95=8C=E9=9D=A2?= =?UTF-8?q?=E5=86=85=EF=BC=8C=E5=A4=9ACRUD=E5=85=B1=E5=AD=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Crud/crud.js | 58 ++++++++++++++++++++++++++++++++----- 1 file changed, 51 insertions(+), 7 deletions(-) diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js index b950dd6..a62df3f 100644 --- a/src/components/Crud/crud.js +++ b/src/components/Crud/crud.js @@ -8,9 +8,11 @@ import Vue from 'vue' * @param {*} options
* @return crud instance. * @example + * 要使用多crud时，请在关联crud的组件处使用crud-tag进行标记，如： */ function CRUD(options) { const defaultOptions = { + tag: '', // 标题 title: '', // 请求数据的url @@ -530,6 +532,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 +545,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 +564,46 @@ function mergeOptions(src, opts) { return optsRet } +function getCrudPiName(crudTag) { + return 'crud' + (crudTag ? '$' + crudTag : '') +} + +/** + * 根据tag修正注入crud时from值 + * @param {*} vm + */ +function reviseInject(vm) { + if (vm.$attrs['crud-tag']) { + const inject = vm.$options.inject + for (const k in inject) { + const v = inject[k] + const from = v.from + if (from === 'crud' || from.startsWith('crud.')) { + v.from = from.replace('crud', getCrudPiName(vm.$attrs['crud-tag'])) + } + } + } +} + /** * crud主页 */ function presenter(crud) { + const crudPiName = getCrudPiName(crud.tag) return { - inject: ['crud'], + inject: { + crud: { + from: crudPiName + } + }, beforeCreate() { // 由于initInjections在initProvide之前执行，如果该组件自己就需要crud，需要在initInjections前准备好crud - this._provided = { - crud, - 'crud.query': crud.query, - 'crud.page': crud.page, - 'crud.form': crud.form - } + this._provided = Object.assign(this._provided || {}, { + [crudPiName]: crud, + [crudPiName + '.query']: crud.query, + [crudPiName + '.page']: crud.page, + [crudPiName + '.form']: crud.form + }) }, data() { return { @@ -623,6 +655,9 @@ function header() { from: 'crud.query' } }, + beforeCreate() { + reviseInject(this) + }, created() { this.crud.registerVM('header', this, 1) }, @@ -645,6 +680,9 @@ function pagination() { from: 'crud.page' } }, + beforeCreate() { + reviseInject(this) + }, created() { this.crud.registerVM('pagination', this, 2) }, @@ -667,6 +705,9 @@ function form(defaultForm) { from: 'crud.form' } }, + beforeCreate() { + reviseInject(this) + }, created() { this.crud.registerVM('form', this, 3) this.crud.defaultForm = defaultForm @@ -692,6 +733,9 @@ function crud(options = {}) { from: 'crud' } }, + beforeCreate() { + reviseInject(this) + }, created() { this.crud.registerVM(options.type, this) }, From 2310594314ffc4d0848f45d5eaaf01a9171d0b78 Mon Sep 17 00:00:00 2001 From: Moxun1639 Date: Thu, 27 Feb 2020 11:50:20 +0800 Subject: [PATCH 2/5] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E5=A4=9Acrud=EF=BC=8C?= =?UTF-8?q?=E5=AF=B9inject=E4=BF=AE=E6=94=B9=E9=80=A0=E6=88=90=E6=B3=A8?= =?UTF-8?q?=E5=85=A5=E6=B7=B7=E4=B9=B1=EF=BC=8C=E5=BC=83=E7=94=A8Vue?= =?UTF-8?q?=E6=B3=A8=E5=85=A5=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Crud/crud.js | 108 +++++++++++------------------------- 1 file changed, 32 insertions(+), 76 deletions(-) diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js index a62df3f..75c6c99 100644 --- a/src/components/Crud/crud.js +++ b/src/components/Crud/crud.js @@ -12,7 +12,7 @@ import Vue from 'vue' */ function CRUD(options) { const defaultOptions = { - tag: '', + tag: 'default', // 标题 title: '', // 请求数据的url @@ -36,7 +36,7 @@ function CRUD(options) { // CRUD Method crudMethod: { add: (form) => {}, - delete: (id) => {}, + del: (id) => {}, edit: (form) => {}, get: (id) => {} }, @@ -564,46 +564,35 @@ function mergeOptions(src, opts) { return optsRet } -function getCrudPiName(crudTag) { - return 'crud' + (crudTag ? '$' + crudTag : '') -} - /** - * 根据tag修正注入crud时from值 + * 查找crud * @param {*} vm + * @param {string} tag */ -function reviseInject(vm) { - if (vm.$attrs['crud-tag']) { - const inject = vm.$options.inject - for (const k in inject) { - const v = inject[k] - const from = v.from - if (from === 'crud' || from.startsWith('crud.')) { - v.from = from.replace('crud', getCrudPiName(vm.$attrs['crud-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) { - const crudPiName = getCrudPiName(crud.tag) return { - inject: { - crud: { - from: crudPiName - } - }, beforeCreate() { - // 由于initInjections在initProvide之前执行，如果该组件自己就需要crud，需要在initInjections前准备好crud - this._provided = Object.assign(this._provided || {}, { - [crudPiName]: crud, - [crudPiName + '.query']: crud.query, - [crudPiName + '.page']: crud.page, - [crudPiName + '.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 + crud.registerVM('presenter', this, 0) }, data() { return { @@ -614,13 +603,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 = [] @@ -647,21 +635,12 @@ function presenter(crud) { */ function header() { return { - inject: { - crud: { - from: 'crud' - }, - query: { - from: 'crud.query' - } - }, beforeCreate() { - reviseInject(this) - }, - created() { + this.crud = lookupCrud(this) + this.query = this.crud.query this.crud.registerVM('header', this, 1) }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } } @@ -672,21 +651,12 @@ function header() { */ function pagination() { return { - inject: { - crud: { - from: 'crud' - }, - page: { - from: 'crud.page' - } - }, beforeCreate() { - reviseInject(this) - }, - created() { + this.crud = lookupCrud(this) + this.page = this.crud.page this.crud.registerVM('pagination', this, 2) }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } } @@ -697,23 +667,16 @@ function pagination() { */ function form(defaultForm) { return { - inject: { - crud: { - from: 'crud' - }, - form: { - from: 'crud.form' - } - }, beforeCreate() { - reviseInject(this) + 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) } } @@ -728,18 +691,11 @@ function crud(options = {}) { } options = mergeOptions(defaultOptions, options) return { - inject: { - crud: { - from: 'crud' - } - }, beforeCreate() { - reviseInject(this) - }, - created() { + this.crud = lookupCrud(this) this.crud.registerVM(options.type, this) }, - beforeDestroy() { + destroyed() { this.crud.unregisterVM(this) } } From 6e2a9f0f09dd670d04ca7bf19b0109a63d15d737 Mon Sep 17 00:00:00 2001 From: Moxun1639 Date: Mon, 2 Mar 2020 23:47:12 +0800 Subject: [PATCH 3/5] =?UTF-8?q?=E8=87=AA=E5=AE=9A=E4=B9=89=E6=95=B0?= =?UTF-8?q?=E6=8D=AEid=E5=AD=97=E6=AE=B5=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Crud/UD.operation.vue | 2 +- src/components/Crud/crud.js | 29 ++++++++++++++++++---------- 2 files changed, 20 insertions(+), 11 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 75c6c99..0f0e7da 100644 --- a/src/components/Crud/crud.js +++ b/src/components/Crud/crud.js @@ -13,6 +13,8 @@ import Vue from 'vue' function CRUD(options) { const defaultOptions = { tag: 'default', + // id字段名 + idField: 'id', // 标题 title: '', // 请求数据的url @@ -165,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) }, @@ -174,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 }, /** * 取消删除 @@ -184,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) }, /** @@ -204,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) { @@ -268,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) @@ -289,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 @@ -403,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 } @@ -443,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) @@ -484,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) @@ -592,6 +600,7 @@ function presenter(crud) { 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() { From 204710f221fadf5414ab405fe1e47bc86a72ed88 Mon Sep 17 00:00:00 2001 From: Moxun1639 Date: Fri, 6 Mar 2020 20:12:34 +0800 Subject: [PATCH 4/5] =?UTF-8?q?=E4=BB=A5$options.cruds()=E6=96=B9=E5=BC=8F?= =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E5=8C=96crud=EF=BC=8C=E9=81=BF=E5=85=8D?= =?UTF-8?q?=E5=A4=9A=E7=BB=84=E4=BB=B6=E5=AE=9E=E4=BE=8B=E5=85=B1=E4=BA=AB?= =?UTF-8?q?crud?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Crud/crud.js | 29 ++++++++++++++++++------- src/views/generator/index.vue | 7 +++--- src/views/mnt/app/index.vue | 8 ++++--- src/views/mnt/database/index.vue | 8 ++++--- src/views/mnt/deploy/index.vue | 9 +++++--- src/views/mnt/deployHistory/index.vue | 8 ++++--- src/views/mnt/server/index.vue | 8 ++++--- src/views/monitor/log/errorLog.vue | 7 +++--- src/views/monitor/log/index.vue | 7 +++--- src/views/monitor/online/index.vue | 7 +++--- src/views/monitor/server/index.vue | 7 +++--- src/views/system/dept/index.vue | 7 +++--- src/views/system/job/index.vue | 18 +++++++-------- src/views/system/menu/index.vue | 6 +++-- src/views/system/role/index.vue | 7 +++--- src/views/system/timing/index.vue | 7 +++--- src/views/system/user/index.vue | 7 +++--- src/views/tools/picture/index.vue | 7 +++--- src/views/tools/storage/local/index.vue | 7 +++--- src/views/tools/storage/qiniu/index.vue | 7 +++--- 20 files changed, 108 insertions(+), 70 deletions(-) diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js index 0f0e7da..133f01e 100644 --- a/src/components/Crud/crud.js +++ b/src/components/Crud/crud.js @@ -593,15 +593,24 @@ function lookupCrud(vm, tag) { * crud主页 */ function presenter(crud) { + if (crud) { + console.warn('[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }') + } return { beforeCreate() { this.$crud = this.$crud || {} - if (this.$crud[crud.tag]) { - console.error('[CRUD error]: ' + 'crud with tag [' + crud.tag + ' is already exist') + let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud + if (!(cruds instanceof Array)) { + cruds = [cruds] } - this.$crud[crud.tag] = crud - this.crud = crud - crud.registerVM('presenter', this, 0) + cruds.forEach(ele => { + if (this.$crud[ele.tag]) { + console.error('[CRUD error]: ' + 'crud with tag [' + ele.tag + ' is already exist') + } + this.$crud[ele.tag] = ele + ele.registerVM('presenter', this, 0) + }) + this.crud = this.$crud['defalut'] || cruds.length > 0 ? cruds[0] : null }, data() { return { @@ -612,12 +621,16 @@ function presenter(crud) { parseTime }, created() { - if (crud.queryOnPresenterCreated) { - crud.toQuery() + for (const k in this.$crud) { + if (this.$crud[k].queryOnPresenterCreated) { + this.$crud[k].toQuery() + } } }, destroyed() { - crud.unregisterVM(this) + for (const k in this.$crud) { + this.$crud[k].unregisterVM(this) + } }, mounted() { const columns = [] diff --git a/src/views/generator/index.vue b/src/views/generator/index.vue index a6404db..9c7448e 100644 --- a/src/views/generator/index.vue +++ b/src/views/generator/index.vue @@ -63,12 +63,13 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ url: 'api/generator/tables' }) export default { name: 'GeneratorIndex', components: { pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header()], + cruds() { + return CRUD({ url: 'api/generator/tables' }) + }, + mixins: [presenter(), header()], data() { return { syncLoading: false diff --git a/src/views/mnt/app/index.vue b/src/views/mnt/app/index.vue index 921ca12..75b36eb 100644 --- a/src/views/mnt/app/index.vue +++ b/src/views/mnt/app/index.vue @@ -95,13 +95,15 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '应用', url: 'api/app', crudMethod: { ...crudApp }}) + const defaultForm = { id: null, name: null, port: 8080, uploadPath: '/opt/upload', deployPath: '/opt/app', backupPath: '/opt/backup', startScript: null, deployScript: null } export default { name: 'App', components: { pagination, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '应用', url: 'api/app', crudMethod: { ...crudApp }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { currentRow: null, diff --git a/src/views/mnt/database/index.vue b/src/views/mnt/database/index.vue index 89faaec..fb31149 100644 --- a/src/views/mnt/database/index.vue +++ b/src/views/mnt/database/index.vue @@ -89,13 +89,15 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '数据库', url: 'api/database', crudMethod: { ...crudDatabase }}) + const defaultForm = { id: null, name: null, jdbcUrl: 'jdbc:mysql://', userName: null, pwd: null } export default { name: 'DataBase', components: { eForm, pagination, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '数据库', url: 'api/database', crudMethod: { ...crudDatabase }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { currentRow: {}, diff --git a/src/views/mnt/deploy/index.vue b/src/views/mnt/deploy/index.vue index 14f7017..c57a0e8 100644 --- a/src/views/mnt/deploy/index.vue +++ b/src/views/mnt/deploy/index.vue @@ -128,12 +128,15 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '部署', url: 'api/deploy', crudMethod: { ...crudDeploy }}) + const defaultForm = { id: null, app: { id: null }, deploys: [] } export default { + name: 'Deploy', components: { dForm, fForm, pagination, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '部署', url: 'api/deploy', crudMethod: { ...crudDeploy }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { currentRow: {}, selectIndex: '', appName: '', urlHistory: '', diff --git a/src/views/mnt/deployHistory/index.vue b/src/views/mnt/deployHistory/index.vue index c9cb61c..14c2d9a 100644 --- a/src/views/mnt/deployHistory/index.vue +++ b/src/views/mnt/deployHistory/index.vue @@ -61,12 +61,14 @@ import CRUD, { presenter, header } from '@crud/crud' import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '部署历史', url: 'api/deployHistory', crudMethod: { del }}) + export default { name: 'DeployHistory', components: { pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header()], + cruds() { + return CRUD({ title: '部署历史', url: 'api/deployHistory', crudMethod: { del }}) + }, + mixins: [presenter(), header()], data() { return { delLoading: false, diff --git a/src/views/mnt/server/index.vue b/src/views/mnt/server/index.vue index 3d1be0d..e19938f 100644 --- a/src/views/mnt/server/index.vue +++ b/src/views/mnt/server/index.vue @@ -81,13 +81,15 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '服务器', url: 'api/serverDeploy', crudMethod: { ...crudServer }}) + const defaultForm = { id: null, name: null, ip: null, port: 22, account: 'root', password: null } export default { name: 'Server', components: { pagination, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '服务器', url: 'api/serverDeploy', crudMethod: { ...crudServer }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { accountList: [], diff --git a/src/views/monitor/log/errorLog.vue b/src/views/monitor/log/errorLog.vue index fe473ed..30a7fb8 100644 --- a/src/views/monitor/log/errorLog.vue +++ b/src/views/monitor/log/errorLog.vue @@ -61,12 +61,13 @@ import CRUD, { presenter } from '@crud/crud' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '异常日志', url: 'api/logs/error' }) export default { name: 'ErrorLog', components: { Search, crudOperation, pagination }, - mixins: [presenter(defaultCrud)], + cruds() { + return CRUD({ title: '异常日志', url: 'api/logs/error' }) + }, + mixins: [presenter()], data() { return { errorInfo: '', dialog: false diff --git a/src/views/monitor/log/index.vue b/src/views/monitor/log/index.vue index 323805b..15d70fe 100644 --- a/src/views/monitor/log/index.vue +++ b/src/views/monitor/log/index.vue @@ -60,12 +60,13 @@ import CRUD, { presenter } from '@crud/crud' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '日志', url: 'api/logs' }) export default { name: 'Log', components: { Search, crudOperation, pagination }, - mixins: [presenter(defaultCrud)], + cruds() { + return CRUD({ title: '日志', url: 'api/logs' }) + }, + mixins: [presenter()], created() { this.crud.optShow = { add: false, diff --git a/src/views/monitor/online/index.vue b/src/views/monitor/online/index.vue index 11fcda1..2de95ad 100644 --- a/src/views/monitor/online/index.vue +++ b/src/views/monitor/online/index.vue @@ -64,12 +64,13 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ url: 'auth/online', title: '在线用户' }) export default { name: 'OnlineUser', components: { pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header(), crud()], + cruds() { + return CRUD({ url: 'auth/online', title: '在线用户' }) + }, + mixins: [presenter(), header(), crud()], data() { return { delLoading: false, diff --git a/src/views/monitor/server/index.vue b/src/views/monitor/server/index.vue index 3f0b3d5..ca3f3a5 100644 --- a/src/views/monitor/server/index.vue +++ b/src/views/monitor/server/index.vue @@ -107,13 +107,14 @@ import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '监控', url: 'api/server', sort: 'sort,asc', crudMethod: { ...crudServer }}) const defaultForm = { id: null, address: 'localhost', name: null, ip: null, port: 8777, state: null, cpuRate: null, cpuCore: null, memTotal: null, memUsed: null, diskTotal: null, diskUsed: null, swapTotal: null, swapUsed: null, sort: 999 } export default { name: 'ServerMonitor', components: { pagination, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '监控', url: 'api/server', sort: 'sort,asc', crudMethod: { ...crudServer }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { permission: { diff --git a/src/views/system/dept/index.vue b/src/views/system/dept/index.vue index 2b92f1d..3fdd313 100644 --- a/src/views/system/dept/index.vue +++ b/src/views/system/dept/index.vue @@ -84,13 +84,14 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) const defaultForm = { id: null, name: null, pid: 1, enabled: 'true' } export default { name: 'Dept', components: { Treeselect, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '部门', url: 'api/dept', crudMethod: { ...crudDept }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], // 设置数据字典 dicts: ['dept_status'], data() { diff --git a/src/views/system/job/index.vue b/src/views/system/job/index.vue index e068619..d62ab4c 100644 --- a/src/views/system/job/index.vue +++ b/src/views/system/job/index.vue @@ -66,18 +66,18 @@ import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' import udOperation from '@crud/UD.operation' -// crud交由presenter持有 -const crud = CRUD({ - title: '岗位', - url: 'api/job', - sort: ['sort,asc', 'id,desc'], - crudMethod: { ...crudJob } -}) - export default { name: 'Job', components: { eHeader, eForm, crudOperation, pagination, udOperation }, - mixins: [presenter(crud)], + cruds() { + return CRUD({ + title: '岗位', + url: 'api/job', + sort: ['sort,asc', 'id,desc'], + crudMethod: { ...crudJob } + }) + }, + mixins: [presenter()], // 数据字典 dicts: ['job_status'], data() { diff --git a/src/views/system/menu/index.vue b/src/views/system/menu/index.vue index 3fd7eaf..213e87b 100644 --- a/src/views/system/menu/index.vue +++ b/src/views/system/menu/index.vue @@ -156,12 +156,14 @@ import crudOperation from '@crud/CRUD.operation' import udOperation from '@crud/UD.operation' // crud交由presenter持有 -const defaultCrud = CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }}) const defaultForm = { id: null, name: null, sort: 999, path: null, component: null, componentName: null, iframe: false, roles: [], pid: 0, icon: null, cache: false, hidden: false, type: 0, permission: null } export default { name: 'Menu', components: { Treeselect, IconSelect, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '菜单', url: 'api/menus', crudMethod: { ...crudMenu }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { menus: [], diff --git a/src/views/system/role/index.vue b/src/views/system/role/index.vue index 3b7e274..38962cf 100644 --- a/src/views/system/role/index.vue +++ b/src/views/system/role/index.vue @@ -133,13 +133,14 @@ import pagination from '@crud/Pagination' import Treeselect from '@riophae/vue-treeselect' import '@riophae/vue-treeselect/dist/vue-treeselect.css' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }}) const defaultForm = { id: null, name: null, depts: [], remark: null, dataScope: '全部', level: 3, permission: null } export default { name: 'Role', components: { Treeselect, pagination, crudOperation, rrOperation, udOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '角色', url: 'api/roles', sort: 'level,asc', crudMethod: { ...crudRoles }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { defaultProps: { children: 'children', label: 'label' }, diff --git a/src/views/system/timing/index.vue b/src/views/system/timing/index.vue index eb35270..e01bbc5 100644 --- a/src/views/system/timing/index.vue +++ b/src/views/system/timing/index.vue @@ -117,13 +117,14 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }}) const defaultForm = { id: null, jobName: null, beanName: null, methodName: null, params: null, cronExpression: null, isPause: false, remark: null } export default { name: 'Timing', components: { Log, pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '定时任务', url: 'api/jobs', crudMethod: { ...crudJob }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { delLoading: false, diff --git a/src/views/system/user/index.vue b/src/views/system/user/index.vue index 1d4c0f2..78ed191 100644 --- a/src/views/system/user/index.vue +++ b/src/views/system/user/index.vue @@ -209,13 +209,14 @@ import { mapGetters } from 'vuex' import '@riophae/vue-treeselect/dist/vue-treeselect.css' let userRoles = [] -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) const defaultForm = { id: null, username: null, nickName: null, sex: '男', email: null, enabled: 'false', roles: [], job: { id: null }, dept: { id: null }, phone: null } export default { name: 'User', components: { Treeselect, crudOperation, rrOperation, udOperation, pagination }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '用户', url: 'api/users', crudMethod: { ...crudUser }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], // 数据字典 dicts: ['user_status'], data() { diff --git a/src/views/tools/picture/index.vue b/src/views/tools/picture/index.vue index 7ece3f8..39cbf36 100644 --- a/src/views/tools/picture/index.vue +++ b/src/views/tools/picture/index.vue @@ -102,12 +102,13 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '图片', url: 'api/pictures', crudMethod: { ...crudPic }}) export default { name: 'Pictures', components: { pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header(), crud()], + cruds() { + return CRUD({ title: '图片', url: 'api/pictures', crudMethod: { ...crudPic }}) + }, + mixins: [presenter(), header(), crud()], data() { return { dialog: false, diff --git a/src/views/tools/storage/local/index.vue b/src/views/tools/storage/local/index.vue index 9058f28..7dbed91 100644 --- a/src/views/tools/storage/local/index.vue +++ b/src/views/tools/storage/local/index.vue @@ -124,12 +124,13 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }}) const defaultForm = { id: null, name: '' } export default { components: { pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header(), form(defaultForm), crud()], + cruds() { + return CRUD({ title: '文件', url: 'api/localStorage', crudMethod: { ...crudFile }}) + }, + mixins: [presenter(), header(), form(defaultForm), crud()], data() { return { delAllLoading: false, diff --git a/src/views/tools/storage/qiniu/index.vue b/src/views/tools/storage/qiniu/index.vue index aa6ec13..9f22d52 100644 --- a/src/views/tools/storage/qiniu/index.vue +++ b/src/views/tools/storage/qiniu/index.vue @@ -89,11 +89,12 @@ import rrOperation from '@crud/RR.operation' import crudOperation from '@crud/CRUD.operation' import pagination from '@crud/Pagination' -// crud交由presenter持有 -const defaultCrud = CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }}) export default { components: { eForm, pagination, crudOperation, rrOperation }, - mixins: [presenter(defaultCrud), header(), crud()], + cruds() { + return CRUD({ title: '七牛云文件', url: 'api/qiNiuContent', crudMethod: { ...crudQiNiu }}) + }, + mixins: [presenter(), header(), crud()], data() { return { permission: { From 314bc7b7509d1268047de6f4650317401d42bd7e Mon Sep 17 00:00:00 2001 From: Moxun1639 Date: Sun, 8 Mar 2020 19:16:30 +0800 Subject: [PATCH 5/5] =?UTF-8?q?=E8=A7=A3=E5=86=B3=E7=BB=84=E4=BB=B6?= =?UTF-8?q?=E5=AE=9E=E4=BE=8B=E4=B8=8Ecrud=EF=BC=8C=E5=8F=8A=E5=85=B6?= =?UTF-8?q?=E4=B8=ADpage=E3=80=81pagination=E3=80=81form=E6=9C=AA=E8=BF=9B?= =?UTF-8?q?=E8=A1=8C=E7=BB=91=E5=AE=9A=E5=85=B3=E8=81=94?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/Crud/crud.js | 39 ++++++++++++++++++++++++++++--------- 1 file changed, 30 insertions(+), 9 deletions(-) diff --git a/src/components/Crud/crud.js b/src/components/Crud/crud.js index 133f01e..121b7e4 100644 --- a/src/components/Crud/crud.js +++ b/src/components/Crud/crud.js @@ -597,6 +597,12 @@ function presenter(crud) { console.warn('[CRUD warn]: ' + 'please use $options.cruds() { return CRUD(...) or [CRUD(...), ...] }') } return { + data() { + // 在data中返回crud，是为了将crud与当前实例关联，组件观测crud相关属性变化 + return { + crud: this.crud + } + }, beforeCreate() { this.$crud = this.$crud || {} let cruds = this.$options.cruds instanceof Function ? this.$options.cruds() : crud @@ -610,12 +616,7 @@ function presenter(crud) { this.$crud[ele.tag] = ele ele.registerVM('presenter', this, 0) }) - this.crud = this.$crud['defalut'] || cruds.length > 0 ? cruds[0] : null - }, - data() { - return { - searchToggle: true - } + this.crud = this.$crud['defalut'] || cruds[0] }, methods: { parseTime @@ -657,9 +658,14 @@ function presenter(crud) { */ function header() { return { + data() { + return { + crud: this.crud, + query: this.crud.query + } + }, beforeCreate() { this.crud = lookupCrud(this) - this.query = this.crud.query this.crud.registerVM('header', this, 1) }, destroyed() { @@ -673,9 +679,14 @@ function header() { */ function pagination() { return { + data() { + return { + crud: this.crud, + page: this.crud.page + } + }, beforeCreate() { this.crud = lookupCrud(this) - this.page = this.crud.page this.crud.registerVM('pagination', this, 2) }, destroyed() { @@ -689,9 +700,14 @@ function pagination() { */ function form(defaultForm) { return { + data() { + return { + crud: this.crud, + form: this.crud.form + } + }, beforeCreate() { this.crud = lookupCrud(this) - this.form = this.crud.form this.crud.registerVM('form', this, 3) }, created() { @@ -713,6 +729,11 @@ function crud(options = {}) { } options = mergeOptions(defaultOptions, options) return { + data() { + return { + crud: this.crud + } + }, beforeCreate() { this.crud = lookupCrud(this) this.crud.registerVM(options.type, this)