Merge branch 'dev' of github.com:jetlinks/jetlinks-ui-vue into dev

2023-01-13 11:55:02 +08:00 · 2023-01-13 11:55:02 +08:00 · 7b53119ad9
parent badecf9f64 83c75f1ae6
commit 7b53119ad9
5 changed files with 128 additions and 61 deletions
--- a/src/api/notice/config.ts
+++ b/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)
+}
--- a/src/views/notice/Config/Detail/components/EditTable.vue
+++ b/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>
--- a/src/views/notice/Config/Detail/index.vue
+++ b/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>

--- a/src/views/notice/Config/index.vue
+++ b/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>
--- a/src/views/notice/Config/types.d.ts
+++ b/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;
 };