添加明细页面
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