|
|
@@ -47,7 +47,7 @@
|
|
|
<span class="strong">角色管理</span>
|
|
|
<div>
|
|
|
<ElButton type="primary" @click="roleSubmit">提交</ElButton>
|
|
|
- <ElButton type="danger" @click="roleSubmit">删除</ElButton>
|
|
|
+ <ElButton type="danger" @click="deleteRole">删除</ElButton>
|
|
|
</div>
|
|
|
</div>
|
|
|
</template>
|
|
|
@@ -76,6 +76,7 @@
|
|
|
v-model="roleInfo.deptId"
|
|
|
:options="tableData"
|
|
|
:props="tableProps"
|
|
|
+ @change="deptChange"
|
|
|
/>
|
|
|
</ElFormItem>
|
|
|
<ElFormItem prop="desc" label="角色描述">
|
|
|
@@ -109,12 +110,15 @@
|
|
|
show-checkbox
|
|
|
node-key="id"
|
|
|
:default-expand-all="true"
|
|
|
- :default-checked-keys="[6]"
|
|
|
+ :default-checked-keys="checkedKeys"
|
|
|
@check="handleCheckChange"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
<el-tab-pane label="组织架构权限">
|
|
|
- <el-radio-group v-model="roleInfo.dataMark">
|
|
|
+ <el-radio-group
|
|
|
+ v-model="roleInfo.dataMark"
|
|
|
+ @change="dataMarkChange"
|
|
|
+ >
|
|
|
<el-radio value="1" size="large">可见本机构下的数据</el-radio>
|
|
|
<el-radio value="2" size="large"
|
|
|
>可见本机构及下级机构数据</el-radio
|
|
|
@@ -123,13 +127,15 @@
|
|
|
</el-radio-group>
|
|
|
<ElTree
|
|
|
style="max-height: 500px; overflow-y: auto"
|
|
|
- :data="tableData"
|
|
|
+ :data="deptTreeData"
|
|
|
:props="deptProps"
|
|
|
show-checkbox
|
|
|
node-key="id"
|
|
|
+ :check-strictly="true"
|
|
|
:default-expand-all="true"
|
|
|
- :default-checked-keys="[6]"
|
|
|
+ :default-checked-keys="roleInfo.deptIds"
|
|
|
@check="handleDeptCheckChange"
|
|
|
+ ref="deptTree"
|
|
|
/>
|
|
|
</el-tab-pane>
|
|
|
</el-tabs>
|
|
|
@@ -142,8 +148,13 @@
|
|
|
|
|
|
<script lang="ts" setup>
|
|
|
import { asyncRoutes } from "@/router/routes"; // 请根据实际路径调整
|
|
|
-import { ref, reactive, onMounted } from "vue";
|
|
|
-import type { FormRules } from "element-plus";
|
|
|
+import { ref, reactive, onMounted, onBeforeMount, } from "vue";
|
|
|
+import {
|
|
|
+ type FormRules,
|
|
|
+ type ElTree,
|
|
|
+ ElMessage,
|
|
|
+ ElMessageBox,
|
|
|
+} from "element-plus";
|
|
|
import {
|
|
|
preprocessRoutes,
|
|
|
convertToTreeData,
|
|
|
@@ -157,9 +168,9 @@ let roleInfo = reactive<{
|
|
|
desc: string;
|
|
|
system: string;
|
|
|
permsId: number[];
|
|
|
- perms: string[];
|
|
|
+ perms: any[];
|
|
|
deptId: string;
|
|
|
- deptIds: [];
|
|
|
+ deptIds: any[];
|
|
|
dataMark: string;
|
|
|
}>({
|
|
|
name: "", //角色
|
|
|
@@ -201,12 +212,9 @@ const handleCheckChange = (
|
|
|
// console.log(checkedInfo.checkedNodes);
|
|
|
roleInfo.permsId = checkedInfo.checkedKeys;
|
|
|
roleInfo.perms = [];
|
|
|
- checkedInfo.checkedNodes.forEach((val) => {
|
|
|
- if (val.type === "2") {
|
|
|
- roleInfo.perms.push(val.auth);
|
|
|
- }
|
|
|
- });
|
|
|
+ roleInfo.perms = checkedInfo.checkedNodes;
|
|
|
};
|
|
|
+
|
|
|
const handleDeptCheckChange = (
|
|
|
_checkedNodes: TreeNode[],
|
|
|
checkedInfo: {
|
|
|
@@ -218,7 +226,9 @@ const handleDeptCheckChange = (
|
|
|
) => {
|
|
|
// console.log('Checked keys:', checkedInfo.checkedKeys);
|
|
|
// console.log(checkedInfo.checkedNodes);
|
|
|
+
|
|
|
roleInfo.deptIds = checkedInfo.checkedKeys;
|
|
|
+
|
|
|
// roleInfo.perms = [];
|
|
|
// checkedInfo.checkedNodes.forEach((val) => {
|
|
|
// if (val.type === "2") {
|
|
|
@@ -248,18 +258,24 @@ const info = ref<institutionData>({
|
|
|
system: "",
|
|
|
});
|
|
|
//获取机构列表
|
|
|
+const deptTreeData = ref<tableType[]>([]);
|
|
|
const getInstitutionList = () => {
|
|
|
// pageInfo.pageNum=item.pageNum
|
|
|
api.institutionApi.institutionList(info.value).then((res) => {
|
|
|
// if(res.code===200){
|
|
|
|
|
|
// }
|
|
|
- tableData.value = res.data;
|
|
|
+ tableData.value = [...res.data];
|
|
|
+ deptTreeData.value = JSON.parse(JSON.stringify(res.data));
|
|
|
});
|
|
|
// pageInfo.pageSize=item.pageSize
|
|
|
};
|
|
|
|
|
|
const showRole = ref(false);
|
|
|
+interface Perm {
|
|
|
+ id: string; // 根据实际情况，id 可能是数字或字符串
|
|
|
+}
|
|
|
+const checkedKeys = ref<string[]>([]);
|
|
|
//选择角色
|
|
|
function chooseRole(item: any) {
|
|
|
roleId.value = item.id;
|
|
|
@@ -273,10 +289,23 @@ function chooseRole(item: any) {
|
|
|
perms: [],
|
|
|
})
|
|
|
.then((res) => {
|
|
|
- console.log(res);
|
|
|
+ // console.log(res);
|
|
|
roleInfo.name = res.data.name;
|
|
|
+
|
|
|
roleInfo.desc = res.data.remark;
|
|
|
roleInfo.deptId = res.data.deptId;
|
|
|
+ roleInfo.permsId = res.data.perms.map((val: Perm) => val.id);
|
|
|
+ roleInfo.perms = res.data.perms;
|
|
|
+ checkedKeys.value = res.data.perms.map((val: Perm) => val.id);
|
|
|
+ if(res.data.dataScope?.deptIds){
|
|
|
+ deptTree.value!.setCheckedKeys(res.data.dataScope?.deptIds, true);
|
|
|
+ roleInfo.dataMark = res.data.dataScope?.dataMark;
|
|
|
+ }else{
|
|
|
+ deptTree.value!.setCheckedKeys([], false);
|
|
|
+ roleInfo.dataMark = '1';
|
|
|
+ }
|
|
|
+
|
|
|
+ roleInfo.deptIds = res.data.dataScope?.deptIds;
|
|
|
});
|
|
|
operationType.value = "edit";
|
|
|
// roleInfo.name=item.name
|
|
|
@@ -295,29 +324,153 @@ function addRole() {
|
|
|
showRole.value = true;
|
|
|
operationType.value = "add";
|
|
|
}
|
|
|
-
|
|
|
+//提交角色信息
|
|
|
function roleSubmit() {
|
|
|
- let role = { ...roleInfo };
|
|
|
-
|
|
|
if (operationType.value == "add") {
|
|
|
- api.roleApi.roleAdd({
|
|
|
- // roleId: roleInfo.id,
|
|
|
- name: roleInfo.name,
|
|
|
- desc: roleInfo.desc,
|
|
|
- system: localStorage.getItem("login_system") || '',
|
|
|
- permsId: roleInfo.permsId,
|
|
|
- perms: roleInfo.perms,
|
|
|
- deptId:roleInfo.deptId[roleInfo.deptId.length-1],
|
|
|
- dataScope:{
|
|
|
- deptIds:roleInfo.deptIds,
|
|
|
- dataMark:roleInfo.dataMark,
|
|
|
-
|
|
|
- }
|
|
|
- }).then((res) => {
|
|
|
+ api.roleApi
|
|
|
+ .roleAdd({
|
|
|
+ name: roleInfo.name,
|
|
|
+ desc: roleInfo.desc,
|
|
|
+ system: localStorage.getItem("login_system") || "",
|
|
|
+ permsId: roleInfo.permsId,
|
|
|
+ perms: roleInfo.perms,
|
|
|
+ deptId: roleInfo.deptId,
|
|
|
+ dataScope: {
|
|
|
+ deptIds: roleInfo.deptIds,
|
|
|
+ dataMark: roleInfo.dataMark,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ ElMessage.success("操作成功");
|
|
|
+ getRoleList();
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ api.roleApi
|
|
|
+ .roleUpdate({
|
|
|
+ // roleId: roleInfo.id,
|
|
|
+ id: roleId.value,
|
|
|
+ name: roleInfo.name,
|
|
|
+ desc: roleInfo.desc,
|
|
|
+ system: localStorage.getItem("login_system") || "",
|
|
|
+ permsId: roleInfo.permsId,
|
|
|
+ perms: roleInfo.perms,
|
|
|
+ deptId: roleInfo.deptId,
|
|
|
+ dataScope: {
|
|
|
+ deptIds: roleInfo.deptIds,
|
|
|
+ dataMark: roleInfo.dataMark,
|
|
|
+ },
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ // console.log(res);
|
|
|
+ ElMessage.success("操作成功");
|
|
|
+ getRoleList();
|
|
|
+ });
|
|
|
+ }
|
|
|
+}
|
|
|
+//删除角色
|
|
|
+function deleteRole() {
|
|
|
+ api.roleApi
|
|
|
+ .roleDeleteValid({
|
|
|
+ id: roleId.value,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
console.log(res);
|
|
|
+ if (res.code == 200) {
|
|
|
+ ElMessageBox.confirm("确认要删除当前数据吗?", "提示", {
|
|
|
+ confirmButtonText: "确认",
|
|
|
+ cancelButtonText: "取消",
|
|
|
+ type: "warning",
|
|
|
+ })
|
|
|
+ .then(() => {
|
|
|
+ api.roleApi
|
|
|
+ .roleDelete({
|
|
|
+ id: roleId.value,
|
|
|
+ })
|
|
|
+ .then((res) => {
|
|
|
+ ElMessage.success("操作成功");
|
|
|
+ getRoleList();
|
|
|
+ });
|
|
|
+ })
|
|
|
+ .catch(() => {
|
|
|
+ ElMessage.warning("用户取消操作");
|
|
|
+ });
|
|
|
+ }
|
|
|
});
|
|
|
+}
|
|
|
+// const deptIds=re
|
|
|
+//机构单选切换
|
|
|
+const dataMarkChange = () => {
|
|
|
+ deptIds.value = [];
|
|
|
+ disabledTree(deptTreeData.value, roleInfo.deptId);
|
|
|
+ roleInfo.deptIds = deptIds.value;
|
|
|
+ if (deptIds.value.length == 0) {
|
|
|
+ deptTree.value!.setCheckedKeys([], false);
|
|
|
} else {
|
|
|
+ deptTree.value!.setCheckedKeys(deptIds.value, true);
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//根据所属id 判断组织架构权限是否可选
|
|
|
+function deptChange(e:any) {
|
|
|
+ // console.log(e)
|
|
|
+ if (e != undefined) {
|
|
|
+ let deptId = e[e?.length - 1];
|
|
|
+ roleInfo.deptId = deptId;
|
|
|
+ // if(roleInfo.dataMark=='1'){
|
|
|
+ // let arr=[...deptTreeData.value]
|
|
|
+ deptIds.value=[]
|
|
|
+ disabledTree(deptTreeData.value, deptId);
|
|
|
+ deptTree.value!.setCheckedKeys(deptIds.value, true);
|
|
|
+ roleInfo.deptIds = deptIds.value;
|
|
|
+ }else{
|
|
|
+ roleInfo.deptId=''
|
|
|
+ }
|
|
|
+
|
|
|
+ // deptTree.value.defaultCheckedKeys=roleInfo.deptIds
|
|
|
+ // }
|
|
|
+}
|
|
|
+const deptIds = ref([]);
|
|
|
+const deptTree = ref<InstanceType<typeof ElTree>>();
|
|
|
+//禁用机构选择
|
|
|
+function disabledTree(list: any[], id: string) {
|
|
|
+ for (let i = 0; i < list.length; i++) {
|
|
|
+ const node = list[i];
|
|
|
+
|
|
|
+ if (roleInfo.dataMark == "1") {
|
|
|
+ if (id) {
|
|
|
+ if (list[i].id != id) {
|
|
|
+ list[i].disabled = true;
|
|
|
+ } else {
|
|
|
+ deptIds.value.push(list[i].id);
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ list[i].disabled = false;
|
|
|
+ }
|
|
|
+ } else if (roleInfo.dataMark == "2") {
|
|
|
+ if (id) {
|
|
|
+ if (list[i].id != id && list[i].parentId != id) {
|
|
|
+ list[i].disabled = true;
|
|
|
+ } else {
|
|
|
+ list[i].disabled = false;
|
|
|
+ deptIds.value.push(list[i].id);
|
|
|
+ }
|
|
|
+ // if (list[i].disabled == false) {
|
|
|
+ // deptIds.value.push(list[i].id);
|
|
|
+ // }
|
|
|
+ } else {
|
|
|
+ list[i].disabled = false;
|
|
|
+ }
|
|
|
+
|
|
|
+ //
|
|
|
+ } else {
|
|
|
+ list[i].disabled = false;
|
|
|
+ }
|
|
|
+ // console.log(list[i].disabled)
|
|
|
|
|
|
+ if (node.children && node.children.length > 0) {
|
|
|
+ disabledTree(node.children, id);
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -341,10 +494,15 @@ function getRoleList() {
|
|
|
// roleId.value = res.data[0].id;
|
|
|
});
|
|
|
}
|
|
|
-onMounted(() => {
|
|
|
+onBeforeMount(() => {
|
|
|
// 对 asyncRoutes 进行预处理并转换为树形结构
|
|
|
const processedRoutes = preprocessRoutes(asyncRoutes);
|
|
|
- treeData.value = convertToTreeData(processedRoutes);
|
|
|
+
|
|
|
+ treeData.value = convertToTreeData(0, processedRoutes);
|
|
|
+});
|
|
|
+onMounted(() => {
|
|
|
+ // 对 asyncRoutes 进行预处理并转换为树形结构
|
|
|
+
|
|
|
getRoleList();
|
|
|
getInstitutionList();
|
|
|
});
|
刘恒