0017
/
iot-ui-vue
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Merge remote-tracking branch 'origin/dev' into dev 

# Conflicts:
#	src/router/menu.ts
#	src/utils/comm.ts
This commit is contained in:
xieyonghong 2023-01-30 16:57:51 +08:00
parent 6d701c5204 6abc69e1d8
commit e6c2a0875a
34 changed files with 3013 additions and 603 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/api/device/instance.ts
View File

@ -1,6 +1,7 @@
import { LocalStore } from '@/utils/comm'
import server from '@/utils/request'
import { BASE_API_PATH } from '@/utils/variable'
import { DeviceInstance } from '@/views/device/instance/typings'
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable'
import { DeviceInstance } from '@/views/device/Instance/typings'
/**
* 删除设备物模型
@ -97,5 +98,5 @@ export const batchDeleteDevice = (data: string[]) => server.put(`/device-instanc
* @param type 文件类型
* @returns
*/
export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`
export const deviceExport = (productId: string, type: string) => `${BASE_API_PATH}/device-instance${!!productId ? '/' + productId : ''}/export.${type}`

9
src/api/device/product.ts
View File

@ -42,4 +42,11 @@ export const detail = (id: string) => server.get<ProductItem>(`/device-product/$
* 产品分类
* @param data
*/
export const category = (data: any) => server.post('/device/category/_tree', data)
export const category = (data: any) => server.post('/device/category/_tree', data)
/**
* 保存产品
* @param data 产品信息
* @returns
*/
export const saveProductMetadata = (data: Record<string, unknown>) => server.patch('/device-product', data)

4
src/api/home.ts
View File

@ -12,4 +12,6 @@ export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
// 产品数量
export const getProductCount_api = (data:object) => server.post(`/device-product/_count`, data);
// 查询产品列表
export const getProductList_api = (data:object) => server.get(`/device/product/_query/no-paging?paging=false`, data);
export const getProductList_api = (data:object={}) => server.get(`/device/product/_query/no-paging?paging=false`, data);
// 查询设备列表
export const getDeviceList_api = (data:object) => server.post(`/device-instance/_query/`, data);

67
src/api/iot-card/cardManagement.ts Normal file
View File

@ -0,0 +1,67 @@
import server from '@/utils/request'
/**
* 不分页查询平台对接
* @param data
*/
export const queryPlatformNoPage = (data: any) => server.post(`/network/card/platform/_query/no-paging`, data)
/**
* 分页查询物联卡管理列表
* @param data
*/
export const query = (data: any) => server.post(`/network/card/_query`, data)
/**
* 激活待激活物联卡
* @param cardId
*/
export const changeDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_activation`);
/**
* 停用已激活物联卡
* @param cardId
*/
export const unDeploy = (cardId: string) => server.get(`/network/card/${cardId}/_deactivate`);
/**
* 复机已停机物联卡
* @param cardId
*/
export const resumption = (cardId: string) => server.get(`/network/card/${cardId}/_resumption`);
/**
* 删除物联卡
* @param id
*/
export const del = (id: string) => server.remove(`/network/card/${id}`);
/**
* 激活待激活物联卡(批量)
* @param data
*/
export const changeDeployBatch = (data: any) => server.get(`/network/card/_activation/_bitch`, data);
/**
* 停用已激活物联卡(批量)
* @param data
*/
export const unDeployBatch = (data: any) => server.get(`/network/card/_deactivate/_bitch`, data);
/**
* 复机已停机物联卡(批量)
* @param data
*/
export const resumptionBatch = (data: any) => server.get(`/network/card/_resumption/_bitch`, data);
/**
* 同步物联卡状态
*/
export const sync = () => server.get(`/network/card/state/_sync`);
/**
* 批量删除物联卡
* @param data
*/
export const removeCards = (data: any) => server.post(`/network/card/batch/_delete`, data);

15
src/api/system/permission.ts
View File

@ -1,6 +1,15 @@
import server from '@/utils/request';
// 获取权限列表
export const getPermission_api = (data:object) => server.post(`/permission/_query/`,data);
// 修改权限信息
export const editPermission_api = (data:object) => server.patch(`/permission`,data);
export const getPermission_api = (data: object) => server.post(`/permission/_query/`, data);
// 新增时校验标识id是否可用
export const checkId_api = (data: object) => server.get(`/permission/id/_validate`, data);
// 修改权限 | 导入文件内容
export const editPermission_api = (data: object) => server.patch(`/permission`, data);
// 添加权限
export const addPermission_api = (data: object) => server.post(`/permission`, data);
// 删除权限
export const delPermission_api = (id: string) => server.remove(`/permission/${id}`);
// 导出权限数据
export const exportPermission_api = (data: object) => server.post(`/permission/_query/no-paging`, data);

5
src/components/AIcon/index.tsx
View File

@ -27,8 +27,13 @@ const iconKeys = [
'SyncOutlined',
'ExclamationCircleOutlined',
'UploadOutlined',
'LoadingOutlined',
'PlusCircleOutlined',
'QuestionCircleOutlined',
'DisconnectOutlined',
'LinkOutlined',
'PoweroffOutlined',
'SwapOutlined',
'BugOutlined',
'BarsOutlined',
'ArrowDownOutlined',

243
src/components/JUpload/index.vue
View File

@ -1,70 +1,213 @@
<template>
<a-upload
v-model:file-list="fileList"
name="avatar"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
action="https://www.mocky.io/v2/5cc8019d300000980a055e76"
:before-upload="beforeUpload"
@change="handleChange"
>
<img v-if="imageUrl" :src="imageUrl" alt="avatar" />
<div v-else>
<loading-outlined v-if="loading"></loading-outlined>
<plus-outlined v-else></plus-outlined>
<div class="ant-upload-text">Upload</div>
<div class="upload-image-warp">
<div class="upload-image-border">
<a-upload
name="file"
list-type="picture-card"
class="avatar-uploader"
:show-upload-list="false"
:before-upload="beforeUpload"
@change="handleChange"
:action="FILE_UPLOAD"
:headers="{
'X-Access-Token': LocalStore.get(TOKEN_KEY)
}"
v-bind="props"
>
<div class="upload-image-content" :style="props.style">
<template v-if="myValue">
<!-- <div class="upload-image"
:style="{
backgroundSize: props.backgroundSize,
backgroundImage: `url(${imageUrl})`
}"
></div> -->
<img :src="myValue" class="upload-image" />
<div class="upload-image-mask">点击修改</div>
</template>
<template v-else>
<AIcon type="LoadingOutlined" v-if="loading" style="font-size: 20px" />
<AIcon v-else type="PlusOutlined" style="font-size: 20px" />
</template>
</div>
</a-upload>
<div class="upload-loading-mask" v-if="props.disabled"></div>
<div class="upload-loading-mask" v-if="myValue && loading">
<AIcon type="LoadingOutlined" style="font-size: 20px" />
</div>
</div>
</a-upload>
</div>
</template>
<script lang="ts" setup>
import { message, UploadChangeParam, UploadProps } from 'ant-design-vue';
import { FILE_UPLOAD } from '@/api/comm'
import { TOKEN_KEY } from '@/utils/variable';
import { LocalStore } from '@/utils/comm';
import { CSSProperties } from 'vue';
type Emits = {
(e: 'update:modelValue', data: string): void;
};
interface JUploadProps extends UploadProps {
modelValue: string;
disabled?: boolean;
types?: string[];
errorMessage?: string;
size?: number;
style?: CSSProperties;
backgroundSize?: string;
}
const emit = defineEmits<Emits>();
const props: JUploadProps = defineProps({
modelValue: {
type: String,
default: ''
},
disabled: {
type: Boolean,
default: false
},
})
const loading = ref<boolean>(false)
const imageUrl = ref<string>(props?.modelValue || '')
const imageTypes = props.types ? props.types : ['image/jpeg', 'image/png'];
const myValue = computed({
get: () => {
return props.modelValue;
},
set: (val: any) => {
imageUrl.value = val;
emit('update:modelValue', val);
},
});
const handleChange = (info: UploadChangeParam) => {
// if (info.file.status === 'uploading') {
// loading.value = true;
// return;
// }
// if (info.file.status === 'done') {
// // Get this url from response in real world.
// getBase64(info.file.originFileObj, (base64Url: string) => {
// imageUrl.value = base64Url;
// loading.value = false;
// });
// }
// if (info.file.status === 'error') {
// loading.value = false;
// message.error('upload error');
// }
if (info.file.status === 'uploading') {
loading.value = true;
}
if (info.file.status === 'done') {
myValue.value = info.file.response?.result
loading.value = false;
emit('update:modelValue', imageUrl.value)
}
if (info.file.status === 'error') {
loading.value = false;
message.error('上传失败');
}
};
const beforeUpload = (file: UploadProps['fileList'][number]) => {
// const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
// if (!isJpgOrPng) {
// message.error('You can only upload JPG file!');
// }
// const isLt2M = file.size / 1024 / 1024 < 2;
// if (!isLt2M) {
// message.error('Image must smaller than 2MB!');
// }
// return isJpgOrPng && isLt2M;
const isType = imageTypes.includes(file.type);
if (!isType) {
if (props.errorMessage) {
message.error(props.errorMessage);
} else {
message.error(`请上传正确格式的图片`);
}
return false;
}
const isSize = file.size / 1024 / 1024 < (props.size || 4);
if (!isSize) {
message.error(`图片大小必须小于${props.size || 4}M`);
}
return isType && isSize;
};
</script>
<style lang="less" scoped>
.avatar-uploader {
width: 160px;
height: 160px;
padding: 8px;
background-color: rgba(0,0,0,.06);
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
:deep(.ant-upload.ant-upload-select-picture-card) {
@border: 1px dashed @border-color-base;
@mask-color: rgba(#000, 0.35);
@with: 150px;
@height: 150px;
.flex-center() {
align-items: center;
justify-content: center;
}
.upload-image-warp {
display: flex;
justify-content: flex-start;
.upload-image-border {
position: relative;
width: @with;
height: @height;
overflow: hidden;
//border-radius: 50%;
// border: @border;
transition: all 0.3s;
&:hover {
border-color: @primary-color-hover;
}
:deep(.ant-upload-picture-card-wrapper) {
width: 100%;
height: 100%;
}
:deep(.ant-upload) {
width: 100%;
height: 100%;
}
.upload-image-content {
.flex-center();
position: relative;
display: flex;
flex-direction: column;
width: 100%;
height: 100%;
background-color: rgba(#000, 0.06);
cursor: pointer;
padding: 8px;
.upload-image-mask {
.flex-center();
position: absolute;
top: 0;
left: 0;
display: none;
width: 100%;
height: 100%;
color: #fff;
font-size: 16px;
background-color: @mask-color;
}
.upload-image {
width: 100%;
height: 100%;
//border-radius: 50%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
}
&:hover .upload-image-mask {
display: flex;
}
}
}
.upload-loading-mask {
.flex-center();
position: absolute;
top: 0;
left: 0;
display: flex;
width: 100%;
height: 100%;
color: #fff;
background-color: @mask-color;
}
}
</style>

39
src/components/PermissionButton/index.vue
View File

@ -4,25 +4,50 @@
<a-popconfirm v-bind="popConfirm" :disabled="!isPermission || props.disabled">
<a-tooltip v-if="tooltip" v-bind="tooltip">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
</template>
</a-button>
</a-tooltip>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
</template>
</a-button>
</a-popconfirm>
</template>
<template v-else-if="tooltip">
<a-tooltip v-bind="tooltip">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
</template>
</a-button>
</a-tooltip>
</template>
<template v-else>
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
</template>
</a-button>
</template>
</template>
<a-tooltip v-else title="没有权限">
<slot v-if="noButton"></slot>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission"></a-button>
<a-button v-else v-bind="buttonProps" :disabled="_isPermission">
<slot></slot>
<template #icon>
<slot name="icon"></slot>
</template>
</a-button>
</a-tooltip>
</template>
<script setup lang="ts" name="PermissionButton">
@ -49,13 +74,13 @@ const isPermission = computed(() => {
return permissionStore.hasPermission(props.hasPermission)
})
const _isPermission = computed(() =>
'hasPermission' in props && isPermission
'hasPermission' in props && isPermission.value
? 'disabled' in buttonProps
? buttonProps.disabled
: false
: true
)
</script>
<style scoped lang="scss">
<style scoped lang="less">
</style>

2
src/components/Table/index.tsx
View File

@ -54,7 +54,7 @@ export interface JTableProps extends TableProps{
rowSelection?: TableProps['rowSelection'];
cardProps?: Record<string, any>;
dataSource?: Record<string, any>[];
gridColumn: number;
gridColumn?: number;
/**
* 用于不同分辨率
* gridColumns[0] 1366 ~ 1440 分辨率；

314
src/router/menu.ts
View File

@ -1,205 +1,149 @@
export const LoginPath = '/login'
import { BasicLayoutPage, BlankLayoutPage } from '@/components/Layout'
export default [
// {
// path: '/iot',
// redirect: '/iot/device',
// meta: {
// title: '物联网',
// icon: 'EditOutlined'
// },
// component: BasicLayoutPage,
// children: [
// {
// path: '/iot/device',
// redirect: '/iot/device/instance',
// meta: {
// title: '设备管理',
// icon: 'EditOutlined'
// },
// component: BlankLayoutPage,
// children: [
// {
// path: '/iot/device/instance',
// component: () => import('@/views/demo/Search.vue'),
// meta: {
// title: '设备'
// },
// },
// {
// path: '/iot/device/instance2',
// component: () => import('@/views/demo/Search.vue'),
// meta: {
// title: '设备2'
// },
// }
// ]
// }
// ]
// path: '/',
// redirect: LoginPath
// },
// {
// path: '/iot2',
// redirect: '/iot2/device',
// meta: {
// title: '物联网2'
// },
// component: BasicLayoutPage,
// children: [
// {
// path: '/iot2/device',
// redirect: '/iot2/device/instance',
// meta: {
// title: '设备管理2'
// },
// component: BlankLayoutPage,
// children: [
// {
// path: '/iot2/device/instance',
// component: () => import('@/views/demo/Search.vue'),
// meta: {
// title: '设备2'
// },
// }
// ]
// }
// ]
// path: '/init',
// component: () => import('@/view/InitPage.vue')
// },
// {
// path: '/init-home',
// component: () => import('@/view/init-home/index.vue')
// path: LoginPath,
// name: 'login',
// component: () => import('@/view/Login/index.vue')
// },
{
path: LoginPath,
name: 'login',
component: () => import('@/views/user/Login/index.vue')
},
// {
// path: '/initsetting',
// component: () => import('@/view/Login/initSet.vue')
// }
// start: 测试用, 可删除
// {
// path: '/login',
// component: () => import('@/views/user/Login/index.vue')
// },
// {
// path: '/demo',
// component: () => import('@/views/demo/index.vue')
// },
// {
// path: '/account/center/bind',
// component: () => import('@/views/account/Center/bind/index.vue')
// },
// {
// path: '/iot/home',
// component: () => import('@/views/home/index.vue')
// },
// {
// path: '/table',
// component: () => import('@/views/demo/table/index.vue')
// },
// {
// path: '/form',
// component: () => import('@/views/demo/Form.vue')
// },
// {
// path: '/search',
// component: () => import('@/views/demo/Search.vue')
// },
// {
// path: '/notice/Config',
// component: () => import('@/views/notice/Config/index.vue')
// },
// {
// path: '/notice/Config/detail/:id',
// component: () => import('@/views/notice/Config/Detail/index.vue')
// },
// {
// path: '/notice/Template',
// component: () => import('@/views/notice/Template/index.vue')
// },
// {
// path: '/notice/Template/detail/:id',
// component: () => import('@/views/notice/Template/Detail/index.vue')
// },
// // end: 测试用, 可删除
//
// // 设备管理
// {
// path: '/device/Instance',
// component: () => import('@/views/device/Instance/index.vue')
// },
// // link 运维管理
// {
// path: '/link/log',
// component: () => import('@/views/link/Log/index.vue')
// },
// {
// path: '/link/certificate',
// component: () => import('@/views/link/Certificate/index.vue')
// },
// {
// path: '/link/certificate/detail/add',
// component: () => import('@/views/link/Certificate/Detail/index.vue')
// },
// {
// path: '/link/accessConfig',
// component: () => import('@/views/link/AccessConfig/index.vue')
// },
// {
// path: '/link/accessConfig/detail/add',
// component: () => import('@/views/link/AccessConfig/Detail/index.vue')
// },
// // system 系统管理
// {
// path:'/system/Basis',
// component: ()=>import('@/views/system/Basis/index.vue')
// },
// {
// path:'/system/api',
// component: ()=>import('@/views/system/apiPage/index.vue')
// },
// {
// path:'/system/Role',
// component: ()=>import('@/views/system/Role/index.vue')
// },
// {
// path:'/system/Role/detail/:id',
// component: ()=>import('@/views/system/Role/Detail/index.vue')
// },
// {
// path:'/system/Permission',
// component: ()=>import('@/views/system/Permission/index.vue')
// },
// // 初始化
{
path: '/login',
component: () => import('@/views/user/Login/index.vue')
},
{
path: '/demo',
component: () => import('@/views/demo/index.vue')
},
{
path: '/account/center/bind',
component: () => import('@/views/account/Center/bind/index.vue')
},
{
path: '/iot/home',
component: () => import('@/views/home/index.vue')
},
{
path: '/table',
component: () => import('@/views/demo/table/index.vue')
},
{
path: '/form',
component: () => import('@/views/demo/Form.vue')
},
{
path: '/search',
component: () => import('@/views/demo/Search.vue')
},
{
path: '/notice/Config',
component: () => import('@/views/notice/Config/index.vue')
},
{
path: '/notice/Config/detail/:id',
component: () => import('@/views/notice/Config/Detail/index.vue')
},
{
path: '/notice/Template',
component: () => import('@/views/notice/Template/index.vue')
},
{
path: '/notice/Template/detail/:id',
component: () => import('@/views/notice/Template/Detail/index.vue')
},
// end: 测试用, 可删除
// 设备管理
{
path: '/device/Instance',
component: () => import('@/views/device/Instance/index.vue')
},
// link 运维管理
{
path: '/link/log',
component: () => import('@/views/link/Log/index.vue')
},
{
path: '/link/certificate',
component: () => import('@/views/link/Certificate/index.vue')
},
{
path: '/link/certificate/detail/add',
component: () => import('@/views/link/Certificate/Detail/index.vue')
},
{
path: '/link/accessConfig',
component: () => import('@/views/link/AccessConfig/index.vue')
},
{
path: '/link/accessConfig/detail/add',
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
},
// system 系统管理
{
path:'/system/Basis',
component: ()=>import('@/views/system/Basis/index.vue')
},
{
path:'/system/api',
component: ()=>import('@/views/system/apiPage/index.vue')
},
{
path:'/system/Role',
component: ()=>import('@/views/system/Role/index.vue')
},
{
path:'/system/Role/detail/:id',
component: ()=>import('@/views/system/Role/Detail/index.vue')
},
{
path:'/system/Permission',
component: ()=>import('@/views/system/Permission/index.vue')
},
// 初始化
{
path: '/init-home',
component: () => import('@/views/init-home/index.vue')
},
// // 物联卡 iot-card
// {
// path: '/iot-card/Home',
// component: () => import('@/views/iot-card/Home/index.vue')
// },
// {
// path: '/iot-card/Dashboard',
// component: () => import('@/views/iot-card/Dashboard/index.vue')
// },
// // 北向输出
// {
// path: '/northbound/DuerOS',
// component: () => import('@/views/northbound/DuerOS/index.vue')
// },
// {
// path: '/northbound/AliCloud',
// component: () => import('@/views/northbound/AliCloud/index.vue')
// },
//
// // 产品分类
// {
// path: '/iot/device/Category',
// component: () => import('@/views/device/Category/index.vue')
// }
// 物联卡 iot-card
{
path: '/iot-card/Home',
component: () => import('@/views/iot-card/Home/index.vue')
},
{
path: '/iot-card/Dashboard',
component: () => import('@/views/iot-card/Dashboard/index.vue')
},
{
path: '/iot-card/CardManagement',
component: () => import('@/views/iot-card/CardManagement/index.vue')
},
// 北向输出
{
path: '/northbound/DuerOS',
component: () => import('@/views/northbound/DuerOS/index.vue')
},
{
path: '/northbound/AliCloud',
component: () => import('@/views/northbound/AliCloud/index.vue')
},
// 产品分类
{
path: '/iot/device/Category',
component: () => import('@/views/device/Category/index.vue')
}
]

3
src/store/instance.ts
View File

@ -1,4 +1,4 @@
import { DeviceInstance, InstanceModel } from "@/views/device/instance/typings";
import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
import { defineStore } from "pinia";
export const useInstanceStore = defineStore({
@ -7,6 +7,7 @@ export const useInstanceStore = defineStore({
actions: {
setCurrent(current: Partial<DeviceInstance>) {
this.current = current
this.detail = current
}
}
})

31
src/store/metadata.ts Normal file
View File

@ -0,0 +1,31 @@
import { DeviceInstance, InstanceModel } from "@/views/device/Instance/typings"
import { defineStore } from "pinia";
import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
type MetadataModelType = {
item: MetadataItem | unknown;
edit: boolean;
type: MetadataType;
action: 'edit' | 'add';
import: boolean;
importMetadata: boolean;
};
export const useMetadataStore = defineStore({
id: 'metadata',
state: () => ({
model: {
item: undefined,
edit: false,
type: 'events',
action: 'add',
import: false,
importMetadata: false,
} as MetadataModelType
}),
actions: {
set(key: string, value: any) {
this.model[key] = value
}
}
})

29
src/utils/comm.ts
View File

@ -8,7 +8,7 @@ import { urlReg } from '@/utils/regular'
* @param path {String} 路径
*/
export const getImage = (path: string) => {
return new URL('/images' + path, import.meta.url).href
return new URL('/images' + path, import.meta.url).href
}
export const LocalStore = {
@ -74,3 +74,30 @@ export function getSlotVNode<T>(slots: Slots, props: Record<string, unknown>, pr
}
return (props[prop] || slots[prop]?.()) as T;
}
/**
* 时间转换为'2022-01-02 14:03:05'
* @param date 时间对象
* @returns
*/
export const dateFormat = (dateSouce:any):string|Error => {
let date = null
try {
date = new Date(dateSouce)
} catch (error) {
return new Error('请传入日期格式数据')
}
let year = date.getFullYear();
let month: number | string = date.getMonth() + 1;
let day: number | string = date.getDate();
let hour: number | string = date.getHours();
let minutes: number | string = date.getMinutes();
let seconds: number | string = date.getSeconds();
month = (month < 10) ? '0' + month : month;
day = (day < 10) ? '0' + day : day;
hour = (hour < 10) ? '0' + hour : hour;
minutes = (minutes < 10) ? '0' + minutes : minutes;
seconds = (seconds < 10) ? '0' + seconds : seconds;
return year + "-" + month + "-" + day
+ " " + hour + ":" + minutes + ":" + seconds;
}

7
src/views/device/Instance/Save/index.vue
View File

@ -4,8 +4,8 @@
<a-form :layout="'vertical'">
<a-row type="flex">
<a-col flex="180px">
<a-form-item required>
<JUpload />
<a-form-item required name="photoUrl">
<JUpload v-model:value="modelRef.photoUrl" />
</a-form-item>
</a-col>
<a-col flex="auto">
@ -32,6 +32,7 @@
<script lang="ts" setup>
import { queryNoPagingPost } from '@/api/device/product'
import { getImage } from '@/utils/comm';
import { Form } from 'ant-design-vue';
const emit = defineEmits(['close', 'save'])
@ -49,7 +50,7 @@ const modelRef = reactive({
id: '',
name: '',
describe: '',
photoUrl: ''
photoUrl: getImage('/device/instance/device-card.png')
});
watch(

119
src/views/device/components/Metadata/Base/Edit/index.vue Normal file
View File

@ -0,0 +1,119 @@
<template>
<a-drawer :mask-closable="false" width="25vw" visible :title="`新增${typeMapping[metadataStore.model.type]}`"
@close="close" destroy-on-close :z-index="1000" placement="right">
<template #extra>
<a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
</template>
<a-form ref="addFormRef" :model="form.model"></a-form>
</a-drawer>
</template>
<script lang="ts" setup name="Edit">
import { useInstanceStore } from '@/store/instance';
import { useMetadataStore } from '@/store/metadata';
import { useProductStore } from '@/store/product';
import { MetadataItem, ProductItem } from '@/views/device/Product/typings';
import { message } from 'ant-design-vue/es';
import type { FormInstance } from 'ant-design-vue/es';
import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
import { Store } from 'jetlinks-store';
import { SystemConst } from '@/utils/consts';
import { detail } from '@/api/device/instance';
interface Props {
type: 'product' | 'device';
tabs?: string;
}
const props = defineProps<Props>()
const route = useRoute()
const instanceStore = useInstanceStore()
const productStore = useProductStore()
const metadataStore = useMetadataStore()
const typeMapping: Record<string, string> = {
properties: '属性',
events: '事件',
functions: '功能',
tags: '标签',
};
const close = () => {
metadataStore.set('edit', false)
metadataStore.set('item', {})
}
const addFormRef = ref<FormInstance>()
/**
* 保存按钮
*/
const save = reactive({
loading: false,
saveMetadata: (deploy?: boolean) => {
save.loading = true
addFormRef.value?.validateFields().then(async (formValue) => {
const type = metadataStore.model.type
const _metadata = JSON.parse((props.type === 'device' ? instanceStore.detail.metadata : productStore.current?.metadata) || '{}')
const list = _metadata[type] as any[]
if (formValue.id) {
if (metadataStore.model.action === 'add' && list.some(item => item.id === formValue.id)) {
message.error('标识已存在')
save.loading = false
return
}
}
const updateStore = (metadata: string) => {
if (props.type === 'device') {
const detail = instanceStore.current
detail.metadata = metadata
instanceStore.setCurrent(detail)
} else {
const detail = productStore.current || {} as ProductItem
detail.metadata = metadata
productStore.setCurrent(detail)
}
}
const _data = updateMetadata(type, [formValue], _metadata, updateStore)
const result = await asyncUpdateMetadata(props.type, _data)
if (result.status === 200) {
if ((window as any).onTabSaveSuccess) {
if (result) {
(window as any).onTabSaveSuccess(result);
setTimeout(() => window.close(), 300);
}
} else {
Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
if (deploy) {
Store.set('product-deploy', deploy);
} else {
save.resetMetadata();
message.success({
key: 'metadata',
content: '操作成功！',
});
}
metadataStore.set('edit', false)
metadataStore.set('item', {})
if (instanceStore.detail) {
instanceStore.detail.independentMetadata = true;
}
}
} else {
message.error('操作失败！');
}
save.loading = false
})
},
resetMetadata: async () => {
const { id } = route.params
const resp = await detail(id as string);
if (resp.status === 200) {
instanceStore.detail = resp?.result || [];
}
}
})
const form = reactive({
model: {}
})
</script>
<style lang="scss" scoped>
</style>

91
src/views/device/components/Metadata/Base/columns.ts Normal file
View File

@ -0,0 +1,91 @@
import { JColumnProps } from "@/components/Table";
const SourceMap = {
device: '设备',
manual: '手动',
rule: '规则',
};
const type = {
read: '读',
write: '写',
report: '上报',
};
const BaseColumns: JColumnProps[] = [
{
title: '标识',
dataIndex: 'id',
ellipsis: true,
},
{
title: '名称',
dataIndex: 'name',
ellipsis: true,
},
{
title: '说明',
dataIndex: 'description',
ellipsis: true,
},
];
const EventColumns: JColumnProps[] = BaseColumns.concat([
{
title: '事件级别',
dataIndex: 'expands',
scopedSlots: true,
},
]);
const FunctionColumns: JColumnProps[] = BaseColumns.concat([
{
title: '是否异步',
dataIndex: 'async',
scopedSlots: true,
},
// {
// title: '读写类型',
// dataIndex: 'expands',
// render: (text: any) => (text?.type || []).map((item: string | number) => <Tag>{type[item]}</Tag>),
// },
]);
const PropertyColumns: JColumnProps[] = BaseColumns.concat([
{
title: '数据类型',
dataIndex: 'valueType',
scopedSlots: true,
},
{
title: '属性来源',
dataIndex: 'expands',
scopedSlots: true,
},
{
title: '读写类型',
dataIndex: 'expands',
scopedSlots: true,
},
]);
const TagColumns: JColumnProps[] = BaseColumns.concat([
{
title: '数据类型',
dataIndex: 'valueType',
scopedSlots: true,
},
{
title: '读写类型',
dataIndex: 'expands',
scopedSlots: true,
},
]);
const MetadataMapping = new Map<string, JColumnProps[]>();
MetadataMapping.set('properties', PropertyColumns);
MetadataMapping.set('events', EventColumns);
MetadataMapping.set('tags', TagColumns);
MetadataMapping.set('functions', FunctionColumns);
export default MetadataMapping;

100
src/views/device/components/Metadata/Base/index.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<JTable :loading="loading" :data-source="data" size="small" :columns="columns" row-key="id">
<template #headerTitle>
<a-input-search v-model:value="searchValue" placeholder="请输入名称" @search="handleSearch"></a-input-search>
<PermissionButton :has-permission="permission" key="add" @click="handleAddClick"
:disabled="operateLimits('add', type)" type="primary" :tooltip="{
title: operateLimits('add', type) ? '当前的存储方式不支持新增' : '新增',
}">
<template #icon>
<PlusOutlined />
</template>
新增
</PermissionButton>
<Edit
v-if="metadataStore.model.edit"
:type="target"
:tabs="type"
></Edit>
</template>
</JTable>
</template>
<script setup lang="ts" name="BaseMetadata">
import type { MetadataItem, MetadataType } from '@/views/device/Product/typings'
import MetadataMapping from './columns'
import JTable, { JColumnProps } from '@/components/Table'
import { useInstanceStore } from '@/store/instance'
import { useProductStore } from '@/store/product'
import { useMetadataStore } from '@/store/metadata'
import PermissionButton from '@/components/PermissionButton/index.vue'
// import { detail } from '@/api/device/instance'
// import { detail as productDetail } from '@/api/device/product'
interface Props {
type: MetadataType;
target: 'product' | 'device';
permission: string | string[];
}
const props = defineProps<Props>()
const route = useRoute()
const instanceStore = useInstanceStore()
const productStore = useProductStore()
const loading = ref(false)
const data = ref<MetadataItem[]>([])
const { type, target = 'product' } = props
const actions: JColumnProps[] = [
{
title: '操作',
align: 'left',
width: 200,
scopedSlots: true,
},
];
const columns = computed(() => MetadataMapping.get(type)!.concat(actions))
const items = computed(() => JSON.parse((target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata) || '{}') as MetadataItem[])
const searchValue = ref<string>()
const handleSearch = (searchValue: string) => {
if (searchValue) {
const arr = items.value.filter(item => item.name!.indexOf(searchValue) > -1).sort((a, b) => b?.sortsIndex - a?.sortsIndex)
data.value = arr
} else {
data.value = items.value
}
}
onMounted(() => {
})
watch([route.params.id, type], () => {
// const res = target === 'product'
// ? await productDetail(route.params.id as string)
// : await detail(route.params.id as string);
const result = target === 'product' ? productStore.current?.metadata : instanceStore.current.metadata
const item = JSON.parse(result || '{}') as MetadataItem[]
data.value = item[type]?.sort((a: any, b: any) => b?.sortsIndex - a?.sortsIndex)
loading.value = false
}, { immediate: true })
const metadataStore = useMetadataStore()
const handleAddClick = () => {
metadataStore.set('edit', true)
metadataStore.set('item', undefined)
metadataStore.set('type', type)
metadataStore.set('action', 'add')
}
const limitsMap = new Map<string, any>();
limitsMap.set('events-add', 'eventNotInsertable');
limitsMap.set('events-updata', 'eventNotModifiable');
limitsMap.set('properties-add', 'propertyNotInsertable');
limitsMap.set('properties-updata', 'propertyNotModifiable');
const operateLimits = (action: 'add' | 'updata', types: MetadataType) => {
return (
target === 'device' &&
(instanceStore.detail.features || []).find((item: { id: string; name: string }) => item.id === limitsMap.get(`${types}-${action}`))
);
};
</script>
<style scoped lang="scss">
</style>

10
src/views/device/components/Metadata/Import/index.vue
View File

@ -47,14 +47,16 @@ import { saveMetadata } from '@/api/device/instance'
import { queryNoPagingPost, convertMetadata, modify } from '@/api/device/product'
import type { DefaultOptionType } from 'ant-design-vue/es/select';
import { UploadProps } from 'ant-design-vue/es';
import type { DeviceMetadata } from '@/views/device/Product/typings'
import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
import { message } from 'ant-design-vue/es';
import { Store } from 'jetlinks-store';
import { SystemConst } from '@/utils/consts';
import { useInstanceStore } from '@/store/instance'
import { useProductStore } from '@/store/product';
const route = useRoute()
const instanceStore = useInstanceStore()
const productStore = useProductStore()
interface Props {
visible: boolean,
@ -191,8 +193,10 @@ const handleImport = async () => {
const { id } = route.params || {}
if (props?.type === 'device') {
await saveMetadata(id as string, metadata)
instanceStore.setCurrent(JSON.parse(metadata || '{}'))
} else {
await modify(id as string, { metadata: metadata })
productStore.setCurrent(JSON.parse(metadata || '{}'))
}
loading.value = false
// MetadataAction.insert(JSON.parse(metadata || '{}'));
@ -231,10 +235,12 @@ const handleImport = async () => {
if (props?.type === 'device') {
const metadata: DeviceMetadata = JSON.parse(paramsDevice || '{}')
// MetadataAction.insert(metadata);
instanceStore.setCurrent(metadata)
message.success('导入成功')
} else {
const metadata: DeviceMetadata = JSON.parse(params?.metadata || '{}')
const metadata: ProductItem = JSON.parse(params?.metadata || '{}')
// MetadataAction.insert(metadata);
productStore.setCurrent(metadata)
message.success('导入成功')
}
}

61
src/views/device/components/Metadata/metadata.ts Normal file
View File

@ -0,0 +1,61 @@
import { saveProductMetadata } from "@/api/device/product";
import { saveMetadata } from "@/api/device/instance";
import type { DeviceInstance } from "../../Instance/typings";
import type { DeviceMetadata, MetadataItem, MetadataType, ProductItem } from "../../Product/typings";
/**
* 更新物模型
* @param type 物模型类型 events
* @param item 物模型数据 【{a},{b},{c}】
// * @param target product、device
* @param data product 、device [{event:[1,2,3]]
* @param onEvent 数据更新回调：更新数据库、发送事件等操作
*
*/
export const updateMetadata = (
type: MetadataType,
item: MetadataItem[],
// target: 'product' | 'device',
data: ProductItem | DeviceInstance,
onEvent?: (item: string) => void,
): ProductItem | DeviceInstance => {
if (!data) return data;
const metadata = JSON.parse(data.metadata || '{}') as DeviceMetadata;
const config = (metadata[type] || []) as MetadataItem[];
if (item.length > 0) {
item.forEach((i) => {
const index = config.findIndex((c) => c.id === i.id);
if (index > -1) {
config[index] = i;
// onEvent?.('update', i);
} else {
config.push(i);
// onEvent?.('add', i);
}
});
} else {
console.warn('未触发物模型修改');
}
// @ts-ignore
metadata[type] = config.sort((a, b) => b?.sortsIndex - a?.sortsIndex);
data.metadata = JSON.stringify(metadata);
onEvent?.(data.metadata)
return data;
};
/**
* 保存物模型数据到服务器
* @param type 类型
* @param data 数据
*/
export const asyncUpdateMetadata = (
type: 'product' | 'device',
data: ProductItem | DeviceInstance,
): Promise<any> => {
switch (type) {
case 'product':
return saveProductMetadata(data);
case 'device':
return saveMetadata(data.id, JSON.parse(data.metadata || '{}'));
}
};

38
src/views/home/components/StatusLabel.vue Normal file
View File

@ -0,0 +1,38 @@
<template>
<span class="status-label-container">
<i class="circle" :style="{ background: bjColor }"></i>
<span>{{ props.statusLabel }}</span>
</span>
</template>
<script setup lang="ts">
const props = defineProps<{
statusValue: string;
statusLabel: string;
}>();
const bjColor = computed(() => {
switch (props.statusValue) {
case 'online':
return '#52c41a';
case 'offline':
return '#ff4d4f';
case 'notActive':
return '#1890ff';
}
});
</script>
<style lang="less" scoped>
.status-label-container {
display: flex;
align-items: center;
.circle {
display: inline-block;
width: 6px;
height: 6px;
border-radius: 50%;
margin-right: 8px;
}
}
</style>

13
src/views/home/components/StepCard.vue
View File

@ -21,11 +21,11 @@
</div>
<div class="dialogs">
<AccessMethodDialog
<ProductChooseDialog
:open-number="openAccess"
@confirm="againJumpPage"
/>
<FuncTestDialog
<DeviceChooseDialog
:open-number="openFunc"
@confirm="againJumpPage"
/>
@ -38,8 +38,8 @@ import { PropType } from 'vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { message } from 'ant-design-vue';
import AccessMethodDialog from './dialogs/AccessMethodDialog.vue';
import FuncTestDialog from './dialogs/FuncTestDialog.vue';
import ProductChooseDialog from './dialogs/ProductChooseDialog.vue';
import DeviceChooseDialog from './dialogs/DeviceChooseDialog.vue';
import { recommendList } from '../index';
@ -73,9 +73,8 @@ const jumpPage = (row: recommendList) => {
}
};
// 弹窗返回后的二次跳转
const againJumpPage = (paramsSource: object) => {
const params = { ...(selectRow.params || {}), ...paramsSource };
router.push(`${selectRow.linkUrl}${objToParams(params || {})}`);
const againJumpPage = (params: string) => {
router.push(`${selectRow.linkUrl}/${params}`);
};
const objToParams = (source: object): string => {

181
src/views/home/components/dialogs/DeviceChooseDialog.vue Normal file
View File

@ -0,0 +1,181 @@
<template>
<div ref="modal" class="func-test-dialog-container"></div>
<a-modal
v-model:visible="visible"
title="选择产品"
style="width: 1000px"
@ok="handleOk"
:getContainer="getContainer"
:maskClosable="false"
>
<Search type="simple" :columns="query.columns" @search="query.search" />
<JTable
model="TABLE"
:request="getDeviceList_api"
:columns="table.columns"
:params="query.params"
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
:rowSelection="{
selectedRowKeys: table.selectedKeys,
onChange: table.onSelect,
type: 'radio',
}"
>
<template #modifyTime="slotProps">
<span>{{ dateFormat(slotProps.modifyTime) }}</span>
</template>
<template #state="slotProps">
<StatusLabel
:status-value="slotProps.state.value"
:status-label="slotProps.state.text"
/>
</template>
</JTable>
<template #footer>
<a-button key="back" @click="visible = false">取消</a-button>
<a-button key="submit" type="primary" @click="handleOk"
>确认</a-button
>
</template>
</a-modal>
</template>
<script setup lang="ts">
import StatusLabel from '../StatusLabel.vue';
import { ComponentInternalInstance } from 'vue';
import { getDeviceList_api } from '@/api/home';
import { dateFormat } from '@/utils/comm';
import { message } from 'ant-design-vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['confirm']);
const props = defineProps({
openNumber: Number,
});
// 弹窗控制
const visible = ref<boolean>(false);
const getContainer = () => proxy?.$refs.modal as HTMLElement;
const handleOk = () => {
if (table.selectedKeys.length < 1) return message.warn('请选择设备');
emits('confirm', table.selectedKeys[0]);
visible.value = false;
};
watch(
() => props.openNumber,
() => {
visible.value = true;
},
);
const query = reactive({
params: {},
columns: [
{
title: '设备ID',
dataIndex: 'id',
key: 'id',
ellipsis: true,
search: {
type: 'string',
},
},
{
title: '设备名称',
dataIndex: 'name',
key: 'name',
ellipsis: true,
search: {
type: 'string',
},
},
{
title: '产品名称',
dataIndex: 'productName',
key: 'productName',
ellipsis: true,
search: {
type: 'string',
},
},
{
title: '注册时间',
dataIndex: 'modifyTime',
key: 'modifyTime',
ellipsis: true,
search: {
type: 'date',
},
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
ellipsis: true,
search: {
rename: 'state',
type: 'select',
options: [
{
label: '在线',
value: 'online',
},
{
label: '离线',
value: 'offline',
},
],
},
},
],
search: (params: object) => {
query.params = params;
},
});
const table = reactive({
columns: [
{
title: '设备Id',
dataIndex: 'id',
key: 'id',
},
{
title: '设备名称',
dataIndex: 'name',
key: 'name',
},
{
title: '产品名称',
dataIndex: 'productName',
key: 'productName',
},
{
title: '注册时间',
dataIndex: 'modifyTime',
key: 'modifyTime',
scopedSlots: true,
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
scopedSlots: true,
},
],
selectedKeys: [] as string[],
onSelect: (keys: string[]) => {
table.selectedKeys = [...keys];
},
});
</script>
<style lang="less" scoped>
.func-test-dialog-container {
.search {
display: flex;
}
}
</style>

98
src/views/home/components/dialogs/FuncTestDialog.vue
View File

@ -1,98 +0,0 @@
<template>
<div ref="modal" class="func-test-dialog-container"></div>
<a-modal
v-model:visible="visible"
title="选择产品"
style="width: 1000px"
@ok="handleOk"
:getContainer="getContainer"
:maskClosable="false"
>
<Search />
<JTable :columns="columns" model="TABLE"> </JTable>
<template #footer>
<a-button key="back" @click="visible = false">取消</a-button>
<a-button key="submit" type="primary" @click="handleOk"
>确认</a-button
>
</template>
</a-modal>
</template>
<script setup lang="ts">
import { ComponentInternalInstance } from 'vue';
const { proxy } = getCurrentInstance() as ComponentInternalInstance;
const emits = defineEmits(['confirm']);
const props = defineProps({
openNumber: Number,
});
// 弹窗控制
const visible = ref<boolean>(false);
const getContainer = () => proxy?.$refs.modal as HTMLElement;
const handleOk = () => {
emits('confirm', form.value);
visible.value = false;
};
watch(
() => props.openNumber,
() => {
visible.value = true;
clickReset();
clickSearch();
},
);
// 搜索部分
const form = ref({
key: '',
relation: '',
keyValue: '',
});
const clickSearch = () => {};
const clickReset = () => {
Object.entries(form.value).forEach(([prop]) => {
form.value[prop] = '';
});
};
// 表格部分
const columns = [
{
title: '设备Id',
dataIndex: 'deviceId',
key: 'deviceId',
},
{
title: '设备名称',
dataIndex: 'deviceName',
key: 'deviceName',
},
{
title: '产品名称',
dataIndex: 'productName',
key: 'productName',
},
{
title: '注册时间',
dataIndex: 'createTime',
key: 'createTime',
},
{
title: '状态',
dataIndex: 'status',
key: 'status',
},
];
</script>
<style lang="less" scoped>
.func-test-dialog-container {
.search {
display: flex;
}
}
</style>

4
src/views/home/components/dialogs/AccessMethodDialog.vue → src/views/home/components/dialogs/ProductChooseDialog.vue
View File

@ -53,7 +53,7 @@ const productList = ref<[productItem] | []>([]);
const getContainer = () => proxy?.$refs.modal as HTMLElement;
const getOptions = () => {
getProductList_api().then((resp) => {
getProductList_api().then((resp:any) => {
productList.value = resp.result
.filter((i: any) => !i?.accessId)
.map((item: { name: any; id: any }) => ({
@ -63,7 +63,7 @@ const getOptions = () => {
});
};
const handleOk = () => {
emits('confirm', form.value);
emits('confirm', form.value.productId);
visible.value = false;
};
const filterOption = (input: string, option: any) => {

6
src/views/home/index.d.ts vendored
View File

@ -8,7 +8,11 @@ export interface recommendList {
auth: boolean;
dialogTag?: 'accessMethod' | 'funcTest';
}
// 产品列表里的每项
export interface productItem {
label: string;
value: string
}
export interface deviceInfo {
deviceId: string,
deviceName: string,

66
src/views/home/modules/config.ts
View File

@ -1,9 +1,10 @@
// 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}`);
@ -11,6 +12,8 @@ const devicePermission = (action: string) =>
hasPermission(`device/Instance:${action}`);
const rulePermission = (action: string) =>
hasPermission(`rule-engine/Instance:${action}`);
// 页面权限控制
const menuPermission = useMenuStore().hasPermission
// 物联网引导-数据
@ -18,7 +21,7 @@ export const deviceBootConfig: bootConfig[] = [
{
english: 'STEP1',
label: '创建产品',
link: '/a',
link: '/iot/device/Product',
auth: productPermission('add'),
params: {
save: true,
@ -27,7 +30,7 @@ export const deviceBootConfig: bootConfig[] = [
{
english: 'STEP2',
label: '创建设备',
link: '/b',
link: '/iot/device/Instance',
auth: devicePermission('add'),
params: {
save: true,
@ -36,7 +39,7 @@ export const deviceBootConfig: bootConfig[] = [
{
english: 'STEP3',
label: '规则引擎',
link: '/c',
link: '/iot/rule-engine/Instance',
auth: rulePermission('add'),
params: {
save: true,
@ -50,7 +53,7 @@ export const deviceStepDetails: recommendList[] = [
details:
'产品是设备的集合，通常指一组具有相同功能的设备。物联设备必须通过产品进行接入方式配置。',
iconUrl: '/images/home/bottom-4.png',
linkUrl: '/a',
linkUrl: '/iot/device/Product',
auth: productPermission('add'),
params: {
save: true,
@ -61,7 +64,7 @@ export const deviceStepDetails: recommendList[] = [
details:
'通过产品对同一类型的设备进行统一的接入方式配置。请参照设备铭牌说明选择匹配的接入方式。',
iconUrl: '/images/home/bottom-1.png',
linkUrl: '/a',
linkUrl: '/iot/device/Product/detail',
auth: productPermission('update'),
dialogTag: 'accessMethod',
},
@ -69,7 +72,7 @@ export const deviceStepDetails: recommendList[] = [
title: '添加测试设备',
details: '添加单个设备，用于验证产品模型是否配置正确。',
iconUrl: '/images/home/bottom-5.png',
linkUrl: '/a',
linkUrl: '/iot/device/Instance',
auth: devicePermission('add'),
params: {
save: true,
@ -80,15 +83,16 @@ export const deviceStepDetails: recommendList[] = [
details:
'对添加的测试设备进行功能调试，验证能否连接到平台，设备功能是否配置正确。',
iconUrl: '/images/home/bottom-2.png',
linkUrl: '/a',
auth: devicePermission('update'),
linkUrl: '/iot/device/Instance/detail',
// auth: devicePermission('update'),
auth: true,
dialogTag: 'funcTest',
},
{
title: '批量添加设备',
details: '批量添加同一产品下的设备',
iconUrl: '/images/home/bottom-3.png',
linkUrl: '/a',
linkUrl: '/iot/device/Instance',
auth: devicePermission('import'),
params: {
import: true,
@ -102,14 +106,14 @@ export const opsBootConfig: bootConfig[] = [
{
english: 'STEP1',
label: '设备接入配置',
link: '/a',
auth: true,
link: '/iot/link/accessConfig',
auth: menuPermission('link/accessConfig'),
},
{
english: 'STEP2',
label: '日志排查',
link: '/b',
auth: true,
link: '/iot/link/Log',
auth: menuPermission('link/Log'),
params: {
key: 'system',
},
@ -117,8 +121,8 @@ export const opsBootConfig: bootConfig[] = [
{
english: 'STEP3',
label: '实时监控',
link: '/c',
auth: false,
link: '/iot/link/dashboard',
auth: menuPermission('link/dashboard'),
params: {
save: true,
},
@ -131,44 +135,38 @@ export const opsStepDetails: recommendList[] = [
details:
'根据业务需求自定义开发对应的产品（设备模型）接入协议，并上传到平台。',
iconUrl: '/images/home/bottom-1.png',
linkUrl: '/a',
auth: true,
params: {
a: 1,
save: true,
},
linkUrl: '/iot/link/protocol',
auth: menuPermission('link/Protocol'),
},
{
title: '证书管理',
details: '统一维护平台内的证书，用于数据通信加密。',
iconUrl: '/images/home/bottom-6.png',
linkUrl: '/a',
auth: true,
params: {
a: 1,
save: false,
},
linkUrl: '/iot/link/Certificate',
auth: menuPermission('link/Certificate'),
},
{
title: '网络组件',
details: '根据不同的传输类型配置平台底层网络组件相关参数。',
iconUrl: '/images/home/bottom-3.png',
linkUrl: '/a',
auth: true,
linkUrl: '/iot/link/type',
auth: menuPermission('link/Type'),
},
{
title: '设备接入网关',
details: '根据不同的传输类型，关联消息协议，配置设备接入网关相关参数。',
iconUrl: '/images/home/bottom-4.png',
linkUrl: '/a',
auth: true,
linkUrl: '/iot/link/accessConfig',
auth: menuPermission('link/AccessConfig'),
},
{
title: '日志管理',
details: '监控系统日志，及时处理系统异常。',
iconUrl: '/images/home/bottom-5.png',
linkUrl: '/a',
auth: false,
linkUrl: '/iot/link/Log',
auth: menuPermission('Log'),
params: {
key: 'system',
}

571
src/views/iot-card/CardManagement/index.vue Normal file
View File

@ -0,0 +1,571 @@
<!-- 物联卡管理 -->
<template>
<div class="page-container">
<Search
:columns="columns"
target="iot-card-management-search"
@search="handleSearch"
/>
<JTable
ref="cardManageRef"
:columns="columns"
:request="query"
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
:rowSelection="{
selectedRowKeys: _selectedRowKeys,
onChange: onSelectChange,
}"
@cancelSelect="cancelSelect"
:params="params"
>
<template #headerTitle>
<a-space>
<a-button type="primary" @click="handleAdd">
<AIcon type="PlusOutlined" />新增
</a-button>
<a-dropdown>
<a-button>
批量操作
<AIcon type="DownOutlined" />
</a-button>
<template #overlay>
<a-menu>
<a-menu-item>
<a-button @click="exportVisible = true">
<AIcon type="ExportOutlined" />
批量导出
</a-button>
</a-menu-item>
<a-menu-item>
<a-button @click="importVisible = true"
><AIcon
type="ImportOutlined"
/>批量导入</a-button
>
</a-menu-item>
<a-menu-item>
<a-popconfirm
@confirm="handleActive"
title="确认激活吗？"
>
<a-button>
<AIcon type="CheckCircleOutlined" />
批量激活
</a-button>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a-popconfirm
@confirm="handleStop"
title="确认停用吗？"
>
<a-button type="primary" ghost>
<AIcon type="StopOutlined" />
批量停用
</a-button>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a-popconfirm
@confirm="handleResumption"
title="确认复机吗？"
>
<a-button type="primary" ghost>
<AIcon type="PoweroffOutlined" />
批量复机
</a-button>
</a-popconfirm>
</a-menu-item>
<a-menu-item>
<a-popconfirm
@confirm="handleSync"
title="确认同步状态吗？"
>
<a-button type="primary" ghost>
<AIcon type="SwapOutlined" />
同步状态
</a-button>
</a-popconfirm>
</a-menu-item>
<a-menu-item v-if="_selectedRowKeys.length > 0">
<a-popconfirm
@confirm="handelRemove"
title="确认删除吗？"
>
<a-button>
<AIcon type="DeleteOutlined" />
批量删除
</a-button>
</a-popconfirm>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</a-space>
</template>
<template #totalFlow="slotProps">
<div>
{{
slotProps.totalFlow
? slotProps.totalFlow.toFixed(2) + ' M'
: ''
}}
</div>
</template>
<template #usedFlow="slotProps">
<div>
{{
slotProps.usedFlow
? slotProps.usedFlow.toFixed(2) + ' M'
: ''
}}
</div>
</template>
<template #residualFlow="slotProps">
<div>
{{
slotProps.residualFlow
? slotProps.residualFlow.toFixed(2) + ' M'
: ''
}}
</div>
</template>
<template #cardType="slotProps">
{{ slotProps.cardType.text }}
</template>
<template #cardStateType="slotProps">
{{ slotProps.cardStateType.text }}
</template>
<template #activationDate="slotProps">
{{
slotProps.activationDate
? moment(slotProps.activationDate).format(
'YYYY-MM-DD HH:mm:ss',
)
: ''
}}
</template>
<template #updateTime="slotProps">
{{
slotProps.updateTime
? moment(slotProps.updateTime).format(
'YYYY-MM-DD HH:mm:ss',
)
: ''
}}
</template>
<template #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps)"
:key="i.key"
v-bind="i.tooltip"
>
<a-popconfirm v-if="i.popConfirm" v-bind="i.popConfirm">
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-popconfirm>
<a-button
style="padding: 0"
type="link"
v-else
@click="i.onClick && i.onClick(slotProps)"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
</a-button>
</a-tooltip>
</a-space>
</template>
</JTable>
</div>
</template>
<script setup lang="ts">
import type { ActionsType } from '@/components/Table';
import moment from 'moment';
import {
query,
queryPlatformNoPage,
changeDeploy,
unDeploy,
resumption,
del,
changeDeployBatch,
unDeployBatch,
resumptionBatch,
sync,
removeCards,
} from '@/api/iot-card/cardManagement';
import { message } from 'ant-design-vue';
const cardManageRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
const _selectedRowKeys = ref<string[]>([]);
const _selectedRow = ref<any[]>([]);
const visible = ref<boolean>(false);
const exportVisible = ref<boolean>(false);
const importVisible = ref<boolean>(false);
const columns = [
{
title: '卡号',
dataIndex: 'id',
key: 'id',
width: 300,
ellipsis: true,
fixed: 'left',
search: {
type: 'string',
},
},
{
title: 'ICCID',
dataIndex: 'iccId',
key: 'iccId',
ellipsis: true,
width: 200,
search: {
type: 'string',
},
},
{
title: '绑定设备',
dataIndex: 'deviceName',
key: 'deviceName',
ellipsis: true,
width: 200,
},
{
title: '平台对接',
dataIndex: 'platformConfigName',
key: 'platformConfigName',
width: 200,
search: {
rename: 'platformConfigId',
type: 'select',
options: async () => {
return new Promise((resolve) => {
queryPlatformNoPage({
sorts: [{ name: 'createTime', order: 'desc' }],
terms: [{ column: 'state', value: 'enabled' }],
}).then((resp: any) => {
const list = resp.result.map((item: any) => ({
label: item.name,
value: item.id,
}));
resolve(list);
});
});
},
},
},
{
title: '运营商',
dataIndex: 'operatorName',
key: 'operatorName',
width: 120,
search: {
type: 'select',
options: [
{ label: '移动', value: '移动' },
{ label: '电信', value: '电信' },
{ label: '联通', value: '联通' },
],
},
},
{
title: '类型',
dataIndex: 'cardType',
key: 'cardType',
scopedSlots: true,
width: 120,
search: {
type: 'select',
options: [
{ label: '年卡', value: 'year' },
{ label: '季卡', value: 'season' },
{ label: '月卡', value: 'month' },
{ label: '其他', value: 'other' },
],
},
},
{
title: '总流量',
dataIndex: 'totalFlow',
width: 120,
scopedSlots: true,
},
{
title: '使用流量',
dataIndex: 'usedFlow',
width: 120,
scopedSlots: true,
},
{
title: '剩余流量',
dataIndex: 'residualFlow',
width: 120,
scopedSlots: true,
},
{
title: '激活日期',
dataIndex: 'activationDate',
key: 'activationDate',
scopedSlots: true,
width: 200,
search: {
type: 'date',
},
},
{
title: '更新时间',
dataIndex: 'updateTime',
key: 'updateTime',
scopedSlots: true,
width: 200,
search: {
type: 'date',
},
},
{
title: '状态',
dataIndex: 'cardStateType',
key: 'cardStateType',
width: 180,
scopedSlots: true,
search: {
type: 'select',
options: [
{ label: '正常', value: 'using' },
{ label: '未激活', value: 'toBeActivated' },
{ label: '停机', value: 'deactivate' },
],
},
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true,
},
];
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
if (!data) return [];
return [
{
key: 'edit',
text: '编辑',
tooltip: {
title: '编辑',
},
icon: 'EditOutlined',
},
{
key: 'view',
text: '查看',
tooltip: {
title: '查看',
},
icon: 'EyeOutlined',
},
{
key: 'bindDevice',
text: data.deviceId ? '解绑设备' : '绑定设备',
tooltip: {
title: data.deviceId ? '解绑设备' : '绑定设备',
},
icon: data.deviceId ? 'DisconnectOutlined' : 'LinkOutlined',
},
{
key: 'activation',
text:
data.cardStateType?.value === 'toBeActivated'
? '激活'
: data.cardStateType?.value === 'deactivate'
? '复机'
: '停用',
tooltip: {
title:
data.cardStateType?.value === 'toBeActivated'
? '激活'
: data.cardStateType?.value === 'deactivate'
? '复机'
: '停用',
},
icon:
data.cardStateType?.value === 'toBeActivated'
? 'CheckCircleOutlined'
: data.cardStateType?.value === 'deactivate'
? 'PoweroffOutlined'
: 'StopOutlined',
popConfirm: {
title:
data.cardStateType?.value === 'toBeActivated'
? '确认激活？'
: data.cardStateType?.value === 'deactivate'
? '确认复机？'
: '确认停用?',
onConfirm: async () => {
if (data.cardStateType?.value === 'toBeActivated') {
changeDeploy(data.id).then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
cardManageRef.value?.reload();
}
});
} else if (data.cardStateType?.value === 'deactivate') {
resumption(data.id).then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
cardManageRef.value?.reload();
}
});
} else {
unDeploy(data.id).then((resp) => {
if (resp.status === 200) {
message.success('操作成功');
cardManageRef.value?.reload();
}
});
}
},
},
},
{
key: 'delete',
text: '删除',
tooltip: {
title: '删除',
},
popConfirm: {
title: '确认删除?',
onConfirm: async () => {
const resp: any = await del(data.id);
if (resp.status === 200) {
message.success('操作成功！');
cardManageRef.value?.reload();
} else {
message.error('操作失败！');
}
},
},
icon: 'DeleteOutlined',
},
];
};
const handleSearch = (params: any) => {
console.log(params);
params.value = params;
};
const onSelectChange = (keys: string[], rows: []) => {
_selectedRowKeys.value = [...keys];
_selectedRow.value = [...rows];
};
const cancelSelect = () => {
_selectedRowKeys.value = [];
};
/**
* 新增
*/
const handleAdd = () => {};
/**
* 批量激活
*/
const handleActive = () => {
if (
_selectedRowKeys.value.length >= 10 &&
_selectedRowKeys.value.length <= 100
) {
changeDeployBatch(_selectedRowKeys.value).then((res: any) => {
if (res.status === 200) {
message.success('操作成功');
}
});
} else {
message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
}
};
/**
* 批量停用
*/
const handleStop = () => {
if (
_selectedRowKeys.value.length >= 10 &&
_selectedRowKeys.value.length <= 100
) {
unDeployBatch(_selectedRowKeys.value).then((res: any) => {
if (res.status === 200) {
message.success('操作成功');
}
});
} else {
message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
}
};
/**
* 批量复机
*/
const handleResumption = () => {
if (
_selectedRowKeys.value.length >= 10 &&
_selectedRowKeys.value.length <= 100
) {
resumptionBatch(_selectedRowKeys.value).then((res: any) => {
if (res.status === 200) {
message.success('操作成功');
}
});
} else {
message.warn('仅支持同一个运营商下且最少10条数据,最多100条数据');
}
};
/**
* 同步状态
*/
const handleSync = () => {
sync().then((res: any) => {
if (res.status === 200) {
cardManageRef.value?.reload();
message.success('同步状态成功');
}
});
};
/**
* 批量删除
*/
const handelRemove = async () => {
const resp = await removeCards(_selectedRow.value);
if (resp.status === 200) {
message.success('操作成功！');
_selectedRowKeys.value = [];
_selectedRow.value = [];
cardManageRef.value?.reload();
}
};
</script>
<style scoped lang="less">
.search {
width: calc(100% - 330px);
}
</style>

153
src/views/notice/Config/Log/index.vue
View File

@ -1,13 +1,156 @@
<template>
<div class="page-container">
</div>
<a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
<Search
type="simple"
:columns="columns"
target="product"
@search="handleSearch"
/>
<JTable
ref="instanceRef"
:columns="columns"
:request="(e:any) => configApi.getHistory(e, data.id)"
:defaultParams="{
sorts: [{ name: 'notifyTime', order: 'desc' }],
terms: [{ column: 'notifyType$IN', value: data.type }],
}"
:params="params"
model="table"
>
<template #notifyTime="slotProps">
{{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
<template #state="slotProps">
<a-space>
<a-badge
:status="slotProps.state.value"
:text="slotProps.state.text"
></a-badge>
<AIcon
v-if="slotProps.state.value === 'error'"
type="ExclamationCircleOutlined"
style="color: #1d39c4; cursor: pointer"
@click="handleError(slotProps.errorStack)"
/>
</a-space>
</template>
<template #action="slotProps">
<AIcon
type="ExclamationCircleOutlined"
style="color: #1d39c4; cursor: pointer"
@click="handleDetail(slotProps.context)"
/>
</template>
</JTable>
</a-modal>
</template>
<script setup lang="ts">
import configApi from '@/api/notice/config';
import { PropType } from 'vue';
import moment from 'moment';
import { Modal } from 'ant-design-vue';
type Emits = {
(e: 'update:visible', data: boolean): void;
};
const emit = defineEmits<Emits>();
const props = defineProps({
visible: { type: Boolean, default: false },
data: {
type: Object as PropType<Partial<Record<string, any>>>,
default: () => ({}),
},
});
const _vis = computed({
get: () => props.visible,
set: (val) => emit('update:visible', val),
});
watch(
() => _vis.value,
(val) => {
if (val) handleSearch({ terms: [] });
},
);
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
search: {
type: 'string',
},
},
{
title: '发送时间',
dataIndex: 'notifyTime',
key: 'notifyTime',
scopedSlots: true,
search: {
type: 'date',
handleValue: (v: any) => {
return '123';
},
},
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
scopedSlots: true,
search: {
type: 'select',
options: [
{ label: '成功', value: 'success' },
{ label: '失败', value: 'error' },
],
handleValue: (v: any) => {
return '123';
},
},
},
{
title: '操作',
key: 'action',
scopedSlots: true,
},
];
const params = ref<Record<string, any>>({});
/**
* 搜索
* @param params
*/
const handleSearch = (e: any) => {
// console.log('handleSearch e:', e);
params.value = e;
// console.log('params.value: ', params.value);
};
/**
* 查看错误信息
*/
const handleError = (e: any) => {
Modal.info({
title: '错误信息',
content: JSON.stringify(e),
});
};
/**
* 查看详情
*/
const handleDetail = (e: any) => {
Modal.info({
title: '详情信息',
content: JSON.stringify(e),
});
};
</script>
<style lang="less" scoped>
</style>
<style lang="less" scoped></style>

340
src/views/notice/Config/index.vue
View File

@ -1,171 +1,172 @@
<template>
<div class="page-container">
<a-card style="margin-bottom: 20px">
<Search
:columns="columns"
target="notice-config"
@search="handleSearch"
/>
</a-card>
<a-card>
<JTable
ref="instanceRef"
:columns="columns"
:request="configApi.list"
:defaultParams="{
sorts: [{ name: 'createTime', order: 'desc' }],
}"
:params="params"
>
<template #headerTitle>
<a-space>
<a-button type="primary" @click="handleAdd">
新增
</a-button>
<a-upload
name="file"
accept="json"
:showUploadList="false"
:before-upload="beforeUpload"
>
<a-button>导入</a-button>
</a-upload>
<a-button @click="handleExport">导出</a-button>
</a-space>
</template>
<template #card="slotProps">
<CardBox
:showStatus="false"
:value="slotProps"
:actions="getActions(slotProps, 'card')"
v-bind="slotProps"
<Search
:columns="columns"
target="notice-config"
@search="handleSearch"
/>
<JTable
ref="configRef"
:columns="columns"
:request="ConfigApi.list"
:defaultParams="{
sorts: [{ name: 'createTime', order: 'desc' }],
}"
:params="params"
>
<template #headerTitle>
<a-space>
<a-button type="primary" @click="handleAdd">
新增
</a-button>
<a-upload
name="file"
accept="json"
:showUploadList="false"
:before-upload="beforeUpload"
>
<template #img>
<slot name="img">
<img
:src="
getLogo(
slotProps.type,
slotProps.provider,
)
"
/>
</slot>
</template>
<template #content>
<h3 class="card-item-content-title">
{{ slotProps.name }}
</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">
通知方式
</div>
<div>
{{ getMethodTxt(slotProps.type) }}
</div>
</a-col>
<a-col :span="12">
<div class="card-item-content-text">
说明
</div>
<div>{{ slotProps.description }}</div>
</a-col>
</a-row>
</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 #action="slotProps">
<a-space :size="16">
<a-button>导入</a-button>
</a-upload>
<a-popconfirm
title="确认导出当前页数据？"
ok-text="确定"
cancel-text="取消"
@confirm="handleExport"
>
<a-button>导出</a-button>
</a-popconfirm>
</a-space>
</template>
<template #card="slotProps">
<CardBox
:showStatus="false"
:value="slotProps"
:actions="getActions(slotProps, 'card')"
v-bind="slotProps"
>
<template #img>
<slot name="img">
<img
:src="
getLogo(slotProps.type, slotProps.provider)
"
/>
</slot>
</template>
<template #content>
<h3 class="card-item-content-title">
{{ slotProps.name }}
</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">
通知方式
</div>
<div>
{{ getMethodTxt(slotProps.type) }}
</div>
</a-col>
<a-col :span="12">
<div class="card-item-content-text">说明</div>
<div>{{ slotProps.description }}</div>
</a-col>
</a-row>
</template>
<template #actions="item">
<a-tooltip
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
v-bind="item.tooltip"
:title="item.disabled && item.tooltip.title"
>
<a-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled"
v-if="item.popConfirm"
v-bind="item.popConfirm"
:disabled="item.disabled"
>
<a-button
:disabled="i.disabled"
style="padding: 0"
type="link"
><AIcon :type="i.icon"
/></a-button>
<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 #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<a-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled"
>
<a-button
:disabled="i.disabled"
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>
><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>
<Debug v-model:visible="debugVis" :data="currentConfig" />
<Log v-model:visible="logVis" :data="currentConfig" />
<SyncUser v-model:visible="syncVis" :data="currentConfig" />
</div>
</template>
<script setup lang="ts">
import configApi from '@/api/notice/config';
import ConfigApi from '@/api/notice/config';
import type { ActionsType } from '@/components/Table/index.vue';
import { getImage, LocalStore } from '@/utils/comm';
import { message } from 'ant-design-vue';
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
import { NOTICE_METHOD, MSG_TYPE } from '@/views/notice/const';
import SyncUser from './SyncUser/index.vue'
import Debug from './Debug/index.vue'
import Log from './Log/index.vue'
import SyncUser from './SyncUser/index.vue';
import Debug from './Debug/index.vue';
import Log from './Log/index.vue';
import { downloadObject } from '@/utils/utils';
let providerList: any = [];
Object.keys(MSG_TYPE).forEach((key) => {
@ -174,7 +175,7 @@ Object.keys(MSG_TYPE).forEach((key) => {
const router = useRouter();
const instanceRef = ref<Record<string, any>>({});
const configRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
const columns = [
@ -236,6 +237,7 @@ const columns = [
const handleSearch = (e: any) => {
console.log('handleSearch:', e);
params.value = e;
console.log('params.value: ', params.value);
};
/**
@ -261,12 +263,39 @@ const handleAdd = () => {
/**
* 导入
*/
const beforeUpload = () => {};
const beforeUpload = (file: any) => {
console.log('file: ', file);
const reader = new FileReader();
reader.readAsText(file);
reader.onload = async (result) => {
const text = result.target?.result;
console.log('text: ', text);
if (!file.type.includes('json')) {
message.error('请上传json格式文件');
return false;
}
try {
const data = JSON.parse(text || '{}');
const { success } = await ConfigApi.update(data);
if (success) {
message.success('操作成功');
configRef.value.reload();
}
return true;
} catch {
// message.error('请上传json格式文件');
}
return true;
};
return false;
};
/**
* 导出
*/
const handleExport = () => {};
const handleExport = () => {
downloadObject(configRef.value.dataSource, `通知配置`);
};
/**
* 查看
@ -330,26 +359,19 @@ const getActions = (
},
icon: 'ArrowDownOutlined',
onClick: () => {
// debugVis.value = true;
downloadObject(data, `通知配置`);
},
},
{
key: 'delete',
text: '删除',
// disabled: data.state.value !== 'notActive',
// tooltip: {
// title:
// data.state.value !== 'notActive'
// ? '已启用的设备不能删除'
// : '删除',
// },
popConfirm: {
title: '确认删除?',
onConfirm: async () => {
const resp = await configApi.del(data.id);
const resp = await ConfigApi.del(data.id);
if (resp.status === 200) {
message.success('操作成功！');
// instanceRef.value?.reload();
configRef.value?.reload();
} else {
message.error('操作失败！');
}
@ -358,8 +380,6 @@ const getActions = (
icon: 'DeleteOutlined',
},
];
if (type === 'card')
return actions.filter((i: ActionsType) => i.key !== 'view');
return actions;
};
</script>

202
src/views/notice/Template/Debug/index.vue Normal file
View File

@ -0,0 +1,202 @@
<template>
<a-modal
v-model:visible="_vis"
title="调试"
cancelText="取消"
okText="确定"
@ok="handleOk"
@cancel="handleCancel"
:confirmLoading="btnLoading"
>
<a-form layout="vertical">
<a-form-item label="通知配置" v-bind="validateInfos.configId">
<a-select
v-model:value="formData.configId"
placeholder="请选择通知配置"
>
<a-select-option
v-for="(item, index) in configList"
:key="index"
:value="item.id"
>
{{ item.name }}
</a-select-option>
</a-select>
</a-form-item>
<a-form-item
label="变量"
v-bind="validateInfos.variableDefinitions"
v-if="templateDetailTable && templateDetailTable.length"
>
<a-table
ref="myTable"
class="debug-table"
:columns="columns"
:data-source="templateDetailTable"
:pagination="false"
:rowKey="
(record, index) => {
return record.id;
}
"
>
<template #bodyCell="{ column, text, record }">
<template
v-if="['id', 'name'].includes(column.dataIndex)"
>
<span>{{ record[column.dataIndex] }}</span>
</template>
<template v-else>
<ValueItem
v-model:modelValue="record.value"
:itemType="record.type"
/>
</template>
</template>
</a-table>
</a-form-item>
</a-form>
</a-modal>
</template>
<script setup lang="ts">
import { Form } from 'ant-design-vue';
import { PropType } from 'vue';
import TemplateApi from '@/api/notice/template';
import {
TemplateFormData,
IVariableDefinitions,
BindConfig,
} from '@/views/notice/Template/types';
import { message } from 'ant-design-vue';
const useForm = Form.useForm;
type Emits = {
(e: 'update:visible', data: boolean): void;
};
const emit = defineEmits<Emits>();
const props = defineProps({
visible: { type: Boolean, default: false },
data: {
type: Object as PropType<Partial<Record<string, any>>>,
default: () => ({}),
},
});
const _vis = computed({
get: () => props.visible,
set: (val) => emit('update:visible', val),
});
/**
* 获取通知模板
*/
const configList = ref<BindConfig[]>([]);
const getConfigList = async () => {
const params = {
terms: [
{ column: 'type', value: props.data.type },
{ column: 'provider', value: props.data.provider },
],
};
const { result } = await TemplateApi.getConfig(params);
configList.value = result;
};
watch(
() => _vis.value,
(val) => {
if (val) {
getConfigList();
getTemplateDetail();
}
},
);
/**
* 获取模板详情
*/
const templateDetailTable = ref<IVariableDefinitions[]>();
const getTemplateDetail = async () => {
const { result } = await TemplateApi.getTemplateDetail(props.data.id);
templateDetailTable.value = result.variableDefinitions.map((m: any) => ({
...m,
value: undefined,
}));
};
const columns = [
{
title: '变量',
dataIndex: 'id',
scopedSlots: { customRender: 'id' },
},
{
title: '名称',
dataIndex: 'name',
scopedSlots: { customRender: 'name' },
},
{
title: '值',
dataIndex: 'type',
width: 160,
scopedSlots: { customRender: 'type' },
},
];
// 表单数据
const formData = ref({
configId: '',
variableDefinitions: '',
});
// 验证规则
const formRules = ref({
configId: [{ required: true, message: '请选择通知模板' }],
variableDefinitions: [{ required: false, message: '该字段是必填字段' }],
});
const { resetFields, validate, validateInfos, clearValidate } = useForm(
formData.value,
formRules.value,
);
/**
* 提交
*/
const btnLoading = ref(false);
const handleOk = () => {
validate()
.then(async () => {
const params = {};
templateDetailTable.value?.forEach((item) => {
params[item.id] = item.value;
});
// console.log('params: ', params);
btnLoading.value = true;
TemplateApi.debug(params, formData.value.configId, props.data.id)
.then((res) => {
if (res.success) {
message.success('操作成功');
handleCancel();
}
})
.finally(() => {
btnLoading.value = false;
});
})
.catch((err) => {
console.log('err: ', err);
});
};
const handleCancel = () => {
_vis.value = false;
templateDetailTable.value = [];
resetFields();
};
</script>
<style lang="less" scoped></style>

156
src/views/notice/Template/Log/index.vue Normal file
View File

@ -0,0 +1,156 @@
<template>
<a-modal v-model:visible="_vis" title="通知记录" :footer="null" width="70%">
<Search
type="simple"
:columns="columns"
target="product"
@search="handleSearch"
/>
<JTable
ref="instanceRef"
:columns="columns"
:request="(e:any) => templateApi.getHistory(e, data.id)"
:defaultParams="{
sorts: [{ name: 'notifyTime', order: 'desc' }],
terms: [{ column: 'notifyType$IN', value: data.type }],
}"
:params="params"
model="table"
>
<template #notifyTime="slotProps">
{{ moment(slotProps.notifyTime).format('YYYY-MM-DD HH:mm:ss') }}
</template>
<template #state="slotProps">
<a-space>
<a-badge
:status="slotProps.state.value"
:text="slotProps.state.text"
></a-badge>
<AIcon
v-if="slotProps.state.value === 'error'"
type="ExclamationCircleOutlined"
style="color: #1d39c4; cursor: pointer"
@click="handleError(slotProps.errorStack)"
/>
</a-space>
</template>
<template #action="slotProps">
<AIcon
type="ExclamationCircleOutlined"
style="color: #1d39c4; cursor: pointer"
@click="handleDetail(slotProps.context)"
/>
</template>
</JTable>
</a-modal>
</template>
<script setup lang="ts">
import templateApi from '@/api/notice/template';
import { PropType } from 'vue';
import moment from 'moment';
import { Modal } from 'ant-design-vue';
type Emits = {
(e: 'update:visible', data: boolean): void;
};
const emit = defineEmits<Emits>();
const props = defineProps({
visible: { type: Boolean, default: false },
data: {
type: Object as PropType<Partial<Record<string, any>>>,
default: () => ({}),
},
});
const _vis = computed({
get: () => props.visible,
set: (val) => emit('update:visible', val),
});
watch(
() => _vis.value,
(val) => {
if (val) handleSearch({ terms: [] });
},
);
const columns = [
{
title: 'ID',
dataIndex: 'id',
key: 'id',
search: {
type: 'string',
},
},
{
title: '发送时间',
dataIndex: 'notifyTime',
key: 'notifyTime',
scopedSlots: true,
search: {
type: 'date',
handleValue: (v: any) => {
return '123';
},
},
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
scopedSlots: true,
search: {
type: 'select',
options: [
{ label: '成功', value: 'success' },
{ label: '失败', value: 'error' },
],
handleValue: (v: any) => {
return '123';
},
},
},
{
title: '操作',
key: 'action',
scopedSlots: true,
},
];
const params = ref<Record<string, any>>({});
/**
* 搜索
* @param params
*/
const handleSearch = (e: any) => {
// console.log('handleSearch e:', e);
params.value = e;
// console.log('params.value: ', params.value);
};
/**
* 查看错误信息
*/
const handleError = (e: any) => {
Modal.info({
title: '错误信息',
content: JSON.stringify(e),
});
};
/**
* 查看详情
*/
const handleDetail = (e: any) => {
Modal.info({
title: '详情信息',
content: JSON.stringify(e),
});
};
</script>
<style lang="less" scoped></style>

398
src/views/notice/Template/index.vue
View File

@ -1,22 +1,390 @@
<!-- 通知模板 -->
<template>
<div class="page-container">通知模板</div>
<div class="page-container">
<Search
:columns="columns"
target="notice-config"
@search="handleSearch"
/>
<JTable
ref="configRef"
:columns="columns"
:request="TemplateApi.list"
:defaultParams="{
sorts: [{ name: 'createTime', order: 'desc' }],
}"
:params="params"
>
<template #headerTitle>
<a-space>
<a-button type="primary" @click="handleAdd">
新增
</a-button>
<a-upload
name="file"
accept="json"
:showUploadList="false"
:before-upload="beforeUpload"
>
<a-button>导入</a-button>
</a-upload>
<a-popconfirm
title="确认导出当前页数据？"
ok-text="确定"
cancel-text="取消"
@confirm="handleExport"
>
<a-button>导出</a-button>
</a-popconfirm>
</a-space>
</template>
<template #card="slotProps">
<CardBox
:showStatus="false"
:value="slotProps"
:actions="getActions(slotProps, 'card')"
v-bind="slotProps"
>
<template #img>
<slot name="img">
<img
:src="
getLogo(slotProps.type, slotProps.provider)
"
/>
</slot>
</template>
<template #content>
<h3 class="card-item-content-title">
{{ slotProps.name }}
</h3>
<a-row>
<a-col :span="12">
<div class="card-item-content-text">
通知方式
</div>
<div>
{{ getMethodTxt(slotProps.type) }}
</div>
</a-col>
<a-col :span="12">
<div class="card-item-content-text">说明</div>
<div>{{ slotProps.description }}</div>
</a-col>
</a-row>
</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 #action="slotProps">
<a-space :size="16">
<a-tooltip
v-for="i in getActions(slotProps, 'table')"
:key="i.key"
v-bind="i.tooltip"
>
<a-popconfirm
v-if="i.popConfirm"
v-bind="i.popConfirm"
:disabled="i.disabled"
>
<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>
<Debug v-model:visible="debugVis" :data="currentConfig" />
<Log v-model:visible="logVis" :data="currentConfig" />
</div>
</template>
<script setup lang="ts">
import templateApi from '@/api/notice/template';
import TemplateApi from '@/api/notice/template';
import type { ActionsType } from '@/components/Table/index.vue';
import { getImage, LocalStore } from '@/utils/comm';
import { message } from 'ant-design-vue';
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
const getList = async () => {
const res = await templateApi.list({
current: 1,
pageIndex: 0,
pageSize: 12,
sorts: [{ name: 'createTime', order: 'desc' }],
terms: [],
});
console.log('res: ', res);
import { NOTICE_METHOD, MSG_TYPE } from '@/views/notice/const';
import Debug from './Debug/index.vue';
import Log from './Log/index.vue';
import { downloadObject } from '@/utils/utils';
let providerList: any = [];
Object.keys(MSG_TYPE).forEach((key) => {
providerList = [...providerList, ...MSG_TYPE[key]];
});
const router = useRouter();
const configRef = ref<Record<string, any>>({});
const params = ref<Record<string, any>>({});
const columns = [
{
title: '模板名称',
dataIndex: 'name',
key: 'name',
search: {
type: 'string',
},
},
{
title: '通知方式',
dataIndex: 'type',
key: 'type',
scopedSlots: true,
search: {
type: 'select',
options: NOTICE_METHOD,
handleValue: (v: any) => {
return '123';
},
},
},
{
title: '类型',
dataIndex: 'provider',
key: 'provider',
scopedSlots: true,
search: {
type: 'select',
options: providerList,
handleValue: (v: any) => {
return '123';
},
},
},
{
title: '说明',
dataIndex: 'description',
key: 'description',
search: {
type: 'string',
},
},
{
title: '操作',
key: 'action',
fixed: 'right',
width: 250,
scopedSlots: true,
},
];
/**
* 搜索
* @param params
*/
const handleSearch = (e: any) => {
// console.log('handleSearch:', e);
params.value = e;
// console.log('params.value: ', params.value);
};
getList();
</script>
<style lang="less" scoped></style>
/**
* 根据通知方式展示对应logo
*/
const getLogo = (type: string, provider: string) => {
return MSG_TYPE[type].find((f: any) => f.value === provider)?.logo;
};
/**
* 通知方式字段展示对应文字
*/
const getMethodTxt = (type: string) => {
return NOTICE_METHOD.find((f) => f.value === type)?.label;
};
/**
* 新增
*/
const handleAdd = () => {
router.push(`/notice/Config/detail/:id`);
};
/**
* 导入
*/
const beforeUpload = (file: any) => {
console.log('file: ', file);
const reader = new FileReader();
reader.readAsText(file);
reader.onload = async (result) => {
const text = result.target?.result;
console.log('text: ', text);
if (!file.type.includes('json')) {
message.error('请上传json格式文件');
return false;
}
try {
const data = JSON.parse(text || '{}');
const { success } = await TemplateApi.update(data);
if (success) {
message.success('操作成功');
configRef.value.reload();
}
return true;
} catch {
// message.error('请上传json格式文件');
}
return true;
};
return false;
};
/**
* 导出
*/
const handleExport = () => {
downloadObject(configRef.value.dataSource, `通知配置`);
};
/**
* 查看
*/
const handleView = (id: string) => {
message.warn(id + '暂未开发');
};
const syncVis = ref(false);
const debugVis = ref(false);
const logVis = ref(false);
const currentConfig = ref<Partial<Record<string, any>>>();
const getActions = (
data: Partial<Record<string, any>>,
type: 'card' | 'table',
): ActionsType[] => {
if (!data) return [];
const actions = [
{
key: 'edit',
text: '编辑',
tooltip: {
title: '编辑',
},
icon: 'EditOutlined',
onClick: () => {
// visible.value = true;
// current.value = data;
router.push(`/notice/Config/detail/${data.id}`);
},
},
{
key: 'debug',
text: '调试',
tooltip: {
title: '调试',
},
icon: 'BugOutlined',
onClick: () => {
debugVis.value = true;
currentConfig.value = data;
},
},
{
key: 'debug',
text: '导出',
tooltip: {
title: '导出',
},
icon: 'ArrowDownOutlined',
onClick: () => {
downloadObject(data, `通知配置`);
},
},
{
key: 'debug',
text: '通知记录',
tooltip: {
title: '通知记录',
},
icon: 'BarsOutlined',
onClick: () => {
logVis.value = true;
currentConfig.value = data;
},
},
{
key: 'delete',
text: '删除',
popConfirm: {
title: '确认删除?',
onConfirm: async () => {
const resp = await TemplateApi.del(data.id);
if (resp.status === 200) {
message.success('操作成功！');
configRef.value?.reload();
} else {
message.error('操作失败！');
}
},
},
icon: 'DeleteOutlined',
},
];
return actions;
};
</script>
<style lang="less" scoped>
.page-container {
background: #f0f2f5;
padding: 24px;
}
</style>

105
src/views/system/Permission/components/EditDialog.vue
View File

@ -9,7 +9,10 @@
<a-form ref="formRef" :model="form.data" layout="vertical">
<a-form-item
name="id"
:rules="[{ required: true, message: '请输入标识' }]"
:rules="[
{ required: true, message: '请输入标识(ID)' },
{ validator: form.rules.idCheck, trigger: 'blur' },
]"
class="question-item"
>
<template #label>
@ -62,6 +65,7 @@
</template>
<template v-else-if="column.key === 'act'">
<a-button
class="delete-btn"
style="padding: 0"
type="link"
@click="table.clickRemove(index)"
@ -71,17 +75,17 @@
</template>
</template>
</a-table>
<div class="pager">
<div class="pager" v-show="pager.total > pager.pageSize">
<a-select v-model:value="pager.current" style="width: 60px">
<a-select-option v-for="(val, i) in pageArr" :value="i + 1">{{
i + 1
}}</a-select-option>
</a-select>
<a-pagination
v-model:current="pager.current"
:page-size="pager.pageSize"
:total="pager.total"
/>
<a-select v-model:value="pager.current" style="width: 60px">
<a-select-option v-for="(val,i) in pageArr" :value="i + 1">{{
i + 1
}}</a-select-option>
</a-select>
</div>
<a-button type="dashed" style="width: 100%" @click="table.clickAdd">
@ -105,27 +109,40 @@
import { FormInstance, message } from 'ant-design-vue';
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
import { Rule } from 'ant-design-vue/es/form';
import {
checkId_api,
editPermission_api,
addPermission_api,
} from '@/api/system/permission';
const defaultAction = [
{ action: 'query', name: '查询', describe: '查询' },
{ action: 'save', name: '保存', describe: '保存' },
{ action: 'delete', name: '删除', describe: '删除' },
];
const emits = defineEmits(['refresh']);
// 弹窗相关
const dialog = reactive({
title: '',
visible: false,
handleOk: () => {
formRef.value?.validate().then(() => console.log('success'));
formRef.value?.validate().then(() => {
form.submit();
});
},
// 控制弹窗的打开与关闭
changeVisible: (status: boolean, defaultForm: any = {}) => {
form.data = { name: '', description: '', ...defaultForm };
dialog.title = defaultForm.id ? '编辑' : '新增';
form.data = { name: '', ...defaultForm };
table.data = defaultForm.id ? defaultForm.actions : [...defaultAction];
pager.total = table.data.length;
pager.current = 1;
dialog.visible = status;
nextTick(() => {
formRef.value?.clearValidate();
});
},
});
// 表单相关
@ -136,6 +153,46 @@ const form = reactive({
name: '',
id: '',
},
rules: {
// 校验标识是否可用
idCheck: (_rule: Rule, id: string, cb: Function) => {
if (!id) return cb('请输入标识(ID)');
if (dialog.title === '编辑') return cb();
checkId_api({ id })
.then((resp: any) => {
if (resp.status === 200 && !resp.result.passed)
cb(resp.result.reason);
else cb();
})
.catch(() => cb('验证失败'));
// return new Promise((resolve) => {
// checkId_api({ id })
// .then((resp: any) => {
// if (resp.status === 200 && !resp.result.passed)
// resolve(resp.result.reason);
// else resolve('');
// })
// .catch(() => resolve('验证失败'));
// });
},
},
submit: () => {
const params = {
...form.data,
actions: table.data.filter((item: any) => item.action && item.name),
};
const api =
dialog.title === '编辑' ? editPermission_api : addPermission_api;
api(params).then((resp) => {
if (resp.status === 200) {
message.error('操作成功');
emits('refresh');
dialog.visible = false;
}
});
},
});
const table = reactive({
@ -144,21 +201,26 @@ const table = reactive({
title: '-',
dataIndex: 'index',
key: 'index',
width:80,
align:'center'
},
{
title: '操作类型',
dataIndex: 'action',
key: 'action',
width: 220
},
{
title: '名称',
dataIndex: 'name',
key: 'name',
width: 220
},
{
title: '说明',
dataIndex: 'describe',
key: 'describe',
width: 220
},
{
title: '操作',
@ -230,5 +292,30 @@ defineExpose({
}
}
}
.ant-table {
color: #ff4d4f;
.ant-table-tbody {
color: #ff4d4f;
}
}
.delete-btn {
color: #000000d9;
&:hover{
color: #415ed1;
}
}
.pager {
display: flex;
justify-content: center;
margin-bottom: 12px;
.ant-pagination {
margin-left: 8px;
:deep(.ant-pagination-item) {
display: none;
}
}
}
}
</style>

129
src/views/system/Permission/index.vue
View File

@ -1,6 +1,6 @@
<template>
<div class="permission-container">
<Search :columns="query.columns" />
<Search :columns="query.columns" @search="query.search" />
<JTable
ref="tableRef"
@ -11,9 +11,40 @@
:defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
>
<template #headerTitle>
<a-button type="primary" @click="table.openDialog(undefined)"
<a-button
type="primary"
@click="table.openDialog(undefined)"
style="margin-right: 10px"
><plus-outlined />新增</a-button
>
<a-dropdown trigger="hover">
<a-button>批量操作</a-button>
<template #overlay>
<a-menu>
<a-menu-item>
<a-upload
name="file"
action="#"
accept=".json"
:showUploadList="false"
:before-upload="table.clickImport"
>
<a-button>导入</a-button>
</a-upload>
</a-menu-item>
<a-menu-item>
<a-popconfirm
title="确认导出？"
ok-text="确定"
cancel-text="取消"
@confirm="table.clickExport"
>
<a-button>导出</a-button>
</a-popconfirm>
</a-menu-item>
</a-menu>
</template>
</a-dropdown>
</template>
<template #status="slotProps">
<StatusLabel :status-value="slotProps.status" />
@ -51,18 +82,27 @@
</a-popconfirm>
<a-popconfirm
title="确定要删除吗？"
title="确认删除"
ok-text="确定"
cancel-text="取消"
@confirm="table.clickDel(slotProps)"
:disabled="slotProps.status"
>
<a-tooltip>
<template #title>删除</template>
<template #title>{{
systemPermission('delete')
? slotProps.status
? '请先禁用，再删除'
: '删除'
: '暂无权限，请联系管理员'
}}</template>
<a-button
style="padding: 0"
type="link"
:disabled="slotProps.status"
:disabled="
!systemPermission('delete') ||
slotProps.status
"
>
<delete-outlined />
</a-button>
@ -73,7 +113,7 @@
</JTable>
<div class="dialogs">
<EditDialog ref="editDialogRef" />
<EditDialog ref="editDialogRef" @refresh="table.refresh" />
</div>
</div>
</template>
@ -89,11 +129,22 @@ import {
StopOutlined,
PlayCircleOutlined,
} from '@ant-design/icons-vue';
import { getPermission_api, editPermission_api } from '@/api/system/permission';
import {
getPermission_api,
editPermission_api,
delPermission_api,
exportPermission_api,
} from '@/api/system/permission';
import { downloadObject } from '@/utils/utils';
import { usePermissionStore } from '@/store/permission';
const editDialogRef = ref(); // 新增弹窗实例
const tableRef = ref<Record<string, any>>({}); // 表格实例
// 按钮权限控制
const hasPermission = usePermissionStore().hasPermission;
const systemPermission = (code: string) =>
hasPermission('system/Permission:${code}');
// 筛选
const query = reactive({
columns: [
@ -138,6 +189,9 @@ const query = reactive({
},
],
params: {},
search: (params: object) => {
query.params = params;
},
});
// 表格
@ -167,10 +221,55 @@ const table = reactive({
},
],
tableData: [],
// 打开编辑弹窗
openDialog: (row: object | undefined = {}) => {
editDialogRef.value.openDialog(true, row);
let permissionCode = '';
if (Object.keys(row).length < 1) permissionCode = 'add';
else permissionCode = 'update';
if (systemPermission(permissionCode))
editDialogRef.value.openDialog(true, row);
else message.warn('暂无权限，请联系管理员');
},
// 导入数据
clickImport: (file: File) => {
if (file.type === 'application/json') {
const reader = new FileReader();
reader.readAsText(file);
reader.onload = (result: any) => {
try {
const data = JSON.parse(result.target.result);
editPermission_api(data).then((resp) => {
if (resp.status === 200) {
message.success('导入成功');
table.refresh();
}
});
} catch (error) {
message.error('导入失败，请重试！');
}
};
} else message.error('请上传json格式');
return false;
},
// 导出数据
clickExport: () => {
const params = {
paging: false,
...query.params,
};
exportPermission_api(params).then((resp) => {
if (resp.status === 200) {
downloadObject(resp.result as any, '权限数据');
message.success('导出成功');
} else {
message.error('导出错误');
}
});
},
// 修改状态
changeStatus: (row: any) => {
if (!systemPermission('action'))
return message.warn('暂无权限，请联系管理员');
const params = {
...row,
status: row.status ? 0 : 1,
@ -180,14 +279,16 @@ const table = reactive({
tableRef.value.reload();
});
},
// 删除
clickDel: (row: any) => {
// delRole_api(row.id).then((resp: any) => {
// if (resp.status === 200) {
// tableRef.value?.reload();
// message.success('操作成功!');
// }
// });
delPermission_api(row.id).then((resp: any) => {
if (resp.status === 200) {
tableRef.value?.reload();
message.success('操作成功!');
}
});
},
// 刷新列表
refresh: () => {
tableRef.value.reload();
},