Commit feff8648169c27dc825f16d7c72b618c2dedf9a4

Authored by sqy
1 parent ca21e32e

'fix:优化场景联动组件'

  1 +<template>
  2 + <div>
  3 + <CollapseContainer style="background-color: #f2f2f2" :title="`${title} ${index + 1}`">
  4 + <template #action>
  5 + <div class="flex">
  6 + <div>
  7 + <span class="mr-2">启用规则</span>
  8 + <RadioGroup
  9 + v-model:value="schedule"
  10 + :options="scheduleOptions"
  11 + @change="handleRadioGroupChange"
  12 + />
  13 + </div>
  14 + <Tooltip title="移除" class="ml-4">
  15 + <Icon
  16 + icon="fluent:delete-off-20-regular"
  17 + size="20"
  18 + class="mr-2 cursor-pointer"
  19 + @click="handleDelete({ index, title })"
  20 + />
  21 + </Tooltip>
  22 + </div>
  23 + </template>
  24 + <BasicForm @register="registerForm">
  25 + <template #operationType="{ model, field }">
  26 + <Select
  27 + :options="options"
  28 + v-model:value="model[field]"
  29 + @change="operationType = model[field]"
  30 + placeholder="请选择比较类型"
  31 + allowClear
  32 + />
  33 + </template>
  34 + <template #time="{ model, field }">
  35 + <Input v-model:value="model[field]" placeholder="请输入持续时间">
  36 + <template #addonAfter>
  37 + <Select
  38 + v-model:value="model[`timeUnit`]"
  39 + :options="timeUnitOptions"
  40 + style="width: 60px"
  41 + />
  42 + </template>
  43 + </Input>
  44 + </template>
  45 + </BasicForm>
  46 + <Card size="small" :bordered="false" style="border: 2px dashed #797979" v-if="operationType">
  47 + <ConditionScreening
  48 + :childGetFieldsValue="childGetFieldsValue"
  49 + ref="conditionScreeningRef"
  50 + />
  51 + </Card>
  52 + </CollapseContainer>
  53 + </div>
  54 +</template>
  55 +<script lang="ts" setup>
  56 + import { ref, provide, nextTick } from 'vue';
  57 + import { CollapseContainer } from '/@/components/Container/index';
  58 + import { BasicForm, useForm } from '/@/components/Form/index';
  59 + import { Icon } from '/@/components/Icon';
  60 + import { Tooltip, Radio, Card, Select, Input } from 'ant-design-vue';
  61 + import { trigger_condition_schema } from '../config/config.data.ts';
  62 + import { getAttribute } from '/@/api/ruleengine/ruleengineApi';
  63 + import ConditionScreening from './ConditionScreening.vue';
  64 + const RadioGroup = Radio.Group;
  65 +
  66 + defineProps({
  67 + title: {
  68 + type: String,
  69 + required: true,
  70 + },
  71 + index: {
  72 + type: Number,
  73 + required: true,
  74 + },
  75 + });
  76 + const emit = defineEmits(['delete']);
  77 + const conditionScreeningRef = ref();
  78 + const [registerForm, { resetFields, getFieldsValue, updateSchema, setFieldsValue }] = useForm({
  79 + schemas: trigger_condition_schema,
  80 + showActionButtonGroup: false,
  81 + });
  82 +
  83 + const getFieldsValueFunc = () => {
  84 + const predicate = conditionScreeningRef?.value?.refItem?.conditionScreeningRefs?.value?.map(
  85 + (item) => {
  86 + return item.getFieldsValue();
  87 + }
  88 + );
  89 + return { ...getFieldsValue(), predicate, schedule: schedule.value };
  90 + };
  91 + const updateFieldDeviceId = (deviceList: any[]) => {
  92 + updateSchema({
  93 + field: 'entityId',
  94 + componentProps: {
  95 + options: deviceList,
  96 + onChange(e) {
  97 + if (e) {
  98 + updateFieldAttributeFunc();
  99 + }
  100 + },
  101 + },
  102 + });
  103 + };
  104 + const resetFieldsValueFunc = () => resetFields();
  105 + // 回显数据函数
  106 + const setFieldsFormValueFun = (fieldsValue) => {
  107 + setFieldsValue(fieldsValue);
  108 + };
  109 + const updateFieldAttributeFunc = async () => {
  110 + const data1 = await getAttribute();
  111 + const options = data1.map((m) => {
  112 + return {
  113 + label: m,
  114 + value: m,
  115 + };
  116 + });
  117 + updateSchema({
  118 + field: 'type2',
  119 + componentProps: {
  120 + placeholder: '请选择属性',
  121 + options,
  122 + },
  123 + });
  124 + };
  125 +
  126 + const handleDelete = (params: { index: number; title: string }) => {
  127 + emit('delete', params);
  128 + };
  129 +
  130 + const schedule = ref('ANY_TIME');
  131 + const scheduleOptions = [
  132 + { label: '始终启用', value: 'ANY_TIME' },
  133 + { label: '定时启用', value: 'SPECIFIC_TIME' },
  134 + { label: '自定义启用', value: 'CUSTOM' },
  135 + ];
  136 + const operationType = ref<string>('');
  137 + const timeUnitOptions = [
  138 + {
  139 + label: '秒',
  140 + value: 'SECONDS',
  141 + },
  142 + {
  143 + label: '分',
  144 + value: 'MINUTES',
  145 + },
  146 + {
  147 + label: '时',
  148 + value: 'HOURS',
  149 + },
  150 + {
  151 + label: '天',
  152 + value: 'DAYS',
  153 + },
  154 + ];
  155 + const options = [
  156 + {
  157 + label: '数字',
  158 + value: 'NUMERIC',
  159 + },
  160 + {
  161 + label: '布尔值',
  162 + value: 'BOOLEAN',
  163 + },
  164 + {
  165 + label: '字符串',
  166 + value: 'STRING',
  167 + },
  168 + {
  169 + label: '时间',
  170 + value: 'DATE_TIME',
  171 + },
  172 + ];
  173 + // 子组件获取父组件的值
  174 + const childGetFieldsValue = () => getFieldsValue();
  175 +
  176 + provide('operationType', operationType);
  177 +
  178 + // 获取conditionScreeningForm的组件
  179 + const getRefItemConditionScreeningRefs = async () => {
  180 + await nextTick();
  181 + return conditionScreeningRef.value.refItem.conditionScreeningRefs;
  182 + };
  183 +
  184 + const setConditionScreeningList = (list) => {
  185 + conditionScreeningRef.value.conditionScreeningList = list;
  186 + };
  187 + const setRichText = (list) => {
  188 + conditionScreeningRef.value.otherAttribute = list;
  189 + };
  190 +
  191 + const handleRadioGroupChange = (e) => {
  192 + const { value } = e.target;
  193 + if (value === 'SPECIFIC_TIME') {
  194 + console.log('定时启用');
  195 + // 定时启用
  196 + } else if (value === 'CUSTOM') {
  197 + console.log('自定义启用');
  198 + // 自定义启用
  199 + }
  200 + };
  201 + defineExpose({
  202 + getFieldsValueFunc,
  203 + updateFieldDeviceId,
  204 + resetFieldsValueFunc,
  205 + setFieldsFormValueFun,
  206 + childGetFieldsValue,
  207 + operationType,
  208 + getRefItemConditionScreeningRefs,
  209 + setConditionScreeningList,
  210 + setRichText,
  211 + });
  212 +</script>
... ...