fix: DEFECT-534 edit record page seize

ww
1 parent 73d472e2
Showing 2 changed files with 81 additions and 106 deletions
src/views/camera/manage/CameraDrawer.vue
src/views/camera/manage/config.data.ts
--- a/src/views/camera/manage/CameraDrawer.vue
View file @3bc28b5
+++ b/src/views/camera/manage/CameraDrawer.vue
View file @3bc28b5
@@ -31,7 +31,7 @@
 <script lang="ts">
   import { defineComponent, ref, computed, unref, nextTick } from 'vue';
   import { BasicForm, useForm } from '/@/components/Form';
-  import { formSchema, manuallyEnter, streamingMediaAcquire } from './config.data';
+  import { formSchema } from './config.data';
   import { BasicDrawer, useDrawerInner } from '/@/components/Drawer';
   import { createOrEditCameraManage } from '/@/api/camera/cameraManager';
   import { message, Upload } from 'ant-design-vue';
@@ -49,10 +49,7 @@
       const isUpdate = ref(true);
       const editId = ref('');
-      const [
-        registerForm,
-        { validate, setFieldsValue, resetFields, removeSchemaByFiled, appendSchemaByField },
-      ] = useForm({
+      const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({
         labelWidth: 120,
         schemas: formSchema,
         showActionButtonGroup: false,
@@ -64,19 +61,6 @@
         isUpdate.value = !!data?.isUpdate;
         if (unref(isUpdate)) {
           await nextTick();
-          removeSchemaByFiled([
-            'videoPlatformId',
-            'streamType',
-            'playProtocol',
-            'sn',
-            'brand',
-            'videoUrl',
-          ]);
-          if (data.record.accessMode === 0) {
-            manuallyEnter.forEach((schema) => appendSchemaByField(schema, undefined));
-          } else {
-            streamingMediaAcquire.forEach((schema) => appendSchemaByField(schema, undefined));
-          }
           editId.value = data.record.id;
           tenantLogo.value = data.record?.avatar;
           await setFieldsValue(data.record);
--- a/src/views/camera/manage/config.data.ts
View file @3bc28b5
+++ b/src/views/camera/manage/config.data.ts
View file @3bc28b5
@@ -83,14 +83,70 @@ export const searchFormSchema: FormSchema[] = [
   },
 ];
-/**
- * @description 手动输入
- */
-export const manuallyEnter: FormSchema[] = [
+// 弹框配置项
+export const formSchema: QFormSchema[] = [
+  {
+    field: 'avatar',
+    label: '视频封面',
+    slot: 'iconSelect',
+    component: 'Input',
+  },
+  {
+    field: 'name',
+    label: '视频名字',
+    required: true,
+    component: 'Input',
+    componentProps: {
+      placeholder: '请输入视频名字',
+      maxLength: 30,
+    },
+    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
+  },
+  {
+    field: 'organizationId',
+    label: '所属组织',
+    required: true,
+    component: 'ApiTreeSelect',
+    componentProps: {
+      api: async () => {
+        const data = await getOrganizationList();
+        copyTransFun(data as any as any[]);
+        return data;
+      },
+    },
+  },
+  {
+    label: '视频流获取方式',
+    field: 'accessMode',
+    component: 'RadioGroup',
+    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
+    defaultValue: AccessMode.ManuallyEnter,
+    componentProps({ formActionType }) {
+      return {
+        defaultValue: AccessMode.ManuallyEnter,
+        placeholder: '请选择视频流获取方式',
+        options: [
+          { label: '手动输入', value: AccessMode.ManuallyEnter },
+          { label: '流媒体获取', value: AccessMode.Streaming },
+        ],
+        onChange() {
+          formActionType.setFieldsValue({
+            brand: null,
+            sn: null,
+            videoUrl: null,
+            videoPlatformId: null,
+          });
+        },
+      };
+    },
+  },
   {
     field: 'brand',
     label: '视频厂家',
     component: 'Input',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
     componentProps: {
       placeholder: '请输入视频厂家',
     },
@@ -101,6 +157,9 @@ export const manuallyEnter: FormSchema[] = [
     required: true,
     component: 'Input',
     rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
     componentProps: {
       placeholder: '请输入摄像头编号',
     },
@@ -110,22 +169,23 @@ export const manuallyEnter: FormSchema[] = [
     label: '视频流',
     required: true,
     component: 'Input',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.ManuallyEnter;
+    },
     componentProps: {
       placeholder: '请输入视频流',
       maxLength: 255,
     },
     rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }],
   },
-];
-/**
- * @description 流媒体获取
- */
-export const streamingMediaAcquire: FormSchema[] = [
   {
     field: 'videoPlatformId',
     label: '流媒体配置',
     component: 'ApiSelect',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
     componentProps: {
       placeholder: '请选择流媒体配置',
       api: getStreamingMediaList,
@@ -138,6 +198,9 @@ export const streamingMediaAcquire: FormSchema[] = [
     label: '码流',
     component: 'RadioGroup',
     defaultValue: StreamType.MASTER,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
     componentProps: {
       placeholder: '请选择码流',
       defaultValue: StreamType.MASTER,
@@ -153,6 +216,10 @@ export const streamingMediaAcquire: FormSchema[] = [
     label: '播放协议',
     component: 'RadioGroup',
     defaultValue: PlayProtocol.HTTP,
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
+    },
+    helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'],
     componentProps: {
       placeholder: '请选择播放协议',
       defaultValue: PlayProtocol.HTTP,
@@ -167,87 +234,11 @@ export const streamingMediaAcquire: FormSchema[] = [
     label: h(SnHelpMessage) as any,
     component: 'Input',
     rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }],
-    componentProps: {
-      placeholder: '请输入监控点编号',
+    ifShow({ values }) {
+      return values.accessMode === AccessMode.Streaming;
     },
-  },
-];
-
-// 弹框配置项
-export const formSchema: QFormSchema[] = [
-  {
-    field: 'avatar',
-    label: '视频封面',
-    slot: 'iconSelect',
-    component: 'Input',
-  },
-  {
-    field: 'name',
-    label: '视频名字',
-    required: true,
-    component: 'Input',
     componentProps: {
-      placeholder: '请输入视频名字',
-      maxLength: 30,
-    },
-    rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }],
-  },
-  {
-    field: 'organizationId',
-    label: '所属组织',
-    required: true,
-    component: 'ApiTreeSelect',
-    componentProps: {
-      api: async () => {
-        const data = await getOrganizationList();
-        copyTransFun(data as any as any[]);
-        return data;
-      },
-    },
-  },
-  {
-    label: '视频流获取方式',
-    field: 'accessMode',
-    component: 'RadioGroup',
-    rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }],
-    defaultValue: AccessMode.ManuallyEnter,
-    componentProps({ formActionType }) {
-      return {
-        defaultValue: AccessMode.ManuallyEnter,
-        placeholder: '请选择视频流获取方式',
-        options: [
-          { label: '手动输入', value: AccessMode.ManuallyEnter },
-          { label: '流媒体获取', value: AccessMode.Streaming },
-        ],
-        onChange(event: { target: { value: number } }) {
-          formActionType.removeSchemaByFiled([
-            'videoPlatformId',
-            'streamType',
-            'playProtocol',
-            'sn',
-            'brand',
-            'videoUrl',
-          ]);
-          const {
-            target: { value },
-          } = event;
-          if (value === AccessMode.ManuallyEnter) {
-            manuallyEnter.forEach((schema) =>
-              formActionType.appendSchemaByField(schema, undefined)
-            );
-          } else {
-            streamingMediaAcquire.forEach((schema) =>
-              formActionType.appendSchemaByField(schema, undefined)
-            );
-
-            formActionType.setFieldsValue({
-              streamType: StreamType.MASTER,
-              playProtocol: PlayProtocol.HTTP,
-            });
-          }
-        },
-      };
+      placeholder: '请输入监控点编号',
     },
   },
-  ...manuallyEnter,
 ];