Skip to content

A
apaas-ui
Commit 441dd18c authored by 徐一鸣's avatar 徐一鸣
Browse files
Options

申请的服务详情

parent a4c1cb86
Hide whitespace changes
Inline Side-by-side
Showing with 571 additions and 451 deletions
src/pages/workbench/fwgl/apply_service_detail.vue
View file @ 441dd18c
<template>
<div class="detail_contain">
<p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<div class="type_box">
<div class="type_title">
<div v-for="(item,index) in service_arr" :key="index+1000" class="type_select" @click="now_service=index" :style="now_service==index?{borderBottom: '4px solid #f5ab4c'}:{}">{{item}}</div>
</div>
<div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:now_service==1?servicead_arr:apply_arr">
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="zd_table"></table-um>
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="apply_table"></table-um>
<process-card :data="use_approval_arr" slot="approval"></process-card>
</info-list>
</div>
</div>
<div class="detail_contain">
<p class="now_page_title">我的服务 / 申请的服务 / <span>服务详情</span></p>
<div class="info_contain">
<service-header :data="service_header_arr"></service-header>
<div class="type_box">
<div class="type_title">
<div
v-for="(item, index) in service_arr"
:key="index + 1000"
class="type_select"
@click="now_service = index"
:style="
now_service == index ? { borderBottom: '4px solid #f5ab4c' } : {}
"
>
{{ item }}
</div>
</div>
<div class="type_box_select">
<info-list
:list_arr="
now_service == 0
? list_arr
: now_service == 1
? servicead_arr
: apply_arr
"
>
<table-um
v-if="res_table_arr.length"
:headers="res_header_arr"
:datas="res_table_arr"
slot="res_table"
></table-um>
<table-um
v-if="res_table_arr.length"
:headers="res_header_arr"
:datas="res_table_arr"
slot="apply_table"
></table-um>
<process-card
:data="use_approval_arr"
slot="approval"
></process-card>
</info-list>
</div>
</div>
</div>
</div>
</template>
<script>
import serviceHeader from '@/components/service-header'
import infoList from '@/components/infoList'
import tableUm from '@/components/table/table-um'
import processCard from '@/components/process-card'
import serviceHeader from "@/components/service-header";
import infoList from "@/components/infoList";
import tableUm from "@/components/table/table-um";
import processCard from "@/components/process-card";
export default {
props: {
},
components: {
serviceHeader,
infoList,
tableUm,
processCard
},
data() {
return {
use_approval_arr:[],
approval_arr:[
{
title:'一级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
]
},
{
title:'二级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
]
},
{
title:'三级审批',
result:'审批中',
},
],
approval_arr1:[
{
title:'一级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
]
},
{
title:'二级审批',
result:'审批通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'同意'
},
]
},
{
title:'三级审批',
result:'审批未通过',
arr:[
{
title:'审批时间：',
info:'2020-02-28 15:23:45'
},
{
title:'审批单位：',
info:'某某某城管局'
},
{
title:'审批人：',
info:'张先生'
},
{
title:'审批意见：',
info:'不同意，驳回。'
},
]
},
],
header_arr:[
{
prop: "name",
label: "字段编码",
align: "left",
width: 200
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
align: "center",
width: 240
},
],
service_arr:['服务基本信息','接口详细信息','申请审批信息'],
service_header_arr:{
id: "",
isMap: false,
name:'',
first:[
{
name:'服务类型',
text:'',
},
{
name:'审批状态',
text:'',
color:'#515fe7',
},
{
name:'服务到期时间',
text:'',
},
],
second:[
{
name:'服务接口地址',
text:'',
},
],
fixed:false,
props: {},
components: {
serviceHeader,
infoList,
tableUm,
processCard,
},
data() {
return {
use_approval_arr: [],
approval_arr: [
{
title: "一级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
now_service:0,
list_arr:[
{
title:'服务描述：',
info:''
},
{
title:'服务领域：',
info:''
},
{
title:'发布人：',
info:''
},
{
title:'联系方式：',
info:''
},
{
title:'所属组织：',
info:''
},
{
title:'开放程度：',
info:''
},
{
title:'接口编码：',
info:''
},
{
title:'注册发布时间：',
info:''
},
],
servicead_arr:[
{
title:'请求方式：',
info:''
},
{
title:'请求参数：',
info:''
},
{
title:'请求示例：',
info:''
},
{
title:'编码格式：',
info:''
},
{
title:'响应参数：',
info:'',
type:'solt',
solt_name:'zd_table'
},
],
apply_arr:[
{
title:'申请信息',
prop:'title'
},
{
title:'场景描述：',
info:'申请mapvideos服务用于贵州省疫情监控决策指挥系统。'
},
{
title:'调用业务系统：',
info:'决策指挥系统'
},
{
title:'业务系统域名：',
info:'https://apaas.wodcloud.com/'
},
{
title:'申请文件：',
info:'mapvideos申请书.docx',
type:'down'
},
{
title:'申请内容：',
info:'',
type:'solt',
solt_name:'apply_table'
},
{
title:'申请规格：',
info:''
},
{
title:'申请时长：',
info:''
},
{
title:'申请时间：',
info:''
},
{
title:'审批信息',
prop:'title',
type:'solt',
solt_name:'approval'
},
],
request_arr:['','GET','POST','PUT','DELETE'],
res_data:[],
zd_table_arr:[],
};
},
watch: {
},
computed: {
},
created() {
this.get_service_info()
},
mounted() {
},
methods: {
get_service_info(){
this.$http
.get(`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`)
.then((response) => {
if(!response.data.success){
this.$message.error(response.data.errMsg)
return
}
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(this.service_header_arr, "isMap", data.data_service_type1 === 6);
this.$set(this.service_header_arr, "name", data.name);
this.$set(this.service_header_arr['first'][0], 'text', data.data_service_type1_name);
this.$set(this.service_header_arr['first'][1], 'text', data.service_apply_info.approval_status==1?'待审批':data.service_apply_info.approval_status==2?'审批中':data.service_apply_info.approval_status==3?'审批通过':'审批未通过');
this.$set(this.service_header_arr['first'][1], 'color', data.service_apply_info.approval_status==1?'#ef9433':data.service_apply_info.approval_status==2?'#ef9433':data.service_apply_info.approval_status==3?'#515fe7':'#e15260');
this.$set(this.service_header_arr['first'][2], 'text', data.service_apply_info.service_end_time=='0001-01-01T00:00:00Z'?'-':data.service_apply_info.service_end_time.replace('T'," ").split('+')[0]);
this.$set(this.service_header_arr['second'][0], "text", data.req_url);
this.$set(this.service_header_arr, "url", data.cover);
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.data_service_type2_name);
this.$set(this.list_arr[2], "info", data.service_apply_info.apply_user_info.user_name);
this.$set(this.list_arr[3], "info", data.service_apply_info.apply_user_info.phone);
this.$set(this.list_arr[4], "info", data.organization_name);
this.$set(this.list_arr[5], "info", data.openness_name);
this.$set(this.list_arr[6], "info", data.encode_method);
this.$set(this.list_arr[7], "info", data.create_time=='0001-01-01T00:00:00Z'?'-':data.create_time.replace('T'," ").split('+')[0]);
this.$set(this.servicead_arr[0], "info", this.request_arr[data.req_type]);
this.$set(this.servicead_arr[1], "info", data.req_query?data.req_query:'无');
this.$set(this.servicead_arr[2], "info", data.req_fields);
this.$set(this.servicead_arr[3], "info", data.encode_method);
// this.$set(this.apply_arr[0], "info", data.apply_user_info.phone);
this.$set(this.apply_arr[1], "info", data.descript);
this.$set(this.apply_arr[2], "info", data.service_apply_info.business_name);
this.$set(this.apply_arr[3], "info", data.service_apply_info.business_url);
this.$set(this.apply_arr[4], "info", data.service_apply_info.apply_file.split('/')[data.service_apply_info.apply_file.split('/').length - 1]);
this.$set(this.apply_arr[4], "url", data.service_apply_info.apply_file);
this.$set(this.apply_arr[6], "info", '访问次数：'+data.service_apply_info.request_spcs.pv+'/日，'+'访问量：'+data.service_apply_info.request_spcs.count+'/日');
this.$set(this.apply_arr[7], "info", data.service_apply_info.duration + (data.service_apply_info.duration_unit==1?'月':'年'));
this.$set(this.apply_arr[8], "info", data.service_apply_info.apply_time.replace('T'," ").split('+')[0]);
this.zd_table_arr = JSON.parse(data.service_apply_info.res_fields || "[]");
if (this.zd_table_arr.length===0) {
this.$set(this.servicead_arr[4], "info", "无响应参数");
}
console.log(this.zd_table_arr);
if(data.service_apply_info.approval_process){
data.service_apply_info.approval_process.forEach(e => {
this.use_approval_arr.push(
{
title:e.level==1?'一级审批':'二级审批',
result:e.status==-1?'审批未通过':e.status==0?'审批中':'审批通过',
}
)
if(e.status!==0){
this.use_approval_arr[this.use_approval_arr.length - 1]['arr']=[
{
title:'审批时间：',
info:e.approval_time.split('+')[0].replace("T",' ')
},
{
title:'审批单位：',
info:e.user_info.department_name
},
{
title:'审批人：',
info:e.user_info.user_name
},
{
title:'审批意见：',
info:e.comments
},
]
}
});
}else{
this.use_approval_arr.push(
{
title:'一级审批',
result:'待审批',
}
)
}
this.res_data = JSON.parse(data.res_fields)
})
.catch(function(response) {
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
{
title: "二级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
{
title: "三级审批",
result: "审批中",
},
],
approval_arr1: [
{
title: "一级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
{
title: "二级审批",
result: "审批通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "同意",
},
],
},
{
title: "三级审批",
result: "审批未通过",
arr: [
{
title: "审批时间：",
info: "2020-02-28 15:23:45",
},
{
title: "审批单位：",
info: "某某某城管局",
},
{
title: "审批人：",
info: "张先生",
},
{
title: "审批意见：",
info: "不同意，驳回。",
},
],
},
],
service_arr: ["服务基本信息", "接口详细信息", "申请审批信息"],
service_header_arr: {
id: "",
isMap: false,
name: "",
first: [
{
name: "服务类型",
text: "",
},
{
name: "审批状态",
text: "",
color: "#515fe7",
},
{
name: "服务到期时间",
text: "",
},
],
second: [
{
name: "服务接口地址",
text: "",
},
],
fixed: false,
},
now_service: 0,
list_arr: [
{
title: "服务描述：",
info: "",
},
{
title: "服务领域：",
info: "",
},
{
title: "发布人：",
info: "",
},
{
title: "联系方式：",
info: "",
},
{
title: "所属组织：",
info: "",
},
{
title: "开放程度：",
info: "",
},
{
title: "接口编码：",
info: "",
},
{
title: "注册发布时间：",
info: "",
},
],
servicead_arr: [
{
title: "请求方式：",
info: "",
},
{
title: "请求参数：",
info: "",
},
{
title: "请求示例：",
info: "",
},
{
title: "编码格式：",
info: "",
},
{
title: "响应参数：",
info: "",
type: "solt",
solt_name: "res_table",
},
],
apply_arr: [
{
title: "申请信息",
prop: "title",
},
{
title: "场景描述：",
info: "申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
},
{
title: "调用业务系统：",
info: "决策指挥系统",
},
{
title: "业务系统域名：",
info: "https://apaas.wodcloud.com/",
},
{
title: "申请文件：",
info: "mapvideos申请书.docx",
type: "down",
},
{
title: "申请内容：",
info: "",
type: "solt",
solt_name: "apply_table",
},
{
title: "申请规格：",
info: "",
},
{
title: "申请时长：",
info: "",
},
{
title: "申请时间：",
info: "",
},
{
title: "审批信息",
prop: "title",
type: "solt",
solt_name: "approval",
},
],
request_arr: ["", "GET", "POST", "PUT", "DELETE"],
res_data: [],
res_header_arr: [
{
prop: "name",
label: "字段编码",
align: "left",
width: 200,
},
{
prop: "label",
label: "字段名称",
align: "center",
width: 200,
},
{
prop: "show_type",
label: "字段类型",
align: "center",
width: 240,
},
{
prop: "descript",
label: "字段说明",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
align: "center",
width: 240,
},
], // 响应参数-header
res_table_arr: [], // 响应参数
};
},
watch: {},
computed: {},
created() {
this.get_service_info();
},
mounted() {},
methods: {
get_service_info() {
this.$http
.get(
`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`
)
.then((response) => {
if (!response.data.success) {
this.$message.error(response.data.errMsg);
return;
}
let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id
this.$set(
this.service_header_arr,
"isMap",
data.data_service_type1 === 6
);
this.$set(this.service_header_arr, "name", data.name);
this.$set(
this.service_header_arr["first"][0],
"text",
data.data_service_type1_name
);
this.$set(
this.service_header_arr["first"][1],
"text",
data.service_apply_info.approval_status == 1
? "待审批"
: data.service_apply_info.approval_status == 2
? "审批中"
: data.service_apply_info.approval_status == 3
? "审批通过"
: "审批未通过"
);
this.$set(
this.service_header_arr["first"][1],
"color",
data.service_apply_info.approval_status == 1
? "#ef9433"
: data.service_apply_info.approval_status == 2
? "#ef9433"
: data.service_apply_info.approval_status == 3
? "#515fe7"
: "#e15260"
);
this.$set(
this.service_header_arr["first"][2],
"text",
data.service_apply_info.service_end_time == "0001-01-01T00:00:00Z"
? "-"
: data.service_apply_info.service_end_time
.replace("T", " ")
.split("+")[0]
);
this.$set(this.service_header_arr["second"][0], "text", data.req_url);
this.$set(this.service_header_arr, "url", data.cover);
this.$set(this.list_arr[0], "info", data.descript);
this.$set(this.list_arr[1], "info", data.data_service_type2_name);
this.$set(
this.list_arr[2],
"info",
data.service_apply_info.apply_user_info.user_name
);
this.$set(
this.list_arr[3],
"info",
data.service_apply_info.apply_user_info.phone
);
this.$set(this.list_arr[4], "info", data.organization_name);
this.$set(this.list_arr[5], "info", data.openness_name);
this.$set(this.list_arr[6], "info", data.encode_method);
this.$set(
this.list_arr[7],
"info",
data.create_time == "0001-01-01T00:00:00Z"
? "-"
: data.create_time.replace("T", " ").split("+")[0]
);
this.$set(
this.servicead_arr[0],
"info",
this.request_arr[data.req_type]
);
this.$set(
this.servicead_arr[1],
"info",
data.req_query ? data.req_query : "无"
);
this.$set(this.servicead_arr[2], "info", data.req_fields);
this.$set(this.servicead_arr[3], "info", data.encode_method);
// this.$set(this.apply_arr[0], "info", data.apply_user_info.phone);
this.$set(this.apply_arr[1], "info", data.descript);
this.$set(
this.apply_arr[2],
"info",
data.service_apply_info.business_name
);
this.$set(
this.apply_arr[3],
"info",
data.service_apply_info.business_url
);
this.$set(
this.apply_arr[4],
"info",
data.service_apply_info.apply_file.split("/")[
data.service_apply_info.apply_file.split("/").length - 1
]
);
this.$set(
this.apply_arr[4],
"url",
data.service_apply_info.apply_file
);
this.$set(
this.apply_arr[6],
"info",
"访问次数：" +
data.service_apply_info.request_spcs.pv +
"/日，" +
"访问量：" +
data.service_apply_info.request_spcs.count +
"/日"
);
this.$set(
this.apply_arr[7],
"info",
data.service_apply_info.duration +
(data.service_apply_info.duration_unit == 1 ? "月" : "年")
);
this.$set(
this.apply_arr[8],
"info",
data.service_apply_info.apply_time.replace("T", " ").split("+")[0]
);
this.res_table_arr = JSON.parse(
data.service_apply_info.res_fields || "[]"
);
if (this.res_table_arr.length === 0) {
this.$set(this.servicead_arr[4], "info", "无响应参数");
}
console.log(this.res_table_arr);
if (data.service_apply_info.approval_process) {
data.service_apply_info.approval_process.forEach((e) => {
this.use_approval_arr.push({
title: e.level == 1 ? "一级审批" : "二级审批",
result:
e.status == -1
? "审批未通过"
: e.status == 0
? "审批中"
: "审批通过",
});
if (e.status !== 0) {
this.use_approval_arr[this.use_approval_arr.length - 1][
"arr"
] = [
{
title: "审批时间：",
info: e.approval_time.split("+")[0].replace("T", " "),
},
{
title: "审批单位：",
info: e.user_info.department_name,
},
{
title: "审批人：",
info: e.user_info.user_name,
},
{
title: "审批意见：",
info: e.comments,
},
];
}
});
},
} else {
this.use_approval_arr.push({
title: "一级审批",
result: "待审批",
});
}
this.res_data = JSON.parse(data.res_fields);
})
.catch(function(response) {});
},
},
};
</script>
<style scoped>
.detail_contain{
width: 100%;
padding: 0 20px;
margin-bottom: 20px;
.detail_contain {
width: 100%;
padding: 0 20px;
margin-bottom: 20px;
}
.info_contain{
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px
#f4f7fc;
border-radius: 12px;
.info_contain {
padding: 25px 20px;
background-color: #fff;
width: 100%;
box-shadow: 0px 3px 6px 0px #f4f7fc;
border-radius: 12px;
}
.now_page_title{
margin: 15px 0;
color: #898d9e;
.now_page_title {
margin: 15px 0;
color: #898d9e;
}
.now_page_title span{
color: #242c43;
.now_page_title span {
color: #242c43;
}
.type_box{
width: 100%;
.type_box {
width: 100%;
}
.type_title{
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
.type_title {
width: 100%;
height: 65px;
line-height: 65px;
border-bottom: 2px solid #f4f7fc;
}
.type_select{
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
.type_select {
float: left;
width: auto;
margin-right: 40px;
height: 65px;
cursor: pointer;
}
.type_box_select{
padding: 30px 10px 10px 10px;
width: 100%;
.type_box_select {
padding: 30px 10px 10px 10px;
width: 100%;
}
</style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment