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

src/api/iot-card/cardManagement.ts

@@ -97,4 +97,22 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
  * @param format 类型 xlsx、csv
  * @param params
  */
-export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
+export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
+
+/**
+ * 验证iccid
+ * @param id
+ */
+export const validateId = (id: string) => server.get(`/network/card/id/_validate?id=${id}`);
+
+/**
+ * 新增物联卡
+ * @param data
+ */
+export const add = (data: any) => server.patch(`/network/card`, data);
+
+/**
+ * 编辑物联卡
+ * @param data
+ */
+export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);

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/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,25 +121,29 @@ watch(
   { immediate: true }
 )
 
-watchEffect(() => {
+watch(
-  if (props.visible) {
+  [props.visible, props.type],
-    loading.value = true
+  () => {
-    const { id } = route.params
+    if (props.visible) {
-    if (props.type === 'device') {
+      loading.value = true
-      detail(id as string).then((resp) => {
+      const { id } = route.params
-        loading.value = false
+      if (props.type === 'device') {
-        instanceStore.setCurrent(resp.result)
+        detail(id as string).then((resp) => {
-        value.value = resp.result.metadata
+          loading.value = false
-      });
+          instanceStore.setCurrent(resp.result)
-    } else {
+          value.value = resp.result.metadata
-      productDetail(id as string).then((resp) => {
+        });
-        loading.value = false
+      } else {
-        // productStore.setCurrent(resp.result)
+        productDetail(id as string).then((resp) => {
-        value.value = resp.result.metadata
+          loading.value = false
-      });
+          // productStore.setCurrent(resp.result)
+          value.value = resp.result.metadata
+        });
+      }
     }
-  }
+  },
-})
+  { 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,13 +1,9 @@
 <template>
-    <div class="container">
+    <div class="iot-home-container" v-loading="loading">
-        <div class="header"></div>
+        <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
-        <div class="left"></div>
+        <DeviceHome v-else-if="currentView === 'device'" />
-        <div class="content iot-home-container" v-loading="loading">
+        <DevOpsHome v-else-if="currentView === 'ops'" />
-            <InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
+        <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
-            <DeviceHome v-else-if="currentView === 'device'" />
-            <DevOpsHome v-else-if="currentView === 'ops'" />
-            <ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
-        </div>
     </div>
 </template>
 
@@ -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;
+    overflow: hidden;
-    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/iot-card/CardManagement/Save.vue

@@ -0,0 +1,246 @@
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="600px"
+        :visible="true"
+        :title="type === 'add' ? '新增' : '编辑'"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div style="margin-top: 10px">
+            <a-form
+                :layout="'vertical'"
+                ref="formRef"
+                :rules="rules"
+                :model="modelRef"
+            >
+                <a-form-item label="卡号" name="id">
+                    <a-input
+                        v-model:value="modelRef.id"
+                        placeholder="请输入卡号"
+                        :disabled="type === 'edit'"
+                    ></a-input>
+                </a-form-item>
+                <a-form-item name="iccId">
+                    <template #label>
+                        <span>
+                            ICCID
+                            <a-tooltip title="IC卡的唯一识别号码">
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px"
+                                />
+                            </a-tooltip>
+                        </span>
+                    </template>
+                    <a-input
+                        v-model:value="modelRef.iccId"
+                        placeholder="请输入ICCID"
+                        :disabled="type === 'edit'"
+                    />
+                </a-form-item>
+                <a-form-item label="平台对接" name="platformConfigId">
+                    <a-select
+                        showSearch
+                        :filter-option="filterOption"
+                        :disabled="type === 'edit'"
+                        allowClear
+                        :options="platformConfigList"
+                        v-model:value="modelRef.platformConfigId"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item label="运营商" name="operatorName">
+                    <a-select
+                        allowClear
+                        showSearch
+                        :filter-option="filterOption"
+                        :options="OperatorList"
+                        v-model:value="modelRef.operatorName"
+                        placeholder="请选择运营商"
+                    >
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="类型" name="cardType">
+                    <a-select
+                        allowClear
+                        showSearch
+                        :disabled="type === 'edit'"
+                        :filter-option="filterOption"
+                        :options="TypeList"
+                        v-model:value="modelRef.cardType"
+                        placeholder="请选择类型"
+                    >
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="modelRef.describe"
+                        placeholder="请输入说明"
+                        showCount
+                        :maxlength="200"
+                    />
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import {
+    queryPlatformNoPage,
+    validateId,
+    add,
+    edit,
+} from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+import { OperatorList, TypeList } from '@/views/iot-card/data';
+
+const emit = defineEmits(['change']);
+const props = defineProps({
+    type: {
+        type: String,
+    },
+    data: {
+        type: Object,
+        default: undefined,
+    },
+});
+
+const btnLoading = ref<boolean>(false);
+const platformConfigList = ref<Record<string, any>[]>([]);
+
+const formRef = ref();
+
+const modelRef = reactive({
+    id: '',
+    iccId: '',
+    platformConfigId: undefined,
+    operatorName: undefined,
+    cardType: undefined,
+    describe: '',
+});
+
+const isValidateId = async (id: string) => {
+    const res: any = await validateId(id);
+    if (res.status === 200) {
+        if (res.result?.passed) {
+            return '';
+        } else {
+            return res.result.reason;
+        }
+    } else {
+        return '请输入输入正确的ICCID';
+    }
+};
+
+const vailIccId = async (_: Record<string, any>, value: string) => {
+    if (value) {
+        const validateId =
+            props.type === 'add' ? await isValidateId(value) : '';
+        if (validateId === '') {
+            return Promise.resolve();
+        } else {
+            return Promise.reject(new Error(`${validateId}`));
+        }
+        // } else {
+        //     return Promise.reject(new Error('请输入卡号'));
+    }
+};
+
+const rules = {
+    id: [
+        {
+            required: true,
+            message: '请输入卡号',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+        {
+            validator: vailIccId,
+            trigger: 'blur',
+        },
+    ],
+    iccId: [
+        {
+            required: true,
+            message: '请输入ICCID',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    platformConfigId: [
+        {
+            required: true,
+            message: '请选择平台对接',
+        },
+    ],
+    cardType: [
+        {
+            required: true,
+            message: '请选择类型',
+        },
+    ],
+};
+
+const filterOption = (input: string, option: any) => {
+    return (
+        option.componentOptions.children[0].text
+            .toLowerCase()
+            .indexOf(input.toLowerCase()) >= 0
+    );
+};
+
+watch(
+    () => props.data,
+    (newValue) => {
+        queryPlatformNoPage({
+            paging: false,
+            sorts: [{ name: 'createTime', order: 'desc' }],
+            terms: [{ column: 'state', value: 'enabled' }],
+        }).then((resp: any) => {
+            if (resp.status === 200) {
+                platformConfigList.value = resp.result.map((item: any) => ({
+                    label: item.name,
+                    value: item.id,
+                }));
+            }
+        });
+        Object.assign(modelRef, newValue);
+    },
+    { immediate: true, deep: true },
+);
+
+const handleCancel = () => {
+    emit('change', false);
+    formRef.value.resetFields();
+};
+
+const handleOk = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            btnLoading.value = true;
+            const resp =
+                props.type === 'add'
+                    ? await add(toRaw(modelRef))
+                    : await edit(toRaw(modelRef));
+            btnLoading.value = false;
+            if (resp.status === 200) {
+                message.success('操作成功！');
+                emit('change', true);
+                formRef.value.resetFields();
+            }
+        })
+        .catch((err: any) => {
+            console.log('error', err);
+        });
+};
+</script>

src/views/iot-card/CardManagement/index.vue

@@ -151,11 +151,18 @@
                             <span class="flow-text">
                                 {{ slotProps.totalFlow }}
                             </span>
-                            <span class="card-item-content-text"> M 使用流量</span>
+                            <span class="card-item-content-text">
+                                M 使用流量</span
+                            >
                         </div>
                         <div v-else>
                             <div class="progress-text">
-                                <div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
+                                <div>
+                                    {{
+                                        slotProps.totalFlow - slotProps.usedFlow
+                                    }}
+                                    %
+                                </div>
                                 <div class="card-item-content-text">
                                     总共 {{ slotProps.totalFlow }} M
                                 </div>
@@ -163,7 +170,9 @@
                             <a-progress
                                 :strokeColor="'#ADC6FF'"
                                 :showInfo="false"
-                                :percent="slotProps.totalFlow - slotProps.usedFlow"
+                                :percent="
+                                    slotProps.totalFlow - slotProps.usedFlow
+                                "
                             />
                         </div>
                     </template>
@@ -307,6 +316,13 @@
             :cardId="cardId"
             @change="bindDevice"
         />
+        <!-- 新增、编辑 -->
+        <Save
+            v-if="visible"
+            :type="saveType"
+            :data="current"
+            @change="saveChange"
+        />
     </div>
 </template>
 
@@ -333,6 +349,7 @@ import { getImage } from '@/utils/comm';
 import BindDevice from './BindDevice.vue';
 import Import from './Import.vue';
 import Export from './Export.vue';
+import Save from './Save.vue';
 
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
@@ -344,6 +361,7 @@ const exportVisible = ref<boolean>(false);
 const importVisible = ref<boolean>(false);
 const cardId = ref<any>();
 const current = ref<Partial<CardManagement>>({});
+const saveType = ref<string>('');
 
 const columns = [
     {
@@ -504,6 +522,11 @@ const getActions = (
                 title: '编辑',
             },
             icon: 'EditOutlined',
+            onClick: () => {
+                visible.value = true;
+                current.value = data;
+                saveType.value = 'edit';
+            },
         },
         {
             key: 'view',
@@ -651,10 +674,27 @@ const handleView = (id: string) => {
 /**
  * 新增
  */
-const handleAdd = () => {};
+const handleAdd = () => {
+    visible.value = true;
+    current.value = {};
+    saveType.value = 'add';
+};
+
+/**
+ * 新增、编辑关闭弹窗
+ * @param val 加载表格
+ */
+const saveChange = (val: any) => {
+    visible.value = false;
+    current.value = {};
+    if (val) {
+        cardManageRef.value?.reload();
+    }
+};
 
 /**
  * 绑定设备关闭窗口
+ * @param val
  */
 const bindDevice = (val: boolean) => {
     bindDeviceVisible.value = false;

src/views/iot-card/data.ts

@@ -0,0 +1,76 @@
+import { getImage } from '@/utils/comm';
+
+// 平台类型
+export const PlatformTypeList = [
+  {
+    label: '移动OneLink',
+    value: 'OneLinkPB',
+    imgUrl: getImage('/iot-card/onelink.png'),
+  },
+  {
+    label: '电信Ctwing',
+    value: 'CtwingCmp',
+    imgUrl: getImage('/iot-card/ctwingcmp.png'),
+  },
+  {
+    label: '联通Unicom',
+    value: 'UnicomCmp',
+    imgUrl: getImage('/iot-card/unicom.png'),
+  },
+];
+
+//运营商
+export const OperatorList = [
+  {
+    label: '移动',
+    value: '移动',
+  },
+  {
+    label: '电信',
+    value: '电信',
+  },
+  {
+    label: '联通',
+    value: '联通',
+  },
+];
+
+// 类型
+export const TypeList = [
+  {
+    label: '年卡',
+    value: 'year',
+  },
+  {
+    label: '季卡',
+    value: 'season',
+  },
+  {
+    label: '月卡',
+    value: 'month',
+  },
+  {
+    label: '其他',
+    value: 'other',
+  },
+];
+
+// 支付方式
+export const PaymentMethod = [
+  {
+    label: '支付宝手机网站支付',
+    value: 'ALIPAY_WAP',
+  },
+  {
+    label: '支付宝网页及时到账支付',
+    value: 'ALIPAY_WEB',
+  },
+  {
+    label: '微信公众号支付',
+    value: 'WEIXIN_JSAPI',
+  },
+  {
+    label: '微信扫码支付',
+    value: 'WEIXIN_NATIVE',
+  },
+];

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}`,
         );
     },
     // 删除