fix: 合并代码
Before Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 69 KiB |
Before Width: | Height: | Size: 54 KiB After Width: | Height: | Size: 78 KiB |
After Width: | Height: | Size: 54 KiB |
Before Width: | Height: | Size: 67 KiB After Width: | Height: | Size: 67 KiB |
After Width: | Height: | Size: 274 KiB |
After Width: | Height: | Size: 307 KiB |
|
@ -0,0 +1,25 @@
|
|||
// 产品分类
|
||||
import server from '@/utils/request'
|
||||
import { CategoryItem } from '@/views/device/Category/typings'
|
||||
/**
|
||||
* 查询产品分类树形数据
|
||||
*/
|
||||
|
||||
export const queryTree = (params?: Record<string, any>) => server.post<CategoryItem>('/device/category/_tree', params)
|
||||
|
||||
/**
|
||||
* 保存树形数据
|
||||
*/
|
||||
export const saveTree = (data: any) =>server.post('/device/category', data)
|
||||
|
||||
|
||||
/**
|
||||
* 根据Id修改
|
||||
*/
|
||||
export const updateTree = (data: any, id:string) => server.put(`/device/category/${id}`, data)
|
||||
|
||||
/**
|
||||
* 根据Id删除数据
|
||||
*/
|
||||
|
||||
export const deleteTree = (id:string) => server.remove(`/device/category/${id}`)
|
|
@ -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}`
|
||||
|
||||
|
|
|
@ -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)
|
|
@ -1,8 +0,0 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 设备数量
|
||||
export const getDeviceCount_api = () => server.get(`/device/instance/_count`);
|
||||
// 产品数量
|
||||
export const getProductCount_api = (data) => server.post(`/device-product/_count`, data);
|
||||
// 查询产品列表
|
||||
export const getProductList_api = (data) => server.get(`/device/product/_query/no-paging?paging=false`, data);
|
|
@ -0,0 +1,17 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 当前登录用户权限信息
|
||||
export const getMe_api = () => server.get(`/authorize/me`);
|
||||
// 设置登录用户选择的页面
|
||||
export const setView_api = (data:object) => server.patch(`/user/settings/view/user`, data);
|
||||
// 当前登录用户选择的页面
|
||||
export const getView_api = () => server.get(`/user/settings/view/user`);
|
||||
|
||||
// 设备数量
|
||||
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 getDeviceList_api = (data:object) => server.post(`/device-instance/_query/`, data);
|
|
@ -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);
|
|
@ -1,17 +0,0 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
export const config = () => server.get(`/authorize/captcha/config`)
|
||||
|
||||
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
|
||||
|
||||
export const authLogin = (data) => server.post(`/authorize/login`, data)
|
||||
|
||||
export const getInitSet = () => server.get(`/user/settings/init`)
|
||||
|
||||
export const postInitSet = (data) => server.post(`/user/settings/init`, data)
|
||||
|
||||
export const systemVersion = () => server.get(`/system/version`)
|
||||
|
||||
export const bindInfo = () => server.get(`/application/sso/_all`)
|
||||
|
||||
export const settingDetail = (scopes) => server.get(`/system/config/${scopes}`)
|
|
@ -0,0 +1,49 @@
|
|||
import server from '@/utils/request'
|
||||
|
||||
/**
|
||||
* 获取验证码配置
|
||||
* @returns
|
||||
*/
|
||||
export const config = () => server.get(`/authorize/captcha/config`)
|
||||
|
||||
/**
|
||||
* 获取验证码图片
|
||||
* @returns
|
||||
*/
|
||||
export const code = () => server.get(`/authorize/captcha/image?width=130&height=30`)
|
||||
|
||||
/**
|
||||
* 登录
|
||||
* @returns
|
||||
*/
|
||||
export const authLogin = (data: any) => server.post(`/authorize/login`, data)
|
||||
|
||||
/**
|
||||
* 查询初始化配置信息
|
||||
* @returns
|
||||
*/
|
||||
export const getInitSet = () => server.get(`/user/settings/init`)
|
||||
|
||||
/**
|
||||
* 创建初始化配置信息
|
||||
* @returns
|
||||
*/
|
||||
export const postInitSet = (data: any) => server.post(`/user/settings/init`, data)
|
||||
|
||||
/**
|
||||
* 查询系统版本信息
|
||||
* @returns
|
||||
*/
|
||||
export const systemVersion = () => server.get(`/system/version`)
|
||||
|
||||
/**
|
||||
* 获取支持的SSO的应用
|
||||
* @returns
|
||||
*/
|
||||
export const bindInfo = () => server.get(`/application/sso/_all`)
|
||||
|
||||
/**
|
||||
* 查询配置信息
|
||||
* @returns
|
||||
*/
|
||||
export const settingDetail = (scopes: string) => server.get(`/system/config/${scopes}`)
|
|
@ -1,4 +1,5 @@
|
|||
import { patch, post, get } from '@/utils/request'
|
||||
import { patch, post, get, remove } from '@/utils/request'
|
||||
import { TemplateFormData } from '@/views/notice/Template/types'
|
||||
|
||||
export default {
|
||||
// 列表
|
||||
|
@ -8,5 +9,30 @@ export default {
|
|||
// 新增
|
||||
save: (data: any) => post(`/notifier/config`, data),
|
||||
// 修改
|
||||
update: (data: any) => patch(`/notifier/config`, data)
|
||||
update: (data: any) => patch(`/notifier/config`, data),
|
||||
del: (id: string) => remove(`/notifier/config/${id}`),
|
||||
getTemplate: (data: any, id: string) => post<TemplateFormData[]>(`/notifier/template/${id}/_query`, data),
|
||||
getTemplateDetail: (id: string) => get<TemplateFormData>(`/notifier/template/${id}/detail`),
|
||||
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
||||
getHistory: (data: any, id: string) => post(`/notify/history/config/${id}/_query`, data),
|
||||
// 获取所有平台用户
|
||||
getPlatformUsers: () => post(`/user/_query/no-paging`, { paging: false }),
|
||||
// 钉钉部门
|
||||
dingTalkDept: (id: string) => get(`/notifier/dingtalk/corp/${id}/departments/tree`),
|
||||
// 钉钉部门人员
|
||||
getDingTalkUsers: (configId: string, deptId: string) => get(`/notifier/dingtalk/corp/${configId}/${deptId}/users`),
|
||||
// 钉钉已经绑定的人员
|
||||
getDingTalkBindUsers: (id: string) => get(`/user/third-party/dingTalk_dingTalkMessage/${id}`),
|
||||
// 钉钉绑定用户
|
||||
dingTalkBindUser: (data: any, id: string) => patch(`/user/third-party/dingTalk_dingTalkMessage/${id}`, data),
|
||||
// 微信部门
|
||||
weChatDept: (id: string) => get(`/notifier/wechat/corp/${id}/departments`),
|
||||
// 微信部门人员
|
||||
getWeChatUsers: (configId: string, deptId: string) => get(`/notifier/wechat/corp/${configId}/${deptId}/users`),
|
||||
// 微信已经绑定的人员
|
||||
getWeChatBindUsers: (id: string) => get(`/user/third-party/weixin_corpMessage/${id}`),
|
||||
// 微信绑定用户
|
||||
weChatBindUser: (data: any, id: string) => patch(`/user/third-party/weixin_corpMessage/${id}`, data),
|
||||
// 解绑
|
||||
unBindUser: (data: any, id: string) => post(`/user/third-party/${id}/_unbind`, data)
|
||||
}
|
|
@ -1,4 +1,5 @@
|
|||
import { patch, post, get } from '@/utils/request'
|
||||
import { patch, post, get, remove } from '@/utils/request'
|
||||
import { BindConfig } from '@/views/notice/Template/types'
|
||||
|
||||
export default {
|
||||
// 列表
|
||||
|
@ -8,5 +9,19 @@ export default {
|
|||
// 新增
|
||||
save: (data: any) => post(`/notifier/template`, data),
|
||||
// 修改
|
||||
update: (data: any) => patch(`/notifier/template`, data)
|
||||
update: (data: any) => patch(`/notifier/template`, data),
|
||||
del: (id: any) => remove(`/notifier/template/${id}`),
|
||||
getConfig: (data: any) => post<BindConfig>(`/notifier/config/_query/no-paging?paging=false`, data),
|
||||
getTemplateDetail: (id: string) => get(`/notifier/template/${id}/detail`),
|
||||
debug: (data: any, configId: string, templateId: string) => post(`/notifier/${configId}/${templateId}/_send`, data),
|
||||
getHistory: (data: any, id: string) => post(`/notify/history/template/${id}/_query`, data),
|
||||
// 钉钉/微信, 根据配置获取部门和用户
|
||||
getDept: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/departments`),
|
||||
getUser: (type: string, id: string) => get<any>(`/notifier/${type}/corp/${id}/users`),
|
||||
// 微信获取标签推送
|
||||
getTags: (id: string) => get<any>(`/notifier/wechat/corp/${id}/tags`),
|
||||
// 语音/短信获取阿里云模板
|
||||
getAliTemplate: (id: any) => get(`/notifier/sms/aliyun/${id}/templates`),
|
||||
// 短信获取签名
|
||||
getSigns: (id: any) => get(`/notifier/sms/aliyun/${id}/signs`)
|
||||
}
|
|
@ -0,0 +1,15 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 获取权限列表
|
||||
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);
|
|
@ -27,7 +27,18 @@ const iconKeys = [
|
|||
'SyncOutlined',
|
||||
'ExclamationCircleOutlined',
|
||||
'UploadOutlined',
|
||||
'LoadingOutlined'
|
||||
'LoadingOutlined',
|
||||
'PlusCircleOutlined',
|
||||
'QuestionCircleOutlined',
|
||||
'DisconnectOutlined',
|
||||
'LinkOutlined',
|
||||
'PoweroffOutlined',
|
||||
'SwapOutlined',
|
||||
'BugOutlined',
|
||||
'BarsOutlined',
|
||||
'ArrowDownOutlined',
|
||||
'SmallDashOutlined',
|
||||
'TeamOutlined',
|
||||
]
|
||||
|
||||
const Icon = (props: {type: string}) => {
|
||||
|
|
|
@ -25,6 +25,7 @@ interface IOption {
|
|||
|
||||
type Emits = {
|
||||
(e: 'update:modelValue', data: string): void;
|
||||
(e: 'change') :void
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
|
@ -41,7 +42,10 @@ const props = defineProps({
|
|||
|
||||
const myValue = computed({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val),
|
||||
set: (val) => {
|
||||
emit('update:modelValue', val)
|
||||
emit('change')
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
|
|
|
@ -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 分辨率;
|
||||
|
|
|
@ -109,7 +109,7 @@ const props = defineProps({
|
|||
// 组件类型
|
||||
itemType: {
|
||||
type: String,
|
||||
default: () => 'geoPoint',
|
||||
default: () => 'string',
|
||||
},
|
||||
// 下拉选择框下拉数据
|
||||
options: {
|
||||
|
|
|
@ -109,6 +109,10 @@ export default [
|
|||
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',
|
||||
|
@ -116,9 +120,17 @@ export default [
|
|||
},
|
||||
// 物联卡 iot-card
|
||||
{
|
||||
path: '/iot-card/home',
|
||||
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',
|
||||
|
@ -128,4 +140,10 @@ export default [
|
|||
path: '/northbound/AliCloud',
|
||||
component: () => import('@/views/northbound/AliCloud/index.vue')
|
||||
},
|
||||
|
||||
// 产品分类
|
||||
{
|
||||
path: '/iot/device/Category',
|
||||
component: () => import('@/views/device/Category/index.vue')
|
||||
}
|
||||
]
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
|
@ -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
|
||||
}
|
||||
}
|
||||
})
|
|
@ -6,7 +6,7 @@ import { Terms } from 'components/Search/types'
|
|||
* @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 = {
|
||||
|
@ -57,3 +57,30 @@ export const filterTreeSelectNode = (value: string, treeNode: any, key: string =
|
|||
export const filterSelectNode = (value: string, option: any, key: string = 'label'): boolean => {
|
||||
return option[key]?.includes(value)
|
||||
}
|
||||
|
||||
/**
|
||||
* 时间转换为'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;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
import moment from "moment";
|
||||
import { LocalStore } from "./comm";
|
||||
import { TOKEN_KEY } from "./variable";
|
||||
import {SystemConst} from './consts';
|
||||
|
||||
/**
|
||||
* 把数据下载成JSON
|
||||
|
@ -52,4 +53,23 @@ export const downloadObject = (record: Record<string, any>, fileName: string, fo
|
|||
document.body.appendChild(formElement);
|
||||
formElement.submit();
|
||||
document.body.removeChild(formElement);
|
||||
};
|
||||
};
|
||||
// 是否不是community版本
|
||||
export const isNoCommunity = !(localStorage.getItem(SystemConst.VERSION_CODE) === 'community');
|
||||
|
||||
|
||||
/**
|
||||
* 生成随机数
|
||||
* @param length
|
||||
* @returns
|
||||
*/
|
||||
export const randomString = (length?: number) => {
|
||||
const tempLength = length || 32;
|
||||
const chars = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678';
|
||||
const maxPos = chars.length;
|
||||
let pwd = '';
|
||||
for (let i = 0; i < tempLength; i += 1) {
|
||||
pwd += chars.charAt(Math.floor(Math.random() * maxPos));
|
||||
}
|
||||
return pwd;
|
||||
};
|
||||
|
|
|
@ -0,0 +1,203 @@
|
|||
<!-- 新增编辑弹窗 -->
|
||||
<template>
|
||||
<a-modal
|
||||
:title="props.title"
|
||||
:maskClosable="false"
|
||||
destroy-on-close
|
||||
v-model:visible="visible"
|
||||
@ok="submitData"
|
||||
@cancel="close"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
v-bind="layout"
|
||||
>
|
||||
<a-form
|
||||
layout="vertical"
|
||||
v-model="formModel"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-form-item label="名称" name="name" v-bind="validateInfos.name">
|
||||
<a-input v-model:value="formModel.name" :maxlength="64" />
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="排序"
|
||||
name="sortIndex"
|
||||
v-bind="validateInfos.sortIndex"
|
||||
>
|
||||
<a-input-number
|
||||
style="width: 100%"
|
||||
id="inputNumber"
|
||||
v-model:value="formModel.sortIndex"
|
||||
:min="1"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="formModel.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
</template>
|
||||
<script setup lang="ts" name="modifyModal">
|
||||
import { PropType } from 'vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { ValidateErrorEntity } from 'ant-design-vue/es/form/interface';
|
||||
import { list } from '@/api/iot-card/home';
|
||||
const emits = defineEmits(['refresh']);
|
||||
const formRef = ref();
|
||||
const useForm = Form.useForm;
|
||||
const props = defineProps({
|
||||
formData: {
|
||||
type: Object as PropType<Record<string, any>>,
|
||||
default: () => {},
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
defult: '',
|
||||
},
|
||||
isAdd: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isChild: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
interface formState {
|
||||
name: string;
|
||||
sortIndex: number;
|
||||
description: string;
|
||||
}
|
||||
const listData = ref([]);
|
||||
/**
|
||||
* 表单数据
|
||||
*/
|
||||
const formModel = ref<formState>({
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
});
|
||||
const rules = ref({
|
||||
name: [{ required: true, message: '请输入名称' }],
|
||||
sortIndex: [{ required: true, message: '请输入排序' }],
|
||||
});
|
||||
const visible = ref(false);
|
||||
const { resetFields, validate, validateInfos } = useForm(
|
||||
formModel.value,
|
||||
rules.value,
|
||||
);
|
||||
/**
|
||||
* 提交数据
|
||||
*/
|
||||
const submitData = async () => {
|
||||
validate()
|
||||
.then(async () => {})
|
||||
.catch((error: ValidateErrorEntity<formState>) => {});
|
||||
};
|
||||
/**
|
||||
* 显示弹窗
|
||||
*/
|
||||
const show = (row: any) => {
|
||||
if (props.isAdd === 0) {
|
||||
//新增
|
||||
if (props.isChild) {
|
||||
//存在子类
|
||||
if (row.children && row.children.length > 0) {
|
||||
let childArr = [];
|
||||
childArr = row.children.sort(compare('sortIndex'));
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: childArr[childArr.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
} else {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
};
|
||||
}
|
||||
} else {
|
||||
let arr = [];
|
||||
arr = listData.value.sort(compare('sortIndex'));
|
||||
if (arr.length > 0) {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: arr[arr.length - 1].sortIndex + 1,
|
||||
description: '',
|
||||
};
|
||||
} else {
|
||||
formModel.value = {
|
||||
name: '',
|
||||
sortIndex: 1,
|
||||
description: '',
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
visible.value = true;
|
||||
} else if (props.isAdd === 2) {
|
||||
// 编辑
|
||||
formModel.value = {
|
||||
name: row.name,
|
||||
sortIndex: row.sortIndex,
|
||||
description: row.description,
|
||||
};
|
||||
visible.value = true;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 判断是新增还是编辑
|
||||
*/
|
||||
const judgeIsAdd = () => {};
|
||||
/**
|
||||
* 排序
|
||||
*/
|
||||
const compare = (property: any) => {
|
||||
return function (obj1: any, obj2: any) {
|
||||
var value1 = obj1[property];
|
||||
var value2 = obj2[property];
|
||||
return value1 - value2; // 升序
|
||||
};
|
||||
},
|
||||
/**
|
||||
* 获取列表数据
|
||||
*/
|
||||
getTableData = async () => {
|
||||
const params = {
|
||||
paging: false,
|
||||
sorts: [
|
||||
{ name: 'sortIndex', order: 'asc' },
|
||||
{
|
||||
name: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
};
|
||||
const res = await queryTree(params);
|
||||
if (res.status === 200) {
|
||||
listData.value = res.result;
|
||||
console.log(listData.value, 'listData.value');
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 关闭弹窗
|
||||
*/
|
||||
const close = () => {
|
||||
visible.value = false;
|
||||
resetFields();
|
||||
};
|
||||
getTableData();
|
||||
//监听项目ID
|
||||
watch([() => props.isAdd], () => {}, { immediate: false, deep: true });
|
||||
defineExpose({
|
||||
show: show,
|
||||
});
|
||||
</script>
|
||||
<style></style>
|
|
@ -0,0 +1,221 @@
|
|||
<!--产品分类 -->
|
||||
<template>
|
||||
<a-card class="product-category">
|
||||
<Search :columns="query.columns" target="category" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="queryTree"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-button type="primary" @click="add"
|
||||
><plus-outlined />新增</a-button
|
||||
>
|
||||
</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>
|
||||
<!-- 新增和编辑弹窗 -->
|
||||
<ModifyModal
|
||||
ref="modifyRef"
|
||||
:formData="currentForm"
|
||||
:title="title"
|
||||
:isAdd="isAdd"
|
||||
:isChild="isChild"
|
||||
@refresh="() => modifyRef.value?.reload()"
|
||||
/>
|
||||
</a-card>
|
||||
</template>
|
||||
<script lang="ts" name="Category" setup>
|
||||
import { queryTree, deleteTree } from '@/api/device/category';
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
import ModifyModal from './components/modifyModal/index.vue';
|
||||
import type { TableColumnType, TableProps } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
const tableRef = ref<Record<string, any>>({});
|
||||
const modifyRef = ref();
|
||||
const dataSource = ref([]);
|
||||
const currentForm = ref({});
|
||||
const title = ref('');
|
||||
const isAdd = ref(0);
|
||||
const isChild = ref(false);
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
valueType: 'digit',
|
||||
sorter: true,
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
key: 'description',
|
||||
ellipsis: true,
|
||||
dataIndex: 'description',
|
||||
filters: true,
|
||||
onFilter: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
valueType: 'option',
|
||||
width: 200,
|
||||
fixed: 'right',
|
||||
},
|
||||
],
|
||||
params: {
|
||||
paging: false,
|
||||
sorts: [
|
||||
{ name: 'sortIndex', order: 'asc' },
|
||||
{
|
||||
name: 'createTime',
|
||||
order: 'desc',
|
||||
},
|
||||
],
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 操作栏按钮
|
||||
*/
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
type: 'table',
|
||||
): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
const actions = [
|
||||
{
|
||||
key: 'edit',
|
||||
text: '编辑',
|
||||
tooltip: {
|
||||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: async () => {
|
||||
title.value = '编辑分类';
|
||||
isAdd.value = 2;
|
||||
currentForm.value = data;
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(data);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'add',
|
||||
text: '添加子分类',
|
||||
tooltip: {
|
||||
title: '添加子分类',
|
||||
},
|
||||
icon: 'PlusCircleOutlined',
|
||||
onClick: () => {
|
||||
title.value = '新增子分类';
|
||||
isAdd.value = 0;
|
||||
isChild.value = true;
|
||||
currentForm.value = {};
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(data);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
okText: ' 确定',
|
||||
cancelText: '取消',
|
||||
onConfirm: async () => {
|
||||
const resp = await deleteTree(data.id);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
tableRef.value?.reload();
|
||||
} else {
|
||||
message.error('操作失败!');
|
||||
}
|
||||
},
|
||||
},
|
||||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
return actions;
|
||||
};
|
||||
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{ title: '名称', dataIndex: 'name', key: 'name' },
|
||||
{
|
||||
title: '排序',
|
||||
dataIndex: 'sortIndex',
|
||||
key: 'sortIndex',
|
||||
},
|
||||
{
|
||||
title: '说明',
|
||||
dataIndex: 'describe',
|
||||
key: 'describe',
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
width: 250,
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
/**
|
||||
* 添加产品分类
|
||||
*/
|
||||
add: async () => {
|
||||
title.value = '新增分类';
|
||||
isAdd.value = 0;
|
||||
isChild.value = false;
|
||||
nextTick(() => {
|
||||
modifyRef.value.show(currentForm.value);
|
||||
});
|
||||
},
|
||||
});
|
||||
const { add, columns } = toRefs(table);
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
</script>
|
||||
<style scoped lang="less"></style>
|
|
@ -0,0 +1,10 @@
|
|||
export type CategoryItem = {
|
||||
id: string;
|
||||
name: string;
|
||||
level: number;
|
||||
key: string;
|
||||
parentId: string;
|
||||
path: string;
|
||||
sortIndex: number;
|
||||
children?: Category[];
|
||||
};
|
|
@ -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>
|
|
@ -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;
|
|
@ -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>
|
|
@ -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('导入成功')
|
||||
}
|
||||
}
|
||||
|
|
|
@ -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 || '{}'));
|
||||
}
|
||||
};
|
|
@ -7,37 +7,47 @@
|
|||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '1' }"
|
||||
@click="selectId = '1'"
|
||||
:class="{ selected: selectValue === 'device' }"
|
||||
@click="selectValue = 'device'"
|
||||
>
|
||||
<img src="/images/home/device.png" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '2' }"
|
||||
@click="selectId = '2'"
|
||||
:class="{ selected: selectValue === 'ops' }"
|
||||
@click="selectValue = 'ops'"
|
||||
>
|
||||
<img src="/images/home/ops.png" alt="" />
|
||||
</a-col>
|
||||
<a-col
|
||||
:span="8"
|
||||
class="select-item"
|
||||
:class="{ selected: selectId === '3' }"
|
||||
@click="selectId = '3'"
|
||||
:class="{ selected: selectValue === 'comprehensive' }"
|
||||
@click="selectValue = 'comprehensive'"
|
||||
>
|
||||
<img src="/images/home/comprehensive.png" alt="" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-button type="primary" class="btn" @click="confirm">确定</a-button>
|
||||
<a-button type="primary" class="btn" @click="confirm"
|
||||
>确定</a-button
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
const selectId = ref('1');
|
||||
import { setView_api } from '@/api/home';
|
||||
|
||||
const confirm = ()=>{}
|
||||
const emits = defineEmits(['refresh']);
|
||||
const selectValue = ref('device');
|
||||
|
||||
const confirm = () => {
|
||||
setView_api({
|
||||
name: 'view',
|
||||
content: selectValue.value,
|
||||
}).then(() => emits('refresh'));
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -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>
|
|
@ -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 => {
|
||||
|
|
|
@ -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>
|
|
@ -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>
|
|
@ -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) => {
|
|
@ -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,
|
||||
|
|
|
@ -2,11 +2,11 @@
|
|||
<div class="container">
|
||||
<div class="header"></div>
|
||||
<div class="left"></div>
|
||||
<div class="content iot-home-container">
|
||||
<!-- <InitHome /> -->
|
||||
<!-- <DeviceHome /> -->
|
||||
<!-- <DevOpsHome /> -->
|
||||
<ComprehensiveHome />
|
||||
<div class="content iot-home-container" v-loading="loading">
|
||||
<InitHome v-if="currentView === 'init'" @refresh="setCurrentView" />
|
||||
<DeviceHome v-else-if="currentView === 'device'" />
|
||||
<DevOpsHome v-else-if="currentView === 'ops'" />
|
||||
<ComprehensiveHome v-else-if="currentView === 'comprehensive'" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
@ -17,6 +17,39 @@ import DeviceHome from './components/DeviceHome/index.vue';
|
|||
import DevOpsHome from './components/DevOpsHome/index.vue';
|
||||
import ComprehensiveHome from './components/ComprehensiveHome/index.vue';
|
||||
|
||||
import { isNoCommunity } from '@/utils/utils';
|
||||
import { getMe_api, getView_api } from '@/api/home';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const currentView = ref<string>('');
|
||||
const loading = ref<boolean>(true);
|
||||
|
||||
// 获取选择的视图
|
||||
const setCurrentView = () => {
|
||||
getView_api().then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
if (resp.result) currentView.value = resp.result?.content;
|
||||
else if (resp.result.username === 'admin') {
|
||||
currentView.value = 'comprehensive';
|
||||
} else currentView.value = 'init';
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
if (isNoCommunity) {
|
||||
// 判断是否是api用户 是则跳转 否则获取选中的视图
|
||||
getMe_api().then((resp: any) => {
|
||||
if (resp && resp.status === 200) {
|
||||
const isApiUser = resp.result.dimensions.find(
|
||||
(item: any) =>
|
||||
item.type === 'api-client' || item.type.id === 'api-client',
|
||||
);
|
||||
|
||||
isApiUser ? router.push('/system/api') : setCurrentView();
|
||||
}
|
||||
});
|
||||
}else setCurrentView()
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -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',
|
||||
}
|
||||
|
|
|
@ -117,7 +117,7 @@
|
|||
<a-upload
|
||||
name="file"
|
||||
:action="
|
||||
action
|
||||
FILE_UPLOAD
|
||||
"
|
||||
:headers="
|
||||
headers
|
||||
|
@ -259,7 +259,7 @@
|
|||
<a-upload
|
||||
name="file"
|
||||
:action="
|
||||
action
|
||||
FILE_UPLOAD
|
||||
"
|
||||
:headers="
|
||||
headers
|
||||
|
@ -354,7 +354,9 @@
|
|||
>
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="action"
|
||||
:action="
|
||||
FILE_UPLOAD
|
||||
"
|
||||
:headers="headers"
|
||||
:beforeUpload="
|
||||
beforeBackUpload
|
||||
|
@ -773,6 +775,7 @@ import {
|
|||
saveInit,
|
||||
} from '@/api/initHome';
|
||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { Form } from 'ant-design-vue';
|
||||
|
@ -899,7 +902,7 @@ const activeKey = ref<string>('1');
|
|||
const spinning = ref<boolean>(false);
|
||||
const visible = ref<boolean>(false);
|
||||
const flag = ref<boolean>(false);
|
||||
const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||
// const action = ref<string>(`${BASE_API_PATH}/file/static`);
|
||||
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
||||
/**
|
||||
* 角色勾选数据
|
||||
|
|
|
@ -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>
|
|
@ -0,0 +1,323 @@
|
|||
<!-- 物联卡-仪表盘 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<a-card>
|
||||
<a-row :gutter="20" :style="{ marginBottom: '20px' }">
|
||||
<a-col :span="24"><Guide title="数据统计" /></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">昨日流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ dayTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ dayTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart color="#FBA500" :chartData="dayOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">当月流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ monthTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ monthTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart :chartData="monthOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="data-statistics-item">
|
||||
<div class="info" style="width: 100%">
|
||||
<div class="label">本年流量消耗</div>
|
||||
<a-tooltip placement="bottomLeft">
|
||||
<template #title>
|
||||
<span>{{ yearTotal }} M</span>
|
||||
</template>
|
||||
<div class="value">
|
||||
{{ yearTotal }}
|
||||
<span class="unit">M</span>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<LineChart color="#58E1D3" :chartData="yearOptions" />
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="16">
|
||||
<Guide title="流量统计">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<LineChart
|
||||
:showX="true"
|
||||
:showY="true"
|
||||
style="min-height: 450px"
|
||||
:chartData="yearOptions"
|
||||
/>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<Guide title="流量使用TOP10">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<div class="rankingList" style="height: 400px">
|
||||
<div
|
||||
v-for="(item, index) in topList"
|
||||
:key="item.cardNum"
|
||||
class="rankItem"
|
||||
>
|
||||
<div
|
||||
class="number"
|
||||
:class="`number-item-${index + 1}`"
|
||||
>
|
||||
{{ index + 1 }}
|
||||
</div>
|
||||
<div class="cardNum">{{ item.cardNum }}</div>
|
||||
<div class="progress">
|
||||
<a-progress
|
||||
:strokeColor="'#ADC6FF'"
|
||||
:trailColor="'#E0E4E8'"
|
||||
:strokeLinecap="'butt'"
|
||||
:showInfo="false"
|
||||
:percent="
|
||||
Math.ceil((item.value / topTotal) * 100)
|
||||
"
|
||||
></a-progress>
|
||||
</div>
|
||||
<div class="total">
|
||||
{{ item?.value?.toFixed(2) }} M
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import Guide from '../components/Guide.vue';
|
||||
import LineChart from '../components/LineChart.vue';
|
||||
import moment from 'moment';
|
||||
import { queryFlow } from '@/api/iot-card/home';
|
||||
|
||||
const dayTotal = ref(0);
|
||||
const monthTotal = ref(0);
|
||||
const yearTotal = ref(0);
|
||||
const dayOptions = ref<any[]>([]);
|
||||
const monthOptions = ref<any[]>([]);
|
||||
const yearOptions = ref<any[]>([]);
|
||||
|
||||
const flowData = ref<any[]>([]);
|
||||
const topList = ref<any[]>([]);
|
||||
const topTotal = ref(0);
|
||||
|
||||
const getData = (
|
||||
start: number,
|
||||
end: number,
|
||||
): Promise<{ sortArray: any[]; data: any[] }> => {
|
||||
return new Promise((resolve) => {
|
||||
queryFlow(start, end, {
|
||||
orderBy: 'date',
|
||||
}).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
const sortArray = resp.result.sort(
|
||||
(a: any, b: any) =>
|
||||
new Date(a.date).getTime() - new Date(b.date).getTime(),
|
||||
);
|
||||
resolve({
|
||||
sortArray,
|
||||
data: sortArray.map(
|
||||
(item: any) => item.value && item.value.toFixed(2),
|
||||
),
|
||||
});
|
||||
}
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 查询今日、当月、本年数据
|
||||
*/
|
||||
const getDataTotal = () => {
|
||||
const dTime = [
|
||||
moment(new Date()).startOf('day').valueOf(),
|
||||
moment(new Date()).endOf('day').valueOf(),
|
||||
];
|
||||
const mTime = [
|
||||
moment().startOf('month').valueOf(),
|
||||
moment().endOf('month').valueOf(),
|
||||
];
|
||||
const yTime = [
|
||||
moment().startOf('year').valueOf(),
|
||||
moment().endOf('year').valueOf(),
|
||||
];
|
||||
getData(dTime[0], dTime[1]).then((resp) => {
|
||||
dayTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
dayOptions.value = resp.sortArray;
|
||||
});
|
||||
getData(mTime[0], mTime[1]).then((resp) => {
|
||||
monthTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
monthOptions.value = resp.sortArray;
|
||||
});
|
||||
getData(yTime[0], yTime[1]).then((resp) => {
|
||||
yearTotal.value = resp.data
|
||||
.reduce((r, n) => r + Number(n), 0)
|
||||
.toFixed(2);
|
||||
yearOptions.value = resp.sortArray;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 流量统计
|
||||
* @param data
|
||||
*/
|
||||
const getEcharts = (data: any) => {
|
||||
console.log(data);
|
||||
let startTime = data.time.start;
|
||||
let endTime = data.time.end;
|
||||
if (data.time.type === 'week' || data.time.type === 'month') {
|
||||
startTime = moment(data.time.start).startOf('days').valueOf();
|
||||
endTime = moment(data.time.end).startOf('days').valueOf();
|
||||
}
|
||||
getData(startTime, endTime).then((resp) => {
|
||||
flowData.value = resp.sortArray;
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 流量使用TOP10
|
||||
* @param star 开始时间
|
||||
* @param end 结束时间
|
||||
*/
|
||||
const getTopRang = (star: number, end: number) => {
|
||||
queryFlow(star, end, { orderBy: 'usage' }).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
const arr = resp.result
|
||||
.slice(0, 10)
|
||||
.sort((a: any, b: any) => b.value - a.value);
|
||||
topTotal.value = arr.length ? arr[0].value : 0;
|
||||
topList.value = arr;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
getDataTotal();
|
||||
|
||||
// getEcharts(data);
|
||||
|
||||
const dTime = [
|
||||
moment().subtract(6, 'days').startOf('day').valueOf(),
|
||||
moment().endOf('day').valueOf(),
|
||||
];
|
||||
getTopRang(dTime[0], dTime[1]);
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.page-container {
|
||||
.data-statistics-item {
|
||||
height: 140px;
|
||||
background: #fcfcfc;
|
||||
border: 1px solid #e0e4e8;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 20px;
|
||||
|
||||
.info {
|
||||
// width: 180px;
|
||||
width: 28%;
|
||||
.label {
|
||||
font-size: 14px;
|
||||
color: rgba(0, 0, 0, 0.64);
|
||||
}
|
||||
.value {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
.unit {
|
||||
font-size: 20px;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.rankingList {
|
||||
padding: 0;
|
||||
overflow-y: auto;
|
||||
list-style: none;
|
||||
|
||||
.rankItem {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
min-width: 0;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.number {
|
||||
flex: 0 0 24px;
|
||||
height: 24px;
|
||||
color: #fff;
|
||||
font-weight: bold;
|
||||
line-height: 24px;
|
||||
text-align: center;
|
||||
background-color: #d1d1d1;
|
||||
}
|
||||
|
||||
.number-item-1 {
|
||||
color: #e50012;
|
||||
background-color: rgba(#e50012, 0.1);
|
||||
}
|
||||
|
||||
.number-item-2 {
|
||||
color: #fba500;
|
||||
background-color: rgba(#fba500, 0.1);
|
||||
}
|
||||
|
||||
.number-item-3 {
|
||||
color: #597ef7;
|
||||
background-color: rgba(#597ef7, 0.1);
|
||||
}
|
||||
|
||||
.cardNum {
|
||||
flex: 0 0 100px;
|
||||
margin-left: 16px;
|
||||
}
|
||||
|
||||
.progress {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 8px;
|
||||
|
||||
:deep(.ant-progress-inner) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
:deep(.ant-progress-bg) {
|
||||
border-radius: 0px;
|
||||
}
|
||||
}
|
||||
|
||||
.total {
|
||||
flex: 0 0 80px;
|
||||
color: #999;
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,136 @@
|
|||
<template>
|
||||
<div class="chart" ref="chart"></div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import * as echarts from 'echarts';
|
||||
|
||||
const { proxy } = <any>getCurrentInstance();
|
||||
|
||||
const props = defineProps({
|
||||
// 图表颜色
|
||||
color: {
|
||||
type: String,
|
||||
default: '#498BEF',
|
||||
},
|
||||
// 是否展示x轴
|
||||
showX: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 是否展示y轴
|
||||
showY: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
// 图表数据
|
||||
chartData: {
|
||||
type: Array,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
/**
|
||||
* 绘制图表
|
||||
*/
|
||||
const createChart = () => {
|
||||
nextTick(() => {
|
||||
const myChart = echarts.init(proxy.$refs.chart);
|
||||
|
||||
const options = {
|
||||
grid: {
|
||||
left: '7%',
|
||||
right: '5%',
|
||||
top: '5%',
|
||||
bottom: '5%',
|
||||
},
|
||||
tooltip: {
|
||||
trigger: 'axis',
|
||||
// formatter: '{a}<br>{b}: {c}',
|
||||
axisPointer: {
|
||||
type: 'shadow',
|
||||
},
|
||||
},
|
||||
xAxis: [
|
||||
{
|
||||
show: props.showX,
|
||||
boundaryGap: false,
|
||||
data: props.chartData.map((m: any) => m.date),
|
||||
},
|
||||
],
|
||||
yAxis: [
|
||||
{
|
||||
show: props.showY,
|
||||
axisTick: {
|
||||
show: false,
|
||||
},
|
||||
axisLine: {
|
||||
show: false,
|
||||
},
|
||||
splitLine: {
|
||||
lineStyle: {
|
||||
type: 'dotted',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
series: [
|
||||
{
|
||||
name: '流量消耗',
|
||||
type: 'line',
|
||||
symbol: 'circle',
|
||||
showSymbol: false,
|
||||
smooth: true,
|
||||
itemStyle: {
|
||||
normal: {
|
||||
color: props.color,
|
||||
lineStyle: {
|
||||
color: props.color,
|
||||
width: 1,
|
||||
},
|
||||
areaStyle: {
|
||||
color: new echarts.graphic.LinearGradient(
|
||||
0,
|
||||
1,
|
||||
0,
|
||||
0,
|
||||
[
|
||||
{
|
||||
offset: 0.1,
|
||||
color: '#fff',
|
||||
},
|
||||
{
|
||||
offset: 1,
|
||||
color: props.color,
|
||||
},
|
||||
],
|
||||
),
|
||||
},
|
||||
},
|
||||
},
|
||||
data: props.chartData.map(
|
||||
(m: any) => m.value && m.value.toFixed(2),
|
||||
),
|
||||
},
|
||||
],
|
||||
};
|
||||
myChart.setOption(options);
|
||||
window.addEventListener('resize', function () {
|
||||
myChart.resize();
|
||||
});
|
||||
});
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.chartData,
|
||||
() => createChart(),
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.chart {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
|
@ -16,6 +16,12 @@
|
|||
/>
|
||||
<Media v-if="showType === 'media'" :provider="provider" />
|
||||
<Channel v-if="showType === 'channel'" :provider="provider" />
|
||||
<Edge v-if="showType === 'edge'" :provider="provider" />
|
||||
<Cloud
|
||||
v-if="showType === 'cloud'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
|
@ -28,6 +34,8 @@ import Provider from '../components/Provider/index.vue';
|
|||
import { getProviders, detail } from '@/api/link/accessConfig';
|
||||
import Media from '../components/Media/index.vue';
|
||||
import Channel from '../components/Channel/index.vue';
|
||||
import Edge from '../components/Edge/index.vue';
|
||||
import Cloud from '../components/Cloud/index.vue';
|
||||
|
||||
// const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
|
|
@ -82,10 +82,11 @@
|
|||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessMedia">
|
||||
<script lang="ts" setup name="AccessChannel">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { update, save } from '@/api/link/accessConfig';
|
||||
import { ProtocolMapping } from '../../Detail/data';
|
||||
|
||||
interface FormState {
|
||||
name: string;
|
||||
|
@ -113,7 +114,7 @@ const onFinish = async (values: any) => {
|
|||
...values,
|
||||
provider: providerId,
|
||||
protocol: providerId,
|
||||
transport: providerId === 'modbus-tcp' ? 'MODBUS_TCP' : 'OPC_UA',
|
||||
transport: ProtocolMapping.get(providerId),
|
||||
channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
|
||||
};
|
||||
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
||||
|
@ -145,8 +146,8 @@ const onFinish = async (values: any) => {
|
|||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
background: rgba(0, 0, 0, 0.04);
|
||||
// color: rgba(0, 0, 0, 0.8);
|
||||
// background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.config-right-item {
|
||||
margin-bottom: 10px;
|
||||
|
|
|
@ -0,0 +1,624 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<a-steps class="steps-steps" :current="stepCurrent">
|
||||
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||
</a-steps>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
通过CTWing平台的HTTP推送服务进行数据接入
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="16">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef1"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="接口地址"
|
||||
name="apiAddress"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
disabled
|
||||
v-model:value="
|
||||
formState.apiAddress
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="appKey"
|
||||
name="appKey"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入appKey',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formState.appKey"
|
||||
placeholder="请输入appKey"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
label="appSecret"
|
||||
name="appSecret"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入appSecret',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formState.appSecret
|
||||
"
|
||||
placeholder="请输入appSecret"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12"> </a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
>
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="
|
||||
formState.description
|
||||
"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row> </a-form
|
||||
></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="doc">
|
||||
<h1>操作指引:</h1>
|
||||
<div>
|
||||
1、CTWing端创建产品、设备,以及一个第三方应用
|
||||
</div>
|
||||
<div>
|
||||
2、CTWing端配置产品/设备/分组级订阅,订阅方URL地址请填写:
|
||||
<div style="word-wrap: break-word">
|
||||
{{
|
||||
`${origin}/api/ctwing/${randomString()}/notify`
|
||||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img1" />
|
||||
</div>
|
||||
<div>
|
||||
3、IOT端创建类型为CTWing的设备接入网关
|
||||
</div>
|
||||
<div>
|
||||
4、IOT端创建产品,选中接入方式为CTWing,填写CTWing平台中的产品ID、Master-APIkey。
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img2" />
|
||||
</div>
|
||||
<div>
|
||||
5、IOT端添加设备,为每一台设备设置唯一的IMEI(需与CTWing平台中填写的值一致)
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img3" />
|
||||
</div>
|
||||
<h1>设备接入网关配置说明</h1>
|
||||
<div>
|
||||
1.请将CTWing的AEP平台-应用管理中的App
|
||||
Key和App Secret复制到当前页面
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img4" />
|
||||
</div>
|
||||
<h1>其他说明</h1>
|
||||
<div>
|
||||
1.在IOT端启用设备时,若CTWing平台没有与之对应的设备,则将在CTWing端自动创建新设备
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 1">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
只能选择HTTP通信方式的协议
|
||||
</div>
|
||||
<div class="search">
|
||||
<a-input-search
|
||||
allowClear
|
||||
placeholder="请输入"
|
||||
style="width: 300px"
|
||||
@search="procotolSearch"
|
||||
/>
|
||||
<a-button type="primary" @click="addProcotol"
|
||||
>新增</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
@checkedChange="procotolChange"
|
||||
:checked="procotolCurrent"
|
||||
:data="item"
|
||||
>
|
||||
</access-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="current === 2" class="card-last">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="form"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
ref="formRef2"
|
||||
>
|
||||
<a-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="config-right">
|
||||
<div class="config-right-item">
|
||||
<title-component data="配置概览" />
|
||||
<div class="config-right-item-context">
|
||||
接入方式:{{ provider.name }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
{{ provider.description }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
消息协议:{{ procotolCurrent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<title-component data="设备接入指引" />
|
||||
<div class="config-right-item-context">
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
2、创建产品,并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
3、添加设备,为每一台设备设置唯一的IMEI、IMSI码(需与OneNet平台中填写的值一致,若OneNet平台没有对应的设备,将会通过OneNet平台提供的LWM2M协议自动创建)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
|
||||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessCloudCtwing">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||
import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
import AccessCard from '../AccessCard/index.vue';
|
||||
import { randomString } from '@/utils/utils';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
const origin = window.location.origin;
|
||||
const img1 = getImage('/network/01.png');
|
||||
const img2 = getImage('/network/02.jpg');
|
||||
const img3 = getImage('/network/03.png');
|
||||
const img4 = getImage('/network/04.jpg');
|
||||
|
||||
//测试数据1{
|
||||
const resultList1 = [
|
||||
{
|
||||
id: '1612354213444087808',
|
||||
name: '大华烟感协议',
|
||||
},
|
||||
{
|
||||
id: '1610475299002855424',
|
||||
name: '宇视摄像头协议',
|
||||
},
|
||||
{
|
||||
id: '1610466717670780928',
|
||||
name: '官方协议',
|
||||
},
|
||||
{
|
||||
id: '1610205217785524224',
|
||||
name: 'demo协议',
|
||||
},
|
||||
{
|
||||
id: '1610204985806958592',
|
||||
name: '水压协议',
|
||||
},
|
||||
{
|
||||
id: '1605459961693745152',
|
||||
name: '测试设备诊断日志显示',
|
||||
},
|
||||
{
|
||||
id: '1582302200020783104',
|
||||
name: 'demo',
|
||||
},
|
||||
{
|
||||
id: '1581839391887794176',
|
||||
name: '海康闸机协议',
|
||||
},
|
||||
{
|
||||
id: '1567062365030637568',
|
||||
name: '协议20220906160914',
|
||||
},
|
||||
{
|
||||
id: '1561650927208628224',
|
||||
name: 'local',
|
||||
},
|
||||
{
|
||||
id: '1552881998413754368',
|
||||
name: '官方协议V3-支持固件升级3',
|
||||
},
|
||||
{
|
||||
id: '2b283b28a16d61e5fc2bdf39ceff34f8',
|
||||
name: 'JetLinks官方协议',
|
||||
description: 'JetLinks官方协议包',
|
||||
},
|
||||
{
|
||||
id: '1551510679466844160',
|
||||
name: '官方协议3.1',
|
||||
},
|
||||
{
|
||||
id: '1551509716811161600',
|
||||
name: '官方协议3.0',
|
||||
},
|
||||
];
|
||||
|
||||
interface FormState {
|
||||
apiAddress: string;
|
||||
appKey: string;
|
||||
appSecret: string;
|
||||
description: string;
|
||||
}
|
||||
interface Form {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = ref(props.provider.channel);
|
||||
const formRef1 = ref<FormInstance>();
|
||||
const formRef2 = ref<FormInstance>();
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
apiAddress: 'https://ag-api.ctwing.cn/',
|
||||
appKey: '',
|
||||
appSecret: '',
|
||||
description: '',
|
||||
});
|
||||
const form = reactive<Form>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const current = ref(0);
|
||||
const stepCurrent = ref(0);
|
||||
const steps = ref(['接入配置', '消息协议', '完成']);
|
||||
const procotolList = ref([]);
|
||||
const allProcotolList = ref([]);
|
||||
const procotolCurrent = ref('');
|
||||
|
||||
const procotolChange = (id: string) => {
|
||||
if (!props.data?.id) {
|
||||
procotolCurrent.value = id;
|
||||
}
|
||||
};
|
||||
|
||||
const procotolSearch = (value: string) => {
|
||||
if (value) {
|
||||
const list = allProcotolList.value.filter((i) => {
|
||||
return (
|
||||
i.name &&
|
||||
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||
);
|
||||
});
|
||||
procotolList.value = list;
|
||||
} else {
|
||||
procotolList.value = allProcotolList.value;
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const data: any = await formRef2.value?.validate();
|
||||
const params = {
|
||||
...data,
|
||||
configuration: {
|
||||
...formState,
|
||||
protocol: procotolCurrent.value,
|
||||
},
|
||||
protocol: procotolCurrent.value,
|
||||
provider: props.provider.id,
|
||||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
props.data && props.data.id
|
||||
? await update({
|
||||
...props.data,
|
||||
...params,
|
||||
})
|
||||
: await save(params);
|
||||
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
// 回到列表页面
|
||||
// if (window.onTabSaveSuccess) {
|
||||
// window.onTabSaveSuccess(resp);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||
// }
|
||||
history.back();
|
||||
}
|
||||
// onFinish(data);
|
||||
};
|
||||
|
||||
const queryProcotolList = async (id: string, params = {}) => {
|
||||
// const resp = await getProtocolList(ProtocolMapping.get(id), {
|
||||
// ...params,
|
||||
// 'sorts[0].name': 'createTime',
|
||||
// 'sorts[0].order': 'desc',
|
||||
// });
|
||||
// if (resp.status === 200) {
|
||||
// procotolList.value = resp.result;
|
||||
// allProcotolList.value = resp.result;
|
||||
// }
|
||||
|
||||
//使用测试数据1
|
||||
procotolList.value = resultList1;
|
||||
allProcotolList.value = resultList1;
|
||||
};
|
||||
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
tab.onTabSaveSuccess = (value) => {
|
||||
if (value.success) {
|
||||
procotolCurrent.value = value.result?.id;
|
||||
queryProcotolList(props.provider?.id);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const next = async () => {
|
||||
if (current.value === 0) {
|
||||
let data1: any = await formRef1.value?.validate();
|
||||
queryProcotolList(props.provider.id);
|
||||
current.value = current.value + 1;
|
||||
} else if (current.value === 1) {
|
||||
if (!procotolCurrent.value) {
|
||||
message.error('请选择消息协议!');
|
||||
} else {
|
||||
current.value = current.value + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
const prev = () => {
|
||||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
stepCurrent.value = v;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
.card-item {
|
||||
padding-right: 5px;
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
line-height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
// color: rgba(0, 0, 0, 0.8);
|
||||
// background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.config-right-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.config-right-item-title {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.config-right-item-context {
|
||||
margin: 5px 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 550px;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,736 @@
|
|||
<template>
|
||||
<div class="container">
|
||||
<a-steps class="steps-steps" :current="stepCurrent">
|
||||
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||
</a-steps>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
通过OneNet平台的HTTP推送服务进行数据接入
|
||||
</div>
|
||||
<div style="margin-top: 15px">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="16">
|
||||
<a-form
|
||||
:model="formState"
|
||||
ref="formRef1"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
name="apiAddress"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
接口地址
|
||||
<span
|
||||
class="form-label-required"
|
||||
>*</span
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
同步物联网平台设备数据到OneNet
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
disabled
|
||||
v-model:value="
|
||||
formState.apiAddress
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="apiKey"
|
||||
name="apiKey"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入apiKey',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="formState.apiKey"
|
||||
placeholder="请输入apiKey"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
name="validateToken"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入通知Token',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
通知Token
|
||||
<span
|
||||
class="form-label-required"
|
||||
>*</span
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
接收OneNet推送的Token地址
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formState.validateToken
|
||||
"
|
||||
placeholder="请输入通知Token"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item
|
||||
name="aesKey"
|
||||
:rules="[
|
||||
{
|
||||
max: 64,
|
||||
message:
|
||||
'最多可输入64个字符',
|
||||
},
|
||||
]"
|
||||
>
|
||||
<div class="form-label">
|
||||
aesKey
|
||||
<a-tooltip>
|
||||
<template #title>
|
||||
<p>
|
||||
OneNet
|
||||
端生成的消息加密key
|
||||
</p>
|
||||
</template>
|
||||
<question-circle-outlined />
|
||||
</a-tooltip>
|
||||
</div>
|
||||
<a-input
|
||||
v-model:value="formState.aesKey"
|
||||
placeholder="请输入aesKey"
|
||||
/> </a-form-item
|
||||
></a-col>
|
||||
</a-row>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-form-item
|
||||
label="说明"
|
||||
name="description"
|
||||
>
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="
|
||||
formState.description
|
||||
"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row> </a-form
|
||||
></a-col>
|
||||
<a-col :span="8">
|
||||
<div class="doc">
|
||||
<h1>操作指引:</h1>
|
||||
<div>
|
||||
1、OneNet端创建产品、设备,并配置HTTP推送
|
||||
</div>
|
||||
<div>
|
||||
2、IOT端创建类型为OneNet的设备接入网关
|
||||
</div>
|
||||
<div>
|
||||
3、IOT端创建产品,选中接入方式为OneNet类型的设备接入网关,填写Master-APIkey(OneNet端的产品Key)
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img5" />
|
||||
</div>
|
||||
<div>
|
||||
4、IOT端添加设备,在设备实例页面为每一台设备设置唯一的IMEI、IMSI码(需与OneNet平台中的值一致)
|
||||
</div>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img6" />
|
||||
</div>
|
||||
<h1>HTTP推送配置说明</h1>
|
||||
<div class="image">
|
||||
<a-image width="100%" :src="img" />
|
||||
</div>
|
||||
<div>
|
||||
HTTP推送配置路径:应用开发>数据推送
|
||||
</div>
|
||||
<a-descriptions
|
||||
bordered
|
||||
size="small"
|
||||
:column="1"
|
||||
:labelStyle="{ width: '100px' }"
|
||||
>
|
||||
<a-descriptions-item label="参数"
|
||||
>说明</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="实例名称"
|
||||
>推送实例的名称</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="推送地址">
|
||||
用于接收OneNet推送设备数据的地址物联网平台地址:
|
||||
<div style="word-wrap: break-word">
|
||||
{{
|
||||
`${origin}/api/one-net/${randomString()}/notify`
|
||||
}}
|
||||
</div>
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="Token">
|
||||
自定义token,可用于验证请求是否来自OneNet
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="消息加密">
|
||||
采用AES加密算法对推送的数据进行数据加密,AesKey为加密秘钥
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
|
||||
<h1>设备接入网关配置说明</h1>
|
||||
<a-descriptions
|
||||
bordered
|
||||
size="small"
|
||||
:column="1"
|
||||
:labelStyle="{ width: '100px' }"
|
||||
>
|
||||
<a-descriptions-item label="参数"
|
||||
>说明</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="apiKey"
|
||||
>OneNet平台中具体产品的Key</a-descriptions-item
|
||||
>
|
||||
<a-descriptions-item label="通知Token">
|
||||
填写OneNet数据推送配置中设置的Token
|
||||
</a-descriptions-item>
|
||||
<a-descriptions-item label="aesKey">
|
||||
若OneNet数据推送配置了消息加密,此处填写OneNet端数据推送配置中设置的aesKey
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<h1>其他说明</h1>
|
||||
<div>
|
||||
1.在IOT端启用设备时,若OneNet平台没有与之对应的设备,则将在OneNet端自动创建新设备
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 1">
|
||||
<div class="alert">
|
||||
<info-circle-outlined />
|
||||
只能选择HTTP通信方式的协议
|
||||
</div>
|
||||
<div class="search">
|
||||
<a-input-search
|
||||
allowClear
|
||||
placeholder="请输入"
|
||||
style="width: 300px"
|
||||
@search="procotolSearch"
|
||||
/>
|
||||
<a-button type="primary" @click="addProcotol"
|
||||
>新增</a-button
|
||||
>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<a-row :gutter="[24, 24]" v-if="procotolList.length > 0">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in procotolList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
@checkedChange="procotolChange"
|
||||
:checked="procotolCurrent"
|
||||
:data="item"
|
||||
>
|
||||
</access-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="current === 2" class="card-last">
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="form"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
ref="formRef2"
|
||||
>
|
||||
<a-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="form.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="form.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
<!-- <a-form-item>
|
||||
<a-button
|
||||
v-if="current !== 1"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item> -->
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="config-right">
|
||||
<div class="config-right-item">
|
||||
<title-component data="配置概览" />
|
||||
<div class="config-right-item-context">
|
||||
接入方式:{{ provider.name }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
{{ provider.description }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
消息协议:{{ procotolCurrent }}
|
||||
</div>
|
||||
</div>
|
||||
<div class="config-right-item">
|
||||
<title-component data="设备接入指引" />
|
||||
<div class="config-right-item-context">
|
||||
1、创建类型为{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing'
|
||||
}}的设备接入网关
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
2、创建产品,并选中接入方式为
|
||||
{{
|
||||
props?.provider?.id === 'OneNet'
|
||||
? 'OneNet'
|
||||
: 'CTWing,选中后需填写CTWing平台中的产品ID、Master-APIkey。'
|
||||
}}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
3、添加设备,为每一台设备设置唯一的IMEI、SN、IMSI、PSK码(需与CTWingt平台中填写的值一致,若CTWing平台没有对应的设备,将会通过CTWing平台提供的LWM2M协议自动创建)
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div :class="current !== 2 ? 'steps-action' : 'steps-action-save'">
|
||||
<a-button
|
||||
v-if="[0, 1].includes(current)"
|
||||
type="primary"
|
||||
@click="next"
|
||||
>
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 2" type="primary" @click="saveData">
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessCloudOneNet">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||
import { ProtocolMapping, NetworkTypeMapping } from '../../Detail/data';
|
||||
import {
|
||||
InfoCircleOutlined,
|
||||
QuestionCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import AccessCard from '../AccessCard/index.vue';
|
||||
import { randomString } from '@/utils/utils';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
const origin = window.location.origin;
|
||||
const img5 = getImage('/network/05.jpg');
|
||||
const img6 = getImage('/network/06.jpg');
|
||||
const img = getImage('/network/OneNet.jpg');
|
||||
|
||||
//测试数据1{
|
||||
const resultList1 = [
|
||||
{
|
||||
id: '1612354213444087808',
|
||||
name: '大华烟感协议',
|
||||
},
|
||||
{
|
||||
id: '1610475299002855424',
|
||||
name: '宇视摄像头协议',
|
||||
},
|
||||
{
|
||||
id: '1610466717670780928',
|
||||
name: '官方协议',
|
||||
},
|
||||
{
|
||||
id: '1610205217785524224',
|
||||
name: 'demo协议',
|
||||
},
|
||||
{
|
||||
id: '1610204985806958592',
|
||||
name: '水压协议',
|
||||
},
|
||||
{
|
||||
id: '1605459961693745152',
|
||||
name: '测试设备诊断日志显示',
|
||||
},
|
||||
{
|
||||
id: '1582302200020783104',
|
||||
name: 'demo',
|
||||
},
|
||||
{
|
||||
id: '1581839391887794176',
|
||||
name: '海康闸机协议',
|
||||
},
|
||||
{
|
||||
id: '1567062365030637568',
|
||||
name: '协议20220906160914',
|
||||
},
|
||||
{
|
||||
id: '1561650927208628224',
|
||||
name: 'local',
|
||||
},
|
||||
{
|
||||
id: '1552881998413754368',
|
||||
name: '官方协议V3-支持固件升级3',
|
||||
},
|
||||
{
|
||||
id: '2b283b28a16d61e5fc2bdf39ceff34f8',
|
||||
name: 'JetLinks官方协议',
|
||||
description: 'JetLinks官方协议包',
|
||||
},
|
||||
{
|
||||
id: '1551510679466844160',
|
||||
name: '官方协议3.1',
|
||||
},
|
||||
{
|
||||
id: '1551509716811161600',
|
||||
name: '官方协议3.0',
|
||||
},
|
||||
];
|
||||
|
||||
interface FormState {
|
||||
apiAddress: string;
|
||||
apiKey: string;
|
||||
validateToken: string;
|
||||
aesKey: string;
|
||||
description: string;
|
||||
}
|
||||
interface Form {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = ref(props.provider.channel);
|
||||
const formRef1 = ref<FormInstance>();
|
||||
const formRef2 = ref<FormInstance>();
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
apiAddress: 'https://api.heclouds.com/',
|
||||
apiKey: '',
|
||||
validateToken: '',
|
||||
aesKey: '',
|
||||
description: '',
|
||||
});
|
||||
const form = reactive<Form>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const current = ref(0);
|
||||
const stepCurrent = ref(0);
|
||||
const steps = ref(['接入配置', '消息协议', '完成']);
|
||||
const procotolList = ref([]);
|
||||
const allProcotolList = ref([]);
|
||||
const procotolCurrent = ref('');
|
||||
|
||||
const procotolChange = (id: string) => {
|
||||
if (!props.data?.id) {
|
||||
procotolCurrent.value = id;
|
||||
}
|
||||
};
|
||||
|
||||
const procotolSearch = (value: string) => {
|
||||
if (value) {
|
||||
const list = allProcotolList.value.filter((i) => {
|
||||
return (
|
||||
i.name &&
|
||||
i.name.toLocaleLowerCase().includes(value.toLocaleLowerCase())
|
||||
);
|
||||
});
|
||||
procotolList.value = list;
|
||||
} else {
|
||||
procotolList.value = allProcotolList.value;
|
||||
}
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const data: any = await formRef2.value?.validate();
|
||||
const params = {
|
||||
...data,
|
||||
configuration: {
|
||||
...formState,
|
||||
protocol: procotolCurrent.value,
|
||||
},
|
||||
protocol: procotolCurrent.value,
|
||||
provider: props.provider.id,
|
||||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
props.data && props.data.id
|
||||
? await update({
|
||||
...props.data,
|
||||
...params,
|
||||
})
|
||||
: await save(params);
|
||||
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
// 回到列表页面
|
||||
// if (window.onTabSaveSuccess) {
|
||||
// window.onTabSaveSuccess(resp);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// } else {
|
||||
// // this.$store.dispatch('jumpPathByKey', { key: MenuKeys['Link/AccessConfig'] })
|
||||
// }
|
||||
history.back();
|
||||
}
|
||||
};
|
||||
|
||||
const queryProcotolList = async (id: string, params = {}) => {
|
||||
// const resp = await getProtocolList(ProtocolMapping.get(id), {
|
||||
// ...params,
|
||||
// 'sorts[0].name': 'createTime',
|
||||
// 'sorts[0].order': 'desc',
|
||||
// });
|
||||
// if (resp.status === 200) {
|
||||
// procotolList.value = resp.result;
|
||||
// allProcotolList.value = resp.result;
|
||||
// }
|
||||
|
||||
//使用测试数据1
|
||||
procotolList.value = resultList1;
|
||||
allProcotolList.value = resultList1;
|
||||
};
|
||||
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
tab.onTabSaveSuccess = (value) => {
|
||||
if (value.success) {
|
||||
procotolCurrent.value = value.result?.id;
|
||||
queryProcotolList(props.provider?.id);
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const next = async () => {
|
||||
if (current.value === 0) {
|
||||
let data1: any = await formRef1.value?.validate();
|
||||
queryProcotolList(props.provider.id);
|
||||
current.value = current.value + 1;
|
||||
} else if (current.value === 1) {
|
||||
if (!procotolCurrent.value) {
|
||||
message.error('请选择消息协议!');
|
||||
} else {
|
||||
current.value = current.value + 1;
|
||||
}
|
||||
}
|
||||
};
|
||||
const prev = () => {
|
||||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
stepCurrent.value = v;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
.card-item {
|
||||
padding-right: 5px;
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
line-height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
// color: rgba(0, 0, 0, 0.8);
|
||||
// background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.config-right-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.config-right-item-title {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.config-right-item-context {
|
||||
margin: 5px 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.doc {
|
||||
height: 550px;
|
||||
padding: 24px;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
color: rgba(#000, 0.8);
|
||||
font-size: 14px;
|
||||
background-color: #fafafa;
|
||||
|
||||
h1 {
|
||||
margin: 16px 0;
|
||||
color: rgba(#000, 0.85);
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
|
||||
&:first-child {
|
||||
margin-top: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.image {
|
||||
margin: 16px 0;
|
||||
}
|
||||
}
|
||||
.form-label {
|
||||
height: 30px;
|
||||
padding-bottom: 8px;
|
||||
.form-label-required {
|
||||
color: red;
|
||||
margin: 0 4px 0 -2px;
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -0,0 +1,37 @@
|
|||
<template>
|
||||
<div>
|
||||
<Ctwing
|
||||
v-if="channel === 'Ctwing'"
|
||||
:provider="props.provider"
|
||||
:data="props.data"
|
||||
/>
|
||||
<OneNet
|
||||
v-if="channel === 'OneNet'"
|
||||
:provider="props.provider"
|
||||
:data="props.data"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessCloud">
|
||||
import Ctwing from './Ctwing.vue';
|
||||
import OneNet from './OneNet.vue';
|
||||
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const channel = props.provider.channel;
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -0,0 +1,492 @@
|
|||
<template>
|
||||
<div v-if="type === 'edge'" class="container">
|
||||
<a-steps
|
||||
v-if="channel !== 'edge-child-device'"
|
||||
class="steps-steps"
|
||||
:current="stepCurrent"
|
||||
>
|
||||
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||
</a-steps>
|
||||
<div v-if="channel !== 'edge-child-device'" class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
选择与设备通信的网络组件
|
||||
</div>
|
||||
<div class="search">
|
||||
<a-input-search
|
||||
allowClear
|
||||
placeholder="请输入"
|
||||
style="width: 300px"
|
||||
@search="networkSearch"
|
||||
/>
|
||||
<a-button type="primary" @click="addNetwork">新增</a-button>
|
||||
</div>
|
||||
<div class="card-item">
|
||||
<a-row :gutter="[24, 24]" v-if="networkList.length > 0">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in networkList"
|
||||
:key="item.id"
|
||||
>
|
||||
<access-card
|
||||
@checkedChange="checkedChange"
|
||||
:checked="networkCurrent"
|
||||
:data="{
|
||||
...item,
|
||||
description: item.description
|
||||
? item.description
|
||||
: descriptionList[provider.id],
|
||||
}"
|
||||
>
|
||||
<template #other>
|
||||
<div class="other">
|
||||
<a-tooltip placement="topLeft">
|
||||
<div
|
||||
v-if="
|
||||
(item.addresses || [])
|
||||
.length > 1
|
||||
"
|
||||
>
|
||||
<div
|
||||
v-for="i in item.addresses ||
|
||||
[]"
|
||||
:key="i.address"
|
||||
class="item"
|
||||
>
|
||||
<a-badge
|
||||
:color="
|
||||
i.health === -1
|
||||
? 'red'
|
||||
: 'green'
|
||||
"
|
||||
/>{{ i.address }}
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-for="i in (
|
||||
item.addresses || []
|
||||
).slice(0, 1)"
|
||||
:key="i.address"
|
||||
class="item"
|
||||
>
|
||||
<a-badge
|
||||
:color="
|
||||
i.health === -1
|
||||
? 'red'
|
||||
: 'green'
|
||||
"
|
||||
:text="i.address"
|
||||
/>
|
||||
<span
|
||||
v-if="
|
||||
(item.addresses || [])
|
||||
.length > 1
|
||||
"
|
||||
>...</span
|
||||
>
|
||||
</div>
|
||||
</a-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
</access-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-empty v-else description="暂无数据" />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
v-if="channel === 'edge-child-device' || current === 1"
|
||||
class="card-last"
|
||||
>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="12">
|
||||
<title-component data="基本信息" />
|
||||
<div>
|
||||
<a-form
|
||||
:model="formState"
|
||||
name="basic"
|
||||
autocomplete="off"
|
||||
layout="vertical"
|
||||
@finish="onFinish"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-form-item
|
||||
label="名称"
|
||||
name="name"
|
||||
:rules="[
|
||||
{
|
||||
required: true,
|
||||
message: '请输入名称',
|
||||
trigger: 'blur',
|
||||
},
|
||||
{ max: 64, message: '最多可输入64个字符' },
|
||||
]"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入名称"
|
||||
v-model:value="formState.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
:rows="4"
|
||||
v-model:value="formState.description"
|
||||
show-count
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="current !== 1"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="config-right">
|
||||
<div class="config-right-item">
|
||||
<title-component data="配置概览" />
|
||||
<div class="config-right-item-context">
|
||||
接入方式:{{ provider.name }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
{{ provider.description }}
|
||||
</div>
|
||||
<div class="config-right-item-context">
|
||||
消息协议:{{ provider.id }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
<div
|
||||
v-if="channel !== 'edge-child-device'"
|
||||
:class="current !== 1 ? 'steps-action' : 'steps-action-save'"
|
||||
>
|
||||
<a-button v-if="[0].includes(current)" @click="next">
|
||||
下一步
|
||||
</a-button>
|
||||
<a-button v-if="current === 1" type="primary" @click="saveData">
|
||||
保存
|
||||
</a-button>
|
||||
<a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
|
||||
上一步
|
||||
</a-button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessEdge">
|
||||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { update, save, getNetworkList } from '@/api/link/accessConfig';
|
||||
import {
|
||||
descriptionList,
|
||||
ProtocolMapping,
|
||||
NetworkTypeMapping,
|
||||
} from '../../Detail/data';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||
import AccessCard from '../AccessCard/index.vue';
|
||||
|
||||
//测试数据1
|
||||
const networkListTest = {
|
||||
message: 'success',
|
||||
result: [
|
||||
{
|
||||
id: '1585192878304051200',
|
||||
name: 'MQTT网络组件',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8101',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1583268266806009856',
|
||||
name: '我的第一个MQTT服务组件',
|
||||
description: '',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8100',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1570335308902912000',
|
||||
name: '0915MQTT网络组件_勿动',
|
||||
description: '测试,勿动!',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8083',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1567062350140858368',
|
||||
name: '网络组件20220906160907',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8083',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1556563257890742272',
|
||||
name: 'MQTT网络组件',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://0.0.0.0:8104',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: '1534774770408108032',
|
||||
name: 'MQTT',
|
||||
addresses: [
|
||||
{
|
||||
address: 'mqtt://120.77.179.54:8088',
|
||||
health: 1,
|
||||
ok: true,
|
||||
bad: false,
|
||||
disabled: false,
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
status: 200,
|
||||
timestamp: 1674960624150,
|
||||
};
|
||||
|
||||
interface FormState {
|
||||
name: string;
|
||||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const id = route.query.id;
|
||||
|
||||
const props = defineProps({
|
||||
provider: {
|
||||
type: Object,
|
||||
default: () => {},
|
||||
},
|
||||
});
|
||||
|
||||
const type = ref(props.provider.type);
|
||||
const channel = ref(props.provider.channel);
|
||||
|
||||
const formState = reactive<FormState>({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
||||
const current = ref(0);
|
||||
const stepCurrent = ref(0);
|
||||
const steps = ref(['网络组件', '完成']);
|
||||
const networkCurrent = ref('');
|
||||
const networkList = ref([]);
|
||||
|
||||
const onFinish = async (values: any) => {
|
||||
const providerId = props.provider.id;
|
||||
const params = {
|
||||
...values,
|
||||
protocol: 'official-edge-protocol',
|
||||
provider: providerId,
|
||||
transport: ProtocolMapping.get(providerId),
|
||||
};
|
||||
if (networkCurrent.value) params.channelId = networkCurrent.value;
|
||||
console.log(1112, networkCurrent.value, params);
|
||||
|
||||
const resp = !!id ? await update({ ...params, id }) : await save(params);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功!');
|
||||
// if (params.get('save')) {
|
||||
// if ((window as any).onTabSaveSuccess) {
|
||||
// if (resp.result) {
|
||||
// (window as any).onTabSaveSuccess(resp.result);
|
||||
// setTimeout(() => window.close(), 300);
|
||||
// }
|
||||
// }
|
||||
// } else {
|
||||
history.back();
|
||||
// }
|
||||
}
|
||||
};
|
||||
|
||||
const checkedChange = (id: string) => {
|
||||
networkCurrent.value = id;
|
||||
};
|
||||
|
||||
const queryNetworkList = async (id: string, include: string, data = {}) => {
|
||||
// const resp = await getNetworkList(
|
||||
// NetworkTypeMapping.get(id),
|
||||
// include,
|
||||
// data,
|
||||
// );
|
||||
// if (resp.status === 200) {
|
||||
// networkList.value = resp.result;
|
||||
// }
|
||||
|
||||
//使用测试数据1
|
||||
networkList.value = networkListTest.result;
|
||||
};
|
||||
|
||||
const networkSearch = (value: string) => {
|
||||
queryNetworkList(props.provider.id, networkCurrent.value || '', {
|
||||
terms: [
|
||||
{
|
||||
column: 'name$LIKE',
|
||||
value: `%${value}%`,
|
||||
},
|
||||
],
|
||||
});
|
||||
};
|
||||
|
||||
const saveData = async () => {
|
||||
const data: any = await formRef.value?.validate();
|
||||
onFinish(data);
|
||||
};
|
||||
|
||||
const addNetwork = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Type/Detail']
|
||||
const url = '/demo';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?type=${
|
||||
NetworkTypeMapping.get(props.provider?.id) || ''
|
||||
}`,
|
||||
);
|
||||
tab.onTabSaveSuccess = (value) => {
|
||||
if (value.success) {
|
||||
networkCurrent.value = value.result.id;
|
||||
queryNetworkList(props.provider?.id, networkCurrent.value || '');
|
||||
}
|
||||
};
|
||||
};
|
||||
|
||||
const next = async () => {
|
||||
if (!networkCurrent.value) {
|
||||
message.error('请选择网络组件!');
|
||||
} else {
|
||||
current.value = current.value + 1;
|
||||
}
|
||||
};
|
||||
const prev = () => {
|
||||
current.value = current.value - 1;
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (props.provider.id === 'official-edge-gateway') {
|
||||
queryNetworkList(props.provider.id, '');
|
||||
}
|
||||
}),
|
||||
watch(
|
||||
current,
|
||||
(v) => {
|
||||
stepCurrent.value = v;
|
||||
},
|
||||
{
|
||||
deep: true,
|
||||
immediate: true,
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.container {
|
||||
margin: 20px;
|
||||
}
|
||||
|
||||
.steps-content {
|
||||
margin: 20px;
|
||||
}
|
||||
.steps-box {
|
||||
min-height: 400px;
|
||||
.card-item {
|
||||
padding-right: 5px;
|
||||
max-height: 480px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
}
|
||||
|
||||
.steps-action {
|
||||
width: 100%;
|
||||
margin-top: 24px;
|
||||
margin-left: 20px;
|
||||
}
|
||||
.steps-action-save {
|
||||
margin-left: 0;
|
||||
}
|
||||
.alert {
|
||||
height: 40px;
|
||||
padding-left: 10px;
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
line-height: 40px;
|
||||
background-color: #f6f6f6;
|
||||
}
|
||||
.search {
|
||||
display: flex;
|
||||
margin: 15px 0;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
.card-last {
|
||||
padding-right: 5px;
|
||||
overflow-y: auto;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
.config-right {
|
||||
padding: 20px;
|
||||
// color: rgba(0, 0, 0, 0.8);
|
||||
// background: rgba(0, 0, 0, 0.04);
|
||||
|
||||
.config-right-item {
|
||||
margin-bottom: 10px;
|
||||
|
||||
.config-right-item-title {
|
||||
width: 100%;
|
||||
margin-bottom: 10px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.config-right-item-context {
|
||||
margin: 5px 0;
|
||||
color: rgba(0, 0, 0, 0.8);
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
|
@ -6,7 +6,7 @@
|
|||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
<info-circle-outlined />
|
||||
配置设备信令参数
|
||||
</div>
|
||||
<div>
|
||||
|
@ -511,7 +511,12 @@
|
|||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance } from 'ant-design-vue';
|
||||
import { getResourcesCurrent, getClusters } from '@/api/link/accessConfig';
|
||||
import { DeleteOutlined, PlusOutlined } from '@ant-design/icons-vue';
|
||||
import {
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
QuestionCircleOutlined,
|
||||
InfoCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
import { update, save } from '@/api/link/accessConfig';
|
||||
|
||||
interface Form2 {
|
||||
|
|
|
@ -6,7 +6,7 @@
|
|||
<div class="steps-content">
|
||||
<div class="steps-box" v-if="current === 0">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
<info-circle-outlined />
|
||||
选择与设备通信的网络组件
|
||||
</div>
|
||||
<div class="search">
|
||||
|
@ -93,7 +93,7 @@
|
|||
</div>
|
||||
<div class="steps-box" v-else-if="current === 1">
|
||||
<div class="alert">
|
||||
<question-circle-outlined />
|
||||
<info-circle-outlined />
|
||||
使用选择的消息协议,对网络组件通信数据进行编解码、认证等操作
|
||||
</div>
|
||||
<div class="search">
|
||||
|
@ -326,7 +326,7 @@ import AccessCard from './AccessCard/index.vue';
|
|||
import { message, Form } from 'ant-design-vue';
|
||||
import type { FormInstance, TableColumnType } from 'ant-design-vue';
|
||||
import Markdown from 'vue3-markdown-it';
|
||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
||||
import { InfoCircleOutlined } from '@ant-design/icons-vue';
|
||||
//测试数据1
|
||||
const resultList1 = [
|
||||
{
|
||||
|
|
|
@ -0,0 +1,201 @@
|
|||
<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.templateId">
|
||||
<a-select
|
||||
v-model:value="formData.templateId"
|
||||
placeholder="请选择通知模版"
|
||||
@change="getTemplateDetail"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in templateList"
|
||||
: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 ConfigApi from '@/api/notice/config';
|
||||
import {
|
||||
TemplateFormData,
|
||||
IVariableDefinitions,
|
||||
} 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 templateList = ref<TemplateFormData[]>([]);
|
||||
const getTemplateList = async () => {
|
||||
const params = {
|
||||
terms: [
|
||||
{ column: 'type', value: props.data.type },
|
||||
{ column: 'provider', value: props.data.provider },
|
||||
],
|
||||
};
|
||||
const { result } = await ConfigApi.getTemplate(params, props.data.id);
|
||||
templateList.value = result;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => _vis.value,
|
||||
(val) => {
|
||||
if (val) getTemplateList();
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取模板详情
|
||||
*/
|
||||
const templateDetailTable = ref<IVariableDefinitions[]>();
|
||||
const getTemplateDetail = async () => {
|
||||
const { result } = await ConfigApi.getTemplateDetail(
|
||||
formData.value.templateId,
|
||||
);
|
||||
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({
|
||||
templateId: '',
|
||||
variableDefinitions: '',
|
||||
});
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
templateId: [{ 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;
|
||||
ConfigApi.debug(params, props.data.id, formData.value.templateId)
|
||||
.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>
|
|
@ -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) => 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>
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
</style>
|
|
@ -1,22 +1,400 @@
|
|||
<!-- 通知配置 -->
|
||||
<template>
|
||||
<div class="page-container">通知配置</div>
|
||||
<div class="page-container">
|
||||
<a-card style="margin-bottom: 20px">
|
||||
<Search
|
||||
:columns="columns"
|
||||
target="notice-config"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
</a-card>
|
||||
<a-card>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<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';
|
||||
|
||||
const getList = async () => {
|
||||
const res = await configApi.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 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) => {
|
||||
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 ConfigApi.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: 'BarsOutlined',
|
||||
onClick: () => {
|
||||
logVis.value = true;
|
||||
currentConfig.value = data;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'debug',
|
||||
text: '导出',
|
||||
tooltip: {
|
||||
title: '导出',
|
||||
},
|
||||
icon: 'ArrowDownOutlined',
|
||||
onClick: () => {
|
||||
downloadObject(data, `通知配置`);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
onConfirm: async () => {
|
||||
const resp = await ConfigApi.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>
|
||||
|
|
|
@ -0,0 +1,201 @@
|
|||
<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.templateId">
|
||||
<a-select
|
||||
v-model:value="formData.templateId"
|
||||
placeholder="请选择通知模版"
|
||||
@change="getTemplateDetail"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in templateList"
|
||||
: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 ConfigApi from '@/api/notice/config';
|
||||
import {
|
||||
TemplateFormData,
|
||||
IVariableDefinitions,
|
||||
} 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 templateList = ref<TemplateFormData[]>([]);
|
||||
const getTemplateList = async () => {
|
||||
const params = {
|
||||
terms: [
|
||||
{ column: 'type', value: props.data.type },
|
||||
{ column: 'provider', value: props.data.provider },
|
||||
],
|
||||
};
|
||||
const { result } = await ConfigApi.getTemplate(params, props.data.id);
|
||||
templateList.value = result;
|
||||
};
|
||||
|
||||
watch(
|
||||
() => _vis.value,
|
||||
(val) => {
|
||||
if (val) getTemplateList();
|
||||
},
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取模板详情
|
||||
*/
|
||||
const templateDetailTable = ref<IVariableDefinitions[]>();
|
||||
const getTemplateDetail = async () => {
|
||||
const { result } = await ConfigApi.getTemplateDetail(
|
||||
formData.value.templateId,
|
||||
);
|
||||
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({
|
||||
templateId: '',
|
||||
variableDefinitions: '',
|
||||
});
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
templateId: [{ 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;
|
||||
ConfigApi.debug(params, props.data.id, formData.value.templateId)
|
||||
.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>
|
|
@ -1,4 +1,4 @@
|
|||
<!-- webhook请求头可编辑表格 -->
|
||||
<!-- 附件信息 -->
|
||||
<template>
|
||||
<div class="attachment-wrapper">
|
||||
<div
|
||||
|
@ -15,13 +15,16 @@
|
|||
[TOKEN_KEY]: LocalStore.get(TOKEN_KEY),
|
||||
}"
|
||||
:showUploadList="false"
|
||||
@change="handleChange"
|
||||
@change="(e) => handleChange(e, item.id)"
|
||||
>
|
||||
<upload-outlined />
|
||||
</a-upload>
|
||||
</template>
|
||||
</a-input>
|
||||
<delete-outlined @click="handleDelete" style="cursor: pointer" />
|
||||
<delete-outlined
|
||||
@click="handleDelete(item.id)"
|
||||
style="cursor: pointer"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-button
|
||||
|
@ -62,35 +65,65 @@ const props = defineProps({
|
|||
},
|
||||
});
|
||||
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status === 'done') {
|
||||
const result = info.file.response?.result;
|
||||
console.log('result: ', result);
|
||||
}
|
||||
};
|
||||
// const fileList = computed({
|
||||
// get: () => props.attachments.map((m) => ({ id: fileId(), ...m })),
|
||||
// set: (val) =>
|
||||
// emit(
|
||||
// 'update:attachments',
|
||||
// val.map(({ name, location }) => ({ name, location })),
|
||||
// ),
|
||||
// });
|
||||
|
||||
const fileList = ref<IAttachments[]>([]);
|
||||
|
||||
watch(
|
||||
() => props.attachments,
|
||||
(val) => {
|
||||
fileList.value = val;
|
||||
fileList.value = val.map((m) => ({
|
||||
id: fileId(),
|
||||
...m,
|
||||
}));
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const handleDelete = (id: number) => {
|
||||
const idx = fileList.value.findIndex((f) => f.id === id);
|
||||
fileList.value.splice(idx, 1);
|
||||
emit('update:attachments', fileList.value);
|
||||
const handleChange = (info: UploadChangeParam, id: string | undefined) => {
|
||||
if (info.file.status === 'done') {
|
||||
const targetFileIdx = fileList.value.findIndex((f) => f.id === id);
|
||||
fileList.value[targetFileIdx].name = info.file.name;
|
||||
fileList.value[targetFileIdx].location = info.file.response?.result;
|
||||
emit(
|
||||
'update:attachments',
|
||||
fileList.value.map(({ name, location }) => ({ name, location })),
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 删除附件
|
||||
* @param id
|
||||
*/
|
||||
const handleDelete = (id: string | undefined) => {
|
||||
const idx = fileList.value.findIndex((f) => f.id === id);
|
||||
|
||||
fileList.value.splice(idx, 1);
|
||||
};
|
||||
|
||||
/**
|
||||
* 添加附件
|
||||
*/
|
||||
const handleAdd = () => {
|
||||
fileList.value.push({
|
||||
id: fileList.value.length,
|
||||
id: fileId(),
|
||||
name: '',
|
||||
location: '',
|
||||
});
|
||||
emit('update:attachments', fileList.value);
|
||||
};
|
||||
|
||||
/**
|
||||
* 附件标识
|
||||
*/
|
||||
const fileId = () => String(new Date().getTime() + Math.random() * 9);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<a-select
|
||||
:options="options"
|
||||
@change="change"
|
||||
placeholder="请选择收信部门"
|
||||
style="width: 100%"
|
||||
:allowClear="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import templateApi from '@/api/notice/template';
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:toParty', data: string): void;
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
type: { type: String, default: '' },
|
||||
configId: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const options = ref([]);
|
||||
const queryData = async () => {
|
||||
const { result } = await templateApi.getDept(props.type, props.configId);
|
||||
options.value = result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
};
|
||||
queryData();
|
||||
|
||||
const change = (e: any) => {
|
||||
emit('update:toParty', e);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.configId,
|
||||
() => {
|
||||
queryData();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<a-select
|
||||
:options="options"
|
||||
@change="change"
|
||||
placeholder="请选择标签推送,多个标签用,号分隔"
|
||||
style="width: 100%"
|
||||
:allowClear="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import templateApi from '@/api/notice/template';
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:toTag', data: string): void;
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
type: { type: String, default: '' },
|
||||
configId: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const options = ref([]);
|
||||
const queryData = async () => {
|
||||
const { result } = await templateApi.getTags(props.configId);
|
||||
options.value = result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
};
|
||||
queryData();
|
||||
|
||||
const change = (e: any) => {
|
||||
emit('update:toTag', e);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.configId,
|
||||
() => {
|
||||
queryData();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -0,0 +1,46 @@
|
|||
<template>
|
||||
<a-select
|
||||
:options="options"
|
||||
@change="change"
|
||||
placeholder="请选择收信人"
|
||||
style="width: 100%"
|
||||
:allowClear="true"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import templateApi from '@/api/notice/template';
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:toUser', data: string): void;
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
type: { type: String, default: '' },
|
||||
configId: { type: String, default: '' },
|
||||
});
|
||||
|
||||
const options = ref([]);
|
||||
const queryData = async () => {
|
||||
const { result } = await templateApi.getUser(props.type, props.configId);
|
||||
options.value = result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
};
|
||||
queryData();
|
||||
|
||||
const change = (e: any) => {
|
||||
emit('update:toUser', e);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.configId,
|
||||
() => {
|
||||
queryData();
|
||||
},
|
||||
);
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -0,0 +1,136 @@
|
|||
<!-- 模板内容-变量列表 -->
|
||||
<template>
|
||||
<div class="table-wrapper">
|
||||
<a-table
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<span v-if="column.dataIndex === 'id'">
|
||||
{{ record[column.dataIndex] }}
|
||||
</span>
|
||||
<a-input
|
||||
v-if="column.dataIndex === 'name'"
|
||||
v-model:value="record.name"
|
||||
/>
|
||||
<a-select
|
||||
v-if="column.dataIndex === 'type'"
|
||||
v-model:value="record.type"
|
||||
@change="handleTypeChange(record)"
|
||||
>
|
||||
<a-select-option value="string">字符串</a-select-option>
|
||||
<a-select-option value="date">时间</a-select-option>
|
||||
<a-select-option value="double">数字</a-select-option>
|
||||
</a-select>
|
||||
<template v-if="column.dataIndex === 'format'">
|
||||
<span v-if="record.type === 'string'">
|
||||
{{ record.format }}
|
||||
</span>
|
||||
<a-select
|
||||
v-if="record.type === 'date'"
|
||||
v-model:value="record.format"
|
||||
>
|
||||
<a-select-option value="timestamp">
|
||||
timestamp
|
||||
</a-select-option>
|
||||
<a-select-option value="yyyy-MM-dd">
|
||||
yyyy-MM-dd
|
||||
</a-select-option>
|
||||
<a-select-option value="yyyy-MM-dd HH:mm:ss">
|
||||
yyyy-MM-dd HH:mm:ss
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<a-input
|
||||
v-if="record.type === 'double'"
|
||||
v-model:value="record.format"
|
||||
>
|
||||
<template #suffix>
|
||||
<a-tooltip
|
||||
title="格式为:%.xf x代表数字保留的小数位数。当x=0时,代表格式为整数"
|
||||
>
|
||||
<AIcon type="QuestionCircleOutlined" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
</a-input>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { PropType } from 'vue';
|
||||
|
||||
interface IVariable {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
format: string;
|
||||
}
|
||||
|
||||
type Emits = {
|
||||
(e: 'update:variableDefinitions', data: IVariable[]): void;
|
||||
};
|
||||
const emit = defineEmits<Emits>();
|
||||
|
||||
const props = defineProps({
|
||||
variableDefinitions: {
|
||||
type: Array as PropType<IVariable[]>,
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '变量',
|
||||
dataIndex: 'id',
|
||||
width: 80,
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
// width: 160,
|
||||
},
|
||||
{
|
||||
title: '类型',
|
||||
dataIndex: 'type',
|
||||
// width: 160,
|
||||
},
|
||||
{
|
||||
title: '格式',
|
||||
dataIndex: 'format',
|
||||
width: 150,
|
||||
},
|
||||
];
|
||||
|
||||
const dataSource = computed({
|
||||
get: () => props.variableDefinitions,
|
||||
set: (val) => emit('update:variableDefinitions', val),
|
||||
});
|
||||
|
||||
watch(
|
||||
() => dataSource.value,
|
||||
(val) => {
|
||||
emit('update:variableDefinitions', val);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
const handleTypeChange = (record: IVariable) => {
|
||||
switch (record.type) {
|
||||
case 'string':
|
||||
record.format = '%s';
|
||||
break;
|
||||
case 'date':
|
||||
record.format = 'timestamp';
|
||||
break;
|
||||
case 'double':
|
||||
record.format = '%.0f';
|
||||
break;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -39,6 +39,7 @@
|
|||
<RadioCard
|
||||
:options="msgType"
|
||||
v-model="formData.provider"
|
||||
@change="getConfigList"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
|
@ -49,13 +50,14 @@
|
|||
<a-select
|
||||
v-model:value="formData.configId"
|
||||
placeholder="请选择绑定配置"
|
||||
@change="handleConfigChange"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in ROBOT_MSG_TYPE"
|
||||
v-for="(item, index) in configList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:value="item.id"
|
||||
>
|
||||
{{ item.label }}
|
||||
{{ item.name }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
@ -120,8 +122,7 @@
|
|||
>
|
||||
<!-- <a-input
|
||||
v-model:value="
|
||||
formData.template.markdown
|
||||
?.title
|
||||
formData.template.markdown?.title
|
||||
"
|
||||
placeholder="请输入标题"
|
||||
/> -->
|
||||
|
@ -179,58 +180,33 @@
|
|||
<a-row :gutter="10">
|
||||
<a-col :span="12">
|
||||
<a-form-item label="收信人">
|
||||
<a-select
|
||||
v-model:value="
|
||||
<ToUser
|
||||
v-model:to-user="
|
||||
formData.template.toUser
|
||||
"
|
||||
placeholder="请选择收信人"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(
|
||||
item, index
|
||||
) in ROBOT_MSG_TYPE"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
:type="formData.type"
|
||||
:config-id="formData.configId"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<a-form-item label="收信部门">
|
||||
<a-select
|
||||
v-model:value="
|
||||
<ToOrg
|
||||
v-model:to-user="
|
||||
formData.template.toParty
|
||||
"
|
||||
placeholder="请选择收信部门"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(
|
||||
item, index
|
||||
) in ROBOT_MSG_TYPE"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
:type="formData.type"
|
||||
:config-id="formData.configId"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="标签推送">
|
||||
<a-select
|
||||
v-model:value="formData.template.toTag"
|
||||
placeholder="请选择标签推送"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in ROBOT_MSG_TYPE"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
<ToTag
|
||||
v-model:to-user="formData.template.toTag"
|
||||
:type="formData.type"
|
||||
:config-id="formData.configId"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- 邮件 -->
|
||||
|
@ -246,17 +222,11 @@
|
|||
</a-form-item>
|
||||
<a-form-item label="收件人">
|
||||
<a-select
|
||||
mode="tags"
|
||||
:options="[]"
|
||||
v-model:value="formData.template.sendTo"
|
||||
placeholder="请选择收件人"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in ROBOT_MSG_TYPE"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
>
|
||||
{{ item.label }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="附件信息">
|
||||
<Attachments
|
||||
|
@ -331,11 +301,11 @@
|
|||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="模板内容"
|
||||
label="模版内容"
|
||||
v-if="formData.template.templateType === 'tts'"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="formData.template.ttsCode"
|
||||
v-model:value="formData.template.message"
|
||||
show-count
|
||||
:rows="5"
|
||||
placeholder="内容中的变量将用于阿里云语音验证码"
|
||||
|
@ -359,11 +329,11 @@
|
|||
<a-select-option
|
||||
v-for="(
|
||||
item, index
|
||||
) in ROBOT_MSG_TYPE"
|
||||
) in templateList"
|
||||
:key="index"
|
||||
:value="item.value"
|
||||
:value="item.templateCode"
|
||||
>
|
||||
{{ item.label }}
|
||||
{{ item.templateName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
@ -383,10 +353,18 @@
|
|||
label="签名"
|
||||
v-bind="validateInfos['template.signName']"
|
||||
>
|
||||
<a-input
|
||||
<a-select
|
||||
v-model:value="formData.template.signName"
|
||||
placeholder="请输入签名"
|
||||
/>
|
||||
placeholder="请选择签名"
|
||||
>
|
||||
<a-select-option
|
||||
v-for="(item, index) in signsList"
|
||||
:key="index"
|
||||
:value="item.signName"
|
||||
>
|
||||
{{ item.signName }}
|
||||
</a-select-option>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- webhook -->
|
||||
|
@ -418,6 +396,35 @@
|
|||
</div>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<a-form-item
|
||||
label="模版内容"
|
||||
v-if="
|
||||
formData.type !== 'sms' &&
|
||||
formData.type !== 'webhook' &&
|
||||
formData.type !== 'voice'
|
||||
"
|
||||
>
|
||||
<a-textarea
|
||||
v-model:value="formData.template.message"
|
||||
:maxlength="200"
|
||||
:rows="5"
|
||||
placeholder="变量格式:${name};
|
||||
示例:尊敬的${name},${time}有设备触发告警,请注意处理"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="变量列表"
|
||||
v-if="
|
||||
formData.variableDefinitions &&
|
||||
formData.variableDefinitions.length
|
||||
"
|
||||
>
|
||||
<VariableDefinitions
|
||||
v-model:variableDefinitions="
|
||||
formData.variableDefinitions
|
||||
"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
<a-textarea
|
||||
v-model:value="formData.description"
|
||||
|
@ -451,7 +458,7 @@
|
|||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { TemplateFormData } from '../types';
|
||||
import { IVariableDefinitions, TemplateFormData } from '../types';
|
||||
import {
|
||||
NOTICE_METHOD,
|
||||
TEMPLATE_FIELD_MAP,
|
||||
|
@ -462,7 +469,11 @@ import {
|
|||
import templateApi from '@/api/notice/template';
|
||||
import Doc from './doc/index';
|
||||
import MonacoEditor from '@/components/MonacoEditor/index.vue';
|
||||
import Attachments from './components/Attachments.vue'
|
||||
import Attachments from './components/Attachments.vue';
|
||||
import VariableDefinitions from './components/VariableDefinitions.vue';
|
||||
import ToUser from './components/ToUser.vue';
|
||||
import ToOrg from './components/ToOrg.vue';
|
||||
import ToTag from './components/ToTag.vue';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
|
@ -500,12 +511,14 @@ watch(
|
|||
msgType.value = MSG_TYPE[val];
|
||||
|
||||
formData.value.provider = msgType.value[0].value;
|
||||
console.log('formData.value.template: ', formData.value.template);
|
||||
// console.log('formData.value.template: ', formData.value.template);
|
||||
|
||||
getConfigList();
|
||||
},
|
||||
);
|
||||
|
||||
computed(() => {
|
||||
console.log('formData.value.type: ', formData.value.type);
|
||||
// console.log('formData.value.type: ', formData.value.type);
|
||||
Object.assign(
|
||||
formData.value.template,
|
||||
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
|
||||
|
@ -547,11 +560,42 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
|||
watch(
|
||||
() => formData.value.type,
|
||||
() => {
|
||||
formData.value.variableDefinitions = [];
|
||||
clearValidate();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => formData.value.template.message,
|
||||
(val) => {
|
||||
if (!val) return;
|
||||
// 已经存在的变量
|
||||
const oldKey = formData.value.variableDefinitions?.map((m) => m.id);
|
||||
// 正则提取${}里面的值
|
||||
const pattern = /(?<=\$\{).*?(?=\})/g;
|
||||
const titleList = val.match(pattern)?.filter((f) => f);
|
||||
const newKey = [...new Set(titleList)];
|
||||
const result = newKey?.map((m) =>
|
||||
oldKey.includes(m)
|
||||
? formData.value.variableDefinitions.find(
|
||||
(item) => item.id === m,
|
||||
)
|
||||
: {
|
||||
id: m,
|
||||
name: '',
|
||||
type: 'string',
|
||||
format: '%s',
|
||||
},
|
||||
);
|
||||
formData.value.variableDefinitions = result as IVariableDefinitions[];
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
const getDetail = async () => {
|
||||
const res = await templateApi.detail(route.params.id as string);
|
||||
// console.log('res: ', res);
|
||||
|
@ -560,6 +604,50 @@ const getDetail = async () => {
|
|||
};
|
||||
// getDetail();
|
||||
|
||||
/**
|
||||
* 获取绑定配置
|
||||
*/
|
||||
const configList = ref();
|
||||
const getConfigList = async () => {
|
||||
const terms = [
|
||||
{ column: 'type$IN', value: formData.value.type },
|
||||
{ column: 'provider', value: formData.value.provider },
|
||||
];
|
||||
const { result } = await templateApi.getConfig({ terms });
|
||||
configList.value = result;
|
||||
};
|
||||
getConfigList();
|
||||
|
||||
/**
|
||||
* 配置选择改变
|
||||
*/
|
||||
const handleConfigChange = () => {
|
||||
getTemplateList();
|
||||
getSignsList();
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取阿里模板
|
||||
*/
|
||||
const templateList = ref();
|
||||
const getTemplateList = async () => {
|
||||
const { result } = await templateApi.getAliTemplate(
|
||||
formData.value.configId,
|
||||
);
|
||||
templateList.value = result;
|
||||
};
|
||||
getTemplateList();
|
||||
|
||||
/**
|
||||
* 获取签名
|
||||
*/
|
||||
const signsList = ref();
|
||||
const getSignsList = async () => {
|
||||
const { result } = await templateApi.getSigns(formData.value.configId);
|
||||
signsList.value = result;
|
||||
};
|
||||
getSignsList();
|
||||
|
||||
/**
|
||||
* 表单提交
|
||||
*/
|
||||
|
@ -567,25 +655,37 @@ const btnLoading = ref<boolean>(false);
|
|||
const handleSubmit = () => {
|
||||
validate()
|
||||
.then(async () => {
|
||||
console.log('formData.value: ', formData.value);
|
||||
// console.log('formData.value: ', formData.value);
|
||||
formData.value.template.ttsCode =
|
||||
formData.value.template.templateCode;
|
||||
btnLoading.value = true;
|
||||
// let res;
|
||||
// if (!formData.value.id) {
|
||||
// res = await templateApi.save(formData.value);
|
||||
// } else {
|
||||
// res = await templateApi.update(formData.value);
|
||||
// }
|
||||
// // console.log('res: ', res);
|
||||
// if (res?.success) {
|
||||
// message.success('保存成功');
|
||||
// router.back();
|
||||
// }
|
||||
btnLoading.value = false;
|
||||
let res;
|
||||
if (!formData.value.id) {
|
||||
res = await templateApi.save(formData.value);
|
||||
} else {
|
||||
res = await templateApi.update(formData.value);
|
||||
}
|
||||
// console.log('res: ', res);
|
||||
if (res?.success) {
|
||||
message.success('保存成功');
|
||||
router.back();
|
||||
}
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err: ', err);
|
||||
btnLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// test
|
||||
watch(
|
||||
() => formData.value,
|
||||
(val) => {
|
||||
console.log('formData.value: ', val);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// test
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
|
|
@ -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) => 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>
|
|
@ -1,22 +1,399 @@
|
|||
<!-- 通知模板 -->
|
||||
<template>
|
||||
<div class="page-container">通知模板</div>
|
||||
<div class="page-container">
|
||||
<a-card style="margin-bottom: 20px">
|
||||
<Search
|
||||
:columns="columns"
|
||||
target="notice-config"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
</a-card>
|
||||
<a-card>
|
||||
<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"
|
||||
>
|
||||
<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>
|
||||
</a-card>
|
||||
|
||||
<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 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';
|
||||
|
||||
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 ConfigApi.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: 'BarsOutlined',
|
||||
onClick: () => {
|
||||
logVis.value = true;
|
||||
currentConfig.value = data;
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'debug',
|
||||
text: '导出',
|
||||
tooltip: {
|
||||
title: '导出',
|
||||
},
|
||||
icon: 'ArrowDownOutlined',
|
||||
onClick: () => {
|
||||
downloadObject(data, `通知配置`);
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
popConfirm: {
|
||||
title: '确认删除?',
|
||||
onConfirm: async () => {
|
||||
const resp = await ConfigApi.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>
|
||||
|
|
|
@ -7,13 +7,25 @@ export interface IHeaders {
|
|||
interface IAttachments {
|
||||
location: string;
|
||||
name: string;
|
||||
id?: number;
|
||||
id?: string;
|
||||
}
|
||||
interface IVariableDefinitions {
|
||||
id: string;
|
||||
name: string;
|
||||
type: string;
|
||||
format: string;
|
||||
value?: string;
|
||||
}
|
||||
|
||||
interface IMarkDown {
|
||||
text: string;
|
||||
title: string;
|
||||
}
|
||||
interface ILink {
|
||||
title: string;
|
||||
picUrl: string;
|
||||
messageUrl: string;
|
||||
text: string;
|
||||
}
|
||||
|
||||
export type TemplateFormData = {
|
||||
|
@ -23,16 +35,8 @@ export type TemplateFormData = {
|
|||
message?: string;
|
||||
// 钉钉机器人
|
||||
messageType?: string;
|
||||
markdown?: {
|
||||
text: string;
|
||||
title: string;
|
||||
};
|
||||
link?: {
|
||||
title: string;
|
||||
picUrl: string;
|
||||
messageUrl: string;
|
||||
text: string;
|
||||
};
|
||||
markdown?: IMarkDown;
|
||||
link?: ILink;
|
||||
// 微信
|
||||
// agentId?: string;
|
||||
// message?: string;
|
||||
|
@ -71,4 +75,24 @@ export type TemplateFormData = {
|
|||
creatorId?: string;
|
||||
createTime?: number;
|
||||
configId?: string;
|
||||
};
|
||||
};
|
||||
|
||||
// 绑定配置类型
|
||||
export type config = {
|
||||
host: string;
|
||||
password: string;
|
||||
port: number;
|
||||
sender: string;
|
||||
ssl: boolean;
|
||||
username: string;
|
||||
}
|
||||
export type BindConfig = {
|
||||
configuration: config;
|
||||
createTime: number
|
||||
creatorId: string;
|
||||
id: string;
|
||||
maxRetryTimes: number;
|
||||
name: string;
|
||||
provider: string;
|
||||
type: string
|
||||
}
|
|
@ -0,0 +1,321 @@
|
|||
<template>
|
||||
<a-modal
|
||||
v-model:visible="dialog.visible"
|
||||
:title="dialog.title"
|
||||
width="1000px"
|
||||
@ok="dialog.handleOk"
|
||||
class="edit-dialog-container"
|
||||
>
|
||||
<a-form ref="formRef" :model="form.data" layout="vertical">
|
||||
<a-form-item
|
||||
name="id"
|
||||
:rules="[
|
||||
{ required: true, message: '请输入标识(ID)' },
|
||||
{ validator: form.rules.idCheck, trigger: 'blur' },
|
||||
]"
|
||||
class="question-item"
|
||||
>
|
||||
<template #label>
|
||||
<span>标识</span>
|
||||
<span class="required-icon">*</span>
|
||||
<a-tooltip placement="top">
|
||||
<template #title>
|
||||
<span>标识ID需与代码中的标识ID一致</span>
|
||||
</template>
|
||||
<question-circle-outlined style="color: #00000073" />
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="form.data.id"
|
||||
placeholder="请输入标识(ID)"
|
||||
:maxlength="64"
|
||||
:disabled="dialog.title === '编辑'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="name"
|
||||
label="名称"
|
||||
:rules="[{ required: true, message: '请输入名称' }]"
|
||||
>
|
||||
<a-input
|
||||
v-model:value="form.data.name"
|
||||
placeholder="请输入名称"
|
||||
:maxlength="64"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
|
||||
<a-table
|
||||
:columns="table.columns"
|
||||
:data-source="actionTableData"
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, record, index }">
|
||||
<template v-if="column.key === 'index'">
|
||||
{{
|
||||
`#${
|
||||
(pager.current - 1) * pager.pageSize + (index + 1)
|
||||
}.`
|
||||
}}
|
||||
</template>
|
||||
<template
|
||||
v-else-if="column.key !== 'index' && column.key !== 'act'"
|
||||
>
|
||||
<a-input v-model:value="record[column.key]" />
|
||||
</template>
|
||||
<template v-else-if="column.key === 'act'">
|
||||
<a-button
|
||||
class="delete-btn"
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.clickRemove(index)"
|
||||
>
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</template>
|
||||
</template>
|
||||
</a-table>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<a-button type="dashed" style="width: 100%" @click="table.clickAdd">
|
||||
<plus-outlined /> 添加
|
||||
</a-button>
|
||||
|
||||
<template #footer>
|
||||
<a-button key="back" @click="dialog.visible = false">取消</a-button>
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
:loading="form.loading"
|
||||
@click="dialog.handleOk"
|
||||
>确定</a-button
|
||||
>
|
||||
</template>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
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(() => {
|
||||
form.submit();
|
||||
});
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, defaultForm: any = {}) => {
|
||||
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();
|
||||
});
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
const form = reactive({
|
||||
loading: false,
|
||||
data: {
|
||||
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({
|
||||
columns: [
|
||||
{
|
||||
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: '操作',
|
||||
dataIndex: 'act',
|
||||
key: 'act',
|
||||
},
|
||||
],
|
||||
data: <any>[],
|
||||
clickRemove: (index: number) => {
|
||||
pager.total -= 1;
|
||||
table.data.splice(index, 1);
|
||||
|
||||
// 当删除的刚好为本页的最后一项时,返回到上一页
|
||||
if (pager.current > 1 && pager.total % pager.pageSize === 0)
|
||||
pager.current -= 1;
|
||||
},
|
||||
clickAdd: () => {
|
||||
table.data.push({});
|
||||
pager.total += 1;
|
||||
|
||||
// 当添加的项需要新加一页才能显示时,跳转到最后一页
|
||||
if (pager.total % pager.pageSize === 1) {
|
||||
pager.current = Math.ceil(pager.total / pager.pageSize);
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const pager = reactive({
|
||||
current: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
});
|
||||
const pageArr = computed(() => {
|
||||
const maxPageNum = Math.ceil(pager.total / pager.pageSize);
|
||||
return new Array(maxPageNum).fill(1);
|
||||
});
|
||||
const actionTableData = computed(() => {
|
||||
const startIndex = (pager.current - 1) * pager.pageSize;
|
||||
const endIndex = Math.min(
|
||||
pager.current * pager.pageSize,
|
||||
table.data.length,
|
||||
);
|
||||
console.log(startIndex, endIndex);
|
||||
|
||||
return table.data.slice(startIndex, endIndex);
|
||||
});
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible,
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.edit-dialog-container {
|
||||
.question-item {
|
||||
:deep(.ant-form-item-required) {
|
||||
&::before {
|
||||
display: none;
|
||||
}
|
||||
.required-icon {
|
||||
display: inline-block;
|
||||
margin-right: 4px;
|
||||
margin-left: 2px;
|
||||
color: #ff4d4f;
|
||||
font-size: 14px;
|
||||
font-family: SimSun, sans-serif;
|
||||
line-height: 1;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.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>
|
|
@ -0,0 +1,29 @@
|
|||
<template>
|
||||
<span class="status-label-container">
|
||||
<i
|
||||
class="circle"
|
||||
:style="{ background: props.statusValue ? '#52c41a' : '#ff4d4f' }"
|
||||
></i>
|
||||
<span>{{ props.statusValue ? '启用' : '禁用' }}</span>
|
||||
</span>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
statusValue: number;
|
||||
}>();
|
||||
</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>
|
|
@ -0,0 +1,298 @@
|
|||
<template>
|
||||
<div class="permission-container">
|
||||
<Search :columns="query.columns" @search="query.search" />
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
:columns="table.columns"
|
||||
:request="getPermission_api"
|
||||
model="TABLE"
|
||||
:params="query.params"
|
||||
:defaultParams="{ sorts: [{ name: 'id', order: 'asc' }] }"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<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" />
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
<a-space :size="16">
|
||||
<a-tooltip>
|
||||
<template #title>编辑</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
@click="table.openDialog(slotProps)"
|
||||
>
|
||||
<edit-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
|
||||
<a-popconfirm
|
||||
:title="`确定要${
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}吗?`"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="table.changeStatus(slotProps)"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{
|
||||
slotProps.status ? '禁用' : '启用'
|
||||
}}</template>
|
||||
<a-button style="padding: 0" type="link">
|
||||
<stop-outlined v-if="slotProps.status" />
|
||||
<play-circle-outlined v-else />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
|
||||
<a-popconfirm
|
||||
title="确认删除"
|
||||
ok-text="确定"
|
||||
cancel-text="取消"
|
||||
@confirm="table.clickDel(slotProps)"
|
||||
:disabled="slotProps.status"
|
||||
>
|
||||
<a-tooltip>
|
||||
<template #title>{{
|
||||
systemPermission('delete')
|
||||
? slotProps.status
|
||||
? '请先禁用,再删除'
|
||||
: '删除'
|
||||
: '暂无权限,请联系管理员'
|
||||
}}</template>
|
||||
<a-button
|
||||
style="padding: 0"
|
||||
type="link"
|
||||
:disabled="
|
||||
!systemPermission('delete') ||
|
||||
slotProps.status
|
||||
"
|
||||
>
|
||||
<delete-outlined />
|
||||
</a-button>
|
||||
</a-tooltip>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<EditDialog ref="editDialogRef" @refresh="table.refresh" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import EditDialog from './components/EditDialog.vue';
|
||||
import StatusLabel from './components/StatusLabel.vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import {
|
||||
EditOutlined,
|
||||
DeleteOutlined,
|
||||
PlusOutlined,
|
||||
StopOutlined,
|
||||
PlayCircleOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
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: [
|
||||
{
|
||||
title: '标识',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
ellipsis: true,
|
||||
fixed: 'left',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
rename: 'status',
|
||||
type: 'select',
|
||||
options: [
|
||||
{
|
||||
label: '启用',
|
||||
value: 1,
|
||||
},
|
||||
{
|
||||
label: '禁用',
|
||||
value: 0,
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
params: {},
|
||||
search: (params: object) => {
|
||||
query.params = params;
|
||||
},
|
||||
});
|
||||
|
||||
// 表格
|
||||
const table = reactive({
|
||||
columns: [
|
||||
{
|
||||
title: '标识',
|
||||
dataIndex: 'id',
|
||||
key: 'id',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
key: 'name',
|
||||
},
|
||||
{
|
||||
title: '状态',
|
||||
dataIndex: 'status',
|
||||
key: 'status',
|
||||
scopedSlots: true,
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
dataIndex: 'action',
|
||||
key: 'action',
|
||||
scopedSlots: true,
|
||||
},
|
||||
],
|
||||
tableData: [],
|
||||
// 打开编辑弹窗
|
||||
openDialog: (row: object | undefined = {}) => {
|
||||
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,
|
||||
};
|
||||
editPermission_api(params).then(() => {
|
||||
message.success('操作成功');
|
||||
tableRef.value.reload();
|
||||
});
|
||||
},
|
||||
// 删除
|
||||
clickDel: (row: any) => {
|
||||
delPermission_api(row.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功!');
|
||||
}
|
||||
});
|
||||
},
|
||||
// 刷新列表
|
||||
refresh: () => {
|
||||
tableRef.value.reload();
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
|
@ -1,6 +1,5 @@
|
|||
<template>
|
||||
<div class="details-container">
|
||||
{{ route.params.id }}
|
||||
<a-tabs v-model:activeKey="activeKey">
|
||||
<a-tab-pane key="1" tab="权限分配"><Permiss /></a-tab-pane>
|
||||
<a-tab-pane key="2" tab="用户管理"><User /></a-tab-pane>
|
||||
|
|
|
@ -44,10 +44,7 @@
|
|||
<script setup lang="ts">
|
||||
import { FormInstance, message } from 'ant-design-vue';
|
||||
import { saveRole_api } from '@/api/system/role';
|
||||
const router = useRouter()
|
||||
const props = defineProps({
|
||||
open: Number,
|
||||
});
|
||||
const router = useRouter();
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
visible: false,
|
||||
|
@ -59,10 +56,15 @@ const dialog = reactive({
|
|||
if (resp.status === 200) {
|
||||
message.success('操作成功');
|
||||
dialog.visible = false;
|
||||
router.push(`/system/Role/detail/${resp.result.id}`)
|
||||
router.push(`/system/Role/detail/${resp.result.id}`);
|
||||
}
|
||||
});
|
||||
},
|
||||
// 控制弹窗的打开与关闭
|
||||
changeVisible: (status: boolean, defaultForm: object={}) => {
|
||||
dialog.visible = status;
|
||||
form.data = { name: '', description: '', ...defaultForm };
|
||||
},
|
||||
});
|
||||
// 表单相关
|
||||
const formRef = ref<FormInstance>();
|
||||
|
@ -74,18 +76,12 @@ const form = reactive({
|
|||
},
|
||||
});
|
||||
|
||||
watch(
|
||||
() => props.open,
|
||||
() => {
|
||||
// 重置表单
|
||||
form.data = {
|
||||
name: '',
|
||||
description: '',
|
||||
};
|
||||
formRef.value?.resetFields();
|
||||
dialog.visible = true;
|
||||
},
|
||||
);
|
||||
|
||||
|
||||
// 将打开弹窗的操作暴露给父组件
|
||||
defineExpose({
|
||||
openDialog: dialog.changeVisible
|
||||
})
|
||||
</script>
|
||||
|
||||
<style scoped></style>
|
||||
|
|
|
@ -45,7 +45,7 @@
|
|||
</JTable>
|
||||
|
||||
<div class="dialogs">
|
||||
<AddDialog :open="dialog.openAdd" />
|
||||
<AddDialog ref="addDialogRef" />
|
||||
</div>
|
||||
</a-card>
|
||||
</template>
|
||||
|
@ -59,8 +59,8 @@ import {
|
|||
import AddDialog from './components/AddDialog.vue';
|
||||
import { getRoleList_api, delRole_api } from '@/api/system/role';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const router = useRouter()
|
||||
const addDialogRef = ref(); // 新增弹窗实例
|
||||
const router = useRouter();
|
||||
// 筛选
|
||||
const query = reactive({
|
||||
columns: [
|
||||
|
@ -122,24 +122,21 @@ const table = reactive({
|
|||
],
|
||||
tableData: [],
|
||||
clickAdd: () => {
|
||||
dialog.openAdd += 1;
|
||||
addDialogRef.value.openDialog(true, {})
|
||||
},
|
||||
clickDel: (row: any) => {
|
||||
delRole_api(row.id).then((resp:any)=>{
|
||||
if(resp.status === 200){
|
||||
tableRef.value?.reload()
|
||||
message.success('操作成功!')
|
||||
delRole_api(row.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
tableRef.value?.reload();
|
||||
message.success('操作成功!');
|
||||
}
|
||||
})
|
||||
});
|
||||
},
|
||||
clickEdit: (row: any) => {
|
||||
router.push(`/system/Role/detail/${row.id}`)
|
||||
router.push(`/system/Role/detail/${row.id}`);
|
||||
},
|
||||
});
|
||||
// 弹窗相关
|
||||
const dialog = reactive({
|
||||
openAdd: 0,
|
||||
});
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
@ -83,19 +83,20 @@
|
|||
]"
|
||||
>
|
||||
<a-input
|
||||
class="login-code-input"
|
||||
v-model:value="form.verifyCode"
|
||||
autocomplete="off"
|
||||
:maxlength="64"
|
||||
placeholder="请输入验证码"
|
||||
></a-input>
|
||||
<div class="login-code">
|
||||
<img
|
||||
:src="codeUrl"
|
||||
@click="getCode()"
|
||||
class="login-code-img"
|
||||
/>
|
||||
</div>
|
||||
>
|
||||
<template #addonAfter>
|
||||
<div>
|
||||
<img
|
||||
:src="codeUrl"
|
||||
@click="getCode()"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
name="remember"
|
||||
|
@ -103,7 +104,14 @@
|
|||
>
|
||||
<a-checkbox
|
||||
v-model:checked="form.remember"
|
||||
>记住密码</a-checkbox
|
||||
@change="
|
||||
() =>
|
||||
(form.expires =
|
||||
form.remember
|
||||
? -1
|
||||
: 3600000)
|
||||
"
|
||||
>记住我</a-checkbox
|
||||
>
|
||||
</a-form-item>
|
||||
<a-form-item>
|
||||
|
@ -180,7 +188,6 @@ import {
|
|||
bindInfo,
|
||||
settingDetail,
|
||||
} from '@/api/login';
|
||||
import Cookies from 'js-cookie';
|
||||
import { useUserInfo } from '@/store/userInfo';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { BASE_API_PATH, TOKEN_KEY, Version_Code } from '@/utils/variable';
|
||||
|
@ -220,34 +227,24 @@ iconMap.set('dingtalk-ent-app', getImage('/bind/dingtalk.png'));
|
|||
iconMap.set('wechat-webapp', getImage('/bind/wechat-webapp.png'));
|
||||
|
||||
const onFinish = async () => {
|
||||
form.remember
|
||||
? Cookies.set('user', encodeURIComponent(JSON.stringify(form)), {
|
||||
expires: 7,
|
||||
})
|
||||
: Cookies.remove('user');
|
||||
Cookies.set('username', form.username, { expires: 30 });
|
||||
try {
|
||||
loading.value = true;
|
||||
const res: any = await authLogin(form);
|
||||
loading.value = false;
|
||||
if (res.success) {
|
||||
store.$patch({
|
||||
...res.result,
|
||||
username: form.username,
|
||||
});
|
||||
LocalStore.set(TOKEN_KEY, res?.result.token);
|
||||
// if (res.result.username === 'admin') {
|
||||
// const resp: any = await getInitSet();
|
||||
// if (resp.status === 200 && !resp.result.length) {
|
||||
// window.location.href = '/#/init-home';
|
||||
// return;
|
||||
// }
|
||||
// }
|
||||
// window.location.href = '/';
|
||||
|
||||
const resp: any = await getInitSet();
|
||||
if (resp.success) {
|
||||
router.push('/demo');
|
||||
if (res.result.username === 'admin') {
|
||||
const resp: any = await getInitSet();
|
||||
if (resp.status === 200 && !resp.result.length) {
|
||||
window.location.href = '/#/init-home';
|
||||
return;
|
||||
}
|
||||
}
|
||||
window.location.href = '/';
|
||||
}
|
||||
} catch (error) {
|
||||
form.verifyCode = '';
|
||||
|
@ -269,14 +266,6 @@ const getCode = async () => {
|
|||
}
|
||||
};
|
||||
|
||||
const getCookie = () => {
|
||||
// form.username = Cookies.get('username');
|
||||
if (!Cookies.get('user')) return;
|
||||
const user = JSON.parse(decodeURIComponent(Cookies.get('user')));
|
||||
form.username = user.username;
|
||||
form.password = user.password;
|
||||
form.remember = user.remember || false;
|
||||
};
|
||||
|
||||
const getOpen = () => {
|
||||
LocalStore.removeAll();
|
||||
|
@ -292,7 +281,7 @@ const getOpen = () => {
|
|||
}
|
||||
}
|
||||
});
|
||||
settingDetail('front').then((res) => {
|
||||
settingDetail('front').then((res: any) => {
|
||||
if (res.status === 200) {
|
||||
const ico: any = document.querySelector('link[rel="icon"]');
|
||||
ico.href = res.result.ico;
|
||||
|
@ -337,7 +326,6 @@ watch(
|
|||
|
||||
getOpen();
|
||||
getCode();
|
||||
getCookie();
|
||||
screenRotation(screenWidth.value, screenHeight.value);
|
||||
</script>
|
||||
|
||||
|
@ -470,23 +458,9 @@ screenRotation(screenWidth.value, screenHeight.value);
|
|||
}
|
||||
|
||||
.verifyCode {
|
||||
.login-code-input {
|
||||
width: 70%;
|
||||
float: left;
|
||||
}
|
||||
.login-code {
|
||||
width: 30%;
|
||||
height: 32px;
|
||||
float: left;
|
||||
background-color: #e4e6e7;
|
||||
img {
|
||||
cursor: pointer;
|
||||
vertical-align: middle;
|
||||
}
|
||||
.login-code-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
img {
|
||||
cursor: pointer;
|
||||
// vertical-align: middle;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|