字典管理使用CRUD组件改写,CRUD组件增加对table延迟实例化支持,完善组件注册、注销 (#83)

* 1. 字典管理使用CRUD组件改写
2. CRUD组件增加对table延迟实例化(例如使用v-if)支持
3. 完善CRUD实例与组件实例注册与注销

* 字典详情恢复之前风格
This commit is contained in:
Moxun
2020-03-09 09:04:37 +08:00
committed by GitHub
parent c6ebb071b7
commit 5c330a911d
4 changed files with 150 additions and 148 deletions

View File

@@ -47,7 +47,8 @@ function CRUD(options) {
add: true,
edit: true,
del: true,
download: true
download: true,
reset: true
},
// 自定义一些扩展属性
props: {},
@@ -95,7 +96,7 @@ function CRUD(options) {
total: 0
},
// 整体loading
loading: true,
loading: false,
// 导出的 Loading
downloadLoading: false,
// 删除的 Loading
@@ -150,6 +151,7 @@ function CRUD(options) {
* 启动添加
*/
toAdd() {
crud.resetForm()
if (!(callVmHook(crud, CRUD.HOOK.beforeToAdd, crud.form) && callVmHook(crud, CRUD.HOOK.beforeToCU, crud.form))) {
return
}
@@ -388,7 +390,7 @@ function CRUD(options) {
* @param {Array} data 数据
*/
resetForm(data) {
const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm())
const form = data || (typeof crud.defaultForm === 'object' ? JSON.parse(JSON.stringify(crud.defaultForm)) : crud.defaultForm.apply(crud.findVM('form')))
const crudFrom = crud.form
for (const key in form) {
if (crudFrom.hasOwnProperty(key)) {
@@ -492,6 +494,24 @@ function CRUD(options) {
console.error('[CRUD error]: no property [%s] in %o', this.idField, data)
}
return data[this.idField]
},
attchTable() {
const table = this.findVM('presenter').$refs.table
const columns = []
table.columns.forEach((e, index) => {
if (!e.property || e.type !== 'default') {
return
}
e.__index = index
columns.push({
property: e.property,
index,
label: e.label,
visible: true
})
})
this.updateProp('tableColumns', columns)
this.updateProp('table', table)
}
}
const crud = Object.assign({}, data)
@@ -519,6 +539,10 @@ function CRUD(options) {
this.vms.push(vmObj)
return
}
if (index < 4) { // 内置预留vm数
this.vms[index] = vmObj
return
}
this.vms.length = Math.max(this.vms.length, index)
this.vms.splice(index, 1, vmObj)
},
@@ -526,8 +550,20 @@ function CRUD(options) {
* 取消注册组件实例
* @param {*} vm 组件实例
*/
unregisterVM(vm) {
this.vms.splice(this.vms.findIndex(e => e && e.vm === vm), 1)
unregisterVM(type, vm) {
for (let i = this.vms.length - 1; i >= 0; i--) {
if (this.vms[i] === undefined) {
continue
}
if (this.vms[i].type === type && this.vms[i].vm === vm) {
if (i < 4) { // 内置预留vm数
this.vms[i] = undefined
} else {
this.vms.splice(i, 1)
}
break
}
}
}
})
// 冻结处理需要扩展数据的话使用crud.updateProp(name, value)以crud.props.name形式访问这个是响应式的可以做数据绑定
@@ -630,25 +666,14 @@ function presenter(crud) {
},
destroyed() {
for (const k in this.$crud) {
this.$crud[k].unregisterVM(this)
this.$crud[k].unregisterVM('presenter', this)
}
},
mounted() {
const columns = []
this.$refs.table.columns.forEach((e, index) => {
if (!e.property || e.type !== 'default') {
return
}
e.__index = index
columns.push({
property: e.property,
index,
label: e.label,
visible: true
})
})
this.crud.updateProp('tableColumns', columns)
this.crud.updateProp('table', this.$refs.table)
// 如果table未实例化例如使用了v-if请稍后在适当时机crud.attchTable刷新table信息
if (this.$refs.table !== undefined) {
this.crud.attchTable()
}
}
}
}
@@ -669,7 +694,7 @@ function header() {
this.crud.registerVM('header', this, 1)
},
destroyed() {
this.crud.unregisterVM(this)
this.crud.unregisterVM('header', this)
}
}
}
@@ -690,7 +715,7 @@ function pagination() {
this.crud.registerVM('pagination', this, 2)
},
destroyed() {
this.crud.unregisterVM(this)
this.crud.unregisterVM('pagination', this)
}
}
}
@@ -715,7 +740,7 @@ function form(defaultForm) {
this.crud.resetForm()
},
destroyed() {
this.crud.unregisterVM(this)
this.crud.unregisterVM('form', this)
}
}
}
@@ -739,7 +764,7 @@ function crud(options = {}) {
this.crud.registerVM(options.type, this)
},
destroyed() {
this.crud.unregisterVM(this)
this.crud.unregisterVM(options.type, this)
}
}
}