简柏林 / thingskit-front · Commits

Commit 6bd0911b7762003c9d1401874c1945af55449fb6

Authored by ww
1 parent bacf4743

perf: 优化场景联动条件筛选添加功能,新增页面反馈

Inline Side-by-side
Showing 6 changed files with 67 additions and 20 deletions
@@ -7,4 +7,6 @@ export const validateTCPCustomCommand: ValidatorRule['validator'] = (_rule, valu @@ -7,4 +7,6 @@ export const validateTCPCustomCommand: ValidatorRule['validator'] = (_rule, valu
7 return Promise.reject('请输入ASCII或HEX服务命令(0~9/A~F)'); 7 return Promise.reject('请输入ASCII或HEX服务命令(0~9/A~F)');
8 }; 8 };
9 9
10 -export const trimBlankSpace = (string: string) => string.replace(/\s/g, ''); 10 +export const trimBlankSpace = (string: string) => string.replace(/(?!^)(?=(\w{2})+$)/g, '');
  11 +
  12 +export const formatCommandString = (string = '') => string.replace(/(?!^)(?=(\w{2})+$)/g, ' ');
@@ -151,6 +151,10 @@ @@ -151,6 +151,10 @@
151 151
152 <style lang="less" scoped> 152 <style lang="less" scoped>
153 .things-model-form { 153 .things-model-form {
  154 + > :deep(.ant-row) {
  155 + width: 100%;
  156 + }
  157 +
154 :deep(.ant-input-number) { 158 :deep(.ant-input-number) {
155 width: 100%; 159 width: 100%;
156 } 160 }
@@ -3,9 +3,29 @@ import { buildUUID } from '/@/utils/uuid'; @@ -3,9 +3,29 @@ import { buildUUID } from '/@/utils/uuid';
3 3
4 export { default as ConditionFilter } from './index.vue'; 4 export { default as ConditionFilter } from './index.vue';
5 5
6 -export function getNewConditionFilterItem(value?: Recordable): ConditionListItemType { 6 +export enum CheckStatusEnum {
  7 + NO_VALIDATE = 'NO_VALIDATE',
  8 + VALIDATE_SUCCESS = 'VALIDATE_SUCCESS',
  9 + VALIDATE_FAILED = 'VALIDATE_FAILED',
  10 +}
  11 +
  12 +export enum CheckStatusColorEnum {
  13 + NO_VALIDATE,
  14 + VALIDATE_SUCCESS = '!text-green-600',
  15 + VALIDATE_FAILED = '!text-red-600',
  16 +}
  17 +
  18 +export enum CheckStatusIconEnum {
  19 + NO_VALIDATE = '',
  20 + VALIDATE_SUCCESS = 'ant-design:check-outlined',
  21 + VALIDATE_FAILED = 'ant-design:close-outlined',
  22 +}
  23 +
  24 +export function getNewConditionFilterItem(
  25 + checkStatus = CheckStatusEnum.NO_VALIDATE
  26 +): ConditionListItemType {
7 return { 27 return {
8 key: buildUUID(), 28 key: buildUUID(),
9 - value, 29 + checkStatus,
10 }; 30 };
11 } 31 }
1 <script setup lang="ts"> 1 <script setup lang="ts">
2 import { ComponentPublicInstance, computed, ref, unref, watch } from 'vue'; 2 import { ComponentPublicInstance, computed, ref, unref, watch } from 'vue';
3 - import { Card, Tag, Button } from 'ant-design-vue'; 3 + import { Card, Tag, Button, Tooltip } from 'ant-design-vue';
4 import { Icon } from '/@/components/Icon'; 4 import { Icon } from '/@/components/Icon';
5 import { getFormSchemas, FormFieldsEnum } from './config'; 5 import { getFormSchemas, FormFieldsEnum } from './config';
6 import { CollapseContainer } from '/@/components/Container'; 6 import { CollapseContainer } from '/@/components/Container';
@@ -9,7 +9,12 @@ @@ -9,7 +9,12 @@
9 import { ConditionFilterProps, ConditionListItemType } from './type'; 9 import { ConditionFilterProps, ConditionListItemType } from './type';
10 import { ConditionMessageItemType, useConditionFilterMessage } from './useConditionFilterMessage'; 10 import { ConditionMessageItemType, useConditionFilterMessage } from './useConditionFilterMessage';
11 import { useConditionData } from './useConditionData'; 11 import { useConditionData } from './useConditionData';
12 - import { getNewConditionFilterItem } from '.'; 12 + import {
  13 + CheckStatusEnum,
  14 + CheckStatusIconEnum,
  15 + CheckStatusColorEnum,
  16 + getNewConditionFilterItem,
  17 + } from '.';
13 import { useSceneLinkageDrawerContext } from '../SceneLinkageDrawer/sceneLinkageDrawerContext'; 18 import { useSceneLinkageDrawerContext } from '../SceneLinkageDrawer/sceneLinkageDrawerContext';
14 19
15 const { disabledDrawer } = useSceneLinkageDrawerContext(); 20 const { disabledDrawer } = useSceneLinkageDrawerContext();
@@ -88,14 +93,14 @@ @@ -88,14 +93,14 @@
88 <template #title> 93 <template #title>
89 <section class="flex !p-2"> 94 <section class="flex !p-2">
90 <div class="w-20 flex-grow-0 flex-shrink-0"> 条件筛选 </div> 95 <div class="w-20 flex-grow-0 flex-shrink-0"> 条件筛选 </div>
91 - <div class="flex flex-wrap"> 96 + <div class="flex flex-wrap gap-1 mr-4">
92 <template v-for="(item, index) in conditionMessageList" :key="index"> 97 <template v-for="(item, index) in conditionMessageList" :key="index">
93 <Tag class="!rounded-md !m-0 !text-sky-700"> {{ objectModel?.name }} </Tag> 98 <Tag class="!rounded-md !m-0 !text-sky-700"> {{ objectModel?.name }} </Tag>
94 - <span class="mx-2">{{ item.operation }}</span> 99 + <span>{{ item.operation }}</span>
95 <Tag class="!rounded-md !m-0 !text-orange-300"> 100 <Tag class="!rounded-md !m-0 !text-orange-300">
96 {{ item.defaultValue }} 101 {{ item.defaultValue }}
97 </Tag> 102 </Tag>
98 - <span class="mx-2" v-if="conditionMessageList.length - 1 !== index">和</span> 103 + <span v-if="conditionMessageList.length - 1 !== index">和</span>
99 </template> 104 </template>
100 </div> 105 </div>
101 </section> 106 </section>
@@ -106,9 +111,11 @@ @@ -106,9 +111,11 @@
106 v-for="(conditionItem, index) in conditionListElRef" 111 v-for="(conditionItem, index) in conditionListElRef"
107 :key="conditionItem.key" 112 :key="conditionItem.key"
108 > 113 >
109 - <section class="border-2 border-dashed border-gray-200 rounded-lg px-4 py-2 flex-1">  
110 - <!-- --> 114 + <section
  115 + class="border-2 border-dashed border-gray-200 rounded-lg px-4 py-2 flex-1 flex items-center"
  116 + >
111 <BasicForm 117 <BasicForm
  118 + class="flex-auto"
112 :ref="(el) => setConditionRef(conditionItem, el)" 119 :ref="(el) => setConditionRef(conditionItem, el)"
113 :show-action-button-group="false" 120 :show-action-button-group="false"
114 layout="horizontal" 121 layout="horizontal"
@@ -118,6 +125,15 @@ @@ -118,6 +125,15 @@
118 :base-col-props="{ span: 24 / getSchemas.length, xl: 8, lg: 12, sm: 24 }" 125 :base-col-props="{ span: 24 / getSchemas.length, xl: 8, lg: 12, sm: 24 }"
119 @field-value-change="handleConditionFormValueChange" 126 @field-value-change="handleConditionFormValueChange"
120 /> 127 />
  128 + <Icon
  129 + :style="{
  130 + opacity: conditionItem.checkStatus !== CheckStatusEnum.NO_VALIDATE ? 100 : 0,
  131 + }"
  132 + :icon="CheckStatusIconEnum[conditionItem.checkStatus!]"
  133 + :size="20"
  134 + :class="CheckStatusColorEnum[conditionItem.checkStatus!]"
  135 + class="transition-opacity duration-500 ease-linear"
  136 + />
121 </section> 137 </section>
122 <span 138 <span
123 class="w-5" 139 class="w-5"
@@ -125,13 +141,15 @@ @@ -125,13 +141,15 @@
125 > 141 >
126 和 142 和
127 </span> 143 </span>
128 - <Icon  
129 - v-if="!disabledDrawer"  
130 - icon="fluent:delete-off-20-regular"  
131 - size="24"  
132 - class="cursor-pointer"  
133 - @click="handleDelete(conditionItem)"  
134 - /> 144 + <Tooltip title="删除">
  145 + <Icon
  146 + v-if="!disabledDrawer"
  147 + icon="fluent:delete-off-20-regular"
  148 + size="24"
  149 + class="cursor-pointer"
  150 + @click="handleDelete(conditionItem)"
  151 + />
  152 + </Tooltip>
135 </main> 153 </main>
136 <section class="flex mt-4 items-center justify-between"> 154 <section class="flex mt-4 items-center justify-between">
137 <Button v-if="!disabledDrawer" type="primary" @click="handleAdd"> 155 <Button v-if="!disabledDrawer" type="primary" @click="handleAdd">
  1 +import { CheckStatusEnum } from '.';
1 import { ScheduleType } from '../EnablingRule/type'; 2 import { ScheduleType } from '../EnablingRule/type';
2 import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel'; 3 import { DeviceModelOfMatterAttrs } from '/@/api/device/model/deviceModel';
3 import { FormActionType } from '/@/components/Form'; 4 import { FormActionType } from '/@/components/Form';
@@ -13,8 +14,8 @@ import { @@ -13,8 +14,8 @@ import {
13 14
14 export interface ConditionListItemType { 15 export interface ConditionListItemType {
15 key: string; 16 key: string;
16 - value?: Recordable;  
17 ref?: FormActionType; 17 ref?: FormActionType;
  18 + checkStatus?: CheckStatusEnum;
18 } 19 }
19 20
20 export interface ConditionFilterProps { 21 export interface ConditionFilterProps {
@@ -3,7 +3,7 @@ import { ConditionFilterProps, ConditionItemType, ConditionListItemType } from ' @@ -3,7 +3,7 @@ import { ConditionFilterProps, ConditionItemType, ConditionListItemType } from '
3 import { DefineComponentsBasicExpose } from '/#/utils'; 3 import { DefineComponentsBasicExpose } from '/#/utils';
4 import { DeviceTriggerTypeEum, TriggerValueTypeEnum } from '/@/enums/linkedgeEnum'; 4 import { DeviceTriggerTypeEum, TriggerValueTypeEnum } from '/@/enums/linkedgeEnum';
5 import { ConditionFormRecordType, FormFieldsEnum } from './config'; 5 import { ConditionFormRecordType, FormFieldsEnum } from './config';
6 -import { getNewConditionFilterItem } from '.'; 6 +import { CheckStatusEnum, getNewConditionFilterItem } from '.';
7 import { dateUtil } from '/@/utils/dateUtil'; 7 import { dateUtil } from '/@/utils/dateUtil';
8 8
9 function getPredicateType(triggerType: TriggerValueTypeEnum) { 9 function getPredicateType(triggerType: TriggerValueTypeEnum) {
@@ -55,7 +55,7 @@ export function useConditionData( @@ -55,7 +55,7 @@ export function useConditionData(
55 55
56 const setFieldsValue = (condition: ConditionItemType[]) => { 56 const setFieldsValue = (condition: ConditionItemType[]) => {
57 conditionItemRef.value = Array.from({ length: condition.length }, () => 57 conditionItemRef.value = Array.from({ length: condition.length }, () =>
58 - getNewConditionFilterItem() 58 + getNewConditionFilterItem(CheckStatusEnum.VALIDATE_SUCCESS)
59 ); 59 );
60 60
61 nextTick(() => { 61 nextTick(() => {
@@ -79,7 +79,9 @@ export function useConditionData( @@ -79,7 +79,9 @@ export function useConditionData(
79 79
80 const validate = async () => { 80 const validate = async () => {
81 for (const conditionItem of unref(conditionItemRef)) { 81 for (const conditionItem of unref(conditionItemRef)) {
  82 + conditionItem.checkStatus = CheckStatusEnum.VALIDATE_FAILED;
82 await conditionItem.ref?.validate(); 83 await conditionItem.ref?.validate();
  84 + conditionItem.checkStatus = CheckStatusEnum.VALIDATE_SUCCESS;
83 } 85 }
84 }; 86 };
85 return { 87 return {