Skip to content

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

申请的服务详情

parent a4c1cb86
Show whitespace changes
Inline Side-by-side
Showing with 571 additions and 451 deletions
src/pages/workbench/fwgl/apply_service_detail.vue
View file @ 441dd18c
...@@ -5,13 +5,44 @@ ...@@ -5,13 +5,44 @@
<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
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>
<div class="type_box_select"> <div class="type_box_select">
<info-list :list_arr="now_service==0?list_arr:now_service==1?servicead_arr:apply_arr"> <info-list
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="zd_table"></table-um> :list_arr="
<table-um v-if="zd_table_arr.length" :headers="header_arr" :datas="zd_table_arr" slot="apply_table"></table-um> now_service == 0
<process-card :data="use_approval_arr" slot="approval"></process-card> ? 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> </info-list>
</div> </div>
</div> </div>
...@@ -20,455 +51,544 @@ ...@@ -20,455 +51,544 @@
</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: { components: {
serviceHeader, serviceHeader,
infoList, infoList,
tableUm, tableUm,
processCard processCard,
}, },
data() { data() {
return { return {
use_approval_arr:[], use_approval_arr: [],
approval_arr:[ approval_arr: [
{ {
title:'一级审批', title: "一级审批",
result:'审批通过', result: "审批通过",
arr:[ arr: [
{ {
title:'审批时间：', title: "审批时间：",
info:'2020-02-28 15:23:45' info: "2020-02-28 15:23:45",
}, },
{ {
title:'审批单位：', title: "审批单位：",
info:'某某某城管局' info: "某某某城管局",
}, },
{ {
title:'审批人：', title: "审批人：",
info:'张先生' info: "张先生",
}, },
{ {
title:'审批意见：', title: "审批意见：",
info:'同意' info: "同意",
}, },
] ],
}, },
{ {
title:'二级审批', title: "二级审批",
result:'审批通过', result: "审批通过",
arr:[ arr: [
{ {
title:'审批时间：', title: "审批时间：",
info:'2020-02-28 15:23:45' info: "2020-02-28 15:23:45",
}, },
{ {
title:'审批单位：', title: "审批单位：",
info:'某某某城管局' info: "某某某城管局",
}, },
{ {
title:'审批人：', title: "审批人：",
info:'张先生' info: "张先生",
}, },
{ {
title:'审批意见：', title: "审批意见：",
info:'同意' info: "同意",
}, },
] ],
}, },
{ {
title:'三级审批', title: "三级审批",
result:'审批中', result: "审批中",
}, },
], ],
approval_arr1:[ approval_arr1: [
{ {
title:'一级审批', title: "一级审批",
result:'审批通过', result: "审批通过",
arr:[ arr: [
{ {
title:'审批时间：', title: "审批时间：",
info:'2020-02-28 15:23:45' info: "2020-02-28 15:23:45",
}, },
{ {
title:'审批单位：', title: "审批单位：",
info:'某某某城管局' info: "某某某城管局",
}, },
{ {
title:'审批人：', title: "审批人：",
info:'张先生' info: "张先生",
}, },
{ {
title:'审批意见：', title: "审批意见：",
info:'同意' info: "同意",
}, },
] ],
}, },
{ {
title:'二级审批', title: "二级审批",
result:'审批通过', result: "审批通过",
arr:[ arr: [
{ {
title:'审批时间：', title: "审批时间：",
info:'2020-02-28 15:23:45' info: "2020-02-28 15:23:45",
}, },
{ {
title:'审批单位：', title: "审批单位：",
info:'某某某城管局' info: "某某某城管局",
}, },
{ {
title:'审批人：', title: "审批人：",
info:'张先生' info: "张先生",
}, },
{ {
title:'审批意见：', title: "审批意见：",
info:'同意' info: "同意",
}, },
] ],
}, },
{ {
title:'三级审批', title: "三级审批",
result:'审批未通过', result: "审批未通过",
arr:[ arr: [
{ {
title:'审批时间：', title: "审批时间：",
info:'2020-02-28 15:23:45' info: "2020-02-28 15:23:45",
}, },
{ {
title:'审批单位：', title: "审批单位：",
info:'某某某城管局' info: "某某某城管局",
}, },
{ {
title:'审批人：', title: "审批人：",
info:'张先生' info: "张先生",
}, },
{ {
title:'审批意见：', title: "审批意见：",
info:'不同意，驳回。' info: "不同意，驳回。",
}, },
] ],
}, },
], ],
header_arr:[ service_arr: ["服务基本信息", "接口详细信息", "申请审批信息"],
service_header_arr: {
id: "",
isMap: false,
name: "",
first: [
{ {
prop: "name", name: "服务类型",
label: "字段编码", text: "",
align: "left",
width: 200
}, },
{ {
prop: "label", name: "审批状态",
label: "字段名称", text: "",
align: "center", color: "#515fe7",
width: 200
}, },
{ {
prop: "show_type", name: "服务到期时间",
label: "字段类型", text: "",
align: "center",
width: 240
}, },
],
second: [
{ {
prop: "descript", name: "服务接口地址",
label: "字段说明", text: "",
align: "left",
},
{
prop: "example",
label: "字段示例数值",
align: "center",
width: 240
}, },
], ],
service_arr:['服务基本信息','接口详细信息','申请审批信息'], fixed: false,
service_header_arr:{ },
id: "", now_service: 0,
isMap: false, list_arr: [
name:'',
first:[
{ {
name:'服务类型', title: "服务描述：",
text:'', info: "",
}, },
{ {
name:'审批状态', title: "服务领域：",
text:'', info: "",
color:'#515fe7',
}, },
{ {
name:'服务到期时间', title: "发布人：",
text:'', info: "",
}, },
],
second:[
{ {
name:'服务接口地址', title: "联系方式：",
text:'', info: "",
}, },
], {
fixed:false, title: "所属组织：",
info: "",
}, },
now_service:0,
list_arr:[
{ {
title:'服务描述：', title: "开放程度：",
info:'' info: "",
}, },
{ {
title:'服务领域：', title: "接口编码：",
info:'' info: "",
}, },
{ {
title:'发布人：', title: "注册发布时间：",
info:'' info: "",
}, },
],
servicead_arr: [
{ {
title:'联系方式：', title: "请求方式：",
info:'' info: "",
}, },
{ {
title:'所属组织：', title: "请求参数：",
info:'' info: "",
}, },
{ {
title:'开放程度：', title: "请求示例：",
info:'' info: "",
}, },
{ {
title:'接口编码：', title: "编码格式：",
info:'' info: "",
}, },
{ {
title:'注册发布时间：', title: "响应参数：",
info:'' info: "",
type: "solt",
solt_name: "res_table",
}, },
], ],
servicead_arr:[ apply_arr: [
{ {
title:'请求方式：', title: "申请信息",
info:'' prop: "title",
}, },
{ {
title:'请求参数：', title: "场景描述：",
info:'' info: "申请mapvideos服务用于贵州省疫情监控决策指挥系统。",
}, },
{ {
title:'请求示例：', title: "调用业务系统：",
info:'' info: "决策指挥系统",
}, },
{ {
title:'编码格式：', title: "业务系统域名：",
info:'' info: "https://apaas.wodcloud.com/",
}, },
{ {
title:'响应参数：', title: "申请文件：",
info:'', info: "mapvideos申请书.docx",
type:'solt', type: "down",
solt_name:'zd_table'
}, },
],
apply_arr:[
{ {
title:'申请信息', title: "申请内容：",
prop:'title' info: "",
type: "solt",
solt_name: "apply_table",
}, },
{ {
title:'场景描述：', title: "申请规格：",
info:'申请mapvideos服务用于贵州省疫情监控决策指挥系统。' info: "",
}, },
{ {
title:'调用业务系统：', title: "申请时长：",
info:'决策指挥系统' info: "",
}, },
{ {
title:'业务系统域名：', title: "申请时间：",
info:'https://apaas.wodcloud.com/' info: "",
}, },
{ {
title:'申请文件：', title: "审批信息",
info:'mapvideos申请书.docx', prop: "title",
type:'down' type: "solt",
solt_name: "approval",
}, },
],
request_arr: ["", "GET", "POST", "PUT", "DELETE"],
res_data: [],
res_header_arr: [
{ {
title:'申请内容：', prop: "name",
info:'', label: "字段编码",
type:'solt', align: "left",
solt_name:'apply_table' width: 200,
}, },
{ {
title:'申请规格：', prop: "label",
info:'' label: "字段名称",
align: "center",
width: 200,
}, },
{ {
title:'申请时长：', prop: "show_type",
info:'' label: "字段类型",
align: "center",
width: 240,
}, },
{ {
title:'申请时间：', prop: "descript",
info:'' label: "字段说明",
align: "left",
}, },
{ {
title:'审批信息', prop: "example",
prop:'title', label: "字段示例数值",
type:'solt', align: "center",
solt_name:'approval' width: 240,
}, },
], ], // 响应参数-header
request_arr:['','GET','POST','PUT','DELETE'], res_table_arr: [], // 响应参数
res_data:[],
zd_table_arr:[],
}; };
}, },
watch: { watch: {},
computed: {},
},
computed: {
},
created() { created() {
this.get_service_info() this.get_service_info();
},
mounted() {
}, },
mounted() {},
methods: { methods: {
get_service_info(){ get_service_info() {
this.$http this.$http
.get(`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`) .get(
`/apaas/service/v3/service/apply/service?apply_id=${this.$route.params.id}`
)
.then((response) => { .then((response) => {
if(!response.data.success){ if (!response.data.success) {
this.$message.error(response.data.errMsg) this.$message.error(response.data.errMsg);
return return;
} }
let data = response.data.data; let data = response.data.data;
this.$set(this.service_header_arr, "portal_id", data.portal_id); // 时空服务id 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,
"isMap",
data.data_service_type1 === 6
);
this.$set(this.service_header_arr, "name", data.name); 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.$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.service_header_arr["first"][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'); "text",
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]); data.data_service_type1_name
this.$set(this.service_header_arr['second'][0], "text", data.req_url); );
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.service_header_arr, "url", data.cover);
this.$set(this.list_arr[0], "info", data.descript); 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[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.$set(this.list_arr[3], "info", data.service_apply_info.apply_user_info.phone); 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[4], "info", data.organization_name);
this.$set(this.list_arr[5], "info", data.openness_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[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.$set(this.servicead_arr[0], "info", this.request_arr[data.req_type]); this.list_arr[7],
this.$set(this.servicead_arr[1], "info", data.req_query?data.req_query:'无'); "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[2], "info", data.req_fields);
this.$set(this.servicead_arr[3], "info", data.encode_method); 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[0], "info", data.apply_user_info.phone);
this.$set(this.apply_arr[1], "info", data.descript); 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.$set(this.apply_arr[3], "info", data.service_apply_info.business_url); this.apply_arr[2],
this.$set(this.apply_arr[4], "info", data.service_apply_info.apply_file.split('/')[data.service_apply_info.apply_file.split('/').length - 1]); "info",
this.$set(this.apply_arr[4], "url", data.service_apply_info.apply_file); data.service_apply_info.business_name
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.$set(this.apply_arr[8], "info", data.service_apply_info.apply_time.replace('T'," ").split('+')[0]); this.apply_arr[3],
this.zd_table_arr = JSON.parse(data.service_apply_info.res_fields || "[]"); "info",
if (this.zd_table_arr.length===0) { 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", "无响应参数"); this.$set(this.servicead_arr[4], "info", "无响应参数");
} }
console.log(this.zd_table_arr); console.log(this.res_table_arr);
if(data.service_apply_info.approval_process){ if (data.service_apply_info.approval_process) {
data.service_apply_info.approval_process.forEach(e => { data.service_apply_info.approval_process.forEach((e) => {
this.use_approval_arr.push( this.use_approval_arr.push({
{ title: e.level == 1 ? "一级审批" : "二级审批",
title:e.level==1?'一级审批':'二级审批', result:
result:e.status==-1?'审批未通过':e.status==0?'审批中':'审批通过', e.status == -1
} ? "审批未通过"
) : e.status == 0
? "审批中"
: "审批通过",
});
if(e.status!==0){ if (e.status !== 0) {
this.use_approval_arr[this.use_approval_arr.length - 1]['arr']=[ this.use_approval_arr[this.use_approval_arr.length - 1][
"arr"
] = [
{ {
title:'审批时间：', title: "审批时间：",
info:e.approval_time.split('+')[0].replace("T",' ') info: e.approval_time.split("+")[0].replace("T", " "),
}, },
{ {
title:'审批单位：', title: "审批单位：",
info:e.user_info.department_name info: e.user_info.department_name,
}, },
{ {
title:'审批人：', title: "审批人：",
info:e.user_info.user_name info: e.user_info.user_name,
}, },
{ {
title:'审批意见：', title: "审批意见：",
info:e.comments info: e.comments,
}, },
] ];
} }
}); });
}else{ } else {
this.use_approval_arr.push( this.use_approval_arr.push({
{ title: "一级审批",
title:'一级审批', result: "待审批",
result:'待审批', });
}
)
} }
this.res_data = JSON.parse(data.res_fields) this.res_data = JSON.parse(data.res_fields);
}) })
.catch(function(response) { .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%;
} }
......
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