From fbff5146bdb1e5de728a6d83651bf43c850e2194 Mon Sep 17 00:00:00 2001 From: JiangQiming <291854119@qq.com> Date: Tue, 28 Feb 2023 21:13:10 +0800 Subject: [PATCH] =?UTF-8?q?feat:=20=E5=9B=BD=E6=A0=87=E7=BA=A7=E8=81=94?= =?UTF-8?q?=E6=96=B0=E5=A2=9E/=E7=BC=96=E8=BE=91?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/api/media/cascade.ts | 7 +- src/views/media/Cascade/Save/index.vue | 373 ++++++++++++++----------- 2 files changed, 216 insertions(+), 164 deletions(-) diff --git a/src/api/media/cascade.ts b/src/api/media/cascade.ts index 58d27d52..c0b71ded 100644 --- a/src/api/media/cascade.ts +++ b/src/api/media/cascade.ts @@ -11,7 +11,8 @@ export default { // 新增 save: (data: any) => server.post(`/media/gb28181-cascade`, data), // 修改 - update: (id: string, data: any) => server.put(`/media/gb28181-cascade/${id}`, data), + // update: (id: string, data: any) => server.put(`/media/gb28181-cascade/${id}`, data), + update: (data: any) => server.patch(`/media/gb28181-cascade`, data), // 删除 del: (id: string) => server.remove(`media/gb28181-cascade/${id}`), // 禁用 @@ -21,8 +22,8 @@ export default { // 新增/编辑 // 获取集群节点 - clusters: () => server.get(`/network/resources/alive/clusters`), + clusters: () => server.get(`/network/resources/clusters`), // SIP本地地址 - all: () => server.get(`/network/resources/alive/_all`), + all: () => server.get(`/network/resources/alive/_all`), } \ No newline at end of file diff --git a/src/views/media/Cascade/Save/index.vue b/src/views/media/Cascade/Save/index.vue index c9081613..231d0b19 100644 --- a/src/views/media/Cascade/Save/index.vue +++ b/src/views/media/Cascade/Save/index.vue @@ -4,13 +4,13 @@ - + @@ -31,7 +31,7 @@ - + 启用 - + 禁用 @@ -56,8 +56,7 @@ - + + 集群节点 + + + + + + @@ -95,7 +108,7 @@ @@ -116,7 +129,7 @@ @@ -137,7 +150,7 @@ - @@ -169,7 +189,7 @@ + - - 1 - - + :options="allList" + /> @@ -225,7 +254,7 @@ - @@ -256,7 +292,7 @@ UDP - + TCP @@ -280,7 +316,7 @@ @@ -301,7 +337,7 @@ - @@ -322,7 +358,7 @@ @@ -343,7 +379,7 @@ @@ -364,7 +400,7 @@ @@ -385,42 +421,44 @@ @@ -523,10 +561,7 @@ import { getImage } from '@/utils/comm'; import { Form } from 'ant-design-vue'; import { message } from 'ant-design-vue'; -import DeviceApi from '@/api/media/device'; - -import { PROVIDER_OPTIONS } from '@/views/media/Device/const'; -import type { ProductType } from '@/views/media/Device/typings'; +import CascadeApi from '@/api/media/cascade'; const router = useRouter(); const route = useRoute(); @@ -534,101 +569,96 @@ const useForm = Form.useForm; // 表单数据 const formData = ref({ - id: '', + id: route.query.id || undefined, + // name: '', + cascadeName: '', + proxyStream: false, + // 以下字段, 提交时需提取到sipConfigs[{}]字段当中 + clusterNodeId: '', name: '', - channel: 'gb28181-2016', - photoUrl: getImage('/device-media.png'), - productId: '', - others: { - access_pwd: '', - }, - description: '', - // 编辑字段 - streamMode: 'UDP', + sipId: '', + domain: '', + remoteAddress: '', + remotePort: undefined, + localSipId: '', + host: '', + port: undefined, + // remotePublic: { + // host: '', + // port: undefined, + // }, + publicHost: '', + publicPort: undefined, + transport: 'UDP', + user: '', + password: '', manufacturer: '', model: '', firmware: '', + keepaliveInterval: '60', + registerInterval: '3600', }); -// 验证规则 -const formRules = ref({ - id: [ - { - required: true, - message: '请输入ID', - }, - { max: 64, message: '最多输入64个字符' }, - { - pattern: /^[a-zA-Z0-9_\-]+$/, - message: '请输入英文或者数字或者-或者_', - }, - ], - name: [ - { required: true, message: '请输入名称' }, - { max: 64, message: '最多可输入64个字符' }, - ], - productId: [{ required: true, message: '请选择所属产品' }], - channel: [{ required: true, message: '请选择接入方式' }], - 'others.access_pwd': [{ required: true, message: '请输入接入密码' }], - description: [{ max: 200, message: '最多可输入200个字符' }], - streamMode: [{ required: true, message: '请选择流传输模式' }], -}); - -watch( - () => formData.value.channel, - (val) => { - formRules.value['id'][0].required = val === 'gb28181-2016'; - formRules.value['others.access_pwd'][0].required = - val === 'gb28181-2016'; - validate(); - getProductList(); - }, -); - -const { resetFields, validate, validateInfos, clearValidate } = useForm( - formData.value, - formRules.value, -); - -const clearValid = () => { - setTimeout(() => { - clearValidate(); - }, 200); -}; - /** - * 获取所属产品 + * 获取集群节点 */ -const productList = ref([]); -const getProductList = async () => { - // console.log('formData.productId: ', formData.value.productId); - const params = { - paging: false, - sorts: [{ name: 'createTime', order: 'desc' }], - terms: [ - { column: 'accessProvider', value: formData.value.channel }, - { column: 'state', value: 1 }, - ], - }; - const { result } = await DeviceApi.queryProductList(params); - productList.value = result; +const clustersList = ref([]); +const getClustersList = async () => { + const { result } = await CascadeApi.clusters(); + clustersList.value = result.map((m: any) => ({ + label: m.name, + value: m.id, + })); }; -getProductList(); - +getClustersList(); /** - * 新增产品 + * SIP本地地址 */ -const saveProductVis = ref(false); +const allList = ref([]); +const getAllList = async () => { + const { result } = await CascadeApi.all(); + allList.value = result.map((m: any) => ({ + label: m.host, + value: m.host, + })); +}; +getAllList(); /** * 获取详情 */ const getDetail = async () => { - const res = await DeviceApi.detail(route.query.id as string); + if (!route.query.id) return; + const res = await CascadeApi.detail(route.query.id as string); // console.log('res: ', res); // formData.value = res.result; - Object.assign(formData.value, res.result); - formData.value.channel = res.result.provider; + // Object.assign(formData.value, res.result); + + const { id, name, proxyStream, sipConfigs } = res.result; + formData.value = { + id, + cascadeName: name, + proxyStream, + clusterNodeId: sipConfigs[0]?.clusterNodeId, + name: sipConfigs[0]?.name, + sipId: sipConfigs[0]?.sipId, + domain: sipConfigs[0]?.domain, + remoteAddress: sipConfigs[0]?.remoteAddress, + remotePort: sipConfigs[0]?.remotePort, + localSipId: sipConfigs[0]?.localSipId, + host: sipConfigs[0]?.host, + port: sipConfigs[0]?.port, + publicHost: sipConfigs[0]?.publicHost, + publicPort: sipConfigs[0]?.publicPort, + transport: sipConfigs[0]?.transport, + user: sipConfigs[0]?.user, + password: sipConfigs[0]?.password, + manufacturer: sipConfigs[0]?.manufacturer, + model: sipConfigs[0]?.model, + firmware: sipConfigs[0]?.firmware, + keepaliveInterval: sipConfigs[0]?.keepaliveInterval, + registerInterval: sipConfigs[0]?.registerInterval, + }; console.log('formData.value: ', formData.value); }; @@ -640,28 +670,49 @@ onMounted(() => { /** * 表单提交 */ +const formRef = ref(); const btnLoading = ref(false); const handleSubmit = () => { // console.log('formData.value: ', formData.value); - validate() + formRef.value + .validate() .then(async () => { + const { + id, + cascadeName, + proxyStream, + publicHost, + publicPort, + ...extraFormData + } = formData.value; + const params = { + id, + name: cascadeName, + proxyStream, + sipConfigs: [ + { + ...extraFormData, + remotePublic: { + host: publicHost, + port: publicPort, + }, + }, + ], + }; btnLoading.value = true; - let res; - if (!route.query.id) { - res = await DeviceApi.save(formData.value); - } else { - res = await DeviceApi.update(formData.value); - } - if (res?.success) { - message.success('保存成功'); - router.back(); - } - }) - .catch((err) => { - console.log('err: ', err); - }) - .finally(() => { + const res = formData.value.id + ? await CascadeApi.update(params) + : await CascadeApi.save(params); btnLoading.value = false; + if (res.success) { + message.success('操作成功'); + router.back(); + } else { + message.error('操作失败'); + } + }) + .catch((err: any) => { + console.log('err: ', err); }); };