319 lines
7.1 KiB
Vue
319 lines
7.1 KiB
Vue
<!--
|
||
* @Author: hisense.guoyue
|
||
* @Date: 2022-06-29 15:59:51
|
||
* @LastEditors: hisense.guoyue
|
||
* @LastEditTime: 2022-09-27 18:08:00
|
||
* @Description: 设备审批详情
|
||
-->
|
||
|
||
<!-- 设备审批详情 -->
|
||
<template>
|
||
<el-card shadow="never" class="aui-card--fill">
|
||
<!-- 申请人详情 -->
|
||
<div>
|
||
<h3>申请人信息</h3>
|
||
<div class="big-BOX">
|
||
<p>
|
||
<span class="text">申请人：<span> {{ detailInfo.name || '--' }}</span></span>
|
||
<span class="text">电话：<span>{{ detailInfo.phone || '--' }}</span></span>
|
||
<span class="text">部门：<span>{{ detailInfo.dept || '--' }}</span></span>
|
||
</p>
|
||
<p>
|
||
<span class="text">
|
||
能力申请标题：<span>
|
||
{{ detailInfo.title || '--' }}</span></span>
|
||
<span class="text" v-if="detailInfo.applicationSystem">应用系统：<span>{{
|
||
detailInfo.applicationSystem || '--'
|
||
}}</span></span>
|
||
<span class="text"></span>
|
||
</p>
|
||
<p>
|
||
<span v-if="detailInfo.applicationArea">
|
||
应用领域：
|
||
<span class="area-item" v-for="(area, i) in JSON.parse(detailInfo.applicationArea)" :key="i">{{ area || '--'
|
||
}}</span>
|
||
</span>
|
||
</p>
|
||
<p>
|
||
<span>
|
||
需求依据：<span>
|
||
{{ detailInfo.demand || '--' }}</span></span>
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 申请能力 -->
|
||
<div class="AbilityApply">
|
||
<h3>申请能力</h3>
|
||
</div>
|
||
<el-card shadow="never" class="aui-card--fill">
|
||
<h4>{{ $t('process.circulation') }}</h4>
|
||
<el-table :data="dataList" border style="width: 100%;">
|
||
<!-- 任务名称 -->
|
||
<el-table-column prop="activityName" :label="$t('process.taskName')" header-align="center" align="center">
|
||
</el-table-column>
|
||
<!-- 处理人 -->
|
||
<el-table-column prop="assigneeName" :label="$t('process.assignee')" header-align="center" align="center">
|
||
</el-table-column>
|
||
<!-- 流程开始时间 -->
|
||
<el-table-column prop="startTime" :label="$t('task.startTime')" header-align="center" align="center">
|
||
</el-table-column>
|
||
<!-- 流程结束时间 -->
|
||
<el-table-column prop="endTime" :label="$t('task.endTime')" header-align="center" align="center">
|
||
</el-table-column>
|
||
<!-- 审核意见 -->
|
||
<el-table-column prop="comment" :label="$t('process.comment')" header-align="center" align="center">
|
||
</el-table-column>
|
||
<!-- 任务时长（秒） -->
|
||
<el-table-column prop="durationInSeconds" :label="$t('task.durationInSeconds')" header-align="center"
|
||
align="center" width="180"></el-table-column>
|
||
</el-table>
|
||
</el-card>
|
||
|
||
</el-card>
|
||
</template>
|
||
|
||
<script>
|
||
import * as moment from 'moment'
|
||
|
||
export default {
|
||
data () {
|
||
return {
|
||
// 详情信息
|
||
detailInfo: {},
|
||
dataList: []
|
||
}
|
||
},
|
||
created () {
|
||
this.detailInfo = this.$route.params.params || {}
|
||
console.log('this.detailInfo------------>', this.detailInfo)
|
||
// 表格数据
|
||
let durationInSeconds = ''
|
||
if (this.detailInfo.auditTime && this.detailInfo.auditTime) {
|
||
durationInSeconds = moment(this.detailInfo.auditTime).diff(moment(this.detailInfo.createDate), 'seconds')
|
||
}
|
||
const _obj = {
|
||
activityName: this.detailInfo.title || '',
|
||
assigneeName: this.detailInfo.auditorName || '',
|
||
startTime: this.detailInfo.createDate || '',
|
||
endTime: this.detailInfo.auditTime,
|
||
comment: this.detailInfo.auditViem,
|
||
durationInSeconds: durationInSeconds
|
||
}
|
||
this.dataList.push(_obj)
|
||
}
|
||
}
|
||
</script>
|
||
<style scoped lang="scss">
|
||
::v-deep .big-BOX {
|
||
background: rgba(244, 245, 248, 0.8);
|
||
padding: 24px;
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
color: #212121;
|
||
}
|
||
|
||
p {
|
||
width: 100%;
|
||
display: flex;
|
||
justify-content: space-between;
|
||
color: #212121;
|
||
font-size: 14px;
|
||
|
||
span {
|
||
display: inline-block;
|
||
margin-left: 8px;
|
||
line-height: 32px;
|
||
|
||
span {
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
|
||
.text {
|
||
width: 500px;
|
||
}
|
||
}
|
||
|
||
.lastP {
|
||
margin-top: 16px;
|
||
width: 100%;
|
||
|
||
span {
|
||
display: flex;
|
||
|
||
span {
|
||
padding: 0 12px;
|
||
height: 32px;
|
||
background: rgba(232, 234, 239, 1);
|
||
border-radius: 2px;
|
||
|
||
button {
|
||
background: unset;
|
||
border: 0;
|
||
color: #0558e1;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .AbilityApply {
|
||
margin-top: 32px;
|
||
|
||
h3 {
|
||
font-size: 16px;
|
||
color: #212121;
|
||
border-bottom: 1px solid #dddee1;
|
||
padding-bottom: 10px;
|
||
}
|
||
|
||
ul {
|
||
padding-left: 0px;
|
||
|
||
li {
|
||
list-style: none;
|
||
padding: 30px 0;
|
||
border-bottom: 1px solid #dddee1;
|
||
display: flex;
|
||
|
||
img {
|
||
width: 100px;
|
||
height: 100px;
|
||
}
|
||
|
||
div {
|
||
margin-left: 16px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
|
||
h2 {
|
||
margin-bottom: 20px;
|
||
font-size: 20px;
|
||
color: #000;
|
||
display: flex;
|
||
|
||
span {
|
||
display: block;
|
||
font-size: 14px;
|
||
color: #ffffff;
|
||
margin-left: 8px;
|
||
background: rgba(0, 184, 230, 0.8);
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 0 5px;
|
||
border-radius: 4px;
|
||
}
|
||
}
|
||
|
||
p {
|
||
margin-bottom: 0;
|
||
}
|
||
}
|
||
}
|
||
|
||
.clearfix:after {
|
||
display: block;
|
||
content: "";
|
||
clear: both;
|
||
}
|
||
|
||
.title {
|
||
color: #0558e1;
|
||
font-size: 18px;
|
||
padding-bottom: 0;
|
||
border-bottom: 0;
|
||
}
|
||
|
||
.title:before {
|
||
content: "";
|
||
width: 6px;
|
||
height: 6px;
|
||
display: inline-block;
|
||
border-radius: 50%;
|
||
background: #0558e1;
|
||
vertical-align: middle;
|
||
margin-right: 10px;
|
||
margin-top: 6px;
|
||
}
|
||
}
|
||
}
|
||
|
||
::v-deep .agreeOr > div {
|
||
display: flex;
|
||
align-items: center;
|
||
|
||
.el-input {
|
||
margin-right: 10px;
|
||
margin-left: 32px;
|
||
}
|
||
}
|
||
|
||
::v-deep .agreeOr > div:last-of-type {
|
||
margin-top: 15px;
|
||
}
|
||
|
||
.blueAll {
|
||
::v-deep .el-radio-button__inner {
|
||
width: 80px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
padding: 0;
|
||
border-radius: 2px;
|
||
background: #ffffff;
|
||
color: #0558e1;
|
||
border: 1px solid #0558e1;
|
||
}
|
||
|
||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||
box-shadow: unset !important;
|
||
background: #0558e1;
|
||
color: #ffffff;
|
||
}
|
||
}
|
||
|
||
.inputBule {
|
||
width: 55px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
padding: 0;
|
||
border-radius: 2px;
|
||
background: #0558e1;
|
||
color: #ffffff;
|
||
border: 1px solid #0558e1;
|
||
}
|
||
|
||
.redAll {
|
||
margin-left: 10px;
|
||
|
||
::v-deep .el-radio-button__inner {
|
||
width: 80px;
|
||
height: 32px;
|
||
line-height: 32px;
|
||
padding: 0;
|
||
border-radius: 2px;
|
||
border: 1px solid #e83a48;
|
||
background: #ffffff;
|
||
color: #e83a48;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
::v-deep .el-radio-button__orig-radio:checked + .el-radio-button__inner {
|
||
box-shadow: unset !important;
|
||
color: #ffffff;
|
||
background: #e83a48;
|
||
}
|
||
}
|
||
|
||
.blueInput {
|
||
width: 55px;
|
||
}
|
||
|
||
.area-item {
|
||
padding-right: 10px;
|
||
}
|
||
</style>
|