部门字典管理完成
This commit is contained in:
@@ -20,6 +20,16 @@
|
||||
/>
|
||||
</el-select>
|
||||
</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-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
|
||||
<el-option
|
||||
@@ -85,10 +95,12 @@
|
||||
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<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="dictValue" />
|
||||
<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="attribute1" :formatter="attribute1Format" />
|
||||
<el-table-column label="备注" align="center" prop="remark" :show-overflow-tooltip="true" />
|
||||
<el-table-column label="创建时间" align="center" prop="createTime" width="180">
|
||||
<template slot-scope="scope">
|
||||
@@ -146,6 +158,15 @@
|
||||
>{{dict.dictLabel}}</el-radio>
|
||||
</el-radio-group>
|
||||
</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-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
@@ -197,6 +218,7 @@ export default {
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
attribute1Options: [],
|
||||
attribute2Options: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@@ -217,6 +239,9 @@ export default {
|
||||
attribute1: [
|
||||
{ required: true, message: "有无缩略图不能为空", trigger: "blur" }
|
||||
],
|
||||
attribute2: [
|
||||
{ required: true, message: "网站类型不能为空", trigger: "blur" }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
@@ -231,6 +256,9 @@ export default {
|
||||
this.getDicts("thumbnail").then(response => {
|
||||
this.attribute1Options = response.data;
|
||||
});
|
||||
this.getDicts("unencrypted_site_type").then(response => {
|
||||
this.attribute2Options = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询字典数据列表 */
|
||||
@@ -246,6 +274,14 @@ export default {
|
||||
statusFormat(row, column) {
|
||||
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() {
|
||||
this.open = false;
|
||||
@@ -260,6 +296,7 @@ export default {
|
||||
dictSort: 0,
|
||||
status: "0",
|
||||
attribute1: "1",
|
||||
attribute2: "1",
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
|
||||
@@ -10,6 +10,16 @@
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</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-select v-model="queryParams.status" placeholder="数据状态" clearable size="small">
|
||||
<el-option
|
||||
@@ -75,6 +85,7 @@
|
||||
<el-table v-loading="loading" :data="dataList" @selection-change="handleSelectionChange">
|
||||
<el-table-column type="selection" width="55" align="center" />
|
||||
<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="dictValue" />
|
||||
<el-table-column label="名录类型排序" align="center" prop="dictSort" />
|
||||
@@ -127,6 +138,15 @@
|
||||
<el-form-item label="显示排序" prop="dictSort">
|
||||
<el-input-number v-model="form.dictSort" controls-position="right" :min="0" />
|
||||
</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-radio-group v-model="form.status">
|
||||
<el-radio
|
||||
@@ -177,6 +197,7 @@ export default {
|
||||
open: false,
|
||||
// 状态数据字典
|
||||
statusOptions: [],
|
||||
attribute2Options: [],
|
||||
// 查询参数
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
@@ -194,6 +215,9 @@ export default {
|
||||
dictValue: [
|
||||
{ required: true, message: "名录类型键值不能为空", trigger: "blur" }
|
||||
],
|
||||
attribute2: [
|
||||
{ required: true, message: "网站类型不能为空", trigger: "blur" }
|
||||
],
|
||||
dictSort: [
|
||||
{ required: true, message: "数据顺序不能为空", trigger: "blur" }
|
||||
]
|
||||
@@ -205,6 +229,9 @@ export default {
|
||||
this.getDicts("sys_normal_disable").then(response => {
|
||||
this.statusOptions = response.data;
|
||||
});
|
||||
this.getDicts("unencrypted_site_type").then(response => {
|
||||
this.attribute2Options = response.data;
|
||||
});
|
||||
},
|
||||
methods: {
|
||||
/** 查询字典数据列表 */
|
||||
@@ -220,6 +247,10 @@ export default {
|
||||
statusFormat(row, column) {
|
||||
return this.selectDictLabel(this.statusOptions, row.status);
|
||||
},
|
||||
// 数据状态字典翻译
|
||||
attribute2Format(row, column) {
|
||||
return this.selectDictLabel(this.attribute2Options, row.attribute2);
|
||||
},
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
@@ -233,6 +264,7 @@ export default {
|
||||
dictValue: undefined,
|
||||
dictSort: 0,
|
||||
status: "0",
|
||||
attribute2: "1",
|
||||
remark: undefined
|
||||
};
|
||||
this.resetForm("form");
|
||||
|
||||
@@ -35,7 +35,8 @@
|
||||
size="mini"
|
||||
@click="handleAdd"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增</el-button>
|
||||
>新增
|
||||
</el-button>
|
||||
</el-col>
|
||||
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
|
||||
</el-row>
|
||||
@@ -63,14 +64,16 @@
|
||||
icon="el-icon-edit"
|
||||
@click="handleUpdate(scope.row)"
|
||||
v-hasPermi="['system:dept:edit']"
|
||||
>修改</el-button>
|
||||
>修改
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-plus"
|
||||
@click="handleAdd(scope.row)"
|
||||
v-hasPermi="['system:dept:add']"
|
||||
>新增</el-button>
|
||||
>新增
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.parentId != 0"
|
||||
size="mini"
|
||||
@@ -78,7 +81,8 @@
|
||||
icon="el-icon-delete"
|
||||
@click="handleDelete(scope.row)"
|
||||
v-hasPermi="['system:dept:remove']"
|
||||
>删除</el-button>
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
@@ -89,32 +93,32 @@
|
||||
<el-row>
|
||||
<el-col :span="24" v-if="form.parentId !== 0">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
<el-form-item label="部门名称" prop="deptName">
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称" />
|
||||
<el-input v-model="form.deptName" placeholder="请输入部门名称"/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="12">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
<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-col>
|
||||
<el-col :span="12">
|
||||
@@ -124,10 +128,29 @@
|
||||
v-for="dict in statusOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictValue"
|
||||
>{{dict.dictLabel}}</el-radio>
|
||||
>{{ dict.dictLabel }}
|
||||
</el-radio>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
</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-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
@@ -139,23 +162,27 @@
|
||||
</template>
|
||||
|
||||
<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 "@riophae/vue-treeselect/dist/vue-treeselect.css";
|
||||
|
||||
export default {
|
||||
name: "Dept",
|
||||
components: { Treeselect },
|
||||
components: {Treeselect},
|
||||
data() {
|
||||
return {
|
||||
// 遮罩层
|
||||
loading: true,
|
||||
// 显示搜索条件
|
||||
showSearch: true,
|
||||
siteTypeExpand: false,
|
||||
siteTypeNodeAll: false,
|
||||
siteTypeCheckStrictly:false,
|
||||
// 表格树数据
|
||||
deptList: [],
|
||||
// 部门树选项
|
||||
deptOptions: [],
|
||||
siteTypeOptions: [],
|
||||
// 弹出层标题
|
||||
title: "",
|
||||
// 是否显示弹出层
|
||||
@@ -167,18 +194,22 @@ export default {
|
||||
deptName: undefined,
|
||||
status: undefined
|
||||
},
|
||||
defaultProps: {
|
||||
children: "children",
|
||||
label: "dictLabel",
|
||||
},
|
||||
// 表单参数
|
||||
form: {},
|
||||
// 表单校验
|
||||
rules: {
|
||||
parentId: [
|
||||
{ required: true, message: "上级部门不能为空", trigger: "blur" }
|
||||
{required: true, message: "上级部门不能为空", trigger: "blur"}
|
||||
],
|
||||
deptName: [
|
||||
{ required: true, message: "部门名称不能为空", trigger: "blur" }
|
||||
{required: true, message: "部门名称不能为空", trigger: "blur"}
|
||||
],
|
||||
orderNum: [
|
||||
{ required: true, message: "菜单顺序不能为空", trigger: "blur" }
|
||||
{required: true, message: "菜单顺序不能为空", trigger: "blur"}
|
||||
],
|
||||
email: [
|
||||
{
|
||||
@@ -212,6 +243,49 @@ export default {
|
||||
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) {
|
||||
if (node.children && !node.children.length) {
|
||||
@@ -230,20 +304,25 @@ export default {
|
||||
// 取消按钮
|
||||
cancel() {
|
||||
this.open = false;
|
||||
this.siteTypeExpand = false;
|
||||
this.siteTypeNodeAll = false;
|
||||
this.reset();
|
||||
},
|
||||
// 表单重置
|
||||
reset() {
|
||||
this.form = {
|
||||
deptId: undefined,
|
||||
parentId: undefined,
|
||||
deptName: undefined,
|
||||
orderNum: undefined,
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
status: "0"
|
||||
};
|
||||
this.siteTypeNodeAll = false;
|
||||
this.siteTypeOptions = [];
|
||||
this.siteTypeCheckStrictly = true;
|
||||
this.form = {
|
||||
deptId: undefined,
|
||||
parentId: undefined,
|
||||
deptName: undefined,
|
||||
orderNum: undefined,
|
||||
leader: undefined,
|
||||
phone: undefined,
|
||||
email: undefined,
|
||||
status: "0"
|
||||
};
|
||||
this.resetForm("form");
|
||||
},
|
||||
/** 搜索按钮操作 */
|
||||
@@ -263,8 +342,9 @@ export default {
|
||||
}
|
||||
this.open = true;
|
||||
this.title = "添加部门";
|
||||
this.getSiteTypeTree();
|
||||
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.open = true;
|
||||
this.title = "修改部门";
|
||||
this.$nextTick(() => {
|
||||
this.$refs.siteType.setCheckedKeys(this.form.siteTypes);
|
||||
});
|
||||
});
|
||||
this.getSiteTypeTree();
|
||||
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() {
|
||||
this.$refs["form"].validate(valid => {
|
||||
submitForm: function () {
|
||||
this.form.siteTypes = this.getSiteTypeAllCheckedKeys()
|
||||
this.$refs["form"].validate(valid => {
|
||||
if (valid) {
|
||||
if (this.form.deptId != undefined) {
|
||||
updateDept(this.form).then(response => {
|
||||
@@ -302,15 +397,15 @@ export default {
|
||||
/** 删除按钮操作 */
|
||||
handleDelete(row) {
|
||||
this.$confirm('是否确认删除名称为"' + row.deptName + '"的数据项?', "警告", {
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function() {
|
||||
return delDept(row.deptId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
confirmButtonText: "确定",
|
||||
cancelButtonText: "取消",
|
||||
type: "warning"
|
||||
}).then(function () {
|
||||
return delDept(row.deptId);
|
||||
}).then(() => {
|
||||
this.getList();
|
||||
this.msgSuccess("删除成功");
|
||||
})
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
Reference in New Issue
Block a user