storevisit-ui-mobile/src/views/signApproval/mySignApproval.vue

<template>
  <div class="bgcolor">
    <!--        顶部条-->
    <div class="navBarTOP">
      <van-nav-bar class="navBar" title="历史签约" left-arrow @click-left="onClickLeft"/>
      <div class="searchDiv">
        <van-row style="background-color: #fff;" type="flex">
          <div style="flex: 1;">
            <van-search v-model="fromValue.storeRequest" left-icon="search" placeholder="信息代码/店名/申请人" show-action>
              <template #action>
                <div @click="onSearch">搜索</div>
              </template>
            </van-search>
          </div>
          <div class="visitSearch">
            <van-dropdown-menu active-color="#0057ba">
              <van-dropdown-item ref="item" title="筛选">
                <van-form>
                  <div style="padding:0 10px;">
                    <h4 style="color:#444;text-align: left;    margin: 10px 0;">组织架构</h4>
                    <van-row class="contentpd16" gutter="20">
                      <van-col span="12" style="padding-bottom: 10px;">
                        <el-select v-model="fromValue.companyId" clearable placeholder="全部公司" @change="onCompanyConfirm">
                          <el-option v-for="item in companyList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
                        </el-select>
                      </van-col>
                      <van-col span="12" style="    padding-bottom: 10px;">
                        <el-select v-model="fromValue.regionId" clearable placeholder="全部大区" @change="onRegionConfirm">
                          <el-option v-for="item in regionList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
                        </el-select>
                      </van-col>
                      <van-col span="12">
                        <el-select v-model="fromValue.deptId" clearable placeholder="全部销售部" @change="onDeptConfirm">
                          <el-option v-for="item in deptList" :key="item.deptId" :label="item.deptName" :value="item.deptId"></el-option>
                        </el-select>
                      </van-col>
                      <van-col span="12" style="    padding-bottom: 10px;">
                        <div style="height: 40px;"> &nbsp;</div>
                      </van-col>
<!--                      <van-col span="12">-->
<!--                        <el-select v-model="fromValue.district" placeholder="全部业务员" @change="onDistrictConfirm">-->
<!--                          <el-option-->
<!--                              v-for="item in districtList"-->
<!--                              :key="item.countyCode"-->
<!--                              :label="item.text"-->
<!--                              :value="item.countyCode">-->
<!--                          </el-option>-->
<!--                        </el-select>-->
<!--                      </van-col>-->
                      <van-col span="12">
                        <div class="monthNowsin" @click="startTimeshow = true">
                          <span class="month">{{ fromValue.startTime }}</span>
                          <van-icon class="CalendarIcon" :name="timeico"/>
                        </div>
                      </van-col>
                      <van-col span="12">
                        <div class="monthNowsin" @click="endTimeshow = true">
                          <span class="month">{{ fromValue.endTime }}</span>
                          <van-icon class="CalendarIcon" :name="timeico"/>
                        </div>
                      </van-col>
                    </van-row>

                  </div>
                  <div style="padding:0 10px;">
                    <h4 style="color:#444;text-align: left;    margin: 10px 0;">关键词</h4>
                    <van-field
                        v-model="fromValue.storeRequest"
                        label=""
                        placeholder="信息代码/店名/申请人"
                    />
                  </div>
                  <div style="margin: 16px;">
                    <van-row gutter="20">
                      <van-col span="12">
                        <van-button block size="normal" style="background-color: #f5f5f5;" type="default"
                                    @click="cancelSearch">清除筛选
                        </van-button>
                      </van-col>
                      <van-col span="12">
                        <van-button block size="normal" style="background-color: #0057ba;" type="info"
                                    @click="moreSearch">搜索
                        </van-button>
                      </van-col>
                    </van-row>
                  </div>
                </van-form>
              </van-dropdown-item>
            </van-dropdown-menu>
          </div>
        </van-row>
      </div>
    <van-tabs v-model="fromValue.status" color="#0057ba"  @change="tabChange">
      <van-tab title="审批中" name="1" :disabled="disabled"></van-tab>
      <van-tab title="审批完成" name="2" :disabled="disabled"></van-tab>
      <van-tab title="拒绝" name="3" :disabled="disabled"></van-tab>
    </van-tabs>
    </div>
    <div class="container">
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <div class="lineGrey"></div>
      <van-list  v-model="loading" :finished="finished" finished-text="--已经到底了--" @load="onLoad">
      <div class="cellcontent brud weekList" v-for="(item,index) in  list" :key="index">
        <van-cell @click="approveFn(item)" is-link>
          <div class="cardContent">
            <div class="title" >
              <p class="textLeft" >{{item.storeName}}({{item.storeCode}})</p>
              <p class="textRight" v-if="item.status=='1'&&item.taskId==null">审批中</p>
              <p class="textRight" v-if="item.status=='1'&&item.taskId!=null" style="color:red;">退回修改</p>
              <span  class="textRight" style="color: #07c160;" v-if="item.status==2">审批完成</span>
              <p class="textRight" v-if="item.status=='3'" style="color:red;">拒绝</p>
            </div>
            <div class="info">类型：{{selectDictLabel(storeTypeList, item.storeCategory)}}</div>
            <div class="info">地址：{{ item.addressLine }}</div>
            <div class="info">申请人：{{item.nickName}}</div>
            <div class="info">申请时间：{{item.createTime}}</div>
            <div class="info" v-if="fromValue.status=='2'">审批时间：{{item.updateTime}}</div>
          </div>
        </van-cell>
      </div>
      <van-empty description="" v-if="list.length==0"/>
      </van-list>
    </div>
    <van-overlay :show="startTimeshow" @click="startTimeshow = false" class="wrapperConent">
      <div class="wrapperTime" @click.stop>
        <div class="block" >
          <van-datetime-picker
              v-model="startcurrentDate"
              type="date"
              title="开始日期"
              @confirm="dateeconfirm"
              @cancel="startTimeshow=false"
          />
        </div>
      </div>
    </van-overlay>
    <van-overlay :show="endTimeshow" @click="endTimeshow = false" class="wrapperConent">
      <div class="wrapperTime" @click.stop>
        <div class="block" >
          <van-datetime-picker
              v-model="currentDate"
              type="date"
              title="结束日期"
              :min-date="endminDate"
              :max-date="maxDate"
              @confirm="endTimeconfirm"
              @cancel="endTimeshow=false"
          />
        </div>
      </div>
    </van-overlay>
  </div>
</template>

<script>
import {getCWStoreTypeList, getvisitDeptInfo, storeCustomerSignList} from "@/api/index";
import timeico from "@/assets/Icon/datatims.png";
export default {
  name: "MyHistoricalWeekly",
  data() {
    return {
      disabled:false,
      startTimeshow:false,
      endTimeshow:false,
      startTime:"",
      loading: false,
      finished: false,
      timeico:timeico,
      minDate: new Date(2022, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      startcurrentDate: new Date(),
      endminDate: new Date(),
      startmaxDate: new Date(),
      storeTypeList:[],
      companyList:[],
      deptList:[],
      regionList:[],
      list:[],
      fromValue: {
        status:"1",
        storeRequest: "",
        companyId:"", // 公司id，必传 Long类型
        regionId:"", // 大区id，必传  Long类型
        deptId:"", // 部门id，如果为周报或日报为必传  Long类型
        userId:"", // 业务员id，如果为日报为必传      Long类型
        startTime:"", // 开始时间，必传  格式：yyyy-MM-dd  String类型
        endTime:"", // 结束时间，必传  格式：yyyy-MM-dd  String类型
        pageNum:1 , // 当前页码  int类型
        pageSize:10, // 当前每页条数  int类型
      }
    }
  },
  created() {
    getCWStoreTypeList({}).then(res => {
      this.storeTypeList = res.data
    })
    // this.approveList()
  },
  // watch: {
  //   $route(to, from) {
  //     this.powerGrade = localStorage.getItem("powerGrade")
  //     this.fromValue.pageNum=1
  //     if(to.path=="/mySignApproval"&&from.path=="/My/index"){
  //       this.approveList()
  //     }
  //     if(to.path=="/signApprovalList"&&from.path=="/signApproval"){
  //       this.fromValue.pageNum=1
  //       this.approveList()
  //     }
  //     if(to.path=="/mySignApproval"&&from.path=="/signApproval"){
  //       this.fromValue.pageNum=1
  //       this.approveList()
  //     }
  //   }
  // },
  activated() {
    // watch: {
    //   $route(to, from) {
    //     if (from.path == "/My/index" && to.path == "/historAllVisit") {
    this.info();
    this.userList=[]
    this.pageNum=1;
    this.list=[];
    this.powerGrade = localStorage.getItem("powerGrade")
    this.getDeptInfo("dept")
    if(this.powerGrade==5){
      setTimeout(()=>{
        if(this.$route.query.userCode==undefined){
          this.companyName=this.companyList[0].deptName;
          this.companyCode=this.companyList[0].deptId;
        }
        this.getDeptInfo("dept",1)
      },1000)
    }
    if(this.powerGrade==4){
      setTimeout(()=>{
        this.getDeptInfo("dept",1)
      },1000)
    }
    if(this.powerGrade==3){
      setTimeout(()=>{
        this.getDeptInfo("dept",2)
      },1000)
    }
    if(this.powerGrade==2||this.powerGrade==1){
      setTimeout(()=>{
        this.getDeptInfo("user")
      },2000)
    }
    setTimeout(()=>{
      this.onSearch();
    },1000)
    // }
    // }
    // },
  },
  methods: {
    getDay(day) {
      var today = new Date();
      var targetday_milliseconds = today.getTime() + 1000 * 60 * 60 * 24 * day;
      today.setTime(targetday_milliseconds); //注意，这行是关键代码
      var tYear = today.getFullYear();
      var tMonth = today.getMonth();
      var tDate = today.getDate();
      tMonth = this.doHandleMonth(tMonth + 1);
      tDate = this.doHandleMonth(tDate);
      return tYear + "-" + tMonth + "-" + tDate;
    },
    doHandleMonth(month) {
      var m = month;
      if (month.toString().length == 1) {
        m = "0" + month;
      }
      return m;
    },
    info(){
      this.query = this.$route.query;
      this.fromValue.startTime = this.getDay(-7)
      this.startcurrentDate = new Date(this.getDay(-7))
      this.fromValue.endTime = this.parseTime(new Date(), '{y}-{m}-{d}')
      this.endminDate = new Date(this.getDay(-7))
    },
    dateeconfirm() {
      this.startTimeshow = false
      this.fromValue.startTime = this.parseTime(this.startcurrentDate, '{yy}-{mm}-{dd}')
      this.fromValue.endminDate = new Date(this.startcurrentDate)
      this.onSearch()
    },
    endTimeconfirm() {
      this.endTimeshow = false
      this.fromValue.endTime = this.parseTime(this.currentDate, '{yy}-{mm}-{dd}')
      this.startmaxDate = new Date(this.currentDate)
      this.onSearch()
    },
    onCompanyConfirm(){}, onRegionConfirm(){}, onDeptConfirm(){},
    getDeptInfo(type,grade){
      this.fromValue.type=type
      if(type=="dept"){
        if(grade=="1"){
          this.fromValue.parentId=this.companyCode
        }else if(grade=="2"){
          this.fromValue.parentId=this.regionCode
        }else{
          this.fromValue.type=""
          this.fromValue.parentId=""
        }
      }else if(type=="user"){
        this.fromValue.parentId=this.deptCode
      }
      getvisitDeptInfo(this.fromValue).then(res=>{
        if(type=="dept"){
          if(grade=="1"){
            if(res.data.region!=null){
              this.regionList=[{deptName:"全部大区",deptId:""}].concat(res.data.region)
            }
          }else if(grade=="2"){
            if(res.data.dept!=null){
              this.deptList=[{deptName:"全部销售部",deptId:""}].concat(res.data.dept)
            }
          }else{
            this.companyList=res.data.company
            if(this.$route.query.userCode==undefined){
              this.companyName=res.data.company[0].deptName
              this.companyCode=res.data.company[0].deptId
            }
            if(res.data.dept!=null){
              this.deptName=res.data.dept[0].deptName
              this.deptCode=res.data.dept[0].deptId
              this.deptList=res.data.dept
            }
            if(res.data.region!=null){
              this.regionName=res.data.region[0].deptName
              this.regionCode=res.data.region[0].deptId
              this.regionList=res.data.region
            }
            if(res.data.user!=null){
              this.userList=res.data.user
              this.userCode=""
            }
          }
        }else if(type=="user"){
          if(res.data.user!=null){
            this.userList=[{nickName:"全部业务员",userId:""}].concat(res.data.user)
          }
        }
      })
    },
    moreSearch() {

      this.onSearch();
      this.$refs.item.toggle();
    },
    onSearch() {
      window.scrollTo(0, 0)
      this.fromValue.pageNum = 1
      this.list = []
      this.finished = true;
      this.onLoad()
    },
    //取消搜索
    cancelSearch() {
      this.fromValue = {
        province: "",
        city: "",
        district: "",
        storeCategory: "",
        storeName: "",
        chainName: "",
        label1: ""
      }
      this.info()
      this.storeTypeVal = []
      // this.$refs.item.toggle();
    },
    onLoad(){
      this.approveList()
    },
    approveFn(row){
      this.list=[];
      var edit=true
      if(row.status=='1'&&row.taskId!=null&&row.taskId!=undefined){
        edit=true
      }else{
        edit=false
      }
      this.$router.push({
        path: "/signApproval",
        query: {signId: row.signId,type:"1",addressLine:row.addressLine,itemType:"dkhqy",edit:edit,taskId:row.taskId,instanceId:row.instanceId,visitsId:row.visitsId}
      })
    },
    tabChange() {
      this.disabled = true;
      this.list=[];
      this.fromValue.pageNum=1
      this.approveList()
    },
    approveList() {
      let loading1 = this.$toast.loading({
        duration: 0,
        message: '数据加载中...',
        forbidClick: true,
      });
      if (this.refreshing) {
        this.list = [];
        this.refreshing = false;
      }
      storeCustomerSignList(this.fromValue).then(res => {
        loading1.clear()
        this.disabled = false;
        this.loading = false;
        if(this.fromValue.pageNum==1){
          this.list=[];
          this.refreshing =false;
        }
        this.list = this.list.concat(res.rows)
        this.finished = true;
        if(this.list.length >=res.total) {
          this.finished = true;
        }else{
          this.finished = false;
        }
        this.fromValue.pageNum=this.fromValue.pageNum+1
      })
    },
    onClickLeft() {
      this.$router.push("/My")
    }
  }
}
</script>
<style lang="scss">

.monthNowsin {
  height:40px;
  line-height: 40px;
  text-align: left;
  font-weight: bold;
  padding: 0 16px;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 6px;
  margin:8px 0;
  border: 1px solid #ccc;
  position: relative;
  color: #333;
  font-size: 14px;
  .van-cell__left-icon, .van-cell__right-icon{
    line-height: 34px;
  }
  .CalendarIcon {
    float: right;
    font-size: 24px;
    color: #1989fa;
    margin-top: 6px;
    position: absolute;
    right: 12px;
    img {
      height: 0.8em;
    }
  }
}
.searchDiv {
.van-search {
  background: #fff;
}

.van-search__action {
  font-size: 14px;
  color: #0057ba;
  font-weight: bold;
  background: #f1f1f1;
  border-bottom-right-radius: 60px;
  border-top-right-radius: 60px;
  border: 1px solid #ccc;
  padding: 0 20px;
}

.van-search--show-action {
  padding-right: 12px
}

.van-search__content {
  border: 1px solid #ccc;
  border-bottom-left-radius: 60px;
  border-top-left-radius: 60px;
  background: #f1f1f1;
  border-right: 0;
}
}
.visitSearch {
  width: 68px;
  color: #0057ba;
  font-size: 14px;
}

.visitSearch .van-dropdown-menu__bar {
  box-shadow: 0 0 0 #fff;
  height: 52px;
}

.visitSearch .van-dropdown-menu__item {
  justify-content: normal;
}

.visitSearch .van-dropdown-menu__title {
  border-left: 1px solid #ccc;
}

.visitSearch .van-cell {
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 6px;
}

.visitSearch .el-select {
  margin: 0 !important;
  width: 100%;
}

.visitSearch .el-input__inner {
  padding: 0 26px 0 6px;
}

.visitSearch .van-dropdown-item {
  height: 98%;
}
.bgcolor {
  background-color: #f5f5f5;
}


.cardContent {
  box-sizing: border-box;
}

.cardContent .title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  line-height: 14px;
}

.cardContent .info {
  font-size: 14px;
  color: #999;
  line-height: 26px;
}

.cardContent .title p {
  padding: 0;
  margin: 0
}

.cardContent .title .textLeft {
  display: inline-block;
  padding-bottom: 10px;
}

.cardContent .title .textRight {
  float: right;
  color: #0057ba;
}

.van-tab--active {
  color: #0057ba;
}

.brud {
  margin: 16px;
  border-radius: 8px;
  overflow: hidden;
}
.weekList{border-radius:0;}
.weekList .van-cell__right-icon{top:4px;}
.weekList .van-cell{border-radius: 6px;overflow: hidden;}
.weekList .cardContent .title{line-height: 32px}
.wrapperConent{height: 40%;bottom: 0;z-index: 20;top: auto;}
//.wrapperTime
</style>