From 308918e6de9e44d80198334d437ba3afc0e1681b Mon Sep 17 00:00:00 2001
From: Fuyuu <1805498209@qq.com>
Date: Fri, 22 Dec 2023 15:41:21 +0800
Subject: [PATCH] =?UTF-8?q?1=E3=80=81=E8=A7=86=E9=A2=91=E6=99=BA=E8=83=BD?=
 =?UTF-8?q?=E7=9B=91=E6=8E=A7=E8=8C=83=E5=9B=B4=E8=A1=A8=E5=8D=95=20?=
 =?UTF-8?q?=E6=B7=BB=E5=8A=A0=20=E6=89=80=E5=B1=9E=E5=9C=BA=E6=99=AF?=
 =?UTF-8?q?=E5=AD=97=E6=AE=B5?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

2、添加表单验证
---
 .../ai/aiMonitorArea/DtAiMonitorArea.data.ts  | 12 +--
 .../ai/aiMonitorArea/checkCom/CheckCom.vue    |  6 ++
 .../components/DtAiMonitorAreaForm.vue        | 99 ++++++++++++-------
 .../ai/aiMonitorArea/selectCom/SelectCom.vue  |  2 +-
 4 files changed, 75 insertions(+), 44 deletions(-)

diff --git a/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts b/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts
index b8dbd37..e82c229 100644
--- a/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts
+++ b/src/views/military/modules/ai/aiMonitorArea/DtAiMonitorArea.data.ts
@@ -18,7 +18,7 @@ export const columns: BasicColumn[] = [
     title: '监控相机',
     align: 'center',
     dataIndex: 'cameraId_dictText',
-    width: 150,
+    width: 200,
   },
   {
     title: '监控模型',
@@ -36,6 +36,11 @@ export const columns: BasicColumn[] = [
     align: 'center',
     dataIndex: 'drawdata',
   },
+  {
+    title: '所属场景',
+    align: 'center',
+    dataIndex: 'sceneId_dictText',
+  },
   // ,
   // {
   //   title: '备注',
@@ -43,11 +48,6 @@ export const columns: BasicColumn[] = [
   //   dataIndex: 'remark',
   // },
   // {
-  //   title: '备用2',
-  //   align: "center",
-  //   dataIndex: 'field2'
-  // },
-  // {
   //   title: '备用3',
   //   align: "center",
   //   dataIndex: 'field3'
diff --git a/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue b/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
index bc144e5..d5ca818 100644
--- a/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/checkCom/CheckCom.vue
@@ -1,3 +1,9 @@
+<!-- 
+  查看监控
+
+  目录位置：AI智能化区域监控 -> 视频智能监控范围 -> 查看监控
+  功能概述：rtsp视频流播放
+ -->
 <template>
   <a-modal :visible="visible" :title="title" width="1080px" @cancel="handleCancel" destroyOnClose>
     <a-row>
diff --git a/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue b/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
index af34354..aef63cb 100644
--- a/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/components/DtAiMonitorAreaForm.vue
@@ -1,9 +1,9 @@
 <template>
   <a-spin :spinning="confirmLoading">
-    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
+    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol" :rules="rules" :model="formData">
       <a-row>
         <a-col :span="24">
-          <a-form-item label="监控相机" v-bind="validateInfos.cameraId">
+          <a-form-item label="监控相机" v-bind="validateInfos.cameraId" name="cameraId">
             <a-tree-select
               ref="cameraTree"
               v-model:value="formData.cameraId"
@@ -60,17 +60,22 @@
             <a-textarea v-model:value="formData.drawdata" :rows="4" placeholder="请输入画图数据" :disabled="disabled"></a-textarea>
           </a-form-item>
         </a-col>
+        <a-col :span="24">
+          <a-form-item label="所属场景" v-bind="validateInfos.sceneId" name="sceneId">
+            <!-- <a-input v-model:value="formData.sceneId" placeholder="请输入所属场景" :disabled="disabled"></a-input> -->
+            <a-select v-model:value="formData.sceneId" placeholder="请选择所属场景" :disabled="disabled">
+              <template :key="code.sceneCode" v-for="code in sceneCodeList">
+                <a-select-option :value="code.sceneCode">{{ code.sceneName }}</a-select-option>
+              </template>
+            </a-select>
+          </a-form-item>
+        </a-col>
         <!-- <a-col :span="24">
           <a-form-item label="备注" v-bind="validateInfos.remark">
             <a-input v-model:value="formData.remark" placeholder="请输入备注" :disabled="disabled"></a-input>
           </a-form-item>
         </a-col> -->
         <!-- 
-        <a-col :span="24">
-          <a-form-item label="备用2" v-bind="validateInfos.field2">
-            <a-input v-model:value="formData.field2" placeholder="请输入备用2" :disabled="disabled"></a-input>
-          </a-form-item>
-        </a-col>
         <a-col :span="24">
           <a-form-item label="备用3" v-bind="validateInfos.field3">
             <a-input v-model:value="formData.field3" placeholder="请输入备用3" :disabled="disabled"></a-input>
@@ -100,6 +105,7 @@
   import { saveOrUpdate } from '../DtAiMonitorArea.api';
   import { Form } from 'ant-design-vue';
   import locationPng from '@/assets/images/getLocation.png';
+  import type { Rule } from 'ant-design-vue/es/form';
   // 引入视频标注组件
   import SelectCom from '../selectCom/SelectCom.vue';
 
@@ -123,6 +129,15 @@
   const getmodelCodeList = () => {
     return defHttp.get({ url: '/military/dtAiModel/list' }, { isTransformResponse: false });
   };
+  // 场景编码
+  const sceneCodeList: any = ref([]);
+  // 获取场景编码
+  const getsceneCodeList = () => {
+    defHttp.get({ url: '/military/msMapScene/list' }, { isTransformResponse: false }).then((res) => {
+      sceneCodeList.value = res.result.records;
+    });
+  };
+
   const props = defineProps({
     formDisabled: { type: Boolean, default: false },
     formData: { type: Object, default: () => {} },
@@ -137,10 +152,10 @@
     modelName: '',
     areaData: '',
     drawdata: '',
+    sceneId: '',
     // rtspUrl: '',
     cameraId: undefined,
     remark: '',
-    field2: '',
     field3: '',
     sysAreaCode: '',
     sysUnitCode: '',
@@ -151,11 +166,18 @@
   const confirmLoading = ref<boolean>(false);
   //表单验证
   const validatorRules = {};
+  const rules: Record<string, Rule[]> = {
+    cameraId: [{ required: true, message: '请选择监控相机！' }],
+    modelCode: [{ required: true, message: '请输入监控模型！' }],
+    sceneId: [{ required: true, message: '请选择所属场景！' }],
+  };
   const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });
 
   onMounted(() => {
     // 获取相机数据
     getCameraList();
+    // 获取场景编码
+    getsceneCodeList();
     //获取模型编码
     getmodelCodeList().then((response) => {
       if (response.success) {
@@ -286,37 +308,40 @@
    */
   async function submitForm() {
     // 触发表单验证
-    await validate();
-    confirmLoading.value = true;
-    const isUpdate = ref<boolean>(false);
-    //时间格式化
-    let model = formData;
-    if (model.id) {
-      isUpdate.value = true;
-    }
-    //循环数据
-    for (let data in model) {
-      //如果该数据是数组并且是字符串类型
-      if (model[data] instanceof Array) {
-        let valueType = getValueType(formRef.value.getProps, data);
-        //如果是字符串类型的需要变成以逗号分割的字符串
-        if (valueType === 'string') {
-          model[data] = model[data].join(',');
-        }
+    // await validate();
+
+    formRef.value.validate().then(async () => {
+      confirmLoading.value = true;
+      const isUpdate = ref<boolean>(false);
+      //时间格式化
+      let model = formData;
+      if (model.id) {
+        isUpdate.value = true;
       }
-    }
-    await saveOrUpdate(model, isUpdate.value)
-      .then((res) => {
-        if (res.success) {
-          createMessage.success(res.message);
-          emit('ok');
-        } else {
-          createMessage.warning(res.message);
+      //循环数据
+      for (let data in model) {
+        //如果该数据是数组并且是字符串类型
+        if (model[data] instanceof Array) {
+          let valueType = getValueType(formRef.value.getProps, data);
+          //如果是字符串类型的需要变成以逗号分割的字符串
+          if (valueType === 'string') {
+            model[data] = model[data].join(',');
+          }
         }
-      })
-      .finally(() => {
-        confirmLoading.value = false;
-      });
+      }
+      await saveOrUpdate(model, isUpdate.value)
+        .then((res) => {
+          if (res.success) {
+            createMessage.success(res.message);
+            emit('ok');
+          } else {
+            createMessage.warning(res.message);
+          }
+        })
+        .finally(() => {
+          confirmLoading.value = false;
+        });
+    });
   }
 
   defineExpose({
diff --git a/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue b/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
index 078b296..0dc9a14 100644
--- a/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
+++ b/src/views/military/modules/ai/aiMonitorArea/selectCom/SelectCom.vue
@@ -58,7 +58,7 @@
   </a-modal>
 </template>
 <script lang="ts" setup>
-  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick, watch } from 'vue';
+  import { ref, getCurrentInstance, onMounted, onBeforeUnmount, nextTick } from 'vue';
   import { ApiOutlined, FormatPainterOutlined, AimOutlined, LinkOutlined } from '@ant-design/icons-vue';
   const { proxy }: any = getCurrentInstance();
   const props = defineProps({