Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev
This commit is contained in:
easy
commit
4652ce6d8b
|
Before Width: | Height: | Size: 544 B After Width: | Height: | Size: 544 B |
|
|
@ -120,3 +120,50 @@ export const update = (data: Partial<DeviceInstance>) => data.id ? server.patch(
|
|||
* @returns
|
||||
*/
|
||||
export const getConfigMetadata = (id: string) => server.get(`/device-instance/${id}/config-metadata`)
|
||||
|
||||
/**
|
||||
* 断开连接
|
||||
* @param id 设备id
|
||||
* @returns
|
||||
*/
|
||||
export const _disconnect = (id: string) => server.post(`/device-instance/${id}/disconnect`)
|
||||
|
||||
/**
|
||||
* 查询用户列表
|
||||
* @returns
|
||||
*/
|
||||
export const queryUserListNoPaging = () => server.post(`/user/_query/no-paging`, {
|
||||
paging: false,
|
||||
sorts: [{name: 'name', order: "asc"}]
|
||||
})
|
||||
|
||||
/**
|
||||
* 保存设备关系
|
||||
* @param id 设备id
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const saveRelations = (id: string, data: Record<string, any>) => server.patch(`/device/instance/${id}/relations`, data)
|
||||
|
||||
/**
|
||||
* 修改标签
|
||||
* @param id 设备id
|
||||
* @param data
|
||||
* @returns
|
||||
*/
|
||||
export const saveTags = (id: string, data: Record<string, any>) => server.patch(`/device/instance/${id}/tag`, data)
|
||||
|
||||
/**
|
||||
* 删除标签
|
||||
* @param deviceId 设备id
|
||||
* @param id 标签id
|
||||
* @returns
|
||||
*/
|
||||
export const delTags = (deviceId: string, id: string) => server.remove(`/device/instance/${deviceId}/tag/${id}`)
|
||||
|
||||
/**
|
||||
* 恢复默认配置
|
||||
* @param deviceId 设备id
|
||||
* @returns
|
||||
*/
|
||||
export const configurationReset = (deviceId: string) => server.put(`/device-instance/${deviceId}/configuration/_reset`)
|
||||
|
|
@ -108,7 +108,7 @@ export const deleteProduct = (id: string) => server.patch(`/device-product/${id}
|
|||
* 检测产品Id唯一性
|
||||
* @param id 产品ID
|
||||
*/
|
||||
export const queryProductId = (id: string) => server.post(`/device-product/${id}/exists`)
|
||||
export const queryProductId = (id: string) => server.get(`/device-product/${id}/exists`)
|
||||
/**
|
||||
* 保存产品
|
||||
* @param data 产品信息
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
import server from '@/utils/request';
|
||||
|
||||
// 更新全部菜单
|
||||
export const updateMenus = (data: any) => server.path(`/menu/iot/_all`, data)
|
||||
export const updateMenus = (data: any) => server.patch(`/menu/iot/_all`, data)
|
||||
// 添加角色
|
||||
export const addRole = (data: any) => server.post(`/role`, data)
|
||||
|
||||
|
|
|
|||
|
|
@ -98,3 +98,39 @@ export const _import = (configId: any, params: any) => server.get(`/network/card
|
|||
* @param params
|
||||
*/
|
||||
export const _export = (format: string, data: any) => server.post(`/network/card/download.${format}/_query`, data, 'blob');
|
||||
|
||||
/**
|
||||
* 验证iccid
|
||||
* @param id
|
||||
*/
|
||||
export const validateId = (id: string) => server.get(`/network/card/id/_validate?id=${id}`);
|
||||
|
||||
/**
|
||||
* 新增物联卡
|
||||
* @param data
|
||||
*/
|
||||
export const add = (data: any) => server.patch(`/network/card`, data);
|
||||
|
||||
/**
|
||||
* 编辑物联卡
|
||||
* @param data
|
||||
*/
|
||||
export const edit = (data: any) => server.put(`/network/card/${data.id}`, data);
|
||||
|
||||
/**
|
||||
* 根据id查看详情
|
||||
* @param id
|
||||
*/
|
||||
export const queryDetail = (id: any) => server.get(`/network/card/${id}`);
|
||||
|
||||
/**
|
||||
* 查询物联卡充值缴费日志
|
||||
* @param data
|
||||
*/
|
||||
export const queryRechargeList = (data: any) => server.post(`/network/card/recharge/_log`, data)
|
||||
|
||||
/**
|
||||
* 充值
|
||||
* @param data
|
||||
*/
|
||||
export const recharge = (data: any) => server.post(`/network/card/_recharge`, data)
|
||||
|
|
@ -231,6 +231,13 @@ const handleClick = () => {
|
|||
|
||||
:deep(.card-item-content-title) {
|
||||
cursor: pointer;
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: @primary-color;
|
||||
width: calc(100% - 100px);
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
:deep(.card-item-heard-name) {
|
||||
|
|
|
|||
|
|
@ -21,6 +21,7 @@
|
|||
import { ProLayout } from '@/components/Layout'
|
||||
import DefaultSetting from '../../../config/config'
|
||||
import { useMenuStore } from '@/store/menu'
|
||||
import { clearMenuItem } from 'components/Layout/utils'
|
||||
|
||||
type StateType = {
|
||||
collapsed: boolean
|
||||
|
|
@ -39,7 +40,7 @@ const layoutConf = reactive({
|
|||
siderWidth: DefaultSetting.layout.siderWidth,
|
||||
logo: DefaultSetting.layout.logo,
|
||||
title: DefaultSetting.layout.title,
|
||||
menuData: menu.menus,
|
||||
menuData: clearMenuItem(menu.siderMenus),
|
||||
});
|
||||
|
||||
const state = reactive<StateType>({
|
||||
|
|
|
|||
|
|
@ -32,7 +32,7 @@ export const HeaderView = defineComponent({
|
|||
height: `${headerHeight.value}px`,
|
||||
lineHeight: `${headerHeight.value}px`,
|
||||
width: `100%`,
|
||||
|
||||
background: 'transparent'
|
||||
}}
|
||||
/>
|
||||
<Layout.Header
|
||||
|
|
|
|||
|
|
@ -13,4 +13,8 @@
|
|||
flex-direction: column;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ant-menu-inline {
|
||||
background: transparent;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -50,6 +50,7 @@ onMounted(() => {
|
|||
automaticLayout: true,
|
||||
scrollBeyondLastLine: false,
|
||||
theme: props.theme, // 主题色: vs(默认高亮), vs-dark(黑色), hc-black(高亮黑色)
|
||||
formatOnPaste: true,
|
||||
});
|
||||
|
||||
instance.onDidChangeModelContent(() => {
|
||||
|
|
|
|||
|
|
@ -333,7 +333,7 @@ const JTable = defineComponent<JTableProps>({
|
|||
total={total.value}
|
||||
showQuickJumper={false}
|
||||
showSizeChanger={true}
|
||||
current={pageIndex.value}
|
||||
current={pageIndex.value + 1}
|
||||
pageSize={pageSize.value}
|
||||
pageSizeOptions={['12', '24', '48', '60', '100']}
|
||||
showTotal={(num) => {
|
||||
|
|
@ -345,7 +345,7 @@ const JTable = defineComponent<JTableProps>({
|
|||
handleSearch({
|
||||
...props.params,
|
||||
pageSize: size,
|
||||
pageIndex: pageSize.value === size ? page : 0
|
||||
pageIndex: pageSize.value === size ? (page ? page - 1 : 0) : 0
|
||||
})
|
||||
}}
|
||||
/>
|
||||
|
|
|
|||
11
src/main.ts
11
src/main.ts
|
|
@ -1,17 +1,14 @@
|
|||
import { createApp } from 'vue'
|
||||
import App from './App.vue'
|
||||
import store from './store'
|
||||
import router from './router'
|
||||
import components from './components'
|
||||
import router from './router'
|
||||
import './style.less'
|
||||
import 'ant-design-vue/es/notification/style/css';
|
||||
import Antd from 'ant-design-vue/es'
|
||||
|
||||
const app = createApp(App)
|
||||
|
||||
app.use(store)
|
||||
app.use(router)
|
||||
app.use(components)
|
||||
app.use(Antd)
|
||||
|
||||
app.mount('#app')
|
||||
.use(router)
|
||||
.use(components)
|
||||
.mount('#app')
|
||||
|
|
|
|||
|
|
@ -3,6 +3,8 @@ import menus, { LoginPath } from './menu'
|
|||
import { cleanToken, getToken } from '@/utils/comm'
|
||||
import { useUserInfo } from '@/store/userInfo'
|
||||
import { useSystem } from '@/store/system'
|
||||
import NotFindPage from '@/views/404.vue'
|
||||
import { useMenuStore } from 'store/menu'
|
||||
|
||||
const router = createRouter({
|
||||
history: createWebHashHistory(),
|
||||
|
|
@ -27,22 +29,23 @@ router.beforeEach((to, from, next) => {
|
|||
} else {
|
||||
const userInfo = useUserInfo()
|
||||
const system = useSystem()
|
||||
const menu = useMenuStore()
|
||||
|
||||
if (!userInfo.userInfos.username) {
|
||||
if (!menu.menuData.length) {
|
||||
userInfo.getUserInfo().then(() => {
|
||||
system.getSystemVersion().then((menuData: any[]) => {
|
||||
menuData.forEach(r => {
|
||||
router.addRoute('main', r)
|
||||
router.addRoute('base', r)
|
||||
})
|
||||
const redirect = decodeURIComponent((from.query.redirect as string) || to.path)
|
||||
if(to.path === redirect) {
|
||||
next({ ...to, replace: true })
|
||||
} else {
|
||||
next({ path: redirect })
|
||||
}
|
||||
router.addRoute('base',{
|
||||
path: '/:pathMatch(.*)',
|
||||
name: 'error',
|
||||
component: () => NotFindPage
|
||||
})
|
||||
|
||||
next({ ...to, replace: true })
|
||||
})
|
||||
}).catch(() => {
|
||||
console.log('userInfo', userInfo)
|
||||
cleanToken()
|
||||
next({ path: LoginPath })
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,24 +1,7 @@
|
|||
export const LoginPath = '/login'
|
||||
|
||||
export default [
|
||||
// {
|
||||
// path: '/',
|
||||
// redirect: LoginPath
|
||||
// },
|
||||
// {
|
||||
// path: '/init',
|
||||
// component: () => import('@/view/InitPage.vue')
|
||||
// },
|
||||
// {
|
||||
// path: LoginPath,
|
||||
// name: 'login',
|
||||
// component: () => import('@/view/Login/index.vue')
|
||||
// },
|
||||
// {
|
||||
// path: '/initsetting',
|
||||
// component: () => import('@/view/Login/initSet.vue')
|
||||
// }
|
||||
|
||||
{ path: '/*', redirect: '/'},
|
||||
// start: 测试用, 可删除
|
||||
{
|
||||
path: '/login',
|
||||
|
|
@ -32,10 +15,6 @@ export default [
|
|||
path: '/account/center/bind',
|
||||
component: () => import('@/views/account/Center/bind/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot/home',
|
||||
component: () => import('@/views/home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/table',
|
||||
component: () => import('@/views/demo/table/index.vue')
|
||||
|
|
@ -48,121 +27,13 @@ export default [
|
|||
path: '/search',
|
||||
component: () => import('@/views/demo/Search.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Config',
|
||||
component: () => import('@/views/notice/Config/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Config/detail/:id',
|
||||
component: () => import('@/views/notice/Config/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Template',
|
||||
component: () => import('@/views/notice/Template/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/notice/Template/detail/:id',
|
||||
component: () => import('@/views/notice/Template/Detail/index.vue')
|
||||
},
|
||||
|
||||
// end: 测试用, 可删除
|
||||
|
||||
// 设备管理
|
||||
{
|
||||
path: '/device/instance',
|
||||
component: () => import('@/views/device/Instance/index.vue')
|
||||
},
|
||||
{
|
||||
// path: '/device/Instance/detail/:id',
|
||||
// component: () => import('@/views/device/Instance/detail.vue')
|
||||
path: '/device/instance/detail/:id',
|
||||
component: () => import('@/views/device/Instance/Detail/index.vue')
|
||||
},
|
||||
// link 运维管理
|
||||
{
|
||||
path: '/link/log',
|
||||
component: () => import('@/views/link/Log/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/certificate',
|
||||
component: () => import('@/views/link/Certificate/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/certificate/detail/:type/:id',
|
||||
component: () => import('@/views/link/Certificate/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/accessConfig',
|
||||
component: () => import('@/views/link/AccessConfig/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/link/accessConfig/detail/add',
|
||||
component: () => import('@/views/link/AccessConfig/Detail/index.vue')
|
||||
},
|
||||
// system 系统管理
|
||||
{
|
||||
path:'/system/Basis',
|
||||
component: ()=>import('@/views/system/Basis/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/api',
|
||||
component: ()=>import('@/views/system/apiPage/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Role',
|
||||
component: ()=>import('@/views/system/Role/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Role/detail/:id',
|
||||
component: ()=>import('@/views/system/Role/Detail/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Permission',
|
||||
component: ()=>import('@/views/system/Permission/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Menu',
|
||||
component: ()=>import('@/views/system/Menu/index.vue')
|
||||
},
|
||||
{
|
||||
path:'/system/Menu/detail/:id',
|
||||
component: ()=>import('@/views/system/Menu/Detail/index.vue')
|
||||
},
|
||||
// 初始化
|
||||
{
|
||||
path: '/init-home',
|
||||
component: () => import('@/views/init-home/index.vue')
|
||||
},
|
||||
// 物联卡 iot-card
|
||||
{
|
||||
path: '/iot-card/Home',
|
||||
component: () => import('@/views/iot-card/Home/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/Dashboard',
|
||||
component: () => import('@/views/iot-card/Dashboard/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/iot-card/CardManagement',
|
||||
component: () => import('@/views/iot-card/CardManagement/index.vue')
|
||||
},
|
||||
// 北向输出
|
||||
{
|
||||
path: '/northbound/DuerOS',
|
||||
component: () => import('@/views/northbound/DuerOS/index.vue')
|
||||
},
|
||||
{
|
||||
path: '/northbound/AliCloud',
|
||||
component: () => import('@/views/northbound/AliCloud/index.vue')
|
||||
},
|
||||
|
||||
// 产品分类
|
||||
{
|
||||
path: '/iot/device/Category',
|
||||
component: () => import('@/views/device/Category/index.vue')
|
||||
} ,
|
||||
// 产品
|
||||
{
|
||||
path: '/iot/device/Product',
|
||||
component: () => import('@/views/device/Product/index.vue')
|
||||
}
|
||||
]
|
||||
|
|
@ -1,11 +1,14 @@
|
|||
import { defineStore } from "pinia";
|
||||
import { queryOwnThree } from '@/api/system/menu'
|
||||
import { filterAsnycRouter } from '@/utils/menu'
|
||||
import { cloneDeep } from 'lodash-es'
|
||||
|
||||
export const useMenuStore = defineStore({
|
||||
id: 'menu',
|
||||
state: () => ({
|
||||
menus: {},
|
||||
menuData: [],
|
||||
siderMenus: [],
|
||||
menusKey: []
|
||||
}),
|
||||
getters: {
|
||||
|
|
@ -51,7 +54,8 @@ export const useMenuStore = defineStore({
|
|||
];
|
||||
const resp = await queryOwnThree({ paging: false, terms: params })
|
||||
if (resp.success) {
|
||||
const menus = filterAsnycRouter(resp.result)
|
||||
const silderMenus = filterAsnycRouter(cloneDeep(resp.result))
|
||||
const menus = filterAsnycRouter(cloneDeep(resp.result))
|
||||
menus.push({
|
||||
path: '/',
|
||||
redirect: menus[0]?.path,
|
||||
|
|
@ -59,7 +63,9 @@ export const useMenuStore = defineStore({
|
|||
hideInMenu: true
|
||||
}
|
||||
})
|
||||
this.menus = menus
|
||||
this.menuData = menus
|
||||
this.siderMenus = silderMenus
|
||||
console.log('silderMenus', silderMenus)
|
||||
res(menus)
|
||||
}
|
||||
})
|
||||
|
|
|
|||
|
|
@ -1,11 +1,99 @@
|
|||
const pagesComponent = import.meta.glob('../views/system/**/*.vue', { eager: true });
|
||||
const pagesComponent = import.meta.glob('../views/**/*.vue', { eager: true });
|
||||
import { BlankLayoutPage, BasicLayoutPage } from 'components/Layout'
|
||||
|
||||
type ExtraRouteItem = {
|
||||
code: string
|
||||
name: string
|
||||
url?: string
|
||||
}
|
||||
/**
|
||||
* 权限信息
|
||||
*/
|
||||
export type PermissionInfo = {
|
||||
permission: string;
|
||||
actions: string[];
|
||||
};
|
||||
|
||||
/**
|
||||
* 按钮信息
|
||||
*/
|
||||
export type MenuButtonInfo = {
|
||||
id: string;
|
||||
name: string;
|
||||
permissions: PermissionInfo;
|
||||
createTime: number;
|
||||
describe?: string;
|
||||
options: Record<string, any>;
|
||||
};
|
||||
|
||||
|
||||
export type MenuItem = {
|
||||
id: string;
|
||||
/**
|
||||
* 名称
|
||||
*/
|
||||
name: string;
|
||||
/**
|
||||
* 编码
|
||||
*/
|
||||
code: string;
|
||||
/**
|
||||
* 所属应用
|
||||
*/
|
||||
application: string;
|
||||
/**
|
||||
* 描述
|
||||
*/
|
||||
describe: string;
|
||||
/**
|
||||
* url，路由
|
||||
*/
|
||||
url: string;
|
||||
/**
|
||||
* 图标
|
||||
*/
|
||||
icon: string;
|
||||
/**
|
||||
* 状态, 0为禁用，1为启用
|
||||
*/
|
||||
status: number;
|
||||
/**
|
||||
* 绑定权限信息
|
||||
*/
|
||||
permissions: PermissionInfo[];
|
||||
/**
|
||||
* 按钮定义信息
|
||||
*/
|
||||
buttons: MenuButtonInfo[];
|
||||
/**
|
||||
* 其他配置信息
|
||||
*/
|
||||
options: Record<string, any>;
|
||||
/**
|
||||
* 父级ID
|
||||
*/
|
||||
parentId: string;
|
||||
/**
|
||||
* 树结构路径
|
||||
*/
|
||||
path: string;
|
||||
/**
|
||||
* 排序序号
|
||||
*/
|
||||
sortIndex: number;
|
||||
/**
|
||||
* 树层级
|
||||
*/
|
||||
level: number;
|
||||
createTime: number;
|
||||
redirect?: string;
|
||||
children?: MenuItem[];
|
||||
accessSupport?: { text: string; value: string };
|
||||
appId?: string; //应用id
|
||||
isShow?: boolean;
|
||||
meta?: {
|
||||
title?: string
|
||||
icon?: string
|
||||
[key: string]: any
|
||||
},
|
||||
component?: any
|
||||
};
|
||||
|
||||
// 额外子级路由
|
||||
const extraRouteObj = {
|
||||
'media/Cascade': {
|
||||
|
|
@ -59,53 +147,82 @@ const extraRouteObj = {
|
|||
|
||||
|
||||
const resolveComponent = (name: any) => {
|
||||
// TODO 暂时用system进行测试
|
||||
const importPage = pagesComponent[`../views/${name}/index.vue`];
|
||||
// if (!importPage) {
|
||||
// throw new Error(`Unknown page ${name}. Is it located under Pages with a .vue extension?`);
|
||||
// }
|
||||
|
||||
if (!importPage) {
|
||||
console.warn(`Unknown page ${name}. Is it located under Pages with a .vue extension?`)
|
||||
}
|
||||
//@ts-ignore
|
||||
return !importPage ? BlankLayoutPage : importPage.default
|
||||
// return importPage.default
|
||||
return !!importPage ? importPage.default : undefined
|
||||
}
|
||||
|
||||
const findChildrenRoute = (code: string, url: string): ExtraRouteItem[] => {
|
||||
const findChildrenRoute = (code: string, url: string): MenuItem[] => {
|
||||
if (extraRouteObj[code]) {
|
||||
return extraRouteObj[code].children.map((route: ExtraRouteItem) => {
|
||||
return extraRouteObj[code].children.map((route: MenuItem) => {
|
||||
return {
|
||||
url: `${url}/${route.code}`,
|
||||
code: route.code,
|
||||
name: route.name
|
||||
name: route.name,
|
||||
isShow: false
|
||||
}
|
||||
})
|
||||
}
|
||||
return []
|
||||
}
|
||||
|
||||
const findDetailRouteItem = (code: string, url: string): Partial<MenuItem> | null => {
|
||||
const detailComponent = resolveComponent(`${code}/Detail`)
|
||||
if (detailComponent) {
|
||||
return {
|
||||
url: `${url}/Detail/:id`,
|
||||
component: detailComponent,
|
||||
name: '详情信息',
|
||||
isShow: false
|
||||
}
|
||||
}
|
||||
return null
|
||||
}
|
||||
|
||||
const findDetailRoutes = (routes: any[]): any[] => {
|
||||
const newRoutes: any[] = []
|
||||
routes.forEach((route: any) => {
|
||||
newRoutes.push(route)
|
||||
const detail = findDetailRouteItem(route.code, route.url)
|
||||
if (detail) {
|
||||
newRoutes.push(detail)
|
||||
}
|
||||
})
|
||||
return newRoutes
|
||||
}
|
||||
|
||||
export function filterAsnycRouter(asyncRouterMap: any, parentCode = '', level = 1) {
|
||||
|
||||
return asyncRouterMap.map((route: any) => {
|
||||
|
||||
route.path = `${route.url}`
|
||||
route.meta = {
|
||||
icon: route.icon,
|
||||
title: route.name
|
||||
title: route.name,
|
||||
hideInMenu: route.isShow === false
|
||||
}
|
||||
|
||||
// 查看是否有隐藏子路由
|
||||
route.children = route.children && route.children.length ? [...route.children, ...findChildrenRoute(route.code, route.url)] : findChildrenRoute(route.code, route.url)
|
||||
|
||||
// TODO 查看是否具有详情页
|
||||
// route.children = [...route.children, ]
|
||||
|
||||
const extraChildren = findChildrenRoute(route.code, route.url)
|
||||
route.children = route.children && route.children.length ? [...route.children, ...extraChildren] : extraChildren
|
||||
route.children = findDetailRoutes(route.children)
|
||||
if (route.children && route.children.length) {
|
||||
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
|
||||
// TODO 查看是否具有详情页
|
||||
route.children = filterAsnycRouter(route.children, `${parentCode}/${route.code}`, level + 1)
|
||||
route.redirect = route.children[0].url
|
||||
const showChildren = route.children.some((r: any) => !r.meta.hideInMenu)
|
||||
if (showChildren) {
|
||||
route.component = () => level === 1 ? BasicLayoutPage : BlankLayoutPage
|
||||
route.redirect = route.children[0].url
|
||||
} else {
|
||||
route.component = resolveComponent(route.code) || BlankLayoutPage;
|
||||
}
|
||||
} else {
|
||||
route.component = resolveComponent(route.code);
|
||||
route.component = resolveComponent(route.code) || BlankLayoutPage;
|
||||
}
|
||||
console.log(route.code, route)
|
||||
delete route.name
|
||||
return route
|
||||
})
|
||||
}
|
||||
|
|
@ -2,3 +2,9 @@
|
|||
export const urlReg = /(((^https?:(?:\/\/)?)(?:[-;:&=\+\$,\w]+@)?[A-Za-z0-9.-]+(?::\d+)?|(?:www.|[-;:&=\+\$,\w]+@)[A-Za-z0-9.-]+)((?:\/[\+~%\/.\w-_]*)?\??(?:[-\+=&;%@.\w_]*)#?(?:[\w]*))?)$/;
|
||||
|
||||
export const isUrl = (path: string): boolean => urlReg.test(path)
|
||||
|
||||
// 用于校验只允许输入英文或者数字或者-或者_
|
||||
|
||||
export const inputReg = /^[a-zA-Z0-9_\-]+$/
|
||||
|
||||
export const isInput = (value: string) => inputReg.test(value)
|
||||
|
|
@ -0,0 +1,14 @@
|
|||
<template>
|
||||
<a-result status="404" title="404" sub-title="Sorry, the page you visited does not exist.">
|
||||
</a-result>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: '404.vue'
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
|
||||
</style>
|
||||
|
|
@ -4,8 +4,12 @@
|
|||
<div style="font-size: 16px; font-weight: 700">配置</div>
|
||||
<a-space>
|
||||
<a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
|
||||
<a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
||||
<a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
||||
<a-popconfirm title="确认重新应用该配置？" @confirm="deployBtn">
|
||||
<a-button type="link" v-if="instanceStore.detail.current?.value !== 'notActive'"><AIcon type="CheckOutlined" />应用配置<a-tooltip title="修改配置后需重新应用后才能生效。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm title="确认恢复默认配置？" @confirm="resetBtn">
|
||||
<a-button type="link" v-if="instanceStore.detail.aloneConfiguration"><AIcon type="SyncOutlined" />恢复默认<a-tooltip title="该设备单独编辑过配置信息，点击此将恢复成默认的配置信息，请谨慎操作。"><AIcon type="QuestionCircleOutlined" /></a-tooltip></a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</div>
|
||||
<a-descriptions bordered size="small" v-for="i in config" :key="i.name">
|
||||
|
|
@ -28,7 +32,8 @@
|
|||
<script lang="ts" setup>
|
||||
import { useInstanceStore } from "@/store/instance"
|
||||
import { ConfigMetadata } from "@/views/device/Product/typings"
|
||||
import { getConfigMetadata } from '@/api/device/instance'
|
||||
import { getConfigMetadata, _deploy, configurationReset } from '@/api/device/instance'
|
||||
import { message } from "ant-design-vue"
|
||||
|
||||
const instanceStore = useInstanceStore()
|
||||
const visible = ref<boolean>(false)
|
||||
|
|
@ -36,11 +41,11 @@ const config = ref<ConfigMetadata[]>([])
|
|||
|
||||
watchEffect(() => {
|
||||
if(instanceStore.current.id){
|
||||
// getConfigMetadata(instanceStore.current.id).then(resp => {
|
||||
// if(resp.status === 200){
|
||||
// config.value = resp?.result as ConfigMetadata[]
|
||||
// }
|
||||
// })
|
||||
getConfigMetadata(instanceStore.current.id).then(resp => {
|
||||
if(resp.status === 200){
|
||||
config.value = resp?.result as ConfigMetadata[]
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
|
|
@ -54,4 +59,23 @@ const isExit = (property: string) => {
|
|||
);
|
||||
}
|
||||
|
||||
const deployBtn = async () => {
|
||||
if(instanceStore.current.id){
|
||||
const resp = await _deploy(instanceStore.current.id)
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功')
|
||||
instanceStore.refresh(instanceStore.current.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const resetBtn = async () => {
|
||||
if(instanceStore.current.id){
|
||||
const resp = await configurationReset(instanceStore.current.id)
|
||||
if (resp.status === 200) {
|
||||
message.success('恢复默认配置成功')
|
||||
instanceStore.refresh(instanceStore.current.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
@ -0,0 +1,125 @@
|
|||
<template>
|
||||
<a-drawer placement="right" :closable="false" :visible="true">
|
||||
<template #title>
|
||||
<div
|
||||
style="
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
"
|
||||
>
|
||||
<span
|
||||
><AIcon
|
||||
type="CloseOutlined"
|
||||
style="margin-right: 5px"
|
||||
@click="onClose"
|
||||
/>编辑</span
|
||||
>
|
||||
<a-button type="primary" @click="saveBtn">保存</a-button>
|
||||
</div>
|
||||
</template>
|
||||
<a-form layout="vertical" ref="formRef" :model="modelRef">
|
||||
<a-form-item
|
||||
:name="item.relation"
|
||||
:label="item.relationName"
|
||||
v-for="(item, index) in dataSource"
|
||||
:key="index"
|
||||
>
|
||||
<a-select
|
||||
showSearch
|
||||
mode="multiple"
|
||||
v-model:value="modelRef[item.relation]"
|
||||
:placeholder="`请选择${item.relationName}`"
|
||||
>
|
||||
<a-select-option
|
||||
:value="item.value"
|
||||
v-for="item in userList"
|
||||
:key="item.id"
|
||||
>{{ item.name }}</a-select-option
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-drawer>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryUserListNoPaging, saveRelations } from '@/api/device/instance';
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
|
||||
const formRef = ref();
|
||||
const modelRef = reactive({});
|
||||
const userList = ref<Record<string, any>[]>([]);
|
||||
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const dataSource = ref<Record<any, any>[]>([]);
|
||||
|
||||
watchEffect(() => {
|
||||
const arr = (instanceStore.current?.relations || [])
|
||||
dataSource.value = arr as Record<any, any>[];
|
||||
arr.map((item) => {
|
||||
modelRef[item.relation] = [
|
||||
...(item?.related || []).map((i: any) => JSON.stringify(i)),
|
||||
];
|
||||
});
|
||||
});
|
||||
|
||||
onMounted(() => {
|
||||
queryUserListNoPaging().then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
userList.value = (resp.result as Record<string, any>[]).map(
|
||||
(item) => {
|
||||
return {
|
||||
...item,
|
||||
label: item.name,
|
||||
value: JSON.stringify({
|
||||
id: item.id,
|
||||
name: item.name,
|
||||
}),
|
||||
};
|
||||
},
|
||||
);
|
||||
}
|
||||
});
|
||||
});
|
||||
|
||||
const onClose = () => {
|
||||
emit('close');
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const saveBtn = () => {
|
||||
formRef.value.validate().then(async () => {
|
||||
const values = toRaw(modelRef);
|
||||
if (Object.keys(values).length > 0) {
|
||||
const param: any[] = [];
|
||||
Object.keys(values).forEach((key) => {
|
||||
const item = dataSource.value.find((i) => i.relation === key);
|
||||
const items = (values[key] || []).map((i: string) =>
|
||||
JSON.parse(i),
|
||||
);
|
||||
if (item) {
|
||||
param.push({
|
||||
relatedType: 'user',
|
||||
relation: item.relation,
|
||||
description: '',
|
||||
related: [...items],
|
||||
});
|
||||
}
|
||||
});
|
||||
if(param.length && instanceStore.current.id){
|
||||
const resp = await saveRelations(instanceStore.current.id, param);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
emit('save');
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
@ -7,17 +7,27 @@
|
|||
</template>
|
||||
<a-descriptions-item :span="1" v-for="item in dataSource" :key="item.objectId" :label="item.relationName">{{ item?.related ? (item?.related || []).map(i => i.name).join(',') : '' }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<Save v-if="visible" @save="saveBtn" @close="visible = false" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useInstanceStore } from "@/store/instance"
|
||||
import Save from './Save.vue'
|
||||
const instanceStore = useInstanceStore()
|
||||
|
||||
const dataSource = ref<Record<any, any>[]>([])
|
||||
const visible = ref<boolean>(false);
|
||||
|
||||
watchEffect(() => {
|
||||
const arr = (instanceStore.current?.relations || []).reverse()
|
||||
dataSource.value = arr as Record<any, any>[]
|
||||
})
|
||||
|
||||
const saveBtn = () => {
|
||||
visible.value = false
|
||||
if(instanceStore.current.id){
|
||||
instanceStore.refresh(instanceStore.current.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,117 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:width="1000"
|
||||
:visible="true"
|
||||
title="编辑标签"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
>
|
||||
<a-table
|
||||
rowKey="id"
|
||||
:columns="columns"
|
||||
:data-source="dataSource"
|
||||
bordered
|
||||
:pagination="false"
|
||||
>
|
||||
<template #bodyCell="{ column, text, record }">
|
||||
<div style="width: 280px">
|
||||
<template v-if="['key', 'name'].includes(column.dataIndex)">
|
||||
<span>{{ text }}</span>
|
||||
</template>
|
||||
<template v-else>
|
||||
<ValueItem
|
||||
v-model:modelValue="record.value"
|
||||
:itemType="record.type"
|
||||
:options="
|
||||
record.type === 'enum'
|
||||
? (record?.dataType?.elements || []).map(
|
||||
(item) => {
|
||||
return {
|
||||
label: item.text,
|
||||
value: item.value,
|
||||
};
|
||||
},
|
||||
)
|
||||
: record.type === 'boolean'
|
||||
? [
|
||||
{ label: '是', value: true },
|
||||
{ label: '否', value: false },
|
||||
]
|
||||
: undefined
|
||||
"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useInstanceStore } from '@/store/instance';
|
||||
import { message } from 'ant-design-vue';
|
||||
import _ from 'lodash';
|
||||
import { saveTags, delTags } from '@/api/device/instance'
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
dataIndex: 'key',
|
||||
with: '33%',
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
dataIndex: 'name',
|
||||
with: '33%',
|
||||
},
|
||||
{
|
||||
title: '值',
|
||||
dataIndex: 'value',
|
||||
with: '34%',
|
||||
},
|
||||
];
|
||||
const instanceStore = useInstanceStore();
|
||||
|
||||
const dataSource = ref<Record<any, any>[]>([]);
|
||||
|
||||
watchEffect(() => {
|
||||
const arr = instanceStore.current?.tags || [];
|
||||
dataSource.value = _.cloneDeep(arr);
|
||||
});
|
||||
|
||||
const handleOk = async () => {
|
||||
if (dataSource.value.length) {
|
||||
const list = (dataSource.value || [])
|
||||
.filter((item: any) => item?.key && item?.value)
|
||||
.map((i: any) => {
|
||||
const { dataType, ...extra } = i;
|
||||
return { ...extra };
|
||||
});
|
||||
if (list.length) {
|
||||
// 填值
|
||||
const resp = await saveTags(instanceStore.current?.id || '', list);
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
}
|
||||
}
|
||||
const _list = (dataSource.value || []).filter((item: any) => item?.key && !item?.value);
|
||||
if (_list.length) {
|
||||
// 删除值
|
||||
_list.map(async (item: any) => {
|
||||
if (item.id) {
|
||||
await delTags(instanceStore.current?.id || '', item.id);
|
||||
}
|
||||
});
|
||||
}
|
||||
emit('save');
|
||||
} else {
|
||||
emit('close');
|
||||
}
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('close');
|
||||
};
|
||||
</script>
|
||||
|
|
@ -1,3 +1,34 @@
|
|||
<template>
|
||||
tags
|
||||
<div style="margin-top: 20px">
|
||||
<a-descriptions bordered>
|
||||
<template #title>
|
||||
标签
|
||||
<a-button type="link" @click="visible = true"><AIcon type="EditOutlined" />编辑</a-button>
|
||||
</template>
|
||||
<a-descriptions-item :span="1" v-for="item in dataSource" :key="item.key" :label="`${item.name}（${item.key})`">{{ item?.value }}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
<Save v-if="visible" @close="visible = false" @save="saveBtn" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { useInstanceStore } from "@/store/instance"
|
||||
import Save from './Save.vue'
|
||||
|
||||
const instanceStore = useInstanceStore()
|
||||
|
||||
const dataSource = ref<Record<any, any>[]>([])
|
||||
const visible = ref<boolean>(false)
|
||||
|
||||
watchEffect(() => {
|
||||
const arr = (instanceStore.current?.tags || [])
|
||||
dataSource.value = arr as Record<any, any>[]
|
||||
})
|
||||
|
||||
const saveBtn = () => {
|
||||
visible.value = false
|
||||
if(instanceStore.current.id){
|
||||
instanceStore.refresh(instanceStore.current.id)
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,40 @@
|
|||
<template>
|
||||
<page-container :tabList="list" @back="onBack" :tabActiveKey="instanceStore.active" @tabChange="onTabChange">
|
||||
<template #subTitle><div>{{instanceStore.current.name}}</div></template>
|
||||
<component :is="instanceStore.tabActiveKey" />
|
||||
<template #title>
|
||||
<div>
|
||||
<div style="display: flex; align-items: center;">
|
||||
<div>{{instanceStore.current.name}}</div>
|
||||
<a-divider type="vertical" />
|
||||
<a-space>
|
||||
<a-badge :text="instanceStore.current.state?.text" :status="statusMap.get(instanceStore.current.state?.value)" />
|
||||
<a-popconfirm title="确认启用设备" @confirm="handleAction" v-if="instanceStore.current.state?.value === 'notActive'">
|
||||
<a-button type="link">启用设备</a-button>
|
||||
</a-popconfirm>
|
||||
<a-popconfirm title="确认断开连接" @confirm="handleDisconnect" v-if="instanceStore.current.state?.value === 'online'">
|
||||
<a-button type="link">断开连接</a-button>
|
||||
</a-popconfirm>
|
||||
<a-tooltip v-if="instanceStore.current?.accessProvider === 'child-device' &&
|
||||
instanceStore.current?.state?.value === 'offline'" :title="instanceStore.current?.features?.find((item) => item.id === 'selfManageState')
|
||||
? '该设备的在线状态与父设备(网关设备)保持一致'
|
||||
: '该设备在线状态由设备自身运行状态决定，不继承父设备（网关设备）的在线状态'">
|
||||
<AIcon type="QuestionCircleOutlined" style="font-size: 14px" />
|
||||
</a-tooltip>
|
||||
</a-space>
|
||||
</div>
|
||||
<div style="padding-top: 10px">
|
||||
<a-descriptions size="small" :column="4">
|
||||
<a-descriptions-item label="ID">{{ instanceStore.current.id }}</a-descriptions-item>
|
||||
<a-descriptions-item label="所属产品">
|
||||
<a-button style="margin-top: -5px; padding: 0" type="link" @click="jumpProduct">{{ instanceStore.current.productName }}</a-button>
|
||||
</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
<template #extra>
|
||||
<img @click="handleRefresh" :src="getImage('/device/instance/button.png')" style="margin-right: 20px; cursor: pointer;" />
|
||||
</template>
|
||||
<component :is="tabs[instanceStore.tabActiveKey]" />
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
|
|
@ -9,9 +42,18 @@
|
|||
import { useInstanceStore } from '@/store/instance';
|
||||
import Info from './Info/index.vue';
|
||||
import Metadata from '../../components/Metadata/index.vue';
|
||||
import { _deploy, _disconnect } from '@/api/device/instance'
|
||||
import { message } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm';
|
||||
|
||||
const route = useRoute();
|
||||
const instanceStore = useInstanceStore()
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set('online', 'processing');
|
||||
statusMap.set('offline', 'error');
|
||||
statusMap.set('notActive', 'warning');
|
||||
|
||||
const list = [
|
||||
{
|
||||
key: 'Info',
|
||||
|
|
@ -46,4 +88,35 @@ const onBack = () => {
|
|||
const onTabChange = (e: string) => {
|
||||
instanceStore.tabActiveKey = e
|
||||
}
|
||||
|
||||
const handleAction = async () => {
|
||||
if(instanceStore.current.id){
|
||||
const resp = await _deploy(instanceStore.current.id)
|
||||
if(resp.status === 200){
|
||||
message.success('操作成功！')
|
||||
instanceStore.refresh(instanceStore.current.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleDisconnect = async () => {
|
||||
if(instanceStore.current.id){
|
||||
const resp = await _disconnect(instanceStore.current.id)
|
||||
if(resp.status === 200){
|
||||
message.success('操作成功！')
|
||||
instanceStore.refresh(instanceStore.current.id)
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const handleRefresh = async () => {
|
||||
if(instanceStore.current.id){
|
||||
await instanceStore.refresh(instanceStore.current.id)
|
||||
message.success('操作成功')
|
||||
}
|
||||
}
|
||||
|
||||
const jumpProduct = () => {
|
||||
message.warn('暂未开发')
|
||||
}
|
||||
</script>
|
||||
|
|
@ -1,4 +1,5 @@
|
|||
<template>
|
||||
<Search :columns="columns" target="device-instance" />
|
||||
<JTable
|
||||
ref="instanceRef"
|
||||
:columns="columns"
|
||||
|
|
@ -101,8 +102,8 @@
|
|||
:actions="getActions(slotProps, 'card')"
|
||||
v-bind="slotProps"
|
||||
:active="_selectedRowKeys.includes(slotProps.id)"
|
||||
:status="slotProps.state.value"
|
||||
:statusText="slotProps.state.text"
|
||||
:status="slotProps.state?.value"
|
||||
:statusText="slotProps.state?.text"
|
||||
:statusNames="{
|
||||
online: 'success',
|
||||
offline: 'error',
|
||||
|
|
@ -126,7 +127,7 @@
|
|||
<a-row>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">设备类型</div>
|
||||
<div>{{ slotProps.deviceType.text }}</div>
|
||||
<div>{{ slotProps.deviceType?.text }}</div>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="card-item-content-text">产品名称</div>
|
||||
|
|
@ -151,7 +152,7 @@
|
|||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
|
|
@ -166,7 +167,7 @@
|
|||
/>
|
||||
<template v-else>
|
||||
<AIcon :type="item.icon" />
|
||||
<span>{{ item.text }}</span>
|
||||
<span>{{ item?.text }}</span>
|
||||
</template>
|
||||
</a-button>
|
||||
</template>
|
||||
|
|
@ -176,8 +177,8 @@
|
|||
</template>
|
||||
<template #state="slotProps">
|
||||
<a-badge
|
||||
:text="slotProps.state === 1 ? ' 正常' : '禁用'"
|
||||
:status="statusMap.get(slotProps.state)"
|
||||
:text="slotProps.state?.text"
|
||||
:status="statusMap.get(slotProps.state?.value)"
|
||||
/>
|
||||
</template>
|
||||
<template #action="slotProps">
|
||||
|
|
@ -228,7 +229,7 @@
|
|||
:api="api"
|
||||
:type="type"
|
||||
/>
|
||||
<Save v-if="visible" :data="current" />
|
||||
<Save v-if="visible" :data="current" @close="visible = false" @save="saveBtn" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
|
|
@ -263,8 +264,10 @@ const api = ref<string>('');
|
|||
const type = ref<string>('');
|
||||
|
||||
const statusMap = new Map();
|
||||
statusMap.set(1, 'processing');
|
||||
statusMap.set(0, 'error');
|
||||
statusMap.set('online', 'processing');
|
||||
statusMap.set('offline', 'error');
|
||||
statusMap.set('notActive', 'warning');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: 'ID',
|
||||
|
|
@ -399,9 +402,9 @@ const getActions = (
|
|||
},
|
||||
{
|
||||
key: 'action',
|
||||
text: data.state.value !== 'notActive' ? '禁用' : '启用',
|
||||
text: data.state?.value !== 'notActive' ? '禁用' : '启用',
|
||||
tooltip: {
|
||||
title: data.state.value !== 'notActive' ? '禁用' : '启用',
|
||||
title: data.state?.value !== 'notActive' ? '禁用' : '启用',
|
||||
},
|
||||
icon:
|
||||
data.state.value !== 'notActive'
|
||||
|
|
@ -430,7 +433,7 @@ const getActions = (
|
|||
{
|
||||
key: 'delete',
|
||||
text: '删除',
|
||||
disabled: data.state.value !== 'notActive',
|
||||
disabled: data.state?.value !== 'notActive',
|
||||
tooltip: {
|
||||
title:
|
||||
data.state.value !== 'notActive'
|
||||
|
|
|
|||
|
|
@ -11,12 +11,21 @@
|
|||
cancelText="取消"
|
||||
v-bind="layout"
|
||||
width="650px"
|
||||
:confirmLoading="loading"
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<a-form :layout="'vertical'">
|
||||
<a-form
|
||||
:layout="'vertical'"
|
||||
:model="form"
|
||||
:rules="rules"
|
||||
ref="formRef"
|
||||
>
|
||||
<a-row type="flex">
|
||||
<a-col flex="180px">
|
||||
<a-form-item>
|
||||
<a-form-item name="photoUrl">
|
||||
<JUpload v-model="form.photoUrl" />
|
||||
</a-form-item>
|
||||
<!-- <a-form-item>
|
||||
<div class="upload-image-warp-logo">
|
||||
<div class="upload-image-border-logo">
|
||||
<a-upload
|
||||
|
|
@ -80,110 +89,105 @@
|
|||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-form-item>
|
||||
</a-form-item> -->
|
||||
</a-col>
|
||||
<a-col flex="auto">
|
||||
<a-form-item>
|
||||
<a-form-item name="id">
|
||||
<template #label>
|
||||
<span>ID</span>
|
||||
<a-tooltip
|
||||
title="若不填写，系统将自动生成唯一ID"
|
||||
>
|
||||
<img
|
||||
class="img-style"
|
||||
:src="getImage('/init-home/mark.png')"
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="modelRef.id"
|
||||
v-model:value="form.id"
|
||||
placeholder="请输入ID"
|
||||
:disabled="disabled"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="名称">
|
||||
<a-form-item label="名称" name="name">
|
||||
<a-input
|
||||
v-model:value="modelRef.name"
|
||||
v-model:value="form.name"
|
||||
placeholder="请输入名称"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<a-form-item label="产品分类">
|
||||
<a-form-item label="产品分类" name="classifiedId">
|
||||
<a-tree-select
|
||||
showSearch
|
||||
v-model:value="modelRef.productId"
|
||||
v-model:value="form.classifiedId"
|
||||
placeholder="请选择产品分类"
|
||||
:tree-data="treeList"
|
||||
@change="valueChange"
|
||||
:fieldNames="{ label: 'name', value: 'id' }"
|
||||
:filterTreeNode="
|
||||
(v, option) => filterSelectNode(v, option)
|
||||
"
|
||||
>
|
||||
<template> </template>
|
||||
</a-tree-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="设备类型">
|
||||
<a-row :span="24" :gutter="20">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in deviceList"
|
||||
:key="item.value"
|
||||
>
|
||||
<ChooseCard
|
||||
:value="item"
|
||||
v-bind="item"
|
||||
@click="handleClick"
|
||||
:active="_selectedRowKeys.includes(item.value)"
|
||||
<a-form-item label="设备类型" name="deviceType">
|
||||
<a-radio-group
|
||||
v-model:value="form.deviceType"
|
||||
style="width: 100%"
|
||||
@change="changeValue"
|
||||
>
|
||||
<a-row :span="24" :gutter="10">
|
||||
<a-col
|
||||
:span="8"
|
||||
v-for="item in deviceList"
|
||||
:key="item.value"
|
||||
>
|
||||
<template #img>
|
||||
<slot name="img">
|
||||
<img
|
||||
v-if="item.value === 'device'"
|
||||
:src="
|
||||
getImage('/device-type-1.png')
|
||||
"
|
||||
/>
|
||||
<img
|
||||
v-if="
|
||||
item.value === 'childrenDevice'
|
||||
"
|
||||
:src="
|
||||
getImage('/device-type-2.png')
|
||||
"
|
||||
/>
|
||||
<img
|
||||
v-if="item.value === 'gateway'"
|
||||
:src="
|
||||
getImage(
|
||||
'/device/device-type-3.png',
|
||||
)
|
||||
"
|
||||
/>
|
||||
</slot>
|
||||
</template>
|
||||
<template #content>
|
||||
<span
|
||||
class="card-style"
|
||||
:style="
|
||||
_selectedRowKeys.includes(
|
||||
item.value,
|
||||
)
|
||||
? 'color: #10239e'
|
||||
: ''
|
||||
"
|
||||
>{{
|
||||
item.value === 'device'
|
||||
? '直连设备'
|
||||
: item.value ===
|
||||
'childrenDevice'
|
||||
? '网关子设备'
|
||||
: item.value === 'gateway'
|
||||
? '网关设备'
|
||||
: ''
|
||||
}}</span
|
||||
<div class="button-style">
|
||||
<a-radio-button
|
||||
:value="item.value"
|
||||
style="height: 100%; width: 100%"
|
||||
:disabled="disabled"
|
||||
>
|
||||
</template>
|
||||
</ChooseCard>
|
||||
</a-col>
|
||||
</a-row>
|
||||
<div class="card-content">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="10">
|
||||
<!-- 图片 -->
|
||||
<div class="img-style">
|
||||
<img :src="item.logo" />
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="14">
|
||||
<span class="card-style">
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</a-col>
|
||||
</a-row>
|
||||
|
||||
<!-- 勾选 -->
|
||||
<div
|
||||
v-if="
|
||||
form.deviceType ===
|
||||
item.value
|
||||
"
|
||||
class="checked-icon"
|
||||
>
|
||||
<div>
|
||||
<CheckOutlined />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</a-radio-button>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明">
|
||||
<a-form-item label="说明" name="describe">
|
||||
<a-textarea
|
||||
v-model:value="modelRef.describe"
|
||||
v-model:value="form.describe"
|
||||
placeholder="请输入说明"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
|
@ -193,12 +197,21 @@
|
|||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryTree } from '@/api/device/category';
|
||||
import { category } from '@/api/device/product';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { getImage } from '@/utils/comm.ts';
|
||||
import { message } from 'ant-design-vue';
|
||||
import ChooseCard from '../ChooseCard/index.vue';
|
||||
import { filterTreeSelectNode, filterSelectNode } from '@/utils/comm';
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
import { isInput } from '@/utils/regular';
|
||||
import type { Rule } from 'ant-design-vue/es/form';
|
||||
import { queryProductId } from '@/api/device/product';
|
||||
import {
|
||||
SearchOutlined,
|
||||
CheckOutlined,
|
||||
DeleteOutlined,
|
||||
} from '@ant-design/icons-vue';
|
||||
|
||||
const emit = defineEmits(['close', 'save']);
|
||||
const props = defineProps({
|
||||
|
|
@ -211,9 +224,12 @@ const props = defineProps({
|
|||
default: 0,
|
||||
},
|
||||
});
|
||||
const loading = ref<boolean>(false);
|
||||
const treeList = ref<Record<string, any>[]>([]);
|
||||
const visible = ref(false);
|
||||
const logoLoading = ref(false);
|
||||
const visible = ref<boolean>(false);
|
||||
const logoLoading = ref<boolean>(false);
|
||||
const formRef = ref();
|
||||
const disabled = ref<boolean>(false);
|
||||
const useForm = Form.useForm;
|
||||
const _selectedRowKeys = ref([]);
|
||||
const photoValue = ref('/images/device-product.png');
|
||||
|
|
@ -229,42 +245,115 @@ const deviceList = ref([
|
|||
{
|
||||
label: '直连设备',
|
||||
value: 'device',
|
||||
logo: getImage('/device-type-1.png'),
|
||||
},
|
||||
{
|
||||
label: '网关子设备',
|
||||
value: 'childrenDevice',
|
||||
logo: getImage('/device-type-2.png'),
|
||||
},
|
||||
{
|
||||
label: '网关设备',
|
||||
value: 'gateway',
|
||||
logo: getImage('/device/device-type-3.png'),
|
||||
},
|
||||
]);
|
||||
|
||||
const modelRef = reactive({
|
||||
const form = reactive({
|
||||
id: '',
|
||||
name: '',
|
||||
classifiedId: '',
|
||||
classifiedName: '',
|
||||
deviceType: '',
|
||||
describe: '',
|
||||
photoUrl: '',
|
||||
photoUrl: getImage('/device/instance/device-card.png'),
|
||||
});
|
||||
/**
|
||||
* 校验id
|
||||
*/
|
||||
const validateInput = async (_rule: Rule, value: string) => {
|
||||
if (value) {
|
||||
if (!isInput(value)) {
|
||||
return Promise.reject('请输入英文或者数字或者-或者_');
|
||||
} else {
|
||||
const res = await queryProductId(value);
|
||||
if (res.status === 200 && res.result) {
|
||||
return Promise.reject('ID重复');
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
}
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 校验是否选择设备类型
|
||||
*/
|
||||
const validateDeviceType = async (_rule: Rule, value: string) => {
|
||||
if (!value) {
|
||||
return Promise.reject('请选择设备类型');
|
||||
} else {
|
||||
return Promise.resolve();
|
||||
}
|
||||
};
|
||||
const rules = reactive({
|
||||
id: [{ validator: validateInput, trigger: 'blur' }],
|
||||
name: [{ required: true, message: '请输入名称', trigger: 'blur' }],
|
||||
deviceType: [
|
||||
{
|
||||
required: true,
|
||||
validator: validateDeviceType,
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
});
|
||||
|
||||
const valueChange = (value: string, label: string) => {
|
||||
form.classifiedName = label[0];
|
||||
};
|
||||
/**
|
||||
* 查询产品分类
|
||||
*/
|
||||
const queryProductTree = async () => {
|
||||
category({
|
||||
paging: false,
|
||||
}).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
treeList.value = resp.result;
|
||||
}
|
||||
});
|
||||
};
|
||||
watch(
|
||||
() => props.isAdd,
|
||||
() => {
|
||||
queryTree({ paging: false }).then((resp) => {
|
||||
if (resp.status === 200) {
|
||||
treeList.value = resp.result;
|
||||
}
|
||||
});
|
||||
// queryProductTree();
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
/**
|
||||
* 显示弹窗
|
||||
*/
|
||||
const show = () => {
|
||||
const show = (data: any) => {
|
||||
console.log(props.isAdd, '11111');
|
||||
if (props.isAdd === 2) {
|
||||
// form.name = data.name;
|
||||
// form.classifiedId = data.classifiedId;
|
||||
// form.classifiedName = data.classifiedName;
|
||||
// form.photoUrl = data.photoUrl || photoValue.value;
|
||||
// form.deviceType = data.deviceType.value;
|
||||
// form.describe = form.describe;
|
||||
// form.id = data.id;
|
||||
// disabled.value = true;
|
||||
} else {
|
||||
// form.name = '';
|
||||
// form.classifiedId = '';
|
||||
// form.classifiedName = '';
|
||||
// form.photoUrl = photoValue.value;
|
||||
// form.deviceType = '';
|
||||
// form.describe = '';
|
||||
// form.id = '';
|
||||
}
|
||||
visible.value = true;
|
||||
};
|
||||
|
||||
|
|
@ -274,11 +363,18 @@ const show = () => {
|
|||
const close = () => {
|
||||
visible.value = false;
|
||||
};
|
||||
const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
||||
form,
|
||||
rules,
|
||||
);
|
||||
/**
|
||||
* 卡片点击事件
|
||||
* 提交表单数据
|
||||
*/
|
||||
const handleClick = (dt: any) => {
|
||||
_selectedRowKeys.value = dt;
|
||||
const submitData = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {})
|
||||
.catch((err: any) => {});
|
||||
};
|
||||
/**
|
||||
* 文件上传之前
|
||||
|
|
@ -306,9 +402,13 @@ const handleChange = (info: any) => {
|
|||
if (info.file.status === 'done') {
|
||||
info.file.url = info.file.response?.result;
|
||||
logoLoading.value = false;
|
||||
logoLoading.value = info.file.response?.result;
|
||||
photoValue.value = info.file.response?.result;
|
||||
}
|
||||
};
|
||||
/**
|
||||
* 初始化
|
||||
*/
|
||||
// queryProductTree();
|
||||
defineExpose({
|
||||
show: show,
|
||||
});
|
||||
|
|
@ -316,7 +416,7 @@ defineExpose({
|
|||
<style scoped lang="less">
|
||||
.card-style {
|
||||
position: relative;
|
||||
top: 8px;
|
||||
top: 19px;
|
||||
}
|
||||
.upload-image-warp-logo {
|
||||
display: flex;
|
||||
|
|
@ -383,4 +483,37 @@ defineExpose({
|
|||
}
|
||||
}
|
||||
}
|
||||
.button-style {
|
||||
background-color: #fff;
|
||||
height: 66px;
|
||||
.card-content {
|
||||
width: 100%;
|
||||
.img-style {
|
||||
position: relative;
|
||||
top: 16px;
|
||||
}
|
||||
.checked-icon {
|
||||
position: absolute;
|
||||
right: -22px;
|
||||
bottom: -22px;
|
||||
z-index: 2;
|
||||
width: 44px;
|
||||
height: 44px;
|
||||
color: #2f54eb;
|
||||
// background-color: #2f54eb;
|
||||
transform: rotate(-45deg);
|
||||
|
||||
> div {
|
||||
position: relative;
|
||||
height: 100%;
|
||||
transform: rotate(45deg);
|
||||
background-color: transparent;
|
||||
}
|
||||
}
|
||||
}
|
||||
// &:hover {
|
||||
// color: #2f54eb;
|
||||
// border: 1px solid #2f54eb;
|
||||
// }
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -107,7 +107,7 @@
|
|||
</template>
|
||||
</JTable>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save ref="saveRef" />
|
||||
<Save ref="saveRef" :isAdd="isAdd" :title="title" />
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
|
|
@ -140,6 +140,8 @@ import Save from './Save/index.vue';
|
|||
/**
|
||||
* 表格数据
|
||||
*/
|
||||
const isAdd = ref<number>(0);
|
||||
const title = ref<string>('');
|
||||
const statusMap = new Map();
|
||||
statusMap.set(1, 'success');
|
||||
statusMap.set(0, 'error');
|
||||
|
|
@ -187,6 +189,7 @@ const columns = [
|
|||
];
|
||||
|
||||
const _selectedRowKeys = ref<string[]>([]);
|
||||
const currentForm = ref({});
|
||||
|
||||
const onSelectChange = (keys: string[]) => {
|
||||
_selectedRowKeys.value = [...keys];
|
||||
|
|
@ -205,11 +208,14 @@ const handleClick = (dt: any) => {
|
|||
}
|
||||
};
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
const getActions = (
|
||||
data: Partial<Record<string, any>>,
|
||||
type: 'card' | 'table',
|
||||
): ActionsType[] => {
|
||||
if (!data) {
|
||||
return [];
|
||||
}
|
||||
return [
|
||||
const actions = [
|
||||
{
|
||||
key: 'view',
|
||||
text: '查看',
|
||||
|
|
@ -217,6 +223,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: () => {},
|
||||
},
|
||||
{
|
||||
key: 'edit',
|
||||
|
|
@ -226,6 +233,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
},
|
||||
|
||||
icon: 'EditOutlined',
|
||||
onClick: () => {
|
||||
title.value = '编辑';
|
||||
isAdd.value = 2;
|
||||
nextTick(() => {
|
||||
saveRef.value.show(data);
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'download',
|
||||
|
|
@ -283,10 +297,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
icon: 'DeleteOutlined',
|
||||
},
|
||||
];
|
||||
return actions;
|
||||
};
|
||||
|
||||
const add = () => {
|
||||
saveRef.value.show();
|
||||
isAdd.value = 1;
|
||||
title.value = '新增';
|
||||
saveRef.value.show(currentForm.value);
|
||||
};
|
||||
|
||||
// 筛选
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@
|
|||
ref="bindDeviceRef"
|
||||
:columns="columns"
|
||||
:request="queryUnbounded"
|
||||
model="TABLE"
|
||||
:defaultParams="{
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
}"
|
||||
|
|
|
|||
|
|
@ -0,0 +1,167 @@
|
|||
<!-- 物联卡查看 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<!-- 新增、编辑 -->
|
||||
<Save
|
||||
v-if="visible"
|
||||
:type="saveType"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
<a-row :gutter="[24, 24]">
|
||||
<a-col :span="24">
|
||||
<a-card>
|
||||
<a-descriptions size="small" :column="3" bordered>
|
||||
<template #title>
|
||||
<span key="1">基本信息</span>
|
||||
<a-button
|
||||
key="2"
|
||||
type="link"
|
||||
@click="
|
||||
() => {
|
||||
visible = true;
|
||||
current = detail;
|
||||
saveType = 'edit';
|
||||
}
|
||||
"
|
||||
>
|
||||
<AIcon type="EditOutlined"></AIcon>
|
||||
编辑
|
||||
</a-button>
|
||||
</template>
|
||||
|
||||
<a-descriptions-item label="卡号">{{
|
||||
detail.id
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="ICCID">{{
|
||||
detail.iccId
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="绑定设备">{{
|
||||
detail.deviceName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="平台类型">{{
|
||||
detail.operatorPlatformType?.text
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="平台名称">{{
|
||||
detail.platformConfigName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="运营商">{{
|
||||
detail.operatorName
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="类型">{{
|
||||
detail.cardType?.text
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="激活日期">{{
|
||||
detail.activationDate
|
||||
? moment(detail.activationDate).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="更新时间">{{
|
||||
detail.updateTime
|
||||
? moment(detail.updateTime).format(
|
||||
'YYYY-MM-DD HH:mm:ss',
|
||||
)
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="总流量">{{
|
||||
detail.totalFlow
|
||||
? detail.totalFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="使用流量">{{
|
||||
detail.usedFlow
|
||||
? detail.usedFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="剩余流量">{{
|
||||
detail.residualFlow
|
||||
? detail.residualFlow.toFixed(2) + ' M'
|
||||
: ''
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="状态">{{
|
||||
detail?.cardState?.text
|
||||
}}</a-descriptions-item>
|
||||
<a-descriptions-item label="说明">{{
|
||||
detail?.describe
|
||||
}}</a-descriptions-item>
|
||||
</a-descriptions>
|
||||
</a-card>
|
||||
</a-col>
|
||||
<a-col :span="24">
|
||||
<!-- 流量统计 -->
|
||||
<a-row :gutter="40">
|
||||
<a-col :span="16">
|
||||
<div class="card">
|
||||
<Guide title="流量统计">
|
||||
<template #extra></template>
|
||||
</Guide>
|
||||
<LineChart
|
||||
:showX="true"
|
||||
:showY="true"
|
||||
style="min-height: 450px"
|
||||
:chartData="flowData"
|
||||
/>
|
||||
</div>
|
||||
</a-col>
|
||||
<a-col :span="8">
|
||||
<div class="card">
|
||||
<a-row :gutter="20">
|
||||
<a-col :span="24">
|
||||
<Guide title="数据统计" />
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import moment from 'moment';
|
||||
import type { CardManagement } from '../typing';
|
||||
import { queryDetail } from '@/api/iot-card/cardManagement';
|
||||
import Save from '../Save.vue';
|
||||
import Guide from '@/views/iot-card/components/Guide.vue';
|
||||
import LineChart from '@/views/iot-card/components/LineChart.vue';
|
||||
|
||||
const route = useRoute();
|
||||
|
||||
const visible = ref<boolean>(false);
|
||||
const current = ref<Partial<CardManagement>>({});
|
||||
const saveType = ref<string>('');
|
||||
const detail = ref<any>({});
|
||||
|
||||
const flowData = ref<any[]>([]);
|
||||
|
||||
const getDetail = () => {
|
||||
queryDetail(route.query.id).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
detail.value = resp.result;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增、编辑关闭弹窗
|
||||
* @param val 加载表格
|
||||
*/
|
||||
const saveChange = (val: any) => {
|
||||
visible.value = false;
|
||||
current.value = {};
|
||||
if (val) {
|
||||
getDetail();
|
||||
}
|
||||
};
|
||||
|
||||
getDetail();
|
||||
</script>
|
||||
<style scoped lang="less">
|
||||
.card {
|
||||
padding: 24px;
|
||||
background-color: #fff;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,246 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:maskClosable="false"
|
||||
width="600px"
|
||||
:visible="true"
|
||||
:title="type === 'add' ? '新增' : '编辑'"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:confirmLoading="btnLoading"
|
||||
>
|
||||
<div style="margin-top: 10px">
|
||||
<a-form
|
||||
:layout="'vertical'"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="modelRef"
|
||||
>
|
||||
<a-form-item label="卡号" name="id">
|
||||
<a-input
|
||||
v-model:value="modelRef.id"
|
||||
placeholder="请输入卡号"
|
||||
:disabled="type === 'edit'"
|
||||
></a-input>
|
||||
</a-form-item>
|
||||
<a-form-item name="iccId">
|
||||
<template #label>
|
||||
<span>
|
||||
ICCID
|
||||
<a-tooltip title="IC卡的唯一识别号码">
|
||||
<AIcon
|
||||
type="QuestionCircleOutlined"
|
||||
style="margin-left: 2px"
|
||||
/>
|
||||
</a-tooltip>
|
||||
</span>
|
||||
</template>
|
||||
<a-input
|
||||
v-model:value="modelRef.iccId"
|
||||
placeholder="请输入ICCID"
|
||||
:disabled="type === 'edit'"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="平台对接" name="platformConfigId">
|
||||
<a-select
|
||||
showSearch
|
||||
:filter-option="filterOption"
|
||||
:disabled="type === 'edit'"
|
||||
allowClear
|
||||
:options="platformConfigList"
|
||||
v-model:value="modelRef.platformConfigId"
|
||||
placeholder="请选择平台对接"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="运营商" name="operatorName">
|
||||
<a-select
|
||||
allowClear
|
||||
showSearch
|
||||
:filter-option="filterOption"
|
||||
:options="OperatorList"
|
||||
v-model:value="modelRef.operatorName"
|
||||
placeholder="请选择运营商"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="类型" name="cardType">
|
||||
<a-select
|
||||
allowClear
|
||||
showSearch
|
||||
:disabled="type === 'edit'"
|
||||
:filter-option="filterOption"
|
||||
:options="TypeList"
|
||||
v-model:value="modelRef.cardType"
|
||||
placeholder="请选择类型"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="describe">
|
||||
<a-textarea
|
||||
v-model:value="modelRef.describe"
|
||||
placeholder="请输入说明"
|
||||
showCount
|
||||
:maxlength="200"
|
||||
/>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import {
|
||||
queryPlatformNoPage,
|
||||
validateId,
|
||||
add,
|
||||
edit,
|
||||
} from '@/api/iot-card/cardManagement';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { OperatorList, TypeList } from '@/views/iot-card/data';
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
const props = defineProps({
|
||||
type: {
|
||||
type: String,
|
||||
},
|
||||
data: {
|
||||
type: Object,
|
||||
default: undefined,
|
||||
},
|
||||
});
|
||||
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const platformConfigList = ref<Record<string, any>[]>([]);
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const modelRef = reactive({
|
||||
id: '',
|
||||
iccId: '',
|
||||
platformConfigId: undefined,
|
||||
operatorName: undefined,
|
||||
cardType: undefined,
|
||||
describe: '',
|
||||
});
|
||||
|
||||
const isValidateId = async (id: string) => {
|
||||
const res: any = await validateId(id);
|
||||
if (res.status === 200) {
|
||||
if (res.result?.passed) {
|
||||
return '';
|
||||
} else {
|
||||
return res.result.reason;
|
||||
}
|
||||
} else {
|
||||
return '请输入输入正确的ICCID';
|
||||
}
|
||||
};
|
||||
|
||||
const vailIccId = async (_: Record<string, any>, value: string) => {
|
||||
if (value) {
|
||||
const validateId =
|
||||
props.type === 'add' ? await isValidateId(value) : '';
|
||||
if (validateId === '') {
|
||||
return Promise.resolve();
|
||||
} else {
|
||||
return Promise.reject(new Error(`${validateId}`));
|
||||
}
|
||||
// } else {
|
||||
// return Promise.reject(new Error('请输入卡号'));
|
||||
}
|
||||
};
|
||||
|
||||
const rules = {
|
||||
id: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入卡号',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
{
|
||||
validator: vailIccId,
|
||||
trigger: 'blur',
|
||||
},
|
||||
],
|
||||
iccId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入ICCID',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
],
|
||||
platformConfigId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择平台对接',
|
||||
},
|
||||
],
|
||||
cardType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择类型',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const filterOption = (input: string, option: any) => {
|
||||
return (
|
||||
option.componentOptions.children[0].text
|
||||
.toLowerCase()
|
||||
.indexOf(input.toLowerCase()) >= 0
|
||||
);
|
||||
};
|
||||
|
||||
watch(
|
||||
() => props.data,
|
||||
(newValue) => {
|
||||
queryPlatformNoPage({
|
||||
paging: false,
|
||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||
terms: [{ column: 'state', value: 'enabled' }],
|
||||
}).then((resp: any) => {
|
||||
if (resp.status === 200) {
|
||||
platformConfigList.value = resp.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
}
|
||||
});
|
||||
Object.assign(modelRef, newValue);
|
||||
},
|
||||
{ immediate: true, deep: true },
|
||||
);
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('change', false);
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
btnLoading.value = true;
|
||||
const resp =
|
||||
props.type === 'add'
|
||||
? await add(toRaw(modelRef))
|
||||
: await edit(toRaw(modelRef));
|
||||
btnLoading.value = false;
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
emit('change', true);
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
@ -151,11 +151,18 @@
|
|||
<span class="flow-text">
|
||||
{{ slotProps.totalFlow }}
|
||||
</span>
|
||||
<span class="card-item-content-text"> M 使用流量</span>
|
||||
<span class="card-item-content-text">
|
||||
M 使用流量</span
|
||||
>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div class="progress-text">
|
||||
<div>{{ slotProps.totalFlow - slotProps.usedFlow }} %</div>
|
||||
<div>
|
||||
{{
|
||||
slotProps.totalFlow - slotProps.usedFlow
|
||||
}}
|
||||
%
|
||||
</div>
|
||||
<div class="card-item-content-text">
|
||||
总共 {{ slotProps.totalFlow }} M
|
||||
</div>
|
||||
|
|
@ -163,7 +170,9 @@
|
|||
<a-progress
|
||||
:strokeColor="'#ADC6FF'"
|
||||
:showInfo="false"
|
||||
:percent="slotProps.totalFlow - slotProps.usedFlow"
|
||||
:percent="
|
||||
slotProps.totalFlow - slotProps.usedFlow
|
||||
"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -307,6 +316,13 @@
|
|||
:cardId="cardId"
|
||||
@change="bindDevice"
|
||||
/>
|
||||
<!-- 新增、编辑 -->
|
||||
<Save
|
||||
v-if="visible"
|
||||
:type="saveType"
|
||||
:data="current"
|
||||
@change="saveChange"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -333,6 +349,9 @@ import { getImage } from '@/utils/comm';
|
|||
import BindDevice from './BindDevice.vue';
|
||||
import Import from './Import.vue';
|
||||
import Export from './Export.vue';
|
||||
import Save from './Save.vue';
|
||||
|
||||
const router = useRouter();
|
||||
|
||||
const cardManageRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
|
|
@ -344,6 +363,7 @@ const exportVisible = ref<boolean>(false);
|
|||
const importVisible = ref<boolean>(false);
|
||||
const cardId = ref<any>();
|
||||
const current = ref<Partial<CardManagement>>({});
|
||||
const saveType = ref<string>('');
|
||||
|
||||
const columns = [
|
||||
{
|
||||
|
|
@ -504,6 +524,11 @@ const getActions = (
|
|||
title: '编辑',
|
||||
},
|
||||
icon: 'EditOutlined',
|
||||
onClick: () => {
|
||||
visible.value = true;
|
||||
current.value = data;
|
||||
saveType.value = 'edit';
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'view',
|
||||
|
|
@ -512,6 +537,14 @@ const getActions = (
|
|||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: () => {
|
||||
router.push({
|
||||
path: '/iot-card/CardManagement/Detail',
|
||||
query: {
|
||||
id: data.id,
|
||||
},
|
||||
});
|
||||
},
|
||||
},
|
||||
{
|
||||
key: 'bindDevice',
|
||||
|
|
@ -651,10 +684,27 @@ const handleView = (id: string) => {
|
|||
/**
|
||||
* 新增
|
||||
*/
|
||||
const handleAdd = () => {};
|
||||
const handleAdd = () => {
|
||||
visible.value = true;
|
||||
current.value = {};
|
||||
saveType.value = 'add';
|
||||
};
|
||||
|
||||
/**
|
||||
* 新增、编辑关闭弹窗
|
||||
* @param val 加载表格
|
||||
*/
|
||||
const saveChange = (val: any) => {
|
||||
visible.value = false;
|
||||
current.value = {};
|
||||
if (val) {
|
||||
cardManageRef.value?.reload();
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 绑定设备关闭窗口
|
||||
* @param val
|
||||
*/
|
||||
const bindDevice = (val: boolean) => {
|
||||
bindDeviceVisible.value = false;
|
||||
|
|
|
|||
|
|
@ -0,0 +1,191 @@
|
|||
<template>
|
||||
<a-modal
|
||||
:maskClosable="false"
|
||||
width="600px"
|
||||
:visible="true"
|
||||
title="充值"
|
||||
@ok="handleOk"
|
||||
@cancel="handleCancel"
|
||||
:confirmLoading="btnLoading"
|
||||
>
|
||||
<div>
|
||||
<div class="modal-info">
|
||||
<AIcon
|
||||
type="ExclamationCircleOutlined"
|
||||
style="margin-right: 6px"
|
||||
/>暂只支持移动OneLink平台
|
||||
</div>
|
||||
<a-form
|
||||
layout="vertical"
|
||||
ref="formRef"
|
||||
:rules="rules"
|
||||
:model="modelRef"
|
||||
>
|
||||
<a-form-item label="平台对接" name="configId">
|
||||
<a-select
|
||||
v-model:value="modelRef.configId"
|
||||
:options="configList"
|
||||
allowClear
|
||||
show-search
|
||||
style="width: 100%"
|
||||
placeholder="请选择平台对接"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
<a-form-item label="账户id" name="rechargeId">
|
||||
<a-input
|
||||
v-model:value="modelRef.rechargeId"
|
||||
placeholder="请输入账户id"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="充值金额" name="chargeMoney">
|
||||
<a-input-number
|
||||
allowClear
|
||||
:precision="2"
|
||||
style="width: 100%"
|
||||
v-model:value="modelRef.chargeMoney"
|
||||
:min="1"
|
||||
:max="500"
|
||||
placeholder="请输入1~500之间的金额"
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="支付方式" name="paymentType">
|
||||
<a-select
|
||||
allowClear
|
||||
:options="PaymentMethod"
|
||||
v-model:value="modelRef.paymentType"
|
||||
placeholder="请选择支付方式"
|
||||
>
|
||||
</a-select>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</div>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { queryPlatformNoPage, recharge } from '@/api/iot-card/cardManagement';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { PaymentMethod } from '@/views/iot-card/data';
|
||||
|
||||
const emit = defineEmits(['change']);
|
||||
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const configList = ref<Record<string, any>[]>([]);
|
||||
|
||||
const formRef = ref();
|
||||
|
||||
const modelRef = reactive({
|
||||
configId: undefined,
|
||||
rechargeId: '',
|
||||
chargeMoney: undefined,
|
||||
paymentType: undefined,
|
||||
});
|
||||
|
||||
const rules = {
|
||||
configId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择平台对接',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
],
|
||||
rechargeId: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入账户id',
|
||||
},
|
||||
{
|
||||
max: 64,
|
||||
message: '最多输入64个字符',
|
||||
},
|
||||
],
|
||||
chargeMoney: [
|
||||
{
|
||||
required: true,
|
||||
message: '请输入充值金额',
|
||||
},
|
||||
// {
|
||||
// min: 1,
|
||||
// max: 500,
|
||||
// message: '请输入1~500之间的数字',
|
||||
// },
|
||||
],
|
||||
paymentType: [
|
||||
{
|
||||
required: true,
|
||||
message: '请选择支付方式',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const queryProvidersList = () => {
|
||||
queryPlatformNoPage({
|
||||
paging: false,
|
||||
terms: [
|
||||
{
|
||||
terms: [
|
||||
{
|
||||
column: 'operatorName',
|
||||
termType: 'eq',
|
||||
value: 'onelink',
|
||||
},
|
||||
{
|
||||
column: 'state',
|
||||
termType: 'eq',
|
||||
value: 'enabled',
|
||||
type: 'and',
|
||||
},
|
||||
],
|
||||
},
|
||||
],
|
||||
}).then((res: any) => {
|
||||
configList.value = res.result.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
});
|
||||
};
|
||||
|
||||
const handleCancel = () => {
|
||||
emit('change');
|
||||
formRef.value.resetFields();
|
||||
};
|
||||
|
||||
const handleOk = () => {
|
||||
formRef.value
|
||||
.validate()
|
||||
.then(async () => {
|
||||
btnLoading.value = true;
|
||||
const resp: any = await recharge(toRaw(modelRef));
|
||||
btnLoading.value = false;
|
||||
if (resp.status === 200) {
|
||||
if (resp.result === '失败') {
|
||||
message.error('缴费失败');
|
||||
} else {
|
||||
window.open(resp.result);
|
||||
}
|
||||
emit('change');
|
||||
formRef.value.resetFields();
|
||||
}
|
||||
})
|
||||
.catch((err: any) => {
|
||||
console.log('error', err);
|
||||
});
|
||||
};
|
||||
|
||||
queryProvidersList();
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.modal-info {
|
||||
color: rgba(0, 0, 0, 0.55);
|
||||
background-color: #f6f6f6;
|
||||
padding: 6px 12px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,170 @@
|
|||
<!-- 充值管理 -->
|
||||
<template>
|
||||
<div class="page-container">
|
||||
<Search
|
||||
:columns="columns"
|
||||
target="iot-card-management-search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
<JTable
|
||||
ref="rechargeRef"
|
||||
:columns="columns"
|
||||
:request="queryRechargeList"
|
||||
model="TABLE"
|
||||
:defaultParams="{ sorts: [{ name: 'createTime', order: 'desc' }] }"
|
||||
:params="params"
|
||||
>
|
||||
<template #headerTitle>
|
||||
<a-space>
|
||||
<a-button type="primary" @click="visible = true">
|
||||
充值
|
||||
</a-button>
|
||||
<div class="tips-text">
|
||||
<span style="margin-right: 8px; font-size: 16px">
|
||||
<AIcon type="ExclamationCircleOutlined"></AIcon>
|
||||
</span>
|
||||
本平台仅提供充值入口，具体充值结果需以运营商的充值结果为准
|
||||
</div>
|
||||
</a-space>
|
||||
</template>
|
||||
<template #createTime="slotProps">
|
||||
{{
|
||||
slotProps.createTime
|
||||
? moment(slotProps.createTime).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>
|
||||
<!-- 充值 -->
|
||||
<Save v-if="visible" @change="saveChange" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import moment from 'moment';
|
||||
import type { ActionsType } from '@/components/Table';
|
||||
import { queryRechargeList } from '@/api/iot-card/cardManagement';
|
||||
import Save from './Save.vue';
|
||||
|
||||
const rechargeRef = ref<Record<string, any>>({});
|
||||
const params = ref<Record<string, any>>({});
|
||||
const visible = ref<boolean>(false);
|
||||
|
||||
const columns = [
|
||||
{
|
||||
title: '充值金额',
|
||||
dataIndex: 'chargeMoney',
|
||||
key: 'chargeMoney',
|
||||
ellipsis: true,
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '支付方式',
|
||||
dataIndex: 'paymentType',
|
||||
key: 'paymentType',
|
||||
search: {
|
||||
type: 'string',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '订单号',
|
||||
dataIndex: 'orderNumber',
|
||||
key: 'orderNumber',
|
||||
ellipsis: true,
|
||||
},
|
||||
{
|
||||
title: '支付URL',
|
||||
dataIndex: 'url',
|
||||
key: 'url',
|
||||
},
|
||||
{
|
||||
title: '订单时间',
|
||||
dataIndex: 'createTime',
|
||||
key: 'createTime',
|
||||
scopedSlots: true,
|
||||
search: {
|
||||
type: 'date',
|
||||
},
|
||||
},
|
||||
{
|
||||
title: '操作',
|
||||
key: 'action',
|
||||
fixed: 'right',
|
||||
scopedSlots: true,
|
||||
},
|
||||
];
|
||||
|
||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||
if (!data) return [];
|
||||
return [
|
||||
{
|
||||
key: 'view',
|
||||
text: '查看',
|
||||
tooltip: {
|
||||
title: '查看',
|
||||
},
|
||||
icon: 'EyeOutlined',
|
||||
onClick: () => {},
|
||||
},
|
||||
];
|
||||
};
|
||||
|
||||
const handleSearch = (params: any) => {
|
||||
console.log(params);
|
||||
params.value = params;
|
||||
};
|
||||
|
||||
/**
|
||||
* 充值关闭弹窗
|
||||
* @param val 加载表格
|
||||
*/
|
||||
const saveChange = (val: any) => {
|
||||
visible.value = false;
|
||||
if (val) {
|
||||
rechargeRef.value?.reload();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="less">
|
||||
.tips-text {
|
||||
padding-left: 24px;
|
||||
background: #fff;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
|
|
@ -0,0 +1,76 @@
|
|||
import { getImage } from '@/utils/comm';
|
||||
|
||||
// 平台类型
|
||||
export const PlatformTypeList = [
|
||||
{
|
||||
label: '移动OneLink',
|
||||
value: 'OneLinkPB',
|
||||
imgUrl: getImage('/iot-card/onelink.png'),
|
||||
},
|
||||
{
|
||||
label: '电信Ctwing',
|
||||
value: 'CtwingCmp',
|
||||
imgUrl: getImage('/iot-card/ctwingcmp.png'),
|
||||
},
|
||||
{
|
||||
label: '联通Unicom',
|
||||
value: 'UnicomCmp',
|
||||
imgUrl: getImage('/iot-card/unicom.png'),
|
||||
},
|
||||
];
|
||||
|
||||
//运营商
|
||||
export const OperatorList = [
|
||||
{
|
||||
label: '移动',
|
||||
value: '移动',
|
||||
},
|
||||
{
|
||||
label: '电信',
|
||||
value: '电信',
|
||||
},
|
||||
{
|
||||
label: '联通',
|
||||
value: '联通',
|
||||
},
|
||||
];
|
||||
|
||||
// 类型
|
||||
export const TypeList = [
|
||||
{
|
||||
label: '年卡',
|
||||
value: 'year',
|
||||
},
|
||||
{
|
||||
label: '季卡',
|
||||
value: 'season',
|
||||
},
|
||||
{
|
||||
label: '月卡',
|
||||
value: 'month',
|
||||
},
|
||||
{
|
||||
label: '其他',
|
||||
value: 'other',
|
||||
},
|
||||
];
|
||||
|
||||
// 支付方式
|
||||
export const PaymentMethod = [
|
||||
{
|
||||
label: '支付宝手机网站支付',
|
||||
value: 'ALIPAY_WAP',
|
||||
},
|
||||
{
|
||||
label: '支付宝网页及时到账支付',
|
||||
value: 'ALIPAY_WEB',
|
||||
},
|
||||
{
|
||||
label: '微信公众号支付',
|
||||
value: 'WEIXIN_JSAPI',
|
||||
},
|
||||
{
|
||||
label: '微信扫码支付',
|
||||
value: 'WEIXIN_NATIVE',
|
||||
},
|
||||
];
|
||||
|
|
@ -0,0 +1,3 @@
|
|||
<template>
|
||||
123
|
||||
</template>
|
||||
|
|
@ -148,7 +148,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
}
|
||||
|
||||
const add = () => {
|
||||
message.warn('123')
|
||||
// router.push(`/northbound/DuerOS/detail/:id`)
|
||||
}
|
||||
|
||||
</script>
|
||||
|
|
@ -311,31 +311,42 @@ const msgType = ref([
|
|||
// 表单数据
|
||||
const formData = ref<ConfigFormData>({
|
||||
configuration: {
|
||||
appKey: '',
|
||||
appSecret: '',
|
||||
host: '',
|
||||
port: 25,
|
||||
ssl: false,
|
||||
sender: '',
|
||||
username: '',
|
||||
password: '',
|
||||
},
|
||||
description: '',
|
||||
name: '',
|
||||
provider: 'dingTalkMessage',
|
||||
type: 'dingTalk',
|
||||
provider: 'embedded',
|
||||
type: 'email',
|
||||
});
|
||||
|
||||
// 根据通知方式展示对应的字段
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
(val) => {
|
||||
// formData.value.configuration = Object.values<any>(CONFIG_FIELD_MAP[val])[0];
|
||||
msgType.value = MSG_TYPE[val];
|
||||
|
||||
formData.value.provider = msgType.value[0].value;
|
||||
|
||||
formData.value.configuration =
|
||||
CONFIG_FIELD_MAP[val][formData.value.provider];
|
||||
|
||||
clearValid();
|
||||
},
|
||||
);
|
||||
|
||||
computed(() =>
|
||||
Object.assign(
|
||||
formData.value.configuration,
|
||||
CONFIG_FIELD_MAP[formData.value.type][formData.value.provider],
|
||||
),
|
||||
watch(
|
||||
() => formData.value.provider,
|
||||
(val) => {
|
||||
formData.value.configuration =
|
||||
CONFIG_FIELD_MAP[formData.value.type][val];
|
||||
|
||||
clearValid();
|
||||
},
|
||||
);
|
||||
|
||||
// 验证规则
|
||||
|
|
@ -405,15 +416,15 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
|||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
() => {
|
||||
|
||||
const clearValid = () => {
|
||||
setTimeout(() => {
|
||||
clearValidate();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
}, 200);
|
||||
};
|
||||
|
||||
const getDetail = async () => {
|
||||
if (route.params.id === ':id') return;
|
||||
const res = await configApi.detail(route.params.id as string);
|
||||
// console.log('res: ', res);
|
||||
formData.value = res.result;
|
||||
|
|
@ -441,10 +452,12 @@ const handleSubmit = () => {
|
|||
message.success('保存成功');
|
||||
router.back();
|
||||
}
|
||||
btnLoading.value = false;
|
||||
})
|
||||
.catch((err) => {
|
||||
console.log('err: ', err);
|
||||
})
|
||||
.finally(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
|
|
@ -120,15 +120,15 @@
|
|||
]
|
||||
"
|
||||
>
|
||||
<!-- <a-input
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.markdown?.title
|
||||
formData.template.markdown.title
|
||||
"
|
||||
placeholder="请输入标题"
|
||||
/> -->
|
||||
/>
|
||||
</a-form-item>
|
||||
</template>
|
||||
<!-- <template
|
||||
<template
|
||||
v-if="
|
||||
formData.template.messageType === 'link'
|
||||
"
|
||||
|
|
@ -141,7 +141,7 @@
|
|||
>
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.link?.title
|
||||
formData.template.link.title
|
||||
"
|
||||
placeholder="请输入标题"
|
||||
/>
|
||||
|
|
@ -149,21 +149,40 @@
|
|||
<a-form-item label="图片链接">
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.link?.picUrl
|
||||
formData.template.link.picUrl
|
||||
"
|
||||
placeholder="请输入图片链接"
|
||||
/>
|
||||
>
|
||||
<template #addonAfter>
|
||||
<a-upload
|
||||
name="file"
|
||||
:action="FILE_UPLOAD"
|
||||
:headers="{
|
||||
[TOKEN_KEY]:
|
||||
LocalStore.get(
|
||||
TOKEN_KEY,
|
||||
),
|
||||
}"
|
||||
:showUploadList="false"
|
||||
@change="
|
||||
(e) => handleChange(e)
|
||||
"
|
||||
>
|
||||
<AIcon type="UploadOutlined" />
|
||||
</a-upload>
|
||||
</template>
|
||||
</a-input>
|
||||
</a-form-item>
|
||||
<a-form-item label="内容链接">
|
||||
<a-input
|
||||
v-model:value="
|
||||
formData.template.link
|
||||
?.messageUrl
|
||||
.messageUrl
|
||||
"
|
||||
placeholder="请输入内容链接"
|
||||
/>
|
||||
</a-form-item>
|
||||
</template> -->
|
||||
</template>
|
||||
</template>
|
||||
</template>
|
||||
<!-- 微信 -->
|
||||
|
|
@ -456,7 +475,7 @@
|
|||
|
||||
<script setup lang="ts">
|
||||
import { getImage } from '@/utils/comm';
|
||||
import { Form } from 'ant-design-vue';
|
||||
import { Form, UploadChangeParam } from 'ant-design-vue';
|
||||
import { message } from 'ant-design-vue';
|
||||
import { IVariableDefinitions, TemplateFormData } from '../types';
|
||||
import {
|
||||
|
|
@ -475,6 +494,10 @@ import ToUser from './components/ToUser.vue';
|
|||
import ToOrg from './components/ToOrg.vue';
|
||||
import ToTag from './components/ToTag.vue';
|
||||
|
||||
import { FILE_UPLOAD } from '@/api/comm';
|
||||
import { LocalStore } from '@/utils/comm';
|
||||
import { TOKEN_KEY } from '@/utils/variable';
|
||||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const useForm = Form.useForm;
|
||||
|
|
@ -495,12 +518,19 @@ const msgType = ref([
|
|||
|
||||
// 表单数据
|
||||
const formData = ref<TemplateFormData>({
|
||||
template: {},
|
||||
template: {
|
||||
subject: '',
|
||||
sendTo: [],
|
||||
attachments: [],
|
||||
message: '',
|
||||
text: '',
|
||||
},
|
||||
name: '',
|
||||
type: 'email',
|
||||
provider: 'embedded',
|
||||
description: '',
|
||||
variableDefinitions: [],
|
||||
configId: '',
|
||||
});
|
||||
|
||||
// 根据通知方式展示对应的字段
|
||||
|
|
@ -513,17 +543,22 @@ watch(
|
|||
formData.value.provider = msgType.value[0].value;
|
||||
// console.log('formData.value.template: ', formData.value.template);
|
||||
|
||||
formData.value.template =
|
||||
TEMPLATE_FIELD_MAP[val][formData.value.provider];
|
||||
|
||||
getConfigList();
|
||||
clearValid();
|
||||
},
|
||||
);
|
||||
|
||||
computed(() => {
|
||||
// console.log('formData.value.type: ', formData.value.type);
|
||||
Object.assign(
|
||||
formData.value.template,
|
||||
TEMPLATE_FIELD_MAP[formData.value.type][formData.value.provider],
|
||||
);
|
||||
});
|
||||
watch(
|
||||
() => formData.value.provider,
|
||||
(val) => {
|
||||
formData.value.template = TEMPLATE_FIELD_MAP[formData.value.type][val];
|
||||
|
||||
clearValid();
|
||||
},
|
||||
);
|
||||
|
||||
// 验证规则
|
||||
const formRules = ref({
|
||||
|
|
@ -557,14 +592,6 @@ const { resetFields, validate, validateInfos, clearValidate } = useForm(
|
|||
formData.value,
|
||||
formRules.value,
|
||||
);
|
||||
watch(
|
||||
() => formData.value.type,
|
||||
() => {
|
||||
formData.value.variableDefinitions = [];
|
||||
clearValidate();
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
|
||||
watch(
|
||||
() => formData.value.template.message,
|
||||
|
|
@ -593,6 +620,13 @@ watch(
|
|||
{ deep: true },
|
||||
);
|
||||
|
||||
const clearValid = () => {
|
||||
setTimeout(() => {
|
||||
formData.value.variableDefinitions = [];
|
||||
clearValidate();
|
||||
}, 200);
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取详情
|
||||
*/
|
||||
|
|
@ -618,6 +652,15 @@ const getConfigList = async () => {
|
|||
};
|
||||
getConfigList();
|
||||
|
||||
/**
|
||||
* link消息类型 图片链接
|
||||
*/
|
||||
const handleChange = (info: UploadChangeParam) => {
|
||||
if (info.file.status === 'done') {
|
||||
formData.value.template.link.picUrl = info.file.response?.result;
|
||||
}
|
||||
};
|
||||
|
||||
/**
|
||||
* 配置选择改变
|
||||
*/
|
||||
|
|
@ -653,9 +696,12 @@ getSignsList();
|
|||
*/
|
||||
const btnLoading = ref<boolean>(false);
|
||||
const handleSubmit = () => {
|
||||
if (formData.value.type === 'email') delete formData.value.configId;
|
||||
if (formData.value.template.messageType === 'markdown') delete formData.value.template.link
|
||||
if (formData.value.template.messageType === 'link') delete formData.value.template.markdown
|
||||
// console.log('formData.value: ', formData.value);
|
||||
validate()
|
||||
.then(async () => {
|
||||
// console.log('formData.value: ', formData.value);
|
||||
formData.value.template.ttsCode =
|
||||
formData.value.template.templateCode;
|
||||
btnLoading.value = true;
|
||||
|
|
@ -673,18 +719,20 @@ const handleSubmit = () => {
|
|||
})
|
||||
.catch((err) => {
|
||||
console.log('err: ', err);
|
||||
})
|
||||
.finally(() => {
|
||||
btnLoading.value = false;
|
||||
});
|
||||
};
|
||||
|
||||
// test
|
||||
watch(
|
||||
() => formData.value,
|
||||
(val) => {
|
||||
console.log('formData.value: ', val);
|
||||
},
|
||||
{ deep: true },
|
||||
);
|
||||
// watch(
|
||||
// () => formData.value,
|
||||
// (val) => {
|
||||
// console.log('formData.value: ', val);
|
||||
// },
|
||||
// { deep: true },
|
||||
// );
|
||||
// test
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -256,7 +256,7 @@ const getMethodTxt = (type: string) => {
|
|||
* 新增
|
||||
*/
|
||||
const handleAdd = () => {
|
||||
router.push(`/notice/Config/detail/:id`);
|
||||
router.push(`/notice/Template/detail/:id`);
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -323,7 +323,7 @@ const getActions = (
|
|||
onClick: () => {
|
||||
// visible.value = true;
|
||||
// current.value = data;
|
||||
router.push(`/notice/Config/detail/${data.id}`);
|
||||
router.push(`/notice/Template/detail/${data.id}`);
|
||||
},
|
||||
},
|
||||
{
|
||||
|
|
|
|||
Loading…
Reference in New Issue