邓洁 : 站点管理接口对接

2023-12-15 21:50:04 +08:00
parent a1597159c9
commit f94b84fe2e
5 changed files with 181 additions and 72 deletions
--- a/src/api/site.js
+++ b/src/api/site.js
@@ -0,0 +1,34 @@
+import request from '@/utils/request.js'
+
+export const getSiteList = () => {
+  return request({
+    url: '/tunnel/site',
+    method: 'get'
+  })
+}
+export const getSiteDetail = (siteId) => {
+  return request({
+    url: `/tunnel/site/${siteId}`,
+    method: 'get'
+  })
+}
+export const editSite = (data) => {
+  return request({
+    url: '/tunnel/site',
+    method: 'put',
+    data
+  })
+}
+export const addSite = (data) => {
+  return request({
+    url: '/tunnel/site',
+    method: 'post',
+    data
+  })
+}
+export const deleteSite = (siteIdList) => {
+  return request({
+    url: `/tunnel/site/${siteIdList}`,
+    method: 'delete'
+  })
+}
--- a/src/components/manageBtn/index.vue
+++ b/src/components/manageBtn/index.vue
@@ -20,7 +20,6 @@ const btnList = ref([
    icon: 'sp_icon_zdgl.png',
    name: '站点管理'
  },
-
  {
    icon: 'sp_icon_sdgl.png',
    name: '隧道管理'
--- a/src/views/site/index.vue
+++ b/src/views/site/index.vue
@@ -10,7 +10,7 @@
        <div class="all-btn">
          全选
        </div>
-        <div class="all-btn del-btn">
+        <div class="all-btn del-btn" @click="handleMoreDelete">
          删除
        </div>
      </div>
@@ -19,7 +19,7 @@
      <div class="site-box" v-for="item in siteList">
        <div class="top">
          <span>站点名称：{{ item.siteName }}</span>
-          <div @click.stop="handleClickSite"><span :class="{ clickColor: isClick }"></span></div>
+          <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
        </div>
        <div class="box-center">
          <div class="left-img"></div>
@@ -42,7 +42,7 @@
            </div>
          </div>
        </div>
-        <div class="edit-btn" @click="handleEdit">
+        <div class="edit-btn" @click="handleEdit(item.siteId)">
          <div class="edit-icon"></div>
          <div>站点编辑</div>
        </div>
@@ -54,30 +54,31 @@
    </div>
    <el-dialog v-model="isVisited" width="1958px">
      <div class="siteId">
-        <span>{{title}}</span>
+        <span>{{ title }}</span>
      </div>
-      <el-form :model="form" :label-position="right" label-width="168px">
+      <el-form :model="form" :label-position="right" :rules="formRules" ref="formInstance" label-width="168px">
+        <el-form-item label="站点名称">
+          <el-input v-model="form.siteName" placeholder="请输入站点名称"/>
+        </el-form-item>
        <el-form-item label="站点地址">
          <el-input v-model="form.address" placeholder="请输入站点地址"/>
        </el-form-item>
-        <el-form-item label="站点名称">
-          <el-input v-model="form.name" placeholder="请输入站点名称"/>
-        </el-form-item>
        <el-form-item label="站点描述">
-          <el-input v-model="form.desc" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }" placeholder="请输入站点信息"/>
-        </el-form-item>
-        <el-form-item label="备注">
-          <el-input v-model="form.remark" placeholder="请输入备注"/>
+          <el-input v-model="form.describe" type="textarea" :autosize="{ minRows: 5, maxRows: 7 }"
+                    placeholder="请输入站点信息"/>
        </el-form-item>
      </el-form>
-      <div class="btns">
-        <div class="cancel-btn" @click="isVisited=false">
-          取消
+
+      <template #footer>
+        <div class="btns">
+          <div class="cancel-btn" @click="isVisited=false">
+            取消
+          </div>
+          <div class="sure-btn" @click="handleSubmit(formInstance)">
+            确定
+          </div>
        </div>
-        <div class="sure-btn">
-          确定
-        </div>
-      </div>
+      </template>
    </el-dialog>
    <div class="pagination">
      <span>首页</span>
@@ -88,59 +89,138 @@
 </template>

 <script setup>
+import {editSite, getSiteDetail, getSiteList, addSite, deleteSite} from "@/api/site";
+import {ElMessage, ElMessageBox} from "element-plus";
+
 const router = useRouter()
-const siteList = ref([
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  },
-  {
-    siteName: '松江站',
-    num: 1,
-    sortTunnel: '一号隧道',
-    constructionLength: 500,
-    implementationLength: 10
-  }
-])
-const siteId = ref('iu78686')
-const siteManageId = ref('j98h0')
-const title=ref('新增站点')
+const siteList = ref([])
+const siteIds = ref([])
+const siteNameList = ref([])
+const title = ref('新增站点')
 const isClick = ref(false);
 const isVisited = ref(false);
 const form = ref({
  address: '',
-  name: '',
-  desc: '',
-  remark: ''
+  siteName: '',
+  describe: ''
 });
-const handleClickSite = () => {
-  isClick.value = !isClick.value
+const formRules = ref({
+  siteName: [{required: true, message: '请输入站点名称', trigger: 'blur'}]
+})
+const formInstance = ref()
+const getList = () => {
+  getSiteList().then((res) => {
+    res.data.rows.map(item => {
+      item.checked = false
+    })
+    siteList.value = res.data.rows;
+  });
 }
-const goToAddTunnel=()=>{
+getList()
+const handleClickSite = (type) => {
+  if (type.checked) {
+    siteIds.value.push(type.siteId)
+    siteNameList.value.push(type.siteName)
+  } else {
+    siteIds.value.map((item, index) => {
+      if (item === type.siteId) {
+        siteIds.value.splice(index, 1)
+      }
+    })
+    siteNameList.value.map((item, index) => {
+      if (item === type.siteName) {
+        siteNameList.value.splice(index, 1)
+      }
+    })
+  }
+}
+const goToAddTunnel = () => {
  router.push('/tunnel')
 }
-const handleEdit=()=>{
-  title.value='编辑站点'
-  isVisited.value=true
+//重置from表单
+const restFrom = () => {
+  form.value = {
+    address: '',
+    siteName: '',
+    describe: ''
+  }
+}
+const handleEdit = (siteId) => {
+  title.value = '编辑站点'
+  restFrom()
+  getSiteDetail(siteId).then((res) => {
+    form.value = res.data;
+    isVisited.value = true
+  });
 }

-const handleAdd=()=>{
-  title.value='新增站点'
-  isVisited.value=true
+const handleAdd = () => {
+  restFrom()
+  title.value = '新增站点'
+  isVisited.value = true
+}
+const handleSubmit = (instance) => {
+  if (!instance) return
+  instance.validate(async (valid) => {
+    if (!valid) return
+    if (title.value === '编辑站点') {
+      editSite(form.value).then(() => {
+        isVisited.value = false
+        getList()
+      });
+    } else {
+      addSite(form.value).then(() => {
+        isVisited.value = false
+        getList()
+      });
+    }
+  })
+}
+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)
+      }
+    })
+  })
 }
 </script>

 <style scoped lang="scss">
+:deep(.el-checkbox__inner) {
+  width: 40px !important;
+  height: 40px !important;
+  border-radius: 25px;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner ) {
+  width: 25px;
+  height: 25px;
+  background-color: #05FEFF;
+}
+
+:deep(.el-checkbox__input.is-checked .el-checkbox__inner::after) {
+  display: none;
+}
+
+.clickColor {
+  position: absolute;
+  top: 7px;
+  left: 6.5px;
+  width: 25px;
+  height: 25px;
+  background-color: #05FEFF;
+  border-radius: 25px;
+}
+
 .siteId {
  display: flex;
  justify-content: center;
@@ -155,6 +235,8 @@ const handleAdd=()=>{
  margin-top: 80px;

  .cancel-btn {
+    display: flex;
+    justify-content: center;
    cursor: pointer;
    width: 220px;
    height: 80px;
@@ -162,12 +244,13 @@ const handleAdd=()=>{
    border: 2px solid #08B7B8;
    color: #08B7B8;
    line-height: 80px;
-    padding-left: 67px;
    font-size: 38px;
    box-sizing: border-box;
  }

  .sure-btn {
+    display: flex;
+    justify-content: center;
    cursor: pointer;
    width: 220px;
    height: 80px;
@@ -176,9 +259,9 @@ const handleAdd=()=>{
    border-radius: 11px;
    color: #FFFFFF;
    font-size: 38px;
-    padding-left: 67px;
  }
 }
+
 :deep(.el-dialog) {
  border: 2px solid #05FEFF;
  background: #0D6578;
@@ -229,6 +312,7 @@ const handleAdd=()=>{


 .site-bgc {
+  background-color: #072348;
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
@@ -343,16 +427,6 @@ const handleAdd=()=>{
          border: 2px solid #05FEFF;
          border-radius: 25px;
          position: relative;
-
-          .clickColor {
-            position: absolute;
-            top: 7px;
-            left: 6.5px;
-            width: 25px;
-            height: 25px;
-            background-color: #05FEFF;
-            border-radius: 25px;
-          }
        }
      }

@@ -476,7 +550,7 @@ const handleAdd=()=>{
  .pagination {
    position: absolute;
    left: 50%;
-    transform: translate(-50%,-50%);
+    transform: translate(-50%, -50%);
    bottom: 80px;
    display: flex;
    align-items: center;
--- a/src/views/tunnel-manage/index.vue
+++ b/src/views/tunnel-manage/index.vue
@@ -1,7 +1,7 @@
 <template>
  <div class="tunnel-bgc">
    <div class="box-top">
-      <div class="back-tunnel" @click="router.push('/')">
+      <div class="back-tunnel" @click="router.back(-1)">
        <div class="back-icon"></div>
        <span>返回</span>
      </div>
@@ -302,6 +302,7 @@ const getImageUrl = (name) => {
 }

 .tunnel-bgc {
+  background-color: #072348;
  padding: 85px 0 0 0;
  width: 100%;
  height: 100%;
--- a/src/views/tunnel/index.vue
+++ b/src/views/tunnel/index.vue
@@ -244,6 +244,7 @@ initWebSocket();
 #main {
  height: 100%;
  width: 100%;
+  background-color: #072348;
  #tunnel-box {
    height: 100%;
  }