admin-vben/apps/web-antd/src/views/iot/thingmodel/modules/thing-model-service.vue

73 lines
1.9 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!-- 产品的物模型表单service -->
<script lang="ts" setup>
import type { Ref } from 'vue';
import { watch } from 'vue';
import { isEmpty } from '@vben/utils';
import { useVModel } from '@vueuse/core';
import { Form, Radio } from 'ant-design-vue';
import {
IoTThingModelParamDirectionEnum,
IoTThingModelServiceCallTypeEnum,
} from '#/views/iot/utils/constants';
import ThingModelInputOutputParam from './thing-model-input-output-param.vue';
/** IoT 物模型服务 */
defineOptions({ name: 'ThingModelService' });
const props = defineProps<{ isStructDataSpecs?: boolean; modelValue: any }>();
const emits = defineEmits(['update:modelValue']);
const service = useVModel(props, 'modelValue', emits) as Ref<any>;
/** 默认选中ASYNC 异步 */
watch(
() => service.value.callType,
(val: string | undefined) =>
isEmpty(val) &&
(service.value.callType = IoTThingModelServiceCallTypeEnum.ASYNC.value),
{ immediate: true },
);
</script>
<template>
<Form.Item
:rules="[{ required: true, message: '请选择调用方式', trigger: 'change' }]"
label="调用方式"
name="service.callType"
>
<Radio.Group v-model:value="service.callType">
<Radio
v-for="callType in Object.values(IoTThingModelServiceCallTypeEnum)"
:key="callType.value"
:value="callType.value"
>
{{ callType.label }}
</Radio>
</Radio.Group>
</Form.Item>
<Form.Item label="输入参数">
<ThingModelInputOutputParam
v-model="service.inputParams"
:direction="IoTThingModelParamDirectionEnum.INPUT"
/>
</Form.Item>
<Form.Item label="输出参数">
<ThingModelInputOutputParam
v-model="service.outputParams"
:direction="IoTThingModelParamDirectionEnum.OUTPUT"
/>
</Form.Item>
</template>
<style lang="scss" scoped>
:deep(.ant-form-item) {
.ant-form-item {
margin-bottom: 0;
}
}
</style>