From a3ac144a7220cb40cb08b75500e4ffb7faafa38c Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 22 Mar 2023 16:00:07 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20bug#10677=E3=80=8110687=E3=80=8110688?=
 =?UTF-8?q?=E3=80=8110693=E3=80=8110701=E3=80=8110720=E4=BF=AE=E5=A4=8D?=
 =?UTF-8?q?=E8=AE=BE=E5=A4=87=E6=8E=A5=E5=85=A5=E7=BD=91=E5=85=B3=E9=83=A8?=
 =?UTF-8?q?=E5=88=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../AccessConfig/components/Channel/index.vue |  8 +-
 .../AccessConfig/components/Cloud/Ctwing.vue  | 16 +++-
 .../AccessConfig/components/Cloud/OneNet.vue  | 17 +++-
 .../AccessConfig/components/Edge/index.vue    | 14 ++-
 .../AccessConfig/components/Media/GB28181.vue | 86 +++++++++++++------
 .../AccessConfig/components/Media/index.vue   |  6 +-
 .../AccessConfig/components/Network/index.vue | 20 ++++-
 src/views/link/AccessConfig/index.vue         | 13 ++-
 src/views/link/Type/Detail/index.vue          |  2 +-
 9 files changed, 133 insertions(+), 49 deletions(-)

diff --git a/src/views/link/AccessConfig/components/Channel/index.vue b/src/views/link/AccessConfig/components/Channel/index.vue
index 01a37d29..a22f6776 100644
--- a/src/views/link/AccessConfig/components/Channel/index.vue
+++ b/src/views/link/AccessConfig/components/Channel/index.vue
@@ -20,7 +20,11 @@
                                     message: '请输入名称',
                                     trigger: 'blur',
                                 },
-                                { max: 64, message: '最多可输入64个字符' },
+                                {
+                                    max: 64,
+                                    message: '最多可输入64个字符',
+                                    trigger: 'blur',
+                                },
                             ]"
                         >
                             <j-input
@@ -119,7 +123,7 @@ const onFinish = async (values: any) => {
 };
 
 onMounted(() => {
-    if (id === ':id') {
+    if (id !== ':id') {
         formState.value = {
             name: props.data.name,
             description: props.data?.description || '',
diff --git a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
index 7c22d81e..2eccd985 100644
--- a/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
+++ b/src/views/link/AccessConfig/components/Cloud/Ctwing.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <j-steps class="steps-steps" :current="stepCurrent">
-            <j-step v-for="item in steps" :key="item" :title="item" />
+            <j-step disabled v-for="item in steps" :key="item" :title="item" />
         </j-steps>
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
@@ -51,6 +51,7 @@
                                                     max: 64,
                                                     message:
                                                         '最多可输入64个字符',
+                                                    trigger: 'blur',
                                                 },
                                             ]"
                                         >
@@ -75,6 +76,7 @@
                                                     max: 64,
                                                     message:
                                                         '最多可输入64个字符',
+                                                    trigger: 'blur',
                                                 },
                                             ]"
                                         >
@@ -202,7 +204,11 @@
                             </AccessCard>
                         </j-col>
                     </j-row>
-                    <j-empty v-else description="暂无数据" />
+                    <j-empty
+                        style="margin-top: 10%"
+                        v-else
+                        description="暂无数据"
+                    />
                 </j-scrollbar>
             </div>
         </div>
@@ -226,7 +232,11 @@
                                     message: '请输入名称',
                                     trigger: 'blur',
                                 },
-                                { max: 64, message: '最多可输入64个字符' },
+                                {
+                                    max: 64,
+                                    message: '最多可输入64个字符',
+                                    trigger: 'blur',
+                                },
                             ]"
                         >
                             <j-input
diff --git a/src/views/link/AccessConfig/components/Cloud/OneNet.vue b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
index 2e378fc9..894279e2 100644
--- a/src/views/link/AccessConfig/components/Cloud/OneNet.vue
+++ b/src/views/link/AccessConfig/components/Cloud/OneNet.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <j-steps class="steps-steps" :current="stepCurrent">
-            <j-step v-for="item in steps" :key="item" :title="item" />
+            <j-step disabled v-for="item in steps" :key="item" :title="item" />
         </j-steps>
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
@@ -63,6 +63,7 @@
                                                     max: 64,
                                                     message:
                                                         '最多可输入64个字符',
+                                                    trigger: 'blur',
                                                 },
                                             ]"
                                         >
@@ -86,6 +87,7 @@
                                                     max: 64,
                                                     message:
                                                         '最多可输入64个字符',
+                                                    trigger: 'blur',
                                                 },
                                             ]"
                                         >
@@ -116,6 +118,7 @@
                                                     max: 64,
                                                     message:
                                                         '最多可输入64个字符',
+                                                    trigger: 'blur',
                                                 },
                                             ]"
                                         >
@@ -284,7 +287,11 @@
                             </AccessCard>
                         </j-col>
                     </j-row>
-                    <j-empty v-else description="暂无数据" />
+                    <j-empty
+                        style="margin-top: 10%"
+                        v-else
+                        description="暂无数据"
+                    />
                 </j-scrollbar>
             </div>
         </div>
@@ -309,7 +316,11 @@
                                         message: '请输入名称',
                                         trigger: 'blur',
                                     },
-                                    { max: 64, message: '最多可输入64个字符' },
+                                    {
+                                        max: 64,
+                                        message: '最多可输入64个字符',
+                                        trigger: 'blur',
+                                    },
                                 ]"
                             >
                                 <j-input
diff --git a/src/views/link/AccessConfig/components/Edge/index.vue b/src/views/link/AccessConfig/components/Edge/index.vue
index b0800cfe..b314afaa 100644
--- a/src/views/link/AccessConfig/components/Edge/index.vue
+++ b/src/views/link/AccessConfig/components/Edge/index.vue
@@ -5,7 +5,7 @@
             class="steps-steps"
             :current="stepCurrent"
         >
-            <j-step v-for="item in steps" :key="item" :title="item" />
+            <j-step disabled v-for="item in steps" :key="item" :title="item" />
         </j-steps>
         <div v-if="channel !== 'edge-child-device'" class="steps-content">
             <div class="steps-box" v-if="current === 0">
@@ -95,7 +95,11 @@
                             </AccessCard>
                         </j-col>
                     </j-row>
-                    <j-empty v-else description="暂无数据" />
+                    <j-empty
+                        style="margin-top: 10%"
+                        v-else
+                        description="暂无数据"
+                    />
                 </j-scrollbar>
             </div>
         </div>
@@ -123,7 +127,11 @@
                                     message: '请输入名称',
                                     trigger: 'blur',
                                 },
-                                { max: 64, message: '最多可输入64个字符' },
+                                {
+                                    max: 64,
+                                    message: '最多可输入64个字符',
+                                    trigger: 'blur',
+                                },
                             ]"
                         >
                             <j-input
diff --git a/src/views/link/AccessConfig/components/Media/GB28181.vue b/src/views/link/AccessConfig/components/Media/GB28181.vue
index f3b17be4..c44876b7 100644
--- a/src/views/link/AccessConfig/components/Media/GB28181.vue
+++ b/src/views/link/AccessConfig/components/Media/GB28181.vue
@@ -1,7 +1,7 @@
 <template>
     <div style="margin-top: 10px">
         <j-steps :current="stepCurrent">
-            <j-step v-for="item in steps" :key="item" :title="item" />
+            <j-step disabled v-for="item in steps" :key="item" :title="item" />
         </j-steps>
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
@@ -29,7 +29,8 @@
                                     },
                                     {
                                         max: 64,
-                                        message: '最大可输入64个字符',
+                                        message: '最多可输入64个字符',
+                                        trigger: 'blur',
                                     },
                                 ]"
                             >
@@ -50,7 +51,8 @@
                                     },
                                     {
                                         max: 64,
-                                        message: '最大可输入64个字符',
+                                        message: '最多可输入64个字符',
+                                        trigger: 'blur',
                                     },
                                 ]"
                             >
@@ -202,7 +204,11 @@
                             <j-collapse v-model:activeKey="activeKey">
                                 <j-collapse-panel
                                     :key="cluster.id"
-                                    :header="`#${index + 1}.节点`"
+                                    :header="
+                                        cluster.clusterNodeId
+                                            ? cluster.clusterNodeId
+                                            : `#${index + 1}.配置信息`
+                                    "
                                 >
                                     <template #extra>
                                         <span
@@ -504,7 +510,7 @@ interface Form2 {
 }
 interface FormState {
     domain: string | undefined;
-    sipId: string | undefined;
+    sipId: string | number | undefined;
     shareCluster: boolean;
     hostPort: {
         port: string | undefined;
@@ -576,7 +582,7 @@ const removeCluster = (item: Form2) => {
 };
 
 const addCluster = () => {
-    const id = Date.now();
+    const id: any = Date.now();
     dynamicValidateForm.cluster.push({
         clusterNodeId: undefined,
         port: undefined,
@@ -613,7 +619,11 @@ const { resetFields, validate, validateInfos } = useForm(
     reactive({
         name: [
             { required: true, message: '请输入名称', trigger: 'blur' },
-            { max: 64, message: '最多可输入64个字符' },
+            {
+                max: 64,
+                message: '最多可输入64个字符',
+                trigger: 'blur',
+            },
         ],
         description: [{ max: 200, message: '最多可输入200个字符' }],
     }),
@@ -628,7 +638,7 @@ const saveData = () => {
             transport: 'SIP',
             channel: 'gb28181',
         };
-
+        params.configuration.sipId = Number(params.configuration?.sipId);
         const resp =
             id === ':id' ? await save(params) : await update({ ...params, id });
         if (resp.status === 200) {
@@ -645,20 +655,32 @@ const next = async () => {
         data1.hostPort.port = port;
     }
     if (!data1?.shareCluster) {
-        let data2 = await formRef2.value?.validate();
-        if (data2 && data2?.cluster) {
-            data2.cluster.forEach((i: any) => {
-                i.enabled = true;
-                i.port = JSON.parse(i.port).port;
+        await formRef2.value
+            ?.validate()
+            .then((data2) => {
+                if (data2 && data2?.cluster) {
+                    data2.cluster.forEach((i: any) => {
+                        i.enabled = true;
+                        i.port = JSON.parse(i.port).port;
+                    });
+                    data1 = {
+                        ...data1,
+                        ...data2,
+                    };
+                }
+                current.value = current.value + 1;
+                params.configuration = data1;
+            })
+            .catch((err) => {
+                err.errorFields.forEach((item: any) => {
+                    const activeId: any =
+                        dynamicValidateForm.cluster[item.name[1]].id;
+                    if (!activeKey.value.includes(activeId)) {
+                        activeKey.value.push(activeId); // 校验未通过的展开
+                    }
+                });
             });
-            data1 = {
-                ...data1,
-                ...data2,
-            };
-        }
     }
-    current.value = current.value + 1;
-    params.configuration = data1;
 };
 const prev = () => {
     current.value = current.value - 1;
@@ -698,11 +720,25 @@ onMounted(() => {
     });
 
     if (id !== ':id') {
-        formState.value = props.data.configuration;
-        formData.value = {
-            name: props.data.name,
-            description: props.data?.description || '',
-        };
+        const { configuration, name, description = '' } = props.data;
+        formData.value = { name, description };
+
+        if (configuration?.shareCluster) {
+            formState.value = {
+                ...formState.value,
+                ...props.data.configuration,
+            };
+        } else {
+            formState.value = {
+                ...formState.value,
+                ...props.data.configuration,
+            };
+            dynamicValidateForm.cluster = configuration.cluster;
+            if (dynamicValidateForm.cluster.length === 1) {
+                activeKey.value = ['1'];
+                dynamicValidateForm.cluster[0].id = 1;
+            }
+        }
     }
 });
 
diff --git a/src/views/link/AccessConfig/components/Media/index.vue b/src/views/link/AccessConfig/components/Media/index.vue
index 5f1716f3..916988e8 100644
--- a/src/views/link/AccessConfig/components/Media/index.vue
+++ b/src/views/link/AccessConfig/components/Media/index.vue
@@ -21,7 +21,11 @@
                                         message: '请输入名称',
                                         trigger: 'blur',
                                     },
-                                    { max: 64, message: '最多可输入64个字符' },
+                                    {
+                                        max: 64,
+                                        message: '最多可输入64个字符',
+                                        trigger: 'blur',
+                                    },
                                 ]"
                             >
                                 <j-input
diff --git a/src/views/link/AccessConfig/components/Network/index.vue b/src/views/link/AccessConfig/components/Network/index.vue
index ce93bc0a..164319dc 100644
--- a/src/views/link/AccessConfig/components/Network/index.vue
+++ b/src/views/link/AccessConfig/components/Network/index.vue
@@ -1,7 +1,7 @@
 <template>
     <div>
         <j-steps :current="stepCurrent">
-            <j-step v-for="item in steps" :key="item" :title="item" />
+            <j-step disabled v-for="item in steps" :key="item" :title="item" />
         </j-steps>
         <div class="steps-content">
             <div class="steps-box" v-if="current === 0">
@@ -92,7 +92,11 @@
                             </AccessCard>
                         </j-col>
                     </j-row>
-                    <j-empty v-else description="暂无数据" />
+                    <j-empty
+                        style="margin-top: 10%"
+                        v-else
+                        description="暂无数据"
+                    />
                 </j-scrollbar>
             </div>
             <div class="steps-box" v-else-if="current === 1">
@@ -135,7 +139,11 @@
                             </AccessCard>
                         </j-col>
                     </j-row>
-                    <j-empty v-else description="暂无数据" />
+                    <j-empty
+                        style="margin-top: 10%"
+                        v-else
+                        description="暂无数据"
+                    />
                 </j-scrollbar>
             </div>
             <div class="steps-box" v-else>
@@ -375,7 +383,11 @@ const { resetFields, validate, validateInfos } = useForm(
     reactive({
         name: [
             { required: true, message: '请输入名称', trigger: 'blur' },
-            { max: 64, message: '最多可输入64个字符' },
+            {
+                max: 64,
+                message: '最多可输入64个字符',
+                trigger: 'blur',
+            },
         ],
         description: [{ max: 200, message: '最多可输入200个字符' }],
     }),
diff --git a/src/views/link/AccessConfig/index.vue b/src/views/link/AccessConfig/index.vue
index 5564d8ac..5cfdbea5 100644
--- a/src/views/link/AccessConfig/index.vue
+++ b/src/views/link/AccessConfig/index.vue
@@ -186,6 +186,7 @@ const tableRef = ref<Record<string, any>>({});
 const params = ref<Record<string, any>>({});
 
 let providersList = ref<Record<string, any>>([]);
+const providersOptions = ref<Record<string, any>>([]);
 
 const statusMap = new Map();
 statusMap.set('enabled', 'success');
@@ -207,13 +208,7 @@ const columns = [
         key: 'provider',
         search: {
             type: 'select',
-            options: async () => {
-                const res: any = await getProviders();
-                return (res?.result || [])?.map((item: any) => ({
-                    lable: item.name,
-                    value: item.id,
-                }));
-            },
+            options: providersOptions,
         },
     },
     {
@@ -315,6 +310,10 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
 const getProvidersList = async () => {
     const res: any = await getProviders();
     providersList.value = res.result;
+    providersOptions.value = (res?.result || [])?.map((item: any) => ({
+        label: item.name,
+        value: item.id,
+    }));
 };
 getProvidersList();
 
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index 5457b433..0f5ca6bd 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -1358,7 +1358,7 @@ watch(
             top: -10px;
             left: 10px;
             right: 10px;
-            width: calc(100%-10px);
+            width: calc(100% - 10px);
             height: 100%;
             background-color: #f4f4f4;
             content: ' ';