审核列表滚动样式修改

src/projects/business/views/Master/Attendance/VerifyLeaveList.vue

@@ -1,302 +1,317 @@
 <template>
-    <div>
-
-        <common @asynCallBack="asynCallBack"></common>
-        <top-header :pageTitle="pageTitle"></top-header>
-
-        <div class="mui-content vongi-wordcard-sp">
-            <div id="slider" class="mui-slider mui-fullscreen">
-                <div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
-                    <div class="mui-scroll">
-                        <a class="mui-control-item " @click="reloadList(0)" :class="listForm.type=='0'?'mui-active':''">
-                            <span class="fyy-badge">待处理<span class="mui-badge" v-if="num" >{{num}}</span></span>
-                        </a>
-                        <a class="mui-control-item" @click="reloadList(1)":class="listForm.type=='1'?'mui-active':''" >
-                            已处理
-                        </a>
-                    </div>
-                </div>
-                <div class="mui-slider-group">
-                    <div   class="mui-slider-item mui-control-content mui-active">
-                        <div id="scroll1" class="mui-scroll-wrapper">
-                            <div class="mui-scroll">
-
-                                <ul class="mui-table-view mui-table-view-chevron" v-if="listForm.type==1">
-                                    <li class="mui-table-view-cell mui-media" v-for="mod in recordList">
-                                        <router-link class="mui-navigate-right" :to="{name: 'MasterAttendanceLeaveInfo', query: {id:mod.id}}">
-                                            <div class="mui-media-object mui-pull-left">
-                                                <img :src="mod.picUrl"></div>
-                                            <div class="mui-media-body">
-                                                {{mod.name}}
-                                                <p class='mui-ellipsis'><span class="colorfe616c">{{mod.typeN}}</span>请假申请</p>
-                                            </div>
-                                            <button type="button" class="mui-btn mui-btn-success mui-btn-outlined" :class="statusColor[mod.status]" v-text="status[mod.status]"></button>
-                                        </router-link>
-                                    </li>
-                                </ul>
-                                <form class="mui-input-group fyy-checkbox" v-if="listForm.type==0">
-                                    <div class="mui-input-row mui-checkbox mui-left" v-for="mod in recordList">
-
-                                            <router-link class="mui-navigate-right" :to="{name: 'MasterAttendanceLeaveInfo', query: {id:mod.id}}">
-
-
-                                                <div class="mui-media-object mui-pull-left" >
-                                                    <img :src="mod.picUrl"></div>
-                                                <div class="mui-media-body" >
-                                                    {{mod.name}}
-                                                    <p class='mui-ellipsis'><span class="colorfe616c">{{mod.typeN}}</span>请假申请</p>
-                                                </div>
-                                            </router-link>
-
-                                        <input name="checkbox" v-model="selectIndex" :value="mod.id" type="checkbox" v-if="listForm.type==0" >
-                                    </div>
-                                </form>                               
-                            </div>
-                            <div class="fyy-bindfyy-btn" v-if="listForm.type==0">
-                                    <form class="mui-input-group">
-                                        <div class="mui-input-row mui-checkbox mui-left">
-                                            <label>全选</label>
-                                            <input name="checkbox"  v-model="allclick" value="0" @click="selectAll()"  type="checkbox">
-                                        </div>
-                                    </form>
-                                <button type="button" class="mui-btn mui-btn-danger" @click="openFrom('2','拒绝')">拒绝</button>
-                                <button type="button" class="mui-btn mui-btn-success" @click="openFrom('1','同意')">同意</button>
-                                </div>
-                        </div>
-                    </div>
-
-
-                </div>
-            </div>
-
-        </div>
-
-        <!-- 审批弹窗 -->
-        <div v-show="openFromVisible" class="mui-backdrop mui-active"></div>
-        <div v-show="openFromVisible" class="mui-card fyy-popup">
-            <div class="mui-card-header mui-h3">审批意见</div>
-            <div class="mui-card-content">
-                <div class="mui-input-row">
-                    <textarea v-model="subForm.approvalExplain" rows="5" placeholder="请输入"></textarea>
-                </div>
-            </div>
-            <div class="vongi-btn">
-                <button class="mui-btn mui-btn-primary" @click="doAction">提交</button>
-            </div>
-        </div>
-
-        <loading :visible="isLoading"></loading>
-
-    </div>
+	<div>
+
+		<common @asynCallBack="asynCallBack"></common>
+		<top-header :pageTitle="pageTitle"></top-header>
+
+		<div class="mui-content vongi-wordcard-sp">
+			<div id="slider" class="mui-slider mui-fullscreen">
+				<div id="sliderSegmentedControl" class="mui-scroll-wrapper mui-slider-indicator mui-segmented-control mui-segmented-control-inverted">
+					<div class="mui-scroll">
+						<a class="mui-control-item " @click="reloadList(0)" :class="listForm.type=='0'?'mui-active':''">
+							<span class="fyy-badge">待处理<span class="mui-badge" v-if="num">{{num}}</span></span>
+						</a>
+						<a class="mui-control-item" @click="reloadList(1)" :class="listForm.type=='1'?'mui-active':''">
+							已处理
+						</a>
+					</div>
+				</div>
+				<div class="mui-slider-group">
+					<div class="mui-slider-item mui-control-content mui-active">
+						<div id="scroll1" class="mui-scroll-wrapper">
+							<div class="mui-scroll">
+
+								<ul class="mui-table-view mui-table-view-chevron" v-if="listForm.type==1">
+									<li class="mui-table-view-cell mui-media" v-for="mod in recordList">
+										<router-link class="mui-navigate-right" :to="{name: 'MasterAttendanceLeaveInfo', query: {id:mod.id}}">
+											<div class="mui-media-object mui-pull-left">
+												<img :src="mod.picUrl"></div>
+											<div class="mui-media-body">
+												{{mod.name}}
+												<p class='mui-ellipsis'><span class="colorfe616c">{{mod.typeN}}</span>请假申请</p>
+											</div>
+											<button type="button" class="mui-btn mui-btn-success mui-btn-outlined" :class="statusColor[mod.status]"
+											 v-text="status[mod.status]"></button>
+										</router-link>
+									</li>
+								</ul>
+								<form class="mui-input-group fyy-checkbox" v-if="listForm.type==0">
+									<div class="mui-input-row mui-checkbox mui-left" v-for="mod in recordList">
+
+										<router-link class="mui-navigate-right" :to="{name: 'MasterAttendanceLeaveInfo', query: {id:mod.id}}">
+
+
+											<div class="mui-media-object mui-pull-left">
+												<img :src="mod.picUrl"></div>
+											<div class="mui-media-body">
+												{{mod.name}}
+												<p class='mui-ellipsis'><span class="colorfe616c">{{mod.typeN}}</span>请假申请</p>
+											</div>
+										</router-link>
+
+										<input name="checkbox" v-model="selectIndex" :value="mod.id" type="checkbox" v-if="listForm.type==0">
+									</div>
+								</form>
+							</div>
+							<div class="fyy-bindfyy-btn" v-if="listForm.type==0">
+								<form class="mui-input-group">
+									<div class="mui-input-row mui-checkbox mui-left">
+										<label>全选</label>
+										<input name="checkbox" v-model="allclick" value="0" @click="selectAll()" type="checkbox">
+									</div>
+								</form>
+								<button type="button" class="mui-btn mui-btn-danger" @click="openFrom('2','拒绝')">拒绝</button>
+								<button type="button" class="mui-btn mui-btn-success" @click="openFrom('1','同意')">同意</button>
+							</div>
+						</div>
+					</div>
+
+
+				</div>
+			</div>
+
+		</div>
+
+		<!-- 审批弹窗 -->
+		<div v-show="openFromVisible" class="mui-backdrop mui-active"></div>
+		<div v-show="openFromVisible" class="mui-card fyy-popup">
+			<div class="mui-card-header mui-h3">审批意见</div>
+			<div class="mui-card-content">
+				<div class="mui-input-row">
+					<textarea v-model="subForm.approvalExplain" rows="5" placeholder="请输入"></textarea>
+				</div>
+			</div>
+			<div class="vongi-btn">
+				<button class="mui-btn mui-btn-primary" @click="doAction">提交</button>
+			</div>
+		</div>
+
+		<loading :visible="isLoading"></loading>
+
+	</div>
 </template>
 
 
 <script>
-    import * as API_Leave from '@/apis/Master/leave'
-    import Common from '$project/components/Common.vue'
-    import Loading from '$project/components/Loading.vue'
-    import TopHeader from '$project/components/TopHeader.vue'
-    import isReachBottom from '$project/utils/isReachBottom'
-    import {
-        mapGetters,
-        mapMutations
-    } from 'vuex'
-    export default {
-        name: 'MasterAttendanceVerifyLeaveList',
-        components: {
-            Common,
-            Loading,
-            TopHeader
-        },
-        data() {
-            return {
-                pageTitle: '请假申请审核列表',
-
-                isLoading: false,
-
-                listForm: {
-                    pageIndex: 1,
-                    pageSize: 20,
-                    type: '0',
-                    totalPage: 1,
-                    result: 0,
-                },
-                num:0,
-                recordList: [],
-                status: ['待审核', '已批准', '已拒绝'],
-                statusColor: ['', 'status_a', 'status_r'],
-                selectIndex:[],
-                //审批内容弹窗显示
-                openFromVisible: false,
-                subForm:{
-                    id:0,
-                    status:0 ,
-                    approvalOpinions:'' ,//意见
-                    approvalExplain:'' ,//说明
-                },
-                allclick:false
-            }
-        },
-        created() {
-            //this.listForm.openId = this.openId;
-            //this.listForm.result = this.$route.query.result != null ? this.$route.query.result : 0;
-        },
-        methods: {
-            //同意拒绝
-            doAction() {
-
-                 console.log(this.selectIndex)
-                if (this.checkForm()) {
-                    var btnArray = ['否', '是'];
-                    var _this = this;
-                    mui.confirm('确认当操作？', '提示', btnArray, function(e) {
-                        _this.isLoading = true;
-
-
-                        _this.subForm.id=_this.selectIndex.toString();
-
-                        API_Leave.approved(_this.subForm).then(response => {
-                            _this.isLoading = false;
-
-                            _this.openFromVisible = false;
-                            _this.listForm.pageIndex = 1;
-                            _this.getList();
-                        }).catch(error => {
-                            _this.isLoading = false;
-                            mui.toast(error);
-                        })
-
-                    });
-                }
-            },
-            //检测表单
-            checkForm() {
-                if (!this.subForm.approvalExplain) {
-                    mui.toast('请填写审核意见');
-                    return false;
-                } else {
-                    return true;
-                }
-            },
-            reloadList(status){
-                this.listForm.type = status;
-                this.listForm.pageIndex = 1;
-                this.getList();
-            },
-            //选择所有
-            selectAll() {
-                console.log()
-                if (this.allclick) {
-                    this.selectIndex=[];
-                }else{
-                    this.selectIndex=[];
-                    for(var i in this.recordList){
-                      var mod=  this.recordList[i];
-                        this.selectIndex.push(mod.id);
-                    }
-                }
-            },
-            //显示内容表单
-            openFrom(status,val) {
-                if (!this.selectIndex.length) {
-                    mui.toast('请选择要处理的信息');
-                } else {
-                    this.subForm.status = status;
-                    this.subForm.approvalOpinions = val;
-                    this.openFromVisible = true;
-                }
-            },
-            //info
-            detail(id) {
-                this.$router.push({
-                    name: 'MasterAttendanceLeaveInfo',
-                    query: {
-                        id: id
-                    }
-                })
-            },
-            save() {
-                this.$router.push({
-                    name: 'MasterAttendanceLeaveForm',
-                    query: {
-
-                    }
-                })
-            },
-            //获取列表
-            getList() {
-                this.isLoading = true;
-                API_Leave.approvedPageList(this.listForm).then(response => {
-                    if (response) {
-                        if (this.listForm.pageIndex == 1) {
-                            this.recordList = response.data;
-                            this.listForm.pageIndex = response.pageNumber;
-                            this.listForm.totalPage = response.totalPage;
-                            if( this.listForm.type=='0'){
-                                this.num=response.recordsTotal;
-
-                            }
-                        } else {
-                            this.recordList = [
-                                ...this.recordList,
-                                ...response.data
-                            ];
-                        }
-                    }
-                    this.listForm.pageIndex++;
-                    this.isLoading = false;
-                }).catch(error => {
-                    this.isLoading = false;
-                    mui.toast(error);
-                })
-            },
-            //下拉事件
-            handleScrool() {
-                if (isReachBottom()) {
-                    console.log('到达底部')
-                    if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
-                        this.getList();
-                    } else {
-                        return;
-                    }
-                }
-            },
-
-            asynCallBack() {
-
-            },
-        },
-        mounted() {
-            this.getList();
-            //监控下拉加载事件
-            var _this = this;
-            window.addEventListener('scroll', _this.handleScrool);
-        },
-        destroyed() {
-            //销毁监听事件
-            var _this = this;
-            window.removeEventListener('scroll', _this.handleScrool);
-        },
-        computed: {
-            ...mapGetters({
-                openId: 'wx_openid',
-                token: 'token',
-            })
-        },
-
-    }
+	import * as API_Leave from '@/apis/Master/leave'
+	import Common from '$project/components/Common.vue'
+	import Loading from '$project/components/Loading.vue'
+	import TopHeader from '$project/components/TopHeader.vue'
+	import isReachBottom from '$project/utils/isReachBottom'
+	import {
+		mapGetters,
+		mapMutations
+	} from 'vuex'
+	export default {
+		name: 'MasterAttendanceVerifyLeaveList',
+		components: {
+			Common,
+			Loading,
+			TopHeader
+		},
+		data() {
+			return {
+				pageTitle: '请假申请审核列表',
+
+				isLoading: false,
+
+				listForm: {
+					pageIndex: 1,
+					pageSize: 20,
+					type: '0',
+					totalPage: 1,
+					result: 0,
+				},
+				num: 0,
+				recordList: [],
+				status: ['待审核', '已批准', '已拒绝'],
+				statusColor: ['', 'status_a', 'status_r'],
+				selectIndex: [],
+				//审批内容弹窗显示
+				openFromVisible: false,
+				subForm: {
+					id: 0,
+					status: 0,
+					approvalOpinions: '', //意见
+					approvalExplain: '', //说明
+				},
+				allclick: false
+			}
+		},
+		created() {
+			//this.listForm.openId = this.openId;
+			//this.listForm.result = this.$route.query.result != null ? this.$route.query.result : 0;
+		},
+		methods: {
+			//同意拒绝
+			doAction() {
+
+				console.log(this.selectIndex)
+				if (this.checkForm()) {
+					var btnArray = ['否', '是'];
+					var _this = this;
+					mui.confirm('确认当操作？', '提示', btnArray, function(e) {
+						if (e.index == 1) {
+							_this.isLoading = true;
+
+
+							_this.subForm.id = _this.selectIndex.toString();
+
+							API_Leave.approved(_this.subForm).then(response => {
+								_this.isLoading = false;
+
+								_this.openFromVisible = false;
+								_this.listForm.pageIndex = 1;
+								_this.getList();
+							}).catch(error => {
+								_this.isLoading = false;
+								mui.toast(error);
+							})
+						}
+					});
+				}
+			},
+			//检测表单
+			checkForm() {
+				if (!this.subForm.approvalExplain) {
+					mui.toast('请填写审核意见');
+					return false;
+				} else {
+					return true;
+				}
+			},
+			reloadList(status) {
+				this.listForm.type = status;
+				this.listForm.pageIndex = 1;
+				this.getList();
+			},
+			//选择所有
+			selectAll() {
+				console.log()
+				if (this.allclick) {
+					this.selectIndex = [];
+				} else {
+					this.selectIndex = [];
+					for (var i in this.recordList) {
+						var mod = this.recordList[i];
+						this.selectIndex.push(mod.id);
+					}
+				}
+			},
+			//显示内容表单
+			openFrom(status, val) {
+				if (!this.selectIndex.length) {
+					mui.toast('请选择要处理的信息');
+				} else {
+					this.subForm.status = status;
+					this.subForm.approvalOpinions = val;
+					this.openFromVisible = true;
+				}
+			},
+			//info
+			detail(id) {
+				this.$router.push({
+					name: 'MasterAttendanceLeaveInfo',
+					query: {
+						id: id
+					}
+				})
+			},
+			save() {
+				this.$router.push({
+					name: 'MasterAttendanceLeaveForm',
+					query: {
+
+					}
+				})
+			},
+			//获取列表
+			getList() {
+				this.isLoading = true;
+				API_Leave.approvedPageList(this.listForm).then(response => {
+					if (response) {
+						if (this.listForm.pageIndex == 1) {
+							this.recordList = response.data;
+							this.listForm.pageIndex = response.pageNumber;
+							this.listForm.totalPage = response.totalPage;
+							if (this.listForm.type == '0') {
+								this.num = response.recordsTotal;
+
+							}
+						} else {
+							this.recordList = [
+								...this.recordList,
+								...response.data
+							];
+						}
+					}
+					this.listForm.pageIndex++;
+					this.isLoading = false;
+				}).catch(error => {
+					this.isLoading = false;
+					mui.toast(error);
+				})
+			},
+			//下拉事件
+			handleScrool() {
+				if (isReachBottom()) {
+					console.log('到达底部')
+					if (this.listForm.pageIndex <= this.listForm.totalPage && this.isLoading == false) {
+						this.getList();
+					} else {
+						return;
+					}
+				}
+			},
+
+			asynCallBack() {
+
+			},
+		},
+		mounted() {
+			this.getList();
+			//监控下拉加载事件
+			var _this = this;
+			window.addEventListener('scroll', _this.handleScrool);
+		},
+		destroyed() {
+			//销毁监听事件
+			var _this = this;
+			window.removeEventListener('scroll', _this.handleScrool);
+		},
+		computed: {
+			...mapGetters({
+				openId: 'wx_openid',
+				token: 'token',
+			})
+		},
+
+	}
 </script>
 
 <style scoped src="$project/assets/css/xpwyfyy.css"></style>
 <style scoped src="$project/assets/css/iconfont.css"></style>
 <style scoped>
-    .status_r {
-        color: #fe616c !important;
-        border: 1px solid #fe616c !important;
-    }
-
-    .status_a {
-        color: #05c8af !important;
-        border: 1px solid #05c8af !important;
-    }
-</style>
+	.status_r {
+		color: #fe616c !important;
+		border: 1px solid #fe616c !important;
+	}
+
+	.status_a {
+		color: #05c8af !important;
+		border: 1px solid #05c8af !important;
+	}
+
+	.vongi-wordcard-sp .fyy-bindfyy-btn {
+		position: fixed;
+		background-color: #eee;
+	}
+
+	.mui-scroll-wrapper {
+		overflow: scroll;
+	}
+
+	.mui-fullscreen .mui-segmented-control~.mui-slider-group {
+		bottom: 45px;
+	}
+</style>

src/projects/business/views/Master/Attendance/VerifyList.vue

@@ -220,17 +220,19 @@
 					var btnArray = ['否', '是'];
 					var _this = this;
 					mui.confirm('确认当操作？', '提示', btnArray, function(e) {
-						_this.isLoading = true;
-						API_Attendance.doVerify(_this.subForm).then(response => {
-							_this.isLoading = false;
+						if (e.index == 1) {
+							_this.isLoading = true;
+							API_Attendance.doVerify(_this.subForm).then(response => {
+								_this.isLoading = false;
 
-							_this.openFromVisible = false;
-							_this.listForm.pageIndex = 1;
-							_this.getList();
-						}).catch(error => {
-							_this.isLoading = false;
-							mui.toast(error);
-						})
+								_this.openFromVisible = false;
+								_this.listForm.pageIndex = 1;
+								_this.getList();
+							}).catch(error => {
+								_this.isLoading = false;
+								mui.toast(error);
+							})
+						}
 					});
 				}
 			},
@@ -270,4 +272,17 @@
 		color: #05c8af !important;
 		border: 1px solid #05c8af !important;
 	}
+
+	.vongi-wordcard-sp .fyy-bindfyy-btn {
+		position: fixed;
+		background-color: #eee;
+	}
+
+	.mui-scroll-wrapper {
+		overflow: scroll;
+	}
+
+	.mui-fullscreen .mui-segmented-control~.mui-slider-group {
+		bottom: 45px;
+	}
 </style>