增加页面跳转

src/views/servicePublish/Detail.vue

@@ -3,9 +3,13 @@
     <div class="detail-header">
       <div class="d-title">
         <span>服务信息</span>
+        <span v-if="route.params.type==='add'">新增</span>
+        <span v-else-if="route.params.type==='detail'">详情</span>
+        <span v-else-if="route.params.type==='edit'">编辑</span>
       </div>
       <div class="d-btns">
-        <el-button class="btn-default primary" type="primary">保存</el-button>
+        <el-button class="btn-default primary" type="primary" v-if="route.params.type==='add'" @click="handleSave()">发布</el-button>
+        <el-button class="btn-default primary" type="primary" v-if="route.params.type==='edit'" @click="handleSave()">保存</el-button>
         <el-button class="btn-default" @click="handleClose">关闭</el-button>
       </div>
     </div>
@@ -92,7 +96,48 @@ function handleClose() {
     name: route.name.slice(0,-6)
   })
 }
+const basicInfo = ref(null)
+const extentInfo = ref(null)
 
+function handleSave() {
+  Promise.all([basicInfo.value.validateForm(), extentInfo.value.validateForm()]).then(valid => {
+    if(valid.findIndex(val => val===false)===-1) {
+      // 校验通过
+      let pForm={}
+        ServicePublishEdit(pForm, tableData.value).then(res => {
+          if(res.code=='200'&&res.msg==='修改成功') {
+            ElMessage({type:'success', message: '修改成功'})
+            handleClose()
+          }
+        })
+      } else {
+        // 新增
+        ServicePublishAdd(pForm, tableData.value).then(res => {
+          if(res.code=='200'&&res.msg==='新增成功') {
+            ElMessage({type:'success', message: '新增成功'})
+            handleClose()
+          }
+        })
+      }
+    }
+  })
+}
+
+onBeforeMount(()=> {
+  if(route.params.type!=='add') {
+    ServicePublishDetail(route.params.id).then(res => {
+      if(res.code=='200'&&res.msg==='查询成功') {
+        form.basicInfo.forEach(i => {
+          i.value = res.data
+        })
+        form.extentInfo.forEach(i => {
+          i.value = res.data
+        })
+        tableData.value = res.data.tDataItems
+      }
+    })
+  }
+})
 </script>
 
 <style scoped lang="scss">

src/views/servicePublish/Index.vue

@@ -25,9 +25,9 @@
         <el-table-column label="最新发布时间" min-width="100" prop="publishTime" show-overflow-tooltip/>
         <el-table-column fixed="right" label="操作" min-width="120">
           <template #default="scope">
-            <el-button link type="primary" @click="toDetail">详情</el-button>
-            <el-button link type="primary" @click="toActivate">启用</el-button>
-            <el-button link type="primary" @click="toEdit">编辑</el-button>
+            <el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
+            <el-button link type="primary" @click="toActivate(scope.row)">启用</el-button>
+            <el-button link type="primary" @click="toEdit(scope.row)">编辑</el-button>
             <el-popconfirm title="确认删除此条？" @confirm="handleDelete(scope.row)">
               <template #reference>
                 <el-button link type="primary">删除</el-button>
@@ -110,23 +110,46 @@ const router = useRouter()
 
 function handleAdd () {
   router.push({
-    name: route.name + 'Detail',
+    name: 'ServicePublishDataDetail',
     params: {
-      type: 'Add'
+      type: 'add'
     }
   })
 }
 
 function toDetail() {
-  
+  router.push({
+    name: 'ServicePublishDataDetail',
+    params: {
+      type: 'detail',
+      id: row.id
+    }
+  })
 }
 
 function toActivate() {
-
+  this.$confirm('确认启用吗', '提示', {
+    type: 'warning'
+  }).then(() => {
+    StartService({ code: row.code }).then(res => {
+      if(res.code == 200) {
+        this.$notify({type: 'success', message: '已撤销'});
+        this.getData()
+      }
+    })
+  }).catch(() => {
+    this.$notify({type: 'info', message: '已取消'});
+  })
 }
 
 function toEdit() {
-  
+  router.push({
+    name: 'ServicePublishDataDetail',
+    params: {
+      type: 'edit',
+      id: row.id
+    }
+  })
 }
 
 function handleDelete(row) {