邓洁 : 隧道接口部分对接

src/views/tunnel-manage/index.vue

@@ -22,7 +22,7 @@
       <div class="site-box" v-for="item in tunnelList" :key="item.tunnelId">
         <div class="top">
           <span>{{ item.tunnelName }}</span>
-          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}公里</span>
+          <span>施工长度{{ item.constructionLength }}米 隧道长度{{ item.totalLength }}米</span>
           <el-checkbox v-model="item.checked" size="large" @change="handleClickSite(item)"/>
         </div>
         <div class="box-center">
@@ -33,7 +33,7 @@
                 <div class="edit-icon"></div>
                 <div>隧道编辑</div>
               </div>
-              <div class="edit-btn" @click.stop="handleEditDevice">
+              <div class="edit-btn" @click.stop="handleEditDevice(item.tunnelId)">
                 <div class="edit-icon-two"></div>
                 <div>设备管理</div>
               </div>
@@ -62,15 +62,15 @@
       <div class="siteId">
         <span>{{ title }}</span>
       </div>
-      <el-form :model="form" :label-position="right" label-width="168px">
-        <el-form-item label="隧道名称">
-          <el-input v-model="form.name" placeholder="请输入隧道名称"/>
+      <el-form :model="form" :label-position="right" label-width="188px" :rules="formRules" ref="formInstance">
+        <el-form-item label="隧道名称" required>
+          <el-input v-model="form.tunnelName" placeholder="请输入隧道名称"/>
         </el-form-item>
-        <el-form-item label="序列号">
+        <el-form-item label="序列号" required>
           <el-input v-model="form.serialNumber" placeholder="请输入序列号"/>
         </el-form-item>
-        <el-form-item label="隧道长度">
-          <el-input type="number" v-model="form.tunnelLength" placeholder="请输入隧道长度"/>
+        <el-form-item label="隧道长度" required>
+          <el-input type="number" v-model="form.totalLength" placeholder="请输入隧道长度"/>
         </el-form-item>
         <el-form-item label="隧道备注">
           <el-input v-model="form.remarks" placeholder="请输入隧道备注"/>
@@ -80,7 +80,7 @@
         <div class="cancel-btn" @click="isVisited=false">
           取消
         </div>
-        <div class="sure-btn" @click="handleAddTunnel">
+        <div class="sure-btn" @click="handleSubmit(formInstance)">
           确定
         </div>
       </div>
@@ -97,12 +97,16 @@
 
 <script setup>
 import {ElMessage, ElMessageBox} from "element-plus";
-import {getTunnelList} from "@/api/tunnelManage";
-import {deleteTunnel} from "../../api/tunnelManage";
+import {getTunnelList,addTunnel, deleteTunnel} from "@/api/tunnelManage";
 
 const router = useRouter()
 const showAddIcon = ref(true)
 const siteId = reactive(router.currentRoute.value.params.siteId)
+const formRules = ref({
+  tunnelName: [{required: true, message: '请输入隧道名称', trigger: 'blur'}],
+  serialNumber: [{required: true, message: '请输入序列号', trigger: 'blur'}]
+})
+const formInstance = ref()
 const tunnelList = ref([
   {
     tunnelName: '一号隧道',
@@ -226,9 +230,9 @@ const isVisited = ref(false);
 const tunnelIds = ref([])
 const tunnelNameList = ref([])
 const form = ref({
-  name: '',
+  tunnelName: '',
   serialNumber: '',
-  tunnelLength: '',
+  totalLength: '',
   remarks: ''
 });
 const isEdit = ref(false)
@@ -242,7 +246,7 @@ const getList = () => {
     ...pageInfo
   }).then(res => {
     if (res.code === 1000) {
-      total.value=res.data.total
+      total.value = res.data.total
       tunnelList.value = res.data.rows
     }
   })
@@ -253,8 +257,28 @@ const handleCurrentChange = (val) => {
   pageInfo.pageNum = val
   getList()
 }
-const handleAddTunnel=()=>{
-
+const handleSubmit = (instance) => {
+  // if (!instance) return
+  // console.log('instance',instance)
+  // instance.validate(async (valid) => {
+  //   console.log('valid',valid)
+  //   if (!valid) return
+    const data={
+      siteId:siteId,
+      ...form.value
+    }
+    if(form.value.tunnelName&&form.value.serialNumber&&form.value.totalLength){
+      addTunnel(data).then(res => {
+        if (res.code === 1000) {
+          ElMessage.success('新增成功')
+          getList()
+          isVisited.value = false
+        }
+      })
+    }else {
+      ElMessage.warning('请先完善信息再新增')
+    }
+  // })
 }
 const handleGoToEditTunnel = (tunnelId) => {
   isEdit.value = true
@@ -269,14 +293,15 @@ const handleEdit = () => {
   title.value = '编辑隧道'
   // isVisited.value = true
 }
-const handleEditDevice = () => {
-  router.push('/device/' + 1)
+const handleEditDevice = (tunnelId) => {
+  router.push('/device/' + tunnelId)
 }
 const restFrom = () => {
   form.value = {
-    address: '',
-    siteName: '',
-    describe: ''
+    tunnelName: '',
+    serialNumber: '',
+    totalLength: '',
+    remarks: ''
   }
 }
 const handleAdd = () => {