update: 组件更换测试

src/views/media/Device/Save/SaveProduct.vue

@@ -9,32 +9,50 @@
         :confirmLoading="btnLoading"
         width="660px"
     >
-        <j-form layout="vertical">
+        <j-form ref="formRef" :model="formData" layout="vertical">
-            <j-form-item label="产品名称" v-bind="validateInfos.name">
+            <j-form-item
+                label="产品名称"
+                name="name"
+                :rules="{ required: true, message: '请输入产品名称' }"
+            >
                 <j-input
                     v-model:value="formData.name"
                     placeholder="请输入名称"
                 />
             </j-form-item>
-            <template v-if="channel === 'gb28181-2016' && formData.accessId">
+            <template v-for="(item, index) in extendFormItem" :key="index">
                 <j-form-item
-                    label="接入密码"
+                    :name="item.name"
-                    v-bind="validateInfos['configuration.access_pwd']"
+                    :label="item.label"
+                    :rules="{
+                        required: item.required,
+                        message: item.message,
+                        trigger: 'change',
+                    }"
                 >
-                    <j-input-password
-                        v-model:value="formData.configuration.access_pwd"
-                        placeholder="请输入接入密码"
-                    />
-                </j-form-item>
-                <j-form-item label="流传输模式">
                     <j-select
-                        v-model:value="formData.configuration.stream_mode"
+                        v-if="item.type === 'enum'"
-                        placeholder="请选择流传输模式"
+                        v-model:value="formData[item.name[0]][item.name[1]]"
-                        :options="streamMode"
+                        :options="item.options"
+                        :placeholder="item.message"
+                    />
+                    <j-input-password
+                        v-else-if="item.type === 'password'"
+                        v-model:value="formData[item.name[0]][item.name[1]]"
+                        :placeholder="item.message"
+                    />
+                    <j-input
+                        v-else
+                        v-model:value="formData[item.name[0]][item.name[1]]"
+                        :placeholder="item.message"
                     />
                 </j-form-item>
             </template>
-            <j-form-item label="接入网关" v-bind="validateInfos.accessId">
+            <j-form-item
+                label="接入网关"
+                name="accessId"
+                :rules="{ required: true, message: '请选择接入网关' }"
+            >
                 <div class="gateway-box">
                     <div v-if="!gatewayList.length">
                         暂无数据，请先
@@ -119,16 +137,12 @@
 </template>
 
 <script setup lang="ts">
-import { Form, message } from 'ant-design-vue';
+import { message } from 'ant-design-vue';
-import { PropType } from 'vue';
-import { streamMode } from '@/views/media/Device/const';
 import DeviceApi from '@/api/media/device';
 import { getImage } from '@/utils/comm';
 import { gatewayType } from '@/views/media/Device/typings';
 import { providerType } from '../const';
 
-const useForm = Form.useForm;
-
 type Emits = {
     (e: 'update:visible', data: boolean): void;
     (e: 'update:productId', data: string): void;
@@ -166,6 +180,7 @@ const getGatewayList = async () => {
  * @param e
  */
 const _selectedRowKeys = ref<string[]>([]);
+const extendFormItem = ref<any[]>();
 const handleClick = async (e: any) => {
     _selectedRowKeys.value = [e.id];
     formData.value.accessId = e.id;
@@ -179,7 +194,22 @@ const handleClick = async (e: any) => {
         props.channel,
         e.transport,
     );
-    console.log('result: ', result);
+
+    extendFormItem.value = result.properties.map((item: any) => ({
+        name: ['configuration', item.property],
+        label: item.name,
+        type: item.type?.type,
+        value: item.type.expands?.defaultValue,
+        options: item.type.elements?.map((e: any) => ({
+            label: e.text,
+            value: e.value,
+        })),
+        required: !!item.type.expands?.required,
+        message:
+            item.type?.type === 'enum'
+                ? `请选择${item.name}`
+                : `请输入${item.name}`,
+    }));
 };
 
 watch(
@@ -187,10 +217,6 @@ watch(
     (val) => {
         if (val) {
             getGatewayList();
-
-            formRules.value['configuration.access_pwd'][0].required =
-                props.channel === 'gb28181-2016';
-            validate();
         } else {
             emit('close');
         }
@@ -198,6 +224,7 @@ watch(
 );
 
 // 表单数据
+const formRef = ref();
 const formData = ref({
     accessId: '',
     accessName: '',
@@ -213,25 +240,13 @@ const formData = ref({
     transportProtocol: '',
 });
 
-// 验证规则
-const formRules = ref({
-    name: [{ required: true, message: '请输入产品名称' }],
-    'configuration.access_pwd': [{ required: true, message: '请输入接入密码' }],
-    accessId: [{ required: true, message: '请选择接入网关' }],
-});
-
-const { resetFields, validate, validateInfos, clearValidate } = useForm(
-    formData.value,
-    formRules.value,
-);
-
 /**
  * 提交
  */
 const btnLoading = ref(false);
 const handleOk = () => {
-    // console.log('formData.value: ', formData.value);
+    formRef.value
-    validate()
+        ?.validate()
         .then(async () => {
             btnLoading.value = true;
             const res = await DeviceApi.saveProduct(formData.value);
@@ -247,14 +262,14 @@ const handleOk = () => {
             }
             btnLoading.value = false;
         })
-        .catch((err) => {
+        .catch((err: any) => {
             console.log('err: ', err);
         });
 };
 
 const handleCancel = () => {
     _vis.value = false;
-    resetFields();
+    formRef.value.resetFields();
 };
 </script>