添加明细页面
This commit is contained in:
parent
e01788b7b0
commit
82cbe0aecb
|
|
@ -0,0 +1,426 @@
|
||||||
|
<template>
|
||||||
|
<el-dialog
|
||||||
|
:destroy-on-close="true"
|
||||||
|
:close-on-click-modal="false"
|
||||||
|
@close="closeModal"
|
||||||
|
title="申请详情"
|
||||||
|
:visible.sync="detailsVisibleCopy"
|
||||||
|
>
|
||||||
|
<!--非后台-->
|
||||||
|
|
||||||
|
<div class="topss" v-if="detailType == '能力使用'">
|
||||||
|
<div class="title">基本信息</div>
|
||||||
|
<div class="main">
|
||||||
|
<div>
|
||||||
|
<p class="item">
|
||||||
|
<span>申请标题：{{ detailParams.title }}</span>
|
||||||
|
<span>申请单号：{{ detailParams.applyNumber || "--" }}</span>
|
||||||
|
<span v-if="detailParams.applicationSystem">
|
||||||
|
应用系统：{{ detailParams.applicationSystem }}
|
||||||
|
</span>
|
||||||
|
<span v-else></span>
|
||||||
|
</p>
|
||||||
|
<p class="item">
|
||||||
|
<span>申请人信息：{{ detailParams.user }}</span>
|
||||||
|
<span>电话：{{ detailParams.phone }}</span>
|
||||||
|
<span>单位：{{ detailParams.unit }}</span>
|
||||||
|
</p>
|
||||||
|
<p v-if="detailParams.applicationScene.length > 0">
|
||||||
|
<span
|
||||||
|
>应用场景：{{ detailParams.applicationScene.join("；") }}</span
|
||||||
|
>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>应用背景：{{ detailParams.applicationBackground }}</span>
|
||||||
|
</p>
|
||||||
|
<p>
|
||||||
|
<span>期望效果：{{ detailParams.effectWish }}</span>
|
||||||
|
</p>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- 申请能力-->
|
||||||
|
<div class="bottoms" v-if="detailType == '能力使用'">
|
||||||
|
<div class="title">申请能力</div>
|
||||||
|
<div class="main">
|
||||||
|
<div
|
||||||
|
class="item"
|
||||||
|
v-for="(item, index) in this.showArr"
|
||||||
|
:key="item + index"
|
||||||
|
>
|
||||||
|
<div class="deptName">
|
||||||
|
<span class="img"></span>
|
||||||
|
<span>{{ item.name }}</span>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
style="
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
"
|
||||||
|
></div>
|
||||||
|
<div class="ability" v-for="val in item.list" :key="val.id">
|
||||||
|
<div class="box" v-if="item.list.length > 0">
|
||||||
|
<div class="right">
|
||||||
|
<div class="ability-top">
|
||||||
|
<div class="name">
|
||||||
|
<div class="name">
|
||||||
|
<span class="channelName">{{ val.name }}</span>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<div></div>
|
||||||
|
</div>
|
||||||
|
<div class="ability-bottom">
|
||||||
|
<div class="dec">资源描述：{{ val.description }}</div>
|
||||||
|
<div class="result">
|
||||||
|
申请结果：{{
|
||||||
|
item.ended ? item.approveStatus || "审核完成" : "审核中"
|
||||||
|
}}
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<!--审批详情-->
|
||||||
|
<div>
|
||||||
|
<div class="title">审批详情</div>
|
||||||
|
<div v-for="item in this.dataSource.data" :key="item">
|
||||||
|
<a-table :dataSource="item[1]" :columns="columns">
|
||||||
|
<template #bodyCell="{ column, text }">
|
||||||
|
<template v-if="column.dataIndex === 'name'">
|
||||||
|
<a>{{ text }}</a>
|
||||||
|
</template>
|
||||||
|
</template>
|
||||||
|
</a-table>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
<!-- <div else>
|
||||||
|
gai
|
||||||
|
</div> -->
|
||||||
|
</el-dialog>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<script>
|
||||||
|
export default {
|
||||||
|
props: {
|
||||||
|
detailType: {
|
||||||
|
type: String,
|
||||||
|
default: "",
|
||||||
|
},
|
||||||
|
detailsVisible: {
|
||||||
|
type: Boolean,
|
||||||
|
default: false,
|
||||||
|
},
|
||||||
|
detailParamss: {
|
||||||
|
type: Object,
|
||||||
|
default: {},
|
||||||
|
},
|
||||||
|
},
|
||||||
|
watch: {
|
||||||
|
detailsVisible: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.detailsVisibleCopy = newVal;
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
detailParamss: {
|
||||||
|
handler(newVal) {
|
||||||
|
this.detailParams = newVal;
|
||||||
|
this.getDetail(newVal);
|
||||||
|
},
|
||||||
|
immediate: true,
|
||||||
|
},
|
||||||
|
},
|
||||||
|
data() {
|
||||||
|
return {
|
||||||
|
detailsVisibleCopy: false,
|
||||||
|
columns: [
|
||||||
|
{
|
||||||
|
title: "任务名称",
|
||||||
|
dataIndex: "activityName",
|
||||||
|
key: "activityName",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "处理人",
|
||||||
|
dataIndex: "assigneeName",
|
||||||
|
key: "assigneeName",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "任务开始时间",
|
||||||
|
dataIndex: "startTime",
|
||||||
|
key: "startTime",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "任务结束时间",
|
||||||
|
dataIndex: "endTime",
|
||||||
|
key: "endTime",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "审核意见",
|
||||||
|
dataIndex: "comment",
|
||||||
|
key: "comment",
|
||||||
|
},
|
||||||
|
{
|
||||||
|
title: "任务时长/秒",
|
||||||
|
dataIndex: "durationInSeconds",
|
||||||
|
key: "durationInSeconds",
|
||||||
|
},
|
||||||
|
],
|
||||||
|
dataSource: [{ data: [] }],
|
||||||
|
showArr: [],
|
||||||
|
};
|
||||||
|
},
|
||||||
|
computed: {},
|
||||||
|
components: {},
|
||||||
|
methods: {
|
||||||
|
getDetail(newVal) {
|
||||||
|
|
||||||
|
if (newVal.resourceApplication) {
|
||||||
|
this.dataSource.data = [];
|
||||||
|
if (this.detailType == "能力上架") {
|
||||||
|
let arr = [];
|
||||||
|
newVal.resourceApplication.forEach((item) => {
|
||||||
|
arr.push(item);
|
||||||
|
});
|
||||||
|
this.dataSource.data.push([
|
||||||
|
newVal.resourceApplication.processInstanceId,
|
||||||
|
arr,
|
||||||
|
]);
|
||||||
|
} else {
|
||||||
|
for (const key in newVal.resourceApplication) {
|
||||||
|
if (newVal.resourceApplication[key].length > 0) {
|
||||||
|
newVal.resourceApplication[key].map((item) => {
|
||||||
|
this.dataSource.data.push([
|
||||||
|
item.instanceId,
|
||||||
|
item.taskHandleDetailInfo,
|
||||||
|
]);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
this.showArr.value = [];
|
||||||
|
for (const key in newVal.resourceApplication) {
|
||||||
|
if (newVal.resourceApplication[key].length > 0) {
|
||||||
|
let obj = { name: "", instanceId: "", list: [], list2: [] };
|
||||||
|
obj.name = key;
|
||||||
|
newVal.resourceApplication[key].map((item) => {
|
||||||
|
obj.instanceId = item.instanceId;
|
||||||
|
obj.backToFirst = item.backToFirst;
|
||||||
|
obj.ended = item.ended;
|
||||||
|
obj.approveStatus = item.approveStatus;
|
||||||
|
if (item.resources.length > 0) {
|
||||||
|
item.resources.map((val) => {
|
||||||
|
obj.list.push(val);
|
||||||
|
});
|
||||||
|
} else {
|
||||||
|
item.camera.map((val) => {
|
||||||
|
obj.list2.push(val);
|
||||||
|
});
|
||||||
|
}
|
||||||
|
});
|
||||||
|
|
||||||
|
this.showArr.push(obj);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
},
|
||||||
|
// init () {
|
||||||
|
// this.visible = true
|
||||||
|
// this.$nextTick(() => {
|
||||||
|
// this.$refs['dataForm'].resetFields()
|
||||||
|
// })
|
||||||
|
// },
|
||||||
|
closeModal() {
|
||||||
|
this.$emit("closeModal");
|
||||||
|
},
|
||||||
|
},
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
<style scoped>
|
||||||
|
.title {
|
||||||
|
font-size: 22px;
|
||||||
|
color: #000;
|
||||||
|
font-weight: bold;
|
||||||
|
margin-bottom: 20px;
|
||||||
|
padding-left: 10px;
|
||||||
|
border-left: 6px #0058e1 solid;
|
||||||
|
}
|
||||||
|
|
||||||
|
.topss {
|
||||||
|
margin-bottom: 28px;
|
||||||
|
|
||||||
|
.main {
|
||||||
|
background: #eee;
|
||||||
|
padding: 28px 28px 28px;
|
||||||
|
|
||||||
|
p {
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
|
||||||
|
& > span {
|
||||||
|
width: 100%;
|
||||||
|
}
|
||||||
|
|
||||||
|
.enclosure {
|
||||||
|
width: 95%;
|
||||||
|
padding: 28px 28px 28px;
|
||||||
|
background: #ddd;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
margin-top: 28px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.btn:hover {
|
||||||
|
color: #0058e1;
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.item {
|
||||||
|
font-size: 16px;
|
||||||
|
|
||||||
|
span {
|
||||||
|
width: 50px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.bottoms {
|
||||||
|
.main {
|
||||||
|
.item {
|
||||||
|
border-top: 1px #eee solid;
|
||||||
|
|
||||||
|
.deptName {
|
||||||
|
color: #0058e1;
|
||||||
|
font-size: 16px;
|
||||||
|
margin-top: 10px;
|
||||||
|
display: flex;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.img {
|
||||||
|
width: 5px;
|
||||||
|
height: 5px;
|
||||||
|
border-radius: 5px;
|
||||||
|
background: #0058e1;
|
||||||
|
margin-right: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.oddNumbers {
|
||||||
|
margin: 10px 0 0 15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.box {
|
||||||
|
margin-left: 10px;
|
||||||
|
|
||||||
|
.ability {
|
||||||
|
height: 13px;
|
||||||
|
display: flex;
|
||||||
|
border-bottom: 1px #eee solid;
|
||||||
|
padding: 0.1rem 0;
|
||||||
|
|
||||||
|
.btn {
|
||||||
|
cursor: pointer;
|
||||||
|
color: #0087ff;
|
||||||
|
align-self: flex-end;
|
||||||
|
padding: 5px 10px;
|
||||||
|
border: 1px #0087ff solid;
|
||||||
|
border-radius: 2px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.right {
|
||||||
|
flex: 1;
|
||||||
|
margin-left: 15px;
|
||||||
|
|
||||||
|
.ability-top {
|
||||||
|
width: 100%;
|
||||||
|
display: flex;
|
||||||
|
justify-content: space-between;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
.name {
|
||||||
|
width: 6rem;
|
||||||
|
height: 0.2rem;
|
||||||
|
display: flex;
|
||||||
|
|
||||||
|
.channelName {
|
||||||
|
max-width: 5rem;
|
||||||
|
height: 20px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.type {
|
||||||
|
background: #0087ff;
|
||||||
|
color: #fff;
|
||||||
|
line-height: 14px;
|
||||||
|
padding: 2px 10px;
|
||||||
|
border-radius: 10px;
|
||||||
|
margin-left: 10px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.ability-bottom {
|
||||||
|
margin-top: 15pxrem;
|
||||||
|
|
||||||
|
.dec {
|
||||||
|
width: 70px;
|
||||||
|
height: 44px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 2;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.dec2 {
|
||||||
|
width: 70px;
|
||||||
|
height: 22px;
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
|
||||||
|
.result {
|
||||||
|
position: relative;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.DownloadAttachment {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: -150px;
|
||||||
|
}
|
||||||
|
|
||||||
|
.DownloadAttachment2 {
|
||||||
|
position: absolute;
|
||||||
|
right: 10px;
|
||||||
|
top: -110px;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
.clickCursor {
|
||||||
|
cursor: pointer;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
</style>
|
||||||
|
|
||||||
Loading…
Reference in New Issue