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

<!--
* @Description 我的计划列表
 -->
<template>
  <view class="con-body">
    <view class="con-bg">
      <!-- 头部 -->
      <customHeader ref="customHeaderRef" :title="'周计划列表'" :leftFlag="true" :rightFlag="true">
        <template #right>
          <view class="head-right" @click="handleCreate">
            <uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>
            新增
          </view>
        </template>
      </customHeader>
      <!-- 高度来避免头部遮挡 -->
      <view class="top-height"></view>

      <view class="week-plan-title">
        <view v-if="userInfo.nickName">姓名：<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>
        <view v-if="weekNum">
          {{ yearMonth }}
          <view v-if="isThisWeek" style=" display: inline-block;">
            <strong>本周</strong>
          </view>
          <view v-else style="display: inline-block"> 第 <strong>{{ weekNum }}</strong> 周</view>
        </view>
      </view>

      <view class="nav-list">
          <view class="nav-item" :class="{active:index==activeTab}"
                    v-for="(item,index) in allPlans" :key="index"
                    @click="handleNav(index)"
        >{{ getTapLabel(item) }}
        </view>
      </view>

      <block v-if="onShowPlan" v-for="(item, index) in OrdinalDate" :key="item">
        <!-- 计划详情 -->
        <view class="white-bg white-bg-2" :class="index == 0 ? 'white-bg-r' : ''">
          <view class="report-list">
            <view class="w-b-title">
              <view class="r-left">{{ getWorkDate(index) }} {{ WeekCN[index] }}</view>
              <view class="r-right btn-edit" @click="handleEdit(index)">编辑</view>
            </view>
            <view class="r-list">
              <view class="r-left">工作类型</view>
              <view class="r-right">{{ getWorkType(index) || '' }}</view>
            </view>
            <view class="border-bottom b-width"></view>
            <view class="r-list">
              <view class="r-left">内容</view>
              <view class="r-right">{{ getWorkEvent(index) || '' }}</view>
            </view>
          </view>
        </view>
		<view class='bottom-spliter bg-gray'></view>
      </block>

      <!-- 底部加高度来避免tabbar遮挡 -->
      <!-- <view class="bottom-height bg-gray"></view> -->
    </view>


  </view>
</template>

<script setup>

import {onMounted, ref, reactive, computed} from "vue";
import {useRoute} from "vue-router"
import customHeader from '@/components/customHeader.vue'
import {WeekCN, WorkType, WorkEvent, OrdinalDate} from "./dataMap";
import {getCurrentWeekNum} from "./dateTimeUtils";
import {getUserInfo, getWeeklyPlanList} from "@/api/crm/plan/getPlan";
import {useMessage} from "@/utils/message";
import {judgeThisWeek} from "@/api/crm/plan/updatePlan";

const userInfo = ref(null)
const route = useRoute();
userInfo.value = {
  nickName: '',
  userName: ''
}
const queryParams = ref({
  pageNum: 1,
  pageSize: 10
});
const date = new Date(); // 当前日期
const activeTab = ref(0);
const yearMonth = ref(null);
const weekNum = ref(0);
const allPlans = ref([]);
const onShowPlan = ref(null);
const message = useMessage();

let getWorkDate = (index) => {
  return onShowPlan.value ? onShowPlan.value[OrdinalDate[index]] : '';
};
let getWorkType = (index) => {
  return onShowPlan.value ? onShowPlan.value[WorkType[index]] : '';
};
let getWorkEvent = (index) => {
  return onShowPlan.value ? onShowPlan.value[WorkEvent[index]] : '';
};
// 刷新计划列表
const refreshPlanList = () => {
  message.showLoading();
  // 获取用户信息
  // getUserInfo().then(res => {
  //   userInfo.value = res.user;
  //   console.log(route.path, "：用户信息获取成功");
  // }).catch(err => {
  //   console.warn(err, "用户信息获取失败")
  // });
  // 获取周计划列表
  getWeeklyPlanList(queryParams.value).then(res => {
    const {rows} = res;
    if (rows.length > 0) {
      allPlans.value = rows;
      onShowPlan.value = rows[0];
      weekNum.value = rows[0].date;
      yearMonth.value = rows[0].firstDayOfTheWeek.substring(0, 7);
    }
    console.log(route.path, "：用户周计划列表获取成功");
  }).catch(err => {
    console.warn(err, "用户周计划列表获取失败");
    message.error("周计划获取失败");
  }).finally(() => {
    message.hideLoading();
  })
}

onMounted(() => {
  refreshPlanList();
})

// 判断计划是否为本周
let isThisWeek = computed(() => {
  let theYear = onShowPlan.value.year || onShowPlan.value.firstDayOfTheWeek.substring(0, 4); // 获取年份
  weekNum.value = onShowPlan.value.date; // 当目前展示的计划列表变化时，更新weekNum.value
  yearMonth.value = onShowPlan.value.firstDayOfTheWeek.substring(0, 7); // 获取年月
  return date.getFullYear() === parseInt(theYear) &&
      date.getMonth() + 1 === onShowPlan.value.month &&
      getCurrentWeekNum() === onShowPlan.value.date;
})

// 跳转到计划编辑页
function handlePlanEdit(param, isAdd) {
  // 在起始页面跳转到planEdit.vue页面，并监听planEdit.vue发送过来的事件数据
  uni.navigateTo({
    url: '/pages/business/CRM/plan/planEdit',
    events: {
      // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
      // 监听页面返回事件，用于刷新数据
      refreshData: function () {
        refreshPlanList(); // 页面返回时调用刷新函数
      }
    },
    success: function (res) {
      // 通过eventChannel向被打开页面传送数据
      res.eventChannel.emit('editPlanData', {param, isAdd})
    }
  })
}

// 创建计划
function handleCreate() {
  console.log("handleCreate", "前往增加计划");
  const itemList = ["本周", "下周"];
  uni.showActionSheet({
    itemList,
    success(result) {
      // console.log("选择"+itemList[res.tapIndex])
      // if(res.tapIndex == 0){ // 创建本周计划
      judgeThisWeek({
        month: new Date().getMonth() + 1,
        date: getCurrentWeekNum()
      }).then((res) => {
        console.log(res, "可以创建周计划")
        handlePlanEdit({itemList, selectIndex: result.tapIndex}, true);
      }).catch((err) => {
        console.warn(err, "已存在周计划")
        // uni.showToast({
        //   icon: 'error',
        //   title: '已有本周或下周计划',
        //   duration: 2000
        // })
      })
      // }else{ // 创建下周计划
      // }
    },
    fail(err) {

    }
  })

}

// 获取计划时间段
function getTapLabel(row) {
  return row.firstDayOfTheWeek.substring(0, 4) + '年' + row.month + '月 第' + row.date + '周';
}

// 选中计划时间段
function handleNav(index) {
  console.log(index, "tab更换时间段");
  activeTab.value = index;
  onShowPlan.value = allPlans.value[index]; // 更新计划列表视图
}

// 修改计划
function handleEdit(index) {
  const {
    planId, // 主键ID
    year, // 年
    month, // 月
    date, // 周
    planDateId, // 周计划ID
  } = onShowPlan.value;

  let formData = {
    planId, year, month, date, planDateId
  };

  for (let i = 0; i < OrdinalDate.length; i++) {
    // 周一到周日的日期
    formData[OrdinalDate[i]] = getWorkDate(i);
    // 周一到周日的工作类型
    formData[WorkType[i]] = getWorkType(i);
    // 周一到周日的工作内容
    formData[WorkEvent[i]] = getWorkEvent(i);
  }

  // console.log(JSON.stringify(formData))
  console.log(route.path, formData, "前往修改页面");
  const editFields = [OrdinalDate[index], WorkType[index], WorkEvent[index]];
  let userName = null; // userInfo.value.userName || userInfo.value.nickName;
  handlePlanEdit({userName, formData, editFields}, false);
}


</script>

<style scoped>
.week-plan-title {
  color: #fff;
  padding: 0 30rpx 30rpx;
  display: flex;
  justify-content: space-between;
}

.white-bg {
  width: 690rpx;
  margin: 0;
  border-radius: 0;
}

.white-bg-r {
  width: 690rpx;
  margin: 0;
  border-top-left-radius: 8px;
  border-top-right-radius: 8px;
}

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

.white-bg.white-bg-2 {
/*  margin-bottom: 20rpx; */
}
.bottom-spliter{
	height: 20rpx;
}
.bg-gray{
	background-color: #f0f0f0;
}
.report-list .w-b-title .btn-edit {
  background-color: #5C96F7;
}

.con-bg {
  height: 445rpx;
}

.nav-list {
/*  display: flex;*/
/*  width: 690rpx;*/
  overflow-x: auto;   /* 允许横向滚动 */
  /*overflow-y: hidden;  隐藏垂直滚动 */
  /*-ms-overflow-style: none;   IE 隐藏滚动条 */
 /* scrollbar-width: none; */     /*Firefox 隐藏滚动条 */
  /* 添加高度以确保有足够的空间 */
/*  height: 80rpx;*/
  white-space: nowrap; /* 保持子元素在同一行显示 */
  /* 添加这些属性确保滚动正常工作 */
  scroll-behavior: smooth;
  /* #ifdef APP-PLUS */
  padding: 80rpx 30rpx 0;
  /* #endif */
  /* #ifndef APP-PLUS */
  padding: 20rpx 30rpx 0;
  /* #endif */
}
/* 为 Webkit 浏览器隐藏滚动条 */
.nav-list::-webkit-scrollbar {
  background-color: transparent;
}
.nav-list .nav-item {
  /*  flex: 0 0 auto; 关键：不放大、不缩小、自动宽度 */
/*  width: 200rpx;*/
  display: inline-block;
  background-color: #05A3F4;
  border-radius: 10rpx;
  color: #FFFFFF;
  font-size: 28rpx;
  text-align: center;
  padding: 10rpx 25rpx;
  margin-right: 15rpx;
  margin-bottom: 20rpx;
  white-space: nowrap;
}

/*.nav-list .nav-item:nth-child(3n){
  margin-right:0;
}*/

.nav-list .nav-item.active {
  background-color: #fff;
  color: #3384DF;
  font-weight: bold;
}

</style>