feat:新增复合筛选器;fix:修复新增删除键名筛算器

 <template>
   <div class="step3">
     <template v-for="(item, index) in profileData" :key="item.id">
-      <CollapseContainer class="border mb-8">
+      <CollapseContainer class="border mb-1">
         <template #action>
           <div @click="deleteAlarmRule(index)" class="cursor-pointer">
             <DeleteOutlined style="font-size: 20px" class="mr-2" />
           </div>
         </template>
         <div style="margin-left: -30px"> <BasicForm @register="registerForm" /></div>
-        <CollapseContainer>
-          <template #action> 高级设置 </template>
+        <CollapseContainer style="margin-top: -20px">
+          <template #action> </template>
           <div style="margin-left: 10px">
             <BasicForm @register="registerFormHighSetting">
               <template #checkBox="{ model, field }">
@@ -20,7 +20,7 @@
         </CollapseContainer>
         <p>创建报警规则</p>
         <template v-for="(childItem, createIndex) in item.alarms" :key="childItem.id">
-          <div class="aic mb-4" style="border: 1px solid #bfbfbf">
+          <div class="aic mb-1" style="border: 1px solid #bfbfbf">
             <div class="w-3/4">
               <div style="margin-left: -30px"
                 ><BasicForm @register="registerFormCreateAlarm"
@@ -55,23 +55,29 @@
               </div>
             </div>
             <div class="w-1/4 flex justify-center">
-              <Tooltip title="移除">
+              <img
+                style="cursor: pointer"
+                @click="deleteCondition(index, createIndex)"
+                alt="移除"
+                src="../../../../assets/images/close.png"
+              />
+              <!-- <Tooltip title="移除">
                 <MinusCircleOutlined
                   style="font-size: 25px; color: #305680"
                   class="cursor-pointer"
                   @click="deleteCondition(index, createIndex)"
                 />
-              </Tooltip>
+              </Tooltip> -->
             </div>
           </div>
         </template>
-        <a-button class="mt-5" @click="addCreateRole(index)"
+        <a-button style="border-radius: 10px" class="mt-5" @click="addCreateRole(index)"
           ><PlusCircleOutlined />添加创建条件</a-button
         >
         <div style="height: 20px"></div>
         <p>清除报警规则</p>
         <template v-for="(childItem, createIndex) in item.clearAlarms" :key="childItem.id">
-          <div class="aic mb-4" style="border: 1px solid #bfbfbf">
+          <div class="aic mb-1" style="border: 1px solid #bfbfbf">
             <div class="w-3/4">
               <div style="margin-left: 5px">
                 <p style="color: #f5594e" class="mt-4 ml-4"
@@ -103,17 +109,23 @@
               </div>
             </div>
             <div class="w-1/4 flex justify-center">
-              <Tooltip title="移除">
+              <img
+                style="cursor: pointer"
+                @click="deleteClearCondition(index, createIndex)"
+                alt="移除"
+                src="../../../../assets/images/close.png"
+              />
+              <!-- <Tooltip title="移除">
                 <MinusCircleOutlined
                   style="font-size: 25px; color: #305680"
                   class="cursor-pointer"
                   @click="deleteClearCondition(index, createIndex)"
                 />
-              </Tooltip>
+              </Tooltip> -->
             </div>
           </div>
         </template>
-        <a-button class="mt-5" @click="addClearRole(index)"
+        <a-button style="border-radius: 10px" class="mt-5" @click="addClearRole(index)"
           ><PlusCircleOutlined />添加清除条件</a-button
         >
       </CollapseContainer>
@@ -747,11 +759,13 @@
   }
   .border {
     border: 1px solid #bfbfbf;
+    border-radius: 10px;
   }
 
   .aic {
     display: flex;
     align-items: center;
+    border-radius: 10px;
   }
 
   :deep(.vben-collapse-container__header) {

@@ -125,6 +125,9 @@ export const formSchema: FormSchema[] = [
       ],
     },
     ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')),
+    show: ({ values }) => {
+      return !!values.field5;
+    },
   },
   {
     field: 'sourceAttribute',
@@ -135,6 +138,9 @@ export const formSchema: FormSchema[] = [
       placeholder: '源属性',
     },
     ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')),
+    show: ({ values }) => {
+      return !!values.field5;
+    },
   },
   {
     field: 'sourceType',
@@ -151,6 +157,9 @@ export const formSchema: FormSchema[] = [
       ],
     },
     ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
+    show: ({ values }) => {
+      return !!values.field6;
+    },
   },
   {
     field: 'sourceAttribute',
@@ -161,6 +170,9 @@ export const formSchema: FormSchema[] = [
       placeholder: '源属性',
     },
     ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
+    show: ({ values }) => {
+      return !!values.field6;
+    },
   },
   {
     field: 'defaultValue',
@@ -171,6 +183,29 @@ export const formSchema: FormSchema[] = [
       placeholder: '请输入持续时间值（请输入数字）',
     },
     ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')),
+    show: ({ values }) => {
+      return !values.field5;
+    },
+  },
+  {
+    field: 'field5',
+    component: 'Switch',
+    label: '切换到动态值',
+    colProps: {
+      span: 8,
+    },
+    labelWidth: 200,
+    ifShow: ({ values }) => isWenDu(Reflect.get(values, 'conditionType')),
+  },
+  {
+    field: 'field6',
+    component: 'Switch',
+    label: '切换到动态值',
+    colProps: {
+      span: 8,
+    },
+    labelWidth: 200,
+    ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
   },
   {
     field: 'unit',
@@ -194,10 +229,13 @@ export const formSchema: FormSchema[] = [
     colProps: { span: 24 },
     component: 'Input',
     componentProps: {
-      placeholder: '请输入事件计数值必填（请输入数字）',
+      placeholder: '请输入事件计数值（应在1到2147483637之间）',
     },
     rules: [{ message: '事件计数应在1到2147483637之间', trigger: 'blur' }],
     ifShow: ({ values }) => isTimeAll(Reflect.get(values, 'conditionType')),
+    show: ({ values }) => {
+      return !values.field6;
+    },
   },
   {
     field: 'inherit',

 import { FormSchema } from '/@/components/Table';
+import { ref } from 'vue';
+
+export const isWhereType: any = ref(null);
 
 /**
  * 所使用的枚举值
@@ -111,6 +114,9 @@ export const formSchema: FormSchema[] = [
         { label: '布尔值', value: 'BOOLEAN' },
         { label: '日期时间', value: 'COMPLEX' },
       ],
+      onChange: (v) => {
+        isWhereType.value = v;
+      },
     },
   },
   {
@@ -132,6 +138,69 @@ export const formSchema: FormSchema[] = [
     ifShow: ({ values }) => isString(Reflect.get(values, 'type1')),
   },
   {
+    field: '',
+    label: '大小写',
+    component: 'Checkbox',
+    colProps: { span: 24 },
+    renderComponentContent: '忽略大小写',
+    ifShow: ({ values }) => isString(Reflect.get(values, 'type1')),
+  },
+  {
+    field: 'sourceType',
+    label: '动态源类型',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择动态源类型',
+      options: [
+        { label: '无动态值', value: '' },
+        { label: '当前租户', value: 'CURRENT_TENANT' },
+        { label: '当前客户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前设备', value: 'CURRENT_DEVICE' },
+      ],
+    },
+    ifShow: ({ values }) => isString(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field5;
+    },
+  },
+  {
+    field: 'sourceAttribute',
+    label: '源属性',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入源属性',
+    },
+    ifShow: ({ values }) => isString(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field5;
+    },
+  },
+  {
+    field: 'value1',
+    label: '默认值',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入默认值(数字)',
+    },
+    ifShow: ({ values }) => isString(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !values.field5;
+    },
+  },
+  {
+    field: 'field5',
+    component: 'Switch',
+    label: '切换到动态值',
+    colProps: {
+      span: 8,
+    },
+    labelWidth: 200,
+    ifShow: ({ values }) => isString(Reflect.get(values, 'type1')),
+  },
+  {
     field: 'operation',
     label: '操作',
     colProps: { span: 24 },
@@ -149,6 +218,63 @@ export const formSchema: FormSchema[] = [
     },
     ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')),
   },
+
+  {
+    field: 'sourceType',
+    label: '动态源类型',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择动态源类型',
+      options: [
+        { label: '无动态值', value: '' },
+        { label: '当前租户', value: 'CURRENT_TENANT' },
+        { label: '当前客户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前设备', value: 'CURRENT_DEVICE' },
+      ],
+    },
+    ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field6;
+    },
+  },
+  {
+    field: 'sourceAttribute',
+    label: '源属性',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入源属性',
+    },
+    ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field6;
+    },
+  },
+  {
+    field: 'value1',
+    label: '值',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入值(数字)',
+    },
+    ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !values.field6;
+    },
+  },
+  {
+    field: 'field6',
+    component: 'Switch',
+    label: '切换到动态值',
+    colProps: {
+      span: 8,
+    },
+    labelWidth: 200,
+    ifShow: ({ values }) => isNumeric(Reflect.get(values, 'type1')),
+  },
+
   {
     field: 'operation',
     label: '操作',
@@ -164,6 +290,58 @@ export const formSchema: FormSchema[] = [
     ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')),
   },
   {
+    field: '',
+    label: '默认值',
+    component: 'Checkbox',
+    renderComponentContent: '真',
+    ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !values.field7;
+    },
+  },
+  {
+    field: 'field7',
+    component: 'Switch',
+    label: '切换到动态值',
+    colProps: {
+      span: 8,
+    },
+    labelWidth: 200,
+    ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')),
+  },
+  {
+    field: 'sourceType',
+    label: '动态源类型',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择动态源类型',
+      options: [
+        { label: '无动态值', value: '' },
+        { label: '当前租户', value: 'CURRENT_TENANT' },
+        { label: '当前客户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前设备', value: 'CURRENT_DEVICE' },
+      ],
+    },
+    ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field7;
+    },
+  },
+  {
+    field: 'sourceAttribute',
+    label: '源属性',
+    colProps: { span: 24 },
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入源属性',
+    },
+    ifShow: ({ values }) => isBoolean(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field7;
+    },
+  },
+  {
     field: 'operation',
     label: '操作',
     colProps: { span: 24 },
@@ -182,12 +360,78 @@ export const formSchema: FormSchema[] = [
     ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')),
   },
   {
-    field: 'value1',
-    label: '默认值',
+    field: '',
+    component: 'DatePicker',
+    label: '请选择日期',
+    colProps: {
+      span: 12,
+    },
+    ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !values.field8;
+    },
+  },
+  {
+    field: '',
+    component: 'TimePicker',
+    label: '请选择时间',
+    colProps: {
+      span: 8,
+    },
+    ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !values.field8;
+    },
+  },
+  {
+    field: 'field8',
+    component: 'Switch',
+    label: '切换到动态值',
+    colProps: {
+      span: 8,
+    },
+    labelWidth: 200,
+    ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')),
+  },
+  {
+    field: 'sourceType',
+    label: '动态源类型',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择动态源类型',
+      options: [
+        { label: '无动态值', value: '' },
+        { label: '当前租户', value: 'CURRENT_TENANT' },
+        { label: '当前客户', value: 'CURRENT_CUSTOMER' },
+        { label: '当前设备', value: 'CURRENT_DEVICE' },
+      ],
+    },
+    ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field8;
+    },
+  },
+  {
+    field: 'sourceAttribute',
+    label: '源属性',
     colProps: { span: 24 },
     component: 'Input',
     componentProps: {
-      placeholder: '请输入默认值(数字)',
+      placeholder: '请输入源属性',
+    },
+    ifShow: ({ values }) => isComplex(Reflect.get(values, 'type1')),
+    show: ({ values }) => {
+      return !!values.field8;
     },
   },
+  // {
+  //   field: 'value1',
+  //   label: '默认值',
+  //   colProps: { span: 24 },
+  //   component: 'Input',
+  //   componentProps: {
+  //     placeholder: '请输入默认值(数字)',
+  //   },
+  // },
 ];

+import { FormSchema } from '/@/components/Table';
+
+export const formSchema: FormSchema[] = [
+  {
+    field: 'type',
+    label: '操作',
+    colProps: { span: 24 },
+    component: 'Select',
+    componentProps: {
+      placeholder: '请选择操作',
+      options: [
+        { label: '和', value: '和' },
+        { label: '或', value: '或' },
+      ],
+    },
+  },
+];

+<template>
+  <BasicModal
+    v-bind="$attrs"
+    width="55rem"
+    @register="registerAdd"
+    :title="getTitle"
+    @ok="handleSubmit"
+    @cancel="handleCancel"
+  >
+    <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" />
+  </BasicModal>
+</template>
+<script lang="ts">
+  import { defineComponent, ref, computed, unref } from 'vue';
+  import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { BasicForm, useForm } from '/@/components/Form';
+  import { formSchema } from './config';
+
+  export default defineComponent({
+    name: 'index',
+    components: { BasicModal, BasicForm },
+    emits: ['success', 'register'],
+    setup(_, { emit }) {
+      const isUpdate = ref(true);
+      const getValue: any = ref({});
+      const setId: any = ref(1);
+      const getTitle = computed(() => (!unref(isUpdate) ? '新增复合筛选器' : '编辑复合筛选器'));
+      const [registerForm, { getFieldsValue, setFieldsValue, resetFields }] = useForm({
+        labelWidth: 120,
+        schemas: formSchema,
+      });
+      const [registerAdd, { closeModal }] = useModalInner(async (data) => {
+        isUpdate.value = !!data?.isUpdate;
+        if (!unref(isUpdate)) {
+          resetFields();
+        }
+        if (unref(isUpdate)) {
+          setFieldsValue({
+            ...data.record,
+          });
+        }
+      });
+      const handleSubmit = () => {
+        if (!unref(isUpdate)) {
+          getValue.value = getFieldsValue();
+          setId.value += 1;
+          getValue.value.id = setId.value;
+        } else {
+          getValue.value = getFieldsValue();
+          setId.value += 1000;
+          getValue.value.id = setId.value;
+        }
+        emit('success', getValue.value);
+        closeModal();
+      };
+      const handleCancel = () => {
+        return;
+      };
+      return {
+        registerForm,
+        handleCancel,
+        handleSubmit,
+        registerAdd,
+        getTitle,
+      };
+    },
+  });
+</script>

@@ -8,19 +8,47 @@
     @cancel="handleCancel"
   >
     <BasicForm :showResetButton="false" :showSubmitButton="false" @register="registerForm" />
+    <template v-if="getIsWhereType">
+      <div><p style="text-align: center">未配置筛选器</p></div>
+      <div><p style="text-align: left">筛选器</p></div>
+      <div style="width: 50vw; height: 5vh; display: flex; justify-content: space-between">
+        <div style="width: 5vw; height: 2vh">
+          <p v-for="(item, index) in n" :key="index">和</p>
+        </div>
+        <div style="width: 45vw; height: 2vh">
+          <BasicForm
+            :showActionButtonGroup="false"
+            @register="registerFilter"
+            @submit="handleSubmit"
+          >
+            <template #add="{ field }">
+              <Button v-if="Number(field) === 0" @click="add">添加</Button>
+              <Button v-if="Number(field) === 0" @click="handleAdd">添加复合器</Button>
+              <!-- <Button v-if="Number(field) === 0" @click="handleEdit">编辑复合器</Button> -->
+              <Button v-if="field > 0" @click="del(field)">-</Button>
+            </template>
+          </BasicForm>
+        </div>
+      </div>
+      <AddkeyValueModal @register="registerModal" />
+    </template>
   </BasicModal>
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref } from 'vue';
+  import { defineComponent, ref, computed, unref, watch } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
+  import { useModal } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema } from './config';
+  import { formSchema, isWhereType } from './config';
+  import { Button } from '/@/components/Button';
+  import AddkeyValueModal from './cpns/index.vue';
 
   export default defineComponent({
     name: 'index',
-    components: { BasicModal, BasicForm },
+    components: { BasicModal, BasicForm, Button, AddkeyValueModal },
     emits: ['success', 'register'],
     setup(_, { emit }) {
+      const getIsWhereType: any = ref(null);
       const isUpdate = ref(true);
       const getValue: any = ref({});
       const setId: any = ref(1);
@@ -29,10 +57,44 @@
         labelWidth: 120,
         schemas: formSchema,
       });
+      const [registerFilter, { appendSchemaByField, removeSchemaByFiled }] = useForm({
+        schemas: [
+          {
+            field: 'field0a',
+            component: 'Input',
+            label: '字段0',
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          {
+            field: 'field0b',
+            component: 'Input',
+            label: '字段0',
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          {
+            field: '0',
+            component: 'Input',
+            label: ' ',
+            colProps: {
+              span: 8,
+            },
+            slot: 'add',
+          },
+        ],
+        labelWidth: 100,
+        actionColOptions: { span: 24 },
+      });
       const [register, { closeModal }] = useModalInner(async (data) => {
         isUpdate.value = !!data?.isUpdate;
         if (!unref(isUpdate)) {
           resetFields();
+          getIsWhereType.value = 100;
         }
         if (unref(isUpdate)) {
           setFieldsValue({
@@ -42,29 +104,110 @@
       });
 
       const handleSubmit = () => {
-        getValue.value = getFieldsValue();
-        setId.value += 1;
-        getValue.value.id = setId.value;
+        if (!unref(isUpdate)) {
+          getValue.value = getFieldsValue();
+          setId.value += 1;
+          getValue.value.id = setId.value;
+        } else {
+          getValue.value = getFieldsValue();
+          setId.value += 1000;
+          getValue.value.id = setId.value;
+        }
         emit('success', getValue.value);
         closeModal();
-        // if (!unref(isUpdate)) {
-        //   getValue.value = getFieldsValue();
-        //   console.log(getValue.value);
-        // }
-        // if (unref(isUpdate)) {
-        //   getValue.value = getFieldsValue();
-        //   console.log(getValue.value);
-        // }
-        // setTimeout(() => {
-        //   emit('success', getValue.value);
-        //   closeModal();
-        // }, 20);
-        // // getValue.value = getFieldsValue();
       };
       const handleCancel = () => {
         return;
       };
+
+      const n = ref(1);
+
+      function add() {
+        appendSchemaByField(
+          {
+            field: `field${n.value}a`,
+            component: 'Input',
+            label: '字段' + n.value,
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+        appendSchemaByField(
+          {
+            field: `field${n.value}b`,
+            component: 'Input',
+            label: '字段' + n.value,
+            colProps: {
+              span: 8,
+            },
+            required: true,
+          },
+          ''
+        );
+
+        appendSchemaByField(
+          {
+            field: `${n.value}`,
+            component: 'Input',
+            label: ' ',
+            colProps: {
+              span: 8,
+            },
+            slot: 'add',
+          },
+          ''
+        );
+        n.value++;
+      }
+
+      function del(field) {
+        removeSchemaByFiled([`field${field}a`, `field${field}b`, `${field}`]);
+        n.value--;
+      }
+      watch(isWhereType, (v) => {
+        switch (v) {
+          console.log(v)
+          case 'STRING':
+            getIsWhereType.value = v;
+            break;
+          case 'NUMERIC':
+            getIsWhereType.value = v;
+            break;
+          case 'BOOLEAN':
+            getIsWhereType.value = v;
+            break;
+          case 'COMPLEX':
+            getIsWhereType.value = v;
+            break;
+        }
+      });
+      const [registerModal, { openModal }] = useModal();
+      //复合器弹窗
+      const addPlusIfEdit = ref(1);
+      const handleAdd = () => {
+        openModal(true, {
+          isUpdate: false,
+          addPlusIfEdit: addPlusIfEdit.value++,
+        });
+      };
+      const handleEdit = () => {
+        openModal(true, {
+          isUpdate: true,
+        });
+      };
+
       return {
+        getIsWhereType,
+        registerModal,
+        handleEdit,
+        handleAdd,
+        n,
+        add,
+        del,
+        registerFilter,
         registerForm,
         handleCancel,
         handleSubmit,

@@ -53,7 +53,7 @@
   <KeyValueModal @register="registerModal" @success="handleSuccess" />
 </template>
 <script lang="ts">
-  import { defineComponent, ref, computed, unref, getCurrentInstance } from 'vue';
+  import { defineComponent, ref, computed, unref } from 'vue';
   import { BasicModal, useModalInner } from '/@/components/Modal';
   import { BasicForm, useForm } from '/@/components/Form';
   import { formSchema, keyColumns, DescDetailSchema, columnsView } from './config';
@@ -74,10 +74,9 @@
     },
     emits: ['success', 'register', 'getAllFieldsRule', 'getLastAllFieldsRule'],
     setup(_, { emit }) {
-      const { proxy } = getCurrentInstance();
       const getTableApiData: any = ref([]);
       const detailData: any = ref([]);
-      const receiveData: any = ref(null);
+      const receiveData: any = ref({});
       const lastValues: any = ref(null);
       const addOrUpdateData: any = ref(null);
       const isUpdate = ref(true);
@@ -131,62 +130,38 @@
           isUpdate: true,
           record,
         });
+        const newFilterArray = getTableApiData.value.filter((item) => item.id !== record.id);
+        getTableApiData.value = newFilterArray;
+        const newFilterViewArray = detailData.value.filter((item) => item.id !== record.id);
+        detailData.value = newFilterViewArray;
+        reload();
       };
       const handleDelete = (record: Recordable) => {
-        console.log(record);
-        console.log(getTableApiData.value);
-        // const getIndex = getTableApiData.value.indexOf((i) => {
-        //   return i.key;
-        // });
         const newFilterArray = getTableApiData.value.filter((item) => item.id !== record.id);
         getTableApiData.value = newFilterArray;
-        // getTableApiData.value.splice(getIndex, 1);
-
-        // console.log(getTableApiData.value);
-        // delete getTableApiData.value[findByKeyDel];
-        // getTableApiData.value.slice(0, getTableApiData.value.length - 1);
-        // detailData.value.slice(0, detailData.value.length - 1);
-        // if (record) {
-        //   getTableApiData.value = getTableApiData.value.length - 1;
-        //   detailData.value = detailData.value.length - 1;
-        // }
+        const newFilterViewArray = detailData.value.filter((item) => item.id !== record.id);
+        detailData.value = newFilterViewArray;
         reload();
       };
       const handleSuccess = (v) => {
         receiveData.value = v;
         setTimeout(() => {
-          doFunc();
-        }, 20);
-        // if (!unref(isUpdate)) {
-        //   console.log(v);
-        //   // receiveData.value = v;
-        //   setTimeout(() => {
-        //     // doFunc();
-        //     getTableApiData.value.push(v);
-        //     detailData.value.push(v);
-        //   }, 10);
-        // }
-        // if (unref(isUpdate)) {
-        //   console.log(v);
-        //   // receiveData.value = v;
-        //   setTimeout(() => {
-        //     // doFunc();
-        //     getTableApiData.value.push(v);
-        //     updateTableDataRecord(v.key, v);
-        //     detailData.value.push(v);
-        //   }, 10);
-        // }
+          useWaitFunc();
+        }, 10);
       };
-      const doFunc = () => {
-        getTableApiData.value.push(receiveData.value);
-        detailData.value.push(receiveData.value);
+      const useWaitFunc = () => {
+        if (unref(getTableApiData.value)) {
+          getTableApiData.value.push(receiveData.value);
+          detailData.value.push(receiveData.value);
+        }
+        reload();
       };
       return {
+        detailData,
+        getTableApiData,
         resetDataFunc,
         columnsView,
         DescDetailSchema,
-        detailData,
-        getTableApiData,
         handleSuccess,
         handleEdit,
         handleDelete,