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

src/api/device/instance.ts

@@ -100,3 +100,23 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
   */
 export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
 
+/**
+ * 验证设备ID是否重复
+ * @param id 设备id
+ * @returns 
+ */
+export const isExists = (id: string) => server.get(`/device-instance/${id}/exists`)
+
+/**
+ * 修改设备信息
+ * @param data 设备信息
+ * @returns 
+ */
+export const update = (data: Partial<DeviceInstance>) => data.id ? server.patch(`/device-instance`, data) : server.post(`/device-instance`, data)
+
+/**
+ * 获取配置信息
+ * @param id 设备id
+ * @returns 
+ */
+export const getConfigMetadata = (id: string) => server.get(`/device-instance/${id}/config-metadata`)

src/api/iot-card/cardManagement.ts

@@ -65,3 +65,36 @@ export const sync = () => server.get(`/network/card/state/_sync`);
  * @param data
  */
 export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);
+
+/**
+ * 解绑设备
+ * @param cardId
+ */
+export const unbind = (cardId: string) => server.get(`/network/card/${cardId}/_unbind`);
+
+/**
+ * 分页查询未绑定设备列表
+ * @param data
+*/
+export const queryUnbounded = (data: any) => server.post(`/network/card/unbounded/device/_query`, data);
+
+/**
+ * 绑定设备
+ * @param cardId
+ * @param deviceId 选择的设备id
+ */
+export const bind = (cardId: string | any, deviceId: string) => server.get(`/network/card/${cardId}/${deviceId}/_bind`);
+
+/**
+ * 导入物联卡实例
+ * @param configId 对接平台id
+ * @param params
+ */
+export const _import = (configId: any, params: any) => server.get(`/network/card/${configId}/_import`, params);
+
+/**
+ * 根据id批量导出
+ * @param format 类型 xlsx、csv
+ * @param params
+ */
+export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');

src/api/link/certificate.ts

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

src/api/system/menu.ts

@@ -1,3 +1,13 @@
-import server from '@/utils/request'
+import server from '@/utils/request';
+
+// 获取当前用户可访问菜单
+export const getMenuTree_api = (data: object) => server.post(`/menu/_all/tree`, data);
 
 export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tree', data)
+
+
+
+// 获取资产类型
+export const getAssetsType_api = () => server.get(`/asset/types`);
+// 获取菜单详情
+export const getMenuDetail_api = (id:string) => server.get(`/menu/${id}`);

src/components/CardBox/index.vue

@@ -232,6 +232,17 @@ const handleClick = () => {
             :deep(.card-item-content-title) {
                 cursor: pointer;
             }
+
+            :deep(.card-item-heard-name) {
+                font-weight: 700;
+                font-size: 16px;
+                margin-bottom: 12px;
+            }
+
+            :deep(.card-item-content-text) {
+                color: rgba(0, 0, 0, 0.75);
+                font-size: 12px;
+            }
         }
 
         .card-mask {

src/components/JUpload/index.vue

@@ -15,14 +15,14 @@
                 v-bind="props"
             >
                 <div class="upload-image-content" :style="props.style">
-                    <template v-if="myValue">
+                    <template v-if="imageUrl">
                         <!-- <div class="upload-image"
                         :style="{
                             backgroundSize: props.backgroundSize,
                             backgroundImage: `url(${imageUrl})`
                         }"
                         ></div> -->
-                        <img :src="myValue" class="upload-image" />
+                        <img :src="imageUrl" class="upload-image" />
                         <div class="upload-image-mask">点击修改</div>
                     </template>
                     <template v-else>
@@ -32,7 +32,7 @@
                 </div>
             </a-upload>
             <div class="upload-loading-mask" v-if="props.disabled"></div>
-            <div class="upload-loading-mask" v-if="myValue && loading">
+            <div class="upload-loading-mask" v-if="imageUrl && loading">
                 <AIcon type="LoadingOutlined" style="font-size: 20px" />
             </div>
         </div>
@@ -56,7 +56,6 @@ interface JUploadProps extends UploadProps {
     errorMessage?: string;
     size?: number;
     style?: CSSProperties;
-    backgroundSize?: string;
 }
 
 const emit = defineEmits<Emits>();
@@ -76,24 +75,23 @@ const loading = ref<boolean>(false)
 const imageUrl = ref<string>(props?.modelValue || '')
 const imageTypes = props.types ? props.types : ['image/jpeg', 'image/png'];
 
-const myValue = computed({
-    get: () => {
-        return props.modelValue;
-    },
-    set: (val: any) => {
-        imageUrl.value = val;
-        emit('update:modelValue', val);
-    },
-});
+watch(() => props.modelValue,
+(newValue)=> {
+  console.log(newValue)
+  imageUrl.value = newValue
+}, {
+  deep: true,
+  immediate: true
+})
 
 const handleChange = (info: UploadChangeParam) => {
       if (info.file.status === 'uploading') {
         loading.value = true;
       }
       if (info.file.status === 'done') {
-        myValue.value = info.file.response?.result
+        imageUrl.value = info.file.response?.result
         loading.value = false;
-        emit('update:modelValue', imageUrl.value)
+        emit('update:modelValue', info.file.response?.result)
       }
       if (info.file.status === 'error') {
         loading.value = false;

src/components/Layout/BasicLayout.tsx

@@ -7,21 +7,16 @@ import {
   provide
 } from 'vue'
 
-import type { DefineComponent, ExtractPropTypes, PropType, CSSProperties, Plugin, App } from 'vue'
+import type { ExtractPropTypes, PropType, CSSProperties} from 'vue'
 import { Layout } from 'ant-design-vue'
-import useConfigInject from 'ant-design-vue/es/_util/hooks/useConfigInject'
-import { defaultSettingProps, defaultSettings } from './defaultSetting'
-import type { PureSettings } from './defaultSetting'
+import { defaultSettingProps } from './defaultSetting'
 import type { BreadcrumbProps, RouteContextProps } from './RouteContext'
 import type {
   BreadcrumbRender,
   CollapsedButtonRender, CustomRender,
-  FooterRender,
-  HeaderContentRender,
   HeaderRender,
   MenuContentRender,
   MenuExtraRender,
-  MenuFooterRender,
   MenuHeaderRender,
   MenuItemRender,
   RightContentRender,

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

@@ -8,7 +8,6 @@ import { defaultSettingProps } from 'components/Layout/defaultSetting'
 import PropTypes from 'ant-design-vue/es/_util/vue-types'
 import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
 import './index.less'
-import { omit } from 'lodash-es'
 import { RouteRecordRaw } from 'vue-router'
 import { clearMenuItem } from 'components/Layout/utils'
 

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

@@ -1,13 +1,8 @@
-import type { ExtractPropTypes, PropType } from 'vue'
-import PropTypes from 'ant-design-vue/es/_util/vue-types';
-import type { MenuDataItem, WithFalse, ProProps, CustomRender, RightContentRender } from '../../typings'
-import { siderMenuProps } from '../SiderMenu/SiderMenu'
-import { defaultSettingProps } from 'components/Layout/defaultSetting'
+import type { ExtractPropTypes } from 'vue'
 import Header, { headerProps } from './Header'
 import { useRouteContext } from 'components/Layout/RouteContext'
 import type { RouteRecordRaw } from 'vue-router'
 import { clearMenuItem } from 'components/Layout/utils'
-import DefaultSetting from '../../../../../config/config'
 import { Layout } from 'ant-design-vue'
 
 export const headerViewProps = {

src/components/Layout/components/PageContainer/index.tsx

@@ -195,6 +195,7 @@ const PageContainer = defineComponent({
       const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra');
       const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent');
       const subTitle = getSlotVNode<DefaultPropRender>(slots, props, 'subTitle');
+      const title = getSlotVNode<DefaultPropRender>(slots, props, 'title');
 
       // @ts-ignore
       return (
@@ -202,6 +203,7 @@ const PageContainer = defineComponent({
           {...props}
           prefixCls={undefined}
           ghost={ghost.value}
+          title={title}
           subTitle={subTitle}
           content={headerContent}
           // tags={tags}

src/components/Layout/components/SiderMenu/SiderMenu.tsx

@@ -18,10 +18,6 @@ import './SiderMenu.less'
 import { computed } from 'vue'
 import { omit } from 'lodash-es'
 
-export type PrivateSiderMenuProps = {
-  matchMenuKeys?: string[];
-}
-
 const { Sider } = Layout
 
 export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
@@ -89,7 +85,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
   const {
     collapsed,
     collapsedWidth = 48,
-    menuExtraRender = false,
     menuContentRender = false,
     collapsedButtonRender = defaultRenderCollapsedButton,
   } = props;
@@ -97,7 +92,6 @@ const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) =
   const context = useRouteContext();
   const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
 
-  const extraDom = menuExtraRender && menuExtraRender(props);
 
   const handleSelect = ($event: string[]) => {
     if (props.onSelect) {

src/components/PermissionButton/index.vue

@@ -4,14 +4,14 @@
       <a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
         <a-tooltip v-if="tooltip" v-bind="tooltip">
           <slot v-if="noButton"></slot>
-          <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+          <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
             <slot></slot>
             <template #icon>
               <slot name="icon"></slot>
             </template>
           </a-button>
         </a-tooltip>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
           <slot></slot>
           <template #icon>
             <slot name="icon"></slot>
@@ -22,7 +22,7 @@
     <template v-else-if="tooltip">
       <a-tooltip v-bind="tooltip">
         <slot v-if="noButton"></slot>
-        <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+        <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
           <slot></slot>
           <template #icon>
             <slot name="icon"></slot>
@@ -32,7 +32,7 @@
     </template>
     <template v-else>
       <slot v-if="noButton"></slot>
-      <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+      <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
         <slot></slot>
         <template #icon>
           <slot name="icon"></slot>
@@ -42,7 +42,7 @@
   </template>
   <a-tooltip v-else title="没有权限">
     <slot v-if="noButton"></slot>
-    <a-button v-else v-bind="buttonProps" :disabled="_isPermission">
+    <a-button v-else v-bind="buttonProps" :disabled="_isPermission" @click="handleClick">
       <slot></slot>
       <template #icon>
         <slot name="icon"></slot>
@@ -54,6 +54,12 @@
 import type { ButtonProps, TooltipProps, PopconfirmProps } from 'ant-design-vue'
 import { usePermissionStore } from '@/store/permission';
 
+interface PermissionButtonEmits {
+  (e: 'click', data: MouseEvent): void;
+}
+
+const emits = defineEmits<PermissionButtonEmits>()
+
 interface PermissionButtonProps extends ButtonProps {
   tooltip?: TooltipProps;
   popConfirm?: PopconfirmProps;
@@ -80,6 +86,9 @@ const _isPermission = computed(() =>
       : false
     : true
 )
+const handleClick = (e: MouseEvent) => {
+  emits('click', e)
+}
 </script>
 <style scoped lang="less">
 

src/router/index.ts

@@ -1,6 +1,6 @@
 import { createRouter, createWebHashHistory } from 'vue-router'
 import menus, { LoginPath } from './menu'
-import { getToken } from '@/utils/comm'
+import { cleanToken, getToken } from '@/utils/comm'
 import { useUserInfo } from '@/store/userInfo'
 import { useSystem } from '@/store/system'
 
@@ -27,20 +27,25 @@ router.beforeEach((to, from, next) => {
       } else {
         const userInfo = useUserInfo()
         const system = useSystem()
-        if (!userInfo.$state.userInfos.username) {
-          userInfo.getUserInfo()
-          system.getSystemVersion().then((menuData: any[]) => {
-            menuData.forEach(r => {
-              router.addRoute('main', r)
-            })
-            const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
-            if(to.path === redirect) {
-              next({ ...to, replace: true })
-            } else {
-              next({ path: redirect })
-            }
-          })
 
+        if (!userInfo.userInfos.username) {
+          userInfo.getUserInfo().then(() => {
+            system.getSystemVersion().then((menuData: any[]) => {
+              menuData.forEach(r => {
+                router.addRoute('main', r)
+              })
+              const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
+              if(to.path === redirect) {
+                next({ ...to, replace: true })
+              } else {
+                next({ path: redirect })
+              }
+            })
+          }).catch(() => {
+            console.log('userInfo', userInfo)
+            cleanToken()
+            next({ path: LoginPath })
+          })
         } else {
           next()
         }

src/router/menu.ts

@@ -68,9 +68,15 @@ export default [
 
     // 设备管理
     {
-        path: '/device/Instance',
+        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',
@@ -81,7 +87,7 @@ export default [
         component: () => import('@/views/link/Certificate/index.vue')
     },
     {
-        path: '/link/certificate/detail/add',
+        path: '/link/certificate/detail/:type/:id',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
     {
@@ -113,6 +119,14 @@ export default [
         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',

src/store/instance.ts

@@ -1,13 +1,28 @@
 import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
-import { defineStore } from "pinia";
+import { defineStore } from "pinia"
+import { detail } from '@/api/device/instance'
 
 export const useInstanceStore = defineStore({
   id: 'device',
-  state: () => ({} as InstanceModel),
+  state: () => ({
+    current: {} as Partial<DeviceInstance>,
+    detail: {} as Partial<DeviceInstance>,
+    tabActiveKey: 'Info'
+  }),
   actions: {
     setCurrent(current: Partial<DeviceInstance>) {
       this.current = current
       this.detail = current
-    }
+    },
+    async refresh(id: string) {
+      const resp = await detail(id)
+      if(resp.status === 200){
+        this.current = resp.result
+        this.detail = resp.result
+      }
+    },
+    setTabActiveKey(key: string) {
+      this.tabActiveKey = key
+    },
   }
 })

src/utils/comm.ts

@@ -1,7 +1,5 @@
 import type { Slots } from 'vue'
 import { TOKEN_KEY } from '@/utils/variable'
-import { Terms } from 'components/Search/types'
-import { urlReg } from '@/utils/regular'
 
 /**
  * 静态图片资源处理
@@ -40,6 +38,10 @@ export const getToken = () => {
   return LocalStore.get(TOKEN_KEY)
 }
 
+export const cleanToken = () => {
+  LocalStore.remove(TOKEN_KEY)
+}
+
 /**
  * TreeSelect过滤
  * @param value 过滤值
@@ -74,30 +76,3 @@ export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, pr
   }
   return (props[prop] || slots[prop]?.()) as T;
 }
-
-/**
- * 时间转换为'2022-01-02 14:03:05'
- * @param date 时间对象
- * @returns
- */
-export const dateFormat = (dateSouce:any):string|Error => {
-    let date = null
-    try {
-        date = new Date(dateSouce)
-    } catch (error) {
-        return new Error('请传入日期格式数据')
-    }
-    let year = date.getFullYear();
-    let month: number | string = date.getMonth() + 1;
-    let day: number | string = date.getDate();
-    let hour: number | string = date.getHours();
-    let minutes: number | string = date.getMinutes();
-    let seconds: number | string = date.getSeconds();
-    month = (month < 10) ? '0' + month : month;
-    day = (day < 10) ? '0' + day : day;
-    hour = (hour < 10) ? '0' + hour : hour;
-    minutes = (minutes < 10) ? '0' + minutes : minutes;
-    seconds = (seconds < 10) ? '0' + seconds : seconds;
-    return year + "-" + month + "-" + day
-      + " " + hour + ":" + minutes + ":" + seconds;
-}

src/utils/utils.ts

@@ -54,6 +54,17 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
   formElement.submit();
   document.body.removeChild(formElement);
 };
+
+export const downloadFileByUrl = (url: string, name: string, type: string) => {
+  const downNode = document.createElement('a');
+  downNode.style.display = 'none';
+  downNode.download = `${name}.${type}`;
+  downNode.href = url;
+  document.body.appendChild(downNode);
+  downNode.click();
+  document.body.removeChild(downNode);
+};
+
 // 是否不是community版本
 export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
 

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

@@ -0,0 +1,57 @@
+<template>
+    <div style="margin-top: 20px" v-if="config.length">
+        <div style="display: flex;">
+            <div style="font-size: 16px; font-weight: 700">配置</div>
+            <a-space>
+               <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
+               <a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+               <a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+            </a-space>
+        </div>
+        <a-descriptions bordered size="small" v-for="i in config" :key="i.name">
+            <template #title><h4>{{i.name}}</h4></template>
+            <a-descriptions-item v-for="item in i.properties" :key="item.property">
+                <template #label>
+                    <a-tooltip v-if="item.description" :title="item.description"><AIcon type="QuestionCircleOutlined" /></a-tooltip>
+                    <span>{{item.name}}</span>
+                </template>
+                <span v-if="item.type.type === 'password' && instanceStore.current?.configuration?.[item.property]?.length > 0">******</span>
+                <span v-else>
+                    <span>{{ instanceStore.current?.configuration?.[item.property] || '' }}</span>
+                    <a-tooltip v-if="isExit(item.property)" :title="`有效值:${instanceStore.current?.configuration?.[item.property]}`"><AIcon type="QuestionCircleOutlined" /></a-tooltip>
+                </span>
+            </a-descriptions-item>
+        </a-descriptions>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from "@/store/instance"
+import { ConfigMetadata } from "@/views/device/Product/typings"
+import { getConfigMetadata } from '@/api/device/instance'
+
+const instanceStore = useInstanceStore()
+const visible = ref<boolean>(false)
+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[]
+        //     }
+        // })
+    }
+})
+
+const isExit = (property: string) => {
+    return (
+      instanceStore.current?.cachedConfiguration &&
+      instanceStore.current?.cachedConfiguration[property] !== undefined &&
+      instanceStore.current?.configuration &&
+      instanceStore.current?.configuration[property] !==
+        instanceStore.current?.cachedConfiguration[property]
+    );
+  }
+
+</script>

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

@@ -0,0 +1,23 @@
+<template>
+    <div style="margin-top: 20px">
+        <a-descriptions bordered>
+            <template #title>
+                关系信息
+                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑<a-tooltip title="管理设备与其他业务的关联关系，关系来源于关系配置"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
+            </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>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from "@/store/instance"
+const instanceStore = useInstanceStore()
+
+const dataSource = ref<Record<any, any>[]>([])
+
+watchEffect(() => {
+    const arr = (instanceStore.current?.relations || []).reverse()
+    dataSource.value = arr as Record<any, any>[]
+})
+</script>

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

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

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

@@ -0,0 +1,45 @@
+<template>
+    <a-card>
+        <a-descriptions bordered>
+            <template #title>
+                设备信息
+                <a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
+            </template>
+            <a-descriptions-item label="设备ID">{{ instanceStore.current.id }}</a-descriptions-item>
+            <a-descriptions-item label="产品名称">{{ instanceStore.current.productName }}</a-descriptions-item>
+            <a-descriptions-item label="产品分类">{{ instanceStore.current.classifiedName }}</a-descriptions-item>
+            <a-descriptions-item label="设备类型">{{ instanceStore.current.deviceType?.text }}</a-descriptions-item>
+            <a-descriptions-item label="固件版本">{{ instanceStore.current.firmwareInfo?.version }}</a-descriptions-item>
+            <a-descriptions-item label="连接协议">{{ instanceStore.current.protocolName }}</a-descriptions-item>
+            <a-descriptions-item label="消息协议">{{ instanceStore.current.transport }}</a-descriptions-item>
+            <a-descriptions-item label="创建时间">{{ instanceStore.current.createTime ? moment(instanceStore.current.createTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</a-descriptions-item>
+            <a-descriptions-item label="注册时间">{{ instanceStore.current.registerTime ? moment(instanceStore.current.registerTime).format('YYYY-MM-DD HH:mm:ss') : ''}}</a-descriptions-item>
+            <a-descriptions-item label="最后上线时间">{{ instanceStore.current.onlineTime ? moment(instanceStore.current.onlineTime).format('YYYY-MM-DD HH:mm:ss') : '' }}</a-descriptions-item>
+            <a-descriptions-item label="父设备" v-if="instanceStore.current.deviceType?.value === 'childrenDevice'">{{ instanceStore.current.parentId }}</a-descriptions-item>
+            <a-descriptions-item label="说明">{{ instanceStore.current.description }}</a-descriptions-item>
+        </a-descriptions>
+        <Config />
+        <Tags v-if="instanceStore.current?.tags && instanceStore.current?.tags.length > 0 " />
+        <Relation v-if="instanceStore.current?.relations && instanceStore.current?.relations.length > 0" />
+        <Save v-if="visible" :data="instanceStore.current" @close="visible = false" @save="saveBtn" />
+    </a-card>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from '@/store/instance'
+import Save from '../../Save/index.vue'
+import Config from './components/Config/index.vue'
+import Tags from './components/Tags/index.vue'
+import Relation from './components/Relation/index.vue'
+import moment from 'moment'
+
+const visible = ref<boolean>(false)
+const instanceStore = useInstanceStore()
+
+const saveBtn = () => {
+    if(instanceStore.current?.id){
+        instanceStore.refresh(instanceStore.current?.id)
+    }
+    visible.value = false
+}
+</script>

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

@@ -0,0 +1,49 @@
+<template>
+    <page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
+        <template #subTitle><div>{{instanceStore.current.name}}</div></template>
+        <component :is="instanceStore.tabActiveKey" />
+    </page-container>
+</template>
+
+<script lang="ts" setup>
+import { useInstanceStore } from '@/store/instance';
+import Info from './Info/index.vue';
+import Metadata from '../../components/Metadata/index.vue';
+const route = useRoute();
+const instanceStore = useInstanceStore()
+
+const list = [
+    {
+        key: 'Info',
+        tab: '实例信息'
+    },
+    {
+        key: 'Metadata',
+        tab: '物模型'
+    }
+]
+
+const tabs = {
+  Info,
+  Metadata
+}
+
+watch(
+    () => route.params.id,
+    (newId) => {
+        if(newId){
+            instanceStore.tabActiveKey = 'Info'
+            instanceStore.refresh(newId as string)
+        }
+    },
+    {immediate: true, deep: true}
+);
+
+const onBack = () => {
+
+}
+
+const onTabChange = (e: string) => {
+    instanceStore.tabActiveKey = e
+}
+</script>

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

@@ -1,29 +1,83 @@
 <template>
-    <a-modal :maskClosable="false" width="650px" :visible="true" title="新增" @ok="handleCancel" @cancel="handleCancel">
+    <a-modal
+        :maskClosable="false"
+        width="650px"
+        :visible="true"
+        :title="!!props.data.id ? '编辑' : '新增'"
+        @ok="handleSave"
+        @cancel="handleCancel"
+        :confirmLoading="loading"
+    >
         <div style="margin-top: 10px">
-            <a-form :layout="'vertical'">
+            <a-form
+                :layout="'vertical'"
+                ref="formRef"
+                :rules="rules"
+                :model="modelRef"
+            >
                 <a-row type="flex">
                     <a-col flex="180px">
-                        <a-form-item required name="photoUrl">
-                            <JUpload v-model:value="modelRef.photoUrl" />
+                        <a-form-item name="photoUrl">
+                            <JUpload v-model="modelRef.photoUrl" />
                         </a-form-item>
                     </a-col>
                     <a-col flex="auto">
-                        <a-form-item label="ID">
-                            <a-input v-model:value="modelRef.id" placeholder="请输入ID" />
+                        <a-form-item name="id">
+                            <template #label>
+                                <span>
+                                    ID
+                                    <a-tooltip title="若不填写，系统将自动生成唯一ID">
+                                        <AIcon
+                                            type="QuestionCircleOutlined"
+                                            style="margin-left: 2px;" />
+                                    </a-tooltip>
+                                </span>
+                            </template>
+                            <a-input
+                                v-model:value="modelRef.id"
+                                placeholder="请输入ID"
+                                :disabled="!!props.data.id"
+                            />
                         </a-form-item>
-                        <a-form-item label="名称" required>
-                            <a-input v-model:value="modelRef.name" placeholder="请输入名称" />
+                        <a-form-item label="名称" name="name">
+                            <a-input
+                                v-model:value="modelRef.name"
+                                placeholder="请输入名称"
+                            />
                         </a-form-item>
                     </a-col>
                 </a-row>
-                <a-form-item label="产品" required>
-                    <a-select showSearch v-model:value="modelRef.productId" placeholder="请选择产品">
-                        <a-select-option :value="item.id" v-for="item in productList" :key="item.id" :title="item.name"></a-select-option>
+                <a-form-item name="productId">
+                    <template #label>
+                        <span>所属产品
+                            <a-tooltip title="只能选择“正常”状态的产品">
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px" />
+                            </a-tooltip>
+                        </span>
+                    </template>
+                    <a-select
+                        showSearch
+                        v-model:value="modelRef.productId"
+                        placeholder="请选择所属产品"
+                    >
+                        <a-select-option
+                            :value="item.id"
+                            v-for="item in productList"
+                            :key="item.id"
+                            :title="item.name"
+                            :disabled="!!props.data.id"
+                        ></a-select-option>
                     </a-select>
                 </a-form-item>
-                <a-form-item label="说明">
-                    <a-textarea v-model:value="modelRef.describe" placeholder="请输入说明" />
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="modelRef.describe"
+                        placeholder="请输入说明"
+                        showCount
+                        :maxlength="200"
+                    />
                 </a-form-item>
             </a-form>
         </div>
@@ -31,41 +85,130 @@
 </template>
 
 <script lang="ts" setup>
-import { queryNoPagingPost } from '@/api/device/product'
+import { queryNoPagingPost } from '@/api/device/product';
+import { isExists, update } from '@/api/device/instance';
 import { getImage } from '@/utils/comm';
-import { Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 
-const emit = defineEmits(['close', 'save'])
+const emit = defineEmits(['close', 'save']);
 const props = defineProps({
     data: {
         type: Object,
-        default: undefined
-    }
-})
-const productList = ref<Record<string, any>[]>([])
-const useForm = Form.useForm;
+        default: undefined,
+    },
+});
+const productList = ref<Record<string, any>[]>([]);
+const loading = ref<boolean>(false);
+
+const formRef = ref();
 
 const modelRef = reactive({
     productId: undefined,
     id: '',
     name: '',
     describe: '',
-    photoUrl: getImage('/device/instance/device-card.png')
+    photoUrl: getImage('/device/instance/device-card.png'),
 });
 
+const vailId = async (_: Record<string, any>, value: string) => {
+    if (!props?.data?.id && value) {
+        const resp = await isExists(value);
+        if (resp.status === 200 && resp.result) {
+            return Promise.reject('ID重复');
+        } else {
+            return Promise.resolve();
+        }
+    } else {
+        return Promise.resolve();
+    }
+};
+
+const rules = {
+    name: [
+        {
+            required: true,
+            message: '请输入名称',
+        },
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+    ],
+    photoUrl: [
+        {
+            required: true,
+            message: '请上传图标',
+        },
+    ],
+    productId: [
+        {
+            required: true,
+            message: '请选择所属产品',
+        },
+    ],
+    id: [
+        {
+            max: 64,
+            message: '最多输入64个字符',
+        },
+        {
+            pattern: /^[a-zA-Z0-9_\-]+$/,
+            message: '请输入英文或者数字或者-或者_',
+        },
+        {
+            validator: vailId,
+            trigger: 'blur',
+        },
+    ],
+};
+
 watch(
     () => props.data,
-    () => {
-        queryNoPagingPost({paging: false}).then(resp => {
-            if(resp.status === 200){
-                productList.value = resp.result as Record<string, any>[]
+    (newValue) => {
+        queryNoPagingPost({
+            paging: false,
+            sorts: [{ name: 'createTime', order: 'desc' }],
+            terms: [
+                {
+                    terms: [
+                        {
+                            termType: 'eq',
+                            column: 'state',
+                            value: 1,
+                        },
+                    ],
+                },
+            ],
+        }).then((resp) => {
+            if (resp.status === 200) {
+                productList.value = resp.result as Record<string, any>[];
             }
-        })
+        });
+        Object.assign(modelRef, newValue);
     },
-    {immediate: true, deep: true}
-)
+    { immediate: true, deep: true },
+);
 
 const handleCancel = () => {
-    emit('close')    
-}
+    emit('close');
+    formRef.value.resetFields();
+};
+
+const handleSave = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            loading.value = true;
+            const resp = await update(toRaw(modelRef));
+            loading.value = false;
+            if (resp.status === 200) {
+                message.success('操作成功！');
+                emit('save');
+                formRef.value.resetFields();
+            }
+        })
+        .catch((err: any) => {
+            console.log('error', err);
+        });
+};
 </script>

src/views/device/Instance/detail.vue

@@ -0,0 +1,9 @@
+<template>
+  <Metadata
+    type="device"
+  ></Metadata>
+</template>
+<script setup lang="ts" name="InstanceDetail">
+import Metadata from '@/views/device/components/Metadata/index.vue'
+</script>
+<style scoped lang="less"></style>

src/views/device/Instance/index.vue

@@ -250,6 +250,7 @@ import Process from './Process/index.vue';
 import Save from './Save/index.vue';
 import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
 
+const router = useRouter();
 const instanceRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
@@ -364,8 +365,8 @@ const handleAdd = () => {
  * 查看
  */
 const handleView = (id: string) => {
-    message.warn(id + '暂未开发');
-};
+    router.push('/device/instance/detail/' + id)
+}
 
 const getActions = (
     data: Partial<Record<string, any>>,
@@ -516,5 +517,10 @@ const disabledSelectedDevice = async () => {
         _selectedRowKeys.value = [];
         instanceRef.value?.reload();
     }
-};
+}
+
+const saveBtn = () => {
+    visible.value = false
+    instanceRef.value?.reload()
+}
 </script>

src/views/device/components/Metadata/Base/Edit/index.vue

@@ -114,6 +114,6 @@ const form = reactive({
   model: {}
 })
 </script>
-<style lang="scss" scoped>
+<style lang="less" scoped>
 
 </style>

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

@@ -96,5 +96,5 @@ const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
   );
 };
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 </style>

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

@@ -140,7 +140,7 @@ watchEffect(() => {
   }
 })
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .cat-content {
   background: #F6F6F6;
 

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

@@ -8,8 +8,8 @@
       </p>
     </div>
     <a-form layout="vertical" v-model="formModel">
-      <a-form-item label="导入方式" v-bind="validateInfos.type">
-        <a-select v-if="type === 'product'" v-model:value="formModel.type">
+      <a-form-item v-if="type === 'product'" label="导入方式" v-bind="validateInfos.type">
+        <a-select v-model:value="formModel.type">
           <a-select-option value="copy">拷贝产品</a-select-option>
           <a-select-option value="import">导入物模型</a-select-option>
         </a-select>
@@ -32,11 +32,20 @@
         </a-select>
       </a-form-item>
       <a-form-item label="文件上传" v-bind="validateInfos.upload" v-if="formModel.metadataType === 'file'">
-        <a-upload v-model:file-list="formModel.upload" name="files" :before-upload="beforeUpload" accept=".json"
-          :show-upload-list="false"></a-upload>
+        <a-input v-model:value="formModel.upload">
+          <template #addonAfter>
+            <a-upload v-model:file-list="fileList" :before-upload="beforeUpload" accept=".json"
+              :show-upload-list="false" :action="FILE_UPLOAD" @change="fileChange"
+              :headers="{ 'X-Access-Token': token }">
+              <upload-outlined class="upload-button"/>
+              <!-- <button id="uploadFile" style="display: none;"></button> -->
+            </a-upload>
+          </template>
+        </a-input>
       </a-form-item>
       <a-form-item label="物模型" v-bind="validateInfos.import" v-if="formModel.metadataType === 'script'">
         <!-- TODO代码编辑器 -->
+        <a-textarea v-model:value="formModel.import"></a-textarea>
       </a-form-item>
     </a-form>
   </a-modal>
@@ -46,13 +55,17 @@ import { useForm } from 'ant-design-vue/es/form';
 import { saveMetadata } from '@/api/device/instance'
 import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
 import type { DefaultOptionType } from 'ant-design-vue/es/select';
-import { UploadProps } from 'ant-design-vue/es';
+import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue/es';
 import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
 import { message } from 'ant-design-vue/es';
 import { Store } from 'jetlinks-store';
 import { SystemConst } from '@/utils/consts';
 import { useInstanceStore } from '@/store/instance'
 import { useProductStore } from '@/store/product';
+import { UploadOutlined, ExclamationCircleOutlined } from '@ant-design/icons-vue';
+import { FILE_UPLOAD } from '@/api/comm';
+import { LocalStore } from '@/utils/comm';
+import { TOKEN_KEY } from '@/utils/variable';
 
 const route = useRoute()
 const instanceStore = useInstanceStore()
@@ -79,6 +92,7 @@ const _visible = computed({
 })
 
 const close = () => {
+  console.log(1)
   emits('update:visible', false);
 }
 
@@ -132,6 +146,8 @@ const onSubmit = () => {
 
   })
 }
+const fileList = ref<UploadFile[]>([])
+const token = ref(LocalStore.get(TOKEN_KEY));
 
 const productList = ref<DefaultOptionType[]>([])
 
@@ -157,6 +173,15 @@ const beforeUpload: UploadProps['beforeUpload'] = file => {
     formModel.import = json.target?.result;
   };
 }
+const fileChange = (info: UploadChangeParam) => {
+  if (info.file.status === 'done') {
+    console.log(info)
+    const { response } = info.file
+    if (response.status === 200) {
+      formModel.upload = response.result
+    }
+  }
+}
 
 const operateLimits = (mdata: DeviceMetadata) => {
   const obj: DeviceMetadata = { ...mdata };
@@ -257,7 +282,7 @@ const handleImport = async () => {
 
 // const showProduct = computed(() => formModel.type === 'copy')
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .import-content {
   background: rgb(236, 237, 238);
 
@@ -265,4 +290,10 @@ const handleImport = async () => {
     padding: 10px;
   }
 }
+.upload-button {
+  width: 37px;
+  height: 30px; 
+  line-height: 30px;
+  margin: 0 -11px;
+}
 </style>

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

@@ -1,6 +1,6 @@
 <template>
   <div class='device-detail-metadata' style="position: relative;">
-    <div class="tips" style="width: 40%">
+    <div class="tips">
       <a-tooltip :title="instanceStore.detail?.independentMetadata && type === 'device'
       ? '该设备已脱离产品物模型，修改产品物模型对该设备无影响'
       : '设备会默认继承产品的物模型，修改设备物模型后将脱离产品物模型'">
@@ -14,16 +14,20 @@
         </div>
       </a-tooltip>
     </div>
-    <a-tabs class="metadataNav" destroyInactiveTabPane>
+    <a-tabs class="metadataNav" destroyInactiveTabPane type="card">
       <template #rightExtra>
         <a-space>
-          <PermissionButton v-if="type === 'device'" :hasPermission="`${permission}:update`"
-            :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata, }" :tooltip="{ title: '重置后将使用产品的物模型配置' }"
-            key="reload">
+          <PermissionButton v-if="type === 'device' && instanceStore.detail?.independentMetadata"
+            :hasPermission="`${permission}:update`" :popConfirm="{ title: '确认重置？', onConfirm: resetMetadata, }"
+            :tooltip="{ title: '重置后将使用产品的物模型配置' }" key="reload">
             重置操作
           </PermissionButton>
-          <PermissionButton :isPermission="`${permission}:update`" @click="visible = true">快速导入</PermissionButton>
-          <PermissionButton :isPermission="`${permission}:update`" @click="cat = true">物模型TSL</PermissionButton>
+          <PermissionButton
+            :uhasPermission="`${permission}:update`"
+            @click="visible = true">快速导入</PermissionButton>
+          <PermissionButton 
+            :uhasPermission="`${permission}:update`" 
+            @click="cat = true">物模型TSL</PermissionButton>
         </a-space>
       </template>
 
@@ -40,11 +44,12 @@
         <BaseMetadata target={props.type} type="tags" :permission="permission" />
       </a-tab-pane>
     </a-tabs>
-    <Import :visible="visible" :type="type" @close="visible = false" />
-    <Cat :visible="cat" @close="cat = false" :type="type" />
+    <Import v-model:visible="visible" :type="type" @close="visible = false" />
+    <Cat v-model:visible="cat" @close="cat = false" :type="type" />
   </div>
 </template>
 <script setup lang="ts" name="Metadata">
+import { InfoCircleOutlined } from '@ant-design/icons-vue';
 import PermissionButton from '@/components/PermissionButton/index.vue'
 import { deleteMetadata } from '@/api/device/instance.js'
 import { message } from 'ant-design-vue'
@@ -80,21 +85,20 @@ const resetMetadata = async () => {
   }
 }
 </script>
-<style scoped lang="scss">
+<style scoped lang="less">
 .device-detail-metadata {
   .tips {
+    width: calc(100% - 670px);
     position: absolute;
     top: 12px;
     z-index: 1;
-    margin-left: 330px;
+    margin-left: 380px;
     font-weight: 100;
   }
 
   .metadataNav {
-    :global {
-      .ant-card-body {
-        padding: 0;
-      }
+    :deep(.ant-card-body) {
+      padding: 0;
     }
   }
 }

src/views/home/components/dialogs/DeviceChooseDialog.vue

@@ -22,7 +22,9 @@
             }"
         >
             <template #modifyTime="slotProps">
-                <span>{{ dateFormat(slotProps.modifyTime) }}</span>
+                <span>{{
+                    moment(slotProps.modifyTime).format('HHHH-MM-DD HH:mm:ss')
+                }}</span>
             </template>
             <template #state="slotProps">
                 <StatusLabel
@@ -46,8 +48,8 @@ import StatusLabel from '../StatusLabel.vue';
 
 import { ComponentInternalInstance } from 'vue';
 import { getDeviceList_api } from '@/api/home';
-import { dateFormat } from '@/utils/comm';
 import { message } from 'ant-design-vue';
+import moment from 'moment';
 
 const { proxy } = getCurrentInstance() as ComponentInternalInstance;
 const emits = defineEmits(['confirm']);

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

@@ -0,0 +1,155 @@
+<!-- 绑定设备 -->
+<template>
+    <a-modal
+        :maskClosable="false"
+        width="1100px"
+        :visible="true"
+        title="选择设备"
+        @ok="handleOk"
+        @cancel="handleCancel"
+        :confirmLoading="btnLoading"
+    >
+        <div style="margin-top: 10px">
+            <Search
+                :columns="columns"
+                target="iot-card-management-search"
+                @search="handleSearch"
+            />
+            <JTable
+                ref="bindDeviceRef"
+                :columns="columns"
+                :request="queryUnbounded"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :rowSelection="{
+                    type: 'radio',
+                    selectedRowKeys: _selectedRowKeys,
+                    onSelect: onSelectChange,
+                }"
+                @cancelSelect="cancelSelect"
+                :params="params"
+            >
+                <template #registryTime="slotProps">
+                    {{
+                        slotProps.registryTime
+                            ? moment(slotProps.registryTime).format(
+                                  'YYYY-MM-DD HH:mm:ss',
+                              )
+                            : ''
+                    }}
+                </template>
+                <template #state="slotProps">
+                    <a-badge
+                        :text="slotProps.state.text"
+                        :status="statusMap.get(slotProps.state.value)"
+                    />
+                </template>
+            </JTable>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { queryUnbounded, bind } from '@/api/iot-card/cardManagement';
+import moment from 'moment';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['change']);
+
+const props = defineProps({
+    cardId: {
+        type: String,
+    },
+});
+
+const bindDeviceRef = ref<Record<string, any>>({});
+const params = ref<Record<string, any>>({});
+const _selectedRowKeys = ref<string[]>([]);
+const btnLoading = ref<boolean>(false);
+
+const statusMap = new Map();
+statusMap.set('online', 'processing');
+statusMap.set('offline', 'error');
+statusMap.set('notActive', 'warning');
+
+const columns = [
+    {
+        title: 'ID',
+        dataIndex: 'id',
+        key: 'id',
+        ellipsis: true,
+        fixed: 'left',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '设备名称',
+        dataIndex: 'name',
+        key: 'name',
+        ellipsis: true,
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '注册时间',
+        dataIndex: 'registryTime',
+        key: 'registryTime',
+        scopedSlots: true,
+        search: {
+            type: 'date',
+        },
+        // sorter: true,
+    },
+    {
+        title: '状态',
+        dataIndex: 'state',
+        key: 'state',
+        scopedSlots: true,
+        search: {
+            type: 'select',
+            options: [
+                { label: '禁用', value: 'notActive' },
+                { label: '离线', value: 'offline' },
+                { label: '在线', value: 'online' },
+            ],
+        },
+        // filterMultiple: false,
+    },
+];
+
+const handleSearch = (params: any) => {
+    console.log(params);
+    params.value = params;
+};
+
+const onSelectChange = (record: any) => {
+    _selectedRowKeys.value = [record.id];
+};
+
+const cancelSelect = () => {
+    _selectedRowKeys.value = [];
+};
+
+const handleOk = () => {
+    btnLoading.value = true;
+    bind(props.cardId, _selectedRowKeys.value[0])
+        .then((resp: any) => {
+            if (resp.status === 200) {
+                message.success('操作成功');
+                emit('change', true);
+            }
+        })
+        .finally(() => {
+            btnLoading.value = false;
+        });
+};
+
+const handleCancel = () => {
+    emit('change', false);
+};
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,65 @@
+<template>
+    <!-- 导入 -->
+    <a-modal
+        :maskClosable="false"
+        :visible="true"
+        title="导出"
+        @ok="handleOk"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-space>
+                <span>文件格式：</span>
+                <a-radio-group
+                    v-model:value="type"
+                    placeholder="请选择文件格式"
+                    button-style="solid"
+                >
+                    <a-radio-button value="xlsx">xlsx</a-radio-button>
+                    <a-radio-button value="csv">csv</a-radio-button>
+                </a-radio-group>
+            </a-space>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import moment from 'moment';
+import { _export } from '@/api/iot-card/cardManagement';
+import { downloadFileByUrl } from '@/utils/utils';
+
+const emit = defineEmits(['close']);
+
+const props = defineProps({
+    data: {
+        type: Object,
+        default: undefined,
+    },
+});
+
+const type = ref<string>('xlsx');
+
+const handleOk = () => {
+    console.log(props.data);
+    _export(type.value, props.data).then((res: any) => {
+        if (res) {
+            const blob = new Blob([res.data], { type: type.value });
+            const url = URL.createObjectURL(blob);
+            downloadFileByUrl(
+                url,
+                `物联卡管理-${moment(new Date()).format(
+                    'YYYY/MM/DD HH:mm:ss',
+                )}`,
+                type.value,
+            );
+            emit('close');
+        }
+    });
+};
+
+const handleCancel = () => {
+    emit('close');
+};
+</script>
+
+<style scoped lang="less"></style>

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

@@ -0,0 +1,157 @@
+<template>
+    <!-- 导入 -->
+    <a-modal
+        :maskClosable="false"
+        :visible="true"
+        title="导入"
+        @ok="handleCancel"
+        @cancel="handleCancel"
+    >
+        <div style="margin-top: 10px">
+            <a-form :layout="'vertical'">
+                <a-form-item label="平台对接" required>
+                    <a-select
+                        showSearch
+                        v-model:value="modelRef.configId"
+                        :options="configList"
+                        placeholder="请选择平台对接"
+                    >
+                    </a-select>
+                </a-form-item>
+
+                <a-form-item v-if="modelRef.configId" label="文件格式">
+                    <a-radio-group
+                        button-style="solid"
+                        v-model:value="modelRef.fileType"
+                        placeholder="请选择文件格式"
+                    >
+                        <a-radio-button value="xlsx">xlsx</a-radio-button>
+                        <a-radio-button value="csv">csv</a-radio-button>
+                    </a-radio-group>
+                </a-form-item>
+
+                <a-form-item label="文件上传" v-if="modelRef.configId">
+                    <a-upload
+                        v-model:fileList="modelRef.upload"
+                        name="file"
+                        :action="FILE_UPLOAD"
+                        :headers="{
+                            'X-Access-Token': LocalStore.get(TOKEN_KEY),
+                        }"
+                        :accept="`.${modelRef.fileType || 'xlsx'}`"
+                        :showUploadList="false"
+                        @change="fileChange"
+                    >
+                        <a-button :loading="loading">
+                            <template #icon>
+                                <AIcon type="UploadOutlined" />
+                            </template>
+                            文件上传
+                        </a-button>
+                    </a-upload>
+                </a-form-item>
+                <a-form-item v-if="modelRef.configId" label="下载模板">
+                    <a-space>
+                        <a-button icon="file" @click="downFileFn('xlsx')">
+                            .xlsx
+                        </a-button>
+                        <a-button icon="file" @click="downFileFn('csv')">
+                            .csv
+                        </a-button>
+                    </a-space>
+                </a-form-item>
+                <div v-if="totalCount">
+                    <a-icon class="check-num" type="check" /> 已完成 总数量
+                    <span class="check-num">{{ totalCount }}</span>
+                </div>
+                <div v-if="errCount">
+                    <a-icon class="check-num" style="color: red" type="close" />
+                    失败 总数量
+                    <span class="check-num">{{ errCount }}</span>
+                </div>
+            </a-form>
+        </div>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import { FILE_UPLOAD } from '@/api/comm';
+import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
+import { LocalStore } from '@/utils/comm';
+import { downloadFile } from '@/utils/utils';
+import { queryPlatformNoPage, _import } from '@/api/iot-card/cardManagement';
+import { message } from 'ant-design-vue';
+
+const emit = defineEmits(['close']);
+
+const configList = ref<Record<string, any>[]>([]);
+const loading = ref<boolean>(false);
+const totalCount = ref<number>(0);
+const errCount = ref<number>(0);
+
+const modelRef = reactive({
+    configId: undefined,
+    upload: [],
+    fileType: 'xlsx',
+});
+
+const getConfig = async () => {
+    const resp: any = await queryPlatformNoPage({
+        paging: false,
+        terms: [
+            {
+                terms: [
+                    {
+                        column: 'state',
+                        termType: 'eq',
+                        value: 'enabled',
+                        type: 'and',
+                    },
+                ],
+            },
+        ],
+    });
+    configList.value = resp.result.map((item: any) => {
+        return { key: item.id, label: item.name, value: item.id };
+    });
+};
+
+const fileChange = (info: any) => {
+    loading.value = true;
+    if (info.file.status === 'done') {
+        const r = info.file.response || { result: '' };
+        _import(modelRef.configId, { fileUrl: r.result })
+            .then((resp: any) => {
+                totalCount.value = resp.result.total;
+                message.success('导入成功');
+            })
+            .catch((err) => {
+                message.error(err.response.data.message || '导入失败');
+            })
+            .finally(() => {
+                loading.value = false;
+            });
+    }
+};
+
+const downFileFn = (type: string) => {
+    const url = `${BASE_API_PATH}/network/card/template.${type}`;
+    downloadFile(url);
+};
+
+const handleCancel = () => {
+    totalCount.value = 0;
+    errCount.value = 0;
+    modelRef.configId = undefined;
+    emit('close', true);
+};
+
+getConfig();
+</script>
+
+<style scoped lang="less">
+.check-num {
+    margin: 6px;
+    color: @primary-color;
+}
+</style>

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

@@ -103,6 +103,113 @@
                     </a-dropdown>
                 </a-space>
             </template>
+            <template #card="slotProps">
+                <CardBox
+                    :value="slotProps"
+                    @click="handleClick"
+                    :actions="getActions(slotProps, 'card')"
+                    v-bind="slotProps"
+                    :active="_selectedRowKeys.includes(slotProps.id)"
+                    :status="slotProps.cardStateType.value"
+                    :statusText="slotProps.cardStateType.text"
+                    :statusNames="{
+                        using: 'success',
+                        toBeActivated: 'default',
+                        deactivate: 'error',
+                    }"
+                >
+                    <template #img>
+                        <slot name="img">
+                            <img :src="getImage('/iot-card/iot-card-bg.png')" />
+                        </slot>
+                    </template>
+                    <template #content>
+                        <h3
+                            class="card-item-content-title"
+                            @click.stop="handleView(slotProps.id)"
+                        >
+                            {{ slotProps.id }}
+                        </h3>
+                        <a-row>
+                            <a-col :span="8">
+                                <div class="card-item-content-text">
+                                    平台对接
+                                </div>
+                                <div>{{ slotProps.platformConfigName }}</div>
+                            </a-col>
+                            <a-col :span="6">
+                                <div class="card-item-content-text">类型</div>
+                                <div>{{ slotProps.cardType.text }}</div>
+                            </a-col>
+                            <a-col :span="6">
+                                <div class="card-item-content-text">提醒</div>
+                                <!-- <div>{{ slotProps.cardType.text }}</div> -->
+                            </a-col>
+                        </a-row>
+                        <a-divider style="margin: 12px 0" />
+                        <div v-if="slotProps.usedFlow === 0">
+                            <span class="flow-text">
+                                {{ slotProps.totalFlow }}
+                            </span>
+                            <span class="card-item-content-text"> M 使用流量</span>
+                        </div>
+                        <div v-else>
+                            <div class="progress-text">
+                                <div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
+                                <div class="card-item-content-text">
+                                    总共 {{ slotProps.totalFlow }} M
+                                </div>
+                            </div>
+                            <a-progress
+                                :strokeColor="'#ADC6FF'"
+                                :showInfo="false"
+                                :percent="slotProps.totalFlow - slotProps.usedFlow"
+                            />
+                        </div>
+                    </template>
+                    <template #actions="item">
+                        <a-tooltip
+                            v-bind="item.tooltip"
+                            :title="item.disabled && item.tooltip.title"
+                        >
+                            <a-popconfirm
+                                v-if="item.popConfirm"
+                                v-bind="item.popConfirm"
+                                :disabled="item.disabled"
+                            >
+                                <a-button :disabled="item.disabled">
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </template>
+                                </a-button>
+                            </a-popconfirm>
+                            <template v-else>
+                                <a-button
+                                    :disabled="item.disabled"
+                                    @click="item.onClick"
+                                >
+                                    <AIcon
+                                        type="DeleteOutlined"
+                                        v-if="item.key === 'delete'"
+                                    />
+                                    <template v-else>
+                                        <AIcon :type="item.icon" />
+                                        <span>{{ item.text }}</span>
+                                    </template>
+                                </a-button>
+                            </template>
+                        </a-tooltip>
+                    </template>
+                </CardBox>
+            </template>
+            <template #deviceId="slotProps">
+                {{ slotProps.deviceName }}
+            </template>
             <template #totalFlow="slotProps">
                 <div>
                     {{
@@ -157,7 +264,7 @@
             <template #action="slotProps">
                 <a-space :size="16">
                     <a-tooltip
-                        v-for="i in getActions(slotProps)"
+                        v-for="i in getActions(slotProps, 'table')"
                         :key="i.key"
                         v-bind="i.tooltip"
                     >
@@ -186,6 +293,20 @@
                 </a-space>
             </template>
         </JTable>
+        <!-- 批量导入 -->
+        <Import v-if="importVisible" @close="importVisible = false" />
+        <!-- 批量导出 -->
+        <Export
+            v-if="exportVisible"
+            @close="exportVisible = false"
+            :data="_selectedRowKeys"
+        />
+        <!-- 绑定设备 -->
+        <BindDevice
+            v-if="bindDeviceVisible"
+            :cardId="cardId"
+            @change="bindDevice"
+        />
     </div>
 </template>
 
@@ -204,16 +325,25 @@ import {
     resumptionBatch,
     sync,
     removeCards,
+    unbind,
 } from '@/api/iot-card/cardManagement';
 import { message } from 'ant-design-vue';
+import type { CardManagement } from './typing';
+import { getImage } from '@/utils/comm';
+import BindDevice from './BindDevice.vue';
+import Import from './Import.vue';
+import Export from './Export.vue';
 
 const cardManageRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 const _selectedRowKeys = ref<string[]>([]);
 const _selectedRow = ref<any[]>([]);
+const bindDeviceVisible = ref<boolean>(false);
 const visible = ref<boolean>(false);
 const exportVisible = ref<boolean>(false);
 const importVisible = ref<boolean>(false);
+const cardId = ref<any>();
+const current = ref<Partial<CardManagement>>({});
 
 const columns = [
     {
@@ -239,9 +369,10 @@ const columns = [
     },
     {
         title: '绑定设备',
-        dataIndex: 'deviceName',
-        key: 'deviceName',
+        dataIndex: 'deviceId',
+        key: 'deviceId',
         ellipsis: true,
+        scopedSlots: true,
         width: 200,
     },
     {
@@ -360,7 +491,10 @@ const columns = [
     },
 ];
 
-const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+const getActions = (
+    data: Partial<Record<string, any>>,
+    type: 'card' | 'table',
+): ActionsType[] => {
     if (!data) return [];
     return [
         {
@@ -386,6 +520,25 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
                 title: data.deviceId ? '解绑设备' : '绑定设备',
             },
             icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
+            popConfirm: data.deviceId
+                ? {
+                      title: '确认解绑设备？',
+                      onConfirm: async () => {
+                          unbind(data.id).then((resp: any) => {
+                              if (resp.status === 200) {
+                                  message.success('操作成功');
+                                  cardManageRef.value?.reload();
+                              }
+                          });
+                      },
+                  }
+                : undefined,
+            onClick: () => {
+                if (!data.deviceId) {
+                    bindDeviceVisible.value = true;
+                    cardId.value = data.id;
+                }
+            },
         },
         {
             key: 'activation',
@@ -479,11 +632,38 @@ const cancelSelect = () => {
     _selectedRowKeys.value = [];
 };
 
+const handleClick = (dt: any) => {
+    if (_selectedRowKeys.value.includes(dt.id)) {
+        const _index = _selectedRowKeys.value.findIndex((i) => i === dt.id);
+        _selectedRowKeys.value.splice(_index, 1);
+    } else {
+        _selectedRowKeys.value = [..._selectedRowKeys.value, dt.id];
+    }
+};
+
+/**
+ * 查看
+ */
+const handleView = (id: string) => {
+    message.warn(id + '暂未开发');
+};
+
 /**
  * 新增
  */
 const handleAdd = () => {};
 
+/**
+ * 绑定设备关闭窗口
+ */
+const bindDevice = (val: boolean) => {
+    bindDeviceVisible.value = false;
+    cardId.value = '';
+    if (val) {
+        cardManageRef.value?.reload();
+    }
+};
+
 /**
  * 批量激活
  */
@@ -565,7 +745,25 @@ const handelRemove = async () => {
 </script>
 
 <style scoped lang="less">
-.search {
-    width: calc(100% - 330px);
+.page-container {
+    .search {
+        width: calc(100% - 330px);
+    }
+    .flow-text {
+        font-size: 20px;
+        font-weight: 600;
+    }
+
+    .progress-text {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+    }
+    :deep(.ant-progress-inner) {
+        border-radius: 0px;
+    }
+    :deep(.ant-progress-bg) {
+        border-radius: 0px;
+    }
 }
 </style>

src/views/iot-card/CardManagement/typing.d.ts

@@ -0,0 +1,20 @@
+export type CardManagement = {
+  id: string;
+  name: string;
+  iccId: string;
+  deviceId: string;
+  deviceName: string;
+  platformConfigId: string;
+  operatorName: string;
+  cardType: any;
+  totalFlow: number;
+  usedFlow: number;
+  residualFlow: number;
+  activationDate: string;
+  updateTime: string;
+  cardStateType: any;
+  cardState: any;
+  describe: string;
+  platformConfigName: string;
+  operatorPlatformType: any;
+};

src/views/link/AccessConfig/index.vue

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

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

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

src/views/link/Certificate/index.vue

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

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

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

src/views/notice/Config/SyncUser/index.vue

@@ -1,103 +1,125 @@
 <template>
-    <a-modal
-        v-model:visible="_vis"
-        title="同步用户"
-        :footer="null"
-        @cancel="_vis = false"
-        width="80%"
-    >
-        <a-row :gutter="10">
-            <a-col :span="4">
-                <a-input
-                    v-model:value="deptName"
-                    @keyup.enter="getDepartment"
-                    allowClear
-                    placeholder="请输入部门名称"
-                    style="margin-bottom: 8px"
-                >
-                    <template #addonAfter>
-                        <AIcon
-                            type="SearchOutlined"
-                            style="cursor: pointer"
-                            @click="getDepartment"
-                        />
-                    </template>
-                </a-input>
-                <a-tree
-                    :tree-data="deptTreeData"
-                    :fieldNames="{ title: 'name', key: 'id' }"
-                    :selectedKeys="[deptId]"
-                    @select="onTreeSelect"
-                >
-                </a-tree>
-                <a-empty v-if="!deptTreeData.length" />
-            </a-col>
-            <a-col :span="20">
-                <JTable
-                    ref="tableRef"
-                    :columns="columns"
-                    :dataSource="dataSource"
-                    :loading="tableLoading"
-                    model="table"
-                >
-                    <template #headerTitle>
-                        <a-button type="primary" @click="handleAutoBind">
-                            自动绑定
-                        </a-button>
-                    </template>
-                    <template #status="slotProps">
-                        <a-space>
-                            <a-badge
-                                :status="slotProps.status.value"
-                                :text="slotProps.status.text"
-                            ></a-badge>
+    <div>
+        <a-modal
+            v-model:visible="_vis"
+            title="同步用户"
+            :footer="null"
+            @cancel="_vis = false"
+            width="80%"
+        >
+            <a-row :gutter="10">
+                <a-col :span="4">
+                    <a-input
+                        v-model:value="deptName"
+                        @keyup.enter="getDepartment"
+                        allowClear
+                        placeholder="请输入部门名称"
+                        style="margin-bottom: 8px"
+                    >
+                        <template #addonAfter>
                             <AIcon
-                                v-if="slotProps.status.value === 'error'"
-                                type="ExclamationCircleOutlined"
-                                style="color: #1d39c4; cursor: pointer"
-                                @click="handleError(slotProps.errorStack)"
+                                type="SearchOutlined"
+                                style="cursor: pointer"
+                                @click="getDepartment"
                             />
-                        </a-space>
-                    </template>
-                    <template #action="slotProps">
-                        <a-space :size="16">
-                            <a-tooltip
-                                v-for="i in getActions(slotProps, 'table')"
-                                :key="i.key"
-                                v-bind="i.tooltip"
-                            >
-                                <a-popconfirm
-                                    v-if="i.popConfirm"
-                                    v-bind="i.popConfirm"
-                                    :disabled="i.disabled"
+                        </template>
+                    </a-input>
+                    <a-tree
+                        :tree-data="deptTreeData"
+                        :fieldNames="{ title: 'name', key: 'id' }"
+                        :selectedKeys="[deptId]"
+                        @select="onTreeSelect"
+                    >
+                    </a-tree>
+                    <a-empty v-if="!deptTreeData.length" />
+                </a-col>
+                <a-col :span="20">
+                    <JTable
+                        ref="tableRef"
+                        :columns="columns"
+                        :dataSource="dataSource"
+                        :loading="tableLoading"
+                        model="table"
+                    >
+                        <template #headerTitle>
+                            <a-button type="primary" @click="handleAutoBind">
+                                自动绑定
+                            </a-button>
+                        </template>
+                        <template #status="slotProps">
+                            <a-space>
+                                <a-badge
+                                    :status="slotProps.status.value"
+                                    :text="slotProps.status.text"
+                                ></a-badge>
+                            </a-space>
+                        </template>
+                        <template #action="slotProps">
+                            <a-space :size="16">
+                                <a-tooltip
+                                    v-for="i in getActions(slotProps, 'table')"
+                                    :key="i.key"
+                                    v-bind="i.tooltip"
                                 >
-                                    <a-button
+                                    <a-popconfirm
+                                        v-if="i.popConfirm"
+                                        v-bind="i.popConfirm"
                                         :disabled="i.disabled"
+                                    >
+                                        <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"
-                                        ><AIcon :type="i.icon"
-                                    /></a-button>
-                                </a-popconfirm>
-                                <a-button
-                                    style="padding: 0"
-                                    type="link"
-                                    v-else
-                                    @click="i.onClick && i.onClick(slotProps)"
-                                >
-                                    <a-button
-                                        :disabled="i.disabled"
-                                        style="padding: 0"
-                                        type="link"
-                                        ><AIcon :type="i.icon"
-                                    /></a-button>
-                                </a-button>
-                            </a-tooltip>
-                        </a-space>
-                    </template>
-                </JTable>
-            </a-col>
-        </a-row>
-    </a-modal>
+                                        v-else
+                                        @click="
+                                            i.onClick && i.onClick(slotProps)
+                                        "
+                                    >
+                                        <a-button
+                                            :disabled="i.disabled"
+                                            style="padding: 0"
+                                            type="link"
+                                            ><AIcon :type="i.icon"
+                                        /></a-button>
+                                    </a-button>
+                                </a-tooltip>
+                            </a-space>
+                        </template>
+                    </JTable>
+                </a-col>
+            </a-row>
+        </a-modal>
+
+        <!-- 绑定用户 -->
+        <a-modal
+            v-model:visible="bindVis"
+            title="绑定用户"
+            :maskClosable="false"
+            :confirm-loading="confirmLoading"
+            @cancel="handleCancel"
+            @ok="handleBindSubmit"
+        >
+            <a-form layout="vertical">
+                <a-form-item label="用户" v-bind="validateInfos.userId">
+                    <a-select
+                        v-model:value="formData.userId"
+                        :options="allUserList"
+                        allowClear
+                        show-search
+                        option-filter-prop="children"
+                        :filter-option="filterOption"
+                        placeholder="请选择用户"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-modal>
+    </div>
 </template>
 
 <script setup lang="ts" name="SyncUser">
@@ -106,6 +128,9 @@ import { PropType } from 'vue';
 import moment from 'moment';
 import { Modal, message } from 'ant-design-vue';
 import type { ActionsType } from '@/components/Table/index.vue';
+import { Form } from 'ant-design-vue';
+
+const useForm = Form.useForm;
 
 type Emits = {
     (e: 'update:visible', data: boolean): void;
@@ -220,8 +245,7 @@ const getActions = (
             },
             icon: 'EditOutlined',
             onClick: () => {
-                // visible.value = true;
-                // current.value = data;
+                handleBind(data);
             },
         },
         {
@@ -344,7 +368,17 @@ watch(
  * 绑定用户
  */
 const bindVis = ref(false);
-const formData = ref({});
+const confirmLoading = ref(false);
+const formData = ref({ userId: '' });
+const formRules = ref({
+    userId: [{ required: true, message: '请选择用户', trigger: 'change' }],
+});
+
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
+    formData.value,
+    formRules.value,
+);
+
 const handleBind = (row: any) => {
     bindVis.value = true;
     formData.value = row;
@@ -352,22 +386,55 @@ const handleBind = (row: any) => {
 };
 
 /**
- * 查看错误信息
+ * 绑定用户, 用户下拉筛选
  */
-const handleError = (e: any) => {
-    Modal.info({
-        title: '错误信息',
-        content: JSON.stringify(e),
+const filterOption = (input: string, option: any) => {
+    return (
+        option.componentOptions.children[0].text
+            .toLowerCase()
+            .indexOf(input.toLowerCase()) >= 0
+    );
+};
+
+/**
+ * 绑定提交
+ */
+const handleBindSubmit = () => {
+    validate().then(async () => {
+        const params = {
+            // providerName: formData.value.thirdPartyUserName,
+            // thirdPartyUserId: formData.value.thirdPartyUserId,
+            userId: formData.value.userId,
+        };
+        confirmLoading.value = true;
+        if (props.data.type === 'dingTalk') {
+            configApi
+                .dingTalkBindUser([params], props.data.id)
+                .then(() => {
+                    message.success('操作成功');
+                    bindVis.value = false;
+                    getTableData();
+                })
+                .finally(() => {
+                    confirmLoading.value = false;
+                });
+        } else if (props.data.type === 'weixin') {
+            configApi
+                .weChatBindUser([params], props.data.id)
+                .then(() => {
+                    message.success('操作成功');
+                    bindVis.value = false;
+                    getTableData();
+                })
+                .finally(() => {
+                    confirmLoading.value = false;
+                });
+        }
     });
 };
-/**
- * 查看详情
- */
-const handleDetail = (e: any) => {
-    Modal.info({
-        title: '详情信息',
-        content: JSON.stringify(e),
-    });
+const handleCancel = () => {
+    bindVis.value = false;
+    resetFields()
 };
 </script>
 

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

@@ -0,0 +1,333 @@
+<template>
+    <div class="basic-info-container">
+        <a-card>
+            <h3>基本信息</h3>
+            <a-form :model="form.data" class="basic-form">
+                <div class="row" style="display: flex">
+                    <a-form-item
+                        label="菜单图标"
+                        name="icon"
+                        :rules="[
+                            {
+                                required: true,
+                                message: '请上传图标',
+                            },
+                        ]"
+                        style="flex: 0 0 186px"
+                    >
+                        <div class="icon-upload has-icon" v-if="form.data.icon">
+                            <svg aria-hidden="true">
+                                <use :xlinkHref="`#${form.data.icon}`" />
+                            </svg>
+                            <span class="mark">点击修改</span>
+                        </div>
+
+                        <div v-else class="icon-upload no-icon">
+                            <span>
+                                <plus-outlined style="font-size: 30px" />
+                                <p>点击选择图标</p>
+                            </span>
+                        </div>
+                    </a-form-item>
+                    <a-row :gutter="24" style="flex: 1 1 auto">
+                        <a-col :span="12">
+                            <a-form-item
+                                label="名称"
+                                name="name"
+                                :rules="[
+                                    { required: true, message: '请输入名称' },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.name" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="编码"
+                                name="code"
+                                :rules="[
+                                    { required: true, message: '请输入编码' },
+                                    { max: 64, message: '最多可输入64个字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.code" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="页面地址"
+                                name="url"
+                                :rules="[
+                                    {
+                                        required: true,
+                                        message: '请输入页面地址',
+                                    },
+                                    { max: 128, message: '最多可输入128字符' },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.url" />
+                            </a-form-item>
+                        </a-col>
+                        <a-col :span="12">
+                            <a-form-item
+                                label="排序"
+                                name="sortIndex"
+                                :rules="[
+                                    {
+                                        pattern: /^[0-9]*[1-9][0-9]*$/,
+                                        message: '请输入大于0的整数',
+                                    },
+                                ]"
+                            >
+                                <a-input v-model:value="form.data.sortIndex" />
+                            </a-form-item>
+                        </a-col>
+                    </a-row>
+                </div>
+
+                <a-form-item label="说明" name="describe">
+                    <a-textarea
+                        v-model:value="form.data.describe"
+                        :rows="4"
+                        placeholder="请输入说明"
+                    />
+                </a-form-item>
+            </a-form>
+        </a-card>
+        <a-card>
+            <h3>权限配置</h3>
+            <a-form :model="form.data" class="basic-form permiss-form">
+                <a-form-item name="accessSupport" required>
+                    <template #label>
+                        <span style="margin-right: 3px">数据权限控制</span>
+                        <a-tooltip title="此菜单页面数据所对应的资产类型">
+                            <question-circle-outlined
+                                class="img-style"
+                                style="color: #a6a6a6"
+                            />
+                        </a-tooltip>
+                    </template>
+                    <a-radio-group
+                        v-model:value="form.data.accessSupport"
+                        name="radioGroup"
+                    >
+                        <a-radio value="unsupported">不支持</a-radio>
+                        <a-radio value="support">支持</a-radio>
+                        <a-radio value="indirect">
+                            <span style="margin-right: 3px">间接控制</span>
+                            <a-tooltip
+                                title="此菜单内的数据基于其他菜单的数据权限控制"
+                            >
+                                <question-circle-filled class="img-style" />
+                            </a-tooltip>
+                        </a-radio>
+                    </a-radio-group>
+
+                    <a-form-item
+                        name="assetType"
+                        v-if="form.data.accessSupport === 'support'"
+                        :rules="[{ required: true, message: '请选择资产类型' }]"
+                        style="margin-top: 24px; margin-bottom: 0"
+                    >
+                        <a-select
+                            v-model:value="form.data.assetType"
+                            style="width: 500px"
+                            placeholder="请选择资产类型"
+                        >
+                            <a-select-option
+                                v-for="item in form.assetsType"
+                                :value="item.value"
+                                >{{ item.label }}</a-select-option
+                            >
+                        </a-select>
+                    </a-form-item>
+
+                    <a-form-item
+                        name="indirectMenus"
+                        v-if="form.data.accessSupport === 'indirect'"
+                        :rules="[{ required: true, message: '请选择关联菜单' }]"
+                        style="margin-top: 24px; margin-bottom: 0"
+                    >
+                        <a-tree-select
+                            v-model:value="form.data.indirectMenus"
+                            style="width: 400px"
+                            :dropdown-style="{
+                                maxHeight: '400px',
+                                overflow: 'auto',
+                            }"
+                            placeholder="请选择关联菜单"
+                            multiple
+                            show-search
+                            tree-default-expand-all
+                            :tree-data="form.treeData"
+                        >
+                            <template #title="{ value: val, title }">
+                                <b
+                                    v-if="val === 'parent 1-1'"
+                                    style="color: #08c"
+                                    >{{ val }}</b
+                                >
+                                <template v-else>{{ title }}</template>
+                            </template>
+                        </a-tree-select>
+                    </a-form-item>
+                </a-form-item>
+                <a-form-item label="权限">
+                    <a-input
+                        v-model:value="form.data.permissions"
+                        style="width: 300px"
+                        allowClear
+                        placeholder="请输入权限名称"
+                    />
+                </a-form-item>
+            </a-form>
+
+            <a-button type="primary" @click="clickSave">保存</a-button>
+        </a-card>
+    </div>
+</template>
+
+<script setup lang="ts">
+import {
+    PlusOutlined,
+    QuestionCircleFilled,
+    QuestionCircleOutlined,
+} from '@ant-design/icons-vue';
+import {
+    getMenuTree_api,
+    getAssetsType_api,
+    getMenuDetail_api,
+} from '@/api/system/menu';
+import { exportPermission_api } from '@/api/system/permission';
+
+const route = useRoute();
+const routeParams = {
+    id: route.params.id === ':id' ? '' : (route.params.id as string),
+    ...route.query,
+    url: route.query.basePath,
+};
+
+const form = reactive({
+    data: {
+        name: '',
+        code: '',
+        sortIndex: '',
+        icon: '',
+        describe: '',
+        permissions: '',
+        accessSupport: '',
+        assetType: undefined,
+        indirectMenus: [],
+        ...routeParams,
+    } as formType,
+
+    treeData: [], // 关联菜单
+    assetsType: [] as assetType[], // 资产类型
+    premissonList: [], // 权限列表
+
+    init: () => {
+        // 获取菜单详情
+        routeParams.id &&
+            getMenuDetail_api(routeParams.id).then((resp) => {
+                console.log('菜单详情', resp);
+            });
+        // 获取权限列表
+        // exportPermission_api()
+        // 获取关联菜单
+        getMenuTree_api({ paging: false }).then((resp) => {
+            console.log('关联菜单', resp);
+        });
+        // 获取资产类型
+        getAssetsType_api().then((resp:any) => {
+            form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
+        });
+    },
+});
+form.init();
+const clickSave = () => {};
+
+type formType = {
+    name: string;
+    code: string;
+    url: string;
+    sortIndex: string;
+    icon: string;
+    permissions: string;
+    describe: string;
+    accessSupport: string;
+    assetType: string | undefined;
+    indirectMenus: any[];
+};
+
+type assetType = {
+    label: string;
+    value: string;
+};
+</script>
+
+<style lang="less" scoped>
+.basic-info-container {
+    .ant-card {
+        margin-bottom: 24px;
+
+        h3 {
+            position: relative;
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            padding: 4px 0 4px 12px;
+            font-weight: bold;
+            font-size: 16px;
+
+            &::before {
+                position: absolute;
+                top: 5px px;
+                left: 0;
+                width: 4px;
+                height: calc(100% - 10px);
+                background-color: #1d39c4;
+                border-radius: 2px;
+                content: ' ';
+            }
+        }
+
+        .basic-form {
+            .ant-form-item {
+                display: block;
+                :deep(.ant-form-item-label) {
+                    overflow: inherit;
+                    .img-style {
+                        cursor: help;
+                    }
+                    label::after {
+                        display: none;
+                    }
+                }
+                :deep(.ant-form-item-control-input-content) {
+                    .icon-upload {
+                        width: 160px;
+                        height: 150px;
+                        border: 1px dashed #d9d9d9;
+                        font-size: 14px;
+                        display: flex;
+                        justify-content: center;
+                        align-items: center;
+                        text-align: center;
+                        cursor: pointer;
+                        transition: 0.5s;
+                        &:hover {
+                            border-color: #415ed1;
+                        }
+                    }
+                    .has-icon {
+                    }
+                    .no-icon {
+                        background-color: rgba(0, 0, 0, 0.06);
+                    }
+                }
+            }
+        }
+    }
+}
+</style>

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

@@ -0,0 +1,18 @@
+<template>
+    <div class="button-mange-container">
+
+    </div>
+</template>
+
+<script setup lang="ts">
+
+const route = useRoute();
+const routeParams = {
+    id: route.params.id === ':id' ? '' : route.params.id,
+    ...route.query,
+};
+</script>
+
+<style scoped>
+
+</style>

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

@@ -0,0 +1,25 @@
+<template>
+    <div class="menu-detail-container">
+        <a-tabs v-model:activeKey="activeKey">
+            <a-tab-pane key="basic" tab="基本信息"> <BasicInfo /> </a-tab-pane>
+            <a-tab-pane key="button" tab="按钮管理">
+                <ButtonMange />
+            </a-tab-pane>
+        </a-tabs>
+    </div>
+</template>
+
+<script setup lang="ts">
+import BasicInfo from './BasicInfo.vue';
+import ButtonMange from './ButtonMange.vue';
+const activeKey = ref('basic');
+</script>
+
+<style lang="less" scoped>
+.menu-detail-container {
+    .ant-tabs-tabpane {
+        background-color: #f0f2f5;
+        padding: 24px;
+    }
+}
+</style>

src/views/system/Menu/index.vue

@@ -0,0 +1,247 @@
+<template>
+    <div class="menu-container">
+        <Search :columns="query.columns" @search="query.search" />
+
+        <JTable
+            ref="tableRef"
+            :columns="table.columns"
+            :request="table.getList"
+            model="TABLE"
+            :params="query.params"
+        >
+            <template #headerTitle>
+                <a-button
+                    type="primary"
+                    @click="table.toDetails({})"
+                    style="margin-right: 10px"
+                    ><plus-outlined />新增</a-button
+                >
+                <a-button>菜单实例</a-button>
+            </template>
+            <template #createTime="slotProps">
+                {{ slotProps.createTime }}
+            </template>
+            <template #action="slotProps">
+                <a-space :size="16">
+                    <a-tooltip>
+                        <template #title>查看</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.toDetails(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+                    <a-tooltip>
+                        <template #title>新增子菜单</template>
+                        <a-button
+                            style="padding: 0"
+                            type="link"
+                            @click="table.toDetails(slotProps)"
+                        >
+                            <edit-outlined />
+                        </a-button>
+                    </a-tooltip>
+
+                    <a-popconfirm
+                        title="是否删除该菜单"
+                        ok-text="确定"
+                        cancel-text="取消"
+                        @confirm="table.clickDel(slotProps)"
+                        :disabled="slotProps.status"
+                    >
+                        <a-tooltip>
+                            <template #title>删除</template>
+                            <a-button style="padding: 0" type="link">
+                                <delete-outlined />
+                            </a-button>
+                        </a-tooltip>
+                    </a-popconfirm>
+                </a-space>
+            </template>
+        </JTable>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getMenuTree_api } from '@/api/system/menu';
+
+const router = useRouter();
+
+// 筛选
+const query = reactive({
+    columns: [
+        {
+            title: '编码',
+            dataIndex: 'code',
+            key: 'code',
+            ellipsis: true,
+            fixed: 'left',
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '页面地址',
+            dataIndex: 'url',
+            key: 'url',
+            ellipsis: true,
+            search: {
+                type: 'string',
+            },
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+            ellipsis: true,
+            search: {
+                type: 'number',
+            },
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            ellipsis: true,
+            search: {
+                type: 'date',
+            },
+        },
+    ],
+    params: {
+        terms: [],
+    },
+    search: (params: any) => {
+        query.params = params;
+    },
+});
+
+const tableRef = ref<Record<string, any>>({}); // 表格实例
+const table = reactive({
+    columns: [
+        {
+            title: '编码',
+            dataIndex: 'code',
+            key: 'code',
+            width: 300,
+        },
+        {
+            title: '名称',
+            dataIndex: 'name',
+            key: 'name',
+            width: 220,
+        },
+        {
+            title: '页面地址',
+            dataIndex: 'url',
+            key: 'url',
+        },
+        {
+            title: '排序',
+            dataIndex: 'sortIndex',
+            key: 'sortIndex',
+            width: 80,
+        },
+        {
+            title: '说明',
+            dataIndex: 'describe',
+            key: 'describe',
+            width: 200,
+        },
+        {
+            title: '创建时间',
+            dataIndex: 'createTime',
+            key: 'createTime',
+            scopedSlots: true,
+            width: 180,
+        },
+        {
+            title: '操作',
+            dataIndex: 'action',
+            key: 'action',
+            scopedSlots: true,
+            width: 140,
+        },
+    ],
+    tableData: [],
+    total: 0,
+    getList: async (_params: any) => {
+        //过滤非集成的菜单
+        const item = {
+            terms: [
+                {
+                    terms: [
+                        {
+                            column: 'owner',
+                            termType: 'eq',
+                            value: 'iot',
+                        },
+                        {
+                            column: 'owner',
+                            termType: 'isnull',
+                            value: '1',
+                            type: 'or',
+                        },
+                    ],
+                },
+            ],
+        };
+        const params = {
+            ..._params,
+            terms:
+                _params.terms && _params.length !== 0
+                    ? [...query.params.terms, item]
+                    : [item],
+            sorts: [{ name: 'sortIndex', order: 'asc' }],
+            paging: false,
+        };
+        const resp: any = await getMenuTree_api(params);
+        const lastItem = resp.result[resp.result.length - 1];
+        table.total == lastItem ? lastItem.sortIndex + 1 : 1;
+        return {
+            code: resp.message,
+            result: {
+                data: resp.result,
+                pageIndex: 0,
+                pageSize: 0,
+                total: 0,
+            },
+            status: resp.status,
+        };
+    },
+    // 跳转至详情页
+    toDetails: (row: any) => {
+        router.push(
+            `/system/Menu/detail/${row.id || ':id'}?pid=${
+                row.pid || ''
+            }&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
+        );
+    },
+    // 删除
+    clickDel: (row: any) => {
+        // delPermission_api(row.id).then((resp: any) => {
+        //     if (resp.status === 200) {
+        //         tableRef.value?.reload();
+        //         message.success('操作成功!');
+        //     }
+        // });
+    },
+    // 刷新列表
+    refresh: () => {
+        tableRef.value.reload();
+    },
+});
+</script>
+
+<style lang="less" scoped></style>