|
|
|
@ -6,8 +6,11 @@ |
|
|
|
<el-form-item label="字典名称" prop="name"> |
|
|
|
<el-input v-model="form.name" style="width: 370px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="字典代码"> |
|
|
|
<el-input v-model="form.code" style="width: 370px;" /> |
|
|
|
</el-form-item> |
|
|
|
<el-form-item label="描述"> |
|
|
|
<el-input v-model="form.description" style="width: 370px;" /> |
|
|
|
<el-input v-model="form.description" style="width: 370px;" type="textarea" :rows="2" /> |
|
|
|
</el-form-item> |
|
|
|
</el-form> |
|
|
|
<div slot="footer" class="dialog-footer"> |
|
|
|
@ -17,51 +20,17 @@ |
|
|
|
</el-dialog> |
|
|
|
<!-- 字典列表 --> |
|
|
|
<el-row :gutter="10"> |
|
|
|
<el-col :xs="24" :sm="24" :md="10" :lg="11" :xl="11" style="margin-bottom: 10px"> |
|
|
|
<el-col :xs="24" :sm="24" :md="6" :lg="6" :xl="5" style="margin-bottom: 10px"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<!--工具栏--> |
|
|
|
<div class="head-container"> |
|
|
|
<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 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="description" label="描述" /> |
|
|
|
<el-table-column v-if="checkPer(['admin','dict:edit','dict:del'])" label="操作" width="130px" align="center" fixed="right"> |
|
|
|
<template slot-scope="scope"> |
|
|
|
<udOperation |
|
|
|
:data="scope.row" |
|
|
|
:permission="permission" |
|
|
|
/> |
|
|
|
</template> |
|
|
|
</el-table-column> |
|
|
|
</el-table> |
|
|
|
<!--分页组件--> |
|
|
|
<pagination /> |
|
|
|
<crudOperation :permission="permission" /> |
|
|
|
<!--字典树状结构--> |
|
|
|
<el-tree ref="tree" :data="crud.data" :props="defaultProps" node-key="id" :expand-on-click-node="false" style="height:calc(100vh - 240px);" highlight-current @node-click="handleNodeClick" /> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
<!-- 字典详情列表 --> |
|
|
|
<el-col :xs="24" :sm="24" :md="14" :lg="13" :xl="13"> |
|
|
|
<el-col :xs="24" :sm="24" :md="18" :lg="18" :xl="19"> |
|
|
|
<el-card class="box-card"> |
|
|
|
<div slot="header" class="clearfix"> |
|
|
|
<span>字典详情</span> |
|
|
|
<el-button |
|
|
|
v-if="checkPer(['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 && $refs.dictDetail.crud.toAdd()" |
|
|
|
>新增</el-button> |
|
|
|
</div> |
|
|
|
<dictDetail ref="dictDetail" :permission="permission" /> |
|
|
|
<dictDetail ref="dictDetail" :permission="permission" style="height:calc(100vh - 203px);" /> |
|
|
|
</el-card> |
|
|
|
</el-col> |
|
|
|
</el-row> |
|
|
|
@ -73,18 +42,25 @@ 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, description: null, dictDetails: [] } |
|
|
|
|
|
|
|
export default { |
|
|
|
name: 'Dict', |
|
|
|
components: { crudOperation, pagination, rrOperation, udOperation, dictDetail }, |
|
|
|
components: { crudOperation, dictDetail }, |
|
|
|
cruds() { |
|
|
|
return [ |
|
|
|
CRUD({ title: '字典', url: 'api/dict', crudMethod: { ...crudDict }}) |
|
|
|
CRUD({ |
|
|
|
title: '字典', url: 'api/dict', |
|
|
|
crudMethod: { ...crudDict }, |
|
|
|
optShow: { |
|
|
|
add: true, |
|
|
|
edit: true, |
|
|
|
del: true, |
|
|
|
download: false, |
|
|
|
group: false |
|
|
|
} |
|
|
|
}) |
|
|
|
] |
|
|
|
}, |
|
|
|
mixins: [presenter(), header(), form(defaultForm)], |
|
|
|
@ -96,13 +72,17 @@ export default { |
|
|
|
], |
|
|
|
rules: { |
|
|
|
name: [ |
|
|
|
{ required: true, message: '请输入名称', trigger: 'blur' } |
|
|
|
{ required: true, message: '请输入字典名称', trigger: 'blur' } |
|
|
|
] |
|
|
|
}, |
|
|
|
permission: { |
|
|
|
add: ['admin', 'dict:add'], |
|
|
|
edit: ['admin', 'dict:edit'], |
|
|
|
del: ['admin', 'dict:del'] |
|
|
|
}, |
|
|
|
defaultProps: { |
|
|
|
children: 'dictDetails', |
|
|
|
label: (data, node) => { return data.description ? data.description : data.label } |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
@ -122,6 +102,18 @@ export default { |
|
|
|
this.$refs.dictDetail.crud.toQuery() |
|
|
|
} |
|
|
|
}, |
|
|
|
handleNodeClick(val) { |
|
|
|
if (val) { |
|
|
|
if (val.name) { |
|
|
|
this.$refs.dictDetail.query.dictName = val.name |
|
|
|
this.$refs.dictDetail.dictId = val.id |
|
|
|
this.$refs.dictDetail.crud.toQuery() |
|
|
|
this.crud.selectionChangeHandler([val]) |
|
|
|
} else { |
|
|
|
this.crud.selectionChangeHandler([]) |
|
|
|
} |
|
|
|
} |
|
|
|
}, |
|
|
|
// 编辑前将字典明细临时清空，避免日志入库数据过长 |
|
|
|
[CRUD.HOOK.beforeToEdit](crud, form) { |
|
|
|
// 将角色的菜单清空，避免日志入库数据过长 |
|
|
|
@ -132,4 +124,10 @@ export default { |
|
|
|
</script> |
|
|
|
|
|
|
|
<style scoped> |
|
|
|
.el-tree--highlight-current .el-tree-node.is-current > .el-tree-node__content { |
|
|
|
background-color: rgb(158, 213, 250) !important; |
|
|
|
} |
|
|
|
.el-card__body .crud-opts { |
|
|
|
justify-content: space-around; |
|
|
|
} |
|
|
|
</style> |
