From 5c9ad767adb380cc708edfc35b784769f1a79f4d Mon Sep 17 00:00:00 2001
From: JiangQiming <291854119@qq.com>
Date: Mon, 27 Feb 2023 18:13:06 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E9=80=9A=E9=81=93=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/media/Device/Channel/Save.vue  | 147 +++++++++++++++++++++++
 src/views/media/Device/Channel/index.vue |  10 ++
 2 files changed, 157 insertions(+)
 create mode 100644 src/views/media/Device/Channel/Save.vue

diff --git a/src/views/media/Device/Channel/Save.vue b/src/views/media/Device/Channel/Save.vue
new file mode 100644
index 00000000..51762e16
--- /dev/null
+++ b/src/views/media/Device/Channel/Save.vue
@@ -0,0 +1,147 @@
+<!-- Modal 弹窗，用于新增、修改数据 -->
+<template>
+    <a-modal
+        v-model:visible="_vis"
+        :title="!!formData.id ? '编辑' : '新增'"
+        width="650px"
+        cancelText="取消"
+        okText="确定"
+        @ok="handleSubmit"
+        @cancel="handleCancel"
+    >
+        <a-form ref="formRef" :model="formData" layout="vertical">
+            <a-row :gutter="10">
+                <a-col :span="12">
+                    <a-form-item name="channelId">
+                        <template #label>
+                            通道ID
+                            <a-tooltip title="若不填写，系统将自动生成唯一ID">
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px"
+                                />
+                            </a-tooltip>
+                        </template>
+                        <a-input v-model:value="formData.channelId" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item
+                        name="name"
+                        label="通道名称"
+                        :rules="{ required: true, message: '请输入通道名称' }"
+                    >
+                        <a-input v-model:value="formData.name" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item
+                        name="media_url"
+                        :rules="{ required: true, message: '请输入视频地址' }"
+                    >
+                        <template #label>
+                            视频地址
+                            <a-tooltip
+                                title="不同厂家的RTSP固定地址规则不同，请按对应厂家的规则填写"
+                            >
+                                <AIcon
+                                    type="QuestionCircleOutlined"
+                                    style="margin-left: 2px"
+                                />
+                            </a-tooltip>
+                        </template>
+                        <a-input v-model:value="formData.others.media_url" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item name="media_username" label="用户名">
+                        <a-input
+                            v-model:value="formData.others.media_username"
+                        />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="12">
+                    <a-form-item name="media_password" label="密码">
+                        <a-input-password
+                            v-model:value="formData.others.media_password"
+                        />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item name="address" label="安装地址">
+                        <a-input v-model:value="formData.address" />
+                    </a-form-item>
+                </a-col>
+                <a-col :span="24">
+                    <a-form-item name="description" label="说明">
+                        <a-textarea
+                            v-model:value="formData.description"
+                            :rows="4"
+                            :maxlength="200"
+                            showCount
+                        />
+                    </a-form-item>
+                </a-col>
+            </a-row>
+        </a-form>
+    </a-modal>
+</template>
+
+<script setup lang="ts">
+import templateApi from '@/api/notice/template';
+import { PropType } from 'vue';
+
+type Emits = {
+    (e: 'update:visible', data: boolean): void;
+    (e: 'submit'): void;
+};
+const emit = defineEmits<Emits>();
+
+const props = defineProps({
+    visible: { type: Boolean, default: false },
+    channelData: {
+        type: Object as PropType<Partial<Record<string, any>>>,
+        default: () => ({}),
+    },
+});
+
+const _vis = computed({
+    get: () => props.visible,
+    set: (val) => emit('update:visible', val),
+});
+
+const formRef = ref();
+const formData = ref({
+    id: '',
+    address: '',
+    channelId: '',
+    description: '',
+    deviceId: '',
+    name: '',
+    others: {
+        media_password: '',
+        media_url: '',
+        media_username: '',
+    },
+});
+// const formRules = ref({});
+
+/**
+ * 提交
+ */
+const handleSubmit = () => {
+    formRef.value
+        .validate()
+        .then(async () => {
+            emit('submit');
+        })
+        .catch((err: any) => {
+            console.log('err: ', err);
+        });
+};
+const handleCancel = () => {
+    _vis.value = false;
+};
+</script>
+
+<style lang="less" scoped></style>
diff --git a/src/views/media/Device/Channel/index.vue b/src/views/media/Device/Channel/index.vue
index 6ca977e2..0e17cec7 100644
--- a/src/views/media/Device/Channel/index.vue
+++ b/src/views/media/Device/Channel/index.vue
@@ -76,6 +76,12 @@
                 </a-space>
             </template>
         </JTable>
+
+        <Save
+            v-model:visible="saveVis"
+            :channelData="channelData"
+            @submit="listRef.reload()"
+        />
     </page-container>
 </template>
 
@@ -84,6 +90,7 @@ import ChannelApi from '@/api/media/channel';
 import type { ActionsType } from '@/components/Table/index.vue';
 import { useMenuStore } from 'store/menu';
 import { message } from 'ant-design-vue';
+import Save from './Save.vue';
 
 const menuStory = useMenuStore();
 const route = useRoute();
@@ -163,6 +170,8 @@ const handleAdd = () => {
 
 const listRef = ref();
 const playVis = ref(false);
+const channelData = ref();
+
 const getActions = (
     data: Partial<Record<string, any>>,
     type: 'card' | 'table',
@@ -178,6 +187,7 @@ const getActions = (
             icon: 'EditOutlined',
             onClick: () => {
                 saveVis.value = true;
+                channelData.value = data;
             },
         },
         {