角色管理 权限树问题

src/views/system/role2/index.vue

@@ -1,371 +1,345 @@
 <template>
-	<div class="role">
-        <div class="tree">
-            <treeList
-                :data="treeListData"
-                v-model="sourceList.pagination.tenantId"
-                node-key="id"
-                @change="treeChange"
-            >
-            </treeList>
-        </div>
-		<div class="content">
-			<byTable
-				:source="sourceList.data"
-				:pagination="sourceList.pagination"
-				:config="config"
-				:loading="loading"
-				highlight-current-row
-				:selectConfig="selectConfig"
-				:table-events="{
-					//element talbe事件都能传
-					'select': select,
-				}"
-				:action-list="[
-					{
-						text: '权限配置',
-						plain: true,
-						//type: 'warning',
-						action: () => openRoomModal(),
-						disabled:selection.data.length != 1,
-					},
-					{
-						text: '添加角色',
-						action: () => openModal('add'),
-						disabled:!sourceList.pagination.tenantId
-					},
-				]"
-				@get-list="getList"
-			>
-				<template #slotName="{ item }">
-					{{ item.createTime }}
-				</template>
-			</byTable>
-		</div>
-		<el-dialog
-			:title="modalType == 'add' ? '新增' : '编辑'"
-			v-model="dialogVisible"
-			width="500"
-			v-loading="loading"
-		>
-			<byForm
-				:formConfig="formConfig"
-				:formOption="formOption"
-				v-model="formData.data"
-				:rules="rules"
-				ref="byform"
-			>
-				
-			</byForm>
-			<template #footer>
-				<el-button @click="dialogVisible = false" size="large"
-					>取 消</el-button
-				>
-				<el-button
-					type="primary"
-					@click="submitForm('byform')"
-					size="large"
-					:loading="submitLoading">
-					确 定
-				</el-button>
-			</template>
-		</el-dialog>
-		<el-dialog
-			title="权限配置"
-			v-model="roomDialogVisible"
-			width="500"
-			:before-close="handleClose"
-			v-loading="loading">
-				
-				<el-tree
-					:data="treeData"
-					:show-checkbox="true"
-					v-model="formData.treeData"
-					ref="tree"
-					node-key="id"
-				>
-				</el-tree>
-			<template #footer>
-				<el-button @click="roomDialogVisible = false" size="large"
-					>取 消</el-button
-				>
-				<el-button
-					type="primary"
-					@click="submitTree('byform')"
-					size="large"
-					:loading="submitLoading">
-					确 定
-				</el-button>
-			</template>
-		</el-dialog>
-	</div>
+  <div class="role">
+    <div class="tree">
+      <treeList :data="treeListData" v-model="sourceList.pagination.tenantId" node-key="id" @change="treeChange"> </treeList>
+    </div>
+    <div class="content">
+      <byTable
+        :source="sourceList.data"
+        :pagination="sourceList.pagination"
+        :config="config"
+        :loading="loading"
+        highlight-current-row
+        :selectConfig="selectConfig"
+        :table-events="{
+          //element talbe事件都能传
+          select: select,
+        }"
+        :action-list="[
+          {
+            text: '权限配置',
+            plain: true,
+            //type: 'warning',
+            action: () => openRoomModal(),
+            disabled: selection.data.length != 1,
+          },
+          {
+            text: '添加角色',
+            action: () => openModal('add'),
+            disabled: !sourceList.pagination.tenantId,
+          },
+        ]"
+        @get-list="getList">
+        <template #slotName="{ item }">
+          {{ item.createTime }}
+        </template>
+      </byTable>
+    </div>
+    <el-dialog :title="modalType == 'add' ? '新增' : '编辑'" v-model="dialogVisible" width="500" v-loading="loading">
+      <byForm :formConfig="formConfig" :formOption="formOption" v-model="formData.data" :rules="rules" ref="byform"> </byForm>
+      <template #footer>
+        <el-button @click="dialogVisible = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitForm('byform')" size="large" :loading="submitLoading"> 确 定 </el-button>
+      </template>
+    </el-dialog>
+    <el-dialog title="权限配置" v-model="roomDialogVisible" width="500" :before-close="handleClose" v-loading="loading">
+      <el-tree :data="treeData" show-checkbox node-key="id" :default-checked-keys="formData.treeData" :props="defaultProps" ref="tree"> </el-tree>
+      <template #footer>
+        <el-button @click="roomDialogVisible = false" size="large">取 消</el-button>
+        <el-button type="primary" @click="submitTree('byform')" size="large" :loading="submitLoading"> 确 定 </el-button>
+      </template>
+    </el-dialog>
+  </div>
 </template>
-  
+
 <script setup>
 /* eslint-disable vue/no-unused-components */
-import { ElMessage, ElMessageBox } from 'element-plus'
-import byTable from '@/components/byTable/index'
-import byForm from '@/components/byForm/index'
-import treeList from '@/components/treeList/index'
-import { computed, defineComponent, ref } from 'vue'
-const loading = ref(false)
-const submitLoading = ref(false)
+import { ElMessage, ElMessageBox } from "element-plus";
+import byTable from "@/components/byTable/index";
+import byForm from "@/components/byForm/index";
+import treeList from "@/components/treeList/index";
+import { computed, defineComponent, ref } from "vue";
+const loading = ref(false);
+const submitLoading = ref(false);
+const defaultProps = {
+  children: "children",
+  label: "label",
+};
 const sourceList = ref({
-	data: [],
-	pagination: {
-		total: 3,
-		pageNum: 1,
-		pageSize: 10,
-
-	},
-})
-let dialogVisible = ref(false)
-let roomDialogVisible = ref(false)
-let modalType = ref('add')
+  data: [],
+  pagination: {
+    total: 3,
+    pageNum: 1,
+    pageSize: 10,
+  },
+});
+let dialogVisible = ref(false);
+let roomDialogVisible = ref(false);
+let modalType = ref("add");
 let rules = ref({
-	roleKey: [{ required: true, message: '请输入角色编码', trigger: 'blur' }],
-	roleName: [{ required: true, message: '请输入角色名称', trigger: 'blur' }],
-})
-const { proxy } = getCurrentInstance()
+  roleKey: [{ required: true, message: "请输入角色编码", trigger: "blur" }],
+  roleName: [{ required: true, message: "请输入角色名称", trigger: "blur" }],
+});
+const { proxy } = getCurrentInstance();
 const selectConfig = computed(() => {
-	return [
-	]
-})
+  return [];
+});
 const config = computed(() => {
-	return [
-        {
-			type: 'selection',
-			attrs: {
-				label: '多选',
-				prop: 'remark',
-			},
-		},
-		{
-			attrs: {
-				label: '角色编码',
-				prop: 'roleKey',
-			},
-		},
-		{
-			attrs: {
-				label: '角色名称',
-				prop: 'roleName',
-				align: 'left',
-			},
-		},
-		{
-			attrs: {
-				label: '创建时间',
-				prop: 'createTime',
-			},
-		},
-		{
-			attrs: {
-				label: '操作',
-				width: '200',
-				align: 'right',
-			},
-			// 渲染 el-button，一般用在最后一列。
-			renderHTML(row) {
-				return [
-					{
-						attrs: {
-							label: '修改',
-							type: 'primary',
-							text: true,
-						},
-						el: 'button',
-						click() {
-							getDtl(row)
-						},
-					},
-					{
-						attrs: {
-							label: '删除',
-							type: 'danger',
-							text: true,
-						},
-						el: 'button',
-						click() {
-							// 弹窗提示是否删除
-							ElMessageBox.confirm('此操作将永久删除该数据, 是否继续?', '提示', {
-								confirmButtonText: '确定',
-								cancelButtonText: '取消',
-								type: 'warning',
-							})
-								.then(() => {
-									// 删除
-									proxy.post('/tenantRole/' + row.roleId, {
-										id: row.roleId,
-									},'delete').then((res) => {
-										ElMessage({
-											message: '删除成功',
-											type: 'success',
-										})
-										getList()
-									})
-								})
-						},
-					},
-				]
-			},
-		},
-	]
-})
+  return [
+    {
+      type: "selection",
+      attrs: {
+        label: "多选",
+        prop: "remark",
+      },
+    },
+    {
+      attrs: {
+        label: "角色编码",
+        prop: "roleKey",
+      },
+    },
+    {
+      attrs: {
+        label: "角色名称",
+        prop: "roleName",
+        align: "left",
+      },
+    },
+    {
+      attrs: {
+        label: "创建时间",
+        prop: "createTime",
+      },
+    },
+    {
+      attrs: {
+        label: "操作",
+        width: "200",
+        align: "right",
+      },
+      // 渲染 el-button，一般用在最后一列。
+      renderHTML(row) {
+        return [
+          {
+            attrs: {
+              label: "修改",
+              type: "primary",
+              text: true,
+            },
+            el: "button",
+            click() {
+              getDtl(row);
+            },
+          },
+          {
+            attrs: {
+              label: "删除",
+              type: "danger",
+              text: true,
+            },
+            el: "button",
+            click() {
+              // 弹窗提示是否删除
+              ElMessageBox.confirm("此操作将永久删除该数据, 是否继续?", "提示", {
+                confirmButtonText: "确定",
+                cancelButtonText: "取消",
+                type: "warning",
+              }).then(() => {
+                // 删除
+                proxy
+                  .post(
+                    "/tenantRole/" + row.roleId,
+                    {
+                      id: row.roleId,
+                    },
+                    "delete"
+                  )
+                  .then((res) => {
+                    ElMessage({
+                      message: "删除成功",
+                      type: "success",
+                    });
+                    getList();
+                  });
+              });
+            },
+          },
+        ];
+      },
+    },
+  ];
+});
 
 let formData = reactive({
-	data:{},
-	treeData:[],
-})
+  data: {},
+  treeData: [],
+});
 const formOption = reactive({
-	inline: true,
-	labelWidth: 100,
-	itemWidth: 100,
-	rules: [],
-})
-const byform = ref(null)
-const treeData = ref([])
-const treeListData = ref([])
+  inline: true,
+  labelWidth: 100,
+  itemWidth: 100,
+  rules: [],
+});
+const byform = ref(null);
+const treeData = ref([]);
+const treeListData = ref([]);
 const formConfig = computed(() => {
-	return [
-        
-		{
-			type: 'input',
-			prop: 'roleKey',
-			label: '角色编码',
-			required: true,
-			itemWidth: 100,
-			//disabled:true,
-			itemType: 'text',
-		},
-		{
-			type: 'input',
-			prop: 'roleName',
-			label: '角色名称',
-			required: true,
-			itemWidth: 100,
-			//disabled:true,
-			itemType: 'text',
-		},
-	]
-})
+  return [
+    {
+      type: "input",
+      prop: "roleKey",
+      label: "角色编码",
+      required: true,
+      itemWidth: 100,
+      //disabled:true,
+      itemType: "text",
+    },
+    {
+      type: "input",
+      prop: "roleName",
+      label: "角色名称",
+      required: true,
+      itemWidth: 100,
+      //disabled:true,
+      itemType: "text",
+    },
+  ];
+});
 const getTreeList = () => {
-    proxy.post('/tenantInfo/list').then((message) => {
-        message.map((item) => {
-            item.label = item.enterpriseName
-            item.id = item.tenantId
-            item.children = []
-        })
-        treeListData.value = message
-        console.log(treeListData.value)
-    })
-}
+  proxy.post("/tenantInfo/list").then((message) => {
+    message.map((item) => {
+      item.label = item.enterpriseName;
+      item.id = item.tenantId;
+      item.children = [];
+    });
+    treeListData.value = message;
+    console.log(treeListData.value);
+  });
+};
 const getList = async (req) => {
-	sourceList.value.pagination = { ...sourceList.value.pagination, ...req }
-	loading.value = true
-	proxy.get('/tenantRole/list',sourceList.value.pagination).then((message) => {
-		console.log(message)
-		sourceList.value.data = message.rows
-		sourceList.value.pagination.total = message.total
-		setTimeout(() => {
-			loading.value = false
-		}, 200)
-	})
-}
+  sourceList.value.pagination = { ...sourceList.value.pagination, ...req };
+  loading.value = true;
+  proxy.get("/tenantRole/list", sourceList.value.pagination).then((message) => {
+    console.log(message);
+    sourceList.value.data = message.rows;
+    sourceList.value.pagination.total = message.total;
+    setTimeout(() => {
+      loading.value = false;
+    }, 200);
+  });
+};
 
-const treeChange = ((e) => {
-	console.log(e)
-    sourceList.value.pagination.tenantId = e.id
-    getList({tenantId:e.id})
-})
+const treeChange = (e) => {
+  console.log(e);
+  sourceList.value.pagination.tenantId = e.id;
+  getList({ tenantId: e.id });
+};
 
 const openModal = () => {
-	dialogVisible.value = true
-	modalType.value = 'add'
-	formData.data = {
-		tableData:[{num:111,age:222,renyuan:2},{num:111,age:222,renyuan:1}]
-	}
-}
-const TreetenantId = ref('')
+  dialogVisible.value = true;
+  modalType.value = "add";
+  formData.data = {
+    tableData: [
+      { num: 111, age: 222, renyuan: 2 },
+      { num: 111, age: 222, renyuan: 1 },
+    ],
+  };
+};
+const TreetenantId = ref("");
 const selection = ref({
-	data:[],
-})
+  data: [],
+});
 const select = (_selection, row) => {
-	selection.value.data = _selection
-	console.log(_selection.length)
-}
+  selection.value.data = _selection;
+  console.log(_selection.length);
+};
+const getSubset = (list, data) => {
+  for (let i = 0; i < list.length; i++) {
+    if (list[i].children && list[i].children.length > 0) {
+      getSubset(list[i].children, data);
+    } else {
+      data.push(list[i].id);
+    }
+  }
+  return data;
+};
+const tree = ref(null);
 const openRoomModal = () => {
-	roomDialogVisible.value = true
-	proxy.get('/tenantRole/roleMenuTreeSelect/' + selection.value.data[0].roleId).then((res) => {
-		if(res.code == 200){
-			treeData.value = res.menus
-			formData.treeData = res.checkedKeys
-			tree.value.setCheckedKeys(res.checkedKeys)
-		}
-	})
-}
-const tree = ref(null)
+  proxy.get("/tenantRole/roleMenuTreeSelect/" + selection.value.data[0].roleId).then((res) => {
+    if (res.code == 200) {
+      treeData.value = res.menus;
+      let data = getSubset(res.menus, []);
+      formData.treeData = res.checkedKeys.filter((item) => {
+        return data.some((i) => item == i);
+      });
+      roomDialogVisible.value = true;
+    }
+  });
+};
+const noRepeat = (arr) => {
+  var newArr = [...new Set(arr)];
+  return newArr;
+};
 const submitTree = () => {
-	proxy.post('/tenantRole', {
-		... selection.value.data[0],
-		menuIds:tree.value.getCheckedKeys(),
-	},'PUT').then((res) => {
-		ElMessage({
-			message: '保存成功',
-			type: 'success',
-		})
-		roomDialogVisible.value = false
-	})
-}
-
-
+  let data = noRepeat(tree.value.getHalfCheckedKeys().concat(tree.value.getCheckedKeys()));
+  proxy
+    .post(
+      "/tenantRole",
+      {
+        ...selection.value.data[0],
+        menuIds: data,
+      },
+      "PUT"
+    )
+    .then((res) => {
+      ElMessage({
+        message: "保存成功",
+        type: "success",
+      });
+      roomDialogVisible.value = false;
+    });
+};
 
 const submitForm = () => {
-	console.log(formData.data)
-	return
-	byform.value.handleSubmit((valid) => {
-		const method = modalType.value == 'add' ? 'POST' : 'PUT'
-		console.log(method)
-		proxy.post(
-				'/tenantRole',
-				{...formData.data,
-					tenantId:sourceList.value.pagination.tenantId,
-					roleSort:1,
-					status:"0"},
-					method
-				).then((res) => {
-			ElMessage({
-				message: modalType.value == 'add' ? '添加成功' : '编辑成功',
-				type: 'success',  
-			})
-			dialogVisible.value = false
-			getList()
-		})
-	})
-}
+  console.log(formData.data);
+  return;
+  byform.value.handleSubmit((valid) => {
+    const method = modalType.value == "add" ? "POST" : "PUT";
+    console.log(method);
+    proxy.post("/tenantRole", { ...formData.data, tenantId: sourceList.value.pagination.tenantId, roleSort: 1, status: "0" }, method).then((res) => {
+      ElMessage({
+        message: modalType.value == "add" ? "添加成功" : "编辑成功",
+        type: "success",
+      });
+      dialogVisible.value = false;
+      getList();
+    });
+  });
+};
 
 const getDtl = (row) => {
-	formData.data = {...row}
-	delete formData.data.menuIds
-	console.log(formData.data)
-	modalType.value = 'edit'
-	console.log(modalType.value)
-	dialogVisible.value = true
-}
-getTreeList()
-getList()
+  formData.data = { ...row };
+  delete formData.data.menuIds;
+  console.log(formData.data);
+  modalType.value = "edit";
+  console.log(modalType.value);
+  dialogVisible.value = true;
+};
+getTreeList();
+getList();
 </script>
-  
+
 <style lang="scss" scoped>
 .role {
-	padding: 20px;
-    display: flex;
-    justify-content: space-between;
-    .tree{
-        width: 300px;
-    }
-    .content{
-        width:calc(100% - 320px);
-    }
+  padding: 20px;
+  display: flex;
+  justify-content: space-between;
+  .tree {
+    width: 300px;
+  }
+  .content {
+    width: calc(100% - 320px);
+  }
 }
-</style>
+</style>