usky-web-mobile/src/pages/business/common/projectMange/statistics/dailyReport.vue

<template>
    <u-sticky class="shadow-default" bgColor="#fff" style="top: 0">
      <u-navbar :titleStyle="{ color: '#000' }" :autoBack="false" title="日报" :placeholder="true" :safeAreaInsetTop="true" bgColor="#fff">
        <template #left>
            <u-icon name="arrow-left" size="20" color="#000" @click="returnTo('business/common/projectMange/statistics/index')"></u-icon>
        </template>
      </u-navbar>
    </u-sticky>
    <view class="timeSelect">
      <view @click="daySwitch(0)"><u-icon name="arrow-left" size="14" color="#000" class="left"></u-icon></view>
      <view><text>{{ day }}</text></view>
      <view @click="daySwitch(1)" ><u-icon name="arrow-right" size="14" :color="statusNext ? '#000' : '#ccc'" class="right" aria-disabled="true"></u-icon></view>
    </view>
    <view class="container">
      <view class="menu-list">
        <view class="list-cell">
          <view class="list"  :class="{ active: query.queryType == item.value }" @click="tabsClick(item.value)" v-for="(item,index) in activeList" :key="index">
            <text>{{ index == 0 ? statistics.submitOnTime :index == 1 ? statistics.submitLate : index == 2 ? statistics.notSubmitted : '' }}</text> 
            <text>{{ item.name }}</text> 
            <text v-if="item.value == 0 || item.value == 1"></text> 
            <text class="line"></text> 
          </view>
        </view>
      </view>
      <view class="report-list">
        <view class="report-cell" v-for="(el,index) in reportList" :key="index">
          <view class="flex report" @click="toPage(el.id,el.lockStatus)">
            <image :src="el.avatar" class="content-area-center-avatarImg mr10" v-if="el.avatar" />
            <u-avatar
              v-if="!el.avatar && query.queryType != 2 && el.createBy"
              class="content-area-center-avatar mr10"
              :text="el.createBy.length > 2 ? el.createBy.slice(1, 3) : el.createBy"
              shape="square"
              fontSize="12"
              color="#ffffff"
              :bgColor="proxy.$settingStore.themeColor.color"
            ></u-avatar>
            <u-avatar
              v-if="!el.avatar && query.queryType == 2 && el.userName"
              class="content-area-center-avatar mr10"
              :text="el.nickName.length > 2 ? el.nickName.slice(1, 3) : el.nickName"
              shape="square"
              fontSize="12"
              color="#ffffff"
              :bgColor="proxy.$settingStore.themeColor.color"
            ></u-avatar>
            <view class="left">
              <view class="content-area-center-title font14 mb5">{{ query.queryType == 2 ?  el.nickName : el.createBy }}</view>
              <view class="content-area-center-time font12">{{ el.deptName }}</view>
            </view>
            <view class="right" v-if="query.queryType != 2">
              <view class="content-area-center-time font12">{{ el.submitDateOutput }}</view>
              <image src="@/static/images/projectMange/lock.png" alt="" style="width: 10px;height: 12.5px;margin-top:10px;" v-if="el.lockStatus" />
              <view class="content-area-center-time font12" v-if="!el.lockStatus" :style="{color: el.readStatus ? '#999' : '#2A98FF',marginTop: '10px'}">{{ el.readStatus ? '已读' : '未读' }}</view>
            </view>
          </view>
        </view>
        <view class="noData" v-if="!total">
          <image src="@/static/images/data.png" alt="" />
        </view>
      </view>
    </view>
</template>
  
  <script setup>
  /*----------------------------------依赖引入-----------------------------------*/
  import { onLoad, onShow, onReady } from "@dcloudio/uni-app";
  import { ref, getCurrentInstance, reactive } from "vue";
  /*----------------------------------接口引入-----------------------------------*/
  import { projectApi } from "@/api/business/project.js";
  import { listDeptNoAuth } from "@/api/system/user";
  // import dayjs from 'dayjs/esm/index'
  /*----------------------------------组件引入-----------------------------------*/
  /*----------------------------------store引入-----------------------------------*/
  import { useStores } from "@/store/modules/index";
  import dayjs from "dayjs";
  /*----------------------------------公共方法引入-----------------------------------*/
  /*----------------------------------公共变量-----------------------------------*/
  const { proxy } = getCurrentInstance();
  const useStore = useStores();
  const day = ref("")
  const statusNext = ref(false)//下一天按钮状态
  const currentDate = ref("")//当前日期
  const date = reactive({
    year:"",
    month:"",
    day:""
  })
  const activeList = reactive([
    {name:"按时提交",value:0},
    {name:"迟交",value:1},
    {name:"未提交",value:2},
  ])
  const query = ref({
    queryType:0,
    submitDate:null,
    reportId:null,
    pageNum:1,
    pageSize:1000,
  })
  /*----------------------------------变量声明-----------------------------------*/
  const statistics = ref({
    submitOnTime: 0, //按时提交
    submitLate: 0, //迟交
    notSubmitted:0,  //未交
  })
  const loading = ref(false)
  const reportList = ref([])
  const pageSize = ref(20)
  const current = ref(1)
  const total = ref(0)
  var pages = getCurrentPages(); //获取当前页面栈的实例；
  /**
   * @页面初始化
   */
  function init(id,statisticalDate) {
    if(id){
      query.value.queryType = id
    }
    var time;
    if(statisticalDate){
      time = statisticalDate.split("-")
      day.value = `${time[0]}年${time[1]>=10 ? time[1] : time[1].slice(1)}月${time[2]>=10 ? time[2] : time[2].slice(1)}日`
      query.value.submitDate = statisticalDate
    }else{
      time = dayjs().format("YYYY-MM-DD").split("-")
      day.value = `${time[0]}年${time[1]}月${time[2]}日`
      query.value.submitDate = dayjs().format("YYYY-MM-DD")
    }
    currentDate.value = dayjs().format("YYYYMMDD")
    date.value = {
      year:time[0],
      month:time[1],
      day:time[2]
    }
    if(`${time[0]}${time[1]}${time[2]}` < currentDate.value){
      statusNext.value = true
    }else{
      statusNext.value = false
    }
    if(statisticalDate){
      getStatistics(statisticalDate)
    }else{
      getStatistics()
    }
    getPageList()
  }
  //获取统计数据
  function getStatistics(time) {
    projectApi().pmTimeConfCount(time ? {submitDate:query.value.submitDate} : null ).then((res) => {
      statistics.value = res.data;
    });
  }
  //获取分页数据
  function getPageList() {
    reportList.value = []
    projectApi().pmTimeConfPage(query.value).then((res) => {
      if(res.data.records){
        reportList.value = res.data.records[0];
        total.value = res.data.total;
        var deptItem = []
        listDeptNoAuth().then((res)=>{//部门名称
          deptItem = res.data
          for(let i=0;i<reportList.value.length;i++){
            reportList.value[i].deptName = deptItem.find(item => item.deptId == reportList.value[i].deptId).deptName
            if(query.value.queryType != 2){ //按时提交/迟交
              var monthDayWrap = reportList.value[i].submitDate.split(" ")[0]
              var time = reportList.value[i].submitDate.split(" ")[1].slice(0,5)
              var month = monthDayWrap.split("-")[1] >= 10 ? monthDayWrap.split("-")[1] : monthDayWrap.split("-")[1].slice(1)
              var day = monthDayWrap.split("-")[2] >= 10 ? monthDayWrap.split("-")[2] : monthDayWrap.split("-")[2].slice(1)
              reportList.value[i].submitDateOutput = `${month}月${day}日 ${time}` //提交时间
              reportList.value[i].lockStatus = reportList.value[i].ccTo.indexOf(useStore.userId) > -1 ? false : true //锁定状态
              reportList.value[i].readStatus = reportList.value[i].pmReportReaders.readAlready.map((item) => item).length > 0 ? true : false //阅读状态
              if(reportList.value[i].createBy == useStore.userName){//本人
                reportList.value[i].lockStatus = false
                reportList.value[i].readStatus = true
              }
            }
          }
        })
      }
    });
  }
  /** 日期选择*/
  function daySwitch(id){
      const targetDate = dayjs(`${date.value.year}-${date.value.month}-${date.value.day}`);
      var previousDay;
      if(id == 0){
        previousDay = targetDate.subtract(1, 'day');
      }
      if(id == 1){
        previousDay = targetDate.subtract(-1, 'day');
      }
      var time = previousDay.format("YYYY-MM-DD")
      var time2 = previousDay.format("YYYYMMDD")
      if(id == 0){
        uni.redirectTo({
          url:`/pages/business/common/projectMange/statistics/dailyReport?id=${query.value.queryType}&statisticalDate=${time}`
        })
      }
      if(id == 1 && time2 <= currentDate.value){
        uni.redirectTo({
          url:`/pages/business/common/projectMange/statistics/dailyReport?id=${query.value.queryType}&statisticalDate=${time}`
        })
      }
  }
  /**类型选择 */
  function tabsClick(id){
    query.value.queryType = id
    getStatistics(query.value.submitDate)
    getPageList()
  }
  /** 跳转到详情页 */
  function toPage(id,permission){
    if(query.value.queryType != 2){
      if(!permission){
        proxy.$tab.navigateTo(`/pages/business/common/projectMange/record/details?reportId=${id}`);
      }else{
        uni.showToast({
          title: '你不是接收人不能查看内容',
          icon: "none",
          duration: 2000,
        });
      }
    }
  }
  /**
 * 返回上级页面
 * @param defaultPage 默认页面
 */
  function returnTo(defaultPage) {
    if(getCurrentPages().length > 1){
      uni.navigateBack()
    }else{
      uni.redirectTo({
        url: `/pages/${defaultPage}`
      })
    }
  }
  onLoad((options) => {
    if(options?.id && options?.statisticalDate){
      init(options.id,options.statisticalDate)
    }else if(options?.id){
      init(options.id)
    }else if(options?.statisticalDate){
      init(null,options.statisticalDate)
    }else{
      init()
    }
  });
  
  onShow(() => {
    //调用系统主题颜色
    proxy.$settingStore.systemThemeColor([1]);
  });
  </script>
  <style lang="scss" scoped>
  .timeSelect{
    width:100%;
    height:35px;
    background: #fff;
    >view{
      display: inline-block;
      height:35px;
      line-height: 35px;
      position: relative;
      .left{
        position: absolute;
        top:11px;
        right:20px;
      }
      .right{
        position: absolute;
        top:11px;
        left:20px;
      }
    }
    view:nth-child(1),view:nth-child(3){
      width:20%;
    }
    view:nth-child(2){
      width:60%;
      text{
        position: absolute;
        width:100%;
        text-align: center;
      }
    }
  }
  .container{
    width:100%;
    height:calc(100% - 20px);
    margin:10px 0;
    .menu-list{
      width:100%;
      margin:0px 0 0 0px;
      padding:15px 10px;
      background: #ffffff;
      border-radius: 10px;
      .list-cell{
        display: flex;
        padding:0;
        .list{
          flex:1;
          text-align: center;
          position: relative;
          text{
            display: block;
            color:#999999;
          }
          text:nth-child(1){
            font-weight: 700;
            font-size: 14px;
          }
          text:nth-child(2){
            font-size: 12px;
            margin-top:10px;
          }
          
        }
        .list:nth-child(1),.list:nth-child(2){
            text:nth-child(3){
                width:1px;
                height:50%;
                position: absolute;
                top:25%;
                right:0;
                background: #E7E7E7;
            }
        }
        .active{
            text{
                color:#000;
            }
            .line{
                position: absolute;
                bottom:-36%;
                left:25%;
                width:50%;
                height:4px;
                border-radius: 2px;
                background: #000;
            }
        }
      }
    }
  }
  .report-list{
    height:calc(100vh - 160px);
    padding-bottom:50px;
    overflow: scroll;
    .report{
      padding:15px 10px;
      background: #ffffff;
      margin-top:4px;
      .left,.right{
        width:calc(50% - 25px);
      }
      .right{
        text-align: right;
      }
    }
    .noData{
      image{
        width:50%;
        margin:20px 25%;
      }
    }
  }

  .content-area {
  &-time {
    padding: 10px;
    text-align: left;
    color: #000000;
    font-weight: 600;
  }

  &-center {
    margin: 0;
    padding: 15px;
    overflow: hidden;
    border-bottom: 1px solid #eaeef1;
    &:last-child {
      border-bottom: 0px solid #eaeef1;
    }
    &-avatar {
      margin: auto 0;
      width:40px !important;
      height:40px !important;
    }
    &-avatarImg {
      width:40px !important;
      height:40px !important;
      border-radius: 4px;
      >img{
        width:100% !important;
      }
    }
    &-title {
      margin: 0 0 15px 0;
      font-weight: 600;
      color: #000000;
    }
  }
}
.list-cell::after{
  border:none;
}
  </style>