fix: 通知配置新增修改接口联调

src/api/notice/config.ts

@@ -0,0 +1,12 @@
+import { patch, post, get } from '@/utils/request'
+
+export default {
+    // 列表
+    list: (data: any) => post(`/notifier/config/_query`, data),
+    // 详情
+    detail: (id: string): any => get(`/notifier/config/${id}`),
+    // 新增
+    save: (data: any) => post(`/notifier/config`, data),
+    // 修改
+    update: (data: any) => patch(`/notifier/config`, data)
+}

src/views/notice/Config/Detail/components/EditTable.vue

@@ -1,65 +1,63 @@
 <!-- webhook请求头可编辑表格 -->
 <template>
-    <a-table
-        :columns="columns"
-        :data-source="dataSource"
-        bordered
-        :pagination="false"
-    >
-        <template #bodyCell="{ column, text, record }">
-            <template v-if="['KEY', 'VALUE'].includes(column.dataIndex)">
-                <a-input v-model="record[column.dataIndex]" />
+    <div class="table-wrapper">
+        <a-table
+            :columns="columns"
+            :data-source="dataSource"
+            bordered
+            :pagination="false"
+        >
+            <template #bodyCell="{ column, text, record }">
+                <template v-if="['key', 'value'].includes(column.dataIndex)">
+                    <a-input v-model:value="record[column.dataIndex]" />
+                </template>
+                <template v-else-if="column.dataIndex === 'operation'">
+                    <a-button type="text">
+                        <template #icon>
+                            <delete-outlined @click="handleDelete(record.id)" />
+                        </template>
+                    </a-button>
+                </template>
             </template>
-            <template v-else-if="column.dataIndex === 'operation'">
-                <a-button type="text">
-                    <template #icon>
-                        <delete-outlined @click="handleDelete(record.idx)" />
-                    </template>
-                </a-button>
+        </a-table>
+        <a-button
+            type="dashed"
+            @click="handleAdd"
+            style="width: 100%; margin-top: 5px"
+        >
+            <template #icon>
+                <plus-outlined />
             </template>
-        </template>
-    </a-table>
-    <a-button
-        type="dashed"
-        @click="handleAdd"
-        style="width: 100%; margin-top: 5px"
-    >
-        <template #icon>
-            <plus-outlined />
-        </template>
-        添加
-    </a-button>
+            添加
+        </a-button>
+    </div>
 </template>
 
 <script setup lang="ts">
 import { PlusOutlined, DeleteOutlined } from '@ant-design/icons-vue';
-// import { cloneDeep } from 'lodash-es';
-// import { defineComponent, reactive, ref } from 'vue';
-// import type { UnwrapRef } from 'vue';
+import { PropType } from 'vue';
+import { IHeaders } from '../../types';
 
-interface DataItem {
-    idx: number;
-    KEY: string;
-    VALUE: string;
-}
+type Emits = {
+    (e: 'update:headers', data: IHeaders[]): void;
+};
+const emit = defineEmits<Emits>();
 
-const data: DataItem[] = [];
-for (let i = 0; i < 2; i++) {
-    data.push({
-        idx: i,
-        KEY: `key ${i}`,
-        VALUE: `value${i}`,
-    });
-}
+const props = defineProps({
+    headers: {
+        type: Array as PropType<IHeaders[]>,
+        default: () => [],
+    },
+});
 
 const columns = [
     {
         title: 'KEY',
-        dataIndex: 'KEY',
+        dataIndex: 'key',
     },
     {
         title: 'VALUE',
-        dataIndex: 'VALUE',
+        dataIndex: 'value',
     },
     {
         title: '操作',
@@ -69,17 +67,20 @@ const columns = [
     },
 ];
 
-const dataSource = ref(data);
-console.log('dataSource: ', dataSource.value);
+const dataSource = computed({
+    get: () => props.headers,
+    set: (val) => emit('update:headers', val),
+});
 
-const handleDelete = (idx: number) => {
+const handleDelete = (id: number) => {
+    const idx = dataSource.value.findIndex((f) => f.id === id);
     dataSource.value.splice(idx, 1);
 };
 const handleAdd = () => {
     dataSource.value.push({
-        idx: dataSource.value.length + 1,
-        KEY: `key ${dataSource.value.length + 1}`,
-        VALUE: `value ${dataSource.value.length + 1}`,
+        id: dataSource.value.length,
+        key: `key ${dataSource.value.length + 1}`,
+        value: `value ${dataSource.value.length + 1}`,
     });
 };
 </script>

src/views/notice/Config/Detail/index.vue

@@ -259,6 +259,7 @@
                             <a-button
                                 type="primary"
                                 @click="handleSubmit"
+                                :loading="btnLoading"
                                 style="width: 100%"
                             >
                                 保存
@@ -283,8 +284,12 @@ import {
     MSG_TYPE,
 } from '@/views/notice/const';
 import regionList from './regionId';
-import EditTable from './components/EditTable.vue'
+import EditTable from './components/EditTable.vue';
 
+import configApi from '@/api/notice/config';
+
+const router = useRouter();
+const route = useRoute();
 const useForm = Form.useForm;
 
 // 消息类型
@@ -311,9 +316,8 @@ const formData = ref<ConfigFormData>({
     description: '',
     name: '',
     provider: 'dingTalkMessage',
-    type: NOTICE_METHOD[0].value,
+    type: 'dingTalk',
 });
-
 // 根据通知方式展示对应的字段
 watch(
     () => formData.value.type,
@@ -383,25 +387,56 @@ const formRules = ref({
             pattern:
                 /^(((ht|f)tps?):\/\/)?([^!@#$%^&*?.\s-]([^!@#$%^&*?.\s]{0,63}[^!@#$%^&*?.\s])?\.)+[a-z]{2,6}\/?/,
             message: 'Webhook需要是一个合法的URL',
-            trigger: 'blur',
         },
     ],
     description: [{ max: 200, message: '最多可输入200个字符' }],
 });
 
-const { resetFields, validate, validateInfos } = useForm(
+const { resetFields, validate, validateInfos, clearValidate } = useForm(
     formData.value,
     formRules.value,
 );
-console.log('validateInfos: ', validateInfos);
+watch(
+    () => formData.value.type,
+    () => {
+        clearValidate();
+    },
+    { deep: true },
+);
+
+const getDetail = async () => {
+    const res = await configApi.detail(route.params.id as string);
+    console.log('res: ', res);
+    formData.value = res.result;
+    console.log('formData.value: ', formData.value);
+};
+getDetail();
 
 /**
  * 表单提交
  */
+const btnLoading = ref<boolean>(false);
 const handleSubmit = () => {
     validate()
-        .then(async () => {})
-        .catch((err) => {});
+        .then(async () => {
+            // console.log('formData.value: ', formData.value);
+            btnLoading.value = true;
+            let res;
+            if (!formData.value.id) {
+                res = await configApi.save(formData.value);
+            } else {
+                res = await configApi.update(formData.value);
+            }
+            // console.log('res: ', res);
+            if (res?.success) {
+                message.success('保存成功');
+                router.back();
+            }
+            btnLoading.value = false;
+        })
+        .catch((err) => {
+            console.log('err: ', err);
+        });
 };
 </script>
 

src/views/notice/Config/index.vue

@@ -3,6 +3,20 @@
     <div class="page-container">通知配置</div>
 </template>
 
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import configApi from '@/api/notice/config';
+
+const getList = async () => {
+    const res = await configApi.list({
+        current: 1,
+        pageIndex: 0,
+        pageSize: 12,
+        sorts: [{ name: 'createTime', order: 'desc' }],
+        terms: [],
+    });
+    console.log('res: ', res);
+};
+getList();
+</script>
 
 <style lang="less" scoped></style>

src/views/notice/Config/types.d.ts

@@ -1,4 +1,5 @@
-interface IHeaders {
+export interface IHeaders {
+    id?: number;
     key: string;
     value: string;
 }
@@ -34,4 +35,8 @@ export type ConfigFormData = {
     name: string;
     provider: string;
     type: string;
+    id?: string;
+    maxRetryTimes?: number;
+    creatorId?: string;
+    createTime?: number;
 };