邓洁 : 站点管理修改细节

src/views/site/index.vue

@@ -7,6 +7,9 @@
       </div>
       <div class="tunnel-title"></div>
       <div class="all-del-btn">
+        <div class="all-btn" style=" margin-right: 40px;" v-if="!showAddIcon">
+          添加
+        </div>
         <div class="all-btn">
           全选
         </div>
@@ -16,7 +19,7 @@
       </div>
     </div>
     <div class="box-content">
-      <div class="site-box" v-for="item in siteList">
+      <div class="site-box" v-for="item in siteList" :key="item.siteId">
         <div class="top">
           <span>站点名称：{{ item.siteName }}</span>
           <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
@@ -24,19 +27,21 @@
         <div class="box-center">
           <div class="left-img"></div>
           <div class="right-tunnel">
-            <div>隧道数量：{{ item.num }}条</div>
+            <div>隧道数量：{{ item.info.tunnelNum }}条
+            </div>
             <div>
-              <div class="tunnel">
-                <div>{{ item.sortTunnel }}</div>
+              <div class="tunnel" v-if="showFirstTunnel">
+                <div>{{ item.info.tunnelName }}</div>
                 <div class="tunnel-icon"></div>
-                <div>施工长度{{ item.constructionLength }}米</div>
-                <div>实现长度{{ item.implementationLength }}公里</div>
+                <div>施工长度{{ item.info.constructionLength }}米</div>
+                <div>实现长度{{ item.info.implementationLength }}公里
+                </div>
               </div>
-              <div class="tunnel-add" @click="goToAddTunnel">
+              <div class="tunnel-add" @click="goToAddTunnel(item.siteId)">
                 <div class="add-icon"></div>
               </div>
             </div>
-            <div class="more" @click="router.push('/tunnel')">
+            <div class="more" @click="router.push('/tunnel')" v-if="showFirstTunnel">
               更多
               <div class="icon"></div>
             </div>
@@ -47,7 +52,7 @@
           <div>站点编辑</div>
         </div>
       </div>
-      <div class="site-box add-box" @click="handleAdd">
+      <div class="site-box add-box" v-if="showAddIcon" @click="handleAdd">
         <div class="add-icon"></div>
         <div style="cursor: pointer">添加站点</div>
       </div>
@@ -82,7 +87,9 @@
     </el-dialog>
     <div class="pagination">
       <span>首页</span>
-      <el-pagination background :page-size="6" :total="50" prev-text="上一页" next-text="下一页" layout="prev, pager, next"/>
+      <el-pagination background v-model:current-page="pageInfo.pageNum" v-model:page-size="pageInfo.pageSize"
+                     :total="total" prev-text="上一页" next-text="下一页" layout="prev, pager, next"
+                     @current-change="handleCurrentChange"/>
       <span>尾页</span>
     </div>
   </div>
@@ -91,14 +98,28 @@
 <script setup>
 import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
 import {ElMessage, ElMessageBox} from "element-plus";
+import zhCn from 'element-plus/dist/locale/zh-cn.mjs'
 
 const router = useRouter()
 const siteList = ref([])
 const siteIds = ref([])
 const siteNameList = ref([])
+const info = ref({
+  tunnelNum: 0,
+  tunnelName: '隧道',
+  constructionLength: 0,
+  implementationLength: 0
+})
 const title = ref('新增站点')
 const isClick = ref(false);
 const isVisited = ref(false);
+const total = ref();
+const showAddIcon = ref(false)
+const showFirstTunnel = ref(true)
+const pageInfo = reactive({
+  pageNum: 1,
+  pageSize: 6
+});
 const form = ref({
   address: '',
   siteName: '',
@@ -109,8 +130,16 @@ const formRules = ref({
 })
 const formInstance = ref()
 const getList = () => {
-  getSiteList().then((res) => {
+  getSiteList({
+    ...pageInfo
+  }).then((res) => {
+    total.value = res.data.total;
+    showAddIcon.value = total.value !== 6;
     res.data.rows.map(item => {
+      if (item.tunnelList === null || item.tunnelList === []) {
+        showFirstTunnel.value = false
+      }
+      item.info = info.value
       item.checked = false
     })
     siteList.value = res.data.rows;
@@ -134,8 +163,8 @@ const handleClickSite = (type) => {
     })
   }
 }
-const goToAddTunnel = () => {
-  router.push('/tunnel')
+const goToAddTunnel = (siteId) => {
+  router.push('/tunnel/' + siteId)
 }
 //重置from表单
 const restFrom = () => {
@@ -177,20 +206,33 @@ const handleSubmit = (instance) => {
   })
 }
 const handleMoreDelete = () => {
-  ElMessageBox.confirm(`确认删除名称为${siteNameList.value}的站点吗?`, '系统提示', {
-    confirmButtonText: '确定',
-    cancelButtonText: '取消',
-    type: 'warning'
-  }).then(() => {
-    deleteSite(siteIds.value).then(res => {
-      if (res.code === 1000) {
-        ElMessage.success(res.msg)
-        getList()
-      } else {
-        ElMessage.error(res.msg)
-      }
+  if (siteIds.value.length === 0) {
+    ElMessage.warning('请先选择站点进行删除')
+  } else {
+    ElMessageBox.confirm(`是否确定删除该站点`, '系统提示', {
+      confirmButtonText: '确定',
+      cancelButtonText: '取消',
+      type: 'warning',
+      customClass: 'delBox'
+    }).then(() => {
+      deleteSite(siteIds.value).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success(res.msg)
+          getList()
+          siteIds.value = []
+          siteNameList.value = []
+        } else {
+          ElMessage.error(res.msg)
+        }
+      })
     })
-  })
+  }
+}
+
+//点击页码进行分页功能
+const handleCurrentChange = async (val) => {
+  pageInfo.pageNum = val
+  await getList()
 }
 </script>
 
@@ -376,9 +418,9 @@ const handleMoreDelete = () => {
   .box-content {
     display: flex;
     flex-wrap: wrap;
-    padding-left: 100px;
-    padding-right: 100px;
-    justify-content: space-between;
+    padding-left: 70px;
+    padding-right: 70px;
+    //justify-content: space-between;
 
     .add-box {
       cursor: pointer;
@@ -400,7 +442,7 @@ const handleMoreDelete = () => {
 
     .site-box {
       margin-top: 122px;
-      //margin-right: 122px;
+      margin-right: 60px;
       padding: 40px 50px;
       width: 1250px;
       height: 750px;
@@ -408,7 +450,7 @@ const handleMoreDelete = () => {
       //box-sizing: border-box;
       position: relative;
 
-      &:nth-child(3) {
+      &:nth-child(3n) {
         margin-right: 0;
       }
 
@@ -456,6 +498,7 @@ const handleMoreDelete = () => {
             margin-top: 29px;
 
             .tunnel {
+              margin-right: 20px;
               width: 280px;
               height: 350px;
               background: #3FBED1;
@@ -488,7 +531,6 @@ const handleMoreDelete = () => {
             }
 
             .tunnel-add {
-              margin-left: 20px;
               width: 280px;
               height: 350px;
               background: #1891A3;
@@ -559,10 +601,12 @@ const handleMoreDelete = () => {
     font-weight: bold;
 
     > span:first-child {
+      cursor: pointer;
       margin-right: 60px;
     }
 
     > span:last-child {
+      cursor: pointer;
       margin-left: 71px;
     }
 

src/views/tunnel-manage/index.vue

@@ -83,6 +83,7 @@
 
 <script setup>
 const router = useRouter()
+const siteId = reactive(router.currentRoute.value.params.siteId)
 const siteList = ref([
   {
     tunnelName: '一号隧道',