fix Bug or add example

src/views/system/menu/CreateDrawer.vue

@@ -0,0 +1,137 @@
+<template>
+  <n-drawer v-model:show="isDrawer" :width="width" :placement="placement">
+    <n-drawer-content :title="title" closable>
+      <n-form
+          :model="formParams"
+          :rules="rules"
+          ref="formRef"
+          label-placement="left"
+          :label-width="100"
+      >
+        <n-form-item label="类型" path="type">
+          <span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
+        </n-form-item>
+        <n-form-item label="标题" path="label">
+          <n-input placeholder="请输入标题" v-model:value="formParams.label"/>
+        </n-form-item>
+        <n-form-item label="副标题" path="subtitle">
+          <n-input placeholder="请输入副标题" v-model:value="formParams.subtitle"/>
+        </n-form-item>
+        <n-form-item label="路径" path="path">
+          <n-input placeholder="请输入路径" v-model:value="formParams.path"/>
+        </n-form-item>
+        <n-form-item label="打开方式" path="openType">
+          <n-radio-group v-model:value="formParams.openType" name="openType">
+            <n-space>
+              <n-radio :value="1">当前窗口</n-radio>
+              <n-radio :value="2">新窗口</n-radio>
+            </n-space>
+          </n-radio-group>
+        </n-form-item>
+        <n-form-item label="菜单权限" path="auth">
+          <n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth"/>
+        </n-form-item>
+        <n-form-item label="隐藏侧边栏" path="hidden">
+          <n-switch v-model:value="formParams.hidden"/>
+        </n-form-item>
+      </n-form>
+
+      <template #footer>
+        <n-space>
+          <n-button type="primary" :loading="subLoading" @click="formSubmit">提交</n-button>
+          <n-button @click="handleReset">重置</n-button>
+        </n-space>
+      </template>
+
+    </n-drawer-content>
+  </n-drawer>
+</template>
+
+<script lang="ts">
+import { defineComponent, reactive, ref, toRefs, watch, createVNode, computed, unref } from 'vue'
+import { CheckOutlined } from '@vicons/antd'
+import { useMessage } from 'naive-ui'
+
+const rules = {
+  label: {
+    required: true,
+    message: '请输入标题',
+    trigger: 'blur'
+  },
+  path: {
+    required: true,
+    message: '请输入路径',
+    trigger: 'blur'
+  }
+}
+export default defineComponent({
+  name: 'CreateDrawer',
+  props: {
+    title: {
+      type: String,
+      default: '添加顶级菜单'
+    },
+    width: {
+      type: Number,
+      default: 450
+    },
+  },
+  components: { CheckOutlined },
+  setup(props, { emit }) {
+    const message = useMessage()
+    const formRef: any = ref(null)
+    const defaultValueRef = () => ({
+      label: '',
+      type: 1,
+      subtitle: '',
+      openType: 1,
+      auth: '',
+      path: '',
+      hidden: false
+    })
+
+    const state = reactive({
+      isDrawer: false,
+      subLoading: false,
+      formParams: defaultValueRef(),
+      placement: "right",
+      alertText: '该功能主要实时预览各种布局效果，更多完整配置在 projectSetting.ts 中设置，建议在生产环境关闭该布局预览功能。',
+    })
+
+    function openDrawer(isDrawer) {
+      state.isDrawer = true
+    }
+
+    function closeDrawer() {
+      state.isDrawer = false
+    }
+
+    function formSubmit() {
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          message.success('添加成功')
+          handleReset()
+          closeDrawer()
+        } else {
+          message.error('请填写完整信息')
+        }
+      })
+    }
+
+    function handleReset() {
+      formRef.value.restoreValidation()
+      state.formParams = Object.assign(state.formParams, defaultValueRef())
+    }
+
+    return {
+      ...toRefs(state),
+      formRef,
+      rules,
+      formSubmit,
+      handleReset,
+      openDrawer,
+      closeDrawer
+    }
+  }
+})
+</script>

src/views/system/menu/menu.vue

@@ -11,7 +11,7 @@
         <n-card :segmented="{ content: 'hard' }" :bordered="false" size="small">
           <template #header>
             <n-space>
-              <n-dropdown trigger="hover" :options="addMenuOptions">
+              <n-dropdown trigger="hover" @select="selectAddMenu" :options="addMenuOptions">
                 <n-button type="info" ghost icon-placement="right">
                   添加菜单
                   <template #icon>
@@ -23,8 +23,8 @@
                   </template>
                 </n-button>
               </n-dropdown>
-              <n-button type="info" ghost icon-placement="left">
-                全部收起
+              <n-button type="info" ghost icon-placement="left" @click="packHandle">
+                全部{{ expandedKeys.length ? '收起' : '展开' }}
                 <template #icon>
                   <div class="flex items-center">
                     <n-icon size="14">
@@ -37,7 +37,7 @@
           </template>
 
           <div class="w-full menu">
-            <n-input type="input" placeholder="输入菜单名称搜索">
+            <n-input type="input" v-model:value="pattern" placeholder="输入菜单名称搜索">
               <template #suffix>
                 <n-icon size="18" class="cursor-pointer">
                   <SearchOutlined/>
@@ -45,13 +45,24 @@
               </template>
             </n-input>
             <div class="py-3 menu-list">
-              <n-tree
-                  block-line
-                  cascade
-                  checkable
-                  :data="treeData"
-                  :default-expanded-keys="defaultExpandedKeys"
-              />
+              <template v-if="loading">
+                <div class="flex items-center justify-center py-4">
+                  <n-spin size="medium"/>
+                </div>
+              </template>
+              <template v-else>
+                <n-tree
+                    block-line
+                    cascade
+                    checkable
+                    :virtual-scroll="true"
+                    :pattern="pattern"
+                    :data="treeData"
+                    :expandedKeys="expandedKeys"
+                    style="max-height: 650px;overflow: hidden"
+                    @update:selected-keys="selectedTree"
+                />
+              </template>
             </div>
           </div>
 
@@ -62,9 +73,9 @@
           <template #header>
             <n-space>
               <n-icon size="18">
-                <EditOutlined />
+                <FormOutlined />
               </n-icon>
-              编辑菜单
+              <span>编辑菜单{{ treeItemTitle ? `：${treeItemTitle}`:''}}</span>
             </n-space>
           </template>
           <n-alert type="info" closable>
@@ -76,18 +87,20 @@
               ref="formRef"
               label-placement="left"
               :label-width="100"
+              v-if="isEditMenu"
+              class="py-4"
           >
             <n-form-item label="类型" path="type">
-              <span>{{formParams.type}}</span>
+              <span>{{ formParams.type === 1 ? '侧边栏菜单' : '' }}</span>
             </n-form-item>
-            <n-form-item label="标题" path="title">
-              <n-input placeholder="请输入标题" v-model:value="formParams.title" />
+            <n-form-item label="标题" path="label">
+              <n-input placeholder="请输入标题" v-model:value="formParams.label"/>
             </n-form-item>
-            <n-form-item label="副标题" path="subTitle">
-              <n-input placeholder="请输入副标题" v-model:value="formParams.subTitle" />
+            <n-form-item label="副标题" path="subtitle">
+              <n-input placeholder="请输入副标题" v-model:value="formParams.subtitle"/>
             </n-form-item>
             <n-form-item label="路径" path="path">
-              <n-input placeholder="请输入路径" v-model:value="formParams.path" />
+              <n-input placeholder="请输入路径" v-model:value="formParams.path"/>
             </n-form-item>
             <n-form-item label="打开方式" path="openType">
               <n-radio-group v-model:value="formParams.openType" name="openType">
@@ -98,12 +111,12 @@
               </n-radio-group>
             </n-form-item>
             <n-form-item label="菜单权限" path="auth">
-              <n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth" />
+              <n-input placeholder="请输入权限，多个权限用，分割" v-model:value="formParams.auth"/>
             </n-form-item>
             <n-form-item path="auth" style="margin-left: 100px">
               <n-space>
-                <n-button type="primary">保存修改</n-button>
-                <n-button>重置</n-button>
+                <n-button type="primary" :loading="subLoading" @click="formSubmit">保存修改</n-button>
+                <n-button @click="handleReset">重置</n-button>
               </n-space>
             </n-form-item>
           </n-form>
@@ -111,24 +124,42 @@
       </n-gi>
     </n-grid>
 
+    <CreateDrawer ref="createDrawerRef" :title="drawerTitle"></CreateDrawer>
   </div>
 </template>
 
 <script lang="ts">
-import { defineComponent, ref, reactive, toRefs, } from 'vue'
+import { defineComponent, ref, unref, reactive, toRefs, onMounted, computed } from 'vue'
 import { useMessage } from 'naive-ui'
-import { DownOutlined, AlignLeftOutlined, SearchOutlined, EditOutlined } from '@vicons/antd'
+import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd'
+import { getMenuList } from '@/api/system/menu'
+import { getTreeItem } from '@/utils/index'
+import CreateDrawer from './CreateDrawer.vue'
 
 const rules = {
-
+  label: {
+    required: true,
+    message: '请输入标题',
+    trigger: 'blur'
+  },
+  path: {
+    required: true,
+    message: '请输入路径',
+    trigger: 'blur'
+  }
 }
 
 export default defineComponent({
-  components: { DownOutlined, AlignLeftOutlined, SearchOutlined, EditOutlined },
+  components: { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined, CreateDrawer },
   setup() {
-
+    const formRef: any = ref(null)
+    const createDrawerRef = ref()
     const message = useMessage()
 
+    const isAddSon = computed(() => {
+      return state.treeItemKey.length ? false : true
+    })
+
     const state = reactive({
       addMenuOptions: [
         {
@@ -139,57 +170,98 @@ export default defineComponent({
         {
           label: '添加子菜单',
           key: 'son',
-          disabled: false
+          disabled: isAddSon
         },
       ],
-      treeData: [
-        {
-          label: 'Dashboard',
-          key: 'dashboard',
-          children: [
-            {
-              label: '主控台',
-              key: 'console',
-            },
-            {
-              label: '工作台',
-              key: 'workplace',
-            }
-          ]
-        },
-        {
-          label: '表单管理',
-          key: 'form',
-          children: [
-            {
-              label: '基础表单',
-              key: 'basic-form',
-            },
-            {
-              label: '分步表单',
-              key: 'step-form',
-            },
-            {
-              label: '表单详情',
-              key: 'detail',
-            }
-          ]
-        }
+      loading: true,
+      subLoading: false,
+      isEditMenu: false,
+      treeData: [],
+      treeItemKey: [],
+      treeItemTitle: '',
+      expandedKeys: [],
+      formParams: {},
+      pattern: '',
+      drawerTitle: ''
+    })
 
-      ],
-      defaultExpandedKeys: ref(['home', 'dashboard']),
-      formParams: {
-        type: '侧边栏菜单',
-        title: '工作台',
-        subTitle:'',
-        path:'/dashboard/workplace',
-        openType:1
-      },
+
+    function selectAddMenu(key) {
+      state.drawerTitle = key === 'home' ? '添加顶栏菜单' : `添加子菜单：${ state.treeItemTitle }`
+      openCreateDrawer()
+    }
+
+    function openCreateDrawer() {
+      const { openDrawer } = createDrawerRef.value
+      openDrawer()
+    }
+
+    function selectedTree(keys) {
+      if (keys.length) {
+        const treeItem = getTreeItem(unref(state.treeData), keys[0])
+        state.treeItemKey = keys
+        state.treeItemTitle = treeItem.label
+        state.formParams = Object.assign(state.formParams, treeItem)
+        state.isEditMenu = true
+      } else {
+        state.isEditMenu = false
+        state.treeItemKey = []
+        state.treeItemTitle = ''
+      }
+    }
+
+    function handleReset() {
+      const treeItem = getTreeItem(unref(state.treeData), state.treeItemKey[0])
+      state.formParams = Object.assign(state.formParams, treeItem)
+    }
+
+    function formSubmit() {
+      formRef.value.validate((errors) => {
+        if (!errors) {
+          message.error('抱歉，您没有该权限')
+        } else {
+          message.error('请填写完整信息')
+        }
+      })
+    }
+
+    function packHandle() {
+      if (state.expandedKeys.length) {
+        state.expandedKeys = []
+      } else {
+        state.expandedKeys = state.treeData.map(item => item.key)
+      }
+    }
+
+    function onExpandedKeys(keys) {
+      // let key = keys[0]
+      // console.log(state.expandedKeys)
+      // if(state.expandedKeys.includes(key)){
+      //   state.expandedKeys.splice(state.expandedKeys.findIndex(item => item === key), 1)
+      //   console.log(state.expandedKeys)
+      // }else{
+      //   state.expandedKeys.push(key)
+      // }
+    }
+
+    onMounted(async () => {
+      const treeMenuList = await getMenuList()
+      state.expandedKeys = treeMenuList.list.map(item => item.key)
+      state.treeData = treeMenuList.list
+      state.loading = false
     })
 
     return {
       ...toRefs(state),
-      rules
+      createDrawerRef,
+      formRef,
+      rules,
+      selectedTree,
+      handleReset,
+      formSubmit,
+      packHandle,
+      onExpandedKeys,
+      selectAddMenu
     }
   }
 })

src/views/system/role/columns.ts

@@ -32,35 +32,5 @@ export const columns = [
     {
         title: '创建时间',
         key: 'create_date'
-    },
-    {
-        title: '操作',
-        key: 'actions',
-        width: 150,
-        //简单写一下例子，不建议这么写，过段时间，这里封二次封装
-        render() {
-            return [
-                h(
-                    NButton,
-                    {
-                        size: 'small',
-                        type: 'error',
-                        style: 'margin-right:10px',
-                        onClick: () => {
-                        }
-                    },
-                    { default: () => '删除' }
-                ),
-                h(
-                    NButton,
-                    {
-                        size: 'small',
-                        onClick: () => {
-                        }
-                    },
-                    { default: () => '编辑' }
-                )
-            ]
-        }
     }
 ]

src/views/system/role/role.vue

@@ -11,61 +11,72 @@
           :request="loadDataTable"
           :row-key="row => row.id"
           ref="actionRef"
+          :actionColumn="actionColumn"
           @update:checked-row-keys="onCheckedRow"
       >
         <template #tableTitle>
-          <n-button type="primary" @click="addTable">
+          <n-button type="primary">
             <template #icon>
               <n-icon>
                 <PlusOutlined/>
               </n-icon>
             </template>
-            新建角色
+            添加角色
           </n-button>
         </template>
-      </BasicTable>
 
-      <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" title="新建">
-        <n-form
-            :model="formParams"
-            :rules="rules"
-            ref="formRef"
-            label-placement="left"
-            :label-width="80"
-            class="py-4"
-        >
-          <n-form-item label="名称" path="name">
-            <n-input placeholder="请输入名称" v-model:value="formParams.name"/>
-          </n-form-item>
-          <n-form-item label="地址" path="address">
-            <n-input type="textarea" placeholder="请输入地址" v-model:value="formParams.address"/>
-          </n-form-item>
-          <n-form-item label="日期" path="date">
-            <n-date-picker type="datetime" placeholder="请选择日期" v-model:value="formParams.date"/>
-          </n-form-item>
-        </n-form>
-
-        <template #action>
-          <n-space>
-            <n-button @click="()=> showModal = false">取消</n-button>
-            <n-button type="info" :loading="formBtnLoading" @click="confirmForm">确定</n-button>
-          </n-space>
+        <template #action="{ record }">
+          <TableAction></TableAction>
         </template>
 
-      </n-modal>
+      </BasicTable>
+
 
     </n-card>
+
+    <n-modal v-model:show="showModal" :show-icon="false" preset="dialog" :title="editRoleTitle">
+      <div class="py-3 menu-list">
+        <n-tree
+            block-line
+            cascade
+            checkable
+            :virtual-scroll="true"
+            :data="treeData"
+            :expandedKeys="expandedKeys"
+            :checked-keys="checkedKeys"
+            style="max-height: 950px;overflow: hidden"
+            @update:checked-keys="checkedTree"
+        />
+      </div>
+      <template #action>
+        <n-space>
+          <n-button type="info" ghost icon-placement="left" @click="packHandle">
+            全部{{ expandedKeys.length ? '收起' : '展开' }}
+          </n-button>
+
+          <n-button type="info" ghost icon-placement="left" @click="checkedAllHandle">
+            全部{{ checkedAll ? '取消' : '选择' }}
+          </n-button>
+          <n-button type="primary" :loading="formBtnLoading" @click="confirmForm">提交</n-button>
+        </n-space>
+      </template>
+
+    </n-modal>
+
   </div>
 
 </template>
 
 <script lang="ts">
-import { defineComponent, reactive, toRefs, ref, h } from 'vue'
+import { defineComponent, reactive, toRefs, ref, h, onMounted } from 'vue'
 import { useMessage } from 'naive-ui'
-import { BasicTable } from '@/components/Table'
+import { DownOutlined, AlignLeftOutlined, SearchOutlined, FormOutlined } from '@vicons/antd'
+import { BasicTable, TableAction } from '@/components/Table'
 import { getRoleList } from '@/api/system/role'
+import { getMenuList } from '@/api/system/menu'
 import { columns } from './columns'
 import { PlusOutlined } from '@vicons/antd'
+import { getTreeAll } from "@/utils";
 
 const rules = {
   name: {
@@ -87,7 +98,7 @@ const rules = {
 }
 
 export default defineComponent({
-  components: { BasicTable, PlusOutlined },
+  components: { BasicTable, TableAction, PlusOutlined, AlignLeftOutlined },
   setup() {
     const formRef: any = ref(null)
     const message = useMessage()
@@ -95,6 +106,11 @@ export default defineComponent({
     const state = reactive({
       showModal: false,
       formBtnLoading: false,
+      checkedAll: false,
+      editRoleTitle: '',
+      treeData: [],
+      expandedKeys: [],
+      checkedKeys: ['console', 'step-form'],
       formParams: {
         name: '',
         address: '',
@@ -104,11 +120,53 @@ export default defineComponent({
         pageSize: 5,
         name: 'xiaoMa'
       },
-    })
+      actionColumn: {
+        width: 250,
+        title: '操作',
+        dataIndex: 'action',
+        fixed: 'right',
+        render(record) {
+          return h(
+              TableAction,
+              {
+                style: 'button',
+                actions: [
+                  {
+                    label: '菜单权限',
+                    onClick: handleMenuAuth.bind(null, record),
+                    // 根据业务控制是否显示 isShow 和 auth 是并且关系
+                    ifShow: () => {
+                      return true;
+                    },
+                    // 根据权限控制是否显示: 有权限，会显示，支持多个
+                    auth: ['basic_list'],
+                  },
+                  {
 
-    function addTable() {
-      state.showModal = true
-    }
+                    label: '编辑',
+                    onClick: handleEdit.bind(null, record),
+                    ifShow: () => {
+                      return true;
+                    },
+                    auth: ['basic_list'],
+                  },
+                  {
+                    label: '删除',
+                    icon: 'ic:outline-delete-outline',
+                    onClick: handleDelete.bind(null, record),
+                    // 根据业务控制是否显示 isShow 和 auth 是并且关系
+                    ifShow: () => {
+                      return true;
+                    },
+                    // 根据权限控制是否显示: 有权限，会显示，支持多个
+                    auth: ['basic_list'],
+                  },
+                ]
+              }
+          )
+        }
+      },
+    })
 
     const loadDataTable = async (params) => {
       const data = await getRoleList(params);
@@ -140,6 +198,55 @@ export default defineComponent({
       })
     }
 
+    function handleEdit(record: Recordable) {
+      console.log('点击了编辑', record);
+      router.push({ name: 'basic-info', params: { id: record.id } })
+    }
+
+    function handleDelete(record: Recordable) {
+      console.log('点击了删除', record);
+      message.info('点击了删除')
+    }
+
+    function handleOpen(record: Recordable) {
+      console.log('点击了启用', record);
+      message.info('点击了删除')
+    }
+
+    function handleMenuAuth(record: Recordable) {
+      state.editRoleTitle = `分配 ${ record.name } 的菜单权限`
+      state.checkedKeys = record.menu_keys
+      state.showModal = true
+    }
+
+    function checkedTree(keys) {
+      state.checkedKeys = [state.checkedKeys, ...keys]
+    }
+
+    function packHandle() {
+      if (state.expandedKeys.length) {
+        state.expandedKeys = []
+      } else {
+        state.expandedKeys = state.treeData.map(item => item.key)
+      }
+    }
+
+    function checkedAllHandle() {
+      if (!state.checkedAll) {
+        state.checkedKeys = getTreeAll(state.treeData)
+        state.checkedAll = true
+      } else {
+        state.checkedKeys = []
+        state.checkedAll = false
+      }
+    }
+
+    onMounted(async () => {
+      const treeMenuList = await getMenuList()
+      state.expandedKeys = treeMenuList.list.map(item => item.key)
+      state.treeData = treeMenuList.list
+    })
+
     return {
       ...toRefs(state),
       formRef,
@@ -150,7 +257,13 @@ export default defineComponent({
       loadDataTable,
       onCheckedRow,
       reloadTable,
-      addTable
+      handleEdit,
+      handleDelete,
+      handleOpen,
+      handleMenuAuth,
+      checkedTree,
+      packHandle,
+      checkedAllHandle
     }
   }
 })