数仓开发 策略指标

src/views/realTimeSync/strategicIndicators/index.vue

@@ -13,7 +13,9 @@
                     style="width: 150px; margin-left: 10px"
                     :options="typeOptions"
                   />
-                  <a-button type="link"><PlusOutlined style="color: #9396a4" /></a-button>
+                  <a-button type="link" @click="handleAdd"
+                    ><PlusOutlined style="color: #9396a4"
+                  /></a-button>
                 </div>
               </template>
               <template #strategicName="{ text, record }">
@@ -32,13 +34,23 @@
           <!--          ><PlusOutlined style="color: #9396a4"-->
           <!--        /></a-button>-->
           <div class="w-3/4">
-            <div v-if="titleName !== null" style="display: flex; justify-content: space-between">
+            <div v-if="titleType !== null" style="display: flex; justify-content: space-between">
               <div style="font-size: 16px; font-weight: 650; margin: 0 0 20px 20px">{{
                 titleName
               }}</div>
-              <div><a-button type="primary" @click="handleSubmit">保存</a-button></div>
+              <div>
+                <a-button type="primary" @click="handleDelete">删除</a-button>
+                <a-button type="primary" @click="handleSubmit">保存</a-button>
+              </div>
             </div>
-            <BasicForm v-show="titleName === '一致性检查默认策略'" @register="registerCheck">
+            <div v-if="isAdd">
+              <div style="text-align: right">
+                <a-button type="primary" @click="handleSubmit">保存</a-button>
+              </div>
+              <BasicForm @register="registerAdd" />
+            </div>
+
+            <BasicForm v-show="titleType === '一致性检查策略“'" @register="registerCheck">
               <template #strategicType="{ field, model }">
                 <Select v-model:value="model[field]" :options="typeOptions" />
                 <Alert
@@ -56,13 +68,13 @@
               </template>
             </BasicForm>
             <BasicForm
-              v-show="titleName !== null && titleName !== '一致性检查默认策略'"
+              v-show="titleType !== null && titleType !== '一致性检查策略'"
               @register="registerForm"
             >
               <template #strategicType="{ field, model }">
                 <div
-                  v-if="titleName === 'DB-DB源端DDL处理默认策略'"
-                  v-show="titleName === 'DB-DB源端DDL处理默认策略'"
+                  v-if="titleType === 'DB-DB源端DDL处理策略'"
+                  v-show="titleType === 'DB-DB源端DDL处理策略'"
                 >
                   <Select v-model:value="model[field]" :options="typeOptions" />
                   <Alert
@@ -73,8 +85,8 @@
                   />
                 </div>
                 <div
-                  v-if="titleName === 'DB-Kafka源端DDL处理默认策略'"
-                  v-show="titleName === 'DB-Kafka源端DDL处理默认策略'"
+                  v-if="titleType === 'DB-Kafka源端DDL处理策略'"
+                  v-show="titleType === 'DB-Kafka源端DDL处理策略'"
                 >
                   <Select v-model:value="model[field]" :options="typeOptions" />
                   <Alert
@@ -84,10 +96,7 @@
                     message="含义：源端表对象进行DDL，任务应对策略配置。"
                   />
                 </div>
-                <div
-                  v-if="titleName === '系统异常默认策略'"
-                  v-show="titleName === '系统异常默认策略'"
-                >
+                <div v-if="titleType === '系统异常策略'" v-show="titleType === '系统异常策略'">
                   <Select v-model:value="model[field]" :options="typeOptions" />
                   <Alert
                     style="margin-top: 20px"
@@ -97,10 +106,7 @@
                   />
                   <SystemStrategic />
                 </div>
-                <div
-                  v-if="titleName === '目标端数据异常默认策略'"
-                  v-show="titleName === '目标端数据异常默认策略'"
-                >
+                <div v-if="titleType === '数据异常策略'" v-show="titleType === '数据异常策略'">
                   <Select v-model:value="model[field]" :options="typeOptions" />
                   <Alert
                     style="margin-top: 20px"
@@ -116,10 +122,7 @@
                   />
                   <ErrorStrategic />
                 </div>
-                <div
-                  v-if="titleName === '数据积压默认策略'"
-                  v-show="titleName === '数据积压默认策略'"
-                >
+                <div v-if="titleType === '数据积压策略'" v-show="titleType === '数据积压策略'">
                   <Select v-model:value="model[field]" :options="typeOptions" />
                   <Alert
                     style="margin-top: 20px"
@@ -170,6 +173,7 @@
     errorFormSchema,
     backlogFormSchema,
     checkFormSchema,
+    addFormSchema,
   } from './strategic.data';
   import { useForm } from '@/components/Form';
   import SystemStrategic from '@/views/realTimeSync/strategicIndicators/systemStrategic.vue';
@@ -179,6 +183,7 @@
   const searchInfo = reactive<Recordable>({});
 
   const tabsKey = ref('1');
+  const isAdd = ref(false);
 
   const typeOptions = [
     {
@@ -214,6 +219,24 @@
         span: 24,
       },
     });
+
+  const [
+    registerAdd,
+    {
+      setFieldsValue: addsetFieldsValue,
+      updateSchema: addupdateSchema,
+      resetSchema: addresetSchema,
+      resetFields: addresetFields,
+      validate: addvalidate,
+    },
+  ] = useForm({
+    labelWidth: 150,
+    schemas: addFormSchema,
+    showActionButtonGroup: false,
+    actionColOptions: {
+      span: 24,
+    },
+  });
   const [registerCheck, { setFieldsValue: checkSetFieldsValue, updateSchema: checkUpdateSchema }] =
     useForm({
       labelWidth: 150,
@@ -236,6 +259,7 @@
       getRowSelection,
       setSelectedRows,
       clearSelectedRowKeys,
+      setSelectedRowKeys,
     },
   ] = useTable({
     title: '',
@@ -262,12 +286,17 @@
       autoSubmitOnEnter: true,
       showActionButtonGroup: false,
     },
+    rowSelection: {
+      type: 'radio',
+      onChange: handleSelect,
+    },
+    clickToRowSelect: true,
     useSearchForm: false,
     striped: false,
     showTableSetting: false,
     bordered: false,
     pagination: false,
-    rowSelection: { onSelect: handleSelect },
+    // rowSelection: { onSelect: handleSelect },
     handleSearchInfoFn(info) {
       return info;
     },
@@ -279,9 +308,14 @@
   } as BasicTableProps);
 
   function handleRow(record) {
-    titleName.value = record.strategicName;
+    handleab();
+    const index = TreeSystem.findIndex((item) => item.strategicId === record.strategicId);
+    if (index !== -1) {
+      titleName.value = TreeSystem[index].strategicName;
+      titleType.value = TreeSystem[index].strategicType;
+    }
     console.log('record', record);
-    setSelectedRows([{ strategicId: record.strategicId }]);
+    // setSelectedRows({ strategicId: record.strategicId });、
     if (record.strategicId === 101) {
       console.log('被调用1');
       resetSchema([...backlogFormSchema]);
@@ -304,22 +338,37 @@
     }
   }
   const titleName = ref(null);
+  const titleType = ref(null);
   function handleSelect(record) {
     console.log('record', record);
-    titleName.value = record.strategicName;
-    nextTick(() => {
-      setSelectedRows([{ strategicId: record.strategicId }]);
-    });
+    // nextTick(() => {
+    //   setSelectedRows({ strategicId: record.strategicId });
+    // });
+    handleRow({ strategicId: record[0] });
     console.log('getRowSelection', getRowSelection());
   }
   onMounted(() => {});
 
-  function handleAdd() {}
+  function handleAdd() {
+    titleType.value = null;
+    isAdd.value = true;
+  }
+
+  function handleab() {
+    isAdd.value = false;
+  }
   function handleSubmit() {}
+  function handleDelete() {}
 </script>
 
 <style lang="less" scoped>
   .hover1 {
     cursor: pointer;
   }
+  .select-class {
+    background-color: #e0f1ff;
+  }
+  ::v-deep .ant-table-cell {
+    padding: 0;
+  }
 </style>

src/views/realTimeSync/strategicIndicators/strategic.data.ts

@@ -573,3 +573,39 @@ export const clearFormSchema: FormSchema[] = [
     colProps: { lg: 24, md: 24 },
   },
 ];
+
+export const addFormSchema: FormSchema[] = [
+  {
+    field: 'strategicName',
+    label: '策略名称',
+    component: 'Input',
+    colProps: { lg: 13, md: 13 },
+    required: true,
+  },
+  {
+    field: 'description',
+    label: '描述',
+    component: 'InputTextArea',
+    componentProps: {
+      rows: 4,
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+  {
+    field: 'strategicType',
+    label: '策略类型',
+    component: 'Select',
+    componentProps: {
+      placeholder: '策略类型',
+      options: [
+        { label: 'DB-DB源端DDL处理策略', value: 'DB-DB源端DDL处理策略' },
+        { label: 'DB-Kafka源端DDL处理策略', value: 'DB-Kafka源端DDL处理策略' },
+        { label: '系统异常处理策略', value: '系统异常处理策略' },
+        { label: '异常数据处理策略', value: '异常数据处理策略' },
+        { label: '数据积压策略', value: '数据积压策略' },
+        { label: '—致性检查策略', value: '致性检查策略' },
+      ],
+    },
+    colProps: { lg: 13, md: 13 },
+  },
+];

src/views/realTimeSync/strategicIndicators/strategicData.ts

@@ -12,7 +12,7 @@ export const TreeSystem: any[] = [
   {
     strategicId: 103,
     strategicName: 'DB-DB源端DDL处理默认策略',
-    strategicType: 'DB-DB源媛DDL处理策略',
+    strategicType: 'DB-DB源端DDL处理策略',
   },
   {
     strategicId: 104,
@@ -22,7 +22,7 @@ export const TreeSystem: any[] = [
   {
     strategicId: 105,
     strategicName: '一致性检查默认策略',
-    strategicType: '致性检查策略',
+    strategicType: '一致性检查策略',
   },
   {
     strategicId: 106,