From 8f715925c7709942bb327f918825ff7936b56bef Mon Sep 17 00:00:00 2001
From: zclzone <zclzone@outlook.com>
Date: Mon, 1 Apr 2024 16:00:44 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=B5=84=E6=BA=90=E7=AE=A1=E7=90=86?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=94=AF=E6=8C=81=E6=8C=89=E9=92=AE=E6=9D=83?=
 =?UTF-8?q?=E9=99=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/pms/resource/api.js                 |   4 +-
 .../pms/resource/components/MenuTree.vue      |   2 +-
 .../pms/resource/components/ResAddOrEdit.vue  |  17 +-
 src/views/pms/resource/index.vue              | 152 +++++++++++++++++-
 4 files changed, 160 insertions(+), 15 deletions(-)

diff --git a/src/views/pms/resource/api.js b/src/views/pms/resource/api.js
index 0d96b94..61d7d4d 100644
--- a/src/views/pms/resource/api.js
+++ b/src/views/pms/resource/api.js
@@ -1,7 +1,7 @@
 /**********************************
  * @Author: Ronnie Zhang
  * @LastEditor: Ronnie Zhang
- * @LastEditTime: 2023/12/05 21:28:47
+ * @LastEditTime: 2024/04/01 15:52:04
  * @Email: zclzone@outlook.com
  * Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  **********************************/
@@ -11,7 +11,7 @@ import { request } from '@/utils'
 
 export default {
   getMenuTree: () => request.get('/permission/menu/tree'),
-  getButtonAndApi: (parentId) => request.get(`/permission/button-and-api/${parentId}`),
+  getButtons: ({ parentId }) => request.get(`/permission/button/${parentId}`),
   getComponents: () => axios.get(`${import.meta.env.VITE_PUBLIC_PATH}components.json`),
   addPermission: (data) => request.post('/permission', data),
   savePermission: (id, data) => request.patch(`/permission/${id}`, data),
diff --git a/src/views/pms/resource/components/MenuTree.vue b/src/views/pms/resource/components/MenuTree.vue
index 9cc01e9..497dc54 100644
--- a/src/views/pms/resource/components/MenuTree.vue
+++ b/src/views/pms/resource/components/MenuTree.vue
@@ -1,7 +1,7 @@
 <!--------------------------------
  - @Author: Ronnie Zhang
  - @LastEditor: Ronnie Zhang
- - @LastEditTime: 2023/12/05 21:28:59
+ - @LastEditTime: 2024/04/01 15:51:34
  - @Email: zclzone@outlook.com
  - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  --------------------------------->
diff --git a/src/views/pms/resource/components/ResAddOrEdit.vue b/src/views/pms/resource/components/ResAddOrEdit.vue
index 39aeff7..cbe040a 100644
--- a/src/views/pms/resource/components/ResAddOrEdit.vue
+++ b/src/views/pms/resource/components/ResAddOrEdit.vue
@@ -1,7 +1,7 @@
 <!--------------------------------
  - @Author: Ronnie Zhang
  - @LastEditor: Ronnie Zhang
- - @LastEditTime: 2023/12/12 09:03:43
+ - @LastEditTime: 2024/04/01 15:52:31
  - @Email: zclzone@outlook.com
  - Copyright © 2023 Ronnie Zhang(大脸怪) | https://isme.top
  --------------------------------->
@@ -20,6 +20,7 @@
           <n-tree-select
             v-model:value="modalForm.parentId"
             :options="menuOptions"
+            :disabled="parentIdDisabled"
             label-field="name"
             key-field="id"
             placeholder="根菜单"
@@ -39,6 +40,7 @@
           <n-input v-model:value="modalForm.code" />
         </n-form-item-gi>
         <n-form-item-gi
+          v-if="modalForm.type === 'MENU'"
           :span="12"
           path="path"
           :rule="{
@@ -58,7 +60,7 @@
           </template>
           <n-input v-model:value="modalForm.path" />
         </n-form-item-gi>
-        <n-form-item-gi :span="12" path="icon">
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="icon">
           <template #label>
             <QuestionLabel
               label="菜单图标"
@@ -67,7 +69,7 @@
           </template>
           <n-select v-model:value="modalForm.icon" :options="iconOptions" clearable filterable />
         </n-form-item-gi>
-        <n-form-item-gi :span="12" path="layout">
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="layout">
           <template #label>
             <QuestionLabel
               label="layout"
@@ -76,7 +78,7 @@
           </template>
           <n-select v-model:value="modalForm.layout" :options="layoutOptions" clearable />
         </n-form-item-gi>
-        <n-form-item-gi :span="24" path="component">
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="24" path="component">
           <template #label>
             <QuestionLabel
               label="组件路径"
@@ -92,7 +94,7 @@
           />
         </n-form-item-gi>
 
-        <n-form-item-gi :span="12" path="show">
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="show">
           <template #label>
             <QuestionLabel label="显示状态" content="控制是否在菜单栏显示，不影响路由注册" />
           </template>
@@ -113,7 +115,7 @@
             <template #unchecked>禁用</template>
           </n-switch>
         </n-form-item-gi>
-        <n-form-item-gi :span="12" path="enable">
+        <n-form-item-gi v-if="modalForm.type === 'MENU'" :span="12" path="enable">
           <template #label>
             <QuestionLabel
               label="KeepAlive"
@@ -126,6 +128,7 @@
           </n-switch>
         </n-form-item-gi>
         <n-form-item-gi
+          v-if="modalForm.type === 'MENU'"
           :span="12"
           label="排序"
           path="order"
@@ -186,10 +189,12 @@ const [modalFormRef, modalForm, validation] = useForm(defaultForm)
 const [modalRef, okLoading] = useModal()
 
 const modalAction = ref('')
+const parentIdDisabled = ref(false)
 function handleOpen(options = {}) {
   const { action, row = {}, ...rest } = options
   modalAction.value = action
   modalForm.value = { ...row }
+  parentIdDisabled.value = !!row.parentId
   modalRef.value.open({ ...rest, onOk: onSave })
 }
 
diff --git a/src/views/pms/resource/index.vue b/src/views/pms/resource/index.vue
index b34c9e5..4255d63 100644
--- a/src/views/pms/resource/index.vue
+++ b/src/views/pms/resource/index.vue
@@ -22,12 +22,7 @@
         <template v-if="currentMenu">
           <div class="flex justify-between">
             <h3 class="mb-12">{{ currentMenu.name }}</h3>
-            <n-button
-              :disabled="!currentMenu"
-              size="small"
-              type="primary"
-              @click="handleEdit(currentMenu)"
-            >
+            <n-button size="small" type="primary" @click="handleEdit(currentMenu)">
               <i class="i-material-symbols:edit-outline mr-4 text-14" />
               编辑
             </n-button>
@@ -64,6 +59,22 @@
               {{ currentMenu.order ?? '--' }}
             </n-descriptions-item>
           </n-descriptions>
+
+          <div class="mt-32 flex justify-between">
+            <h3 class="mb-12">按钮</h3>
+            <n-button size="small" type="primary" @click="handleAddBtn">
+              <i class="i-fe:plus mr-4 text-14" />
+              新增
+            </n-button>
+          </div>
+
+          <MeCrud
+            ref="$table"
+            :columns="btnsColumns"
+            :scroll-x="-1"
+            :get-data="api.getButtons"
+            :query-items="{ parentId: currentMenu.id }"
+          ></MeCrud>
         </template>
         <n-empty v-else class="h-450 f-c-c" size="large" description="请选择菜单查看详情" />
       </div>
@@ -73,13 +84,19 @@
 </template>
 
 <script setup>
+import { NButton, NSwitch } from 'naive-ui'
 import MenuTree from './components/MenuTree.vue'
 import ResAddOrEdit from './components/ResAddOrEdit.vue'
+import { MeCrud } from '@/components'
 import api from './api'
 
 const treeData = ref([])
 const treeLoading = ref(false)
 async function initData(data) {
+  if (data?.type === 'BUTTON') {
+    $table.value.handleSearch()
+    return
+  }
   treeLoading.value = true
   const res = await api.getMenuTree()
   treeData.value = res?.data || []
@@ -100,4 +117,127 @@ function handleEdit(item = {}) {
     okText: '保存',
   })
 }
+
+const btnsColumns = [
+  { title: '名称', key: 'name' },
+  { title: '编码', key: 'code' },
+  {
+    title: '状态',
+    key: 'enable',
+    render: (row) =>
+      h(
+        NSwitch,
+        {
+          size: 'small',
+          rubberBand: false,
+          value: row.enable,
+          loading: !!row.enableLoading,
+          onUpdateValue: () => handleEnable(row),
+        },
+        {
+          checked: () => '启用',
+          unchecked: () => '停用',
+        }
+      ),
+  },
+  {
+    title: '操作',
+    key: 'actions',
+    width: 320,
+    align: 'right',
+    fixed: 'right',
+    render(row) {
+      return [
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'primary',
+            style: 'margin-left: 12px;',
+            onClick: () => handleEditBtn(row),
+          },
+          {
+            default: () => '编辑',
+            icon: () => h('i', { class: 'i-material-symbols:edit-outline text-14' }),
+          }
+        ),
+
+        h(
+          NButton,
+          {
+            size: 'small',
+            type: 'error',
+            style: 'margin-left: 12px;',
+            onClick: () => handleDeleteBtn(row.id),
+          },
+          {
+            default: () => '删除',
+            icon: () => h('i', { class: 'i-material-symbols:delete-outline text-14' }),
+          }
+        ),
+      ]
+    },
+  },
+]
+const $table = ref(null)
+
+watch(
+  () => currentMenu.value,
+  async (v) => {
+    await nextTick()
+    if (v) $table.value.handleSearch()
+  }
+)
+
+function handleAddBtn() {
+  modalRef.value?.handleOpen({
+    action: 'add',
+    title: '新增按钮',
+    row: { type: 'BUTTON', parentId: currentMenu.value.id },
+    okText: '保存',
+  })
+}
+
+function handleEditBtn(row) {
+  modalRef.value?.handleOpen({
+    action: 'edit',
+    title: '编辑按钮 - ' + row.name,
+    row,
+    okText: '保存',
+  })
+}
+
+function handleDeleteBtn(id) {
+  const d = $dialog.warning({
+    content: '确定删除？',
+    title: '提示',
+    positiveText: '确定',
+    negativeText: '取消',
+    async onPositiveClick() {
+      try {
+        d.loading = true
+        await api.deletePermission(id)
+        $message.success('删除成功')
+        $table.value.handleSearch()
+        d.loading = false
+      } catch (error) {
+        d.loading = false
+      }
+    },
+  })
+}
+
+async function handleEnable(item) {
+  try {
+    item.enableLoading = true
+    await api.savePermission(item.id, {
+      enable: !item.enable,
+    })
+    $message.success('操作成功')
+    $table.value?.handleSearch()
+    item.enableLoading = false
+  } catch (error) {
+    item.enableLoading = false
+  }
+}
 </script>