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 | ]; | ... | ... |