<template>
|
<div class="contentBox">
|
<div class="content">
|
<div class="addBtnBox">
|
<el-button type="success" @click="openDialog('1')"
|
>新增顶级目录
|
</el-button>
|
<el-button type="success" @click="openDialog('2')"
|
>添加子级目录
|
</el-button>
|
<el-button type="danger" @click="deleteDep()">删除选中目录 </el-button>
|
</div>
|
<div class="inquire">
|
<el-form :model="queryFormdata" :inline="true">
|
<el-form-item label="部门名称">
|
<el-input v-model="queryFormdata.name" />
|
</el-form-item>
|
<el-form-item>
|
<el-button type="primary" @click="queryInfo()" icon="el-icon-search"
|
>查询
|
</el-button>
|
</el-form-item>
|
</el-form>
|
</div>
|
<div class="treeBox leftTree">
|
<el-tree
|
:expand-on-click-node="false"
|
ref="deptreeRef"
|
:data="depTreeData"
|
show-checkbox
|
default-expand-all
|
node-key="value"
|
check-strictly
|
:props="defaultProps"
|
@node-click="handleNodeClick"
|
/>
|
</div>
|
</div>
|
<div class="content">
|
<el-tabs v-model="activeName" class="demo-tabs">
|
<el-tab-pane label="基本信息" name="first">
|
<el-form
|
style="width: 85%; margin: 0 auto"
|
:model="depForm"
|
ref="depFormRef"
|
:rules="rules"
|
>
|
<el-form-item
|
label="机构名称"
|
:label-width="formLabelWidth"
|
prop="departName"
|
>
|
<el-input v-model="depForm.departName" />
|
</el-form-item>
|
<el-form-item label="上级部门" :label-width="formLabelWidth">
|
<el-tree-select
|
placeholder="无"
|
v-model="depForm.parentId"
|
:props="defaultProps"
|
disabled
|
:data="depTreeData"
|
node-key="value"
|
:render-after-expand="false"
|
/>
|
</el-form-item>
|
<el-form-item label="机构编码" :label-width="formLabelWidth">
|
<el-input :disabled="true" v-model="depForm.orgCode" />
|
</el-form-item>
|
<el-form-item
|
label="机构类型"
|
:label-width="formLabelWidth"
|
prop="orgCategory"
|
>
|
<el-radio-group v-model="depForm.orgCategory">
|
<div
|
v-if="
|
depForm.parentId == '' ||
|
depForm.parentId == null ||
|
depForm.parentId == undefined
|
"
|
>
|
<el-radio-button :label="1">公司</el-radio-button>
|
</div>
|
<div v-else>
|
<el-radio-button :label="2">部门</el-radio-button>
|
<el-radio-button :label="3">岗位</el-radio-button>
|
</div>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="排序" :label-width="formLabelWidth">
|
<el-input-number
|
v-model="depForm.departOrder"
|
:min="0"
|
:max="100"
|
controls-position="right"
|
@change="handleChange"
|
/>
|
</el-form-item>
|
<el-form-item label="电话" :label-width="formLabelWidth">
|
<el-input v-model="depForm.mobile" placeholder="" />
|
</el-form-item>
|
<el-form-item label="传真" :label-width="formLabelWidth">
|
<el-input v-model="depForm.fax" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="地址" :label-width="formLabelWidth">
|
<el-input v-model="depForm.address" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
<el-input
|
:rows="2"
|
type="textarea"
|
v-model="depForm.memo"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<div class="dialog-footer">
|
<el-button @click="resetDepForm(depFormRef)">重置</el-button>
|
<el-button type="primary" @click="editDep(depFormRef)"
|
>保存</el-button
|
>
|
</div>
|
</el-form-item>
|
</el-form>
|
</el-tab-pane>
|
<el-tab-pane label="部门权限" name="second">
|
<div class="treeBox">
|
<el-tree
|
ref="menutreeRef"
|
:data="menuOptions"
|
show-checkbox
|
default-expand-all
|
node-key="value"
|
check-strictly
|
highlight-current
|
check-on-click-node
|
:props="menuProps"
|
/>
|
</div>
|
<div class="tab-footer">
|
<div>
|
<el-button @click="selectAll(false)">重置</el-button>
|
<el-button type="primary" @click="selectAll(true)"
|
>全选</el-button
|
>
|
</div>
|
<div>
|
<el-button type="primary" @click="saveDepPerm()">
|
保存
|
</el-button>
|
</div>
|
|
<!-- <el-button type="primary" @click="handleCheckedTreeExpand(true)"
|
>展开</el-button
|
>
|
<el-button type="primary" @click="handleCheckedTreeExpand(false)"
|
>折叠</el-button
|
> -->
|
</div>
|
</el-tab-pane>
|
</el-tabs>
|
</div>
|
</div>
|
<el-dialog
|
destroy-on-close
|
:before-close="DialogClose"
|
v-model="dialogTableVisible"
|
title="新增"
|
width="800px"
|
>
|
<el-form
|
style="width: 85%; margin: 0 auto"
|
:model="addForm"
|
ref="addFormRef"
|
:rules="rules"
|
>
|
<el-form-item
|
label="机构名称"
|
:label-width="formLabelWidth"
|
prop="departName"
|
>
|
<el-input v-model="addForm.departName" />
|
</el-form-item>
|
<el-form-item
|
v-if="addType == '2'"
|
label="上级部门"
|
:label-width="formLabelWidth"
|
>
|
<el-tree-select
|
v-model="addForm.parentId"
|
:props="defaultProps"
|
disabled
|
:data="depTreeData"
|
node-key="value"
|
:render-after-expand="false"
|
/>
|
</el-form-item>
|
|
<el-form-item
|
label="机构类型"
|
:label-width="formLabelWidth"
|
prop="orgCategory"
|
>
|
<el-radio-group v-model="addForm.orgCategory">
|
<div v-if="addType == '1'">
|
<el-radio-button :label="1">公司</el-radio-button>
|
</div>
|
<div v-if="addType == '2'">
|
<el-radio-button :label="2">部门</el-radio-button>
|
<el-radio-button :label="3">岗位</el-radio-button>
|
</div>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="排序" :label-width="formLabelWidth">
|
<el-input-number
|
v-model="addForm.departOrder"
|
:min="0"
|
:max="100"
|
controls-position="right"
|
@change="handleChange"
|
/>
|
</el-form-item>
|
<el-form-item label="电话" :label-width="formLabelWidth">
|
<el-input v-model="addForm.mobile" placeholder="" />
|
</el-form-item>
|
<el-form-item label="传真" :label-width="formLabelWidth">
|
<el-input v-model="addForm.fax" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="地址" :label-width="formLabelWidth">
|
<el-input v-model="addForm.address" autocomplete="off" />
|
</el-form-item>
|
<el-form-item label="备注" :label-width="formLabelWidth">
|
<el-input
|
:rows="2"
|
type="textarea"
|
v-model="addForm.memo"
|
autocomplete="off"
|
/>
|
</el-form-item>
|
<el-form-item>
|
<div class="dialog-footer" v-if="addType == '1'">
|
<el-button @click="DialogClose(addFormRef)">取消</el-button>
|
<el-button @click="addCo(addFormRef)" type="primary">确定</el-button>
|
</div>
|
<div class="dialog-footer" v-if="addType == '2'">
|
<el-button @click="DialogClose(addFormRef)">取消</el-button>
|
<el-button @click="addCo(addFormRef)" type="primary">确定</el-button>
|
</div>
|
</el-form-item>
|
</el-form>
|
</el-dialog>
|
</template>
|
|
<script>
|
import { queryTreeList } from "@/api/role";
|
import { ref, reactive, getCurrentInstance, nextTick } from "vue";
|
import { ElMessageBox } from "element-plus";
|
import {
|
DepartListAll,
|
searchBy,
|
queryDepartPermission,
|
edit,
|
saveDepartPermission,
|
deleteBatch,
|
addDepart,
|
} from "@/api/dep";
|
|
export default {
|
name: "Depart",
|
setup() {
|
const menuProps = {
|
children: "children",
|
label: "slotTitle",
|
};
|
const depFormRef = ref();
|
const addFormRef = ref();
|
|
const formLabelWidth = "80px";
|
const deptreeRef = ref();
|
const menutreeRef = ref();
|
const activeName = ref("first");
|
const menuOptions = ref([]);
|
const depTreeData = ref([]);
|
const defaultProps = {
|
children: "children",
|
label: "title",
|
};
|
const { proxy } = getCurrentInstance();
|
const queryFormdata = reactive({
|
name: "",
|
});
|
const rules = ref({
|
departName: [
|
{
|
required: true,
|
message: "请输入机构名称",
|
trigger: "blur",
|
},
|
],
|
});
|
const oldNodedata = ref("");
|
const addType = ref("");
|
const addForm = reactive({
|
departName: "",
|
orgCategory: "", //组织类别
|
departOrder: 0,
|
mobile: "",
|
fax: "",
|
address: "",
|
memo: "",
|
parentId: "",
|
});
|
const depPerArr = ref([]);
|
const depForm = reactive({
|
key: "",
|
value: "",
|
title: "",
|
isLeaf: false,
|
id: "",
|
parentId: "",
|
departName: "",
|
departNameEn: null,
|
departNameAbbr: null,
|
departOrder: 0, //排序
|
description: null,
|
orgCategory: "", //机构类型
|
orgType: "",
|
orgCode: "", //机构编码
|
mobile: null, //电话
|
fax: null, //传真
|
address: null, //地址
|
memo: null, //备注
|
status: null,
|
delFlag: "",
|
qywxIdentifier: null,
|
createBy: "",
|
createTime: "",
|
updateBy: "",
|
updateTime: "",
|
directorUserIds: null,
|
children: [],
|
});
|
const dialogTableVisible = ref(false);
|
|
const openDialog = (val) => {
|
addType.value = val;
|
if (val == "1") {
|
addForm.orgCategory = "1";
|
} else if (val == "2") {
|
addForm.orgCategory = "";
|
addForm.parentId = depForm.id;
|
}
|
dialogTableVisible.value = true;
|
};
|
const addCo = () => {
|
let addInfo = JSON.parse(JSON.stringify(addForm));
|
if (addInfo.parentId == "") {
|
delete addInfo.parentId;
|
}
|
addDepart(addInfo).then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
addInfo = {};
|
DialogClose();
|
getDepList();
|
}
|
});
|
};
|
|
const DialogClose = () => {
|
dialogTableVisible.value = false;
|
addForm.departName = "";
|
addForm.orgCategory = "";
|
addForm.departOrder = 0;
|
addForm.mobile = "";
|
addForm.fax = "";
|
addForm.address = "";
|
addForm.memo = "";
|
addForm.parentId = "";
|
};
|
const deleteDep = (done) => {
|
if (deptreeRef.value.getCheckedKeys().length == 0) {
|
return proxy.$message({
|
message: "请先选中目录",
|
type: "error",
|
});
|
}
|
ElMessageBox.confirm("确定要删除吗？")
|
.then(() => {
|
let ids = deptreeRef.value.getCheckedKeys().join(",");
|
deleteBatch({ ids: ids })
|
.then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
getDepList();
|
}
|
})
|
.catch((err) => {
|
proxy.$message({
|
message: JSON.parse(err).message,
|
type: "error",
|
});
|
});
|
done();
|
})
|
.catch(() => {});
|
};
|
const queryInfo = async () => {
|
let name = queryFormdata.name.trim();
|
if (name != "") {
|
let searchData = {
|
keyWord: queryFormdata.name.trim(),
|
_t: new Date().getTime(),
|
};
|
const depData = await searchBy(searchData);
|
depTreeData.value = depData.result;
|
nextTick().then(() => {
|
const firstNode = document.querySelector(".el-tree-node");
|
firstNode.click();
|
});
|
} else {
|
getDepList();
|
}
|
};
|
// 请求部门列表
|
const getDepList = async () => {
|
const depData = await DepartListAll();
|
depTreeData.value = depData.result;
|
nextTick().then(() => {
|
const firstNode = document.querySelector(".el-tree-node");
|
firstNode.click();
|
});
|
};
|
const handleNodeClick = (row, node) => {
|
depForm.key = row.key;
|
depForm.value = row.value;
|
depForm.title = row.title;
|
depForm.isLeaf = false;
|
depForm.id = row.id;
|
depForm.parentId = node.parent.data.id ? node.parent.data.id : "";
|
depForm.departName = row.departName;
|
depForm.departNameEn = row.departNameEn;
|
depForm.departNameAbbr = row.departNameAbbr;
|
depForm.description = row.description;
|
depForm.departOrder = row.departOrder;
|
depForm.orgCategory = row.orgCategory;
|
depForm.orgType = row.orgType;
|
depForm.orgCode = row.orgCode;
|
depForm.mobile = row.mobile;
|
depForm.fax = row.fax;
|
depForm.address = row.address;
|
depForm.memo = row.memo;
|
depForm.status = row.status;
|
depForm.delFlag = row.delFlag;
|
depForm.qywxIdentifier = row.qywxIdentifier;
|
depForm.createBy = row.createBy;
|
depForm.createTime = row.createTime;
|
depForm.updateBy = row.updateBy;
|
depForm.updateTime = row.updateTime;
|
depForm.children = row.children;
|
depForm.updateBy = row.updateBy;
|
depForm.children = row.children;
|
oldNodedata.value = JSON.stringify(depForm);
|
queryTreeList({
|
_t: new Date().getTime(),
|
}).then((res) => {
|
if (res.result && res.result.treeList.length != 0) {
|
menuOptions.value = res.result.treeList;
|
}
|
});
|
queryDepartPermission({
|
departId: row.id,
|
_t: new Date().getTime(),
|
}).then((res) => {
|
if (res.result) {
|
depPerArr.value = res.result;
|
menutreeRef.value.setCheckedKeys(res.result, false);
|
}
|
});
|
};
|
const editDep = async (formEl) => {
|
if (!formEl) return;
|
await formEl.validate((valid, fields) => {
|
if (valid) {
|
edit(depForm).then((res) => {
|
if (res.success) {
|
proxy.$message({
|
message: res.message,
|
type: "success",
|
});
|
getDepList();
|
}
|
});
|
} else {
|
proxy.$message({
|
message: "请检查后无误后保存",
|
type: "error",
|
});
|
}
|
});
|
};
|
const resetDepForm = (formEl) => {
|
if (!formEl) return;
|
formEl.resetFields();
|
let resetData = JSON.parse(oldNodedata.value);
|
depForm.key = resetData.key;
|
depForm.value = resetData.value;
|
depForm.title = resetData.title;
|
depForm.isLeaf = false;
|
depForm.id = resetData.id;
|
depForm.parentId = resetData.parentId;
|
depForm.departName = resetData.departName;
|
depForm.departNameEn = resetData.departNameEn;
|
depForm.departNameAbbr = resetData.departNameAbbr;
|
depForm.description = resetData.description;
|
depForm.departOrder = resetData.departOrder;
|
depForm.orgCategory = resetData.orgCategory;
|
depForm.orgType = resetData.orgType;
|
depForm.orgCode = resetData.orgCode;
|
depForm.mobile = resetData.mobile;
|
depForm.fax = resetData.fax;
|
depForm.address = resetData.address;
|
depForm.memo = resetData.memo;
|
depForm.status = resetData.status;
|
depForm.delFlag = resetData.delFlag;
|
depForm.qywxIdentifier = resetData.qywxIdentifier;
|
depForm.createBy = resetData.createBy;
|
depForm.createTime = resetData.createTime;
|
depForm.updateBy = resetData.updateBy;
|
depForm.updateTime = resetData.updateTime;
|
depForm.children = resetData.children;
|
depForm.updateBy = resetData.updateBy;
|
depForm.children = resetData.children;
|
};
|
|
const selectAll = (val) => {
|
if (val) {
|
let selectData = jsonToArray(menuOptions.value).map((item) => {
|
return item.value;
|
});
|
menutreeRef.value.setCheckedKeys(selectData, false);
|
} else {
|
menutreeRef.value.setCheckedKeys([], false);
|
}
|
};
|
const saveDepPerm = async () => {
|
let obj = {
|
departId: depForm.id,
|
permissionIds: menutreeRef.value.getCheckedKeys(false).join(","),
|
lastpermissionIds: depPerArr.value.join(","),
|
};
|
const data = await saveDepartPermission(obj);
|
proxy.$message({
|
message: data.message,
|
type: "success",
|
});
|
queryDepartPermission({
|
departId: depForm.id,
|
_t: new Date().getTime(),
|
}).then((res) => {
|
if (res.result) {
|
depPerArr.value = res.result;
|
menutreeRef.value.setCheckedKeys(res.result, false);
|
}
|
});
|
};
|
// const handleCheckedTreeExpand = (value) => {
|
// console.log(menutreeRef.value);
|
// let selectData = jsonToArray(menuOptions.value);
|
// // console.log(selectData);
|
// for (let i = 0; i < menuOptions.value.length; i++) {
|
// // console.log(
|
// // menutreeRef.value.store.nodesMap[selectData[i].value].expanded
|
// // );
|
// menutreeRef.value.store.nodesMap[selectData[i].value].expanded = value;
|
// }
|
// };
|
// tree 结构转化成一维数组
|
const jsonToArray = (nodes) => {
|
let r = [];
|
if (Array.isArray(nodes)) {
|
for (let i = 0, l = nodes.length; i < l; i++) {
|
r.push(nodes[i]); // 取每项数据放入一个新数组
|
if (
|
Array.isArray(nodes[i]["children"]) &&
|
nodes[i]["children"].length > 0
|
)
|
// 若存在children则递归调用，把数据拼接到新数组中，并且删除该children
|
r = r.concat(jsonToArray(nodes[i]["children"]));
|
// delete nodes[i]["children"] //此项会更改原数组
|
}
|
}
|
return r;
|
};
|
|
const handleChange = () => {};
|
getDepList();
|
|
return {
|
addType,
|
openDialog,
|
addCo,
|
deleteDep,
|
rules,
|
queryFormdata,
|
queryInfo,
|
getDepList,
|
defaultProps,
|
menuOptions,
|
menuProps,
|
depTreeData,
|
handleNodeClick,
|
handleChange,
|
|
activeName,
|
deptreeRef,
|
menutreeRef,
|
depForm,
|
addForm,
|
formLabelWidth,
|
depFormRef,
|
addFormRef,
|
editDep,
|
resetDepForm,
|
selectAll,
|
dialogTableVisible,
|
DialogClose,
|
// handleCheckedTreeExpand,
|
saveDepPerm,
|
};
|
},
|
};
|
</script>
|
|
<style scoped>
|
.treeBox {
|
height: 500px;
|
overflow: auto;
|
width: 100%;
|
color: #000;
|
}
|
.addBtnBox {
|
height: 100%;
|
margin-bottom: 20px;
|
}
|
.contentBox {
|
width: 100%;
|
display: flex;
|
justify-content: space-between;
|
}
|
.content {
|
height: 100%;
|
width: 48%;
|
}
|
.demo-tabs >>> .is-active {
|
background-color: transparent !important;
|
}
|
.dialog-footer {
|
display: flex;
|
justify-content: flex-end;
|
}
|
.tab-footer {
|
margin-top: 30px;
|
display: flex;
|
justify-content: space-between;
|
}
|
.leftTree >>> .is-current > .el-tree-node__content > .el-tree-node__label {
|
background-color: #bce6fd;
|
}
|
</style>
|
