ys-app/src/pages/business/CRM/plan/planView.vue

<template>
  <view class="con-body">
    <view class="con-bg">
      <!-- 头部 -->
      <customHeader ref="customHeaderRef" :title="'周计划表'" :leftFlag="true" :rightFlag="true">
        <template #right>
          <!--          <view class="head-right" @click="handleAdd">
                      <uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>新增
                    </view>-->
        </template>
      </customHeader>

      <!-- 高度来避免头部遮挡 -->
      <view class="top-height" :style="{ paddingTop: navBarPaddingTop + 'px' }"></view>

      <!-- 正文内容 -->
      <view>

        <!-- 搜索 -->
        <view class="search">
          <picker mode="date" :value="defaultDate" :start="startDate" :end="endDate"
                  @change="bindDateChange" class="picker-bg">
            <view class="picker">
              <uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong" size="18"></uni-icons>
              <view>{{ defaultDate }}</view>
              <uni-icons type="down" size="18"></uni-icons>
            </view>
          </picker>
          <picker @change="bindPickerChange" :value="areaIndex" :range="AreaList" class="picker-bg">
            <view class="picker">
              <uni-icons type="person" size="18"></uni-icons>
              <view>{{ AreaList[areaIndex] }}</view>
              <uni-icons type="down" size="18"></uni-icons>
            </view>
          </picker>
          <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
        </view>

        <!-- 分页部分  -->
<!--        <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"-->
<!--                      :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"-->
<!--                      class="scroll-h" :class="{'loading-scroll':cssFlag}">-->
          <view class="white-bg" v-if="list.length">
            <!--v-for="(item, index) in list" :key="index" @click="handleDetail(item)"-->
            <view style="text-align: center; margin-bottom: 30rpx; font-size: 30rpx;">
              {{ parseInt(searchValue.selectDate.substring(5, 7)) }}月
              <span class="line"></span>
              {{searchValue.selectDate.substring(0, 4) }}年
            </view>
            <uni-row class="demo-uni-row">
              <uni-col :span="1">
                <view class="demo-uni-col right-radius">序号</view>
              </uni-col>
              <uni-col :span="2">
                <view class="demo-uni-col left-radius">姓名</view>
              </uni-col>
              <block v-for="(field, i) in OrdinalDate">
                <uni-col :span="3">
                  <view class="demo-uni-col mar-left">
                    <text>{{ WeekShortCN[i] }}</text>
                    <text v-if="list[0][field]">{{ list[0][field].substring(8) }}</text>
                  </view>
                </uni-col>
              </block>
            </uni-row>
            <block v-for="(item, index) in list" :key="index">
              <uni-row class="demo-uni-row">
                <uni-col :span="1">
                  <view class="demo-uni-col right-radius">
                    <text>{{ index + 1 }}</text>
                  </view>
                </uni-col>
                <uni-col :span="2">
                  <view class="demo-uni-col left-radius">
                    <text>{{ item.nickName || item.userName }}</text>
                  </view>
                </uni-col>
                <block v-for="(field, i) in WorkType">
                  <uni-col :span="3">
                    <view class="demo-uni-col mar-left color-white" @click="handleDetail(index, i)"
                          :style="{ backgroundColor: COLOR_MAP[item[field]] }"
                    ><!--@click="handleView(index, i)"-->
                      <text v-if="item[field]">{{ item[field] }}</text>
                      <text v-else style="color: gray">暂无</text>
                    </view>
                  </uni-col>
                </block>
              </uni-row>
            </block>
          </view>
          <view v-else style="text-align: center; margin-top: 50%; color: white">
            暂无数据
          </view>
<!--        </mescroll-uni>-->
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted} from 'vue'
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import {getNavBarPaddingTop} from '@/utils/system.js'
import {getAllWeekPlanList} from "@/api/crm/plan/getPlan";
import {AreaList, COLOR_MAP, OrdinalDate, WeekShortCN, WorkEvent, WorkType} from "./dataMap";
import {getCurrentWeekNum} from "./dateTimeUtils";
import {getDate} from "@/utils/datetime";
import {getWeekPlanListByDate} from "@/api/crm/plan/getPlan";

// const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
const currentWeekNum = getCurrentWeekNum();

// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
  navBarPaddingTop.value = getNavBarPaddingTop() * 2;
  uni.showLoading({})
  getPlanList().then(res=>{
    let {total, rows} = res;
    console.log(rows, "周计划数据获取成功")
    list.value = rows;
    uni.hideLoading();
  })
})

// 开始时间
let startDate = getDate('start');
// 结束时间，间隔10年
let endDate = getDate('end');
let defaultDate = getDate({format: true})
// 区域索引
let areaIndex = ref(0);
// 搜索内容
let searchValue = ref({
  selectDate: defaultDate,
  region: AreaList[areaIndex.value]
});

// 查询列表
let list = ref([]);
const mescrollRef = ref(null);
const upOption = ref({
  page: {num: 0, size: 10},
  noMoreSize: 5,
  empty: {tip: '~ 空空如也 ~'},
  textLoading: '加载中...',
  textNoMore: '已经到底了'
});

const downOption = ref({
  auto: true,
  textInOffset: '下拉刷新',
  textOutOffset: '释放更新',
  textLoading: '刷新中...'
});

let cssFlag = ref(false);//控制样式

// 获取数据列表
const getPlanList = (month, date, pageIndex, pageSize) => {
  return new Promise(async (resolve) => {
    // 查询参数
    let queryParams = {
      month: month ? month : currentMonth,
      date: date ? date : currentWeekNum,
      pageNum: pageIndex ? pageIndex : 1,
      pageSize: pageSize ? pageSize : 10
    }

    let {rows, total} = await getAllWeekPlanList(queryParams);
    resolve({
      rows,
      total
    });
  });
}

// 搜索日期变更
let bindDateChange = (e) => {
  defaultDate = e.detail.value
  searchValue.value.selectDate = e.detail.value;
  handleSearch();
}

// 查询搜索跳转
let handleSearch = () => {
  console.log(searchValue.value, '查询参数')
  uni.showLoading();
  getWeekPlanListByDate(searchValue.value).then(res=>{
    const {total, rows } = res;
    list.value = rows;
    console.log(rows, '查询成功');
  }).catch(err=>{
    console.warn(err,'数据获取失败');
  }).finally(()=>{
    uni.hideLoading();
  })
}
const mescrollInit = (mescroll) => {
  cssFlag.value = true;
  mescrollRef.value = mescroll;
};
// 搜索区域变更
const bindPickerChange = (e) => {
  // console.log('picker发送选择改变，携带值为', peopleIndex.value)
  areaIndex.value = e.detail.value
  searchValue.value.region = AreaList[e.detail.value]
  // 查询
  handleSearch();
}

// 跳转到详情
let handleDetail = (rowIndex, colIndex) => {
  let detail = list.value[rowIndex];
  let workDate = detail[OrdinalDate[colIndex]];
  let workType = detail[WorkType[colIndex]];
  let workEvent = detail[WorkEvent[colIndex]];
  if(workType && workEvent){
    uni.showModal({
      title: `${workDate}\n${workType}`,
      content: `${workEvent}`,
      confirmText: '关闭',
      showCancel: false,
      maskClosable: true, // 允许点击蒙层关闭弹窗
      success: function (res) {
        if (res.confirm) {

        } else if (res.cancel) {

        }
      }
    })
  }
  else{
    uni.showToast({
      title: "暂无内容",
      icon: "none",
      duration: 1500
    })
  }
}

</script>

<style lang="scss" scoped>
.demo-uni-row {
  margin-bottom: 4rpx;
  /* QQ、抖音小程序文档写有 :host，但实测不生效 */
  /* 百度小程序没有 :host，需要设置block */
  /* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
  display: block;
  /* #endif */
}

/* 支付宝小程序没有 demo-uni-row 层级 */
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
/* #ifdef MP-ALIPAY || MP-WEIXIN */
/deep/ .uni-row {
  margin-bottom: 4rpx;
}

/* #endif */

.search {
  display: flex;
  padding: 0 30rpx;
  height: 68rpx;
  overflow: hidden;
}

.search .btn-search {
  border: none;
  background: none;
  line-height: normal;
  color: #fff;
  /*line-height: 56rpx !important;*/
  padding: 10rpx 0 0;
  text-align: left;
  cursor: pointer;
}

.search .btn-search::after {
  display: none;
}

.search .picker-bg {
  display: flex;
  flex-wrap: nowrap;
  background-color: #6FA2F8;
  border-radius: 25px;
  color: #fff;
  font-size: 28rpx;
  padding: 0rpx 20rpx;
  /* #ifndef APP-PLUS */
  padding: 10rpx 20rpx 0 20rpx;
  /* #endif */
  margin-right: 20rpx;
}

.search .picker-bg .picker {
  display: flex;
  align-items: center;
  /* #ifndef APP-PLUS */
  padding-top: 2rpx;
  /* #endif */
}

.search .picker-bg .picker .uni-icons {
  color: #fff !important;
}

.search .picker-bg .picker .uni-icons:first-child {
  margin-right: 10rpx;
}

.search .picker-bg .picker .uniui-down {
  margin-left: 20rpx;
}

.line {
  display: inline-block;
  width: 10rpx;
  border-right: solid gray 1rpx;
  height: 20rpx;
  margin-right: 10rpx;
}

.demo-uni-col {
  height: 36px;
  border-radius: 4px;
  background-color: #E7E7E7;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 30rpx;
  line-height: 32rpx;
  padding-top: 10rpx;
  padding-bottom: 13rpx;
  min-height: 130rpx;
  overflow: hidden;
}

.mar-left {
  margin-left: 5rpx;
}

.right-radius {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

.left-radius {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

.color-white {
  color: white;
}

.white-bg {
  width: 690rpx;
  margin: 20rpx 0 0 0;
  border-radius: 8px 8px 0 0;
  /* #ifdef APP-PLUS */
  min-height: calc(100vh - 160rpx/*.topbar height*/ - 68rpx/*.search height*/ - 40rpx/*.white-bg padding-top*/ - 40rpx/*.white-bg padding-bottom*/);
  /* #endif */
  /* #ifndef APP-PLUS */
  min-height: calc(100vh - 116rpx/*.topbar height*/ - 68rpx/*.search height*/ - 40rpx/*.white-bg padding-top*/ - 40rpx/*.white-bg padding-bottom*/);
  /* #endif */
  //overflow-y: auto;
}

.white-bg.white-bg-2 {
  margin-bottom: 20rpx;
}

.white-bg.white-bg-3 {
  border-radius: 0
}

.white-bg .w-b-title {
  color: #3384DF;
  font-size: 38rpx;
}

.form-con {
  padding: 30rpx 0 0;
}

:deep(.form-con .uni-forms-item) {
  margin-bottom: 22px !important;
}
/*.con-bg {
  height: 420rpx;
}*/
</style>