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

根据物模型ID将解析脚本更新

Browse Source
This commit is contained in:
ChenYi 2025-12-19 16:54:57 +08:00
parent 9d521d74a5
commit cfbe8f4df0
3 changed files with 232 additions and 125 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
apps/web-antd/src/components/table-action/table-action.vue
View File

@ -171,11 +171,13 @@ const handleMenuClick = (e: any) => {
<Icon :icon="action.popConfirm.icon" />
</template>
<div
:class="
:class="[
action.disabled === true
? 'cursor-not-allowed text-gray-300'
: ''
"
: '',
action.class,
]"
:style="action.style"
>
<Icon v-if="action.icon" :icon="action.icon" />
<span class="ml-1">{{ action.text }}</span>
@ -184,11 +186,13 @@ const handleMenuClick = (e: any) => {
</template>
<template v-else>
<div
:class="
:class="[
action.disabled === true
? 'cursor-not-allowed text-gray-300'
: ''
"
: '',
action.class,
]"
:style="action.style"
>
<Icon v-if="action.icon" :icon="action.icon" />
{{ action.label }}

279
apps/web-antd/src/views/thingmodelinfo/deviceThingModelManagement/index.vue
View File

@ -7,21 +7,25 @@ import { useRoute } from 'vue-router';
import { Page, useVbenModal, z } from '@vben/common-ui';
import { message as Message, Tag } from 'ant-design-vue';
import { Button, message as Message, Tag } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { useVbenVxeGrid } from '#/adapter/vxe-table';
import {
postDeviceThingModelManagementBuildAnalysisScriptAsync,
postDeviceThingModelManagementBuildAnalysisScriptByIdAsync,
postDeviceThingModelManagementCreateAsync,
postDeviceThingModelManagementDeleteAsync,
postDeviceThingModelManagementMessageAnalysisTestAsync,
postDeviceThingModelManagementPageAsync,
postDeviceThingModelManagementUpdateAnalysisScriptByIdAsync,
postDeviceThingModelManagementUpdateAsync,
} from '#/api-client';
import { TableAction } from '#/components/table-action';
import { $t } from '#/locales';
import DeviceThingModelCommandModal from './DeviceThingModelCommandModal.vue';
import DeviceThingModelPropertyModal from './DeviceThingModelPropertyModal.vue';
import {
addDeviceThingModelFormSchema,
editDeviceThingModelFormSchema,
@ -29,9 +33,6 @@ import {
tableSchema,
} from './schema';
import DeviceThingModelPropertyModal from './DeviceThingModelPropertyModal.vue';
import DeviceThingModelCommandModal from './DeviceThingModelCommandModal.vue';
defineOptions({
name: 'DeviceThingModelManagement',
});
@ -55,25 +56,21 @@ const formOptions: VbenFormProps = {
submitOnChange: false,
handleValuesChange: async (values, changedFields) => {
// 平台变化时，清空产品并更新状态
if (changedFields.includes('ioTPlatform')) {
if (values.ioTPlatform) {
ioTPlatform.value = String(values.ioTPlatform);
if (gridApi?.formApi) {
await gridApi.formApi.setValues({
ioTPlatformProductId: undefined,
});
}
productId.value = '';
if (changedFields.includes('ioTPlatform') && values.ioTPlatform) {
ioTPlatform.value = String(values.ioTPlatform);
if (gridApi?.formApi) {
await gridApi.formApi.setValues({
ioTPlatformProductId: undefined,
});
}
productId.value = '';
}
// 产品变化时，更新 productId 并刷新列表
if (changedFields.includes('ioTPlatformProductId')) {
if (values.ioTPlatformProductId) {
productId.value = String(values.ioTPlatformProductId);
} else {
productId.value = '';
}
productId.value = values.ioTPlatformProductId
? String(values.ioTPlatformProductId)
: '';
setTimeout(async () => {
if (gridApi && gridApi.reload) {
@ -121,9 +118,7 @@ const gridOptions: VxeGridProps<any> = {
// 始终以最新的表单值为准，确保搜索关键字等字段不会丢失
const latestFormValues =
formValues ||
(gridApi && gridApi.formApi
? await gridApi.formApi.getValues()
: {});
(gridApi && gridApi.formApi ? await gridApi.formApi.getValues() : {});
// 优先使用表单值，如果没有则使用响应式变量
const currentPlatform =
@ -266,21 +261,25 @@ const [TestScriptForm, testScriptFormApi] = useVbenForm({
component: 'Input',
fieldName: 'functionName',
label: '函数名称',
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
placeholder: $t('common.pleaseInput') + '函数名称',
placeholder: `${$t('common.pleaseInput')}函数名称`,
},
},
{
component: 'Textarea',
fieldName: 'functionCode',
label: '函数代码',
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
rows: 8,
placeholder: $t('common.pleaseInput') + '函数代码',
placeholder: `${$t('common.pleaseInput')}函数代码`,
},
},
{
@ -289,7 +288,8 @@ const [TestScriptForm, testScriptFormApi] = useVbenForm({
label: '函数参数（JSON格式）',
componentProps: {
rows: 6,
placeholder: '请输入函数参数，JSON格式，例如：{"key1": "value1", "key2": "value2"}',
placeholder:
'请输入函数参数，JSON格式，例如：{"key1": "value1", "key2": "value2"}',
},
},
],
@ -301,6 +301,10 @@ const [TestScriptForm, testScriptFormApi] = useVbenForm({
// 测试结果
const testResult = ref<string>('');
// 当前测试关联的设备端物模型信息（可选）
const testDeviceThingModelId = ref<string>('');
const testDeviceModelName = ref<string>('');
// 新增 / 编辑提交
async function submit() {
const isEdit = !!editRow.value.id;
@ -334,15 +338,11 @@ async function submit() {
await gridApi.reload(latestValues);
}
} else {
Message.error(
isEdit ? $t('common.editFail') : $t('common.addFail'),
);
Message.error(isEdit ? $t('common.editFail') : $t('common.addFail'));
}
} catch (error) {
console.error('提交设备端物模型失败:', error);
Message.error(
isEdit ? $t('common.editFail') : $t('common.addFail'),
);
Message.error(isEdit ? $t('common.editFail') : $t('common.addFail'));
}
}
@ -379,7 +379,15 @@ const openAddModal = async () => {
};
// 打开函数脚本测试弹窗
function openTestScriptModal() {
function openTestScriptModal(record?: any) {
// 工具栏点击：不关心物模型Id/名称
if (record && record.id) {
testDeviceThingModelId.value = record.id;
testDeviceModelName.value = record.deviceModelName || '';
} else {
testDeviceThingModelId.value = '';
testDeviceModelName.value = '';
}
testScriptFormApi.resetForm();
testResult.value = '';
testScriptModalApi.open();
@ -392,6 +400,12 @@ async function buildAndOpenTestScript(record: any) {
return;
}
// 如果解析启用为 true，禁止构建函数
if (record.functionAnalysisFlag === true) {
Message.warning('解析启用状态下不允许构建函数');
return;
}
try {
const resp =
await postDeviceThingModelManagementBuildAnalysisScriptByIdAsync({
@ -400,8 +414,8 @@ async function buildAndOpenTestScript(record: any) {
console.log('函数构建接口返回:', resp.data);
// 先通过统一的方法打开弹窗（与工具栏按钮保持一致）
openTestScriptModal();
// 先通过统一的方法打开弹窗（与工具栏按钮保持一致，并携带物模型信息）
openTestScriptModal(record);
// 等待弹窗和表单渲染完成后再回填数据
await nextTick();
@ -418,19 +432,51 @@ async function buildAndOpenTestScript(record: any) {
}
}
// 解析启用 / 禁用解析
async function enableAnalysisScript(record: any) {
if (!record.id) {
Message.warning('设备端物模型ID不存在');
return;
}
try {
const isEnabled = record.functionAnalysisFlag === true;
const resp =
await postDeviceThingModelManagementUpdateAnalysisScriptByIdAsync({
query: {
id: record.id,
},
});
if (resp.data) {
Message.success(isEnabled ? '禁用解析成功' : '启用解析成功');
// 刷新列表，确保状态立即更新
if (gridApi && gridApi.reload) {
await gridApi.reload();
}
} else {
Message.error(isEnabled ? '禁用解析失败' : '启用解析失败');
}
} catch (error) {
console.error('解析启用失败:', error);
Message.error('解析状态更新失败');
}
}
// 提交函数脚本测试
async function submitTestScript() {
const { valid } = await testScriptFormApi.validate();
if (!valid) return;
const formValues = await testScriptFormApi.getValues();
// 解析 parameters JSON 字符串
let parameters: any = null;
if (formValues.parameters) {
try {
parameters = JSON.parse(formValues.parameters);
} catch (error) {
} catch {
Message.error('函数参数格式错误，请输入有效的JSON格式');
return;
}
@ -446,7 +492,7 @@ async function submitTestScript() {
const resp = await postDeviceThingModelManagementMessageAnalysisTestAsync({
body: fetchParams,
});
// 将结果格式化为JSON字符串显示
testResult.value = JSON.stringify(resp.data || {}, null, 2);
Message.success('测试执行成功');
@ -457,6 +503,38 @@ async function submitTestScript() {
}
}
// 更新函数脚本到设备端物模型
async function updateFunctionScript() {
if (!testDeviceThingModelId.value) {
Message.warning('当前未关联具体设备端物模型，无法更新函数');
return;
}
const { valid } = await testScriptFormApi.validate();
if (!valid) return;
const formValues = await testScriptFormApi.getValues();
try {
const resp = await postDeviceThingModelManagementBuildAnalysisScriptAsync({
body: {
id: testDeviceThingModelId.value,
scriptName: formValues.functionName,
functionScript: formValues.functionCode,
},
});
if (resp.data) {
Message.success('更新函数成功');
} else {
Message.error('更新函数失败');
}
} catch (error) {
console.error('更新函数失败:', error);
Message.error('更新函数失败');
}
}
// 删除
async function onDel(record: any) {
try {
@ -514,56 +592,49 @@ onMounted(async () => {
<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'],
},
{
label: '函数脚本测试',
type: 'default',
icon: 'ant-design:code-outlined',
onClick: openTestScriptModal,
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'],
},
{
label: '函数脚本测试',
type: 'default',
icon: 'ant-design:code-outlined',
onClick: openTestScriptModal,
auth: ['AbpIdentity.Users.Create'],
},
]" />
</template>
<!-- 解析启用列 -->
<template #functionAnalysisFlag="{ row }">
<component
:is="
h(
Tag,
{ color: row.functionAnalysisFlag ? 'green' : 'red' },
() => (row.functionAnalysisFlag ? '是' : '否'),
)
"
/>
<component :is="h(Tag, { color: row.functionAnalysisFlag ? 'green' : 'red' }, () =>
row.functionAnalysisFlag ? '是' : '否',
)
" />
</template>
<template #action="{ row }">
<TableAction
:actions="[
{
label: $t('common.edit'),
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
onClick: onEdit.bind(null, row),
},
{
label: '属性管理',
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
onClick: openPropertyModal.bind(null, row),
},
<TableAction :actions="[
{
label: $t('common.edit'),
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
onClick: onEdit.bind(null, row),
},
{
label: '属性管理',
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
onClick: openPropertyModal.bind(null, row),
},
]" :drop-down-actions="[
{
label: '指令管理',
type: 'link',
@ -571,27 +642,44 @@ onMounted(async () => {
auth: ['AbpIdentity.Users.Update'],
onClick: openCommandModal.bind(null, row),
},
{
label: row.functionAnalysisFlag ? '禁用解析' : '启用解析',
type: 'input',
size: 'small',
auth: ['AbpIdentity.Users.Update'],
style: row.functionAnalysisFlag
? { color: '#ff4d4f' } // 红色：禁用解析
: { color: '#52c41a' }, // 绿色：启用解析
popConfirm: {
title: row.functionAnalysisFlag
? '确定要禁用该设备端物模型的解析吗？'
: '确定要启用该设备端物模型的解析吗？',
confirm: enableAnalysisScript.bind(null, row),
},
},
{
label: '函数构建',
type: 'link',
size: 'small',
icon: 'ant-design:code-outlined',
auth: ['AbpIdentity.Users.Update'],
onClick: buildAndOpenTestScript.bind(null, row),
disabled: row.functionAnalysisFlag === true,
popConfirm: {
title: '确定要为该设备端物模型执行函数构建吗？',
confirm: buildAndOpenTestScript.bind(null, row),
},
},
{
label: $t('common.delete'),
icon: 'ant-design:delete-outlined',
type: 'link',
size: 'small',
auth: ['AbpIdentity.Users.Delete'],
style: { color: '#ff4d4f' },
popConfirm: {
title: $t('common.askConfirmDelete'),
confirm: onDel.bind(null, row),
},
},
]"
/>
]" />
</template>
</Grid>
@ -601,22 +689,23 @@ onMounted(async () => {
<!-- 指令管理弹窗（独立组件） -->
<CommandModal />
<ThingModelModal
:title="editRow.id ? $t('common.edit') : $t('common.add')"
class="w-[800px]"
>
<ThingModelModal :title="editRow.id ? $t('common.edit') : $t('common.add')" class="w-[800px]">
<component :is="editRow.id ? EditForm : AddForm" />
</ThingModelModal>
<!-- 函数脚本测试弹窗 -->
<TestScriptModal title="函数脚本测试" class="w-[900px]">
<div v-if="testDeviceModelName" class="mb-2 flex items-center justify-between text-base font-semibold">
<span>设备端物模型：{{ testDeviceModelName }}</span>
<Button v-if="testDeviceThingModelId" type="primary" @click="updateFunctionScript">
更新函数
</Button>
</div>
<TestScriptForm />
<div v-if="testResult" class="mt-4">
<div class="mb-2 font-semibold">测试结果：</div>
<pre class="bg-gray-50 p-4 rounded border overflow-auto max-h-96 text-sm">{{ testResult }}</pre>
<pre class="max-h-96 overflow-auto rounded border bg-gray-50 p-4 text-sm">{{ testResult }}</pre>
</div>
</TestScriptModal>
</Page>
</template>

62
apps/web-antd/src/views/thingmodelinfo/deviceThingModelManagement/schema.ts
View File

@ -116,7 +116,7 @@ export const tableSchema = computed(() => [
minWidth: 120,
showOverflow: 'tooltip',
formatter: ({ cellValue }: { cellValue: any }) => {
const map: Record<string | number, string> = {
const map: Record<number | string, string> = {
1: 'CTWing',
2: 'OneNET',
};
@ -152,7 +152,7 @@ export const tableSchema = computed(() => [
{
field: 'action',
title: $t('common.action'),
width: 360,
width: 160,
fixed: 'right',
slots: { default: 'action' },
},
@ -164,18 +164,22 @@ export const addDeviceThingModelFormSchema = computed(() => [
component: 'Input',
fieldName: 'deviceModelName',
label: '设备端物模型名称',
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
placeholder: $t('common.pleaseInput') + '设备端物模型名称',
placeholder: `${$t('common.pleaseInput')}设备端物模型名称`,
},
},
{
component: 'ApiSelect',
fieldName: 'ioTPlatform',
label: $t('abp.deviceInfos.ioTPlatform'),
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
api: getCommonGetSelectList,
params: {
@ -208,8 +212,10 @@ export const addDeviceThingModelFormSchema = computed(() => [
component: 'ApiSelect',
fieldName: 'ioTPlatformProductId',
label: $t('common.BelongingProductName'),
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: (formValues: any) => {
const platform = formValues?.ioTPlatform;
@ -254,10 +260,12 @@ export const addDeviceThingModelFormSchema = computed(() => [
component: 'Input',
fieldName: 'scriptName',
label: '脚本函数名称',
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
placeholder: $t('common.pleaseInput') + '脚本函数名称',
placeholder: `${$t('common.pleaseInput')}脚本函数名称`,
},
},
{
@ -277,18 +285,22 @@ export const editDeviceThingModelFormSchema = computed(() => [
component: 'Input',
fieldName: 'deviceModelName',
label: '设备端物模型名称',
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
placeholder: $t('common.pleaseInput') + '设备端物模型名称',
placeholder: `${$t('common.pleaseInput')}设备端物模型名称`,
},
},
{
component: 'ApiSelect',
fieldName: 'ioTPlatform',
label: $t('abp.deviceInfos.ioTPlatform'),
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
api: getCommonGetSelectList,
params: {
@ -322,8 +334,10 @@ export const editDeviceThingModelFormSchema = computed(() => [
component: 'ApiSelect',
fieldName: 'ioTPlatformProductId',
label: $t('common.BelongingProductName'),
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: (formValues: any) => {
const platform = formValues?.ioTPlatform;
@ -369,10 +383,12 @@ export const editDeviceThingModelFormSchema = computed(() => [
component: 'Input',
fieldName: 'scriptName',
label: '脚本函数名称',
rules: z
.preprocess((v) => (v == null ? '' : v), z.string().min(1, $t('common.required'))),
rules: z.preprocess(
(v) => (v == null ? '' : v),
z.string().min(1, $t('common.required')),
),
componentProps: {
placeholder: $t('common.pleaseInput') + '脚本函数名称',
placeholder: `${$t('common.pleaseInput')}脚本函数名称`,
},
},
{
@ -385,5 +401,3 @@ export const editDeviceThingModelFormSchema = computed(() => [
},
},
]);