菜单管理

src/api/modules/system/menu.js

@@ -29,16 +29,8 @@ export default {
             },
         }, false)
     },
-    //新增菜单
-    async add(form) {
-        return HcApi({
-            url: '/api/blade-system/menu/submit',
-            method: 'post',
-            data: form,
-        }, false)
-    },
-    //更新菜单
-    async update(form) {
+    //新增和编辑菜单
+    async submit(form) {
         return HcApi({
             url: '/api/blade-system/menu/submit',
             method: 'post',

src/utils/tools.js

@@ -1,6 +1,13 @@
 import { getArrValue } from 'js-fast-way'
 import { getDictionary } from '~api/other'
 
+//刷新页面
+export const reloadPage = () => {
+    setTimeout(() => {
+        window.location.reload()
+    }, 1500)
+}
+
 /**
  * 效验是否为数字或小数的数字
  * @param text  字符串内容

src/views/login/index.vue

@@ -2,13 +2,13 @@
     <div class="login-body">
         <a v-if="appLogoIcon" class="left-logo" href="http://hczc.hcxxy.com/" target="_blank">
             <img id="logo-icon" alt="" :src="appLogoIcon">
-            <span class="logo-name">{{config.name}}</span>
+            <span class="logo-name">{{ config.name }}</span>
         </a>
         <div class="left-pic-container">
             <HcPicVue v-if="defer(10)" />
         </div>
         <div class="right-container">
-            <div class="right-app-title">{{config.name}}</div>
+            <div class="right-app-title">{{ config.name }}</div>
             <div class="sign-list">
                 <h1 class="font-lg">登录</h1>
                 <div class="form-box mt-4">
@@ -164,7 +164,7 @@ const formValidateClick = async () => {
     //登录成功
     window?.$message?.success('登录成功')
     setTimeout(() => {
-        router.push({name: 'index'})
+        router.push({ name: 'index' })
     }, 1500)
 }
 

src/views/system/menu.vue

@@ -12,7 +12,7 @@
         </template>
         <template #extra>
             <el-button hc-btn type="primary" @click="addClick">新增</el-button>
-            <el-button hc-btn type="danger">删除</el-button>
+            <el-button hc-btn type="danger" @click="delClick">删除</el-button>
         </template>
         <hc-table
             ref="tableRef" :column="tableColumn" :datas="tableData" :loading="tableLoading"
@@ -26,15 +26,15 @@
                 {{ row.category === 1 ? '菜单' : '按钮' }}
             </template>
             <template #action="{ row }">
-                <el-link type="warning">修改</el-link>
-                <el-link type="success">新增子项</el-link>
-                <el-link type="primary">复制</el-link>
-                <el-link type="danger">删除</el-link>
+                <el-link type="warning" @click="editRowClick(row)">修改</el-link>
+                <el-link type="success" @click="addRowClick(row)">新增子项</el-link>
+                <el-link type="primary" @click="copyRowClick(row)">复制</el-link>
+                <el-link type="danger" @click="delRowClick(row)">删除</el-link>
             </template>
         </hc-table>
 
         <!-- 新增/修改 菜单 -->
-        <hc-new-dialog v-model="isDialogShow" widths="800px" is-footer-center :title="`${formModel.id ? '修改' : '新增'}菜单`" @close="dialogClose">
+        <hc-new-dialog v-model="isDialogShow" widths="800px" is-footer-center :title="iconDialogTitle" @close="dialogClose">
             <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="top" label-width="auto">
                 <el-row :gutter="20">
                     <el-col :span="8">
@@ -170,13 +170,23 @@
 
 <script setup>
 import { nextTick, onActivated, ref } from 'vue'
-import { getArrValue } from 'js-fast-way'
+import { useRoute, useRouter } from 'vue-router'
+import { arrToId, formValidate, getArrValue, getObjValue } from 'js-fast-way'
+import { delMessage, reloadPage } from '~uti/tools'
 import { getClinetAll } from '~api/other'
-import mainApi from '~api/system/menu'
 import { getHeader } from 'hc-vue3-ui'
+import mainApi from '~api/system/menu'
+
+//初始组合式
+const router = useRouter()
+const useRoutes = useRoute()
 
 //激活
 onActivated(() => {
+    //获取参数
+    const { sysId, name } = getObjValue(useRoutes.query)
+    searchForm.value = { sysId: sysId, name: name }
+    //获取数据
     getClinetAllApi()
     getTableData()
     getLevelMenuData()
@@ -202,6 +212,10 @@ const searchForm = ref({
 
 //搜索
 const searchClick = () => {
+    router.push({
+        name: 'menu',
+        query: searchForm.value,
+    })
     getTableData()
 }
 
@@ -313,6 +327,7 @@ const formRules = {
 
 //图标选择
 const isIconShow = ref(false)
+const iconDialogTitle = ref('')
 const menuIconFinish = (icon) => {
     formModel.value.source = icon
     isIconShow.value = false
@@ -320,13 +335,90 @@ const menuIconFinish = (icon) => {
 
 //新增菜单
 const addClick = () => {
+    iconDialogTitle.value = '新增菜单'
     formModel.value = {
         category: 1, isOpen: 1, isLayout: 1, isShowButton: 1,
         sort: 1, sysId: null, parentId: null,
     }
-    isDialogShow.value = true
+    //显示表单弹窗
+    nextTick(() => {
+        isDialogShow.value = true
+    })
 }
 
+//修改菜单
+const editRowClick = (row) => {
+    formModel.value = {}
+    iconDialogTitle.value = '修改菜单'
+    formModel.value = { ...row }
+    //显示表单弹窗
+    nextTick(() => {
+        isDialogShow.value = true
+    })
+}
+
+//新增子项
+const addRowClick = (row) => {
+    iconDialogTitle.value = '新增子菜单'
+    formModel.value = {
+        name: row.name, path: row.path, code: row.code, source: row.source,
+        sysId: row.sysId, parentId: row.id,
+        category: 1, isOpen: 1, isLayout: 1, isShowButton: 1, sort: 1,
+    }
+    //显示表单弹窗
+    nextTick(() => {
+        isDialogShow.value = true
+    })
+}
+
+//复制菜单
+const copyRowClick = (row) => {
+    iconDialogTitle.value = '复制菜单'
+    formModel.value = {
+        ...row,
+        id: null,
+        sort: row.sort + 1,
+    }
+    //显示表单弹窗
+    nextTick(() => {
+        isDialogShow.value = true
+    })
+}
+
+//删除菜单
+const delRowClick = (row) => {
+    delMessage(async () => {
+        const { code, msg } = await mainApi.del(row.id)
+        if (code === 200) {
+            window.$message.success('删除成功')
+            reloadPage()
+        } else {
+            window.$message.error(msg ?? '删除失败')
+        }
+    })
+}
+
+//批量删除菜单
+const delClick = () => {
+    const rows = tableCheckKeys.value
+    if (rows.length <= 0) {
+        window.$message.warning('请选择要删除的菜单')
+        return false
+    }
+    //确认删除菜单
+    delMessage(async () => {
+        const ids = arrToId(rows)
+        const { code, msg } = await mainApi.del(ids)
+        if (code === 200) {
+            window.$message.success('删除成功')
+            reloadPage()
+        } else {
+            window.$message.error(msg ?? '删除失败')
+        }
+    })
+}
+
+
 //上传文件
 const uploadRef = ref(null)
 const uploadParams = ref({})
@@ -372,15 +464,27 @@ const uploadSuccess = ({ echoParams, resData }) => {
 //提交表单
 const submitLoading = ref(false)
 const dialogSubmit = async () => {
-    console.log(formModel.value)
+    const formRes = await formValidate(formRef.value)
+    if (!formRes) return false
+    submitLoading.value = true
+    //处理数据
+    const form = formModel.value
+    form.parentId = form.parentId ?? 0
+    form.alias = form.alias ?? form.code
+    //发起请求
+    const { error, code, msg } = await mainApi.submit(form)
+    if (!error && code === 200) {
+        window?.$message?.error('操作成功')
+        reloadPage()
+    } else {
+        window?.$message?.error(msg ?? '操作失败')
+    }
 }
 
 //关闭弹窗
 const dialogClose = () => {
     isDialogShow.value = false
+    submitLoading.value = false
+    formModel.value = {}
 }
 </script>
-
-<style scoped lang="scss">
-
-</style>