获取菜单

package.json

@@ -14,7 +14,7 @@
         "dayjs": "^1.11.8",
         "echarts": "^5.4.2",
         "element-plus": "2.3.7",
-        "hc-vue3-ui": "^1.4.2",
+        "hc-vue3-ui": "^1.4.5",
         "js-base64": "^3.7.5",
         "js-cookie": "^3.0.5",
         "js-fast-way": "^0.2.0",

src/api/modules/system/menu.js

@@ -1,4 +1,5 @@
 import {httpApi} from "../../request/httpApi";
+import config from "~src/config/index";
 
 export default {
     //菜单数据
@@ -7,49 +8,27 @@ export default {
             url: '/api/blade-system/menu/lazy-list',
             method: 'get',
             params: {
-                sysId: '1654421197196595202',
+                sysId: config.sysId,
                 ...form
             }
         }, false);
     },
-    //草稿箱列表
-    async draft(form = {}, msg = false) {
+    //删除菜单
+    async remove(ids) {
         return httpApi({
-            url: '/api/blade-control/expense/car/draft/list',
-            method: 'get',
-            params: form
-        }, msg);
-    },
-    //数据详情
-    async detail(form, msg = false) {
-        return httpApi({
-            url: '/api/blade-control/expense/car/draft/detail',
-            method: 'get',
-            params: form
-        }, msg);
+            url: '/api/blade-system/menu/remove',
+            method: 'post',
+            params: {
+                ids,
+            }
+        }, false);
     },
-    //提交申请
+    //提交
     async submit(form, msg = false) {
         return httpApi({
-            url: '/api/blade-control/expense/car/submit',
+            url: '/api/blade-system/menu/submit',
             method: 'post',
             data: form
         }, msg);
     },
-    //记录物理删除
-    async remove(form, msg = false) {
-        return httpApi({
-            url: '/api/blade-control/expense/car/remove',
-            method: 'post',
-            params: form
-        }, msg);
-    },
-    //记录撤销
-    async cancel(form, msg = false) {
-        return httpApi({
-            url: '/api/blade-control/expense/car/cancel',
-            method: 'post',
-            params: form
-        }, msg);
-    },
 }

src/config/index.js

@@ -3,13 +3,14 @@ import config from './index.json'
 //主要配置
 export default {
     title: '项目管控平台',
-    key: 'hac',                 // 配置主键,目前用于存储
-    clientId: 'hac',            // 客户端id
-    clientSecret: 'hac_secret', // 客户端密钥
-    tenantMode: true,           // 是否开启租户模式
-    tenantId: "003077",         // 管理组租户编号
-    captchaMode: false,         // 是否开启验证码模式
-    switchMode: false,          // 是否开启部门切换模式
+    key: 'hac',                     // 配置主键,目前用于存储
+    clientId: 'hac',                // 客户端id
+    clientSecret: 'hac_secret',     // 客户端密钥
+    sysId: "1654421197196595202",   // 应用ID
+    tenantMode: true,               // 是否开启租户模式
+    tenantId: "003077",             // 管理组租户编号
+    captchaMode: false,             // 是否开启验证码模式
+    switchMode: false,              // 是否开启部门切换模式
     tokenTime: 1740,
     tokenHeader: 'Blade-Auth',
     tokenKey: 'hac-access-token',

src/config/index.json

@@ -1,6 +1,6 @@
 {
     "version": "20230607160059",
-    "target": "http://192.168.0.109:8090",
+    "target": "http://192.168.0.100:8090",
     "smsPhone": "",
     "vite": {
         "port": 5174,

src/styles/index.scss

@@ -250,3 +250,7 @@ html, body, #app {
         }
     }
 }
+
+.el-form .el-form-item__content .el-cascader {
+    width: 100%;
+}

src/views/system/menu.vue

@@ -12,88 +12,94 @@
             </div>
         </template>
         <template #extra>
-            <el-button type="primary" @click="addClick" size="large">
+            <el-button type="primary" @click="addMenu" size="large">
                 <HcIcon name="add"/>
                 <span>新增</span>
             </el-button>
-            <el-button type="danger" @click="cancelClick" size="large" :disabled="tableCheckedKeys.length <= 0">
+            <el-button type="danger" @click="deleteClick" size="large" :disabled="!tableCheckedKeys">
                 <HcIcon name="delete-bin-2"/>
                 <span>删除</span>
             </el-button>
         </template>
-        <HcTable :column="tableColumn" :datas="tableData" isCheck @selection-change="tableSelectionChange">
+        <HcTable ui="no-border" border hasChildren="hasChildren1" :isIndex="false" isCheck
+                 :column="tableColumn" :datas="tableData" @selection-change="tableSelectionChange"
+        >
+            <template #name="{row}">
+                <HcIcon class="table-menu-icon" :name="row.source" v-if="row.source"/>
+                <span>{{row.name}}</span>
+            </template>
+            <template #category="{row}">
+                <span v-if="row.category === 1">菜单</span>
+                <span v-if="row.category === 2">按钮</span>
+            </template>
+            <template #isShowButton="{row}">
+                <span v-if="row.isShowButton === 1">是</span>
+                <span v-if="row.isShowButton === 2">否</span>
+            </template>
             <template #action="{row, index}">
-                <el-button size="small" type="primary" @click="eidtModal">编辑</el-button>
-                <el-button size="small" type="primary" @click="eidtModal">新增子项</el-button>
+                <el-button size="small" type="primary" @click="eidtMenu(row)">编辑</el-button>
+                <el-button size="small" type="primary" @click="addChildren(row)">新增子项</el-button>
             </template>
         </HcTable>
 
         <!--菜单新增编辑-->
-        <HcDialog bgColor="#ffffff" isToBody :show="addModal" :title="modalTitle + '菜单'" @close="addModalClose" widths="70rem">
+        <HcDialog bgColor="#ffffff" isToBody :show="menuDataModal"
+                  :title="formModel.id?'编辑菜单':'修改菜单'"
+                  @close="menuDataModalClose" widths="70rem"
+                  @save="menuDataModalSave"
+        >
             <el-form ref="formRef" :model="formModel" :rules="formRules" label-position="left" label-width="auto" size="large">
                 <el-row :gutter="20">
                     <el-col :span="12">
                         <el-form-item label="菜单名称:" prop="name">
-                            <el-input v-model="formModel.name"/>
+                            <el-input v-model="formModel.name" placeholder="六字以内的名称"/>
                         </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="路由地址:" prop="location">
-                            <el-input v-model="formModel.idNumber" placeholder=""/>
+                        <el-form-item label="路由地址:" prop="path">
+                            <el-input v-model="formModel.path" placeholder="url上显示的地址"/>
                         </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="上级菜单:">
-                            <el-select v-model="formModel.top" class="block" placeholder="请选择" size="large">
-                                <el-option v-for="item in topMenuoptions" :key="item.value" :label="item.label" :value="item.value"/>
-                            </el-select>
+                        <el-form-item label="菜单编号:" prop="code">
+                            <el-input v-model="formModel.code" placeholder="路由中的跳转name"/>
                         </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="菜单编号:">
-                            <el-input v-model="formModel.deptId" placeholder=""/>
+                        <el-form-item label="菜单类型:">
+                            <el-radio-group v-model="formModel.category">
+                                <el-radio :label="1">菜单</el-radio>
+                                <el-radio :label="2">按钮</el-radio>
+                            </el-radio-group>
                         </el-form-item>
                     </el-col>
                     <el-col :span="12">
+                        <el-form-item label="上级菜单:">
+                            <el-cascader v-model="formModel.parentId" :options="tableData" :props="topMenuoptions" clearable size="large"/>
+                        </el-form-item>
                         <el-form-item label="菜单图标:">
-                            <el-input v-model="formModel.deptId" placeholder=""/>
+                            <el-input v-model="formModel.source" placeholder="图标库为 ">
+                                <template #append>
+                                    <a href="https://remixicon.cn/" target="_blank">图标库</a>
+                                </template>
+                            </el-input>
                         </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
                         <el-form-item label="排序:">
-                            <el-input v-model="formModel.deptId" placeholder=""/>
+                            <el-input v-model="formModel.sort" placeholder="菜单的排序，值越大越后"/>
                         </el-form-item>
-                    </el-col>
-                    <el-col :span="12">
-                        <el-form-item label="菜单类型:" prop="type">
-                            <el-radio-group v-model="formModel.type">
-                                <el-radio :label="3">菜单</el-radio>
-                                <el-radio :label="6">按钮</el-radio>
+                        <el-form-item label="显示按钮:">
+                            <el-radio-group v-model="formModel.isShowButton">
+                                <el-radio :label="1">是</el-radio>
+                                <el-radio :label="2">否</el-radio>
                             </el-radio-group>
                         </el-form-item>
                     </el-col>
                 </el-row>
             </el-form>
-            <template #footer>
-                <div class="dialog-footer">
-                    <el-button size="large" @click="addModal = false">
-                        <HcIcon name="close"/>
-                        <span>取消</span>
-                    </el-button>
-                    <el-button :loading="sureSignUserLoading" hc-btn type="primary" @click="sureSignUserClick">
-                        <HcIcon name="check"/>
-                        <span>确定创建</span>
-                    </el-button>
-                </div>
-            </template>
         </HcDialog>
     </HcCard>
 </template>
 
 <script setup>
-import {onActivated, ref, watch} from "vue";
+import {onActivated, ref} from "vue";
 import mainApi from "~api/system/menu";
-import {getArrValue} from "js-fast-way";
+import {arrToId, formValidate, getArrValue} from "js-fast-way";
+import config from "~src/config/index";
+import {delMessage} from "~uti/tools";
 
 //页面被激活时
 onActivated(() => {
@@ -104,14 +110,12 @@ onActivated(() => {
 const searchForm = ref({name: '', parentId: ''})
 const tableColumn = [
     {key: 'name', name: '菜单名称'},
-    {key: 'name', name: '路由地址'},
-    {key: 'name', name: '菜单编号'},
-    {key: 'text', name: '菜单图标'},
-    {key: 'text', name: '菜单类型'},
-    {key: 'text', name: '是否显示按钮'},
-    {key: 'text', name: '排序'},
-    {key: 'text', name: '上级菜单'},
-    {key: 'action', name: '操作', width: 250}
+    {key: 'code', name: '菜单编号'},
+    {key: 'path', name: '路由地址'},
+    {key: 'category', name: '菜单类型'},
+    {key: 'isShowButton', name: '显示按钮', width: 90, align: 'center' },
+    {key: 'sort', name: '排序', width: 80, align: 'center' },
+    {key: 'action', name: '操作', width: 165}
 ]
 const tableData = ref([])
 const getTableData = async () => {
@@ -123,69 +127,106 @@ const getTableData = async () => {
     }
 }
 
-
-
-const tableCheckedKeys = ref([]);
+//多选
+const tableCheckedKeys = ref('');
 const tableSelectionChange = (rows) => {
-    tableCheckedKeys.value = rows
-    if (tableCheckedKeys.value.length > 1) {
-        window.$message.warning('只能选择一条数据')
+    tableCheckedKeys.value = arrToId(rows)
+}
+
+//删除菜单
+const deleteClick = () => {
+    if (tableCheckedKeys.value) {
+        delMessage(() => {
+            deleteApi(tableCheckedKeys.value)
+        })
+    } else {
+        window.$message.warning('请选择要删除的菜单')
     }
 }
-const modalTitle = ref('新增')
-const addModal = ref(false)
-//弹窗关闭
-const addModalClose = () => {
-    console.log('弹窗关闭')
-    addModal.value = false
+//删除请求
+const deleteApi = async (ids) => {
+    const {error, code, msg} = await mainApi.remove(ids)
+    if (!error && code === 200) {
+        window.$message.success('删除成功')
+        getTableData().then()
+    } else {
+        window.$message.success(msg)
+    }
 }
-const addClick = () => {
-    addModal.value = true
-    modalTitle.value = '新增'
+
+//菜单数据弹窗
+const menuDataModal = ref(false)
+const formRef = ref(null)
+const formModel = ref({
+    category: 1, isShowButton: 1
+})
+const formRules = {
+    name: {required: true, trigger: 'blur', message: "请输入菜单名称"},
+    path: {required: true, trigger: 'blur', message: "请输入路由地址"},
+    code: {required: true, trigger: 'blur', message: "请输入菜单编号"}
 }
-const cancelClick = () => {
-    window?.$messageBox?.alert('您确定要删除该菜单信息吗? 一旦注销数据将彻底清除，请谨慎操作？', '删除提醒', {
-        showCancelButton: true,
-        confirmButtonText: '确认注销',
-        cancelButtonText: '取消',
-        type: 'warning',
-        callback: (action) => {
-            if (action === 'confirm') {
-                console.log(11111);
-            }
-        }
-    })
+const topMenuoptions = {
+    expandTrigger: 'hover',
+    checkStrictly: true,
+    emitPath: false,
+    value: 'id',
+    label: 'name',
 }
-const sureSignUserLoading = ref(false)
-const sureSignUserClick = () => {
 
+//新增菜单
+const addMenu = () => {
+    formModel.value = {
+        sysId: config.sysId,
+        isOpen: 1,
+        isLayout: 1,
+        category: 1,
+        isShowButton: 1,
+        parentId: 0
+    }
+    menuDataModal.value = true
 }
-const eidtModal = () => {
-    modalTitle.value = '编辑'
-    addModal.value = true
+
+//编辑菜单
+const eidtMenu = (row) => {
+    formModel.value = row
+    menuDataModal.value = true
 }
-const formRef = ref(null)
-const formModel = ref({})
-const formRules = {
-    name: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入菜单名称"
-    },
-    location: {
-        required: true,
-        trigger: 'blur',
-        message: "请输入路由地址"
-    },
-    type: {
-        required: true,
-        trigger: 'blur',
-        message: "请选择类型"
+
+//新增子级菜单
+const addChildren = (row) => {
+    formModel.value = {
+        sysId: config.sysId,
+        isOpen: 1,
+        isLayout: 1,
+        category: 1,
+        isShowButton: 1,
+        parentId: row.id
     }
+    menuDataModal.value = true
 }
-const topMenuoptions = ref([])
-</script>
 
-<style lang="scss" scoped>
+//提交保存
+const menuDataModalSave = async () => {
+    const isForm = await formValidate(formRef.value)
+    if (isForm) {
+        const form = formModel.value
+        const {error, code, msg} = await mainApi.submit({
+            ...form,
+            alias: form.code
+        })
+        if (!error && code === 200) {
+            window.$message.success('保存成功')
+            menuDataModal.value = false
+            getTableData().then()
+        } else {
+            window.$message.error(msg)
+        }
+    }
+}
 
-</style>
+//弹窗关闭
+const menuDataModalClose = () => {
+    menuDataModal.value = false
+    formModel.value = {}
+}
+</script>

yarn.lock

@@ -832,10 +832,10 @@ has@^1.0.3:
   dependencies:
     function-bind "^1.1.1"
 
-hc-vue3-ui@^1.4.2:
-  version "1.4.2"
-  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.4.2.tgz#5203842542e2989d153780a1fa24c81115f386c1"
-  integrity sha512-orB6AjcEGlxLjwnfr71XZ3AthVLXyQ6f2Fl+mAX1VdCTBgYtahHKNEG64smnGGDUs0tmIUOCSiqJ7v8W2o1EHQ==
+hc-vue3-ui@^1.4.5:
+  version "1.4.5"
+  resolved "http://47.110.251.215:9000/hc-vue3-ui/-/hc-vue3-ui-1.4.5.tgz#aed8da0bb3f45b3477f1a7ec178b4d905873bede"
+  integrity sha512-S6Snqi3Wfo9rDxxoZOWw6cnHobchUQqx95agAOdRzcmZZDPEOjYH8tnbdzjv1vcR+OTXFzsR9A1vSWSs3SrnfA==
   dependencies:
     axios "^1.4.0"
     dayjs "^1.11.8"