Skip to content

A
apaas-ui
Commit bed74864 authored by 张俊's avatar 张俊
Browse files
Options

Merge branch 'dev' of https://cloud.wodcloud.com/git/apaas/apaas-v3-ui into dev

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