oneos-v5/frontend
1
0
Fork 0
Code Issues Pull Requests Actions 3 Packages Projects Releases Wiki Activity

fix: iot

Browse Source
This commit is contained in:
xingyu4j
2025-10-13 10:17:19 +08:00
parent 5f88a54d60
commit 4c4cd57ef0
27 changed files with 857 additions and 818 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/web-antd/src/views/iot/thingmodel/modules/ThingModelEvent.vue
View File

@@ -1,5 +1,9 @@
<!-- 产品的物模型表单（event 项） -->
<script lang="ts" setup>
import type { Ref } from 'vue';
import { watch } from 'vue';
import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core';

55
apps/web-antd/src/views/iot/thingmodel/modules/ThingModelForm.vue
View File

@@ -2,18 +2,19 @@
<script lang="ts" setup>
import type { Ref } from 'vue';
import type { ProductVO } from '#/api/iot/product/product';
import type { IotProductApi } from '#/api/iot/product/product';
import type { ThingModelData } from '#/api/iot/thingmodel';
import { inject, ref } from 'vue';
import { useI18n } from 'vue-i18n';
import { DICT_TYPE, getIntDictOptions } from '@vben/constants';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { $t } from '@vben/locales';
import { cloneDeep } from '@vben/utils';
import { message } from 'ant-design-vue';
import { cloneDeep } from 'lodash-es';
import { ThingModelApi, ThingModelFormRules } from '#/api/iot/thingmodel';
import { createThingModel, updateThingModel } from '#/api/iot/thingmodel';
import {
IOT_PROVIDE_KEY,
IoTDataSpecsDataTypeEnum,
@@ -29,9 +30,7 @@ defineOptions({ name: 'IoTThingModelForm' });
/** 提交表单 */
const emit = defineEmits(['success']);
const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
const { t } = useI18n(); // 国际化
const product = inject<Ref<IotProductApi.Product>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品信息
const dialogVisible = ref(false); // 弹窗的是否展示
const dialogTitle = ref(''); // 弹窗的标题
@@ -55,13 +54,13 @@ const formRef = ref(); // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number) => {
dialogVisible.value = true;
dialogTitle.value = t(`action.${type}`);
dialogTitle.value = $t(`action.${type}`);
formType.value = type;
resetForm();
if (id) {
formLoading.value = true;
try {
formData.value = await ThingModelApi.getThingModel(id);
formData.value = await getThingModel(id);
// 情况一：属性初始化
if (
!formData.value.property ||
@@ -96,7 +95,7 @@ const open = async (type: string, id?: number) => {
};
defineExpose({ open, close: () => (dialogVisible.value = false) });
const submitForm = async () => {
async function submitForm() {
await formRef.value.validate();
formLoading.value = true;
try {
@@ -105,23 +104,20 @@ const submitForm = async () => {
data.productId = product!.value.id;
data.productKey = product!.value.productKey;
fillExtraAttributes(data);
if (formType.value === 'create') {
await ThingModelApi.createThingModel(data);
message.success({ content: t('common.createSuccess') });
} else {
await ThingModelApi.updateThingModel(data);
message.success({ content: t('common.updateSuccess') });
}
await (formType.value === 'create'
? createThingModel(data)
: updateThingModel(data));
message.success($t('ui.actionMessage.operationSuccess'));
// 关闭弹窗
dialogVisible.value = false;
emit('success');
} finally {
formLoading.value = false;
}
};
}
/** 填写额外的属性（处理不同类型的情况） */
const fillExtraAttributes = (data: any) => {
function fillExtraAttributes(data: any) {
// 属性
if (data.type === IoTThingModelTypeEnum.PROPERTY) {
removeDataSpecs(data.property);
@@ -149,22 +145,22 @@ const fillExtraAttributes = (data: any) => {
delete data.property;
delete data.service;
}
};
}
/** 处理 dataSpecs 为空的情况 */
const removeDataSpecs = (val: any) => {
function removeDataSpecs(val: any) {
if (!val.dataSpecs || Object.keys(val.dataSpecs).length === 0) {
delete val.dataSpecs;
}
if (!val.dataSpecsList || val.dataSpecsList.length === 0) {
delete val.dataSpecsList;
}
};
}
/** 重置表单 */
const resetForm = () => {
function resetForm() {
formData.value = {
type: IoTThingModelTypeEnum.PROPERTY,
type: IoTThingModelTypeEnum.PROPERTY.toString(),
dataType: IoTDataSpecsDataTypeEnum.INT,
property: {
dataType: IoTDataSpecsDataTypeEnum.INT,
@@ -174,9 +170,9 @@ const resetForm = () => {
},
service: {},
event: {},
} as ThingModelData;
};
formRef.value?.resetFields();
};
}
</script>
<template>
@@ -192,7 +188,10 @@ const resetForm = () => {
<a-form-item label="功能类型" name="type">
<a-radio-group v-model:value="formData.type">
<a-radio-button
v-for="dict in getIntDictOptions(DICT_TYPE.IOT_THING_MODEL_TYPE)"
v-for="dict in getDictOptions(
DICT_TYPE.IOT_THING_MODEL_TYPE,
'number',
)"
:key="dict.value"
:value="dict.value"
>

19
apps/web-antd/src/views/iot/thingmodel/modules/ThingModelTSL.vue
View File

@@ -1,9 +1,14 @@
<script setup lang="ts">
import type { Ref } from 'vue';
import type { ProductVO } from '#/api/iot/product/product';
import { inject, onMounted, ref } from 'vue';
import hljs from 'highlight.js'; // 导入代码高亮文件
import json from 'highlight.js/lib/languages/json';
import { ProductVO } from '#/api/iot/product/product';
import { ThingModelApi } from '#/api/iot/thingmodel';
import { getThingModelListByProductId } from '#/api/iot/thingmodel';
import { IOT_PROVIDE_KEY } from '#/views/iot/utils/constants';
import 'highlight.js/styles/github.css'; // 导入代码高亮样式
@@ -16,18 +21,18 @@ const product = inject<Ref<ProductVO>>(IOT_PROVIDE_KEY.PRODUCT); // 注入产品
const viewMode = ref('code'); // 查看模式：code-代码视图，editor-编辑器视图
/** 打开弹窗 */
const open = () => {
function open() {
dialogVisible.value = true;
};
}
defineExpose({ open });
/** 获取 TSL */
const thingModelTSL = ref({});
const getTsl = async () => {
thingModelTSL.value = await ThingModelApi.getThingModelTSLByProductId(
async function getTsl() {
thingModelTSL.value = await getThingModelListByProductId(
product?.value?.id || 0,
);
};
}
/** 初始化 */
onMounted(async () => {

31
apps/web-antd/src/views/iot/thingmodel/modules/components/DataDefinition.vue
View File

@@ -1,5 +1,6 @@
<script lang="ts" setup>
import { ThingModelData } from '#/api/iot/thingmodel';
import type { ThingModelData } from '#/api/iot/thingmodel';
import {
getEventTypeLabel,
getThingModelServiceCallTypeLabel,
@@ -15,7 +16,7 @@ defineProps<{ data: ThingModelData }>();
<template>
<!-- 属性 -->
<template v-if="data.type === IoTThingModelTypeEnum.PROPERTY">
<template v-if="data.type === IoTThingModelTypeEnum.PROPERTY.toString()">
<!-- 非列表型：数值 -->
<div
v-if="
@@ -23,16 +24,16 @@ defineProps<{ data: ThingModelData }>();
IoTDataSpecsDataTypeEnum.INT,
IoTDataSpecsDataTypeEnum.DOUBLE,
IoTDataSpecsDataTypeEnum.FLOAT,
].includes(data.property.dataType)
].includes(data.property?.dataType as any)
"
>
取值范围：{{
`${data.property.dataSpecs.min}~${data.property.dataSpecs.max}`
`${data.property?.dataSpecs.min}~${data.property?.dataSpecs.max}`
}}
</div>
<!-- 非列表型：文本 -->
<div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property.dataType">
数据长度：{{ data.property.dataSpecs.length }}
<div v-if="IoTDataSpecsDataTypeEnum.TEXT === data.property?.dataType">
数据长度：{{ data.property?.dataSpecs.length }}
</div>
<!-- 列表型: 数组、结构、时间（特殊） -->
<div
@@ -41,7 +42,7 @@ defineProps<{ data: ThingModelData }>();
IoTDataSpecsDataTypeEnum.ARRAY,
IoTDataSpecsDataTypeEnum.STRUCT,
IoTDataSpecsDataTypeEnum.DATE,
].includes(data.property.dataType)
].includes(data.property?.dataType as any)
"
>
-
@@ -50,29 +51,31 @@ defineProps<{ data: ThingModelData }>();
<div
v-if="
[IoTDataSpecsDataTypeEnum.BOOL, IoTDataSpecsDataTypeEnum.ENUM].includes(
data.property.dataType,
data.property?.dataType as any,
)
"
>
<div>
{{
IoTDataSpecsDataTypeEnum.BOOL === data.property.dataType
IoTDataSpecsDataTypeEnum.BOOL === data.property?.dataType
? '布尔值'
: '枚举值'
}}：
</div>
<div v-for="item in data.property.dataSpecsList" :key="item.value">
<div v-for="item in data.property?.dataSpecsList" :key="item.value">
{{ `${item.name}-${item.value}` }}
</div>
</div>
</template>
<!-- 服务 -->
<div v-if="data.type === IoTThingModelTypeEnum.SERVICE">
调用方式：{{ getThingModelServiceCallTypeLabel(data.service!.callType) }}
<div v-if="data.type === IoTThingModelTypeEnum.SERVICE.toString()">
调用方式：{{
getThingModelServiceCallTypeLabel(data.service?.callType as any)
}}
</div>
<!-- 事件 -->
<div v-if="data.type === IoTThingModelTypeEnum.EVENT">
事件类型：{{ getEventTypeLabel(data.event!.type) }}
<div v-if="data.type === IoTThingModelTypeEnum.EVENT.toString()">
事件类型：{{ getEventTypeLabel(data.event?.type as any) }}
</div>
</template>

28
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelArrayDataSpecs.vue
View File

@@ -1,6 +1,9 @@
<!-- dataType：array 数组类型 -->
<script lang="ts" setup>
import type { Ref } from 'vue';
import { useVModel } from '@vueuse/core';
import { Form, Input, Radio } from 'ant-design-vue';
import {
getDataTypeOptions,
@@ -17,20 +20,19 @@ const emits = defineEmits(['update:modelValue']);
const dataSpecs = useVModel(props, 'modelValue', emits) as Ref<any>;
/** 元素类型改变时间。当值为 struct 时，对 dataSpecs 中的 dataSpecsList 进行初始化 */
const handleChange = (val: string) => {
function handleChange(val: any) {
if (val !== IoTDataSpecsDataTypeEnum.STRUCT) {
return;
}
dataSpecs.value.dataSpecsList = [];
};
}
</script>
<template>
<el-form-item label="元素类型" prop="property.dataSpecs.childDataType">
<el-radio-group v-model="dataSpecs.childDataType" @change="handleChange">
<Form.Item label="元素类型" prop="property.dataSpecs.childDataType">
<Radio.Group v-model="dataSpecs.childDataType" @change="handleChange">
<template v-for="item in getDataTypeOptions()" :key="item.value">
<el-radio
<Radio
v-if="
!(
[
@@ -44,18 +46,16 @@ const handleChange = (val: string) => {
class="w-1/3"
>
{{ `${item.value}(${item.label})` }}
</el-radio>
</Radio>
</template>
</el-radio-group>
</el-form-item>
<el-form-item label="元素个数" prop="property.dataSpecs.size">
<el-input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
</el-form-item>
</Radio.Group>
</Form.Item>
<Form.Item label="元素个数" prop="property.dataSpecs.size">
<Input v-model="dataSpecs.size" placeholder="请输入数组中的元素个数" />
</Form.Item>
<!-- Struct 型配置-->
<ThingModelStructDataSpecs
v-if="dataSpecs.childDataType === IoTDataSpecsDataTypeEnum.STRUCT"
v-model="dataSpecs.dataSpecsList"
/>
</template>
<style lang="scss" scoped></style>

59
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelEnumDataSpecs.vue
View File

@@ -1,10 +1,14 @@
<!-- dataType：enum 数组类型 -->
<script lang="ts" setup>
import type { Ref } from 'vue';
import type { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import { Button, Form, Input, message } from 'ant-design-vue';
import { DataSpecsEnumOrBoolData } from '#/api/iot/thingmodel';
import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
/** 枚举型的 dataSpecs 配置组件 */
@@ -17,30 +21,30 @@ const dataSpecsList = useVModel(props, 'modelValue', emits) as Ref<
>;
/** 添加枚举项 */
const addEnum = () => {
function addEnum() {
dataSpecsList.value.push({
dataType: IoTDataSpecsDataTypeEnum.ENUM,
name: '', // 枚举项的名称
value: undefined, // 枚举值
value: '', // 枚举值
});
};
}
/** 删除枚举项 */
const deleteEnum = (index: number) => {
function deleteEnum(index: number) {
if (dataSpecsList.value.length === 1) {
message.warning('至少需要一个枚举项');
return;
}
dataSpecsList.value.splice(index, 1);
};
}
/** 校验枚举值 */
const validateEnumValue = (_: any, value: any, callback: any) => {
function validateEnumValue(_: any, value: any, callback: any) {
if (isEmpty(value)) {
callback(new Error('枚举值不能为空'));
return;
}
if (isNaN(Number(value))) {
if (Number.isNaN(Number(value))) {
callback(new Error('枚举值必须是数字'));
return;
}
@@ -51,10 +55,10 @@ const validateEnumValue = (_: any, value: any, callback: any) => {
return;
}
callback();
};
}
/** 校验枚举描述 */
const validateEnumName = (_: any, value: string, callback: any) => {
function validateEnumName(_: any, value: string, callback: any) {
if (isEmpty(value)) {
callback(new Error('枚举描述不能为空'));
return;
@@ -75,10 +79,10 @@ const validateEnumName = (_: any, value: string, callback: any) => {
return;
}
callback();
};
}
/** 校验整个枚举列表 */
const validateEnumList = (_: any, __: any, callback: any) => {
function validateEnumList(_: any, __: any, callback: any) {
if (isEmpty(dataSpecsList.value)) {
callback(new Error('请至少添加一个枚举项'));
return;
@@ -95,7 +99,7 @@ const validateEnumList = (_: any, __: any, callback: any) => {
// 检查枚举值是否都是数字
const hasInvalidNumber = dataSpecsList.value.some((item) =>
isNaN(Number(item.value)),
Number.isNaN(Number(item.value)),
);
if (hasInvalidNumber) {
callback(new Error('存在非数字的枚举值'));
@@ -110,11 +114,11 @@ const validateEnumList = (_: any, __: any, callback: any) => {
return;
}
callback();
};
}
</script>
<template>
<el-form-item
<Form.Item
:rules="[
{ required: true, validator: validateEnumList, trigger: 'change' },
]"
@@ -130,7 +134,7 @@ const validateEnumList = (_: any, __: any, callback: any) => {
:key="index"
class="mb-5px flex items-center justify-between"
>
<el-form-item
<Form.Item
:prop="`property.dataSpecsList[${index}].value`"
:rules="[
{ required: true, message: '枚举值不能为空' },
@@ -138,10 +142,10 @@ const validateEnumList = (_: any, __: any, callback: any) => {
]"
class="mb-0 flex-1"
>
<el-input v-model="item.value" placeholder="请输入枚举值,如'0'" />
</el-form-item>
<Input v-model="item.value" placeholder="请输入枚举值,如'0'" />
</Form.Item>
<span class="mx-2">~</span>
<el-form-item
<Form.Item
:prop="`property.dataSpecsList[${index}].name`"
:rules="[
{ required: true, message: '枚举描述不能为空' },
@@ -149,20 +153,15 @@ const validateEnumList = (_: any, __: any, callback: any) => {
]"
class="mb-0 flex-1"
>
<el-input v-model="item.name" placeholder="对该枚举项的描述" />
</el-form-item>
<el-button
class="ml-10px"
link
type="primary"
@click="deleteEnum(index)"
>
<Input v-model="item.name" placeholder="对该枚举项的描述" />
</Form.Item>
<Button class="ml-10px" link type="primary" @click="deleteEnum(index)">
删除
</el-button>
</Button>
</div>
<el-button link type="primary" @click="addEnum">+添加枚举项</el-button>
<Button link type="primary" @click="addEnum">+添加枚举项</Button>
</div>
</el-form-item>
</Form.Item>
</template>
<style lang="scss" scoped>

24
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelNumberDataSpecs.vue
View File

@@ -1,11 +1,14 @@
<!-- dataType：number 数组类型 -->
<script lang="ts" setup>
import { DICT_TYPE, getStrDictOptions } from '@vben/constants';
import type { Ref } from 'vue';
import type { DataSpecsNumberData } from '#/api/iot/thingmodel';
import { DICT_TYPE } from '@vben/constants';
import { getDictOptions } from '@vben/hooks';
import { useVModel } from '@vueuse/core';
import { DataSpecsNumberData } from '#/api/iot/thingmodel';
/** 数值型的 dataSpecs 配置组件 */
defineOptions({ name: 'ThingModelNumberDataSpecs' });
@@ -28,11 +31,11 @@ const unitChange = (UnitSpecs: string) => {
const validateMin = (_: any, __: any, callback: any) => {
const min = Number(dataSpecs.value.min);
const max = Number(dataSpecs.value.max);
if (isNaN(min)) {
if (Number.isNaN(min)) {
callback(new Error('请输入有效的数值'));
return;
}
if (max !== undefined && !isNaN(max) && min >= max) {
if (max !== undefined && !Number.isNaN(max) && min >= max) {
callback(new Error('最小值必须小于最大值'));
return;
}
@@ -44,11 +47,11 @@ const validateMin = (_: any, __: any, callback: any) => {
const validateMax = (_: any, __: any, callback: any) => {
const min = Number(dataSpecs.value.min);
const max = Number(dataSpecs.value.max);
if (isNaN(max)) {
if (Number.isNaN(max)) {
callback(new Error('请输入有效的数值'));
return;
}
if (min !== undefined && !isNaN(min) && max <= min) {
if (min !== undefined && !Number.isNaN(min) && max <= min) {
callback(new Error('最大值必须大于最小值'));
return;
}
@@ -59,7 +62,7 @@ const validateMax = (_: any, __: any, callback: any) => {
/** 校验步长 */
const validateStep = (_: any, __: any, callback: any) => {
const step = Number(dataSpecs.value.step);
if (isNaN(step)) {
if (Number.isNaN(step)) {
callback(new Error('请输入有效的数值'));
return;
}
@@ -69,7 +72,7 @@ const validateStep = (_: any, __: any, callback: any) => {
}
const min = Number(dataSpecs.value.min);
const max = Number(dataSpecs.value.max);
if (!isNaN(min) && !isNaN(max) && step > max - min) {
if (!Number.isNaN(min) && !Number.isNaN(max) && step > max - min) {
callback(new Error('步长不能大于最大值和最小值的差值'));
return;
}
@@ -129,8 +132,9 @@ const validateStep = (_: any, __: any, callback: any) => {
@change="unitChange"
>
<el-option
v-for="(item, index) in getStrDictOptions(
v-for="(item, index) in getDictOptions(
DICT_TYPE.IOT_THING_MODEL_UNIT,
'string',
)"
:key="index"
:label="`${item.label}-${item.value}`"

78
apps/web-antd/src/views/iot/thingmodel/modules/dataSpecs/ThingModelStructDataSpecs.vue
View File

@@ -1,10 +1,14 @@
<!-- dataType：struct 数组类型 -->
<script lang="ts" setup>
import type { Ref } from 'vue';
import { nextTick, onMounted, ref, unref } from 'vue';
import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import { Button, Divider, Form, Input, Modal } from 'ant-design-vue';
import { ThingModelFormRules } from '#/api/iot/thingmodel';
import { IoTDataSpecsDataTypeEnum } from '#/views/iot/utils/constants';
import ThingModelProperty from '../ThingModelProperty.vue';
@@ -29,7 +33,7 @@ const formData = ref<any>({
});
/** 打开 struct 表单 */
const openStructForm = (val: any) => {
function openStructForm(val: any) {
dialogVisible.value = true;
resetForm();
if (isEmpty(val)) {
@@ -46,15 +50,15 @@ const openStructForm = (val: any) => {
dataSpecsList: val.dataSpecsList,
},
};
};
}
/** 删除 struct 项 */
const deleteStructItem = (index: number) => {
function deleteStructItem(index: number) {
dataSpecsList.value.splice(index, 1);
};
}
/** 添加参数 */
const submitForm = async () => {
async function submitForm() {
await structFormRef.value.validate();
try {
@@ -88,10 +92,10 @@ const submitForm = async () => {
} finally {
dialogVisible.value = false;
}
};
}
/** 重置表单 */
const resetForm = () => {
function resetForm() {
formData.value = {
property: {
dataType: IoTDataSpecsDataTypeEnum.INT,
@@ -101,16 +105,16 @@ const resetForm = () => {
},
};
structFormRef.value?.resetFields();
};
}
/** 校验 struct 不能为空 */
const validateList = (_: any, __: any, callback: any) => {
function validateList(_: any, __: any, callback: any) {
if (isEmpty(dataSpecsList.value)) {
callback(new Error('struct 不能为空'));
return;
}
callback();
};
}
/** 组件初始化 */
onMounted(async () => {
@@ -122,60 +126,52 @@ onMounted(async () => {
<template>
<!-- struct 数据展示 -->
<el-form-item
<Form.Item
:rules="[{ required: true, validator: validateList, trigger: 'change' }]"
label="JSON 对象"
>
<div
v-for="(item, index) in dataSpecsList"
:key="index"
class="w-1/1 struct-item px-10px mb-10px flex justify-between"
class="px-10px mb-10px flex w-full justify-between bg-gray-100"
>
<span>参数名称：{{ item.name }}</span>
<div class="btn">
<el-button link type="primary" @click="openStructForm(item)">
<Button link type="primary" @click="openStructForm(item)">
编辑
</el-button>
<el-divider direction="vertical" />
<el-button link type="danger" @click="deleteStructItem(index)">
删除
</el-button>
</Button>
<Divider direction="vertical" />
<Button link danger @click="deleteStructItem(index)"> 删除 </Button>
</div>
</div>
<el-button link type="primary" @click="openStructForm(null)">
<Button link type="primary" @click="openStructForm(null)">
+新增参数
</el-button>
</el-form-item>
</Button>
</Form.Item>
<!-- struct 表单 -->
<Dialog v-model="dialogVisible" :title="dialogTitle" append-to-body>
<el-form
<Modal v-model="dialogVisible" :title="dialogTitle" append-to-body>
<Form
ref="structFormRef"
v-loading="formLoading"
:model="formData"
:rules="ThingModelFormRules"
label-width="100px"
>
<el-form-item label="参数名称" prop="name">
<el-input v-model="formData.name" placeholder="请输入功能名称" />
</el-form-item>
<el-form-item label="标识符" prop="identifier">
<el-input v-model="formData.identifier" placeholder="请输入标识符" />
</el-form-item>
<Form.Item label="参数名称" prop="name">
<Input v-model="formData.name" placeholder="请输入功能名称" />
</Form.Item>
<Form.Item label="标识符" prop="identifier">
<Input v-model="formData.identifier" placeholder="请输入标识符" />
</Form.Item>
<!-- 属性配置 -->
<ThingModelProperty v-model="formData.property" is-struct-data-specs />
</el-form>
</Form>
<template #footer>
<el-button :disabled="formLoading" type="primary" @click="submitForm">
<Button :disabled="formLoading" type="primary" @click="submitForm">
确 定
</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</Button>
<Button @click="dialogVisible = false">取 消</Button>
</template>
</Dialog>
</Modal>
</template>
<style lang="scss" scoped>
.struct-item {
background-color: #e4f2fd;
}
</style>