1386 lines
36 KiB
Vue
1386 lines
36 KiB
Vue
<template>
|
||
<div class="details" v-if="pageShow">
|
||
<div :class="list.approvalStatus == 1 ? 'detail_content' : 'detail_content1'">
|
||
<!-- 顶部文件预览和查看 -->
|
||
<div class="top" v-if="list.approvalStatus == 1">
|
||
<p>审批通过:</p>
|
||
<div class="save">
|
||
<div style="display: inline">[{{ this.list.tableInfo.tableName }}]已签署完成,</div>
|
||
<AiImage preview :file="list.pdfFile" style="display: inline-block; margin-left: 4px"><span class="clicksave">点击查看和保存</span> </AiImage>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="form">
|
||
<!-- 审批表单名称 -->
|
||
<text class="text">{{ list.processDefName }}</text>
|
||
|
||
<div class="people">
|
||
<!-- 左 -->
|
||
<div class="people_msg">
|
||
<!-- 圆形头像 -->
|
||
<div class="avatar">
|
||
<span v-if="list.createUserAvatar"><img :src="list.createUserAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
|
||
<span v-else> {{ formatName(list.createUserName) }}</span>
|
||
</div>
|
||
|
||
<text class="name">
|
||
<!-- 姓名 -->
|
||
<p class="name_con">{{ list.createUserName }}</p>
|
||
<!-- 日期 -->
|
||
<p class="name_createtime">{{ list.createTime }}</p>
|
||
</text>
|
||
</div>
|
||
|
||
<!-- 右 -->
|
||
<!-- 审批状态 -->
|
||
<!-- 审批中 -->
|
||
<div class="people_status_ing" v-if="list.approvalStatus == 0">
|
||
{{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
|
||
</div>
|
||
|
||
<!-- 已通过 -->
|
||
<div class="people_status_agree" v-if="list.approvalStatus == 1">
|
||
<img src="./components/people_status_agree.png" alt="" />
|
||
</div>
|
||
|
||
<!-- 被驳回 -->
|
||
<div class="people_status_reject" v-if="list.approvalStatus == 2">
|
||
{{ $dict.getLabel('listApprovalStatusHb', list.approvalStatus) }}
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 表头内容 -->
|
||
<div class="content">
|
||
<div class="item">
|
||
<span class="item_info">所属类型：</span>
|
||
<span class="zhuf"> {{ list.classificationName }}</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item_info">所属部门：</span>
|
||
<span class="liangzhu">
|
||
{{ $dict.getLabel('hbDepartment', list.department) }}
|
||
</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<span class="item_info">审批编号：</span>
|
||
<span class="liangzhu">{{ list.serialNumber }}</span>
|
||
</div>
|
||
|
||
<div class="item">
|
||
<div class="item_info">
|
||
<span class="annexs">附件资料：</span>
|
||
<div class="img_text" v-for="(item, indexs) in list.annexs" :key="indexs">
|
||
<AiImage :src="item.annexFile.url" preview />
|
||
<span class="text">{{ item.annexName }}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- tabs栏 -->
|
||
<u-tabs class="tabs" :list="list_tabs" height="96" active-color="#1365dd" inactive-color="#999" bar-width="374" font-size="30" :is-scroll="false" :current="current" @change="change"></u-tabs>
|
||
|
||
<!-- 表单申请的折叠窗 -->
|
||
<div style="background-color: #fff" v-if="current == 0">
|
||
<div class="collapse">
|
||
<u-collapse event-type="close" :arrow="true" :accordion="true">
|
||
<u-collapse-item v-if="item.length > 0" v-for="(item, index) in inforlist" :title="item[0].groupName" :open="true" :key="index">
|
||
<div v-for="(items, indexs) in item" :key="indexs">
|
||
<div class="item_msg">
|
||
<!-- 左 -->
|
||
<span class="msg_lef">{{ items.fieldName }}</span>
|
||
<!-- 右 -->
|
||
<!-- 字典值 items.dictionaryCode -->
|
||
<span class="msg_lright" v-if="items.fieldDataType != 5">{{ $dict.getLabel(items.dictionaryCode, items.fieldValue) }}</span>
|
||
<span class="msg_lright" v-else>
|
||
<span v-for="(itemL, indexL) in items.fieldValue" :key="indexL"
|
||
>{{ $dict.getLabel(items.dictionaryCode, itemL) }}
|
||
<!-- <span v-if="indexL < items.fieldValue.length - 1">,</span> -->
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</u-collapse-item>
|
||
</u-collapse>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- 流程信息 -->
|
||
<div v-if="current == 1" class="workflow">
|
||
<div class="step-list">
|
||
<div class="step-item" v-for="(item, index) in stepList" :key="index">
|
||
<div class="item-left">
|
||
<div class="item-left-ava-icon">
|
||
<div class="avatar" v-if="item.userName">
|
||
<span v-if="item.stepAvatar"><img :src="item.stepAvatar" alt="" style="width: 100%; height: 100%; border-radius: 50%" /></span>
|
||
<span v-else> {{ formatName(item.userName) }}</span>
|
||
</div>
|
||
|
||
<div class="avatar" v-else-if="item.title == '抄送'">
|
||
<img src="./components/Profile_Picture.png" alt="" />
|
||
</div>
|
||
|
||
<div class="avatar" v-else>
|
||
<div v-for="(item3, indexs) in item.candidates" :key="indexs">{{ formatName(item3.name) }}</div>
|
||
</div>
|
||
|
||
<div class="icon-yes" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
|
||
<img src="./components/agree.png" alt="" />
|
||
</div>
|
||
|
||
<div class="" v-else-if="item.stepType == 2"></div>
|
||
|
||
<div class="icon-no" v-else>
|
||
<img src="./components/clearn.png" />
|
||
</div>
|
||
</div>
|
||
|
||
<div :class="item.stepType == 1 || item.stepType == 0 || item.stepType == 3 ? 'solid' : 'dashed'"></div>
|
||
</div>
|
||
|
||
<div class="item-right">
|
||
<div class="time-info">
|
||
<div>{{ item.title }}</div>
|
||
<span>{{ item.approvalTime }}</span>
|
||
</div>
|
||
<div class="item-right-flex">
|
||
<span class="title2">{{ item.title2 }}<span class="color-2EA222" v-if="item.stepIndex == 1">(发起)</span></span>
|
||
|
||
<span class="title2Desc-ing" v-if="item.stepType == 9">{{ item.title2Desc }}</span>
|
||
|
||
<span class="title2Desc-false" v-else-if="item.stepType == 2">{{ item.title2Desc }}</span>
|
||
|
||
<span class="title2Desc" v-else>{{ item.title2Desc }}</span>
|
||
|
||
<div class="user-list">
|
||
<div class="item-right-flex-left-name" v-for="(items, i) in item.candidates" :key="i">
|
||
<span class="avatar" v-if="items.name">{{ formatName(items.name) }}</span>
|
||
<span class="avatar-name" v-if="items.name">{{ items.name }}</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div v-for="(item2, inde2) in item.candidateFieldInfos" :key="inde2" v-if="item.candidateFieldInfos">
|
||
<span>{{ item2.fieldName }} : </span>
|
||
<span>{{ item2.fieldValue }}</span>
|
||
</div>
|
||
|
||
<!-- <div v-for="(item4, indexsss) in stepList" :key="indexsss">
|
||
<span>{{ item4.fieldName }} : </span>
|
||
<span>{{ item4.fieldValue }}</span>
|
||
</div> -->
|
||
|
||
<span v-if="item.stepType == 2">审批意见:{{ item.opinion }}</span>
|
||
|
||
<div class="examine" v-if="item.stepType == 2">
|
||
<div class="examine_docx1">
|
||
<div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
|
||
<AiImage preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 65px; height: 75px; float: left; margin-left: 6px; margin-bottom: 4px; overflow: hidden" />
|
||
</div>
|
||
|
||
<div v-if="item.annexFiles && item.annexFiles.length > 0">
|
||
<div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
|
||
<AiImage :file="annex" preview>
|
||
<u-row justify="space-between">
|
||
<span class="docx-name">{{ annex.name }}</span>
|
||
<span>{{ annex.fileSizeStr }}</span>
|
||
</u-row>
|
||
</AiImage>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="examine" v-if="item.stepType == 1 || item.stepType == 0 || item.stepType == 3">
|
||
<div class="examine_docx1">
|
||
<div class="examine_img" v-if="item.pictureFiles && item.pictureFiles.length > 0" style="">
|
||
<AiImage preview :src="pic.url" v-for="pic in item.pictureFiles" :key="pic.id" style="width: 69px; height: 75px; float: left; margin-left: 4px; margin-bottom: 4px; overflow: hidden" />
|
||
</div>
|
||
|
||
<div v-if="item.annexFiles && item.annexFiles.length > 0">
|
||
<div v-for="annex in item.annexFiles" :key="annex.id" class="docx">
|
||
<AiImage :file="annex" preview>
|
||
<u-row justify="space-between">
|
||
<span class="docx-name">{{ annex.name }}</span>
|
||
<span>{{ annex.fileSizeStr }}</span>
|
||
</u-row>
|
||
</AiImage>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="reject_agree" v-if="canApproval && list.approvalStatus == 0">
|
||
<div class="reject" @click="agree(0)">拒绝</div>
|
||
<div class="agree" @click="agree(1)">同意</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'Detail',
|
||
components: {},
|
||
computed: {
|
||
canApproval() {
|
||
return this.listType == 0
|
||
},
|
||
},
|
||
onLoad(options) {
|
||
this.objid = options.id
|
||
this.listType = options.listType
|
||
this.getDetail()
|
||
},
|
||
onShow() {
|
||
document.title = '审批详情'
|
||
},
|
||
data() {
|
||
return {
|
||
objid: '',
|
||
list: [],
|
||
list_tabs: [
|
||
{
|
||
name: '申请表单',
|
||
},
|
||
{
|
||
name: '流程信息',
|
||
},
|
||
],
|
||
current: 0,
|
||
inforlist: [],
|
||
stepList: [],
|
||
dictList: ['hbDepartment'],
|
||
pageShow: false,
|
||
listType: 0,
|
||
eventChannel: null,
|
||
}
|
||
},
|
||
// 方法
|
||
methods: {
|
||
formatName(name) {
|
||
if (name == undefined) {
|
||
return
|
||
}
|
||
return name.substr(name.length - 2, name.length > 2 ? name.length - 1 : name.length)
|
||
},
|
||
getDetail() {
|
||
this.$http.post(`/app/approv-alapply-info/info-id-table?id=${this.objid}`).then((res) => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
this.list = res.data
|
||
|
||
// if (res.data.createUserAvatar) {
|
||
// console.log(res.data.createUserAvatar)
|
||
// }
|
||
|
||
this.inforlist = [[], [], [], [], [], [], [], [], [], []]
|
||
res.data.tableInfo.tableFieldInfos.map((item) => {
|
||
if (item.groupIndex) {
|
||
this.inforlist[item.groupIndex - 1].push(item)
|
||
}
|
||
|
||
if (item.dictionaryCode) {
|
||
this.dictList.push(item.dictionaryCode)
|
||
}
|
||
if (item.fieldDataType == 5) {
|
||
// item.fieldValue = item.fieldValue.split(',')
|
||
}
|
||
})
|
||
|
||
this.$dict.load(this.dictList).then(() => {
|
||
this.pageShow = true
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|
||
this.$http.post(`/app/approv-alapply-info/processinfo-id2?id=${this.objid}`).then((res) => {
|
||
if (res.code == 0) {
|
||
if (res.data) {
|
||
this.stepList = res.data
|
||
// this.getDetail()
|
||
// console.log(this.stepList)
|
||
// res.data.map((item) => {
|
||
// if (item.candidateFieldInfos) {
|
||
// item.candidateFieldInfos.map((items) => {
|
||
// console.log(items.fieldName)
|
||
// console.log(items.fieldValue)
|
||
// })
|
||
// }
|
||
// })
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
change(i) {
|
||
this.current = i
|
||
},
|
||
|
||
agree(type) {
|
||
this.$http
|
||
.post(`/app/approv-alapply-info/approval-popup?type=${type}&id=${this.objid}`)
|
||
.then((res) => {
|
||
if (res.code == 0) {
|
||
uni.navigateTo({
|
||
url: `./Opinion?id=${this.objid}&type=${type}`,
|
||
})
|
||
}
|
||
})
|
||
.catch((e) => {
|
||
uni.showToast({
|
||
title: e,
|
||
icon: 'none',
|
||
})
|
||
})
|
||
},
|
||
},
|
||
}
|
||
</script>
|
||
|
||
<style scoped lang="scss">
|
||
.details {
|
||
.color-2EA222 {
|
||
color: #2ea222;
|
||
margin-left: 8px;
|
||
}
|
||
.detail_content1 {
|
||
background-color: #fff;
|
||
padding-bottom: 348px;
|
||
|
||
.top {
|
||
background-color: #eff4ff;
|
||
height: 144px;
|
||
padding: 32px 0 0 32px;
|
||
color: #3a7ee2;
|
||
font-size: 28px;
|
||
|
||
.save {
|
||
margin-top: 8px;
|
||
|
||
.clicksave {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form {
|
||
padding: 32px;
|
||
background-color: #fff;
|
||
|
||
.text {
|
||
font-size: 40px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.people {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
// margin-top: 20px;
|
||
height: 122px;
|
||
line-height: 122px;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 15px;
|
||
|
||
.people_msg {
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 84px;
|
||
height: 84px;
|
||
line-height: 84px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.name {
|
||
display: inline-block;
|
||
width: 145px;
|
||
vertical-align: middle;
|
||
|
||
.name_con {
|
||
font-size: 30px;
|
||
height: 40px;
|
||
}
|
||
|
||
.name_createtime {
|
||
color: #999;
|
||
font-size: 24px;
|
||
height: 120px;
|
||
width: 400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.people_status_ing {
|
||
color: #ff8822;
|
||
text-align: center;
|
||
}
|
||
|
||
.people_status_agree {
|
||
width: 192px;
|
||
height: 192px;
|
||
|
||
img {
|
||
width: 192px;
|
||
height: 192px;
|
||
margin-top: -60px;
|
||
}
|
||
}
|
||
|
||
.people_status_reject {
|
||
color: #f14242;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 16px;
|
||
|
||
.item {
|
||
margin-top: 16px;
|
||
|
||
.item_info {
|
||
display: inline;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
.annexs {
|
||
vertical-align: top;
|
||
}
|
||
|
||
.img_text {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 180px;
|
||
height: 175px;
|
||
|
||
img {
|
||
width: 180px;
|
||
height: 100%;
|
||
}
|
||
|
||
.text {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
// text-align: center;
|
||
left: 0;
|
||
width: 160px;
|
||
font-size: 12px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
color: #fff;
|
||
background-color: #000;
|
||
opacity: 0.4;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zhuf {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #1365dd;
|
||
}
|
||
|
||
.liangzhu {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #343d65;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
// margin-top: 16px;
|
||
}
|
||
|
||
.info {
|
||
height: 16px;
|
||
width: 100%;
|
||
background-color: #eee;
|
||
}
|
||
|
||
// 表单申请
|
||
.collapse {
|
||
// margin: 0 32px;
|
||
// padding: 0 32px;
|
||
::v-deep .u-collapse {
|
||
// background-color: #fff;
|
||
}
|
||
|
||
::v-deep .u-collapse-head {
|
||
background-color: #fff;
|
||
padding: 0 32px;
|
||
height: 96px;
|
||
}
|
||
|
||
::v-deep .u-collapse-body {
|
||
padding: 0 32px;
|
||
background-color: #fafafa;
|
||
|
||
.u-collapse-content {
|
||
.item_msg {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
|
||
.msg_lef {
|
||
width: 350px;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.msg_lright {
|
||
max-width: 420px;
|
||
word-break: break-all;
|
||
// word-wrap: break-word;
|
||
margin-right: 0;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.account {
|
||
// .account_leave {
|
||
// }
|
||
.account_house {
|
||
margin: 10px 0;
|
||
color: #333;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 流程信息
|
||
.workflow {
|
||
background-color: #fff;
|
||
padding: 24px 32px 40px 32px;
|
||
|
||
// 发起申请步骤
|
||
|
||
.step-list {
|
||
.step-item {
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
padding-bottom: 40px;
|
||
|
||
.item-left {
|
||
.item-left-ava-icon {
|
||
position: relative;
|
||
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
text-align: center;
|
||
z-index: 999;
|
||
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
}
|
||
|
||
.icon-yes {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 50px;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
|
||
.icon-no {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 50px;
|
||
width: 36px;
|
||
height: 36px;
|
||
background: #ff8822;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.solid {
|
||
height: calc(100%);
|
||
border-left: 4px solid #eee;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 40px;
|
||
}
|
||
|
||
.dashed {
|
||
height: calc(100%);
|
||
border-left: 4px dashed #eee;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 40px;
|
||
}
|
||
}
|
||
|
||
.item-right {
|
||
width: 590px;
|
||
|
||
.item-right-flex {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
.block {
|
||
display: block;
|
||
// margin-top: 124px;
|
||
}
|
||
|
||
.title2 {
|
||
display: inline-block;
|
||
}
|
||
|
||
.title2Desc {
|
||
display: inline-block;
|
||
color: #2ea222;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.title2Desc-ing {
|
||
display: inline-block;
|
||
color: #ff8822;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.title2Desc-false {
|
||
color: #f14242;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.user-list {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item-right-flex-left-name {
|
||
margin-top: 20px;
|
||
float: left;
|
||
margin-right: 16px;
|
||
text-align: center;
|
||
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 64px;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
// margin-left: 8px;
|
||
}
|
||
|
||
.avatar-name {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.examine {
|
||
p {
|
||
margin: 6px 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.examine_img {
|
||
// float: left;
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
// img {
|
||
// width: 134px;
|
||
// height: 136px;
|
||
// margin-right: 8px;
|
||
// }
|
||
// ::v-deep.AiImage {
|
||
// ::v-deep.u-image__image {
|
||
// width: 60px !important;
|
||
// height: 60px;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
|
||
.examine_docx1 {
|
||
.docx {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
width: 556px;
|
||
padding: 16px;
|
||
background-color: #ddd;
|
||
margin: 6px 0;
|
||
|
||
.docx-name {
|
||
width: 440px;
|
||
margin: 0 8px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
color: #999;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-item:first-child {
|
||
.item-right {
|
||
.item-right-flex {
|
||
.block {
|
||
margin-top: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-item:last-child {
|
||
.dashed {
|
||
border-left: 0 !important;
|
||
}
|
||
|
||
.solid {
|
||
border-left: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 抄送人头像
|
||
.recipients {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
margin: 16px 0 0 120px;
|
||
|
||
.recipients_content {
|
||
// display: inline-block;
|
||
// width: 64px;
|
||
// height: 150px;
|
||
margin-left: 32px;
|
||
|
||
.name_ava {
|
||
display: inline-block;
|
||
width: 120px;
|
||
// text-align: center;
|
||
margin-top: 5px;
|
||
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 64px;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
// margin-left: 8px;
|
||
}
|
||
|
||
.recipients_name {
|
||
// display: inline;
|
||
width: 100px;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
// text-align: center;
|
||
// background-color: pink;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .recipients_content:first-child {
|
||
// margin-left: 0;
|
||
// }
|
||
}
|
||
}
|
||
|
||
.detail_content {
|
||
background-color: #fff;
|
||
padding-bottom: 170px;
|
||
// padding-bottom: 320px;
|
||
.top {
|
||
background-color: #eff4ff;
|
||
height: 144px;
|
||
padding: 32px 0 0 32px;
|
||
color: #3a7ee2;
|
||
font-size: 28px;
|
||
|
||
.save {
|
||
margin-top: 8px;
|
||
|
||
.clicksave {
|
||
text-decoration: underline;
|
||
}
|
||
}
|
||
}
|
||
|
||
.form {
|
||
padding: 32px;
|
||
background-color: #fff;
|
||
|
||
.text {
|
||
font-size: 40px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
.people {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
// margin-top: 20px;
|
||
height: 122px;
|
||
line-height: 122px;
|
||
border-bottom: 1px solid #eee;
|
||
padding-bottom: 15px;
|
||
|
||
.people_msg {
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 84px;
|
||
height: 84px;
|
||
line-height: 84px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
margin-right: 10px;
|
||
}
|
||
|
||
.name {
|
||
display: inline-block;
|
||
width: 145px;
|
||
vertical-align: middle;
|
||
|
||
.name_con {
|
||
font-size: 30px;
|
||
height: 40px;
|
||
}
|
||
|
||
.name_createtime {
|
||
color: #999;
|
||
font-size: 24px;
|
||
height: 120px;
|
||
width: 400px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.people_status_ing {
|
||
color: #ff8822;
|
||
text-align: center;
|
||
}
|
||
|
||
.people_status_agree {
|
||
width: 192px;
|
||
height: 192px;
|
||
|
||
img {
|
||
width: 192px;
|
||
height: 192px;
|
||
margin-top: -60px;
|
||
}
|
||
}
|
||
|
||
.people_status_reject {
|
||
color: #f14242;
|
||
text-align: center;
|
||
}
|
||
}
|
||
|
||
.content {
|
||
margin-top: 16px;
|
||
|
||
.item {
|
||
margin-top: 16px;
|
||
|
||
.item_info {
|
||
display: inline;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
|
||
.annexs {
|
||
// display: inline;
|
||
vertical-align: top;
|
||
}
|
||
|
||
.img_text {
|
||
display: inline-block;
|
||
position: relative;
|
||
width: 180px;
|
||
height: 175px;
|
||
|
||
img {
|
||
width: 180px;
|
||
height: 100%;
|
||
}
|
||
|
||
.text {
|
||
position: absolute;
|
||
bottom: 14px;
|
||
left: -12px;
|
||
font-size: 12px;
|
||
width: 160px;
|
||
height: 40px;
|
||
line-height: 40px;
|
||
text-align: center;
|
||
color: #fff;
|
||
background-color: #000;
|
||
opacity: 0.4;
|
||
margin-left: 12px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.zhuf {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #1365dd;
|
||
}
|
||
|
||
.liangzhu {
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #343d65;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.tabs {
|
||
// margin-top: 16px;
|
||
}
|
||
|
||
.info {
|
||
height: 16px;
|
||
width: 100%;
|
||
background-color: #eee;
|
||
}
|
||
|
||
// 表单申请
|
||
.collapse {
|
||
// margin: 0 32px;
|
||
// padding: 0 32px;
|
||
::v-deep .u-collapse {
|
||
// background-color: #fff;
|
||
}
|
||
|
||
::v-deep .u-collapse-head {
|
||
background-color: #fff;
|
||
padding: 0 32px;
|
||
height: 96px;
|
||
}
|
||
|
||
::v-deep .u-collapse-body {
|
||
padding: 0 32px;
|
||
background-color: #fafafa;
|
||
|
||
.u-collapse-content {
|
||
.item_msg {
|
||
display: flex;
|
||
// align-items: center;
|
||
justify-content: space-between;
|
||
padding: 10px 0;
|
||
|
||
.msg_lef {
|
||
width: 350px;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #999999;
|
||
}
|
||
|
||
.msg_lright {
|
||
max-width: 420px;
|
||
word-break: break-all;
|
||
// word-wrap: break-word;
|
||
margin-right: 0;
|
||
font-size: 30px;
|
||
font-weight: 400;
|
||
color: #333333;
|
||
}
|
||
}
|
||
|
||
.account {
|
||
// .account_leave {
|
||
// }
|
||
.account_house {
|
||
margin: 10px 0;
|
||
color: #333;
|
||
font-size: 30px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 流程信息
|
||
.workflow {
|
||
background-color: #fff;
|
||
padding: 24px 32px 40px 32px;
|
||
|
||
// 发起申请步骤
|
||
|
||
.step-list {
|
||
.step-item {
|
||
display: flex;
|
||
position: relative;
|
||
justify-content: space-between;
|
||
padding-bottom: 40px;
|
||
|
||
.item-left {
|
||
height: 100%;
|
||
.item-left-ava-icon {
|
||
position: relative;
|
||
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 80px;
|
||
height: 80px;
|
||
line-height: 80px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
text-align: center;
|
||
z-index: 999;
|
||
|
||
img {
|
||
width: 48px;
|
||
height: 48px;
|
||
}
|
||
}
|
||
|
||
.icon-yes {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 50px;
|
||
width: 36px;
|
||
height: 36px;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
|
||
.icon-no {
|
||
position: absolute;
|
||
top: 50px;
|
||
left: 50px;
|
||
width: 36px;
|
||
height: 36px;
|
||
background: #ff8822;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
vertical-align: middle;
|
||
|
||
img {
|
||
width: 36px;
|
||
height: 36px;
|
||
}
|
||
}
|
||
}
|
||
|
||
.solid {
|
||
// height: 100%;
|
||
height: calc(100%);
|
||
border-left: 4px solid #eee;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 40px;
|
||
}
|
||
|
||
.dashed {
|
||
// height: 100%;
|
||
height: calc(100%);
|
||
border-left: 4px dashed #eee;
|
||
position: absolute;
|
||
top: 80px;
|
||
left: 40px;
|
||
}
|
||
}
|
||
|
||
.item-right {
|
||
width: 590px;
|
||
|
||
.item-right-flex {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
.block {
|
||
display: block;
|
||
// margin-top: 124px;
|
||
}
|
||
|
||
.title2 {
|
||
display: inline-block;
|
||
}
|
||
|
||
.title2Desc {
|
||
display: inline-block;
|
||
color: #2ea222;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.title2Desc-ing {
|
||
display: inline-block;
|
||
color: #ff8822;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.title2Desc-false {
|
||
color: #f14242;
|
||
display: inline-block;
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.user-list {
|
||
overflow: hidden;
|
||
}
|
||
|
||
.item-right-flex-left-name {
|
||
margin-top: 20px;
|
||
float: left;
|
||
margin-right: 16px;
|
||
text-align: center;
|
||
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 64px;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
// margin-left: 8px;
|
||
}
|
||
|
||
.avatar-name {
|
||
display: block;
|
||
}
|
||
}
|
||
|
||
.examine {
|
||
p {
|
||
margin: 6px 0;
|
||
font-size: 12px;
|
||
}
|
||
|
||
.examine_img {
|
||
// display: flex;
|
||
// flex-wrap: wrap;
|
||
// justify-content: space-between;
|
||
// float: left;
|
||
// img {
|
||
// width: 134px;
|
||
// height: 136px;
|
||
// margin-right: 8px;
|
||
// }
|
||
// ::v-deep.AiImage {
|
||
// ::v-deep.u-image__image {
|
||
// width: 60px !important;
|
||
// height: 60px;
|
||
// }
|
||
// }
|
||
}
|
||
}
|
||
|
||
.examine_docx1 {
|
||
.docx {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
width: 556px;
|
||
padding: 16px;
|
||
background-color: #ddd;
|
||
margin: 6px 0;
|
||
|
||
.docx-name {
|
||
width: 440px;
|
||
overflow: hidden;
|
||
white-space: nowrap;
|
||
text-overflow: ellipsis;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.time-info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
|
||
span {
|
||
color: #999;
|
||
font-size: 28px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-item:first-child {
|
||
.item-right {
|
||
.item-right-flex {
|
||
.block {
|
||
margin-top: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.step-item:last-child {
|
||
.dashed {
|
||
border-left: 0 !important;
|
||
}
|
||
|
||
.solid {
|
||
border-left: 0 !important;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 抄送人头像
|
||
.recipients {
|
||
// display: flex;
|
||
// justify-content: space-between;
|
||
// align-items: center;
|
||
margin: 16px 0 0 120px;
|
||
|
||
.recipients_content {
|
||
// display: inline-block;
|
||
// width: 64px;
|
||
// height: 150px;
|
||
margin-left: 32px;
|
||
|
||
.name_ava {
|
||
display: inline-block;
|
||
width: 120px;
|
||
// text-align: center;
|
||
margin-top: 5px;
|
||
|
||
.avatar {
|
||
display: inline-block;
|
||
width: 64px;
|
||
height: 64px;
|
||
line-height: 64px;
|
||
border-radius: 50%;
|
||
background-color: #2266ff;
|
||
color: #fff;
|
||
font-size: 28px;
|
||
vertical-align: middle;
|
||
text-align: center;
|
||
// margin-left: 8px;
|
||
}
|
||
|
||
.recipients_name {
|
||
// display: inline;
|
||
width: 100px;
|
||
height: 34px;
|
||
line-height: 34px;
|
||
// text-align: center;
|
||
// background-color: pink;
|
||
margin-top: 8px;
|
||
}
|
||
}
|
||
}
|
||
|
||
// .recipients_content:first-child {
|
||
// margin-left: 0;
|
||
// }
|
||
}
|
||
}
|
||
}
|
||
|
||
.reject_agree {
|
||
position: fixed;
|
||
bottom: 0;
|
||
display: flex;
|
||
flex-direction: row;
|
||
justify-content: space-between;
|
||
width: 100%;
|
||
line-height: 112px;
|
||
text-align: center;
|
||
border-top: 1px solid #ddd;
|
||
z-index: 999;
|
||
background: #fff;
|
||
|
||
.reject {
|
||
background-color: #fff;
|
||
width: 50%;
|
||
color: red;
|
||
}
|
||
|
||
.agree {
|
||
height: 112px;
|
||
width: 50%;
|
||
background-color: #1365dd;
|
||
color: #fff;
|
||
}
|
||
}
|
||
</style>
|