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

fix: 计划查看模态弹窗替换为自定义的模态弹窗
feat: 自定义模态弹窗组件（支持蒙层触摸关闭、文本换行显示）
2025-09-18 22:20:13 +08:00 · 2025-09-18 19:44:17 +08:00 · 2025-09-18 19:41:25 +08:00
5 changed files with 335 additions and 138 deletions
--- a/src/components/closeableModal.vue
+++ b/src/components/closeableModal.vue
@@ -0,0 +1,169 @@
+<!--
+ * @author wangzhuo
+ * @date 2025/9/18 10:30
+ * @description 模态弹窗组件（支持点击蒙层关闭、支持换行显示内容）
+-->
+<template>
+  <view class="model" v-if="modelValue" @click="handleClose" @touchmove.prevent @mousewheel.prevent>
+    <view v-if="closeTip" style="color:rgba(255,255,255,0.15); letter-spacing: 5rpx; margin-top: 50%;text-align: center">{{closeTip}}</view>
+    <view class="model-con" @click.stop>
+      <view class="model-top" v-if="title">{{ title }}</view>
+      <view :class="{'model-middle': true,'m-height': !title}">
+        <view v-for="text in content.split('\n')">{{text}}</view>
+      </view>
+      <view class="model-bottom">
+        <button v-if="cancelBtn" type="primary" class="btn-cancel" @click="handleCancel">{{ cancelText }}</button>
+        <button v-if="confirmBtn" type="default" class="btn-green" @click="handleConfirm" :loading="loading"
+                :disabled="loading">{{ confirmText }}
+        </button>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup>
+import {ref} from 'vue'
+
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: false
+  },
+  closeTip: {
+    type: String,
+    default: "点按空白处取消",
+  },
+  title: {
+    type: String,
+  },
+  content: {
+    type: String
+  },
+  cancelBtn: {
+    type: Boolean,
+    default: true
+  },
+  confirmBtn: {
+    type: Boolean,
+    default: true
+  },
+  cancelText: {
+    type: String,
+    default: '取消'
+  },
+  confirmText: {
+    type: String,
+    default: '确认'
+  }
+})
+
+let loading = ref(false);
+
+// 调用父组件的方法
+const emit = defineEmits(['update:modelValue', 'cancel', 'confirm', 'success'])
+
+// 点击蒙层关闭模态窗
+const handleClose = () => {
+  emit('update:modelValue', false);
+}
+
+const handleCancel = () => {
+  emit('cancel');
+  emit('success', 'cancel')
+  handleClose();
+}
+
+const handleConfirm = () => {
+  emit('confirm');
+  emit('success', 'confirm')
+  handleClose();
+}
+
+
+</script>
+
+<style lang="scss" scoped>
+.model {
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  background: rgba(0, 0, 0, 0.4);
+  z-index: 9999;
+
+  .model-con {
+    background: #fff;
+    position: fixed;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-around;
+    top: 50%;
+    left: 50%;
+    width: 500rpx;
+    min-height: 278rpx;
+    margin-left: -270rpx;
+    margin-top: -139rpx;
+    border-radius: 24rpx;
+    padding: 20rpx 30rpx;
+  }
+
+  .model-top {
+    text-align: center;
+    padding: 20rpx 0;
+    font-size: 36rpx;
+    font-weight: 700;
+  }
+
+  .model-middle {
+    // margin-top:290rpx;
+    text-align: start;
+    font-size: 30rpx;
+    //line-height: 42rpx;
+    color: #333333;
+
+    .font-green {
+      color: #05A3F4;
+      font-size: 42rpx;
+      font-weight: bold;
+      padding: 20rpx 0;
+    }
+  }
+
+  .m-height {
+    padding-top: 28rpx;
+  }
+
+  .model-bottom {
+    display: flex;
+    justify-content: center;
+    padding: 30rpx 0 20rpx;
+    // align-items: center;
+    .btn-green, .btn-cancel {
+      background-color: #fff;
+      color: #05A3F4;
+      border-radius: 48rpx;
+      width: 200rpx;
+      height: 65rpx;
+      line-height: 60rpx;
+      text-align: center;
+      font-size: 30rpx;
+      border: 1px solid #05A3F4;
+      margin-left: 0rpx !important;
+      margin-right: 0 !important;
+
+      &::after {
+        border: none;
+        border-radius: 37rpx;
+      }
+    }
+
+    .btn-green {
+      border: 1px solid #05A3F4;
+      background-color: #05A3F4;
+      color: #fff;
+      margin-left: 20rpx !important;
+    }
+  }
+}
+</style>
--- a/src/pages/business/CRM/plan/dataMap.js
+++ b/src/pages/business/CRM/plan/dataMap.js
@@ -40,7 +40,7 @@ export const COLOR_MAP = {
    "办事处": "#307af5",
    "请假": "#f2c55c",
    "法定假日": "#e88f89",/*#ED8A73*/
-    "null": "#e7e7e7"
+    "null": "#e7e7e782"
 };
 // 地区/部门
 export const AreaList = [
--- 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,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>
-
-      <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>
+      <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="{'white-bg-r':index === 0}">
+            <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'></view>
        </view>
-        <view class='bottom-spliter bg-gray'></view>
-      </block>
-      <view v-else style="text-align: center; margin-top: 50%; color: white">
-        暂无数据
-      </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,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>
--- 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;
 }

@@ -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>
--- a/src/pages/business/CRM/plan/planView.vue
+++ b/src/pages/business/CRM/plan/planView.vue
@@ -1,3 +1,8 @@
+<!--
+ * @author wangzhuo
+ * @update date 2025/9/18 19:38
+ * @description 所有人周计划查看
+-->
 <template>
  <view class="con-body">
    <view class="con-bg">
@@ -32,7 +37,7 @@
              <uni-icons type="down" size="18"></uni-icons>
            </view>
          </picker>
-          <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
+<!--          <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>-->
        </view>

        <!-- 分页部分  -->
@@ -42,23 +47,24 @@
        <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)) }}月
+            {{ (list[0][OrdinalDate[0]] || searchValue.selectDate).substring(5, 7) }}月
            <span class="line"></span>
-            {{ searchValue.selectDate.substring(0, 4) }}年
+            {{ (list[0][OrdinalDate[0]] || searchValue.selectDate).substring(0, 4) }}年
          </view>
          <uni-row class="demo-uni-row">
            <uni-col :span="1">
-              <view class="demo-uni-col right-radius">序号</view>
+              <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">
+                <view class="demo-uni-col mar-left" >
                  <text>{{ WeekShortCN[i] }}</text>
-                  <text v-if="list[0][field]">{{ list[0][field].substring(8) }}</text>
-                  <text v-else>{{ getWeek(i) }}</text>
+                  <text v-if="list[0][field]" class="font-bold">{{ list[0][field].substring(8) }}</text>
+                  <text v-else class="font-bold">{{ getWeek(i) }}</text>
                </view>
              </uni-col>
            </block>
@@ -81,7 +87,7 @@
                        :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>
+                    <text v-else style="font-weight: 300; color: gray">暂无</text>
                  </view>
                </uni-col>
              </block>
@@ -95,12 +101,21 @@
      </view>
    </view>
  </view>
+
+  <closeable-modal closeTip=""
+                   v-model="modalVisible"
+                   :title="modalData.title"
+                   :content="modalData.content"
+                   :cancelBtn="modalData.showCancel"
+                   confirmText="关闭"
+                   @success="modalData.success"/>
+
 </template>

 <script setup>
 import {ref, onMounted} from 'vue'
 import customHeader from '@/components/customHeader.vue'
-import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
+import CloseableModal from "@/components/closeableModal.vue";
 import {getNavBarPaddingTop} from '@/utils/system.js'
 import {getAllWeekPlanList} from "@/api/crm/plan/getPlan";
 import {AreaList, COLOR_MAP, OrdinalDate, WeekShortCN, WorkEvent, WorkType} from "./dataMap";
@@ -109,10 +124,6 @@ import {getDate} from "@/utils/datetime";
 import {getWeekPlanListByDate} from "@/api/crm/plan/getPlan";
 import {onPullDownRefresh} from "@dcloudio/uni-app";

-// const currentYear = new Date().getFullYear();
-const currentMonth = new Date().getMonth() + 1;
-const currentWeekNum = getCurrentWeekNum();
-
 // 获取导航栏高度用于内容区域padding
 const navBarPaddingTop = ref(0);
 onMounted(() => {
@@ -144,35 +155,38 @@ let searchValue = ref({

 // 查询列表
 let list = ref([]);
-const mescrollRef = ref(null);
+// const mescrollRef = ref(null);
 onPullDownRefresh(() => {
+  uni.showLoading();
  getPlanList().then(res => {
    const {rows} = res;
    list.value = rows;
    console.log(rows,'刷新周计划成功');
  }).finally(()=>{
    uni.stopPullDownRefresh();
+    uni.hideLoading();
  })
 });

 // 查询当前周一周日期
+// const currentYear = new Date().getFullYear();
+const currentWeekNum = getCurrentWeekNum();
 const aweek = getWeek2('本周');
+const currentMonth = aweek.month;
+console.log(currentWeekNum, '当前周数');
 const getWeek = (i) => {
  return aweek[OrdinalDate[i]].substring(7)
 }
-
+const queryParams = ref({
+  month: currentMonth,
+  date: currentWeekNum,
+  pageNum: 1,
+  pageSize: 10
+});
 // 获取数据列表
-const getPlanList = (month, date, pageIndex, pageSize) => {
+const getPlanList = () => {
  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);
+    let {rows, total} = await getAllWeekPlanList(queryParams.value);
    resolve({
      rows,
      total
@@ -210,31 +224,43 @@ const bindPickerChange = (e) => {
  // 查询
  handleSearch();
 }
-
-// 跳转到详情
-let handleDetail = (rowIndex, colIndex) => {
+// 模态窗可见性
+const modalVisible = ref(false);
+// 模态框的配置内容
+const modalData = ref({
+  title: null,
+  content: null,
+  showCancel: false,
+  success: console.log
+});
+const showCloseableModal = (param)=>{
+  modalVisible.value = true;
+  Object.assign(modalData.value, param);
+  console.log(modalData.value);
+}
+// 查看计划详情
+const 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) {
+    showCloseableModal({
+      title: `${workType}`,
+      content: `姓名：${detail.userName}\n时间：${workDate}\n内容：${workEvent}`
+    });
+    // uni.showModal({
+    //   title: `${workDate}\n${workType}`,
+    //   content: `${workEvent}`,
+    //   confirmText: '关闭',
+    //   showCancel: false,
+    //   maskClosable: true, // 允许点击蒙层关闭弹窗
+    //   success: console.log
+    // })

-        } else if (res.cancel) {
-
-        }
-      }
-    })
  } else {
    uni.showToast({
-      title: "暂无内容",
+      title: "无计划内容",
      icon: "none",
      duration: 1500
    })
@@ -328,8 +354,9 @@ let handleDetail = (rowIndex, colIndex) => {

 .demo-uni-col {
  height: 36px;
-  border-radius: 4px;
-  background-color: #E7E7E7;
+  border-radius: 4rpx;
+  /*background-color: #E7E7E7;*/
+  background-color: #e7e7e782;
  display: flex;
  flex-direction: column;
  align-items: center;
@@ -373,31 +400,10 @@ let handleDetail = (rowIndex, colIndex) => {
  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>
Author	SHA1	Message	Date
wangzhuo	e8dddd8dca	fix: 我的计划和计划编辑优化	2025-09-18 22:20:13 +08:00
wangzhuo	1aa1507336	fix: 计划查看模态弹窗替换为自定义的模态弹窗	2025-09-18 19:44:17 +08:00
wangzhuo	53117fc9f5	feat: 自定义模态弹窗组件（支持蒙层触摸关闭、文本换行显示）	2025-09-18 19:41:25 +08:00