西海岸需求开发

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 10:54:46
+ * @LastEditTime: 2022-11-22 11:49:24
  * @Description: 告诉大家这是什么
 -->
 <template>
@@ -23,7 +23,7 @@
               cancel-text="否"
               @confirm="delWillApplyCamera(item.id)"
             >
-              <a-button type="link" danger>移出</a-button>
+              <a-button type="link" danger style="padding: 0">移出</a-button>
             </a-popconfirm>
           </a-list-item>
         </template>
@@ -45,17 +45,26 @@
                 {{ item.cameraInfo.channelName }}
               </a-tooltip>
             </div>
+            <a-tag color="cyan" style="margin-right: 0">
+              {{ item.approveStatus }}
+            </a-tag>
             <a-popconfirm
               v-if="item.approveStatus == '通过'"
-              :title="'是否删除' + item.cameraInfo.channelName + '?'"
+              :title="'是否撤销' + item.cameraInfo.channelName + '?'"
               ok-text="是"
               cancel-text="否"
               @confirm="deleteApply(item)"
             >
-              <a-button type="link" danger>删除</a-button>
+              <a-button type="link" danger style="padding: 0">撤销</a-button>
             </a-popconfirm>
-            <a-button v-else type="link" danger @click="deleteApply(item)">
+            <a-button
-              删除
+              v-else
+              type="link"
+              danger
+              @click="deleteApply(item)"
+              style="padding: 0"
+            >
+              撤销
             </a-button>
           </a-list-item>
         </template>
@@ -68,12 +77,18 @@
   <a-modal
     :width="800"
     v-model:visible="visible"
-    title="删除申请"
+    title="撤销申请"
     @ok="handleOk"
     @cancel="clear"
   >
-    <p>本次申请的摄像头包含以下{{ showArr.length }}个摄像头，是否删除申请？</p>
+    <p>本次申请的视频监控包含以下{{ showArr.length }}个，是否撤销申请？</p>
-    <a-table :columns="columns" :data-source="showArr">
+    <a-table
+      :columns="columns"
+      :data-source="showArr"
+      :pagination="{
+        pageSize: 5,
+      }"
+    >
       <template #bodyCell="{ column, text }">
         <template v-if="column.dataIndex === 'name'">
           <a>{{ text }}</a>
@@ -123,7 +138,7 @@
   ]
   const router = useRouter()
   const delWillApplyCamera = (id) => {
-    console.log('删除===>', id)
+    console.log('撤销===>', id)
     if (delWacFlag.value) {
       delWacFlag.value = false
       willApplyCameraBatchDelete([id]).then((res) => {
@@ -147,7 +162,7 @@
           loading: false,
           note1: '',
           resourceId: '1522550195055828996',
-          resourceName: '摄像头列表',
+          resourceName: '视频监控列表',
           type: '基础设施',
         },
       ],
@@ -170,9 +185,9 @@
       })
     }
   }
-  // 删除已申请
+  // 撤销已申请
   const deleteApply = (item) => {
-    console.log('删除========>', item)
+    console.log('撤销========>', item)
     if (delApply.value) {
       delApply.value = false
       switch (item.approveStatus) {
@@ -189,9 +204,9 @@
         case '通过':
           delApplyCamera([item.id]).then((res) => {
             if (res.data.code == 0) {
-              message.success('删除成功')
+              message.success('撤销成功')
             } else {
-              message.warning('删除失败')
+              message.warning('撤销失败')
             }
             initApply()
           })
@@ -202,9 +217,9 @@
   const handleOk = () => {
     endProcess({ instanceId: instanceId.value }).then((res) => {
       if (res.data.code == 0) {
-        message.success('删除成功')
+        message.success('撤销成功')
       } else {
-        message.warning('删除失败')
+        message.warning('撤销失败')
       }
       initApply()
       visible.value = false
@@ -247,7 +262,7 @@
   mybus.on('selectCamera', (obj) => {
     // 判断最多10条
     if (dataList.toBeApplied.length + dataList.requested.length >= 10) {
-      message.warning('最多只能申请10个摄像头！')
+      message.warning('最多只能申请10个视频监控！')
       return
     }
     // 判断是否已操作
@@ -275,7 +290,7 @@
           init()
         })
       } else {
-        message.warning('已申请该摄像头！')
+        message.warning('已申请该视频监控！')
       }
     }
   })
@@ -289,34 +304,40 @@
     position: fixed;
     top: 50%;
     right: 0.16rem;
-    margin-top: -3.5rem;
+    margin-top: -3.9rem;
     .bottom {
-      margin-top: 32px;
+      margin-top: 20px;
     }
     .title {
       font-size: 16px;
       font-weight: 600;
     }
     .name {
-      width: 150px;
+      width: 1.3rem;
       overflow: hidden;
       display: -webkit-box;
       -webkit-line-clamp: 1;
       -webkit-box-orient: vertical;
       word-break: break-all;
     }
+    .top .name {
+      width: 1.8rem;
+    }
     :deep(.ant-list-footer) {
       display: flex;
       justify-content: flex-end;
     }
     :deep(.ant-list-items) {
       width: 2.5rem;
-      height: 2.45rem;
+      height: 3rem;
       overflow-y: scroll;
     }
+    :deep(.ant-list-item) {
+      padding: 5px 5px 5px 10px;
+    }
     :deep(.ant-spin-nested-loading) {
       width: 2.5rem;
-      height: 2.45rem;
+      height: 3rem;
     }
   }
 </style>