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

src/api/device/instance.ts

@@ -120,3 +120,50 @@ export const update = (data: Partial<DeviceInstance>) => data.id ? server.patch(
  * @returns 
  */
 export const getConfigMetadata = (id: string) => server.get(`/device-instance/${id}/config-metadata`)
+
+/**
+ * 断开连接
+ * @param id 设备id
+ * @returns 
+ */
+export const _disconnect = (id: string) => server.post(`/device-instance/${id}/disconnect`)
+
+/**
+ * 查询用户列表
+ * @returns 
+ */
+export const queryUserListNoPaging = () => server.post(`/user/_query/no-paging`, {
+  paging: false,
+  sorts: [{name: 'name', order: "asc"}]
+})
+
+/**
+ * 保存设备关系
+ * @param id 设备id
+ * @param data 
+ * @returns 
+ */
+export const saveRelations = (id: string, data: Record<string, any>) => server.patch(`/device/instance/${id}/relations`, data)
+
+/**
+ * 修改标签
+ * @param id 设备id
+ * @param data 
+ * @returns 
+ */
+export const saveTags = (id: string, data: Record<string, any>) => server.patch(`/device/instance/${id}/tag`, data)
+
+/**
+ * 删除标签
+ * @param deviceId 设备id
+ * @param id 标签id
+ * @returns 
+ */
+export const delTags = (deviceId: string, id: string) => server.remove(`/device/instance/${deviceId}/tag/${id}`)
+
+/**
+ * 恢复默认配置
+ * @param deviceId 设备id
+ * @returns 
+ */
+export const configurationReset = (deviceId: string) => server.put(`/device-instance/${deviceId}/configuration/_reset`)

src/api/iot-card/cardManagement.ts

@@ -97,4 +97,28 @@ 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);
+
+/**
+ * 根据id查看详情
+ * @param id
+ */
+export const queryDetail = (id: any) => server.get(`/network/card/${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/MonacoEditor/index.vue

@@ -50,6 +50,7 @@ onMounted(() => {
         automaticLayout: true,
         scrollBeyondLastLine: false,
         theme: props.theme, // 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)
+        formatOnPaste: true,
     });
 
     instance.onDidChangeModelContent(() => {

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{
@@ -332,7 +333,7 @@ const JTable = defineComponent<JTableProps>({
                             total={total.value}
                             showQuickJumper={false}
                             showSizeChanger={true}
-                            current={pageIndex.value}
+                            current={pageIndex.value + 1}
                             pageSize={pageSize.value}
                             pageSizeOptions={['12', '24', '48', '60', '100']}
                             showTotal={(num) => {
@@ -344,7 +345,7 @@ const JTable = defineComponent<JTableProps>({
                                 handleSearch({
                                     ...props.params,
                                     pageSize: size,
-                                    pageIndex: pageSize.value === size ? page : 0
+                                    pageIndex: pageSize.value === size ? (page ? page - 1 : 0) : 0
                                 })
                             }}
                         />

src/router/menu.ts

@@ -145,6 +145,14 @@ export default [
       path: '/iot-card/CardManagement',
       component: () => import('@/views/iot-card/CardManagement/index.vue')
     },
+    {
+      path: '/iot-card/CardManagement/Detail',
+      component: () => import('@/views/iot-card/CardManagement/Detail/index.vue')
+    },
+    {
+      path: '/iot-card/Recharge',
+      component: () => import('@/views/iot-card/Recharge/index.vue')
+    },
     // 北向输出
     {
         path: '/northbound/DuerOS',

src/views/device/Instance/Detail/Info/components/Config/index.vue

@@ -4,8 +4,12 @@
             <div style="font-size: 16px; font-weight: 700">配置</div>
             <a-space>
                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
-               <a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
-               <a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+               <a-popconfirm title="确认重新应用该配置？" @confirm="deployBtn">
+                    <a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+               </a-popconfirm>
+               <a-popconfirm title="确认恢复默认配置？" @confirm="resetBtn">
+                    <a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+               </a-popconfirm>
             </a-space>
         </div>
         <a-descriptions bordered size="small" v-for="i in config" :key="i.name">
@@ -28,7 +32,8 @@
 <script lang="ts" setup>
 import { useInstanceStore } from "@/store/instance"
 import { ConfigMetadata } from "@/views/device/Product/typings"
-import { getConfigMetadata } from '@/api/device/instance'
+import { getConfigMetadata, _deploy, configurationReset } from '@/api/device/instance'
+import { message } from "ant-design-vue"
 
 const instanceStore = useInstanceStore()
 const visible = ref<boolean>(false)
@@ -36,11 +41,11 @@ const config = ref<ConfigMetadata[]>([])
 
 watchEffect(() => {
     if(instanceStore.current.id){
-        // getConfigMetadata(instanceStore.current.id).then(resp => {
-        //     if(resp.status === 200){
-        //         config.value = resp?.result as ConfigMetadata[]
-        //     }
-        // })
+        getConfigMetadata(instanceStore.current.id).then(resp => {
+            if(resp.status === 200){
+                config.value = resp?.result as ConfigMetadata[]
+            }
+        })
     }
 })
 
@@ -53,5 +58,24 @@ const isExit = (property: string) => {
         instanceStore.current?.cachedConfiguration[property]
     );
   }
+  
+const deployBtn = async () => {
+    if(instanceStore.current.id){
+        const resp = await _deploy(instanceStore.current.id)
+        if (resp.status === 200) {
+            message.success('操作成功')
+            instanceStore.refresh(instanceStore.current.id)
+        }
+    }
+}
 
+const resetBtn = async () => {
+    if(instanceStore.current.id){
+        const resp = await configurationReset(instanceStore.current.id)
+        if (resp.status === 200) {
+            message.success('恢复默认配置成功')
+            instanceStore.refresh(instanceStore.current.id)
+        }
+    }
+}
 </script>

src/views/device/Instance/Detail/Info/components/Relation/Save.vue

@@ -0,0 +1,125 @@
+<template>
+    <a-drawer placement="right" :closable="false" :visible="true">
+        <template #title>
+            <div
+                style="
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                "
+            >
+                <span
+                    ><AIcon
+                        type="CloseOutlined"
+                        style="margin-right: 5px"
+                        @click="onClose"
+                    />编辑</span
+                >
+                <a-button type="primary" @click="saveBtn">保存</a-button>
+            </div>
+        </template>
+        <a-form layout="vertical" ref="formRef" :model="modelRef">
+            <a-form-item
+                :name="item.relation"
+                :label="item.relationName"
+                v-for="(item, index) in dataSource"
+                :key="index"
+            >
+                <a-select
+                    showSearch
+                    mode="multiple"
+                    v-model:value="modelRef[item.relation]"
+                    :placeholder="`请选择${item.relationName}`"
+                >
+                    <a-select-option
+                        :value="item.value"
+                        v-for="item in userList"
+                        :key="item.id"
+                        >{{ item.name }}</a-select-option
+                    >
+                </a-select>
+            </a-form-item>
+        </a-form>
+    </a-drawer>
+</template>
+
+<script lang="ts" setup>
+import { queryUserListNoPaging, saveRelations } from '@/api/device/instance';
+import { useInstanceStore } from '@/store/instance';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['close', 'save']);
+
+const formRef = ref();
+const modelRef = reactive({});
+const userList = ref<Record<string, any>[]>([]);
+
+const instanceStore = useInstanceStore();
+
+const dataSource = ref<Record<any, any>[]>([]);
+
+watchEffect(() => {
+    const arr = (instanceStore.current?.relations || [])
+    dataSource.value = arr as Record<any, any>[];
+    arr.map((item) => {
+        modelRef[item.relation] = [
+            ...(item?.related || []).map((i: any) => JSON.stringify(i)),
+        ];
+    });
+});
+
+onMounted(() => {
+    queryUserListNoPaging().then((resp) => {
+        if (resp.status === 200) {
+            userList.value = (resp.result as Record<string, any>[]).map(
+                (item) => {
+                    return {
+                        ...item,
+                        label: item.name,
+                        value: JSON.stringify({
+                            id: item.id,
+                            name: item.name,
+                        }),
+                    };
+                },
+            );
+        }
+    });
+});
+
+const onClose = () => {
+    emit('close');
+    formRef.value.resetFields();
+};
+
+const saveBtn = () => {
+    formRef.value.validate().then(async () => {
+        const values = toRaw(modelRef);
+        if (Object.keys(values).length > 0) {
+            const param: any[] = [];
+            Object.keys(values).forEach((key) => {
+                const item = dataSource.value.find((i) => i.relation === key);
+                const items = (values[key] || []).map((i: string) =>
+                    JSON.parse(i),
+                );
+                if (item) {
+                    param.push({
+                        relatedType: 'user',
+                        relation: item.relation,
+                        description: '',
+                        related: [...items],
+                    });
+                }
+            });
+            if(param.length && instanceStore.current.id){
+                const resp = await saveRelations(instanceStore.current.id, param);
+                if (resp.status === 200) {
+                    message.success('操作成功！');
+                    emit('save');
+                    formRef.value.resetFields();
+                }
+            }
+        }
+    });
+};
+</script>

src/views/device/Instance/Detail/Info/components/Relation/index.vue

@@ -7,17 +7,27 @@
             </template>
             <a-descriptions-item :span="1" v-for="item in dataSource" :key="item.objectId" :label="item.relationName">{{ item?.related ? (item?.related || []).map(i => i.name).join(',') : '' }}</a-descriptions-item>
         </a-descriptions>
+        <Save v-if="visible" @save="saveBtn" @close="visible = false" />
     </div>
 </template>
 
 <script lang="ts" setup>
 import { useInstanceStore } from "@/store/instance"
+import Save from './Save.vue'
 const instanceStore = useInstanceStore()
 
 const dataSource = ref<Record<any, any>[]>([])
+const visible = ref<boolean>(false);
 
 watchEffect(() => {
     const arr = (instanceStore.current?.relations || []).reverse()
     dataSource.value = arr as Record<any, any>[]
 })
+
+const saveBtn = () => {
+    visible.value = false
+    if(instanceStore.current.id){
+        instanceStore.refresh(instanceStore.current.id)
+    }
+}
 </script>

src/views/device/Instance/Detail/Info/components/Tags/Save.vue

@@ -0,0 +1,117 @@
+<template>
+    <a-modal
+        :width="1000"
+        :visible="true"
+        title="编辑标签"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
+        <a-table
+            rowKey="id"
+            :columns="columns"
+            :data-source="dataSource"
+            bordered
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, text, record }">
+                <div style="width: 280px">
+                    <template v-if="['key', 'name'].includes(column.dataIndex)">
+                        <span>{{ text }}</span>
+                    </template>
+                    <template v-else>
+                        <ValueItem
+                            v-model:modelValue="record.value"
+                            :itemType="record.type"
+                            :options="
+                                record.type === 'enum'
+                                    ? (record?.dataType?.elements || []).map(
+                                          (item) => {
+                                              return {
+                                                  label: item.text,
+                                                  value: item.value,
+                                              };
+                                          },
+                                      )
+                                    : record.type === 'boolean'
+                                    ? [
+                                          { label: '是', value: true },
+                                          { label: '否', value: false },
+                                      ]
+                                    : undefined
+                            "
+                        />
+                    </template>
+                </div>
+            </template>
+        </a-table>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from '@/store/instance';
+import { message } from 'ant-design-vue';
+import _ from 'lodash';
+import { saveTags, delTags } from '@/api/device/instance'
+
+const emit = defineEmits(['close', 'save']);
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'key',
+        with: '33%',
+    },
+    {
+        title: '名称',
+        dataIndex: 'name',
+        with: '33%',
+    },
+    {
+        title: '值',
+        dataIndex: 'value',
+        with: '34%',
+    },
+];
+const instanceStore = useInstanceStore();
+
+const dataSource = ref<Record<any, any>[]>([]);
+
+watchEffect(() => {
+    const arr = instanceStore.current?.tags || [];
+    dataSource.value = _.cloneDeep(arr);
+});
+
+const handleOk = async () => {
+    if (dataSource.value.length) {
+        const list = (dataSource.value || [])
+            .filter((item: any) => item?.key && item?.value)
+            .map((i: any) => {
+                const { dataType, ...extra } = i;
+                return { ...extra };
+            });
+        if (list.length) {
+            // 填值
+            const resp = await saveTags(instanceStore.current?.id || '', list);
+            if (resp.status === 200) {
+              message.success('操作成功！');
+            }
+          }
+          const _list = (dataSource.value || []).filter((item: any) => item?.key && !item?.value);
+          if (_list.length) {
+            // 删除值
+            _list.map(async (item: any) => {
+              if (item.id) {
+                await delTags(instanceStore.current?.id || '', item.id);
+              }
+            });
+          }
+          emit('save');
+    } else {
+        emit('close');
+    }
+};
+
+const handleCancel = () => {
+    emit('close');
+};
+</script>

src/views/device/Instance/Detail/Info/components/Tags/index.vue

@@ -1,3 +1,34 @@
 <template>
-    tags
-</template>
+    <div style="margin-top: 20px">
+        <a-descriptions bordered>
+            <template #title>
+                标签
+                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
+            </template>
+            <a-descriptions-item :span="1" v-for="item in dataSource" :key="item.key" :label="`${item.name}（${item.key})`">{{ item?.value }}</a-descriptions-item>
+        </a-descriptions>
+        <Save v-if="visible" @close="visible = false" @save="saveBtn" />
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from "@/store/instance"
+import Save from './Save.vue'
+
+const instanceStore = useInstanceStore()
+
+const dataSource = ref<Record<any, any>[]>([])
+const visible = ref<boolean>(false)
+
+watchEffect(() => {
+    const arr = (instanceStore.current?.tags || [])
+    dataSource.value = arr as Record<any, any>[]
+})
+
+const saveBtn = () => {
+    visible.value = false
+    if(instanceStore.current.id){
+        instanceStore.refresh(instanceStore.current.id)
+    }
+}
+</script>

src/views/device/Instance/Detail/index.vue

@@ -1,7 +1,40 @@
 <template>
     <page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
-        <template #subTitle><div>{{instanceStore.current.name}}</div></template>
-        <component :is="instanceStore.tabActiveKey" />
+        <template #title>
+            <div>
+                <div style="display: flex;  align-items: center;">
+                    <div>{{instanceStore.current.name}}</div>
+                    <a-divider type="vertical" />
+                    <a-space>
+                        <a-badge :text="instanceStore.current.state?.text" :status="statusMap.get(instanceStore.current.state?.value)" />
+                        <a-popconfirm title="确认启用设备" @confirm="handleAction" v-if="instanceStore.current.state?.value === 'notActive'">
+                            <a-button type="link">启用设备</a-button>
+                        </a-popconfirm>
+                        <a-popconfirm title="确认断开连接" @confirm="handleDisconnect" v-if="instanceStore.current.state?.value === 'online'">
+                            <a-button type="link">断开连接</a-button>
+                        </a-popconfirm>
+                        <a-tooltip v-if="instanceStore.current?.accessProvider === 'child-device' &&
+            instanceStore.current?.state?.value === 'offline'"  :title="instanceStore.current?.features?.find((item) => item.id === 'selfManageState')
+                      ? '该设备的在线状态与父设备(网关设备)保持一致'
+                      : '该设备在线状态由设备自身运行状态决定，不继承父设备（网关设备）的在线状态'">
+                            <AIcon type="QuestionCircleOutlined" style="font-size: 14px" />
+                        </a-tooltip>
+                    </a-space>
+                </div>
+                <div style="padding-top: 10px">
+                    <a-descriptions size="small" :column="4">
+                        <a-descriptions-item label="ID">{{ instanceStore.current.id }}</a-descriptions-item>
+                        <a-descriptions-item label="所属产品">
+                            <a-button style="margin-top: -5px; padding: 0" type="link" @click="jumpProduct">{{ instanceStore.current.productName }}</a-button>
+                        </a-descriptions-item>
+                    </a-descriptions>
+                </div>
+            </div>
+        </template>
+        <template #extra>
+            <img @click="handleRefresh" :src="getImage('/device/instance/button.png')" style="margin-right: 20px; cursor: pointer;" />
+        </template>
+        <component :is="tabs[instanceStore.tabActiveKey]" />
     </page-container>
 </template>
 
@@ -9,9 +42,18 @@
 import { useInstanceStore } from '@/store/instance';
 import Info from './Info/index.vue';
 import Metadata from '../../components/Metadata/index.vue';
+import { _deploy, _disconnect } from '@/api/device/instance'
+import { message } from 'ant-design-vue';
+import { getImage } from '@/utils/comm';
+
 const route = useRoute();
 const instanceStore = useInstanceStore()
 
+const statusMap = new Map();
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
 const list = [
     {
         key: 'Info',
@@ -46,4 +88,35 @@ const onBack = () => {
 const onTabChange = (e: string) => {
     instanceStore.tabActiveKey = e
 }
+
+const handleAction = async () => {
+    if(instanceStore.current.id){
+        const resp = await _deploy(instanceStore.current.id)
+        if(resp.status === 200){
+            message.success('操作成功！')
+            instanceStore.refresh(instanceStore.current.id)
+        }
+    }
+}
+
+const handleDisconnect = async () => {
+    if(instanceStore.current.id){
+        const resp = await _disconnect(instanceStore.current.id)
+        if(resp.status === 200){
+            message.success('操作成功！')
+            instanceStore.refresh(instanceStore.current.id)
+        }
+    }
+}
+
+const handleRefresh = async () => {
+    if(instanceStore.current.id){
+        await instanceStore.refresh(instanceStore.current.id)
+        message.success('操作成功')
+    }
+}
+
+const jumpProduct = () => {
+    message.warn('暂未开发')
+}
 </script>

src/views/device/Instance/index.vue

@@ -101,8 +101,8 @@
                 :actions="getActions(slotProps, 'card')"
                 v-bind="slotProps"
                 :active="_selectedRowKeys.includes(slotProps.id)"
-                :status="slotProps.state.value"
-                :statusText="slotProps.state.text"
+                :status="slotProps.state?.value"
+                :statusText="slotProps.state?.text"
                 :statusNames="{
                     online: 'success',
                     offline: 'error',
@@ -126,7 +126,7 @@
                     <a-row>
                         <a-col :span="12">
                             <div class="card-item-content-text">设备类型</div>
-                            <div>{{ slotProps.deviceType.text }}</div>
+                            <div>{{ slotProps.deviceType?.text }}</div>
                         </a-col>
                         <a-col :span="12">
                             <div class="card-item-content-text">产品名称</div>
@@ -151,7 +151,7 @@
                                 />
                                 <template v-else>
                                     <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
+                                    <span>{{ item?.text }}</span>
                                 </template>
                             </a-button>
                         </a-popconfirm>
@@ -166,7 +166,7 @@
                                 />
                                 <template v-else>
                                     <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
+                                    <span>{{ item?.text }}</span>
                                 </template>
                             </a-button>
                         </template>
@@ -176,8 +176,8 @@
         </template>
         <template #state="slotProps">
             <a-badge
-                :text="slotProps.state === 1 ? ' 正常' : '禁用'"
-                :status="statusMap.get(slotProps.state)"
+                :text="slotProps.state?.text"
+                :status="statusMap.get(slotProps.state?.value)"
             />
         </template>
         <template #action="slotProps">
@@ -228,7 +228,7 @@
         :api="api"
         :type="type"
     />
-    <Save v-if="visible" :data="current" />
+    <Save v-if="visible" :data="current" @close="visible = false" @save="saveBtn" />
 </template>
 
 <script setup lang="ts">
@@ -263,8 +263,10 @@ const api = ref<string>('');
 const type = ref<string>('');
 
 const statusMap = new Map();
-statusMap.set(1, 'processing');
-statusMap.set(0, 'error');
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
 const columns = [
     {
         title: 'ID',
@@ -399,9 +401,9 @@ const getActions = (
         },
         {
             key: 'action',
-            text: data.state.value !== 'notActive' ? '禁用' : '启用',
+            text: data.state?.value !== 'notActive' ? '禁用' : '启用',
             tooltip: {
-                title: data.state.value !== 'notActive' ? '禁用' : '启用',
+                title: data.state?.value !== 'notActive' ? '禁用' : '启用',
             },
             icon:
                 data.state.value !== 'notActive'
@@ -430,7 +432,7 @@ const getActions = (
         {
             key: 'delete',
             text: '删除',
-            disabled: data.state.value !== 'notActive',
+            disabled: data.state?.value !== 'notActive',
             tooltip: {
                 title:
                     data.state.value !== 'notActive'

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(() => {
-  if (props.visible) {
-    loading.value = true
-    const { id } = route.params
-    if (props.type === 'device') {
-      detail(id as string).then((resp) => {
-        loading.value = false
-        instanceStore.setCurrent(resp.result)
-        value.value = resp.result.metadata
-      });
-    } else {
-      productDetail(id as string).then((resp) => {
-        loading.value = false
-        // productStore.setCurrent(resp.result)
-        value.value = resp.result.metadata
-      });
+watch(
+  [props.visible, props.type],
+  () => {
+    if (props.visible) {
+      loading.value = true
+      const { id } = route.params
+      if (props.type === 'device') {
+        detail(id as string).then((resp) => {
+          loading.value = false
+          instanceStore.setCurrent(resp.result)
+          value.value = resp.result.metadata
+        });
+      } else {
+        productDetail(id as string).then((resp) => {
+          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 {
-    deviceBootConfig as _deviceBootConfig,
-    deviceStepDetails,
-    opsBootConfig as _opsBootConfig,
-    opsStepDetails,
-} from '../../modules/config';
+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;
+
+// 物联网引导-数据
+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="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 class="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>
 </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;
-    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);
-    }
+    overflow: hidden;
 }
 </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/Detail/index.vue

@@ -0,0 +1,167 @@
+<!-- 物联卡查看 -->
+<template>
+    <div class="page-container">
+        <!-- 新增、编辑 -->
+        <Save
+            v-if="visible"
+            :type="saveType"
+            :data="current"
+            @change="saveChange"
+        />
+        <a-row :gutter="[24, 24]">
+            <a-col :span="24">
+                <a-card>
+                    <a-descriptions size="small" :column="3" bordered>
+                        <template #title>
+                            <span key="1">基本信息</span>
+                            <a-button
+                                key="2"
+                                type="link"
+                                @click="
+                                    () => {
+                                        visible = true;
+                                        current = detail;
+                                        saveType = 'edit';
+                                    }
+                                "
+                            >
+                                <AIcon type="EditOutlined"></AIcon>
+                                编辑
+                            </a-button>
+                        </template>
+
+                        <a-descriptions-item label="卡号">{{
+                            detail.id
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="ICCID">{{
+                            detail.iccId
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="绑定设备">{{
+                            detail.deviceName
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="平台类型">{{
+                            detail.operatorPlatformType?.text
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="平台名称">{{
+                            detail.platformConfigName
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="运营商">{{
+                            detail.operatorName
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="类型">{{
+                            detail.cardType?.text
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="激活日期">{{
+                            detail.activationDate
+                                ? moment(detail.activationDate).format(
+                                      'YYYY-MM-DD HH:mm:ss',
+                                  )
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="更新时间">{{
+                            detail.updateTime
+                                ? moment(detail.updateTime).format(
+                                      'YYYY-MM-DD HH:mm:ss',
+                                  )
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="总流量">{{
+                            detail.totalFlow
+                                ? detail.totalFlow.toFixed(2) + ' M'
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="使用流量">{{
+                            detail.usedFlow
+                                ? detail.usedFlow.toFixed(2) + ' M'
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="剩余流量">{{
+                            detail.residualFlow
+                                ? detail.residualFlow.toFixed(2) + ' M'
+                                : ''
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="状态">{{
+                            detail?.cardState?.text
+                        }}</a-descriptions-item>
+                        <a-descriptions-item label="说明">{{
+                            detail?.describe
+                        }}</a-descriptions-item>
+                    </a-descriptions>
+                </a-card>
+            </a-col>
+            <a-col :span="24">
+                <!-- 流量统计 -->
+                <a-row :gutter="40">
+                    <a-col :span="16">
+                        <div class="card">
+                            <Guide title="流量统计">
+                                <template #extra></template>
+                            </Guide>
+                            <LineChart
+                                :showX="true"
+                                :showY="true"
+                                style="min-height: 450px"
+                                :chartData="flowData"
+                            />
+                        </div>
+                    </a-col>
+                    <a-col :span="8">
+                        <div class="card">
+                            <a-row :gutter="20">
+                                <a-col :span="24">
+                                    <Guide title="数据统计" />
+                                </a-col>
+                            </a-row>
+                        </div>
+                    </a-col>
+                </a-row>
+            </a-col>
+        </a-row>
+    </div>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import type { CardManagement } from '../typing';
+import { queryDetail } from '@/api/iot-card/cardManagement';
+import Save from '../Save.vue';
+import Guide from '@/views/iot-card/components/Guide.vue';
+import LineChart from '@/views/iot-card/components/LineChart.vue';
+
+const route = useRoute();
+
+const visible = ref<boolean>(false);
+const current = ref<Partial<CardManagement>>({});
+const saveType = ref<string>('');
+const detail = ref<any>({});
+
+const flowData = ref<any[]>([]);
+
+const getDetail = () => {
+    queryDetail(route.query.id).then((resp: any) => {
+        if (resp.status === 200) {
+            detail.value = resp.result;
+        }
+    });
+};
+
+/**
+ * 新增、编辑关闭弹窗
+ * @param val 加载表格
+ */
+const saveChange = (val: any) => {
+    visible.value = false;
+    current.value = {};
+    if (val) {
+        getDetail();
+    }
+};
+
+getDetail();
+</script>
+<style scoped lang="less">
+.card {
+    padding: 24px;
+    background-color: #fff;
+}
+</style>

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,9 @@ 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 router = useRouter();
 
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
@@ -344,6 +363,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 +524,11 @@ const getActions = (
                 title: '编辑',
             },
             icon: 'EditOutlined',
+            onClick: () => {
+                visible.value = true;
+                current.value = data;
+                saveType.value = 'edit';
+            },
         },
         {
             key: 'view',
@@ -512,6 +537,14 @@ const getActions = (
                 title: '查看',
             },
             icon: 'EyeOutlined',
+            onClick: () => {
+                router.push({
+                    path: '/iot-card/CardManagement/Detail',
+                    query: {
+                        id: data.id,
+                    },
+                });
+            },
         },
         {
             key: 'bindDevice',
@@ -651,10 +684,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/Recharge/index.vue

@@ -0,0 +1,8 @@
+<!-- 充值管理 -->
+<template>
+    <div class="page-container">充值管理</div>
+</template>
+
+<script setup lang="ts"></script>
+
+<style scoped lang="less"></style>

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/notice/Config/Detail/index.vue

@@ -311,31 +311,42 @@ const msgType = ref([
 // 表单数据
 const formData = ref<ConfigFormData>({
     configuration: {
-        appKey: '',
-        appSecret: '',
+        host: '',
+        port: 25,
+        ssl: false,
+        sender: '',
+        username: '',
+        password: '',
     },
     description: '',
     name: '',
-    provider: 'dingTalkMessage',
-    type: 'dingTalk',
+    provider: 'embedded',
+    type: 'email',
 });
 
 // 根据通知方式展示对应的字段
 watch(
     () => formData.value.type,
     (val) => {
-        // formData.value.configuration = Object.values<any>(CONFIG_FIELD_MAP[val])[0];
         msgType.value = MSG_TYPE[val];
 
         formData.value.provider = msgType.value[0].value;
+
+        formData.value.configuration =
+            CONFIG_FIELD_MAP[val][formData.value.provider];
+
+        clearValid();
     },
 );
 
-computed(() =>
-    Object.assign(
-        formData.value.configuration,
-        CONFIG_FIELD_MAP[formData.value.type][formData.value.provider],
-    ),
+watch(
+    () => formData.value.provider,
+    (val) => {
+        formData.value.configuration =
+            CONFIG_FIELD_MAP[formData.value.type][val];
+
+        clearValid();
+    },
 );
 
 // 验证规则
@@ -405,15 +416,15 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
     formData.value,
     formRules.value,
 );
-watch(
-    () => formData.value.type,
-    () => {
+
+const clearValid = () => {
+    setTimeout(() => {
         clearValidate();
-    },
-    { deep: true },
-);
+    }, 200);
+};
 
 const getDetail = async () => {
+    if (route.params.id === ':id') return;
     const res = await configApi.detail(route.params.id as string);
     // console.log('res: ', res);
     formData.value = res.result;
@@ -441,10 +452,12 @@ const handleSubmit = () => {
                 message.success('保存成功');
                 router.back();
             }
-            btnLoading.value = false;
         })
         .catch((err) => {
             console.log('err: ', err);
+        })
+        .finally(() => {
+            btnLoading.value = false;
         });
 };
 </script>

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
-                                        type="DeleteOutlined"
-                                        v-if="item.key === 'delete'"
-                                    />
-                                    <template v-else>
-                                        <AIcon :type="item.icon" />
-                                        <span>{{ item.text }}</span>
-                                    </template>
+                                    <AIcon type="DeleteOutlined" />
                                 </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>
+                                    <AIcon :type="item.icon" />
+                                    <span>{{ item.text }}</span>
                                 </a-button>
                             </template>
                         </a-tooltip>
@@ -351,29 +360,35 @@ const getActions = (
                 currentConfig.value = data;
             },
         },
-        {
-            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: '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: '删除',
@@ -392,9 +407,55 @@ const getActions = (
             icon: 'DeleteOutlined',
         },
     ];
-    if (data.provider === 'dingTalkMessage' || data.provider === 'corpMessage')
+
+    const others: ActionsType = {
+        key: 'others',
+        text: '其他',
+        icon: 'EllipsisOutlined',
+        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;
+                },
+            },
+        ],
+    };
+
+    if (type === 'card') {
+        if (
+            data.provider !== 'dingTalkMessage' &&
+            data.provider !== 'corpMessage'
+        )
+            others.children.splice(1, 1);
+        actions.splice(actions.length - 1, 0, others);
         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/notice/Template/Detail/index.vue

@@ -120,15 +120,15 @@
                                             ]
                                         "
                                     >
-                                        <!-- <a-input
+                                        <a-input
                                             v-model:value="
-                                                formData.template.markdown?.title
+                                                formData.template.markdown.title
                                             "
                                             placeholder="请输入标题"
-                                        /> -->
+                                        />
                                     </a-form-item>
                                 </template>
-                                <!-- <template
+                                <template
                                     v-if="
                                         formData.template.messageType === 'link'
                                     "
@@ -141,7 +141,7 @@
                                     >
                                         <a-input
                                             v-model:value="
-                                                formData.template.link?.title
+                                                formData.template.link.title
                                             "
                                             placeholder="请输入标题"
                                         />
@@ -149,21 +149,40 @@
                                     <a-form-item label="图片链接">
                                         <a-input
                                             v-model:value="
-                                                formData.template.link?.picUrl
+                                                formData.template.link.picUrl
                                             "
                                             placeholder="请输入图片链接"
-                                        />
+                                        >
+                                            <template #addonAfter>
+                                                <a-upload
+                                                    name="file"
+                                                    :action="FILE_UPLOAD"
+                                                    :headers="{
+                                                        [TOKEN_KEY]:
+                                                            LocalStore.get(
+                                                                TOKEN_KEY,
+                                                            ),
+                                                    }"
+                                                    :showUploadList="false"
+                                                    @change="
+                                                        (e) => handleChange(e)
+                                                    "
+                                                >
+                                                    <AIcon type="UploadOutlined" />
+                                                </a-upload>
+                                            </template>
+                                        </a-input>
                                     </a-form-item>
                                     <a-form-item label="内容链接">
                                         <a-input
                                             v-model:value="
                                                 formData.template.link
-                                                    ?.messageUrl
+                                                    .messageUrl
                                             "
                                             placeholder="请输入内容链接"
                                         />
                                     </a-form-item>
-                                </template> -->
+                                </template>
                             </template>
                         </template>
                         <!-- 微信 -->
@@ -456,7 +475,7 @@
 
 <script setup lang="ts">
 import { getImage } from '@/utils/comm';
-import { Form } from 'ant-design-vue';
+import { Form, UploadChangeParam } from 'ant-design-vue';
 import { message } from 'ant-design-vue';
 import { IVariableDefinitions, TemplateFormData } from '../types';
 import {
@@ -475,6 +494,10 @@ import ToUser from './components/ToUser.vue';
 import ToOrg from './components/ToOrg.vue';
 import ToTag from './components/ToTag.vue';
 
+import { FILE_UPLOAD } from '@/api/comm';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
+
 const router = useRouter();
 const route = useRoute();
 const useForm = Form.useForm;
@@ -495,12 +518,19 @@ const msgType = ref([
 
 // 表单数据
 const formData = ref<TemplateFormData>({
-    template: {},
+    template: {
+        subject: '',
+        sendTo: [],
+        attachments: [],
+        message: '',
+        text: '',
+    },
     name: '',
     type: 'email',
     provider: 'embedded',
     description: '',
     variableDefinitions: [],
+    configId: '',
 });
 
 // 根据通知方式展示对应的字段
@@ -513,17 +543,22 @@ watch(
         formData.value.provider = msgType.value[0].value;
         // console.log('formData.value.template: ', formData.value.template);
 
+        formData.value.template =
+            TEMPLATE_FIELD_MAP[val][formData.value.provider];
+
         getConfigList();
+        clearValid();
     },
 );
 
-computed(() => {
-    // console.log('formData.value.type: ', formData.value.type);
-    Object.assign(
-        formData.value.template,
-        TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
-    );
-});
+watch(
+    () => formData.value.provider,
+    (val) => {
+        formData.value.template = TEMPLATE_FIELD_MAP[formData.value.type][val];
+
+        clearValid();
+    },
+);
 
 // 验证规则
 const formRules = ref({
@@ -557,14 +592,6 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
     formData.value,
     formRules.value,
 );
-watch(
-    () => formData.value.type,
-    () => {
-        formData.value.variableDefinitions = [];
-        clearValidate();
-    },
-    { deep: true },
-);
 
 watch(
     () => formData.value.template.message,
@@ -593,6 +620,13 @@ watch(
     { deep: true },
 );
 
+const clearValid = () => {
+    setTimeout(() => {
+        formData.value.variableDefinitions = [];
+        clearValidate();
+    }, 200);
+};
+
 /**
  * 获取详情
  */
@@ -618,6 +652,15 @@ const getConfigList = async () => {
 };
 getConfigList();
 
+/**
+ * link消息类型 图片链接
+ */
+ const handleChange = (info: UploadChangeParam) => {
+    if (info.file.status === 'done') {
+        formData.value.template.link.picUrl = info.file.response?.result;
+    }
+};
+
 /**
  * 配置选择改变
  */
@@ -653,9 +696,12 @@ getSignsList();
  */
 const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
+    if (formData.value.type === 'email') delete formData.value.configId;
+    if (formData.value.template.messageType === 'markdown') delete formData.value.template.link
+    if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
+    // console.log('formData.value: ', formData.value);
     validate()
         .then(async () => {
-            // console.log('formData.value: ', formData.value);
             formData.value.template.ttsCode =
                 formData.value.template.templateCode;
             btnLoading.value = true;
@@ -673,18 +719,20 @@ const handleSubmit = () => {
         })
         .catch((err) => {
             console.log('err: ', err);
+        })
+        .finally(() => {
             btnLoading.value = false;
         });
 };
 
 // test
-watch(
-    () => formData.value,
-    (val) => {
-        console.log('formData.value: ', val);
-    },
-    { deep: true },
-);
+// watch(
+//     () => formData.value,
+//     (val) => {
+//         console.log('formData.value: ', val);
+//     },
+//     { deep: true },
+// );
 // test
 </script>
 

src/views/notice/Template/index.vue

@@ -256,7 +256,7 @@ const getMethodTxt = (type: string) => {
  * 新增
  */
 const handleAdd = () => {
-    router.push(`/notice/Config/detail/:id`);
+    router.push(`/notice/Template/detail/:id`);
 };
 
 /**
@@ -323,7 +323,7 @@ const getActions = (
             onClick: () => {
                 // visible.value = true;
                 // current.value = data;
-                router.push(`/notice/Config/detail/${data.id}`);
+                router.push(`/notice/Template/detail/${data.id}`);
             },
         },
         {

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">
-                                <use :xlinkHref="`#${form.data.icon}`" />
-                            </svg>
-                            <span class="mark">点击修改</span>
+                            <AIcon
+                                :type="form.data.icon"
+                                style="font-size: 90px"
+                            />
+                            <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
-                        v-model:value="form.data.permissions"
-                        style="width: 300px"
-                        allowClear
-                        placeholder="请输入权限名称"
-                    />
+                    <PermissChoose v-model:value="form.data.permissions" />
                 </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: '',
-        accessSupport: '',
+        permissions: [],
+        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) => {
-            form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
+        getAssetsType_api().then((resp: any) => {
+            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}`,
         );
     },
     // 删除