From 8051989d2cfa203f266a05ea6426eda132517247 Mon Sep 17 00:00:00 2001
From: jackhoo_98 <jackhoo_98@foxmail.com>
Date: Wed, 15 Mar 2023 17:03:47 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20=E8=BF=90=E7=BB=B4=E7=AE=A1=E7=90=86=20?=
 =?UTF-8?q?=E5=8D=8F=E8=AE=AE=E7=AE=A1=E7=90=86=E4=BF=AE=E5=A4=8D=E9=83=A8?=
 =?UTF-8?q?=E5=88=86bug?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/DataCollect/Channel/data.ts         |   2 +-
 .../Collector/Point/Save/SaveOPCUA.vue        |  20 +---
 src/views/link/Protocol/Save/FileUpload.vue   |   4 +-
 src/views/link/Protocol/Save/index.vue        | 101 ++++++++++--------
 src/views/link/Protocol/index.vue             |   6 +-
 src/views/link/Protocol/type.d.ts             |   8 ++
 src/views/link/Type/Detail/index.vue          |   6 +-
 7 files changed, 76 insertions(+), 71 deletions(-)
 create mode 100644 src/views/link/Protocol/type.d.ts

diff --git a/src/views/DataCollect/Channel/data.ts b/src/views/DataCollect/Channel/data.ts
index 4330f067..158b211e 100644
--- a/src/views/DataCollect/Channel/data.ts
+++ b/src/views/DataCollect/Channel/data.ts
@@ -63,7 +63,7 @@ export const regDomain = new RegExp(
 );
 export const checkEndpoint = (_rule: Rule, value: string): Promise<any> =>
     new Promise(async (resolve, reject) => {
-        const res = await validateField(value);
+        const res: any = await validateField(value);
         return res.result.passed ? resolve('') : reject(res.result.reason);
     });
 export const FormValidate = {
diff --git a/src/views/DataCollect/Collector/Point/Save/SaveOPCUA.vue b/src/views/DataCollect/Collector/Point/Save/SaveOPCUA.vue
index 08fe3c4d..b6178cab 100644
--- a/src/views/DataCollect/Collector/Point/Save/SaveOPCUA.vue
+++ b/src/views/DataCollect/Collector/Point/Save/SaveOPCUA.vue
@@ -190,22 +190,4 @@ watch(
 );
 </script>
 
-<style lang="less" scoped>
-.form {
-    .form-radio-button {
-        width: 148px;
-        height: 80px;
-        padding: 0;
-        img {
-            width: 100%;
-            height: 100%;
-        }
-    }
-    .form-upload-button {
-        margin-top: 10px;
-    }
-    .form-submit {
-        background-color: @primary-color !important;
-    }
-}
-</style>
+<style lang="less" scoped></style>
diff --git a/src/views/link/Protocol/Save/FileUpload.vue b/src/views/link/Protocol/Save/FileUpload.vue
index 015ddc4b..64a77491 100644
--- a/src/views/link/Protocol/Save/FileUpload.vue
+++ b/src/views/link/Protocol/Save/FileUpload.vue
@@ -58,7 +58,7 @@ const handleChange = async (info: UploadChangeParam) => {
     if (info.file.status === 'done') {
         loading.value = false;
         const result = info.file.response?.result;
-        const api = await querySystemApi(['paths']);
+        const api: any = await querySystemApi(['paths']);
         const path = api.result[0]?.properties
             ? api.result[0]?.properties['base-path']
             : '';
@@ -86,6 +86,8 @@ const handleChange = async (info: UploadChangeParam) => {
 .upload-box {
     :deep(.ant-btn) {
         width: 100px;
+        border-top-left-radius: 0;
+        border-bottom-left-radius: 0;
     }
 }
 </style>
diff --git a/src/views/link/Protocol/Save/index.vue b/src/views/link/Protocol/Save/index.vue
index 6384a442..a9d2eaeb 100644
--- a/src/views/link/Protocol/Save/index.vue
+++ b/src/views/link/Protocol/Save/index.vue
@@ -11,25 +11,45 @@
             :model="formData"
             name="basic"
             autocomplete="off"
+            ref="formRef"
         >
-            <j-form-item label="名称" v-bind="validateInfos.name">
+            <j-form-item
+                label="名称"
+                name="name"
+                :rules="[
+                    { required: true, message: '请输入名称', trigger: 'blur' },
+                    { max: 64, message: '最多可输入64个字符' },
+                ]"
+            >
                 <j-input
                     placeholder="请输入名称"
                     v-model:value="formData.name"
                 />
             </j-form-item>
-            <j-form-item label="类型" v-bind="validateInfos.type">
-                <RadioCard
+            <j-form-item
+                label="类型"
+                name="type"
+                :rules="[
+                    { required: true, message: '请选择类型', trigger: 'blur' },
+                ]"
+            >
+                <j-card-select
                     :disabled="!!id"
-                    layout="horizontal"
-                    :checkStyle="true"
+                    v-model:value="formData.type"
                     :options="options"
-                    v-model="formData.type"
+                    @change="changeType"
                 />
             </j-form-item>
             <j-form-item
                 label="文件地址"
-                v-bind="validateInfos['configuration.location']"
+                :name="['configuration', 'location']"
+                :rules="[
+                    {
+                        required: true,
+                        message: '请输入文件地址',
+                        trigger: 'blur',
+                    },
+                ]"
             >
                 <j-input
                     v-if="formData.type === 'local'"
@@ -41,7 +61,7 @@
                     v-model:modelValue="formData.configuration.location"
                 />
             </j-form-item>
-            <j-form-item label="说明" v-bind="validateInfos.description">
+            <j-form-item label="说明" name="description">
                 <j-textarea
                     placeholder="请输入说明"
                     v-model:value="formData.description"
@@ -67,16 +87,16 @@
     </j-modal>
 </template>
 <script lang="ts" setup>
-import { message, Form } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
-import type { UploadChangeParam } from 'ant-design-vue';
+import type { UploadChangeParam, FormInstance } from 'ant-design-vue';
 import FileUpload from './FileUpload.vue';
 import { save, update } from '@/api/link/protocol';
+import { FormDataType } from '../type.d';
 
 const loading = ref(false);
 const fileLoading = ref(false);
-const useForm = Form.useForm;
-
+const formRef = ref<FormInstance>();
 const props = defineProps({
     data: {
         type: Object,
@@ -91,16 +111,16 @@ const options = [
     {
         label: 'Jar',
         value: 'jar',
-        logo: getImage('/jar.png'),
+        iconUrl: getImage('/jar.png'),
     },
     {
         label: 'Local',
         value: 'local',
-        logo: getImage('/local.png'),
+        iconUrl: getImage('/local.png'),
     },
 ];
 
-const formData = ref({
+const formData = ref<FormDataType>({
     type: 'jar',
     name: '',
     configuration: {
@@ -108,38 +128,20 @@ const formData = ref({
     },
     description: '',
 });
+const changeType = (value: Array<string>) => {
+    formData.value.type = value[0];
+};
 
-const { resetFields, validate, validateInfos } = useForm(
-    formData,
-    reactive({
-        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
-        name: [
-            { required: true, message: '请输入名称', trigger: 'blur' },
-            { max: 64, message: '最多可输入64个字符' },
-        ],
-        'configuration.location': [
-            { required: true, message: '请输入文件地址', trigger: 'blur' },
-        ],
-        description: [{ max: 200, message: '最多可输入200个字符' }],
-    }),
-);
-const onSubmit = () => {
-    validate()
-        .then(async (res) => {
-            const params = toRaw(formData.value);
-
-            loading.value = true;
-            const response = !id
-                ? await save(params)
-                : await update({ ...props.data, ...params });
-            if (response.status === 200) {
-                emit('change', true);
-            }
-            loading.value = false;
-        })
-        .catch((err) => {
-            loading.value = false;
-        });
+const onSubmit = async () => {
+    const data: any = await formRef.value?.validate();
+    loading.value = true;
+    const response = !id
+        ? await save(data).catch(() => {})
+        : await update({ ...props.data, ...data }).catch(() => {});
+    if (response?.status === 200) {
+        emit('change', response?.status === 200);
+    }
+    loading.value = false;
 };
 
 const handleChange = (info: UploadChangeParam) => {
@@ -168,7 +170,12 @@ watch(
 watch(
     () => props.data,
     (value) => {
-        if (value.id) formData.value = value;
+        if (value.id) {
+            formData.value = value as FormDataType;
+            if (!!value.type[0]?.value) {
+                formData.value.type = value.type.map((i: any) => i.value);
+            }
+        }
     },
     { immediate: true, deep: true },
 );
diff --git a/src/views/link/Protocol/index.vue b/src/views/link/Protocol/index.vue
index 8ecf699d..dbf9b5de 100644
--- a/src/views/link/Protocol/index.vue
+++ b/src/views/link/Protocol/index.vue
@@ -1,7 +1,11 @@
 <template>
     <page-container>
         <div>
-            <Search :columns="columns" target="search" @search="handleSearch" />
+            <pro-search
+                :columns="columns"
+                target="search"
+                @search="handleSearch"
+            />
 
             <j-pro-table
                 ref="tableRef"
diff --git a/src/views/link/Protocol/type.d.ts b/src/views/link/Protocol/type.d.ts
new file mode 100644
index 00000000..ad436891
--- /dev/null
+++ b/src/views/link/Protocol/type.d.ts
@@ -0,0 +1,8 @@
+export interface FormDataType {
+    type: string | array<string>;
+    name: string;
+    configuration: {
+        location: string;
+    };
+    description: string;
+}
diff --git a/src/views/link/Type/Detail/index.vue b/src/views/link/Type/Detail/index.vue
index 17e6a7e1..8ed366e0 100644
--- a/src/views/link/Type/Detail/index.vue
+++ b/src/views/link/Type/Detail/index.vue
@@ -1147,8 +1147,10 @@ const saveData = async () => {
 
     loading.value = true;
     const resp =
-        id === ':id' ? await save(params) : await update({ ...params, id });
-    if (resp.status === 200) {
+        id === ':id'
+            ? await save(params).catch(() => {})
+            : await update({ ...params, id }).catch(() => {});
+    if (resp?.status === 200) {
         message.success('操作成功！');
         history.back();
     }