feat: 告警记录
This commit is contained in:
leiqiaochu
commit
5c3e344348
|
|
@ -1,3 +1,31 @@
|
||||||
import server from '@/utils/request'
|
import server from '@/utils/request'
|
||||||
|
|
||||||
export const getSsoBinds_api = (): any =>server.get(`/application/sso/me/bindings`)
|
export const getSsoBinds_api = (): any =>server.get(`/application/sso/me/bindings`)
|
||||||
|
|
||||||
|
// 获取登录用户信息
|
||||||
|
export const getMeInfo_api = () => server.get(`/user/detail`);
|
||||||
|
// 修改登录用户信息
|
||||||
|
export const updateMeInfo_api = (data:object) => server.put(`/user/detail`,data);
|
||||||
|
// 修改登录用户密码
|
||||||
|
export const updateMepsd_api = (data:object) => server.put(`/user/passwd`,data);
|
||||||
|
// 第三方账号解绑
|
||||||
|
export const unBind_api = (appId: string) => server.post(`/application/sso/${appId}/unbind/me`);
|
||||||
|
/**
|
||||||
|
* 校验字段合法性
|
||||||
|
* @param type 类型
|
||||||
|
* @param name 值
|
||||||
|
*/
|
||||||
|
export const validateField_api = (type: 'username' | 'password', name: string) => server.post(`/user/${type}/_validate`,name,{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/plain'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
/**
|
||||||
|
* 校验旧密码是否正确
|
||||||
|
* @param password 旧密码
|
||||||
|
*/
|
||||||
|
export const checkOldPassword_api = (password:string) => server.post(`/user/me/password/_validate`,password,{
|
||||||
|
headers: {
|
||||||
|
'Content-Type': 'text/plain'
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
|
||||||
|
|
@ -1,5 +1,6 @@
|
||||||
|
import { OperatorItem } from '@/components/FRuleEditor/Operator/typings'
|
||||||
import server from '@/utils/request'
|
import server from '@/utils/request'
|
||||||
import { DeviceMetadata, ProductItem, DepartmentItem } from '@/views/device/Product/typings'
|
import { DeviceMetadata, ProductItem, DepartmentItem, MetadataType } from '@/views/device/Product/typings'
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* 根据条件查询产品（不带翻页）
|
* 根据条件查询产品（不带翻页）
|
||||||
|
|
|
||||||
|
|
@ -3,15 +3,13 @@ import { BASE_API_PATH } from '@/utils/variable';
|
||||||
|
|
||||||
export const PROTOCOL_UPLOAD = `${BASE_API_PATH}/file/upload`;
|
export const PROTOCOL_UPLOAD = `${BASE_API_PATH}/file/upload`;
|
||||||
|
|
||||||
export const detail = (id: string) => server.get(`/gateway/device/${id}`);
|
export const save = (data: Object) => server.post(`/protocol`, data);
|
||||||
|
|
||||||
export const save = (data: Object) => server.post(`/gateway/device`, data);
|
export const update = (data: Object) => server.patch(`/protocol`, data);
|
||||||
|
|
||||||
export const update = (data: Object) => server.patch(`/gateway/device`, data);
|
|
||||||
|
|
||||||
export const list = (data: Object) => server.post(`/protocol/_query`, data);
|
export const list = (data: Object) => server.post(`/protocol/_query`, data);
|
||||||
|
|
||||||
export const remove = (id: string) => server.remove(`/gateway/device/${id}`);
|
export const remove = (id: string) => server.remove(`/protocol/${id}`);
|
||||||
|
|
||||||
export const querySystemApi = (data: Object) =>
|
export const querySystemApi = (data: Object) =>
|
||||||
server.post(`/system/config/scopes`, data);
|
server.post(`/system/config/scopes`, data);
|
||||||
|
|
|
||||||
|
|
@ -4,8 +4,6 @@ import type { CascadeItem } from '@/views/media/Cascade/typings'
|
||||||
export default {
|
export default {
|
||||||
// 列表
|
// 列表
|
||||||
list: (data: any) => server.post<any>(`/media/gb28181-cascade/_query`, data),
|
list: (data: any) => server.post<any>(`/media/gb28181-cascade/_query`, data),
|
||||||
// 列表字段通道数量, 来自下面接口的total
|
|
||||||
queryCount: (id: string) => server.post<any>(`/media/gb28181-cascade/${id}/bindings/_query`),
|
|
||||||
// 详情
|
// 详情
|
||||||
detail: (id: string): any => server.get(`/media/gb28181-cascade/${id}`),
|
detail: (id: string): any => server.get(`/media/gb28181-cascade/${id}`),
|
||||||
// 新增
|
// 新增
|
||||||
|
|
@ -26,4 +24,17 @@ export default {
|
||||||
// SIP本地地址
|
// SIP本地地址
|
||||||
all: () => server.get<any>(`/network/resources/alive/_all`),
|
all: () => server.get<any>(`/network/resources/alive/_all`),
|
||||||
|
|
||||||
|
// 查询已绑定的通道, list列表字段通道数量, 来自下面接口的total
|
||||||
|
queryBindChannel: (id: string, data: any) => server.post<any>(`/media/gb28181-cascade/${id}/bindings/_query`, data),
|
||||||
|
// 绑定通道
|
||||||
|
bindChannel: (id: string, data: string[]) => server.post<any>(`/media/gb28181-cascade/${id}/_bind`, data),
|
||||||
|
// 解绑
|
||||||
|
unbindChannel: (id: string, data: string[]) => server.post<any>(`/media/gb28181-cascade/${id}/_unbind`, data),
|
||||||
|
// 验证国标ID是否存在
|
||||||
|
validateField: (id: string, data: string[]): any => server.post(`/media/gb28181-cascade/${id}/gbChannelId/_validate`, data),
|
||||||
|
// 更改国标ID
|
||||||
|
updateGbChannelId: (id: string, data: any): any => server.put(`/media/gb28181-cascade/binding/${id}`, data),
|
||||||
|
// 查询通道分页列表
|
||||||
|
queryChannelList: (data: any): any => server.post(`media/channel/_query`, data),
|
||||||
|
|
||||||
}
|
}
|
||||||
|
|
@ -63,7 +63,7 @@ const iconKeys = [
|
||||||
'HistoryOutlined',
|
'HistoryOutlined',
|
||||||
'ToolOutlined',
|
'ToolOutlined',
|
||||||
'FileOutlined',
|
'FileOutlined',
|
||||||
'LikeOutlined'
|
'LikeOutlined',
|
||||||
]
|
]
|
||||||
|
|
||||||
const Icon = (props: {type: string}) => {
|
const Icon = (props: {type: string}) => {
|
||||||
|
|
|
||||||
|
|
@ -1,221 +0,0 @@
|
||||||
import {
|
|
||||||
computed,
|
|
||||||
reactive,
|
|
||||||
unref,
|
|
||||||
defineComponent,
|
|
||||||
toRefs,
|
|
||||||
provide
|
|
||||||
} from 'vue'
|
|
||||||
|
|
||||||
import type { ExtractPropTypes, PropType, CSSProperties} from 'vue'
|
|
||||||
import { Layout } from 'ant-design-vue'
|
|
||||||
import { defaultSettingProps } from './defaultSetting'
|
|
||||||
import type { BreadcrumbProps, RouteContextProps } from './RouteContext'
|
|
||||||
import type {
|
|
||||||
BreadcrumbRender,
|
|
||||||
CollapsedButtonRender, CustomRender,
|
|
||||||
HeaderRender,
|
|
||||||
MenuContentRender,
|
|
||||||
MenuExtraRender,
|
|
||||||
MenuHeaderRender,
|
|
||||||
MenuItemRender,
|
|
||||||
RightContentRender,
|
|
||||||
SubMenuItemRender
|
|
||||||
} from './typings'
|
|
||||||
import SiderMenuWrapper, { siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
|
|
||||||
import { getSlot } from '@/utils/comm'
|
|
||||||
import { getMenuFirstChildren } from 'components/Layout/utils'
|
|
||||||
import { pick } from 'lodash-es'
|
|
||||||
import { routeContextInjectKey } from './RouteContext'
|
|
||||||
import { HeaderView, headerViewProps } from './components/Header'
|
|
||||||
|
|
||||||
export const basicLayoutProps = {
|
|
||||||
...defaultSettingProps,
|
|
||||||
...siderMenuProps,
|
|
||||||
...headerViewProps,
|
|
||||||
|
|
||||||
breadcrumb: {
|
|
||||||
type: [Object, Function] as PropType<BreadcrumbProps>,
|
|
||||||
default: () => null
|
|
||||||
},
|
|
||||||
breadcrumbRender: {
|
|
||||||
type: [Object, Function, Boolean] as PropType<BreadcrumbRender>,
|
|
||||||
default() {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
contentStyle: {
|
|
||||||
type: [String, Object] as PropType<CSSProperties>,
|
|
||||||
default: () => {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
},
|
|
||||||
pure: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => false
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export type BasicLayoutProps = Partial<ExtractPropTypes<typeof basicLayoutProps>>;
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'ProLayout',
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: basicLayoutProps,
|
|
||||||
emits: [
|
|
||||||
'update:collapsed',
|
|
||||||
'update:open-keys',
|
|
||||||
'update:selected-keys',
|
|
||||||
'collapse',
|
|
||||||
'openKeys',
|
|
||||||
'select',
|
|
||||||
'menuHeaderClick',
|
|
||||||
'menuClick'
|
|
||||||
],
|
|
||||||
setup(props, { emit, attrs, slots }) {
|
|
||||||
const siderWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth))
|
|
||||||
|
|
||||||
const onCollapse = (collapsed: boolean) => {
|
|
||||||
emit('update:collapsed', collapsed)
|
|
||||||
emit('collapse', collapsed)
|
|
||||||
}
|
|
||||||
const onOpenKeys = (openKeys: string[] | false) => {
|
|
||||||
emit('update:open-keys', openKeys)
|
|
||||||
emit('openKeys', openKeys)
|
|
||||||
}
|
|
||||||
const onSelect = (selectedKeys: string[] | false) => {
|
|
||||||
emit('update:selected-keys', selectedKeys)
|
|
||||||
emit('select', selectedKeys)
|
|
||||||
}
|
|
||||||
const onMenuHeaderClick = (e: MouseEvent) => {
|
|
||||||
emit('menuHeaderClick', e)
|
|
||||||
}
|
|
||||||
const onMenuClick = (args: any) => {
|
|
||||||
emit('menuClick', args)
|
|
||||||
}
|
|
||||||
const headerRender = (
|
|
||||||
p: BasicLayoutProps & {
|
|
||||||
hasSiderMenu: boolean;
|
|
||||||
headerRender: HeaderRender;
|
|
||||||
rightContentRender: RightContentRender;
|
|
||||||
},
|
|
||||||
matchMenuKeys?: string[]
|
|
||||||
): CustomRender | null => {
|
|
||||||
if (p.headerRender === false) {
|
|
||||||
return null
|
|
||||||
}
|
|
||||||
return <HeaderView {...p} />
|
|
||||||
}
|
|
||||||
|
|
||||||
const breadcrumb = computed<BreadcrumbProps>(() => ({
|
|
||||||
...props.breadcrumb,
|
|
||||||
itemRender: getSlot<BreadcrumbRender>(slots, props, 'breadcrumbRender') as BreadcrumbRender
|
|
||||||
}))
|
|
||||||
|
|
||||||
const flatMenuData = computed(
|
|
||||||
() => (props.selectedKeys && getMenuFirstChildren(props.menuData, props.selectedKeys[0])) || [])
|
|
||||||
|
|
||||||
const routeContext = reactive<RouteContextProps>({
|
|
||||||
...(pick(toRefs(props), [
|
|
||||||
'menuData',
|
|
||||||
'openKeys',
|
|
||||||
'selectedKeys',
|
|
||||||
'contentWidth',
|
|
||||||
'headerHeight'
|
|
||||||
]) as any),
|
|
||||||
siderWidth,
|
|
||||||
breadcrumb,
|
|
||||||
flatMenuData
|
|
||||||
})
|
|
||||||
|
|
||||||
provide(routeContextInjectKey, routeContext)
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
const {
|
|
||||||
pure,
|
|
||||||
onCollapse: propsOnCollapse,
|
|
||||||
onOpenKeys: propsOnOpenKeys,
|
|
||||||
onSelect: propsOnSelect,
|
|
||||||
onMenuClick: propsOnMenuClick,
|
|
||||||
...restProps
|
|
||||||
} = props
|
|
||||||
|
|
||||||
const collapsedButtonRender = getSlot<CollapsedButtonRender>(slots, props, 'collapsedButtonRender')
|
|
||||||
const rightContentRender = getSlot<RightContentRender>(slots, props, 'rightContentRender')
|
|
||||||
const customHeaderRender = getSlot<HeaderRender>(slots, props, 'headerRender')
|
|
||||||
|
|
||||||
// menu
|
|
||||||
const menuHeaderRender = getSlot<MenuHeaderRender>(slots, props, 'menuHeaderRender')
|
|
||||||
const menuExtraRender = getSlot<MenuExtraRender>(slots, props, 'menuExtraRender')
|
|
||||||
const menuContentRender = getSlot<MenuContentRender>(slots, props, 'menuContentRender')
|
|
||||||
const menuItemRender = getSlot<MenuItemRender>(slots, props, 'menuItemRender')
|
|
||||||
const subMenuItemRender = getSlot<SubMenuItemRender>(slots, props, 'subMenuItemRender')
|
|
||||||
|
|
||||||
const headerDom = computed(() =>
|
|
||||||
headerRender(
|
|
||||||
{
|
|
||||||
...props,
|
|
||||||
hasSiderMenu: true,
|
|
||||||
menuItemRender,
|
|
||||||
subMenuItemRender,
|
|
||||||
menuData: props.menuData,
|
|
||||||
onCollapse,
|
|
||||||
onOpenKeys,
|
|
||||||
onSelect,
|
|
||||||
onMenuHeaderClick,
|
|
||||||
rightContentRender,
|
|
||||||
collapsedButtonRender,
|
|
||||||
menuExtraRender,
|
|
||||||
menuContentRender,
|
|
||||||
headerRender: customHeaderRender,
|
|
||||||
theme: props.navTheme
|
|
||||||
},
|
|
||||||
[]
|
|
||||||
)
|
|
||||||
)
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
{
|
|
||||||
pure ? (
|
|
||||||
slots.default?.()
|
|
||||||
) : (
|
|
||||||
<Layout
|
|
||||||
class={'pro-layout'}
|
|
||||||
style={{
|
|
||||||
minHeight: '100vh'
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<SiderMenuWrapper
|
|
||||||
{...restProps}
|
|
||||||
theme={props.navTheme}
|
|
||||||
menuHeaderRender={menuHeaderRender}
|
|
||||||
menuExtraRender={menuExtraRender}
|
|
||||||
menuContentRender={menuContentRender}
|
|
||||||
menuItemRender={menuItemRender}
|
|
||||||
subMenuItemRender={subMenuItemRender}
|
|
||||||
collapsedButtonRender={collapsedButtonRender}
|
|
||||||
onCollapse={onCollapse}
|
|
||||||
onSelect={onSelect}
|
|
||||||
onOpenKeys={onOpenKeys}
|
|
||||||
onMenuClick={onMenuClick}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Layout>
|
|
||||||
{headerDom.value}
|
|
||||||
<Layout>
|
|
||||||
{slots.default?.()}
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
</Layout>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
@ -1,5 +1,5 @@
|
||||||
<template>
|
<template>
|
||||||
<ProLayout
|
<j-pro-layout
|
||||||
v-bind='layoutConf'
|
v-bind='layoutConf'
|
||||||
v-model:openKeys="state.openKeys"
|
v-model:openKeys="state.openKeys"
|
||||||
v-model:collapsed="state.collapsed"
|
v-model:collapsed="state.collapsed"
|
||||||
|
|
@ -14,14 +14,13 @@
|
||||||
<router-view v-slot='{ Component}'>
|
<router-view v-slot='{ Component}'>
|
||||||
<component :is='Component' />
|
<component :is='Component' />
|
||||||
</router-view>
|
</router-view>
|
||||||
</ProLayout>
|
</j-pro-layout>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts" name='BasicLayoutPage'>
|
<script setup lang="ts" name='BasicLayoutPage'>
|
||||||
import { ProLayout } from '@/components/Layout'
|
|
||||||
import DefaultSetting from '../../../config/config'
|
import DefaultSetting from '../../../config/config'
|
||||||
import { useMenuStore } from '@/store/menu'
|
import { useMenuStore } from '@/store/menu'
|
||||||
import { clearMenuItem } from 'components/Layout/utils'
|
import { clearMenuItem } from 'jetlinks-ui-components/es/ProLayout/util'
|
||||||
|
|
||||||
type StateType = {
|
type StateType = {
|
||||||
collapsed: boolean
|
collapsed: boolean
|
||||||
|
|
@ -36,11 +35,12 @@ const route = useRoute()
|
||||||
const menu = useMenuStore()
|
const menu = useMenuStore()
|
||||||
|
|
||||||
const layoutConf = reactive({
|
const layoutConf = reactive({
|
||||||
navTheme: DefaultSetting.layout.theme,
|
theme: DefaultSetting.layout.theme,
|
||||||
siderWidth: DefaultSetting.layout.siderWidth,
|
siderWidth: DefaultSetting.layout.siderWidth,
|
||||||
logo: DefaultSetting.layout.logo,
|
logo: DefaultSetting.layout.logo,
|
||||||
title: DefaultSetting.layout.title,
|
title: DefaultSetting.layout.title,
|
||||||
menuData: clearMenuItem(menu.siderMenus),
|
menuData: clearMenuItem(menu.siderMenus),
|
||||||
|
splitMenus: true
|
||||||
});
|
});
|
||||||
|
|
||||||
const state = reactive<StateType>({
|
const state = reactive<StateType>({
|
||||||
|
|
|
||||||
|
|
@ -1,45 +0,0 @@
|
||||||
import type { ComputedRef, VNodeChild, InjectionKey } from 'vue'
|
|
||||||
import type { PureSettings } from 'components/Layout/defaultSetting'
|
|
||||||
import type { MenuDataItem } from 'components/Layout/typings'
|
|
||||||
import { useContext } from 'components/Layout/hooks/context'
|
|
||||||
|
|
||||||
export interface Route {
|
|
||||||
path: string;
|
|
||||||
breadcrumbName: string;
|
|
||||||
children?: Omit<Route, 'children'>[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface BreadcrumbProps {
|
|
||||||
prefixCls?: string;
|
|
||||||
routes?: Route[];
|
|
||||||
params?: any;
|
|
||||||
separator?: VNodeChild;
|
|
||||||
itemRender?: (opts: { route: Route; params: any; routes: Array<Route>; paths: Array<string> }) => VNodeChild;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type BreadcrumbListReturn = Pick<BreadcrumbProps, Extract<keyof BreadcrumbProps, 'routes' | 'itemRender'>>;
|
|
||||||
|
|
||||||
export interface MenuState {
|
|
||||||
selectedKeys: string[];
|
|
||||||
openKeys: string[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface RouteContextProps extends Partial<PureSettings>, MenuState {
|
|
||||||
menuData: MenuDataItem[];
|
|
||||||
flatMenuData?: MenuDataItem[];
|
|
||||||
|
|
||||||
getPrefixCls?: (suffixCls?: string, customizePrefixCls?: string) => string;
|
|
||||||
breadcrumb?: BreadcrumbListReturn | ComputedRef<BreadcrumbListReturn>;
|
|
||||||
collapsed?: boolean;
|
|
||||||
hasSideMenu?: boolean;
|
|
||||||
siderWidth?: number;
|
|
||||||
headerHeight?: number;
|
|
||||||
/* 附加属性 */
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const routeContextInjectKey: InjectionKey<RouteContextProps> = Symbol('route-context');
|
|
||||||
|
|
||||||
export const useRouteContext = () =>
|
|
||||||
useContext<Required<RouteContextProps>>(routeContextInjectKey, {});
|
|
||||||
|
|
||||||
|
|
@ -1,127 +0,0 @@
|
||||||
import type { ExtractPropTypes, FunctionalComponent } from 'vue'
|
|
||||||
import { defineComponent, PropType } from 'vue'
|
|
||||||
import { defaultRenderLogo, siderMenuProps } from 'components/Layout/components/SiderMenu/SiderMenu'
|
|
||||||
import BaseMenu from '../SiderMenu/BaseMenu'
|
|
||||||
import { useRouteContext } from 'components/Layout/RouteContext'
|
|
||||||
import { default as ResizeObserver } from 'ant-design-vue/es/vc-resize-observer';
|
|
||||||
import { defaultSettingProps } from 'components/Layout/defaultSetting'
|
|
||||||
import PropTypes from 'ant-design-vue/es/_util/vue-types'
|
|
||||||
import { CustomRender, MenuDataItem, ProProps, RightContentRender, WithFalse } from 'components/Layout/typings'
|
|
||||||
import './index.less'
|
|
||||||
import { RouteRecordRaw } from 'vue-router'
|
|
||||||
import { clearMenuItem } from 'components/Layout/utils'
|
|
||||||
|
|
||||||
export const headerProps = {
|
|
||||||
...defaultSettingProps,
|
|
||||||
collapsed: PropTypes.looseBool,
|
|
||||||
menuData: {
|
|
||||||
type: Array as PropType<MenuDataItem[]>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
logo: siderMenuProps.logo,
|
|
||||||
logoStyle: siderMenuProps.logoStyle,
|
|
||||||
menuRender: {
|
|
||||||
type: [Object, Function] as PropType<
|
|
||||||
WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>
|
|
||||||
>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
menuItemRender: siderMenuProps.menuItemRender,
|
|
||||||
subMenuItemRender: siderMenuProps.subMenuItemRender,
|
|
||||||
rightContentRender: {
|
|
||||||
type: [Object, Function] as PropType<RightContentRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
siderWidth: PropTypes.number.def(208),
|
|
||||||
// events
|
|
||||||
onMenuHeaderClick: PropTypes.func,
|
|
||||||
onCollapse: siderMenuProps.onCollapse,
|
|
||||||
onOpenKeys: siderMenuProps.onOpenKeys,
|
|
||||||
onSelect: siderMenuProps.onSelect,
|
|
||||||
}
|
|
||||||
|
|
||||||
export type HeaderProps = ExtractPropTypes<typeof headerProps>;
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'Header',
|
|
||||||
emits: [
|
|
||||||
'menuHeaderClick', 'collapse', 'openKeys', 'select'
|
|
||||||
],
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: headerProps,
|
|
||||||
setup(props, { slots, emit}) {
|
|
||||||
|
|
||||||
const {
|
|
||||||
onSelect,
|
|
||||||
onMenuHeaderClick,
|
|
||||||
onOpenKeys,
|
|
||||||
logo,
|
|
||||||
logoStyle,
|
|
||||||
menuData,
|
|
||||||
navTheme,
|
|
||||||
contentWidth,
|
|
||||||
title,
|
|
||||||
rightContentRender
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const rightSize = ref<number | string>('auto')
|
|
||||||
|
|
||||||
const context = useRouteContext();
|
|
||||||
|
|
||||||
const noChildrenMenuData = (menuData || []).map((item) => ({
|
|
||||||
...item,
|
|
||||||
children: undefined,
|
|
||||||
})) as RouteRecordRaw[];
|
|
||||||
|
|
||||||
const clearMenuData = clearMenuItem(noChildrenMenuData);
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
class={`header-content ${navTheme}`}
|
|
||||||
>
|
|
||||||
<div class={`header-main ${contentWidth === 'Fixed' ? 'wide' : ''}`}>
|
|
||||||
<div class={'header-main-left'} onClick={onMenuHeaderClick}>
|
|
||||||
<div class={'header-logo'}>
|
|
||||||
<a>
|
|
||||||
{defaultRenderLogo(logo, logoStyle)}
|
|
||||||
<h1 title={title}>{ title }</h1>
|
|
||||||
</a>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div style={{ flex: 1 }} class={'header-menu'}>
|
|
||||||
<BaseMenu
|
|
||||||
theme={props.navTheme === 'realDark' ? 'dark' : props.navTheme}
|
|
||||||
menuData={clearMenuData}
|
|
||||||
mode={'horizontal'}
|
|
||||||
menuItemRender={props.menuItemRender}
|
|
||||||
subMenuItemRender={props.subMenuItemRender}
|
|
||||||
openKeys={context.openKeys}
|
|
||||||
selectedKeys={context.selectedKeys}
|
|
||||||
{...{
|
|
||||||
'onUpdate:openKeys': ($event: string[]) => onOpenKeys && onOpenKeys($event),
|
|
||||||
'onUpdate:selectedKeys': ($event: string[]) => onSelect && onSelect($event),
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
<div class={'header-right'} style={{ minWidth: rightSize.value }}>
|
|
||||||
<div>
|
|
||||||
<ResizeObserver
|
|
||||||
onResize={({ width }: { width: number}) => {
|
|
||||||
rightSize.value = width
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{
|
|
||||||
rightContentRender && typeof rightContentRender === 'function' ? (
|
|
||||||
<div>{rightContentRender({...props})}</div>
|
|
||||||
) : rightContentRender
|
|
||||||
}
|
|
||||||
</ResizeObserver>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -1,64 +0,0 @@
|
||||||
.header-content {
|
|
||||||
position: relative;
|
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
box-shadow: 0 1px 4px 0 rgb(0 21 41 / 12%);
|
|
||||||
transition: background .3s,width .2s;
|
|
||||||
|
|
||||||
&.light {
|
|
||||||
background-color: #fff;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.dark {
|
|
||||||
.header-logo {
|
|
||||||
>a {
|
|
||||||
> h1 {
|
|
||||||
color: #fff !important;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
.header-main {
|
|
||||||
padding-left: 16px;
|
|
||||||
display: flex;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
.header-main-left {
|
|
||||||
display: flex;
|
|
||||||
min-width: 192px;
|
|
||||||
|
|
||||||
.header-logo {
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
min-width: 165px;
|
|
||||||
overflow: hidden;
|
|
||||||
|
|
||||||
> a {
|
|
||||||
color: @primary-color;
|
|
||||||
text-decoration: none;
|
|
||||||
background-color: transparent;
|
|
||||||
outline: none;
|
|
||||||
cursor: pointer;
|
|
||||||
transition: color .3s;
|
|
||||||
|
|
||||||
> h1 {
|
|
||||||
vertical-align: top;
|
|
||||||
display: inline-block;
|
|
||||||
margin: 0 0 0 12px;
|
|
||||||
font-size: 16px;
|
|
||||||
color: rgba(0,0,0,.85);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
img {
|
|
||||||
display: inline-block;
|
|
||||||
height: 32px;
|
|
||||||
vertical-align: middle;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,59 +0,0 @@
|
||||||
import type { ExtractPropTypes } from 'vue'
|
|
||||||
import Header, { headerProps } from './Header'
|
|
||||||
import { useRouteContext } from 'components/Layout/RouteContext'
|
|
||||||
import type { RouteRecordRaw } from 'vue-router'
|
|
||||||
import { clearMenuItem } from 'components/Layout/utils'
|
|
||||||
import { Layout } from 'ant-design-vue'
|
|
||||||
|
|
||||||
export const headerViewProps = {
|
|
||||||
...headerProps
|
|
||||||
}
|
|
||||||
|
|
||||||
export type HeaderViewProps = Partial<ExtractPropTypes<typeof headerViewProps>>;
|
|
||||||
|
|
||||||
export const HeaderView = defineComponent({
|
|
||||||
name: 'HeaderView',
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: headerViewProps,
|
|
||||||
setup(props) {
|
|
||||||
const { headerHeight, onCollapse } = toRefs(props);
|
|
||||||
|
|
||||||
const context = useRouteContext();
|
|
||||||
|
|
||||||
const clearMenuData = computed(
|
|
||||||
() => (context.menuData && clearMenuItem(context.menuData as RouteRecordRaw[])) || []
|
|
||||||
);
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<>
|
|
||||||
<Layout.Header
|
|
||||||
style={{
|
|
||||||
padding: 0,
|
|
||||||
height: `${headerHeight.value}px`,
|
|
||||||
lineHeight: `${headerHeight.value}px`,
|
|
||||||
width: `100%`,
|
|
||||||
background: 'transparent'
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
<Layout.Header
|
|
||||||
style={{
|
|
||||||
padding: 0,
|
|
||||||
height: `${headerHeight.value}px`,
|
|
||||||
lineHeight: `${headerHeight.value}px`,
|
|
||||||
width: `100%`,
|
|
||||||
zIndex: 19,
|
|
||||||
position: 'fixed',
|
|
||||||
top: 0,
|
|
||||||
right: 0
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Header
|
|
||||||
{...props}
|
|
||||||
onCollapse={onCollapse.value}
|
|
||||||
menuData={clearMenuData.value}
|
|
||||||
/>
|
|
||||||
</Layout.Header>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -1,23 +0,0 @@
|
||||||
.page-container {
|
|
||||||
min-height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
.page-container-grid-content {
|
|
||||||
padding: 24px;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
> div, .page-container-children-content, .page-container-full-height {
|
|
||||||
min-height: 100%;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
}
|
|
||||||
|
|
||||||
//.children-full-height {
|
|
||||||
// > :nth-child(1) {
|
|
||||||
// min-height: 100%;
|
|
||||||
// }
|
|
||||||
//}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,250 +0,0 @@
|
||||||
import { TabPaneProps } from 'ant-design-vue'
|
|
||||||
import type { ExtractPropTypes, FunctionalComponent, PropType, VNodeChild } from 'vue'
|
|
||||||
import { pageHeaderProps } from 'ant-design-vue/es/page-header';
|
|
||||||
import type { DefaultPropRender, PageHeaderRender } from 'components/Layout/typings'
|
|
||||||
import type { AffixProps, TabBarExtraContent } from 'components/Layout/components/PageContainer/types'
|
|
||||||
import { useRouteContext } from 'components/Layout/RouteContext'
|
|
||||||
import { getSlotVNode } from '@/utils/comm'
|
|
||||||
import { Affix, Spin, PageHeader, Tabs } from 'ant-design-vue';
|
|
||||||
import './index.less'
|
|
||||||
|
|
||||||
export const pageHeaderTabConfig = {
|
|
||||||
/**
|
|
||||||
* @name tabs 的列表
|
|
||||||
*/
|
|
||||||
tabList: {
|
|
||||||
type: [Object, Function, Array] as PropType<(Omit<TabPaneProps, 'id'> & { key?: string })[]>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @name 当前选中 tab 的 key
|
|
||||||
*/
|
|
||||||
tabActiveKey: String, //PropTypes.string,
|
|
||||||
/**
|
|
||||||
* @name tab 上多余的区域
|
|
||||||
*/
|
|
||||||
tabBarExtraContent: {
|
|
||||||
type: [Object, Function] as PropType<TabBarExtraContent>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @name tabs 的其他配置
|
|
||||||
*/
|
|
||||||
tabProps: {
|
|
||||||
type: Object, //as PropType<TabsProps>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
/**
|
|
||||||
* @name 固定 PageHeader 到页面顶部
|
|
||||||
*/
|
|
||||||
fixedHeader: Boolean, //PropTypes.looseBool,
|
|
||||||
// events
|
|
||||||
onTabChange: Function, //PropTypes.func,
|
|
||||||
};
|
|
||||||
export type PageHeaderTabConfig = Partial<ExtractPropTypes<typeof pageHeaderTabConfig>>;
|
|
||||||
|
|
||||||
|
|
||||||
export const pageContainerProps = {
|
|
||||||
...pageHeaderTabConfig,
|
|
||||||
...pageHeaderProps,
|
|
||||||
prefixCls: {
|
|
||||||
type: String,
|
|
||||||
default: 'ant-pro',
|
|
||||||
}, //PropTypes.string.def('ant-pro'),
|
|
||||||
title: {
|
|
||||||
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
subTitle: {
|
|
||||||
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
content: {
|
|
||||||
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
extra: {
|
|
||||||
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
extraContent: {
|
|
||||||
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
header: {
|
|
||||||
type: [Object, String, Boolean, Function] as PropType<DefaultPropRender>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
pageHeaderRender: {
|
|
||||||
type: [Object, Function, Boolean] as PropType<PageHeaderRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
affixProps: {
|
|
||||||
type: [Object, Function] as PropType<AffixProps>,
|
|
||||||
},
|
|
||||||
ghost: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => false,
|
|
||||||
}, //PropTypes.looseBool,
|
|
||||||
loading: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => undefined,
|
|
||||||
}, //PropTypes.looseBool,
|
|
||||||
childrenFullHeight: {
|
|
||||||
type: Boolean,
|
|
||||||
default: () => true,
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
export type PageContainerProps = Partial<ExtractPropTypes<typeof pageContainerProps>>;
|
|
||||||
|
|
||||||
const renderFooter = (
|
|
||||||
props: Omit< PageContainerProps, 'title' >
|
|
||||||
): VNodeChild | JSX.Element => {
|
|
||||||
const { tabList, tabActiveKey, onTabChange, tabBarExtraContent, tabProps } = props;
|
|
||||||
if (tabList && tabList.length) {
|
|
||||||
return (
|
|
||||||
<Tabs
|
|
||||||
class={`page-container-tabs`}
|
|
||||||
activeKey={tabActiveKey}
|
|
||||||
onChange={(key: string | number) => {
|
|
||||||
if (onTabChange) {
|
|
||||||
onTabChange(key);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
tabBarExtraContent={tabBarExtraContent}
|
|
||||||
{...tabProps}
|
|
||||||
>
|
|
||||||
{tabList.map((item) => (
|
|
||||||
<Tabs.TabPane {...item} tab={item.tab} key={item.key} />
|
|
||||||
))}
|
|
||||||
</Tabs>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
const ProPageHeader: FunctionalComponent<PageContainerProps> = (props) => {
|
|
||||||
const {
|
|
||||||
title,
|
|
||||||
tabList,
|
|
||||||
tabActiveKey,
|
|
||||||
content,
|
|
||||||
pageHeaderRender,
|
|
||||||
header,
|
|
||||||
extraContent,
|
|
||||||
prefixCls,
|
|
||||||
fixedHeader: _,
|
|
||||||
...restProps
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const value = useRouteContext()
|
|
||||||
|
|
||||||
if (pageHeaderRender === false) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (pageHeaderRender) {
|
|
||||||
return pageHeaderRender({ ...props });
|
|
||||||
}
|
|
||||||
let pageHeaderTitle = title;
|
|
||||||
if (!title && title !== false) {
|
|
||||||
pageHeaderTitle = value.title;
|
|
||||||
}
|
|
||||||
|
|
||||||
const unrefBreadcrumb = unref(value.breadcrumb || {});
|
|
||||||
const breadcrumb = (props as any).breadcrumb || {
|
|
||||||
...unrefBreadcrumb,
|
|
||||||
routes: unrefBreadcrumb.routes,
|
|
||||||
itemRender: unrefBreadcrumb.itemRender,
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<div class={`page-container-wrap`}>
|
|
||||||
<PageHeader
|
|
||||||
{...restProps}
|
|
||||||
// {...value}
|
|
||||||
title={pageHeaderTitle}
|
|
||||||
breadcrumb={breadcrumb}
|
|
||||||
footer={renderFooter({
|
|
||||||
...restProps,
|
|
||||||
tabList,
|
|
||||||
tabActiveKey
|
|
||||||
})}
|
|
||||||
prefixCls={prefixCls}
|
|
||||||
>
|
|
||||||
{/*{header || renderPageHeader(content, extraContent)}*/}
|
|
||||||
{ header }
|
|
||||||
</PageHeader>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}
|
|
||||||
|
|
||||||
const PageContainer = defineComponent({
|
|
||||||
name: 'PageContainer',
|
|
||||||
inheritAttrs: false,
|
|
||||||
props: pageContainerProps,
|
|
||||||
setup(props, { slots }) {
|
|
||||||
const { loading, affixProps, ghost, childrenFullHeight } = toRefs(props);
|
|
||||||
|
|
||||||
const value = useRouteContext();
|
|
||||||
|
|
||||||
const headerDom = computed(() => {
|
|
||||||
// const tags = getSlotVNode<DefaultPropRender>(slots, props, 'tags');
|
|
||||||
const headerContent = getSlotVNode<DefaultPropRender>(slots, props, 'content');
|
|
||||||
const extra = getSlotVNode<DefaultPropRender>(slots, props, 'extra');
|
|
||||||
const extraContent = getSlotVNode<DefaultPropRender>(slots, props, 'extraContent');
|
|
||||||
const subTitle = getSlotVNode<DefaultPropRender>(slots, props, 'subTitle');
|
|
||||||
const title = getSlotVNode<DefaultPropRender>(slots, props, 'title');
|
|
||||||
|
|
||||||
// @ts-ignore
|
|
||||||
return (
|
|
||||||
<ProPageHeader
|
|
||||||
{...props}
|
|
||||||
prefixCls={undefined}
|
|
||||||
ghost={ghost.value}
|
|
||||||
title={title}
|
|
||||||
subTitle={subTitle}
|
|
||||||
content={headerContent}
|
|
||||||
// tags={tags}
|
|
||||||
extra={extra}
|
|
||||||
extraContent={extraContent}
|
|
||||||
/>
|
|
||||||
);
|
|
||||||
})
|
|
||||||
|
|
||||||
return () => {
|
|
||||||
const { fixedHeader } = props;
|
|
||||||
return (
|
|
||||||
<div class={'page-container'}>
|
|
||||||
{fixedHeader && headerDom.value ? (
|
|
||||||
<Affix {...affixProps.value} offsetTop={value.hasHeader && value.fixedHeader ? value.headerHeight : 0}>
|
|
||||||
{headerDom.value}
|
|
||||||
</Affix>
|
|
||||||
) : (
|
|
||||||
headerDom.value
|
|
||||||
)}
|
|
||||||
<div class={'page-container-grid-content'}>
|
|
||||||
{loading.value ? (
|
|
||||||
<Spin />
|
|
||||||
) : slots.default ? (
|
|
||||||
<div>
|
|
||||||
<div class={`page-container-children-content ${childrenFullHeight.value ? 'children-full-height' : ''}`}>{slots.default()}</div>
|
|
||||||
{value.hasFooterToolbar && (
|
|
||||||
<div
|
|
||||||
style={{
|
|
||||||
height: 48,
|
|
||||||
marginTop: 24,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)}
|
|
||||||
</div>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
export default PageContainer
|
|
||||||
|
|
@ -1,56 +0,0 @@
|
||||||
import type { VNodeChild, CSSProperties, VNode } from 'vue';
|
|
||||||
|
|
||||||
export interface Tab {
|
|
||||||
key: string;
|
|
||||||
tab: string | VNode | JSX.Element;
|
|
||||||
}
|
|
||||||
|
|
||||||
export type TabBarType = 'line' | 'card' | 'editable-card';
|
|
||||||
export type TabSize = 'default' | 'large' | 'small';
|
|
||||||
export type TabPosition = 'left' | 'right';
|
|
||||||
export type TabBarExtraPosition = TabPosition;
|
|
||||||
|
|
||||||
export type TabBarExtraMap = Partial<Record<TabBarExtraPosition, VNodeChild>>;
|
|
||||||
|
|
||||||
export type TabBarExtraContent = VNodeChild | TabBarExtraMap;
|
|
||||||
|
|
||||||
export interface TabsProps {
|
|
||||||
prefixCls?: string;
|
|
||||||
class?: string | string[];
|
|
||||||
style?: CSSProperties;
|
|
||||||
id?: string;
|
|
||||||
|
|
||||||
activeKey?: string;
|
|
||||||
hideAdd?: boolean;
|
|
||||||
// Unchangeable
|
|
||||||
// size?: TabSize;
|
|
||||||
tabBarStyle?: CSSProperties;
|
|
||||||
tabPosition?: TabPosition;
|
|
||||||
type?: TabBarType;
|
|
||||||
tabBarGutter?: number;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface AffixProps {
|
|
||||||
offsetBottom: number;
|
|
||||||
offsetTop: number;
|
|
||||||
target?: () => HTMLElement;
|
|
||||||
|
|
||||||
onChange?: (affixed: boolean) => void;
|
|
||||||
}
|
|
||||||
|
|
||||||
export interface TabPaneProps {
|
|
||||||
tab?: string | VNodeChild | JSX.Element;
|
|
||||||
class?: string | string[];
|
|
||||||
style?: CSSProperties;
|
|
||||||
disabled?: boolean;
|
|
||||||
forceRender?: boolean;
|
|
||||||
closable?: boolean;
|
|
||||||
closeIcon?: VNodeChild | JSX.Element;
|
|
||||||
|
|
||||||
prefixCls?: string;
|
|
||||||
tabKey?: string;
|
|
||||||
id: string;
|
|
||||||
animated?: boolean;
|
|
||||||
active?: boolean;
|
|
||||||
destroyInactiveTabPane?: boolean;
|
|
||||||
}
|
|
||||||
|
|
@ -1,217 +0,0 @@
|
||||||
import { isVNode, defineComponent, getCurrentInstance, withCtx } from 'vue'
|
|
||||||
import type { FunctionalComponent, PropType, VNodeChild, ComponentInternalInstance, ConcreteComponent, ExtractPropTypes, VNode } from 'vue'
|
|
||||||
import type {
|
|
||||||
MenuDataItem,
|
|
||||||
WithFalse,
|
|
||||||
MenuItemRender,
|
|
||||||
LayoutType,
|
|
||||||
MenuTheme,
|
|
||||||
SubMenuItemRender,
|
|
||||||
MenuMode
|
|
||||||
} from '../../typings'
|
|
||||||
import type {
|
|
||||||
SelectEventHandler,
|
|
||||||
MenuClickEventHandler,
|
|
||||||
SelectInfo,
|
|
||||||
MenuInfo,
|
|
||||||
} from 'ant-design-vue/es/menu/src/interface';
|
|
||||||
import type { Key } from 'ant-design-vue/es/_util/type';
|
|
||||||
import IconFont from '@/components/AIcon'
|
|
||||||
import { Menu } from 'ant-design-vue';
|
|
||||||
import { isUrl } from '@/utils/regular'
|
|
||||||
|
|
||||||
export const baseMenuProps = {
|
|
||||||
mode: {
|
|
||||||
type: String as PropType<MenuMode>,
|
|
||||||
default: 'inline',
|
|
||||||
},
|
|
||||||
menuData: {
|
|
||||||
type: Array as PropType<MenuDataItem[]>,
|
|
||||||
default: () => [],
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
type: String as PropType<LayoutType>,
|
|
||||||
default: 'side',
|
|
||||||
},
|
|
||||||
theme: {
|
|
||||||
type: String as PropType<MenuTheme | 'realDark'>,
|
|
||||||
default: 'dark',
|
|
||||||
},
|
|
||||||
collapsed: {
|
|
||||||
type: Boolean as PropType<boolean | undefined>,
|
|
||||||
default: () => false,
|
|
||||||
},
|
|
||||||
openKeys: {
|
|
||||||
type: Array as PropType<WithFalse<string[]>>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
selectedKeys: {
|
|
||||||
type: Array as PropType<WithFalse<string[]>>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
menuProps: {
|
|
||||||
type: Object as PropType<Record<string, any>>,
|
|
||||||
default: () => null,
|
|
||||||
},
|
|
||||||
menuItemRender: {
|
|
||||||
type: [Object, Function, Boolean] as PropType<MenuItemRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
subMenuItemRender: {
|
|
||||||
type: [Object, Function, Boolean] as PropType<SubMenuItemRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
onClick: [Function, Object] as PropType<(...args: any) => void>,
|
|
||||||
}
|
|
||||||
|
|
||||||
export type BaseMenuProps = ExtractPropTypes<typeof baseMenuProps>;
|
|
||||||
|
|
||||||
const LazyIcon: FunctionalComponent<{ icon: VNodeChild | string;}> = (props) => {
|
|
||||||
const {icon} = props
|
|
||||||
if (!icon) return null
|
|
||||||
if (typeof icon === 'string' && icon !== '') {
|
|
||||||
return <IconFont type={icon} />;
|
|
||||||
}
|
|
||||||
if (isVNode(icon)) {
|
|
||||||
return icon;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
class MenuUtil {
|
|
||||||
props: BaseMenuProps;
|
|
||||||
ctx: ComponentInternalInstance | null;
|
|
||||||
RouterLink: ConcreteComponent;
|
|
||||||
|
|
||||||
constructor(props: BaseMenuProps, ctx: ComponentInternalInstance | null) {
|
|
||||||
this.props = props
|
|
||||||
this.ctx = ctx
|
|
||||||
this.RouterLink = resolveComponent('router-link') as ConcreteComponent
|
|
||||||
}
|
|
||||||
|
|
||||||
getNavMenuItems = (menusData: MenuDataItem[] = []) => {
|
|
||||||
return menusData.map((item) => this.getSubMenuOrItem(item)).filter((item) => item);
|
|
||||||
};
|
|
||||||
|
|
||||||
getSubMenuOrItem = (item: MenuDataItem): VNode => {
|
|
||||||
if (
|
|
||||||
Array.isArray(item.children) &&
|
|
||||||
item.children.length > 0 &&
|
|
||||||
!item?.meta?.hideInMenu &&
|
|
||||||
!item?.meta?.hideChildrenInMenu
|
|
||||||
) {
|
|
||||||
if (this.props.subMenuItemRender) {
|
|
||||||
const subMenuItemRender = withCtx(this.props.subMenuItemRender, this.ctx);
|
|
||||||
return subMenuItemRender({
|
|
||||||
item,
|
|
||||||
children: this.getNavMenuItems(item.children),
|
|
||||||
}) as VNode;
|
|
||||||
}
|
|
||||||
const menuTitle = item.meta?.title
|
|
||||||
|
|
||||||
|
|
||||||
const defaultTitle = item.meta?.icon ? (
|
|
||||||
<span class={`header-menu-item`}>
|
|
||||||
<span class={`header-menu-item-title`}>{menuTitle}</span>
|
|
||||||
</span>
|
|
||||||
) : (
|
|
||||||
<span class={`header-menu-item`}>{menuTitle}</span>
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Menu.SubMenu
|
|
||||||
title={defaultTitle}
|
|
||||||
key={item.path}
|
|
||||||
icon={<LazyIcon icon={item.meta?.icon} />}
|
|
||||||
>
|
|
||||||
{this.getNavMenuItems(item.children)}
|
|
||||||
</Menu.SubMenu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
const menuItemRender = this.props.menuItemRender && withCtx(this.props.menuItemRender, this.ctx);
|
|
||||||
|
|
||||||
const [title, icon] = this.getMenuItem(item);
|
|
||||||
|
|
||||||
return (
|
|
||||||
(menuItemRender && (menuItemRender({ item, title, icon }) as VNode)) || (
|
|
||||||
<Menu.Item disabled={item.meta?.disabled} danger={item.meta?.danger} key={item.path}>
|
|
||||||
{title}
|
|
||||||
</Menu.Item>
|
|
||||||
)
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
getMenuItem = (item: MenuDataItem) => {
|
|
||||||
const meta = { ...item.meta };
|
|
||||||
const target = (meta.target || null) as string | null;
|
|
||||||
const hasUrl = isUrl(item.path);
|
|
||||||
const CustomTag: any = (target && 'a') || this.RouterLink;
|
|
||||||
const props = { to: { path: item.path, ...item.meta } };
|
|
||||||
const attrs = hasUrl || target ? { ...item.meta, href: item.path, target } : {};
|
|
||||||
|
|
||||||
const icon = (item.meta?.icon && <LazyIcon icon={item.meta.icon} />) || undefined;
|
|
||||||
const menuTitle = item.meta?.title;
|
|
||||||
const defaultTitle = item.meta?.icon ? (
|
|
||||||
<CustomTag {...attrs} {...props} class={`header-menu-item`}>
|
|
||||||
{icon}
|
|
||||||
<span class={`header-menu-item-title`}>{menuTitle}</span>
|
|
||||||
</CustomTag>
|
|
||||||
) : (
|
|
||||||
<CustomTag {...attrs} {...props} class={`header-menu-item`}>
|
|
||||||
<span>{menuTitle}</span>
|
|
||||||
</CustomTag>
|
|
||||||
);
|
|
||||||
|
|
||||||
return [defaultTitle, icon];
|
|
||||||
}
|
|
||||||
|
|
||||||
conversionPath = (path: string) => {
|
|
||||||
if (path && path.indexOf('http') === 0) {
|
|
||||||
return path;
|
|
||||||
}
|
|
||||||
return `/${path || ''}`.replace(/\/+/g, '/');
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
export default defineComponent({
|
|
||||||
name: 'BaseMenu',
|
|
||||||
props: baseMenuProps,
|
|
||||||
emits: ['update:openKeys', 'update:selectedKeys', 'click'],
|
|
||||||
setup(props, { emit }) {
|
|
||||||
const ctx = getCurrentInstance()
|
|
||||||
|
|
||||||
const menuUtil = new MenuUtil(props, ctx);
|
|
||||||
|
|
||||||
const handleOpenChange = (openKeys: Key[]): void => {
|
|
||||||
emit('update:openKeys', openKeys);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleSelect: SelectEventHandler = (args: SelectInfo): void => {
|
|
||||||
// ignore https? link handle selectkeys
|
|
||||||
if (isUrl(args.key as string)) {
|
|
||||||
return;
|
|
||||||
}
|
|
||||||
emit('update:selectedKeys', args.selectedKeys);
|
|
||||||
};
|
|
||||||
|
|
||||||
const handleClick: MenuClickEventHandler = (args: MenuInfo) => {
|
|
||||||
emit('click', args);
|
|
||||||
};
|
|
||||||
|
|
||||||
return () => (
|
|
||||||
<Menu
|
|
||||||
{...props}
|
|
||||||
key='Menu'
|
|
||||||
inlineIndent={16}
|
|
||||||
theme={props.theme as 'dark' | 'light'}
|
|
||||||
openKeys={props.openKeys === false ? [] : props.openKeys}
|
|
||||||
selectedKeys={props.selectedKeys || []}
|
|
||||||
onOpenChange={handleOpenChange}
|
|
||||||
onSelect={handleSelect}
|
|
||||||
onClick={handleClick}
|
|
||||||
>
|
|
||||||
{menuUtil.getNavMenuItems(props.menuData)}
|
|
||||||
</Menu>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
@ -1,20 +0,0 @@
|
||||||
.pro-layout-sider {
|
|
||||||
position: fixed;
|
|
||||||
top: 0;
|
|
||||||
left: 0;
|
|
||||||
z-index: 100;
|
|
||||||
height: 100%;
|
|
||||||
overflow: auto;
|
|
||||||
overflow-x: hidden;
|
|
||||||
box-shadow: 2px 0 8px 0 rgb(29 35 41 / 5%);
|
|
||||||
|
|
||||||
.ant-layout-sider-children {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
}
|
|
||||||
|
|
||||||
.ant-menu-inline {
|
|
||||||
background: transparent;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
@ -1,186 +0,0 @@
|
||||||
import { Layout, Menu } from 'ant-design-vue';
|
|
||||||
import type { CSSProperties, ExtractPropTypes, FunctionalComponent, PropType } from 'vue'
|
|
||||||
import type {
|
|
||||||
LogoRender,
|
|
||||||
MenuHeaderRender,
|
|
||||||
MenuExtraRender,
|
|
||||||
MenuContentRender,
|
|
||||||
CollapsedButtonRender,
|
|
||||||
WithFalse,
|
|
||||||
CustomRender
|
|
||||||
} from '../../typings'
|
|
||||||
import PropTypes from 'ant-design-vue/es/_util/vue-types';
|
|
||||||
import { baseMenuProps } from 'components/Layout/components/SiderMenu/BaseMenu'
|
|
||||||
import AIcon from '@/components/AIcon'
|
|
||||||
import { useRouteContext } from 'components/Layout/RouteContext'
|
|
||||||
import BaseMenu from './BaseMenu'
|
|
||||||
import './SiderMenu.less'
|
|
||||||
import { computed } from 'vue'
|
|
||||||
import { omit } from 'lodash-es'
|
|
||||||
|
|
||||||
const { Sider } = Layout
|
|
||||||
|
|
||||||
export const defaultRenderLogo = (logo?: CustomRender, logoStyle?: CSSProperties): CustomRender => {
|
|
||||||
if (!logo) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
if (typeof logo === 'string') {
|
|
||||||
return <img src={logo} alt="logo" style={logoStyle} />;
|
|
||||||
}
|
|
||||||
if (typeof logo === 'function') {
|
|
||||||
// @ts-ignore
|
|
||||||
return logo();
|
|
||||||
}
|
|
||||||
return logo;
|
|
||||||
};
|
|
||||||
|
|
||||||
export const siderMenuProps = {
|
|
||||||
...baseMenuProps,
|
|
||||||
logo: {
|
|
||||||
type: [Object, String, Function] as PropType<LogoRender>,
|
|
||||||
default: () => '',
|
|
||||||
},
|
|
||||||
logoStyle: {
|
|
||||||
type: Object as PropType<CSSProperties>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
siderWidth: PropTypes.number.def(208),
|
|
||||||
headerHeight: PropTypes.number.def(48),
|
|
||||||
collapsedWidth: PropTypes.number.def(48),
|
|
||||||
menuHeaderRender: {
|
|
||||||
type: [Function, Object, Boolean] as PropType<MenuHeaderRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
menuContentRender: {
|
|
||||||
type: [Function, Object, Boolean] as PropType<MenuContentRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
menuExtraRender: {
|
|
||||||
type: [Function, Object, Boolean] as PropType<MenuExtraRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
collapsedButtonRender: {
|
|
||||||
type: [Function, Object, Boolean] as PropType<CollapsedButtonRender>,
|
|
||||||
default: () => undefined,
|
|
||||||
},
|
|
||||||
onMenuHeaderClick: PropTypes.func,
|
|
||||||
onMenuClick: PropTypes.func,
|
|
||||||
onCollapse: {
|
|
||||||
type: Function as PropType<(collapsed: boolean) => void>,
|
|
||||||
},
|
|
||||||
onOpenKeys: {
|
|
||||||
type: Function as PropType<(openKeys: WithFalse<string[]>) => void>,
|
|
||||||
},
|
|
||||||
onSelect: {
|
|
||||||
type: Function as PropType<(selectedKeys: WithFalse<string[]>) => void>,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
export type SiderMenuProps = Partial<ExtractPropTypes<typeof siderMenuProps>>;
|
|
||||||
|
|
||||||
export const defaultRenderCollapsedButton = (collapsed?: boolean): CustomRender =>
|
|
||||||
collapsed ? <AIcon type={'MenuUnfoldOutlined'} /> : <AIcon type={'MenuFoldOutlined'} />;
|
|
||||||
|
|
||||||
const SiderMenu: FunctionalComponent<SiderMenuProps> = (props, { slots, emit}) => {
|
|
||||||
const {
|
|
||||||
collapsed,
|
|
||||||
collapsedWidth = 48,
|
|
||||||
menuContentRender = false,
|
|
||||||
collapsedButtonRender = defaultRenderCollapsedButton,
|
|
||||||
} = props;
|
|
||||||
|
|
||||||
const context = useRouteContext();
|
|
||||||
const sSideWidth = computed(() => (props.collapsed ? props.collapsedWidth : props.siderWidth));
|
|
||||||
|
|
||||||
|
|
||||||
const handleSelect = ($event: string[]) => {
|
|
||||||
if (props.onSelect) {
|
|
||||||
props.onSelect([context.selectedKeys[0], ...$event]);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
const defaultMenuDom = (
|
|
||||||
<BaseMenu
|
|
||||||
theme={props.theme as 'dark' | 'light'}
|
|
||||||
mode="inline"
|
|
||||||
menuData={context.flatMenuData}
|
|
||||||
collapsed={props.collapsed}
|
|
||||||
openKeys={context.openKeys}
|
|
||||||
selectedKeys={context.selectedKeys}
|
|
||||||
menuItemRender={props.menuItemRender}
|
|
||||||
subMenuItemRender={props.subMenuItemRender}
|
|
||||||
onClick={props.onMenuClick}
|
|
||||||
style={{
|
|
||||||
width: '100%',
|
|
||||||
}}
|
|
||||||
{...{
|
|
||||||
'onUpdate:openKeys': ($event: string[]) => props.onOpenKeys && props.onOpenKeys($event),
|
|
||||||
'onUpdate:selectedKeys': handleSelect,
|
|
||||||
}}
|
|
||||||
/>
|
|
||||||
)
|
|
||||||
|
|
||||||
const Style = computed(() => {
|
|
||||||
return {
|
|
||||||
overflow: 'hidden',
|
|
||||||
height: '100vh',
|
|
||||||
zIndex: 18,
|
|
||||||
paddingTop: `${props.headerHeight}px`,
|
|
||||||
flex: `0 0 ${sSideWidth.value}px`,
|
|
||||||
minWidth: `${sSideWidth.value}px`,
|
|
||||||
maxWidth: `${sSideWidth.value}px`,
|
|
||||||
width: `${sSideWidth.value}px`,
|
|
||||||
transition: 'background-color 0.3s ease 0s, min-width 0.3s ease 0s, max-width 0.3s cubic-bezier(0.645, 0.045, 0.355, 1) 0s'
|
|
||||||
}
|
|
||||||
})
|
|
||||||
|
|
||||||
return (
|
|
||||||
<>
|
|
||||||
<div
|
|
||||||
style={Style.value}
|
|
||||||
></div>
|
|
||||||
<Sider
|
|
||||||
collapsible
|
|
||||||
trigger={null}
|
|
||||||
collapsed={collapsed}
|
|
||||||
onCollapse={(collapse: boolean) => {
|
|
||||||
props.onCollapse?.(collapse);
|
|
||||||
}}
|
|
||||||
collapsedWidth={collapsedWidth}
|
|
||||||
style={omit(Style.value, ['transition'])}
|
|
||||||
width={sSideWidth.value}
|
|
||||||
theme={props.theme as 'dark' | 'light'}
|
|
||||||
class={'pro-layout-sider'}
|
|
||||||
>
|
|
||||||
<div style="flex: 1; overflow: hidden auto;">
|
|
||||||
{(menuContentRender && menuContentRender(props, defaultMenuDom)) || defaultMenuDom}
|
|
||||||
</div>
|
|
||||||
<div class={`header-links`}>
|
|
||||||
{collapsedButtonRender !== false ? (
|
|
||||||
<Menu
|
|
||||||
class={`header-link-menu`}
|
|
||||||
inlineIndent={16}
|
|
||||||
theme={props.theme as 'light' | 'dark'}
|
|
||||||
selectedKeys={[]}
|
|
||||||
openKeys={[]}
|
|
||||||
mode="inline"
|
|
||||||
onClick={() => {
|
|
||||||
if (props.onCollapse) {
|
|
||||||
props.onCollapse(!props.collapsed);
|
|
||||||
}
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
<Menu.Item key={'collapsed-button'} class={`header-collapsed-button`} title={false}>
|
|
||||||
{collapsedButtonRender && typeof collapsedButtonRender === 'function'
|
|
||||||
? collapsedButtonRender(collapsed)
|
|
||||||
: collapsedButtonRender}
|
|
||||||
</Menu.Item>
|
|
||||||
</Menu>
|
|
||||||
) : null}
|
|
||||||
</div>
|
|
||||||
</Sider>
|
|
||||||
</>
|
|
||||||
)
|
|
||||||
}
|
|
||||||
|
|
||||||
export default SiderMenu
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import type { PropType } from 'vue'
|
|
||||||
import config from '../../../config/config'
|
|
||||||
|
|
||||||
export interface PureSettings {
|
|
||||||
title: string
|
|
||||||
/**
|
|
||||||
* theme for nav menu
|
|
||||||
*/
|
|
||||||
navTheme: 'dark' | 'light' | 'realDark' | undefined;
|
|
||||||
/**
|
|
||||||
* nav menu position: `side` or `top`
|
|
||||||
*/
|
|
||||||
headerHeight?: number;
|
|
||||||
/**
|
|
||||||
* customize header height
|
|
||||||
*/
|
|
||||||
layout: 'side' | 'top' | 'mix';
|
|
||||||
/**
|
|
||||||
* layout of content: `Fluid` or `Fixed`, only works when layout is top
|
|
||||||
*/
|
|
||||||
contentWidth: 'Fluid' | 'Fixed';
|
|
||||||
menu: { locale?: boolean; defaultOpenAll?: boolean };
|
|
||||||
splitMenus?: boolean;
|
|
||||||
}
|
|
||||||
|
|
||||||
export const defaultSettings = {
|
|
||||||
navTheme: 'dark',
|
|
||||||
layout: 'side',
|
|
||||||
contentWidth: 'Fluid',
|
|
||||||
fixedHeader: false,
|
|
||||||
fixSiderbar: false,
|
|
||||||
menu: {},
|
|
||||||
headerHeight: 48,
|
|
||||||
iconfontUrl: '',
|
|
||||||
title: config.title
|
|
||||||
};
|
|
||||||
|
|
||||||
export const defaultSettingProps = {
|
|
||||||
navTheme: {
|
|
||||||
type: String as PropType<PureSettings['navTheme']>,
|
|
||||||
default: defaultSettings.navTheme,
|
|
||||||
},
|
|
||||||
title: {
|
|
||||||
type: String as PropType<PureSettings['title']>,
|
|
||||||
default: () => defaultSettings.title,
|
|
||||||
},
|
|
||||||
layout: {
|
|
||||||
type: String as PropType<PureSettings['layout']>,
|
|
||||||
default: defaultSettings.layout,
|
|
||||||
},
|
|
||||||
contentWidth: {
|
|
||||||
type: String as PropType<PureSettings['contentWidth']>,
|
|
||||||
default: defaultSettings.contentWidth,
|
|
||||||
},
|
|
||||||
menu: {
|
|
||||||
type: Object as PropType<PureSettings['menu']>,
|
|
||||||
default: () => {
|
|
||||||
return {
|
|
||||||
locale: true,
|
|
||||||
};
|
|
||||||
},
|
|
||||||
},
|
|
||||||
headerHeight: {
|
|
||||||
type: Number as PropType<PureSettings['headerHeight']>,
|
|
||||||
default: defaultSettings.headerHeight,
|
|
||||||
},
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
import { InjectionKey } from 'vue'
|
|
||||||
|
|
||||||
export type ContextType<T> = any;
|
|
||||||
|
|
||||||
export const useContext = <T>(
|
|
||||||
contextInjectKey: string | InjectionKey<ContextType<T>> = Symbol(),
|
|
||||||
defaultValue?: ContextType<T>
|
|
||||||
): T => {
|
|
||||||
return inject(contextInjectKey, defaultValue || ({} as T));
|
|
||||||
};
|
|
||||||
|
|
@ -1,4 +1,2 @@
|
||||||
export { default as ProLayout } from './BasicLayout';
|
|
||||||
export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
|
export { default as BasicLayoutPage } from './BasicLayoutPage.vue'
|
||||||
export { default as BlankLayoutPage } from './BlankLayoutPage.vue'
|
export { default as BlankLayoutPage } from './BlankLayoutPage.vue'
|
||||||
export { default as PageContainer } from './components/PageContainer'
|
|
||||||
|
|
@ -1,68 +0,0 @@
|
||||||
import type { VNode, Slots } from 'vue';
|
|
||||||
import { BreadcrumbProps } from 'components/Layout/RouteContext'
|
|
||||||
import { VueNode } from 'ant-design-vue/es/_util/type'
|
|
||||||
|
|
||||||
export interface MetaRecord {
|
|
||||||
/**
|
|
||||||
* @name 菜单的icon
|
|
||||||
*/
|
|
||||||
icon?: string | VNode;
|
|
||||||
/**
|
|
||||||
* @name 自定义菜单的国际化 key，如果没有则返回自身
|
|
||||||
*/
|
|
||||||
title?: string;
|
|
||||||
/**
|
|
||||||
* @name 在菜单中隐藏子节点
|
|
||||||
*/
|
|
||||||
hideChildInMenu?: boolean;
|
|
||||||
/**
|
|
||||||
* @name 在菜单中隐藏自己和子节点
|
|
||||||
*/
|
|
||||||
hideInMenu?: boolean;
|
|
||||||
|
|
||||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
|
||||||
[key: string]: any;
|
|
||||||
}
|
|
||||||
export interface MenuDataItem {
|
|
||||||
/**
|
|
||||||
* @name 用于标定选中的值，默认是 path
|
|
||||||
*/
|
|
||||||
path: string;
|
|
||||||
name?: string | symbol;
|
|
||||||
meta?: MetaRecord;
|
|
||||||
/**
|
|
||||||
* @name 子菜单
|
|
||||||
*/
|
|
||||||
children?: MenuDataItem[];
|
|
||||||
}
|
|
||||||
export type Theme = 'dark' | 'light';
|
|
||||||
|
|
||||||
export type MenuTheme = Theme;
|
|
||||||
export type MenuMode = 'horizontal' | 'vertical' | 'inline';
|
|
||||||
export type LayoutType = 'side' | 'top' | 'mix';
|
|
||||||
export type ProProps = Record<never, never>;
|
|
||||||
export type TargetType = '_blank' | '_self' | unknown;
|
|
||||||
export type BreadcrumbRender = BreadcrumbProps['itemRender'];
|
|
||||||
|
|
||||||
export type CustomRender = VueNode;
|
|
||||||
export type WithFalse<T> = T | false;
|
|
||||||
export type LogoRender = WithFalse<CustomRender>;
|
|
||||||
|
|
||||||
export type DefaultPropRender = WithFalse<CustomRender>;
|
|
||||||
export type HeaderContentRender = WithFalse<() => CustomRender>;
|
|
||||||
export type HeaderRender = WithFalse<(props: ProProps) => CustomRender>;
|
|
||||||
export type FooterRender = WithFalse<(props: ProProps) => CustomRender>;
|
|
||||||
export type RightContentRender = WithFalse<(props: ProProps) => CustomRender>;
|
|
||||||
export type MenuItemRender = WithFalse<
|
|
||||||
(args: { item: MenuDataItem; title?: JSX.Element; icon?: JSX.Element }) => CustomRender
|
|
||||||
>;
|
|
||||||
export type SubMenuItemRender = WithFalse<(args: { item: MenuDataItem; children?: CustomRender[] }) => CustomRender>;
|
|
||||||
export type MenuHeaderRender = WithFalse<(logo: CustomRender, title: CustomRender, props?: ProProps) => CustomRender>;
|
|
||||||
export type MenuContentRender = WithFalse<(props: ProProps, defaultDom: CustomRender) => CustomRender>;
|
|
||||||
export type MenuFooterRender = WithFalse<(props?: ProProps) => CustomRender>;
|
|
||||||
export type MenuExtraRender = WithFalse<(props?: ProProps) => CustomRender>;
|
|
||||||
|
|
||||||
export type CollapsedButtonRender = WithFalse<(collapsed?: boolean) => CustomRender>;
|
|
||||||
|
|
||||||
export type PageHeaderRender = WithFalse<(props?: ProProps) => CustomRender>;
|
|
||||||
|
|
||||||
|
|
@ -1,48 +0,0 @@
|
||||||
import type { MenuDataItem } from 'components/Layout/typings'
|
|
||||||
import type { RouteRecord, RouteRecordRaw } from 'vue-router'
|
|
||||||
|
|
||||||
export function getMenuFirstChildren(menus: MenuDataItem[], key?: string) {
|
|
||||||
return key === undefined ? [] : (menus[menus.findIndex((menu) => menu.path === key)] || {}).children || [];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function clearMenuItem(menusData: RouteRecord[] | RouteRecordRaw[]): RouteRecordRaw[] {
|
|
||||||
return menusData
|
|
||||||
.map((item: RouteRecord | RouteRecordRaw) => {
|
|
||||||
const finalItem = { ...item };
|
|
||||||
if (finalItem.meta?.hideInMenu) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
|
|
||||||
if (finalItem && finalItem?.children) {
|
|
||||||
if (
|
|
||||||
!finalItem.meta?.hideChildInMenu &&
|
|
||||||
finalItem.children.some(
|
|
||||||
(child: RouteRecord | RouteRecordRaw) => child && !child.meta?.hideInMenu
|
|
||||||
)
|
|
||||||
) {
|
|
||||||
return {
|
|
||||||
...item,
|
|
||||||
children: clearMenuItem(finalItem.children),
|
|
||||||
};
|
|
||||||
}
|
|
||||||
delete finalItem.children;
|
|
||||||
}
|
|
||||||
return finalItem;
|
|
||||||
})
|
|
||||||
.filter((item) => item) as RouteRecordRaw[];
|
|
||||||
}
|
|
||||||
|
|
||||||
export function flatMap(menusData: RouteRecord[]): MenuDataItem[] {
|
|
||||||
return menusData
|
|
||||||
.map((item) => {
|
|
||||||
const finalItem = { ...item } as MenuDataItem;
|
|
||||||
if (!finalItem.name || finalItem.meta?.hideInMenu) {
|
|
||||||
return null;
|
|
||||||
}
|
|
||||||
if (finalItem.children) {
|
|
||||||
delete finalItem.children;
|
|
||||||
}
|
|
||||||
return finalItem;
|
|
||||||
})
|
|
||||||
.filter((item) => item) as MenuDataItem[];
|
|
||||||
}
|
|
||||||
|
|
@ -74,6 +74,10 @@ watchEffect(() => {
|
||||||
}, 300);
|
}, 300);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 光标位置插入内容
|
||||||
|
* @param {String} val
|
||||||
|
*/
|
||||||
const insert = (val) => {
|
const insert = (val) => {
|
||||||
if (!instance) return;
|
if (!instance) return;
|
||||||
const position = instance.getPosition();
|
const position = instance.getPosition();
|
||||||
|
|
@ -90,12 +94,18 @@ const insert = (val) => {
|
||||||
]);
|
]);
|
||||||
};
|
};
|
||||||
|
|
||||||
// watch(
|
watch(
|
||||||
// () => props.modelValue,
|
() => props.modelValue,
|
||||||
// (val) => {
|
(val) => {
|
||||||
// instance.setValue(val);
|
if (!instance) return;
|
||||||
// },
|
// setValue之前获取光标位置
|
||||||
// );
|
const position = instance.getPosition();
|
||||||
|
// setValue之后光标位置改变
|
||||||
|
instance.setValue(val);
|
||||||
|
// 设置光标位置为setValue之前的位置
|
||||||
|
instance.setPosition(position);
|
||||||
|
},
|
||||||
|
);
|
||||||
|
|
||||||
defineExpose({
|
defineExpose({
|
||||||
editorFormat,
|
editorFormat,
|
||||||
|
|
|
||||||
|
|
@ -9,7 +9,8 @@ import Search from './Search'
|
||||||
import NormalUpload from './NormalUpload/index.vue'
|
import NormalUpload from './NormalUpload/index.vue'
|
||||||
import FileFormat from './FileFormat/index.vue'
|
import FileFormat from './FileFormat/index.vue'
|
||||||
import JUpload from './JUpload/index.vue'
|
import JUpload from './JUpload/index.vue'
|
||||||
import { BasicLayoutPage, BlankLayoutPage, PageContainer } from './Layout'
|
import { BasicLayoutPage, BlankLayoutPage } from './Layout'
|
||||||
|
import { PageContainer } from 'jetlinks-ui-components/es/components'
|
||||||
import Ellipsis from './Ellipsis/index.vue'
|
import Ellipsis from './Ellipsis/index.vue'
|
||||||
import JEmpty from './Empty/index.vue'
|
import JEmpty from './Empty/index.vue'
|
||||||
import AMapComponent from './AMapComponent/index.vue'
|
import AMapComponent from './AMapComponent/index.vue'
|
||||||
|
|
|
||||||
|
|
@ -6,7 +6,6 @@ import router from './router'
|
||||||
import './style.less'
|
import './style.less'
|
||||||
import jComponents from 'jetlinks-ui-components'
|
import jComponents from 'jetlinks-ui-components'
|
||||||
import 'jetlinks-ui-components/es/style.js'
|
import 'jetlinks-ui-components/es/style.js'
|
||||||
import 'jetlinks-ui-components/es/style/variable.less'
|
|
||||||
|
|
||||||
const app = createApp(App)
|
const app = createApp(App)
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -23,10 +23,6 @@ export default [
|
||||||
path: '/form',
|
path: '/form',
|
||||||
component: () => import('@/views/demo/Form.vue')
|
component: () => import('@/views/demo/Form.vue')
|
||||||
},
|
},
|
||||||
{
|
|
||||||
path: '/search',
|
|
||||||
component: () => import('@/views/demo/Search.vue')
|
|
||||||
},
|
|
||||||
{
|
{
|
||||||
path: '/system/Api',
|
path: '/system/Api',
|
||||||
component: () => import('@/views/system/Platforms/index.vue')
|
component: () => import('@/views/system/Platforms/index.vue')
|
||||||
|
|
|
||||||
|
|
@ -144,7 +144,7 @@ const columns = [
|
||||||
search: {
|
search: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
},
|
},
|
||||||
// width: 200,
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '请求方法',
|
title: '请求方法',
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,101 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
visible
|
||||||
|
title="编辑"
|
||||||
|
@ok="handleOk"
|
||||||
|
width="770px"
|
||||||
|
@cancel="emits('update:visible', false)"
|
||||||
|
>
|
||||||
|
<a-form :model="form" layout="vertical">
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item
|
||||||
|
label="姓名"
|
||||||
|
:rules="[{ required: true, message: '姓名必填' }]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.name"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="用户名">
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.username"
|
||||||
|
placeholder="请输入用户名"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="角色">
|
||||||
|
<a-input
|
||||||
|
:value="
|
||||||
|
form.roleList.map((item) => item.name).join(',')
|
||||||
|
"
|
||||||
|
placeholder="请输入角色"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="组织">
|
||||||
|
<a-input
|
||||||
|
:value="
|
||||||
|
form.orgList.map((item) => item.name).join(',')
|
||||||
|
"
|
||||||
|
placeholder="请输入组织"
|
||||||
|
disabled
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-row :gutter="24">
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="手机号">
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.telephone"
|
||||||
|
placeholder="请输入手机号"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
<a-col :span="12">
|
||||||
|
<a-form-item label="邮箱">
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.email"
|
||||||
|
placeholder="请输入邮箱"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import { updateMeInfo_api } from '@/api/account/center';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import { userInfoType } from '../typing';
|
||||||
|
|
||||||
|
const emits = defineEmits(['ok', 'update:visible']);
|
||||||
|
const props = defineProps<{
|
||||||
|
visible: boolean;
|
||||||
|
data: userInfoType;
|
||||||
|
}>();
|
||||||
|
const form = ref(props.data);
|
||||||
|
|
||||||
|
const handleOk = () => {
|
||||||
|
updateMeInfo_api(form.value).then((resp) => {
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('保存成功');
|
||||||
|
emits('ok');
|
||||||
|
emits('update:visible', false);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -0,0 +1,138 @@
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
visible
|
||||||
|
title="重置密码"
|
||||||
|
@ok="handleOk"
|
||||||
|
width="520px"
|
||||||
|
@cancel="emits('update:visible', false)"
|
||||||
|
>
|
||||||
|
<a-form :model="form" layout="vertical" ref="formRef">
|
||||||
|
<a-form-item
|
||||||
|
label="旧密码"
|
||||||
|
name="oldPassword"
|
||||||
|
:rules="[
|
||||||
|
{ required: true },
|
||||||
|
{ validator: checkMothods.old, trigger: 'blur' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input
|
||||||
|
v-model:value="form.oldPassword"
|
||||||
|
placeholder="请输入旧密码"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
label="密码"
|
||||||
|
name="newPassword"
|
||||||
|
:rules="[
|
||||||
|
{ required: true },
|
||||||
|
{ validator: checkMothods.new, trigger: 'blur' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input-password
|
||||||
|
v-model:value="form.newPassword"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
<a-form-item
|
||||||
|
label="确认密码"
|
||||||
|
name="confirmPassword"
|
||||||
|
:rules="[
|
||||||
|
{ required: true },
|
||||||
|
{ validator: checkMothods.confirm, trigger: 'blur' },
|
||||||
|
]"
|
||||||
|
>
|
||||||
|
<a-input-password
|
||||||
|
v-model:value="form.confirmPassword"
|
||||||
|
placeholder="请输入姓名"
|
||||||
|
/>
|
||||||
|
</a-form-item>
|
||||||
|
</a-form>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import {
|
||||||
|
updateMepsd_api,
|
||||||
|
checkOldPassword_api,
|
||||||
|
validateField_api,
|
||||||
|
} from '@/api/account/center';
|
||||||
|
import { FormInstance, message } from 'ant-design-vue';
|
||||||
|
import { Rule } from 'ant-design-vue/lib/form';
|
||||||
|
|
||||||
|
const emits = defineEmits(['ok', 'update:visible']);
|
||||||
|
const props = defineProps<{
|
||||||
|
visible: boolean;
|
||||||
|
}>();
|
||||||
|
const formRef = ref<FormInstance>();
|
||||||
|
const form = ref<formType>({
|
||||||
|
oldPassword: '',
|
||||||
|
newPassword: '',
|
||||||
|
confirmPassword: '',
|
||||||
|
});
|
||||||
|
|
||||||
|
const checkMothods = {
|
||||||
|
old: async (_rule: Rule, value: string) => {
|
||||||
|
if (!value) return Promise.reject('请输入密码');
|
||||||
|
try {
|
||||||
|
const resp: any = await checkOldPassword_api(value);
|
||||||
|
if (resp.status === 200 && !resp.result.passed)
|
||||||
|
return Promise.reject(resp.result.reason);
|
||||||
|
else return Promise.resolve();
|
||||||
|
} catch (error) {
|
||||||
|
return Promise.reject('验证失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
new: async (_rule: Rule, value: string) => {
|
||||||
|
if (!value) return Promise.reject('请输入密码');
|
||||||
|
else if (
|
||||||
|
form.value.confirmPassword &&
|
||||||
|
value !== form.value.confirmPassword
|
||||||
|
)
|
||||||
|
return Promise.reject('两次密码输入不一致');
|
||||||
|
try {
|
||||||
|
const resp: any = await validateField_api('password', value);
|
||||||
|
if (resp.status === 200 && !resp.result.passed)
|
||||||
|
return Promise.reject(resp.result.reason);
|
||||||
|
else return Promise.resolve();
|
||||||
|
} catch (error) {
|
||||||
|
return Promise.reject('验证失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
confirm: async (_rule: Rule, value: string) => {
|
||||||
|
if (!value) return Promise.reject('请输入确认密码');
|
||||||
|
|
||||||
|
try {
|
||||||
|
const resp: any = await validateField_api('password', value);
|
||||||
|
if (resp.status === 200 && !resp.result.passed)
|
||||||
|
return Promise.reject(resp.result.reason);
|
||||||
|
else return Promise.resolve();
|
||||||
|
} catch (error) {
|
||||||
|
return Promise.reject('验证失败');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
};
|
||||||
|
|
||||||
|
const handleOk = () => {
|
||||||
|
formRef.value?.validate().then(() => {
|
||||||
|
const params = {
|
||||||
|
oldPassword: form.value.oldPassword,
|
||||||
|
newPassword: form.value.newPassword,
|
||||||
|
};
|
||||||
|
// updateMepsd_api(params).then((resp) => {
|
||||||
|
// if (resp.status === 200) {
|
||||||
|
// message.success('保存成功');
|
||||||
|
// emits('ok');
|
||||||
|
// emits('update:visible', false);
|
||||||
|
// }
|
||||||
|
// });
|
||||||
|
});
|
||||||
|
};
|
||||||
|
console.clear();
|
||||||
|
type formType = {
|
||||||
|
oldPassword: string;
|
||||||
|
newPassword: string;
|
||||||
|
confirmPassword: string;
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
|
|
@ -63,11 +63,27 @@
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<p>角色</p>
|
<p>角色</p>
|
||||||
<p>{{ userInfo.roleList.join(',') || '-' }}</p>
|
<p>
|
||||||
|
{{
|
||||||
|
(userInfo.roleList &&
|
||||||
|
userInfo.roleList
|
||||||
|
.map((item) => item.name)
|
||||||
|
.join(',')) ||
|
||||||
|
'-'
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<p>组织</p>
|
<p>组织</p>
|
||||||
<p>{{ userInfo.orgList.join(',') || '-' }}</p>
|
<p>
|
||||||
|
{{
|
||||||
|
(userInfo.orgList &&
|
||||||
|
userInfo.orgList
|
||||||
|
.map((item) => item.name)
|
||||||
|
.join(',')) ||
|
||||||
|
'-'
|
||||||
|
}}
|
||||||
|
</p>
|
||||||
</div>
|
</div>
|
||||||
<div class="info-card">
|
<div class="info-card">
|
||||||
<p>邮箱</p>
|
<p>邮箱</p>
|
||||||
|
|
@ -78,6 +94,7 @@
|
||||||
type="EditOutlined"
|
type="EditOutlined"
|
||||||
class="edit"
|
class="edit"
|
||||||
style="right: 40px"
|
style="right: 40px"
|
||||||
|
@click="editInfoVisible = true"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
@ -94,10 +111,19 @@
|
||||||
>安全性高的密码可以使帐号更安全。建议您定期更换密码,设置一个包含字母,符号或数字中至少两项且长度超过8位的密码</span
|
>安全性高的密码可以使帐号更安全。建议您定期更换密码,设置一个包含字母,符号或数字中至少两项且长度超过8位的密码</span
|
||||||
>
|
>
|
||||||
</div>
|
</div>
|
||||||
<AIcon type="EditOutlined" class="edit" />
|
<span class="edit">
|
||||||
|
<PermissionButton
|
||||||
|
:uhasPermission="`${permission}:update`"
|
||||||
|
type="link"
|
||||||
|
@click="editPasswordVisible = true"
|
||||||
|
>
|
||||||
|
<AIcon type="EditOutlined" style="color: #1d39c4;" />
|
||||||
|
</PermissionButton>
|
||||||
|
</span>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<!-- 社区版不显示 -->
|
||||||
|
<div class="card" v-if="isNoCommunity">
|
||||||
<h3>绑定三方账号</h3>
|
<h3>绑定三方账号</h3>
|
||||||
<div class="content">
|
<div class="content">
|
||||||
<div class="account-card" v-for="item in bindList">
|
<div class="account-card" v-for="item in bindList">
|
||||||
|
|
@ -106,7 +132,7 @@
|
||||||
style="height: 50px"
|
style="height: 50px"
|
||||||
alt=""
|
alt=""
|
||||||
/>
|
/>
|
||||||
<div class="text">
|
<Ellipsis style="width: 150px; font-size: 22px">
|
||||||
<div v-if="item.bound">
|
<div v-if="item.bound">
|
||||||
<div>绑定名：{{ item.others.name }}</div>
|
<div>绑定名：{{ item.others.name }}</div>
|
||||||
<div>
|
<div>
|
||||||
|
|
@ -118,30 +144,99 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div v-else>{{ item.name }}未绑定</div>
|
<div v-else>{{ item.name }}未绑定</div>
|
||||||
</div>
|
</Ellipsis>
|
||||||
|
<a-popconfirm
|
||||||
<a-button v-if="item.bound">解除绑定</a-button>
|
v-if="item.bound"
|
||||||
<a-button v-else type="primary">立即绑定</a-button>
|
title="确认解除绑定嘛?"
|
||||||
|
@confirm="() => unBind(item.id)"
|
||||||
|
>
|
||||||
|
<a-button>解除绑定</a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
<a-button
|
||||||
|
v-else
|
||||||
|
type="primary"
|
||||||
|
@click="clickBind(item.id)"
|
||||||
|
>立即绑定</a-button
|
||||||
|
>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div class="card">
|
<!-- 第三方用户不显示 -->
|
||||||
|
<div class="card" v-if="!isApiUser">
|
||||||
<h3>首页视图</h3>
|
<h3>首页视图</h3>
|
||||||
|
<div class="choose-view">
|
||||||
|
<a-row class="view-content" :gutter="24">
|
||||||
|
<a-col
|
||||||
|
:span="6"
|
||||||
|
class="select-item"
|
||||||
|
:class="{ selected: currentView === 'device' }"
|
||||||
|
@click="currentView = 'device'"
|
||||||
|
>
|
||||||
|
<img :src="getImage('/home/device.png')" alt="" />
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:span="6"
|
||||||
|
class="select-item"
|
||||||
|
:class="{ selected: currentView === 'ops' }"
|
||||||
|
@click="currentView = 'ops'"
|
||||||
|
>
|
||||||
|
<img :src="getImage('/home/ops.png')" alt="" />
|
||||||
|
</a-col>
|
||||||
|
<a-col
|
||||||
|
:span="6"
|
||||||
|
class="select-item"
|
||||||
|
:class="{
|
||||||
|
selected: currentView === 'comprehensive',
|
||||||
|
}"
|
||||||
|
@click="currentView = 'comprehensive'"
|
||||||
|
>
|
||||||
|
<img
|
||||||
|
:src="getImage('/home/comprehensive.png')"
|
||||||
|
alt=""
|
||||||
|
/>
|
||||||
|
</a-col>
|
||||||
|
</a-row>
|
||||||
|
<a-button type="primary" class="btn" @click="confirm"
|
||||||
|
>确定</a-button
|
||||||
|
>
|
||||||
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
<EditInfoDialog
|
||||||
|
v-if="editInfoVisible"
|
||||||
|
v-model:visible="editInfoVisible"
|
||||||
|
:data="userInfo"
|
||||||
|
@ok="getUserInfo"
|
||||||
|
/>
|
||||||
|
<EditPasswordDialog
|
||||||
|
v-if="editPasswordVisible"
|
||||||
|
v-model:visible="editPasswordVisible"
|
||||||
|
/>
|
||||||
</div>
|
</div>
|
||||||
</page-container>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
|
import PermissionButton from '@/components/PermissionButton/index.vue';
|
||||||
|
import EditInfoDialog from './components/EditInfoDialog.vue';
|
||||||
|
import EditPasswordDialog from './components/EditPasswordDialog.vue';
|
||||||
import { LockOutlined } from '@ant-design/icons-vue';
|
import { LockOutlined } from '@ant-design/icons-vue';
|
||||||
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
import { BASE_API_PATH, TOKEN_KEY } from '@/utils/variable';
|
||||||
import { LocalStore, getImage } from '@/utils/comm';
|
import { LocalStore, getImage } from '@/utils/comm';
|
||||||
import { useUserInfo } from '@/store/userInfo';
|
|
||||||
import { message, UploadChangeParam, UploadFile } from 'ant-design-vue';
|
import { message, UploadChangeParam, UploadFile } from 'ant-design-vue';
|
||||||
import { getSsoBinds_api } from '@/api/account/center';
|
import {
|
||||||
|
getMeInfo_api,
|
||||||
|
getSsoBinds_api,
|
||||||
|
unBind_api,
|
||||||
|
} from '@/api/account/center';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
|
import { getMe_api, getView_api, setView_api } from '@/api/home';
|
||||||
|
import { isNoCommunity } from '@/utils/utils';
|
||||||
|
import { userInfoType } from './typing';
|
||||||
|
|
||||||
const userInfo = useUserInfo().$state.userInfos as any as userInfoType;
|
const permission = 'system/User';
|
||||||
|
const userInfo = ref<userInfoType>({});
|
||||||
|
// 第三方账号
|
||||||
const bindList = ref<any[]>([]);
|
const bindList = ref<any[]>([]);
|
||||||
const bindIcon = {
|
const bindIcon = {
|
||||||
'dingtalk-ent-app': '/notice/dingtalk.png',
|
'dingtalk-ent-app': '/notice/dingtalk.png',
|
||||||
|
|
@ -149,6 +244,24 @@ const bindIcon = {
|
||||||
'internal-standalone': '/apply/provider1.png',
|
'internal-standalone': '/apply/provider1.png',
|
||||||
'third-party': '/apply/provider5.png',
|
'third-party': '/apply/provider5.png',
|
||||||
};
|
};
|
||||||
|
const unBind = (id: string) => {
|
||||||
|
unBind_api(id).then((resp) => {
|
||||||
|
if (resp.status === 200) {
|
||||||
|
message.success('解绑成功');
|
||||||
|
getSsoBinds();
|
||||||
|
}
|
||||||
|
});
|
||||||
|
};
|
||||||
|
const clickBind = (id: string) => {
|
||||||
|
window.open(`/${origin}/application/sso/${id}/login?autoCreateUser=false`);
|
||||||
|
localStorage.setItem('onBind', 'false');
|
||||||
|
localStorage.setItem('onLogin', 'yes');
|
||||||
|
window.onstorage = (e) => {
|
||||||
|
if (e.newValue) {
|
||||||
|
getSsoBinds();
|
||||||
|
}
|
||||||
|
};
|
||||||
|
};
|
||||||
const upload = reactive({
|
const upload = reactive({
|
||||||
fileList: [] as any[],
|
fileList: [] as any[],
|
||||||
uploadLoading: false,
|
uploadLoading: false,
|
||||||
|
|
@ -158,36 +271,74 @@ const upload = reactive({
|
||||||
} else if (info.file.status === 'done') {
|
} else if (info.file.status === 'done') {
|
||||||
info.file.url = info.file.response?.result;
|
info.file.url = info.file.response?.result;
|
||||||
upload.uploadLoading = false;
|
upload.uploadLoading = false;
|
||||||
userInfo.avatar = info.file.response?.result;
|
userInfo.value.avatar = info.file.response?.result;
|
||||||
} else if (info.file.status === 'error') {
|
} else if (info.file.status === 'error') {
|
||||||
console.log(info.file);
|
|
||||||
upload.uploadLoading = false;
|
upload.uploadLoading = false;
|
||||||
message.error('logo上传失败，请稍后再试');
|
message.error('logo上传失败，请稍后再试');
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
});
|
});
|
||||||
|
// 首页视图
|
||||||
|
const isApiUser = ref<boolean>();
|
||||||
|
const currentView = ref<string>('');
|
||||||
|
const confirm = () => {
|
||||||
|
setView_api({
|
||||||
|
name: 'view',
|
||||||
|
content: currentView.value,
|
||||||
|
}).then(() => message.success('保存成功'));
|
||||||
|
};
|
||||||
|
|
||||||
|
const editInfoVisible = ref<boolean>(false);
|
||||||
|
const editPasswordVisible = ref<boolean>(false);
|
||||||
init();
|
init();
|
||||||
|
|
||||||
function init() {
|
function init() {
|
||||||
|
getUserInfo();
|
||||||
|
isNoCommunity && getSsoBinds();
|
||||||
|
getViews();
|
||||||
|
}
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 获取用户信息
|
||||||
|
*/
|
||||||
|
function getUserInfo() {
|
||||||
|
getMeInfo_api().then((resp) => {
|
||||||
|
userInfo.value = resp.result as userInfoType;
|
||||||
|
});
|
||||||
|
}
|
||||||
|
/**
|
||||||
|
* 获取绑定第三方账号
|
||||||
|
*/
|
||||||
|
function getSsoBinds() {
|
||||||
getSsoBinds_api().then((resp: any) => {
|
getSsoBinds_api().then((resp: any) => {
|
||||||
if (resp.status === 200) bindList.value = resp.result;
|
if (resp.status === 200) bindList.value = resp.result;
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
/**
|
||||||
type userInfoType = {
|
* 获取首页视图
|
||||||
avatar: string;
|
*/
|
||||||
createTime: number;
|
function getViews() {
|
||||||
email: string;
|
// 判断是否是api用户 不是则获取选中的视图
|
||||||
id: string;
|
getMe_api()
|
||||||
name: string;
|
.then((resp: any) => {
|
||||||
orgList: string[];
|
if (resp && resp.status === 200) {
|
||||||
roleList: string[];
|
isApiUser.value = resp.result.dimensions.find(
|
||||||
status: number;
|
(item: any) =>
|
||||||
telephone: string;
|
item.type === 'api-client' ||
|
||||||
tenantDisabled: boolean;
|
item.type.id === 'api-client',
|
||||||
type: { name: string; id: string };
|
);
|
||||||
username: string;
|
if (!isApiUser.value) return 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';
|
||||||
|
}
|
||||||
|
});
|
||||||
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
|
|
@ -216,6 +367,7 @@ type userInfoType = {
|
||||||
.content {
|
.content {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin-top: 24px;
|
margin-top: 24px;
|
||||||
|
flex-wrap: wrap;
|
||||||
.content-item {
|
.content-item {
|
||||||
margin-right: 24px;
|
margin-right: 24px;
|
||||||
.info-card {
|
.info-card {
|
||||||
|
|
@ -250,16 +402,32 @@ type userInfoType = {
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
padding: 24px;
|
padding: 24px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
.text {
|
.choose-view {
|
||||||
display: -webkit-box;
|
width: 100%;
|
||||||
font-size: 22px;
|
margin-top: 48px;
|
||||||
width: 150px;
|
.view-content {
|
||||||
overflow: hidden;
|
display: flex;
|
||||||
text-overflow: ellipsis;
|
flex-flow: row wrap;
|
||||||
word-break: break-all;
|
.select-item {
|
||||||
|
border: 2px solid transparent;
|
||||||
|
img {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
&.selected {
|
||||||
|
border-color: #10239e;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
display: block;
|
||||||
|
margin: 48px auto;
|
||||||
|
margin-bottom: 0;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,17 @@
|
||||||
|
|
||||||
|
import { dictType } from '@/views/system/Department/typing';
|
||||||
|
|
||||||
|
export type userInfoType = {
|
||||||
|
avatar: string;
|
||||||
|
createTime: number;
|
||||||
|
email: string;
|
||||||
|
id: string;
|
||||||
|
name: string;
|
||||||
|
orgList: dictType;
|
||||||
|
roleList: dictType;
|
||||||
|
status: number;
|
||||||
|
telephone: string;
|
||||||
|
tenantDisabled: boolean;
|
||||||
|
type: { name: string; id: string };
|
||||||
|
username: string;
|
||||||
|
};
|
||||||
|
|
@ -1,120 +0,0 @@
|
||||||
<template>
|
|
||||||
<BasicLayoutPage
|
|
||||||
|
|
||||||
>
|
|
||||||
<div class='search'>
|
|
||||||
<Search
|
|
||||||
:columns='columns'
|
|
||||||
target='device-instance-search'
|
|
||||||
@search='search'
|
|
||||||
/>
|
|
||||||
<Search
|
|
||||||
type='simple'
|
|
||||||
:columns='columns'
|
|
||||||
target='product'
|
|
||||||
@search='search'
|
|
||||||
/>
|
|
||||||
</div>
|
|
||||||
</BasicLayoutPage>
|
|
||||||
</template>
|
|
||||||
|
|
||||||
<script setup name='demoSearch'>
|
|
||||||
|
|
||||||
import { category } from '../../api/device/product'
|
|
||||||
import BasicLayoutPage from '@/components/Layout/BasicLayoutPage.vue'
|
|
||||||
|
|
||||||
const columns = [
|
|
||||||
{
|
|
||||||
title: '名称',
|
|
||||||
dataIndex: 'name',
|
|
||||||
key: 'name',
|
|
||||||
search: {
|
|
||||||
rename: 'deviceId',
|
|
||||||
type: 'select',
|
|
||||||
options: [
|
|
||||||
{
|
|
||||||
label: '测试1',
|
|
||||||
value: 'test1'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '测试2',
|
|
||||||
value: 'test2'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: '测试3',
|
|
||||||
value: 'test3'
|
|
||||||
},
|
|
||||||
],
|
|
||||||
handleValue: (v) => {
|
|
||||||
return '123'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '序号',
|
|
||||||
dataIndex: 'sortIndex',
|
|
||||||
key: 'sortIndex',
|
|
||||||
scopedSlots: true,
|
|
||||||
search: {
|
|
||||||
type: 'number',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: 'ID',
|
|
||||||
dataIndex: 'id',
|
|
||||||
key: 'id',
|
|
||||||
search: {
|
|
||||||
type: 'string',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '时间',
|
|
||||||
dataIndex: 'date',
|
|
||||||
key: 'date',
|
|
||||||
search: {
|
|
||||||
type: 'date',
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '时间2',
|
|
||||||
dataIndex: 'date2',
|
|
||||||
key: 'date2',
|
|
||||||
search: {
|
|
||||||
type: 'time',
|
|
||||||
defaultTermType: 'lt'
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '分类',
|
|
||||||
dataIndex: 'classifiedName',
|
|
||||||
key: 'classifiedName',
|
|
||||||
search: {
|
|
||||||
first: true,
|
|
||||||
type: 'treeSelect',
|
|
||||||
options: async () => {
|
|
||||||
return new Promise((res) => {
|
|
||||||
category().then(resp => {
|
|
||||||
res(resp.result)
|
|
||||||
})
|
|
||||||
})
|
|
||||||
}
|
|
||||||
}
|
|
||||||
},
|
|
||||||
{
|
|
||||||
title: '操作',
|
|
||||||
key: 'action',
|
|
||||||
fixed: 'right',
|
|
||||||
width: 250,
|
|
||||||
scopedSlots: true,
|
|
||||||
}
|
|
||||||
]
|
|
||||||
const search = (params) => {
|
|
||||||
console.log(params)
|
|
||||||
}
|
|
||||||
</script>
|
|
||||||
|
|
||||||
<style scoped>
|
|
||||||
.search {
|
|
||||||
width: calc(100% - 330px);
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
|
|
@ -17,19 +17,21 @@
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="state-title-right">
|
<div class="state-title-right">
|
||||||
<div>
|
<div class="state-button">
|
||||||
<a-popconfirm
|
<PermissionButton
|
||||||
title="确定批量重试?"
|
type="link"
|
||||||
ok-text="确定"
|
|
||||||
cancel-text="取消"
|
|
||||||
@confirm="confirm"
|
|
||||||
v-if="
|
v-if="
|
||||||
item.key === 'failed' &&
|
item.key === 'failed' &&
|
||||||
stateInfo?.mode?.value === 'push'
|
stateInfo?.mode?.value === 'push'
|
||||||
"
|
"
|
||||||
|
hasPermission="device/Firmware:update"
|
||||||
|
:popConfirm="{
|
||||||
|
title: `确定批量重试`,
|
||||||
|
onConfirm: confirm,
|
||||||
|
}"
|
||||||
>
|
>
|
||||||
<a href="#">批量重试</a>
|
批量重试
|
||||||
</a-popconfirm>
|
</PermissionButton>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="img">
|
<div class="img">
|
||||||
|
|
@ -85,37 +87,27 @@
|
||||||
<span>{{ slotProps.progress }}%</span>
|
<span>{{ slotProps.progress }}%</span>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<a-space :size="16">
|
<a-space>
|
||||||
<a-tooltip
|
<template
|
||||||
v-for="i in getActions(slotProps)"
|
v-for="i in getActions(slotProps)"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
v-bind="i.tooltip"
|
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<PermissionButton
|
||||||
v-if="i.popConfirm"
|
:disabled="i.disabled"
|
||||||
v-bind="i.popConfirm"
|
:popConfirm="i.popConfirm"
|
||||||
>
|
:tooltip="{
|
||||||
<a-button
|
...i.tooltip,
|
||||||
:disabled="i.disabled"
|
}"
|
||||||
style="padding: 0"
|
style="padding: 0px"
|
||||||
type="link"
|
@click="i.onClick"
|
||||||
><AIcon :type="i.icon"
|
|
||||||
/></a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
<a-button
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
type="link"
|
||||||
v-else
|
:hasPermission="'device/Firmware:' + i.key"
|
||||||
@click="i.onClick && i.onClick(slotProps)"
|
|
||||||
>
|
>
|
||||||
<a-button
|
<template #icon
|
||||||
:disabled="i.disabled"
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
|
||||||
><AIcon :type="i.icon"
|
><AIcon :type="i.icon"
|
||||||
/></a-button>
|
/></template>
|
||||||
</a-button>
|
</PermissionButton>
|
||||||
</a-tooltip>
|
</template>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
|
|
@ -129,7 +121,6 @@ import {
|
||||||
taskById,
|
taskById,
|
||||||
history,
|
history,
|
||||||
historyCount,
|
historyCount,
|
||||||
queryProduct,
|
|
||||||
startTask,
|
startTask,
|
||||||
startOneTask,
|
startOneTask,
|
||||||
} from '@/api/device/firmware';
|
} from '@/api/device/firmware';
|
||||||
|
|
@ -138,8 +129,8 @@ import { getImage } from '@/utils/comm';
|
||||||
import moment from 'moment';
|
import moment from 'moment';
|
||||||
import { cloneDeep } from 'lodash-es';
|
import { cloneDeep } from 'lodash-es';
|
||||||
import Save from './Save.vue';
|
import Save from './Save.vue';
|
||||||
|
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
|
||||||
const route = useRoute();
|
const route = useRoute();
|
||||||
const params = ref<Record<string, any>>({});
|
const params = ref<Record<string, any>>({});
|
||||||
const taskId = route.params?.id as string;
|
const taskId = route.params?.id as string;
|
||||||
|
|
@ -286,7 +277,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
}
|
}
|
||||||
const Actions = [
|
const Actions = [
|
||||||
{
|
{
|
||||||
key: 'eye',
|
key: 'view',
|
||||||
text: '查看',
|
text: '查看',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '查看',
|
title: '查看',
|
||||||
|
|
@ -297,25 +288,23 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'try',
|
key: 'update',
|
||||||
text: '重试',
|
text: '重试',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '重试',
|
title: '重试',
|
||||||
},
|
},
|
||||||
icon: 'RedoOutlined',
|
icon: 'RedoOutlined',
|
||||||
onClick: async () => {
|
popConfirm: {
|
||||||
handlTry(data.id);
|
title: `确认重试?`,
|
||||||
|
onConfirm: async () => {
|
||||||
|
handlTry(data.id);
|
||||||
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
];
|
];
|
||||||
return Actions;
|
return Actions;
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlAdd = () => {
|
|
||||||
current.value = {};
|
|
||||||
visible.value = true;
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlEye = (data: string) => {
|
const handlEye = (data: string) => {
|
||||||
current.value = data || '';
|
current.value = data || '';
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
|
|
@ -434,4 +423,8 @@ const handleSearch = (e: any) => {
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.state-button {
|
||||||
|
margin-top: -5px;
|
||||||
|
margin-right: -12px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,14 @@
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<PermissionButton
|
||||||
><AIcon type="PlusOutlined" />新增</a-button
|
type="primary"
|
||||||
|
@click="handlAdd"
|
||||||
|
hasPermission="device/Firmware:add"
|
||||||
>
|
>
|
||||||
|
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||||
|
新增
|
||||||
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
<template #mode="slotProps">
|
<template #mode="slotProps">
|
||||||
<span>{{ slotProps.mode.text }}</span>
|
<span>{{ slotProps.mode.text }}</span>
|
||||||
|
|
@ -225,7 +230,7 @@ const handlEye = (data: object) => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlDetails = (id: string) => {
|
const handlDetails = (id: string) => {
|
||||||
// menuStory.jumpPage('device/Firmware/Task/Detail', { id });
|
menuStory.jumpPage('device/Firmware/Task/Detail', { id });
|
||||||
};
|
};
|
||||||
const saveChange = (value: boolean) => {
|
const saveChange = (value: boolean) => {
|
||||||
visible.value = false;
|
visible.value = false;
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,14 @@
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<PermissionButton
|
||||||
><plus-outlined />新增</a-button
|
type="primary"
|
||||||
|
@click="handlAdd"
|
||||||
|
hasPermission="device/Firmware:add"
|
||||||
>
|
>
|
||||||
|
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||||
|
新增
|
||||||
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
<template #productId="slotProps">
|
<template #productId="slotProps">
|
||||||
<span>{{ slotProps.productName }}</span>
|
<span>{{ slotProps.productName }}</span>
|
||||||
|
|
@ -28,37 +33,27 @@
|
||||||
}}</span>
|
}}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<a-space :size="16">
|
<a-space>
|
||||||
<a-tooltip
|
<template
|
||||||
v-for="i in getActions(slotProps)"
|
v-for="i in getActions(slotProps)"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
v-bind="i.tooltip"
|
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<PermissionButton
|
||||||
v-if="i.popConfirm"
|
:disabled="i.disabled"
|
||||||
v-bind="i.popConfirm"
|
:popConfirm="i.popConfirm"
|
||||||
>
|
:tooltip="{
|
||||||
<a-button
|
...i.tooltip,
|
||||||
:disabled="i.disabled"
|
}"
|
||||||
style="padding: 0"
|
style="padding: 0px"
|
||||||
type="link"
|
@click="i.onClick"
|
||||||
><AIcon :type="i.icon"
|
|
||||||
/></a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
<a-button
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
type="link"
|
||||||
v-else
|
:hasPermission="'device/Firmware:' + i.key"
|
||||||
@click="i.onClick && i.onClick(slotProps)"
|
|
||||||
>
|
>
|
||||||
<a-button
|
<template #icon
|
||||||
:disabled="i.disabled"
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
|
||||||
><AIcon :type="i.icon"
|
><AIcon :type="i.icon"
|
||||||
/></a-button>
|
/></template>
|
||||||
</a-button>
|
</PermissionButton>
|
||||||
</a-tooltip>
|
</template>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
|
|
@ -79,7 +74,6 @@ import type { FormDataType } from './type';
|
||||||
const menuStory = useMenuStore();
|
const menuStory = useMenuStore();
|
||||||
|
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
|
||||||
const params = ref<Record<string, any>>({});
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
const productOptions = ref([]);
|
const productOptions = ref([]);
|
||||||
|
|
@ -174,7 +168,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
}
|
}
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
key: 'FileTextOutlined',
|
key: 'view',
|
||||||
text: '升级任务',
|
text: '升级任务',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '升级任务',
|
title: '升级任务',
|
||||||
|
|
@ -185,7 +179,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'edit',
|
key: 'update',
|
||||||
text: '编辑',
|
text: '编辑',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
|
|
@ -211,7 +205,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
];
|
];
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlUpdate = (data: FormDataType) => {
|
const handlUpdate = (data: Partial<Record<string, any>>) => {
|
||||||
menuStory.jumpPage(
|
menuStory.jumpPage(
|
||||||
'device/Firmware/Task',
|
'device/Firmware/Task',
|
||||||
{},
|
{},
|
||||||
|
|
@ -226,7 +220,7 @@ const handlAdd = () => {
|
||||||
current.value = {};
|
current.value = {};
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
};
|
};
|
||||||
const handlEdit = (data: FormDataType) => {
|
const handlEdit = (data: Partial<Record<string, any>>) => {
|
||||||
current.value = _.cloneDeep(data);
|
current.value = _.cloneDeep(data);
|
||||||
visible.value = true;
|
visible.value = true;
|
||||||
};
|
};
|
||||||
|
|
|
||||||
|
|
@ -87,11 +87,11 @@ watchEffect(() => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="less" scoped>
|
<style lang="less" scoped>
|
||||||
@import 'ant-design-vue/es/style/themes/default.less';
|
// @import 'ant-design-vue/es/style/themes/default.less';
|
||||||
|
|
||||||
:root {
|
// :root {
|
||||||
--dialog-primary-color: @primary-color;
|
// --dialog-primary-color: @primary-color;
|
||||||
}
|
// }
|
||||||
|
|
||||||
.dialog-item {
|
.dialog-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
|
|
||||||
|
|
@ -5,7 +5,7 @@
|
||||||
<a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
|
<a-button :loading="save.loading" type="primary" @click="save.saveMetadata">保存</a-button>
|
||||||
</template>
|
</template>
|
||||||
<a-form ref="formRef" :model="form.model" layout="vertical">
|
<a-form ref="formRef" :model="form.model" layout="vertical">
|
||||||
<BaseForm :model-type="metadataStore.model.type" :type="type" v-model:value="form.model"></BaseForm>
|
<BaseForm :model-type="metadataStore.model.type" :type="type" v-model:value="form.model"></BaseForm>
|
||||||
</a-form>
|
</a-form>
|
||||||
</a-drawer>
|
</a-drawer>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -17,11 +17,11 @@ import { ProductItem } from '@/views/device/Product/typings';
|
||||||
import { message } from 'ant-design-vue/es';
|
import { message } from 'ant-design-vue/es';
|
||||||
import type { FormInstance } from 'ant-design-vue/es';
|
import type { FormInstance } from 'ant-design-vue/es';
|
||||||
import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
|
import { updateMetadata, asyncUpdateMetadata } from '../../metadata'
|
||||||
import { Store } from 'jetlinks-store';
|
|
||||||
import { detail } from '@/api/device/instance';
|
import { detail } from '@/api/device/instance';
|
||||||
import { DeviceInstance } from '@/views/device/Instance/typings';
|
import { DeviceInstance } from '@/views/device/Instance/typings';
|
||||||
import BaseForm from './BaseForm.vue';
|
import BaseForm from './BaseForm.vue';
|
||||||
import { PropType } from 'vue';
|
import { PropType } from 'vue';
|
||||||
|
import { _deploy } from '@/api/device/product';
|
||||||
|
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
type: {
|
type: {
|
||||||
|
|
@ -104,10 +104,16 @@ const save = reactive({
|
||||||
setTimeout(() => window.close(), 300);
|
setTimeout(() => window.close(), 300);
|
||||||
}
|
}
|
||||||
} else {
|
} else {
|
||||||
|
const { id } = route.params
|
||||||
|
if (props?.type === 'device') {
|
||||||
|
instanceStore.refresh(id as string)
|
||||||
|
} else {
|
||||||
|
productStore.refresh(id as string)
|
||||||
|
}
|
||||||
// Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
|
// Store.set(SystemConst.REFRESH_METADATA_TABLE, true);
|
||||||
if (deploy) {
|
if (deploy) {
|
||||||
// TODO 是否发布
|
_deploy(id as string)
|
||||||
Store.set('product-deploy', deploy);
|
// Store.set('product-deploy', deploy);
|
||||||
} else {
|
} else {
|
||||||
save.resetMetadata();
|
save.resetMetadata();
|
||||||
message.success({
|
message.success({
|
||||||
|
|
|
||||||
|
|
@ -18,7 +18,6 @@
|
||||||
<a-tabs @change="handleConvertMetadata">
|
<a-tabs @change="handleConvertMetadata">
|
||||||
<a-tab-pane v-for="item in codecs" :key="item.id" :tab="item.name">
|
<a-tab-pane v-for="item in codecs" :key="item.id" :tab="item.name">
|
||||||
<div class="cat-panel">
|
<div class="cat-panel">
|
||||||
<!-- TODO 代码编辑器 -->
|
|
||||||
<MonacoEditor v-model="value" theme="vs" style="height: 100%"></MonacoEditor>
|
<MonacoEditor v-model="value" theme="vs" style="height: 100%"></MonacoEditor>
|
||||||
</div>
|
</div>
|
||||||
</a-tab-pane>
|
</a-tab-pane>
|
||||||
|
|
|
||||||
|
|
@ -43,7 +43,6 @@
|
||||||
</a-input>
|
</a-input>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
<a-form-item label="物模型" v-bind="validateInfos.import" v-if="formModel.metadataType === 'script'">
|
<a-form-item label="物模型" v-bind="validateInfos.import" v-if="formModel.metadataType === 'script'">
|
||||||
<!-- TODO代码编辑器 -->
|
|
||||||
<MonacoEditor v-model="formModel.import" theme="vs" style="height: 300px"></MonacoEditor>
|
<MonacoEditor v-model="formModel.import" theme="vs" style="height: 300px"></MonacoEditor>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
|
@ -57,8 +56,6 @@ import type { DefaultOptionType } from 'ant-design-vue/es/select';
|
||||||
import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue/es';
|
import type { UploadProps, UploadFile, UploadChangeParam } from 'ant-design-vue/es';
|
||||||
import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
|
import type { DeviceMetadata, ProductItem } from '@/views/device/Product/typings'
|
||||||
import { message } from 'ant-design-vue/es';
|
import { message } from 'ant-design-vue/es';
|
||||||
import { Store } from 'jetlinks-store';
|
|
||||||
import { SystemConst } from '@/utils/consts';
|
|
||||||
import { useInstanceStore } from '@/store/instance'
|
import { useInstanceStore } from '@/store/instance'
|
||||||
import { useProductStore } from '@/store/product';
|
import { useProductStore } from '@/store/product';
|
||||||
import { FILE_UPLOAD } from '@/api/comm';
|
import { FILE_UPLOAD } from '@/api/comm';
|
||||||
|
|
@ -139,11 +136,6 @@ const rules = reactive({
|
||||||
],
|
],
|
||||||
})
|
})
|
||||||
const { validate, validateInfos } = useForm(formModel, rules);
|
const { validate, validateInfos } = useForm(formModel, rules);
|
||||||
const onSubmit = () => {
|
|
||||||
validate().then(() => {
|
|
||||||
|
|
||||||
})
|
|
||||||
}
|
|
||||||
const fileList = ref<UploadFile[]>([])
|
const fileList = ref<UploadFile[]>([])
|
||||||
|
|
||||||
const productList = ref<DefaultOptionType[]>([])
|
const productList = ref<DefaultOptionType[]>([])
|
||||||
|
|
@ -208,11 +200,11 @@ const operateLimits = (mdata: DeviceMetadata) => {
|
||||||
const handleImport = async () => {
|
const handleImport = async () => {
|
||||||
validate().then(async (data) => {
|
validate().then(async (data) => {
|
||||||
loading.value = true
|
loading.value = true
|
||||||
|
const { id } = route.params || {}
|
||||||
if (data.metadata === 'alink') {
|
if (data.metadata === 'alink') {
|
||||||
const res = await convertMetadata('from', 'alink', data.import)
|
const res = await convertMetadata('from', 'alink', data.import)
|
||||||
if (res.status === 200) {
|
if (res.status === 200) {
|
||||||
const metadata = JSON.stringify(operateLimits(res.result))
|
const metadata = JSON.stringify(operateLimits(res.result))
|
||||||
const { id } = route.params || {}
|
|
||||||
if (props?.type === 'device') {
|
if (props?.type === 'device') {
|
||||||
await saveMetadata(id as string, metadata)
|
await saveMetadata(id as string, metadata)
|
||||||
instanceStore.setCurrent(JSON.parse(metadata || '{}'))
|
instanceStore.setCurrent(JSON.parse(metadata || '{}'))
|
||||||
|
|
@ -227,8 +219,13 @@ const handleImport = async () => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
message.error('发生错误!')
|
message.error('发生错误!')
|
||||||
}
|
}
|
||||||
Store.set(SystemConst.GET_METADATA, true)
|
if (props?.type === 'device') {
|
||||||
Store.set(SystemConst.REFRESH_METADATA_TABLE, true)
|
instanceStore.refresh(id as string)
|
||||||
|
} else {
|
||||||
|
productStore.refresh(id as string)
|
||||||
|
}
|
||||||
|
// Store.set(SystemConst.GET_METADATA, true)
|
||||||
|
// Store.set(SystemConst.REFRESH_METADATA_TABLE, true)
|
||||||
close()
|
close()
|
||||||
} else {
|
} else {
|
||||||
try {
|
try {
|
||||||
|
|
@ -255,21 +252,24 @@ const handleImport = async () => {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
if (props?.type === 'device') {
|
if (props?.type === 'device') {
|
||||||
const metadata: DeviceMetadata = JSON.parse(paramsDevice || '{}')
|
const detail = instanceStore.current
|
||||||
// TODO导入
|
detail.metadata = paramsDevice
|
||||||
// MetadataAction.insert(metadata);
|
instanceStore.setCurrent(detail)
|
||||||
// instanceStore.setCurrent(metadata)
|
|
||||||
message.success('导入成功')
|
message.success('导入成功')
|
||||||
} else {
|
} else {
|
||||||
const metadata: ProductItem = JSON.parse(params?.metadata || '{}')
|
const detail = productStore.current
|
||||||
// TODO导入
|
detail.metadata = params.metadata
|
||||||
// MetadataAction.insert(metadata);
|
productStore.setCurrent(detail)
|
||||||
// productStore.setCurrent(metadata)
|
|
||||||
message.success('导入成功')
|
message.success('导入成功')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
Store.set(SystemConst.GET_METADATA, true)
|
// Store.set(SystemConst.GET_METADATA, true)
|
||||||
Store.set(SystemConst.REFRESH_METADATA_TABLE, true)
|
// Store.set(SystemConst.REFRESH_METADATA_TABLE, true)
|
||||||
|
if (props?.type === 'device') {
|
||||||
|
instanceStore.refresh(id as string)
|
||||||
|
} else {
|
||||||
|
productStore.refresh(id as string)
|
||||||
|
}
|
||||||
close();
|
close();
|
||||||
} catch (e) {
|
} catch (e) {
|
||||||
loading.value = false
|
loading.value = false
|
||||||
|
|
|
||||||
|
|
@ -23,8 +23,8 @@
|
||||||
:tooltip="{ title: '重置后将使用产品的物模型配置' }" key="reload">
|
:tooltip="{ title: '重置后将使用产品的物模型配置' }" key="reload">
|
||||||
重置操作
|
重置操作
|
||||||
</PermissionButton>
|
</PermissionButton>
|
||||||
<PermissionButton :uhasPermission="`${permission}:update`" @click="visible = true">快速导入</PermissionButton>
|
<PermissionButton :hasPermission="`${permission}:update`" @click="visible = true">快速导入</PermissionButton>
|
||||||
<PermissionButton :uhasPermission="`${permission}:update`" @click="cat = true">物模型TSL</PermissionButton>
|
<PermissionButton :hasPermission="`${permission}:update`" @click="cat = true">物模型TSL</PermissionButton>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
|
|
@ -50,7 +50,6 @@
|
||||||
import PermissionButton from '@/components/PermissionButton/index.vue'
|
import PermissionButton from '@/components/PermissionButton/index.vue'
|
||||||
import { deleteMetadata } from '@/api/device/instance.js'
|
import { deleteMetadata } from '@/api/device/instance.js'
|
||||||
import { message } from 'ant-design-vue'
|
import { message } from 'ant-design-vue'
|
||||||
import { Store } from 'jetlinks-store'
|
|
||||||
import { SystemConst } from '@/utils/consts'
|
import { SystemConst } from '@/utils/consts'
|
||||||
import { useInstanceStore } from '@/store/instance'
|
import { useInstanceStore } from '@/store/instance'
|
||||||
import Import from './Import/index.vue'
|
import Import from './Import/index.vue'
|
||||||
|
|
@ -75,11 +74,11 @@ const resetMetadata = async () => {
|
||||||
const resp = await deleteMetadata(id as string)
|
const resp = await deleteMetadata(id as string)
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
message.info('操作成功')
|
message.info('操作成功')
|
||||||
|
instanceStore.refresh(id as string)
|
||||||
Store.set(SystemConst.REFRESH_DEVICE, true)
|
// Store.set(SystemConst.REFRESH_DEVICE, true)
|
||||||
setTimeout(() => {
|
// setTimeout(() => {
|
||||||
Store.set(SystemConst.REFRESH_METADATA_TABLE, true)
|
// Store.set(SystemConst.REFRESH_METADATA_TABLE, true)
|
||||||
}, 400)
|
// }, 400)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</script>
|
</script>
|
||||||
|
|
|
||||||
|
|
@ -98,7 +98,13 @@ const getTypeList = (result: Record<string, any>) => {
|
||||||
edge.push(item);
|
edge.push(item);
|
||||||
} else {
|
} else {
|
||||||
item.type = 'network';
|
item.type = 'network';
|
||||||
network.push(item);
|
// network.push(item);
|
||||||
|
/**
|
||||||
|
* 插件设备接入 暂时不开发 todo
|
||||||
|
*/
|
||||||
|
if (item.id !== 'plugin_gateway' || item.name !== '插件设备接入') {
|
||||||
|
network.push(item);
|
||||||
|
}
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
@ -135,6 +141,10 @@ const queryProviders = async () => {
|
||||||
const resp = await getProviders();
|
const resp = await getProviders();
|
||||||
if (resp.status === 200) {
|
if (resp.status === 200) {
|
||||||
dataSource.value = getTypeList(resp.result);
|
dataSource.value = getTypeList(resp.result);
|
||||||
|
// dataSource.value = getTypeList(resp.result)[0].list.filter(
|
||||||
|
// (item) => item.name !== '插件设备接入',
|
||||||
|
// );
|
||||||
|
console.log(111, dataSource.value);
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -12,7 +12,7 @@
|
||||||
sorts: [{ name: 'createTime', order: 'desc' }],
|
sorts: [{ name: 'createTime', order: 'desc' }],
|
||||||
}"
|
}"
|
||||||
gridColumn="2"
|
gridColumn="2"
|
||||||
gridColumns="[2]"
|
:gridColumns="[1, 2]"
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
|
|
|
||||||
|
|
@ -13,45 +13,40 @@
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<PermissionButton
|
||||||
><AIcon type="PlusOutlined" />新增</a-button
|
type="primary"
|
||||||
|
@click="handlAdd"
|
||||||
|
hasPermission="link/Certificate:add"
|
||||||
>
|
>
|
||||||
|
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||||
|
新增
|
||||||
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
<template #type="slotProps">
|
<template #type="slotProps">
|
||||||
<span>{{ slotProps.type.text }}</span>
|
<span>{{ slotProps.type.text }}</span>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<a-space :size="16">
|
<a-space>
|
||||||
<a-tooltip
|
<template
|
||||||
v-for="i in getActions(slotProps)"
|
v-for="i in getActions(slotProps)"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
v-bind="i.tooltip"
|
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<PermissionButton
|
||||||
v-if="i.popConfirm"
|
:disabled="i.disabled"
|
||||||
v-bind="i.popConfirm"
|
:popConfirm="i.popConfirm"
|
||||||
>
|
:tooltip="{
|
||||||
<a-button
|
...i.tooltip,
|
||||||
:disabled="i.disabled"
|
}"
|
||||||
style="padding: 0"
|
style="padding: 0px"
|
||||||
type="link"
|
@click="i.onClick"
|
||||||
><AIcon :type="i.icon"
|
|
||||||
/></a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
<a-button
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
type="link"
|
||||||
v-else
|
:hasPermission="'link/Certificate:' + i.key"
|
||||||
@click="i.onClick && i.onClick(slotProps)"
|
|
||||||
>
|
>
|
||||||
<a-button
|
<template #icon
|
||||||
:disabled="i.disabled"
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
|
||||||
><AIcon :type="i.icon"
|
><AIcon :type="i.icon"
|
||||||
/></a-button>
|
/></template>
|
||||||
</a-button>
|
</PermissionButton>
|
||||||
</a-tooltip>
|
</template>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
|
|
@ -62,9 +57,10 @@
|
||||||
import type { ActionsType } from '@/components/Table/index';
|
import type { ActionsType } from '@/components/Table/index';
|
||||||
import { query, remove } from '@/api/link/certificate';
|
import { query, remove } from '@/api/link/certificate';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
|
import { useMenuStore } from 'store/menu';
|
||||||
|
|
||||||
|
const menuStory = useMenuStore();
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
|
||||||
const params = ref<Record<string, any>>({});
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
|
@ -119,7 +115,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
}
|
}
|
||||||
return [
|
return [
|
||||||
{
|
{
|
||||||
key: 'eye',
|
key: 'view',
|
||||||
text: '查看',
|
text: '查看',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '查看',
|
title: '查看',
|
||||||
|
|
@ -130,7 +126,7 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'edit',
|
key: 'update',
|
||||||
text: '编辑',
|
text: '编辑',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
|
|
@ -157,24 +153,19 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlAdd = () => {
|
const handlAdd = () => {
|
||||||
router.push({
|
menuStory.jumpPage(
|
||||||
path: `/iot/link/certificate/detail/:id`,
|
`link/Certificate/Detail`,
|
||||||
query: { view: false },
|
{ id: ':id' },
|
||||||
});
|
{ view: false },
|
||||||
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlEye = (id: string) => {
|
const handlEye = (id: string) => {
|
||||||
router.push({
|
menuStory.jumpPage(`link/Certificate/Detail`, { id }, { view: true });
|
||||||
path: `/iot/link/certificate/detail/${id}`,
|
|
||||||
query: { view: true },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlEdit = (id: string) => {
|
const handlEdit = (id: string) => {
|
||||||
router.push({
|
menuStory.jumpPage(`link/Certificate/Detail`, { id }, { view: false });
|
||||||
path: `/iot/link/certificate/detail/${id}`,
|
|
||||||
query: { view: false },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlDelete = async (id: string) => {
|
const handlDelete = async (id: string) => {
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,9 @@
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
v-model="data.time"
|
v-model="data.time"
|
||||||
>
|
>
|
||||||
<template #suffixIcon><a-icon type="calendar" /></template>
|
<template #suffixIcon
|
||||||
|
><AIcon type="CalendarOutlined"
|
||||||
|
/></template>
|
||||||
<template #renderExtraFooter>
|
<template #renderExtraFooter>
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
default-value="a"
|
default-value="a"
|
||||||
|
|
@ -31,7 +33,8 @@
|
||||||
>
|
>
|
||||||
</a-range-picker>
|
</a-range-picker>
|
||||||
</div>
|
</div>
|
||||||
<div ref="chartRef" style="width: 100%; height: 300px"></div>
|
<a-empty v-if="empty" class="empty" />
|
||||||
|
<div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
|
||||||
</div>
|
</div>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -50,8 +53,8 @@ import {
|
||||||
} from './tool.ts';
|
} from './tool.ts';
|
||||||
|
|
||||||
const chartRef = ref<Record<string, any>>({});
|
const chartRef = ref<Record<string, any>>({});
|
||||||
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
|
const empty = ref(false);
|
||||||
const data = ref({
|
const data = ref({
|
||||||
type: 'hour',
|
type: 'hour',
|
||||||
time: [null, null],
|
time: [null, null],
|
||||||
|
|
@ -140,6 +143,7 @@ const handleCpuOptions = (optionsData, xAxis) => {
|
||||||
: typeDataLine,
|
: typeDataLine,
|
||||||
};
|
};
|
||||||
myChart.setOption(options);
|
myChart.setOption(options);
|
||||||
|
xAxis.length === 0 && (empty.value = true);
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
|
|
@ -186,4 +190,7 @@ watch(
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.empty {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -10,7 +10,9 @@
|
||||||
format="YYYY-MM-DD HH:mm:ss"
|
format="YYYY-MM-DD HH:mm:ss"
|
||||||
v-model="data.time"
|
v-model="data.time"
|
||||||
>
|
>
|
||||||
<template #suffixIcon><a-icon type="calendar" /></template>
|
<template #suffixIcon
|
||||||
|
><AIcon type="CalendarOutlined"
|
||||||
|
/></template>
|
||||||
<template #renderExtraFooter>
|
<template #renderExtraFooter>
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
default-value="a"
|
default-value="a"
|
||||||
|
|
@ -31,7 +33,8 @@
|
||||||
>
|
>
|
||||||
</a-range-picker>
|
</a-range-picker>
|
||||||
</div>
|
</div>
|
||||||
<div ref="chartRef" style="width: 100%; height: 300px"></div>
|
<a-empty v-if="empty" class="empty" />
|
||||||
|
<div v-else ref="chartRef" style="width: 100%; height: 300px"></div>
|
||||||
</div>
|
</div>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -50,7 +53,7 @@ import {
|
||||||
} from './tool.ts';
|
} from './tool.ts';
|
||||||
|
|
||||||
const chartRef = ref<Record<string, any>>({});
|
const chartRef = ref<Record<string, any>>({});
|
||||||
|
const empty = ref(false);
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const data = ref({
|
const data = ref({
|
||||||
type: 'hour',
|
type: 'hour',
|
||||||
|
|
@ -144,6 +147,7 @@ const handleJVMOptions = (optionsData, xAxis) => {
|
||||||
: typeDataLine,
|
: typeDataLine,
|
||||||
};
|
};
|
||||||
myChart.setOption(options);
|
myChart.setOption(options);
|
||||||
|
xAxis.length === 0 && (empty.value = true);
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
|
|
@ -190,4 +194,7 @@ watch(
|
||||||
margin-top: 8px;
|
margin-top: 8px;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
.empty {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -43,12 +43,12 @@
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
|
<a-empty v-if="empty" class="empty" />
|
||||||
<div
|
<div
|
||||||
|
v-else
|
||||||
ref="chartRef"
|
ref="chartRef"
|
||||||
v-if="flag"
|
|
||||||
style="width: 100%; height: 350px"
|
style="width: 100%; height: 350px"
|
||||||
></div>
|
></div>
|
||||||
<a-empty v-else style="height: 300px; margin-top: 120px" />
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</a-spin>
|
</a-spin>
|
||||||
|
|
@ -67,10 +67,8 @@ import moment from 'moment';
|
||||||
import * as echarts from 'echarts';
|
import * as echarts from 'echarts';
|
||||||
|
|
||||||
const chartRef = ref<Record<string, any>>({});
|
const chartRef = ref<Record<string, any>>({});
|
||||||
|
const empty = ref(false);
|
||||||
const flag = ref(true);
|
|
||||||
const loading = ref(false);
|
const loading = ref(false);
|
||||||
const myChart = ref(null);
|
|
||||||
const data = ref({
|
const data = ref({
|
||||||
type: 'bytesRead',
|
type: 'bytesRead',
|
||||||
time: {
|
time: {
|
||||||
|
|
@ -163,6 +161,7 @@ const handleNetworkOptions = (optionsData, xAxis) => {
|
||||||
: typeDataLine,
|
: typeDataLine,
|
||||||
};
|
};
|
||||||
myChart.setOption(options);
|
myChart.setOption(options);
|
||||||
|
// xAxis.length === 0 && (empty.value = true);
|
||||||
window.addEventListener('resize', function () {
|
window.addEventListener('resize', function () {
|
||||||
myChart.resize();
|
myChart.resize();
|
||||||
});
|
});
|
||||||
|
|
@ -216,4 +215,7 @@ watch(
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
|
.empty {
|
||||||
|
height: 300px;
|
||||||
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|
|
||||||
|
|
@ -1,13 +1,9 @@
|
||||||
<template lang="">
|
<template lang="">
|
||||||
<a-modal
|
<a-modal
|
||||||
:title="data.id ? '编辑' : '新增'"
|
:title="data.id ? '编辑' : '新增'"
|
||||||
ok-text="确认"
|
|
||||||
cancel-text="取消"
|
|
||||||
:visible="true"
|
:visible="true"
|
||||||
width="700px"
|
width="700px"
|
||||||
:confirm-loading="loading"
|
|
||||||
@cancel="handleCancel"
|
@cancel="handleCancel"
|
||||||
@ok="handleOk"
|
|
||||||
>
|
>
|
||||||
<a-form
|
<a-form
|
||||||
class="form"
|
class="form"
|
||||||
|
|
@ -55,6 +51,19 @@
|
||||||
/>
|
/>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
</a-form>
|
</a-form>
|
||||||
|
<template #footer>
|
||||||
|
<a-button key="back" @click="handleCancel">取消</a-button>
|
||||||
|
<PermissionButton
|
||||||
|
key="submit"
|
||||||
|
type="primary"
|
||||||
|
:loading="loading"
|
||||||
|
@click="handleOk"
|
||||||
|
style="margin-left: 8px"
|
||||||
|
:hasPermission="`link/Protocol:${id ? 'update' : 'add'}`"
|
||||||
|
>
|
||||||
|
确认
|
||||||
|
</PermissionButton>
|
||||||
|
</template>
|
||||||
</a-modal>
|
</a-modal>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
|
|
@ -124,7 +133,6 @@ const onSubmit = () => {
|
||||||
? await save(params)
|
? await save(params)
|
||||||
: await update({ ...props.data, ...params });
|
: await update({ ...props.data, ...params });
|
||||||
if (response.status === 200) {
|
if (response.status === 200) {
|
||||||
message.success('操作成功');
|
|
||||||
emit('change', true);
|
emit('change', true);
|
||||||
}
|
}
|
||||||
loading.value = false;
|
loading.value = false;
|
||||||
|
|
|
||||||
|
|
@ -13,9 +13,14 @@
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<PermissionButton
|
||||||
><AIcon type="PlusOutlined" />新增</a-button
|
type="primary"
|
||||||
|
@click="handlAdd"
|
||||||
|
hasPermission="link/Protocol:add"
|
||||||
>
|
>
|
||||||
|
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||||
|
新增
|
||||||
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
<template #card="slotProps">
|
<template #card="slotProps">
|
||||||
<CardBox
|
<CardBox
|
||||||
|
|
@ -31,11 +36,16 @@
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="card-item-content">
|
<div class="card-item-content">
|
||||||
<h3
|
<a-tooltip>
|
||||||
class="card-item-content-title card-item-content-title-a"
|
<template #title>
|
||||||
>
|
{{ slotProps.name }}
|
||||||
{{ slotProps.name }}
|
</template>
|
||||||
</h3>
|
<h3
|
||||||
|
class="card-item-content-title card-item-content-title-a"
|
||||||
|
>
|
||||||
|
{{ slotProps.name }}
|
||||||
|
</h3>
|
||||||
|
</a-tooltip>
|
||||||
<a-row class="card-item-content-box">
|
<a-row class="card-item-content-box">
|
||||||
<a-col
|
<a-col
|
||||||
:span="12"
|
:span="12"
|
||||||
|
|
@ -70,78 +80,49 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #actions="item">
|
<template #actions="item">
|
||||||
<a-tooltip
|
<PermissionButton
|
||||||
v-bind="item.tooltip"
|
:disabled="item.disabled"
|
||||||
:title="item.disabled && item.tooltip.title"
|
:popConfirm="item.popConfirm"
|
||||||
|
:tooltip="{
|
||||||
|
...item.tooltip,
|
||||||
|
}"
|
||||||
|
@click="item.onClick"
|
||||||
|
:hasPermission="'link/Protocol:' + item.key"
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<AIcon
|
||||||
v-if="item.popConfirm"
|
type="DeleteOutlined"
|
||||||
v-bind="item.popConfirm"
|
v-if="item.key === 'delete'"
|
||||||
: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>
|
<template v-else>
|
||||||
<a-button
|
<AIcon :type="item.icon" />
|
||||||
:disabled="item.disabled"
|
<span>{{ item?.text }}</span>
|
||||||
@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>
|
</template>
|
||||||
</a-tooltip>
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<a-space :size="16">
|
<a-space>
|
||||||
<a-tooltip
|
<template
|
||||||
v-for="i in getActions(slotProps, 'table')"
|
v-for="i in getActions(slotProps, 'table')"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
v-bind="i.tooltip"
|
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<PermissionButton
|
||||||
v-if="i.popConfirm"
|
|
||||||
v-bind="i.popConfirm"
|
|
||||||
:disabled="i.disabled"
|
:disabled="i.disabled"
|
||||||
>
|
:popConfirm="i.popConfirm"
|
||||||
<a-button
|
:tooltip="{
|
||||||
:disabled="i.disabled"
|
...i.tooltip,
|
||||||
style="padding: 0"
|
}"
|
||||||
type="link"
|
style="padding: 0px"
|
||||||
><AIcon :type="i.icon"
|
@click="i.onClick"
|
||||||
/></a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
<a-button
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
type="link"
|
||||||
v-else
|
:hasPermission="'link/Protocol:' + i.key"
|
||||||
@click="i.onClick && i.onClick(slotProps)"
|
|
||||||
>
|
>
|
||||||
<a-button
|
<template #icon
|
||||||
:disabled="i.disabled"
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
|
||||||
><AIcon :type="i.icon"
|
><AIcon :type="i.icon"
|
||||||
/></a-button>
|
/></template>
|
||||||
</a-button>
|
</PermissionButton>
|
||||||
</a-tooltip>
|
</template>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
</JTable>
|
</JTable>
|
||||||
|
|
@ -173,7 +154,6 @@ const columns = [
|
||||||
},
|
},
|
||||||
width: 200,
|
width: 200,
|
||||||
fixed: 'left',
|
fixed: 'left',
|
||||||
// scopedSlots: true,
|
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '名称',
|
title: '名称',
|
||||||
|
|
@ -182,6 +162,7 @@ const columns = [
|
||||||
search: {
|
search: {
|
||||||
type: 'string',
|
type: 'string',
|
||||||
},
|
},
|
||||||
|
ellipsis: true,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
title: '类型',
|
title: '类型',
|
||||||
|
|
@ -227,7 +208,7 @@ const getActions = (
|
||||||
if (!data) return [];
|
if (!data) return [];
|
||||||
const actions = [
|
const actions = [
|
||||||
{
|
{
|
||||||
key: 'edit',
|
key: 'update',
|
||||||
text: '编辑',
|
text: '编辑',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
|
|
|
||||||
|
|
@ -56,10 +56,9 @@
|
||||||
独立配置:集群下不同节点使用不同配置
|
独立配置:集群下不同节点使用不同配置
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon type="QuestionCircleOutlined" />
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<a-radio-group
|
<a-radio-group
|
||||||
v-model:value="formData.shareCluster"
|
v-model:value="formData.shareCluster"
|
||||||
button-style="solid"
|
button-style="solid"
|
||||||
|
|
@ -101,8 +100,9 @@
|
||||||
:header="`#${index + 1}.节点`"
|
:header="`#${index + 1}.节点`"
|
||||||
>
|
>
|
||||||
<template #extra v-if="!shareCluster">
|
<template #extra v-if="!shareCluster">
|
||||||
<delete-outlined
|
<AIcon
|
||||||
@click="removeCluster(cluster)"
|
@click="removeCluster(cluster)"
|
||||||
|
type="DeleteOutlined"
|
||||||
/>
|
/>
|
||||||
</template>
|
</template>
|
||||||
<a-row :gutter="[24, 0]">
|
<a-row :gutter="[24, 0]">
|
||||||
|
|
@ -171,7 +171,9 @@
|
||||||
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
|
绑定到服务器上的网卡地址,绑定到所有网卡:0.0.0.0
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -230,7 +232,9 @@
|
||||||
监听指定端口的请求
|
监听指定端口的请求
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<a-select
|
<a-select
|
||||||
|
|
@ -281,7 +285,9 @@
|
||||||
对外提供访问的地址,内网环境时填写服务器的内网IP地址
|
对外提供访问的地址,内网环境时填写服务器的内网IP地址
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<a-input
|
<a-input
|
||||||
|
|
@ -324,7 +330,9 @@
|
||||||
对外提供访问的端口
|
对外提供访问的端口
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -517,7 +525,9 @@
|
||||||
当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
|
当连接的服务为EMQ时,可能需要使用共享的订阅前缀,如:$queue或$share
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<a-input
|
<a-input
|
||||||
|
|
@ -560,7 +570,9 @@
|
||||||
单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
|
单次收发消息的最大长度,单位:字节;设置过大可能会影响性能
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<a-input-number
|
<a-input-number
|
||||||
|
|
@ -691,7 +703,9 @@
|
||||||
处理TCP粘拆包的方式
|
处理TCP粘拆包的方式
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon
|
||||||
|
type="QuestionCircleOutlined"
|
||||||
|
/>
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
<a-select
|
<a-select
|
||||||
|
|
@ -966,7 +980,7 @@
|
||||||
</div>
|
</div>
|
||||||
<a-form-item v-if="!shareCluster">
|
<a-form-item v-if="!shareCluster">
|
||||||
<a-button type="dashed" block @click="addCluster">
|
<a-button type="dashed" block @click="addCluster">
|
||||||
<PlusOutlined />
|
<AIcon type="PlusOutlined" />
|
||||||
新增
|
新增
|
||||||
</a-button>
|
</a-button>
|
||||||
</a-form-item>
|
</a-form-item>
|
||||||
|
|
@ -986,14 +1000,15 @@
|
||||||
</a-form>
|
</a-form>
|
||||||
</div>
|
</div>
|
||||||
<div class="footer">
|
<div class="footer">
|
||||||
<a-button
|
<PermissionButton
|
||||||
v-if="view === 'false'"
|
v-if="view === 'false'"
|
||||||
type="primary"
|
type="primary"
|
||||||
@click="saveData"
|
@click="saveData"
|
||||||
:loading="loading"
|
:loading="loading"
|
||||||
|
:hasPermission="`link/Type:${id ? 'update' : 'add'}`"
|
||||||
>
|
>
|
||||||
保存
|
保存
|
||||||
</a-button>
|
</PermissionButton>
|
||||||
</div>
|
</div>
|
||||||
</a-card>
|
</a-card>
|
||||||
</page-container>
|
</page-container>
|
||||||
|
|
@ -1002,11 +1017,6 @@
|
||||||
<script lang="ts" setup name="AccessNetwork">
|
<script lang="ts" setup name="AccessNetwork">
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import type { FormInstance } from 'ant-design-vue';
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
import {
|
|
||||||
DeleteOutlined,
|
|
||||||
PlusOutlined,
|
|
||||||
QuestionCircleOutlined,
|
|
||||||
} from '@ant-design/icons-vue';
|
|
||||||
import {
|
import {
|
||||||
update,
|
update,
|
||||||
save,
|
save,
|
||||||
|
|
|
||||||
|
|
@ -301,3 +301,13 @@ export const Rules = {
|
||||||
},
|
},
|
||||||
],
|
],
|
||||||
};
|
};
|
||||||
|
|
||||||
|
export const TiTlePermissionButtonStyle = {
|
||||||
|
padding: 0,
|
||||||
|
color: ' #1890ff !important',
|
||||||
|
'font-weight': 700,
|
||||||
|
'font-size': '16px',
|
||||||
|
overflow: 'hidden',
|
||||||
|
'text-overflow': 'ellipsis',
|
||||||
|
'white-space': 'nowrap',
|
||||||
|
};
|
||||||
|
|
|
||||||
|
|
@ -14,9 +14,14 @@
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<PermissionButton
|
||||||
><AIcon type="PlusOutlined" />新增</a-button
|
type="primary"
|
||||||
|
@click="handlAdd"
|
||||||
|
hasPermission="link/Type:add"
|
||||||
>
|
>
|
||||||
|
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||||
|
新增
|
||||||
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
<template #card="slotProps">
|
<template #card="slotProps">
|
||||||
<CardBox
|
<CardBox
|
||||||
|
|
@ -43,18 +48,14 @@
|
||||||
</template>
|
</template>
|
||||||
<template #content>
|
<template #content>
|
||||||
<div class="card-item-content">
|
<div class="card-item-content">
|
||||||
<!-- <a
|
<PermissionButton
|
||||||
|
type="link"
|
||||||
@click="handlEye(slotProps.id)"
|
@click="handlEye(slotProps.id)"
|
||||||
class="card-item-content-title-a"
|
hasPermission="link/Type:view"
|
||||||
|
:style="TiTlePermissionButtonStyle"
|
||||||
>
|
>
|
||||||
{{ slotProps.name }}
|
{{ slotProps.name }}
|
||||||
</a> -->
|
</PermissionButton>
|
||||||
<h3
|
|
||||||
@click="handlEye(slotProps.id)"
|
|
||||||
class="card-item-content-title card-item-content-title-a"
|
|
||||||
>
|
|
||||||
{{ slotProps.name }}
|
|
||||||
</h3>
|
|
||||||
<a-row class="card-item-content-box">
|
<a-row class="card-item-content-box">
|
||||||
<a-col :span="12">
|
<a-col :span="12">
|
||||||
<div class="card-item-content-text">
|
<div class="card-item-content-text">
|
||||||
|
|
@ -88,78 +89,49 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #actions="item">
|
<template #actions="item">
|
||||||
<a-tooltip
|
<PermissionButton
|
||||||
v-bind="item.tooltip"
|
:disabled="item.disabled"
|
||||||
:title="item.disabled && item.tooltip.title"
|
:popConfirm="item.popConfirm"
|
||||||
|
:tooltip="{
|
||||||
|
...item.tooltip,
|
||||||
|
}"
|
||||||
|
@click="item.onClick"
|
||||||
|
:hasPermission="'link/Type:' + item.key"
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<AIcon
|
||||||
v-if="item.popConfirm"
|
type="DeleteOutlined"
|
||||||
v-bind="item.popConfirm"
|
v-if="item.key === 'delete'"
|
||||||
: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>
|
<template v-else>
|
||||||
<a-button
|
<AIcon :type="item.icon" />
|
||||||
:disabled="item.disabled"
|
<span>{{ item?.text }}</span>
|
||||||
@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>
|
</template>
|
||||||
</a-tooltip>
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</template>
|
</template>
|
||||||
<template #action="slotProps">
|
<template #action="slotProps">
|
||||||
<a-space :size="16">
|
<a-space>
|
||||||
<a-tooltip
|
<template
|
||||||
v-for="i in getActions(slotProps, 'table')"
|
v-for="i in getActions(slotProps, 'table')"
|
||||||
:key="i.key"
|
:key="i.key"
|
||||||
v-bind="i.tooltip"
|
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<PermissionButton
|
||||||
v-if="i.popConfirm"
|
|
||||||
v-bind="i.popConfirm"
|
|
||||||
:disabled="i.disabled"
|
:disabled="i.disabled"
|
||||||
>
|
:popConfirm="i.popConfirm"
|
||||||
<a-button
|
:tooltip="{
|
||||||
:disabled="i.disabled"
|
...i.tooltip,
|
||||||
style="padding: 0"
|
}"
|
||||||
type="link"
|
style="padding: 0px"
|
||||||
><AIcon :type="i.icon"
|
@click="i.onClick"
|
||||||
/></a-button>
|
|
||||||
</a-popconfirm>
|
|
||||||
<a-button
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
type="link"
|
||||||
v-else
|
:hasPermission="'link/Type:' + i.key"
|
||||||
@click="i.onClick && i.onClick(slotProps)"
|
|
||||||
>
|
>
|
||||||
<a-button
|
<template #icon
|
||||||
:disabled="i.disabled"
|
|
||||||
style="padding: 0"
|
|
||||||
type="link"
|
|
||||||
><AIcon :type="i.icon"
|
><AIcon :type="i.icon"
|
||||||
/></a-button>
|
/></template>
|
||||||
</a-button>
|
</PermissionButton>
|
||||||
</a-tooltip>
|
</template>
|
||||||
</a-space>
|
</a-space>
|
||||||
</template>
|
</template>
|
||||||
<template #state="slotProps">
|
<template #state="slotProps">
|
||||||
|
|
@ -186,13 +158,15 @@
|
||||||
</page-container>
|
</page-container>
|
||||||
</template>
|
</template>
|
||||||
<script lang="ts" setup name="TypePage">
|
<script lang="ts" setup name="TypePage">
|
||||||
import type { ActionsType } from '@/components/Table/index'
|
import type { ActionsType } from '@/components/Table/index';
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import { supports, query, remove, start, shutdown } from '@/api/link/type';
|
import { supports, query, remove, start, shutdown } from '@/api/link/type';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
|
import { TiTlePermissionButtonStyle } from './data';
|
||||||
|
import { useMenuStore } from 'store/menu';
|
||||||
|
|
||||||
|
const menuStory = useMenuStore();
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
|
||||||
const params = ref<Record<string, any>>({});
|
const params = ref<Record<string, any>>({});
|
||||||
const options = ref([]);
|
const options = ref([]);
|
||||||
|
|
||||||
|
|
@ -282,9 +256,10 @@ const getActions = (
|
||||||
): ActionsType[] => {
|
): ActionsType[] => {
|
||||||
if (!data) return [];
|
if (!data) return [];
|
||||||
const state = data.state.value;
|
const state = data.state.value;
|
||||||
|
const stateText = state === 'enabled' ? '禁用' : '启用';
|
||||||
const actions = [
|
const actions = [
|
||||||
{
|
{
|
||||||
key: 'eye',
|
key: 'view',
|
||||||
text: '查看',
|
text: '查看',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '查看',
|
title: '查看',
|
||||||
|
|
@ -295,7 +270,7 @@ const getActions = (
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'edit',
|
key: 'update',
|
||||||
text: '编辑',
|
text: '编辑',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
|
|
@ -307,13 +282,13 @@ const getActions = (
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'action',
|
key: 'action',
|
||||||
text: state === 'enabled' ? '禁用' : '启用',
|
text: stateText,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: state === 'enabled' ? '禁用' : '启用',
|
title: stateText,
|
||||||
},
|
},
|
||||||
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||||
popConfirm: {
|
popConfirm: {
|
||||||
title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
|
title: `确认${stateText}?`,
|
||||||
onConfirm: async () => {
|
onConfirm: async () => {
|
||||||
let res =
|
let res =
|
||||||
state === 'enabled'
|
state === 'enabled'
|
||||||
|
|
@ -353,36 +328,19 @@ const getActions = (
|
||||||
];
|
];
|
||||||
return type === 'table'
|
return type === 'table'
|
||||||
? actions
|
? actions
|
||||||
: actions.filter((item) => item.key !== 'eye');
|
: actions.filter((item) => item.key !== 'view');
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlAdd = () => {
|
const handlAdd = () => {
|
||||||
router.push({
|
menuStory.jumpPage(`link/Type/Detail`, { id: ':id' }, { view: false });
|
||||||
path: `/iot/link/type/detail/:id`,
|
|
||||||
query: { view: false },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlEye = (id: string) => {
|
const handlEye = (id: string) => {
|
||||||
router.push({
|
menuStory.jumpPage(`link/Type/Detail`, { id }, { view: true });
|
||||||
path: `/iot/link/type/detail/${id}`,
|
|
||||||
query: { view: true },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlEdit = (id: string) => {
|
const handlEdit = (id: string) => {
|
||||||
router.push({
|
menuStory.jumpPage(`link/Type/Detail`, { id }, { view: false });
|
||||||
path: `/iot/link/type/detail/${id}`,
|
|
||||||
query: { view: false },
|
|
||||||
});
|
|
||||||
};
|
|
||||||
|
|
||||||
const handlDelete = async (id: string) => {
|
|
||||||
const res = await remove(id);
|
|
||||||
if (res.success) {
|
|
||||||
message.success('操作成功');
|
|
||||||
tableRef.value.reload();
|
|
||||||
}
|
|
||||||
};
|
};
|
||||||
|
|
||||||
const getDetails = (slotProps: Partial<Record<string, any>>) => {
|
const getDetails = (slotProps: Partial<Record<string, any>>) => {
|
||||||
|
|
|
||||||
|
|
@ -0,0 +1,211 @@
|
||||||
|
<!-- 国标级联-绑定通道 -->
|
||||||
|
<template>
|
||||||
|
<a-modal
|
||||||
|
v-model:visible="_vis"
|
||||||
|
title="绑定通道"
|
||||||
|
cancelText="取消"
|
||||||
|
okText="确定"
|
||||||
|
width="80%"
|
||||||
|
@ok="handleSave"
|
||||||
|
@cancel="_vis = false"
|
||||||
|
:confirmLoading="loading"
|
||||||
|
>
|
||||||
|
<Search
|
||||||
|
type="simple"
|
||||||
|
:columns="columns"
|
||||||
|
target="media"
|
||||||
|
@search="handleSearch"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<JTable
|
||||||
|
ref="listRef"
|
||||||
|
model="table"
|
||||||
|
:columns="columns"
|
||||||
|
:request="CascadeApi.queryChannelList"
|
||||||
|
:defaultParams="{
|
||||||
|
sorts: [{ name: 'name', order: 'desc' }],
|
||||||
|
terms: [
|
||||||
|
{
|
||||||
|
column: 'id',
|
||||||
|
termType: 'cascade_channel$not',
|
||||||
|
type: 'and',
|
||||||
|
value: route.query.id,
|
||||||
|
},
|
||||||
|
{
|
||||||
|
column: 'catalogType',
|
||||||
|
termType: 'eq',
|
||||||
|
type: 'and',
|
||||||
|
value: 'device',
|
||||||
|
},
|
||||||
|
],
|
||||||
|
}"
|
||||||
|
:params="params"
|
||||||
|
:rowSelection="{
|
||||||
|
selectedRowKeys: _selectedRowKeys,
|
||||||
|
onSelect: onSelectChange,
|
||||||
|
onSelectAll: onSelectAllChange,
|
||||||
|
}"
|
||||||
|
@cancelSelect="_selectedRowKeys = []"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<h3>通道列表</h3>
|
||||||
|
</template>
|
||||||
|
<template #status="slotProps">
|
||||||
|
<a-space>
|
||||||
|
<a-badge
|
||||||
|
:status="
|
||||||
|
slotProps.status.value === 'online'
|
||||||
|
? 'success'
|
||||||
|
: 'error'
|
||||||
|
"
|
||||||
|
:text="slotProps.status.text"
|
||||||
|
></a-badge>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
</JTable>
|
||||||
|
</a-modal>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CascadeApi from '@/api/media/cascade';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import { PropType } from 'vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
type Emits = {
|
||||||
|
(e: 'update:visible', data: boolean): void;
|
||||||
|
(e: 'submit'): 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: '设备名称',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
key: 'deviceName',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通道名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '安装地址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
key: 'address',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '厂商',
|
||||||
|
dataIndex: 'manufacturer',
|
||||||
|
key: 'manufacturer',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{ label: '已连接', value: 'online' },
|
||||||
|
{ label: '未连接', value: 'offline' },
|
||||||
|
],
|
||||||
|
handleValue: (v: any) => {
|
||||||
|
return v;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const handleSearch = (e: any) => {
|
||||||
|
params.value = e;
|
||||||
|
console.log('params.value: ', params.value);
|
||||||
|
};
|
||||||
|
|
||||||
|
const listRef = ref();
|
||||||
|
const _selectedRowKeys = ref<string[]>([]);
|
||||||
|
|
||||||
|
const onSelectChange = (
|
||||||
|
record: any[],
|
||||||
|
selected: boolean,
|
||||||
|
selectedRows: any[],
|
||||||
|
) => {
|
||||||
|
_selectedRowKeys.value = selected
|
||||||
|
? [...getSetRowKey(selectedRows)]
|
||||||
|
: _selectedRowKeys.value.filter((item: any) => item !== record?.id);
|
||||||
|
};
|
||||||
|
const onSelectAllChange = (
|
||||||
|
selected: boolean,
|
||||||
|
selectedRows: any[],
|
||||||
|
changeRows: any[],
|
||||||
|
) => {
|
||||||
|
const unRowsKeys = getSelectedRowsKey(changeRows);
|
||||||
|
_selectedRowKeys.value = selected
|
||||||
|
? [...getSetRowKey(selectedRows)]
|
||||||
|
: _selectedRowKeys.value
|
||||||
|
.concat(unRowsKeys)
|
||||||
|
.filter((item) => !unRowsKeys.includes(item));
|
||||||
|
};
|
||||||
|
const getSelectedRowsKey = (selectedRows: any[]) =>
|
||||||
|
selectedRows.map((item) => item?.id).filter((i) => !!i);
|
||||||
|
|
||||||
|
const getSetRowKey = (selectedRows: any[]) =>
|
||||||
|
new Set([..._selectedRowKeys.value, ...getSelectedRowsKey(selectedRows)]);
|
||||||
|
|
||||||
|
const loading = ref(false);
|
||||||
|
const handleSave = async () => {
|
||||||
|
if (!_selectedRowKeys.value.length) message.error('请勾选数据');
|
||||||
|
loading.value = true;
|
||||||
|
const resp = await CascadeApi.bindChannel(
|
||||||
|
route.query.id as string,
|
||||||
|
_selectedRowKeys.value,
|
||||||
|
);
|
||||||
|
loading.value = false;
|
||||||
|
if (resp.success) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
_vis.value = false;
|
||||||
|
emit('submit');
|
||||||
|
} else {
|
||||||
|
message.error('操作失败！');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
@ -0,0 +1,372 @@
|
||||||
|
<!-- 国标级联-通道列表 -->
|
||||||
|
<template>
|
||||||
|
<page-container>
|
||||||
|
<Search
|
||||||
|
type="simple"
|
||||||
|
:columns="columns"
|
||||||
|
target="media"
|
||||||
|
@search="handleSearch"
|
||||||
|
/>
|
||||||
|
|
||||||
|
<JTable
|
||||||
|
ref="listRef"
|
||||||
|
model="table"
|
||||||
|
:columns="columns"
|
||||||
|
:request="(e:any) => CascadeApi.queryBindChannel(route?.query.id as string, e)"
|
||||||
|
:defaultParams="{
|
||||||
|
sorts: [{ name: 'name', order: 'desc' }],
|
||||||
|
}"
|
||||||
|
:params="params"
|
||||||
|
:rowSelection="{
|
||||||
|
selectedRowKeys: _selectedRowKeys,
|
||||||
|
onSelect: onSelectChange,
|
||||||
|
onSelectAll: onSelectAllChange,
|
||||||
|
}"
|
||||||
|
@cancelSelect="_selectedRowKeys = []"
|
||||||
|
>
|
||||||
|
<template #headerTitle>
|
||||||
|
<h3>通道列表</h3>
|
||||||
|
</template>
|
||||||
|
<template #rightExtraRender>
|
||||||
|
<a-space>
|
||||||
|
<a-button type="primary" @click="bindVis = true">
|
||||||
|
绑定通道
|
||||||
|
</a-button>
|
||||||
|
<a-popconfirm
|
||||||
|
title="确认解绑?"
|
||||||
|
@confirm="handleMultipleUnbind"
|
||||||
|
>
|
||||||
|
<a-button> 批量解绑 </a-button>
|
||||||
|
</a-popconfirm>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
<template #gbChannelId="slotProps">
|
||||||
|
<a-space>
|
||||||
|
<Ellipsis>
|
||||||
|
{{ slotProps.gbChannelId }}
|
||||||
|
</Ellipsis>
|
||||||
|
<a-popover
|
||||||
|
v-model:visible="slotProps.popVis"
|
||||||
|
trigger="click"
|
||||||
|
>
|
||||||
|
<template #title>
|
||||||
|
<div class="header">
|
||||||
|
<span>编辑国标ID</span>
|
||||||
|
<AIcon
|
||||||
|
type="CloseOutlined"
|
||||||
|
@click="handleClose(slotProps)"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<template #content>
|
||||||
|
<div class="simple-form">
|
||||||
|
<a-input
|
||||||
|
v-model:value="gbID"
|
||||||
|
@change="validField(slotProps)"
|
||||||
|
/>
|
||||||
|
<div
|
||||||
|
class="error"
|
||||||
|
v-if="valid && !valid?.passed"
|
||||||
|
>
|
||||||
|
<!-- {{ valid?.reason }} -->
|
||||||
|
该国标ID在同一设备下已存在
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<a-button
|
||||||
|
type="primary"
|
||||||
|
@click="handleSave(slotProps)"
|
||||||
|
:loading="loading"
|
||||||
|
style="width: 100%"
|
||||||
|
>
|
||||||
|
保存
|
||||||
|
</a-button>
|
||||||
|
</template>
|
||||||
|
<a-button type="link" @click="slotProps.popVis = true">
|
||||||
|
<AIcon type="EditOutlined" />
|
||||||
|
</a-button>
|
||||||
|
</a-popover>
|
||||||
|
</a-space>
|
||||||
|
</template>
|
||||||
|
<template #status="slotProps">
|
||||||
|
<a-space>
|
||||||
|
<a-badge
|
||||||
|
:status="
|
||||||
|
slotProps.status.value === 'online'
|
||||||
|
? 'success'
|
||||||
|
: 'error'
|
||||||
|
"
|
||||||
|
:text="slotProps.status.text"
|
||||||
|
></a-badge>
|
||||||
|
</a-space>
|
||||||
|
</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>
|
||||||
|
|
||||||
|
<BindChannel v-model:visible="bindVis" @submit="listRef.reload()" />
|
||||||
|
</page-container>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script setup lang="ts">
|
||||||
|
import CascadeApi from '@/api/media/cascade';
|
||||||
|
import type { ActionsType } from '@/components/Table/index.vue';
|
||||||
|
import { message } from 'ant-design-vue';
|
||||||
|
import BindChannel from './BindChannel/index.vue';
|
||||||
|
|
||||||
|
const route = useRoute();
|
||||||
|
|
||||||
|
const columns = [
|
||||||
|
{
|
||||||
|
title: '设备名称',
|
||||||
|
dataIndex: 'deviceName',
|
||||||
|
key: 'deviceName',
|
||||||
|
// width: 200,
|
||||||
|
// fixed: 'left',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '通道名称',
|
||||||
|
dataIndex: 'name',
|
||||||
|
key: 'name',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '国标ID',
|
||||||
|
dataIndex: 'gbChannelId',
|
||||||
|
key: 'gbChannelId',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '安装地址',
|
||||||
|
dataIndex: 'address',
|
||||||
|
key: 'address',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '厂商',
|
||||||
|
dataIndex: 'manufacturer',
|
||||||
|
key: 'manufacturer',
|
||||||
|
search: {
|
||||||
|
type: 'string',
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '状态',
|
||||||
|
dataIndex: 'status',
|
||||||
|
key: 'status',
|
||||||
|
scopedSlots: true,
|
||||||
|
search: {
|
||||||
|
type: 'select',
|
||||||
|
options: [
|
||||||
|
{ label: '已连接', value: 'online' },
|
||||||
|
{ label: '未连接', value: 'offline' },
|
||||||
|
],
|
||||||
|
handleValue: (v: any) => {
|
||||||
|
return v;
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: '操作',
|
||||||
|
key: 'action',
|
||||||
|
scopedSlots: true,
|
||||||
|
},
|
||||||
|
];
|
||||||
|
|
||||||
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 搜索
|
||||||
|
* @param params
|
||||||
|
*/
|
||||||
|
const handleSearch = (e: any) => {
|
||||||
|
params.value = e;
|
||||||
|
};
|
||||||
|
|
||||||
|
const listRef = ref();
|
||||||
|
const _selectedRowKeys = ref<string[]>([]);
|
||||||
|
const bindVis = ref(false);
|
||||||
|
|
||||||
|
const onSelectChange = (
|
||||||
|
record: any[],
|
||||||
|
selected: boolean,
|
||||||
|
selectedRows: any[],
|
||||||
|
) => {
|
||||||
|
_selectedRowKeys.value = selected
|
||||||
|
? [...getSetRowKey(selectedRows)]
|
||||||
|
: _selectedRowKeys.value.filter((item: any) => item !== record?.id);
|
||||||
|
};
|
||||||
|
const onSelectAllChange = (
|
||||||
|
selected: boolean,
|
||||||
|
selectedRows: any[],
|
||||||
|
changeRows: any[],
|
||||||
|
) => {
|
||||||
|
const unRowsKeys = getSelectedRowsKey(changeRows);
|
||||||
|
_selectedRowKeys.value = selected
|
||||||
|
? [...getSetRowKey(selectedRows)]
|
||||||
|
: _selectedRowKeys.value
|
||||||
|
.concat(unRowsKeys)
|
||||||
|
.filter((item) => !unRowsKeys.includes(item));
|
||||||
|
};
|
||||||
|
const getSelectedRowsKey = (selectedRows: any[]) =>
|
||||||
|
selectedRows.map((item) => item?.id).filter((i) => !!i);
|
||||||
|
|
||||||
|
const getSetRowKey = (selectedRows: any[]) =>
|
||||||
|
new Set([..._selectedRowKeys.value, ...getSelectedRowsKey(selectedRows)]);
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 表格操作按钮
|
||||||
|
* @param data 表格数据项
|
||||||
|
* @param type 表格展示类型
|
||||||
|
*/
|
||||||
|
const getActions = (
|
||||||
|
data: Partial<Record<string, any>>,
|
||||||
|
type: 'card' | 'table',
|
||||||
|
): ActionsType[] => {
|
||||||
|
if (!data) return [];
|
||||||
|
const actions = [
|
||||||
|
{
|
||||||
|
key: 'delete',
|
||||||
|
text: '解绑',
|
||||||
|
tooltip: {
|
||||||
|
title: '解绑',
|
||||||
|
},
|
||||||
|
icon: 'DisconnectOutlined',
|
||||||
|
popConfirm: {
|
||||||
|
title: '确认解绑?',
|
||||||
|
onConfirm: async () => {
|
||||||
|
const resp = await CascadeApi.unbindChannel(
|
||||||
|
route.query.id as string,
|
||||||
|
[data.channelId],
|
||||||
|
);
|
||||||
|
if (resp.success) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
listRef.value?.reload();
|
||||||
|
} else {
|
||||||
|
message.error('操作失败！');
|
||||||
|
}
|
||||||
|
},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
];
|
||||||
|
return actions;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 批量解绑
|
||||||
|
*/
|
||||||
|
const handleMultipleUnbind = async () => {
|
||||||
|
const channelIds = listRef.value?._dataSource
|
||||||
|
.filter((f: any) => _selectedRowKeys.value.includes(f.id))
|
||||||
|
.map((m: any) => m.channelId);
|
||||||
|
const resp = await CascadeApi.unbindChannel(
|
||||||
|
route.query.id as string,
|
||||||
|
channelIds,
|
||||||
|
);
|
||||||
|
if (resp.success) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
listRef.value?.reload();
|
||||||
|
} else {
|
||||||
|
message.error('操作失败！');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 编辑国标ID
|
||||||
|
*/
|
||||||
|
const gbID = ref('');
|
||||||
|
const loading = ref(false);
|
||||||
|
const handleSave = async (data: any) => {
|
||||||
|
if (!gbID.value) message.error('请输入国标ID');
|
||||||
|
if (!valid.value?.passed) return;
|
||||||
|
|
||||||
|
loading.value = true;
|
||||||
|
const resp = await CascadeApi.updateGbChannelId(data.id, {
|
||||||
|
gbChannelId: gbID.value,
|
||||||
|
});
|
||||||
|
loading.value = false;
|
||||||
|
if (resp.success) {
|
||||||
|
message.success('操作成功！');
|
||||||
|
listRef.value?.reload();
|
||||||
|
valid.value = undefined;
|
||||||
|
gbID.value = '';
|
||||||
|
} else {
|
||||||
|
message.error('操作失败！');
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 验证ID是否存在
|
||||||
|
*/
|
||||||
|
const valid = ref<{ passed: string; reason: string }>();
|
||||||
|
const validField = async (data: any) => {
|
||||||
|
const { result } = await CascadeApi.validateField(data.cascadeId, [
|
||||||
|
gbID.value,
|
||||||
|
]);
|
||||||
|
valid.value = result;
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 取消
|
||||||
|
*/
|
||||||
|
const handleClose = (data: any) => {
|
||||||
|
data.popVis = false;
|
||||||
|
valid.value = undefined;
|
||||||
|
gbID.value = '';
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style lang="less" scoped>
|
||||||
|
.header {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
}
|
||||||
|
.simple-form {
|
||||||
|
margin-bottom: 10px;
|
||||||
|
.error {
|
||||||
|
color: red;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
@ -197,12 +197,10 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup lang="ts">
|
<script setup lang="ts">
|
||||||
import DeviceApi from '@/api/media/device';
|
|
||||||
import CascadeApi from '@/api/media/cascade';
|
import CascadeApi from '@/api/media/cascade';
|
||||||
import type { ActionsType } from '@/components/Table/index.vue';
|
import type { ActionsType } from '@/components/Table/index.vue';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import { PROVIDER_OPTIONS } from '@/views/media/Device/const';
|
|
||||||
|
|
||||||
import { useMenuStore } from 'store/menu';
|
import { useMenuStore } from 'store/menu';
|
||||||
|
|
||||||
|
|
@ -295,7 +293,7 @@ const handleSearch = (e: any) => {
|
||||||
const lastValueFrom = async (params: any) => {
|
const lastValueFrom = async (params: any) => {
|
||||||
const res = await CascadeApi.list(params);
|
const res = await CascadeApi.list(params);
|
||||||
res.result.data.forEach(async (item: any) => {
|
res.result.data.forEach(async (item: any) => {
|
||||||
const resp = await queryBindChannel(item.id);
|
const resp = await queryChannelCount(item.id);
|
||||||
item.count = resp.result.total;
|
item.count = resp.result.total;
|
||||||
});
|
});
|
||||||
return res;
|
return res;
|
||||||
|
|
@ -305,8 +303,8 @@ const lastValueFrom = async (params: any) => {
|
||||||
* 查询通道数量
|
* 查询通道数量
|
||||||
* @param id
|
* @param id
|
||||||
*/
|
*/
|
||||||
const queryBindChannel = async (id: string) => {
|
const queryChannelCount = async (id: string) => {
|
||||||
return await CascadeApi.queryCount(id);
|
return await CascadeApi.queryBindChannel(id, {});
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -88,7 +88,7 @@
|
||||||
<template #title>
|
<template #title>
|
||||||
<p>调用流媒体接口时请求的服务地址</p>
|
<p>调用流媒体接口时请求的服务地址</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon type="QuestionCircleOutlined" />
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -144,7 +144,7 @@
|
||||||
视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址
|
视频设备将流推送到该IP地址下，部分设备仅支持IP地址，建议全是用IP地址
|
||||||
</p>
|
</p>
|
||||||
</template>
|
</template>
|
||||||
<question-circle-outlined />
|
<AIcon type="QuestionCircleOutlined" />
|
||||||
</a-tooltip>
|
</a-tooltip>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
|
|
@ -266,10 +266,9 @@
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script lang="ts" setup name="StreamDetail">
|
<script lang="ts" setup name="StreamDetail">
|
||||||
import { message, Form } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import { queryProviders, queryDetail, save, update } from '@/api/media/stream';
|
import { queryProviders, queryDetail, save, update } from '@/api/media/stream';
|
||||||
import type { FormInstance } from 'ant-design-vue';
|
import type { FormInstance } from 'ant-design-vue';
|
||||||
import { QuestionCircleOutlined } from '@ant-design/icons-vue';
|
|
||||||
|
|
||||||
import { FormDataType } from '../type';
|
import { FormDataType } from '../type';
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -16,9 +16,14 @@
|
||||||
:params="params"
|
:params="params"
|
||||||
>
|
>
|
||||||
<template #headerTitle>
|
<template #headerTitle>
|
||||||
<a-button type="primary" @click="handlAdd"
|
<PermissionButton
|
||||||
><plus-outlined />新增</a-button
|
type="primary"
|
||||||
|
@click="handlAdd"
|
||||||
|
hasPermission="media/Stream:add"
|
||||||
>
|
>
|
||||||
|
<template #icon><AIcon type="PlusOutlined" /></template>
|
||||||
|
新增
|
||||||
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
<template #card="slotProps">
|
<template #card="slotProps">
|
||||||
<CardBox
|
<CardBox
|
||||||
|
|
@ -106,42 +111,24 @@
|
||||||
</div>
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<template #actions="item">
|
<template #actions="item">
|
||||||
<a-tooltip
|
<PermissionButton
|
||||||
v-bind="item.tooltip"
|
:disabled="item.disabled"
|
||||||
:title="item.disabled && item.tooltip.title"
|
:popConfirm="item.popConfirm"
|
||||||
|
:tooltip="{
|
||||||
|
...item.tooltip,
|
||||||
|
}"
|
||||||
|
@click="item.onClick"
|
||||||
|
:hasPermission="'media/Stream:' + item.key"
|
||||||
>
|
>
|
||||||
<a-popconfirm
|
<AIcon
|
||||||
v-if="item.popConfirm"
|
type="DeleteOutlined"
|
||||||
v-bind="item.popConfirm"
|
v-if="item.key === 'delete'"
|
||||||
: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>
|
<template v-else>
|
||||||
<a-button
|
<AIcon :type="item.icon" />
|
||||||
:disabled="item.disabled"
|
<span>{{ item?.text }}</span>
|
||||||
@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>
|
</template>
|
||||||
</a-tooltip>
|
</PermissionButton>
|
||||||
</template>
|
</template>
|
||||||
</CardBox>
|
</CardBox>
|
||||||
</template>
|
</template>
|
||||||
|
|
@ -154,10 +141,10 @@ import type { ActionsType } from '@/components/Table/index.vue';
|
||||||
import { getImage } from '@/utils/comm';
|
import { getImage } from '@/utils/comm';
|
||||||
import { query, remove, disable, enalbe } from '@/api/media/stream';
|
import { query, remove, disable, enalbe } from '@/api/media/stream';
|
||||||
import { message } from 'ant-design-vue';
|
import { message } from 'ant-design-vue';
|
||||||
import Detail from './Detail/index.vue';
|
import { useMenuStore } from 'store/menu';
|
||||||
|
|
||||||
|
const menuStory = useMenuStore();
|
||||||
const tableRef = ref<Record<string, any>>({});
|
const tableRef = ref<Record<string, any>>({});
|
||||||
const router = useRouter();
|
|
||||||
const params = ref<Record<string, any>>({});
|
const params = ref<Record<string, any>>({});
|
||||||
|
|
||||||
const columns = [
|
const columns = [
|
||||||
|
|
@ -194,9 +181,10 @@ const columns = [
|
||||||
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
if (!data) return [];
|
if (!data) return [];
|
||||||
const state = data.state.value;
|
const state = data.state.value;
|
||||||
|
const stateText = state === 'enabled' ? '禁用' : '启用';
|
||||||
const actions = [
|
const actions = [
|
||||||
{
|
{
|
||||||
key: 'edit',
|
key: 'update',
|
||||||
text: '编辑',
|
text: '编辑',
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: '编辑',
|
title: '编辑',
|
||||||
|
|
@ -208,13 +196,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
key: 'action',
|
key: 'action',
|
||||||
text: state === 'enabled' ? '禁用' : '启用',
|
text: stateText,
|
||||||
tooltip: {
|
tooltip: {
|
||||||
title: state === 'enabled' ? '禁用' : '启用',
|
title: stateText,
|
||||||
},
|
},
|
||||||
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
icon: state === 'enabled' ? 'StopOutlined' : 'CheckCircleOutlined',
|
||||||
popConfirm: {
|
popConfirm: {
|
||||||
title: `确认${state === 'enabled' ? '禁用' : '启用'}?`,
|
title: `确认${stateText}?`,
|
||||||
onConfirm: async () => {
|
onConfirm: async () => {
|
||||||
let res =
|
let res =
|
||||||
state === 'enabled'
|
state === 'enabled'
|
||||||
|
|
@ -255,22 +243,13 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
||||||
};
|
};
|
||||||
|
|
||||||
const handlAdd = () => {
|
const handlAdd = () => {
|
||||||
router.push({
|
menuStory.jumpPage(`media/Stream/Detail`, { id: ':id' }, { view: false });
|
||||||
path: `/iot/link/Stream/detail/:id`,
|
|
||||||
query: { view: false },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
const handlEdit = (id: string) => {
|
const handlEdit = (id: string) => {
|
||||||
router.push({
|
menuStory.jumpPage(`media/Stream/Detail`, { id }, { view: false });
|
||||||
path: `/iot/link/Stream/detail/${id}`,
|
|
||||||
query: { view: false },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
const handlEye = (id: string) => {
|
const handlEye = (id: string) => {
|
||||||
router.push({
|
menuStory.jumpPage(`media/Stream/Detail`, { id }, { view: true });
|
||||||
path: `/iot/link/Stream/detail/${id}`,
|
|
||||||
query: { view: true },
|
|
||||||
});
|
|
||||||
};
|
};
|
||||||
|
|
||||||
/**
|
/**
|
||||||
|
|
|
||||||
|
|
@ -63,7 +63,7 @@ const handleClick = (type: string) => {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style scoped lang='less'>
|
<style scoped lang='less'>
|
||||||
@import 'ant-design-vue/es/style/themes/default.less';
|
// @import 'ant-design-vue/es/style/themes/default.less';
|
||||||
|
|
||||||
.scene-trigger-way-warp {display: flex;
|
.scene-trigger-way-warp {display: flex;
|
||||||
flex-wrap: wrap;
|
flex-wrap: wrap;
|
||||||
|
|
|
||||||
|
|
@ -291,7 +291,6 @@ import { LocalStore } from '@/utils/comm';
|
||||||
|
|
||||||
import { save_api, getDetails_api } from '@/api/system/basis';
|
import { save_api, getDetails_api } from '@/api/system/basis';
|
||||||
import { usePermissionStore } from '@/store/permission';
|
import { usePermissionStore } from '@/store/permission';
|
||||||
import PageContainer from 'components/Layout/components/PageContainer'
|
|
||||||
|
|
||||||
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) });
|
const headers = ref({ [TOKEN_KEY]: LocalStore.get(TOKEN_KEY) });
|
||||||
|
|
|
||||||
|
|
@ -3898,8 +3898,8 @@ jetlinks-store@^0.0.3:
|
||||||
|
|
||||||
jetlinks-ui-components@^1.0.0:
|
jetlinks-ui-components@^1.0.0:
|
||||||
version "1.0.0"
|
version "1.0.0"
|
||||||
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.0.tgz#d12144cd57e9547a9fdec1b28fe4c4135fba50ce"
|
resolved "https://registry.jetlinks.cn/jetlinks-ui-components/-/jetlinks-ui-components-1.0.0.tgz#dca7bb82e53f464990b0851635e8f82be6c69db6"
|
||||||
integrity sha512-oqeQpQqidJJMdPa/DzU4V++93r9i9IdHEvqNqDg/+zzw+AhbehtcaRKUVb2bQcMWWCnJWCdv0Md8K5NIdIaoDw==
|
integrity sha512-pgJ0Uiw4Dxc0AU2GqaOaVhNYun1VEmv78OtJcir2sq9rVSIuXCtTl1eHYMPiiPb6z1fG677KKs1gqvrpUwhguQ==
|
||||||
dependencies:
|
dependencies:
|
||||||
"@vueuse/core" "^9.12.0"
|
"@vueuse/core" "^9.12.0"
|
||||||
ant-design-vue "^3.2.15"
|
ant-design-vue "^3.2.15"
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue