Commit 3bc28b5e7125776abb1de96c09a6dfeedfee53be
1 parent
73d472e2
fix: DEFECT-534 edit record page seize
Showing
2 changed files
with
81 additions
and
106 deletions
| ... | ... | @@ -31,7 +31,7 @@ | 
| 31 | 31 | <script lang="ts"> | 
| 32 | 32 | import { defineComponent, ref, computed, unref, nextTick } from 'vue'; | 
| 33 | 33 | import { BasicForm, useForm } from '/@/components/Form'; | 
| 34 | - import { formSchema, manuallyEnter, streamingMediaAcquire } from './config.data'; | |
| 34 | + import { formSchema } from './config.data'; | |
| 35 | 35 | import { BasicDrawer, useDrawerInner } from '/@/components/Drawer'; | 
| 36 | 36 | import { createOrEditCameraManage } from '/@/api/camera/cameraManager'; | 
| 37 | 37 | import { message, Upload } from 'ant-design-vue'; | 
| ... | ... | @@ -49,10 +49,7 @@ | 
| 49 | 49 | |
| 50 | 50 | const isUpdate = ref(true); | 
| 51 | 51 | const editId = ref(''); | 
| 52 | - const [ | |
| 53 | - registerForm, | |
| 54 | - { validate, setFieldsValue, resetFields, removeSchemaByFiled, appendSchemaByField }, | |
| 55 | - ] = useForm({ | |
| 52 | + const [registerForm, { validate, setFieldsValue, resetFields }] = useForm({ | |
| 56 | 53 | labelWidth: 120, | 
| 57 | 54 | schemas: formSchema, | 
| 58 | 55 | showActionButtonGroup: false, | 
| ... | ... | @@ -64,19 +61,6 @@ | 
| 64 | 61 | isUpdate.value = !!data?.isUpdate; | 
| 65 | 62 | if (unref(isUpdate)) { | 
| 66 | 63 | await nextTick(); | 
| 67 | - removeSchemaByFiled([ | |
| 68 | - 'videoPlatformId', | |
| 69 | - 'streamType', | |
| 70 | - 'playProtocol', | |
| 71 | - 'sn', | |
| 72 | - 'brand', | |
| 73 | - 'videoUrl', | |
| 74 | - ]); | |
| 75 | - if (data.record.accessMode === 0) { | |
| 76 | - manuallyEnter.forEach((schema) => appendSchemaByField(schema, undefined)); | |
| 77 | - } else { | |
| 78 | - streamingMediaAcquire.forEach((schema) => appendSchemaByField(schema, undefined)); | |
| 79 | - } | |
| 80 | 64 | editId.value = data.record.id; | 
| 81 | 65 | tenantLogo.value = data.record?.avatar; | 
| 82 | 66 | await setFieldsValue(data.record); | ... | ... | 
| ... | ... | @@ -83,14 +83,70 @@ export const searchFormSchema: FormSchema[] = [ | 
| 83 | 83 | }, | 
| 84 | 84 | ]; | 
| 85 | 85 | |
| 86 | -/** | |
| 87 | - * @description 手动输入 | |
| 88 | - */ | |
| 89 | -export const manuallyEnter: FormSchema[] = [ | |
| 86 | +// 弹框配置项 | |
| 87 | +export const formSchema: QFormSchema[] = [ | |
| 88 | + { | |
| 89 | + field: 'avatar', | |
| 90 | + label: '视频封面', | |
| 91 | + slot: 'iconSelect', | |
| 92 | + component: 'Input', | |
| 93 | + }, | |
| 94 | + { | |
| 95 | + field: 'name', | |
| 96 | + label: '视频名字', | |
| 97 | + required: true, | |
| 98 | + component: 'Input', | |
| 99 | + componentProps: { | |
| 100 | + placeholder: '请输入视频名字', | |
| 101 | + maxLength: 30, | |
| 102 | + }, | |
| 103 | + rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }], | |
| 104 | + }, | |
| 105 | + { | |
| 106 | + field: 'organizationId', | |
| 107 | + label: '所属组织', | |
| 108 | + required: true, | |
| 109 | + component: 'ApiTreeSelect', | |
| 110 | + componentProps: { | |
| 111 | + api: async () => { | |
| 112 | + const data = await getOrganizationList(); | |
| 113 | + copyTransFun(data as any as any[]); | |
| 114 | + return data; | |
| 115 | + }, | |
| 116 | + }, | |
| 117 | + }, | |
| 118 | + { | |
| 119 | + label: '视频流获取方式', | |
| 120 | + field: 'accessMode', | |
| 121 | + component: 'RadioGroup', | |
| 122 | + rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }], | |
| 123 | + defaultValue: AccessMode.ManuallyEnter, | |
| 124 | + componentProps({ formActionType }) { | |
| 125 | + return { | |
| 126 | + defaultValue: AccessMode.ManuallyEnter, | |
| 127 | + placeholder: '请选择视频流获取方式', | |
| 128 | + options: [ | |
| 129 | + { label: '手动输入', value: AccessMode.ManuallyEnter }, | |
| 130 | + { label: '流媒体获取', value: AccessMode.Streaming }, | |
| 131 | + ], | |
| 132 | + onChange() { | |
| 133 | + formActionType.setFieldsValue({ | |
| 134 | + brand: null, | |
| 135 | + sn: null, | |
| 136 | + videoUrl: null, | |
| 137 | + videoPlatformId: null, | |
| 138 | + }); | |
| 139 | + }, | |
| 140 | + }; | |
| 141 | + }, | |
| 142 | + }, | |
| 90 | 143 | { | 
| 91 | 144 | field: 'brand', | 
| 92 | 145 | label: '视频厂家', | 
| 93 | 146 | component: 'Input', | 
| 147 | + ifShow({ values }) { | |
| 148 | + return values.accessMode === AccessMode.ManuallyEnter; | |
| 149 | + }, | |
| 94 | 150 | componentProps: { | 
| 95 | 151 | placeholder: '请输入视频厂家', | 
| 96 | 152 | }, | 
| ... | ... | @@ -101,6 +157,9 @@ export const manuallyEnter: FormSchema[] = [ | 
| 101 | 157 | required: true, | 
| 102 | 158 | component: 'Input', | 
| 103 | 159 | rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }], | 
| 160 | + ifShow({ values }) { | |
| 161 | + return values.accessMode === AccessMode.ManuallyEnter; | |
| 162 | + }, | |
| 104 | 163 | componentProps: { | 
| 105 | 164 | placeholder: '请输入摄像头编号', | 
| 106 | 165 | }, | 
| ... | ... | @@ -110,22 +169,23 @@ export const manuallyEnter: FormSchema[] = [ | 
| 110 | 169 | label: '视频流', | 
| 111 | 170 | required: true, | 
| 112 | 171 | component: 'Input', | 
| 172 | + ifShow({ values }) { | |
| 173 | + return values.accessMode === AccessMode.ManuallyEnter; | |
| 174 | + }, | |
| 113 | 175 | componentProps: { | 
| 114 | 176 | placeholder: '请输入视频流', | 
| 115 | 177 | maxLength: 255, | 
| 116 | 178 | }, | 
| 117 | 179 | rules: [...CameraVideoUrl, { required: true, message: '视频流是必填项' }], | 
| 118 | 180 | }, | 
| 119 | -]; | |
| 120 | 181 | |
| 121 | -/** | |
| 122 | - * @description 流媒体获取 | |
| 123 | - */ | |
| 124 | -export const streamingMediaAcquire: FormSchema[] = [ | |
| 125 | 182 | { | 
| 126 | 183 | field: 'videoPlatformId', | 
| 127 | 184 | label: '流媒体配置', | 
| 128 | 185 | component: 'ApiSelect', | 
| 186 | + ifShow({ values }) { | |
| 187 | + return values.accessMode === AccessMode.Streaming; | |
| 188 | + }, | |
| 129 | 189 | componentProps: { | 
| 130 | 190 | placeholder: '请选择流媒体配置', | 
| 131 | 191 | api: getStreamingMediaList, | 
| ... | ... | @@ -138,6 +198,9 @@ export const streamingMediaAcquire: FormSchema[] = [ | 
| 138 | 198 | label: '码流', | 
| 139 | 199 | component: 'RadioGroup', | 
| 140 | 200 | defaultValue: StreamType.MASTER, | 
| 201 | + ifShow({ values }) { | |
| 202 | + return values.accessMode === AccessMode.Streaming; | |
| 203 | + }, | |
| 141 | 204 | componentProps: { | 
| 142 | 205 | placeholder: '请选择码流', | 
| 143 | 206 | defaultValue: StreamType.MASTER, | 
| ... | ... | @@ -153,6 +216,10 @@ export const streamingMediaAcquire: FormSchema[] = [ | 
| 153 | 216 | label: '播放协议', | 
| 154 | 217 | component: 'RadioGroup', | 
| 155 | 218 | defaultValue: PlayProtocol.HTTP, | 
| 219 | + ifShow({ values }) { | |
| 220 | + return values.accessMode === AccessMode.Streaming; | |
| 221 | + }, | |
| 222 | + helpMessage: ['平台使用https的hls协议,需联系海康开放平台专家支持。'], | |
| 156 | 223 | componentProps: { | 
| 157 | 224 | placeholder: '请选择播放协议', | 
| 158 | 225 | defaultValue: PlayProtocol.HTTP, | 
| ... | ... | @@ -167,87 +234,11 @@ export const streamingMediaAcquire: FormSchema[] = [ | 
| 167 | 234 | label: h(SnHelpMessage) as any, | 
| 168 | 235 | component: 'Input', | 
| 169 | 236 | rules: [...CameraVideoUrl, { required: true, message: '摄像头编号是必填项' }], | 
| 170 | - componentProps: { | |
| 171 | - placeholder: '请输入监控点编号', | |
| 237 | + ifShow({ values }) { | |
| 238 | + return values.accessMode === AccessMode.Streaming; | |
| 172 | 239 | }, | 
| 173 | - }, | |
| 174 | -]; | |
| 175 | - | |
| 176 | -// 弹框配置项 | |
| 177 | -export const formSchema: QFormSchema[] = [ | |
| 178 | - { | |
| 179 | - field: 'avatar', | |
| 180 | - label: '视频封面', | |
| 181 | - slot: 'iconSelect', | |
| 182 | - component: 'Input', | |
| 183 | - }, | |
| 184 | - { | |
| 185 | - field: 'name', | |
| 186 | - label: '视频名字', | |
| 187 | - required: true, | |
| 188 | - component: 'Input', | |
| 189 | 240 | componentProps: { | 
| 190 | - placeholder: '请输入视频名字', | |
| 191 | - maxLength: 30, | |
| 192 | - }, | |
| 193 | - rules: [...CameraMaxLength, { required: true, message: '视频名是必填项' }], | |
| 194 | - }, | |
| 195 | - { | |
| 196 | - field: 'organizationId', | |
| 197 | - label: '所属组织', | |
| 198 | - required: true, | |
| 199 | - component: 'ApiTreeSelect', | |
| 200 | - componentProps: { | |
| 201 | - api: async () => { | |
| 202 | - const data = await getOrganizationList(); | |
| 203 | - copyTransFun(data as any as any[]); | |
| 204 | - return data; | |
| 205 | - }, | |
| 206 | - }, | |
| 207 | - }, | |
| 208 | - { | |
| 209 | - label: '视频流获取方式', | |
| 210 | - field: 'accessMode', | |
| 211 | - component: 'RadioGroup', | |
| 212 | - rules: [{ required: true, message: '视频流获取方式为必选项', type: 'number' }], | |
| 213 | - defaultValue: AccessMode.ManuallyEnter, | |
| 214 | - componentProps({ formActionType }) { | |
| 215 | - return { | |
| 216 | - defaultValue: AccessMode.ManuallyEnter, | |
| 217 | - placeholder: '请选择视频流获取方式', | |
| 218 | - options: [ | |
| 219 | - { label: '手动输入', value: AccessMode.ManuallyEnter }, | |
| 220 | - { label: '流媒体获取', value: AccessMode.Streaming }, | |
| 221 | - ], | |
| 222 | - onChange(event: { target: { value: number } }) { | |
| 223 | - formActionType.removeSchemaByFiled([ | |
| 224 | - 'videoPlatformId', | |
| 225 | - 'streamType', | |
| 226 | - 'playProtocol', | |
| 227 | - 'sn', | |
| 228 | - 'brand', | |
| 229 | - 'videoUrl', | |
| 230 | - ]); | |
| 231 | - const { | |
| 232 | - target: { value }, | |
| 233 | - } = event; | |
| 234 | - if (value === AccessMode.ManuallyEnter) { | |
| 235 | - manuallyEnter.forEach((schema) => | |
| 236 | - formActionType.appendSchemaByField(schema, undefined) | |
| 237 | - ); | |
| 238 | - } else { | |
| 239 | - streamingMediaAcquire.forEach((schema) => | |
| 240 | - formActionType.appendSchemaByField(schema, undefined) | |
| 241 | - ); | |
| 242 | - | |
| 243 | - formActionType.setFieldsValue({ | |
| 244 | - streamType: StreamType.MASTER, | |
| 245 | - playProtocol: PlayProtocol.HTTP, | |
| 246 | - }); | |
| 247 | - } | |
| 248 | - }, | |
| 249 | - }; | |
| 241 | + placeholder: '请输入监控点编号', | |
| 250 | 242 | }, | 
| 251 | 243 | }, | 
| 252 | - ...manuallyEnter, | |
| 253 | 244 | ]; | ... | ... |