|
@@ -0,0 +1,336 @@
|
|
|
+
|
|
|
+
|
|
|
+<template>
|
|
|
+ <div class="mrd-container">
|
|
|
+ <van-nav-bar title="奖扣信息" left-text="返回" @click-left="$route_back" left-arrow />
|
|
|
+ <van-notice-bar color="#1989fa" background="#ecf9ff" left-icon="info-o" mode="closeable">
|
|
|
+ 管理者奖扣任务均为B分,对A分不做要求
|
|
|
+ </van-notice-bar>
|
|
|
+ <van-cell-group>
|
|
|
+ <DeptSelectorBtn title="选择部门" v-model="dept" :multi="false" :block="true"></DeptSelectorBtn>
|
|
|
+ <van-cell title="姓名" :value="searchForm.keyword" @click="showKeyword = true" :center="true" >
|
|
|
+ <van-icon name="arrow" slot="right-icon" v-if="!searchForm.keyword" />
|
|
|
+ <van-icon name="close" slot="right-icon" v-else style="margin-left: 10px" color="#646464" @click.stop="searchForm.keyword = ''" />
|
|
|
+ </van-cell>
|
|
|
+ <van-cell title="时间" :value="timeScopeText" is-link @click="showTimeScope = true" />
|
|
|
+ </van-cell-group>
|
|
|
+
|
|
|
+ <div class="mrd-content">
|
|
|
+ <scroller
|
|
|
+ ref="scroller"
|
|
|
+ :on-refresh="onRefresh"
|
|
|
+ >
|
|
|
+ <div class="mrd-list__item" v-for="item in dataList" :key="item.id" >
|
|
|
+ <div class="mrd-item__header">
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
+ </div>
|
|
|
+ <div class="mrd-item__content">
|
|
|
+ <div class="mrd-item">
|
|
|
+ <span class="mrd-item__value">{{ item.reward_point}}</span>
|
|
|
+ <span class="mrd-item__label">奖分</span>
|
|
|
+ </div>
|
|
|
+ <div class="mrd-item">
|
|
|
+ <span class="mrd-item__value">{{ item.deduction_point}}</span>
|
|
|
+ <span class="mrd-item__label">扣分</span>
|
|
|
+ </div>
|
|
|
+ <div class="mrd-item">
|
|
|
+ <span class="mrd-item__value black-color">{{ item.ratio ? item.ratio : '--' }}</span>
|
|
|
+ <span class="mrd-item__label">奖扣比例</span>
|
|
|
+ </div>
|
|
|
+ <div class="mrd-item">
|
|
|
+ <span class="mrd-item__value black-color">{{ item.exec}}</span>
|
|
|
+ <span class="mrd-item__label">奖扣人次</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <noData :list="dataList" />
|
|
|
+
|
|
|
+ </scroller>
|
|
|
+ </div>
|
|
|
+
|
|
|
+
|
|
|
+<!-- 姓名输入 -->
|
|
|
+ <van-dialog
|
|
|
+ v-model="showKeyword"
|
|
|
+ :close-on-click-overlay="true"
|
|
|
+ @confirm="searchForm.keyword = keyword"
|
|
|
+ >
|
|
|
+ <van-field label="姓名" placeholder="请数去用户名" v-model="keyword"></van-field>
|
|
|
+ </van-dialog>
|
|
|
+<!-- 日期区间选择 -->
|
|
|
+ <van-calendar
|
|
|
+ v-model="showTimeScope"
|
|
|
+ type="range"
|
|
|
+ :allow-same-day="true"
|
|
|
+ :min-date="minDate"
|
|
|
+ :max-date="maxDate"
|
|
|
+ :default-date="timeScope"
|
|
|
+ :show-confirm="false"
|
|
|
+ color="#26A2FF"
|
|
|
+ @close="calendarClose"
|
|
|
+ @confirm="calendarConfirm"
|
|
|
+ />
|
|
|
+
|
|
|
+ </div>
|
|
|
+
|
|
|
+</template>
|
|
|
+
|
|
|
+
|
|
|
+<script>
|
|
|
+import Vue from 'vue'
|
|
|
+import moment from 'moment'
|
|
|
+import {Calendar, Empty, NoticeBar} from 'vant'
|
|
|
+import DeptSelectorBtn from '@/components/DeptSelectorBtn'
|
|
|
+import {_debounce } from '@/utils/auth'
|
|
|
+Vue.use(Empty).use(Calendar).use(NoticeBar)
|
|
|
+export default {
|
|
|
+ name: 'reward_deduction_search',
|
|
|
+ components:{DeptSelectorBtn},
|
|
|
+ data(){
|
|
|
+
|
|
|
+
|
|
|
+ let today = new Date();
|
|
|
+ let minDate = new Date();
|
|
|
+ minDate.setTime(today.getTime() - 3600 * 1000 * 24 * 30 * 6);
|
|
|
+ let maxDate = new Date(today.getFullYear(),today.getMonth(),1);
|
|
|
+ maxDate.setMonth(maxDate.getMonth() + 1);
|
|
|
+ maxDate.setDate(0);
|
|
|
+
|
|
|
+ let startDate = new Date();
|
|
|
+ startDate.setTime(today.getTime() - 3600 * 1000 * 24 * 7);
|
|
|
+ startDate = moment(startDate).format('YYYY-MM-DD');
|
|
|
+ let endDate = moment(today).format('YYYY-MM-DD');
|
|
|
+
|
|
|
+ return{
|
|
|
+ dept:[],
|
|
|
+ searchForm:{
|
|
|
+ startDate:startDate,
|
|
|
+ endDate:endDate,
|
|
|
+ deptId:0,
|
|
|
+ keyword:'',
|
|
|
+ page:1,
|
|
|
+ pageSize:10
|
|
|
+ },
|
|
|
+ showKeyword:false,
|
|
|
+ keyword:'',
|
|
|
+ showTimeScope:false,
|
|
|
+ timeScope:[new Date(startDate),new Date(endDate)],
|
|
|
+ minDate:minDate,
|
|
|
+ maxDate:maxDate,
|
|
|
+ dataList:[],
|
|
|
+ isLoading:false,
|
|
|
+ isFinished:true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ watch:{
|
|
|
+ dept(val){
|
|
|
+ if (Array.isArray(val) && val.length > 0) {
|
|
|
+ this.searchForm.deptId = val[0].dept_id
|
|
|
+ } else {
|
|
|
+ this.searchForm.deptId = 0
|
|
|
+ }
|
|
|
+ },
|
|
|
+ timeScope(val){
|
|
|
+ this.searchForm.startDate = moment(val[0]).format('YYYY-MM-DD');
|
|
|
+ this.searchForm.endDate = moment(val[1]).format('YYYY-MM-DD');
|
|
|
+ },
|
|
|
+ 'searchForm.deptId'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.$refs.scroller.triggerPullToRefresh();
|
|
|
+ },
|
|
|
+ 'searchForm.keyword'(val,oVal){
|
|
|
+ if (val === oVal) return;
|
|
|
+ this.$refs.scroller.triggerPullToRefresh();
|
|
|
+ },
|
|
|
+ 'searchForm.startDate'(){
|
|
|
+ this.$refs.scroller.triggerPullToRefresh();
|
|
|
+ },
|
|
|
+ 'searchForm.endDate'(){
|
|
|
+ this.$refs.scroller.triggerPullToRefresh();
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed:{
|
|
|
+ timeScopeText(){
|
|
|
+ return moment(this.searchForm.startDate).format('MM/DD') + '-' + moment(this.searchForm.endDate).format('MM/DD')
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods:{
|
|
|
+ calendarClose(){
|
|
|
+ this.showTimeScope = false;
|
|
|
+ },
|
|
|
+ calendarConfirm(event){
|
|
|
+ const [start,end] = event;
|
|
|
+ this.timeScope = [start,end];
|
|
|
+ this.showTimeScope = false;
|
|
|
+ },
|
|
|
+ onRefresh(done){
|
|
|
+ if (!this.searchForm.startDate || !this.searchForm.endDate) {
|
|
|
+ done();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ let msg = {
|
|
|
+ type:'ess',
|
|
|
+ dept_id: this.searchForm.deptId,
|
|
|
+ employee_id:this.$userInfo().id,
|
|
|
+ start_date: this.searchForm.startDate,
|
|
|
+ end_date: this.searchForm.endDate,
|
|
|
+ keyword: this.searchForm.keyword,
|
|
|
+ page:0,
|
|
|
+ page_size:10
|
|
|
+ }
|
|
|
+ this.$socketApiTow.sendData(msg,(res)=>{
|
|
|
+ if (res.code !== 1 || res.type !== msg.type){
|
|
|
+ done();
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ this.dataList = res.result.list;
|
|
|
+ done();
|
|
|
+ })
|
|
|
+ },
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+</script>
|
|
|
+
|
|
|
+<style scoped lang="less">
|
|
|
+.mrd-container {
|
|
|
+ & /deep/ .department .van-button {
|
|
|
+ background-color: transparent;
|
|
|
+ border: none;
|
|
|
+ color: #fff;
|
|
|
+ max-width: 2.5rem;
|
|
|
+ padding: 0;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-filter__wrap {
|
|
|
+ position: relative;
|
|
|
+ padding: 0.15rem 0.32rem;
|
|
|
+
|
|
|
+ & /deep/ .van-checkbox__label {
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #909399;
|
|
|
+ }
|
|
|
+
|
|
|
+ & /deep/ .van-checkbox__icon {
|
|
|
+ position: relative;
|
|
|
+ top: -0.05em;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-content {
|
|
|
+ position: relative;
|
|
|
+ height: calc(100% - 4.6rem);
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-list__item {
|
|
|
+ margin-bottom: 0.24rem;
|
|
|
+ padding: 0 0.32rem 0.32rem 0.32rem;
|
|
|
+ font-size: 0.32rem;
|
|
|
+ color: #303133;
|
|
|
+ background: #fff;
|
|
|
+ touch-action: none;
|
|
|
+
|
|
|
+ & .mrd-item__header {
|
|
|
+ display: flex;
|
|
|
+ padding: 0.24rem 0;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ & .mrd-item__icon {
|
|
|
+ display: flex;
|
|
|
+ margin-right: 0.16rem;
|
|
|
+ width: 0.56rem;
|
|
|
+ height: 0.56rem;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #26a2ff;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ border-radius: 100%;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-item__standard {
|
|
|
+ margin-left: 0.2rem;
|
|
|
+ padding: 0.02rem 0.08rem;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #53B87F;
|
|
|
+ border-radius: 0.06rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-item__content {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ & .mrd-item {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ & /deep/ .icon-doubt {
|
|
|
+ position: absolute;
|
|
|
+ top: 0.13rem;
|
|
|
+ right: -0.3rem;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-item__value {
|
|
|
+ color: #26a2ff;
|
|
|
+ font-size: 0.44rem;
|
|
|
+ font-weight: 600;
|
|
|
+
|
|
|
+ &.black-color {
|
|
|
+ color: #444444;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-item__label {
|
|
|
+ position: relative;
|
|
|
+ display: inline-block;
|
|
|
+ padding-top: 0.04rem;
|
|
|
+ font-size: 0.28rem;
|
|
|
+ color: #303133;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+
|
|
|
+ & .mrd-item__target {
|
|
|
+ padding-top: 0.08rem;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #909399;
|
|
|
+ font-weight: 400;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .mrd-standard__wrap {
|
|
|
+ display: flex;
|
|
|
+ padding-top: 0.1rem;
|
|
|
+ flex-direction: row;
|
|
|
+
|
|
|
+ .mrd-standard__item {
|
|
|
+ display: flex;
|
|
|
+ flex: 1;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ & .mrd-standard__text {
|
|
|
+ padding: 0.02rem 0.08rem;
|
|
|
+ font-size: 0.24rem;
|
|
|
+ color: #fff;
|
|
|
+ background: #53B87F;
|
|
|
+ border-radius: 0.06rem;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ & .van-list{
|
|
|
+ background-color: #F5F7FA;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+
|
|
|
+</style>
|