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/device/product.ts

@@ -108,7 +108,7 @@ export const deleteProduct = (id: string) => server.patch(`/device-product/${id}
  * 检测产品Id唯一性
  * @param id 产品ID
  */
- export const queryProductId = (id: string) => server.post(`/device-product/${id}/exists`)
+ export const queryProductId = (id: string) => server.get(`/device-product/${id}/exists`)
 /**
  * 保存产品
  * @param data 产品信息

src/api/initHome.ts

@@ -1,7 +1,7 @@
 import server from '@/utils/request';
 
 // 更新全部菜单
-export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
+export const updateMenus = (data: any) => server.patch(`/menu/iot/_all`, data)
 // 添加角色
 export const addRole = (data: any) => server.post(`/role`, data)
 

src/api/iot-card/cardManagement.ts

@@ -98,3 +98,39 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
  * @param params
  */
 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}`);
+
+/**
+ * 查询物联卡充值缴费日志
+ * @param data
+ */
+export const queryRechargeList = (data: any) => server.post(`/network/card/recharge/_log`, data)
+
+/**
+ * 充值
+ * @param data
+ */
+export const recharge = (data: any) => server.post(`/network/card/_recharge`, data)

src/components/CardBox/index.vue

@@ -231,6 +231,13 @@ const handleClick = () => {
 
             :deep(.card-item-content-title) {
                 cursor: pointer;
+                font-size: 16px;
+                font-weight: 700;
+                color: @primary-color;
+                width: calc(100% - 100px);
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
             }
 
             :deep(.card-item-heard-name) {

src/components/Layout/BasicLayoutPage.vue

@@ -21,6 +21,7 @@
 import { ProLayout } from '@/components/Layout'
 import DefaultSetting from '../../../config/config'
 import { useMenuStore } from '@/store/menu'
+import { clearMenuItem } from 'components/Layout/utils'
 
 type StateType = {
   collapsed: boolean
@@ -39,7 +40,7 @@ const layoutConf = reactive({
   siderWidth: DefaultSetting.layout.siderWidth,
   logo: DefaultSetting.layout.logo,
   title: DefaultSetting.layout.title,
-  menuData: menu.menus,
+  menuData: clearMenuItem(menu.siderMenus),
 });
 
 const state = reactive<StateType>({

src/components/Layout/components/Header/index.tsx

@@ -32,7 +32,7 @@ export const HeaderView = defineComponent({
             height: `${headerHeight.value}px`,
             lineHeight: `${headerHeight.value}px`,
             width: `100%`,
-
+            background: 'transparent'
           }}
         />
         <Layout.Header

src/components/Layout/components/SiderMenu/SiderMenu.less

@@ -13,4 +13,8 @@
     flex-direction: column;
     height: 100%;
   }
+
+  .ant-menu-inline {
+    background: transparent;
+  }
 }

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

@@ -333,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) => {
@@ -345,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/main.ts

@@ -1,17 +1,14 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import store from './store'
-import router from './router'
 import components from './components'
+import router from './router'
 import './style.less'
 import 'ant-design-vue/es/notification/style/css';
-import Antd from 'ant-design-vue/es'
 
 const app = createApp(App)
 
 app.use(store)
-app.use(router)
-app.use(components)
-app.use(Antd)
-
-app.mount('#app')
+  .use(router)
+  .use(components)
+  .mount('#app')

src/router/index.ts

@@ -3,6 +3,8 @@ import menus, { LoginPath } from './menu'
 import { cleanToken, getToken } from '@/utils/comm'
 import { useUserInfo } from '@/store/userInfo'
 import { useSystem } from '@/store/system'
+import NotFindPage from '@/views/404.vue'
+import { useMenuStore } from 'store/menu'
 
 const router = createRouter({
   history: createWebHashHistory(),
@@ -27,22 +29,23 @@ router.beforeEach((to, from, next) => {
       } else {
         const userInfo = useUserInfo()
         const system = useSystem()
+        const menu = useMenuStore()
 
-        if (!userInfo.userInfos.username) {
+        if (!menu.menuData.length) {
           userInfo.getUserInfo().then(() => {
             system.getSystemVersion().then((menuData: any[]) => {
               menuData.forEach(r => {
-                router.addRoute('main', r)
+                router.addRoute('base', r)
               })
-              const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
-              if(to.path === redirect) {
+              router.addRoute('base',{
+                path: '/:pathMatch(.*)',
+                name: 'error',
+                component: () => NotFindPage
+              })
+
               next({ ...to, replace: true })
-              } else {
-                next({ path: redirect })
-              }
             })
           }).catch(() => {
-            console.log('userInfo', userInfo)
             cleanToken()
             next({ path: LoginPath })
           })

src/router/menu.ts

@@ -1,24 +1,7 @@
 export const LoginPath = '/login'
 
 export default [
-    // {
-    //     path: '/',
-    //     redirect: LoginPath
-    // },
-    // {
-    //     path: '/init',
-    //     component: () => import('@/view/InitPage.vue')
-    // },
-    // {
-    //     path: LoginPath,
-    //     name: 'login',
-    //     component: () => import('@/view/Login/index.vue')
-    // },
-    // {
-    //   path: '/initsetting',
-    //   component: () => import('@/view/Login/initSet.vue')
-    // }
-
+    { path: '/*', redirect: '/'},
     // start: 测试用, 可删除
     {
         path: '/login',
@@ -32,10 +15,6 @@ export default [
         path: '/account/center/bind',
         component: () => import('@/views/account/Center/bind/index.vue')
     },
-    {
-        path: '/iot/home',
-        component: () => import('@/views/home/index.vue')
-    },
     {
         path: '/table',
         component: () => import('@/views/demo/table/index.vue')
@@ -48,121 +27,13 @@ export default [
         path: '/search',
         component: () => import('@/views/demo/Search.vue')
     },
-    {
-        path: '/notice/Config',
-        component: () => import('@/views/notice/Config/index.vue')
-    },
-    {
-        path: '/notice/Config/detail/:id',
-        component: () => import('@/views/notice/Config/Detail/index.vue')
-    },
-    {
-        path: '/notice/Template',
-        component: () => import('@/views/notice/Template/index.vue')
-    },
-    {
-        path: '/notice/Template/detail/:id',
-        component: () => import('@/views/notice/Template/Detail/index.vue')
-    },
+
     // end: 测试用, 可删除
 
-    // 设备管理
-    {
-        path: '/device/instance',
-        component: () => import('@/views/device/Instance/index.vue')
-    },
-    {
-        // path: '/device/Instance/detail/:id',
-        // component: () => import('@/views/device/Instance/detail.vue')
-        path: '/device/instance/detail/:id',
-        component: () => import('@/views/device/Instance/Detail/index.vue')
-    },
-    // link 运维管理
-    {
-        path: '/link/log',
-        component: () => import('@/views/link/Log/index.vue')
-    },
-    {
-        path: '/link/certificate',
-        component: () => import('@/views/link/Certificate/index.vue')
-    },
-    {
-        path: '/link/certificate/detail/:type/:id',
-        component: () => import('@/views/link/Certificate/Detail/index.vue')
-    },
-    {
-        path: '/link/accessConfig',
-        component: () => import('@/views/link/AccessConfig/index.vue')
-    },
-    {
-        path: '/link/accessConfig/detail/add',
-        component: () => import('@/views/link/AccessConfig/Detail/index.vue')
-    },
-    // system 系统管理
-    {
-        path:'/system/Basis',
-        component: ()=>import('@/views/system/Basis/index.vue')
-    },
-    {
-        path:'/system/api',
-        component: ()=>import('@/views/system/apiPage/index.vue')
-    },
-    {
-        path:'/system/Role',
-        component: ()=>import('@/views/system/Role/index.vue')
-    },
-    {
-        path:'/system/Role/detail/:id',
-        component: ()=>import('@/views/system/Role/Detail/index.vue')
-    },
-    {
-        path:'/system/Permission',
-        component: ()=>import('@/views/system/Permission/index.vue')
-    },
-    {
-        path:'/system/Menu',
-        component: ()=>import('@/views/system/Menu/index.vue')
-    },
-    {
-        path:'/system/Menu/detail/:id',
-        component: ()=>import('@/views/system/Menu/Detail/index.vue')
-    },
     // 初始化
     {
       path: '/init-home',
       component: () => import('@/views/init-home/index.vue')
     },
-    // 物联卡 iot-card
-    {
-      path: '/iot-card/Home',
-      component: () => import('@/views/iot-card/Home/index.vue')
-    },
-    {
-      path: '/iot-card/Dashboard',
-      component: () => import('@/views/iot-card/Dashboard/index.vue')
-    },
-    {
-      path: '/iot-card/CardManagement',
-      component: () => import('@/views/iot-card/CardManagement/index.vue')
-    },
-    // 北向输出
-    {
-        path: '/northbound/DuerOS',
-        component: () => import('@/views/northbound/DuerOS/index.vue')
-    },
-    {
-        path: '/northbound/AliCloud',
-        component: () => import('@/views/northbound/AliCloud/index.vue')
-    },
 
-    // 产品分类 
-    {
-      path: '/iot/device/Category',
-        component: () => import('@/views/device/Category/index.vue')
-    } ,
-    // 产品
-     {
-      path: '/iot/device/Product',
-      component: () => import('@/views/device/Product/index.vue')
-     }
 ]

src/store/menu.ts

@@ -1,11 +1,14 @@
 import { defineStore } from "pinia";
 import { queryOwnThree } from '@/api/system/menu'
 import { filterAsnycRouter } from '@/utils/menu'
+import { cloneDeep } from 'lodash-es'
 
 export const useMenuStore = defineStore({
   id: 'menu',
   state: () => ({
     menus: {},
+    menuData: [],
+    siderMenus: [],
     menusKey: []
   }),
   getters:  {
@@ -51,7 +54,8 @@ export const useMenuStore = defineStore({
         ];
         const resp = await queryOwnThree({ paging: false, terms: params })
         if (resp.success) {
-          const menus = filterAsnycRouter(resp.result)
+          const silderMenus = filterAsnycRouter(cloneDeep(resp.result))
+          const menus = filterAsnycRouter(cloneDeep(resp.result))
           menus.push({
             path: '/',
             redirect: menus[0]?.path,
@@ -59,7 +63,9 @@ export const useMenuStore = defineStore({
               hideInMenu: true
             }
           })
-          this.menus = menus
+          this.menuData = menus
+          this.siderMenus = silderMenus
+          console.log('silderMenus', silderMenus)
           res(menus)
         }
       })

src/utils/menu.ts

@@ -1,11 +1,99 @@
-const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
+const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
 import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
 
-type ExtraRouteItem = {
-  code: string
-  name: string
-  url?: string
-}
+/**
+ * 权限信息
+ */
+export type PermissionInfo = {
+  permission: string;
+  actions: string[];
+};
+
+/**
+ * 按钮信息
+ */
+export type MenuButtonInfo = {
+  id: string;
+  name: string;
+  permissions: PermissionInfo;
+  createTime: number;
+  describe?: string;
+  options: Record<string, any>;
+};
+
+
+export type MenuItem = {
+  id: string;
+  /**
+   * 名称
+   */
+  name: string;
+  /**
+   * 编码
+   */
+  code: string;
+  /**
+   * 所属应用
+   */
+  application: string;
+  /**
+   * 描述
+   */
+  describe: string;
+  /**
+   * url，路由
+   */
+  url: string;
+  /**
+   * 图标
+   */
+  icon: string;
+  /**
+   * 状态, 0为禁用，1为启用
+   */
+  status: number;
+  /**
+   * 绑定权限信息
+   */
+  permissions: PermissionInfo[];
+  /**
+   * 按钮定义信息
+   */
+  buttons: MenuButtonInfo[];
+  /**
+   * 其他配置信息
+   */
+  options: Record<string, any>;
+  /**
+   * 父级ID
+   */
+  parentId: string;
+  /**
+   * 树结构路径
+   */
+  path: string;
+  /**
+   * 排序序号
+   */
+  sortIndex: number;
+  /**
+   * 树层级
+   */
+  level: number;
+  createTime: number;
+  redirect?: string;
+  children?: MenuItem[];
+  accessSupport?: { text: string; value: string };
+  appId?: string; //应用id
+  isShow?: boolean;
+  meta?: {
+    title?: string
+    icon?: string
+    [key: string]: any
+  },
+  component?: any
+};
+
 // 额外子级路由
 const extraRouteObj = {
   'media/Cascade': {
@@ -59,53 +147,82 @@ const extraRouteObj = {
 
 
 const resolveComponent = (name: any) => {
-  // TODO 暂时用system进行测试
   const importPage = pagesComponent[`../views/${name}/index.vue`];
-  // if (!importPage) {
-  //   throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
-  // }
-
+  if (!importPage) {
+    console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
+  }
   //@ts-ignore
-  return !importPage ? BlankLayoutPage :  importPage.default
-  // return importPage.default
+  return !!importPage ? importPage.default : undefined
 }
 
-const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
+const findChildrenRoute = (code: string, url: string): MenuItem[] => {
   if (extraRouteObj[code]) {
-    return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
+    return extraRouteObj[code].children.map((route: MenuItem) => {
       return {
         url: `${url}/${route.code}`,
         code: route.code,
-        name: route.name
+        name: route.name,
+        isShow: false
       }
     })
   }
   return []
 }
 
+const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
+  const detailComponent = resolveComponent(`${code}/Detail`)
+  if (detailComponent) {
+    return {
+      url: `${url}/Detail/:id`,
+      component: detailComponent,
+      name: '详情信息',
+      isShow: false
+    }
+  }
+  return null
+}
+
+const findDetailRoutes = (routes: any[]): any[] => {
+  const newRoutes: any[] = []
+  routes.forEach((route: any) => {
+    newRoutes.push(route)
+    const detail = findDetailRouteItem(route.code, route.url)
+    if (detail) {
+      newRoutes.push(detail)
+    }
+  })
+  return newRoutes
+}
+
 export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
+
   return asyncRouterMap.map((route: any) => {
 
     route.path = `${route.url}`
     route.meta = {
       icon: route.icon,
-      title: route.name
+      title: route.name,
+      hideInMenu: route.isShow === false
     }
 
     // 查看是否有隐藏子路由
-    route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
-
-    // TODO 查看是否具有详情页
-    // route.children = [...route.children, ]
-
+    const extraChildren = findChildrenRoute(route.code, route.url)
+    route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
+    route.children = findDetailRoutes(route.children)
     if (route.children && route.children.length) {
-      route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
+      // TODO 查看是否具有详情页
       route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
+      const showChildren = route.children.some((r: any) => !r.meta.hideInMenu)
+      if (showChildren) {
+        route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
         route.redirect = route.children[0].url
       } else {
-      route.component = resolveComponent(route.code);
+        route.component = resolveComponent(route.code) || BlankLayoutPage;
       }
-    console.log(route.code, route)
+    } else {
+      route.component = resolveComponent(route.code) || BlankLayoutPage;
+    }
+    delete route.name
     return route
   })
 }

src/utils/regular.ts

@@ -2,3 +2,9 @@
 export const urlReg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
 
 export const isUrl = (path: string): boolean => urlReg.test(path)
+
+// 用于校验只允许输入英文或者数字或者-或者_
+
+export const inputReg = /^[a-zA-Z0-9_\-]+$/
+
+export const isInput = (value: string) => inputReg.test(value)

src/views/404.vue

@@ -0,0 +1,14 @@
+<template>
+  <a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
+  </a-result>
+</template>
+
+<script>
+export default {
+  name: '404.vue'
+}
+</script>
+
+<style scoped>
+
+</style>

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-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[]
+            }
+        })
     }
 })
 
@@ -54,4 +59,23 @@ const isExit = (property: string) => {
     );
   }
   
+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
+    <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

@@ -1,4 +1,5 @@
 <template>
+    <Search :columns="columns" target="device-instance" />
     <JTable
         ref="instanceRef"
         :columns="columns"
@@ -101,8 +102,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 +127,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 +152,7 @@
                                 />
                                 <template v-else>
                                     <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
+                                    <span>{{ item?.text }}</span>
                                 </template>
                             </a-button>
                         </a-popconfirm>
@@ -166,7 +167,7 @@
                                 />
                                 <template v-else>
                                     <AIcon :type="item.icon" />
-                                    <span>{{ item.text }}</span>
+                                    <span>{{ item?.text }}</span>
                                 </template>
                             </a-button>
                         </template>
@@ -176,8 +177,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 +229,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 +264,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 +402,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 +433,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/Product/Save/index.vue

@@ -11,12 +11,21 @@
         cancelText="取消"
         v-bind="layout"
         width="650px"
+        :confirmLoading="loading"
     >
         <div style="margin-top: 10px">
-            <a-form :layout="'vertical'">
+            <a-form
+                :layout="'vertical'"
+                :model="form"
+                :rules="rules"
+                ref="formRef"
+            >
                 <a-row type="flex">
                     <a-col flex="180px">
-                        <a-form-item>
+                        <a-form-item name="photoUrl">
+                            <JUpload v-model="form.photoUrl" />
+                        </a-form-item>
+                        <!-- <a-form-item>
                             <div class="upload-image-warp-logo">
                                 <div class="upload-image-border-logo">
                                     <a-upload
@@ -80,110 +89,105 @@
                                     </div>
                                 </div>
                             </div>
-                        </a-form-item>
+                        </a-form-item> -->
                     </a-col>
                     <a-col flex="auto">
-                        <a-form-item>
+                        <a-form-item name="id">
                             <template #label>
                                 <span>ID</span>
                                 <a-tooltip
                                     title="若不填写，系统将自动生成唯一ID"
                                 >
-                                    <img
-                                        class="img-style"
-                                        :src="getImage('/init-home/mark.png')"
+                                    <AIcon
+                                        type="QuestionCircleOutlined"
+                                        style="margin-left: 2px"
                                     />
                                 </a-tooltip>
                             </template>
                             <a-input
-                                v-model:value="modelRef.id"
+                                v-model:value="form.id"
                                 placeholder="请输入ID"
+                                :disabled="disabled"
                             />
                         </a-form-item>
-                        <a-form-item label="名称">
+                        <a-form-item label="名称" name="name">
                             <a-input
-                                v-model:value="modelRef.name"
+                                v-model:value="form.name"
                                 placeholder="请输入名称"
                             />
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-form-item label="产品分类">
+                <a-form-item label="产品分类" name="classifiedId">
                     <a-tree-select
                         showSearch
-                        v-model:value="modelRef.productId"
+                        v-model:value="form.classifiedId"
                         placeholder="请选择产品分类"
+                        :tree-data="treeList"
+                        @change="valueChange"
+                        :fieldNames="{ label: 'name', value: 'id' }"
+                        :filterTreeNode="
+                            (v, option) => filterSelectNode(v, option)
+                        "
                     >
+                        <template> </template>
                     </a-tree-select>
                 </a-form-item>
-                <a-form-item label="设备类型">
-                    <a-row :span="24" :gutter="20">
+                <a-form-item label="设备类型" name="deviceType">
+                    <a-radio-group
+                        v-model:value="form.deviceType"
+                        style="width: 100%"
+                        @change="changeValue"
+                    >
+                        <a-row :span="24" :gutter="10">
                             <a-col
                                 :span="8"
                                 v-for="item in deviceList"
                                 :key="item.value"
                             >
-                            <ChooseCard
-                                :value="item"
-                                v-bind="item"
-                                @click="handleClick"
-                                :active="_selectedRowKeys.includes(item.value)"
+                                <div class="button-style">
+                                    <a-radio-button
+                                        :value="item.value"
+                                        style="height: 100%; width: 100%"
+                                        :disabled="disabled"
                                     >
-                                <template #img>
-                                    <slot name="img">
-                                        <img
-                                            v-if="item.value === 'device'"
-                                            :src="
-                                                getImage('/device-type-1.png')
-                                            "
-                                        />
-                                        <img
-                                            v-if="
-                                                item.value === 'childrenDevice'
-                                            "
-                                            :src="
-                                                getImage('/device-type-2.png')
-                                            "
-                                        />
-                                        <img
-                                            v-if="item.value === 'gateway'"
-                                            :src="
-                                                getImage(
-                                                    '/device/device-type-3.png',
-                                                )
-                                            "
-                                        />
-                                    </slot>
-                                </template>
-                                <template #content>
-                                    <span
-                                        class="card-style"
-                                        :style="
-                                            _selectedRowKeys.includes(
-                                                item.value,
-                                            )
-                                                ? 'color: #10239e'
-                                                : ''
-                                        "
-                                        >{{
-                                            item.value === 'device'
-                                                ? '直连设备'
-                                                : item.value ===
-                                                  'childrenDevice'
-                                                ? '网关子设备'
-                                                : item.value === 'gateway'
-                                                ? '网关设备'
-                                                : ''
-                                        }}</span
-                                    >
-                                </template>
-                            </ChooseCard>
+                                        <div class="card-content">
+                                            <a-row :gutter="20">
+                                                <a-col :span="10">
+                                                    <!-- 图片 -->
+                                                    <div class="img-style">
+                                                        <img :src="item.logo" />
+                                                    </div>
+                                                </a-col>
+                                                <a-col :span="14">
+                                                    <span class="card-style">
+                                                        {{ item.label }}
+                                                    </span>
                                                 </a-col>
                                             </a-row>
+
+                                            <!-- 勾选 -->
+                                            <div
+                                                v-if="
+                                                    form.deviceType ===
+                                                    item.value
+                                                "
+                                                class="checked-icon"
+                                            >
+                                                <div>
+                                                    <CheckOutlined />
+                                                </div>
+                                            </div>
+                                        </div>
+                                    </a-radio-button>
+                                </div>
+                            </a-col>
+                        </a-row>
+                    </a-radio-group>
                 </a-form-item>
-                <a-form-item label="说明">
+                <a-form-item label="说明" name="describe">
                     <a-textarea
-                        v-model:value="modelRef.describe"
+                        v-model:value="form.describe"
                         placeholder="请输入说明"
                     />
                 </a-form-item>
@@ -193,12 +197,21 @@
 </template>
 
 <script lang="ts" setup>
-import { queryTree } from '@/api/device/category';
+import { category } from '@/api/device/product';
 import { Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm.ts';
 import { message } from 'ant-design-vue';
 import ChooseCard from '../ChooseCard/index.vue';
+import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
 import { FILE_UPLOAD } from '@/api/comm';
+import { isInput } from '@/utils/regular';
+import type { Rule } from 'ant-design-vue/es/form';
+import { queryProductId } from '@/api/device/product';
+import {
+    SearchOutlined,
+    CheckOutlined,
+    DeleteOutlined,
+} from '@ant-design/icons-vue';
 
 const emit = defineEmits(['close', 'save']);
 const props = defineProps({
@@ -211,9 +224,12 @@ const props = defineProps({
         default: 0,
     },
 });
+const loading = ref<boolean>(false);
 const treeList = ref<Record<string, any>[]>([]);
-const visible = ref(false);
-const logoLoading = ref(false);
+const visible = ref<boolean>(false);
+const logoLoading = ref<boolean>(false);
+const formRef = ref();
+const disabled = ref<boolean>(false);
 const useForm = Form.useForm;
 const _selectedRowKeys = ref([]);
 const photoValue = ref('/images/device-product.png');
@@ -229,42 +245,115 @@ const deviceList = ref([
     {
         label: '直连设备',
         value: 'device',
+        logo: getImage('/device-type-1.png'),
     },
     {
         label: '网关子设备',
         value: 'childrenDevice',
+        logo: getImage('/device-type-2.png'),
     },
     {
         label: '网关设备',
         value: 'gateway',
+        logo: getImage('/device/device-type-3.png'),
     },
 ]);
 
-const modelRef = reactive({
+const form = reactive({
     id: '',
     name: '',
     classifiedId: '',
     classifiedName: '',
     deviceType: '',
     describe: '',
-    photoUrl: '',
+    photoUrl: getImage('/device/instance/device-card.png'),
+});
+/**
+ * 校验id
+ */
+const validateInput = async (_rule: Rule, value: string) => {
+    if (value) {
+        if (!isInput(value)) {
+            return Promise.reject('请输入英文或者数字或者-或者_');
+        } else {
+            const res = await queryProductId(value);
+            if (res.status === 200 && res.result) {
+                return Promise.reject('ID重复');
+            } else {
+                return Promise.resolve();
+            }
+        }
+    } else {
+        return Promise.resolve();
+    }
+};
+/**
+ * 校验是否选择设备类型
+ */
+const validateDeviceType = async (_rule: Rule, value: string) => {
+    if (!value) {
+        return Promise.reject('请选择设备类型');
+    } else {
+        return Promise.resolve();
+    }
+};
+const rules = reactive({
+    id: [{ validator: validateInput, trigger: 'blur' }],
+    name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
+    deviceType: [
+        {
+            required: true,
+            validator: validateDeviceType,
+            trigger: 'blur',
+        },
+    ],
 });
 
-watch(
-    () => props.isAdd,
-    () => {
-        queryTree({ paging: false }).then((resp) => {
+const valueChange = (value: string, label: string) => {
+    form.classifiedName = label[0];
+};
+/**
+ * 查询产品分类
+ */
+const queryProductTree = async () => {
+    category({
+        paging: false,
+    }).then((resp) => {
         if (resp.status === 200) {
             treeList.value = resp.result;
         }
     });
+};
+watch(
+    () => props.isAdd,
+    () => {
+        // queryProductTree();
     },
     { immediate: true, deep: true },
 );
 /**
  * 显示弹窗
  */
-const show = () => {
+const show = (data: any) => {
+    console.log(props.isAdd, '11111');
+    if (props.isAdd === 2) {
+        // form.name = data.name;
+        // form.classifiedId = data.classifiedId;
+        // form.classifiedName = data.classifiedName;
+        // form.photoUrl = data.photoUrl || photoValue.value;
+        // form.deviceType = data.deviceType.value;
+        // form.describe = form.describe;
+        // form.id = data.id;
+        // disabled.value = true;
+    } else {
+        // form.name = '';
+        // form.classifiedId = '';
+        // form.classifiedName = '';
+        // form.photoUrl = photoValue.value;
+        // form.deviceType = '';
+        // form.describe = '';
+        // form.id = '';
+    }
     visible.value = true;
 };
 
@@ -274,11 +363,18 @@ const show = () => {
 const close = () => {
     visible.value = false;
 };
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    form,
+    rules,
+);
 /**
- * 卡片点击事件
+ * 提交表单数据
  */
-const handleClick = (dt: any) => {
-    _selectedRowKeys.value = dt;
+const submitData = () => {
+    formRef.value
+        .validate()
+        .then(async () => {})
+        .catch((err: any) => {});
 };
 /**
  * 文件上传之前
@@ -306,9 +402,13 @@ const handleChange = (info: any) => {
     if (info.file.status === 'done') {
         info.file.url = info.file.response?.result;
         logoLoading.value = false;
-        logoLoading.value = info.file.response?.result;
+        photoValue.value = info.file.response?.result;
     }
 };
+/**
+ * 初始化
+ */
+// queryProductTree();
 defineExpose({
     show: show,
 });
@@ -316,7 +416,7 @@ defineExpose({
 <style scoped lang="less">
 .card-style {
     position: relative;
-    top: 8px;
+    top: 19px;
 }
 .upload-image-warp-logo {
     display: flex;
@@ -383,4 +483,37 @@ defineExpose({
         }
     }
 }
+.button-style {
+    background-color: #fff;
+    height: 66px;
+    .card-content {
+        width: 100%;
+        .img-style {
+            position: relative;
+            top: 16px;
+        }
+        .checked-icon {
+            position: absolute;
+            right: -22px;
+            bottom: -22px;
+            z-index: 2;
+            width: 44px;
+            height: 44px;
+            color: #2f54eb;
+            // background-color: #2f54eb;
+            transform: rotate(-45deg);
+
+            > div {
+                position: relative;
+                height: 100%;
+                transform: rotate(45deg);
+                background-color: transparent;
+            }
+        }
+    }
+    // &:hover {
+    //     color: #2f54eb;
+    //     border: 1px solid #2f54eb;
+    // }
+}
 </style>

src/views/device/Product/index.vue

@@ -107,7 +107,7 @@
             </template>
         </JTable>
         <!-- 新增、编辑 -->
-        <Save ref="saveRef" />
+        <Save ref="saveRef" :isAdd="isAdd" :title="title" />
     </a-card>
 </template>
 
@@ -140,6 +140,8 @@ import Save from './Save/index.vue';
 /**
  * 表格数据
  */
+const isAdd = ref<number>(0);
+const title = ref<string>('');
 const statusMap = new Map();
 statusMap.set(1, 'success');
 statusMap.set(0, 'error');
@@ -187,6 +189,7 @@ const columns = [
 ];
 
 const _selectedRowKeys = ref<string[]>([]);
+const currentForm = ref({});
 
 const onSelectChange = (keys: string[]) => {
     _selectedRowKeys.value = [...keys];
@@ -205,11 +208,14 @@ const handleClick = (dt: any) => {
     }
 };
 
-const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
     if (!data) {
         return [];
     }
-    return [
+    const actions = [
         {
             key: 'view',
             text: '查看',
@@ -217,6 +223,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                 title: '查看',
             },
             icon: 'EyeOutlined',
+            onClick: () => {},
         },
         {
             key: 'edit',
@@ -226,6 +233,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
             },
 
             icon: 'EditOutlined',
+            onClick: () => {
+                title.value = '编辑';
+                isAdd.value = 2;
+                nextTick(() => {
+                    saveRef.value.show(data);
+                });
+            },
         },
         {
             key: 'download',
@@ -283,10 +297,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
             icon: 'DeleteOutlined',
         },
     ];
+    return actions;
 };
 
 const add = () => {
-    saveRef.value.show();
+    isAdd.value = 1;
+    title.value = '新增';
+    saveRef.value.show(currentForm.value);
 };
 
 // 筛选

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

@@ -19,6 +19,7 @@
                 ref="bindDeviceRef"
                 :columns="columns"
                 :request="queryUnbounded"
+                model="TABLE"
                 :defaultParams="{
                     sorts: [{ name: 'createTime', order: 'desc' }],
                 }"

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/Save.vue

@@ -0,0 +1,191 @@
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="600px"
+        :visible="true"
+        title="充值"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div>
+            <div class="modal-info">
+                <AIcon
+                    type="ExclamationCircleOutlined"
+                    style="margin-right: 6px"
+                />暂只支持移动OneLink平台
+            </div>
+            <a-form
+                layout="vertical"
+                ref="formRef"
+                :rules="rules"
+                :model="modelRef"
+            >
+                <a-form-item label="平台对接" name="configId">
+                    <a-select
+                        v-model:value="modelRef.configId"
+                        :options="configList"
+                        allowClear
+                        show-search
+                        style="width: 100%"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+                <a-form-item label="账户id" name="rechargeId">
+                    <a-input
+                        v-model:value="modelRef.rechargeId"
+                        placeholder="请输入账户id"
+                    />
+                </a-form-item>
+                <a-form-item label="充值金额" name="chargeMoney">
+                    <a-input-number
+                        allowClear
+                        :precision="2"
+                        style="width: 100%"
+                        v-model:value="modelRef.chargeMoney"
+                        :min="1"
+                        :max="500"
+                        placeholder="请输入1~500之间的金额"
+                    />
+                </a-form-item>
+
+                <a-form-item label="支付方式" name="paymentType">
+                    <a-select
+                        allowClear
+                        :options="PaymentMethod"
+                        v-model:value="modelRef.paymentType"
+                        placeholder="请选择支付方式"
+                    >
+                    </a-select>
+                </a-form-item>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script lang="ts" setup>
+import { queryPlatformNoPage, recharge } from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+import { PaymentMethod } from '@/views/iot-card/data';
+
+const emit = defineEmits(['change']);
+
+const btnLoading = ref<boolean>(false);
+const configList = ref<Record<string, any>[]>([]);
+
+const formRef = ref();
+
+const modelRef = reactive({
+    configId: undefined,
+    rechargeId: '',
+    chargeMoney: undefined,
+    paymentType: undefined,
+});
+
+const rules = {
+    configId: [
+        {
+            required: true,
+            message: '请选择平台对接',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    rechargeId: [
+        {
+            required: true,
+            message: '请输入账户id',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    chargeMoney: [
+        {
+            required: true,
+            message: '请输入充值金额',
+        },
+        // {
+        //     min: 1,
+        //     max: 500,
+        //     message: '请输入1~500之间的数字',
+        // },
+    ],
+    paymentType: [
+        {
+            required: true,
+            message: '请选择支付方式',
+        },
+    ],
+};
+
+const queryProvidersList = () => {
+    queryPlatformNoPage({
+        paging: false,
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'operatorName',
+                        termType: 'eq',
+                        value: 'onelink',
+                    },
+                    {
+                        column: 'state',
+                        termType: 'eq',
+                        value: 'enabled',
+                        type: 'and',
+                    },
+                ],
+            },
+        ],
+    }).then((res: any) => {
+        configList.value = res.result.map((item: any) => ({
+            label: item.name,
+            value: item.id,
+        }));
+    });
+};
+
+const handleCancel = () => {
+    emit('change');
+    formRef.value.resetFields();
+};
+
+const handleOk = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            btnLoading.value = true;
+            const resp: any = await recharge(toRaw(modelRef));
+            btnLoading.value = false;
+            if (resp.status === 200) {
+                if (resp.result === '失败') {
+                    message.error('缴费失败');
+                } else {
+                    window.open(resp.result);
+                }
+                emit('change');
+                formRef.value.resetFields();
+            }
+        })
+        .catch((err: any) => {
+            console.log('error', err);
+        });
+};
+
+queryProvidersList();
+</script>
+
+<style scoped lang="less">
+.modal-info {
+    color: rgba(0, 0, 0, 0.55);
+    background-color: #f6f6f6;
+    padding: 6px 12px;
+    margin-bottom: 12px;
+}
+</style>

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

@@ -0,0 +1,170 @@
+<!-- 充值管理 -->
+<template>
+    <div class="page-container">
+        <Search
+            :columns="columns"
+            target="iot-card-management-search"
+            @search="handleSearch"
+        />
+        <JTable
+            ref="rechargeRef"
+            :columns="columns"
+            :request="queryRechargeList"
+            model="TABLE"
+            :defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
+            :params="params"
+        >
+            <template #headerTitle>
+                <a-space>
+                    <a-button type="primary" @click="visible = true">
+                        充值
+                    </a-button>
+                    <div class="tips-text">
+                        <span style="margin-right: 8px; font-size: 16px">
+                            <AIcon type="ExclamationCircleOutlined"></AIcon>
+                        </span>
+                        本平台仅提供充值入口，具体充值结果需以运营商的充值结果为准
+                    </div>
+                </a-space>
+            </template>
+            <template #createTime="slotProps">
+                {{
+                    slotProps.createTime
+                        ? moment(slotProps.createTime).format(
+                              'YYYY-MM-DD HH:mm:ss',
+                          )
+                        : ''
+                }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip
+                        v-for="i in getActions(slotProps)"
+                        :key="i.key"
+                        v-bind="i.tooltip"
+                    >
+                        <a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-popconfirm>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            v-else
+                            @click="i.onClick && i.onClick(slotProps)"
+                        >
+                            <a-button
+                                :disabled="i.disabled"
+                                style="padding: 0"
+                                type="link"
+                                ><AIcon :type="i.icon"
+                            /></a-button>
+                        </a-button>
+                    </a-tooltip>
+                </a-space>
+            </template>
+        </JTable>
+        <!-- 充值 -->
+        <Save v-if="visible" @change="saveChange" />
+    </div>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import type { ActionsType } from '@/components/Table';
+import { queryRechargeList } from '@/api/iot-card/cardManagement';
+import Save from './Save.vue';
+
+const rechargeRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const visible = ref<boolean>(false);
+
+const columns = [
+    {
+        title: '充值金额',
+        dataIndex: 'chargeMoney',
+        key: 'chargeMoney',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '支付方式',
+        dataIndex: 'paymentType',
+        key: 'paymentType',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '订单号',
+        dataIndex: 'orderNumber',
+        key: 'orderNumber',
+        ellipsis: true,
+    },
+    {
+        title: '支付URL',
+        dataIndex: 'url',
+        key: 'url',
+    },
+    {
+        title: '订单时间',
+        dataIndex: 'createTime',
+        key: 'createTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) return [];
+    return [
+        {
+            key: 'view',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: () => {},
+        },
+    ];
+};
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+/**
+ * 充值关闭弹窗
+ * @param val 加载表格
+ */
+const saveChange = (val: any) => {
+    visible.value = false;
+    if (val) {
+        rechargeRef.value?.reload();
+    }
+};
+</script>
+
+<style scoped lang="less">
+.tips-text {
+    padding-left: 24px;
+    background: #fff;
+    font-size: 14px;
+}
+</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/northbound/DuerOS/Save/index.vue

@@ -0,0 +1,3 @@
+<template>
+    123
+</template>

src/views/northbound/DuerOS/index.vue

@@ -148,7 +148,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 }
 
 const add = () => {
-    message.warn('123')
+    // router.push(`/northbound/DuerOS/detail/:id`)
 }
 
 </script>

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