|
@@ -1,88 +1,265 @@
|
|
|
-<template>
|
|
|
-<div>
|
|
|
- <header class="mui-bar mui-bar-nav">
|
|
|
- <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
- <h1 class="mui-title">申请调班详情</h1>
|
|
|
- </header>
|
|
|
- <div class="mui-content vongi-qingjiadt">
|
|
|
- <div class="vongi-qingjiadt-head flew-sp">
|
|
|
- <div class="flew-items">
|
|
|
- <div class="flew"><img src="~$project/assets/img/03.jpg" width="50" /></div>
|
|
|
- <h4>郭麒麟 申请调班</h4>
|
|
|
- </div>
|
|
|
- <button class="mui-btn mui-btn-primary mui-btn-outlined">审批中</button>
|
|
|
- <!--<button class="mui-btn mui-btn-danger mui-btn-outlined">已拒绝</button>
|
|
|
- <button class="mui-btn mui-btn-success mui-btn-outlined">已批准</button>-->
|
|
|
- </div>
|
|
|
- <form class="mui-input-group">
|
|
|
- <div class="mui-input-row">
|
|
|
- <label>调班日期</label>
|
|
|
- <span>2021-03-01 星期一</span>
|
|
|
- </div>
|
|
|
- <div class="mui-input-row">
|
|
|
- <label>原班次</label>
|
|
|
- <span>11-保卫科白班</span>
|
|
|
- </div>
|
|
|
- <div class="mui-input-row">
|
|
|
- <label>调整为</label>
|
|
|
- <span>12-保卫科晚班<br>12-保卫科晚班</span>
|
|
|
- </div>
|
|
|
- <div class="mui-input-row">
|
|
|
- <label>申请时间</label>
|
|
|
- <span>2020-04-27 12:00:00</span>
|
|
|
- </div>
|
|
|
- </form>
|
|
|
- <div class="mui-content-padded">
|
|
|
- <h5>审核记录</h5>
|
|
|
- </div>
|
|
|
- <div class="vongi-slot">
|
|
|
- <div class="vongi-slot-block">
|
|
|
- <div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
|
|
|
- <div class="vongi-slot-content">
|
|
|
- <h4>审批人1<span class="mui-pull-right mui-h5 color999">2020-11-26 13:00</span></h4>
|
|
|
- <p>高进权 <span class="color55f868">同意</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="vongi-slot-block">
|
|
|
- <div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
|
|
|
- <div class="vongi-slot-content">
|
|
|
- <h4>审批人1</h4>
|
|
|
- <p>高进权 <span class="color4fc5f7">审批中</span></p>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="vongi-slot-block">
|
|
|
- <div class="vongi-slot-img"><img src="~$project/assets/img/icon_chaosong.png"></div>
|
|
|
- <div class="vongi-slot-content">
|
|
|
- <h4>抄送人</h4>
|
|
|
- <p>已抄送2人</p>
|
|
|
- <ul class="mui-table-view mui-grid-view mui-grid-9 flex ">
|
|
|
- <li class="mui-table-view-cell mui-media">
|
|
|
- <div class="flex">
|
|
|
- <img src="~$project/assets/img/02.jpg"/>
|
|
|
- <i class="iconfont icon-gou"></i>
|
|
|
- </div>
|
|
|
- <div class="mui-media-body">张芳芳</div>
|
|
|
- </li>
|
|
|
- <li class="mui-table-view-cell mui-media">
|
|
|
- <div class="flex">
|
|
|
- <img src="~$project/assets/img/02.jpg"/>
|
|
|
- <i class="iconfont icon-chacha"></i>
|
|
|
- </div>
|
|
|
- <div class="mui-media-body">张芳芳</div>
|
|
|
- </li>
|
|
|
- </ul>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-</template>
|
|
|
-
|
|
|
-<script>
|
|
|
-</script>
|
|
|
-
|
|
|
-<style src="$project/assets/css/iconfont.css"></style>
|
|
|
-<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
-<style src="$project/assets/css/xsy.css"></style>
|
|
|
-<style>
|
|
|
+<template>
|
|
|
+ <div>
|
|
|
+ <loading :visible="isLoading"></loading>
|
|
|
+ <header class="mui-bar mui-bar-nav">
|
|
|
+ <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>
|
|
|
+ <h1 class="mui-title">申请调班详情</h1>
|
|
|
+ </header>
|
|
|
+ <div class="mui-content vongi-qingjiadt">
|
|
|
+ <div class="vongi-qingjiadt-head flew-sp">
|
|
|
+ <div class="flew-items">
|
|
|
+ <div class="flew"><img :src="adjustShiftDetail.faceImageUrl" width="50" /></div>
|
|
|
+ <h4>{{adjustShiftDetail.name}} 申请调班</h4>
|
|
|
+ </div>
|
|
|
+ <button class="mui-btn mui-btn-outlined" :class="{'mui-btn-primary':adjustShiftDetail.status==0,
|
|
|
+ 'mui-btn-danger':adjustShiftDetail.status==2||adjustShiftDetail.status==3,
|
|
|
+ 'mui-btn-success':adjustShiftDetail.status==1||adjustShiftDetail.status==4}">{{adjustShiftDetail.statusName}}</button>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ <form class="mui-input-group">
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>调班日期</label>
|
|
|
+ <span>{{adjustShiftDetail.adjustDate}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>原班次</label>
|
|
|
+ <span>{{adjustShiftDetail.oldShift}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>调整为</label>
|
|
|
+ <span>{{adjustShiftDetail.newShift}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>备注</label>
|
|
|
+ <span>{{adjustShiftDetail.remark}}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mui-input-row">
|
|
|
+ <label>申请时间</label>
|
|
|
+ <span>{{adjustShiftDetail.createTime}}</span>
|
|
|
+ </div>
|
|
|
+ </form>
|
|
|
+ <div class="mui-content-padded">
|
|
|
+ <h5>审核记录</h5>
|
|
|
+ </div>
|
|
|
+ <div class="vongi-slot">
|
|
|
+ <template v-for="item,i in examineDetail.examineList">
|
|
|
+
|
|
|
+ <div class="vongi-slot-block">
|
|
|
+ <!-- 单人展示单人 -->
|
|
|
+ <!-- 多人展示单人 -->
|
|
|
+ <!-- 多人展示多人 -->
|
|
|
+ <div class="vongi-slot-img"
|
|
|
+ v-if="item.source==1&&item.operation=='or'&&item.examinePersonDetailDTOList.length==1 ">
|
|
|
+ <img v-for="item1,j in item.examinePersonDetailDTOList" :src="item1.faceImageUrl">
|
|
|
+ </div>
|
|
|
+ <div class="vongi-slot-img" v-else-if="item.source==1&&item.operation=='or'&&item.action!=0 ">
|
|
|
+ <img v-for="item1,j in item.examinePersonDetailDTOList" :src="item1.faceImageUrl"
|
|
|
+ v-if="item1.action!='0'">
|
|
|
+ </div>
|
|
|
+ <div class="vongi-slot-img" v-else>
|
|
|
+ <img src="~$project/assets/img/team.png">
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="vongi-slot-content">
|
|
|
+ <h4>{{item.desc}}<span class="mui-pull-right mui-h5 color999">{{item.finishTime}}</span>
|
|
|
+ </h4>
|
|
|
+
|
|
|
+ <template
|
|
|
+ v-if="item.source==1&&item.operation=='or'&&item.examinePersonDetailDTOList.length==1 ">
|
|
|
+ <p v-for="item1,j in item.examinePersonDetailDTOList">{{item1.name}}
|
|
|
+ <span :class="getClass(item1,i)">{{item1.remark}}</span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template v-else-if="item.source==1&&item.operation=='or'&&item.action!=0 ">
|
|
|
+ <p v-for="item1,j in item.examinePersonDetailDTOList">{{item1.name}}
|
|
|
+ <span :class="getClass(item1,i)" v-if="item1.action!='0'">{{item1.remark}}</span>
|
|
|
+ </p>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <p>{{item.operation=='or'?'或签':''}}{{item.operation=='and'?'会签':''}}{{item.examinePersonDetailDTOList.length}}人
|
|
|
+ </p>
|
|
|
+ <ul class="mui-table-view mui-grid-view mui-grid-9 flex ">
|
|
|
+
|
|
|
+
|
|
|
+ <li class="mui-table-view-cell mui-media"
|
|
|
+ v-for="item1,j in item.examinePersonDetailDTOList">
|
|
|
+ <div class="flex">
|
|
|
+ <img :src="item1.faceImageUrl" />
|
|
|
+ <i class="iconfont icon-gou" v-if="item1.action=='1'"></i>
|
|
|
+ <i class="iconfont icon-chacha" v-if="item1.action=='2'"></i>
|
|
|
+ </div>
|
|
|
+ <div class="mui-media-body">{{item1.name}}</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </template>
|
|
|
+
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+ <div class="vongi-slot-block" v-if="item.ccPersonDetailDTOList.length">
|
|
|
+ <div class="vongi-slot-img"><img src="~$project/assets/img/icon_chaosong.png"></div>
|
|
|
+ <div class="vongi-slot-content">
|
|
|
+ <h4>抄送人</h4>
|
|
|
+ <p>已抄送{{item.ccPersonDetailDTOList.length}}人</p>
|
|
|
+ <ul class="mui-table-view mui-grid-view mui-grid-9 flex ">
|
|
|
+ <li class="mui-table-view-cell mui-media" v-for="item1,j in item.ccPersonDetailDTOList">
|
|
|
+ <div class="flex">
|
|
|
+ <img :src="item1.faceImageUrl" />
|
|
|
+ </div>
|
|
|
+ <div class="mui-media-body">{{item1.name}}</div>
|
|
|
+ </li>
|
|
|
+
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
+ </template>
|
|
|
+
|
|
|
+ <div class="vongi-slot-block" v-if="false">
|
|
|
+ <div class="vongi-slot-img"><img src="~$project/assets/img/02.jpg"></div>
|
|
|
+ <div class="vongi-slot-content">
|
|
|
+ <h4>审批人1</h4>
|
|
|
+ <p>高进权 <span class="color4fc5f7">审批中</span></p>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="vongi-slot-block" v-if="false">
|
|
|
+ <div class="vongi-slot-img"><img src="~$project/assets/img/icon_chaosong.png"></div>
|
|
|
+ <div class="vongi-slot-content">
|
|
|
+ <h4>抄送人</h4>
|
|
|
+ <p>已抄送2人</p>
|
|
|
+ <ul class="mui-table-view mui-grid-view mui-grid-9 flex ">
|
|
|
+ <li class="mui-table-view-cell mui-media">
|
|
|
+ <div class="flex">
|
|
|
+ <img src="~$project/assets/img/02.jpg" />
|
|
|
+ <i class="iconfont icon-gou"></i>
|
|
|
+ </div>
|
|
|
+ <div class="mui-media-body">张芳芳</div>
|
|
|
+ </li>
|
|
|
+ <li class="mui-table-view-cell mui-media">
|
|
|
+ <div class="flex">
|
|
|
+ <img src="~$project/assets/img/02.jpg" />
|
|
|
+ <i class="iconfont icon-chacha"></i>
|
|
|
+ </div>
|
|
|
+ <div class="mui-media-body">张芳芳</div>
|
|
|
+ </li>
|
|
|
+ </ul>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+ import * as API from '@/apis-xsy/applyclass'
|
|
|
+ import * as API_sp from '@/apis-xsy/xsy'
|
|
|
+
|
|
|
+ import Common from '$project/components/Common.vue'
|
|
|
+ import Loading from '$project/components/Loading.vue'
|
|
|
+ import TopHeader from '$project/components/TopHeader.vue'
|
|
|
+ import {
|
|
|
+ mapGetters,
|
|
|
+ mapMutations
|
|
|
+ } from 'vuex'
|
|
|
+
|
|
|
+ export default {
|
|
|
+ name: '',
|
|
|
+ components: {
|
|
|
+ Common,
|
|
|
+ Loading,
|
|
|
+ TopHeader
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ pageTitle: '申请调班详情',
|
|
|
+
|
|
|
+ isLoading: false,
|
|
|
+ id: '',
|
|
|
+ adjustShiftDetail: {},
|
|
|
+ examineDetail: {},
|
|
|
+ only: "test"
|
|
|
+
|
|
|
+ }
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ this.id = this.$route.query.id;
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ getClass(ac, i) {
|
|
|
+ var reclass = ""
|
|
|
+
|
|
|
+ if (ac.action == "0") {
|
|
|
+ if (this.only == "test") {
|
|
|
+
|
|
|
+ this.only = i;
|
|
|
+ }
|
|
|
+ if (this.only == i) {
|
|
|
+ return "color3385FF"
|
|
|
+ } else {
|
|
|
+ return "mui-hidden"
|
|
|
+ }
|
|
|
+
|
|
|
+ }
|
|
|
+
|
|
|
+ if (ac.action == "3" || ac.action == "2") {
|
|
|
+ return "colorfe616c"
|
|
|
+ }
|
|
|
+
|
|
|
+ if (ac.action == "1" || ac.action == "4") {
|
|
|
+ return "color389E0D"
|
|
|
+ }
|
|
|
+ return reclass
|
|
|
+ },
|
|
|
+ getExamineDetail() {
|
|
|
+ API_sp.examineDetail(this.id).then(response => {
|
|
|
+ this.examineDetail = response
|
|
|
+
|
|
|
+ this.$emit('allowExamine', response.allowExamine);
|
|
|
+ }).catch(error => {
|
|
|
+
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ getAdjustShiftDetail() {
|
|
|
+ this.isLoading = true;
|
|
|
+
|
|
|
+ API.adjustShiftDetail(this.id).then(response => {
|
|
|
+ this.adjustShiftDetail = response;
|
|
|
+ this.isLoading = false;
|
|
|
+ }).catch(error => {
|
|
|
+ this.isLoading = false;
|
|
|
+ mui.toast(error);
|
|
|
+ })
|
|
|
+ },
|
|
|
+ asynCallBack() {
|
|
|
+
|
|
|
+ },
|
|
|
+ update() {
|
|
|
+ this.getAdjustShiftDetail();
|
|
|
+ this.getExamineDetail();
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.getAdjustShiftDetail();
|
|
|
+ this.getExamineDetail();
|
|
|
+ },
|
|
|
+ destroyed() {},
|
|
|
+
|
|
|
+ }
|
|
|
+</script>
|
|
|
+
|
|
|
+<style src="$project/assets/css/iconfont.css"></style>
|
|
|
+<style scoped src="$project/assets/css/xpwyfyy.css"></style>
|
|
|
+<style src="$project/assets/css/xsy.css"></style>
|
|
|
+<style scoped>
|
|
|
+ .color3385FF {
|
|
|
+ color: #3385FF
|
|
|
+ }
|
|
|
+
|
|
|
+ .color389E0D {
|
|
|
+ color: #389E0D
|
|
|
+ }
|
|
|
</style>
|