| | |
| | | <div class="side"> |
| | | <div class="side_title">审批流程</div> |
| | | <div class="list"> |
| | | <div class="item" v-for="item in logList" :key="item.id"> |
| | | <div class="separate"></div> |
| | | <div class="item" v-for="(item,index) in logList" :key="item.id"> |
| | | <div class="separate" v-if="index < logList.length-1"></div> |
| | | <div class="info"> |
| | | <i class="el-icon-success icon"></i> |
| | | <img :src="item.avatar" class="avatar" alt="" /> |
| | | <i class="el-icon-success icon" v-if="(model.status ==1) || index < logList.length-1"></i> |
| | | <i class="el-icon-question icon1" v-if="(model.status==0) && index == logList.length-1"></i> |
| | | <i class="el-icon-error icon2" v-if="(model.status==2) && index == logList.length-1"></i> |
| | | <img v-if="item.avatar!=null && item.avatar !=''" :src="item.avatar" class="avatar" alt="" /> |
| | | <img v-if="item.avatar ==null ||item.avatar ==''" src="@/assets/avatar/man.png" class="avatar" alt="" /> |
| | | <div class="content"> |
| | | <div class="line"> |
| | | <div class="name">{{ item.createUserName}}</div> |
| | | <div class="name">{{ item.title}}</div> |
| | | <div class="time">{{ item.createDate }}</div> |
| | | </div> |
| | | <div class="line"> |
| | | <div class="company">{{ item.companyName }} <span class="status">已同意</span> </div> |
| | | <div class="company"> |
| | | {{ item.createUserName }} {{ item.companyName }} |
| | | <div style="display: inline" v-if="index == logList.length-1"> |
| | | (<span class="status-green" v-if="model.status==1">已处理</span> |
| | | <span class="status-blue" v-if="model.status==0">待处理</span> |
| | | <span class="status-red" v-if="model.status==2">已退回</span>) |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | | </div> |
| | |
| | | </script> |
| | | |
| | | <style lang="scss" scoped> |
| | | .side_title{ |
| | | font-weight: 600; |
| | | font-size: 18px; |
| | | color: #111111; |
| | | margin-bottom: 20px; |
| | | margin-left: 20px; |
| | | margin-top: 20px; |
| | | } |
| | | .upload_box { |
| | | width: 84px; |
| | | height: 84px; |
| | |
| | | font-size: 12px; |
| | | } |
| | | } |
| | | |
| | | .modal_wrap { |
| | | display: flex; |
| | | height: 100%; |
| | |
| | | margin-bottom: 20px; |
| | | margin-top: 30px; |
| | | } |
| | | |
| | | .info { |
| | | .list { |
| | | display: flex; |
| | |
| | | .separate { |
| | | position: absolute; |
| | | border-left: 2px dashed #cccccc; |
| | | left: 51px; |
| | | left: 31px; |
| | | height: calc(100% - 24px); |
| | | top: 46px; |
| | | } |
| | | .info { |
| | | display: flex; |
| | | align-items: center; |
| | | margin-left: 40px; |
| | | margin-left: 20px; |
| | | .icon { |
| | | position: relative; |
| | | z-index: 11; |
| | | color: #53b76f; |
| | | font-size: 24px; |
| | | } |
| | | .icon1 { |
| | | position: relative; |
| | | z-index: 11; |
| | | color: deepskyblue; |
| | | font-size: 24px; |
| | | } |
| | | .avatar { |
| | | width: 40px; |
| | | height: 40px; |