视频预览弹窗

front/src/views/home/infrastructureApplication.vue

@@ -2,7 +2,7 @@
  * @Author: Light
  * @Date: 2022-11-18 11:53:43
  * @LastEditors: Light
- * @LastEditTime: 2022-11-22 11:57:18
+ * @LastEditTime: 2022-11-22 14:50:32
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -39,7 +39,7 @@
       <a-list size="small" bordered :data-source="dataList.requested">
         <template #renderItem="{ item }">
           <a-list-item>
-            <div class="name">
+            <div class="name" @click="selectItem(item)">
               <a-tooltip>
                 <template #title>{{ item.cameraInfo.channelName }}</template>
                 {{ item.cameraInfo.channelName }}
@@ -96,6 +96,17 @@
       </template>
     </a-table>
   </a-modal>
+  <a-modal
+    v-if="dataList.selectItem.cameraInfo"
+    v-model:visible="showVisible"
+    :title="dataList.selectItem.cameraInfo.channelName"
+    :footer="null"
+    @cancel="clear"
+  >
+    <p>Some contents...</p>
+    <p>Some contents...</p>
+    <p>Some contents...</p>
+  </a-modal>
 </template>
 <script setup>
   import {
@@ -110,7 +121,8 @@
   import { message } from 'ant-design-vue'
   import mybus from '@/myplugins/mybus'
   import { useRouter } from 'vue-router'
-  const dataList = reactive({ toBeApplied: [], requested: [] })
+  const dataList = reactive({ toBeApplied: [], requested: [], selectItem: {} })
+  const showVisible = ref(false)
   // 待办
   const addWacFlag = ref(true)
   const delWacFlag = ref(true)
@@ -214,6 +226,15 @@
       }
     }
   }
+  const selectItem = (item) => {
+    if (item.approveStatus == '通过') {
+      dataList.selectItem = item
+      showVisible.value = true
+    } else {
+      dataList.selectItem = {}
+      showVisible.value = false
+    }
+  }
   const handleOk = () => {
     endProcess({ instanceId: instanceId.value }).then((res) => {
       if (res.data.code == 0) {
@@ -226,10 +247,13 @@
     })
   }
   const clear = () => {
+    console.log('清空')
     instanceId.value = ''
     showArr.value = []
     visible.value = false
     delApply.value = true
+    dataList.selectItem = {}
+    showVisible.value = false
   }
   const init = () => {
     willApplyCameraSelect().then((res) => {