fix: 修复证书新增 表单多层数据校验、文件上传数据双向绑定

src/views/link/Certificate/Detail/CertificateFile.vue

@@ -64,16 +64,14 @@ const handleChange = (info: UploadChangeParam) => {
         message.success('上传成功！');
         const result = info.file.response?.result;
         keystoreBase64.value = result;
-        console.log(1114, result);
         loading.value = false;
         emit('change', result);
         emit('update:modelValue', result);
     }
 };
 const textChange = (val: any) => {
-    val.name = props.name;
+    emit('change', keystoreBase64.value);
-    emit('change', val);
+    emit('update:modelValue', keystoreBase64.value);
-    // emit('update:modelValue', val);
 };
 
 watch(

src/views/link/Certificate/Detail/index.vue

@@ -10,10 +10,8 @@
                     :label-col="{ span: 8 }"
                     :wrapper-col="{ span: 16 }"
                     autocomplete="off"
-                    @finish="onFinish"
-                    :rules="formRules"
                 >
-                    <a-form-item label="证书标准" name="type">
+                    <a-form-item label="证书标准" v-bind="validateInfos.type">
                         <a-radio-group v-model:value="formData.type">
                             <a-radio-button
                                 class="form-radio-button"
@@ -24,25 +22,29 @@
                         </a-radio-group>
                     </a-form-item>
 
-                    <a-form-item label="证书名称" name="name">
+                    <a-form-item label="证书名称" v-bind="validateInfos.name">
                         <a-input
                             placeholder="请输入证书名称"
                             v-model:value="formData.name"
                         />
                     </a-form-item>
-                    <a-form-item label="证书文件" name="cert">
+                    <a-form-item
+                        label="证书文件"
+                        v-bind="validateInfos['configs.cert']"
+                    >
                         <CertificateFile
                             name="cert"
-                            v-model:modelValue="formData.cert"
+                            v-model:modelValue="formData.configs.cert"
-                            @change="changeFileValue"
                             placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
                         />
                     </a-form-item>
-                    <a-form-item label="证书私钥" name="key">
+                    <a-form-item
+                        label="证书私钥"
+                        v-bind="validateInfos['configs.key']"
+                    >
                         <CertificateFile
                             name="key"
-                            v-model:modelValue="formData.key"
+                            v-model:modelValue="formData.configs.key"
-                            @change="changeFileValue"
                             placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
                         />
                     </a-form-item>
@@ -61,6 +63,8 @@
                             class="form-submit"
                             html-type="submit"
                             type="primary"
+                            @click.prevent="onSubmit"
+                            :loading="loading"
                             >保存</a-button
                         >
                     </a-form-item>
@@ -89,7 +93,7 @@
 </template>
 
 <script lang="ts" setup name="CertificateDetail">
-import { message } from 'ant-design-vue';
+import { message, Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import CertificateFile from './CertificateFile.vue';
 import type { UploadChangeParam } from 'ant-design-vue';
@@ -101,57 +105,65 @@ import {
 } from '@/utils/variable';
 import { save } from '@/api/link/certificate';
 
+const router = useRouter();
+
+const useForm = Form.useForm;
+
+const fileLoading = ref(false);
 const loading = ref(false);
 
 const formData = reactive({
     type: 'common',
     name: '',
-    cert: '',
+    configs: {
-    key: '',
+        cert: '',
-    // configs: {
+        key: '',
-    //     cert: '',
+    },
-    //     key: '',
-    // },
     description: '',
 });
 
-const formRules = {
+const { resetFields, validate, validateInfos } = useForm(
-    type: [{ required: true, message: '请选择证书标准', trigger: 'blur' }],
+    formData,
-    name: [
+    reactive({
-        { required: true, message: '请输入证书名称', trigger: 'blur' },
+        type: [{ required: true, message: '请选择证书标准', trigger: 'blur' }],
-        { max: 64, message: '最多可输入64个字符' },
+        name: [
-    ],
+            { required: true, message: '请输入证书名称', trigger: 'blur' },
-    cert: [{ required: true, message: '请输入或上传文件', trigger: 'blur' }],
+            { max: 64, message: '最多可输入64个字符' },
-    key: [{ required: true, message: '请输入或上传文件', trigger: 'blur' }],
+        ],
-    description: [{ max: 200, message: '最多可输入200个字符' }],
+        'configs.cert': [
-};
+            { required: true, message: '请输入或上传文件', trigger: 'blur' },
+        ],
+        'configs.key': [
+            { required: true, message: '请输入或上传文件', trigger: 'blur' },
+        ],
+        description: [{ max: 200, message: '最多可输入200个字符' }],
+    }),
+);
 
-const onFinish = async (values: any) => {
+const onSubmit = () => {
-    values.configs = {
+    validate()
-        cert: formData.cert,
+        .then(async (res) => {
-        key: formData.key,
+            const params = toRaw(formData);
-    };
+            loading.value = true;
-    delete values.cert;
+            const response = await save(params);
-    delete values.key;
+            if (response.status === 200) {
-
+                message.success('操作成功');
-    const response = await save(values)
+                router.push('/link/certificate');
-      if (response.status === 200) {
+            }
-        message.success('操作成功')
+            loading.value = false;
-      }
+        })
-
+        .catch((err) => {
-};
+            loading.value = false;
-
+        });
-const changeFileValue = (v: any) => {
-    formData[v.name] = v.data;
 };
 
 const handleChange = (info: UploadChangeParam) => {
-    loading.value = true;
+    fileLoading.value = true;
     if (info.file.status === 'done') {
         message.success('上传成功！');
         const result = info.file.response?.result;
-        formData.cert = result;
+        formData.configs.cert = result;
-        loading.value = false;
+        fileLoading.value = false;
     }
 };
 </script>

src/views/link/Certificate/index.vue

@@ -3,8 +3,11 @@
 </template>
 <script lang="ts" setup name="CertificatePage">
 
-const handlAdd = (e: any) => {
+const router = useRouter();
-  console.log(111,e);
+
+
+const handlAdd = () => {
+  router.push('/link/certificate/detail/add');
   
 }