Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
commit
0626348328
|
@ -98,3 +98,21 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
|
||||||
* @param params
|
* @param params
|
||||||
*/
|
*/
|
||||||
export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
|
export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证iccid
|
||||||
|
* @param id
|
||||||
|
*/
|
||||||
|
export const validateId = (id: string) => server.get(`/network/card/id/_validate?id=${id}`);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 新增物联卡
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export const add = (data: any) => server.patch(`/network/card`, data);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑物联卡
|
||||||
|
* @param data
|
||||||
|
*/
|
||||||
|
export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
|
|
@ -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 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>
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<a-tabs @change="handleConvertMetadata">
|
<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">
|
<div class="cat-panel">
|
||||||
<!-- TODO 代码编辑器 -->
|
<!-- TODO 代码编辑器 -->
|
||||||
|
{{ value }}
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
</a-tabs>
|
</a-tabs>
|
||||||
|
@ -120,7 +121,9 @@ watch(
|
||||||
{ immediate: true }
|
{ immediate: true }
|
||||||
)
|
)
|
||||||
|
|
||||||
watchEffect(() => {
|
watch(
|
||||||
|
[props.visible, props.type],
|
||||||
|
() => {
|
||||||
if (props.visible) {
|
if (props.visible) {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
const { id } = route.params
|
const { id } = route.params
|
||||||
|
@ -138,7 +141,9 @@ watchEffect(() => {
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
})
|
},
|
||||||
|
{ immediate: true }
|
||||||
|
)
|
||||||
</script>
|
</script>
|
||||||
<style scoped lang="less">
|
<style scoped lang="less">
|
||||||
.cat-content {
|
.cat-content {
|
||||||
|
|
|
@ -41,24 +41,195 @@ import BasicCountCard from '../BasicCountCard.vue';
|
||||||
import PlatformPicCard from '../PlatformPicCard.vue';
|
import PlatformPicCard from '../PlatformPicCard.vue';
|
||||||
import StepCard from '../StepCard.vue';
|
import StepCard from '../StepCard.vue';
|
||||||
|
|
||||||
import {
|
import { useMenuStore } from '@/store/menu';
|
||||||
deviceBootConfig as _deviceBootConfig,
|
import { usePermissionStore } from '@/store/permission';
|
||||||
deviceStepDetails,
|
import { recommendList, bootConfig } from '../../index';
|
||||||
opsBootConfig as _opsBootConfig,
|
|
||||||
opsStepDetails,
|
|
||||||
} from '../../modules/config';
|
|
||||||
|
|
||||||
|
// 按钮权限控制
|
||||||
|
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 = [
|
const deviceImages = [
|
||||||
'/images/home/guide-home1.png',
|
'/images/home/guide-home1.png',
|
||||||
'/images/home/guide-home2.png',
|
'/images/home/guide-home2.png',
|
||||||
'/images/home/guide-home3.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 = [
|
const opsImages = [
|
||||||
'/images/home/guide-home4.png',
|
'/images/home/guide-home4.png',
|
||||||
'/images/home/guide-home5.png',
|
'/images/home/guide-home5.png',
|
||||||
'/images/home/guide-home6.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>
|
</script>
|
||||||
|
|
|
@ -26,8 +26,82 @@ import BootCard from '../BootCard.vue';
|
||||||
import BasicCountCard from '../BasicCountCard.vue';
|
import BasicCountCard from '../BasicCountCard.vue';
|
||||||
import PlatformPicCard from '../PlatformPicCard.vue';
|
import PlatformPicCard from '../PlatformPicCard.vue';
|
||||||
import StepCard from '../StepCard.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>
|
</script>
|
||||||
|
|
||||||
|
|
|
@ -27,7 +27,99 @@ import DeviceCountCard from '../DeviceCountCard.vue';
|
||||||
import PlatformPicCard from '../PlatformPicCard.vue';
|
import PlatformPicCard from '../PlatformPicCard.vue';
|
||||||
import StepCard from '../StepCard.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>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
|
@ -1,14 +1,10 @@
|
||||||
<template>
|
<template>
|
||||||
<div class="container">
|
<div class="iot-home-container" v-loading="loading">
|
||||||
<div class="header"></div>
|
|
||||||
<div class="left"></div>
|
|
||||||
<div class="content iot-home-container" v-loading="loading">
|
|
||||||
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
||||||
<DeviceHome v-else-if="currentView === 'device'" />
|
<DeviceHome v-else-if="currentView === 'device'" />
|
||||||
<DevOpsHome v-else-if="currentView === 'ops'" />
|
<DevOpsHome v-else-if="currentView === 'ops'" />
|
||||||
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
@ -49,31 +45,12 @@ if (isNoCommunity) {
|
||||||
isApiUser ? router.push('/system/api') : setCurrentView();
|
isApiUser ? router.push('/system/api') : setCurrentView();
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}else setCurrentView()
|
} else setCurrentView();
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
.container {
|
.iot-home-container {
|
||||||
background: #f0f2f5;
|
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;
|
overflow: hidden;
|
||||||
min-height: calc(100vh - 96px);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
</style>
|
</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">
|
<span class="flow-text">
|
||||||
{{ slotProps.totalFlow }}
|
{{ slotProps.totalFlow }}
|
||||||
</span>
|
</span>
|
||||||
<span class="card-item-content-text"> M 使用流量</span>
|
<span class="card-item-content-text">
|
||||||
|
M 使用流量</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>
|
<div v-else>
|
||||||
<div class="progress-text">
|
<div class="progress-text">
|
||||||
<div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
|
<div>
|
||||||
|
{{
|
||||||
|
slotProps.totalFlow - slotProps.usedFlow
|
||||||
|
}}
|
||||||
|
%
|
||||||
|
</div>
|
||||||
<div class="card-item-content-text">
|
<div class="card-item-content-text">
|
||||||
总共 {{ slotProps.totalFlow }} M
|
总共 {{ slotProps.totalFlow }} M
|
||||||
</div>
|
</div>
|
||||||
|
@ -163,7 +170,9 @@
|
||||||
<a-progress
|
<a-progress
|
||||||
:strokeColor="'#ADC6FF'"
|
:strokeColor="'#ADC6FF'"
|
||||||
:showInfo="false"
|
:showInfo="false"
|
||||||
:percent="slotProps.totalFlow - slotProps.usedFlow"
|
:percent="
|
||||||
|
slotProps.totalFlow - slotProps.usedFlow
|
||||||
|
"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
@ -307,6 +316,13 @@
|
||||||
:cardId="cardId"
|
:cardId="cardId"
|
||||||
@change="bindDevice"
|
@change="bindDevice"
|
||||||
/>
|
/>
|
||||||
|
<!-- 新增、编辑 -->
|
||||||
|
<Save
|
||||||
|
v-if="visible"
|
||||||
|
:type="saveType"
|
||||||
|
:data="current"
|
||||||
|
@change="saveChange"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -333,6 +349,7 @@ import { getImage } from '@/utils/comm';
|
||||||
import BindDevice from './BindDevice.vue';
|
import BindDevice from './BindDevice.vue';
|
||||||
import Import from './Import.vue';
|
import Import from './Import.vue';
|
||||||
import Export from './Export.vue';
|
import Export from './Export.vue';
|
||||||
|
import Save from './Save.vue';
|
||||||
|
|
||||||
const cardManageRef = ref<Record<string, any>>({});
|
const cardManageRef = ref<Record<string, any>>({});
|
||||||
const params = 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 importVisible = ref<boolean>(false);
|
||||||
const cardId = ref<any>();
|
const cardId = ref<any>();
|
||||||
const current = ref<Partial<CardManagement>>({});
|
const current = ref<Partial<CardManagement>>({});
|
||||||
|
const saveType = ref<string>('');
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
{
|
{
|
||||||
|
@ -504,6 +522,11 @@ const getActions = (
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
},
|
},
|
||||||
icon: 'EditOutlined',
|
icon: 'EditOutlined',
|
||||||
|
onClick: () => {
|
||||||
|
visible.value = true;
|
||||||
|
current.value = data;
|
||||||
|
saveType.value = 'edit';
|
||||||
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'view',
|
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) => {
|
const bindDevice = (val: boolean) => {
|
||||||
bindDeviceVisible.value = false;
|
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">
|
<div class="basic-info-container">
|
||||||
<a-card>
|
<a-card>
|
||||||
<h3>基本信息</h3>
|
<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">
|
<div class="row" style="display: flex">
|
||||||
<a-form-item
|
<a-form-item
|
||||||
label="菜单图标"
|
label="菜单图标"
|
||||||
|
@ -16,13 +16,20 @@
|
||||||
style="flex: 0 0 186px"
|
style="flex: 0 0 186px"
|
||||||
>
|
>
|
||||||
<div class="icon-upload has-icon" v-if="form.data.icon">
|
<div class="icon-upload has-icon" v-if="form.data.icon">
|
||||||
<svg aria-hidden="true">
|
<AIcon
|
||||||
<use :xlinkHref="`#${form.data.icon}`" />
|
:type="form.data.icon"
|
||||||
</svg>
|
style="font-size: 90px"
|
||||||
<span class="mark">点击修改</span>
|
/>
|
||||||
|
<span class="mark" @click="dialog.openDialog"
|
||||||
|
>点击修改</span
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div v-else class="icon-upload no-icon">
|
<div
|
||||||
|
v-else
|
||||||
|
@click="dialog.openDialog"
|
||||||
|
class="icon-upload no-icon"
|
||||||
|
>
|
||||||
<span>
|
<span>
|
||||||
<plus-outlined style="font-size: 30px" />
|
<plus-outlined style="font-size: 30px" />
|
||||||
<p>点击选择图标</p>
|
<p>点击选择图标</p>
|
||||||
|
@ -97,7 +104,11 @@
|
||||||
</a-card>
|
</a-card>
|
||||||
<a-card>
|
<a-card>
|
||||||
<h3>权限配置</h3>
|
<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>
|
<a-form-item name="accessSupport" required>
|
||||||
<template #label>
|
<template #label>
|
||||||
<span style="margin-right: 3px">数据权限控制</span>
|
<span style="margin-right: 3px">数据权限控制</span>
|
||||||
|
@ -174,17 +185,19 @@
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="权限">
|
<a-form-item label="权限">
|
||||||
<a-input
|
<PermissChoose v-model:value="form.data.permissions" />
|
||||||
v-model:value="form.data.permissions"
|
|
||||||
style="width: 300px"
|
|
||||||
allowClear
|
|
||||||
placeholder="请输入权限名称"
|
|
||||||
/>
|
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
|
||||||
<a-button type="primary" @click="clickSave">保存</a-button>
|
<a-button type="primary" @click="clickSave" v-loading="saveLoading"
|
||||||
|
>保存</a-button
|
||||||
|
>
|
||||||
</a-card>
|
</a-card>
|
||||||
|
|
||||||
|
<!-- 弹窗 -->
|
||||||
|
<div class="dialogs">
|
||||||
|
<ChooseIconDialog ref="ChooseIconRef" @confirm="dialog.confirm" />
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
@ -194,20 +207,28 @@ import {
|
||||||
QuestionCircleFilled,
|
QuestionCircleFilled,
|
||||||
QuestionCircleOutlined,
|
QuestionCircleOutlined,
|
||||||
} from '@ant-design/icons-vue';
|
} 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 {
|
import {
|
||||||
getMenuTree_api,
|
getMenuTree_api,
|
||||||
getAssetsType_api,
|
getAssetsType_api,
|
||||||
getMenuDetail_api,
|
getMenuInfo_api,
|
||||||
|
saveMenuInfo_api,
|
||||||
|
addMenuInfo_api,
|
||||||
} from '@/api/system/menu';
|
} from '@/api/system/menu';
|
||||||
import { exportPermission_api } from '@/api/system/permission';
|
|
||||||
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
|
const router = useRouter();
|
||||||
const routeParams = {
|
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,
|
...route.query,
|
||||||
url: route.query.basePath,
|
url: route.query.basePath,
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const basicFormRef = ref<FormInstance>();
|
||||||
|
const permissFormRef = ref<FormInstance>();
|
||||||
const form = reactive({
|
const form = reactive({
|
||||||
data: {
|
data: {
|
||||||
name: '',
|
name: '',
|
||||||
|
@ -215,8 +236,8 @@ const form = reactive({
|
||||||
sortIndex: '',
|
sortIndex: '',
|
||||||
icon: '',
|
icon: '',
|
||||||
describe: '',
|
describe: '',
|
||||||
permissions: '',
|
permissions: [],
|
||||||
accessSupport: '',
|
accessSupport: 'unsupported',
|
||||||
assetType: undefined,
|
assetType: undefined,
|
||||||
indirectMenus: [],
|
indirectMenus: [],
|
||||||
...routeParams,
|
...routeParams,
|
||||||
|
@ -229,23 +250,63 @@ const form = reactive({
|
||||||
init: () => {
|
init: () => {
|
||||||
// 获取菜单详情
|
// 获取菜单详情
|
||||||
routeParams.id &&
|
routeParams.id &&
|
||||||
getMenuDetail_api(routeParams.id).then((resp) => {
|
getMenuInfo_api(routeParams.id).then((resp) => {
|
||||||
console.log('菜单详情', resp);
|
console.log('菜单详情', resp);
|
||||||
});
|
});
|
||||||
// 获取权限列表
|
|
||||||
// exportPermission_api()
|
|
||||||
// 获取关联菜单
|
// 获取关联菜单
|
||||||
getMenuTree_api({ paging: false }).then((resp) => {
|
getMenuTree_api({ paging: false }).then((resp) => {
|
||||||
console.log('关联菜单', resp);
|
console.log('关联菜单', resp);
|
||||||
});
|
});
|
||||||
// 获取资产类型
|
// 获取资产类型
|
||||||
getAssetsType_api().then((resp:any) => {
|
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();
|
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 = {
|
type formType = {
|
||||||
name: string;
|
name: string;
|
||||||
|
@ -253,7 +314,7 @@ type formType = {
|
||||||
url: string;
|
url: string;
|
||||||
sortIndex: string;
|
sortIndex: string;
|
||||||
icon: string;
|
icon: string;
|
||||||
permissions: string;
|
permissions: any[];
|
||||||
describe: string;
|
describe: string;
|
||||||
accessSupport: string;
|
accessSupport: string;
|
||||||
assetType: string | undefined;
|
assetType: string | undefined;
|
||||||
|
@ -321,6 +382,25 @@ type assetType = {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.has-icon {
|
.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 {
|
.no-icon {
|
||||||
background-color: rgba(0, 0, 0, 0.06);
|
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 resp: any = await getMenuTree_api(params);
|
||||||
const lastItem = resp.result[resp.result.length - 1];
|
const lastItem = resp.result[resp.result.length - 1];
|
||||||
table.total == lastItem ? lastItem.sortIndex + 1 : 1;
|
table.total = lastItem ? lastItem.sortIndex + 1 : 1;
|
||||||
|
|
||||||
return {
|
return {
|
||||||
code: resp.message,
|
code: resp.message,
|
||||||
result: {
|
result: {
|
||||||
|
@ -225,7 +226,7 @@ const table = reactive({
|
||||||
router.push(
|
router.push(
|
||||||
`/system/Menu/detail/${row.id || ':id'}?pid=${
|
`/system/Menu/detail/${row.id || ':id'}?pid=${
|
||||||
row.pid || ''
|
row.pid || ''
|
||||||
}&basePath=${row.basePath || ''}&sortIndex=${table.total + 1}`,
|
}&basePath=${row.basePath || ''}&sortIndex=${table.total}`,
|
||||||
);
|
);
|
||||||
},
|
},
|
||||||
// 删除
|
// 删除
|
||||||
|
|
Loading…
Reference in New Issue