src/router/index.js

@@ -18,7 +18,7 @@ const router = createRouter({
           meta: { menuId: 'data_fwfb' },
         },
         {
-          path: 'servicePublishDataDetail/:type',
+          path: 'servicePublishDataDetail/:type/:id?',
           name: 'ServicePublishDataDetail',
           component: () => import('../views/servicePublish/Detail.vue'),
           meta: { menuId: 'data_fwfb' },

src/service/index.js

@@ -0,0 +1,36 @@
+import axios from "axios"
+import { useUserStore } from '../stores/user'
+
+const userStore = useUserStore()
+
+const service = axios.create({
+    baseURL: 'http://10.81.74.131:8089/data-service-manage-service',
+    timeout: 60000, // 请求超时时间 毫秒
+    // withCredentials: true,
+    headers: {
+        "Content-Type": "application/json;charset=UTF-8",
+        "userId": userStore.$state.userId
+    },
+})
+
+service.interceptors.request.use(
+    (config) => {
+        return config;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+)
+
+service.interceptors.response.use(
+    (response) => {
+        const res = response.data;
+        return res;
+    },
+    (error) => {
+        return Promise.reject(error);
+    }
+)
+
+export default service;
+

src/service/servicePublish.js

@@ -0,0 +1,57 @@
+import request from "./index";
+
+export function ServicePublishList(page,limit,quickSearch) {
+    return request({
+        url: '/service/dataService/list',
+        method: "post",
+        data: {page,limit,quickSearch }
+    })
+}
+
+export function ServicePublishAdd(tDataItem) {
+    return request({
+        url: '/service/dataService/save',
+        method: "post",
+        data: {...tDataItem }
+    })
+}
+
+export function ServicePublishEdit(tDataItem) {
+    return request({
+        url: '/service/dataService/save',
+        method: "post",
+        data: {...tDataItem }
+    })
+}
+
+export function ServicePublishDelete(id) {
+    return request({
+        url: '/service/dataService/delete',
+        method: "post",
+        data: { id }
+    })
+}
+
+export function ServicePublishDetail(id, tDataItem) {
+    return request({
+        url: '/service/dataService/detail',
+        method: "post",
+        data: { id, tDataItem }
+    })
+}
+
+export function ServicePublishStart(id, tDataItem) {
+    return request({
+        url: '/service/dataService/startService',
+        method: "post",
+        data: { id, tDataItem }
+    })
+}
+
+export function ServicePublishStop(id, tDataItem) {
+    return request({
+        url: '/service/dataService/stopService',
+        method: "post",
+        data: { id, tDataItem }
+    })
+}

src/stores/user.js

@@ -0,0 +1,12 @@
+import { defineStore } from 'pinia'
+
+export const useUserStore = defineStore('user', {
+    state: () => ({
+        userId: '1',
+    }),
+    actions: {
+        setUser(userInfo) {
+            this.userId = userInfo.userId
+        }
+    }
+})

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>
@@ -16,34 +20,33 @@
           <el-form-item label="服务名称" prop="serviceName">
             <el-input v-model="form.basicInfo.serviceName" placeholder="请输入内容" clearable></el-input>
           </el-form-item>
-          <el-form-item label="资源名称" prop="resName">
-            <el-input v-model="form.basicInfo.resName" placeholder="请输入内容" clearable></el-input>
+          <el-form-item label="资源名称" prop="resourceId">
+            <el-input v-model="form.basicInfo.resourceId" placeholder="请输入内容" clearable></el-input>
           </el-form-item>
           <el-form-item label="服务类型" prop="serviceType">
             <el-select v-model="form.basicInfo.serviceType" placeholder="请选择" clearable>
-              <el-option v-for="item in select_test" :key="item.value" :label="item.label" :value="item.value"></el-option>
+              <el-option v-for="item in select_serviceType" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="权限类型" prop="authType">
-            <el-select v-model="form.basicInfo.authType" placeholder="请选择" clearable>
-              <el-option v-for="item in select_test" :key="item.value" :label="item.label" :value="item.value"></el-option>
+          <el-form-item label="权限类型" prop="permissionType">
+            <el-select v-model="form.basicInfo.permissionType" placeholder="请选择" clearable>
+              <el-option v-for="item in select_permissionType" :key="item.value" :label="item.label" :value="item.value"></el-option>
             </el-select>
           </el-form-item>
-          <el-form-item label="发布方式" prop="publishWay" class="item-row">
-            <el-radio-group v-model="form.basicInfo.publishWay" class="radio-default">
-              <el-radio label="online">在线发布</el-radio>
-              <el-radio label="register">服务注册</el-radio>
+          <el-form-item label="发布方式" prop="publishingMode" class="item-row">
+            <el-radio-group v-model="form.basicInfo.publishingMode">
+              <el-radio :label="0">在线发布</el-radio>
+              <el-radio :label="1">服务注册</el-radio>
             </el-radio-group>
           </el-form-item>
-          <el-form-item label="服务描述" prop="serviceDes" class="item-row">
-            <el-input type="textarea" :rows="4" v-model="form.basicInfo.serviceDes" placeholder="请输入服务描述信息"></el-input>
+          <el-form-item label="服务描述" prop="serviceDescribe" class="item-row">
+            <el-input type="textarea" :rows="4" v-model="form.basicInfo.serviceDescribe" placeholder="请输入服务描述信息"></el-input>
           </el-form-item>
         </el-form>
-
         <span class="detail-part-title">服务信息</span>
         <el-form :model="form.extentInfo" :rules="formRules.extentInfo" label-position="top" ref="extentInfo" class="form-detail">
-          <el-form-item label="服务地址" prop="serviceUrl" class="item-row">
-            <el-input type="textarea" :rows="4" v-model="form.extentInfo.serviceUrl" placeholder="请输入服务地址"></el-input>
+          <el-form-item label="服务地址" prop="serviceRealUrl" class="item-row">
+            <el-input type="textarea" :rows="4" v-model="form.extentInfo.serviceAddress" placeholder="请输入服务地址"></el-input>
           </el-form-item>
         </el-form>
       </div>
@@ -54,7 +57,11 @@
 <script setup>
 import { reactive, ref, watch } from 'vue'
 import { useRoute, useRouter } from 'vue-router'
-import { select_test } from '../../utils/data/select-data'
+import {onBeforeMount} from "@vue/runtime-core";
+import {ServicePublishAdd, ServicePublishDetail, ServicePublishEdit} from "../../service/servicePublish";
+import {ElMessage} from "element-plus";
+import {select_test} from '../../utils/data/select-data';
+import createEnum from "../../utils/data/create-enum";
 
 const route = useRoute()
 const router = useRouter()
@@ -62,27 +69,38 @@ const router = useRouter()
 const form = reactive({
   basicInfo: {
     serviceName: '',
-    resName: '',
+    resourceId: '',
     serviceType: '',
-    authType: '',
-    publishWay: 'online'
+    permissionType: '',
+    publishingMode: ''
   },
   extentInfo: {
-    serviceUrl: ''
+    serviceAddress: ''
   }
 })
+const select_serviceType = createEnum([
+  {value: 0, label: '栅格切片'},
+  {value: 1, label: '三维服务'},
+  {value: 2, label: '要素服务'},
+  {value: 3, label: '动态服务'}
+])
+
+const select_permissionType = createEnum([
+  {value: 0, label: '自由服务'},
+  {value: 1, label: '安全服务'},
+])
 
 const formRules = reactive({
   basicInfo: {
     serviceName: { required: true, message: '请输入服务名称', trigger: 'blur' },
-    resName: { required: true, message: '请输入资源名称', trigger: 'blur' },
+    resourceId: { required: true, message: '请输入资源名称', trigger: 'blur' },
     serviceType: { required: true, message: '请选择服务类型', trigger: 'change' },
-    authType: { required: true, message: '请选择权限类型', trigger: 'change' },
-    publishWay: { required: true, message: '请选择发布方式', trigger: 'change' },
-    serviceDes: { required: false }
+    permissionType: { required: true, message: '请选择权限类型', trigger: 'change' },
+    publishingMode: { required: true, message: '请选择发布方式', trigger: 'change' },
+    serviceDescribe: { required: false }
   },
   extentInfo: {
-    serviceUrl: { required: true, message: '请输入服务地址', trigger: 'blur' },
+    serviceAddress: { required: true, message: '请输入服务地址', trigger: 'blur' },
   }
 })
 
@@ -92,12 +110,68 @@ function handleClose() {
     name: route.name.slice(0,-6)
   })
 }
+const basicInfo = ref(null)
+const extentInfo = ref(null)
+
+function handleSave() {
+  console.log(basicInfo.value)
+  Promise.all([basicInfo.value.validate(), extentInfo.value.validate()]).then(valid => {
+    if(valid.findIndex(val => val===false)===-1) {
+      // 校验通过
+      let pForm={}
+      for (const k in form.basicInfo) {
+        pForm[k] = form.basicInfo[k]
+      }
+      for (const k in form.extentInfo) {
+        pForm[k] = form.extentInfo[k]
+      }
+      if(route.params.type==='edit') {
+        // 编辑
+        pForm['id'] = route.params.id
+        ServicePublishEdit(pForm).then(res => {
+          if(res.code=='200'&&res.msg==='修改成功') {
+            ElMessage({type:'success', message: '修改成功'})
+            handleClose()
+          }
+        })
+      } else {
+        // 新增
+        pForm['id'] = null
+        pForm['state'] = 1
+        ServicePublishAdd(pForm).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) {
+          const data = res.data
+          form.basicInfo.serviceName = data.serviceName
+          form.basicInfo.resourceId = data.resourceId
+          form.basicInfo.serviceType = data.serviceType
+          form.basicInfo.permissionType = data.permissionType
+          form.basicInfo.publishingMode = data.publishingMode
+          form.basicInfo.serviceDescribe = data.serviceDescribe
+          form.extentInfo.serviceAddress = data.serviceAddress
+      } else {
+          ElMessage({type:'error', message: '查询失败'})
+      }
+    })
+  }
+})
 </script>
 
 <style scoped lang="scss">
 #service-publish-detail {
-  
+
 }
-  
+
 </style>

src/views/servicePublish/Index.vue

@@ -1,143 +1,276 @@
 <template>
-  <div id="service-publish" class="page-list">
-    <ListHeader title="数据列表" :add-btn-name="'新建服务'" @add-item="handleAdd"/>
-    <div class="list-main">
-      <el-table :data="tableData.value" ref="table" class="table-default" id="table-list" stripe>
-        <el-table-column type="index" :index="indexCreate" label="序号" min-width="50"/>
-        <el-table-column label="服务名称" min-width="100" prop="name" show-overflow-tooltip/>
-        <el-table-column label="服务类型" min-width="100" prop="type" show-overflow-tooltip/>
-        <el-table-column label="资源名称" min-width="100" prop="resName" show-overflow-tooltip/>
-        <el-table-column label="资源类别" min-width="100" prop="resCata" show-overflow-tooltip/>
-        <el-table-column label="服务状态" min-width="100">
-          <template #default="scope">
+    <div id="service-publish" class="page-list">
+        <ListHeader title="数据列表" :add-btn-name="'新建服务'" @add-item="handleAdd"/>
+        <div class="list-main">
+            <el-table :data="tableData.value" ref="table" class="table-default" id="table-list" stripe>
+                <el-table-column type="index" :index="indexCreate" label="序号" min-width="50"/>
+                <el-table-column label="服务名称" min-width="100" prop="serviceName" show-overflow-tooltip/>
+                <el-table-column label="服务类型" min-width="100" prop="serviceTypeName" show-overflow-tooltip/>
+                <el-table-column label="资源名称" min-width="100" prop="tresourceName" show-overflow-tooltip/>
+                <el-table-column label="资源类别" min-width="100" prop="tresourceTypeName" show-overflow-tooltip/>
+                <el-table-column label="服务状态" min-width="100">
+                    <template #default="scope">
             <span
-            class="table-column-state"
-            :class="{
-              'state-green':scope.row.serviceState==='正在运行',
-              'state-gray':scope.row.serviceState==='停止',
-              'state-red':scope.row.serviceState==='运行异常'||scope.row.serviceState==='发布失败',
-              'state-blue':scope.row.serviceState==='待发布',
-            }"
-            >{{ scope.row.serviceState }}</span>
-          </template>
-        </el-table-column>
-        <el-table-column label="服务权限" min-width="100" prop="serviceAuth" show-overflow-tooltip/>
-        <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-popconfirm title="确认删除此条？" @confirm="handleDelete(scope.row)">
-              <template #reference>
-                <el-button link type="primary">删除</el-button>
-              </template>
-            </el-popconfirm>
-          </template>
-        </el-table-column>
-      </el-table>
-      <Pagination :total="tableTotal" :page-size="pageSize" @pageChange="pagi_changePage" />
+                    class="table-column-state"
+                    :class="{
+              'state-green':scope.row.stateName==='正在发布',
+              'state-gray':scope.row.stateName==='停止',
+              'state-red':scope.row.stateName==='发布异常'||scope.row.stateName==='运行异常',
+              'state-blue':scope.row.stateName==='待发布',
+            }">
+                {{ scope.row.stateName }}
+            </span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="服务权限" min-width="100" prop="permissionTypeName" show-overflow-tooltip/>
+                <el-table-column label="最新发布时间" min-width="100" prop="lastUpdateTime" show-overflow-tooltip/>
+                <el-table-column fixed="right" label="操作" min-width="120">
+                    <template #default="scope">
+                        <el-button link type="primary" @click="toDetail(scope.row)">详情</el-button>
+                        <el-popconfirm title="确认启用此条？" @confirm="toActivate(scope.row)">
+                            <template #reference>
+                                <el-button link type="primary">启动</el-button>
+                            </template>
+                        </el-popconfirm>
+                        <el-popconfirm title="确认停止此条？" @confirm="toStop(scope.row)" >
+                            <template #reference>
+                                <el-button link type="primary">停止</el-button>
+                            </template>
+                        </el-popconfirm>
+                        <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>
+                            </template>
+                        </el-popconfirm>
+                    </template>
+                </el-table-column>
+            </el-table>
+            <Pagination :total="tableTotal" :page-size="pageSize" @pageChange="pagi_changePage"/>
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup>
-import { reactive, ref, onMounted } from 'vue'
-import ListHeader from '../../components/ListHeader.vue';
-import { useRouter, useRoute  } from 'vue-router'
-import Pagination from '../../components/Pagination.vue';
-
-onMounted(() => {
-  let tableH = document.getElementById('table-list').getElementsByClassName('el-table__body-wrapper')[0].clientHeight
-  let rowH = 60/1920*document.body.clientWidth
-  pageSize.value = Math.floor(tableH/rowH)
-  getData(1, pageSize.value)
-})
-
-const currentPage = ref(1)
-const pageSize = ref(10)
-const tableTotal = ref(20)
-
-function pagi_changePage(page) {
-  currentPage.value = page
-  getData(page, pageSize.value)
-}
-
-function indexCreate(index) {
-  return index + 1 + pageSize.value*(currentPage.value - 1)
-}
-
-function getData(page, size) {
-  tableData.value=[]
-  for(let i=(page-1)*size; i<page*size&&i<tableTotal.value; i++) {
-    let state = ''
-    switch(Math.floor(Math.random()*5)) {
-      case 0:
-        state = '正在运行'
-        break
-      case 1:
-        state = '停止'
-        break
-      case 2:
-        state = '发布失败'
-        break
-      case 3:
-        state = '运行异常'
-        break
-      case 4:
-        state = '待发布'
-        break
-    }
-    tableData.value.push({ 
-      name: '轨道交通站点'+(i+1),
-      type: '栅格切片',
-      resName: '轨道交通站点',
-      resCata: '基础目录',
-      serviceState: state,
-      serviceAuth: '自由服务',
-      publishTime: '2022-01-01 16:30',
+    import {reactive, ref, onMounted} from 'vue'
+    import ListHeader from '../../components/ListHeader.vue';
+    import {useRouter, useRoute} from 'vue-router'
+    import Pagination from '../../components/Pagination.vue';
+    import {
+        ServicePublishList,
+        ServicePublishDelete,
+        ServicePublishStart,
+        ServicePublishStop
+    } from '../../service/servicePublish'
+    import {ElMessage, ElMessageBox} from "element-plus";
 
+    onMounted(() => {
+        let tableH = document.getElementById('table-list').getElementsByClassName('el-table__body-wrapper')[0].clientHeight
+        let rowH = 60 / 1920 * document.body.clientWidth
+        pageSize.value = Math.floor(tableH / rowH)
+        getData(currentPage.value, pageSize.value)
     })
-  }
-}
 
-const table = ref(null)
+    const currentPage = ref(1)
+    const pageSize = ref(10)
+    const quickSearch = ref("{\"serviceName\":\"\"}")
+    const tableTotal = ref(20)
+
+    function pagi_changePage(page) {
+        currentPage.value = page
+        getData(currentPage.value, pageSize.value, quickSearch.value)
+    }
+
+    function indexCreate(index) {
+        return index + 1 + pageSize.value * (currentPage.value - 1)
+    }
+
+    function getData() {
+        ServicePublishList(currentPage.value, pageSize.value, quickSearch.value).then(res => {
+            tableData.value = res.data.records
+            tableTotal.value = res.total
+            for (let data of tableData.value) {
+                switch (data.state) {
+                    case 1:
+                        data.stateName = '待发布'
+                        break
+                    case 2:
+                        data.stateName = '正在发布'
+                        break
+                    case 3:
+                        data.stateName = '发布异常'
+                        break
+                    case 4:
+                        data.stateName = '停止'
+                        break
+                    case 5:
+                        data.stateName = '运行异常'
+                        break
+                }
+                switch (data.serviceType) {
+                    case 0:
+                        data.serviceTypeName = '栅格切片'
+                        break
+                    case 1:
+                        data.serviceTypeName = '三维服务'
+                        break
+                    case 2:
+                        data.serviceTypeName = '要素服务'
+                        break
+                    case 3:
+                        data.serviceTypeName = '动态服务'
+                        break
+                }
+                switch (data.tresourceType) {
+                    case '0':
+                        data.tresourceTypeName = '资源编目'
+                        break
+                    case '1':
+                        data.tresourceTypeName = '专题目录'
+                        break
+
+                }
+                switch (data.permissionType) {
+                    case '0':
+                        data.permissionTypeName = '自由服务'
+                        break
+                    case '1':
+                        data.permissionTypeName = '安全服务'
+                        break
+
+                }
+            }
+        })
+    }
+
+    const table = ref(null)
 
-const tableData = reactive({value: []})
+    const tableData = reactive({
+        value: []
+    })
 
-const route = useRoute()
-const router = useRouter()
+    const route = useRoute()
+    const router = useRouter()
 
-function handleAdd () {
-  router.push({
-    name: route.name + 'Detail',
-    params: {
-      type: 'Add'
+    function handleAdd() {
+        router.push({
+            name: 'ServicePublishDataDetail',
+            params: {
+                type: 'add',
+            }
+        })
     }
-  })
-}
 
-function toDetail() {
-  
-}
+    function toDetail(row) {
+        console.log('row', row)
 
-function toActivate() {
+        router.push({
+            name: 'ServicePublishDataDetail',
+            params: {
+                type: 'detail',
+                id: row.id
+            }
+        })
+    }
 
-}
+    function toActivate(row) {
+        ServicePublishStart(row.id).then(res => {
+            if (res.code == '200' && res.msg === '启动成功') {
+                ElMessage({type: 'success', message: '已启动'})
+                    getData(currentPage.value, pageSize.value)
+            }
+        })
+        // ElMessageBox.confirm(
+        //     '确认启用?',
+        //     '提示',
+        //     {
+        //         confirmButtonText: '确认',
+        //         cancelButtonText: '取消',
+        //         type: 'warning',
+        //     }
+        // )
+        //     .then(() => {
+        //         ServicePublishStart(row.id).then(res => {
+        //             if (res.code === 200) {
+        //                 ElMessage({
+        //                     type: 'success',
+        //                     message: '已启动',
+        //                 })
+        //                 this.getData()
+        //             }
+        //         })
+        //     })
+        //     .catch(() => {
+        //         ElMessage({
+        //             type: 'info',
+        //             message: '已取消',
+        //         })
+        //     })
+    }
+
+    const toStop = (row) => {
+        ServicePublishStop(row.id).then(res => {
+            if (res.code == '200' && res.msg === '停止成功') {
+                ElMessage({type: 'success', message: '已停止'})
+                    getData(currentPage.value, pageSize.value)
+            }
+        })
+        // ElMessageBox.confirm(
+        //     '确认停止?',
+        //     '提示',
+        //     {
+        //         confirmButtonText: '确认',
+        //         cancelButtonText: '取消',
+        //         type: 'warning',
+        //     }
+        // )
+        //     .then(() => {
+        //         ServicePublishStop(row.id).then(res => {
+        //             if (res.code === 200) {
+        //                 ElMessage({
+        //                     type: 'success',
+        //                     message: '已停止',
+        //                 })
+        //                 this.getData()
+        //             }
+        //         })
+        //     })
+        //     .catch(() => {
+        //         ElMessage({
+        //             type: 'info',
+        //             message: '已取消',
+        //         })
+        //     })
+    }
 
-function toEdit() {
-  
-}
+    function toEdit(row) {
+        router.push({
+            name: 'ServicePublishDataDetail',
+            params: {
+                type: 'edit',
+                id: row.id
+            }
+        })
+    }
 
-function handleDelete(row) {
-  console.log(row)
-}
+    function handleDelete(row) {
+        ServicePublishDelete(row.id).then(res => {
+            if (res.code == '200' && res.msg === '删除成功') {
+                ElMessage({type: 'success', message: '已删除'})
+                if (currentPage.value !== 1 && tableData.value.length === 1) {
+                    getData(currentPage.value - 1)
+                } else {
+                    getData(currentPage.value)
+                }
+            }
+        })
+    }
 
 </script>
 
 <style scoped lang="scss">
-#service-publish {
-  
-}
-  
+    #service-publish {
+
+    }
+
 </style>