admin/JiShe.IOT.UI
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完成OneNET产品管理

Browse Source
This commit is contained in:
ChenYi 2025-07-29 14:43:27 +08:00
parent 4d7ee72d24
commit 57d65c7e77
7 changed files with 268 additions and 137 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
apps/web-antd/src/locales/langs/en-US/abp.json
View File

@ -276,6 +276,10 @@
"BelongingProductName": "Belonging ProductName",
"CommunicationAddress": "Communication Address",
"CommunicationAddressTLS": "TLS Communication Address",
"DeviceThingModelFileName": "DeviceThingModelFileName"
"DeviceThingModelFileName": "DeviceThingModelFileName",
"IoTPlatformProductUpdateTime": "ProductUpdateTime",
"IoTPlatformProductCreateTime": "ProductCreateTime",
"CreationTime": "CreationTime",
"LastModificationTime": "LastModificationTime"
}
}

4
apps/web-antd/src/locales/langs/en-US/common.json
View File

@ -55,5 +55,7 @@
"getDataFailed": "Failed to get data",
"PhoneNumberFormatError": "PhoneNumber Format Error",
"IoTPlatform": "IoTPlatform",
"note": "note"
"note": "note",
"creationTime": "CreationTime",
"lastModificationTime": "LastModificationTime"
}

6
apps/web-antd/src/locales/langs/zh-CN/abp.json
View File

@ -278,6 +278,10 @@
"BelongingProductName": "所属产品",
"CommunicationAddress": "通讯地址",
"CommunicationAddressTLS": "TLS通讯地址",
"DeviceThingModelFileName": "物模型文件"
"DeviceThingModelFileName": "物模型文件",
"IoTPlatformProductUpdateTime": "平台更新时间",
"IoTPlatformProductCreateTime": "平台创建时间",
"CreationTime": "创建时间",
"LastModificationTime": "更新时间"
}
}

4
apps/web-antd/src/locales/langs/zh-CN/common.json
View File

@ -56,5 +56,7 @@
"IsEnabled": "是否启用",
"PhoneNumberFormatError": "手机号码格式错误",
"IoTPlatform": "物联网平台",
"note": "备注"
"note": "备注",
"creationTime": "创建时间",
"lastModificationTime": "最后更新时间"
}

16
apps/web-antd/src/views/devicemanagement/deviceinfo/schema.ts
View File

@ -168,14 +168,6 @@ export const addDeviceFormSchema: any = computed(() => [
message: `${$t('common.pleaseSelect')}${$t('abp.OneNETManagement.BelongingAccountName')}`,
}),
},
{
component: 'Input',
fieldName: 'deviceName',
label: $t('abp.deviceInfos.deviceName'),
rules: z.string().min(1, {
message: `${$t('common.pleaseInput')}${$t('abp.deviceInfos.deviceName')}`,
}),
},
{
component: 'Input',
fieldName: 'deviceAddress',
@ -184,14 +176,6 @@ export const addDeviceFormSchema: any = computed(() => [
message: `${$t('common.pleaseInput')}${$t('abp.deviceInfos.deviceAddress')}`,
}),
},
{
component: 'Input',
fieldName: 'platformPassword',
label: $t('abp.deviceInfos.platformPassword'),
rules: z.string().min(1, {
message: `${$t('common.pleaseInput')}${$t('common.info')}${$t('abp.deviceInfos.platformPassword')}`,
}),
},
]);
export const editDeviceFormSchemaEdit: any = computed(() => [

139
apps/web-antd/src/views/onenetmanagement/privateProduct/index.vue
View File

@ -2,7 +2,7 @@
import type { VbenFormProps } from '#/adapter/form';
import type { VxeGridProps } from '#/adapter/vxe-table';
import { h, ref, nextTick } from 'vue';
import { h, nextTick, ref } from 'vue';
import { useRouter } from 'vue-router';
import { Page, useVbenModal } from '@vben/common-ui';
@ -12,12 +12,13 @@ import { message as Message, Tag } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
postOneNetProductInsertAsync,
postFilesDownload,
postFilesUpload,
postOneNetProductDeleteAsync,
postOneNetProductInsertAsync,
postOneNetProductListAsync,
postOneNetProductModifyAsync,
postFilesUpload,
postFilesDownload,
postOneNetProductProductStatusChangeAsync,
} from '#/api-client';
import { TableAction } from '#/components/table-action';
import { $t } from '#/locales';
@ -26,8 +27,8 @@ import {
addProductFormSchema,
editProductFormSchemaEdit,
querySchema,
tableSchema,
setFileSelectedCallback,
tableSchema,
} from './schema';
defineOptions({
@ -148,12 +149,14 @@ const [EditForm, editFormApi] = useVbenForm({
async function submit() {
const isEdit = !!editRow.value.id;
const formApi = isEdit ? editFormApi : addFormApi;
const api = isEdit ? postOneNetProductModifyAsync : postOneNetProductInsertAsync;
const api = isEdit
? postOneNetProductModifyAsync
: postOneNetProductInsertAsync;
const { valid } = await formApi.validate();
if (!valid) return;
const formValues = await formApi.getValues();
// 提交前校验
if (!formValues.deviceThingModelFileName) {
Message.error('请选择设备模型文件');
@ -180,7 +183,7 @@ async function submit() {
userModalApi.setState({ loading: false, confirmLoading: false });
return;
}
} catch (error) {
} catch {
Message.error('文件上传失败');
userModalApi.setState({ loading: false, confirmLoading: false });
return;
@ -191,15 +194,15 @@ async function submit() {
selectedFile = null;
// 继续后续表单提交逻辑
const fetchParams: any = isEdit
? {
id: editRow.value.id,
...formValues,
}
id: editRow.value.id,
...formValues,
}
: {
...formValues,
};
...formValues,
};
try {
const resp = await api({ body: fetchParams });
@ -237,7 +240,9 @@ const openAddModal = async () => {
// 删除函数
async function onDel(record: any) {
try {
const resp = await postOneNetProductDeleteAsync({ body: { id: record.id } });
const resp = await postOneNetProductDeleteAsync({
body: { id: record.id },
});
if (resp.data) {
Message.success($t('common.deleteSuccess'));
// 重置文件选择
@ -257,7 +262,7 @@ async function onDownloadFile(record: any) {
Message.error('文件ID不存在，无法下载');
return;
}
try {
const { data } = await postFilesDownload({
body: { id: record.deviceThingModelFileId },
@ -266,68 +271,92 @@ async function onDownloadFile(record: any) {
const url = window.URL.createObjectURL(new Blob([data as Blob]));
const link = document.createElement('a');
link.href = url;
link.setAttribute('download', record.deviceThingModelFileName || 'device-model-file');
link.setAttribute(
'download',
record.deviceThingModelFileName || 'device-model-file',
);
document.body.append(link);
link.click();
link.remove();
window.URL.revokeObjectURL(url);
Message.success('文件下载成功');
} catch (error) {
} catch {
Message.error('文件下载失败');
}
}
// 状态更改函数
async function onStatusChange(record: any) {
try {
const resp = await postOneNetProductProductStatusChangeAsync({
body: {
id: record.id,
enabled: !record.isEnabled,
},
});
if (resp.data) {
Message.success(record.isEnabled ? '禁用成功' : '启用成功');
gridApi.reload();
} else {
Message.error(record.isEnabled ? '禁用失败' : '启用失败');
}
} catch {
Message.error(record.isEnabled ? '禁用失败' : '启用失败');
}
}
</script>
<template>
<Page auto-content-height>
<Grid>
<template #toolbar-actions>
<TableAction
:actions="[
{
label: $t('common.add'),
type: 'primary',
icon: 'ant-design:plus-outlined',
onClick: openAddModal.bind(null),
auth: ['AbpIdentity.Users.Create'],
},
]"
/>
<TableAction :actions="[
{
label: $t('common.add'),
type: 'primary',
icon: 'ant-design:plus-outlined',
onClick: openAddModal.bind(null),
auth: ['AbpIdentity.Users.Create'],
},
]" />
</template>
<template #isEnable="{ row }">
<component
:is="
h(Tag, { color: row.enabled ? 'green' : 'red' }, () =>
row.enabled ? $t('common.yes') : $t('common.no'),
)
"
/>
<component :is="h(Tag, { color: row.isEnabled ? 'green' : 'red' }, () =>
row.isEnabled ? $t('common.yes') : $t('common.no'),
)
" />
</template>
<template #deviceThingModelFileName="{ row }">
<a
v-if="row.deviceThingModelFileName && row.deviceThingModelFileId"
@click="onDownloadFile(row)"
style="color: #1890ff; cursor: pointer; text-decoration: underline;"
>
<a v-if="row.deviceThingModelFileName && row.deviceThingModelFileId" @click="onDownloadFile(row)"
style="color: #1890ff; text-decoration: underline; cursor: pointer">
{{ row.deviceThingModelFileName }}
</a>
<span v-else>{{ row.deviceThingModelFileName || '-' }}</span>
</template>
<template #action="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
onClick: onEdit.bind(null, row),
<TableAction :actions="[
{
label: $t('common.edit'),
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
onClick: onEdit.bind(null, row),
},
{
label: row.isEnabled ? '禁用' : '启用',
type: 'link',
danger: row.isEnabled,
size: 'small',
auth: ['AbpIdentity.Users.Update'],
popConfirm: {
title: `确定要${row.isEnabled ? '禁用' : '启用'}该产品吗？`,
confirm: onStatusChange.bind(null, row),
},
]"
:drop-down-actions="[
},
]" :drop-down-actions="[
{
label: $t('common.delete'),
icon: 'ant-design:delete-outlined',
@ -338,14 +367,10 @@ async function onDownloadFile(record: any) {
confirm: onDel.bind(null, row),
},
},
]"
/>
]" />
</template>
</Grid>
<UserModal
:title="editRow.id ? $t('common.edit') : $t('common.add')"
class="w-[800px]"
>
<UserModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
<component :is="editRow.id ? EditForm : AddForm" />
</UserModal>
</Page>

230
apps/web-antd/src/views/onenetmanagement/privateProduct/schema.ts
View File

@ -4,7 +4,7 @@ import { computed, h } from 'vue';
import { z } from '@vben/common-ui';
import { postOneNetAccountListAsync, postFilesUpload } from '#/api-client';
import { postOneNetAccountListAsync } from '#/api-client';
import { $t } from '#/locales';
export const querySchema = computed(() => [
@ -53,6 +53,82 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
minWidth: '150',
slots: { default: 'deviceThingModelFileName' },
},
{
field: 'productCreateTime',
title: $t('abp.OneNETManagement.IoTPlatformProductCreateTime'),
minWidth: '150',
formatter: ({ cellValue }: any) => {
if (!cellValue) return '-';
const date = new Date(cellValue);
if (isNaN(date.getTime())) return '-';
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(/\//g, '-');
},
},
{
field: 'productUpdateTime',
title: $t('abp.OneNETManagement.IoTPlatformProductUpdateTime'),
minWidth: '150',
formatter: ({ cellValue }: any) => {
if (!cellValue) return '-';
const date = new Date(cellValue);
if (isNaN(date.getTime())) return '-';
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(/\//g, '-');
},
},
{
field: 'creationTime',
title: $t('abp.OneNETManagement.CreationTime'),
minWidth: '150',
formatter: ({ cellValue }: any) => {
if (!cellValue) return '-';
const date = new Date(cellValue);
if (isNaN(date.getTime())) return '-';
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(/\//g, '-');
},
},
{
field: 'lastModificationTime',
title: $t('abp.OneNETManagement.LastModificationTime'),
minWidth: '150',
formatter: ({ cellValue }: any) => {
if (!cellValue) return '-';
const date = new Date(cellValue);
if (isNaN(date.getTime())) return '-';
return date.toLocaleString('zh-CN', {
year: 'numeric',
month: '2-digit',
day: '2-digit',
hour: '2-digit',
minute: '2-digit',
second: '2-digit',
hour12: false,
}).replace(/\//g, '-');
},
},
{
field: 'isEnabled',
title: $t('common.isEnable'),
@ -63,7 +139,7 @@ export const tableSchema: any = computed((): VxeGridProps['columns'] => [
title: $t('common.action'),
field: 'action',
fixed: 'right',
width: '150',
width: '200',
slots: { default: 'action' },
},
]);
@ -161,37 +237,54 @@ export const addProductFormSchema: any = computed(() => [
componentProps: {
placeholder: '请选择文件',
readonly: true,
addonAfter: h('button', {
type: 'button',
style: 'border: none; background: #1890ff; color: white; padding: 4px 8px; border-radius: 4px; cursor: pointer;',
onClick: () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json,.xlsx,.xls';
input.onchange = (e: any) => {
const file = e.target.files[0];
if (file) {
// 只显示文件名，不上传
const currentInput = document.querySelector('input[placeholder="请选择文件"]') as HTMLInputElement;
if (currentInput) {
currentInput.value = file.name;
// 触发change事件
currentInput.dispatchEvent(new Event('input', { bubbles: true }));
currentInput.dispatchEvent(new Event('change', { bubbles: true }));
// 存储文件对象到全局变量，用于后续上传
selectedFile = file;
// 调用回调函数
if (_onFileSelected) {
_onFileSelected(file);
addonAfter: h(
'button',
{
type: 'button',
style:
'border: none; background: #1890ff; color: white; padding: 4px 8px; border-radius: 4px; cursor: pointer;',
onClick: () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json,.xlsx,.xls';
input.addEventListener('change', (e: any) => {
const file = e.target.files[0];
if (file) {
// 只显示文件名，不上传
const currentInput = document.querySelector(
'input[placeholder="请选择文件"]',
) as HTMLInputElement;
if (currentInput) {
currentInput.value = file.name;
// 触发change事件
currentInput.dispatchEvent(
new Event('input', { bubbles: true }),
);
currentInput.dispatchEvent(
new Event('change', { bubbles: true }),
);
// 存储文件对象到全局变量，用于后续上传
selectedFile = file;
// 调用回调函数
if (_onFileSelected) {
_onFileSelected(file);
}
}
console.log(
'文件已选择:',
file.name,
'大小:',
file.size,
'字节',
);
}
console.log('文件已选择:', file.name, '大小:', file.size, '字节');
}
};
input.click();
}
}, '选择文件'),
});
input.click();
},
},
'选择文件',
),
},
rules: z.string().min(1, {
message: `${$t('common.pleaseSelect')}${$t('abp.OneNETManagement.DeviceThingModelFileName')}`,
@ -299,37 +392,54 @@ export const editProductFormSchemaEdit: any = computed(() => [
componentProps: {
placeholder: '请选择文件',
readonly: true,
addonAfter: h('button', {
type: 'button',
style: 'border: none; background: #1890ff; color: white; padding: 4px 8px; border-radius: 4px; cursor: pointer;',
onClick: () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json,.xlsx,.xls';
input.onchange = (e: any) => {
const file = e.target.files[0];
if (file) {
// 只显示文件名，不上传
const currentInput = document.querySelector('input[placeholder="请选择文件"]') as HTMLInputElement;
if (currentInput) {
currentInput.value = file.name;
// 触发change事件
currentInput.dispatchEvent(new Event('input', { bubbles: true }));
currentInput.dispatchEvent(new Event('change', { bubbles: true }));
// 存储文件对象到全局变量，用于后续上传
selectedFile = file;
// 调用回调函数
if (_onFileSelected) {
_onFileSelected(file);
addonAfter: h(
'button',
{
type: 'button',
style:
'border: none; background: #1890ff; color: white; padding: 4px 8px; border-radius: 4px; cursor: pointer;',
onClick: () => {
const input = document.createElement('input');
input.type = 'file';
input.accept = '.json,.xlsx,.xls';
input.addEventListener('change', (e: any) => {
const file = e.target.files[0];
if (file) {
// 只显示文件名，不上传
const currentInput = document.querySelector(
'input[placeholder="请选择文件"]',
) as HTMLInputElement;
if (currentInput) {
currentInput.value = file.name;
// 触发change事件
currentInput.dispatchEvent(
new Event('input', { bubbles: true }),
);
currentInput.dispatchEvent(
new Event('change', { bubbles: true }),
);
// 存储文件对象到全局变量，用于后续上传
selectedFile = file;
// 调用回调函数
if (_onFileSelected) {
_onFileSelected(file);
}
}
console.log(
'文件已选择:',
file.name,
'大小:',
file.size,
'字节',
);
}
console.log('文件已选择:', file.name, '大小:', file.size, '字节');
}
};
input.click();
}
}, '选择文件'),
});
input.click();
},
},
'选择文件',
),
},
rules: z.string().min(1, {
message: `${$t('common.pleaseSelect')}${$t('abp.OneNETManagement.DeviceThingModelFileName')}`,