修改界面样式、新建api服务授权管理

src/assets/styles/index.scss

@@ -147,10 +147,10 @@
   flex-wrap: wrap;
   .el-form-item {
     box-sizing: border-box;
-    width: 22.75%;
+    width: 30.75%;
     margin-bottom: 25px;
-    &:not(:nth-child(4n)) {
-      margin-right: 3%;
+    &:not(:nth-child(2n)) {
+      margin-right: 15%;
     }
     .el-form-item__label {
       margin-bottom: 13px !important;

src/router/index.js

@@ -64,13 +64,13 @@ const router = createRouter({
         {
           path: 'warrantManageApi',
           name: 'WarrantManageApi',
-          component: () => import('../views/warrantManage/Index.vue'),
+          component: () => import('../views/warrantManageApi/Index.vue'),
           meta: { menuId: 'api_sqgl' },
         },
         {
-          path: 'warrantManageApiDetail/:type',
+          path: 'warrantManageApiDetail/:type/:id/:id2',
           name: 'WarrantManageApiDetail',
-          component: () => import('../views/warrantManage/Detail.vue'),
+          component: () => import('../views/warrantManageApi/Detail.vue'),
           meta: { menuId: 'api_sqgl' },
         },
         {

src/service/warrantManageApi.js

@@ -0,0 +1,41 @@
+import request from "./index2";
+//列表查询
+export function WarrantManageList(page,limit,quickSearch) {
+    return request({
+        url: 'service/tApiApplication/listForAudit',
+        method: "post",
+        data: {page,limit,quickSearch:JSON.stringify((quickSearch)) }
+    })
+}
+// 接口基础信息
+export function ServiceManageDetail(id) {
+    return request({
+        url: '/service/tApiService/detail',
+        method: "post",
+        data: {id }
+    })
+}
+//申请单信息
+export function ApplicationDetail(id) {
+    return request({
+        url: '/service/tApiApplication/detail',
+        method: "post",
+        data: {id }
+    })
+}
+//审核信息
+export function AuditDetail(id) {
+    return request({
+        url: '/service/tApiAudit/detailForApplication',
+        method: "post",
+        data: {id }
+    })
+}
+//审核信息保存
+export function AuditSave(tDataItem) {
+    return request({
+        url: '/service/tApiAudit/save',
+        method: "post",
+        data: {...tDataItem }
+    })
+}

src/views/warrantManageApi/Detail.vue

@@ -0,0 +1,212 @@
+<template>
+    <div id="warrant-manage-detail" class="detail-default">
+        <div class="detail-header">
+            <div class="d-title">
+                <span v-if="route.params.type==='Detail'">详情</span>
+                <span v-if="route.params.type==='Check'">审核</span>
+            </div>
+            <div class="d-btns">
+                <template v-if="route.params.type==='Check'">
+                    <el-button class="btn-default primary" type="primary" @click="handleSave(2)">审核通过</el-button>
+                    <el-button class="btn-default primary" type="danger" @click="handleSave(3)">审核不通过</el-button>
+                </template>
+                <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.apiInfo" label-position="top" ref="apiInfo" class="form-detail" disabled>
+                    <el-form-item label="接口名称" prop="apiName">
+                        <el-input v-model="form.apiInfo.apiName" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="接口类别" prop="apiClassName">
+                        <el-input v-model="form.apiInfo.apiClassName" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="接口简介" prop="apiDes" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.apiInfo.apiDes"></el-input>
+                    </el-form-item>
+                    <span class="detail-part-title">接口信息</span>
+                    <el-form-item label="接口地址" prop="apiUrl">
+                        <el-input v-model="form.apiInfo.apiUrl" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="请求方式" prop="apiRequest">
+                        <el-input v-model="form.apiInfo.apiRequest" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="接口说明" prop="apiExplain" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.apiInfo.apiExplain"></el-input>
+                    </el-form-item>
+                </el-form>
+                <span class="detail-part-title">申请信息</span>
+                <el-form :model="form.applicationInfo" label-position="top" ref="applicationInfo" class="form-detail" disabled>
+                    <el-form-item label="访问IP" prop="applicationAccessIp">
+                        <el-input v-model="form.applicationInfo.applicationAccessIp" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="使用期限（天）" prop="applicationUseDay">
+                        <el-input v-model="form.applicationInfo.applicationUseDay" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="每天访问" prop="applicationAccessFlow">
+                        <el-input v-model="form.applicationInfo.applicationAccessFlow" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="并发量" prop="applicationConcurrent">
+                        <el-input v-model="form.applicationInfo.applicationConcurrent" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="申请人" prop="applicationUser">
+                        <el-input v-model="form.applicationInfo.applicationUser" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="所属单位" prop="tresourceName">
+                        <el-input v-model="form.applicationInfo.tresourceName" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="申请时间" prop="applicationTime">
+                        <el-input v-model="form.applicationInfo.applicationTime" clearable></el-input>
+                    </el-form-item>
+                    <el-form-item label="申请原因" prop="applicationReason" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.applicationInfo.applicationReason"></el-input>
+                    </el-form-item>
+                </el-form>
+                <span class="detail-part-title">申请信息</span>
+                <el-form :model="form.CheckInfo" :rules="rules" label-position="top" ref="CheckInfo" class="form-detail">
+                    <template v-if="route.params.type==='Detail'">
+                        <el-form-item label="审核人" prop="auditUser">
+                            <el-input v-model="form.CheckInfo.auditUser" disabled></el-input>
+                        </el-form-item>
+                        <el-form-item label="审核时间" prop="auditTime">
+                            <el-input v-model="form.CheckInfo.auditTime" disabled></el-input>
+                        </el-form-item>
+                    </template>
+                    <el-form-item label="审核意见" prop="auditReason" class="item-row">
+                        <el-input type="textarea" :rows="4" v-model="form.CheckInfo.auditReason" :disabled="route.params.type==='Detail'"></el-input>
+                    </el-form-item>
+                </el-form>
+                <img v-if="route.params.type==='Detail' && form.CheckInfo.auditStatus === '2'" src="../../assets/imgs/pages/check-pass.png" alt="" class="stamp">
+            </div>
+        </div>
+    </div>
+</template>
+
+<script setup>
+    import {useRoute, useRouter} from "vue-router";
+    import {reactive, ref} from "vue";
+    import {onBeforeMount} from "@vue/runtime-core";
+    import {ServiceManageDetail,ApplicationDetail,AuditDetail,AuditSave} from "../../service/warrantManageApi";
+    import {ElMessage} from "element-plus";
+    import {toRef, toRefs} from "@vue/reactivity";
+
+    const route = useRoute()
+    const router = useRouter()
+    const form = ref({
+        apiInfo: {
+            apiName: '',
+            apiClass: '',
+            apiDes: '',
+            apiUrl:'',
+            apiRequest:'',
+            apiExplain:''
+        },
+        applicationInfo:{
+            applicationAccessIp:'',
+            applicationUseDay:'',
+            applicationAccessFlow:'',
+            applicationConcurrent:'',
+            applicationUser:'',
+            applicationTime:'',
+            applicationReason:''
+        },
+        CheckInfo:{
+            auditUser:'',
+            auditTime:'',
+            auditReason:'',
+            auditStatus:''
+        },
+    })
+    const CheckInfo = ref()
+    const state = ref(null)
+    const rules = reactive({})
+    function handleSave(stateValue) {
+        state.value = stateValue
+        Promise.all([CheckInfo.value.validate()]).then(valid => {
+            if(valid.findIndex(val => val===false)===-1) {
+                // 校验通过
+                let pForm={}
+                for (const k in form.value.CheckInfo) {
+                    pForm[k] = form.value.CheckInfo[k]
+                }
+                pForm['auditStatus'] = state.value;
+                pForm['applicationId'] = route.params.id2
+                AuditSave(pForm).then(res => {
+                    if(res.code=='200'&&res.data==='保存成功') {
+                        ElMessage({type:'success', message: '修改成功'})
+                        handleClose()
+                    }else{
+                        ElMessage({type:'fail', message: '修改失败'})
+                    }
+                })
+            }
+        })
+    }
+
+    onBeforeMount(()=> {
+        ServiceManageDetail(route.params.id).then(res => {
+            if(res.code===200) {
+                const data = res.data
+                form.value.apiInfo = res.data
+                switch ( data.apiClass) {
+                    case 1:
+                        form.value.apiInfo.apiClassName = '基础底图'
+                        break
+                    case 2:
+                        form.value.apiInfo.apiClassName = '空间查询'
+                        break
+                    case 3:
+                        form.value.apiInfo.apiClassName = '三维分析'
+                        break
+                    case 4:
+                        form.value.apiInfo.apiClassName = '空间可视化'
+                        break
+                    case 5:
+                        form.value.apiInfo.apiClassName = '空间编辑'
+                        break
+                    case 6:
+                        form.value.apiInfo.apiClassName = '其它功能'
+                        break
+                }
+            }
+        })
+        ApplicationDetail(route.params.id2).then(res => {
+            if(res.code===200) {
+                const data = res.data
+                form.value.applicationInfo = res.data
+            }
+        })
+        AuditDetail(route.params.id2).then(res => {
+            if(res.code===200) {
+                const data = res.data
+                if (res.data !== null) {
+                    form.value.CheckInfo = res.data
+                }
+            }
+        })
+    })
+
+
+    function handleClose() {
+        router.push({
+            name: route.name.slice(0,-6)
+        })
+    }
+</script>
+
+<style scoped lang="scss">
+    #warrant-manage-detail {
+    .detail-main {
+        position: relative;
+    }
+    .stamp {
+        position: absolute;
+        width: 136px;
+        height: 136px;
+        top: 60px;
+        right: 60px;
+    }
+    }
+</style>

src/views/warrantManageApi/Index.vue

@@ -0,0 +1,148 @@
+<template>
+    <div id="warrant-manage" class="page-list">
+        <ListHeader title="数据列表" @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="100" 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.applicationStatusName==='审核通过',
+                          'state-orange':scope.row.applicationStatusName==='过期',
+                          'state-red':scope.row.applicationStatusName==='未通过',
+                          'state-blue':scope.row.applicationStatusName==='待审核',
+                          }"
+                          >{{ scope.row.applicationStatusName }}</span>
+                    </template>
+                </el-table-column>
+                <el-table-column label="申请人" min-width="100" prop="applicationUserName" show-overflow-tooltip/>
+                <el-table-column label="申请时间" min-width="100" prop="applicationTime" 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-button link type="primary" @click="toCheck(scope.row)">审核</el-button>
+                        <el-button link type="primary" @click="toRevoke">撤销</el-button>
+                    </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 {WarrantManageList} from "../../service/warrantManageApi";
+
+    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 quickSearch = reactive({name:''})
+    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 handleSearch (val){
+        quickSearch.name=val
+        getData()
+    }
+    function getData(page, size) {
+        WarrantManageList(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.applicationStatus) {
+                    case 1:
+                        data.applicationStatusName = '待审核'
+                        break
+                    case 2:
+                        data.applicationStatusName = '审核通过'
+                        break
+                    case 3:
+                        data.applicationStatusName = '未通过'
+                        break
+                    case 4:
+                        data.applicationStatusName = '过期'
+                        break
+                }
+                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
+                }
+            }
+        })
+    }
+
+
+    const tableData = reactive({value: []})
+
+    const route = useRoute()
+    const router = useRouter()
+
+    function toDetail(row) {
+        router.push({
+            name: 'WarrantManageApiDetail',
+            params: {
+                type: 'Detail',
+                id: row.apiId,
+                id2: row.id
+            }
+        })
+    }
+
+    function toCheck(row) {
+        router.push({
+            name: 'WarrantManageApiDetail',
+            params: {
+                type: 'Check',
+                id: row.apiId,
+                id2: row.id
+            }
+        })
+    }
+
+    function toRevoke() {
+
+    }
+</script>
+
+<style scoped lang="scss">
+    #warrant-manage {
+
+    }
+</style>