Skip to content

F
front-backend
Commit 5c330a91 by Moxun Committed by GitHub
Options

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

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

* 字典详情恢复之前风格
parent c6ebb071
Showing with 150 additions and 148 deletions
src/components/Crud/RR.operation.vue
......@@ -2,7 +2,7 @@
<template>
<span>
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="crud.toQuery">搜索</el-button>
<el-button class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
<el-button v-if="crud.optShow.reset" class="filter-item" size="mini" type="warning" icon="el-icon-refresh-left" @click="crud.resetQuery()">重置</el-button>
</span>
</template>
<script>
......
src/components/Crud/crud.js
......@@ -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)
}
}
}
......
src/views/system/dict/dictDetail.vue
<template>
<div>
<div v-if="dictName === ''">
<div v-if="query.dictName === ''">
<div class="my-code">点击字典查看详情</div>
</div>
<div v-else>
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.label" clearable size="small" placeholder="输入字典标签查询" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<rrOperation />
</div>
</div>
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="字典标签" prop="label">
<el-input v-model="form.label" style="width: 370px;" />
......@@ -24,62 +26,67 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" style="width: 100%;">
<el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler">
<el-table-column label="所属字典">
{{ dictName }}
{{ query.dictName }}
</el-table-column>
<el-table-column prop="label" label="字典标签" />
<el-table-column prop="value" label="字典值" />
<el-table-column prop="sort" label="排序" />
<el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
<el-table-column v-permission="['admin','dict:edit','dict:del']" label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
<el-popover
:ref="scope.row.id"
v-permission="['admin','dict:del']"
placement="top"
width="180"
>
<p>确定删除本条数据吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
<pagination />
</div>
</div>
</template>
<script>
import crud from '@/mixins/crud'
import crudDictDetail from '@/api/system/dictDetail'
import CRUD, { presenter, header, form } from '@crud/crud'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'
const defaultForm = { id: null, label: null, value: null, sort: 999 }
export default {
mixins: [crud],
components: { pagination, rrOperation, udOperation },
cruds() {
return [
CRUD({ title: '字典详情', url: 'api/dictDetail', query: { dictName: '' }, sort: ['sort,asc', 'id,desc'],
crudMethod: { ...crudDictDetail },
optShow: { add: true,
edit: true,
del: true,
reset: false
},
queryOnPresenterCreated: false
})
]
},
mixins: [
presenter(),
header(),
form(function() {
return Object.assign({ dict: { id: this.dictId }}, defaultForm)
})],
data() {
return {
title: '字典详情',
sort: ['sort,asc', 'id,desc'],
crudMethod: { ...crudDictDetail },
dictName: '',
form: { id: null, label: null, value: null, dict: { id: null }, sort: 999 },
dictId: null,
rules: {
label: [
{ required: true, message: '请输入字典标签', trigger: 'blur' }
......@@ -90,18 +97,13 @@ export default {
sort: [
{ required: true, message: '请输入序号', trigger: 'blur', type: 'number' }
]
},
permission: {
add: ['admin', 'dict:add'],
edit: ['admin', 'dict:edit'],
del: ['admin', 'dict:del']
}
}
},
methods: {
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/dictDetail'
if (this.dictName) {
this.params['dictName'] = this.dictName
}
return true
}
}
}
</script>
......
src/views/system/dict/index.vue
<template>
<div class="app-container">
<!--表单组件-->
<el-dialog append-to-body :close-on-click-modal="false" :before-close="cancel" :visible.sync="dialog" :title="getFormTitle()" width="500px">
<el-dialog append-to-body :close-on-click-modal="false" :before-close="crud.cancelCU" :visible="crud.status.cu > 0" :title="crud.status.title" width="500px">
<el-form ref="form" :model="form" :rules="rules" size="small" label-width="80px">
<el-form-item label="字典名称" prop="name">
<el-input v-model="form.name" style="width: 370px;" />
......@@ -11,74 +11,39 @@
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<el-button type="text" @click="cancel">取消</el-button>
<el-button :loading="loading" type="primary" @click="submitMethod">确认</el-button>
<el-button type="text" @click="crud.cancelCU">取消</el-button>
<el-button :loading="crud.status.cu === 2" type="primary" @click="crud.submitCU">确认</el-button>
</div>
</el-dialog>
<!-- 字典列表 -->
<el-row :gutter="10">
<el-col :xs="24" :sm="24" :md="10" :lg="10" :xl="10" style="margin-bottom: 10px">
<el-card class="box-card">
<div slot="header" class="clearfix">
<span>字典列表</span>
<!-- 新增 -->
<el-button
v-permission="['admin','dict:add']"
class="filter-item"
size="mini"
style="float: right;padding: 4px 10px"
type="primary"
icon="el-icon-plus"
@click="showAddFormDialog"
>新增</el-button>
</div>
<!--工具栏-->
<div class="head-container">
<!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="toQuery" />
<el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toQuery">搜索</el-button>
<!-- 导出 -->
<el-button
:loading="downloadLoading"
size="mini"
class="filter-item"
type="warning"
icon="el-icon-download"
@click="downloadMethod"
>导出</el-button>
<div v-if="crud.props.searchToggle">
<!-- 搜索 -->
<el-input v-model="query.blurry" clearable size="small" placeholder="输入名称或者描述搜索" style="width: 200px;" class="filter-item" @keyup.enter.native="crud.toQuery" />
<rrOperation />
</div>
<crudOperation :permission="permission" />
</div>
<!--表格渲染-->
<el-table v-loading="loading" :data="data" highlight-current-row style="width: 100%;" @current-change="handleCurrentChange">
<el-table ref="table" v-loading="crud.loading" :data="crud.data" highlight-current-row style="width: 100%;" @selection-change="crud.selectionChangeHandler" @current-change="handleCurrentChange">
<el-table-column type="selection" width="55" />
<el-table-column :show-overflow-tooltip="true" prop="name" label="名称" />
<el-table-column :show-overflow-tooltip="true" prop="remark" label="描述" />
<el-table-column v-if="checkPermission(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right">
<el-table-column v-permission="['admin','dict:edit','dict:del']" label="操作" width="130px" align="center" fixed="right">
<template slot-scope="scope">
<el-button v-permission="['admin','dict:edit']" size="mini" type="primary" icon="el-icon-edit" @click="showEditFormDialog(scope.row)" />
<el-popover
:ref="scope.row.id"
v-permission="['admin','dict:del']"
placement="top"
width="180"
>
<p>此操作将删除字典与对应的字典详情，确定要删除吗？</p>
<div style="text-align: right; margin: 0">
<el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
<el-button :loading="delLoading" type="primary" size="mini" @click="delMethod(scope.row.id)">确定</el-button>
</div>
<el-button slot="reference" type="danger" icon="el-icon-delete" size="mini" />
</el-popover>
<udOperation
:data="scope.row"
:permission="permission"
/>
</template>
</el-table-column>
</el-table>
<!--分页组件-->
<el-pagination
:total="total"
:current-page="page + 1"
style="margin-top: 8px;"
layout="total, prev, pager, next, sizes"
@size-change="sizeChange"
@current-change="pageChange"
/>
<pagination />
</el-card>
</el-col>
<!-- 字典详情列表 -->
......@@ -87,16 +52,16 @@
<div slot="header" class="clearfix">
<span>字典详情</span>
<el-button
v-if="checkPermission(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.dictName"
v-if="checkPermission(['admin','dict:add']) && this.$refs.dictDetail && this.$refs.dictDetail.query.dictName"
class="filter-item"
size="mini"
style="float: right;padding: 4px 10px"
type="primary"
icon="el-icon-plus"
@click="$refs.dictDetail.showAddFormDialog"
@click="$refs.dictDetail && $refs.dictDetail.crud.toAdd()"
>新增</el-button>
</div>
<dictDetail ref="dictDetail" />
<dictDetail ref="dictDetail" :permission="permission" />
</el-card>
</el-col>
</el-row>
......@@ -104,50 +69,60 @@
</template>
<script>
import crud from '@/mixins/crud'
import checkPermission from '@/utils/permission'
import dictDetail from './dictDetail'
import crudDict from '@/api/system/dict'
import CRUD, { presenter, header, form } from '@crud/crud'
import crudOperation from '@crud/CRUD.operation'
import pagination from '@crud/Pagination'
import rrOperation from '@crud/RR.operation'
import udOperation from '@crud/UD.operation'
const defaultForm = { id: null, name: null, remark: null }
export default {
name: 'Dict',
components: { dictDetail },
mixins: [crud],
components: { crudOperation, pagination, rrOperation, udOperation, dictDetail },
cruds() {
return [
CRUD({ title: '字典', url: 'api/dict', crudMethod: { ...crudDict }})
]
},
mixins: [presenter(), header(), form(defaultForm)],
data() {
return {
title: '字典',
crudMethod: { ...crudDict },
queryTypeOptions: [
{ key: 'name', display_name: '字典名称' },
{ key: 'remark', display_name: '描述' }
],
form: { id: null, name: null, remark: null },
rules: {
name: [
{ required: true, message: '请输入名称', trigger: 'blur' }
]
},
permission: {
add: ['admin', 'dict:add'],
edit: ['admin', 'dict:edit'],
del: ['admin', 'dict:del']
}
}
},
created() {
this.$nextTick(() => {
this.init()
})
},
methods: {
checkPermission,
// 获取数据前设置好接口地址
beforeInit() {
this.url = 'api/dict'
[CRUD.HOOK.beforeRefresh]() {
if (this.$refs.dictDetail) {
this.$refs.dictDetail.data = []
this.$refs.dictDetail.dictName = ''
this.$refs.dictDetail.query.dictName = ''
}
return true
},
// 选中字典后，设置字典详情数据
handleCurrentChange(val) {
if (val) {
this.$refs.dictDetail.dictName = val.name
this.$refs.dictDetail.form.dict.id = val.id
this.$refs.dictDetail.init()
this.$refs.dictDetail.query.dictName = val.name
this.$refs.dictDetail.dictId = val.id
this.$refs.dictDetail.crud.toQuery()
}
}
}
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment