Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
JiangQiming
commit
0626348328
|
|
@ -98,3 +98,21 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
|
|||
* @param params
|
||||
*/
|
||||
export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
|
||||
|
||||
/**
|
||||
* 验证iccid
|
||||
* @param id
|
||||
*/
|
||||
export const validateId = (id: string) => server.get(`/network/card/id/_validate?id=${id}`);
|
||||
|
||||
/**
|
||||
* 新增物联卡
|
||||
* @param data
|
||||
*/
|
||||
export const add = (data: any) => server.patch(`/network/card`, data);
|
||||
|
||||
/**
|
||||
* 编辑物联卡
|
||||
* @param data
|
||||
*/
|
||||
export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
|
||||
|
|
@ -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);
|
||||
|
|
@ -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,7 +121,9 @@ watch(
|
|||
{ immediate: true }
|
||||
)
|
||||
|
||||
watchEffect(() => {
|
||||
watch(
|
||||
[props.visible, props.type],
|
||||
() => {
|
||||
if (props.visible) {
|
||||
loading.value = true
|
||||
const { id } = route.params
|
||||
|
|
@ -138,7 +141,9 @@ watchEffect(() => {
|
|||
});
|
||||
}
|
||||
}
|
||||
})
|
||||
},
|
||||
{ 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,14 +1,10 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<div class="header"></div>
|
||||
<div class="left"></div>
|
||||
<div class="content iot-home-container" v-loading="loading">
|
||||
<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>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
|
|
@ -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);
|
||||
}
|
||||
}
|
||||
</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',
|
||||
}
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:maskClosable="false"
|
||||
width="600px"
|
||||
:visible="true"
|
||||
:title="type === 'add' ? '新增' : '编辑'"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:confirmLoading="btnLoading"
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<a-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="modelRef"
|
||||
>
|
||||
<a-form-item label="卡号" name="id">
|
||||
<a-input
|
||||
v-model:value="modelRef.id"
|
||||
placeholder="请输入卡号"
|
||||
:disabled="type === 'edit'"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="iccId">
|
||||
<template #label>
|
||||
<span>
|
||||
ICCID
|
||||
<a-tooltip title="IC卡的唯一识别号码">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="modelRef.iccId"
|
||||
placeholder="请输入ICCID"
|
||||
:disabled="type === 'edit'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="平台对接" name="platformConfigId">
|
||||
<a-select
|
||||
showSearch
|
||||
:filter-option="filterOption"
|
||||
:disabled="type === 'edit'"
|
||||
allowClear
|
||||
:options="platformConfigList"
|
||||
v-model:value="modelRef.platformConfigId"
|
||||
placeholder="请选择平台对接"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="运营商" name="operatorName">
|
||||
<a-select
|
||||
allowClear
|
||||
showSearch
|
||||
:filter-option="filterOption"
|
||||
:options="OperatorList"
|
||||
v-model:value="modelRef.operatorName"
|
||||
placeholder="请选择运营商"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="类型" name="cardType">
|
||||
<a-select
|
||||
allowClear
|
||||
showSearch
|
||||
:disabled="type === 'edit'"
|
||||
:filter-option="filterOption"
|
||||
:options="TypeList"
|
||||
v-model:value="modelRef.cardType"
|
||||
placeholder="请选择类型"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="describe">
|
||||
<a-textarea
|
||||
v-model:value="modelRef.describe"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
queryPlatformNoPage,
|
||||
validateId,
|
||||
add,
|
||||
edit,
|
||||
} from '@/api/iot-card/cardManagement';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { OperatorList, TypeList } from '@/views/iot-card/data';
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const platformConfigList = ref<Record<string, any>[]>([]);
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const modelRef = reactive({
|
||||
id: '',
|
||||
iccId: '',
|
||||
platformConfigId: undefined,
|
||||
operatorName: undefined,
|
||||
cardType: undefined,
|
||||
describe: '',
|
||||
});
|
||||
|
||||
const isValidateId = async (id: string) => {
|
||||
const res: any = await validateId(id);
|
||||
if (res.status === 200) {
|
||||
if (res.result?.passed) {
|
||||
return '';
|
||||
} else {
|
||||
return res.result.reason;
|
||||
}
|
||||
} else {
|
||||
return '请输入输入正确的ICCID';
|
||||
}
|
||||
};
|
||||
|
||||
const vailIccId = async (_: Record<string, any>, value: string) => {
|
||||
if (value) {
|
||||
const validateId =
|
||||
props.type === 'add' ? await isValidateId(value) : '';
|
||||
if (validateId === '') {
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
return Promise.reject(new Error(`${validateId}`));
|
||||
}
|
||||
// } else {
|
||||
// return Promise.reject(new Error('请输入卡号'));
|
||||
}
|
||||
};
|
||||
|
||||
const rules = {
|
||||
id: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入卡号',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
{
|
||||
validator: vailIccId,
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
iccId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入ICCID',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
],
|
||||
platformConfigId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择平台对接',
|
||||
},
|
||||
],
|
||||
cardType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择类型',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return (
|
||||
option.componentOptions.children[0].text
|
||||
.toLowerCase()
|
||||
.indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(newValue) => {
|
||||
queryPlatformNoPage({
|
||||
paging: false,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [{ column: 'state', value: 'enabled' }],
|
||||
}).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
platformConfigList.value = resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
}
|
||||
});
|
||||
Object.assign(modelRef, newValue);
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
btnLoading.value = true;
|
||||
const resp =
|
||||
props.type === 'add'
|
||||
? await add(toRaw(modelRef))
|
||||
: await edit(toRaw(modelRef));
|
||||
btnLoading.value = false;
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
emit('change', true);
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
@ -151,11 +151,18 @@
|
|||
<span class="flow-text">
|
||||
{{ slotProps.totalFlow }}
|
||||
</span>
|
||||
<span class="card-item-content-text"> M 使用流量</span>
|
||||
<span class="card-item-content-text">
|
||||
M 使用流量</span
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="progress-text">
|
||||
<div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
|
||||
<div>
|
||||
{{
|
||||
slotProps.totalFlow - slotProps.usedFlow
|
||||
}}
|
||||
%
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
总共 {{ slotProps.totalFlow }} M
|
||||
</div>
|
||||
|
|
@ -163,7 +170,9 @@
|
|||
<a-progress
|
||||
:strokeColor="'#ADC6FF'"
|
||||
:showInfo="false"
|
||||
:percent="slotProps.totalFlow - slotProps.usedFlow"
|
||||
:percent="
|
||||
slotProps.totalFlow - slotProps.usedFlow
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -307,6 +316,13 @@
|
|||
:cardId="cardId"
|
||||
@change="bindDevice"
|
||||
/>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save
|
||||
v-if="visible"
|
||||
:type="saveType"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -333,6 +349,7 @@ import { getImage } from '@/utils/comm';
|
|||
import BindDevice from './BindDevice.vue';
|
||||
import Import from './Import.vue';
|
||||
import Export from './Export.vue';
|
||||
import Save from './Save.vue';
|
||||
|
||||
const cardManageRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
|
@ -344,6 +361,7 @@ const exportVisible = ref<boolean>(false);
|
|||
const importVisible = ref<boolean>(false);
|
||||
const cardId = ref<any>();
|
||||
const current = ref<Partial<CardManagement>>({});
|
||||
const saveType = ref<string>('');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -504,6 +522,11 @@ const getActions = (
|
|||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: () => {
|
||||
visible.value = true;
|
||||
current.value = data;
|
||||
saveType.value = 'edit';
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'view',
|
||||
|
|
@ -651,10 +674,27 @@ const handleView = (id: string) => {
|
|||
/**
|
||||
* 新增
|
||||
*/
|
||||
const handleAdd = () => {};
|
||||
const handleAdd = () => {
|
||||
visible.value = true;
|
||||
current.value = {};
|
||||
saveType.value = 'add';
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增、编辑关闭弹窗
|
||||
* @param val 加载表格
|
||||
*/
|
||||
const saveChange = (val: any) => {
|
||||
visible.value = false;
|
||||
current.value = {};
|
||||
if (val) {
|
||||
cardManageRef.value?.reload();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 绑定设备关闭窗口
|
||||
* @param val
|
||||
*/
|
||||
const bindDevice = (val: boolean) => {
|
||||
bindDeviceVisible.value = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,76 @@
|
|||
import { getImage } from '@/utils/comm';
|
||||
|
||||
// 平台类型
|
||||
export const PlatformTypeList = [
|
||||
{
|
||||
label: '移动OneLink',
|
||||
value: 'OneLinkPB',
|
||||
imgUrl: getImage('/iot-card/onelink.png'),
|
||||
},
|
||||
{
|
||||
label: '电信Ctwing',
|
||||
value: 'CtwingCmp',
|
||||
imgUrl: getImage('/iot-card/ctwingcmp.png'),
|
||||
},
|
||||
{
|
||||
label: '联通Unicom',
|
||||
value: 'UnicomCmp',
|
||||
imgUrl: getImage('/iot-card/unicom.png'),
|
||||
},
|
||||
];
|
||||
|
||||
//运营商
|
||||
export const OperatorList = [
|
||||
{
|
||||
label: '移动',
|
||||
value: '移动',
|
||||
},
|
||||
{
|
||||
label: '电信',
|
||||
value: '电信',
|
||||
},
|
||||
{
|
||||
label: '联通',
|
||||
value: '联通',
|
||||
},
|
||||
];
|
||||
|
||||
// 类型
|
||||
export const TypeList = [
|
||||
{
|
||||
label: '年卡',
|
||||
value: 'year',
|
||||
},
|
||||
{
|
||||
label: '季卡',
|
||||
value: 'season',
|
||||
},
|
||||
{
|
||||
label: '月卡',
|
||||
value: 'month',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: 'other',
|
||||
},
|
||||
];
|
||||
|
||||
// 支付方式
|
||||
export const PaymentMethod = [
|
||||
{
|
||||
label: '支付宝手机网站支付',
|
||||
value: 'ALIPAY_WAP',
|
||||
},
|
||||
{
|
||||
label: '支付宝网页及时到账支付',
|
||||
value: 'ALIPAY_WEB',
|
||||
},
|
||||
{
|
||||
label: '微信公众号支付',
|
||||
value: 'WEIXIN_JSAPI',
|
||||
},
|
||||
{
|
||||
label: '微信扫码支付',
|
||||
value: 'WEIXIN_NATIVE',
|
||||
},
|
||||
];
|
||||
|
|
@ -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}))
|
||||
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