fix: 计划查看模态弹窗替换为自定义的模态弹窗

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 = [

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-if="list[0][field]" class="font-bold">{{ list[0][field].substring(8) }}</text>
-                  <text v-else>{{ getWeek(i) }}</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 {rows, total} = await getAllWeekPlanList(queryParams.value);
-    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
@@ -210,31 +224,43 @@ const bindPickerChange = (e) => {
   // 查询
   handleSearch();
 }
-
+// 模态窗可见性
-// 跳转到详情
+const modalVisible = ref(false);
-let handleDetail = (rowIndex, colIndex) => {
+// 模态框的配置内容
+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({
+    showCloseableModal({
-      title: `${workDate}\n${workType}`,
+      title: `${workType}`,
-      content: `${workEvent}`,
+      content: `姓名：${detail.userName}\n时间：${workDate}\n内容：${workEvent}`
-      confirmText: '关闭',
+    });
-      showCancel: false,
+    // uni.showModal({
-      maskClosable: true, // 允许点击蒙层关闭弹窗
+    //   title: `${workDate}\n${workType}`,
-      success: function (res) {
+    //   content: `${workEvent}`,
-        if (res.confirm) {
+    //   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;
+  border-radius: 4rpx;
-  background-color: #E7E7E7;
+  /*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>