更新

2023-08-23 14:33:22 +08:00 · 2023-08-23 14:33:22 +08:00 · 6fd02da43d
commit 6fd02da43d
parent 332297d227
4 changed files with 324 additions and 160 deletions
--- a/src/views/user_menu/edit.vue
+++ b/src/views/user_menu/edit.vue
@ -20,7 +20,7 @@
            <el-radio :label="MenuEnum.MENU">菜单</el-radio>
          </el-radio-group>
        </el-form-item> -->
-        <el-form-item label="上级目录" prop="pid">
+        <el-form-item label="上级菜单" prop="pid">
          <el-tree-select
            class="flex-1"
            v-model="formData.pid"
@ -31,7 +31,7 @@
              label: 'name',
            }"
            :default-expand-all="true"
-            placeholder="请选择父级目录"
+            placeholder="请选择父级菜单"
            check-strictly
          />
        </el-form-item>
--- a/src/views/user_menu/index.vue
+++ b/src/views/user_menu/index.vue
@ -2,22 +2,6 @@
  <div>
    <el-card class="!border-none mb-4" shadow="never">
      <el-form class="mb-[-16px]" :model="queryParams" inline>
-        <!-- <el-form-item label="上级菜单" prop="pid">
-          <el-input
-            class="w-[280px]"
-            v-model="queryParams.pid"
-            clearable
-            placeholder="请输入上级菜单"
-          />
-        </el-form-item> -->
-        <!-- <el-form-item label="权限类型: M=目录，C=菜单，A=按钮" prop="type">
-          <el-input
-            class="w-[280px]"
-            v-model="queryParams.type"
-            clearable
-            placeholder="请输入权限类型: M=目录，C=菜单，A=按钮"
-          />
-        </el-form-item> -->
        <el-form-item label="菜单名称" prop="name">
          <el-input
            class="w-[280px]"
@ -26,39 +10,7 @@
            placeholder="请输入菜单名称"
          />
        </el-form-item>
-        <el-form-item label="菜单图标" prop="icon">
-          <el-input
-            class="w-[280px]"
-            v-model="queryParams.icon"
-            clearable
-            placeholder="请输入菜单图标"
-          />
-        </el-form-item>
-        <el-form-item label="菜单排序" prop="sort">
-          <el-input
-            class="w-[280px]"
-            v-model="queryParams.sort"
-            clearable
-            placeholder="请输入菜单排序"
-          />
-        </el-form-item>
-        <el-form-item label="路由地址" prop="paths">
-          <el-input
-            class="w-[280px]"
-            v-model="queryParams.paths"
-            clearable
-            placeholder="请输入路由地址"
-          />
-        </el-form-item>
-        <el-form-item label="路由参数" prop="params">
-          <el-input
-            class="w-[280px]"
-            v-model="queryParams.params"
-            clearable
-            placeholder="请输入路由参数"
-          />
-        </el-form-item>
-        <el-form-item label="是否显示:" prop="is_show">
+        <!-- <el-form-item label="是否显示:" prop="is_show">
          <el-select
            v-model="queryParams.is_show"
            placeholder="是否显示"
@ -79,7 +31,7 @@
            <el-option label="正常" value="0"></el-option>
            <el-option label="禁用" value="1"></el-option>
          </el-select>
-        </el-form-item>
+        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="resetPage">查询</el-button>
          <el-button @click="resetParams">重置</el-button>
@ -114,7 +66,11 @@
            show-overflow-tooltip
          /> -->
          <el-table-column label="菜单名称" prop="name" show-overflow-tooltip />
-          <el-table-column label="菜单图标" prop="icon" show-overflow-tooltip />
+          <el-table-column label="菜单图标" prop="icon" show-overflow-tooltip>
+            <template #default="{ row }">
+              <img :src="row.icon" style="width: 50px; height: 50px" />
+            </template>
+          </el-table-column>
          <el-table-column label="菜单排序" prop="sort" show-overflow-tooltip />
          <el-table-column
            label="路由地址"
--- a/src/views/user_role/auth.vue
+++ b/src/views/user_role/auth.vue
@ -0,0 +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>
+</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[]>([])
+const formData = reactive({
+    id: '',
+    name: '',
+    desc: '',
+    sort: 0,
+    menu_id: [] as any[]
+})
+
+const rules = {
+    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
+    })
+}
+
+// 获取所有选择的节点包括半选中节点
+const getDeptAllCheckedKeys = () => {
+    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)
+        })
+    })
+}
+
+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 handleSelectAll = (check: CheckboxValueType) => {
+    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')
+}
+
+const handleClose = () => {
+    emit('close')
+}
+
+const 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]
+        }
+    }
+}
+
+getOptions()
+
+defineExpose({
+    open,
+    setFormData
+})
+</script>
--- a/src/views/user_role/index.vue
+++ b/src/views/user_role/index.vue
@ -1,140 +1,194 @@
 <template>
-    <div>
-        <el-card class="!border-none mb-4" shadow="never">
-            <el-form
-                class="mb-[-16px]"
-                :model="queryParams"
-                inline
-            >
-                <el-form-item label="名称" prop="name">
-                    <el-input class="w-[280px]" v-model="queryParams.name" clearable placeholder="请输入名称" />
-                </el-form-item>
-                <el-form-item label="描述" prop="desc">
-                    <el-input class="w-[280px]" v-model="queryParams.desc" clearable placeholder="请输入描述" />
-                </el-form-item>
-                <el-form-item label="权限id" prop="menu_arr">
-                    <el-input class="w-[280px]" v-model="queryParams.menu_arr" clearable placeholder="请输入权限id" />
-                </el-form-item>
-                <el-form-item label="排序" prop="sort">
-                    <el-input class="w-[280px]" v-model="queryParams.sort" clearable placeholder="请输入排序" />
-                </el-form-item>
-                <el-form-item>
-                    <el-button type="primary" @click="resetPage">查询</el-button>
-                    <el-button @click="resetParams">重置</el-button>
-                </el-form-item>
-            </el-form>
-        </el-card>
-        <el-card class="!border-none" v-loading="pager.loading" shadow="never">
-            <el-button v-perms="['user.user_role/add']" type="primary" @click="handleAdd">
-                <template #icon>
-                    <icon name="el-icon-Plus" />
-                </template>
-                新增
-            </el-button>
-            <el-button
+  <div>
+    <el-card class="!border-none mb-4" shadow="never">
+      <el-form class="mb-[-16px]" :model="queryParams" inline>
+        <el-form-item label="名称" prop="name">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.name"
+            clearable
+            placeholder="请输入名称"
+          />
+        </el-form-item>
+        <el-form-item label="描述" prop="desc">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.desc"
+            clearable
+            placeholder="请输入描述"
+          />
+        </el-form-item>
+        <!-- <el-form-item label="权限" prop="menu_arr">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.menu_arr"
+            clearable
+            placeholder="请输入权限id"
+          />
+        </el-form-item>
+        <el-form-item label="排序" prop="sort">
+          <el-input
+            class="w-[280px]"
+            v-model="queryParams.sort"
+            clearable
+            placeholder="请输入排序"
+          />
+        </el-form-item> -->
+        <el-form-item>
+          <el-button type="primary" @click="resetPage">查询</el-button>
+          <el-button @click="resetParams">重置</el-button>
+        </el-form-item>
+      </el-form>
+    </el-card>
+    <el-card class="!border-none" v-loading="pager.loading" shadow="never">
+      <el-button
+        v-perms="['user.user_role/add']"
+        type="primary"
+        @click="handleAdd"
+      >
+        <template #icon>
+          <icon name="el-icon-Plus" />
+        </template>
+        新增
+      </el-button>
+      <el-button
+        v-perms="['user.user_role/delete']"
+        :disabled="!selectData.length"
+        @click="handleDelete(selectData)"
+      >
+        删除
+      </el-button>
+      <div class="mt-4">
+        <el-table :data="pager.lists" @selection-change="handleSelectionChange">
+          <el-table-column type="selection" width="55" />
+          <el-table-column label="名称" prop="name" show-overflow-tooltip />
+          <el-table-column label="描述" prop="desc" show-overflow-tooltip />
+          <el-table-column
+            label="权限id"
+            prop="menu_arr"
+            show-overflow-tooltip
+          />
+          <el-table-column label="排序" prop="sort" show-overflow-tooltip />
+          <el-table-column label="操作" width="210" fixed="right">
+            <template #default="{ row }">
+              <el-button
+                v-perms="['user.user_role/edit']"
+                type="primary"
+                link
+                @click="handleEdit(row)"
+              >
+                编辑
+              </el-button>
+              <el-button
+                link
+                type="primary"
+                v-perms="['auth.role/edit']"
+                @click="handleAuth(row)"
+              >
+                分配权限
+              </el-button>
+              <el-button
                v-perms="['user.user_role/delete']"
-                :disabled="!selectData.length"
-                @click="handleDelete(selectData)"
-            >
+                type="danger"
+                link
+                @click="handleDelete(row.id)"
+              >
                删除
-            </el-button>
-            <div class="mt-4">
-                <el-table :data="pager.lists" @selection-change="handleSelectionChange">
-                    <el-table-column type="selection" width="55" />
-                    <el-table-column label="名称" prop="name" show-overflow-tooltip />
-                    <el-table-column label="描述" prop="desc" show-overflow-tooltip />
-                    <el-table-column label="权限id" prop="menu_arr" show-overflow-tooltip />
-                    <el-table-column label="排序" prop="sort" show-overflow-tooltip />
-                    <el-table-column label="操作" width="120" fixed="right">
-                        <template #default="{ row }">
-                             <el-button
-                                v-perms="['user.user_role/edit']"
-                                type="primary"
-                                link
-                                @click="handleEdit(row)"
-                            >
-                                编辑
-                            </el-button>
-                            <el-button
-                                v-perms="['user.user_role/delete']"
-                                type="danger"
-                                link
-                                @click="handleDelete(row.id)"
-                            >
-                                删除
-                            </el-button>
-                        </template>
-                    </el-table-column>
-                </el-table>
-            </div>
-            <div class="flex mt-4 justify-end">
-                <pagination v-model="pager" @change="getLists" />
-            </div>
-        </el-card>
-        <edit-popup v-if="showEdit" ref="editRef" :dict-data="dictData" @success="getLists" @close="showEdit = false" />
-    </div>
+              </el-button>
+            </template>
+          </el-table-column>
+        </el-table>
+      </div>
+      <div class="flex mt-4 justify-end">
+        <pagination v-model="pager" @change="getLists" />
+      </div>
+    </el-card>
+    <edit-popup
+      v-if="showEdit"
+      ref="editRef"
+      :dict-data="dictData"
+      @success="getLists"
+      @close="showEdit = false"
+    />
+    <auth-popup
+      v-if="showAuth"
+      ref="authRef"
+      @success="getLists"
+      @close="showAuth = false"
+    />
+  </div>
 </template>

 <script lang="ts" setup name="userRoleLists">
-import { usePaging } from '@/hooks/usePaging'
-import { useDictData } from '@/hooks/useDictOptions'
-import { apiUserRoleLists, apiUserRoleDelete } from '@/api/user_role'
-import { timeFormat } from '@/utils/util'
-import feedback from '@/utils/feedback'
-import EditPopup from './edit.vue'
+import { usePaging } from "@/hooks/usePaging";
+import { useDictData } from "@/hooks/useDictOptions";
+import { apiUserRoleLists, apiUserRoleDelete } from "@/api/user_role";
+import { timeFormat } from "@/utils/util";
+import feedback from "@/utils/feedback";
+import EditPopup from "./edit.vue";
+import AuthPopup from "./auth.vue";

-const editRef = shallowRef<InstanceType<typeof EditPopup>>()
+const editRef = shallowRef<InstanceType<typeof EditPopup>>();
 // 是否显示编辑框
-const showEdit = ref(false)
-
+const showEdit = ref(false);

 // 查询条件
 const queryParams = reactive({
-    name: '',
-    desc: '',
-    menu_arr: '',
-    sort: ''
-})
+  name: "",
+  desc: "",
+  menu_arr: "",
+  sort: "",
+});

 // 选中数据
-const selectData = ref<any[]>([])
+const selectData = ref<any[]>([]);

 // 表格选择后回调事件
 const handleSelectionChange = (val: any[]) => {
-    selectData.value = val.map(({ id }) => id)
-}
+  selectData.value = val.map(({ id }) => id);
+};

 // 获取字典数据
-const { dictData } = useDictData('')
+const { dictData } = useDictData("");

 // 分页相关
 const { pager, getLists, resetParams, resetPage } = usePaging({
-    fetchFun: apiUserRoleLists,
-    params: queryParams
-})
+  fetchFun: apiUserRoleLists,
+  params: queryParams,
+});

 // 添加
 const handleAdd = async () => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('add')
-}
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open("add");
+};

 // 编辑
 const handleEdit = async (data: any) => {
-    showEdit.value = true
-    await nextTick()
-    editRef.value?.open('edit')
-    editRef.value?.setFormData(data)
-}
+  showEdit.value = true;
+  await nextTick();
+  editRef.value?.open("edit");
+  editRef.value?.setFormData(data);
+};
+
+const authRef = shallowRef<InstanceType<typeof AuthPopup>>();
+const showAuth = ref(false);
+// 分配权限
+const handleAuth = async (data: any) => {
+  showAuth.value = true;
+  await nextTick();
+  authRef.value?.open();
+  authRef.value?.setFormData(data);
+};

 // 删除
 const handleDelete = async (id: number | any[]) => {
-    await feedback.confirm('确定要删除？')
-    await apiUserRoleDelete({ id })
-    getLists()
-}
+  await feedback.confirm("确定要删除？");
+  await apiUserRoleDelete({ id });
+  getLists();
+};

-getLists()
+getLists();
 </script>