系统字典管理

This commit is contained in:
熊丽君
2021-12-03 17:26:21 +08:00
parent 7fac981048
commit cf6d68ca8c
2 changed files with 374 additions and 342 deletions

View File

@ -1,6 +1,7 @@
<template> <template>
<div class="app-container"> <div class="">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <!-- app-container -->
<!-- <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="字典名称" prop="dictType"> <el-form-item label="字典名称" prop="dictType">
<el-select v-model="queryParams.dictType" size="small"> <el-select v-model="queryParams.dictType" size="small">
<el-option <el-option
@ -34,7 +35,7 @@
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button> <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button> <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item> </el-form-item>
</el-form> </el-form> -->
<el-row :gutter="10" class="mb8"> <el-row :gutter="10" class="mb8">
<el-col :span="1.5"> <el-col :span="1.5">
@ -69,27 +70,27 @@
v-hasPermi="['system:dict:remove']" v-hasPermi="['system:dict:remove']"
>删除</el-button> >删除</el-button>
</el-col> </el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> <!-- <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> -->
</el-row> </el-row>
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column label="字典编码" align="center" prop="dictCode" /> <el-table-column label="字典编码" width="80" align="center" prop="dictCode" />
<el-table-column label="字典标签" align="center" prop="dictLabel"> <el-table-column label="字典标签" width="80" align="center" prop="dictLabel">
<template slot-scope="scope"> <template slot-scope="scope">
<span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span> <span v-if="scope.row.listClass == '' || scope.row.listClass == 'default'">{{scope.row.dictLabel}}</span>
<el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag> <el-tag v-else :type="scope.row.listClass == 'primary' ? '' : scope.row.listClass">{{scope.row.dictLabel}}</el-tag>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="字典键值" align="center" prop="dictValue" /> <el-table-column label="字典键值" width="80" align="center" prop="dictValue" />
<el-table-column label="字典排序" align="center" prop="dictSort" /> <el-table-column label="字典排序" width="80" align="center" prop="dictSort" />
<el-table-column label="状态" align="center" prop="status"> <el-table-column label="状态" width="70" align="center" prop="status">
<template slot-scope="scope"> <template slot-scope="scope">
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> <el-table-column label="备注" width="90" align="center" prop="remark" :show-overflow-tooltip="true" />
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> <el-table-column label="创建时间" align="center" prop="createTime" width="100">
<template slot-scope="scope"> <template slot-scope="scope">
<span>{{ parseTime(scope.row.createTime) }}</span> <span>{{ parseTime(scope.row.createTime) }}</span>
</template> </template>
@ -173,11 +174,17 @@
<script> <script>
import { listData, getData, delData, addData, updateData, exportData } from "@/api/system/dict/data"; import { listData, getData, delData, addData, updateData, exportData } from "@/api/system/dict/data";
import { listType, getType } from "@/api/system/dict/type"; import { listType, getType,optionselect } from "@/api/system/dict/type";
export default { export default {
name: "Data", name: "Data",
dicts: ['sys_normal_disable'], dicts: ['sys_normal_disable'],
props: {
dictId: {
type: Number,
require: true,
},
},
data() { data() {
return { return {
// 遮罩层 // 遮罩层
@ -253,10 +260,16 @@ export default {
} }
}; };
}, },
watch: {
dictId(newVal, oldVal) {
this.getType(newVal)
},
},
created() { created() {
const dictId = this.$route.params && this.$route.params.dictId; console.log(this.$route)
this.getType(dictId); // const dictId = this.$route.params && this.$route.params.dictId;
this.getTypeList(); this.getType(this.dictId)
this.getTypeList()
}, },
methods: { methods: {
/** 查询字典类型详细 */ /** 查询字典类型详细 */
@ -269,8 +282,8 @@ export default {
}, },
/** 查询字典类型列表 */ /** 查询字典类型列表 */
getTypeList() { getTypeList() {
listType().then(response => { optionselect().then(response => {
this.typeOptions = response.rows; this.typeOptions = response.data;
}); });
}, },
/** 查询字典数据列表 */ /** 查询字典数据列表 */

View File

@ -1,334 +1,353 @@
<template> <template>
<div class="app-container"> <div class="app-container">
<el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px"> <el-form :model="queryParams" ref="queryForm" :inline="true" v-show="showSearch" label-width="68px">
<el-form-item label="字典名称" prop="dictName"> <el-form-item label="字典名称" prop="dictName">
<el-input <el-input
v-model="queryParams.dictName" v-model="queryParams.dictName"
placeholder="请输入字典名称" placeholder="请输入字典名称"
clearable clearable
size="small" size="small"
style="width: 240px" style="width: 240px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="字典类型" prop="dictType"> <el-form-item label="字典类型" prop="dictType">
<el-input <el-input
v-model="queryParams.dictType" v-model="queryParams.dictType"
placeholder="请输入字典类型" placeholder="请输入字典类型"
clearable clearable
size="small" size="small"
style="width: 240px" style="width: 240px"
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select <el-select v-model="queryParams.status" placeholder="字典状态" clearable size="small" style="width: 240px">
v-model="queryParams.status" <el-option
placeholder="字典状态" v-for="dict in dict.type.sys_normal_disable"
clearable :key="dict.value"
size="small" :label="dict.label"
style="width: 240px" :value="dict.value"
> />
<el-option </el-select>
v-for="dict in dict.type.sys_normal_disable" </el-form-item>
:key="dict.value" <el-form-item label="创建时间">
:label="dict.label" <el-date-picker
:value="dict.value" v-model="dateRange"
/> size="small"
</el-select> style="width: 240px"
</el-form-item> value-format="yyyy-MM-dd"
<el-form-item label="创建时间"> type="daterange"
<el-date-picker range-separator="-"
v-model="dateRange" start-placeholder="开始日期"
size="small" end-placeholder="结束日期"
style="width: 240px" ></el-date-picker>
value-format="yyyy-MM-dd" </el-form-item>
type="daterange" <el-form-item>
range-separator="-" <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
start-placeholder="开始日期" <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
end-placeholder="结束日期" </el-form-item>
></el-date-picker> </el-form>
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-row :gutter="10" class="mb8"> <el-row :gutter="20">
<el-col :span="1.5"> <el-col :span="12">
<el-button <el-card>
type="primary" <el-row :gutter="10" class="mb8">
plain <el-col :span="1.5">
icon="el-icon-plus" <el-button
size="mini" type="primary"
@click="handleAdd" plain
v-hasPermi="['system:dict:add']" icon="el-icon-plus"
>新增</el-button> size="mini"
</el-col> @click="handleAdd"
<el-col :span="1.5"> v-hasPermi="['system:dict:add']"
<el-button >新增</el-button
type="success" >
plain </el-col>
icon="el-icon-edit" <el-col :span="1.5">
size="mini" <el-button
:disabled="single" type="success"
@click="handleUpdate" plain
v-hasPermi="['system:dict:edit']" icon="el-icon-edit"
>修改</el-button> size="mini"
</el-col> :disabled="single"
<el-col :span="1.5"> @click="handleUpdate"
<el-button v-hasPermi="['system:dict:edit']"
type="danger" >修改</el-button
plain >
icon="el-icon-delete" </el-col>
size="mini" <el-col :span="1.5">
:disabled="multiple" <el-button
@click="handleDelete" type="danger"
v-hasPermi="['system:dict:remove']" plain
>删除</el-button> icon="el-icon-delete"
</el-col> size="mini"
<el-col :span="1.5"> :disabled="multiple"
<el-button @click="handleDelete"
type="danger" v-hasPermi="['system:dict:remove']"
plain >删除</el-button
icon="el-icon-refresh" >
size="mini" </el-col>
@click="handleRefreshCache" <el-col :span="1.5">
v-hasPermi="['system:dict:remove']" <el-button
>刷新缓存</el-button> type="danger"
</el-col> plain
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar> icon="el-icon-refresh"
</el-row> size="mini"
@click="handleRefreshCache"
v-hasPermi="['system:dict:remove']"
>刷新缓存</el-button
>
</el-col>
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="typeList" @selection-change="handleSelectionChange" @row-click="handleRow">
<el-table-column type="selection" width="55" align="center" /> <el-table-column type="selection" width="50" align="center" />
<el-table-column label="字典编号" align="center" prop="dictId" /> <el-table-column label="字典编号" width="80" align="center" prop="dictId" />
<el-table-column label="字典名称" align="center" prop="dictName" :show-overflow-tooltip="true" /> <el-table-column label="字典名称" width="100" align="center" prop="dictName" :show-overflow-tooltip="true" />
<el-table-column label="字典类型" align="center" :show-overflow-tooltip="true"> <el-table-column label="字典类型" align="center" :show-overflow-tooltip="true">
<template slot-scope="scope"> <template slot-scope="scope">
<router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type"> <el-link type="primary" :underline="false" @click="handleShowDic(scope.row.dictId)">{{
<span>{{ scope.row.dictType }}</span> scope.row.dictType
</router-link> }}</el-link>
</template> <!-- <router-link :to="'/system/dict-data/index/' + scope.row.dictId" class="link-type">
</el-table-column> </router-link> -->
<el-table-column label="状态" align="center" prop="status"> </template>
<template slot-scope="scope"> </el-table-column>
<dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/> <el-table-column label="状态" width="70" align="center" prop="status">
</template> <template slot-scope="scope">
</el-table-column> <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status" />
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> </template>
<el-table-column label="创建时间" align="center" prop="createTime" width="180"> </el-table-column>
<template slot-scope="scope"> <el-table-column label="备注" width="90" align="center" prop="remark" :show-overflow-tooltip="true" />
<span>{{ parseTime(scope.row.createTime) }}</span> <el-table-column label="创建时间" align="center" prop="createTime" width="100">
</template> <template slot-scope="scope">
</el-table-column> <span>{{ parseTime(scope.row.createTime) }}</span>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width"> </template>
<template slot-scope="scope"> </el-table-column>
<el-button <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
size="mini" <template slot-scope="scope">
type="text" <el-button
icon="el-icon-edit" size="mini"
@click="handleUpdate(scope.row)" type="text"
v-hasPermi="['system:dict:edit']" icon="el-icon-edit"
>修改</el-button> @click.stop="handleUpdate(scope.row)"
<el-button v-hasPermi="['system:dict:edit']"
size="mini" >修改</el-button
type="text" >
icon="el-icon-delete" <el-button
@click="handleDelete(scope.row)" size="mini"
v-hasPermi="['system:dict:remove']" type="text"
>删除</el-button> icon="el-icon-delete"
</template> @click.stop="handleDelete(scope.row)"
</el-table-column> v-hasPermi="['system:dict:remove']"
</el-table> >删除</el-button
>
</template>
</el-table-column>
</el-table>
<pagination <pagination
v-show="total>0" v-show="total > 0"
:total="total" :total="total"
:page.sync="queryParams.pageNum" :page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize" :limit.sync="queryParams.pageSize"
@pagination="getList" @pagination="getList"
/> />
</el-card>
</el-col>
<el-col :span="12">
<el-card>
<dict-data :dictId="dictId" v-if="dictId" />
<el-empty description="" v-else></el-empty>
</el-card>
</el-col>
</el-row>
<!-- 添加或修改参数配置对话框 --> <!-- 添加或修改参数配置对话框 -->
<el-dialog :title="title" :visible.sync="open" width="500px" append-to-body> <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-form-item label="字典名称" prop="dictName"> <el-form-item label="字典名称" prop="dictName">
<el-input v-model="form.dictName" placeholder="请输入字典名称" /> <el-input v-model="form.dictName" placeholder="请输入字典名称" />
</el-form-item> </el-form-item>
<el-form-item label="字典类型" prop="dictType"> <el-form-item label="字典类型" prop="dictType">
<el-input v-model="form.dictType" placeholder="请输入字典类型" /> <el-input v-model="form.dictType" placeholder="请输入字典类型" />
</el-form-item> </el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-radio-group v-model="form.status"> <el-radio-group v-model="form.status">
<el-radio <el-radio v-for="dict in dict.type.sys_normal_disable" :key="dict.value" :label="dict.value">{{
v-for="dict in dict.type.sys_normal_disable" dict.label
:key="dict.value" }}</el-radio>
:label="dict.value" </el-radio-group>
>{{dict.label}}</el-radio> </el-form-item>
</el-radio-group> <el-form-item label="备注" prop="remark">
</el-form-item> <el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input>
<el-form-item label="备注" prop="remark"> </el-form-item>
<el-input v-model="form.remark" type="textarea" placeholder="请输入内容"></el-input> </el-form>
</el-form-item> <div slot="footer" class="dialog-footer">
</el-form> <el-button type="primary" @click="submitForm"> </el-button>
<div slot="footer" class="dialog-footer"> <el-button @click="cancel"> </el-button>
<el-button type="primary" @click="submitForm"> </el-button> </div>
<el-button @click="cancel"> </el-button> </el-dialog>
</div> </div>
</el-dialog>
</div>
</template> </template>
<script> <script>
import { listType, getType, delType, addType, updateType, exportType, refreshCache } from "@/api/system/dict/type"; import { listType, getType, delType, addType, updateType, exportType, refreshCache } from '@/api/system/dict/type'
import DictData from './data'
export default { export default {
name: "Dict", name: 'Dict',
dicts: ['sys_normal_disable'], dicts: ['sys_normal_disable'],
data() { components: { DictData },
return { data() {
// 遮罩层 return {
loading: true, // 遮罩层
// 选中数组 loading: true,
ids: [], // 选中数组
// 非单个禁用 ids: [],
single: true, // 非单个禁用
// 非多个禁用 single: true,
multiple: true, // 非多个禁用
// 显示搜索条件 multiple: true,
showSearch: true, // 显示搜索条件
// 总条数 showSearch: true,
total: 0, // 总条数
// 字典表格数据 total: 0,
typeList: [], // 字典表格数据
// 弹出层标题 typeList: [],
title: "", // 弹出层标题
// 是否显示弹出层 title: '',
open: false, // 是否显示弹出层
// 日期范围 open: false,
dateRange: [], // 日期范围
// 查询参数 dateRange: [],
queryParams: { // 查询参数
pageNum: 1, queryParams: {
pageSize: 10, pageNum: 1,
dictName: undefined, pageSize: 10,
dictType: undefined, dictName: undefined,
status: undefined dictType: undefined,
}, status: undefined,
// 表单参数 },
form: {}, // 表单参数
// 表单校验 form: {},
rules: { // 表单校验
dictName: [ rules: {
{ required: true, message: "字典名称不能为空", trigger: "blur" } dictName: [{ required: true, message: '字典名称不能为空', trigger: 'blur' }],
], dictType: [{ required: true, message: '字典类型不能为空', trigger: 'blur' }],
dictType: [ },
{ required: true, message: "字典类型不能为空", trigger: "blur" } dictId: undefined,
] }
} },
}; created() {
}, this.getList()
created() { },
this.getList(); methods: {
}, /** 查询字典类型列表 */
methods: { getList() {
/** 查询字典类型列表 */ this.loading = true
getList() { listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => {
this.loading = true; this.typeList = response.rows
listType(this.addDateRange(this.queryParams, this.dateRange)).then(response => { this.total = response.total
this.typeList = response.rows; this.loading = false
this.total = response.total; })
this.loading = false; },
} // 取消按钮
); cancel() {
this.open = false
this.reset()
},
// 表单重置
reset() {
this.form = {
dictId: undefined,
dictName: undefined,
dictType: undefined,
status: '0',
remark: undefined,
}
this.resetForm('form')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1
this.getList()
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = []
this.resetForm('queryForm')
this.handleQuery()
},
/** 新增按钮操作 */
handleAdd() {
this.reset()
this.open = true
this.title = '添加字典类型'
},
// 多选框选中数据
handleSelectionChange(selection) {
this.ids = selection.map(item => item.dictId)
this.single = selection.length != 1
this.multiple = !selection.length
},
handleRow(row, column, event){
this.handleShowDic(row.dictId)
}, },
// 取消按钮 handleShowDic(dictId) {
cancel() { this.dictId = dictId
this.open = false; },
this.reset(); /** 修改按钮操作 */
}, handleUpdate(row) {
// 表单重置 this.reset()
reset() { const dictId = row.dictId || this.ids
this.form = { getType(dictId).then(response => {
dictId: undefined, this.form = response.data
dictName: undefined, this.open = true
dictType: undefined, this.title = '修改字典类型'
status: "0", })
remark: undefined },
}; /** 提交按钮 */
this.resetForm("form"); submitForm: function () {
}, this.$refs['form'].validate(valid => {
/** 搜索按钮操作 */ if (valid) {
handleQuery() { if (this.form.dictId != undefined) {
this.queryParams.pageNum = 1; updateType(this.form).then(response => {
this.getList(); this.$modal.msgSuccess('修改成功')
}, this.open = false
/** 重置按钮操作 */ this.getList()
resetQuery() { })
this.dateRange = []; } else {
this.resetForm("queryForm"); addType(this.form).then(response => {
this.handleQuery(); this.$modal.msgSuccess('新增成功')
}, this.open = false
/** 新增按钮操作 */ this.getList()
handleAdd() { })
this.reset(); }
this.open = true; }
this.title = "添加字典类型"; })
}, },
// 多选框选中数据 /** 删除按钮操作 */
handleSelectionChange(selection) { handleDelete(row) {
this.ids = selection.map(item => item.dictId) const dictIds = row.dictId || this.ids
this.single = selection.length!=1 this.$modal
this.multiple = !selection.length .confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?')
}, .then(function () {
/** 修改按钮操作 */ return delType(dictIds)
handleUpdate(row) { })
this.reset(); .then(() => {
const dictId = row.dictId || this.ids this.getList()
getType(dictId).then(response => { this.$modal.msgSuccess('删除成功')
this.form = response.data; })
this.open = true; .catch(() => {})
this.title = "修改字典类型"; },
}); /** 刷新缓存按钮操作 */
}, handleRefreshCache() {
/** 提交按钮 */ refreshCache().then(() => {
submitForm: function() { this.$modal.msgSuccess('刷新成功')
this.$refs["form"].validate(valid => { })
if (valid) { },
if (this.form.dictId != undefined) { },
updateType(this.form).then(response => { }
this.$modal.msgSuccess("修改成功"); </script>
this.open = false;
this.getList();
});
} else {
addType(this.form).then(response => {
this.$modal.msgSuccess("新增成功");
this.open = false;
this.getList();
});
}
}
});
},
/** 删除按钮操作 */
handleDelete(row) {
const dictIds = row.dictId || this.ids;
this.$modal.confirm('是否确认删除字典编号为"' + dictIds + '"的数据项?').then(function() {
return delType(dictIds);
}).then(() => {
this.getList();
this.$modal.msgSuccess("删除成功");
}).catch(() => {});
},
/** 刷新缓存按钮操作 */
handleRefreshCache() {
refreshCache().then(() => {
this.$modal.msgSuccess("刷新成功");
});
}
}
};
</script>