部门字典管理完成

This commit is contained in:
clay
2022-01-07 15:06:42 +08:00
parent c3e60cd54a
commit 41b6b9ba33
3 changed files with 203 additions and 39 deletions

View File

@@ -20,6 +20,16 @@
/> />
</el-select> </el-select>
</el-form-item> </el-form-item>
<el-form-item label="网站类型" prop="status">
<el-select v-model="queryParams.attribute2" placeholder="数据状态" clearable size="small">
<el-option
v-for="dict in attribute2Options"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small"> <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
<el-option <el-option
@@ -85,10 +95,12 @@
<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="55" align="center" />
<el-table-column label="类型编码" align="center" prop="dictCode" /> <el-table-column label="类型编码" align="center" prop="dictCode" />
<el-table-column label="网站类型" align="center" prop="attribute2" :formatter="attribute2Format" />
<el-table-column label="类型名" align="center" prop="dictLabel" /> <el-table-column label="类型名" align="center" prop="dictLabel" />
<el-table-column label="类型键值" align="center" prop="dictValue" /> <el-table-column label="类型键值" align="center" prop="dictValue" />
<el-table-column label="类型排序" align="center" prop="dictSort" /> <el-table-column label="类型排序" align="center" prop="dictSort" />
<el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" /> <el-table-column label="状态" align="center" prop="status" :formatter="statusFormat" />
<el-table-column label="缩略图" align="center" prop="attribute1" :formatter="attribute1Format" />
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" /> <el-table-column label="备注" 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="180">
<template slot-scope="scope"> <template slot-scope="scope">
@@ -146,6 +158,15 @@
>{{dict.dictLabel}}</el-radio> >{{dict.dictLabel}}</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
<el-form-item label="网站类型" prop="attribute2">
<el-radio-group v-model="form.attribute2">
<el-radio
v-for="dict in attribute2Options"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</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
@@ -197,6 +218,7 @@ export default {
// 状态数据字典 // 状态数据字典
statusOptions: [], statusOptions: [],
attribute1Options: [], attribute1Options: [],
attribute2Options: [],
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
@@ -217,6 +239,9 @@ export default {
attribute1: [ attribute1: [
{ required: true, message: "有无缩略图不能为空", trigger: "blur" } { required: true, message: "有无缩略图不能为空", trigger: "blur" }
], ],
attribute2: [
{ required: true, message: "网站类型不能为空", trigger: "blur" }
],
dictSort: [ dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" } { required: true, message: "数据顺序不能为空", trigger: "blur" }
] ]
@@ -231,6 +256,9 @@ export default {
this.getDicts("thumbnail").then(response => { this.getDicts("thumbnail").then(response => {
this.attribute1Options = response.data; this.attribute1Options = response.data;
}); });
this.getDicts("unencrypted_site_type").then(response => {
this.attribute2Options = response.data;
});
}, },
methods: { methods: {
/** 查询字典数据列表 */ /** 查询字典数据列表 */
@@ -246,6 +274,14 @@ export default {
statusFormat(row, column) { statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status); return this.selectDictLabel(this.statusOptions, row.status);
}, },
// 数据状态字典翻译
attribute1Format(row, column) {
return this.selectDictLabel(this.attribute1Options, row.attribute1);
},
// 数据状态字典翻译
attribute2Format(row, column) {
return this.selectDictLabel(this.attribute2Options, row.attribute2);
},
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false;
@@ -260,6 +296,7 @@ export default {
dictSort: 0, dictSort: 0,
status: "0", status: "0",
attribute1: "1", attribute1: "1",
attribute2: "1",
remark: undefined remark: undefined
}; };
this.resetForm("form"); this.resetForm("form");

View File

@@ -10,6 +10,16 @@
@keyup.enter.native="handleQuery" @keyup.enter.native="handleQuery"
/> />
</el-form-item> </el-form-item>
<el-form-item label="网站类型" prop="status">
<el-select v-model="queryParams.attribute2" placeholder="数据状态" clearable size="small">
<el-option
v-for="dict in attribute2Options"
:key="dict.dictValue"
:label="dict.dictLabel"
:value="dict.dictValue"
/>
</el-select>
</el-form-item>
<el-form-item label="状态" prop="status"> <el-form-item label="状态" prop="status">
<el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small"> <el-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
<el-option <el-option
@@ -75,6 +85,7 @@
<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="55" align="center" />
<el-table-column label="名录类型编码" align="center" prop="dictCode" /> <el-table-column label="名录类型编码" align="center" prop="dictCode" />
<el-table-column label="网站类型" align="center" prop="attribute2" :formatter="attribute2Format" />
<el-table-column label="名录类型" align="center" prop="dictLabel" /> <el-table-column label="名录类型" align="center" prop="dictLabel" />
<el-table-column label="名录类型键值" align="center" prop="dictValue" /> <el-table-column label="名录类型键值" align="center" prop="dictValue" />
<el-table-column label="名录类型排序" align="center" prop="dictSort" /> <el-table-column label="名录类型排序" align="center" prop="dictSort" />
@@ -127,6 +138,15 @@
<el-form-item label="显示排序" prop="dictSort"> <el-form-item label="显示排序" prop="dictSort">
<el-input-number v-model="form.dictSort" controls-position="right" :min="0" /> <el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
</el-form-item> </el-form-item>
<el-form-item label="网站类型" prop="attribute2">
<el-radio-group v-model="form.attribute2">
<el-radio
v-for="dict in attribute2Options"
:key="dict.dictValue"
:label="dict.dictValue"
>{{dict.dictLabel}}</el-radio>
</el-radio-group>
</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
@@ -177,6 +197,7 @@ export default {
open: false, open: false,
// 状态数据字典 // 状态数据字典
statusOptions: [], statusOptions: [],
attribute2Options: [],
// 查询参数 // 查询参数
queryParams: { queryParams: {
pageNum: 1, pageNum: 1,
@@ -194,6 +215,9 @@ export default {
dictValue: [ dictValue: [
{ required: true, message: "名录类型键值不能为空", trigger: "blur" } { required: true, message: "名录类型键值不能为空", trigger: "blur" }
], ],
attribute2: [
{ required: true, message: "网站类型不能为空", trigger: "blur" }
],
dictSort: [ dictSort: [
{ required: true, message: "数据顺序不能为空", trigger: "blur" } { required: true, message: "数据顺序不能为空", trigger: "blur" }
] ]
@@ -205,6 +229,9 @@ export default {
this.getDicts("sys_normal_disable").then(response => { this.getDicts("sys_normal_disable").then(response => {
this.statusOptions = response.data; this.statusOptions = response.data;
}); });
this.getDicts("unencrypted_site_type").then(response => {
this.attribute2Options = response.data;
});
}, },
methods: { methods: {
/** 查询字典数据列表 */ /** 查询字典数据列表 */
@@ -220,6 +247,10 @@ export default {
statusFormat(row, column) { statusFormat(row, column) {
return this.selectDictLabel(this.statusOptions, row.status); return this.selectDictLabel(this.statusOptions, row.status);
}, },
// 数据状态字典翻译
attribute2Format(row, column) {
return this.selectDictLabel(this.attribute2Options, row.attribute2);
},
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false;
@@ -233,6 +264,7 @@ export default {
dictValue: undefined, dictValue: undefined,
dictSort: 0, dictSort: 0,
status: "0", status: "0",
attribute2: "1",
remark: undefined remark: undefined
}; };
this.resetForm("form"); this.resetForm("form");

View File

@@ -35,7 +35,8 @@
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['system:dept:add']" v-hasPermi="['system:dept:add']"
>新增</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>
@@ -63,14 +64,16 @@
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['system:dept:edit']" v-hasPermi="['system:dept:edit']"
>修改</el-button> >修改
</el-button>
<el-button <el-button
size="mini" size="mini"
type="text" type="text"
icon="el-icon-plus" icon="el-icon-plus"
@click="handleAdd(scope.row)" @click="handleAdd(scope.row)"
v-hasPermi="['system:dept:add']" v-hasPermi="['system:dept:add']"
>新增</el-button> >新增
</el-button>
<el-button <el-button
v-if="scope.row.parentId != 0" v-if="scope.row.parentId != 0"
size="mini" size="mini"
@@ -78,7 +81,8 @@
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['system:dept:remove']" v-hasPermi="['system:dept:remove']"
>删除</el-button> >删除
</el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
@@ -89,32 +93,32 @@
<el-row> <el-row>
<el-col :span="24" v-if="form.parentId !== 0"> <el-col :span="24" v-if="form.parentId !== 0">
<el-form-item label="上级部门" prop="parentId"> <el-form-item label="上级部门" prop="parentId">
<treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门" /> <treeselect v-model="form.parentId" :options="deptOptions" :normalizer="normalizer" placeholder="选择上级部门"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="部门名称" prop="deptName"> <el-form-item label="部门名称" prop="deptName">
<el-input v-model="form.deptName" placeholder="请输入部门名称" /> <el-input v-model="form.deptName" placeholder="请输入部门名称"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="显示排序" prop="orderNum"> <el-form-item label="显示排序" prop="orderNum">
<el-input-number v-model="form.orderNum" controls-position="right" :min="0" /> <el-input-number v-model="form.orderNum" controls-position="right" :min="0"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="负责人" prop="leader"> <el-form-item label="负责人" prop="leader">
<el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20" /> <el-input v-model="form.leader" placeholder="请输入负责人" maxlength="20"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="联系电话" prop="phone"> <el-form-item label="联系电话" prop="phone">
<el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11" /> <el-input v-model="form.phone" placeholder="请输入联系电话" maxlength="11"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
<el-form-item label="邮箱" prop="email"> <el-form-item label="邮箱" prop="email">
<el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50" /> <el-input v-model="form.email" placeholder="请输入邮箱" maxlength="50"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@@ -124,10 +128,29 @@
v-for="dict in statusOptions" v-for="dict in statusOptions"
:key="dict.dictValue" :key="dict.dictValue"
:label="dict.dictValue" :label="dict.dictValue"
>{{dict.dictLabel}}</el-radio> >{{ dict.dictLabel }}
</el-radio>
</el-radio-group> </el-radio-group>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="24">
<el-form-item label="菜单权限">
<!-- <el-checkbox v-model="siteTypeExpand" @change="handleCheckedTreeExpand($event)">展开/折叠</el-checkbox>-->
<el-checkbox v-model="siteTypeNodeAll" @change="handleCheckedTreeNodeAll($event)">全选/全不选</el-checkbox>
<el-checkbox v-model="siteTypeCheckStrictly" @change="handleCheckedTreeConnect($event)">父子联动
</el-checkbox>
<el-tree
class="tree-border"
:data="siteTypeOptions"
show-checkbox
ref="siteType"
node-key="dictCode"
:check-strictly="!siteTypeCheckStrictly"
empty-text="加载中请稍后"
:props="defaultProps"
></el-tree>
</el-form-item>
</el-col>
</el-row> </el-row>
</el-form> </el-form>
<div slot="footer" class="dialog-footer"> <div slot="footer" class="dialog-footer">
@@ -139,23 +162,27 @@
</template> </template>
<script> <script>
import { listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild } from "@/api/system/dept"; import {listDept, getDept, delDept, addDept, updateDept, listDeptExcludeChild} from "@/api/system/dept";
import Treeselect from "@riophae/vue-treeselect"; import Treeselect from "@riophae/vue-treeselect";
import "@riophae/vue-treeselect/dist/vue-treeselect.css"; import "@riophae/vue-treeselect/dist/vue-treeselect.css";
export default { export default {
name: "Dept", name: "Dept",
components: { Treeselect }, components: {Treeselect},
data() { data() {
return { return {
// 遮罩层 // 遮罩层
loading: true, loading: true,
// 显示搜索条件 // 显示搜索条件
showSearch: true, showSearch: true,
siteTypeExpand: false,
siteTypeNodeAll: false,
siteTypeCheckStrictly:false,
// 表格树数据 // 表格树数据
deptList: [], deptList: [],
// 部门树选项 // 部门树选项
deptOptions: [], deptOptions: [],
siteTypeOptions: [],
// 弹出层标题 // 弹出层标题
title: "", title: "",
// 是否显示弹出层 // 是否显示弹出层
@@ -167,18 +194,22 @@ export default {
deptName: undefined, deptName: undefined,
status: undefined status: undefined
}, },
defaultProps: {
children: "children",
label: "dictLabel",
},
// 表单参数 // 表单参数
form: {}, form: {},
// 表单校验 // 表单校验
rules: { rules: {
parentId: [ parentId: [
{ required: true, message: "上级部门不能为空", trigger: "blur" } {required: true, message: "上级部门不能为空", trigger: "blur"}
], ],
deptName: [ deptName: [
{ required: true, message: "部门名称不能为空", trigger: "blur" } {required: true, message: "部门名称不能为空", trigger: "blur"}
], ],
orderNum: [ orderNum: [
{ required: true, message: "菜单顺序不能为空", trigger: "blur" } {required: true, message: "菜单顺序不能为空", trigger: "blur"}
], ],
email: [ email: [
{ {
@@ -212,6 +243,49 @@ export default {
this.loading = false; this.loading = false;
}); });
}, },
getSiteTypeTree() {
this.getDicts('article_type').then(res => {
let sist = {
attribute2: 1,
dictCode: 0,
dictLabel: "信息网站",
children: [],
}
let lab = {
attribute2: 2,
dictCode: 1,
dictLabel: "lab实验室",
children: [],
}
let data = res.data
for (let i = 0; i < data.length; i++) {
if (data[i].attribute2 === 1) {
sist.children.push(data[i])
} else {
lab.children.push(data[i])
}
}
this.siteTypeOptions.push(sist)
this.siteTypeOptions.push(lab)
})
},
// 树权限(展开/折叠)
handleCheckedTreeExpand(value) {
let treeList = this.siteTypeOptions;
for (let i = 0; i < treeList.length; i++) {
this.$refs.siteType.store.nodesMap[treeList[i].id].expanded = value;
}
},
// 树权限(全选/全不选)
handleCheckedTreeNodeAll(value) {
this.$refs.siteType.setCheckedNodes(value ? this.siteTypeOptions : []);
},
// 树权限(父子联动)
handleCheckedTreeConnect(value,) {
this.siteTypeCheckStrictly = value ? true : false;
},
/** 转换部门数据结构 */ /** 转换部门数据结构 */
normalizer(node) { normalizer(node) {
if (node.children && !node.children.length) { if (node.children && !node.children.length) {
@@ -230,20 +304,25 @@ export default {
// 取消按钮 // 取消按钮
cancel() { cancel() {
this.open = false; this.open = false;
this.siteTypeExpand = false;
this.siteTypeNodeAll = false;
this.reset(); this.reset();
}, },
// 表单重置 // 表单重置
reset() { reset() {
this.form = { this.siteTypeNodeAll = false;
deptId: undefined, this.siteTypeOptions = [];
parentId: undefined, this.siteTypeCheckStrictly = true;
deptName: undefined, this.form = {
orderNum: undefined, deptId: undefined,
leader: undefined, parentId: undefined,
phone: undefined, deptName: undefined,
email: undefined, orderNum: undefined,
status: "0" leader: undefined,
}; phone: undefined,
email: undefined,
status: "0"
};
this.resetForm("form"); this.resetForm("form");
}, },
/** 搜索按钮操作 */ /** 搜索按钮操作 */
@@ -263,8 +342,9 @@ export default {
} }
this.open = true; this.open = true;
this.title = "添加部门"; this.title = "添加部门";
this.getSiteTypeTree();
listDept().then(response => { listDept().then(response => {
this.deptOptions = this.handleTree(response.data, "deptId"); this.deptOptions = this.handleTree(response.data, "deptId");
}); });
}, },
/** 修改按钮操作 */ /** 修改按钮操作 */
@@ -274,14 +354,29 @@ export default {
this.form = response.data; this.form = response.data;
this.open = true; this.open = true;
this.title = "修改部门"; this.title = "修改部门";
this.$nextTick(() => {
this.$refs.siteType.setCheckedKeys(this.form.siteTypes);
});
}); });
this.getSiteTypeTree();
listDeptExcludeChild(row.deptId).then(response => { listDeptExcludeChild(row.deptId).then(response => {
this.deptOptions = this.handleTree(response.data, "deptId"); this.deptOptions = this.handleTree(response.data, "deptId");
}); });
}, },
// 所有菜单节点数据
getSiteTypeAllCheckedKeys() {
// 目前被选中的菜单节点
let checkedKeys = this.$refs.siteType.getCheckedKeys();
// 半选中的菜单节点
let halfCheckedKeys = this.$refs.siteType.getHalfCheckedKeys();
checkedKeys.unshift.apply(checkedKeys, halfCheckedKeys);
return checkedKeys;
},
/** 提交按钮 */ /** 提交按钮 */
submitForm: function() { submitForm: function () {
this.$refs["form"].validate(valid => { this.form.siteTypes = this.getSiteTypeAllCheckedKeys()
this.$refs["form"].validate(valid => {
if (valid) { if (valid) {
if (this.form.deptId != undefined) { if (this.form.deptId != undefined) {
updateDept(this.form).then(response => { updateDept(this.form).then(response => {
@@ -302,15 +397,15 @@ export default {
/** 删除按钮操作 */ /** 删除按钮操作 */
handleDelete(row) { handleDelete(row) {
this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", { this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", {
confirmButtonText: "确定", confirmButtonText: "确定",
cancelButtonText: "取消", cancelButtonText: "取消",
type: "warning" type: "warning"
}).then(function() { }).then(function () {
return delDept(row.deptId); return delDept(row.deptId);
}).then(() => { }).then(() => {
this.getList(); this.getList();
this.msgSuccess("删除成功"); this.msgSuccess("删除成功");
}) })
} }
} }
}; };