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

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,37 +28,42 @@
       </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>
-
+      <uni-transition :duration="300"
-      <block v-if="onShowPlan" v-for="(item, index) in OrdinalDate" :key="item">
+                      :mode-class="['fade','slide-bottom']"
-        <!-- 计划详情 -->
+                      :styles="{'width':'100%', 'background-color':'#f0f0f0','border-top-left-radius': '8px', 'border-top-right-radius': '8px'}"
-        <view class="white-bg white-bg-2" :class="index == 0 ? 'white-bg-r' : ''">
+                      :show="showTrans">
-          <view class="report-list">
+        <view v-if="onShowPlan" v-for="(item, index) in OrdinalDate" :key="index">
-            <view class="w-b-title">
+          <!-- 计划详情 -->
-              <view class="r-left">{{ getWorkDate(index) }} {{ WeekCN[index] }}</view>
+          <view class="white-bg white-bg-2" :class="{'white-bg-r':index === 0}">
-              <view class="r-right btn-edit" @click="handleEdit(index)">编辑</view>
+            <view class="report-list">
-            </view>
+              <view class="w-b-title">
-            <view class="r-list">
+                <view class="r-left">{{ getWorkDate(index) }} {{ WeekCN[index] }}</view>
-              <view class="r-left">工作类型</view>
+                <view class="r-right btn-edit" @click="handleEdit(index)">编辑</view>
-              <view class="r-right">{{ getWorkType(index) || '' }}</view>
+              </view>
-            </view>
+              <view class="r-list">
-            <view class="border-bottom b-width"></view>
+                <view class="r-left">工作类型</view>
-            <view class="r-list">
+                <view class="r-right">{{ getWorkType(index) || '' }}</view>
-              <view class="r-left">内容</view>
+              </view>
-              <view class="r-right">{{ getWorkEvent(index) || '' }}</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'></view>
         </view>
-        <view class='bottom-spliter bg-gray'></view>
+
-      </block>
+        <view v-else style="text-align: center; margin-top: 50%; color: white">
-      <view v-else style="text-align: center; margin-top: 50%; color: white">
+          暂无数据
-        暂无数据
+        </view>
-      </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 {getWeeklyPlanList} from "@/api/crm/plan/getPlan";
-import {useMessage} from "@/utils/message";
 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, "用户周计划列表获取失败");
+    console.log(err, "周计划列表获取失败")
-    message.error("周计划获取失败");
   }).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,27 +289,31 @@ 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 {
   /*  display: flex;*/
   /*  width: 690rpx;*/
-  overflow-x: auto;   /* 允许横向滚动 */
+  overflow-x: auto; /* 允许横向滚动 */
   /*overflow-y: hidden;  隐藏垂直滚动 */
   /*-ms-overflow-style: none;   IE 隐藏滚动条 */
-  /* scrollbar-width: none; */     /*Firefox 隐藏滚动条 */
+  /* scrollbar-width: none; */ /*Firefox 隐藏滚动条 */
   /* 添加高度以确保有足够的空间 */
   /*  height: 80rpx;*/
   white-space: nowrap; /* 保持子元素在同一行显示 */
@@ -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>

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;
-  // 获取用户信息
+  console.log(route.path, `：创建${itemList[selectIndex]}计划`);
-  // getUserInfo().then(res => {
+  title.value = "创建周计划";
-  //   userInfo.value = res.user;
-  //   console.log(route.path, "：用户信息获取成功");
-  // }).catch(err => {
-  //   console.warn(err, "用户信息获取失败")
-  // });
-  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){ // 请求修改
+    if (!isAdd.value) { // 请求修改
-      let res = await updateWeekPlanList(weekPlanFormData.value).catch(err=>{
+      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{ // 请求新增
+    } else { // 请求新增
-      console.log(weekPlanFormData.value,"新增计划");
+      console.log(weekPlanFormData.value, "新增计划");
-      let res = await addPlan(weekPlanFormData.value).catch(err=>{
+      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',
+      icon: 'none',
-      title:"请完善内容",
+      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;
 }
 
@@ -309,7 +303,7 @@ const submitForm = async () => {
 }
 
 .white-bg.white-bg-3 {
-  border-top:  1rpx solid #E5E5E5;
+  border-top: 1rpx solid #E5E5E5;
   border-radius: 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>