Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
blp
commit
5abae54652
|
|
@ -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}`);
|
||||
|
||||
|
|
|
|||
|
|
@ -10,4 +10,8 @@ export const queryOwnThree = (data: any) => server.post<any>('/menu/user-own/tre
|
|||
// 获取资产类型
|
||||
export const getAssetsType_api = () => server.get(`/asset/types`);
|
||||
// 获取菜单详情
|
||||
export const getMenuDetail_api = (id:string) => server.get(`/menu/${id}`);
|
||||
export const getMenuInfo_api = (id:string) => server.get(`/menu/${id}`);
|
||||
// 编辑菜单信息
|
||||
export const saveMenuInfo_api = (data: object) => server.patch(`/menu`, data);
|
||||
// 新增菜单信息
|
||||
export const addMenuInfo_api = (data: object) => server.post(`/menu`, data);
|
||||
|
|
@ -44,6 +44,7 @@ const iconKeys = [
|
|||
'QuestionCircleOutlined',
|
||||
'InfoCircleOutlined',
|
||||
'SearchOutlined',
|
||||
'EllipsisOutlined',
|
||||
]
|
||||
|
||||
const Icon = (props: {type: string}) => {
|
||||
|
|
|
|||
|
|
@ -37,6 +37,7 @@ export interface ActionsType {
|
|||
tooltip?: TooltipProps;
|
||||
popConfirm?: PopconfirmProps;
|
||||
icon?: string;
|
||||
children?: ActionsType[];
|
||||
}
|
||||
|
||||
export interface JColumnProps extends ColumnProps{
|
||||
|
|
|
|||
|
|
@ -87,7 +87,7 @@ export default [
|
|||
component: () => import('@/views/link/Certificate/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/certificate/detail/add',
|
||||
path: '/link/certificate/detail/:type/:id',
|
||||
component: () => import('@/views/link/Certificate/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
|
|
|
|||
|
|
@ -16,9 +16,10 @@
|
|||
</p>
|
||||
</div>
|
||||
<a-tabs @change="handleConvertMetadata">
|
||||
<a-tab-pane v-for="item in codecs" :tab-key="item.id" :key="item.id">
|
||||
<a-tab-pane v-for="item in codecs" :key="item.id" :tab="item.name">
|
||||
<div class="cat-panel">
|
||||
<!-- TODO 代码编辑器 -->
|
||||
{{ value }}
|
||||
</div>
|
||||
</a-tab-pane>
|
||||
</a-tabs>
|
||||
|
|
@ -120,25 +121,29 @@ watch(
|
|||
{ immediate: true }
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
if (props.visible) {
|
||||
loading.value = true
|
||||
const { id } = route.params
|
||||
if (props.type === 'device') {
|
||||
detail(id as string).then((resp) => {
|
||||
loading.value = false
|
||||
instanceStore.setCurrent(resp.result)
|
||||
value.value = resp.result.metadata
|
||||
});
|
||||
} else {
|
||||
productDetail(id as string).then((resp) => {
|
||||
loading.value = false
|
||||
// productStore.setCurrent(resp.result)
|
||||
value.value = resp.result.metadata
|
||||
});
|
||||
watch(
|
||||
[props.visible, props.type],
|
||||
() => {
|
||||
if (props.visible) {
|
||||
loading.value = true
|
||||
const { id } = route.params
|
||||
if (props.type === 'device') {
|
||||
detail(id as string).then((resp) => {
|
||||
loading.value = false
|
||||
instanceStore.setCurrent(resp.result)
|
||||
value.value = resp.result.metadata
|
||||
});
|
||||
} else {
|
||||
productDetail(id as string).then((resp) => {
|
||||
loading.value = false
|
||||
// productStore.setCurrent(resp.result)
|
||||
value.value = resp.result.metadata
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
{ immediate: true }
|
||||
)
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.cat-content {
|
||||
|
|
|
|||
|
|
@ -41,24 +41,195 @@ import BasicCountCard from '../BasicCountCard.vue';
|
|||
import PlatformPicCard from '../PlatformPicCard.vue';
|
||||
import StepCard from '../StepCard.vue';
|
||||
|
||||
import {
|
||||
deviceBootConfig as _deviceBootConfig,
|
||||
deviceStepDetails,
|
||||
opsBootConfig as _opsBootConfig,
|
||||
opsStepDetails,
|
||||
} from '../../modules/config';
|
||||
import { useMenuStore } from '@/store/menu';
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
import { recommendList, bootConfig } from '../../index';
|
||||
|
||||
// 按钮权限控制
|
||||
const hasPermission = usePermissionStore().hasPermission;
|
||||
const productPermission = (action: string) =>
|
||||
hasPermission(`device/Product:${action}`);
|
||||
const devicePermission = (action: string) =>
|
||||
hasPermission(`device/Instance:${action}`);
|
||||
const rulePermission = (action: string) =>
|
||||
hasPermission(`rule-engine/Instance:${action}`);
|
||||
// 页面权限控制
|
||||
const menuPermission = useMenuStore().hasPermission;
|
||||
|
||||
// 物联网引导-数据
|
||||
const _deviceBootConfig: bootConfig[] = [
|
||||
{
|
||||
english: 'STEP1',
|
||||
label: '创建产品',
|
||||
link: '/iot/device/Product',
|
||||
auth: productPermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '创建设备',
|
||||
link: '/iot/device/Instance',
|
||||
auth: devicePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '规则引擎',
|
||||
link: '/iot/rule-engine/Instance',
|
||||
auth: rulePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
const deviceImages = [
|
||||
'/images/home/guide-home1.png',
|
||||
'/images/home/guide-home2.png',
|
||||
'/images/home/guide-home3.png',
|
||||
];
|
||||
const deviceBootConfig = _deviceBootConfig.map((item, i) => ({
|
||||
...item,
|
||||
image: deviceImages[i],
|
||||
}));
|
||||
|
||||
// 设备接入推荐步骤-数据
|
||||
const deviceStepDetails: recommendList[] = [
|
||||
{
|
||||
title: '创建产品',
|
||||
details:
|
||||
'产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/iot/device/Product',
|
||||
auth: productPermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '配置产品接入方式',
|
||||
details:
|
||||
'通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/iot/device/Product/detail',
|
||||
auth: productPermission('update'),
|
||||
dialogTag: 'accessMethod',
|
||||
},
|
||||
{
|
||||
title: '添加测试设备',
|
||||
details: '添加单个设备，用于验证产品模型是否配置正确。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/iot/device/Instance',
|
||||
auth: devicePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '功能调试',
|
||||
details:
|
||||
'对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
|
||||
iconUrl: '/images/home/bottom-2.png',
|
||||
linkUrl: '/iot/device/Instance/detail',
|
||||
// auth: devicePermission('update'),
|
||||
auth: true,
|
||||
dialogTag: 'funcTest',
|
||||
},
|
||||
{
|
||||
title: '批量添加设备',
|
||||
details: '批量添加同一产品下的设备',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/iot/device/Instance',
|
||||
auth: devicePermission('import'),
|
||||
params: {
|
||||
import: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
// 运维管理引导-数据
|
||||
const _opsBootConfig: bootConfig[] = [
|
||||
{
|
||||
english: 'STEP1',
|
||||
label: '设备接入配置',
|
||||
link: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/accessConfig'),
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '日志排查',
|
||||
link: '/iot/link/Log',
|
||||
auth: menuPermission('link/Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '实时监控',
|
||||
link: '/iot/link/dashboard',
|
||||
auth: menuPermission('link/dashboard'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
const opsImages = [
|
||||
'/images/home/guide-home4.png',
|
||||
'/images/home/guide-home5.png',
|
||||
'/images/home/guide-home6.png',
|
||||
];
|
||||
const opsBootConfig = _opsBootConfig.map((item, i) => ({
|
||||
...item,
|
||||
image: opsImages[i],
|
||||
}));
|
||||
|
||||
// 运维管理推荐步骤-数据
|
||||
const opsStepDetails: recommendList[] = [
|
||||
{
|
||||
title: '协议管理',
|
||||
details:
|
||||
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/iot/link/protocol',
|
||||
auth: menuPermission('link/Protocol'),
|
||||
},
|
||||
{
|
||||
title: '证书管理',
|
||||
details: '统一维护平台内的证书，用于数据通信加密。',
|
||||
iconUrl: '/images/home/bottom-6.png',
|
||||
linkUrl: '/iot/link/Certificate',
|
||||
auth: menuPermission('link/Certificate'),
|
||||
},
|
||||
{
|
||||
title: '网络组件',
|
||||
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/iot/link/type',
|
||||
auth: menuPermission('link/Type'),
|
||||
},
|
||||
{
|
||||
title: '设备接入网关',
|
||||
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/AccessConfig'),
|
||||
},
|
||||
{
|
||||
title: '日志管理',
|
||||
details: '监控系统日志，及时处理系统异常。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/iot/link/Log',
|
||||
auth: menuPermission('Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
|
||||
const deviceBootConfig = _deviceBootConfig.map((item,i) => ({...item, image: deviceImages[i]}));
|
||||
const opsBootConfig = _opsBootConfig.map((item,i) => ({...item, image: opsImages[i]}));
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -26,8 +26,82 @@ import BootCard from '../BootCard.vue';
|
|||
import BasicCountCard from '../BasicCountCard.vue';
|
||||
import PlatformPicCard from '../PlatformPicCard.vue';
|
||||
import StepCard from '../StepCard.vue';
|
||||
import { useMenuStore } from "@/store/menu";
|
||||
|
||||
import { bootConfig, recommendList } from '../../index';
|
||||
// 页面权限控制
|
||||
const menuPermission = useMenuStore().hasPermission;
|
||||
|
||||
const opsBootConfig: bootConfig[] = [
|
||||
{
|
||||
english: 'STEP1',
|
||||
label: '设备接入配置',
|
||||
link: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/accessConfig'),
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '日志排查',
|
||||
link: '/iot/link/Log',
|
||||
auth: menuPermission('link/Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '实时监控',
|
||||
link: '/iot/link/dashboard',
|
||||
auth: menuPermission('link/dashboard'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
const opsStepDetails: recommendList[] = [
|
||||
{
|
||||
title: '协议管理',
|
||||
details:
|
||||
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/iot/link/protocol',
|
||||
auth: menuPermission('link/Protocol'),
|
||||
|
||||
},
|
||||
{
|
||||
title: '证书管理',
|
||||
details: '统一维护平台内的证书，用于数据通信加密。',
|
||||
iconUrl: '/images/home/bottom-6.png',
|
||||
linkUrl: '/iot/link/Certificate',
|
||||
auth: menuPermission('link/Certificate'),
|
||||
|
||||
},
|
||||
{
|
||||
title: '网络组件',
|
||||
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/iot/link/type',
|
||||
auth: menuPermission('link/Type'),
|
||||
},
|
||||
{
|
||||
title: '设备接入网关',
|
||||
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/AccessConfig'),
|
||||
},
|
||||
{
|
||||
title: '日志管理',
|
||||
details: '监控系统日志，及时处理系统异常。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/iot/link/Log',
|
||||
auth: menuPermission('Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
}
|
||||
},
|
||||
];
|
||||
|
||||
import { opsBootConfig, opsStepDetails } from '../../modules/config';
|
||||
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,99 @@ import DeviceCountCard from '../DeviceCountCard.vue';
|
|||
import PlatformPicCard from '../PlatformPicCard.vue';
|
||||
import StepCard from '../StepCard.vue';
|
||||
|
||||
import { deviceBootConfig, deviceStepDetails } from '../../modules/config';
|
||||
import { usePermissionStore } from '@/store/permission';
|
||||
import { bootConfig, recommendList } from '../../index';
|
||||
|
||||
// 按钮权限控制
|
||||
const hasPermission = usePermissionStore().hasPermission;
|
||||
const productPermission = (action: string) =>
|
||||
hasPermission(`device/Product:${action}`);
|
||||
const devicePermission = (action: string) =>
|
||||
hasPermission(`device/Instance:${action}`);
|
||||
const rulePermission = (action: string) =>
|
||||
hasPermission(`rule-engine/Instance:${action}`);
|
||||
|
||||
const deviceBootConfig: bootConfig[] = [
|
||||
{
|
||||
english: 'STEP1',
|
||||
label: '创建产品',
|
||||
link: '/iot/device/Product',
|
||||
auth: productPermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '创建设备',
|
||||
link: '/iot/device/Instance',
|
||||
auth: devicePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '规则引擎',
|
||||
link: '/iot/rule-engine/Instance',
|
||||
auth: rulePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
const deviceStepDetails: recommendList[] = [
|
||||
{
|
||||
title: '创建产品',
|
||||
details:
|
||||
'产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/iot/device/Product',
|
||||
auth: productPermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '配置产品接入方式',
|
||||
details:
|
||||
'通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/iot/device/Product/detail',
|
||||
auth: productPermission('update'),
|
||||
dialogTag: 'accessMethod',
|
||||
},
|
||||
{
|
||||
title: '添加测试设备',
|
||||
details: '添加单个设备，用于验证产品模型是否配置正确。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/iot/device/Instance',
|
||||
auth: devicePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '功能调试',
|
||||
details:
|
||||
'对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
|
||||
iconUrl: '/images/home/bottom-2.png',
|
||||
linkUrl: '/iot/device/Instance/detail',
|
||||
// auth: devicePermission('update'),
|
||||
auth: true,
|
||||
dialogTag: 'funcTest',
|
||||
},
|
||||
{
|
||||
title: '批量添加设备',
|
||||
details: '批量添加同一产品下的设备',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/iot/device/Instance',
|
||||
auth: devicePermission('import'),
|
||||
params: {
|
||||
import: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -1,13 +1,9 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="header"></div>
|
||||
<div class="left"></div>
|
||||
<div class="content iot-home-container" v-loading="loading">
|
||||
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
||||
<DeviceHome v-else-if="currentView === 'device'" />
|
||||
<DevOpsHome v-else-if="currentView === 'ops'" />
|
||||
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
||||
</div>
|
||||
<div class="iot-home-container" v-loading="loading">
|
||||
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
||||
<DeviceHome v-else-if="currentView === 'device'" />
|
||||
<DevOpsHome v-else-if="currentView === 'ops'" />
|
||||
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -49,31 +45,12 @@ if (isNoCommunity) {
|
|||
isApiUser ? router.push('/system/api') : setCurrentView();
|
||||
}
|
||||
});
|
||||
}else setCurrentView()
|
||||
} else setCurrentView();
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
.iot-home-container {
|
||||
background: #f0f2f5;
|
||||
width: 100vw;
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
.header {
|
||||
height: 48px;
|
||||
background: #7e1c1c;
|
||||
width: 100vw;
|
||||
}
|
||||
.left {
|
||||
background: #352d85;
|
||||
width: 210px;
|
||||
min-height: calc(100vh - 48px);
|
||||
}
|
||||
.content {
|
||||
margin: 24px;
|
||||
width: calc(100vw - 280px);
|
||||
overflow: hidden;
|
||||
min-height: calc(100vh - 96px);
|
||||
}
|
||||
overflow: hidden;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -1,174 +0,0 @@
|
|||
// import {getImage} from '@/utils/comm'
|
||||
import { useMenuStore } from "@/store/menu";
|
||||
import { usePermissionStore } from "@/store/permission";
|
||||
import { recommendList, bootConfig } from "../index";
|
||||
|
||||
|
||||
// 按钮权限控制
|
||||
const hasPermission = usePermissionStore().hasPermission;
|
||||
const productPermission = (action: string) =>
|
||||
hasPermission(`device/Product:${action}`);
|
||||
const devicePermission = (action: string) =>
|
||||
hasPermission(`device/Instance:${action}`);
|
||||
const rulePermission = (action: string) =>
|
||||
hasPermission(`rule-engine/Instance:${action}`);
|
||||
// 页面权限控制
|
||||
const menuPermission = useMenuStore().hasPermission
|
||||
|
||||
|
||||
// 物联网引导-数据
|
||||
export const deviceBootConfig: bootConfig[] = [
|
||||
{
|
||||
english: 'STEP1',
|
||||
label: '创建产品',
|
||||
link: '/iot/device/Product',
|
||||
auth: productPermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '创建设备',
|
||||
link: '/iot/device/Instance',
|
||||
auth: devicePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '规则引擎',
|
||||
link: '/iot/rule-engine/Instance',
|
||||
auth: rulePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
// 设备接入推荐步骤-数据
|
||||
export const deviceStepDetails: recommendList[] = [
|
||||
{
|
||||
title: '创建产品',
|
||||
details:
|
||||
'产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/iot/device/Product',
|
||||
auth: productPermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '配置产品接入方式',
|
||||
details:
|
||||
'通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/iot/device/Product/detail',
|
||||
auth: productPermission('update'),
|
||||
dialogTag: 'accessMethod',
|
||||
},
|
||||
{
|
||||
title: '添加测试设备',
|
||||
details: '添加单个设备，用于验证产品模型是否配置正确。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/iot/device/Instance',
|
||||
auth: devicePermission('add'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '功能调试',
|
||||
details:
|
||||
'对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
|
||||
iconUrl: '/images/home/bottom-2.png',
|
||||
linkUrl: '/iot/device/Instance/detail',
|
||||
// auth: devicePermission('update'),
|
||||
auth: true,
|
||||
dialogTag: 'funcTest',
|
||||
},
|
||||
{
|
||||
title: '批量添加设备',
|
||||
details: '批量添加同一产品下的设备',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/iot/device/Instance',
|
||||
auth: devicePermission('import'),
|
||||
params: {
|
||||
import: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
// 运维管理引导-数据
|
||||
export const opsBootConfig: bootConfig[] = [
|
||||
{
|
||||
english: 'STEP1',
|
||||
label: '设备接入配置',
|
||||
link: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/accessConfig'),
|
||||
},
|
||||
{
|
||||
english: 'STEP2',
|
||||
label: '日志排查',
|
||||
link: '/iot/link/Log',
|
||||
auth: menuPermission('link/Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
},
|
||||
},
|
||||
{
|
||||
english: 'STEP3',
|
||||
label: '实时监控',
|
||||
link: '/iot/link/dashboard',
|
||||
auth: menuPermission('link/dashboard'),
|
||||
params: {
|
||||
save: true,
|
||||
},
|
||||
},
|
||||
];
|
||||
// 运维管理推荐步骤-数据
|
||||
export const opsStepDetails: recommendList[] = [
|
||||
{
|
||||
title: '协议管理',
|
||||
details:
|
||||
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
|
||||
iconUrl: '/images/home/bottom-1.png',
|
||||
linkUrl: '/iot/link/protocol',
|
||||
auth: menuPermission('link/Protocol'),
|
||||
|
||||
},
|
||||
{
|
||||
title: '证书管理',
|
||||
details: '统一维护平台内的证书，用于数据通信加密。',
|
||||
iconUrl: '/images/home/bottom-6.png',
|
||||
linkUrl: '/iot/link/Certificate',
|
||||
auth: menuPermission('link/Certificate'),
|
||||
|
||||
},
|
||||
{
|
||||
title: '网络组件',
|
||||
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
|
||||
iconUrl: '/images/home/bottom-3.png',
|
||||
linkUrl: '/iot/link/type',
|
||||
auth: menuPermission('link/Type'),
|
||||
},
|
||||
{
|
||||
title: '设备接入网关',
|
||||
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
|
||||
iconUrl: '/images/home/bottom-4.png',
|
||||
linkUrl: '/iot/link/accessConfig',
|
||||
auth: menuPermission('link/AccessConfig'),
|
||||
},
|
||||
{
|
||||
title: '日志管理',
|
||||
details: '监控系统日志，及时处理系统异常。',
|
||||
iconUrl: '/images/home/bottom-5.png',
|
||||
linkUrl: '/iot/link/Log',
|
||||
auth: menuPermission('Log'),
|
||||
params: {
|
||||
key: 'system',
|
||||
}
|
||||
},
|
||||
];
|
||||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
|
|
@ -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;
|
||||
};
|
||||
|
|
@ -77,20 +77,35 @@
|
|||
v-bind="item.tooltip"
|
||||
:title="item.disabled && item.tooltip.title"
|
||||
>
|
||||
<a-dropdown
|
||||
placement="bottomRight"
|
||||
v-if="item.key === 'others'"
|
||||
>
|
||||
<a-button>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</a-button>
|
||||
<template #overlay>
|
||||
<a-menu>
|
||||
<a-menu-item
|
||||
v-for="(o, i) in item.children"
|
||||
:key="i"
|
||||
>
|
||||
<a-button type="link" @click="o.onClick">
|
||||
<AIcon :type="o.icon" />
|
||||
<span>{{ o.text }}</span>
|
||||
</a-button>
|
||||
</a-menu-item>
|
||||
</a-menu>
|
||||
</template>
|
||||
</a-dropdown>
|
||||
<a-popconfirm
|
||||
v-if="item.popConfirm"
|
||||
v-else-if="item.key === 'delete'"
|
||||
v-bind="item.popConfirm"
|
||||
:disabled="item.disabled"
|
||||
>
|
||||
<a-button :disabled="item.disabled">
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</template>
|
||||
<AIcon type="DeleteOutlined" />
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
<template v-else>
|
||||
|
|
@ -98,14 +113,8 @@
|
|||
:disabled="item.disabled"
|
||||
@click="item.onClick"
|
||||
>
|
||||
<AIcon
|
||||
type="DeleteOutlined"
|
||||
v-if="item.key === 'delete'"
|
||||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</template>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
</a-button>
|
||||
</template>
|
||||
</a-tooltip>
|
||||
|
|
@ -351,29 +360,35 @@ const getActions = (
|
|||
currentConfig.value = data;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'debug',
|
||||
text: '导出',
|
||||
tooltip: {
|
||||
title: '导出',
|
||||
},
|
||||
icon: 'ArrowDownOutlined',
|
||||
onClick: () => {
|
||||
downloadObject(data, `通知配置`);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'sync',
|
||||
text: '同步用户',
|
||||
tooltip: {
|
||||
title: '同步用户',
|
||||
},
|
||||
icon: 'TeamOutlined',
|
||||
onClick: () => {
|
||||
syncVis.value = true;
|
||||
currentConfig.value = data;
|
||||
},
|
||||
},
|
||||
// {
|
||||
// key: 'others',
|
||||
// text: '其他',
|
||||
// children: [
|
||||
// {
|
||||
// key: 'debug',
|
||||
// text: '导出',
|
||||
// tooltip: {
|
||||
// title: '导出',
|
||||
// },
|
||||
// icon: 'ArrowDownOutlined',
|
||||
// onClick: () => {
|
||||
// downloadObject(data, `通知配置`);
|
||||
// },
|
||||
// },
|
||||
// {
|
||||
// key: 'sync',
|
||||
// text: '同步用户',
|
||||
// tooltip: {
|
||||
// title: '同步用户',
|
||||
// },
|
||||
// icon: 'TeamOutlined',
|
||||
// onClick: () => {
|
||||
// syncVis.value = true;
|
||||
// currentConfig.value = data;
|
||||
// },
|
||||
// },
|
||||
// ],
|
||||
// },
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
|
|
@ -392,9 +407,55 @@ const getActions = (
|
|||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
if (data.provider === 'dingTalkMessage' || data.provider === 'corpMessage')
|
||||
|
||||
const others: ActionsType = {
|
||||
key: 'others',
|
||||
text: '其他',
|
||||
icon: 'EllipsisOutlined',
|
||||
children: [
|
||||
{
|
||||
key: 'debug',
|
||||
text: '导出',
|
||||
tooltip: {
|
||||
title: '导出',
|
||||
},
|
||||
icon: 'ArrowDownOutlined',
|
||||
onClick: () => {
|
||||
downloadObject(data, `通知配置`);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'sync',
|
||||
text: '同步用户',
|
||||
tooltip: {
|
||||
title: '同步用户',
|
||||
},
|
||||
icon: 'TeamOutlined',
|
||||
onClick: () => {
|
||||
syncVis.value = true;
|
||||
currentConfig.value = data;
|
||||
},
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
if (type === 'card') {
|
||||
if (
|
||||
data.provider !== 'dingTalkMessage' &&
|
||||
data.provider !== 'corpMessage'
|
||||
)
|
||||
others.children.splice(1, 1);
|
||||
actions.splice(actions.length - 1, 0, others);
|
||||
return actions;
|
||||
return actions.filter((i: ActionsType) => i.key !== 'sync');
|
||||
} else {
|
||||
if (
|
||||
data.provider !== 'dingTalkMessage' &&
|
||||
data.provider !== 'corpMessage'
|
||||
)
|
||||
others.children.splice(1, 1);
|
||||
actions.splice(actions.length - 1, 0, ...others.children);
|
||||
return actions;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="basic-info-container">
|
||||
<a-card>
|
||||
<h3>基本信息</h3>
|
||||
<a-form :model="form.data" class="basic-form">
|
||||
<a-form ref="basicFormRef" :model="form.data" class="basic-form">
|
||||
<div class="row" style="display: flex">
|
||||
<a-form-item
|
||||
label="菜单图标"
|
||||
|
|
@ -16,13 +16,20 @@
|
|||
style="flex: 0 0 186px"
|
||||
>
|
||||
<div class="icon-upload has-icon" v-if="form.data.icon">
|
||||
<svg aria-hidden="true">
|
||||
<use :xlinkHref="`#${form.data.icon}`" />
|
||||
</svg>
|
||||
<span class="mark">点击修改</span>
|
||||
<AIcon
|
||||
:type="form.data.icon"
|
||||
style="font-size: 90px"
|
||||
/>
|
||||
<span class="mark" @click="dialog.openDialog"
|
||||
>点击修改</span
|
||||
>
|
||||
</div>
|
||||
|
||||
<div v-else class="icon-upload no-icon">
|
||||
<div
|
||||
v-else
|
||||
@click="dialog.openDialog"
|
||||
class="icon-upload no-icon"
|
||||
>
|
||||
<span>
|
||||
<plus-outlined style="font-size: 30px" />
|
||||
<p>点击选择图标</p>
|
||||
|
|
@ -97,7 +104,11 @@
|
|||
</a-card>
|
||||
<a-card>
|
||||
<h3>权限配置</h3>
|
||||
<a-form :model="form.data" class="basic-form permiss-form">
|
||||
<a-form
|
||||
ref="permissFormRef"
|
||||
:model="form.data"
|
||||
class="basic-form permiss-form"
|
||||
>
|
||||
<a-form-item name="accessSupport" required>
|
||||
<template #label>
|
||||
<span style="margin-right: 3px">数据权限控制</span>
|
||||
|
|
@ -174,17 +185,19 @@
|
|||
</a-form-item>
|
||||
</a-form-item>
|
||||
<a-form-item label="权限">
|
||||
<a-input
|
||||
v-model:value="form.data.permissions"
|
||||
style="width: 300px"
|
||||
allowClear
|
||||
placeholder="请输入权限名称"
|
||||
/>
|
||||
<PermissChoose v-model:value="form.data.permissions" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-button type="primary" @click="clickSave">保存</a-button>
|
||||
<a-button type="primary" @click="clickSave" v-loading="saveLoading"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-card>
|
||||
|
||||
<!-- 弹窗 -->
|
||||
<div class="dialogs">
|
||||
<ChooseIconDialog ref="ChooseIconRef" @confirm="dialog.confirm" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -194,20 +207,28 @@ import {
|
|||
QuestionCircleFilled,
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import ChooseIconDialog from '../components/ChooseIconDialog.vue';
|
||||
import PermissChoose from '../components/PermissChoose.vue';
|
||||
|
||||
import {
|
||||
getMenuTree_api,
|
||||
getAssetsType_api,
|
||||
getMenuDetail_api,
|
||||
getMenuInfo_api,
|
||||
saveMenuInfo_api,
|
||||
addMenuInfo_api,
|
||||
} from '@/api/system/menu';
|
||||
import { exportPermission_api } from '@/api/system/permission';
|
||||
|
||||
const route = useRoute();
|
||||
const router = useRouter();
|
||||
const routeParams = {
|
||||
id: route.params.id === ':id' ? '' : (route.params.id as string),
|
||||
id: route.params.id === ':id' ? undefined : (route.params.id as string),
|
||||
...route.query,
|
||||
url: route.query.basePath,
|
||||
};
|
||||
|
||||
const basicFormRef = ref<FormInstance>();
|
||||
const permissFormRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
data: {
|
||||
name: '',
|
||||
|
|
@ -215,8 +236,8 @@ const form = reactive({
|
|||
sortIndex: '',
|
||||
icon: '',
|
||||
describe: '',
|
||||
permissions: '',
|
||||
accessSupport: '',
|
||||
permissions: [],
|
||||
accessSupport: 'unsupported',
|
||||
assetType: undefined,
|
||||
indirectMenus: [],
|
||||
...routeParams,
|
||||
|
|
@ -229,23 +250,63 @@ const form = reactive({
|
|||
init: () => {
|
||||
// 获取菜单详情
|
||||
routeParams.id &&
|
||||
getMenuDetail_api(routeParams.id).then((resp) => {
|
||||
getMenuInfo_api(routeParams.id).then((resp) => {
|
||||
console.log('菜单详情', resp);
|
||||
});
|
||||
// 获取权限列表
|
||||
// exportPermission_api()
|
||||
// 获取关联菜单
|
||||
getMenuTree_api({ paging: false }).then((resp) => {
|
||||
console.log('关联菜单', resp);
|
||||
});
|
||||
// 获取资产类型
|
||||
getAssetsType_api().then((resp:any) => {
|
||||
form.assetsType = resp.result.map((item:any)=>({label:item.name,value:item.id}))
|
||||
getAssetsType_api().then((resp: any) => {
|
||||
form.assetsType = resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
});
|
||||
},
|
||||
});
|
||||
form.init();
|
||||
const clickSave = () => {};
|
||||
|
||||
const ChooseIconRef = ref<any>(null);
|
||||
const dialog = {
|
||||
openDialog: () => {
|
||||
ChooseIconRef.value && ChooseIconRef.value.openDialog();
|
||||
},
|
||||
confirm: (typeStr: string) => {
|
||||
form.data.icon = typeStr || form.data.icon;
|
||||
},
|
||||
};
|
||||
const saveLoading = ref<boolean>(false);
|
||||
const clickSave = () => {
|
||||
if (!basicFormRef || !permissFormRef) return;
|
||||
Promise.all([
|
||||
basicFormRef.value?.validate(),
|
||||
permissFormRef.value?.validate(),
|
||||
])
|
||||
.then(() => {
|
||||
const api = routeParams.id ? saveMenuInfo_api : addMenuInfo_api;
|
||||
saveLoading.value = true;
|
||||
api(form.data)
|
||||
.then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// 新增后刷新页面，编辑则不需要
|
||||
if (!routeParams.id) {
|
||||
router.push(
|
||||
`/system/Menu/detail/${resp.result.id}`,
|
||||
);
|
||||
routeParams.id = resp.result.id;
|
||||
form.init();
|
||||
}
|
||||
} else {
|
||||
message.error('操作失败！');
|
||||
}
|
||||
})
|
||||
.finally(() => (saveLoading.value = false));
|
||||
})
|
||||
.catch((err) => {});
|
||||
};
|
||||
|
||||
type formType = {
|
||||
name: string;
|
||||
|
|
@ -253,7 +314,7 @@ type formType = {
|
|||
url: string;
|
||||
sortIndex: string;
|
||||
icon: string;
|
||||
permissions: string;
|
||||
permissions: any[];
|
||||
describe: string;
|
||||
accessSupport: string;
|
||||
assetType: string | undefined;
|
||||
|
|
@ -321,6 +382,25 @@ type assetType = {
|
|||
}
|
||||
}
|
||||
.has-icon {
|
||||
position: relative;
|
||||
text-align: center;
|
||||
|
||||
.mark {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
display: none;
|
||||
background-color: rgba(0, 0, 0, 0.35);
|
||||
color: #fff;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
font-size: 16px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
&:hover .mark {
|
||||
display: flex;
|
||||
}
|
||||
}
|
||||
.no-icon {
|
||||
background-color: rgba(0, 0, 0, 0.06);
|
||||
|
|
|
|||
|
|
@ -0,0 +1,100 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
title="菜单图标"
|
||||
width="800px"
|
||||
@ok="dialog.handleOk"
|
||||
>
|
||||
<a-radio-group v-model:value="selected" class="radio">
|
||||
<a-radio-button
|
||||
v-for="typeStr in iconKeys"
|
||||
:value="typeStr"
|
||||
:class="{ active: selected === typeStr }"
|
||||
>
|
||||
<a-icon :type="typeStr" />
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const emits = defineEmits(['confirm']);
|
||||
const iconKeys = [
|
||||
'EyeOutlined',
|
||||
'EditOutlined',
|
||||
'PlusOutlined',
|
||||
'DeleteOutlined',
|
||||
'CheckCircleOutlined',
|
||||
'StopOutlined',
|
||||
'CheckOutlined',
|
||||
'CloseOutlined',
|
||||
'DownOutlined',
|
||||
'ImportOutlined',
|
||||
'ExportOutlined',
|
||||
'SyncOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'UploadOutlined',
|
||||
'LoadingOutlined',
|
||||
'PlusCircleOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'DisconnectOutlined',
|
||||
'LinkOutlined',
|
||||
'PoweroffOutlined',
|
||||
'SwapOutlined',
|
||||
'BugOutlined',
|
||||
'BarsOutlined',
|
||||
'ArrowDownOutlined',
|
||||
'SmallDashOutlined',
|
||||
'TeamOutlined',
|
||||
'MenuUnfoldOutlined',
|
||||
'MenuFoldOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'InfoCircleOutlined',
|
||||
'SearchOutlined',
|
||||
];
|
||||
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
handleOk: () => {
|
||||
emits('confirm', selected.value);
|
||||
dialog.changeVisible();
|
||||
selected.value = '';
|
||||
},
|
||||
changeVisible: (show?: boolean) => {
|
||||
dialog.visible = show === undefined ? !dialog.visible : show;
|
||||
},
|
||||
});
|
||||
|
||||
const selected = ref<string>('');
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.radio {
|
||||
display: grid;
|
||||
grid-gap: 20px;
|
||||
grid-template-columns: repeat(6, 1fr);
|
||||
max-height: 500px;
|
||||
overflow-y: auto;
|
||||
|
||||
.ant-radio-button-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
height: 100px;
|
||||
font-size: 40px;
|
||||
border: 2px solid #efefef;
|
||||
border-radius: 2px;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: #415ed1;
|
||||
border-color: #415ed1;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,47 @@
|
|||
<template>
|
||||
<div class="permission-choose-container">
|
||||
<a-input
|
||||
v-model:value="searchValue"
|
||||
style="width: 300px"
|
||||
allowClear
|
||||
placeholder="请输入权限名称"
|
||||
/>
|
||||
|
||||
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { exportPermission_api } from '@/api/system/permission';
|
||||
|
||||
const props = defineProps({
|
||||
value: Array,
|
||||
});
|
||||
const searchValue = ref<string>('');
|
||||
|
||||
const permission = reactive({
|
||||
list: [] as permissionType[],
|
||||
// 获取权限列表
|
||||
getList: () => {
|
||||
|
||||
exportPermission_api({ paging: false }).then((resp) => {
|
||||
permission.list = resp.result as permissionType[]
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
permission.getList()
|
||||
|
||||
|
||||
|
||||
|
||||
type permissionType = {
|
||||
id: string;
|
||||
name: string;
|
||||
actions: object[]
|
||||
}
|
||||
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
@ -208,7 +208,8 @@ const table = reactive({
|
|||
};
|
||||
const resp: any = await getMenuTree_api(params);
|
||||
const lastItem = resp.result[resp.result.length - 1];
|
||||
table.total == lastItem ? lastItem.sortIndex + 1 : 1;
|
||||
table.total = lastItem ? lastItem.sortIndex + 1 : 1;
|
||||
|
||||
return {
|
||||
code: resp.message,
|
||||
result: {
|
||||
|
|
@ -225,7 +226,7 @@ const table = reactive({
|
|||
router.push(
|
||||
`/system/Menu/detail/${row.id || ':id'}?pid=${
|
||||
row.pid || ''
|
||||
}&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
|
||||
}&basePath=${row.basePath || ''}&sortIndex=${table.total}`,
|
||||
);
|
||||
},
|
||||
// 删除
|
||||
|
|
|
|||
Loading…
Reference in New Issue