yudao
/
admin-vben
mirror of https://gitee.com/yudaocode/yudao-ui-admin-vben.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

feat（iot）: 完善 rule/scene 的迁移

pull/345/head
YunaiV 2026-05-20 09:01:57 +08:00
parent b1bd32a89b
commit dab9509ba0
21 changed files with 1094 additions and 784 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
apps/web-antd/src/views/iot/rule/scene/data.ts
View File

@ -89,49 +89,42 @@ export function useGridFormSchema(): VbenFormSchema[] {
export function useGridColumns(): VxeTableGridOptions['columns'] { export function useGridColumns(): VxeTableGridOptions['columns'] {
return [ return [
{ type: 'checkbox', width: 40 }, { type: 'checkbox', width: 40 },
{
field: 'id',
title: '规则编号',
minWidth: 80,
},
{ {
field: 'name', field: 'name',
title: '规则名称', title: '规则名称',
minWidth: 150, minWidth: 180,
slots: { default: 'name' },
}, },
{ {
field: 'description', field: 'triggers',
title: '规则描述', title: '触发条件',
minWidth: 200, minWidth: 260,
slots: { default: 'triggers' },
},
{
field: 'actions',
title: '执行动作',
minWidth: 220,
slots: { default: 'actionsCol' },
}, },
{ {
field: 'status', field: 'status',
title: '规则状态', title: '规则状态',
minWidth: 100, width: 90,
cellRender: { cellRender: {
name: 'CellDict', name: 'CellDict',
props: { type: DICT_TYPE.COMMON_STATUS }, props: { type: DICT_TYPE.COMMON_STATUS },
}, },
}, },
{
field: 'actionCount',
title: '执行动作数',
minWidth: 100,
},
{
field: 'executeCount',
title: '执行次数',
minWidth: 100,
},
{ {
field: 'createTime', field: 'createTime',
title: '创建时间', title: '创建时间',
minWidth: 180, width: 160,
formatter: 'formatDateTime', formatter: 'formatDateTime',
}, },
{ {
title: '操作', title: '操作',
width: 240, width: 200,
fixed: 'right', fixed: 'right',
slots: { default: 'actions' }, slots: { default: 'actions' },
}, },

16
apps/web-antd/src/views/iot/rule/scene/form/configs/alert-config.vue
View File

@ -23,17 +23,13 @@ const localValue = useVModel(props, 'modelValue', emit);
const loading = ref(false); // 加载状态 const loading = ref(false); // 加载状态
const alertConfigs = ref<any[]>([]); // 告警配置列表 const alertConfigs = ref<any[]>([]); // 告警配置列表
/** /** 处理选择变化事件 */
* 处理选择变化事件
* @param value 选中的值
*/
function handleChange(value?: any) { function handleChange(value?: any) {
emit('update:modelValue', value); emit('update:modelValue', value);
} }
/** // TODO @AI：这个是不是 antd + vue 也使用这个接口？要不增加一个 simple-list 接口？
* 加载告警配置列表 /** 加载告警配置列表 */
*/
async function loadAlertConfigs() { async function loadAlertConfigs() {
loading.value = true; loading.value = true;
try { try {
@ -48,7 +44,7 @@ async function loadAlertConfigs() {
} }
} }
// 组件挂载时加载数据 /** 初始化 **/
onMounted(() => { onMounted(() => {
loadAlertConfigs(); loadAlertConfigs();
}); });
@ -58,7 +54,7 @@ onMounted(() => {
<div class="w-full"> <div class="w-full">
<Form.Item label="告警配置" required> <Form.Item label="告警配置" required>
<Select <Select
v-model="localValue" v-model:value="localValue"
placeholder="请选择告警配置" placeholder="请选择告警配置"
filterable filterable
clearable clearable
@ -74,7 +70,7 @@ onMounted(() => {
> >
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span>{{ config.name }}</span> <span>{{ config.name }}</span>
<Tag :type="config.enabled ? 'success' : 'danger'" size="small"> <Tag :color="config.enabled ? 'success' : 'error'">
{{ config.enabled ? '启用' : '禁用' }} {{ config.enabled ? '启用' : '禁用' }}
</Tag> </Tag>
</div> </div>

51
apps/web-antd/src/views/iot/rule/scene/form/configs/condition-config.vue
View File

@ -64,9 +64,9 @@ const propertyConfig = ref<any>(null); // 属性配置
const isDeviceCondition = computed(() => { const isDeviceCondition = computed(() => {
return ( return (
condition.value.type === condition.value.type ===
IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS.toString() || IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS ||
condition.value.type === condition.value.type ===
IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString() IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
); );
}); // 计算属性：判断是否为设备相关条件 }); // 计算属性：判断是否为设备相关条件
@ -156,26 +156,27 @@ function handleOperatorChange() {
</script> </script>
<template> <template>
<div class="gap-16px flex flex-col"> <div class="gap-[16px] flex flex-col">
<!-- 条件类型选择 --> <!-- 条件类型选择 -->
<Row :gutter="16"> <Row :gutter="16">
<Col :span="8"> <Col :span="8">
<Form.Item label="条件类型" required> <Form.Item label="条件类型" required>
<Select <Select
:model-value="condition.type" :value="condition.type"
@update:model-value=" @change="(value: any) => {
(value: any) => updateConditionField('type', value) updateConditionField('type', value);
" handleConditionTypeChange(value);
@change="handleConditionTypeChange" }"
placeholder="请选择条件类型" placeholder="请选择条件类型"
class="w-full" class="w-full"
> >
<Select.Option <Select.Option
v-for="option in getConditionTypeOptions()" v-for="option in getConditionTypeOptions()"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
@ -212,9 +213,9 @@ function handleOperatorChange() {
<div <div
v-if=" v-if="
condition.type === condition.type ===
IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS.toString() IotRuleSceneTriggerConditionTypeEnum.DEVICE_STATUS
" "
class="gap-16px flex flex-col" class="gap-[16px] flex flex-col"
> >
<!-- 状态和操作符选择 --> <!-- 状态和操作符选择 -->
<Row :gutter="16"> <Row :gutter="16">
@ -222,9 +223,10 @@ function handleOperatorChange() {
<Col :span="12"> <Col :span="12">
<Form.Item label="操作符" required> <Form.Item label="操作符" required>
<Select <Select
:model-value="condition.operator" :value="condition.operator"
@update:model-value=" @change="
(value: any) => updateConditionField('operator', value) (value: any) => updateConditionField('operator', value)
" "
placeholder="请选择操作符" placeholder="请选择操作符"
class="w-full" class="w-full"
@ -232,9 +234,10 @@ function handleOperatorChange() {
<Select.Option <Select.Option
v-for="option in statusOperatorOptions" v-for="option in statusOperatorOptions"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
@ -243,9 +246,10 @@ function handleOperatorChange() {
<Col :span="12"> <Col :span="12">
<Form.Item label="设备状态" required> <Form.Item label="设备状态" required>
<Select <Select
:model-value="condition.param" :value="condition.param"
@update:model-value=" @change="
(value: any) => updateConditionField('param', value) (value: any) => updateConditionField('param', value)
" "
placeholder="请选择设备状态" placeholder="请选择设备状态"
class="w-full" class="w-full"
@ -253,9 +257,10 @@ function handleOperatorChange() {
<Select.Option <Select.Option
v-for="option in deviceStatusOptions" v-for="option in deviceStatusOptions"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
@ -266,9 +271,9 @@ function handleOperatorChange() {
<div <div
v-else-if=" v-else-if="
condition.type === condition.type ===
IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString() IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY
" "
class="space-y-16px" class="space-y-[16px]"
> >
<!-- 属性配置 --> <!-- 属性配置 -->
<Row :gutter="16"> <Row :gutter="16">
@ -323,7 +328,7 @@ function handleOperatorChange() {
<CurrentTimeConditionConfig <CurrentTimeConditionConfig
v-else-if=" v-else-if="
condition.type === condition.type ===
IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME.toString() IotRuleSceneTriggerConditionTypeEnum.CURRENT_TIME
" "
:model-value="condition" :model-value="condition"
@update:model-value="updateCondition" @update:model-value="updateCondition"

8
apps/web-antd/src/views/iot/rule/scene/form/configs/current-time-condition-config.vue
View File

@ -39,7 +39,7 @@ const timeOperatorOptions = [
label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name, label: IotRuleSceneTriggerTimeOperatorEnum.BEFORE_TIME.name,
icon: 'ep:arrow-left', icon: 'ep:arrow-left',
iconClass: 'text-blue-500', iconClass: 'text-blue-500',
tag: 'primary', tag: 'processing',
category: '时间点', category: '时间点',
}, },
{ {
@ -63,7 +63,7 @@ const timeOperatorOptions = [
label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name, label: IotRuleSceneTriggerTimeOperatorEnum.AT_TIME.name,
icon: 'ep:position', icon: 'ep:position',
iconClass: 'text-purple-500', iconClass: 'text-purple-500',
tag: 'info', tag: 'default',
category: '时间点', category: '时间点',
}, },
{ {
@ -71,7 +71,7 @@ const timeOperatorOptions = [
label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name, label: IotRuleSceneTriggerTimeOperatorEnum.TODAY.name,
icon: 'ep:calendar', icon: 'ep:calendar',
iconClass: 'text-red-500', iconClass: 'text-red-500',
tag: 'danger', tag: 'error',
category: '日期', category: '日期',
}, },
]; ];
@ -194,7 +194,7 @@ watch(
<IconifyIcon :icon="option.icon" :class="option.iconClass" /> <IconifyIcon :icon="option.icon" :class="option.iconClass" />
<span>{{ option.label }}</span> <span>{{ option.label }}</span>
</div> </div>
<Tag :type="option.tag as any" size="small"> <Tag :color="option.tag">
{{ option.category }} {{ option.category }}
</Tag> </Tag>
</div> </div>

40
apps/web-antd/src/views/iot/rule/scene/form/configs/device-control-config.vue
View File

@ -1,10 +1,7 @@
<!-- 设备控制配置组件 --> <!-- 设备控制配置组件 -->
<script setup lang="ts"> <script setup lang="ts">
import type { Action } from '#/api/iot/rule/scene'; import type { Action } from '#/api/iot/rule/scene';
import type { import type { ThingModelApi } from '#/api/iot/thingmodel';
ThingModelProperty,
ThingModelService,
} from '#/api/iot/thingmodel';
import { computed, onMounted, ref, watch } from 'vue'; import { computed, onMounted, ref, watch } from 'vue';
@ -37,10 +34,10 @@ const emit = defineEmits<{
const action = useVModel(props, 'modelValue', emit); const action = useVModel(props, 'modelValue', emit);
const thingModelProperties = ref<ThingModelProperty[]>([]); // 物模型属性列表 const thingModelProperties = ref<ThingModelApi.Property[]>([]); // 物模型属性列表
const loadingThingModel = ref(false); // 物模型加载状态 const loadingThingModel = ref(false); // 物模型加载状态
const selectedService = ref<null | ThingModelService>(null); // 选中的服务对象 const selectedService = ref<null | ThingModelApi.Service>(null); // 选中的服务对象
const serviceList = ref<ThingModelService[]>([]); // 服务列表 const serviceList = ref<ThingModelApi.Service[]>([]); // 服务列表
const loadingServices = ref(false); // 服务加载状态 const loadingServices = ref(false); // 服务加载状态
// 参数值的计算属性，用于双向绑定 // 参数值的计算属性，用于双向绑定
@ -55,6 +52,7 @@ const paramsValue = computed({
}, },
set: (value: string) => { set: (value: string) => {
// 直接保存为 JSON 字符串，不进行解析转换 // 直接保存为 JSON 字符串，不进行解析转换
// TODO @AI：这里有 linter 报错
action.value.params = value.trim() || ''; action.value.params = value.trim() || '';
}, },
}); });
@ -63,7 +61,7 @@ const paramsValue = computed({
const isPropertySetAction = computed(() => { const isPropertySetAction = computed(() => {
return ( return (
action.value.type === action.value.type ===
IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString() IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET
); );
}); });
@ -71,7 +69,7 @@ const isPropertySetAction = computed(() => {
const isServiceInvokeAction = computed(() => { const isServiceInvokeAction = computed(() => {
return ( return (
action.value.type === action.value.type ===
IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE.toString() IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
); );
}); });
@ -84,6 +82,7 @@ function handleProductChange(productId?: number) {
if (action.value.productId !== productId) { if (action.value.productId !== productId) {
action.value.deviceId = undefined; action.value.deviceId = undefined;
action.value.identifier = undefined; // 清空服务标识符 action.value.identifier = undefined; // 清空服务标识符
// TODO @AI：这里有 linter 报错
action.value.params = ''; // 清空参数，保存为空字符串 action.value.params = ''; // 清空参数，保存为空字符串
selectedService.value = null; // 清空选中的服务 selectedService.value = null; // 清空选中的服务
serviceList.value = []; // 清空服务列表 serviceList.value = []; // 清空服务列表
@ -106,6 +105,7 @@ function handleProductChange(productId?: number) {
function handleDeviceChange(deviceId?: number) { function handleDeviceChange(deviceId?: number) {
// 当设备变化时，清空参数配置 // 当设备变化时，清空参数配置
if (action.value.deviceId !== deviceId) { if (action.value.deviceId !== deviceId) {
// TODO @AI：这里有 linter 报错
action.value.params = ''; // 清空参数，保存为空字符串 action.value.params = ''; // 清空参数，保存为空字符串
} }
} }
@ -164,6 +164,7 @@ async function loadThingModelProperties(productId: number) {
loadingThingModel.value = true; loadingThingModel.value = true;
const tslData = await getThingModelTSL(productId); const tslData = await getThingModelTSL(productId);
// TODO @AI：这里有 linter 报错
if (!tslData?.properties) { if (!tslData?.properties) {
thingModelProperties.value = []; thingModelProperties.value = [];
return; return;
@ -171,7 +172,7 @@ async function loadThingModelProperties(productId: number) {
// 过滤出可写的属性（accessMode 包含 'w'） // 过滤出可写的属性（accessMode 包含 'w'）
thingModelProperties.value = tslData.properties.filter( thingModelProperties.value = tslData.properties.filter(
(property: ThingModelProperty) => (property: ThingModelApi.Property) =>
property.accessMode && property.accessMode &&
(property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value || (property.accessMode === IoTThingModelAccessModeEnum.READ_WRITE.value ||
property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value), property.accessMode === IoTThingModelAccessModeEnum.WRITE_ONLY.value),
@ -198,11 +199,13 @@ async function loadServiceList(productId: number) {
loadingServices.value = true; loadingServices.value = true;
const tslData = await getThingModelTSL(productId); const tslData = await getThingModelTSL(productId);
// TODO @AI：这里有 linter 报错
if (!tslData?.services) { if (!tslData?.services) {
serviceList.value = []; serviceList.value = [];
return; return;
} }
// TODO @AI：这里有 linter 报错
serviceList.value = tslData.services; serviceList.value = tslData.services;
} catch (error) { } catch (error) {
console.error('加载服务列表失败:', error); console.error('加载服务列表失败:', error);
@ -213,8 +216,8 @@ async function loadServiceList(productId: number) {
} }
/** /**
* 从TSL加载服务信息（用于编辑模式回显） * 从 TSL 加载服务信息（用于编辑模式回显）
* @param productId 产品ID * @param productId 产品 ID
* @param serviceIdentifier 服务标识符 * @param serviceIdentifier 服务标识符
*/ */
async function loadServiceFromTSL( async function loadServiceFromTSL(
@ -338,7 +341,7 @@ watch(
</script> </script>
<template> <template>
<div class="gap-16px flex flex-col"> <div class="gap-[16px] flex flex-col">
<!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 --> <!-- 产品和设备选择 - 与触发器保持一致的分离式选择器 -->
<Row :gutter="16"> <Row :gutter="16">
<Col :span="12"> <Col :span="12">
@ -361,10 +364,10 @@ watch(
</Row> </Row>
<!-- 服务选择 - 服务调用类型时显示 --> <!-- 服务选择 - 服务调用类型时显示 -->
<div v-if="action.productId && isServiceInvokeAction" class="space-y-16px"> <div v-if="action.productId && isServiceInvokeAction" class="space-y-[16px]">
<Form.Item label="服务" required> <Form.Item label="服务" required>
<Select <Select
v-model="action.identifier" v-model:value="action.identifier"
placeholder="请选择服务" placeholder="请选择服务"
filterable filterable
clearable clearable
@ -381,8 +384,7 @@ watch(
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<span>{{ service.name }}</span> <span>{{ service.name }}</span>
<Tag <Tag
:type="service.callType === 'sync' ? 'primary' : 'success'" :color="service.callType === 'sync' ? 'processing' : 'success'"
size="small"
> >
{{ service.callType === 'sync' ? '同步' : '异步' }} {{ service.callType === 'sync' ? '同步' : '异步' }}
</Tag> </Tag>
@ -392,7 +394,7 @@ watch(
</Form.Item> </Form.Item>
<!-- 服务参数配置 --> <!-- 服务参数配置 -->
<div v-if="action.identifier" class="space-y-16px"> <div v-if="action.identifier" class="space-y-[16px]">
<Form.Item label="服务参数" required> <Form.Item label="服务参数" required>
<JsonParamsInput <JsonParamsInput
v-model="paramsValue" v-model="paramsValue"
@ -405,7 +407,7 @@ watch(
</div> </div>
<!-- 控制参数配置 - 属性设置类型时显示 --> <!-- 控制参数配置 - 属性设置类型时显示 -->
<div v-if="action.productId && isPropertySetAction" class="space-y-16px"> <div v-if="action.productId && isPropertySetAction" class="space-y-[16px]">
<!-- 参数配置 --> <!-- 参数配置 -->
<Form.Item label="参数" required> <Form.Item label="参数" required>
<JsonParamsInput <JsonParamsInput

106
apps/web-antd/src/views/iot/rule/scene/form/configs/device-trigger-config.vue
View File

@ -93,37 +93,38 @@ function removeConditionGroup() {
</script> </script>
<template> <template>
<div class="gap-16px flex flex-col"> <div class="gap-[16px] flex flex-col">
<!-- 主条件配置 - 默认直接展示 --> <!-- 主条件配置 - 默认直接展示 -->
<div class="space-y-16px"> <div class="space-y-[16px]">
<!-- 主条件配置 --> <!-- 主条件配置 -->
<div class="gap-16px flex flex-col"> <div class="gap-[16px] flex flex-col">
<!-- 主条件配置 --> <!-- 主条件配置 -->
<div class="space-y-16px"> <div class="space-y-[16px]">
<!-- 主条件头部 - 与附加条件组保持一致的绿色风格 --> <!-- 主条件头部（绿色主题） -->
<div <div
class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50" class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
> >
<div class="gap-12px flex items-center"> <div class="gap-[10px] flex items-center">
<div <div
class="gap-8px text-16px font-600 flex items-center text-green-700" class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
> >
<div <div
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white" class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
> >
主 主
</div> </div>
<span>主条件</span> <span>主条件</span>
</div> </div>
<el-tag size="small" type="success">必须满足</el-tag> <Tag color="success">必须满足</Tag>
</div> </div>
</div> </div>
<!-- 主条件内容配置 --> <!-- 主条件内容配置 -->
<!-- TODO @AI：这里有 linter 报错 -->
<MainConditionInnerConfig <MainConditionInnerConfig
:model-value="trigger" :model-value="trigger"
@update:model-value="updateCondition" @update:model-value="updateCondition"
:trigger-type="trigger.type as any" :trigger-type="trigger.type"
@trigger-type-change="handleTriggerTypeChange" @trigger-type-change="handleTriggerTypeChange"
/> />
</div> </div>
@ -131,30 +132,28 @@ function removeConditionGroup() {
</div> </div>
<!-- 条件组配置 --> <!-- 条件组配置 -->
<div class="space-y-16px"> <div class="space-y-[16px]">
<!-- 条件组配置 --> <!-- 条件组配置 -->
<div class="gap-16px flex flex-col"> <div class="gap-[16px] flex flex-col">
<!-- 条件组容器头部 --> <!-- 条件组容器头部（绿色主题） -->
<div <div
class="p-16px rounded-8px flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50" class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
> >
<div class="gap-12px flex items-center"> <div class="gap-[10px] flex items-center">
<div <div
class="gap-8px text-16px font-600 flex items-center text-green-700" class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
> >
<div <div
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white" class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
> >
组 组
</div> </div>
<span>附加条件组</span> <span>附加条件组</span>
</div> </div>
<el-tag size="small" type="success">与"主条件"为且关系</el-tag> <Tag color="success">与「主条件」为且关系</Tag>
<el-tag size="small" type="info"> <Tag>{{ trigger.conditionGroups?.length || 0 }} 个子条件组</Tag>
{{ trigger.conditionGroups?.length || 0 }} 个子条件组
</el-tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<Button <Button
type="primary" type="primary"
size="small" size="small"
@ -164,7 +163,12 @@ function removeConditionGroup() {
<IconifyIcon icon="lucide:plus" /> <IconifyIcon icon="lucide:plus" />
添加子条件组 添加子条件组
</Button> </Button>
<Button danger size="small" text @click="removeConditionGroup"> <Button
danger
size="small"
type="link"
@click="removeConditionGroup"
>
<IconifyIcon icon="lucide:trash-2" /> <IconifyIcon icon="lucide:trash-2" />
删除条件组 删除条件组
</Button> </Button>
@ -174,7 +178,7 @@ function removeConditionGroup() {
<!-- 子条件组列表 --> <!-- 子条件组列表 -->
<div <div
v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0" v-if="trigger.conditionGroups && trigger.conditionGroups.length > 0"
class="space-y-16px" class="space-y-[16px]"
> >
<!-- 逻辑关系说明 --> <!-- 逻辑关系说明 -->
<div class="relative"> <div class="relative">
@ -183,37 +187,37 @@ function removeConditionGroup() {
:key="`sub-group-${subGroupIndex}`" :key="`sub-group-${subGroupIndex}`"
class="relative" class="relative"
> >
<!-- 子条件组容器 --> <!-- 子条件组容器（橙色主题） -->
<div <div
class="rounded-8px border-2 border-orange-200 bg-orange-50 shadow-sm transition-shadow hover:shadow-md" class="rounded-[8px] border border-orange-200 bg-orange-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-orange-900/40 dark:bg-orange-950/20"
> >
<div <div
class="p-16px rounded-t-6px flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50" class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50 dark:border-orange-900/40 dark:from-orange-950/30 dark:to-yellow-950/30"
> >
<div class="gap-12px flex items-center"> <div class="gap-[10px] flex items-center">
<div <div
class="gap-8px text-16px font-600 flex items-center text-orange-700" class="gap-[8px] text-[14px] font-semibold flex items-center text-orange-700 dark:text-orange-300"
> >
<div <div
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-orange-500 font-bold text-white" class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
> >
{{ subGroupIndex + 1 }} {{ subGroupIndex + 1 }}
</div> </div>
<span>子条件组 {{ subGroupIndex + 1 }}</span> <span>子条件组 {{ subGroupIndex + 1 }}</span>
</div> </div>
<Tag size="small" type="warning" class="font-500"> <Tag color="warning" class="font-medium">
组内条件为"且"关系 组内条件为「且」关系
</Tag> </Tag>
<Tag size="small" type="info"> <Tag color="default">
{{ (subGroup as any)?.length || 0 }}个条件 {{ (subGroup as any)?.length || 0 }} 个条件
</Tag> </Tag>
</div> </div>
<Button <Button
danger danger
size="small" size="small"
text type="link"
@click="removeSubGroup(subGroupIndex)"
class="hover:bg-red-50" class="hover:bg-red-50"
@click="removeSubGroup(subGroupIndex)"
> >
<IconifyIcon icon="lucide:trash-2" /> <IconifyIcon icon="lucide:trash-2" />
删除组 删除组
@ -225,7 +229,7 @@ function removeConditionGroup() {
@update:model-value=" @update:model-value="
(value) => updateSubGroup(subGroupIndex, value) (value) => updateSubGroup(subGroupIndex, value)
" "
:trigger-type="trigger.type as any" :trigger-type="trigger.type"
:max-conditions="maxConditionsPerGroup" :max-conditions="maxConditionsPerGroup"
/> />
</div> </div>
@ -233,35 +237,35 @@ function removeConditionGroup() {
<!-- 子条件组间的'或'连接符 --> <!-- 子条件组间的'或'连接符 -->
<div <div
v-if="subGroupIndex < trigger.conditionGroups!.length - 1" v-if="subGroupIndex < trigger.conditionGroups!.length - 1"
class="py-12px flex items-center justify-center" class="py-[12px] flex items-center justify-center"
> >
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<!-- 连接线 --> <!-- 连接线 -->
<div class="w-32px h-1px bg-orange-300"></div> <div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
<!-- 或标签 --> <!-- 或标签 -->
<div <div
class="px-16px py-6px rounded-full border-2 border-orange-300 bg-orange-100" class="px-[14px] py-[3px] rounded-full border border-orange-300 bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50"
> >
<span class="text-14px font-600 text-orange-600">或</span> <span class="text-[13px] font-semibold text-orange-600 dark:text-orange-300">或</span>
</div> </div>
<!-- 连接线 --> <!-- 连接线 -->
<div class="w-32px h-1px bg-orange-300"></div> <div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 空状态 --> <!-- 空状态（橙色主题） -->
<div <div
v-else v-else
class="p-24px rounded-8px border-2 border-dashed border-orange-200 bg-orange-50 text-center" class="p-[24px] rounded-[8px] border-2 border-dashed border-orange-200 bg-orange-50/40 text-center dark:border-orange-900/40 dark:bg-orange-950/10"
> >
<div class="gap-12px flex flex-col items-center"> <div class="gap-[10px] flex flex-col items-center">
<IconifyIcon icon="lucide:plus" class="text-32px text-orange-400" /> <IconifyIcon icon="lucide:plus" class="text-[28px] text-orange-400 dark:text-orange-300" />
<div class="text-orange-600"> <div class="text-orange-600 dark:text-orange-300">
<p class="text-14px font-500 mb-4px">暂无子条件组</p> <p class="text-[13px] font-medium mb-[2px]">暂无子条件组</p>
<p class="text-12px">点击上方"添加子条件组"按钮开始配置</p> <p class="text-[12px]">点击上方「添加子条件组」按钮开始配置</p>
</div> </div>
</div> </div>
</div> </div>

37
apps/web-antd/src/views/iot/rule/scene/form/configs/main-condition-inner-config.vue
View File

@ -176,18 +176,20 @@ function handlePropertyChange(propertyInfo: any) {
<div class="space-y-4"> <div class="space-y-4">
<!-- 触发事件类型选择 --> <!-- 触发事件类型选择 -->
<Form.Item label="触发事件类型" required> <Form.Item label="触发事件类型" required>
<!-- TODO @AI：change linter 报错 -->
<Select <Select
:model-value="triggerType" :value="triggerType"
@update:model-value="handleTriggerTypeChange" @change="handleTriggerTypeChange"
placeholder="请选择触发事件类型" placeholder="请选择触发事件类型"
class="w-full" class="w-full"
> >
<Select.Option <Select.Option
v-for="option in triggerTypeOptions" v-for="option in triggerTypeOptions"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
@ -260,17 +262,18 @@ function handlePropertyChange(propertyInfo: any) {
triggerType === triggerType ===
IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE
" "
v-model="condition.value" v-model:value="condition.value"
type="service" type="service"
:config="serviceConfig as any" :config="serviceConfig as any"
placeholder="请输入 JSON 格式的服务参数" placeholder="请输入 JSON 格式的服务参数"
/> />
<!-- 事件上报参数配置 --> <!-- 事件上报参数配置 -->
<!-- TODO @AI：JsonParamsInput linter 报错 -->
<JsonParamsInput <JsonParamsInput
v-else-if=" v-else-if="
triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST
" "
v-model="condition.value" v-model:value="condition.value"
type="event" type="event"
:config="eventConfig as any" :config="eventConfig as any"
placeholder="请输入 JSON 格式的事件参数" placeholder="请输入 JSON 格式的事件参数"
@ -323,29 +326,30 @@ function handlePropertyChange(propertyInfo: any) {
<Col :span="6"> <Col :span="6">
<Form.Item label="操作符" required> <Form.Item label="操作符" required>
<Select <Select
:model-value="condition.operator" :value="condition.operator"
@update:model-value=" @change="
(value: any) => updateConditionField('operator', value) (value: any) => updateConditionField('operator', value)
" "
placeholder="请选择操作符" placeholder="请选择操作符"
class="w-full" class="w-full"
> >
<Select.Option <Select.Option
:label="
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
"
:value=" :value="
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.value
" "
/> >
{{
IotRuleSceneTriggerConditionParameterOperatorEnum.EQUALS.name
}}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>
<Col :span="6"> <Col :span="6">
<Form.Item label="参数" required> <Form.Item label="参数" required>
<Select <Select
:model-value="condition.value" :value="condition.value"
@update:model-value=" @change="
(value: any) => updateConditionField('value', value) (value: any) => updateConditionField('value', value)
" "
placeholder="请选择操作符" placeholder="请选择操作符"
@ -354,9 +358,10 @@ function handlePropertyChange(propertyInfo: any) {
<Select.Option <Select.Option
v-for="option in deviceStatusChangeOptions" v-for="option in deviceStatusChangeOptions"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</Col> </Col>

10
apps/web-antd/src/views/iot/rule/scene/form/configs/sub-condition-group-config.vue
View File

@ -45,7 +45,7 @@ async function addCondition() {
} }
const newCondition: TriggerCondition = { const newCondition: TriggerCondition = {
type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY.toString(), // 默认为设备属性 type: IotRuleSceneTriggerConditionTypeEnum.DEVICE_PROPERTY, // 默认为设备属性
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: '', identifier: '',
@ -108,7 +108,7 @@ function updateCondition(index: number, condition: TriggerCondition) {
> >
<!-- 条件配置 --> <!-- 条件配置 -->
<div <div
class="rounded-3px bg-fill-color-blank border border-border shadow-sm" class="rounded-[3px] bg-fill-color-blank border border-border shadow-sm"
> >
<div <div
class="rounded-t-1 bg-fill-color-blank flex items-center justify-between border-b border-border p-3" class="rounded-t-1 bg-fill-color-blank flex items-center justify-between border-b border-border p-3"
@ -124,12 +124,12 @@ function updateCondition(index: number, condition: TriggerCondition) {
</span> </span>
</div> </div>
<Button <Button
v-if="subGroup!.length > 1"
danger danger
size="small" size="small"
text type="link"
@click="removeCondition(conditionIndex)"
v-if="subGroup!.length > 1"
class="hover:bg-red-50" class="hover:bg-red-50"
@click="removeCondition(conditionIndex)"
> >
<IconifyIcon icon="lucide:trash-2" /> <IconifyIcon icon="lucide:trash-2" />
</Button> </Button>

184
apps/web-antd/src/views/iot/rule/scene/form/configs/timer-condition-group-config.vue Normal file
View File

@ -0,0 +1,184 @@
<script setup lang="ts">
import type { TriggerCondition } from '#/api/iot/rule/scene';
import { nextTick } from 'vue';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import { Button, Tag } from 'ant-design-vue';
import { IotRuleSceneTriggerTypeEnum } from '#/views/iot/utils/constants';
import SubConditionGroupConfig from './sub-condition-group-config.vue';
/** 定时触发器条件组配置组件 */
// TODO @AI：defineOptions 这种，和上面这种注释，是不是可以去掉？（iot 里，其它的看看也检查下。）
defineOptions({ name: 'TimerConditionGroupConfig' });
const props = defineProps<{
modelValue?: TriggerCondition[][];
}>();
const emit = defineEmits<{
(e: 'update:modelValue', value: TriggerCondition[][]): void;
}>();
const conditionGroups = useVModel(props, 'modelValue', emit);
const maxGroups = 3; // 最多 3 个条件组
const maxConditionsPerGroup = 3; // 每组最多 3 个条件
/** 添加条件组 */
async function addConditionGroup() {
if (!conditionGroups.value) {
conditionGroups.value = [];
}
if (conditionGroups.value.length >= maxGroups) {
return;
}
await nextTick();
if (conditionGroups.value) {
conditionGroups.value.push([]);
}
}
/** 移除条件组 */
function removeConditionGroup(index: number) {
if (conditionGroups.value) {
conditionGroups.value.splice(index, 1);
}
}
/** 更新条件组 */
function updateConditionGroup(index: number, group: TriggerCondition[]) {
if (conditionGroups.value) {
conditionGroups.value[index] = group;
}
}
</script>
<template>
<div class="space-y-[16px]">
<!-- 条件组容器头部（蓝色主题） -->
<div
class="px-[16px] py-[10px] rounded-[6px] flex items-center justify-between border border-blue-200 bg-gradient-to-r from-blue-50 to-cyan-50 dark:border-blue-900/40 dark:from-blue-950/30 dark:to-cyan-950/30"
>
<div class="gap-[10px] flex items-center">
<div
class="gap-[8px] text-[14px] font-semibold flex items-center text-blue-700 dark:text-blue-300"
>
<div
class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-blue-500 font-bold text-white"
>
组
</div>
<span>附加条件组</span>
</div>
<Tag color="processing">定时触发时需满足以下条件</Tag>
<Tag color="warning">
{{ conditionGroups?.length || 0 }} 个子条件组
</Tag>
</div>
<Button
type="primary"
size="small"
:disabled="(conditionGroups?.length || 0) >= maxGroups"
@click="addConditionGroup"
>
<IconifyIcon icon="lucide:plus" />
添加条件组
</Button>
</div>
<!-- 条件组列表 -->
<div
v-if="conditionGroups && conditionGroups.length > 0"
class="space-y-[16px]"
>
<div
v-for="(group, groupIndex) in conditionGroups"
:key="`group-${groupIndex}`"
class="relative"
>
<!-- 条件组容器（橙色主题） -->
<div
class="rounded-[8px] border border-orange-200 bg-orange-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-orange-900/40 dark:bg-orange-950/20"
>
<div
class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-orange-200 bg-gradient-to-r from-orange-50 to-yellow-50 dark:border-orange-900/40 dark:from-orange-950/30 dark:to-yellow-950/30"
>
<div class="gap-[10px] flex items-center">
<div
class="gap-[8px] text-[14px] font-semibold flex items-center text-orange-700 dark:text-orange-300"
>
<div
class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-orange-500 font-bold text-white"
>
{{ groupIndex + 1 }}
</div>
<span>子条件组 {{ groupIndex + 1 }}</span>
</div>
<Tag color="warning" class="font-medium">
组内条件为「且」关系
</Tag>
<Tag color="default">
{{ group?.length || 0 }} 个条件
</Tag>
</div>
<Button
danger
size="small"
type="link"
class="hover:bg-red-50"
@click="removeConditionGroup(groupIndex)"
>
<IconifyIcon icon="lucide:trash-2" />
删除组
</Button>
</div>
<SubConditionGroupConfig
:model-value="group"
:trigger-type="IotRuleSceneTriggerTypeEnum.TIMER"
:max-conditions="maxConditionsPerGroup"
@update:model-value="
(value: TriggerCondition[]) =>
updateConditionGroup(groupIndex, value)
"
/>
</div>
<!-- 条件组间的「或」连接符 -->
<div
v-if="groupIndex < conditionGroups.length - 1"
class="py-[12px] flex items-center justify-center"
>
<div class="gap-[8px] flex items-center">
<div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
<div
class="px-[14px] py-[3px] rounded-full border border-orange-300 bg-orange-100 dark:border-orange-800 dark:bg-orange-950/50"
>
<span class="text-[13px] font-semibold text-orange-600 dark:text-orange-300">或</span>
</div>
<div class="w-[32px] h-[1px] bg-orange-300 dark:bg-orange-800"></div>
</div>
</div>
</div>
</div>
<!-- 空状态（蓝色主题） -->
<div
v-else
class="p-[24px] rounded-[8px] border-2 border-dashed border-blue-200 bg-blue-50/40 text-center dark:border-blue-900/40 dark:bg-blue-950/10"
>
<div class="gap-[10px] flex flex-col items-center">
<IconifyIcon icon="lucide:plus" class="text-[28px] text-blue-400 dark:text-blue-300" />
<div class="text-blue-600 dark:text-blue-300">
<p class="text-[13px] font-medium mb-[2px]">暂无附加条件</p>
<p class="text-[12px]">定时触发时将直接执行动作</p>
</div>
</div>
</div>
</div>
</template>

29
apps/web-antd/src/views/iot/rule/scene/form/inputs/json-params-input.vue
View File

@ -307,17 +307,17 @@ function getParamTypeName(dataType: string) {
*/ */
function getParamTypeTag(dataType: string) { function getParamTypeTag(dataType: string) {
const tagMap: Record<string, string> = { const tagMap: Record<string, string> = {
[IoTDataSpecsDataTypeEnum.INT]: 'primary', [IoTDataSpecsDataTypeEnum.INT]: 'processing',
[IoTDataSpecsDataTypeEnum.FLOAT]: 'success', [IoTDataSpecsDataTypeEnum.FLOAT]: 'success',
[IoTDataSpecsDataTypeEnum.DOUBLE]: 'success', [IoTDataSpecsDataTypeEnum.DOUBLE]: 'success',
[IoTDataSpecsDataTypeEnum.TEXT]: 'info', [IoTDataSpecsDataTypeEnum.TEXT]: 'default',
[IoTDataSpecsDataTypeEnum.BOOL]: 'warning', [IoTDataSpecsDataTypeEnum.BOOL]: 'warning',
[IoTDataSpecsDataTypeEnum.ENUM]: 'danger', [IoTDataSpecsDataTypeEnum.ENUM]: 'error',
[IoTDataSpecsDataTypeEnum.DATE]: 'primary', [IoTDataSpecsDataTypeEnum.DATE]: 'processing',
[IoTDataSpecsDataTypeEnum.STRUCT]: 'info', [IoTDataSpecsDataTypeEnum.STRUCT]: 'default',
[IoTDataSpecsDataTypeEnum.ARRAY]: 'warning', [IoTDataSpecsDataTypeEnum.ARRAY]: 'warning',
}; };
return tagMap[dataType] || 'info'; return tagMap[dataType] || 'default';
} }
/** /**
@ -419,12 +419,11 @@ watch(
<!-- JSON 输入框 --> <!-- JSON 输入框 -->
<div class="relative"> <div class="relative">
<Input.TextArea <Input.TextArea
v-model="paramsJson" v-model:value="paramsJson"
type="text"
:rows="4" :rows="4"
:placeholder="placeholder" :placeholder="placeholder"
@input="handleParamsChange"
:class="{ 'is-error': jsonError }" :class="{ 'is-error': jsonError }"
@input="handleParamsChange"
/> />
<!-- 查看详细示例弹出层 --> <!-- 查看详细示例弹出层 -->
<div class="absolute right-2 top-2"> <div class="absolute right-2 top-2">
@ -438,9 +437,8 @@ watch(
> >
<template #reference> <template #reference>
<Button <Button
text type="link"
type="primary" shape="circle"
circle
size="small" size="small"
:title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE" :title="JSON_PARAMS_INPUT_CONSTANTS.VIEW_EXAMPLE_TITLE"
> >
@ -480,8 +478,7 @@ watch(
{{ param.name }} {{ param.name }}
<Tag <Tag
v-if="param.required" v-if="param.required"
size="small" color="error"
type="danger"
class="ml-1" class="ml-1"
> >
{{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }} {{ JSON_PARAMS_INPUT_CONSTANTS.REQUIRED_TAG }}
@ -492,7 +489,7 @@ watch(
</div> </div>
</div> </div>
<div class="flex items-center gap-2"> <div class="flex items-center gap-2">
<Tag :type="getParamTypeTag(param.dataType)" size="small"> <Tag :color="getParamTypeTag(param.dataType)">
{{ getParamTypeName(param.dataType) }} {{ getParamTypeName(param.dataType) }}
</Tag> </Tag>
<span class="text-xs text-secondary"> <span class="text-xs text-secondary">
@ -507,7 +504,7 @@ watch(
{{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }} {{ JSON_PARAMS_INPUT_CONSTANTS.COMPLETE_JSON_FORMAT }}
</div> </div>
<pre <pre
class="border-l-3px overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-primary" class="border-l-[3px] overflow-x-auto rounded-lg border-primary bg-card p-3 text-sm text-primary"
> >
<code>{{ generateExampleJson() }}</code> <code>{{ generateExampleJson() }}</code>
</pre> </pre>

26
apps/web-antd/src/views/iot/rule/scene/form/inputs/value-input.vue
View File

@ -155,12 +155,12 @@ watch(
<!-- 布尔值选择 --> <!-- 布尔值选择 -->
<Select <Select
v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL" v-if="propertyType === IoTDataSpecsDataTypeEnum.BOOL"
v-model="localValue" v-model:value="localValue"
placeholder="请选择布尔值" placeholder="请选择布尔值"
class="w-full!" class="w-full!"
> >
<Select.Option label="真 (true)" :value="true" /> <Select.Option :value="true">真 (true)</Select.Option>
<Select.Option label="假 (false)" :value="false" /> <Select.Option :value="false">假 (false)</Select.Option>
</Select> </Select>
<!-- 枚举值选择 --> <!-- 枚举值选择 -->
@ -168,16 +168,17 @@ watch(
v-else-if=" v-else-if="
propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0 propertyType === IoTDataSpecsDataTypeEnum.ENUM && enumOptions.length > 0
" "
v-model="localValue" v-model:value="localValue"
placeholder="请选择枚举值" placeholder="请选择枚举值"
class="w-full!" class="w-full!"
> >
<Select.Option <Select.Option
v-for="option in enumOptions" v-for="option in enumOptions"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
<!-- 范围输入 (between 操作符) --> <!-- 范围输入 (between 操作符) -->
@ -189,7 +190,7 @@ watch(
class="w-full! flex items-center gap-2" class="w-full! flex items-center gap-2"
> >
<Input <Input
v-model="rangeStart" v-model:value="rangeStart"
:type="getInputType()" :type="getInputType()"
placeholder="最小值" placeholder="最小值"
@input="handleRangeChange" @input="handleRangeChange"
@ -198,7 +199,7 @@ watch(
/> />
<span class="whitespace-nowrap text-xs text-secondary"> 至 </span> <span class="whitespace-nowrap text-xs text-secondary"> 至 </span>
<Input <Input
v-model="rangeEnd" v-model:value="rangeEnd"
:type="getInputType()" :type="getInputType()"
placeholder="最大值" placeholder="最大值"
@input="handleRangeChange" @input="handleRangeChange"
@ -214,7 +215,7 @@ watch(
class="w-full!" class="w-full!"
> >
<Input <Input
v-model="localValue" v-model:value="localValue"
placeholder="请输入值列表，用逗号分隔" placeholder="请输入值列表，用逗号分隔"
class="w-full!" class="w-full!"
> >
@ -235,7 +236,6 @@ watch(
<Tag <Tag
v-for="(item, index) in listPreview" v-for="(item, index) in listPreview"
:key="index" :key="index"
size="small"
class="m-0" class="m-0"
> >
{{ item }} {{ item }}
@ -246,7 +246,7 @@ watch(
<!-- 日期时间输入 --> <!-- 日期时间输入 -->
<DatePicker <DatePicker
v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE" v-else-if="propertyType === IoTDataSpecsDataTypeEnum.DATE"
v-model="dateValue" v-model:value="dateValue"
type="datetime" type="datetime"
placeholder="请选择日期时间" placeholder="请选择日期时间"
format="YYYY-MM-DD HH:mm:ss" format="YYYY-MM-DD HH:mm:ss"
@ -258,7 +258,7 @@ watch(
<!-- 数字输入 --> <!-- 数字输入 -->
<Input.Number <Input.Number
v-else-if="isNumericType()" v-else-if="isNumericType()"
v-model="numberValue" v-model:value="numberValue"
:precision="getPrecision()" :precision="getPrecision()"
:step="getStep()" :step="getStep()"
:min="getMin()" :min="getMin()"
@ -271,7 +271,7 @@ watch(
<!-- 文本输入 --> <!-- 文本输入 -->
<Input <Input
v-else v-else
v-model="localValue" v-model:value="localValue"
:type="getInputType()" :type="getInputType()"
:placeholder="getPlaceholder()" :placeholder="getPlaceholder()"
class="w-full!" class="w-full!"

360
apps/web-antd/src/views/iot/rule/scene/form/rule-scene-form.vue
View File

@ -1,360 +0,0 @@
<script setup lang="ts">
import type { IotSceneRule } from '#/api/iot/rule/scene';
import { computed, nextTick, reactive, ref, watch } from 'vue';
import { CommonStatusEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { useVModel } from '@vueuse/core';
import { Button, Drawer, Form, message } from 'ant-design-vue';
import { createSceneRule, updateSceneRule } from '#/api/iot/rule/scene';
import {
IotRuleSceneActionTypeEnum,
IotRuleSceneTriggerTypeEnum,
isDeviceTrigger,
} from '#/views/iot/utils/constants';
import ActionSection from './sections/action-section.vue';
import BasicInfoSection from './sections/basic-info-section.vue';
import TriggerSection from './sections/trigger-section.vue';
/** IoT 场景联动规则表单 - 主表单组件 */
defineOptions({ name: 'RuleSceneForm' });
/** 组件属性定义 */
const props = defineProps<{
/** 抽屉显示状态 */
modelValue: boolean;
/** 编辑的场景联动规则数据 */
ruleScene?: IotSceneRule;
}>();
/** 组件事件定义 */
const emit = defineEmits<{
(e: 'update:modelValue', value: boolean): void;
(e: 'success'): void;
}>();
const drawerVisible = useVModel(props, 'modelValue', emit); // 抽屉显示状态
/**
* 创建默认的表单数据
* @returns 默认表单数据对象
*/
function createDefaultFormData(): IotSceneRule {
return {
name: '',
description: '',
status: CommonStatusEnum.ENABLE, // 默认启用状态
triggers: [
{
type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST.toString(),
productId: undefined,
deviceId: undefined,
identifier: undefined,
operator: undefined,
value: undefined,
cronExpression: undefined,
conditionGroups: [], // 空的条件组数组
},
],
actions: [],
};
}
const formRef = ref(); // 表单引用
const formData = ref<IotSceneRule>(createDefaultFormData()); // 表单数据
/**
* 触发器校验器
* @param _rule 校验规则（未使用）
* @param value 校验值
* @param callback 回调函数
*/
function validateTriggers(_rule: any, value: any, callback: any) {
if (!value || !Array.isArray(value) || value.length === 0) {
callback(new Error('至少需要一个触发器'));
return;
}
for (const [i, trigger] of value.entries()) {
// 校验触发器类型
if (!trigger.type) {
callback(new Error(`触发器 ${i + 1}: 触发器类型不能为空`));
return;
}
// 校验设备触发器
if (isDeviceTrigger(trigger.type)) {
if (!trigger.productId) {
callback(new Error(`触发器 ${i + 1}: 产品不能为空`));
return;
}
if (!trigger.deviceId) {
callback(new Error(`触发器 ${i + 1}: 设备不能为空`));
return;
}
if (!trigger.identifier) {
callback(new Error(`触发器 ${i + 1}: 物模型标识符不能为空`));
return;
}
if (!trigger.operator) {
callback(new Error(`触发器 ${i + 1}: 操作符不能为空`));
return;
}
if (
trigger.value === undefined ||
trigger.value === null ||
trigger.value === ''
) {
callback(new Error(`触发器 ${i + 1}: 参数值不能为空`));
return;
}
}
// 校验定时触发器
if (
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER &&
!trigger.cronExpression
) {
callback(new Error(`触发器 ${i + 1}: CRON表达式不能为空`));
return;
}
}
callback();
}
/**
* 执行器校验器
* @param _rule 校验规则（未使用）
* @param value 校验值
* @param callback 回调函数
*/
function validateActions(_rule: any, value: any, callback: any) {
if (!value || !Array.isArray(value) || value.length === 0) {
callback(new Error('至少需要一个执行器'));
return;
}
for (const [i, action] of value.entries()) {
// 校验执行器类型
if (!action.type) {
callback(new Error(`执行器 ${i + 1}: 执行器类型不能为空`));
return;
}
// 校验设备控制执行器
if (
action.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET ||
action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
) {
if (!action.productId) {
callback(new Error(`执行器 ${i + 1}: 产品不能为空`));
return;
}
if (!action.deviceId) {
callback(new Error(`执行器 ${i + 1}: 设备不能为空`));
return;
}
// 服务调用需要验证服务标识符
if (
action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE &&
!action.identifier
) {
callback(new Error(`执行器 ${i + 1}: 服务不能为空`));
return;
}
if (!action.params || Object.keys(action.params).length === 0) {
callback(new Error(`执行器 ${i + 1}: 参数配置不能为空`));
return;
}
}
// 校验告警执行器
if (
(action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER ||
action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER) &&
!action.alertConfigId
) {
callback(new Error(`执行器 ${i + 1}: 告警配置不能为空`));
return;
}
}
callback();
}
const formRules = reactive({
name: [
{ required: true, message: '场景名称不能为空', trigger: 'blur' },
{
type: 'string',
min: 1,
max: 50,
message: '场景名称长度应在1-50个字符之间',
trigger: 'blur',
},
],
status: [
{ required: true, message: '场景状态不能为空', trigger: 'change' },
{
type: 'enum',
enum: [CommonStatusEnum.ENABLE, CommonStatusEnum.DISABLE],
message: '状态值必须为启用或禁用',
trigger: 'change',
},
],
description: [
{
type: 'string',
max: 200,
message: '场景描述不能超过200个字符',
trigger: 'blur',
},
],
triggers: [
{ required: true, validator: validateTriggers, trigger: 'change' },
],
actions: [{ required: true, validator: validateActions, trigger: 'change' }],
}); // 表单校验规则
const submitLoading = ref(false); // 提交加载状态
const isEdit = ref(false); // 是否为编辑模式
const drawerTitle = computed(() =>
isEdit.value ? '编辑场景联动规则' : '新增场景联动规则',
); // 抽屉标题
/** 提交表单 */
async function handleSubmit() {
// 校验表单
if (!formRef.value) return;
const valid = await formRef.value.validate();
if (!valid) {
return;
}
// 提交请求
submitLoading.value = true;
try {
if (isEdit.value) {
// 更新场景联动规则
await updateSceneRule(formData.value);
message.success('更新成功');
} else {
// 创建场景联动规则
await createSceneRule(formData.value);
message.success('创建成功');
}
// 关闭抽屉并触发成功事件
drawerVisible.value = false;
emit('success');
} catch (error) {
console.error('保存失败:', error);
message.error(isEdit.value ? '更新失败' : '创建失败');
} finally {
submitLoading.value = false;
}
}
/** 处理抽屉关闭事件 */
const handleClose = () => {
drawerVisible.value = false;
};
/** 初始化表单数据 */
function initFormData() {
if (props.ruleScene) {
// 编辑模式：数据结构已对齐，直接使用后端数据
isEdit.value = true;
formData.value = {
...props.ruleScene,
// 确保触发器数组不为空
triggers: (props.ruleScene.triggers?.length as any)
? props.ruleScene.triggers
: [
{
type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
productId: undefined,
deviceId: undefined,
identifier: undefined,
operator: undefined,
value: undefined,
cronExpression: undefined,
conditionGroups: [],
},
],
// 确保执行器数组不为空
actions: props.ruleScene.actions || [],
};
} else {
// 新增模式：使用默认数据
isEdit.value = false;
formData.value = createDefaultFormData();
}
}
/** 监听抽屉显示 */
watch(drawerVisible, async (visible) => {
if (visible) {
initFormData();
// 重置表单验证状态
await nextTick();
formRef.value?.clearValidate();
}
});
/** 监听编辑数据变化 */
watch(
() => props.ruleScene,
() => {
if (drawerVisible.value) {
initFormData();
}
},
{ deep: true },
);
</script>
<template>
<Drawer
v-model="drawerVisible"
:title="drawerTitle"
width="80%"
direction="rtl"
:close-on-click-modal="false"
:close-on-press-escape="false"
@close="handleClose"
>
<Form
ref="formRef"
:model="formData"
:rules="formRules as any"
label-width="110px"
>
<!-- 基础信息配置 -->
<BasicInfoSection v-model="formData" :rules="formRules" />
<!-- 触发器配置 -->
<TriggerSection v-model:triggers="formData.triggers as any" />
<!-- 执行器配置 -->
<ActionSection v-model:actions="formData.actions as any" />
</Form>
<template #footer>
<div class="drawer-footer">
<Button :disabled="submitLoading" type="primary" @click="handleSubmit">
<IconifyIcon icon="ep:check" />
确 定
</Button>
<Button @click="handleClose">
<IconifyIcon icon="ep:close" />
取 消
</Button>
</div>
</template>
</Drawer>
</template>

90
apps/web-antd/src/views/iot/rule/scene/form/sections/action-section.vue
View File

@ -29,20 +29,20 @@ const emit = defineEmits<{
const actions = useVModel(props, 'actions', emit); const actions = useVModel(props, 'actions', emit);
/** 获取执行器标签类型（用于 el-tag 的 type 属性） */ /** 获取执行器标签颜色（antd Tag `color`） */
function getActionTypeTag( function getActionTypeColor(
type: number, type: number,
): 'danger' | 'info' | 'primary' | 'success' | 'warning' { ): 'default' | 'error' | 'processing' | 'success' | 'warning' {
const actionTypeTags: Record< const actionTypeTags: Record<
number, number,
'danger' | 'info' | 'primary' | 'success' | 'warning' 'default' | 'error' | 'processing' | 'success' | 'warning'
> = { > = {
[IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'primary', [IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET]: 'processing',
[IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success', [IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE]: 'success',
[IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'danger', [IotRuleSceneActionTypeEnum.ALERT_TRIGGER]: 'error',
[IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning', [IotRuleSceneActionTypeEnum.ALERT_RECOVER]: 'warning',
} as const; } as const;
return actionTypeTags[type] || 'info'; return actionTypeTags[type] || 'default';
} }
/** 判断是否为设备执行器类型 */ /** 判断是否为设备执行器类型 */
@ -69,7 +69,7 @@ function isAlertAction(type: number): boolean {
*/ */
function createDefaultActionData(): Action { function createDefaultActionData(): Action {
return { return {
type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET.toString(), // 默认为设备属性设置 type: IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET, // 默认为设备属性设置
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: undefined, // 物模型标识符（服务调用时使用） identifier: undefined, // 物模型标识符（服务调用时使用）
@ -100,7 +100,7 @@ function removeAction(index: number) {
* @param type 执行器类型 * @param type 执行器类型
*/ */
function updateActionType(index: number, type: number) { function updateActionType(index: number, type: number) {
actions.value[index]!.type = type.toString(); actions.value[index]!.type = type;
onActionTypeChange(actions.value[index] as Action, type); onActionTypeChange(actions.value[index] as Action, type);
} }
@ -120,9 +120,6 @@ function updateAction(index: number, action: Action) {
*/ */
function updateActionAlertConfig(index: number, alertConfigId?: number) { function updateActionAlertConfig(index: number, alertConfigId?: number) {
actions.value[index]!.alertConfigId = alertConfigId; actions.value[index]!.alertConfigId = alertConfigId;
if (actions.value[index]) {
actions.value[index].alertConfigId = alertConfigId;
}
} }
/** /**
@ -130,22 +127,21 @@ function updateActionAlertConfig(index: number, alertConfigId?: number) {
* @param action 执行器对象 * @param action 执行器对象
* @param type 执行器类型 * @param type 执行器类型
*/ */
function onActionTypeChange(action: Action, type: any) { function onActionTypeChange(action: Action, type: number) {
// 清理不相关的配置，确保数据结构干净
if (isDeviceAction(type)) { if (isDeviceAction(type)) {
// 设备控制类型：清理告警配置，确保设备参数存在 // 设备控制类型：清理告警配置，确保设备参数存在
action.alertConfigId = undefined; action.alertConfigId = undefined;
if (!(action as any).params) { if (!action.params) {
(action as any).params = ''; action.params = {};
} }
// 如果从其他类型切换到设备控制类型，清空identifier（让用户重新选择） // 切换到设备控制类型时清空 identifier，让用户重新选择
if (action.identifier && type !== (action as any).type) { if (action.identifier && type !== action.type) {
action.identifier = undefined; action.identifier = undefined;
} }
} else if (isAlertAction(type)) { } else if (isAlertAction(type)) {
action.productId = undefined; action.productId = undefined;
action.deviceId = undefined; action.deviceId = undefined;
action.identifier = undefined; // 清理服务标识符 action.identifier = undefined;
action.params = undefined; action.params = undefined;
action.alertConfigId = undefined; action.alertConfigId = undefined;
} }
@ -156,12 +152,12 @@ function onActionTypeChange(action: Action, type: any) {
<Card class="rounded-lg border border-primary" shadow="never"> <Card class="rounded-lg border border-primary" shadow="never">
<template #title> <template #title>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<IconifyIcon icon="ep:setting" class="text-18px text-primary" /> <IconifyIcon icon="ep:setting" class="text-[18px] text-primary" />
<span class="text-16px font-600 text-primary"> 执行器配置 </span> <span class="text-[16px] font-semibold text-primary"> 执行器配置 </span>
<Tag size="small" type="info"> {{ actions.length }} 个执行器 </Tag> <Tag color="default"> {{ actions.length }} 个执行器 </Tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<Button type="primary" size="small" @click="addAction"> <Button type="primary" size="small" @click="addAction">
<IconifyIcon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
添加执行器 添加执行器
@ -182,43 +178,42 @@ function onActionTypeChange(action: Action, type: any) {
</div> </div>
<!-- 执行器列表 --> <!-- 执行器列表 -->
<div v-else class="space-y-24px"> <div v-else class="space-y-[24px]">
<div <div
v-for="(action, index) in actions" v-for="(action, index) in actions"
:key="`action-${index}`" :key="`action-${index}`"
class="rounded-lg border-2 border-blue-200 bg-blue-50 shadow-sm transition-shadow hover:shadow-md" class="rounded-lg border border-blue-200 bg-blue-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-blue-900/40 dark:bg-blue-950/20"
> >
<!-- 执行器头部 - 蓝色主题 --> <!-- 执行器头部（蓝色主题） -->
<div <div
class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 p-4" class="flex items-center justify-between rounded-t-lg border-b border-blue-200 bg-gradient-to-r from-blue-50 to-sky-50 px-4 py-[10px] dark:border-blue-900/40 dark:from-blue-950/30 dark:to-sky-950/30"
> >
<div class="gap-12px flex items-center"> <div class="gap-[10px] flex items-center">
<div <div
class="font-600 flex items-center gap-2 text-base text-blue-700" class="font-semibold flex items-center gap-2 text-sm text-blue-700 dark:text-blue-300"
> >
<div <div
class="flex size-6 items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white" class="flex w-[22px] h-[22px] items-center justify-center rounded-full bg-blue-500 text-xs font-bold text-white"
> >
{{ index + 1 }} {{ index + 1 }}
</div> </div>
<span>执行器 {{ index + 1 }}</span> <span>执行器 {{ index + 1 }}</span>
</div> </div>
<Tag <Tag
:type="getActionTypeTag(action.type as any)" :color="getActionTypeColor(action.type as number)"
size="small" class="font-medium"
class="font-500"
> >
{{ getActionTypeLabel(action.type as any) }} {{ getActionTypeLabel(action.type as number) }}
</Tag> </Tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<Button <Button
v-if="actions.length > 1" v-if="actions.length > 1"
danger danger
size="small" size="small"
text type="link"
@click="removeAction(index)"
class="hover:bg-red-50" class="hover:bg-red-50"
@click="removeAction(index)"
> >
<IconifyIcon icon="lucide:trash-2" /> <IconifyIcon icon="lucide:trash-2" />
删除 删除
@ -227,7 +222,7 @@ function onActionTypeChange(action: Action, type: any) {
</div> </div>
<!-- 执行器内容区域 --> <!-- 执行器内容区域 -->
<div class="p-16px space-y-16px"> <div class="p-[16px] space-y-[16px]">
<!-- 执行类型选择 --> <!-- 执行类型选择 -->
<div class="w-full"> <div class="w-full">
<Form.Item label="执行类型" required> <Form.Item label="执行类型" required>
@ -243,16 +238,17 @@ function onActionTypeChange(action: Action, type: any) {
<Select.Option <Select.Option
v-for="option in getActionTypeOptions()" v-for="option in getActionTypeOptions()"
:key="option.value" :key="option.value"
:label="option.label"
:value="option.value" :value="option.value"
/> >
{{ option.label }}
</Select.Option>
</Select> </Select>
</Form.Item> </Form.Item>
</div> </div>
<!-- 设备控制配置 --> <!-- 设备控制配置 -->
<DeviceControlConfig <DeviceControlConfig
v-if="isDeviceAction(action.type as any)" v-if="isDeviceAction(action.type as number)"
:model-value="action" :model-value="action"
@update:model-value="(value) => updateAction(index, value)" @update:model-value="(value) => updateAction(index, value)"
/> />
@ -261,7 +257,7 @@ function onActionTypeChange(action: Action, type: any) {
<AlertConfig <AlertConfig
v-if=" v-if="
action.type === action.type ===
IotRuleSceneActionTypeEnum.ALERT_RECOVER.toString() IotRuleSceneActionTypeEnum.ALERT_RECOVER
" "
:model-value="action.alertConfigId" :model-value="action.alertConfigId"
@update:model-value=" @update:model-value="
@ -273,14 +269,14 @@ function onActionTypeChange(action: Action, type: any) {
<div <div
v-if=" v-if="
action.type === action.type ===
IotRuleSceneActionTypeEnum.ALERT_TRIGGER.toString() IotRuleSceneActionTypeEnum.ALERT_TRIGGER
" "
class="bg-fill-color-blank rounded-lg border border-border p-4" class="bg-fill-color-blank rounded-lg border border-border p-4"
> >
<div class="mb-2 flex items-center gap-2"> <div class="mb-2 flex items-center gap-2">
<IconifyIcon icon="ep:warning" class="text-base text-warning" /> <IconifyIcon icon="ep:warning" class="text-base text-warning" />
<span class="font-600 text-sm text-primary">触发告警</span> <span class="font-semibold text-sm text-primary">触发告警</span>
<Tag size="small" type="warning">自动执行</Tag> <Tag color="warning">自动执行</Tag>
</div> </div>
<div class="text-xs leading-relaxed text-secondary"> <div class="text-xs leading-relaxed text-secondary">
当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 -> 当触发条件满足时，系统将自动发送告警通知，可在菜单 [告警中心 ->
@ -292,7 +288,7 @@ function onActionTypeChange(action: Action, type: any) {
</div> </div>
<!-- 添加提示 --> <!-- 添加提示 -->
<div v-if="actions.length > 0" class="py-16px text-center"> <div v-if="actions.length > 0" class="py-[16px] text-center">
<Button type="primary" plain @click="addAction"> <Button type="primary" plain @click="addAction">
<IconifyIcon icon="ep:plus" /> <IconifyIcon icon="ep:plus" />
继续添加执行器 继续添加执行器

32
apps/web-antd/src/views/iot/rule/scene/form/sections/basic-info-section.vue
View File

@ -16,7 +16,6 @@ defineOptions({ name: 'BasicInfoSection' });
const props = defineProps<{ const props = defineProps<{
modelValue: IotSceneRule; modelValue: IotSceneRule;
rules?: any;
}>(); }>();
const emit = defineEmits<{ const emit = defineEmits<{
@ -27,25 +26,25 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
</script> </script>
<template> <template>
<Card class="rounded-8px mb-10px border border-primary" shadow="never"> <Card class="rounded-[8px] mb-[10px] border border-primary" shadow="never">
<template #title> <template #title>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<IconifyIcon icon="ep:info-filled" class="text-18px text-primary" /> <IconifyIcon icon="ep:info-filled" class="text-[18px] text-primary" />
<span class="text-16px font-600 text-primary">基础信息</span> <span class="text-[16px] font-semibold text-primary">基础信息</span>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<DictTag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" /> <DictTag :type="DICT_TYPE.COMMON_STATUS" :value="formData.status" />
</div> </div>
</div> </div>
</template> </template>
<div class="p-0"> <div class="p-0">
<Row :gutter="24" class="mb-24px"> <Row :gutter="24" class="mb-[24px]">
<Col :span="12"> <Col :span="12">
<Form.Item label="场景名称" prop="name" required> <Form.Item label="场景名称" name="name" required>
<Input <Input
v-model="formData.name" v-model:value="formData.name"
placeholder="请输入场景名称" placeholder="请输入场景名称"
:maxlength="50" :maxlength="50"
show-word-limit show-word-limit
@ -54,15 +53,15 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
</Form.Item> </Form.Item>
</Col> </Col>
<Col :span="12"> <Col :span="12">
<Form.Item label="场景状态" prop="status" required> <Form.Item label="场景状态" name="status" required>
<Radio.Group v-model="formData.status"> <Radio.Group v-model:value="formData.status">
<Radio <Radio
v-for="(dict, index) in getDictOptions( v-for="(dict, index) in getDictOptions(
DICT_TYPE.COMMON_STATUS, DICT_TYPE.COMMON_STATUS,
'number', 'number',
)" )"
:key="index" :key="index"
:label="dict.value" :value="dict.value"
> >
{{ dict.label }} {{ dict.label }}
</Radio> </Radio>
@ -70,10 +69,9 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
</Form.Item> </Form.Item>
</Col> </Col>
</Row> </Row>
<Form.Item label="场景描述" prop="description"> <Form.Item label="场景描述" name="description">
<Input.TextArea <Input.TextArea
v-model="formData.description" v-model:value="formData.description"
type="text"
placeholder="请输入场景描述（可选）" placeholder="请输入场景描述（可选）"
:rows="3" :rows="3"
:maxlength="200" :maxlength="200"
@ -86,11 +84,11 @@ const formData = useVModel(props, 'modelValue', emit); // 表单数据
</template> </template>
<style scoped> <style scoped>
:deep(.el-form-item) { :deep(.ant-form-item) {
margin-bottom: 20px; margin-bottom: 20px;
} }
:deep(.el-form-item:last-child) { :deep(.ant-form-item:last-child) {
margin-bottom: 0; margin-bottom: 0;
} }
</style> </style>

99
apps/web-antd/src/views/iot/rule/scene/form/sections/trigger-section.vue
View File

@ -1,5 +1,5 @@
<script setup lang="ts"> <script setup lang="ts">
import type { Trigger } from '#/api/iot/rule/scene'; import type { Trigger, TriggerCondition } from '#/api/iot/rule/scene';
import { onMounted } from 'vue'; import { onMounted } from 'vue';
@ -16,6 +16,7 @@ import {
} from '#/views/iot/utils/constants'; } from '#/views/iot/utils/constants';
import DeviceTriggerConfig from '../configs/device-trigger-config.vue'; import DeviceTriggerConfig from '../configs/device-trigger-config.vue';
import TimerConditionGroupConfig from '../configs/timer-condition-group-config.vue';
/** 触发器配置组件 */ /** 触发器配置组件 */
defineOptions({ name: 'TriggerSection' }); defineOptions({ name: 'TriggerSection' });
@ -30,20 +31,20 @@ const emit = defineEmits<{
const triggers = useVModel(props, 'triggers', emit); const triggers = useVModel(props, 'triggers', emit);
/** 获取触发器标签类型（用于 el-tag 的 type 属性） */ /** 获取触发器标签颜色（antd Tag `color`） */
function getTriggerTagType( function getTriggerTagColor(
type: number, type: number,
): 'danger' | 'info' | 'primary' | 'success' | 'warning' { ): 'default' | 'error' | 'processing' | 'success' | 'warning' {
if (type === IotRuleSceneTriggerTypeEnum.TIMER) { if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
return 'warning'; return 'warning';
} }
return isDeviceTrigger(type) ? 'success' : 'info'; return isDeviceTrigger(type) ? 'success' : 'default';
} }
/** 添加触发器 */ /** 添加触发器 */
function addTrigger() { function addTrigger() {
const newTrigger: Trigger = { const newTrigger: Trigger = {
type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE.toString(), type: IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE,
productId: undefined, productId: undefined,
deviceId: undefined, deviceId: undefined,
identifier: undefined, identifier: undefined,
@ -65,13 +66,14 @@ function removeTrigger(index: number) {
} }
} }
// TODO @AI：1）这种注释，可以简化成 /** */ 单行么？；2）vue3 + ep 都是这样的注释么，也可以简化下么？3）其它文件，看看是不是也检查下。
/** /**
* 更新触发器类型 * 更新触发器类型
* @param index 触发器索引 * @param index 触发器索引
* @param type 触发器类型 * @param type 触发器类型
*/ */
function updateTriggerType(index: number, type: number) { function updateTriggerType(index: number, type: number) {
triggers.value[index]!.type = type.toString(); triggers.value[index]!.type = type;
onTriggerTypeChange(index, type); onTriggerTypeChange(index, type);
} }
@ -93,6 +95,18 @@ function updateTriggerCronConfig(index: number, cronExpression?: string) {
triggers.value[index]!.cronExpression = cronExpression; triggers.value[index]!.cronExpression = cronExpression;
} }
/**
* 更新触发器条件组配置
* @param index 触发器索引
* @param conditionGroups 条件组数组
*/
function updateTriggerConditionGroups(
index: number,
conditionGroups: TriggerCondition[][],
) {
triggers.value[index]!.conditionGroups = conditionGroups;
}
/** /**
* 处理触发器类型变化事件 * 处理触发器类型变化事件
* @param index 触发器索引 * @param index 触发器索引
@ -118,13 +132,13 @@ onMounted(() => {
</script> </script>
<template> <template>
<Card class="rounded-8px mb-10px border border-primary" shadow="never"> <Card class="rounded-[8px] mb-[10px] border border-primary" shadow="never">
<template #title> <template #title>
<div class="flex items-center justify-between"> <div class="flex items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<IconifyIcon icon="ep:lightning" class="text-18px text-primary" /> <IconifyIcon icon="ep:lightning" class="text-[18px] text-primary" />
<span class="text-16px font-600 text-primary">触发器配置</span> <span class="text-[16px] font-semibold text-primary">触发器配置</span>
<Tag size="small" type="info"> {{ triggers.length }} 个触发器 </Tag> <Tag color="default"> {{ triggers.length }} 个触发器 </Tag>
</div> </div>
<Button type="primary" size="small" @click="addTrigger"> <Button type="primary" size="small" @click="addTrigger">
<IconifyIcon icon="lucide:plus" /> <IconifyIcon icon="lucide:plus" />
@ -133,45 +147,44 @@ onMounted(() => {
</div> </div>
</template> </template>
<div class="p-16px space-y-24px"> <div class="p-[16px] space-y-[24px]">
<!-- 触发器列表 --> <!-- 触发器列表 -->
<div v-if="triggers.length > 0" class="space-y-24px"> <div v-if="triggers.length > 0" class="space-y-[24px]">
<div <div
v-for="(triggerItem, index) in triggers" v-for="(triggerItem, index) in triggers"
:key="`trigger-${index}`" :key="`trigger-${index}`"
class="rounded-8px border-2 border-green-200 bg-green-50 shadow-sm transition-shadow hover:shadow-md" class="rounded-[8px] border border-green-200 bg-green-50/40 shadow-sm transition-shadow hover:shadow-md dark:border-green-900/40 dark:bg-green-950/20"
> >
<!-- 触发器头部 - 绿色主题 --> <!-- 触发器头部（绿色主题） -->
<div <div
class="p-16px rounded-t-6px flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50" class="px-[16px] py-[10px] rounded-t-[8px] flex items-center justify-between border-b border-green-200 bg-gradient-to-r from-green-50 to-emerald-50 dark:border-green-900/40 dark:from-green-950/30 dark:to-emerald-950/30"
> >
<div class="gap-12px flex items-center"> <div class="gap-[12px] flex items-center">
<div <div
class="gap-8px text-16px font-600 flex items-center text-green-700" class="gap-[8px] text-[14px] font-semibold flex items-center text-green-700 dark:text-green-300"
> >
<div <div
class="w-24px h-24px text-12px flex items-center justify-center rounded-full bg-green-500 font-bold text-white" class="w-[22px] h-[22px] text-[12px] flex items-center justify-center rounded-full bg-green-500 font-bold text-white"
> >
{{ index + 1 }} {{ index + 1 }}
</div> </div>
<span>触发器 {{ index + 1 }}</span> <span>触发器 {{ index + 1 }}</span>
</div> </div>
<Tag <Tag
size="small" :color="getTriggerTagColor(triggerItem.type as number)"
:type="getTriggerTagType(triggerItem.type as any)" class="font-medium"
class="font-500"
> >
{{ getTriggerTypeLabel(triggerItem.type as any) }} {{ getTriggerTypeLabel(triggerItem.type as number) }}
</Tag> </Tag>
</div> </div>
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<Button <Button
v-if="triggers.length > 1" v-if="triggers.length > 1"
danger danger
size="small" size="small"
text type="link"
@click="removeTrigger(index)"
class="hover:bg-red-50" class="hover:bg-red-50"
@click="removeTrigger(index)"
> >
<IconifyIcon icon="lucide:trash-2" /> <IconifyIcon icon="lucide:trash-2" />
删除 删除
@ -180,10 +193,10 @@ onMounted(() => {
</div> </div>
<!-- 触发器内容区域 --> <!-- 触发器内容区域 -->
<div class="p-16px space-y-16px"> <div class="p-[16px] space-y-[16px]">
<!-- 设备触发配置 --> <!-- 设备触发配置 -->
<DeviceTriggerConfig <DeviceTriggerConfig
v-if="isDeviceTrigger(triggerItem.type as any)" v-if="isDeviceTrigger(triggerItem.type as number)"
:model-value="triggerItem" :model-value="triggerItem"
:index="index" :index="index"
@update:model-value=" @update:model-value="
@ -196,27 +209,27 @@ onMounted(() => {
<div <div
v-else-if=" v-else-if="
triggerItem.type === triggerItem.type ===
IotRuleSceneTriggerTypeEnum.TIMER.toString() IotRuleSceneTriggerTypeEnum.TIMER
" "
class="gap-16px flex flex-col" class="gap-[16px] flex flex-col"
> >
<div <div
class="gap-8px p-12px px-16px rounded-6px flex items-center border border-primary bg-background" class="gap-[8px] p-[12px] px-[16px] rounded-[6px] flex items-center border border-primary bg-background"
> >
<IconifyIcon <IconifyIcon
icon="lucide:timer" icon="lucide:timer"
class="text-18px text-danger" class="text-[18px] text-danger"
/> />
<span class="text-14px font-500 text-primary"> <span class="text-[14px] font-medium text-primary">
定时触发配置 定时触发配置
</span> </span>
</div> </div>
<!-- CRON 表达式配置 --> <!-- CRON 表达式配置 -->
<div <div
class="p-16px rounded-6px border border-primary bg-background" class="p-[16px] rounded-[6px] border border-primary bg-background"
> >
<Form.Item label="CRON表达式" required> <Form.Item label="CRON 表达式" required>
<CronTab <CronTab
:model-value="triggerItem.cronExpression || '0 0 12 * * ?'" :model-value="triggerItem.cronExpression || '0 0 12 * * ?'"
@update:model-value=" @update:model-value="
@ -225,18 +238,26 @@ onMounted(() => {
/> />
</Form.Item> </Form.Item>
</div> </div>
<!-- 附加条件组配置 -->
<TimerConditionGroupConfig
:model-value="triggerItem.conditionGroups"
@update:model-value="
(value) => updateTriggerConditionGroups(index, value)
"
/>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<!-- 空状态 --> <!-- 空状态 -->
<div v-else class="py-40px text-center"> <div v-else class="py-[40px] text-center">
<Empty description="暂无触发器"> <Empty description="暂无触发器">
<template #description> <template #description>
<div class="space-y-8px"> <div class="space-y-[8px]">
<p class="text-secondary">暂无触发器配置</p> <p class="text-secondary">暂无触发器配置</p>
<p class="text-12px text-primary"> <p class="text-[12px] text-primary">
请使用上方的"添加触发器"按钮来设置触发规则 请使用上方的"添加触发器"按钮来设置触发规则
</p> </p>
</div> </div>

12
apps/web-antd/src/views/iot/rule/scene/form/selectors/device-selector.vue
View File

@ -78,8 +78,8 @@ watch(
<template> <template>
<Select <Select
:model-value="modelValue" :value="modelValue"
@update:model-value="handleChange" @change="handleChange"
placeholder="请选择设备" placeholder="请选择设备"
filterable filterable
clearable clearable
@ -93,16 +93,16 @@ watch(
:label="device.deviceName" :label="device.deviceName"
:value="device.id" :value="device.id"
> >
<div class="py-4px flex w-full items-center justify-between"> <div class="py-[4px] flex w-full items-center justify-between">
<div class="flex-1"> <div class="flex-1">
<div class="text-14px font-500 mb-2px text-primary"> <div class="text-[14px] font-medium mb-[2px] text-primary">
{{ device.deviceName }} {{ device.deviceName }}
</div> </div>
<div class="text-12px text-primary"> <div class="text-[12px] text-primary">
{{ device.deviceKey }} {{ device.deviceKey }}
</div> </div>
</div> </div>
<div class="gap-4px flex items-center" v-if="device.id > 0"> <div class="gap-[4px] flex items-center" v-if="device.id > 0">
<DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" /> <DictTag :type="DICT_TYPE.IOT_DEVICE_STATE" :value="device.state" />
</div> </div>
</div> </div>

14
apps/web-antd/src/views/iot/rule/scene/form/selectors/operator-selector.vue
View File

@ -239,7 +239,7 @@ watch(
<template> <template>
<div class="w-full"> <div class="w-full">
<Select <Select
v-model="localValue" v-model:value="localValue"
placeholder="请选择操作符" placeholder="请选择操作符"
@change="handleChange" @change="handleChange"
class="w-full" class="w-full"
@ -250,18 +250,18 @@ watch(
:label="operator.label" :label="operator.label"
:value="operator.value" :value="operator.value"
> >
<div class="py-4px flex w-full items-center justify-between"> <div class="py-[4px] flex w-full items-center justify-between">
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<div class="text-14px font-500 text-primary"> <div class="text-[14px] font-medium text-primary">
{{ operator.label }} {{ operator.label }}
</div> </div>
<div <div
class="text-12px px-6px py-2px rounded-4px bg-primary-light-9 font-mono text-primary" class="text-[12px] px-[6px] py-[2px] rounded-[4px] bg-primary-light-9 font-mono text-primary"
> >
{{ operator.symbol }} {{ operator.symbol }}
</div> </div>
</div> </div>
<div class="text-12px text-secondary"> <div class="text-[12px] text-secondary">
{{ operator.description }} {{ operator.description }}
</div> </div>
</div> </div>
@ -271,7 +271,7 @@ watch(
</template> </template>
<style scoped> <style scoped>
:deep(.el-select-dropdown__item) { :deep(.ant-select-item-option-content) {
height: auto; height: auto;
padding: 8px 20px; padding: 8px 20px;
} }

11
apps/web-antd/src/views/iot/rule/scene/form/selectors/product-selector.vue
View File

@ -47,6 +47,7 @@ async function getProductList() {
} }
} }
// TODO @AI：这种，应该注释 /** */ 把。
// 组件挂载时获取产品列表 // 组件挂载时获取产品列表
onMounted(() => { onMounted(() => {
getProductList(); getProductList();
@ -55,8 +56,8 @@ onMounted(() => {
<template> <template>
<Select <Select
:model-value="modelValue" :value="modelValue"
@update:model-value="handleChange" @change="handleChange"
placeholder="请选择产品" placeholder="请选择产品"
filterable filterable
clearable clearable
@ -69,12 +70,12 @@ onMounted(() => {
:label="product.name" :label="product.name"
:value="product.id" :value="product.id"
> >
<div class="py-4px flex w-full items-center justify-between"> <div class="py-[4px] flex w-full items-center justify-between">
<div class="flex-1"> <div class="flex-1">
<div class="text-14px font-500 mb-2px text-primary"> <div class="text-[14px] font-medium mb-[2px] text-primary">
{{ product.name }} {{ product.name }}
</div> </div>
<div class="text-12px text-secondary"> <div class="text-[12px] text-secondary">
{{ product.productKey }} {{ product.productKey }}
</div> </div>
</div> </div>

105
apps/web-antd/src/views/iot/rule/scene/form/selectors/property-selector.vue
View File

@ -1,11 +1,6 @@
<!-- 属性选择器组件 --> <!-- 属性选择器组件 -->
<script setup lang="ts"> <script setup lang="ts">
import type { import type { ThingModelApi } from '#/api/iot/thingmodel';
ThingModelApi,
ThingModelEvent,
ThingModelProperty,
ThingModelService,
} from '#/api/iot/thingmodel';
import { computed, ref, watch } from 'vue'; import { computed, ref, watch } from 'vue';
@ -18,7 +13,7 @@ import { getThingModelListByProductId } from '#/api/iot/thingmodel';
import { import {
getAccessModeLabel, getAccessModeLabel,
getDataTypeName, getDataTypeName,
getDataTypeTagType, getDataTypeTagColor,
getEventTypeLabel, getEventTypeLabel,
getThingModelServiceCallTypeLabel, getThingModelServiceCallTypeLabel,
IotRuleSceneTriggerTypeEnum, IotRuleSceneTriggerTypeEnum,
@ -41,7 +36,6 @@ const emit = defineEmits<{
(e: 'change', value: { config: any; type: string }): void; (e: 'change', value: { config: any; type: string }): void;
}>(); }>();
// TODO 芋艿
/** 属性选择器内部使用的统一数据结构 */ /** 属性选择器内部使用的统一数据结构 */
interface PropertySelectorItem { interface PropertySelectorItem {
identifier: string; identifier: string;
@ -55,11 +49,11 @@ interface PropertySelectorItem {
range?: string; range?: string;
eventType?: string; eventType?: string;
callType?: string; callType?: string;
inputParams?: ThingModelParam[]; inputParams?: ThingModelApi.Param[];
outputParams?: ThingModelParam[]; outputParams?: ThingModelApi.Param[];
property?: ThingModelProperty; property?: ThingModelApi.Property;
event?: ThingModelEvent; event?: ThingModelApi.Event;
service?: ThingModelService; service?: ThingModelApi.Service;
} }
const localValue = useVModel(props, 'modelValue', emit); const localValue = useVModel(props, 'modelValue', emit);
@ -75,6 +69,8 @@ const propertyGroups = computed(() => {
if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) { if (props.triggerType === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST) {
groups.push({ groups.push({
label: THING_MODEL_GROUP_LABELS.PROPERTY, label: THING_MODEL_GROUP_LABELS.PROPERTY,
// TODO @AI：不要这种简单的缩写，p 是 property；
// TODO @AI：这里好像 linter 报错；
options: propertyList.value.filter( options: propertyList.value.filter(
(p) => p.type === IoTThingModelTypeEnum.PROPERTY, (p) => p.type === IoTThingModelTypeEnum.PROPERTY,
), ),
@ -275,14 +271,14 @@ watch(
</script> </script>
<template> <template>
<div class="gap-8px flex items-center"> <div class="gap-[8px] flex items-center">
<Select <Select
v-model="localValue" v-model:value="localValue"
placeholder="请选择监控项" placeholder="请选择监控项"
filterable filterable
clearable clearable
@change="handleChange" @change="handleChange"
class="!w-150px" class="!w-[150px]"
:loading="loading" :loading="loading"
> >
<Select.OptionGroup <Select.OptionGroup
@ -296,14 +292,13 @@ watch(
:label="property.name" :label="property.name"
:value="property.identifier" :value="property.identifier"
> >
<div class="py-2px flex w-full items-center justify-between"> <div class="py-[2px] flex w-full items-center justify-between">
<span class="text-14px font-500 flex-1 truncate text-primary"> <span class="text-[14px] font-medium flex-1 truncate text-primary">
{{ property.name }} {{ property.name }}
</span> </span>
<Tag <Tag
:type="getDataTypeTagType(property.dataType)" :color="getDataTypeTagColor(property.dataType)"
size="small" class="ml-[8px] flex-shrink-0"
class="ml-8px flex-shrink-0"
> >
{{ property.identifier }} {{ property.identifier }}
</Tag> </Tag>
@ -324,9 +319,8 @@ watch(
> >
<template #reference> <template #reference>
<Button <Button
type="primary" type="link"
text shape="circle"
circle
size="small" size="small"
class="flex-shrink-0" class="flex-shrink-0"
title="查看属性详情" title="查看属性详情"
@ -337,55 +331,52 @@ watch(
<!-- 弹出层内容 --> <!-- 弹出层内容 -->
<div class="property-detail-content"> <div class="property-detail-content">
<div class="gap-8px mb-12px flex items-center"> <div class="gap-[8px] mb-[12px] flex items-center">
<IconifyIcon icon="ep:info-filled" class="text-16px text-info" /> <IconifyIcon icon="ep:info-filled" class="text-[16px] text-info" />
<span class="text-14px font-500 text-primary"> <span class="text-[14px] font-medium text-primary">
{{ selectedProperty.name }} {{ selectedProperty.name }}
</span> </span>
<Tag <Tag :color="getDataTypeTagColor(selectedProperty.dataType)">
:type="getDataTypeTagType(selectedProperty.dataType)"
size="small"
>
{{ getDataTypeName(selectedProperty.dataType) }} {{ getDataTypeName(selectedProperty.dataType) }}
</Tag> </Tag>
</div> </div>
<div class="space-y-8px ml-24px"> <div class="space-y-[8px] ml-[24px]">
<div class="gap-8px flex items-start"> <div class="gap-[8px] flex items-start">
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
标识符： 标识符：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ selectedProperty.identifier }} {{ selectedProperty.identifier }}
</span> </span>
</div> </div>
<div <div
v-if="selectedProperty.description" v-if="selectedProperty.description"
class="gap-8px flex items-start" class="gap-[8px] flex items-start"
> >
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
描述： 描述：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ selectedProperty.description }} {{ selectedProperty.description }}
</span> </span>
</div> </div>
<div v-if="selectedProperty.unit" class="gap-8px flex items-start"> <div v-if="selectedProperty.unit" class="gap-[8px] flex items-start">
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
单位： 单位：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ selectedProperty.unit }} {{ selectedProperty.unit }}
</span> </span>
</div> </div>
<div v-if="selectedProperty.range" class="gap-8px flex items-start"> <div v-if="selectedProperty.range" class="gap-[8px] flex items-start">
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
取值范围： 取值范围：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ selectedProperty.range }} {{ selectedProperty.range }}
</span> </span>
</div> </div>
@ -396,12 +387,12 @@ watch(
selectedProperty.type === IoTThingModelTypeEnum.PROPERTY && selectedProperty.type === IoTThingModelTypeEnum.PROPERTY &&
selectedProperty.accessMode selectedProperty.accessMode
" "
class="gap-8px flex items-start" class="gap-[8px] flex items-start"
> >
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
访问模式： 访问模式：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ getAccessModeLabel(selectedProperty.accessMode) }} {{ getAccessModeLabel(selectedProperty.accessMode) }}
</span> </span>
</div> </div>
@ -411,12 +402,12 @@ watch(
selectedProperty.type === IoTThingModelTypeEnum.EVENT && selectedProperty.type === IoTThingModelTypeEnum.EVENT &&
selectedProperty.eventType selectedProperty.eventType
" "
class="gap-8px flex items-start" class="gap-[8px] flex items-start"
> >
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
事件类型： 事件类型：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ getEventTypeLabel(selectedProperty.eventType) }} {{ getEventTypeLabel(selectedProperty.eventType) }}
</span> </span>
</div> </div>
@ -426,12 +417,12 @@ watch(
selectedProperty.type === IoTThingModelTypeEnum.SERVICE && selectedProperty.type === IoTThingModelTypeEnum.SERVICE &&
selectedProperty.callType selectedProperty.callType
" "
class="gap-8px flex items-start" class="gap-[8px] flex items-start"
> >
<span class="text-12px min-w-60px flex-shrink-0 text-secondary"> <span class="text-[12px] min-w-[60px] flex-shrink-0 text-secondary">
调用类型： 调用类型：
</span> </span>
<span class="text-12px flex-1 text-primary"> <span class="text-[12px] flex-1 text-primary">
{{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }} {{ getThingModelServiceCallTypeLabel(selectedProperty.callType) }}
</span> </span>
</div> </div>
@ -442,24 +433,20 @@ watch(
</template> </template>
<style scoped> <style scoped>
/* 下拉选项样式 */ :deep(.ant-select-item-option-content) {
:deep(.el-select-dropdown__item) {
height: auto; height: auto;
padding: 6px 20px; padding: 6px 20px;
} }
/* 弹出层内容样式 */
.property-detail-content { .property-detail-content {
padding: 4px 0; padding: 4px 0;
} }
/* 弹出层自定义样式 */
:global(.property-detail-popover) { :global(.property-detail-popover) {
/* 可以在这里添加全局弹出层样式 */
max-width: 400px !important; max-width: 400px !important;
} }
:global(.property-detail-popover .el-popover__content) { :global(.property-detail-popover .ant-popover-inner-content) {
padding: 16px !important; padding: 16px !important;
} }
</style> </style>

341
apps/web-antd/src/views/iot/rule/scene/index.vue
View File

@ -2,9 +2,14 @@
import type { VxeTableGridOptions } from '#/adapter/vxe-table'; import type { VxeTableGridOptions } from '#/adapter/vxe-table';
import type { RuleSceneApi } from '#/api/iot/rule/scene'; import type { RuleSceneApi } from '#/api/iot/rule/scene';
import { Page, useVbenModal } from '@vben/common-ui'; import { ref } from 'vue';
import { message } from 'ant-design-vue'; import { Page, useVbenDrawer } from '@vben/common-ui';
import { CommonStatusEnum } from '@vben/constants';
import { IconifyIcon } from '@vben/icons';
import { formatDateTime } from '@vben/utils';
import { Card, Col, message, Row, Tag, Tooltip } from 'ant-design-vue';
import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table'; import { ACTION_ICON, TableAction, useVbenVxeGrid } from '#/adapter/vxe-table';
import { import {
@ -13,17 +18,29 @@ import {
updateSceneRuleStatus, updateSceneRuleStatus,
} from '#/api/iot/rule/scene'; } from '#/api/iot/rule/scene';
import { $t } from '#/locales'; import { $t } from '#/locales';
import { CronUtils } from '#/utils/cron';
import {
getActionTypeLabel,
getTriggerTypeLabel,
IotRuleSceneActionTypeEnum,
IotRuleSceneTriggerTypeEnum,
} from '#/views/iot/utils/constants';
import { useGridColumns, useGridFormSchema } from './data'; import { useGridColumns, useGridFormSchema } from './data';
import Form from './modules/form.vue'; import Form from './modules/form.vue';
defineOptions({ name: 'IoTRuleScene' }); const [FormDrawer, formDrawerApi] = useVbenDrawer({
const [FormModal, formModalApi] = useVbenModal({
connectedComponent: Form, connectedComponent: Form,
destroyOnClose: true, destroyOnClose: true,
}); });
const statistics = ref({
total: 0,
enabled: 0,
disabled: 0,
timerRules: 0,
}); // 统计数据
/** 刷新表格 */ /** 刷新表格 */
function handleRefresh() { function handleRefresh() {
gridApi.query(); gridApi.query();
@ -31,25 +48,29 @@ function handleRefresh() {
/** 创建场景规则 */ /** 创建场景规则 */
function handleCreate() { function handleCreate() {
formModalApi.setData(null).open(); formDrawerApi.setData(null).open();
} }
/** 编辑场景规则 */ /** 编辑场景规则 */
function handleEdit(row: RuleSceneApi.SceneRule) { function handleEdit(row: RuleSceneApi.SceneRule) {
formModalApi.setData(row).open(); formDrawerApi.setData(row).open();
} }
/** 启用/停用场景规则 */ /** 启用/停用场景规则 */
async function handleToggleStatus(row: RuleSceneApi.SceneRule) { async function handleToggleStatus(row: RuleSceneApi.SceneRule) {
const newStatus = row.status === 0 ? 1 : 0; const newStatus =
row.status === CommonStatusEnum.ENABLE
? CommonStatusEnum.DISABLE
: CommonStatusEnum.ENABLE;
const hideLoading = message.loading({ const hideLoading = message.loading({
content: newStatus === 0 ? '正在启用...' : '正在停用...', content:
newStatus === CommonStatusEnum.ENABLE ? '正在启用...' : '正在停用...',
duration: 0, duration: 0,
}); });
try { try {
await updateSceneRuleStatus(row.id as number, newStatus); await updateSceneRuleStatus(row.id as number, newStatus);
message.success({ message.success({
content: newStatus === 0 ? '启用成功' : '停用成功', content: newStatus === CommonStatusEnum.ENABLE ? '启用成功' : '停用成功',
}); });
handleRefresh(); handleRefresh();
} finally { } finally {
@ -74,6 +95,164 @@ async function handleDelete(row: RuleSceneApi.SceneRule) {
} }
} }
/** 判断规则是否包含定时触发器 */
function hasTimerTrigger(row: RuleSceneApi.SceneRule): boolean {
return (
row.triggers?.some(
(trigger) =>
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
) || false
);
}
/** 触发器列表项（用于列内多 tag 渲染） */
interface TriggerCellItem {
color: string;
label: string;
meta?: string;
}
/** 动作列表项 */
interface ActionCellItem {
color: string;
label: string;
meta?: string;
}
/** 触发器 → tag 颜色（按 5 种类型区分） */
function colorOfTrigger(type?: number): string {
switch (type) {
case IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST: {
return 'orange';
}
case IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST: {
return 'blue';
}
case IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE: {
return 'purple';
}
case IotRuleSceneTriggerTypeEnum.DEVICE_STATE_UPDATE: {
return 'cyan';
}
case IotRuleSceneTriggerTypeEnum.TIMER: {
return 'gold';
}
default: {
return 'default';
}
}
}
/** 动作 → tag 颜色（按 4 种类型区分） */
function colorOfAction(type?: number): string {
switch (type) {
case IotRuleSceneActionTypeEnum.ALERT_RECOVER: {
return 'green';
}
case IotRuleSceneActionTypeEnum.ALERT_TRIGGER: {
return 'red';
}
case IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET: {
return 'blue';
}
case IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE: {
return 'purple';
}
default: {
return 'default';
}
}
}
/** 触发器列：每个触发器一项 */
function getTriggerCellItems(row: RuleSceneApi.SceneRule): TriggerCellItem[] {
if (!row.triggers?.length) {
return [];
}
return row.triggers.map((trigger) => {
const type = trigger.type ?? 0;
let label = getTriggerTypeLabel(type);
if (
(type === IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST ||
type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE) &&
trigger.identifier
) {
label += ` · ${trigger.identifier}`;
} else if (type === IotRuleSceneTriggerTypeEnum.TIMER) {
label += ` · ${CronUtils.format(trigger.cronExpression || '')}`;
}
const meta = trigger.deviceId
? `设备 #${trigger.deviceId}`
: (trigger.productId
? `产品 #${trigger.productId}`
: '');
return { color: colorOfTrigger(type), label, meta };
});
}
/** 动作列：每个动作一项 */
function getActionCellItems(row: RuleSceneApi.SceneRule): ActionCellItem[] {
if (!row.actions?.length) {
return [];
}
return row.actions.map((action) => {
const type = action.type ?? 0;
const label = getActionTypeLabel(type);
const meta = action.deviceId
? `设备 #${action.deviceId}`
: action.productId
? `产品 #${action.productId}`
: action.alertConfigId
? `告警 #${action.alertConfigId}`
: '';
return { color: colorOfAction(type), label, meta };
});
}
/** 取定时触发器的 CRON 频率描述 */
function getCronFrequency(row: RuleSceneApi.SceneRule): string {
const timerTrigger = row.triggers?.find(
(trigger) =>
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
);
return timerTrigger?.cronExpression
? CronUtils.getFrequencyDescription(timerTrigger.cronExpression)
: '';
}
/** 取定时触发器原始 CRON 表达式 */
function getCronExpression(row: RuleSceneApi.SceneRule): string {
const timerTrigger = row.triggers?.find(
(trigger) =>
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
);
return timerTrigger?.cronExpression || '';
}
/** 取定时触发器下次执行时间 */
function getNextExecutionTime(row: RuleSceneApi.SceneRule): Date | null {
const timerTrigger = row.triggers?.find(
(trigger) =>
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER,
);
return timerTrigger?.cronExpression
? CronUtils.getNextExecutionTime(timerTrigger.cronExpression)
: null;
}
/** 基于当前页列表刷新统计数据 */
function updateStatistics(rows: RuleSceneApi.SceneRule[]) {
statistics.value = {
total: rows.length,
enabled: rows.filter((item) => item.status === CommonStatusEnum.ENABLE)
.length,
disabled: rows.filter((item) => item.status === CommonStatusEnum.DISABLE)
.length,
timerRules: rows.filter((item) => hasTimerTrigger(item)).length,
};
}
const [Grid, gridApi] = useVbenVxeGrid({ const [Grid, gridApi] = useVbenVxeGrid({
formOptions: { formOptions: {
schema: useGridFormSchema(), schema: useGridFormSchema(),
@ -85,11 +264,13 @@ const [Grid, gridApi] = useVbenVxeGrid({
proxyConfig: { proxyConfig: {
ajax: { ajax: {
query: async ({ page }, formValues) => { query: async ({ page }, formValues) => {
return await getSceneRulePage({ const result = await getSceneRulePage({
pageNo: page.currentPage, pageNo: page.currentPage,
pageSize: page.pageSize, pageSize: page.pageSize,
...formValues, ...formValues,
}); });
updateStatistics(result.list || []);
return result;
}, },
}, },
}, },
@ -107,7 +288,80 @@ const [Grid, gridApi] = useVbenVxeGrid({
<template> <template>
<Page auto-content-height> <Page auto-content-height>
<FormModal @success="handleRefresh" /> <FormDrawer @success="handleRefresh" />
<!-- 统计卡片 -->
<Row :gutter="16" class="mb-4">
<Col :span="6">
<Card :body-style="{ padding: '12px 16px' }">
<div class="flex items-center">
<div
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-indigo-500 to-purple-600"
>
<IconifyIcon icon="ant-design:file-text-outlined" />
</div>
<div class="leading-tight">
<div class="text-xl font-semibold">
{{ statistics.total }}
</div>
<div class="text-xs text-secondary">总规则数</div>
</div>
</div>
</Card>
</Col>
<Col :span="6">
<Card :body-style="{ padding: '12px 16px' }">
<div class="flex items-center">
<div
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-pink-400 to-red-500"
>
<IconifyIcon icon="ant-design:check-outlined" />
</div>
<div class="leading-tight">
<div class="text-xl font-semibold">
{{ statistics.enabled }}
</div>
<div class="text-xs text-secondary">启用规则</div>
</div>
</div>
</Card>
</Col>
<Col :span="6">
<Card :body-style="{ padding: '12px 16px' }">
<div class="flex items-center">
<div
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-cyan-400 to-blue-500"
>
<IconifyIcon icon="ant-design:close-outlined" />
</div>
<div class="leading-tight">
<div class="text-xl font-semibold">
{{ statistics.disabled }}
</div>
<div class="text-xs text-secondary">禁用规则</div>
</div>
</div>
</Card>
</Col>
<Col :span="6">
<Card :body-style="{ padding: '12px 16px' }">
<div class="flex items-center">
<div
class="w-10 h-10 rounded-lg flex items-center justify-center text-xl text-white mr-3 bg-gradient-to-br from-green-400 to-teal-400"
>
<IconifyIcon icon="lucide:timer" />
</div>
<div class="leading-tight">
<div class="text-xl font-semibold">
{{ statistics.timerRules }}
</div>
<div class="text-xs text-secondary">定时规则</div>
</div>
</div>
</Card>
</Col>
</Row>
<Grid table-title="场景规则列表"> <Grid table-title="场景规则列表">
<template #toolbar-tools> <template #toolbar-tools>
<TableAction <TableAction
@ -121,9 +375,68 @@ const [Grid, gridApi] = useVbenVxeGrid({
]" ]"
/> />
</template> </template>
<!-- 规则名称列：名称 + 状态 + 描述 -->
<!-- 操作列 --> <template #name="{ row }">
<div class="gap-2 flex items-center">
<span class="font-medium">{{ row.name }}</span>
</div>
<Tooltip
v-if="row.description"
:title="row.description"
placement="top"
>
<div class="text-xs text-secondary mt-1 truncate max-w-[160px]">
{{ row.description }}
</div>
</Tooltip>
</template>
<!-- 触发条件列：按触发器各显示一项 -->
<template #triggers="{ row }">
<div v-if="getTriggerCellItems(row).length > 0" class="flex flex-col gap-1">
<div
v-for="(item, i) in getTriggerCellItems(row)"
:key="`trigger-${i}`"
class="flex items-center gap-1"
>
<Tag :color="item.color" class="m-0">{{ item.label }}</Tag>
<span v-if="item.meta" class="text-xs text-secondary">
{{ item.meta }}
</span>
</div>
<Tooltip
v-if="hasTimerTrigger(row)"
:title="getCronExpression(row)"
placement="top"
>
<span class="text-xs text-secondary">
<IconifyIcon icon="lucide:clock" class="mr-1 inline" />
{{ getCronFrequency(row) }}
<template v-if="getNextExecutionTime(row)">
· 下次 {{ formatDateTime(getNextExecutionTime(row) as Date) }}
</template>
</span>
</Tooltip>
</div>
<span v-else class="text-xs text-secondary">无触发器</span>
</template>
<!-- 执行动作列：按动作各显示一项 -->
<template #actionsCol="{ row }">
<div v-if="getActionCellItems(row).length > 0" class="flex flex-col gap-1">
<div
v-for="(item, i) in getActionCellItems(row)"
:key="`action-${i}`"
class="flex items-center gap-1"
>
<Tag :color="item.color" class="m-0">{{ item.label }}</Tag>
<span v-if="item.meta" class="text-xs text-secondary">
{{ item.meta }}
</span>
</div>
</div>
<span v-else class="text-xs text-secondary">无动作</span>
</template>
<template #actions="{ row }"> <template #actions="{ row }">
<!-- TODO @AI：1）枚举；2）有没必要，对齐别的模块的开启、禁用 -->
<TableAction <TableAction
:actions="[ :actions="[
{ {

270
apps/web-antd/src/views/iot/rule/scene/modules/form.vue
View File

@ -1,87 +1,255 @@
<script lang="ts" setup> <script lang="ts" setup>
import type { RuleSceneApi } from '#/api/iot/rule/scene'; import type { IotSceneRule, RuleSceneApi } from '#/api/iot/rule/scene';
import { computed, ref } from 'vue'; import { computed, nextTick, reactive, ref } from 'vue';
import { useVbenModal } from '@vben/common-ui'; import { useVbenDrawer } from '@vben/common-ui';
import { CommonStatusEnum } from '@vben/constants';
import { message } from 'ant-design-vue'; import { Form, message } from 'ant-design-vue';
import { useVbenForm } from '#/adapter/form';
import { import {
createSceneRule, createSceneRule,
getSceneRule, getSceneRule,
updateSceneRule, updateSceneRule,
} from '#/api/iot/rule/scene'; } from '#/api/iot/rule/scene';
import { $t } from '#/locales'; import { $t } from '#/locales';
import {
IotRuleSceneActionTypeEnum,
IotRuleSceneTriggerTypeEnum,
isDeviceTrigger,
} from '#/views/iot/utils/constants';
import { useFormSchema } from '../data'; import ActionSection from '../form/sections/action-section.vue';
import BasicInfoSection from '../form/sections/basic-info-section.vue';
import TriggerSection from '../form/sections/trigger-section.vue';
defineOptions({ name: 'IoTRuleSceneForm' });
const emit = defineEmits(['success']); const emit = defineEmits(['success']);
const formData = ref<RuleSceneApi.SceneRule>();
const getTitle = computed(() => { const formRef = ref();
return formData.value?.id const formData = ref<IotSceneRule>(buildEmptyFormData());
const getTitle = computed(() =>
formData.value.id
? $t('ui.actionTitle.edit', ['场景规则']) ? $t('ui.actionTitle.edit', ['场景规则'])
: $t('ui.actionTitle.create', ['场景规则']); : $t('ui.actionTitle.create', ['场景规则']),
}); );
const [Form, formApi] = useVbenForm({ const [Drawer, drawerApi] = useVbenDrawer({
commonConfig: {
componentProps: {
class: 'w-full',
},
},
wrapperClass: 'grid-cols-2',
layout: 'horizontal',
schema: useFormSchema(),
showDefaultActions: false,
});
const [Modal, modalApi] = useVbenModal({
async onConfirm() { async onConfirm() {
const { valid } = await formApi.validate(); try {
if (!valid) { await formRef.value?.validate();
} catch {
return; return;
} }
modalApi.lock(); drawerApi.lock();
// 提交表单
const data = (await formApi.getValues()) as RuleSceneApi.SceneRule;
try { try {
await (formData.value?.id const data = { ...formData.value } as IotSceneRule;
? updateSceneRule(data) await (data.id ? updateSceneRule(data) : createSceneRule(data));
: createSceneRule(data)); await drawerApi.close();
// 关闭并提示
await modalApi.close();
emit('success'); emit('success');
message.success($t('ui.actionMessage.operationSuccess')); message.success($t('ui.actionMessage.operationSuccess'));
} finally { } finally {
modalApi.unlock(); drawerApi.unlock();
} }
}, },
async onOpenChange(isOpen: boolean) { async onOpenChange(isOpen: boolean) {
if (!isOpen) { if (!isOpen) {
formData.value = undefined;
return; return;
} }
// 加载数据 const data = drawerApi.getData<RuleSceneApi.SceneRule>();
const data = modalApi.getData<RuleSceneApi.SceneRule>(); // 先用列表传入的数据立即回填，避免 await 期间表单显示空白
if (!data || !data.id) { formData.value = data?.id ? normalizeFormData(data) : buildEmptyFormData();
return; await nextTick();
} formRef.value?.clearValidate?.();
modalApi.lock(); // 再异步拉取详情，覆盖以保证字段最新
try { if (data?.id) {
formData.value = await getSceneRule(data.id); drawerApi.lock();
// 设置到 values try {
await formApi.setValues(formData.value); const fresh = await getSceneRule(data.id);
} finally { formData.value = normalizeFormData(fresh);
modalApi.unlock(); } finally {
drawerApi.unlock();
}
} }
}, },
}); });
/** 构造空白表单数据 */
function buildEmptyFormData(): IotSceneRule {
return {
name: '',
description: '',
status: CommonStatusEnum.ENABLE,
triggers: [
{
type: IotRuleSceneTriggerTypeEnum.DEVICE_PROPERTY_POST,
productId: undefined,
deviceId: undefined,
identifier: undefined,
operator: undefined,
value: undefined,
cronExpression: undefined,
conditionGroups: [],
},
],
actions: [],
};
}
/** 回显时兜底，保证触发器/执行器数组不为空 */
function normalizeFormData(result: any): IotSceneRule {
return {
...result,
triggers: result.triggers?.length
? result.triggers
: buildEmptyFormData().triggers,
actions: result.actions || [],
};
}
/** 触发器校验 */
function validateTriggers(_rule: any, value: any, callback: any) {
if (!value || !Array.isArray(value) || value.length === 0) {
callback(new Error('至少需要一个触发器'));
return;
}
for (const [i, trigger] of value.entries()) {
if (!trigger.type) {
callback(new Error(`触发器 ${i + 1}：触发器类型不能为空`));
return;
}
if (isDeviceTrigger(trigger.type)) {
if (!trigger.productId) {
callback(new Error(`触发器 ${i + 1}：产品不能为空`));
return;
}
if (!trigger.deviceId) {
callback(new Error(`触发器 ${i + 1}：设备不能为空`));
return;
}
if (!trigger.identifier) {
callback(new Error(`触发器 ${i + 1}：物模型标识符不能为空`));
return;
}
// 事件上报 / 服务调用：operator 由前端自动设为 '='，参数值留空表示「事件 / 调用发生即匹配」
const isEventOrService =
trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_EVENT_POST ||
trigger.type === IotRuleSceneTriggerTypeEnum.DEVICE_SERVICE_INVOKE;
if (!isEventOrService) {
if (!trigger.operator) {
callback(new Error(`触发器 ${i + 1}：操作符不能为空`));
return;
}
if (
trigger.value === undefined ||
trigger.value === null ||
trigger.value === ''
) {
callback(new Error(`触发器 ${i + 1}：参数值不能为空`));
return;
}
}
}
if (
trigger.type === IotRuleSceneTriggerTypeEnum.TIMER &&
!trigger.cronExpression
) {
callback(new Error(`触发器 ${i + 1}：CRON 表达式不能为空`));
return;
}
}
callback();
}
/** 执行器校验 */
function validateActions(_rule: any, value: any, callback: any) {
if (!value || !Array.isArray(value) || value.length === 0) {
callback(new Error('至少需要一个执行器'));
return;
}
for (const [i, action] of value.entries()) {
if (!action.type) {
callback(new Error(`执行器 ${i + 1}：执行器类型不能为空`));
return;
}
if (
action.type === IotRuleSceneActionTypeEnum.DEVICE_PROPERTY_SET ||
action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE
) {
if (!action.productId) {
callback(new Error(`执行器 ${i + 1}：产品不能为空`));
return;
}
if (!action.deviceId) {
callback(new Error(`执行器 ${i + 1}：设备不能为空`));
return;
}
if (
action.type === IotRuleSceneActionTypeEnum.DEVICE_SERVICE_INVOKE &&
!action.identifier
) {
callback(new Error(`执行器 ${i + 1}：服务不能为空`));
return;
}
if (!action.params || Object.keys(action.params).length === 0) {
callback(new Error(`执行器 ${i + 1}：参数配置不能为空`));
return;
}
}
if (
(action.type === IotRuleSceneActionTypeEnum.ALERT_TRIGGER ||
action.type === IotRuleSceneActionTypeEnum.ALERT_RECOVER) &&
!action.alertConfigId
) {
callback(new Error(`执行器 ${i + 1}：告警配置不能为空`));
return;
}
}
callback();
}
const formRules = reactive({
name: [
{ required: true, message: '场景名称不能为空', trigger: 'blur' },
{
type: 'string',
min: 1,
max: 50,
message: '场景名称长度应在 1-50 个字符之间',
trigger: 'blur',
},
],
status: [{ required: true, message: '场景状态不能为空', trigger: 'change' }],
description: [
{
type: 'string',
max: 200,
message: '场景描述不能超过 200 个字符',
trigger: 'blur',
},
],
triggers: [
{ required: true, validator: validateTriggers, trigger: 'change' },
],
actions: [{ required: true, validator: validateActions, trigger: 'change' }],
});
</script> </script>
<template> <template>
<Modal class="w-3/5" :title="getTitle"> <Drawer :title="getTitle" class="w-4/5">
<Form class="mx-4" /> <Form
</Modal> ref="formRef"
:model="formData"
:rules="formRules as any"
class="mx-4"
label-width="110px"
>
<BasicInfoSection v-model="formData" />
<TriggerSection v-model:triggers="formData.triggers as any" />
<ActionSection v-model:actions="formData.actions as any" />
</Form>
</Drawer>
</template> </template>