西海岸待办列表相关开发

front/src/views/home/infrastructureApplication.vue

@@ -1,8 +1,8 @@
 <!--
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
- * @LastEditors: hisense.wuhongjian
- * @LastEditTime: 2022-11-26 16:30:51
+ * @LastEditors: Light
+ * @LastEditTime: 2022-11-28 16:45:50
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -31,7 +31,7 @@
           <div class="title">待申请列表</div>
         </template>
         <template #footer>
-          <a-button type="primary" @click="apply">一键申请</a-button>
+          <a-button type="primary" @click="showApply">一键申请</a-button>
         </template>
       </a-list>
     </div>
@@ -134,6 +134,28 @@
       ></h5-player>
     </div>
   </a-modal>
+  <a-modal
+    :width="800"
+    v-model:visible="visibleApply"
+    title="视频监控申请"
+    @ok="apply"
+    @cancel="clear"
+  >
+    <p>本次申请的视频监控包含以下{{ showArrApply.length }}个，是否提交申请？</p>
+    <a-table
+      :columns="columns"
+      :data-source="showArrApply"
+      :pagination="{
+        pageSize: 5,
+      }"
+    >
+      <template #bodyCell="{ column, text }">
+        <template v-if="column.dataIndex === 'name'">
+          <a>{{ text }}</a>
+        </template>
+      </template>
+    </a-table>
+  </a-modal>
 </template>
 <script setup>
   import {
@@ -158,8 +180,10 @@
   const delWacFlag = ref(true)
   const delApply = ref(true)
   const visible = ref(false)
+  const visibleApply = ref(false)
   const instanceId = ref('')
-  const showArr = ref({})
+  const showArr = ref([])
+  const showArrApply = ref([])
   const columns = [
     {
       title: '名称',
@@ -193,6 +217,18 @@
       })
     }
   })
+  const showApply = () => {
+    if (dataList.toBeApplied.length === 0) {
+      message.warning('待申请列表为空!')
+      return
+    }
+    if (dataList.toBeApplied.length + dataList.requested.length > 10) {
+      message.warning('最多只能申请10个视频监控!')
+      return
+    }
+    visibleApply.value = true
+    showArrApply.value = dataList.toBeApplied
+  }
   const delWillApplyCamera = (id) => {
     console.log('撤销===>', id)
     if (delWacFlag.value) {
@@ -209,10 +245,6 @@
     }
   }
   const apply = () => {
-    if (dataList.toBeApplied.length === 0) {
-      message.warning('待申请列表为空!')
-      return
-    }
     let obj = {
       arr: [
         {
@@ -311,10 +343,13 @@
     console.log('清空')
     instanceId.value = ''
     showArr.value = []
+    showArrApply.value = []
     visible.value = false
+    visibleApply.value = false
     delApply.value = true
     dataList.selectItem = {}
     showVisible.value = false
+    showVisible.value = false
   }
   const init = () => {
     willApplyCameraSelect().then((res) => {
@@ -359,8 +394,8 @@
     })
   }
   mybus.on('selectCamera', (obj) => {
-    // 判断最多10条
-    if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
+    // 判断最多10条 + dataList.requested.length
+    if (dataList.toBeApplied.length >= 10) {
       message.warning('最多只能申请10个视频监控！')
       return
     }