fix: 运维管理 协议管理修复部分bug

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 = {

src/views/DataCollect/Collector/Point/Save/SaveOPCUA.vue

@@ -190,22 +190,4 @@ watch(
 );
 </script>
 
-<style lang="less" scoped>
+<style lang="less" scoped></style>
-.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>

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>

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">
+            <j-form-item
-                <RadioCard
+                label="类型"
+                name="type"
+                :rules="[
+                    { required: true, message: '请选择类型', trigger: 'blur' },
+                ]"
+            >
+                <j-card-select
                     :disabled="!!id"
-                    layout="horizontal"
+                    v-model:value="formData.type"
-                    :checkStyle="true"
                     :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(
+const onSubmit = async () => {
-    formData,
+    const data: any = await formRef.value?.validate();
-    reactive({
+    loading.value = true;
-        type: [{ required: true, message: '请选择类型', trigger: 'blur' }],
+    const response = !id
-        name: [
+        ? await save(data).catch(() => {})
-            { required: true, message: '请输入名称', trigger: 'blur' },
+        : await update({ ...props.data, ...data }).catch(() => {});
-            { max: 64, message: '最多可输入64个字符' },
+    if (response?.status === 200) {
-        ],
+        emit('change', response?.status === 200);
-        'configuration.location': [
+    }
-            { required: true, message: '请输入文件地址', trigger: 'blur' },
+    loading.value = false;
-        ],
-        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 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 },
 );

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"

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;
+}

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 });
+        id === ':id'
-    if (resp.status === 200) {
+            ? await save(params).catch(() => {})
+            : await update({ ...params, id }).catch(() => {});
+    if (resp?.status === 200) {
         message.success('操作成功！');
         history.back();
     }