api服务发布基础功能

src/router/index.js

@@ -52,13 +52,13 @@ const router = createRouter({
         {
           path: 'servicePublishApi',
           name: 'ServicePublishApi',
-          component: () => import('../views/servicePublish/Index.vue'),
+          component: () => import('../views/servicePublishApi/Index.vue'),
           meta: { menuId: 'api_fwfb' },
         },
         {
-          path: 'servicePublishApiDetail/:type',
+          path: 'servicePublishApiDetail/:type/:id?',
           name: 'ServicePublishApiDetail',
-          component: () => import('../views/servicePublish/Detail.vue'),
+          component: () => import('../views/servicePublishApi/Detail.vue'),
           meta: { menuId: 'api_fwfb' },
         },
         {

src/service/servicePublishApi.js

@@ -0,0 +1,72 @@
+import request from "./index";
+
+export function ServicePublishList(page,limit,quickSearch) {
+    return request({
+        url: '/service/tApiService/list',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}
+
+export function ServicePublishAdd(tDataItem) {
+    return request({
+        url: '/service/tApiService/save',
+        method: "post",
+        data: {...tDataItem }
+    })
+}
+
+export function ServicePublishEdit(tDataItem) {
+    return request({
+        url: '/service/tApiService/save',
+        method: "post",
+        data: {...tDataItem }
+    })
+}
+
+export function ServicePublishDelete(id) {
+    return request({
+        url: '/service/tApiService/delete',
+        method: "post",
+        data: { id }
+    })
+}
+
+export function ServicePublishDetail(id, tDataItem) {
+    return request({
+        url: '/service/tApiService/detail',
+        method: "post",
+        data: { id, tDataItem }
+    })
+}
+
+export function ServicePublishStart(id, tDataItem) {
+    return request({
+        url: '/service/tApiService/startService',
+        method: "post",
+        data: { id, tDataItem }
+    })
+}
+
+export function ServicePublishStop(id, tDataItem) {
+    return request({
+        url: '/service/tApiService/stopService',
+        method: "post",
+        data: { id, tDataItem }
+    })
+}
+export function ServiceList(page,limit,quickSearch) {
+    return request({
+        url: '/service/tApiService/listForSelect',
+        method: "post",
+        data: {page,limit,quickSearch }
+    })
+}
+//资源信息
+export function resourceDetail(id) {
+    return request({
+        url: '/service/dataResource/resourceById',
+        method: "post",
+        data: {id }
+    })
+}

src/views/servicePublishApi/Detail.vue

@@ -0,0 +1,161 @@
+<template>
+    <div id="service-publish-detail" class="detail-default">
+        <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" 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>
+        <div class="detail-main-wrapper">
+            <div class="detail-main">
+                <span class="detail-part-title">基本信息</span>
+                <el-form :model="form.basicInfo" :rules="formRules.basicInfo" label-position="top" ref="basicInfo" class="form-detail">
+                    <el-form-item label="接口名称" prop="apiName">
+                        <el-input v-model="form.basicInfo.apiName" placeholder="请输入内容" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="类别" prop="apiClass">
+                        <el-select v-model="form.basicInfo.apiClass" placeholder="请选择" clearable :options="select_class">
+                            <el-option v-for="item in select_class" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="接口简介" prop="apiDes" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.basicInfo.apiDes" placeholder="请输入接口简介信息"></el-input>
+                    </el-form-item>
+                    <span class="detail-part-title">接口信息</span>
+                    <el-form-item label="接口地址" prop="apiUrl">
+                        <el-input v-model="form.basicInfo.apiUrl" placeholder="请输入内容" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="请求方式" prop="apiRequest">
+                        <el-select v-model="form.basicInfo.apiRequest" placeholder="请选择" clearable :options="select_request">
+                            <el-option v-for="item in select_request" :key="item.value" :label="item.label" :value="item.value"></el-option>
+                        </el-select>
+                    </el-form-item>
+                    <el-form-item label="接口说明" prop="apiExplain" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.basicInfo.apiExplain" placeholder="请输入接口说明信息"></el-input>
+                    </el-form-item>
+                </el-form>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+
+    import {useRoute, useRouter} from "vue-router";
+    import {reactive, ref} from "vue";
+    import {ServicePublishAdd, ServicePublishEdit, ServicePublishDetail} from "../../service/servicePublishApi";
+    import {ElMessage} from "element-plus";
+    import {onBeforeMount} from "@vue/runtime-core";
+    import createEnum from "../../utils/data/create-enum";
+
+
+    const route = useRoute()
+    const router = useRouter()
+
+    const form = reactive({
+        basicInfo: {
+            apiName: '',
+            apiClass: '',
+            apiDes: '',
+        },
+        apiInfo: {
+            apiUrl: '',
+            apiRequest:'',
+            apiExplain:''
+        }
+    })
+    const select_request = createEnum([
+        {value: 'post', label: 'POST'},
+        {value: 'get', label: 'GET'}
+    ])
+    const select_class = createEnum([
+        {value: 1, label: '基础底图'},
+        {value: 2, label: '空间查询'},
+        {value: 3, label: '三维分析'},
+        {value: 4, label: '空间可视化'},
+        {value: 5, label: '空间编辑'},
+        {value: 6, label: '其它功能'}
+    ])
+    const formRules = reactive({
+        basicInfo: {
+            apiName: { required: true, message: '请输入接口名称', trigger: 'blur' },
+            apiClass: { required: true, message: '请输入接口类型', trigger: 'blur' },
+            apiDes: { required: true, message: '请输入接口简介信息', trigger: 'change' },
+            apiUrl: { required: true, message: '请输入接口地址', trigger: 'change' },
+            apiRequest: { required: true, message: '请选择接入方式', trigger: 'change' },
+            apiExplain:  { required: true, message: '请选择接口说明信息', trigger: 'change' },
+        },
+    })
+    function handleClose() {
+        router.push({
+            name: route.name.slice(0,-6)
+        })
+    }
+    const basicInfo = ref(null)
+    // 整个提交表单
+    function handleSave() {
+        Promise.all([basicInfo.value.validate()]).then(valid => {
+            if(valid.findIndex(val => val===false)===-1) {
+                // 校验通过
+                let pForm={}
+                for (const k in form.basicInfo) {
+                    pForm[k] = form.basicInfo[k]
+                }
+                if(route.params.type==='edit') {
+                    // 编辑
+                    pForm['id'] = route.params.id
+                    ServicePublishEdit(pForm).then(res => {
+                        if(res.code=='200'&&res.data==='保存成功') {
+                            ElMessage({type:'success', message: '修改成功'})
+                            handleClose()
+                        }
+                    })
+                } else {
+                    // 新增
+                    pForm['id'] = null
+                    pForm['state'] = 1
+                    ServicePublishAdd(pForm).then(res => {
+                        if(res.code=='200'&&res.data==='保存成功') {
+                            ElMessage({type:'success', message: '新增成功'})
+                            handleClose()
+                        }
+                    })
+                }
+            }
+        })
+    }
+    const currentPage = ref(1)
+    const pageSize = ref(10)
+    const select_resource = ref([])
+    onBeforeMount(()=> {
+        if(route.params.type!=='add') {
+            ServicePublishDetail(route.params.id).then(res => {
+                if(res.code===200) {
+                    const data = res.data
+                    form.basicInfo.apiName = data.apiName
+                    form.basicInfo.apiClass = data.apiClass
+                    form.basicInfo.apiDes = data.apiDes
+                    form.basicInfo.apiUrl = data.apiUrl
+                    form.basicInfo.apiRequest = data.apiRequest
+                    form.basicInfo.apiExplain = data.apiExplain
+                } else {
+                    ElMessage({type:'error', message: '查询失败'})
+                }
+            })
+        }
+    })
+</script>
+
+<style scoped lang="scss">
+    #service-publish-detail {
+
+    }
+
+</style>

src/views/servicePublishApi/Index.vue

@@ -0,0 +1,218 @@
+<template>
+
+    <div id="service-publish" class="page-list">
+        <ListHeader title="数据列表" :add-btn-name="'新建服务'" @add-item="handleAdd" @search="val=>handleSearch(val)"/>
+        <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="apiName" show-overflow-tooltip/>
+                <el-table-column label="类别" min-width="100" prop="apiClassName" show-overflow-tooltip/>
+                <el-table-column label="简介" min-width="200" prop="apiDes" show-overflow-tooltip/>
+                <el-table-column label="状态" min-width="100">
+                    <template #default="scope">
+            <span
+                    class="table-column-state"
+                    :class="{
+              'state-green':scope.row.stateName==='发布中'||scope.row.stateName==='发布成功'||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="apiUpdateTime" 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)" v-if="scope.row.state!==6">
+                            <template #reference>
+                                <el-button link type="primary">启动</el-button>
+                            </template>
+                        </el-popconfirm>
+                        <el-popconfirm title="确认停止此条？" @confirm="toStop(scope.row)" v-if="scope.row.state!==5">
+                            <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>
+</template>
+
+<script setup>
+    import {reactive, ref, onMounted} from 'vue'
+    import {useRouter, useRoute} from 'vue-router'
+    import {
+        ServicePublishList,
+        ServicePublishDelete,
+        ServicePublishStart,
+        ServicePublishStop
+    } from '../../service/servicePublishApi'
+    import {ElMessage} 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 currentPage = ref(1)
+    const pageSize = ref(10)
+    const quickSearch = reactive({apiName:''})
+    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 handleSearch (val){
+        quickSearch.apiName=val
+        getData()
+    }
+    function getData() {
+        ServicePublishList(currentPage.value, pageSize.value, quickSearch).then(res => {
+            tableData.value = res.data.records
+            tableTotal.value = res.data.total
+            for (let data of tableData.value) {
+                switch (data.apiClass) {
+                    case 1:
+                        data.apiClassName = '基础底图'
+                        break
+                    case 2:
+                        data.apiClassName = '空间查询'
+                        break
+                    case 3:
+                        data.apiClassName = '三维分析'
+                        break
+                    case 4:
+                        data.apiClassName = '空间可视化'
+                        break
+                    case 5:
+                        data.apiClassName = '空间编辑'
+                        break
+                    case 6:
+                        data.apiClassName = '其它功能'
+                        break
+                }
+                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
+                    case 6:
+                        data.stateName = '服务运行中'
+                        break
+                    case 7:
+                        data.stateName = '服务运行异常'
+                        break
+                }
+            }
+        })
+    }
+
+
+    const tableData = reactive({
+        value: []
+    })
+
+    const route = useRoute()
+    const router = useRouter()
+
+    function handleAdd() {
+        router.push({
+            name: 'ServicePublishApiDetail',
+            params: {
+                type: 'add',
+            }
+        })
+    }
+
+    function toDetail(row) {
+        router.push({
+            name: 'ServicePublishApiDetail',
+            params: {
+                type: 'detail',
+                id: row.id
+            }
+        })
+    }
+
+    function toActivate(row) {
+        ServicePublishStart(row.id).then(res => {
+            if (res.code == '200' && res.data === '启动成功') {
+                ElMessage({type: 'success', message: '已启动'})
+                getData()
+            }
+        })
+
+    }
+
+    const toStop = (row) => {
+        ServicePublishStop(row.id).then(res => {
+            console.log(res)
+            if (res.code == '200' && res.data === '停止成功') {
+                ElMessage({type: 'success', message: '已停止'})
+                getData()
+            }
+        })
+    }
+
+    function toEdit(row) {
+        router.push({
+            name: 'ServicePublishApiDetail',
+            params: {
+                type: 'edit',
+                id: row.id
+            }
+        })
+    }
+
+    function handleDelete(row) {
+        ServicePublishDelete(row.id).then(res => {
+            if (res.code == '200' && res.data === '删除成功') {
+                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 {
+
+    }
+
+</style>