feat(运维管理): 重构网关页面并添加新功能
-重新设计了网关列表和表单的结构，增加了更多字段和选项 - 添加了网络组件和消息协议的动态加载功能 - 实现了根据接入方式动态显示不同表单字段的逻辑 - 优化了表单验证和数据提交的流程 - 统一了启用状态的显示和操作 - 调整了部分UI样式，提高了用户体验
This commit is contained in:
fhysy
parent
fe3c9b570e
commit
cb5ab82af4
|
|
@ -1,52 +1,122 @@
|
|||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
|
||||
import { networkList } from '#/api/operations/network';
|
||||
import { protocolList } from '#/api/operations/protocol';
|
||||
|
||||
import { enabledOptions, networkTypeOptions } from '../user.data';
|
||||
|
||||
export const providerOptions = [
|
||||
...networkTypeOptions,
|
||||
{
|
||||
label: '网关子设备接入',
|
||||
value: 'child-device',
|
||||
channel: 'child-device',
|
||||
transport: 'Gateway',
|
||||
description:
|
||||
'需要通过网关与平台进行数据通信的设备，将作为网关子设备接入到平台。',
|
||||
},
|
||||
];
|
||||
|
||||
// 存储网络组件更新回调函数
|
||||
let networkOptionsUpdateCallback: ((provider: string) => Promise<void>) | null =
|
||||
null;
|
||||
|
||||
// 注册网络组件更新回调
|
||||
export const registerNetworkOptionsUpdate = (
|
||||
callback: (provider: string) => Promise<void>,
|
||||
) => {
|
||||
networkOptionsUpdateCallback = callback;
|
||||
};
|
||||
|
||||
// 获取网络组件选项
|
||||
export const getNetworkOptions = async (networkType?: string) => {
|
||||
try {
|
||||
const params: any = { enabled: '1' };
|
||||
if (networkType) {
|
||||
params.networkType = networkType;
|
||||
}
|
||||
const response = await networkList(params);
|
||||
return response.rows.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('获取网络组件失败:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
// 获取消息协议选项
|
||||
export const getProtocolOptions = async () => {
|
||||
try {
|
||||
const response = await protocolList({ enabled: '1' });
|
||||
return response.rows.map((item: any) => ({
|
||||
label: item.name,
|
||||
value: item.id,
|
||||
}));
|
||||
} catch (error) {
|
||||
console.error('获取消息协议失败:', error);
|
||||
return [];
|
||||
}
|
||||
};
|
||||
|
||||
export const querySchema: FormSchemaGetter = () => [
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'enabled',
|
||||
label: '启用状态 0 禁用',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'name',
|
||||
label: '网关名称',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
filterOption: true,
|
||||
options: providerOptions,
|
||||
placeholder: '请选择',
|
||||
showSearch: true,
|
||||
},
|
||||
fieldName: 'provider',
|
||||
label: '接入方式,如: mqtt-server-gateway',
|
||||
label: '接入方式',
|
||||
},
|
||||
// {
|
||||
// component: 'Select',
|
||||
// componentProps: {
|
||||
// allowClear: true,
|
||||
// filterOption: true,
|
||||
// placeholder: '请选择网络组件',
|
||||
// showSearch: true,
|
||||
// },
|
||||
// fieldName: 'channelId',
|
||||
// label: '网络组件',
|
||||
// dependencies: {
|
||||
// triggerFields: ['provider'],
|
||||
// show: (values: any) =>
|
||||
// values.provider && values.provider !== 'child-device',
|
||||
// },
|
||||
// },
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'description',
|
||||
label: '描述',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'channel',
|
||||
label: '通道 接入通道(方式),如网络组件',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'channelId',
|
||||
label: '通道id 接入使用的通道ID,如: 网络组件ID,modbus通道ID',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
filterOption: true,
|
||||
placeholder: '请选择消息协议',
|
||||
showSearch: true,
|
||||
},
|
||||
fieldName: 'protocol',
|
||||
label: '消息协议 消息协议',
|
||||
label: '消息协议',
|
||||
},
|
||||
{
|
||||
component: 'Input',
|
||||
fieldName: 'transport',
|
||||
label: '传输协议,如TCP,MQTT,UDP',
|
||||
},
|
||||
{
|
||||
component: 'Textarea',
|
||||
fieldName: 'gatewayConfig',
|
||||
label: '网关配置',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
filterOption: true,
|
||||
options: enabledOptions,
|
||||
placeholder: '请选择',
|
||||
showSearch: true,
|
||||
},
|
||||
fieldName: 'enabled',
|
||||
label: '启用状态',
|
||||
},
|
||||
];
|
||||
|
||||
|
|
@ -58,41 +128,22 @@ export const columns: VxeGridProps['columns'] = [
|
|||
title: '编号',
|
||||
field: 'id',
|
||||
},
|
||||
{
|
||||
title: '启用状态 0 禁用',
|
||||
field: 'enabled',
|
||||
},
|
||||
{
|
||||
title: '网关名称',
|
||||
field: 'name',
|
||||
},
|
||||
{
|
||||
title: '接入方式,如: mqtt-server-gateway',
|
||||
field: 'provider',
|
||||
},
|
||||
{
|
||||
title: '描述',
|
||||
field: 'description',
|
||||
},
|
||||
{
|
||||
title: '通道 接入通道(方式),如网络组件',
|
||||
field: 'channel',
|
||||
},
|
||||
{
|
||||
title: '通道id 接入使用的通道ID,如: 网络组件ID,modbus通道ID',
|
||||
title: '网络组件',
|
||||
field: 'channelId',
|
||||
},
|
||||
{
|
||||
title: '消息协议 消息协议',
|
||||
title: '消息协议',
|
||||
field: 'protocol',
|
||||
},
|
||||
{
|
||||
title: '传输协议,如TCP,MQTT,UDP',
|
||||
field: 'transport',
|
||||
},
|
||||
{
|
||||
title: '网关配置',
|
||||
field: 'gatewayConfig',
|
||||
title: '启用状态',
|
||||
field: 'enabled',
|
||||
slots: { default: 'enabled' },
|
||||
},
|
||||
{
|
||||
field: 'action',
|
||||
|
|
@ -113,12 +164,6 @@ export const drawerSchema: FormSchemaGetter = () => [
|
|||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '启用状态 0 禁用',
|
||||
fieldName: 'enabled',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '网关名称',
|
||||
fieldName: 'name',
|
||||
|
|
@ -126,45 +171,94 @@ export const drawerSchema: FormSchemaGetter = () => [
|
|||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '接入方式,如: mqtt-server-gateway',
|
||||
label: '接入方式',
|
||||
fieldName: 'provider',
|
||||
component: 'Input',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
filterOption: true,
|
||||
options: providerOptions,
|
||||
placeholder: '请选择',
|
||||
showSearch: true,
|
||||
onChange: async (value: string) => {
|
||||
console.log('抽屉表单接入方式变化:', value);
|
||||
if (networkOptionsUpdateCallback) {
|
||||
await networkOptionsUpdateCallback(value);
|
||||
}
|
||||
},
|
||||
},
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '网络组件',
|
||||
fieldName: 'channelId',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
filterOption: true,
|
||||
placeholder: '请选择网络组件',
|
||||
showSearch: true,
|
||||
},
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
triggerFields: ['provider'],
|
||||
show: (values: any) =>
|
||||
values.provider && values.provider !== 'child-device',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '消息协议',
|
||||
fieldName: 'protocol',
|
||||
component: 'Select',
|
||||
componentProps: {
|
||||
allowClear: true,
|
||||
filterOption: true,
|
||||
placeholder: '请选择消息协议',
|
||||
showSearch: true,
|
||||
},
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
triggerFields: ['provider'],
|
||||
show: (values: any) => values.provider && values.provider !== '',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '启用状态',
|
||||
fieldName: 'enabled',
|
||||
component: 'RadioGroup',
|
||||
componentProps: {
|
||||
buttonStyle: 'solid',
|
||||
options: enabledOptions,
|
||||
optionType: 'button',
|
||||
},
|
||||
defaultValue: '1',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '描述',
|
||||
fieldName: 'description',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
component: 'Textarea',
|
||||
componentProps: {
|
||||
placeholder: '请输入描述',
|
||||
rows: 3,
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '通道 接入通道(方式),如网络组件',
|
||||
label: '接入通道(方式)',
|
||||
fieldName: 'channel',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
{
|
||||
label: '通道id 接入使用的通道ID,如: 网络组件ID,modbus通道ID',
|
||||
fieldName: 'channelId',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '消息协议 消息协议',
|
||||
fieldName: 'protocol',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '传输协议,如TCP,MQTT,UDP',
|
||||
label: '传输协议',
|
||||
fieldName: 'transport',
|
||||
component: 'Input',
|
||||
rules: 'required',
|
||||
},
|
||||
{
|
||||
label: '网关配置',
|
||||
fieldName: 'gatewayConfig',
|
||||
component: 'Textarea',
|
||||
rules: 'required',
|
||||
dependencies: {
|
||||
show: () => false,
|
||||
triggerFields: [''],
|
||||
},
|
||||
},
|
||||
];
|
||||
|
|
|
|||
|
|
@ -6,10 +6,20 @@ import { $t } from '@vben/locales';
|
|||
import { cloneDeep } from '@vben/utils';
|
||||
|
||||
import { useVbenForm } from '#/adapter/form';
|
||||
import { gatewayAdd, gatewayInfo, gatewayUpdate } from '#/api/operations/gateway';
|
||||
import {
|
||||
gatewayAdd,
|
||||
gatewayInfo,
|
||||
gatewayUpdate,
|
||||
} from '#/api/operations/gateway';
|
||||
import { defaultFormValueGetter, useBeforeCloseDiff } from '#/utils/popup';
|
||||
|
||||
import { drawerSchema } from './data';
|
||||
import {
|
||||
drawerSchema,
|
||||
getNetworkOptions,
|
||||
getProtocolOptions,
|
||||
providerOptions,
|
||||
registerNetworkOptionsUpdate,
|
||||
} from './data';
|
||||
|
||||
const emit = defineEmits<{ reload: [] }>();
|
||||
|
||||
|
|
@ -27,13 +37,72 @@ const [BasicForm, formApi] = useVbenForm({
|
|||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
}
|
||||
},
|
||||
},
|
||||
schema: drawerSchema(),
|
||||
showDefaultActions: false,
|
||||
wrapperClass: 'grid-cols-2',
|
||||
});
|
||||
|
||||
// 更新抽屉表单的网络组件选项
|
||||
async function updateDrawerNetworkOptions(provider: string) {
|
||||
try {
|
||||
if (provider && provider !== 'child-device') {
|
||||
const networkOptions = await getNetworkOptions(provider);
|
||||
console.log('网络组件选项:', provider);
|
||||
await formApi.updateSchema(
|
||||
drawerSchema().map((field: any) => {
|
||||
if (field.fieldName === 'channelId') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: networkOptions,
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
);
|
||||
await formApi.setFieldValue('channelId', ''); // 清空选中值
|
||||
providerOptions.forEach((option) => {
|
||||
if (option.value === provider) {
|
||||
formApi.setFieldValue('channel', option.channel);
|
||||
formApi.setFieldValue('transport', option.transport);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
// 如果是网关子设备接入，清空网络组件选项
|
||||
await formApi.updateSchema(
|
||||
drawerSchema().map((field: any) => {
|
||||
if (field.fieldName === 'channelId') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
);
|
||||
await formApi.setFieldValue('channelId', ''); // 清空选中值
|
||||
providerOptions.forEach((option) => {
|
||||
if (option.value === provider) {
|
||||
formApi.setFieldValue('channel', option.channel);
|
||||
formApi.setFieldValue('transport', option.transport);
|
||||
}
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新抽屉表单网络组件选项失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 注册网络组件更新回调
|
||||
registerNetworkOptionsUpdate(updateDrawerNetworkOptions);
|
||||
|
||||
const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
||||
{
|
||||
initializedGetter: defaultFormValueGetter(formApi),
|
||||
|
|
@ -44,7 +113,6 @@ const { onBeforeClose, markInitialized, resetInitialized } = useBeforeCloseDiff(
|
|||
const [BasicDrawer, drawerApi] = useVbenDrawer({
|
||||
// 在这里更改宽度
|
||||
class: 'w-[550px]',
|
||||
fullscreenButton: false,
|
||||
onBeforeClose,
|
||||
onClosed: handleClosed,
|
||||
onConfirm: handleConfirm,
|
||||
|
|
@ -54,12 +122,39 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
|
|||
}
|
||||
drawerApi.drawerLoading(true);
|
||||
|
||||
// 动态加载选项数据并更新schema
|
||||
try {
|
||||
const protocolOptions = await getProtocolOptions();
|
||||
|
||||
const updatedSchema = drawerSchema().map((field: any) => {
|
||||
if (field.fieldName === 'protocol') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: protocolOptions,
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
});
|
||||
|
||||
await formApi.updateSchema(updatedSchema);
|
||||
} catch (error) {
|
||||
console.error('加载选项数据失败:', error);
|
||||
}
|
||||
|
||||
const { id } = drawerApi.getData() as { id?: number | string };
|
||||
isUpdate.value = !!id;
|
||||
|
||||
if (isUpdate.value && id) {
|
||||
const record = await gatewayInfo(id);
|
||||
await formApi.setValues(record);
|
||||
|
||||
// 如果是编辑模式，根据provider加载对应的网络组件选项
|
||||
if (record.provider && record.provider !== 'child-device') {
|
||||
await loadNetworkOptions(String(record.provider));
|
||||
}
|
||||
}
|
||||
await markInitialized();
|
||||
|
||||
|
|
@ -67,6 +162,32 @@ const [BasicDrawer, drawerApi] = useVbenDrawer({
|
|||
},
|
||||
});
|
||||
|
||||
// 根据接入方式加载网络组件选项
|
||||
async function loadNetworkOptions(provider: string) {
|
||||
try {
|
||||
if (provider && provider !== 'child-device') {
|
||||
const networkOptions = await getNetworkOptions(provider);
|
||||
|
||||
await formApi.updateSchema(
|
||||
drawerSchema().map((field: any) => {
|
||||
if (field.fieldName === 'channelId') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: networkOptions,
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('加载网络组件选项失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function handleConfirm() {
|
||||
try {
|
||||
drawerApi.lock(true);
|
||||
|
|
@ -98,4 +219,3 @@ async function handleClosed() {
|
|||
<BasicForm />
|
||||
</BasicDrawer>
|
||||
</template>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,30 @@
|
|||
<script setup lang="ts">
|
||||
import type { Recordable } from '@vben/types';
|
||||
import type { VbenFormProps } from '@vben/common-ui';
|
||||
|
||||
import { ref } from 'vue';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import type { GatewayForm } from '#/api/operations/gateway/model';
|
||||
|
||||
import { Page, useVbenDrawer, type VbenFormProps } from '@vben/common-ui';
|
||||
import { Page, useVbenDrawer } from '@vben/common-ui';
|
||||
import { getVxePopupContainer } from '@vben/utils';
|
||||
|
||||
import { Modal, Popconfirm, Space } from 'ant-design-vue';
|
||||
import dayjs from 'dayjs';
|
||||
|
||||
import {
|
||||
useVbenVxeGrid,
|
||||
vxeCheckboxChecked,
|
||||
type VxeGridProps
|
||||
} from '#/adapter/vxe-table';
|
||||
import { Modal, Popconfirm, Space, Tag } from 'ant-design-vue';
|
||||
|
||||
import { useVbenVxeGrid, vxeCheckboxChecked } from '#/adapter/vxe-table';
|
||||
import {
|
||||
gatewayExport,
|
||||
gatewayList,
|
||||
gatewayRemove,
|
||||
} from '#/api/operations/gateway';
|
||||
import type { GatewayForm } from '#/api/operations/gateway/model';
|
||||
import { commonDownloadExcel } from '#/utils/file/download';
|
||||
|
||||
import {
|
||||
columns,
|
||||
getNetworkOptions,
|
||||
getProtocolOptions,
|
||||
querySchema,
|
||||
registerNetworkOptionsUpdate,
|
||||
} from './data';
|
||||
import gatewayDrawer from './gateway-drawer.vue';
|
||||
import { columns, querySchema } from './data';
|
||||
|
||||
const formOptions: VbenFormProps = {
|
||||
commonConfig: {
|
||||
|
|
@ -35,15 +35,6 @@ const formOptions: VbenFormProps = {
|
|||
},
|
||||
schema: querySchema(),
|
||||
wrapperClass: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4',
|
||||
// 处理区间选择器RangePicker时间格式 将一个字段映射为两个字段 搜索/导出会用到
|
||||
// 不需要直接删除
|
||||
// fieldMappingTime: [
|
||||
// [
|
||||
// 'createTime',
|
||||
// ['params[beginTime]', 'params[endTime]'],
|
||||
// ['YYYY-MM-DD 00:00:00', 'YYYY-MM-DD 23:59:59'],
|
||||
// ],
|
||||
// ],
|
||||
};
|
||||
|
||||
const gridOptions: VxeGridProps = {
|
||||
|
|
@ -76,7 +67,7 @@ const gridOptions: VxeGridProps = {
|
|||
keyField: 'id',
|
||||
},
|
||||
// 表格全局唯一表示 保存列配置需要用到
|
||||
id: 'operations-gateway-index'
|
||||
id: 'operations-gateway-index',
|
||||
};
|
||||
|
||||
const [BasicTable, tableApi] = useVbenVxeGrid({
|
||||
|
|
@ -84,6 +75,79 @@ const [BasicTable, tableApi] = useVbenVxeGrid({
|
|||
gridOptions,
|
||||
});
|
||||
|
||||
// 更新网络组件选项
|
||||
async function updateNetworkComponentOptions(provider: string) {
|
||||
try {
|
||||
if (provider && provider !== 'child-device') {
|
||||
const networkOptions = await getNetworkOptions(provider);
|
||||
|
||||
await tableApi.formApi.updateSchema(
|
||||
querySchema().map((field: any) => {
|
||||
if (field.fieldName === 'channelId') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: networkOptions,
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
);
|
||||
} else {
|
||||
// 如果是网关子设备接入，清空网络组件选项
|
||||
await tableApi.formApi.updateSchema(
|
||||
querySchema().map((field: any) => {
|
||||
if (field.fieldName === 'channelId') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: [],
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('更新网络组件选项失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 注册网络组件更新回调
|
||||
registerNetworkOptionsUpdate(updateNetworkComponentOptions);
|
||||
|
||||
// 动态加载表单选项
|
||||
async function loadFormOptions() {
|
||||
try {
|
||||
const protocolOptions = await getProtocolOptions();
|
||||
|
||||
// 更新表单字段的选项
|
||||
await tableApi.formApi.updateSchema(
|
||||
querySchema().map((field: any) => {
|
||||
if (field.fieldName === 'protocol') {
|
||||
return {
|
||||
...field,
|
||||
componentProps: {
|
||||
...field.componentProps,
|
||||
options: protocolOptions,
|
||||
},
|
||||
};
|
||||
}
|
||||
return field;
|
||||
}),
|
||||
);
|
||||
} catch (error) {
|
||||
console.error('加载表单选项失败:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// 组件挂载后加载选项
|
||||
loadFormOptions();
|
||||
|
||||
const [GatewayDrawer, drawerApi] = useVbenDrawer({
|
||||
connectedComponent: gatewayDrawer,
|
||||
});
|
||||
|
|
@ -118,9 +182,14 @@ function handleMultiDelete() {
|
|||
}
|
||||
|
||||
function handleDownloadExcel() {
|
||||
commonDownloadExcel(gatewayExport, '设备接入网关数据', tableApi.formApi.form.values, {
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
});
|
||||
commonDownloadExcel(
|
||||
gatewayExport,
|
||||
'设备接入网关数据',
|
||||
tableApi.formApi.form.values,
|
||||
{
|
||||
fieldMappingTime: formOptions.fieldMappingTime,
|
||||
},
|
||||
);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
@ -138,9 +207,10 @@ function handleDownloadExcel() {
|
|||
<a-button
|
||||
:disabled="!vxeCheckboxChecked(tableApi)"
|
||||
danger
|
||||
type="primary"
|
||||
v-access:code="['operations:gateway:remove']"
|
||||
@click="handleMultiDelete">
|
||||
type="primary"
|
||||
v-access:code="['operations:gateway:remove']"
|
||||
@click="handleMultiDelete"
|
||||
>
|
||||
{{ $t('pages.common.delete') }}
|
||||
</a-button>
|
||||
<a-button
|
||||
|
|
@ -152,6 +222,11 @@ function handleDownloadExcel() {
|
|||
</a-button>
|
||||
</Space>
|
||||
</template>
|
||||
<template #enabled="{ row }">
|
||||
<Tag :color="row.enabled === '1' ? 'success' : 'error'">
|
||||
{{ row.enabled === '1' ? '启用' : '禁用' }}
|
||||
</Tag>
|
||||
</template>
|
||||
<template #action="{ row }">
|
||||
<Space>
|
||||
<ghost-button
|
||||
|
|
|
|||
|
|
@ -1,15 +1,16 @@
|
|||
import type { FormSchemaGetter } from '#/adapter/form';
|
||||
import type { VxeGridProps } from '#/adapter/vxe-table';
|
||||
import { networkTypeOptions,enabledOptions } from '../user.data';
|
||||
|
||||
const networkTypeOptions = [
|
||||
{ label: 'MQTT客户端', value: 'MQTT_CLIENT' },
|
||||
{ label: 'HTTP服务', value: 'HTTP_SERVER' },
|
||||
];
|
||||
// const networkTypeOptions = [
|
||||
// { label: 'MQTT客户端', value: 'MQTT_CLIENT' },
|
||||
// { label: 'HTTP服务', value: 'HTTP_SERVER' },
|
||||
// ];
|
||||
|
||||
const enabledOptions = [
|
||||
{ label: '启用', value: '1' },
|
||||
{ label: '禁用', value: '0' },
|
||||
];
|
||||
// const enabledOptions = [
|
||||
// { label: '启用', value: '1' },
|
||||
// { label: '禁用', value: '0' },
|
||||
// ];
|
||||
|
||||
// HTTP服务配置字段
|
||||
const httpServerFields = [
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@ const [BasicForm, formApi] = useVbenForm({
|
|||
// 默认占满两列
|
||||
formItemClass: 'col-span-2',
|
||||
// 默认label宽度 px
|
||||
labelWidth: 100,
|
||||
labelWidth: 120,
|
||||
// 通用配置项 会影响到所有表单项
|
||||
componentProps: {
|
||||
class: 'w-full',
|
||||
|
|
|
|||
|
|
@ -0,0 +1,22 @@
|
|||
export const networkTypeOptions = [
|
||||
{
|
||||
label: 'MQTT客户端',
|
||||
value: 'MQTT_CLIENT',
|
||||
channel: 'network',
|
||||
transport: 'MQTT',
|
||||
description:
|
||||
'MQTT是ISO 标准下基于发布/订阅范式的消息协议，具有轻量、简单、开放和易于实现的特点。平台使用指定的ID接入其他远程平台，订阅消息。也可添加用户名和密码校验。可设置最大消息长度。可统一设置共享的订阅前缀。',
|
||||
},
|
||||
{
|
||||
label: 'HTTP服务',
|
||||
value: 'HTTP_SERVER',
|
||||
channel: 'network',
|
||||
transport: 'HTTP',
|
||||
description:
|
||||
'HTTP服务是一个简单的请求-响应的基于TCP的无状态协议。设备通过HTTP服务与平台进行灵活的短链接通信，仅支持设备和平台之间单对单的请求-响应模式',
|
||||
},
|
||||
];
|
||||
export const enabledOptions = [
|
||||
{ label: '启用', value: '1' },
|
||||
{ label: '禁用', value: '0' },
|
||||
];
|
||||
Loading…
Reference in New Issue