From 50a5b7e3a32cdd5ea798a14643505579105b409a Mon Sep 17 00:00:00 2001
From: Mrtangl <1807746833@qq.com>
Date: Mon, 18 Apr 2022 14:42:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=8F=9C=E5=8D=95=E6=8E=A5=E5=8F=A3=E5=AF=B9?=
 =?UTF-8?q?=E6=8E=A5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 admin/src/views/permission/menu/edit.vue  | 208 ++++++++++++++++++----
 admin/src/views/permission/menu/index.vue |  10 +-
 2 files changed, 176 insertions(+), 42 deletions(-)

diff --git a/admin/src/views/permission/menu/edit.vue b/admin/src/views/permission/menu/edit.vue
index 67586c29..e03ac96b 100644
--- a/admin/src/views/permission/menu/edit.vue
+++ b/admin/src/views/permission/menu/edit.vue
@@ -25,13 +25,13 @@
 
             <div class="m-t-15">
                 <el-form
-                    ref="form"
+                    ref="formRefs"
                     :model="formData"
                     label-width="120px"
                     size="small"
                     style="max-width: 460px"
                 >
-                    <el-form-item label="菜单类型">
+                    <!-- <el-form-item label="菜单类型">
                         <el-radio-group v-model="radio">
                             <el-radio
                                 :label="menuDataType.CATALOG"
@@ -68,55 +68,130 @@
                         ></el-cascader>
                     </el-form-item>
 
-                    <el-form-item label="菜单图标">
-                        <el-input show-word-limit placeholder="请输入名称"></el-input>
-                    </el-form-item>
+                    <div v-if="(radio == menuDataType.BUTTON) == ''">
+                        <el-form-item label="菜单图标">
+                            <el-input show-word-limit placeholder="请输入名称"></el-input>
+                        </el-form-item>
+                    </div>
 
                     <el-form-item label="菜单名称">
                         <el-input show-word-limit placeholder="请输入名称"></el-input>
                     </el-form-item>
 
-                    <el-form-item label="路由地址">
-                        <el-input show-word-limit placeholder="请输入名称"></el-input>
+                    <div v-if="(radio == menuDataType.BUTTON) == ''">
+                        <el-form-item label="路由地址">
+                            <el-input show-word-limit placeholder="请输入名称"></el-input>
+                        </el-form-item>
+                    </div>
+
+                    <div v-if="radio == menuDataType.MENU">
+                        <el-form-item label="组件路径">
+                            <el-input show-word-limit placeholder="请输入名称"></el-input>
+                        </el-form-item>
+                        <el-form-item label="极限字符">
+                            <el-input show-word-limit placeholder="请输入名称"></el-input>
+                        </el-form-item>
+                        <el-form-item label="路由参数">
+                            <el-input show-word-limit placeholder="请输入名称"></el-input>
+                        </el-form-item>
+                    </div>
+
+                    <el-form-item label="排序">
+                        <el-input show-word-limit type="number" placeholder="请输入名称"></el-input>
+                    </el-form-item> -->
+
+                    <el-form-item label="父级菜单">
+                        <el-cascader
+                            v-model="formData.pid"
+                            style="width: 340px"
+                            :options="menuList"
+                            :props="{
+                                checkStrictly: true,
+                                emitPath: false,
+                                label: 'menuName',
+                                value: 'id'
+                            }"
+                            clearable
+                        ></el-cascader>
                     </el-form-item>
 
-                    <div v-if="radio == menuDataType.CATALOG">
-                        <el-form-item label="排序">
-                            <el-input
-                                show-word-limit
-                                type="number"
-                                placeholder="请输入名称"
-                            ></el-input>
-                        </el-form-item>
-                    </div>
+                    <el-form-item label="菜单类型">
+                        <el-radio-group v-model="formData.menuType">
+                            <el-radio :label="menuDataType.CATALOG">目录</el-radio>
+                            <el-radio :label="menuDataType.MENU">菜单</el-radio>
+                            <el-radio :label="menuDataType.BUTTON">按钮</el-radio>
+                        </el-radio-group>
+                    </el-form-item>
 
-                    <div v-else-if="radio == menuDataType.MENU">
-                        <el-form-item label="排序">
-                            <el-input
-                                show-word-limit
-                                type="number"
-                                placeholder="请输入名称"
-                            ></el-input>
-                        </el-form-item>
-                        <el-form-item label="ssss">
-                            <el-input
-                                show-word-limit
-                                type="number"
-                                placeholder="请输入名称"
-                            ></el-input>
-                        </el-form-item>
-                    </div>
+                    <el-form-item label="菜单名称">
+                        <el-input
+                            v-model="formData.menuName"
+                            show-word-limit
+                            placeholder="请输入名称"
+                        ></el-input>
+                    </el-form-item>
 
-                    <div v-else></div>
+                    <el-form-item label="菜单图标">
+                        <el-input
+                            v-model="formData.menuIcon"
+                            show-word-limit
+                            placeholder="请输入图标"
+                        ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="菜单排序">
+                        <el-input
+                            v-model="formData.menuSort"
+                            show-word-limit
+                            placeholder="请输入排序"
+                        ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="菜单权限字符">
+                        <el-input
+                            v-model="formData.perms"
+                            show-word-limit
+                            placeholder="请输入"
+                        ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="路由路径">
+                        <el-input
+                            v-model="formData.paths"
+                            show-word-limit
+                            placeholder="请输入"
+                        ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="组件路径">
+                        <el-input
+                            v-model="formData.component"
+                            show-word-limit
+                            placeholder="请输入"
+                        ></el-input>
+                    </el-form-item>
+
+                    <el-form-item label="菜单状态">
+                        <el-switch
+                            v-model="formData.isDisable"
+                            :active-value="0"
+                            :inactive-value="1"
+                        />
+                    </el-form-item>
                 </el-form>
             </div>
         </el-card>
+        <footer-btns>
+            <el-button type="primary" size="small" @click="onSubmit">保存</el-button>
+        </footer-btns>
     </div>
 </template>
 
 <script lang="ts" setup>
 import { useAdmin } from '@/core/hooks/app'
 import { onMounted, reactive, ref } from 'vue'
+import FooterBtns from '@/components/footer-btns/index.vue'
+import type { ElForm, ElMessage } from 'element-plus'
 import { apiConfigGetMenu, apiMenuDetail, apiMenuAdd, apiMenuEdit, apiMenuDelete } from '@/api/auth'
 
 const menuDataType = {
@@ -128,15 +203,70 @@ const menuDataType = {
 const { router, route } = useAdmin()
 const id: any = route.query.id
 
-const radio = ref(menuDataType.CATALOG)
-
-// 切换
-const changeType = (val: string) => {
-    menuDataType.value = val
-}
+const formRefs = ref<InstanceType<typeof ElForm>>()
 
 // 父级菜单选择
 const menuList = ref<any>([])
+
+// 表单数据
+const formData = ref({
+    pid: '', // 上级ID
+    menuType: '', // 菜单类型
+    menuName: '', // 菜单名称
+    menuIcon: '', // 菜单图标
+    menuSort: '', // 菜单排序
+    perms: '', // 菜单权限字符
+    paths: '', // 路由路径
+    component: '', // 前端组件
+    isDisable: '' // 是否禁用: 0=否， 1=是
+})
+
+// 获取详情
+const getMenuDetail = async (id: number) => {
+    ;(formData.value as {}) = await apiMenuDetail({ id })
+    getFatherMenu()
+}
+
+// 获取父级菜单选择
+const getFatherMenu = async () => {
+    const menus = (await apiConfigGetMenu()) || []
+    menuList.value = [{ id: 0, menuName: '顶级' }, ...menus]
+    console.log(menuList.value, '---------------menuaList.value')
+}
+
+// 添加菜单
+const handleMenuAdd = async () => {
+    await apiMenuAdd({ ...formData.value })
+    router.back()
+}
+
+// 编辑菜单
+const handleMenuEdit = async () => {
+    await apiMenuEdit({ ...formData.value })
+    router.back()
+}
+
+// 保存
+const onSubmit = () => {
+    formRefs.value?.validate()?.then(valid => {
+        if (!valid) {
+            return
+        }
+
+        if (!id) handleMenuAdd()
+        else handleMenuEdit()
+    })
+}
+
+// 切换
+// const changeType = (val: string) => {
+//     menuDataType.value = val
+// }
+
+onMounted(() => {
+    if (id) getMenuDetail(id)
+    getFatherMenu()
+})
 </script>
 
 <style lang="scss" scoped></style>
diff --git a/admin/src/views/permission/menu/index.vue b/admin/src/views/permission/menu/index.vue
index 543c1e31..12d55b89 100644
--- a/admin/src/views/permission/menu/index.vue
+++ b/admin/src/views/permission/menu/index.vue
@@ -13,7 +13,7 @@
                 :tree-props="{ children: 'children' }"
                 size="mini"
             >
-                <el-table-column prop="menuName" label="名称"> </el-table-column>
+                <el-table-column prop="menuName" label="名称" width="180"> </el-table-column>
                 <el-table-column prop="menuType" label="菜单类型">
                     <template #default="scope">
                         <span v-if="scope.row.menuType == menuDataType.CATALOG">{{ '目录' }}</span>
@@ -27,8 +27,12 @@
                 <el-table-column prop="menuSort" label="排序"> </el-table-column>
                 <el-table-column prop="perms" label="权限标识"> </el-table-column>
                 <el-table-column prop="paths" label="组件路径"> </el-table-column>
-                <el-table-column prop="isDisable" label="状态"> </el-table-column>
-                <el-table-column prop="createTime" label="创建时间"> </el-table-column>
+                <el-table-column prop="isDisable" label="状态">
+                    <template #default="scope">
+                        <span>{{ scope.row.isDisable == 0 ? '启用' : '关闭' }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column prop="createTime" label="创建时间" width="160"> </el-table-column>
                 <el-table-column label="操作">
                     <template #default="scope">
                         <router-link