|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="side"> | 
|---|
|  |  |  | <div class="side_title">审批流程</div> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="list" | 
|---|
|  |  |  | v-if=" | 
|---|
|  |  |  | <div class="list" v-if=" | 
|---|
|  |  |  | info.approveDateVO != null && info.approveDateVO.approveList != null | 
|---|
|  |  |  | " | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="item" | 
|---|
|  |  |  | v-for="(item, index) in info.approveDateVO.approveList" | 
|---|
|  |  |  | :key="item.id" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="separate" | 
|---|
|  |  |  | v-if="index < info.approveDateVO.approveList.length - 1" | 
|---|
|  |  |  | ></div> | 
|---|
|  |  |  | "> | 
|---|
|  |  |  | <div class="item" v-for="(item, index) in info.approveDateVO.approveList" :key="item.id"> | 
|---|
|  |  |  | <div class="separate" v-if="index < info.approveDateVO.approveList.length - 1"></div> | 
|---|
|  |  |  | <div class="info"> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | src="@/assets/icons/ic_tongguo.png" | 
|---|
|  |  |  | class="iconnew" | 
|---|
|  |  |  | v-if="item.status == 2" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | src="@/assets/icons/ic_dangqian.png" | 
|---|
|  |  |  | class="iconnew" | 
|---|
|  |  |  | v-if="item.status == 1" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | src="@/assets/icons/ic_jujue.png" | 
|---|
|  |  |  | class="iconnew" | 
|---|
|  |  |  | v-if="item.status == 3" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | src="@/assets/icons/ic_grey.png" | 
|---|
|  |  |  | class="iconnew" | 
|---|
|  |  |  | v-if="item.status == null || item.status == 0" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img src="@/assets/icons/ic_tongguo.png" class="iconnew" v-if="item.status == 2" /> | 
|---|
|  |  |  | <img src="@/assets/icons/ic_dangqian.png" class="iconnew" v-if="item.status == 1" /> | 
|---|
|  |  |  | <img src="@/assets/icons/ic_jujue.png" class="iconnew" v-if="item.status == 3" /> | 
|---|
|  |  |  | <img src="@/assets/icons/ic_grey.png" class="iconnew" v-if="item.status == null || item.status == 0" /> | 
|---|
|  |  |  | <div style="display: inline" v-if="item.approveType != 1"> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="item.faceImg != null && item.faceImg != ''" | 
|---|
|  |  |  | :src="item.faceImg" | 
|---|
|  |  |  | class="avatar" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="item.faceImg == null || item.faceImg == ''" | 
|---|
|  |  |  | src="@/assets/avatar/man.png" | 
|---|
|  |  |  | class="avatar" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img v-if="item.faceImg != null && item.faceImg != ''" :src="item.faceImg" class="avatar" alt="" /> | 
|---|
|  |  |  | <img v-if="item.faceImg == null || item.faceImg == ''" src="@/assets/avatar/man.png" class="avatar" | 
|---|
|  |  |  | alt="" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div style="display: inline" v-if="item.approveType == 1"> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="item.type != 1" | 
|---|
|  |  |  | src="@/assets/icons/ic_duoren.png" | 
|---|
|  |  |  | class="avatar" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="item.type == 1" | 
|---|
|  |  |  | src="@/assets/icons/ic_chaosong.png" | 
|---|
|  |  |  | class="avatar" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img v-if="item.type != 1" src="@/assets/icons/ic_duoren.png" class="avatar" alt="" /> | 
|---|
|  |  |  | <img v-if="item.type == 1" src="@/assets/icons/ic_chaosong.png" class="avatar" alt="" /> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div class="content"> | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | 
|---|
|  |  |  | <div class="line"> | 
|---|
|  |  |  | <div class="company"> | 
|---|
|  |  |  | {{ item.memberName }} | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | style="display: inline" | 
|---|
|  |  |  | v-if="item.statusInfo != null && item.statusInfo != ''" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <div style="display: inline" v-if="item.statusInfo != null && item.statusInfo != ''"> | 
|---|
|  |  |  | (<span class="status-green">{{ | 
|---|
|  |  |  | item.statusInfo || "" | 
|---|
|  |  |  | }}</span | 
|---|
|  |  |  | >) | 
|---|
|  |  |  | }}</span>) | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | v-if=" | 
|---|
|  |  |  | <div v-if=" | 
|---|
|  |  |  | item.approveType != 1 && | 
|---|
|  |  |  | item.checkInfo != null && | 
|---|
|  |  |  | item.checkInfo != '' | 
|---|
|  |  |  | " | 
|---|
|  |  |  | class="remark" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | " class="remark"> | 
|---|
|  |  |  | {{ item.checkInfo || "" }} | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <div v-if="item.approveType == 1" class="childList"> | 
|---|
|  |  |  | <div | 
|---|
|  |  |  | class="m_content company" | 
|---|
|  |  |  | v-for="item1 in item.approveList" | 
|---|
|  |  |  | :key="item1.id" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="item1.faceImg != null && item1.faceImg != ''" | 
|---|
|  |  |  | :src="item1.faceImg" | 
|---|
|  |  |  | class="avatar" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <img | 
|---|
|  |  |  | v-if="item1.faceImg == null || item1.faceImg == ''" | 
|---|
|  |  |  | src="@/assets/avatar/man.png" | 
|---|
|  |  |  | class="avatar" | 
|---|
|  |  |  | alt="" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <div class="m_content company" v-for="item1 in item.approveList" :key="item1.id"> | 
|---|
|  |  |  | <img v-if="item1.faceImg != null && item1.faceImg != ''" :src="item1.faceImg" class="avatar" alt="" /> | 
|---|
|  |  |  | <img v-if="item1.faceImg == null || item1.faceImg == ''" src="@/assets/avatar/man.png" class="avatar" | 
|---|
|  |  |  | alt="" /> | 
|---|
|  |  |  | <span> {{ item1.memberName }}</span> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | <!--  --> | 
|---|
|  |  |  | <template v-slot:footer> | 
|---|
|  |  |  | <el-button | 
|---|
|  |  |  | @click="handleAppr(2)" | 
|---|
|  |  |  | type="primary" | 
|---|
|  |  |  | class="status-red" | 
|---|
|  |  |  | v-if=" | 
|---|
|  |  |  | <el-button @click="handleAppr(2)" type="primary" class="status-red" v-if=" | 
|---|
|  |  |  | info.approveDateVO != null && | 
|---|
|  |  |  | info.approveDateVO.canBeApproved != null && | 
|---|
|  |  |  | info.approveDateVO.canBeApproved == 1 | 
|---|
|  |  |  | " | 
|---|
|  |  |  | >同意</el-button | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-button | 
|---|
|  |  |  | @click="handleAppr(3)" | 
|---|
|  |  |  | type="danger" | 
|---|
|  |  |  | v-if=" | 
|---|
|  |  |  | ">同意</el-button> | 
|---|
|  |  |  | <el-button @click="handleAppr(3)" type="danger" v-if=" | 
|---|
|  |  |  | info.approveDateVO != null && | 
|---|
|  |  |  | info.approveDateVO.canBeApproved != null && | 
|---|
|  |  |  | info.approveDateVO.canBeApproved == 1 | 
|---|
|  |  |  | " | 
|---|
|  |  |  | >拒绝</el-button | 
|---|
|  |  |  | > | 
|---|
|  |  |  | ">拒绝</el-button> | 
|---|
|  |  |  | <el-button @click="isShowModal = false">返回</el-button> | 
|---|
|  |  |  | </template> | 
|---|
|  |  |  | <!--  同意/拒绝 --> | 
|---|
|  |  |  | <el-dialog | 
|---|
|  |  |  | append-to-body | 
|---|
|  |  |  | :title="apprTitle" | 
|---|
|  |  |  | :visible.sync="isShowAppr" | 
|---|
|  |  |  | width="480px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-dialog append-to-body :title="apprTitle" :visible.sync="isShowAppr" width="480px"> | 
|---|
|  |  |  | <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm"> | 
|---|
|  |  |  | <el-form-item :prop="param.status == 3 ? 'checkInfo' : ''" :label="param.status == 2 ? '同意说明' : '拒绝说明'"> | 
|---|
|  |  |  | <el-input | 
|---|
|  |  |  | type="textarea" | 
|---|
|  |  |  | :placeholder=" | 
|---|
|  |  |  | param.status == 2 ? '同意说明,非必填' : '拒绝说明必填' | 
|---|
|  |  |  | " | 
|---|
|  |  |  | :rows="4" | 
|---|
|  |  |  | v-model="param.checkInfo" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <el-input type="textarea" :placeholder="param.status == 2 ? '同意说明,非必填' : '拒绝说明必填' | 
|---|
|  |  |  | " :rows="4" v-model="param.checkInfo" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | <span slot="footer" class="dialog-footer"> | 
|---|
|  |  |  | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  | <!-- 隐患 --> | 
|---|
|  |  |  | <el-dialog | 
|---|
|  |  |  | append-to-body | 
|---|
|  |  |  | title="隐患" | 
|---|
|  |  |  | :visible.sync="isShowProblem" | 
|---|
|  |  |  | width="480px" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-dialog append-to-body title="隐患" :visible.sync="isShowProblem" width="480px"> | 
|---|
|  |  |  | <el-form :model="param" :rules="rules" ref="ruleForm" label-width="100px"> | 
|---|
|  |  |  | <el-form-item label="退回时间"> | 
|---|
|  |  |  | <el-date-picker | 
|---|
|  |  |  | class="w300" | 
|---|
|  |  |  | value-format="yyyy-MM-dd" | 
|---|
|  |  |  | type="date" | 
|---|
|  |  |  | placeholder="选择日期" | 
|---|
|  |  |  | v-model="param.date" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <el-date-picker class="w300" value-format="yyyy-MM-dd" type="date" placeholder="选择日期" v-model="param.date" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="整改前"> | 
|---|
|  |  |  | <div class="df_ac"> | 
|---|
|  |  |  | <img src="@/assets/avatar/man.png" /> | 
|---|
|  |  |  | <el-upload | 
|---|
|  |  |  | class="avatar-uploader" | 
|---|
|  |  |  | action="https://jsonplaceholder.typicode.com/posts/" | 
|---|
|  |  |  | :show-file-list="false" | 
|---|
|  |  |  | :on-success="handleAvatarSuccess" | 
|---|
|  |  |  | :before-upload="beforeAvatarUpload" | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-upload class="avatar-uploader" action="https://jsonplaceholder.typicode.com/posts/" | 
|---|
|  |  |  | :show-file-list="false" :on-success="handleAvatarSuccess" :before-upload="beforeAvatarUpload"> | 
|---|
|  |  |  | <img v-if="param.url" :src="param.url" class="avatar" /> | 
|---|
|  |  |  | <div v-else class="upload_box"> | 
|---|
|  |  |  | <el-icon class="el-icon-plus icon" /> | 
|---|
|  |  |  | 
|---|
|  |  |  | </div> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | <el-form-item label="退回说明"> | 
|---|
|  |  |  | <el-input | 
|---|
|  |  |  | type="textarea" | 
|---|
|  |  |  | placeholder="请填写说明" | 
|---|
|  |  |  | :rows="4" | 
|---|
|  |  |  | v-model="param.explain" | 
|---|
|  |  |  | /> | 
|---|
|  |  |  | <el-input type="textarea" placeholder="请填写说明" :rows="4" v-model="param.explain" /> | 
|---|
|  |  |  | </el-form-item> | 
|---|
|  |  |  | </el-form> | 
|---|
|  |  |  | <span slot="footer" class="dialog-footer"> | 
|---|
|  |  |  | <el-button @click="isShowProblem = false">取消</el-button> | 
|---|
|  |  |  | <el-button type="primary" @click="isShowProblem = false" | 
|---|
|  |  |  | >确定</el-button | 
|---|
|  |  |  | > | 
|---|
|  |  |  | <el-button type="primary" @click="isShowProblem = false">确定</el-button> | 
|---|
|  |  |  | </span> | 
|---|
|  |  |  | </el-dialog> | 
|---|
|  |  |  | </GlobalWindow> | 
|---|
|  |  |  | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | handleAppr (val) { | 
|---|
|  |  |  | this.$set(this.param, 'status', val) | 
|---|
|  |  |  | this.apprTitle = val == 2 ? '同意' : '拒绝' | 
|---|
|  |  |  | this.isShowAppr = true | 
|---|
|  |  |  | }, | 
|---|
|  |  |  | confirm () { | 
|---|
|  |  |  | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | color: #999999; | 
|---|
|  |  |  | border: 1px solid #e4e4e4; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .icon { | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .text { | 
|---|
|  |  |  | font-size: 12px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .side_title { | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | font-size: 18px; | 
|---|
|  |  |  | 
|---|
|  |  |  | margin-left: 20px; | 
|---|
|  |  |  | margin-top: 20px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .modal_wrap { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | height: 100%; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .modal_content { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  | padding: 0px 30px; | 
|---|
|  |  |  | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  | margin-top: 30px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info { | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | width: 40%; | 
|---|
|  |  |  | margin-bottom: 20px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | &:nth-of-type(2n) { | 
|---|
|  |  |  | width: 60%; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | 
|---|
|  |  |  | border-radius: 16px 0px 16px 0px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .table_info { | 
|---|
|  |  |  | .name_wrap { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .avatar { | 
|---|
|  |  |  | width: 40px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | border-radius: 50%; | 
|---|
|  |  |  | margin-right: 12px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .content { | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .tag { | 
|---|
|  |  |  | color: #b2cbf9; | 
|---|
|  |  |  | border: 1px solid #b2cbf9; | 
|---|
|  |  |  | 
|---|
|  |  |  | width: 420px; | 
|---|
|  |  |  | background: #ffffff; | 
|---|
|  |  |  | border-left: 20px solid #f7f7f7; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .list { | 
|---|
|  |  |  | .item { | 
|---|
|  |  |  | padding: 8px 0; | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .separate { | 
|---|
|  |  |  | position: absolute; | 
|---|
|  |  |  | border-left: 2px dashed #cccccc; | 
|---|
|  |  |  | 
|---|
|  |  |  | height: calc(100% - 36px); | 
|---|
|  |  |  | top: 49px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .avatar { | 
|---|
|  |  |  | width: 40px; | 
|---|
|  |  |  | height: 40px; | 
|---|
|  |  |  | 
|---|
|  |  |  | margin: 0 12px 0 16px; | 
|---|
|  |  |  | //border: 1px solid; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .childList { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-wrap: wrap; | 
|---|
|  |  |  | margin-left: 100px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .company { | 
|---|
|  |  |  | font-size: 13px; | 
|---|
|  |  |  | color: #888888; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .status { | 
|---|
|  |  |  | color: #00ba67; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .m_content { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | flex-direction: column; | 
|---|
|  |  |  | 
|---|
|  |  |  | justify-content: center; | 
|---|
|  |  |  | margin-bottom: 4px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .info { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | align-items: center; | 
|---|
|  |  |  | 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; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .icon2 { | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | z-index: 11; | 
|---|
|  |  |  | color: #dc362e; | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .iconnew { | 
|---|
|  |  |  | width: 24px; | 
|---|
|  |  |  | height: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .icon3 { | 
|---|
|  |  |  | position: relative; | 
|---|
|  |  |  | z-index: 11; | 
|---|
|  |  |  | color: gray; | 
|---|
|  |  |  | font-size: 24px; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .content { | 
|---|
|  |  |  | flex: 1; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .line { | 
|---|
|  |  |  | display: flex; | 
|---|
|  |  |  | justify-content: space-between; | 
|---|
|  |  |  | align-content: center; | 
|---|
|  |  |  | margin-bottom: 6px; | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .name { | 
|---|
|  |  |  | font-weight: 600; | 
|---|
|  |  |  | font-size: 16px; | 
|---|
|  |  |  | color: #111111; | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .time { | 
|---|
|  |  |  | color: #888888; | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  | } | 
|---|
|  |  |  |  | 
|---|
|  |  |  | .remark { | 
|---|
|  |  |  | background: #f7f7f7; | 
|---|
|  |  |  | border-radius: 4px; | 
|---|