Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

src/api/link/certificate.ts

@@ -5,3 +5,12 @@ export const NETWORK_CERTIFICATE_UPLOAD = `${BASE_API_PATH}/network/certificate/
 
 
 export const save = (data: object) => server.post(`/network/certificate`, data);
+
+export const update = (data: object) => server.patch(`/network/certificate`, data);
+
+export const query = (data: object) => server.post(`/network/certificate/_query`, data);
+
+export const queryDetail = (id: string) => server.get(`/network/certificate/${id}`);
+
+export const remove = (id: string) => server.remove(`/network/certificate/${id}`);
+

src/api/system/menu.ts

@@ -10,4 +10,8 @@ export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tre
 // 获取资产类型
 export const getAssetsType_api = () => server.get(`/asset/types`);
 // 获取菜单详情
-export const getMenuDetail_api = (id:string) => server.get(`/menu/${id}`);
+export const getMenuInfo_api = (id:string) => server.get(`/menu/${id}`);
+// 编辑菜单信息
+export const saveMenuInfo_api = (data: object) => server.patch(`/menu`, data);
+// 新增菜单信息
+export const addMenuInfo_api = (data: object) => server.post(`/menu`, data);

src/components/AIcon/index.tsx

@@ -44,6 +44,7 @@ const iconKeys = [
     'QuestionCircleOutlined',
     'InfoCircleOutlined',
     'SearchOutlined',
+    'EllipsisOutlined',
 ]
 
 const Icon = (props: {type: string}) => {

src/components/Table/index.tsx

@@ -37,6 +37,7 @@ export interface ActionsType {
     tooltip?: TooltipProps;
     popConfirm?: PopconfirmProps;
     icon?: string;
+    children?: ActionsType[];
 }
 
 export interface JColumnProps extends ColumnProps{

src/router/menu.ts

@@ -87,7 +87,7 @@ export default [
         component: () => import('@/views/link/Certificate/index.vue')
     },
     {
-        path: '/link/certificate/detail/add',
+        path: '/link/certificate/detail/:type/:id',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
     {

src/views/device/components/Metadata/Cat/index.vue

@@ -16,9 +16,10 @@
         </p>
       </div>
       <a-tabs @change="handleConvertMetadata">
-        <a-tab-pane v-for="item in codecs" :tab-key="item.id" :key="item.id">
+        <a-tab-pane v-for="item in codecs" :key="item.id" :tab="item.name">
           <div class="cat-panel">
             <!-- TODO 代码编辑器 -->
+            {{ value }}
           </div>
         </a-tab-pane>
       </a-tabs>
@@ -120,7 +121,9 @@ watch(
   { immediate: true }
 )
 
-watchEffect(() => {
+watch(
+  [props.visible, props.type],
+  () => {
     if (props.visible) {
       loading.value = true
       const { id } = route.params
@@ -138,7 +141,9 @@ watchEffect(() => {
         });
       }
     }
-})
+  },
+  { immediate: true }
+)
 </script>
 <style scoped lang="less">
 .cat-content {

src/views/home/components/ComprehensiveHome/index.vue

@@ -41,24 +41,195 @@ import BasicCountCard from '../BasicCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
 
-import {
+import { useMenuStore } from '@/store/menu';
-    deviceBootConfig as _deviceBootConfig,
+import { usePermissionStore } from '@/store/permission';
-    deviceStepDetails,
+import { recommendList, bootConfig } from '../../index';
-    opsBootConfig as _opsBootConfig,
-    opsStepDetails,
-} from '../../modules/config';
 
+// 按钮权限控制
+const hasPermission = usePermissionStore().hasPermission;
+const productPermission = (action: string) =>
+    hasPermission(`device/Product:${action}`);
+const devicePermission = (action: string) =>
+    hasPermission(`device/Instance:${action}`);
+const rulePermission = (action: string) =>
+    hasPermission(`rule-engine/Instance:${action}`);
+// 页面权限控制
+const menuPermission = useMenuStore().hasPermission;
+
+// 物联网引导-数据
+const _deviceBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '创建产品',
+        link: '/iot/device/Product',
+        auth: productPermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP2',
+        label: '创建设备',
+        link: '/iot/device/Instance',
+        auth: devicePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '规则引擎',
+        link: '/iot/rule-engine/Instance',
+        auth: rulePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+];
 const deviceImages = [
     '/images/home/guide-home1.png',
     '/images/home/guide-home2.png',
     '/images/home/guide-home3.png',
 ];
+const deviceBootConfig = _deviceBootConfig.map((item, i) => ({
+    ...item,
+    image: deviceImages[i],
+}));
+
+// 设备接入推荐步骤-数据
+const deviceStepDetails: recommendList[] = [
+    {
+        title: '创建产品',
+        details:
+            '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
+        iconUrl: '/images/home/bottom-4.png',
+        linkUrl: '/iot/device/Product',
+        auth: productPermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '配置产品接入方式',
+        details:
+            '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
+        iconUrl: '/images/home/bottom-1.png',
+        linkUrl: '/iot/device/Product/detail',
+        auth: productPermission('update'),
+        dialogTag: 'accessMethod',
+    },
+    {
+        title: '添加测试设备',
+        details: '添加单个设备，用于验证产品模型是否配置正确。',
+        iconUrl: '/images/home/bottom-5.png',
+        linkUrl: '/iot/device/Instance',
+        auth: devicePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '功能调试',
+        details:
+            '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
+        iconUrl: '/images/home/bottom-2.png',
+        linkUrl: '/iot/device/Instance/detail',
+        // auth: devicePermission('update'),
+        auth: true,
+        dialogTag: 'funcTest',
+    },
+    {
+        title: '批量添加设备',
+        details: '批量添加同一产品下的设备',
+        iconUrl: '/images/home/bottom-3.png',
+        linkUrl: '/iot/device/Instance',
+        auth: devicePermission('import'),
+        params: {
+            import: true,
+        },
+    },
+];
+
+// 运维管理引导-数据
+const _opsBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '设备接入配置',
+        link: '/iot/link/accessConfig',
+        auth: menuPermission('link/accessConfig'),
+    },
+    {
+        english: 'STEP2',
+        label: '日志排查',
+        link: '/iot/link/Log',
+        auth: menuPermission('link/Log'),
+        params: {
+            key: 'system',
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '实时监控',
+        link: '/iot/link/dashboard',
+        auth: menuPermission('link/dashboard'),
+        params: {
+            save: true,
+        },
+    },
+];
 const opsImages = [
     '/images/home/guide-home4.png',
     '/images/home/guide-home5.png',
     '/images/home/guide-home6.png',
 ];
+const opsBootConfig = _opsBootConfig.map((item, i) => ({
+    ...item,
+    image: opsImages[i],
+}));
+
+// 运维管理推荐步骤-数据
+const opsStepDetails: recommendList[] = [
+    {
+        title: '协议管理',
+        details:
+            '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
+        iconUrl: '/images/home/bottom-1.png',
+        linkUrl: '/iot/link/protocol',
+        auth: menuPermission('link/Protocol'),
+    },
+    {
+        title: '证书管理',
+        details: '统一维护平台内的证书，用于数据通信加密。',
+        iconUrl: '/images/home/bottom-6.png',
+        linkUrl: '/iot/link/Certificate',
+        auth: menuPermission('link/Certificate'),
+    },
+    {
+        title: '网络组件',
+        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
+        iconUrl: '/images/home/bottom-3.png',
+        linkUrl: '/iot/link/type',
+        auth: menuPermission('link/Type'),
+    },
+    {
+        title: '设备接入网关',
+        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
+        iconUrl: '/images/home/bottom-4.png',
+        linkUrl: '/iot/link/accessConfig',
+        auth: menuPermission('link/AccessConfig'),
+    },
+    {
+        title: '日志管理',
+        details: '监控系统日志，及时处理系统异常。',
+        iconUrl: '/images/home/bottom-5.png',
+        linkUrl: '/iot/link/Log',
+        auth: menuPermission('Log'),
+        params: {
+            key: 'system',
+        },
+    },
+];
+
+
 
-const deviceBootConfig = _deviceBootConfig.map((item,i) => ({...item, image: deviceImages[i]}));
-const opsBootConfig = _opsBootConfig.map((item,i) => ({...item, image: opsImages[i]}));
 </script>

src/views/home/components/DevOpsHome/index.vue

@@ -26,8 +26,82 @@ import BootCard from '../BootCard.vue';
 import BasicCountCard from '../BasicCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
+import { useMenuStore } from "@/store/menu";
+
+import { bootConfig, recommendList } from '../../index';
+// 页面权限控制
+const menuPermission = useMenuStore().hasPermission;
+
+const opsBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '设备接入配置',
+        link: '/iot/link/accessConfig',
+        auth: menuPermission('link/accessConfig'),
+    },
+    {
+        english: 'STEP2',
+        label: '日志排查',
+        link: '/iot/link/Log',
+        auth: menuPermission('link/Log'),
+        params: {
+            key: 'system',
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '实时监控',
+        link: '/iot/link/dashboard',
+        auth: menuPermission('link/dashboard'),
+        params: {
+            save: true,
+        },
+    },
+];
+const opsStepDetails: recommendList[] = [
+    {
+        title: '协议管理',
+        details:
+            '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
+        iconUrl: '/images/home/bottom-1.png',
+        linkUrl: '/iot/link/protocol',
+        auth: menuPermission('link/Protocol'),
+        
+    },
+    {
+        title: '证书管理',
+        details: '统一维护平台内的证书，用于数据通信加密。',
+        iconUrl: '/images/home/bottom-6.png',
+        linkUrl: '/iot/link/Certificate',
+        auth: menuPermission('link/Certificate'),
+        
+    },
+    {
+        title: '网络组件',
+        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
+        iconUrl: '/images/home/bottom-3.png',
+        linkUrl: '/iot/link/type',
+        auth: menuPermission('link/Type'),
+    },
+    {
+        title: '设备接入网关',
+        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
+        iconUrl: '/images/home/bottom-4.png',
+        linkUrl: '/iot/link/accessConfig',
+        auth: menuPermission('link/AccessConfig'),
+    },
+    {
+        title: '日志管理',
+        details: '监控系统日志，及时处理系统异常。',
+        iconUrl: '/images/home/bottom-5.png',
+        linkUrl: '/iot/link/Log',
+        auth: menuPermission('Log'),
+        params: {
+            key: 'system',
+        }
+    },
+];
 
-import { opsBootConfig, opsStepDetails } from '../../modules/config';
 
 </script>
 

src/views/home/components/DeviceHome/index.vue

@@ -27,7 +27,99 @@ import DeviceCountCard from '../DeviceCountCard.vue';
 import PlatformPicCard from '../PlatformPicCard.vue';
 import StepCard from '../StepCard.vue';
 
-import { deviceBootConfig, deviceStepDetails } from '../../modules/config';
+import { usePermissionStore } from '@/store/permission';
+import { bootConfig, recommendList } from '../../index';
+
+// 按钮权限控制
+const hasPermission = usePermissionStore().hasPermission;
+const productPermission = (action: string) =>
+    hasPermission(`device/Product:${action}`);
+const devicePermission = (action: string) =>
+    hasPermission(`device/Instance:${action}`);
+const rulePermission = (action: string) =>
+    hasPermission(`rule-engine/Instance:${action}`);
+
+const deviceBootConfig: bootConfig[] = [
+    {
+        english: 'STEP1',
+        label: '创建产品',
+        link: '/iot/device/Product',
+        auth: productPermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP2',
+        label: '创建设备',
+        link: '/iot/device/Instance',
+        auth: devicePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        english: 'STEP3',
+        label: '规则引擎',
+        link: '/iot/rule-engine/Instance',
+        auth: rulePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+];
+const deviceStepDetails: recommendList[] = [
+    {
+        title: '创建产品',
+        details:
+            '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
+        iconUrl: '/images/home/bottom-4.png',
+        linkUrl: '/iot/device/Product',
+        auth: productPermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '配置产品接入方式',
+        details:
+            '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
+        iconUrl: '/images/home/bottom-1.png',
+        linkUrl: '/iot/device/Product/detail',
+        auth: productPermission('update'),
+        dialogTag: 'accessMethod',
+    },
+    {
+        title: '添加测试设备',
+        details: '添加单个设备，用于验证产品模型是否配置正确。',
+        iconUrl: '/images/home/bottom-5.png',
+        linkUrl: '/iot/device/Instance',
+        auth: devicePermission('add'),
+        params: {
+            save: true,
+        },
+    },
+    {
+        title: '功能调试',
+        details:
+            '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
+        iconUrl: '/images/home/bottom-2.png',
+        linkUrl: '/iot/device/Instance/detail',
+        // auth: devicePermission('update'),
+        auth: true,
+        dialogTag: 'funcTest',
+    },
+    {
+        title: '批量添加设备',
+        details: '批量添加同一产品下的设备',
+        iconUrl: '/images/home/bottom-3.png',
+        linkUrl: '/iot/device/Instance',
+        auth: devicePermission('import'),
+        params: {
+            import: true,
+        },
+    },
+];
 </script>
 
 <style lang="less" scoped>

src/views/home/index.vue

@@ -1,14 +1,10 @@
 <template>
-    <div class="container">
+    <div class="iot-home-container" v-loading="loading">
-        <div class="header"></div>
-        <div class="left"></div>
-        <div class="content iot-home-container" v-loading="loading">
         <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
         <DeviceHome v-else-if="currentView === 'device'" />
         <DevOpsHome v-else-if="currentView === 'ops'" />
         <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
     </div>
-    </div>
 </template>
 
 <script lang="ts" setup>
@@ -49,31 +45,12 @@ if (isNoCommunity) {
             isApiUser ? router.push('/system/api') : setCurrentView();
         }
     });
-}else setCurrentView()
+} else setCurrentView();
 </script>
 
 <style lang="less" scoped>
-.container {
+.iot-home-container {
     background: #f0f2f5;
-    width: 100vw;
-    min-height: 100vh;
-    display: flex;
-    flex-wrap: wrap;
-    .header {
-        height: 48px;
-        background: #7e1c1c;
-        width: 100vw;
-    }
-    .left {
-        background: #352d85;
-        width: 210px;
-        min-height: calc(100vh - 48px);
-    }
-    .content {
-        margin: 24px;
-        width: calc(100vw - 280px);
     overflow: hidden;
-        min-height: calc(100vh - 96px);
-    }
 }
 </style>

src/views/home/modules/config.ts

@@ -1,174 +0,0 @@
-// import {getImage} from '@/utils/comm'
-import { useMenuStore } from "@/store/menu";
-import { usePermissionStore } from "@/store/permission";
-import { recommendList, bootConfig } from "../index";
-
-
-// 按钮权限控制
-const hasPermission = usePermissionStore().hasPermission;
-const productPermission = (action: string) =>
-    hasPermission(`device/Product:${action}`);
-const devicePermission = (action: string) =>
-    hasPermission(`device/Instance:${action}`);
-const rulePermission = (action: string) =>
-    hasPermission(`rule-engine/Instance:${action}`);
-// 页面权限控制
-const menuPermission = useMenuStore().hasPermission
-
-
-// 物联网引导-数据
-export const deviceBootConfig: bootConfig[] = [
-    {
-        english: 'STEP1',
-        label: '创建产品',
-        link: '/iot/device/Product',
-        auth: productPermission('add'),
-        params: {
-            save: true,
-        },
-    },
-    {
-        english: 'STEP2',
-        label: '创建设备',
-        link: '/iot/device/Instance',
-        auth: devicePermission('add'),
-        params: {
-            save: true,
-        },
-    },
-    {
-        english: 'STEP3',
-        label: '规则引擎',
-        link: '/iot/rule-engine/Instance',
-        auth: rulePermission('add'),
-        params: {
-            save: true,
-        },
-    },
-];
-// 设备接入推荐步骤-数据
-export const deviceStepDetails: recommendList[] = [
-    {
-        title: '创建产品',
-        details:
-            '产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
-        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/device/Product',
-        auth: productPermission('add'),
-        params: {
-            save: true,
-        },
-    },
-    {
-        title: '配置产品接入方式',
-        details:
-            '通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
-        iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/iot/device/Product/detail',
-        auth: productPermission('update'),
-        dialogTag: 'accessMethod',
-    },
-    {
-        title: '添加测试设备',
-        details: '添加单个设备，用于验证产品模型是否配置正确。',
-        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/device/Instance',
-        auth: devicePermission('add'),
-        params: {
-            save: true,
-        },
-    },
-    {
-        title: '功能调试',
-        details:
-            '对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
-        iconUrl: '/images/home/bottom-2.png',
-        linkUrl: '/iot/device/Instance/detail',
-        // auth: devicePermission('update'),
-        auth: true,
-        dialogTag: 'funcTest',
-    },
-    {
-        title: '批量添加设备',
-        details: '批量添加同一产品下的设备',
-        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/device/Instance',
-        auth: devicePermission('import'),
-        params: {
-            import: true,
-        },
-    },
-];
-
-
-// 运维管理引导-数据
-export const opsBootConfig: bootConfig[] = [
-    {
-        english: 'STEP1',
-        label: '设备接入配置',
-        link: '/iot/link/accessConfig',
-        auth: menuPermission('link/accessConfig'),
-    },
-    {
-        english: 'STEP2',
-        label: '日志排查',
-        link: '/iot/link/Log',
-        auth: menuPermission('link/Log'),
-        params: {
-            key: 'system',
-        },
-    },
-    {
-        english: 'STEP3',
-        label: '实时监控',
-        link: '/iot/link/dashboard',
-        auth: menuPermission('link/dashboard'),
-        params: {
-            save: true,
-        },
-    },
-];
-// 运维管理推荐步骤-数据
-export const opsStepDetails: recommendList[] = [
-    {
-        title: '协议管理',
-        details:
-            '根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
-        iconUrl: '/images/home/bottom-1.png',
-        linkUrl: '/iot/link/protocol',
-        auth: menuPermission('link/Protocol'),
-        
-    },
-    {
-        title: '证书管理',
-        details: '统一维护平台内的证书，用于数据通信加密。',
-        iconUrl: '/images/home/bottom-6.png',
-        linkUrl: '/iot/link/Certificate',
-        auth: menuPermission('link/Certificate'),
-        
-    },
-    {
-        title: '网络组件',
-        details: '根据不同的传输类型配置平台底层网络组件相关参数。',
-        iconUrl: '/images/home/bottom-3.png',
-        linkUrl: '/iot/link/type',
-        auth: menuPermission('link/Type'),
-    },
-    {
-        title: '设备接入网关',
-        details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
-        iconUrl: '/images/home/bottom-4.png',
-        linkUrl: '/iot/link/accessConfig',
-        auth: menuPermission('link/AccessConfig'),
-    },
-    {
-        title: '日志管理',
-        details: '监控系统日志，及时处理系统异常。',
-        iconUrl: '/images/home/bottom-5.png',
-        linkUrl: '/iot/link/Log',
-        auth: menuPermission('Log'),
-        params: {
-            key: 'system',
-        }
-    },
-];

src/views/link/AccessConfig/index.vue

@@ -1,8 +1,328 @@
 <template>
-    <a-button type="primary" @click="handlAdd">新增</a-button>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search :columns="columns" target="search" @search="handleSearch" />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="tableRef"
+                model="CARD"
+                :columns="columns"
+                :request="list"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #card="slotProps">
+                    <CardBox
+                        :showStatus="true"
+                        :value="slotProps"
+                        :actions="getActions(slotProps)"
+                        v-bind="slotProps"
+                        :class="
+                            slotProps.state.value === 'disabled'
+                                ? 'tableCardDisabled'
+                                : 'tableCardEnabled'
+                        "
+                        :status="slotProps.state.value"
+                        :statusText="slotProps.state.text"
+                        :statusNames="{
+                            enabled: 'success',
+                            disabled: 'error',
+                        }"
+                    >
+                        <template #img>
+                            <slot name="img">
+                                <img :src="getImage('/device-access.png')" />
+                            </slot>
+                        </template>
+                        <template #content>
+                            <div class="card-item-content">
+                                <h3 class="card-item-content-title">
+                                    <a href="">{{ slotProps.name }}</a>
+                                </h3>
+                                <a-row class="card-item-content-box">
+                                    <a-col
+                                        :span="12"
+                                        v-if="slotProps.channelInfo"
+                                        class="card-item-content-text"
+                                    >
+                                        <div class="card-item-content-text">
+                                            {{ slotProps.channelInfo.name }}
+                                        </div>
+                                        <div
+                                            class="card-item-content-text"
+                                            v-if="
+                                                slotProps.channelInfo.addresses
+                                            "
+                                        >
+                                            <a-badge
+                                                :status="
+                                                    slotProps.channelInfo
+                                                        .addresses[0].health ===
+                                                    -1
+                                                        ? 'error'
+                                                        : 'success'
+                                                "
+                                            />
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.channelInfo
+                                                        .addresses[0].address
+                                                }}</template>
+                                                {{
+                                                    slotProps.channelInfo
+                                                        .addresses[0].address
+                                                }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                    <a-col
+                                        :span="12"
+                                        v-if="slotProps.protocolDetail"
+                                    >
+                                        <div class="card-item-content-text">
+                                            协议
+                                        </div>
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>{{
+                                                    slotProps.protocolDetail
+                                                        .name
+                                                }}</template>
+                                                {{
+                                                    slotProps.protocolDetail
+                                                        .name
+                                                }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                                <a-row>
+                                    <a-col :span="24">
+                                        <div class="card-item-content-text">
+                                            <a-tooltip>
+                                                <template #title>
+                                                    {{
+                                                        providersList.find(
+                                                            (item) =>
+                                                                item.id ===
+                                                                slotProps.provider,
+                                                        )?.description
+                                                    }}</template
+                                                >
+                                                {{
+                                                    providersList.find(
+                                                        (item) =>
+                                                            item.id ===
+                                                            slotProps.provider,
+                                                    )?.description
+                                                }}
+                                            </a-tooltip>
+                                        </div>
+                                    </a-col>
+                                </a-row>
+                            </div>
+                        </template>
+
+                        <template #actions="item">
+                            <a-tooltip
+                                v-bind="item.tooltip"
+                                :title="item.disabled && item.tooltip.title"
+                            >
+                                <a-popconfirm
+                                    v-if="item.popConfirm"
+                                    v-bind="item.popConfirm"
+                                    :disabled="item.disabled"
+                                >
+                                    <a-button :disabled="item.disabled">
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </a-popconfirm>
+                                <template v-else>
+                                    <a-button
+                                        :disabled="item.disabled"
+                                        @click="item.onClick"
+                                    >
+                                        <AIcon
+                                            type="DeleteOutlined"
+                                            v-if="item.key === 'delete'"
+                                        />
+                                        <template v-else>
+                                            <AIcon :type="item.icon" />
+                                            <span>{{ item.text }}</span>
+                                        </template>
+                                    </a-button>
+                                </template>
+                            </a-tooltip>
+                        </template>
+                    </CardBox>
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :status="statusMap.get(slotProps.state.value)"
+                    />
+                </template>
+            </JTable>
+        </a-card>
+    </div>
 </template>
 <script lang="ts" setup name="AccessConfigPage">
+import type { ActionsType } from '@/components/Table/index.vue';
+import { getImage } from '@/utils/comm';
+import { list, getProviders } from '@/api/link/accessConfig';
+import { message } from 'ant-design-vue';
+
+const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
+const params = ref<Record<string, any>>({});
+
+let providersList = ref([]);
+
+const statusMap = new Map();
+statusMap.set('enabled', 'success');
+statusMap.set('disabled', 'error');
+
+const columns = [
+    {
+        title: '名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+        // scopedSlots: true,
+    },
+    {
+        title: '网关类型',
+        dataIndex: 'provider',
+        key: 'provider',
+        search: {
+            type: 'select',
+            // options: providersList,
+            // options: getProvidersList
+            options: async () => {
+                const res = await getProviders();
+                return (res?.result || []).map((item) => ({
+                    lable: item.name,
+                    value: item.id,
+                }));
+            },
+        },
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '禁用',
+                    value: 'disabled',
+                },
+                {
+                    label: '正常',
+                    value: 'enabled',
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: async () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                okText: ' 确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    handlDelete(data.id);
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
+
+const getProvidersList = async () => {
+    const res = await getProviders();
+    providersList = res.result;
+};
+getProvidersList();
+
+const handlAdd = () => {
+    router.push('/link/accessConfig/detail/add');
+
+    // router.push('/link/certificate/detail/add/new');
+};
+
+const handlEdit = (id: string) => {
+    router.push(`/link/certificate/detail/edit/${id}`);
+};
+
+const handlDelete = async (id: string) => {
+    const res = await remove(id);
+    if (res.success) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    params.value = e;
+};
 
 // const handlAdd = () => {
 //     router.push({
@@ -12,7 +332,39 @@ const router = useRouter();
 //         },
 //     });
 // };
-const handlAdd = () => {
+// const handlAdd = () => {
-  router.push('/link/accessConfig/detail/add');
+//   router.push('/link/accessConfig/detail/add');
-}
+// }
 </script>
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+.tableCardDisabled {
+    width: 100%;
+    background: url('/images/access-config-diaabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.tableCardEnabled {
+    width: 100%;
+    background: url('/images/access-config-enabled.png') no-repeat;
+    background-size: 100% 100%;
+}
+
+.card-item-content {
+    min-height: 100px;
+
+    .card-item-content-box {
+        min-height: 50px;
+    }
+    .card-item-content-text {
+        color: rgba(0, 0, 0, 0.75);
+        font-size: 12px;
+        overflow: hidden; //超出的文本隐藏
+        text-overflow: ellipsis; //溢出用省略号显示
+        white-space: nowrap; //溢出不换行
+    }
+}
+</style>

src/views/link/Certificate/Detail/index.vue

@@ -60,6 +60,7 @@
 
                     <a-form-item>
                         <a-button
+                            v-if="type !== 'view'"
                             class="form-submit"
                             html-type="submit"
                             type="primary"
@@ -97,16 +98,20 @@ import { message, Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import CertificateFile from './CertificateFile.vue';
 import type { UploadChangeParam } from 'ant-design-vue';
-import { save } from '@/api/link/certificate';
+import { save, update, queryDetail } from '@/api/link/certificate';
+import { FormDataType, TypeObjType } from '../type';
 
 const router = useRouter();
+const route = useRoute();
+const type = route.params.type as string;
+const id = route.params.id as string;
 
 const useForm = Form.useForm;
 
 const fileLoading = ref(false);
 const loading = ref(false);
 
-const formData = reactive({
+const formData = ref<FormDataType>({
     type: 'common',
     name: '',
     configs: {
@@ -137,9 +142,10 @@ const { resetFields, validate, validateInfos } = useForm(
 const onSubmit = () => {
     validate()
         .then(async (res) => {
-            const params = toRaw(formData);
+            const params = toRaw(formData.value);
             loading.value = true;
-            const response = await save(params);
+            const response =
+                type === 'edit' ? await update(params) : await save(params);
             if (response.status === 200) {
                 message.success('操作成功');
                 router.push('/link/certificate');
@@ -156,10 +162,28 @@ const handleChange = (info: UploadChangeParam) => {
     if (info.file.status === 'done') {
         message.success('上传成功！');
         const result = info.file.response?.result;
-        formData.configs.cert = result;
+        formData.value.configs.cert = result;
         fileLoading.value = false;
     }
 };
+
+const detail = async (id: string) => {
+    if (type !== 'add') {
+        loading.value = true;
+        const res = await queryDetail(id);
+        if (res.success) {
+            const result = res.result as FormDataType;
+            const type = result.type.value as TypeObjType;
+            formData.value = {
+                ...result,
+                type,
+            };
+        }
+        loading.value = false;
+    }
+};
+
+detail(id);
 </script>
 
 <style lang="less" scoped>

src/views/link/Certificate/index.vue

@@ -1,14 +1,196 @@
 <template>
-  <a-button type="primary" @click="handlAdd">新增</a-button>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search
+                :columns="columns"
+                target="search"
+                @search="handleSearch"
+            />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="tableRef"
+                model="TABLE"
+                :columns="columns"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #type="slotProps">
+                    <span>{{ slotProps.type.text }}</span>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps)"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+            </JTable>
+        </a-card>
+    </div>
 </template>
 <script lang="ts" setup name="CertificatePage">
+import type { ActionsType } from '@/components/Table/index.vue';
+import { save, query, remove } from '@/api/link/certificate';
+import { message } from 'ant-design-vue';
 
+const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
+const params = ref<Record<string, any>>({});
 
+const columns = [
+    {
+        title: '证书标准',
+        dataIndex: 'type',
+        key: 'type',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '证书标准',
+                    value: 'common',
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '证书名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: async () => {
+                handlEye(data.id);
+            },
+        },
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: async () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                okText: ' 确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    handlDelete(data.id);
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
 
 const handlAdd = () => {
-  router.push('/link/certificate/detail/add');
+    router.push('/link/certificate/detail/add/new');
+};
 
-}
+const handlEye = (id: string) => {
+    router.push(`/link/certificate/detail/view/${id}`);
+};
 
+const handlEdit = (id: string) => {
+    router.push(`/link/certificate/detail/edit/${id}`);
+};
+
+const handlDelete = async (id: string) => {
+    const res = await remove(id);
+    if (res.success) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    console.log(1211, e);
+
+    params.value = e;
+};
 </script>
+
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>

src/views/link/Certificate/type.d.ts

@@ -0,0 +1,19 @@
+
+export interface TypeObjType = {
+    text: string;
+    value: string;
+};
+export type FormDataType = {
+    description: string;
+    name: string;
+    type: string | TypeObjType;
+    configs: {
+        cert: string;
+        key: string;
+    };
+    id?: string;
+    format?: string;
+    mode?: object;
+    creatorId?: string;
+    createTime?: number;
+};

src/views/notice/Config/index.vue

@@ -77,20 +77,35 @@
                             v-bind="item.tooltip"
                             :title="item.disabled && item.tooltip.title"
                         >
+                            <a-dropdown
+                                placement="bottomRight"
+                                v-if="item.key === 'others'"
+                            >
+                                <a-button>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
+                                </a-button>
+                                <template #overlay>
+                                    <a-menu>
+                                        <a-menu-item
+                                            v-for="(o, i) in item.children"
+                                            :key="i"
+                                        >
+                                            <a-button type="link" @click="o.onClick">
+                                                <AIcon :type="o.icon" />
+                                                <span>{{ o.text }}</span>
+                                            </a-button>
+                                        </a-menu-item>
+                                    </a-menu>
+                                </template>
+                            </a-dropdown>
                             <a-popconfirm
-                                v-if="item.popConfirm"
+                                v-else-if="item.key === 'delete'"
                                 v-bind="item.popConfirm"
                                 :disabled="item.disabled"
                             >
                                 <a-button :disabled="item.disabled">
-                                    <AIcon
+                                    <AIcon type="DeleteOutlined" />
-                                        type="DeleteOutlined"
-                                        v-if="item.key === 'delete'"
-                                    />
-                                    <template v-else>
-                                        <AIcon :type="item.icon" />
-                                        <span>{{ item.text }}</span>
-                                    </template>
                                 </a-button>
                             </a-popconfirm>
                             <template v-else>
@@ -98,14 +113,8 @@
                                     :disabled="item.disabled"
                                     @click="item.onClick"
                                 >
-                                    <AIcon
-                                        type="DeleteOutlined"
-                                        v-if="item.key === 'delete'"
-                                    />
-                                    <template v-else>
                                     <AIcon :type="item.icon" />
                                     <span>{{ item.text }}</span>
-                                    </template>
                                 </a-button>
                             </template>
                         </a-tooltip>
@@ -351,6 +360,59 @@ const getActions = (
                 currentConfig.value = data;
             },
         },
+        // {
+        //     key: 'others',
+        //     text: '其他',
+        //     children: [
+        //         {
+        //             key: 'debug',
+        //             text: '导出',
+        //             tooltip: {
+        //                 title: '导出',
+        //             },
+        //             icon: 'ArrowDownOutlined',
+        //             onClick: () => {
+        //                 downloadObject(data, `通知配置`);
+        //             },
+        //         },
+        //         {
+        //             key: 'sync',
+        //             text: '同步用户',
+        //             tooltip: {
+        //                 title: '同步用户',
+        //             },
+        //             icon: 'TeamOutlined',
+        //             onClick: () => {
+        //                 syncVis.value = true;
+        //                 currentConfig.value = data;
+        //             },
+        //         },
+        //     ],
+        // },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                onConfirm: async () => {
+                    const resp = await ConfigApi.del(data.id);
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        configRef.value?.reload();
+                    } else {
+                        message.error('操作失败！');
+                    }
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+
+    const others: ActionsType = {
+        key: 'others',
+        text: '其他',
+        icon: 'EllipsisOutlined',
+        children: [
             {
                 key: 'debug',
                 text: '导出',
@@ -374,27 +436,26 @@ const getActions = (
                     currentConfig.value = data;
                 },
             },
-        {
+        ],
-            key: 'delete',
+    };
-            text: '删除',
+
-            popConfirm: {
+    if (type === 'card') {
-                title: '确认删除?',
+        if (
-                onConfirm: async () => {
+            data.provider !== 'dingTalkMessage' &&
-                    const resp = await ConfigApi.del(data.id);
+            data.provider !== 'corpMessage'
-                    if (resp.status === 200) {
+        )
-                        message.success('操作成功！');
+            others.children.splice(1, 1);
-                        configRef.value?.reload();
+        actions.splice(actions.length - 1, 0, others);
-                    } else {
-                        message.error('操作失败！');
-                    }
-                },
-            },
-            icon: 'DeleteOutlined',
-        },
-    ];
-    if (data.provider === 'dingTalkMessage' || data.provider === 'corpMessage')
         return actions;
-    return actions.filter((i: ActionsType) => i.key !== 'sync');
+    } else {
+        if (
+            data.provider !== 'dingTalkMessage' &&
+            data.provider !== 'corpMessage'
+        )
+            others.children.splice(1, 1);
+        actions.splice(actions.length - 1, 0, ...others.children);
+        return actions;
+    }
 };
 </script>
 <style lang="less" scoped>

src/views/system/Menu/Detail/BasicInfo.vue

@@ -2,7 +2,7 @@
     <div class="basic-info-container">
         <a-card>
             <h3>基本信息</h3>
-            <a-form :model="form.data" class="basic-form">
+            <a-form ref="basicFormRef" :model="form.data" class="basic-form">
                 <div class="row" style="display: flex">
                     <a-form-item
                         label="菜单图标"
@@ -16,13 +16,20 @@
                         style="flex: 0 0 186px"
                     >
                         <div class="icon-upload has-icon" v-if="form.data.icon">
-                            <svg aria-hidden="true">
+                            <AIcon
-                                <use :xlinkHref="`#${form.data.icon}`" />
+                                :type="form.data.icon"
-                            </svg>
+                                style="font-size: 90px"
-                            <span class="mark">点击修改</span>
+                            />
+                            <span class="mark" @click="dialog.openDialog"
+                                >点击修改</span
+                            >
                         </div>
 
-                        <div v-else class="icon-upload no-icon">
+                        <div
+                            v-else
+                            @click="dialog.openDialog"
+                            class="icon-upload no-icon"
+                        >
                             <span>
                                 <plus-outlined style="font-size: 30px" />
                                 <p>点击选择图标</p>
@@ -97,7 +104,11 @@
         </a-card>
         <a-card>
             <h3>权限配置</h3>
-            <a-form :model="form.data" class="basic-form permiss-form">
+            <a-form
+                ref="permissFormRef"
+                :model="form.data"
+                class="basic-form permiss-form"
+            >
                 <a-form-item name="accessSupport" required>
                     <template #label>
                         <span style="margin-right: 3px">数据权限控制</span>
@@ -174,17 +185,19 @@
                     </a-form-item>
                 </a-form-item>
                 <a-form-item label="权限">
-                    <a-input
+                    <PermissChoose v-model:value="form.data.permissions" />
-                        v-model:value="form.data.permissions"
-                        style="width: 300px"
-                        allowClear
-                        placeholder="请输入权限名称"
-                    />
                 </a-form-item>
             </a-form>
 
-            <a-button type="primary" @click="clickSave">保存</a-button>
+            <a-button type="primary" @click="clickSave" v-loading="saveLoading"
+                >保存</a-button
+            >
         </a-card>
+
+        <!-- 弹窗 -->
+        <div class="dialogs">
+            <ChooseIconDialog ref="ChooseIconRef" @confirm="dialog.confirm" />
+        </div>
     </div>
 </template>
 
@@ -194,20 +207,28 @@ import {
     QuestionCircleFilled,
     QuestionCircleOutlined,
 } from '@ant-design/icons-vue';
+import { FormInstance, message } from 'ant-design-vue';
+import ChooseIconDialog from '../components/ChooseIconDialog.vue';
+import PermissChoose from '../components/PermissChoose.vue';
+
 import {
     getMenuTree_api,
     getAssetsType_api,
-    getMenuDetail_api,
+    getMenuInfo_api,
+    saveMenuInfo_api,
+    addMenuInfo_api,
 } from '@/api/system/menu';
-import { exportPermission_api } from '@/api/system/permission';
 
 const route = useRoute();
+const router = useRouter();
 const routeParams = {
-    id: route.params.id === ':id' ? '' : (route.params.id as string),
+    id: route.params.id === ':id' ? undefined : (route.params.id as string),
     ...route.query,
     url: route.query.basePath,
 };
 
+const basicFormRef = ref<FormInstance>();
+const permissFormRef = ref<FormInstance>();
 const form = reactive({
     data: {
         name: '',
@@ -215,8 +236,8 @@ const form = reactive({
         sortIndex: '',
         icon: '',
         describe: '',
-        permissions: '',
+        permissions: [],
-        accessSupport: '',
+        accessSupport: 'unsupported',
         assetType: undefined,
         indirectMenus: [],
         ...routeParams,
@@ -229,23 +250,63 @@ const form = reactive({
     init: () => {
         // 获取菜单详情
         routeParams.id &&
-            getMenuDetail_api(routeParams.id).then((resp) => {
+            getMenuInfo_api(routeParams.id).then((resp) => {
                 console.log('菜单详情', resp);
             });
-        // 获取权限列表
-        // exportPermission_api()
         // 获取关联菜单
         getMenuTree_api({ paging: false }).then((resp) => {
             console.log('关联菜单', resp);
         });
         // 获取资产类型
-        getAssetsType_api().then((resp:any) => {
+        getAssetsType_api().then((resp: any) => {
-            form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
+            form.assetsType = resp.result.map((item: any) => ({
+                label: item.name,
+                value: item.id,
+            }));
         });
     },
 });
 form.init();
-const clickSave = () => {};
+
+const ChooseIconRef = ref<any>(null);
+const dialog = {
+    openDialog: () => {
+        ChooseIconRef.value && ChooseIconRef.value.openDialog();
+    },
+    confirm: (typeStr: string) => {
+        form.data.icon = typeStr || form.data.icon;
+    },
+};
+const saveLoading = ref<boolean>(false);
+const clickSave = () => {
+    if (!basicFormRef || !permissFormRef) return;
+    Promise.all([
+        basicFormRef.value?.validate(),
+        permissFormRef.value?.validate(),
+    ])
+        .then(() => {
+            const api = routeParams.id ? saveMenuInfo_api : addMenuInfo_api;
+            saveLoading.value = true;
+            api(form.data)
+                .then((resp: any) => {
+                    if (resp.status === 200) {
+                        message.success('操作成功！');
+                        // 新增后刷新页面，编辑则不需要
+                        if (!routeParams.id) {
+                            router.push(
+                                `/system/Menu/detail/${resp.result.id}`,
+                            );
+                            routeParams.id = resp.result.id;
+                            form.init();
+                        }
+                    } else {
+                        message.error('操作失败！');
+                    }
+                })
+                .finally(() => (saveLoading.value = false));
+        })
+        .catch((err) => {});
+};
 
 type formType = {
     name: string;
@@ -253,7 +314,7 @@ type formType = {
     url: string;
     sortIndex: string;
     icon: string;
-    permissions: string;
+    permissions: any[];
     describe: string;
     accessSupport: string;
     assetType: string | undefined;
@@ -321,6 +382,25 @@ type assetType = {
                         }
                     }
                     .has-icon {
+                        position: relative;
+                        text-align: center;
+
+                        .mark {
+                            position: absolute;
+                            left: 0;
+                            top: 0;
+                            display: none;
+                            background-color: rgba(0, 0, 0, 0.35);
+                            color: #fff;
+                            width: 100%;
+                            height: 100%;
+                            font-size: 16px;
+                            align-items: center;
+                            justify-content: center;
+                        }
+                        &:hover .mark {
+                            display: flex;
+                        }
                     }
                     .no-icon {
                         background-color: rgba(0, 0, 0, 0.06);

src/views/system/Menu/components/ChooseIconDialog.vue

@@ -0,0 +1,100 @@
+<template>
+    <a-modal
+        v-model:visible="dialog.visible"
+        title="菜单图标"
+        width="800px"
+        @ok="dialog.handleOk"
+    >
+        <a-radio-group v-model:value="selected" class="radio">
+            <a-radio-button
+                v-for="typeStr in iconKeys"
+                :value="typeStr"
+                :class="{ active: selected === typeStr }"
+            >
+                <a-icon :type="typeStr" />
+            </a-radio-button>
+        </a-radio-group>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+const emits = defineEmits(['confirm']);
+const iconKeys = [
+    'EyeOutlined',
+    'EditOutlined',
+    'PlusOutlined',
+    'DeleteOutlined',
+    'CheckCircleOutlined',
+    'StopOutlined',
+    'CheckOutlined',
+    'CloseOutlined',
+    'DownOutlined',
+    'ImportOutlined',
+    'ExportOutlined',
+    'SyncOutlined',
+    'ExclamationCircleOutlined',
+    'UploadOutlined',
+    'LoadingOutlined',
+    'PlusCircleOutlined',
+    'QuestionCircleOutlined',
+    'DisconnectOutlined',
+    'LinkOutlined',
+    'PoweroffOutlined',
+    'SwapOutlined',
+    'BugOutlined',
+    'BarsOutlined',
+    'ArrowDownOutlined',
+    'SmallDashOutlined',
+    'TeamOutlined',
+    'MenuUnfoldOutlined',
+    'MenuFoldOutlined',
+    'QuestionCircleOutlined',
+    'InfoCircleOutlined',
+    'SearchOutlined',
+];
+
+const dialog = reactive({
+    visible: false,
+    handleOk: () => {
+        emits('confirm', selected.value);
+        dialog.changeVisible();
+        selected.value = '';
+    },
+    changeVisible: (show?: boolean) => {
+        dialog.visible = show === undefined ? !dialog.visible : show;
+    },
+});
+
+const selected = ref<string>('');
+
+// 将打开弹窗的操作暴露给父组件
+defineExpose({
+    openDialog: dialog.changeVisible,
+});
+</script>
+
+<style lang="less" scoped>
+.radio {
+    display: grid;
+    grid-gap: 20px;
+    grid-template-columns: repeat(6, 1fr);
+    max-height: 500px;
+    overflow-y: auto;
+
+    .ant-radio-button-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: 100px;
+        font-size: 40px;
+        border: 2px solid #efefef;
+        border-radius: 2px;
+        cursor: pointer;
+
+        &.active {
+            color: #415ed1;
+            border-color: #415ed1;
+        }
+    }
+}
+</style>

src/views/system/Menu/components/PermissChoose.vue

@@ -0,0 +1,47 @@
+<template>
+    <div class="permission-choose-container">
+        <a-input
+            v-model:value="searchValue"
+            style="width: 300px"
+            allowClear
+            placeholder="请输入权限名称"
+        />
+
+
+
+    </div>
+</template>
+
+<script setup lang="ts">
+import { exportPermission_api } from '@/api/system/permission';
+
+const props = defineProps({
+    value: Array,
+});
+const searchValue = ref<string>('');
+
+const permission = reactive({
+    list: [] as permissionType[],
+    // 获取权限列表
+    getList: () => {
+        
+        exportPermission_api({ paging: false }).then((resp) => {
+            permission.list = resp.result as permissionType[]
+        });
+    },
+});
+
+permission.getList()
+
+
+
+
+type permissionType = {
+    id: string;
+    name: string;
+    actions: object[]
+}
+
+</script>
+
+<style scoped></style>

src/views/system/Menu/index.vue

@@ -208,7 +208,8 @@ const table = reactive({
         };
         const resp: any = await getMenuTree_api(params);
         const lastItem = resp.result[resp.result.length - 1];
-        table.total == lastItem ? lastItem.sortIndex + 1 : 1;
+        table.total = lastItem ? lastItem.sortIndex + 1 : 1;
+        
         return {
             code: resp.message,
             result: {
@@ -225,7 +226,7 @@ const table = reactive({
         router.push(
             `/system/Menu/detail/${row.id || ':id'}?pid=${
                 row.pid || ''
-            }&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
+            }&basePath=${row.basePath || ''}&sortIndex=${table.total}`,
         );
     },
     // 删除