From 6efd2eb4ecfaad372d18cb7c95de64224a6e41ed Mon Sep 17 00:00:00 2001
From: weipengfei <2187978347@qq.com>
Date: Thu, 24 Aug 2023 10:24:58 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0=E7=94=A8=E6=88=B7=E8=8F=9C?=
 =?UTF-8?q?=E5=8D=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/user_menu/edit.vue  |  14 +-
 src/views/user_menu/index.vue |  15 +-
 src/views/user_role/auth.vue  | 248 +++++++++++++++++-----------------
 3 files changed, 147 insertions(+), 130 deletions(-)

diff --git a/src/views/user_menu/edit.vue b/src/views/user_menu/edit.vue
index 09327a8..741a634 100644
--- a/src/views/user_menu/edit.vue
+++ b/src/views/user_menu/edit.vue
@@ -110,11 +110,15 @@ import {
 import { timeFormat } from "@/utils/util";
 import type { PropType } from "vue";
 import { MenuEnum } from "@/enums/appEnums";
-defineProps({
+const props = defineProps({
   dictData: {
     type: Object as PropType<Record<string, any[]>>,
     default: () => ({}),
   },
+  menuList: {
+    type: Array,
+    default: () => [],
+  },
 });
 const emit = defineEmits(["success", "close"]);
 const formRef = shallowRef<FormInstance>();
@@ -127,7 +131,13 @@ const handleMenuIcon = (res: any) => {
   formData.icon = res.data.uri;
 };
 
-const previousMenuList = reactive([{ id: 0, name: "顶级", children: [] }]);
+const previousMenuList = ref([{ id: 0, name: "顶级", children: [] }]);
+const initMenu = () => {
+  props.menuList.forEach((item: any) => {
+    previousMenuList.value[0].children.push(item);
+  });
+};
+initMenu();
 
 // 弹窗标题
 const popupTitle = computed(() => {
diff --git a/src/views/user_menu/index.vue b/src/views/user_menu/index.vue
index 6f35e20..d8a54a5 100644
--- a/src/views/user_menu/index.vue
+++ b/src/views/user_menu/index.vue
@@ -49,16 +49,21 @@
         </template>
         新增
       </el-button>
-      <el-button
+      <!-- <el-button
         v-perms="['user.user_menu/delete']"
         :disabled="!selectData.length"
         @click="handleDelete(selectData)"
       >
         删除
-      </el-button>
+      </el-button> -->
       <div class="mt-4">
-        <el-table :data="pager.lists" @selection-change="handleSelectionChange">
-          <el-table-column type="selection" width="55" />
+        <el-table
+          :data="pager.lists"
+          @selection-change="handleSelectionChange"
+          row-key="id"
+          :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
+        >
+          <!-- <el-table-column type="selection" width="55" /> -->
           <el-table-column label="上级菜单" prop="pid" show-overflow-tooltip />
           <!-- <el-table-column
             label="权限类型: M=目录，C=菜单，A=按钮"
@@ -76,6 +81,7 @@
             label="路由地址"
             prop="paths"
             show-overflow-tooltip
+            width="320px"
           />
           <el-table-column
             label="路由参数"
@@ -132,6 +138,7 @@
       v-if="showEdit"
       ref="editRef"
       :dict-data="dictData"
+      :menuList="pager.lists"
       @success="getLists"
       @close="showEdit = false"
     />
diff --git a/src/views/user_role/auth.vue b/src/views/user_role/auth.vue
index 616edb7..55a8fd9 100644
--- a/src/views/user_role/auth.vue
+++ b/src/views/user_role/auth.vue
@@ -1,154 +1,154 @@
 <template>
-    <div class="edit-popup">
-        <popup
-            ref="popupRef"
-            title="分配权限"
-            :async="true"
-            width="550px"
-            @confirm="handleSubmit"
-            @close="handleClose"
-        >
-            <el-form
-                class="ls-form"
-                ref="formRef"
-                :rules="rules"
-                :model="formData"
-                label-width="60px"
-                v-loading="loading"
-            >
-                <el-scrollbar class="h-[400px] sm:h-[600px]">
-                    <el-form-item label="权限" prop="menu_id">
-                        <div>
-                            <el-checkbox label="展开/折叠" @change="handleExpand" />
-                            <el-checkbox label="全选/不全选" @change="handleSelectAll" />
-                            <el-checkbox v-model="checkStrictly" label="父子联动" />
-                            <div>
-                                <el-tree
-                                    ref="treeRef"
-                                    :data="menuTree"
-                                    :props="{
-                                        label: 'name',
-                                        children: 'children'
-                                    }"
-                                    :check-strictly="!checkStrictly"
-                                    node-key="id"
-                                    :default-expand-all="isExpand"
-                                    show-checkbox
-                                />
-                            </div>
-                        </div>
-                    </el-form-item>
-                </el-scrollbar>
-            </el-form>
-        </popup>
-    </div>
+  <div class="edit-popup">
+    <popup
+      ref="popupRef"
+      title="分配权限"
+      :async="true"
+      width="550px"
+      @confirm="handleSubmit"
+      @close="handleClose"
+    >
+      <el-form
+        class="ls-form"
+        ref="formRef"
+        :rules="rules"
+        :model="formData"
+        label-width="60px"
+        v-loading="loading"
+      >
+        <el-scrollbar class="h-[400px] sm:h-[600px]">
+          <el-form-item label="权限" prop="menu_id">
+            <div>
+              <el-checkbox label="展开/折叠" @change="handleExpand" />
+              <el-checkbox label="全选/不全选" @change="handleSelectAll" />
+              <el-checkbox v-model="checkStrictly" label="父子联动" />
+              <div>
+                <el-tree
+                  ref="treeRef"
+                  :data="menuTree"
+                  :props="{
+                    label: 'name',
+                    children: 'children',
+                  }"
+                  :check-strictly="!checkStrictly"
+                  node-key="id"
+                  :default-expand-all="isExpand"
+                  show-checkbox
+                />
+              </div>
+            </div>
+          </el-form-item>
+        </el-scrollbar>
+      </el-form>
+    </popup>
+  </div>
 </template>
 <script lang="ts" setup>
-import type { CheckboxValueType, ElTree, FormInstance } from 'element-plus'
-import { roleEdit } from '@/api/perms/role'
-import Popup from '@/components/popup/index.vue'
-import { treeToArray } from '@/utils/util'
-import { menuAll } from '@/api/perms/menu'
-const emit = defineEmits(['success', 'close'])
-const treeRef = shallowRef<InstanceType<typeof ElTree>>()
-const formRef = shallowRef<FormInstance>()
-const popupRef = shallowRef<InstanceType<typeof Popup>>()
-const isExpand = ref(false)
-const checkStrictly = ref(true)
-const loading = ref(false)
-const menuArray = ref<any[]>([])
-const menuTree = ref<any[]>([])
+import type { CheckboxValueType, ElTree, FormInstance } from "element-plus";
+import { roleEdit } from "@/api/perms/role";
+import Popup from "@/components/popup/index.vue";
+import { treeToArray } from "@/utils/util";
+import { menuAll } from "@/api/perms/menu";
+const emit = defineEmits(["success", "close"]);
+const treeRef = shallowRef<InstanceType<typeof ElTree>>();
+const formRef = shallowRef<FormInstance>();
+const popupRef = shallowRef<InstanceType<typeof Popup>>();
+const isExpand = ref(false);
+const checkStrictly = ref(true);
+const loading = ref(false);
+const menuArray = ref<any[]>([]);
+const menuTree = ref<any[]>([]);
 const formData = reactive({
-    id: '',
-    name: '',
-    desc: '',
-    sort: 0,
-    menu_id: [] as any[]
-})
+  id: "",
+  name: "",
+  desc: "",
+  sort: 0,
+  menu_id: [] as any[],
+});
 
 const rules = {
-    name: [
-        {
-            required: true,
-            message: '请输入名称',
-            trigger: ['blur']
-        }
-    ]
-}
+  name: [
+    {
+      required: true,
+      message: "请输入名称",
+      trigger: ["blur"],
+    },
+  ],
+};
 
 const getOptions = () => {
-    loading.value = true
-    menuAll().then((res: any) => {
-        menuTree.value = res
-        menuArray.value = treeToArray(res)
-        nextTick(() => {
-            setDeptAllCheckedKeys()
-        })
-        loading.value = false
-    })
-}
+  loading.value = true;
+  menuAll().then((res: any) => {
+    menuTree.value = res;
+    menuArray.value = treeToArray(res);
+    nextTick(() => {
+      setDeptAllCheckedKeys();
+    });
+    loading.value = false;
+  });
+};
 
 // 获取所有选择的节点包括半选中节点
 const getDeptAllCheckedKeys = () => {
-    const checkedKeys = treeRef.value?.getCheckedKeys()
-    const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!
-    checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys)
-    return checkedKeys
-}
+  const checkedKeys = treeRef.value?.getCheckedKeys();
+  const halfCheckedKeys = treeRef.value?.getHalfCheckedKeys()!;
+  checkedKeys?.unshift.apply(checkedKeys, halfCheckedKeys);
+  return checkedKeys;
+};
 
 const setDeptAllCheckedKeys = () => {
-    formData.menu_id.forEach((v) => {
-        nextTick(() => {
-            treeRef.value?.setChecked(v, true, false)
-        })
-    })
-}
+  formData.menu_id.forEach((v) => {
+    nextTick(() => {
+      treeRef.value?.setChecked(v, true, false);
+    });
+  });
+};
 
 const handleExpand = (check: CheckboxValueType) => {
-    const treeList = menuTree.value
-    for (let i = 0; i < treeList.length; i++) {
-        //@ts-ignore
-        treeRef.value.store.nodesMap[treeList[i].id].expanded = check
-    }
-}
+  const treeList = menuTree.value;
+  for (let i = 0; i < treeList.length; i++) {
+    //@ts-ignore
+    treeRef.value.store.nodesMap[treeList[i].id].expanded = check;
+  }
+};
 
 const handleSelectAll = (check: CheckboxValueType) => {
-    if (check) {
-        treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id))
-    } else {
-        treeRef.value?.setCheckedKeys([])
-    }
-}
+  if (check) {
+    treeRef.value?.setCheckedKeys(menuArray.value.map((item) => item.id));
+  } else {
+    treeRef.value?.setCheckedKeys([]);
+  }
+};
 
 const handleSubmit = async () => {
-    await formRef.value?.validate()
-    formData.menu_id = getDeptAllCheckedKeys()!
-    await roleEdit(formData)
-    popupRef.value?.close()
-    emit('success')
-}
+  await formRef.value?.validate();
+  formData.menu_id = getDeptAllCheckedKeys()!;
+  await roleEdit(formData);
+  popupRef.value?.close();
+  emit("success");
+};
 
 const handleClose = () => {
-    emit('close')
-}
+  emit("close");
+};
 
 const open = () => {
-    popupRef.value?.open()
-}
+  popupRef.value?.open();
+};
 
 const setFormData = async (data: Record<any, any>) => {
-    for (const key in formData) {
-        if (data[key] != null && data[key] != undefined) {
-            //@ts-ignore
-            formData[key] = data[key]
-        }
+  for (const key in formData) {
+    if (data[key] != null && data[key] != undefined) {
+      //@ts-ignore
+      formData[key] = data[key];
     }
-}
+  }
+};
 
-getOptions()
+getOptions();
 
 defineExpose({
-    open,
-    setFormData
-})
+  open,
+  setFormData,
+});
 </script>