fix: 我的计划和计划编辑优化

2025-09-18 22:20:13 +08:00
parent 1aa1507336
commit e8dddd8dca
2 changed files with 94 additions and 72 deletions
--- a/src/pages/business/CRM/plan/myPlan.vue
+++ b/src/pages/business/CRM/plan/myPlan.vue
@@ -17,7 +17,7 @@
      <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="userInfo.nickName">姓名：<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>-->
        <view v-if="weekNum">
          {{ yearMonth }}
          <view v-if="isThisWeek" style=" display: inline-block;">
@@ -28,16 +28,19 @@
      </view>

      <view class="nav-list">
-        <view class="nav-item" :class="{active:index==activeTab}"
+        <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">
+      <uni-transition :duration="300"
+                      :mode-class="['fade','slide-bottom']"
+                      :styles="{'width':'100%', 'background-color':'#f0f0f0','border-top-left-radius': '8px', 'border-top-right-radius': '8px'}"
+                      :show="showTrans">
+        <view v-if="onShowPlan" v-for="(item, index) in OrdinalDate" :key="index">
          <!-- 计划详情 -->
-        <view class="white-bg white-bg-2" :class="index == 0 ? 'white-bg-r' : ''">
+          <view class="white-bg white-bg-2" :class="{'white-bg-r':index === 0}">
            <view class="report-list">
              <view class="w-b-title">
                <view class="r-left">{{ getWorkDate(index) }} {{ WeekCN[index] }}</view>
@@ -54,11 +57,13 @@
              </view>
            </view>
          </view>
-        <view class='bottom-spliter bg-gray'></view>
-      </block>
+          <view class='bottom-spliter'></view>
+        </view>
+
        <view v-else style="text-align: center; margin-top: 50%; color: white">
          暂无数据
        </view>
+      </uni-transition>
      <!-- 底部加高度来避免tabbar遮挡 -->
      <!-- <view class="bottom-height bg-gray"></view> -->
    </view>
@@ -69,13 +74,12 @@

 <script setup>

-import {onMounted, ref, reactive, computed} from "vue";
+import {onMounted, ref, computed, watch} 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 {getWeeklyPlanList} from "@/api/crm/plan/getPlan";
 import {judgeThisWeek} from "@/api/crm/plan/updatePlan";

 const userInfo = ref(null)
@@ -94,8 +98,6 @@ 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]] : '';
 };
@@ -107,7 +109,8 @@ let getWorkEvent = (index) => {
 };
 // 刷新计划列表
 const refreshPlanList = () => {
-  message.showLoading();
+  showTrans.value = false;
+  uni.showLoading();
  // 获取用户信息
  // getUserInfo().then(res => {
  //   userInfo.value = res.user;
@@ -124,12 +127,12 @@ const refreshPlanList = () => {
      weekNum.value = rows[0].date;
      yearMonth.value = rows[0].firstDayOfTheWeek.substring(0, 7);
    }
-    console.log(route.path, "：用户周计划列表获取成功");
+    console.log(route.path, "用户周计划列表获取成功");
  }).catch(err => {
-    console.warn(err, "用户周计划列表获取失败");
-    message.error("周计划获取失败");
+    console.log(err, "周计划列表获取失败")
  }).finally(() => {
-    message.hideLoading();
+    uni.hideLoading();
+    setTimeout(() => showTrans.value = true, 20);
  })
 }

@@ -139,7 +142,7 @@ onMounted(() => {

 // 判断计划是否为本周
 let isThisWeek = computed(() => {
-  let theYear = onShowPlan.value.year || onShowPlan.value.firstDayOfTheWeek.substring(0, 4); // 获取年份
+  let theYear = 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) &&
@@ -204,6 +207,19 @@ function getTapLabel(row) {
  return row.firstDayOfTheWeek.substring(0, 4) + '年' + row.month + '月 第' + row.date + '周';
 }

+// 展示动画
+const showTrans = ref(false);
+// 监听 activeTab 变化，触发动画
+watch(activeTab, (newVal, oldVal) => {
+  if (oldVal !== newVal) { // 确保不是初始化时的触发
+    showTrans.value = false; // 先隐藏
+    setTimeout(() => {
+      onShowPlan.value = allPlans.value[newVal]; // 更新计划列表视图
+      showTrans.value = true; // 再显示，触发动画
+    }, 20);
+  }
+});
+
 // 选中计划时间段
 function handleNav(index) {
  console.log(index, "tab更换时间段");
@@ -247,7 +263,7 @@ function handleEdit(index) {
 <style scoped>
 .week-plan-title {
  color: #fff;
-  padding: 0 30rpx 30rpx;
+  padding: 0 30rpx;
  display: flex;
  justify-content: space-between;
 }
@@ -273,18 +289,22 @@ function handleEdit(index) {
 .white-bg.white-bg-2 {
  /*  margin-bottom: 20rpx; */
 }
-.bottom-spliter{
+
+.bottom-spliter {
  height: 20rpx;
 }
-.bg-gray{
+
+.bg-gray {
  background-color: #f0f0f0;
 }
+
 .report-list .w-b-title .btn-edit {
  background-color: #5C96F7;
 }

 .con-bg {
-  /*height: 445rpx;*/
+  /*height: 100%;*/
+  /*  overflow-y: auto;*/
 }

 .nav-list {
@@ -306,10 +326,12 @@ function handleEdit(index) {
  padding: 20rpx 30rpx 0;
  /* #endif */
 }
+
 /* 为 Webkit 浏览器隐藏滚动条 */
 .nav-list::-webkit-scrollbar {
  background-color: transparent;
 }
+
 .nav-list .nav-item {
  /*  flex: 0 0 auto; 关键：不放大、不缩小、自动宽度 */
  /*  width: 200rpx;*/
@@ -334,5 +356,4 @@ function handleEdit(index) {
  color: #3384DF;
  font-weight: bold;
 }
-
 </style>
--- a/src/pages/business/CRM/plan/planEdit.vue
+++ b/src/pages/business/CRM/plan/planEdit.vue
@@ -16,11 +16,11 @@

      <!-- 正文内容 -->
      <view class="week-plan-title">
-        <view v-if="userInfo.nickName">姓名：<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>
+<!--        <view v-if="userInfo.nickName">姓名：<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>-->
        <view>{{ currentEditDate.yearMonth }} 第 <strong>{{ currentEditDate.weekNum }}</strong> 周</view>
      </view>
      <uni-forms ref="formRef" :model="weekPlanFormData" :rules="rules" label-width="100px" label-position="top">
-        <block v-for="(item, index) in OrdinalDate">
+        <view v-for="(item, index) in OrdinalDate">
          <view class="white-bg" :class="index==0?'white-bg-2':'white-bg-3'">
            <view class="w-b-title" @click="handleExpand(index)">
              {{ weekPlanFormData[item] }} {{ WeekCN[index] }}
@@ -29,7 +29,8 @@
              </text>
            </view>

-            <view v-show="expandFlag[index]" class="form-con">
+            <!--v-show="expandFlag[index]"-->
+            <view class="form-con" :class="{'show': expandFlag[index], 'hidden': !expandFlag[index]}">
              <uni-forms-item label="工作类型" :name="getTypeField(index)" :required="index < workDays">
                <view class="form-picker">
                  <picker @change="handleTypeChange" :range="WORK_TYPE" :data-field="getTypeField(index)">
@@ -41,13 +42,13 @@
                </view>
              </uni-forms-item>
              <uni-forms-item label="内容" :name="getEventField(index)" :required="index < workDays">
-                <uni-easyinput type="textarea" autoHeight v-model="weekPlanFormData[getEventField(index)]"
+                <uni-easyinput type="textarea" v-model="weekPlanFormData[getEventField(index)]"
                               placeholder="请输入" class="form-texarea"/>
              </uni-forms-item>
            </view>

          </view>
-        </block>
+        </view>
      </uni-forms>

    </view>
@@ -62,7 +63,6 @@ import {useRoute} from "vue-router"
 import {useMessage} from "@/utils/message";
 import {onLoad} from "@dcloudio/uni-app";
 import {updateWeekPlanList, addPlan} from "@/api/crm/plan/updatePlan";
-import {getUserInfo} from "@/api/crm/plan/getPlan";
 import {getDate} from "@/utils/datetime";
 import {getWeek2, getCurrentWeekNum} from "./dateTimeUtils";

@@ -127,17 +127,10 @@ const workDays = 5;
 // const instance = getCurrentInstance().proxy;
 let instance = null;
 // 初始化创建任务
-let initCreate = (params)=>{
+let initCreate = (params) => {
  const {itemList, selectIndex} = params;
-  // 获取用户信息
-  // getUserInfo().then(res => {
-  //   userInfo.value = res.user;
-  //   console.log(route.path, "：用户信息获取成功");
-  // }).catch(err => {
-  //   console.warn(err, "用户信息获取失败")
-  // });
-  console.log(route.path,`：创建${itemList[selectIndex]}计划`);
-  title.value="创建周计划";
+  console.log(route.path, `：创建${itemList[selectIndex]}计划`);
+  title.value = "创建周计划";
  currentEditDate.value.yearMonth = getDate({format: true}).substring(0, 7); // 只要年月
  currentEditDate.value.weekNum = getCurrentWeekNum() + selectIndex; // 取巧做法，当期周则selectIndex为0，下周则selectIndex为1，用加法处理
  const week = getWeek2(itemList[selectIndex]); // 获取本周/下周一周日期
@@ -147,11 +140,11 @@ let initCreate = (params)=>{
  const {year, month} = week;
  weekPlanFormData.value.year = year;
  weekPlanFormData.value.month = month;
-  for(let index in OrdinalDate){
+  for (let index in OrdinalDate) {
    let dateField = getDateField(index);
    weekPlanFormData.value[dateField] = week[dateField];
    // console.log(week[dateField]);
-    if(index>=workDays){
+    if (index >= workDays) {
      let typeField = getTypeField(index);
      weekPlanFormData.value[typeField] = "法定假日"; // TODO: 换成更规范代码
      workTypeIndex.value[typeField] = WORK_TYPE.indexOf("法定假日");
@@ -180,7 +173,7 @@ onLoad((options) => {
        expandFlag.value[index] = editFields.includes(getTypeField(index)) || editFields.includes(getEventField(index));
        // console.log(index, expandFlag.value[index], "展开状态");
      }
-    }else{
+    } else {
      initCreate(data.param);
    }

@@ -203,7 +196,7 @@ function getEventField(index) {
 }

 // 初始化校验规则
-(function bindRules(){
+(function bindRules() {
  for (let i in WorkType) {
    if (i < workDays) {
      rules[getTypeField(i)] = {
@@ -253,25 +246,25 @@ const submitForm = async () => {
    // console.log('表单数据:', weekPlanFormData.value);

    // 这里可以添加提交到服务器的代码
-    if(!isAdd.value){ // 请求修改
-      let res = await updateWeekPlanList(weekPlanFormData.value).catch(err=>{
+    if (!isAdd.value) { // 请求修改
+      let res = await updateWeekPlanList(weekPlanFormData.value).catch(err => {
        message.error('操作失败!');
        console.warn(err, "更新周计划失败");
      })
      message.success('修改成功!');
-      setTimeout(()=>{
+      setTimeout(() => {
        const eventChannel = instance.getOpenerEventChannel();
        eventChannel.emit('refreshData');
        uni.navigateBack()
      }, 500);
-    }else{ // 请求新增
-      console.log(weekPlanFormData.value,"新增计划");
-      let res = await addPlan(weekPlanFormData.value).catch(err=>{
+    } else { // 请求新增
+      console.log(weekPlanFormData.value, "新增计划");
+      let res = await addPlan(weekPlanFormData.value).catch(err => {
        message.error('操作失败!');
        console.error(err, "周计划新增失败");
      })
      message.success('保存成功!');
-      setTimeout(()=>{
+      setTimeout(() => {
        const eventChannel = instance.getOpenerEventChannel();
        eventChannel.emit('refreshData');
        uni.navigateBack()
@@ -279,8 +272,8 @@ const submitForm = async () => {
    }
  } catch (err) {
    uni.showToast({
-      icon:'none',
-      title:"请完善内容",
+      icon: 'none',
+      title: "请完善内容",
      duration: 1500
    })
    console.log('表单验证失败:', err);
@@ -301,6 +294,7 @@ const submitForm = async () => {
 .white-bg {
  width: 690rpx;
  margin: 0;
+  padding-bottom: 0;
  border-radius: 8px 8px 0 0;
 }

@@ -320,10 +314,17 @@ const submitForm = async () => {

 .form-con {
  padding: 30rpx 0 0;
+  height: 500rpx;
+  overflow: hidden;
+  transition: height 0.3s;
 }

 :deep(.form-con .uni-forms-item) {
  margin-bottom: 22px !important;
 }

+.hidden{
+  height: 0;
+}
+
 </style>