考勤打卡

刘淇
1 parent 3c3d6799
Showing 14 changed files with 3022 additions and 782 deletions
api/index/index.js
manifest.json
pages-sub/daily/attendanceRecord.vue
pages-sub/problem/work-order-manage/add-order.vue
pages.json
pages/index/index.vue
pages/mine/index.vue
uni_modules/uview-plus/components/u-cascader/calendar.js
uni_modules/uview-plus/components/u-cascader/header.vue
uni_modules/uview-plus/components/u-cascader/month.vue
uni_modules/uview-plus/components/u-cascader/props.js
uni_modules/uview-plus/components/u-cascader/u-cascader.vue
uni_modules/uview-plus/components/u-cascader/util.js
uni_modules/uview-plus/libs/config/props.js
@@ -48,5 +48,27 @@ export const taskDetailsWithSmartSort = (params) =&gt; {
   return post('/app-api/homePage/summary/taskDetailsWithSmartSort', params);
 };
+/**
+ * 组织
+ * @param {Object} params {mobile, password, code}
+ * @returns {Promise}
+ */
+export const getCurrentOrg = (params) => {
+  return get('/app-api/homePage/summary/currentOrg', params);
+};
+
+/**
+ * 组织
+ * @param {Object} params {mobile, password, code}
+ * @returns {Promise}
+ */
+export const orgTaskIndicator = (params) => {
+  return get('/app-api/homePage/summary/orgTaskIndicator', params);
+};
+
+
+
+
+
@@ -54,7 +54,7 @@
     },
     /* 小程序特有相关 */
     "mp-weixin" : {
-        "appid" : "wx4ba1e0a1b7075371",
+        "appid" : "wxcb4cd34066b97d82",
         "setting" : {
             "urlCheck" : false
         },
+<template>
+<view class="attendance-page">
+  <!-- 顶部统计卡片 -->
+  <view class="stat-card">
+    <view class="stat-item">
+      <view class="stat-label">本月打卡</view>
+      <view class="stat-value">{{ statData.checkInDays }}</view>
+    </view>
+    <view class="stat-item">
+      <view class="stat-label">正常天数</view>
+      <view class="stat-value">{{ statData.normalDays }}</view>
+    </view>
+    <view class="stat-item">
+      <view class="stat-label">异常天数</view>
+      <view class="stat-value">{{ statData.errorDays }}</view>
+    </view>
+  </view>
+
+  <!-- 手写内联日历，无弹窗 -->
+  <view class="calendar-wrap">
+    <view class="calendar-header">
+      <!-- 左右横向排列：上一月 | 年月标题 | 下一月 -->
+      <view class="calendar-btn" @click="prevMonth">上一月</view>
+      <view class="calendar-title">{{ currentYear }}年{{ currentMonth }}月</view>
+      <!-- 当前是最新月份时，隐藏下个月按钮 -->
+      <view v-if="canNext" class="calendar-btn" @click="nextMonth">下一月</view>
+      <view v-else class="calendar-btn empty-btn"></view>
+    </view>
+    <!-- 星期头部 -->
+    <view class="week-row">
+      <view class="week-item" v-for="w in weekList" :key="w">{{ w }}</view>
+    </view>
+    <!-- 日期网格 -->
+    <view class="day-row" v-for="(row, rIdx) in dayRows" :key="rIdx">
+      <view
+        class="day-item"
+        v-for="(day, dIdx) in row"
+        :key="dIdx"
+        :class="{
+          'day-item--other': day.otherMonth,
+          'day-item--active': day.dateStr === selectDate,
+        }"
+        @click="onDayClick(day)"
+      >
+        <view class="day-text">{{ day.day }}</view>
+        <view v-if="day.dot" class="day-dot" :style="{backgroundColor: day.dotColor}"></view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 打卡详情区域 -->
+  <view class="detail-card">
+    <view v-if="!currentAttendance">
+      <view class="empty-text">暂无考勤记录</view>
+    </view>
+    <view v-else>
+      <view class="detail-row">
+        <view class="detail-title">上班打卡时间：</view>
+        <view class="detail-text">{{ currentAttendance.clockInTime || '缺少打卡记录' }}</view>
+      </view>
+      <view class="detail-row">
+        <view class="detail-title">上班打卡地点：</view>
+        <view class="detail-text">{{ currentAttendance.clockInAddress || '-' }}</view>
+      </view>
+      <view class="divider"></view>
+      <view class="detail-row">
+        <view class="detail-title">下班打卡时间：</view>
+        <view class="detail-text">{{ currentAttendance.clockOutTime || '缺少打卡记录' }}</view>
+      </view>
+      <view class="detail-row">
+        <view class="detail-title">下班打卡地点：</view>
+        <view class="detail-text">{{ currentAttendance.clockOutAddress || '-' }}</view>
+      </view>
+    </view>
+  </view>
+</view>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, computed } from 'vue';
+
+const weekList = ['日','一','二','三','四','五','六'];
+const today = new Date();
+const todayTs = today.getTime();
+// 当前显示月份
+const currentYear = ref(today.getFullYear());
+const currentMonth = ref(today.getMonth() + 1);
+const selectDate = ref('');
+const dayRows = ref<any[]>([]);
+
+// 是否允许点击下一月：判断当前展示月份是否小于本月
+const canNext = computed(() => {
+  const showMonthDate = new Date(currentYear.value, currentMonth.value -1, 1);
+  const nowMonthDate = new Date(today.getFullYear(), today.getMonth(), 1);
+  return showMonthDate < nowMonthDate;
+});
+
+// ========== 写死静态统计数据 ==========
+const statData = ref({
+  checkInDays: 28,
+  normalDays: 25,
+  errorDays: 3
+});
+
+// ========== 写死日历标记：红点error异常，灰点normal正常 ==========
+const markMap = ref<Record<string, {type:'error'|'normal'}>>({
+  '2026-10-02': { type: 'error' },
+  '2026-10-10': { type: 'error' },
+  '2026-10-16': { type: 'error' },
+  '2026-10-05': { type: 'normal' },
+  '2026-10-12': { type: 'normal' },
+});
+
+// ========== 写死每日考勤详情数据 ==========
+const dayAttendanceMap = ref<Record<string, any>>({
+  '2026-10-02': {
+    clockInTime: '2026-10-02 08:02:10',
+    clockInAddress: '月坛南街安华大厦',
+    clockOutTime: '',
+    clockOutAddress: ''
+  },
+  '2026-10-13': {
+    clockInTime: '2026-10-13 07:58:25',
+    clockInAddress: '月坛南街安华大厦',
+    clockOutTime: '',
+    clockOutAddress: '南礼士地铁站'
+  },
+  '2026-10-05': {
+    clockInTime: '2026-10-05 08:00:00',
+    clockInAddress: '月坛南街安华大厦',
+    clockOutTime: '2026-10-05 18:00:00',
+    clockOutAddress: '月坛南街安华大厦'
+  },
+  '2026-10-10': null,
+  '2026-10-12': {
+    clockInTime: '2026-10-12 07:55:10',
+    clockInAddress: '月坛南街安华大厦',
+    clockOutTime: '2026-10-12 17:50:30',
+    clockOutAddress: '月坛南街安华大厦'
+  },
+  '2026-10-16': {
+    clockInTime: '2026-10-16 07:59:22',
+    clockInAddress: '月坛南街安华大厦',
+    clockOutTime: '',
+    clockOutAddress: ''
+  }
+});
+const currentAttendance = ref<any>(null);
+
+// 生成月份日期网格
+const renderMonth = () => {
+  const year = currentYear.value;
+  const month = currentMonth.value;
+  // 当月第一天
+  const firstDay = new Date(year, month - 1, 1);
+  // 当月最后一天
+  const lastDay = new Date(year, month, 0);
+  // 上个月最后一天
+  const prevLastDay = new Date(year, month - 1, 0).getDate();
+  // 当月第一天星期 0周日~6周六
+  const firstWeek = firstDay.getDay();
+
+  const rows: any[] = [];
+  let row: any[] = [];
+  // 填充上月尾部
+  for(let i = 0; i < firstWeek; i++){
+    const dayNum = prevLastDay - firstWeek + i + 1;
+    row.push({
+      day: dayNum,
+      otherMonth: true,
+      dateStr: `${year}-${String(month-1).padStart(2,'0')}-${String(dayNum).padStart(2,'0')}`
+    })
+  }
+  // 填充当月日期
+  for(let d = 1; d <= lastDay.getDate(); d++){
+    const dateStr = `${year}-${String(month).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
+    const mark = markMap.value[dateStr];
+    const item:any = {
+      day: d,
+      otherMonth: false,
+      dateStr,
+      dot: false,
+      dotColor: ''
+    };
+    if(mark){
+      item.dot = true;
+      item.dotColor = mark.type === 'error' ? '#f56c6c' : '#cccccc';
+    }
+    row.push(item);
+    if(row.length ===7){
+      rows.push(row);
+      row = [];
+    }
+  }
+  // 填充下月开头
+  let nextDay = 1;
+  while(row.length <7){
+    row.push({
+      day: nextDay,
+      otherMonth:true,
+      dateStr: `${year}-${String(month+1).padStart(2,'0')}-${String(nextDay).padStart(2,'0')}`
+    })
+    nextDay++;
+  }
+  rows.push(row);
+  dayRows.value = rows;
+};
+
+// 上一月
+const prevMonth = () => {
+  if(currentMonth.value === 1){
+    currentYear.value--;
+    currentMonth.value = 12;
+  }else{
+    currentMonth.value--;
+  }
+  renderMonth();
+};
+// 下一月
+const nextMonth = () => {
+  let nextY = currentYear.value;
+  let nextM = currentMonth.value + 1;
+  if(nextM > 12){
+    nextY++;
+    nextM =1;
+  }
+  currentYear.value = nextY;
+  currentMonth.value = nextM;
+  renderMonth();
+};
+
+// 点击日期
+const onDayClick = (day:any) => {
+  // 禁止点击其他月份
+  if(day.otherMonth) return;
+  const selectDay = new Date(day.dateStr);
+  if(selectDay > today){
+    currentAttendance.value = null;
+    return;
+  }
+  selectDate.value = day.dateStr;
+  const data = dayAttendanceMap.value[day.dateStr];
+  currentAttendance.value = data ?? null;
+};
+
+onMounted(() => {
+  const todayStr = `${today.getFullYear()}-${String(today.getMonth()+1).padStart(2,'0')}-${String(today.getDate()).padStart(2,'0')}`;
+  selectDate.value = todayStr;
+  fetchDayAttendance(todayStr);
+  renderMonth();
+});
+
+const fetchDayAttendance = (date:string) => {
+  const selectDay = new Date(date);
+  if(selectDay > today){
+    currentAttendance.value = null;
+    return;
+  }
+  const data = dayAttendanceMap.value[date];
+  currentAttendance.value = data ?? null;
+};
+</script>
+
+<style scoped lang="scss">
+.attendance-page{
+  padding: 20rpx;
+  background-color: #f5f5f7;
+  min-height: 100vh;
+}
+.stat-card{
+  display: flex;
+  background-color: #3c9cff;
+  border-radius: 16rpx;
+  padding:30rpx 0;
+  margin-bottom:20rpx;
+  .stat-item{
+    flex:1;
+    text-align:center;
+    color:#fff;
+    .stat-label{
+      font-size:28rpx;
+      opacity:0.9;
+    }
+    .stat-value{
+      font-size:36rpx;
+      margin-top:10rpx;
+      font-weight:bold;
+    }
+  }
+}
+.calendar-wrap{
+  background:#fff;
+  border-radius:12rpx;
+  padding:20rpx;
+  margin-bottom:20rpx;
+}
+.calendar-header{
+  display:flex;
+  justify-content: space-between;
+  align-items:center;
+  margin-bottom:20rpx;
+}
+.calendar-title{
+  font-size:32rpx;
+  font-weight:bold;
+}
+.calendar-btn{
+  padding:8rpx 16rpx;
+  border:1rpx solid #eee;
+  border-radius:8rpx;
+  font-size:26rpx;
+}
+.empty-btn{
+  border-color:transparent;
+  color:transparent;
+}
+.week-row{
+  display:flex;
+  .week-item{
+    flex:1;
+    text-align:center;
+    font-size:26rpx;
+    color:#666;
+    padding:10rpx 0;
+  }
+}
+.day-row{
+  display:flex;
+  .day-item{
+    flex:1;
+    min-height:70rpx;
+    display:flex;
+    flex-direction:column;
+    align-items:center;
+    justify-content:center;
+    padding:8rpx 0;
+    position:relative;
+    .day-text{
+      font-size:28rpx;
+    }
+    .day-dot{
+      width:10rpx;
+      height:10rpx;
+      border-radius:50%;
+      margin-top:4rpx;
+    }
+  }
+  .day-item--other{
+    color:#ccc;
+  }
+  .day-item--active{
+    background:#3c9cff;
+    color:#fff;
+    border-radius:50%;
+  }
+}
+.detail-card{
+  background:#fff;
+  border-radius:12rpx;
+  padding:30rpx;
+  .empty-text{
+    text-align:center;
+    color:#999;
+    font-size:30rpx;
+    padding:40rpx 0;
+  }
+  .detail-row{
+    margin-bottom:20rpx;
+    display:flex;
+    .detail-title{
+      font-size:30rpx;
+      color:#333;
+      width:220rpx;
+    }
+    .detail-text{
+      flex:1;
+      font-size:30rpx;
+      color:#666;
+    }
+  }
+  .divider{
+    height:1px;
+    background:#eee;
+    margin:30rpx 0;
+  }
+}
+</style>
@@ -2,22 +2,19 @@
   <view class="page-container">
     <view class="work-order-form-content commonPageLRpadding">
       <up-form label-position="left" :model="workOrderForm" ref="workOrderFormRef" labelWidth="200rpx">
-        <!-- 业务线单选框：移入form内，作为第一个表单项（核心调整） -->
+        <!-- 业务线单选框 -->
         <up-form-item label="业务线" prop="busiLineCn" border-bottom required>
           <up-radio-group v-model="workOrderForm.busiLineCn" placement="row" @change="handleBusiLineChange">
             <up-radio v-for="item in busiLineOptions" :key="item.name" :label="item.name" :name="item.name"></up-radio>
           </up-radio-group>
-
         </up-form-item>
-
         <!-- 1. 工单位置（地图选择） -->
         <up-form-item label="工单位置" prop="workLocation" border-bottom required
           @click="chooseWorkLocation(); hideKeyboard()">
           <up-input v-model="workOrderForm.workLocation" border="none" readonly suffix-icon="map-fill"
             placeholder="点击选择工单位置"></up-input>
         </up-form-item>
-
-        <!-- 2. 道路名称（下拉框） -->
+        <!-- 2. 道路名称（下拉框action-sheet，保留不变） -->
         <up-form-item label="道路名称" prop="roadName" border-bottom required
           @click="handleActionSheetOpen('roadName'); hideKeyboard()">
           <up-input v-model="workOrderForm.roadName" readonly disabled-color="#ffffff" placeholder="请先选择工单位置"
@@ -26,17 +23,14 @@
             <up-icon name="arrow-right" size="16"></up-icon>
           </template>
         </up-form-item>
-
-        <!-- 3. 问题类型（下拉框） -->
-        <up-form-item label="问题类型" prop="orderName" border-bottom required
-          @click="handleActionSheetOpen('orderName'); hideKeyboard()">
+        <!-- 3. 问题类型 级联选择器【对齐参考页面】 -->
+        <up-form-item label="问题类型" prop="orderName" border-bottom required @click="openCascader(); hideKeyboard()">
           <up-input v-model="workOrderForm.orderName" disabled disabled-color="#ffffff" placeholder="请选择问题类型"
             border="none"></up-input>
           <template #right>
             <up-icon name="arrow-right" size="16"></up-icon>
           </template>
         </up-form-item>
-
         <!-- 新增：紧急程度选择 -->
         <up-form-item label="紧急程度" prop="pressingTypeName" border-bottom required
           @click="handleActionSheetOpen('pressingType'); hideKeyboard()">
@@ -46,61 +40,60 @@
             <up-icon name="arrow-right" size="16"></up-icon>
           </template>
         </up-form-item>
-
         <!-- 4. 情况描述（文本域） -->
         <up-form-item label="情况描述" prop="problemDesc" required>
           <up-textarea placeholder="请输入情况描述（最多200字）" v-model.trim="workOrderForm.problemDesc" count maxlength="200"
-            rows="4" @blur="() => workOrderFormRef.validateField('problemDesc')"></up-textarea>
+            rows="4" @blur="() => workOrderFormRef.value?.validateField('problemDesc')"></up-textarea>
         </up-form-item>
-
-        <!-- 问题照片（核心修复：绑定纯数组） -->
+        <!-- 问题照片 -->
         <up-form-item label="问题照片" prop="problemImgs" border-bottom required>
           <up-upload :file-list="problemImgs.imgList.value || []" @after-read="problemImgs.uploadImgs"
             @delete="problemImgs.deleteImg" multiple :width="70" :height="70"
             :max-count="problemImgs.uploadConfig.maxCount" :upload-text="problemImgs.uploadConfig.uploadText"
             :size-type="problemImgs.uploadConfig.sizeType"></up-upload>
         </up-form-item>
-
         <!-- 完成时间 -->
         <up-form-item label="希望完成时间" prop="expectedFinishDate" @click="show = true; hideKeyboard()">
           <up-input v-model="workOrderForm.expectedFinishDate" border="none" readonly placeholder="点击选择时间"></up-input>
           <template #right>
-            <!-- 核心修复：用view包裹图标，添加双重@click.stop -->
             <view v-if="workOrderForm.expectedFinishDate" @click.stop>
               <up-icon name="close" size="20" @click.stop="clearExpectedFinishDate"></up-icon>
             </view>
             <up-icon name="arrow-right" size="16" v-else></up-icon>
           </template>
         </up-form-item>
-
-<!-- 修改后 -->
-<up-form-item label="重点巡检区域" prop="keyInspection" border-bottom required>
-  <up-radio-group v-model="workOrderForm.keyInspection" @change="groupChange">
-    <up-radio
-      :customStyle="{marginBottom: '8px'}"
-      v-for="(item, index) in keyInspectionOptions"
-      :key="index"
-      :label="item.name"
-      :name="item.name"
-    >
-    </up-radio>
-  </up-radio-group>
-</up-form-item>
-
-
+        <!-- 重点巡检区域 -->
+        <up-form-item label="重点巡检区域" prop="keyInspection" border-bottom required>
+          <up-radio-group v-model="workOrderForm.keyInspection" @change="groupChange">
+            <up-radio
+              :customStyle="{marginBottom: '8px'}"
+              v-for="(item, index) in keyInspectionOptions"
+              :key="index"
+              :label="item.name"
+              :name="item.name"
+            >
+            </up-radio>
+          </up-radio-group>
+        </up-form-item>
       </up-form>
     </view>
-
     <!-- 底部提交按钮 -->
     <view class="fixed-bottom-btn-wrap">
       <up-button type="primary" text="提交工单" @click="submitWorkOrder"></up-button>
     </view>
-
-    <!-- 合并后的通用下拉弹窗 -->
+    <!-- 通用下拉弹窗：道路名称、紧急程度保留 -->
     <up-action-sheet :show="showActionSheet" :actions="currentActionSheetData.list"
       :title="currentActionSheetData.title" @close="handleActionSheetClose"
       @select="handleActionSheetSelect"></up-action-sheet>
-
+    <!-- 级联选择器 up-cascader【对齐参考页面写法】 -->
+    <up-cascader
+      v-model:show="showCascader"
+      v-model="cascaderValue"
+      :data="cascaderOptions"
+      title="选择问题类型"
+      :auto-close="false"
+      @confirm="cascaderConfirm"
+    ></up-cascader>
     <!-- 完成时间选择器 -->
     <up-datetime-picker :show="show" v-model="expectedFinishDate" mode="datetime" :min-date="new Date()"
       @cancel="show = false" @confirm="expectedFinishDateConfirm"></up-datetime-picker>
@@ -111,74 +104,37 @@
 import { ref, reactive } from 'vue'
 import { onReady, onShow, onLoad } from '@dcloudio/uni-app';
 import { useUploadImgs } from '@/common/utils/useUploadImgs'
-import { getRoadListByLatLng } from '@/api/common'
+import { getRoadListByLatLng, getProblemListByType } from '@/api/common'
 import { universalApproval, workorderCreate } from '@/api/work-order-manage/work-order-manage'
 import { timeFormat } from '@/uni_modules/uview-plus'
 import { nextStepMap } from '@/common/utils/common'
 import { useUserStore } from '@/pinia/user';
 import { getDictLabel, getDictValue } from '@/common/utils/dict';
-
-// ========== 状态管理 ==========
 const userStore = useUserStore();
-
-// ========== 业务线相关状态（核心改造：已整合到workOrderForm中，删除冗余selectedBusiLine） ==========
-// 业务线中文名/编码统一取自数据字典 business_line（系统管理 → 字典管理），不再硬编码
 const BUSI_LINE_DICT_TYPE = 'business_line';
-// 中文判定：用于区分「传进来的是中文名」还是「传进来的是编码」
 const CJK_RE = /[一-龥]/;
-
-// 业务线选项列表（仅保留name字段=中文名称，适配单选框配置）
 const busiLineOptions = ref([]);
-// 格式化业务线选项（兼容1个/2个/3个的情况，生成中文名称列表）
 const formatBusiLineOptions = () => {
   if (!userStore.userInfo?.user?.busiLine) {
     busiLineOptions.value = [];
     return;
   }
-  const rawBusiLines = userStore.userInfo.user.busiLine.split(','); // 拆分字符串为数组 ["yl", "sz", "wy"]
-  console.log(rawBusiLines)
-  // 核心改造：仅生成name字段（值为中文名称），适配单选框:label="item.name"
+  const rawBusiLines = userStore.userInfo.user.busiLine.split(',');
   busiLineOptions.value = rawBusiLines.map(item => ({
-    name: getBusiLineCnByEn(item.trim()) // name=中文名称（园林/市政/物业）
+    name: getBusiLineCnByEn(item.trim())
   }));
-  console.log(busiLineOptions.value)
 };
-
-
 const keyInspectionOptions = reactive([
-  {
-    name: '否',
-    disabled: false,
-  },
-  {
-    name: '是',
-    disabled: false,
-  },
- 
+  { name: '否', disabled: false },
+  { name: '是', disabled: false },
 ]);
-
-// up-radio-group的v-model绑定的值如果设置为某个radio的name，就会被默认选中
-const radiovalue1 = ref('否');
-
 const groupChange = (n) => {
   console.log('groupChange', n);
 };
-
-const radioChange = (n) => {
-  console.log('radioChange', n);
-};
-
-// ========== 工具方法 ==========
-// 编码 → 中文名称。字典未拉到时（登录时字典请求是容错的）兜底显示原始编码，
-// 保证选项不为空、页面仍可用
 const getBusiLineCnByEn = (busiLineEn) => {
   if (!busiLineEn) return '';
   return getDictLabel(BUSI_LINE_DICT_TYPE, busiLineEn) || busiLineEn;
 };
-
-// ========== 工具方法：通过中文名称获取对应的英文标识 ==========
-// 注：字典未拉到时选项里放的就是原始编码，故对「非中文」入参原样返回；
-//     中文名解析不到仍返回空串，沿用调用方原有的异常提示
 const getBusiLineEnByCn = (cnName) => {
   if (!cnName) return '';
   const code = getDictValue(BUSI_LINE_DICT_TYPE, cnName);
@@ -186,10 +142,75 @@ const getBusiLineEnByCn = (cnName) =&gt; {
   return CJK_RE.test(cnName) ? '' : cnName;
 };
-// ========== 表单Ref ==========
-const workOrderFormRef = ref(null)
+// ========== 级联选择器变量（和参考页面对齐） ==========
+const showCascader = ref(false);
+const cascaderValue = ref([]);
+const cascaderOptions = ref([]);
-// ========== 公共上传逻辑复用 ==========
+// 打开级联弹窗
+const openCascader = () => {
+  console.log('312321dasd')
+  const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
+  if (!busiLineEn) {
+    uni.showToast({ title: '请先选择业务线', icon: 'none' })
+    return
+  }
+  if (!cascaderOptions.value || cascaderOptions.value.length === 0) {
+    uni.showToast({ title: '正在加载问题类型，请稍等', icon: 'none' });
+    loadProblemCascader(busiLineEn);
+    return;
+  }
+  cascaderValue.value = [];
+  showCascader.value = true;
+};
+
+/**
+ * 级联【确认回调】，选中后点确定才赋值，和参考页面保持一致
+ */
+const cascaderConfirm = (selectedArr) => {
+  console.log('最终选中值数组：', selectedArr);
+  // 递归拼接多级label，用 / 分隔
+  const getLabelByValueList = (list, valList) => {
+    const labelArr = [];
+    let currentList = list;
+    for (const val of valList) {
+      const target = currentList.find(item => item.value === val);
+      if (!target) break;
+      labelArr.push(target.label);
+      currentList = target.children || [];
+    }
+    return labelArr.join('/');
+  };
+  const fullLabel = getLabelByValueList(cascaderOptions.value, selectedArr);
+  workOrderForm.orderName = fullLabel;
+  workOrderForm.orderCode = selectedArr.at(-1);
+  cascaderValue.value = selectedArr;
+  workOrderFormRef.value?.validateField('orderName');
+};
+
+/**
+ * 加载级联树形数据
+ */
+const loadProblemCascader = async (parentCode) => {
+  if (!parentCode) {
+    cascaderOptions.value = []
+    return
+  }
+  try {
+    uni.showLoading({ title: '加载类型中...' })
+    const res = await getProblemListByType({ parentCode })
+    uni.hideLoading()
+    cascaderOptions.value = res || []
+  } catch (err) {
+    uni.hideLoading()
+    console.error('获取问题类型失败', err)
+    uni.showToast({ title: '获取问题类型失败', icon: 'none' })
+    cascaderOptions.value = []
+  }
+}
+
+// 表单Ref
+const workOrderFormRef = ref(null)
 const problemImgs = useUploadImgs({
   maxCount: 3,
   uploadText: '选择问题照片',
@@ -197,53 +218,41 @@ const problemImgs = useUploadImgs({
   formRef: workOrderFormRef,
   fieldName: 'problemImgs'
 })
-
-// 无需再手动初始化普通数组，直接使用 ref 响应式数据
 if (!Array.isArray(problemImgs.rawImgList.value)) {
   problemImgs.rawImgList.value = [];
 }
-
-// ========== 页面状态 ==========
-// 通用弹窗控制
 const showActionSheet = ref(false)
-// 当前弹窗配置
 const currentActionSheetData = reactive({
   type: '',
   list: [],
   title: ''
 })
-// 完成时间选择器控制
 const show = ref(false)
 const expectedFinishDate = ref(Date.now())
-
-// ========== 重新提交相关状态（核心：本地存储读取） ==========
-const isRenew = ref(false); // 是否为重新提交状态
-const renewOrderData = ref(null); // 重新提交的原有工单数据
-
-// ========== 下拉列表数据 ==========
+const isRenew = ref(false);
+const renewOrderData = ref(null);
 const roadNameList = ref([])
-const orderNameList = ref([])
 const pressingTypeList = ref([])
-// ========== 工单表单数据（核心调整：新增busiLineCn字段，绑定业务线） ==========
+// ========== 表单数据 ==========
 const workOrderForm = reactive({
-  busiLineCn: '', // 新增：业务线中文名称（用于form绑定、校验、回显）
-  roadId: 0,                     // 原有字段
-  roadName: '',                  // 原有字段
-  workLocation: '',              // 原有字段
-  orderName: '',                 // 原有字段
-  pressingType: '',              // 原有字段
-  pressingTypeName: '',          // 原有字段
-  problemDesc: '',               // 原有字段
-  lat: 0,                        // 原有字段
-  lon: 0,                        // 原有字段
-  expectedFinishDate: '',        // 原有字段
+  busiLineCn: '',
+  roadId: 0,
+  roadName: '',
+  workLocation: '',
+  orderName: '',
+  orderCode: '',
+  pressingType: '',
+  pressingTypeName: '',
+  problemDesc: '',
+  lat: 0,
+  lon: 0,
+  expectedFinishDate: '',
   keyInspection: '否'
 })
-
-// ========== 表单校验规则（核心调整：新增busiLineCn校验规则） ==========
+// 表单校验规则：prop改成 orderName，对齐参考页面
 const workOrderFormRules = reactive({
-  busiLineCn: [ // 新增：业务线必选校验
+  busiLineCn: [
     { type: 'string', required: true, message: '请选择业务线', trigger: ['change', 'blur'] }
   ],
   workLocation: [
@@ -253,7 +262,7 @@ const workOrderFormRules = reactive({
     { type: 'string', required: true, message: '请选择道路名称', trigger: ['change', 'blur'] }
   ],
   orderName: [
-    { type: 'string', required: true, message: '请选择问题类型', trigger: ['change', 'blur'] }
+    { type: 'string', required: true, message: '请选择问题类型', trigger: 'change' }
   ],
   pressingTypeName: [
     { type: 'string', required: true, message: '请选择紧急程度', trigger: ['change'] }
@@ -262,38 +271,27 @@ const workOrderFormRules = reactive({
     { type: 'string', required: true, message: '请输入情况描述', trigger: ['change', 'blur'] },
     { type: 'string', min: 3, max: 200, message: '情况描述需3-200字', trigger: ['change', 'blur'] }
   ],
-  problemImgs: [problemImgs.imgValidateRule] // 复用上传校验规则
+  problemImgs: [problemImgs.imgValidateRule]
 })
-// ========== 生命周期 ==========
-// 页面加载：读取本地存储的工单数据（适配workOrderForm.busiLineCn）
 onLoad((options) => {
-  // 初始化业务线选项
   formatBusiLineOptions();
-  // 默认选中第一个业务线（赋值给workOrderForm.busiLineCn，核心调整）
   if (busiLineOptions.value.length > 0) {
     workOrderForm.busiLineCn = busiLineOptions.value[0].name;
+    const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
+    loadProblemCascader(busiLineEn)
   }
-
-  // 判断是否为重新提交状态
   console.log(options)
   if (options.isRenew == 1 && options.tempKey) {
     isRenew.value = true;
     const tempKey = options.tempKey;
-
-    // 1. 从本地同步存储中读取完整工单数据
     try {
       const orderData = uni.getStorageSync(tempKey);
       if (orderData && typeof orderData === 'object') {
         renewOrderData.value = orderData;
-
-        console.log('123213')
-        console.log(orderData)
-        // 2. 回显工单数据到表单
         echoOrderData(renewOrderData.value);
       } else {
         uni.showToast({ title: '工单数据不存在，无法重新提交', icon: 'none' });
-        // 跳转回列表页
         setTimeout(() => uni.navigateBack(), 1000);
         return;
       }
@@ -303,106 +301,114 @@ onLoad((options) =&gt; {
       setTimeout(() => uni.navigateBack(), 1000);
       return;
     } finally {
-      // 3. 关键：用完即删，避免本地冗余存储和数据泄露
       uni.removeStorageSync(tempKey);
     }
   }
 });
-
 onReady(() => {
-  // 设置表单校验规则
   if (workOrderFormRef.value) {
     workOrderFormRef.value.setRules(workOrderFormRules)
   }
   console.log('工单表单规则初始化完成')
 })
-
 onShow(() => {
-  console.log(uni.$dict.getDictLabel('ai_image_status', 20))
-  console.log(uni.$dict.getDictSimpleList('work_name'))
-
-  // 初始化问题类型列表
-  orderNameList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('work_name'))
-  console.log('问题类型列表：', orderNameList.value)
-
-  // 初始化紧急程度列表
   pressingTypeList.value = uni.$dict.transformLabelValueToNameValue(uni.$dict.getDictSimpleList('workorder_pressing_type'))
   console.log('紧急程度列表：', pressingTypeList.value)
 })
-// ========== 核心方法：工单数据回显（适配workOrderForm.busiLineCn） ==========
-const echoOrderData = (orderItem) => {
-  // 1. 回显业务线：将工单的英文busiLine转为中文名称，赋值给workOrderForm.busiLineCn（核心调整）
-  if (orderItem.busiLine) {
-    workOrderForm.busiLineCn = getBusiLineCnByEn(orderItem.busiLine); // 英文->中文（如wy->物业）
+// 回显工单数据【重点对齐参考页面的递归查找级联路径】
+const echoOrderData = async (orderItem) => {
+  const busiCode = orderItem.busiLine || '';
+  if (busiCode) {
+    workOrderForm.busiLineCn = getBusiLineCnByEn(busiCode);
   }
-
-  // 2. 原有基础表单字段回显
   workOrderForm.roadId = orderItem.roadId || 0;
   workOrderForm.roadName = orderItem.roadName || '';
   workOrderForm.workLocation = orderItem.lonLatAddress || orderItem.roadName || '';
   workOrderForm.orderName = orderItem.orderName || '';
+  workOrderForm.orderCode = orderItem.orderCode || '';
   workOrderForm.pressingType = orderItem.pressingType || '';
   workOrderForm.pressingTypeName = uni.$dict.getDictLabel('workorder_pressing_type', orderItem.pressingType) || '';
   workOrderForm.problemDesc = orderItem.remark || '';
   workOrderForm.lat = orderItem.lat || 0;
   workOrderForm.lon = orderItem.lon || 0;
   workOrderForm.expectedFinishDate = orderItem.expectedFinishDate ? timeFormat(orderItem.expectedFinishDate, 'yyyy-mm-dd hh:MM:ss') : '';
-if (orderItem.keyInspection !== undefined) {
-  workOrderForm.keyInspection = orderItem.keyInspection === 1 ? '是' : '否'
-}
-  // 3. 上传图片回显（兼容useUploadImgs格式）
+  if (orderItem.keyInspection !== undefined) {
+    workOrderForm.keyInspection = orderItem.keyInspection === 1 ? '是' : '否'
+  }
   if (orderItem.problemsImgs && Array.isArray(orderItem.problemsImgs) && orderItem.problemsImgs.length > 0) {
     const imgList = orderItem.problemsImgs.map((imgUrl, index) => ({
       url: imgUrl,
       name: `renew_img_${index}`,
-      status: 'success' // 标记为已上传状态
+      status: 'success'
     }));
     problemImgs.imgList.value = imgList;
     problemImgs.rawImgList.value = imgList;
   }
-  // 4. 自动获取道路列表（修改：传递当前选中的业务线英文标识）
+  // ========= 回显核心：加载级联树，递归找到选中路径，赋值 cascaderValue =========
+  if (busiCode) {
+    await loadProblemCascader(busiCode);
+    const targetCode = orderItem.orderCode
+    if (targetCode && cascaderOptions.value.length) {
+      const findCascaderPath = (list, targetVal, path = []) => {
+        for (const node of list) {
+          const newPath = [...path, node.value]
+          if (node.value === targetVal) {
+            return newPath
+          }
+          if (node.children && node.children.length) {
+            const res = findCascaderPath(node.children, targetVal, newPath)
+            if (res) return res
+          }
+        }
+        return null
+      }
+      const selectPath = findCascaderPath(cascaderOptions.value, targetCode)
+      if (selectPath) {
+        cascaderValue.value = selectPath
+      }
+    }
+  }
+
   if (orderItem.lat && orderItem.lon) {
-    getRoadListByBusiLine(); // 改用封装后的方法，自动携带选中的业务线
+    getRoadListByBusiLine();
   }
 };
-// ========== 业务线相关方法（适配workOrderForm.busiLineCn） ==========
 /**
- * 业务线切换事件：清空道路信息 + 重新请求道路列表
+ * 业务线切换：清空道路、问题类型级联数据，重新加载级联树
  */
 const handleBusiLineChange = () => {
-  // 1. 清空已渲染的道路名称和表单字段
+  // 清空道路
   workOrderForm.roadName = '';
   workOrderForm.roadId = 0;
-  // 2. 清空道路名称列表数据
   roadNameList.value = [];
-  // 3. 若已选择工单位置，重新请求对应业务线的道路列表
+  // 清空问题类型
+  workOrderForm.orderName = ''
+  workOrderForm.orderCode = ''
+  cascaderValue.value = []
+  cascaderOptions.value = []
+  const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn)
+  loadProblemCascader(busiLineEn)
   if (workOrderForm.workLocation) {
     getRoadListByBusiLine();
   }
 };
-/**
- * 封装：根据当前选中业务线（中文）获取英文标识，再请求道路列表
- */
 const getRoadListByBusiLine = async () => {
   if (!workOrderForm.lat || !workOrderForm.lon) {
     return;
   }
-  // 核心：从workOrderForm.busiLineCn获取中文名称，转为英文标识（核心调整）
   const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
   if (!busiLineEn) {
     uni.showToast({ title: '业务线标识异常', icon: 'none' });
     return;
   }
-
   try {
     uni.showLoading({ title: '获取道路名称中...' });
     const roadRes = await getRoadListByLatLng({
-      busiLine: busiLineEn, // 传递英文标识（yl/sz/wy），接口正常使用
-      // companyCode: 'sls', // 传递英文标识（yl/sz/wy），接口正常使用
+      busiLine: busiLineEn,
       latitude: workOrderForm.lat,
       longitude: workOrderForm.lon
     });
@@ -425,115 +431,72 @@ const getRoadListByBusiLine = async () =&gt; {
   }
 };
-// ========== 通用弹窗方法 ==========
-/**
- * 打开通用下拉弹窗
- */
+// 通用action-sheet方法
 const handleActionSheetOpen = (type) => {
-  // 道路名称需先校验工单位置是否选择
   if (type === 'roadName' && !workOrderForm.workLocation) {
     uni.showToast({ title: '请先选择工单位置', icon: 'none' })
     return
   }
-
-  // 配置当前弹窗参数
   const configMap = {
     roadName: {
       title: '请选择道路名称',
       list: roadNameList.value
     },
-    orderName: {
-      title: '请选择问题类型',
-      list: orderNameList.value
-    },
     pressingType: {
       title: '请选择紧急程度',
       list: pressingTypeList.value
     }
   }
-
   currentActionSheetData.type = type
   currentActionSheetData.title = configMap[type].title
   currentActionSheetData.list = configMap[type].list
   showActionSheet.value = true
 }
-
-/**
- * 关闭通用下拉弹窗
- */
 const handleActionSheetClose = () => {
   showActionSheet.value = false
-  // 重置当前弹窗配置
   currentActionSheetData.type = ''
   currentActionSheetData.list = []
   currentActionSheetData.title = ''
 }
-
-/**
- * 通用下拉弹窗选择事件
- */
 const handleActionSheetSelect = (e) => {
   const { type } = currentActionSheetData
-  // 根据类型处理不同的选择逻辑
   switch (type) {
     case 'roadName':
       workOrderForm.roadName = e.name
       workOrderForm.roadId = e.code
       workOrderFormRef.value?.validateField('roadName')
       break
-    case 'orderName':
-      workOrderForm.orderName = e.name
-      workOrderFormRef.value?.validateField('orderName')
-      break
     case 'pressingType':
-      console.log(e)
       workOrderForm.pressingType = e.value
       workOrderForm.pressingTypeName = e.name
       workOrderFormRef.value?.validateField('pressingTypeName')
       break
   }
-  // 关闭弹窗
   showActionSheet.value = false
 }
-/**
- * 返回上一页
- */
 const navigateBack = () => {
   uni.reLaunch({
-    url: '/pages-sub/problem/work-order-manage/index', // 列表页路径
+    url: '/pages-sub/problem/work-order-manage/index',
     fail: () => {
-      // 兜底：若 reLaunch 失败，返回2层（跳过提交页）
       uni.navigateBack({ delta: 2 });
     }
   });
 }
-
-// 新增：清除希望完成时间的方法
 const clearExpectedFinishDate = () => {
   workOrderForm.expectedFinishDate = ''
-  // 清除后触发一次字段校验，确保校验状态更新
-  // this.$refs.inspectFormRef.validateField('expectedFinishDate')
 }
-
-/**
- * 选择工单位置
- */
 const chooseWorkLocation = () => {
   uni.chooseLocation({
     success: async (res) => {
       workOrderForm.roadName = ''
       workOrderForm.roadId = 0
       roadNameList.value = []
-
       workOrderForm.workLocation = res.name
       workOrderForm.lat = res.latitude
       workOrderForm.lon = res.longitude
-
       workOrderFormRef.value?.validateField('workLocation')
       workOrderFormRef.value?.validateField('roadName')
-
-      // 改用封装后的方法，自动携带选中的业务线英文标识
       await getRoadListByBusiLine();
     },
     fail: (err) => {
@@ -542,44 +505,28 @@ const chooseWorkLocation = () =&gt; {
     }
   })
 }
-
-/**
- * 完成时间确认
- */
 const expectedFinishDateConfirm = (e) => {
   console.log('选择的完成时间：', e)
   workOrderForm.expectedFinishDate = timeFormat(e.value, 'yyyy-mm-dd hh:MM:ss')
   show.value = false
 }
-
-/**
- * 隐藏键盘
- */
 const hideKeyboard = () => {
   uni.hideKeyboard()
 }
-/**
- * 提交工单（区分新增/重新提交，接口隔离：从workOrderForm.busiLineCn取值）
- */
 const submitWorkOrder = async () => {
   try {
-    // 先执行表单校验（包含业务线校验）
     await workOrderFormRef.value.validate()
-
-    // 核心：从workOrderForm.busiLineCn获取中文名称，转为英文标识（核心调整）
     const busiLineEn = getBusiLineEnByCn(workOrderForm.busiLineCn);
     if (!busiLineEn) {
       uni.showToast({ title: '业务线选择异常，请重新选择', icon: 'none' });
       return;
     }
-    console.log('完成时间：' + workOrderForm.expectedFinishDate)
     const keyInspectionVal = workOrderForm.keyInspection === '是' ? 1 : 0
-    // 构建公共提交数据
     const commonSubmitData = {
       roadId: workOrderForm.roadId,
       roadName: workOrderForm.roadName,
-      problemsImgs: problemImgs.getSuccessImgUrls(), // 复用上传逻辑的URL获取方法
+      problemsImgs: problemImgs.getSuccessImgUrls(),
       remark: workOrderForm.problemDesc.trim(),
       latLonType: 2,
       lat: workOrderForm.lat,
@@ -587,62 +534,47 @@ const submitWorkOrder = async () =&gt; {
       lonLatAddress: workOrderForm.workLocation,
       pressingType: workOrderForm.pressingType,
       orderName: workOrderForm.orderName,
+      orderCode: workOrderForm.orderCode,
       keyInspection: keyInspectionVal,
       expectedFinishDate: workOrderForm.expectedFinishDate == "" ? "" : new Date(workOrderForm.expectedFinishDate).getTime(),
       sourceId: 1,
-      sourceName: workOrderForm.busiLineCn, // 从form字段获取业务线中文名称
-      busiLine: busiLineEn // 传递英文标识（yl/sz/wy），接口正常使用
+      sourceName: workOrderForm.busiLineCn,
+      busiLine: busiLineEn
     }
-    console.log('工单数据')
-    console.log('完成时间：' + workOrderForm.expectedFinishDate)
     console.log(commonSubmitData)
-    // 显示加载中
     uni.showLoading({ title: '提交中...' })
     let res
-
-    // 核心：根据状态区分接口调用
     if (isRenew.value) {
-      // 重新提交：调用 universalApproval 接口
       const renewSubmitData = {
-        // 原有工单必要参数
         workerDataId: renewOrderData.value.id,
         taskKey: renewOrderData.value.taskKey,
         taskId: renewOrderData.value.taskId,
         operateType: nextStepMap[renewOrderData.value.taskKey]?.operateTypeRenew || '',
         agree: 0,
         reason: workOrderForm.problemDesc.trim(),
-        // 新编辑的工单数据
         ...commonSubmitData
       }
       res = await universalApproval(renewSubmitData)
     } else {
-      // 新增工单：调用原有 workorderCreate 接口（不影响原有功能）
       res = await workorderCreate(commonSubmitData)
     }
-
     uni.hideLoading()
     uni.showToast({
       title: isRenew.value ? '重新提交成功' : '工单提交成功',
       icon: 'success',
       duration: 1000
     })
-
-    // 延迟跳转回列表页
     setTimeout(() => {
       uni.reLaunch({
         url: '/pages-sub/problem/work-order-manage/index'
       })
     }, 1000)
   } catch (error) {
-    // 隐藏加载框
     uni.hideLoading()
-
-    // 区分是表单校验失败还是接口调用失败
     if (!Array.isArray(error)) {
-      // 接口调用失败
       console.error(isRenew.value ? '工单重新提交失败：' : '工单提交失败：', error)
       uni.showToast({
-        title: isRenew.value ? error.msg : error.msg,
+        title: error.msg || '请求异常',
         icon: 'none',
         duration: 2000
       })
@@ -652,15 +584,11 @@ const submitWorkOrder = async () =&gt; {
 </script>
 <style lang="scss" scoped>
-// 全局页面样式
 .page-container {
   min-height: 100vh;
-  padding-bottom: 100rpx; // 给底部按钮留空间
+  padding-bottom: 100rpx;
 }
-
-
-// 工单表单内容容器
 .work-order-form-content {
   background: #fff;
 }
-</style>
 \ No newline at end of file
+</style>
@@ -41,6 +41,13 @@
 						"navigationBarTitleText": "巡查计划"
 					}
 				},
+{
+					"path": "attendanceRecord",
+					"style": {
+						"navigationBarTitleText": "考勤记录"
+					}
+				},
+				
 				{
 					"path": "patrol-manage/pending-plan-detail",
 					"style": {
@@ -60,12 +60,12 @@
                     v-for="(baseListItem,baseListIndex) in baseList"
                     :key="baseListIndex"
             >
-                <up-icon
+                <!-- <up-icon
                         :customStyle="{paddingTop:20+'rpx'}"
                         :name="baseListItem.name"
                         :size="22"
-                ></up-icon>
-                 <text class="grid-text">{{baseListItem.num}}</text>
+                ></up-icon> -->
+                 <text class="grid-text" style="font-size: 24px;">{{baseListItem.num}}</text>
                 <text class="grid-text">{{baseListItem.title}}</text>
             </up-grid-item>
         </up-grid>
@@ -140,113 +140,64 @@
 </template>
 <script setup lang="ts">
-import { ref, computed, nextTick } from 'vue';
-import { onShow,onUnload } from '@dcloudio/uni-app'
+import { ref, computed, nextTick, watch } from 'vue';
+import { onShow, onUnload } from '@dcloudio/uni-app';
 import { useUserStore } from '@/pinia/user';
-import { timeFormat } from '@/uni_modules/uview-plus';
+// import { timeFormat } from '@/uni_modules/uview-plus/libs/function/date';
 import uniCharts from '@/components/uni-charts/uni-charts.vue';
 import { getUnreadCount } from "@/api/user";
 import {
   getTaskCompletionSummary,
   taskDetailsWithDistance,
-  taskDetailsWithSmartSort
+  taskDetailsWithSmartSort,
+  getCurrentOrg,
+  orgTaskIndicator
 } from "@/api/index/index";
-
 const userStore = useUserStore();
-const deptId = computed(() => String(userStore.userInfo?.user?.deptId ?? ''));
+const deptId = computed(() => String(userStore.userInfo?.deptId ?? ''));
 // ====================== 分组配置（多部门归属同一组） ======================
 type GroupItem = {
-  deptIds: string[]; // 多个部门ID数组
+  deptIds: string[];
   label: string;
-  showTipHeader: boolean; // 是否展示顶部进度条
-  useWalkText: boolean;   // 是否展示步行距离文案
+  showTipHeader: boolean;
+  useWalkText: boolean;
 };
-
-// 创建响应式数据  
-const baseList = ref([  
-   {  
-        num:'123',
-        name: 'photo',  
-        title: '应办任务数' 
-    },  
-    {  
-       num:'32',
-        name: 'photo',  
-        title: '已办任务数'  
-    },  
-    {  
-       num:'456',
-        name: 'lock',  
-        title: '待办任务数'  
-    },  
-    {  
-       num:'0',
-        name: 'star',  
-        title: '超时未完成'  
-    },  
-]);  
-
-const options1 = ref([
-  {
-    label: '默认排序',
-    value: 1,
-  },
-  {
-    label: '距离优先',
-    value: 2,
-  },
-  {
-    label: '价格优先',
-    value: 3,
-  }
-]);
-
 const groupConfig: GroupItem[] = [
-  // 组2 A1B2 纯效率·有提醒
   {
     deptIds: ['361', '363', '279', '277', '270'],
-    label: '[组2  A1B2 纯效率·有提醒]',
+    label: '[组2 A1B2 纯效率·有提醒]',
     showTipHeader: true,
     useWalkText: true
   },
-  // 组3 A2B1 个性化·无提醒
   {
     deptIds: ['252', '273', '274', '337', '359', '360'],
-    label: '[组3  A2B1 个性化·无提醒]',
+    label: '[组3 A2B1 个性化·无提醒]',
     showTipHeader: false,
     useWalkText: false
   },
-  // 组4 A2B2 个性化·有提醒
   {
     deptIds: ['281', '272', '271', '338', '280'],
-    label: '[组4  A2B2 个性化·有提醒]',
+    label: '[组4 A2B2 个性化·有提醒]',
     showTipHeader: true,
     useWalkText: false
   },
 ];
-// 默认组1：未匹配到的所有部门
 const defaultGroup: GroupItem = {
   deptIds: [],
-  label: '[组1  A1B1 纯效率·无提醒]',
+  label: '[组1 A1B1 纯效率·无提醒]',
   showTipHeader: false,
   useWalkText: true
 };
-
-// 获取当前部门所属分组
 const currentGroup = computed(() => {
   const targetDept = deptId.value;
-  // 遍历匹配部门ID
-  for (const group of groupConfig) {
-    if (group.deptIds.includes(targetDept)) {
-      return group;
+  for (const g of groupConfig) {
+    if (g.deptIds.includes(targetDept)) {
+      return g;
     }
   }
-  // 无匹配返回默认组1
   return defaultGroup;
 });
-
-// 自动读取分组配置，无需修改其他业务代码
 const tipText = computed(() => currentGroup.value.label);
 const showTipHeader = computed(() => currentGroup.value.showTipHeader);
 const isWalkTextMode = computed(() => currentGroup.value.useWalkText);
@@ -257,13 +208,11 @@ const finishNum = ref(0);
 const avgNum = ref(0);
 const msgCount = ref(0);
 const currentTabValue = ref(0);
-
 const dateRange = ref<string[]>([]);
 const yesterday = new Date();
 yesterday.setDate(yesterday.getDate() - 1);
-const maxDate = ref(timeFormat(yesterday, 'yyyy-mm-dd'));
+const maxDate = ref(timeFormat(yesterday, 'YYYY-MM-DD'));
 const minDate = '2026-01-06';
-
 const isDatePickerOpen = ref(false);
 const handlePopupShow = () => {
   isDatePickerOpen.value = true;
@@ -279,17 +228,15 @@ const doneFullList = ref&lt;any[]&gt;([]);
 const taskList = computed(() => {
   return currentTabValue.value === 0 ? todoFullList.value : doneFullList.value;
 });
-
 const chooseOptions = computed(() => [
   { title: `待办事项(${todoTotal.value})`, id: 'todo' },
-  { title: `已办事项(${doneTotal.value})`, id: 'done' }
+  { title: `已办事项(${doneTotal.value})`, id: 'done' },
 ]);
 const currentLon = ref<string>('');
 const currentLat = ref<string>('');
 const chartWidth = ref(0);
 const chartHeight = ref(300);
-
 const klineCategories = ref<string[]>([]);
 const klineChartData = ref([
   {
@@ -303,12 +250,11 @@ const klineChartData = ref([
     color: '#B34C17'
   }
 ]);
-
 const klineOption = ref({
   grid: {
     top: '25%',
     left: '12%',
-    right: '8%',
+    right: '12%',
     bottom: '16%'
   },
   xAxis: {
@@ -323,8 +269,8 @@ const klineOption = ref({
     trigger: 'axis',
     formatter: (params: any[]) => {
       return `${params[0].name}<br/>
-      ${params[0].seriesName}: ${params[0].data}<br/>
-      ${params[1].seriesName}: ${params[1].data}`;
+${params[0].seriesName}: ${params[0].value}<br/>
+${params[1].seriesName}: ${params[1].value}`;
     }
   },
   legend: {
@@ -334,171 +280,123 @@ const klineOption = ref({
   }
 });
-const value1 = ref(1)
-const showActionSheet = ref(false)
+const baseList = ref<Array<{ num: string; title: string }>>([]);
+const orgOptions = ref<any[]>([]);
+const value1 = ref<number | string>('');
+const showActionSheet = ref(false);
+
+watch(orgOptions, async (list) => {
+  if (list.length && !value1.value) {
+    value1.value = list[0].value;
+    // 拿到默认组织后，拉指标
+    if (dateRange.value.length === 2) {
+      await fetchOrgIndicator(Number(value1.value), dateRange.value[0], dateRange.value[1]);
+    }
+  }
+}, { immediate: true });
-// actionSheet选项映射
-const actionSheetOptions = computed(()=>{
-  return options1.value.map(opt => ({
+const actionSheetOptions = computed(() => {
+  return orgOptions.value.map(opt => ({
     name: opt.label,
     value: opt.value
-  }))
-})
-// 显示当前选中的文字
-const sortLabel = computed(()=>{
-  const cur = options1.value.find(i=>i.value === value1.value)
-  return cur?.label ?? "默认排序"
-})
-
-// 打开菜单
-const openActionSheet = ()=>{
-  showActionSheet.value = true
-}
-// 选中回调
-const handleSheetSelect = (item: {name:string, value:number})=>{
-  value1.value = item.value
-  showActionSheet.value = false
-  // ========== 在这里添加排序业务逻辑 ==========
-  console.log('选中排序类型：', item.value)
-}
-
-
-const userName = computed(() => userStore.userInfo?.user?.nickname || '用户');
+  }));
+});
+const sortLabel = computed(() => {
+  const cur = orgOptions.value.find(i => i.value === value1.value);
+  return cur?.label ?? "";
+});
+const openActionSheet = () => {
+  showActionSheet.value = true;
+};
+// ActionSheet选中组织：刷新指标
+const handleSheetSelect = async (item: { name: string; value: number }) => {
+  value1.value = item.value;
+  showActionSheet.value = false;
+  console.log('选中组织：', item.value);
+  if (dateRange.value.length === 2) {
+    await fetchOrgIndicator(item.value, dateRange.value[0], dateRange.value[1]);
+  }
+};
+const userName = computed(() => userStore.userInfo?.nickname || '用户');
 const rpx2px = (rpx: number) => {
   const systemInfo = uni.getSystemInfoSync();
   return Math.floor(systemInfo.screenWidth / 750 * rpx);
 };
-// ========== 滚动逻辑 终极优化 ==========
+// ========== 滚动逻辑 ==========
 const showChartArea = ref(true);
-// 隐藏阈值：超过80rpx收起
 const scrollHideThreshold = rpx2px(80);
-// 安全显示区间：≤80rpx一律显示，覆盖所有回弹残留(70/80/90)
 const safeShowThreshold = rpx2px(130);
 let scrollTimer: number | null = null;
-
-// 下拉触顶强制展示
 const handleTouchTop = () => {
   showChartArea.value = true;
 };
-
 const onListScroll = (e: any) => {
   const scrollTop = e.detail.scrollTop;
-  console.log('scrollTop', scrollTop)
   if (scrollTimer) clearTimeout(scrollTimer);
-
-  // 实时：只要在安全区间立刻显示
   if (scrollTop <= safeShowThreshold) {
     showChartArea.value = true;
   } else if (scrollTop > scrollHideThreshold) {
     showChartArea.value = false;
   }
-
-  // 滚动停止兜底二次校验
   scrollTimer = setTimeout(() => {
     if (scrollTop <= safeShowThreshold) {
       showChartArea.value = true;
     }
   }, 100);
 };
-
-// 切换tab重置图表显示
 const handleTabClick = (tabIndex: number) => {
   if (currentTabValue.value === tabIndex) return;
   currentTabValue.value = tabIndex;
-  // 切换tab强制显示图表
   showChartArea.value = true;
 };
-// 页面每次显示强制重置图表为显示状态
-onShow(async () => {
-  showChartArea.value = true;
-  chartWidth.value = rpx2px(750 - 60);
-  chartHeight.value = rpx2px(300);
-  initRecent7Days();
-  getUnread();
-  await loadAllTaskByDept();
-});
-
-// 页面销毁清除定时器
-onUnload(() => {
-  if (scrollTimer) clearTimeout(scrollTimer);
-});
-// ======================================
-
-const getCurrentLocation = (): Promise<{ lon: string; lat: string }> => {
-  return new Promise((resolve, reject) => {
-    uni.getSetting({
-      success: (settingRes) => {
-        if (!settingRes.authSetting['scope.userLocation']) {
-          uni.authorize({
-            scope: 'scope.userLocation',
-            success: () => {
-              uni.getLocation({
-                type: 'gcj02',
-                success: (loc) => {
-                  console.log(loc.longitude)
-                   console.log(loc.latitude)
-                  resolve({
-                    lon: loc.longitude.toFixed(6),
-                    lat: loc.latitude.toFixed(6)
-                  })
-                },
-                fail: (err) => {
-                  uni.showToast({ title: '获取位置失败，请打开手机定位', icon: 'none' })
-                  reject(err)
-                }
-              })
-            },
-            fail: () => {
-              uni.showModal({
-                title: '需要定位权限',
-                content: '请允许获取位置才能正常使用',
-                confirmText: '去设置',
-                success: (modal) => {
-                  if (modal.confirm) {
-                    uni.openSetting()
-                  }
-                }
-              })
-              reject('用户拒绝定位权限')
-            }
-          })
-        } else {
-          uni.getLocation({
-            type: 'gcj02',
-            success: (loc) => {
-               console.log(loc.longitude)
-                   console.log(loc.latitude)
-              resolve({
-                lon: loc.longitude.toFixed(6),
-                lat: loc.latitude.toFixed(6)
-              })
-            },
-            fail: (err) => {
-              uni.showToast({ title: '获取位置失败，请打开手机定位', icon: 'none' })
-              reject(err)
-            }
-          })
-        }
+// ========== 公共函数：请求 orgTaskIndicator 指标接口 ==========
+const fetchOrgIndicator = async (orgId: number, beginDate: string, endDate: string) => {
+  try {
+    // 日期字符串转毫秒时间戳
+    const beginTime = new Date(beginDate).getTime();
+    const endTime = new Date(endDate).getTime();
+    const res = await orgTaskIndicator({
+      orgId,
+      beginTime,
+      endTime
+    });
+    console.log('orgTaskIndicator 返回：', res);
+    baseList.value = [
+      {
+        num: String(res.totalCnt ?? 0),
+        title: '应办任务数'
       },
-      fail: (err) => {
-        reject('获取权限失败：' + err.errMsg)
+      {
+        num: String(res.doneCnt ?? 0),
+        title: '已办任务数'
+      },
+      {
+        num: String(res.pendingCnt ?? 0),
+        title: '待办任务数'
+      },
+      {
+        num: String(res.overdueCnt ?? 0),
+        title: '超时未完成'
       }
-    })
-  })
-}
-
-const initRecent7Days = async () => {
-  const yesterday = new Date();
-  yesterday.setDate(yesterday.getDate() - 1);
-  const sevenDaysAgo = new Date(yesterday);
-  sevenDaysAgo.setDate(yesterday.getDate() - 6);
+    ];
+  } catch (err) {
+    console.error('orgTaskIndicator 请求失败：', err);
+  }
+};
+// ========== 初始化日期范围（近7天） ==========
+const initRecent7Days = () => {
+  const now = new Date();
+  const end = new Date(now);
+  end.setDate(end.getDate() - 1);
+  const start = new Date(end);
+  start.setDate(start.getDate() - 6);
   dateRange.value = [
-    timeFormat(sevenDaysAgo, 'yyyy-mm-dd'),
-    timeFormat(yesterday, 'yyyy-mm-dd')
+    timeFormat(start, 'YYYY-MM-DD'),
+    timeFormat(end, 'YYYY-MM-DD')
   ];
   initChartData(dateRange.value[0], dateRange.value[1]);
 };
@@ -508,8 +406,18 @@ const getUnread = async () =&gt; {
     const res = await getUnreadCount();
     msgCount.value = res || 0;
   } catch (error) {
-    console.error('获取未读消息数失败:', error);
-    msgCount.value = 0;
+    console.error('获取未读消息失败:', error);
+  }
+};
+
+// getOrg：只拉组织下拉选项，不处理指标
+const getOrg = async () => {
+  try {
+    const res = await getCurrentOrg();
+    console.log('getCurrentOrg组织下拉：', res);
+    orgOptions.value = res.options || [];
+  } catch (error) {
+    console.error('获取组织下拉失败:', error);
   }
 };
@@ -519,9 +427,9 @@ const initChartData = async (beginTime: string, endTime: string) =&gt; {
     const res = await getTaskCompletionSummary(postData);
     klineCategories.value = res.map((item: any) => item.currentDate);
     klineChartData.value[0].data = res.map((item: any) => item.completedNum);
-    klineChartData.value[1].data = res.map((item: any) => item.countpendingNum);
+    klineChartData.value[1].data = res.map((item: any) => item.countPendingNum);
   } catch (error) {
-    console.error('获取图表数据失败:', error);
+    console.error('图表数据请求失败:', error);
   }
 };
@@ -542,27 +450,18 @@ const loadDistanceApiTask = async (lon: string, lat: string) =&gt; {
     await nextTick();
   } catch (err) {
     uni.showToast({ title: '加载任务失败', icon: 'none' });
-    console.error('加载distance接口任务报错', err);
+    console.error('loadDistanceApiTask error', err);
     todoFullList.value = [];
     doneFullList.value = [];
     todoTotal.value = 0;
     doneTotal.value = 0;
   }
 };
-
 const loadSmartSortTask = async (lon: string, lat: string) => {
   try {
     const [todoRes, doneRes] = await Promise.all([
-      taskDetailsWithSmartSort({
-        queryType: 1,
-        currentLon: lon,
-        currentLat: lat
-      }),
-      taskDetailsWithSmartSort({
-        queryType: 2,
-        currentLon: lon,
-        currentLat: lat
-      })
+      taskDetailsWithSmartSort({ queryType: 1, currentLon: lon, currentLat: lat }),
+      taskDetailsWithSmartSort({ queryType: 2, currentLon: lon, currentLat: lat })
     ]);
     todoFullList.value = todoRes?.sortedTasks || [];
     doneFullList.value = doneRes?.sortedTasks || [];
@@ -573,14 +472,13 @@ const loadSmartSortTask = async (lon: string, lat: string) =&gt; {
     await nextTick();
   } catch (err) {
     uni.showToast({ title: '加载任务失败', icon: 'none' });
-    console.error('加载smartSort接口任务报错', err);
+    console.error('loadSmartSortTask error', err);
     todoFullList.value = [];
     doneFullList.value = [];
     todoTotal.value = 0;
     doneTotal.value = 0;
   }
 };
-
 const loadAllTaskByDept = async () => {
   const loc = await getCurrentLocation();
   currentLon.value = loc.lon;
@@ -592,37 +490,119 @@ const loadAllTaskByDept = async () =&gt; {
   }
 };
-const handleDateConfirm = (e: string[]) => {
+// 日期确认回调：更新图表 + 重新请求指标orgTaskIndicator
+const handleDateConfirm = async (e: string[]) => {
   dateRange.value = e;
-  initChartData(e[0], e[1]);
+  await initChartData(e[0], e[1]);
+  if (value1.value) {
+    await fetchOrgIndicator(Number(value1.value), e[0], e[1]);
+  }
 };
-const handleMsgClick = () => {
-  uni.navigateTo({ url: '/pages-sub/msg/index' });
+const getCurrentLocation = (): Promise<{ lon: string; lat: string }> => {
+  return new Promise((resolve, reject) => {
+    uni.getSetting({
+      success: (settingRes) => {
+        if (!settingRes.authSetting['scope.userLocation']) {
+          uni.authorize({
+            scope: 'scope.userLocation',
+            success: () => {
+              uni.getLocation({
+                type: 'gcj02',
+                success: (loc) => {
+                  resolve({
+                    lon: loc.longitude.toFixed(6),
+                    lat: loc.latitude.toFixed(6)
+                  });
+                },
+                fail: (err) => {
+                  uni.showToast({ title: '获取位置失败，请开启定位', icon: 'none' });
+                  reject('定位失败');
+                }
+              });
+            },
+            fail: () => {
+              uni.showModal({
+                title: '需要定位权限',
+                content: '允许定位才能查看任务距离',
+                confirmText: '去设置',
+                success: (modalRes) => {
+                  if (modalRes.confirm) {
+                    uni.openSetting();
+                  }
+                }
+              });
+              reject('拒绝定位');
+            }
+          });
+        } else {
+          uni.getLocation({
+            type: 'gcj02',
+            success: (loc) => {
+              resolve({
+                lon: loc.longitude.toFixed(6),
+                lat: loc.latitude.toFixed(6)
+              });
+            },
+            fail: (err) => {
+              uni.showToast({ title: '获取位置失败，请开启定位', icon: 'none' });
+              reject('定位失败');
+            }
+          });
+        }
+      },
+      fail: (err) => {
+        reject('获取权限设置失败');
+      }
+    });
+  });
 };
+const handleMsgClick = () => {
+  uni.navigateTo({ url: '/pages-sub/msg/msg' });
+};
 const handleTaskClick = (item: any) => {
   if (item.taskType == "maintain") {
     if (currentTabValue.value === 0) {
-      // planTypeId / businessType 必须带上：填报页靠这两个参数加载动态字段，
-      // 缺任一个会直接提示「缺少业务参数」、表单空白（后端的 workTypeId 也会变成 NaN）
-      uni.navigateTo({ url: `/pages-sub/daily/maintain-manage/add-record?planNo=${item.planNo || ''}&planTypeId=${item.planTypeId ?? ''}&businessType=${item.busiLine ?? ''}` });
-    }
-    if (currentTabValue.value === 1) {
-      uni.navigateTo({ url: `/pages-sub/daily/maintain-manage/finish-plan-detail?planNo=${item.planNo || ''}` });
+      uni.navigateTo({
+        url: `/pages-sub/daily/maintain-add?planNo=${item.planNo || ''}&planTypeId=${item.planTypeId ?? ''}&businessLine=${item.busiLine ?? ''}`
+      });
+    } else {
+      uni.navigateTo({
+        url: `/pages-sub/daily/maintain-detail?planNo=${item.planNo || ''}`
+      });
     }
   }
   if (item.taskType == "inspection") {
     if (currentTabValue.value === 0) {
-      uni.navigateTo({ url: `/pages-sub/daily/patrol-manage/add-patrol-record?planNo=${item.planNo}&batchNo=${item.batchNo}` });
-    }
-    if (currentTabValue.value === 1) {
-      uni.navigateTo({ url: `/pages-sub/daily/patrol-manage/finish-plan-detail?planNo=${item.planNo || ''}` });
+      uni.navigateTo({
+        url: `/pages-sub/daily/inspect-add?planNo=${item.planNo}&batchNo=${item.batchNo}`
+      });
+    } else {
+      uni.navigateTo({
+        url: `/pages-sub/daily/inspect-detail?planNo=${item.planNo || ''}`
+      });
     }
   }
 };
+
+onShow(async () => {
+  showChartArea.value = true;
+  chartWidth.value = rpx2px(750 - 60);
+  chartHeight.value = rpx2px(300);
+  initRecent7Days();
+  getUnread();
+  await getOrg(); // 拉取组织下拉列表
+  await loadAllTaskByDept();
+});
+
+onUnload(() => {
+  if (scrollTimer) clearTimeout(scrollTimer);
+});
 </script>
+
+
 <style scoped lang="scss">
 $primary-color: #1677ff;
 $danger-color: #E53935;
@@ -26,6 +26,7 @@
         <up-cell  title="账号" :value="userInfo.username"></up-cell>
         <up-cell  title="电话" :value="userInfo.mobile"></up-cell>
         <up-cell  title="角色" :value="translateRoles(userStore.userInfo.roles)"></up-cell>
+           <up-cell  title="考勤" :isLink="true"  url="/pages-sub/daily/attendanceRecord"></up-cell>
       </up-cell-group>
     </view>
+/*
+ * @Author       : LQ
+ * @Description  :
+ * @version      : 3.0
+ * @Date         : 2021-08-20 16:44:21
+ * @LastAuthor   : jry
+ * @lastTime     : 2025-12-19 08:55:21
+ * @FilePath     : /uview-plus/libs/config/props/calendar.js
+ */
+import { t } from '../../libs/i18n'
+export default {
+    // calendar 组件
+    calendar: {
+        title: t("up.calendar.chooseDates"),
+        showTitle: true,
+        showSubtitle: true,
+        mode: 'single',
+        startText: t("up.common.start"),
+        endText: t("up.common.end"),
+        customList: [],
+        color: '#3c9cff',
+        minDate: 0,
+        maxDate: 0,
+        defaultDate: null,
+        maxCount: Number.MAX_SAFE_INTEGER, // Infinity
+        rowHeight: 56,
+        formatter: null,
+        showLunar: false,
+        showMark: true,
+        confirmText: t("up.common.confirm"),
+        confirmDisabledText: t("up.common.confirm"),
+        show: false,
+        closeOnClickOverlay: false,
+        readonly: false,
+        showConfirm: true,
+        maxRange: Number.MAX_SAFE_INTEGER, // Infinity
+        rangePrompt: '',
+        showRangePrompt: true,
+        allowSameDay: false,
+        rangeResultMode: 'all',
+        enableTime: false,
+        timePrecision: 'minute',
+        defaultTime: '',
+		round: 0,
+        overlay: true,
+        duration: 300,
+        overlayStyle: {},
+        overlayOpacity: 0.5,
+        zIndex: 10075,
+        safeAreaInsetBottom: true,
+        safeAreaInsetTop: false,
+        bgColor: '',
+		monthNum: 3,
+        monthSwitch: false,
+        showToday: true,
+        todayColor: '',
+        weekText: [t("up.week.one"), t("up.week.two"), t("up.week.three"), t("up.week.four"), t("up.week.five"), t("up.week.six"), t("up.week.seven")],
+        forbidDays: [],
+        forbidDaysToast: t("up.calendar.disabled"),
+        monthFormat: '',
+        pageInline: false
+    }
+}
+<template>
+	<view class="u-calendar-header u-border-bottom">
+		<text
+			class="u-calendar-header__title"
+			v-if="showTitle"
+		>{{ title }}</text>
+		<view
+			class="u-calendar-header__subtitle-wrap"
+			v-if="showSubtitle"
+		>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': prevYearDisabled }"
+				@click="prevYear"
+			>«</text>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': prevDisabled }"
+				@click="prev"
+			>‹</text>
+			<text class="u-calendar-header__subtitle">{{ subtitle }}</text>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': nextDisabled }"
+				@click="next"
+			>›</text>
+			<text
+				v-if="showSwitch"
+				class="u-calendar-header__switch"
+				:class="{ 'u-calendar-header__switch--disabled': nextYearDisabled }"
+				@click="nextYear"
+			>»</text>
+			<text
+				v-if="showToday"
+				class="u-calendar-header__today"
+				:class="{ 'u-calendar-header__today--disabled': todayDisabled }"
+				@click="today"
+			>{{ todayText }}</text>
+		</view>
+		<view class="u-calendar-header__weekdays">
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[0] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[1] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[2] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[3] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[4] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[5] }}</text>
+			<text class="u-calendar-header__weekdays__weekday">{{ weekText[6] }}</text>
+		</view>
+	</view>
+</template>
+
+<script>
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	export default {
+		name: 'u-calendar-header',
+		mixins: [mpMixin, mixin],
+		props: {
+			// 标题
+			title: {
+				type: String,
+				default: ''
+			},
+			// 副标题
+			subtitle: {
+				type: String,
+				default: ''
+			},
+			// 是否显示标题
+			showTitle: {
+				type: Boolean,
+				default: true
+			},
+			// 是否显示副标题
+			showSubtitle: {
+				type: Boolean,
+				default: true
+			},
+			// 星期文本
+			weekText: {
+				type: Array,
+				default: () => {
+					return []
+				}
+			},
+			// 是否显示月份切换按钮
+			showSwitch: {
+				type: Boolean,
+				default: false
+			},
+			// 上个月按钮是否禁用
+			prevDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 下个月按钮是否禁用
+			nextDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 上一年按钮是否禁用
+			prevYearDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 下一年按钮是否禁用
+			nextYearDisabled: {
+				type: Boolean,
+				default: false
+			},
+			// 是否显示今天按钮
+			showToday: {
+				type: Boolean,
+				default: true
+			},
+			// 今天按钮文案
+			todayText: {
+				type: String,
+				default: ''
+			},
+			// 今天按钮是否禁用
+			todayDisabled: {
+				type: Boolean,
+				default: false
+			}
+		},
+		data() {
+			return {
+
+			}
+		},
+		methods: {
+			prev() {
+				if (!this.prevDisabled) {
+					this.$emit('prev')
+				}
+			},
+			next() {
+				if (!this.nextDisabled) {
+					this.$emit('next')
+				}
+			},
+			prevYear() {
+				if (!this.prevYearDisabled) {
+					this.$emit('prevYear')
+				}
+			},
+			nextYear() {
+				if (!this.nextYearDisabled) {
+					this.$emit('nextYear')
+				}
+			},
+			today() {
+				if (!this.todayDisabled) {
+					this.$emit('today')
+				}
+			}
+		},
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-calendar-header {
+		display: flex;
+		flex-direction: column;
+		padding-bottom: 4px;
+
+		&__title {
+			font-size: 16px;
+			color: var(--up-main-color, $u-main-color);
+			text-align: center;
+			height: 42px;
+			line-height: 42px;
+			font-weight: bold;
+		}
+
+		&__subtitle-wrap {
+			@include flex;
+			align-items: center;
+			justify-content: center;
+			height: 40px;
+		}
+
+		&__subtitle {
+			font-size: 14px;
+			color: var(--up-main-color, $u-main-color);
+			text-align: center;
+			font-weight: bold;
+			min-width: 120px;
+		}
+
+		&__switch {
+			width: 44px;
+			height: 40px;
+			line-height: 40px;
+			text-align: center;
+			color: var(--up-main-color, $u-main-color);
+			font-size: 22px;
+			font-weight: bold;
+			flex-shrink: 0;
+
+			&--disabled {
+				opacity: 0.35;
+			}
+		}
+
+		&__weekdays {
+			@include flex;
+			justify-content: space-between;
+
+			&__weekday {
+				font-size: 13px;
+				color: var(--up-main-color, $u-main-color);
+				line-height: 30px;
+				flex: 1;
+				text-align: center;
+			}
+		}
+
+		&__today {
+			margin-left: 4px;
+			height: 28px;
+			line-height: 28px;
+			padding: 0 10px;
+			border-radius: 14px;
+			font-size: 13px;
+			color: var(--up-primary, $u-primary);
+			border: 1px solid var(--up-primary, $u-primary);
+			flex-shrink: 0;
+
+			&--disabled {
+				opacity: 0.35;
+			}
+		}
+	}
+</style>
+<template>
+	<view class="u-calendar-month-wrapper" ref="u-calendar-month-wrapper">
+		<view v-for="(item, index) in months" :key="index" :class="[`u-calendar-month-${index}`]"
+			:ref="`u-calendar-month-${index}`" :id="`month-${index}`">
+			<text v-if="index !== 0" class="u-calendar-month__title">{{ monthTitle(item) }}</text>
+			<view class="u-calendar-month__days">
+				<view v-if="showMark" class="u-calendar-month__days__month-mark-wrapper">
+					<text class="u-calendar-month__days__month-mark-wrapper__text">{{ item.month }}</text>
+				</view>
+				<view class="u-calendar-month__days__day" v-for="(item1, index1) in item.date" :key="index1"
+					:style="[dayStyle(index, index1, item1)]" @tap="clickHandler(index, index1, item1)"
+					:class="[item1.selected && 'u-calendar-month__days__day__select--selected']">
+					<view class="u-calendar-month__days__day__select" :style="[daySelectStyle(index, index1, item1)]">
+						<text class="u-calendar-month__days__day__select__info"
+							:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__info--disabled' : '']"
+							:style="[textStyle(item1)]">{{ item1.day }}</text>
+						<text v-if="getBottomInfo(index, index1, item1)"
+							class="u-calendar-month__days__day__select__buttom-info"
+							:class="[(item1.disabled || isForbid(item1) ) ? 'u-calendar-month__days__day__select__buttom-info--disabled' : '']"
+							:style="[textStyle(item1)]">{{ getBottomInfo(index, index1, item1) }}</text>
+						<text v-if="item1.dot" class="u-calendar-month__days__day__select__dot"></text>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	// #ifdef APP-NVUE
+	// 由于nvue不支持百分比单位，需要查询宽度来计算每个日期的宽度
+	const dom = uni.requireNativePlugin('dom')
+	// #endif
+	import { mpMixin } from '../../libs/mixin/mpMixin';
+	import { mixin } from '../../libs/mixin/mixin';
+	import { addUnit, deepClone, toast, sleep, getWindowInfo } from '../../libs/function/index';
+	import { colorGradient } from '../../libs/function/colorGradient';
+	import test from '../../libs/function/test';
+	import defProps from '../../libs/config/props';
+	import dayjs from '../u-datetime-picker/dayjs.esm.min.js';
+	import { t } from '../../libs/i18n'
+	// 已经是YYYY-MM-DD形式的日期字符串，无需再交给dayjs解析
+	const DATE_STR_REG = /^\d{4}-\d{2}-\d{2}$/
+	export default {
+		name: 'u-calendar-month',
+		mixins: [mpMixin, mixin],
+		props: {
+			// 是否显示月份背景色
+			showMark: {
+				type: Boolean,
+				default: true
+			},
+			// 主题色，对底部按钮和选中日期有效
+			color: {
+				type: String,
+				default: '#3c9cff'
+			},
+			// 月份数据
+			months: {
+				type: Array,
+				default: () => []
+			},
+			// 日期选择类型
+			mode: {
+				type: String,
+				default: 'single'
+			},
+			// 日期行高
+			rowHeight: {
+				type: [String, Number],
+				default: 58
+			},
+			// mode=multiple时，最多可选多少个日期
+			maxCount: {
+				type: [String, Number],
+				default: Infinity
+			},
+			// mode=range时，第一个日期底部的提示文字
+			startText: {
+				type: String,
+				default: '开始'
+			},
+			// mode=range时，最后一个日期底部的提示文字
+			endText: {
+				type: String,
+				default: '结束'
+			},
+			// 默认选中的日期，mode为multiple或range是必须为数组格式
+			defaultDate: {
+				type: [Array, String, Date],
+				default: null
+			},
+			// 最小的可选日期
+			minDate: {
+				type: [String, Number],
+				default: 0
+			},
+			// 最大可选日期
+			maxDate: {
+				type: [String, Number],
+				default: 0
+			},
+			// 如果没有设置maxDate，则往后推多少个月
+			maxMonth: {
+				type: [String, Number],
+				default: 2
+			},
+			// 是否为只读状态，只读状态下禁止选择日期
+			readonly: {
+				type: Boolean,
+				default: () => defProps.calendar.readonly
+			},
+			// 日期区间最多可选天数，默认无限制，mode = range时有效
+			maxRange: {
+				type: [Number, String],
+				default: Infinity
+			},
+			// 范围选择超过最多可选天数时的提示文案，mode = range时有效
+			rangePrompt: {
+				type: String,
+				default: ''
+			},
+			// 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
+			showRangePrompt: {
+				type: Boolean,
+				default: true
+			},
+			// 是否允许日期范围的起止时间为同一天，mode = range时有效
+			allowSameDay: {
+				type: Boolean,
+				default: false
+			},
+			forbidDays: {
+				type: Array,
+				default: () => []
+			},
+			forbidDaysToast: {
+				type: String,
+				default: ''
+			},
+			// 今天日期，用于独立高亮
+			todayDate: {
+				type: String,
+				default: ''
+			},
+			// 今天日期的独立高亮颜色
+			todayColor: {
+				type: String,
+				default: ''
+			}
+		},
+		data() {
+			return {
+				// 每个日期的宽度
+				width: 0,
+				// 当前选中的日期item
+				item: {},
+				selected: []
+			}
+		},
+		watch: {
+			selectedChange: {
+				immediate: true,
+				handler(n) {
+					this.setDefaultDate()
+				}
+			}
+		},
+		computed: {
+			// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
+			selectedChange() {
+				return [this.minDate, this.maxDate, this.defaultDate]
+			},
+			// selected中的元素可能是用户通过defaultDate传入的原始值（未补零的字符串、
+			// Date对象、时间戳等），这里统一归一化一次，避免在每个日期格子里反复解析
+			selectedDates() {
+				return this.selected.map((item) => this.formatDate(item))
+			},
+			// 供渲染期做O(1)的选中判断，取代原先每个格子都要遍历selected的dayjs比较
+			selectedDateMap() {
+				const map = {}
+				this.selectedDates.forEach((date) => {
+					map[date] = true
+				})
+				return map
+			},
+			// 区间模式的起止日期
+			selectedStart() {
+				return this.selectedDates[0]
+			},
+			selectedEnd() {
+				return this.selectedDates[this.selectedDates.length - 1]
+			},
+			normalizedTodayDate() {
+				return this.todayDate ? this.formatDate(this.todayDate) : ''
+			},
+			dayStyle(index1, index2, item) {
+				return (index1, index2, item) => {
+					const style = {}
+					let week = item.week
+					// 隐藏挂载场景下节点宽度可能拿到0，兜底使用窗口宽度避免首日偏移归零
+					const wrapperWidth = this.width > 0 ? this.width : (getWindowInfo().windowWidth || 0)
+					// 不进行四舍五入的形式保留2位小数
+					const dayWidth = Number(parseFloat(wrapperWidth / 7).toFixed(3).slice(0, -1))
+					// 得出每个日期的宽度
+					// #ifdef APP-NVUE
+					style.width = addUnit(dayWidth, 'px')
+					// #endif
+					style.height = addUnit(this.rowHeight, 'px')
+					if (index2 === 0) {
+						// 获取当前为星期几，如果为0，则为星期天，减一为每月第一天时，需要向左偏移的item个数
+						week = (week === 0 ? 7 : week) - 1
+						// #ifdef APP-NVUE
+						style.marginLeft = addUnit(week * dayWidth, 'px')
+						// #endif
+						// #ifndef APP-NVUE
+						style.marginLeft = `${(week / 7) * 100}%`
+						// #endif
+					}
+					if (this.mode === 'range') {
+						// 之所以需要这么写，是因为DCloud公司的iOS客户端导致的bug
+						style.paddingLeft = 0
+						style.paddingRight = 0
+						style.paddingBottom = 0
+						style.paddingTop = 0
+					}
+					return style
+				}
+			},
+			daySelectStyle() {
+				return (index1, index2, item) => {
+					let date = this.dateOf(item),
+						style = {}
+					// selected已归一化为YYYY-MM-DD（月份可能需要补0），故可直接比较字符串
+					if (this.selectedDateMap[date]) {
+						style.backgroundColor = this.color
+					}
+					if (this.normalizedTodayDate && date === this.normalizedTodayDate) {
+						style.border = `1px solid ${this.resolvedTodayColor}`
+						style.boxSizing = 'border-box'
+					}
+					if (this.mode === 'single') {
+						if (date === this.selectedStart) {
+							// 因为需要对nvue的兼容，只能这么写，无法缩写，也无法通过类名控制等等
+							style.borderTopLeftRadius = '3px'
+							style.borderBottomLeftRadius = '3px'
+							style.borderTopRightRadius = '3px'
+							style.borderBottomRightRadius = '3px'
+						}
+					} else if (this.mode === 'range') {
+						if (this.selectedDates.length >= 2) {
+							// 第一个日期设置左上角和左下角的圆角
+							if (date === this.selectedStart) {
+								style.borderTopLeftRadius = '3px'
+								style.borderBottomLeftRadius = '3px'
+							}
+							// 最后一个日期设置右上角和右下角的圆角
+							if (date === this.selectedEnd) {
+								style.borderTopRightRadius = '3px'
+								style.borderBottomRightRadius = '3px'
+							}
+							// 处于第一和最后一个之间的日期，背景色设置为浅色，通过将对应颜色进行等分，再取其尾部的颜色值
+							if (date > this.selectedStart && date < this.selectedEnd) {
+								style.backgroundColor = this.rangeMiddleColor
+								// 增加一个透明度，让范围区间的背景色也能看到底部的mark水印字符
+								style.opacity = this.upThemeIsDark ? 0.85 : 0.7
+							}
+						} else if (this.selectedDates.length === 1) {
+							// 之所以需要这么写，是因为uni-app的iOS客户端的bug
+							// 进行还原操作，否则在nvue的iOS，uni-app有bug，会导致诡异的表现
+							style.borderTopLeftRadius = '3px'
+							style.borderBottomLeftRadius = '3px'
+						}
+					} else {
+						if (this.selectedDateMap[date]) {
+							style.borderTopLeftRadius = '3px'
+							style.borderBottomLeftRadius = '3px'
+							style.borderTopRightRadius = '3px'
+							style.borderBottomRightRadius = '3px'
+						}
+					}
+					return style
+				}
+			},
+			// 区间中间日期的背景色与格子无关，按整体算一次即可，
+			// 否则区间内每个格子都要做一遍100等分的颜色渐变计算
+			rangeMiddleColor() {
+				const rangeEndColor = this.upThemeVar('--up-card-bg-color', this.upThemeIsDark ? '#1c1c1e' : '#ffffff')
+				return colorGradient(this.color, rangeEndColor, 100)[90]
+			},
+			resolvedTodayColor() {
+				return this.todayColor || this.color
+			},
+			// 某个日期是否被选中
+			textStyle() {
+				return (item) => {
+					const date = this.dateOf(item),
+						style = {}
+					// 选中的日期，提示文字设置白色
+					if (this.selectedDateMap[date]) {
+						style.color = '#ffffff'
+					}
+					if (this.mode === 'range') {
+						// 如果是范围选择模式，第一个和最后一个之间的日期，文字颜色设置为高亮的主题色
+						if (date > this.selectedStart && date < this.selectedEnd) {
+							style.color = this.color
+						}
+					}
+					if (this.normalizedTodayDate && date === this.normalizedTodayDate && !this.selectedDateMap[date]) {
+						style.color = this.resolvedTodayColor
+					}
+					return style
+				}
+			},
+			// 获取底部的提示文字
+			getBottomInfo() {
+				return (index1, index2, item) => {
+					const date = this.dateOf(item)
+					const bottomInfo = item.bottomInfo
+					// 当为日期范围模式时，且选择的日期个数大于0时
+					if (this.mode === 'range' && this.selectedDates.length > 0) {
+						if (this.selectedDates.length === 1) {
+							// 选择了一个日期时，如果当前日期为数组中的第一个日期，则显示底部文字为“开始”
+							if (date === this.selectedStart) return this.startText
+							else return bottomInfo
+						} else {
+							// 如果数组中的日期大于2个时，第一个和最后一个显示为开始和结束日期
+							if (this.selectedDates.length === 2 && date === this.selectedStart && date === this
+								.selectedEnd) {
+								// 如果长度为2，且第一个等于第二个日期，则提示语放在同一个item中
+								return `${this.startText}/${this.endText}`
+							} else if (date === this.selectedStart) {
+								return this.startText
+							} else if (date === this.selectedEnd) {
+								return this.endText
+							} else {
+								return bottomInfo
+							}
+						}
+					} else {
+						return bottomInfo
+					}
+				}
+			}
+		},
+		mounted() {
+			this.init()
+		},
+		emits: ['monthSelected', 'updateMonthTop'],
+		methods: {
+			init() {
+				// 初始化默认选中
+				this.$emit('monthSelected', this.selected)
+				this.$nextTick(() => {
+					// 这里需要另一个延时，因为获取宽度后，会进行月份数据渲染，只有渲染完成之后，才有真正的高度
+					// 因为nvue下，$nextTick并不是100%可靠的
+					sleep(10).then(() => {
+						this.getWrapperWidth()
+						this.getMonthRect()
+					})
+				})
+			},
+			monthTitle(item) {
+				if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
+					return item.year + '年' + (item.month < 10 ? '0' + item.month : item.month) + '月'
+				} else {
+					return (item.month < 10 ? '0' + item.month : item.month) + '/' + item.year
+				}
+			},
+			isForbid(item) {
+				if (this.mode === 'range' || !this.forbidDays.length) {
+					return false
+				}
+				return this.forbidDays.includes(this.dateOf(item))
+			},
+			// 归一化为YYYY-MM-DD，已经是该形式的字符串则直接返回，省掉一次dayjs解析
+			formatDate(value) {
+				if (typeof value === 'string' && DATE_STR_REG.test(value)) {
+					return value
+				}
+				return dayjs(value).format("YYYY-MM-DD")
+			},
+			// 取日期格子的日期字符串，父组件生成数据时已经算好；
+			// 兼容自定义formatter返回了不带dateStr的新对象的情况
+			dateOf(item) {
+				return item.dateStr || dayjs(item.date).format("YYYY-MM-DD")
+			},
+			// 判断两个日期是否相等
+			dateSame(date1, date2) {
+				return dayjs(date1).isSame(dayjs(date2))
+			},
+			isSelectedDate(date) {
+				return !!this.selectedDateMap[this.formatDate(date)]
+			},
+			// 获取月份数据区域的宽度，因为nvue不支持百分比，所以无法通过css设置每个日期item的宽度
+			getWrapperWidth() {
+				// #ifdef APP-NVUE
+				dom.getComponentRect(this.$refs['u-calendar-month-wrapper'], res => {
+					const width = res && res.size ? Number(res.size.width) : 0
+					this.width = width > 0 ? width : (getWindowInfo().windowWidth || 0)
+				})
+				// #endif
+				// #ifndef APP-NVUE
+				this.$uGetRect('.u-calendar-month-wrapper').then(size => {
+					const width = size ? Number(size.width) : 0
+					this.width = width > 0 ? width : (getWindowInfo().windowWidth || 0)
+				})
+				// #endif
+			},
+			getMonthRect() {
+				// 获取每个月份数据的尺寸，用于父组件在scroll-view滚动事件中，监听当前滚动到了第几个月份
+				const promiseAllArr = this.months.map((item, index) => this.getMonthRectByPromise(
+					`u-calendar-month-${index}`))
+				// 一次性返回
+				Promise.all(promiseAllArr).then(
+					sizes => {
+						let height = 1
+						const topArr = []
+						for (let i = 0; i < this.months.length; i++) {
+							// 添加到months数组中，供scroll-view滚动事件中，判断当前滚动到哪个月份
+							topArr[i] = height
+							height += sizes[i].height
+						}
+						// 由于微信下，无法通过this.months[i].top的形式(引用类型)去修改父组件的month的top值，所以使用事件形式对外发出
+						this.$emit('updateMonthTop', topArr)
+					})
+			},
+			// 获取每个月份区域的尺寸
+			getMonthRectByPromise(el) {
+				// #ifndef APP-NVUE
+				// $uGetRect为uView自带的节点查询简化方法，详见文档介绍：https://uview-plus.jiangruyi.com/js/getRect.html
+				// 组件内部一般用this.$uGetRect，对外的为uni.$u.getRect，二者功能一致，名称不同
+				return new Promise(resolve => {
+					this.$uGetRect(`.${el}`).then(size => {
+						resolve(size)
+					})
+				})
+				// #endif
+
+				// #ifdef APP-NVUE
+				// nvue下，使用dom模块查询元素高度
+				// 返回一个promise，让调用此方法的主体能使用then回调
+				return new Promise(resolve => {
+					dom.getComponentRect(this.$refs[el][0], res => {
+						resolve(res.size)
+					})
+				})
+				// #endif
+			},
+			// 点击某一个日期
+			clickHandler(index1, index2, item) {
+				if (this.readonly) {
+					return;
+				}
+				this.item = item
+				const date = dayjs(item.date).format("YYYY-MM-DD")
+				if (item.disabled) return
+				if (this.isForbid(item)) {
+					uni.showToast({
+						title: this.forbidDaysToast
+					})
+					return
+				}
+				// 对上一次选择的日期数组进行深度克隆
+				let selected = deepClone(this.selected)
+				if (this.mode === 'single') {
+					// 单选情况下，让数组中的元素为当前点击的日期
+					selected = [date]
+				} else if (this.mode === 'multiple') {
+					if (selected.some(item => this.dateSame(item, date))) {
+						// 如果点击的日期已在数组中，则进行移除操作，也就是达到反选的效果
+						const itemIndex = selected.findIndex(item => item === date)
+						selected.splice(itemIndex, 1)
+					} else {
+						// 如果点击的日期不在数组中，且已有的长度小于总可选长度时，则添加到数组中去
+						if (selected.length < this.maxCount) selected.push(date)
+					}
+				} else {
+					// 选择区间形式
+					if (selected.length === 0 || selected.length >= 2) {
+						// 如果原来就为0或者大于2的长度，则当前点击的日期，就是开始日期
+						selected = [date]
+					} else if (selected.length === 1) {
+						// 如果已经选择了开始日期
+						const existsDate = selected[0]
+						// 如果当前选择的日期小于上一次选择的日期，则当前的日期定为开始日期
+						if (dayjs(date).isBefore(existsDate)) {
+							selected = [date]
+						} else if (dayjs(date).isAfter(existsDate)) {
+							// 当前日期减去最大可选的日期天数，如果大于起始时间，则进行提示
+							if(dayjs(dayjs(date).subtract(this.maxRange, 'day')).isAfter(dayjs(selected[0])) && this.showRangePrompt) {
+								if(this.rangePrompt) {
+									toast(this.rangePrompt)
+								} else {
+									toast(t("up.calendar.daysExceed", { days: this.maxRange }))
+								}
+								return
+							}
+							// 如果当前日期大于已有日期，将当前的添加到数组尾部
+							selected.push(date)
+							const startDate = selected[0]
+							const endDate = selected[1]
+							const arr = []
+							let i = 0
+							do {
+								// 将开始和结束日期之间的日期添加到数组中
+								arr.push(dayjs(startDate).add(i, 'day').format("YYYY-MM-DD"))
+								i++
+								// 累加的日期小于结束日期时，继续下一次的循环
+							} while (dayjs(startDate).add(i, 'day').isBefore(dayjs(endDate)))
+							// 为了一次性修改数组，避免computed中多次触发，这里才用arr变量一次性赋值的方式，同时将最后一个日期添加近来
+							arr.push(endDate)
+							selected = arr
+						} else {
+							// 选择区间时，只有一个日期的情况下，且不允许选择起止为同一天的话，不允许选择自己
+							if (selected[0] === date && !this.allowSameDay) return
+							selected.push(date)
+						}
+					}
+				}
+				this.setSelected(selected)
+			},
+			// 设置默认日期
+			setDefaultDate() {
+				if (!this.defaultDate) {
+					// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
+					const selected = [dayjs().format("YYYY-MM-DD")]
+					return this.setSelected(selected, false)
+				}
+				let defaultDate = []
+				const minDate = this.minDate || dayjs().format("YYYY-MM-DD")
+				const maxDate = this.maxDate || dayjs(minDate).add(this.maxMonth - 1, 'month').format("YYYY-MM-DD")
+				if (this.mode === 'single') {
+					// 单选模式，可以是字符串或数组，Date对象等
+					if (!test.array(this.defaultDate)) {
+						defaultDate = [dayjs(this.defaultDate).format("YYYY-MM-DD")]
+					} else {
+						defaultDate = [this.defaultDate[0]]
+					}
+				} else {
+					// 如果为非数组，则不执行
+					if (!test.array(this.defaultDate)) return
+					defaultDate = this.defaultDate
+				}
+				// 过滤用户传递的默认数组，取出只在可允许最大值与最小值之间的元素
+				defaultDate = defaultDate.filter(item => {
+					return dayjs(item).isAfter(dayjs(minDate).subtract(1, 'day')) && dayjs(item).isBefore(dayjs(
+						maxDate).add(1, 'day'))
+				})
+				this.setSelected(defaultDate, false)
+			},
+			setSelected(selected, event = true) {
+				this.selected = selected
+				event && this.$emit('monthSelected', this.selected,'tap')
+			},
+			selectDate(date) {
+				const targetDate = dayjs(date).format("YYYY-MM-DD")
+				for (let monthIndex = 0; monthIndex < this.months.length; monthIndex++) {
+					const dayIndex = this.months[monthIndex].date.findIndex(item => {
+						return this.dateSame(item.date, targetDate)
+					})
+					if (dayIndex !== -1) {
+						this.clickHandler(monthIndex, dayIndex, this.months[monthIndex].date[dayIndex])
+						return
+					}
+				}
+			}
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+
+	.u-calendar-month-wrapper {
+		margin-top: 4px;
+	}
+
+	.u-calendar-month {
+
+		&__title {
+			display: flex;
+			flex-direction: column;
+			font-size: 14px;
+			line-height: 42px;
+			height: 42px;
+			color: var(--up-main-color, $u-main-color);
+			text-align: center;
+			font-weight: bold;
+		}
+
+		&__days {
+			position: relative;
+			@include flex;
+			flex-wrap: wrap;
+
+			&__month-mark-wrapper {
+				position: absolute;
+				top: 0;
+				bottom: 0;
+				left: 0;
+				right: 0;
+				@include flex;
+				justify-content: center;
+				align-items: center;
+
+				&__text {
+					font-size: 155px;
+					color: var(--up-calendar-month-mark-color, rgba(231, 232, 234, 0.83));
+				}
+			}
+
+			&__day {
+				@include flex;
+				padding: 2px;
+				/* #ifndef APP-NVUE */
+				// vue下使用css进行宽度计算，因为某些安卓机会无法进行js获取父元素宽度进行计算得出，会有偏移
+				width: calc(100% / 7);
+				box-sizing: border-box;
+				/* #endif */
+
+				&__select {
+					flex: 1;
+					@include flex;
+					align-items: center;
+					justify-content: center;
+					position: relative;
+
+					&__dot {
+						width: 7px;
+						height: 7px;
+						border-radius: 100px;
+						background-color: $u-error;
+						position: absolute;
+						top: 12px;
+						right: 7px;
+					}
+
+					&__buttom-info {
+						color: var(--up-content-color, $u-content-color);
+						text-align: center;
+						position: absolute;
+						bottom: 5px;
+						font-size: 10px;
+						text-align: center;
+						left: 0;
+						right: 0;
+
+						&--selected {
+							color: #ffffff;
+						}
+
+						&--disabled {
+							color: var(--up-disabled-color, #cacbcd);
+						}
+					}
+
+					&__info {
+						text-align: center;
+						font-size: 16px;
+						color: var(--up-main-color, $u-main-color);
+
+						&--selected {
+							color: #ffffff;
+						}
+
+						&--disabled {
+							color: var(--up-disabled-color, #cacbcd);
+						}
+					}
+
+					&--selected {
+						background-color: $u-primary;
+						@include flex;
+						justify-content: center;
+						align-items: center;
+						flex: 1;
+						border-radius: 3px;
+					}
+
+					&--range-selected {
+						opacity: 0.3;
+						border-radius: 0;
+					}
+
+					&--range-start-selected {
+						border-top-right-radius: 0;
+						border-bottom-right-radius: 0;
+					}
+
+					&--range-end-selected {
+						border-top-left-radius: 0;
+						border-bottom-left-radius: 0;
+					}
+				}
+			}
+		}
+	}
+
+</style>
+import { defineMixin } from '../../libs/vue.js'
+import CalendarDefaultProps from './calendar.js'
+import { registerComponentProps } from '../../libs/config/props.js'
+
+const defProps = registerComponentProps(CalendarDefaultProps)
+export const props = defineMixin({
+    props: {
+        // 日历顶部标题
+        title: {
+            type: String,
+            default: () => defProps.calendar.title
+        },
+        // 是否显示标题
+        showTitle: {
+            type: Boolean,
+            default: () => defProps.calendar.showTitle
+        },
+        // 是否显示副标题
+        showSubtitle: {
+            type: Boolean,
+            default: () => defProps.calendar.showSubtitle
+        },
+        // 日期类型选择，single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围
+        mode: {
+            type: String,
+            default: () => defProps.calendar.mode
+        },
+        // mode=range时，第一个日期底部的提示文字
+        startText: {
+            type: String,
+            default: () => defProps.calendar.startText
+        },
+        // mode=range时，最后一个日期底部的提示文字
+        endText: {
+            type: String,
+            default: () => defProps.calendar.endText
+        },
+        // 自定义列表
+        customList: {
+            type: Array,
+            default: () => defProps.calendar.customList
+        },
+        // 主题色，对底部按钮和选中日期有效
+        color: {
+            type: String,
+            default: () => defProps.calendar.color
+        },
+        // 最小的可选日期
+        minDate: {
+            type: [String, Number],
+            default: () => defProps.calendar.minDate
+        },
+        // 最大可选日期
+        maxDate: {
+            type: [String, Number],
+            default: () => defProps.calendar.maxDate
+        },
+        // 默认选中的日期，mode为multiple或range是必须为数组格式
+        defaultDate: {
+            type: [Array, String, Date, null],
+            default: () => defProps.calendar.defaultDate
+        },
+        // mode=multiple时，最多可选多少个日期
+        maxCount: {
+            type: [String, Number],
+            default: () => defProps.calendar.maxCount
+        },
+        // 日期行高
+        rowHeight: {
+            type: [String, Number],
+            default: () => defProps.calendar.rowHeight
+        },
+        // 日期格式化函数
+        formatter: {
+            type: [Function, null],
+            default: () => defProps.calendar.formatter
+        },
+        // 是否显示农历
+        showLunar: {
+            type: Boolean,
+            default: () => defProps.calendar.showLunar
+        },
+        // 是否显示月份背景色
+        showMark: {
+            type: Boolean,
+            default: () => defProps.calendar.showMark
+        },
+        // 确定按钮的文字
+        confirmText: {
+            type: String,
+            default: () => defProps.calendar.confirmText
+        },
+        // 确认按钮处于禁用状态时的文字
+        confirmDisabledText: {
+            type: String,
+            default: () => defProps.calendar.confirmDisabledText
+        },
+        // 是否显示日历弹窗
+        show: {
+            type: Boolean,
+            default: () => defProps.calendar.show
+        },
+        // 是否显示遮罩
+        overlay: {
+            type: Boolean,
+            default: () => defProps.calendar.overlay
+        },
+        // 动画时长，单位ms
+        duration: {
+            type: [String, Number],
+            default: () => defProps.calendar.duration
+        },
+        // 自定义遮罩的样式
+        overlayStyle: {
+            type: [Object, String],
+            default: () => defProps.calendar.overlayStyle
+        },
+        // 遮罩的透明度，0-1之间
+        overlayOpacity: {
+            type: [Number, String],
+            default: () => defProps.calendar.overlayOpacity
+        },
+        // 层级
+        zIndex: {
+            type: [String, Number],
+            default: () => defProps.calendar.zIndex
+        },
+        // 是否为iPhoneX留出底部安全距离
+        safeAreaInsetBottom: {
+            type: Boolean,
+            default: () => defProps.calendar.safeAreaInsetBottom
+        },
+        // 是否留出顶部安全距离（状态栏高度）
+        safeAreaInsetTop: {
+            type: Boolean,
+            default: () => defProps.calendar.safeAreaInsetTop
+        },
+        // 弹窗背景色，设置为transparent可去除白色背景
+        bgColor: {
+            type: String,
+            default: () => defProps.calendar.bgColor
+        },
+        // 是否允许点击遮罩关闭日历
+        closeOnClickOverlay: {
+            type: Boolean,
+            default: () => defProps.calendar.closeOnClickOverlay
+        },
+        // 是否为只读状态，只读状态下禁止选择日期
+        readonly: {
+            type: Boolean,
+            default: () => defProps.calendar.readonly
+        },
+        // 	是否展示确认按钮
+        showConfirm: {
+            type: Boolean,
+            default: () => defProps.calendar.showConfirm
+        },
+        // 日期区间最多可选天数，默认无限制，mode = range时有效
+        maxRange: {
+            type: [Number, String],
+            default: () => defProps.calendar.maxRange
+        },
+        // 范围选择超过最多可选天数时的提示文案，mode = range时有效
+        rangePrompt: {
+            type: String,
+            default: () => defProps.calendar.rangePrompt
+        },
+        // 范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效
+        showRangePrompt: {
+            type: Boolean,
+            default: () => defProps.calendar.showRangePrompt
+        },
+        // 是否允许日期范围的起止时间为同一天，mode = range时有效
+        allowSameDay: {
+            type: Boolean,
+            default: () => defProps.calendar.allowSameDay
+        },
+        // 区间模式下确认返回值格式，all-返回区间内所有日期，boundary-仅返回起止日期
+        rangeResultMode: {
+            type: String,
+            default: () => defProps.calendar.rangeResultMode
+        },
+        // 是否开启时分秒选择
+        enableTime: {
+            type: Boolean,
+            default: () => defProps.calendar.enableTime
+        },
+        // 时间精度：hour-仅时，minute-时分，second-时分秒
+        timePrecision: {
+            type: String,
+            default: () => defProps.calendar.timePrecision
+        },
+        // 默认时间，格式支持 HH / HH:mm / HH:mm:ss
+        defaultTime: {
+            type: String,
+            default: () => defProps.calendar.defaultTime
+        },
+		// 圆角值
+		round: {
+		    type: [Boolean, String, Number],
+		    default: () => defProps.calendar.round
+		},
+		// 最多展示月份数量
+		monthNum: {
+			type: [Number, String],
+			default: 3
+		},
+		// 是否启用非滚动的单月切换模式
+		monthSwitch: {
+			type: Boolean,
+			default: () => defProps.calendar.monthSwitch
+		},
+		// 是否显示今天按钮
+		showToday: {
+			type: Boolean,
+			default: () => defProps.calendar.showToday
+		},
+		// 今天日期的独立高亮颜色，默认跟随主题色
+		todayColor: {
+			type: String,
+			default: () => defProps.calendar.todayColor
+		},
+        // 星期文案
+        weekText: {
+			type: Array,
+			default: defProps.calendar.weekText
+		},
+        forbidDays: {
+			type: Array,
+			default: defProps.calendar.forbidDays
+		},
+        forbidDaysToast:{
+			type: String,
+			default: defProps.calendar.forbidDaysToast
+		},
+        monthFormat:{
+			type: String,
+			default: defProps.calendar.monthFormat
+		},
+        // 是否页面内展示
+        pageInline:{
+			type: Boolean,
+			default: defProps.calendar.pageInline
+		}
+    }
+})
 <template>
-	<up-popup 
-		:show="popupShow" 
-		mode="bottom" 
-		:popup="false"
-		:mask="true" 
-		:closeable="closeable" 
-		:safe-area-inset-bottom="true"
-		:close-icon-color="closeIconColor" 
-		:z-index="uZIndex"
-		:maskCloseAble="maskCloseAble" 
+	<u-popup
+		:show="show"
+		mode="bottom"
+		:overlay="overlay"
+		:duration="duration"
+		:overlayStyle="overlayStyle"
+		:overlayOpacity="overlayOpacity"
+		:zIndex="zIndex"
+		:safeAreaInsetBottom="safeAreaInsetBottom"
+		:safeAreaInsetTop="safeAreaInsetTop"
+		:bgColor="bgColor"
+		:closeable="!pageInline"
 		@close="close"
+		@closed="$emit('closed')"
+		:round="round"
+		:pageInline="pageInline"
+		:closeOnClickOverlay="closeOnClickOverlay"
 	>
-		<view class="up-p-t-30 up-p-l-20 up-m-b-10" v-if="headerDirection ==='column'">
-			<up-steps v-if="popupShow" dot direction="column" v-model:current="tabsIndex">
-                <view  v-for="(item, index) in genTabsList"  @click="toFatherIndex(index)">
-                    <up-steps-item :title="item.name"/>
-                </view>
-			</up-steps>
-		</view>
-		<view class="up-p-t-20 up-m-b-10" v-else>
-			<up-tabs 
-				v-if="popupShow" 
-				:list="genTabsList"
-				:scrollable="true" 
-				v-model:current="tabsIndex" 
-				@change="tabsChange" 
-				ref="tabs"
-			></up-tabs>
-		</view>
-		<view class="area-box">
-			<view class="u-flex" :class="{ 'change':isChange }"
-				:style="{transform: optionsCols == 2 && isChange ? 'translateX(-33.3333333%)' : ''}">
-				<template v-for="(levelData, levelIndex) in levelList" :key="levelIndex">
-					<view 
-						v-if="optionsCols == 2 || levelIndex == tabsIndex" 
-						class="area-item"
-						:style="{ width: optionsCols == 2 ? '33.33333%' : '750rpx'}"
-					>
-						<view class="u-padding-10" :style="[levelPaneStyle, { height: '100%' }]">
-							<scroll-view :scroll-y="true" style="height: 100%">
-								<up-cell-group v-if="levelIndex === 0 || selectedValueIndexs[levelIndex - 1] !== undefined">
-									<up-cell 
-										v-for="(item,index) in levelData"
-										:title="item[labelKey]" 
-										:arrow="false"
-										:index="index" 
-										:key="index"
-										@click="levelChange(levelIndex, index)"
-									>
-										<template v-slot:right-icon>
-											<up-icon 
-												v-if="selectedValueIndexs[levelIndex] === index"
-												size="17" 
-												name="checkbox-mark"
-											></up-icon>
-										</template>
-									</up-cell>
-								</up-cell-group>
-							</scroll-view>
+		<view class="u-calendar">
+			<uHeader
+				:title="title"
+				:subtitle="subtitle"
+				:showSubtitle="showSubtitle"
+				:showTitle="showTitle"
+				:weekText="weekText"
+				:showSwitch="monthSwitch"
+				:showToday="showToday"
+				:todayText="todayText"
+				:todayDisabled="todayDisabled"
+				:prevDisabled="switchPrevDisabled"
+				:nextDisabled="switchNextDisabled"
+				:prevYearDisabled="switchPrevYearDisabled"
+				:nextYearDisabled="switchNextYearDisabled"
+				@prev="prevMonth"
+				@next="nextMonth"
+				@prevYear="prevYear"
+				@nextYear="nextYear"
+				@today="jumpToToday"
+			></uHeader>
+			<view v-if="showTimePanel" class="u-calendar__time-panel">
+				<view v-if="mode === 'single'" class="u-calendar__time-row">
+					<text class="u-calendar__time-date">{{ singleDateLabel }}</text>
+					<view class="u-calendar__time-trigger" @click="openTimePicker('single')">
+						<text class="u-calendar__time-text">{{ singleTime }}</text>
+					</view>
+				</view>
+				<view v-else-if="mode === 'range' && rangeResultMode === 'boundary'">
+					<view class="u-calendar__time-row">
+						<text class="u-calendar__time-date">{{ rangeStartDateLabel }}</text>
+						<view class="u-calendar__time-trigger" @click="openTimePicker('start')">
+							<text class="u-calendar__time-text">{{ rangeStartTime }}</text>
+						</view>
+					</view>
+					<view class="u-calendar__time-row">
+						<text class="u-calendar__time-date">{{ rangeEndDateLabel }}</text>
+						<view class="u-calendar__time-trigger" @click="openTimePicker('end')">
+							<text class="u-calendar__time-text">{{ rangeEndTime }}</text>
 						</view>
 					</view>
-				</template>
+				</view>
 			</view>
-		</view>
-		<!-- 按钮区域 -->
-		<view class="u-cascader-action up-flex up-flex-between">
-			<view class="u-padding-20 up-flex-fill">
-				<up-button @click="handleCancel" type="default">{{ t("up.common.cancel") }}</up-button>
+			<scroll-view
+				v-if="!monthSwitch"
+				:style="{
+                    height: addUnit(listHeight, 'px')
+                }"
+				scroll-y
+				@scroll="onScroll"
+				:scroll-top="scrollTop"
+				:scrollIntoView="scrollIntoView"
+			>
+				<uMonth
+					:color="color"
+					:rowHeight="rowHeight"
+					:showMark="showMark"
+					:months="months"
+					:mode="mode"
+					:maxCount="maxCount"
+					:startText="startText"
+					:endText="endText"
+					:defaultDate="defaultDate"
+					:minDate="innerMinDate"
+					:maxDate="innerMaxDate"
+					:maxMonth="monthNum"
+					:readonly="readonly"
+					:maxRange="maxRange"
+					:rangePrompt="rangePrompt"
+					:showRangePrompt="showRangePrompt"
+					:allowSameDay="allowSameDay"
+					:forbidDays="forbidDays"
+					:forbidDaysToast="forbidDaysToast"
+					:monthFormat="monthFormat"
+					:todayDate="todayDate"
+					:todayColor="todayColor"
+					ref="month"
+					@monthSelected="monthSelected"
+					@updateMonthTop="onUpdateMonthTop"
+				></uMonth>
+			</scroll-view>
+			<view
+				v-else
+				:style="{
+                    height: addUnit(listHeight, 'px')
+                }"
+			>
+				<uMonth
+					:color="color"
+					:rowHeight="rowHeight"
+					:showMark="showMark"
+					:months="currentMonths"
+					:mode="mode"
+					:maxCount="maxCount"
+					:startText="startText"
+					:endText="endText"
+					:defaultDate="defaultDate"
+					:minDate="innerMinDate"
+					:maxDate="innerMaxDate"
+					:maxMonth="monthNum"
+					:readonly="readonly"
+					:maxRange="maxRange"
+					:rangePrompt="rangePrompt"
+					:showRangePrompt="showRangePrompt"
+					:allowSameDay="allowSameDay"
+					:forbidDays="forbidDays"
+					:forbidDaysToast="forbidDaysToast"
+					:monthFormat="monthFormat"
+					:todayDate="todayDate"
+					:todayColor="todayColor"
+					ref="month"
+					@monthSelected="monthSelected"
+					@updateMonthTop="onUpdateMonthTop"
+				></uMonth>
 			</view>
-			<view class="u-padding-20 up-flex-fill">
-				<up-button @click="handleConfirm" type="primary">{{ t("up.common.confirm") }}</up-button>
+			<slot name="footer" v-if="showConfirm">
+				<view class="u-calendar__confirm">
+					<u-button
+						shape="circle"
+						:text="
+                            buttonDisabled ? confirmDisabledText : confirmText
+                        "
+						:color="color"
+						@click="confirm"
+						:disabled="buttonDisabled"
+					></u-button>
+				</view>
+			</slot>
+		</view>
+	</u-popup>
+	<u-popup
+		:show="timePickerShow"
+		mode="center"
+		:round="8"
+		:closeOnClickOverlay="true"
+		@close="closeTimePicker"
+	>
+		<view class="u-calendar__time-picker">
+			<view class="u-calendar__time-picker__header">
+				<text class="u-calendar__time-picker__cancel" @click="closeTimePicker">取消</text>
+				<text class="u-calendar__time-picker__title">选择时间</text>
+				<text class="u-calendar__time-picker__confirm" @click="confirmTimePicker">确定</text>
 			</view>
+			<picker-view class="u-calendar__time-picker__body" :value="timePickerValue" @change="onTimePickerChange">
+				<picker-view-column>
+					<view v-for="(item, index) in hourOptions" :key="`h-${index}`" class="u-calendar__time-picker__item">{{ item }}</view>
+				</picker-view-column>
+				<picker-view-column v-if="timePrecision !== 'hour'">
+					<view v-for="(item, index) in minuteOptions" :key="`m-${index}`" class="u-calendar__time-picker__item">{{ item }}</view>
+				</picker-view-column>
+				<picker-view-column v-if="timePrecision === 'second'">
+					<view v-for="(item, index) in secondOptions" :key="`s-${index}`" class="u-calendar__time-picker__item">{{ item }}</view>
+				</picker-view-column>
+			</picker-view>
 		</view>
-	</up-popup>
+	</u-popup>
 </template>
 <script>
+import uHeader from './header.vue'
+import uMonth from './month.vue'
+import { props } from './props.js'
+import util from './util.js'
+import dayjs from '../u-datetime-picker/dayjs.esm.min.js';
+import Calendar from '../../libs/util/calendar.js'
+import { mpMixin } from '../../libs/mixin/mpMixin.js'
+import { mixin } from '../../libs/mixin/mixin.js'
+import { addUnit, getPx, range, error, padZero } from '../../libs/function/index';
+import test from '../../libs/function/test';
 import { t } from '../../libs/i18n'
+/**
+ * Calendar 日历
+ * @description  此组件用于单个选择日期，范围选择日期等，日历被包裹在底部弹起的容器中.
+ * @tutorial https://uview-plus.jiangruyi.com/components/calendar.html
+ *
+ * @property {String}				title				标题内容 (默认 日期选择 )
+ * @property {Boolean}				showTitle			是否显示标题  (默认 true )
+ * @property {Boolean}				showSubtitle		是否显示副标题	(默认 true )
+ * @property {String}				mode				日期类型选择  single-选择单个日期，multiple-可以选择多个日期，range-选择日期范围 （ 默认 'single' )
+ * @property {String}				startText			mode=range时，第一个日期底部的提示文字  (默认 '开始' )
+ * @property {String}				endText				mode=range时，最后一个日期底部的提示文字 (默认 '结束' )
+ * @property {Array}				customList			自定义列表
+ * @property {String}				color				主题色，对底部按钮和选中日期有效  (默认 ‘#3c9cff' )
+ * @property {String | Number}		minDate				最小的可选日期	 (默认 0 )
+ * @property {String | Number}		maxDate				最大可选日期  (默认 0 )
+ * @property {Array | String| Date}	defaultDate			默认选中的日期，mode为multiple或range是必须为数组格式
+ * @property {String | Number}		maxCount			mode=multiple时，最多可选多少个日期  (默认 	Number.MAX_SAFE_INTEGER  )
+ * @property {String | Number}		rowHeight			日期行高 (默认 56 )
+ * @property {Function}				formatter			日期格式化函数
+ * @property {Boolean}				showLunar			是否显示农历  (默认 false )
+ * @property {Boolean}				showMark			是否显示月份背景色 (默认 true )
+ * @property {String}				confirmText			确定按钮的文字 (默认 '确定' )
+ * @property {String}				confirmDisabledText	确认按钮处于禁用状态时的文字 (默认 '确定' )
+ * @property {Boolean}				show				是否显示日历弹窗 (默认 false )
+ * @property {Boolean}				overlay				是否显示遮罩 (默认 true )
+ * @property {String | Number}		duration			动画时长，单位ms (默认 300 )
+ * @property {Object | String}		overlayStyle		自定义遮罩的样式
+ * @property {Number | String}		overlayOpacity		遮罩透明度，0-1之间 (默认 0.5 )
+ * @property {String | Number}		zIndex				弹出层的z-index值 (默认 10075 )
+ * @property {Boolean}				safeAreaInsetBottom	是否留出底部安全距离 (默认 true )
+ * @property {Boolean}				safeAreaInsetTop	是否留出顶部安全距离（状态栏高度） (默认 false )
+ * @property {String}				bgColor				弹窗背景色，设置为transparent可去除白色背景
+ * @property {Boolean}				closeOnClickOverlay	是否允许点击遮罩关闭日历 (默认 false )
+ * @property {Boolean}				readonly	        是否为只读状态，只读状态下禁止选择日期 (默认 false )
+ * @property {String | Number}		maxRange	        日期区间最多可选天数，默认无限制，mode = range时有效
+ * @property {String}				rangePrompt	        范围选择超过最多可选天数时的提示文案，mode = range时有效
+ * @property {Boolean}				showRangePrompt	    范围选择超过最多可选天数时，是否展示提示文案，mode = range时有效 (默认 true )
+ * @property {Boolean}				allowSameDay	    是否允许日期范围的起止时间为同一天，mode = range时有效 (默认 false )
+ * @property {String}				rangeResultMode	    区间模式下确认返回值格式，all-返回区间内所有日期，boundary-仅返回起止日期 (默认 'all' )
+ * @property {Boolean}				enableTime			是否开启时分秒选择 (默认 false )
+ * @property {String}				timePrecision		时间精度，hour-仅时，minute-时分，second-时分秒 (默认 'minute' )
+ * @property {String}				defaultTime			默认时间，支持HH/HH:mm/HH:mm:ss，不传则按00:00补齐
+ * @property {Number|String}	    round				圆角值，默认无圆角  (默认 0 )
+ * @property {Number|String}	    monthNum			最多展示的月份数量  (默认 3 )
+ * @property {Boolean}	            monthSwitch			是否启用非滚动的单月切换模式  (默认 false )
+ * @property {String}	            todayColor			今天日期的独立高亮颜色，默认跟随主题色
+ * @property {Array}	            weekText			星期文案  (默认 ['一', '二', '三', '四', '五', '六', '日'] )
+ *
+ * @event {Function()} confirm 		点击确定按钮时触发		选择日期相关的返回参数
+ * @event {Function()} close 		日历关闭时触发			可定义页面关闭时的回调事件
+ * @event {Function()} closed 	日历已关闭（离场动画结束、弹窗真正消失后）触发
+ * @example <u-calendar  :defaultDate="defaultDateMultiple" :show="show" mode="multiple" @confirm="confirm">
+	</u-calendar>
+ * */
 export default {
-	name: 'up-cascader',
-	props: {
+	name: 'u-calendar',
+	mixins: [mpMixin, mixin, props],
+	components: {
+		uHeader,
+		uMonth
+	},
+	data() {
+		return {
+			// 需要显示的月份的数组
+			months: [],
+			// 在月份滚动区域中，当前视图中月份的index索引
+			monthIndex: 0,
+			// 月份滚动区域的高度
+			listHeight: 0,
+			// month组件中选择的日期数组
+			selected: [],
+			scrollIntoView: '',
+			scrollIntoViewScroll: '',
+			scrollTop:0,
+			timePickerShow: false,
+			timePickerTarget: 'single',
+			timePickerValue: [0, 0, 0],
+			hourOptions: [],
+			minuteOptions: [],
+			secondOptions: [],
+			singleTime: '00:00',
+			rangeStartTime: '00:00',
+			rangeEndTime: '00:00',
+			// 过滤处理方法
+			innerFormatter: (value) => value
+		}
+	},
+	watch: {
+		scrollIntoView: {
+			immediate: true,
+			handler(n) {
+				// console.log('scrollIntoView', n)
+			}
+		},
+		selectedChange: {
+			immediate: true,
+			handler(n) {
+				this.setMonth()
+			}
+		},
+		timePrecision() {
+			this.initTimeOptions()
+			this.initTimeValues()
+		},
+		defaultTime() {
+			this.initTimeValues()
+		},
+		// 打开弹窗时，设置月份数据
 		show: {
-			type: Boolean,
-			default: false
+			immediate: true,
+			handler(n) {
+				if (n) {
+					this.setMonth()
+					// 弹层每次打开都会重新挂载并滚动回默认月份，副标题指向的月份索引要一起复位，
+					// 否则会沿用上一次关闭前滚动到的月份，导致副标题与日历内容对应不上。
+					// 页面内模式的内容一直挂载着，滚动位置不会重置，所以不做处理
+					if (!this.pageInline) {
+						this.monthIndex = this.getDefaultMonthIndex()
+					}
+				} else {
+					// 关闭时重置scrollIntoView，否则会出现二次打开日历，当前月份数据显示不正确。
+					// scrollIntoView需要有一个值变动过程，才会产生作用。
+					this.scrollIntoView = ''
+				}
+			}
+		}
+	},
+	computed: {
+		// 由于maxDate和minDate可以为字符串(2021-10-10)，或者数值(时间戳)，但是dayjs如果接受字符串形式的时间戳会有问题，这里进行处理
+		innerMaxDate() {
+			return test.number(this.maxDate)
+				? Number(this.maxDate)
+				: this.maxDate
 		},
-		data: {
-			type: Array,
-			default() {
-				return [];
+		innerMinDate() {
+			return test.number(this.minDate)
+				? Number(this.minDate)
+				: this.minDate
+		},
+		todayDate() {
+			return dayjs().format('YYYY-MM-DD')
+		},
+		todayText() {
+			return t('up.calendar.today')
+		},
+		todayDisabled() {
+			const today = dayjs(this.todayDate)
+			const minDate = this.innerMinDate
+				? dayjs(this.innerMinDate)
+				: null
+			const maxDate = this.innerMaxDate
+				? dayjs(this.innerMaxDate)
+				: null
+			if (minDate && today.isBefore(minDate, 'day')) {
+				return true
+			}
+			if (maxDate && today.isAfter(maxDate, 'day')) {
+				return true
+			}
+			return false
+		},
+		// 多个条件的变化，会引起选中日期的变化，这里统一管理监听
+		selectedChange() {
+			return [this.innerMinDate, this.innerMaxDate, this.defaultDate]
+		},
+		subtitle() {
+			// 初始化时，this.months为空数组，所以需要特别判断处理
+			if (this.months.length) {
+				if (uni.getLocale() == 'zh-Hans' || uni.getLocale() == 'zh-Hant') {
+					return this.months[this.monthIndex].year + '年' + (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '月'
+				} else {
+					return (this.months[this.monthIndex].month < 10 ? '0' + this.months[this.monthIndex].month : this.months[this.monthIndex].month) + '/' + this.months[this.monthIndex].year
+				}
+			} else {
+				return ''
 			}
 		},
-		modelValue: {
-			type: Array,
-			default() {
-				return [];
+		currentMonths() {
+			if (this.monthSwitch && this.months.length) {
+				return [this.months[this.monthIndex]]
 			}
+			return this.months
 		},
-		valueKey: {
-			type: String,
-			default: 'value'
+		switchPrevDisabled() {
+			return this.monthIndex <= 0
 		},
-		labelKey: {
-			type: String,
-			default: 'label'
+		switchNextDisabled() {
+			return this.monthIndex >= this.months.length - 1
 		},
-		childrenKey: {
-			type: String,
-			default: 'children'
+		switchPrevYearDisabled() {
+			return this.monthIndex - 12 < 0
 		},
-		maskCloseAble: {
-			type: Boolean,
-			default: true
+		switchNextYearDisabled() {
+			return this.monthIndex + 12 > this.months.length - 1
 		},
-		zIndex: {
-			type: [String, Number],
-			default: 0
+		showTimePanel() {
+			if (!this.enableTime) return false
+			if (this.mode === 'single') return true
+			if (this.mode === 'range' && this.rangeResultMode === 'boundary') {
+				return true
+			}
+			return false
 		},
-		autoClose: {
-			type: Boolean,
-			default: false
+		singleDateLabel() {
+			return this.selected[0] || '--'
 		},
-		headerDirection: {
-			type: String,
-			default: 'row'
+		rangeStartDateLabel() {
+			return this.selected[0] || '--'
 		},
-		optionsCols: {
-			type: [Number],
-			default: 2
+		rangeEndDateLabel() {
+			if (this.selected.length >= 2) {
+				return this.selected[this.selected.length - 1]
+			}
+			return '--'
 		},
-		closeable: {
-			type: Boolean,
-			default: true
+		buttonDisabled() {
+			// 如果为range类型，且选择的日期个数不足1个时，让底部的按钮出于disabled状态
+			if (this.mode === 'range') {
+				if (this.selected.length <= 1) {
+					return true
+				} else {
+					return false
+				}
+			} else {
+				return false
+			}
 		}
 	},
-	data() {
-		return {
-			levelList: [],
-			selectedValueIndexs: [],
-			tabsIndex: 0,
-			popupShow: false,
-			confirmValues: []
-		}
+	mounted() {
+		this.start = Date.now()
+		this.init()
 	},
-	watch: {
-		data: {
-			handler() {
-				this.initLevelList();
-				this.setDefaultValue();
-			},
-			immediate: true
+	emits: ["confirm", "close", "closed"],
+	methods: {
+		addUnit,
+		padTime(num) {
+			return String(num).padStart(2, '0')
 		},
-		show: {
-			handler(val) {
-				this.popupShow = val;
-				if (val) {
-					this.tabsIndex = 0;
-					this.initLevelList();
-					this.setDefaultValue();
-				}
-			},
-			immediate: true
-		},
-		modelValue: {
-			handler() {
-				this.setDefaultValue();
-			},
-			immediate: true
-		}
-	},
-	computed: {
-		isChange() {
-			return this.tabsIndex > 1;
-		},
-		genTabsList() {
-			let tabsList = [{ name: "请选择" }];
-			for (let i = 0; i < this.selectedValueIndexs.length; i++) {
-				if (this.selectedValueIndexs[i] !== undefined && this.levelList[i]) {
-					const selectedItem = this.levelList[i][this.selectedValueIndexs[i]];
-					if (selectedItem) {
-						tabsList[i] = { name: selectedItem[this.labelKey] };
-						if (i === this.selectedValueIndexs.length - 1 &&
-							selectedItem[this.childrenKey] &&
-							selectedItem[this.childrenKey].length > 0) {
-							tabsList.push({ name: "请选择" });
-						}
-					}
-				}
+		initTimeOptions() {
+			this.hourOptions = Array.from({ length: 24 }, (_, i) => this.padTime(i))
+			this.minuteOptions = Array.from({ length: 60 }, (_, i) => this.padTime(i))
+			this.secondOptions = Array.from({ length: 60 }, (_, i) => this.padTime(i))
+		},
+		parseTimeValue(value = '') {
+			const raw = String(value || '').trim()
+			const parts = raw.length ? raw.split(':') : []
+			const getNumber = (index, max) => {
+				const current = Number(parts[index] || 0)
+				if (Number.isNaN(current)) return 0
+				return Math.max(0, Math.min(max, current))
 			}
-			return tabsList;
+			const hour = getNumber(0, 23)
+			const minute = getNumber(1, 59)
+			const second = getNumber(2, 59)
+			return [hour, minute, second]
 		},
-		uZIndex() {
-			return this.zIndex ? this.zIndex : this.$u.zIndex.popup;
+		getDefaultTimeValue() {
+			const [hour, minute, second] = this.parseTimeValue(this.defaultTime)
+			if (this.timePrecision === 'hour') {
+				return this.padTime(hour)
+			}
+			if (this.timePrecision === 'second') {
+				return `${this.padTime(hour)}:${this.padTime(minute)}:${this.padTime(second)}`
+			}
+			return `${this.padTime(hour)}:${this.padTime(minute)}`
 		},
-		closeIconColor() {
-			return 'var(--up-main-color, #303133)';
+		initTimeValues() {
+			const value = this.getDefaultTimeValue()
+			this.singleTime = value
+			this.rangeStartTime = value
+			this.rangeEndTime = value
 		},
-		levelPaneStyle() {
-			return {
-				backgroundColor: 'var(--up-bg-color, #f7f7f7)'
-			};
-		}
-	},
-	emits: ['update:modelValue', 'update:show', 'change', 'confirm', 'cancel'],
-	methods: {
-		t,
-		// 获取选中值数组
-		getSelectedValues() {
-			const result = [];
-			for (let i = 0; i < this.selectedValueIndexs.length; i++) {
-				const selectedIndex = this.selectedValueIndexs[i];
-				if (selectedIndex === undefined) continue;
-				const list = this.levelList[i];
-				if (!list || !list[selectedIndex]) continue;
-				result.push(list[selectedIndex][this.valueKey]);
-			}
-			return result;
-		},
-		// 判断当前选中项是否为最后一级（叶子节点）
-		isCurrentLeafNode() {
-			const len = this.selectedValueIndexs.length;
-			if (len === 0) return false;
-			const lastLevel = len - 1;
-			const lastIndex = this.selectedValueIndexs[lastLevel];
-			const lastItem = this.levelList[lastLevel]?.[lastIndex];
-			if (!lastItem) return false;
-			// 无子级 = 最后一级
-			return !lastItem[this.childrenKey] || lastItem[this.childrenKey].length === 0;
-		},
-		initLevelList() {
-			if (this.data && this.data.length > 0) {
-				this.levelList = [this.data];
-				this.selectedValueIndexs = [];
-			} else {
-				this.levelList = [];
-				this.selectedValueIndexs = [];
+		timeToPickerValue(value = '') {
+			const [hour, minute, second] = this.parseTimeValue(value)
+			return [hour, minute, second]
+		},
+		pickerValueToTime(value = []) {
+			const hour = Number(value[0] || 0)
+			const minute = Number(value[1] || 0)
+			const second = Number(value[2] || 0)
+			if (this.timePrecision === 'hour') {
+				return this.padTime(hour)
 			}
+			if (this.timePrecision === 'second') {
+				return `${this.padTime(hour)}:${this.padTime(minute)}:${this.padTime(second)}`
+			}
+			return `${this.padTime(hour)}:${this.padTime(minute)}`
+		},
+		openTimePicker(target) {
+			this.timePickerTarget = target
+			let currentValue = this.singleTime
+			if (target === 'start') currentValue = this.rangeStartTime
+			if (target === 'end') currentValue = this.rangeEndTime
+			this.timePickerValue = this.timeToPickerValue(currentValue)
+			this.timePickerShow = true
+		},
+		onTimePickerChange(e) {
+			this.timePickerValue = e.detail.value
+		},
+		closeTimePicker() {
+			this.timePickerShow = false
+		},
+		confirmTimePicker() {
+			const value = this.pickerValueToTime(this.timePickerValue)
+			if (this.timePickerTarget === 'single') this.singleTime = value
+			if (this.timePickerTarget === 'start') this.rangeStartTime = value
+			if (this.timePickerTarget === 'end') this.rangeEndTime = value
+			this.timePickerShow = false
 		},
-		setDefaultValue() {
-			if (!this.data || this.data.length === 0) {
-				this.confirmValues = [];
-				return;
+		timeToSecond(timeText = '') {
+			const [hour, minute, second] = this.parseTimeValue(timeText)
+			return hour * 3600 + minute * 60 + second
+		},
+		validateSameDayRangeTime() {
+			if (!this.enableTime || this.mode !== 'range' || this.rangeResultMode !== 'boundary') {
+				return true
 			}
-			if (!this.modelValue || this.modelValue.length === 0) {
-				this.confirmValues = [];
-				return;
+			if (this.selected.length < 2) return true
+			const startDate = this.selected[0]
+			const endDate = this.selected[this.selected.length - 1]
+			if (startDate !== endDate) return true
+			const startSeconds = this.timeToSecond(this.rangeStartTime)
+			const endSeconds = this.timeToSecond(this.rangeEndTime)
+			if (endSeconds < startSeconds) {
+				uni.showToast({
+					title: '结束时间不能早于开始时间',
+					icon: 'none'
+				})
+				return false
 			}
-			this.selectedValueIndexs = [];
-			this.levelList = [];
-			let currentLevelData = this.data;
-
-			for (let i = 0; i < this.modelValue.length; i++) {
-				const value = this.modelValue[i];
-				const index = currentLevelData.findIndex(item => item[this.valueKey] === value);
-				this.levelList[i] = currentLevelData;
-
-				if (index !== -1) {
-					this.selectedValueIndexs.push(index);
-					if (currentLevelData[index][this.childrenKey]) {
-						currentLevelData = currentLevelData[index][this.childrenKey];
-					} else {
-						break;
-					}
-				} else {
-					break;
+			return true
+		},
+		appendTime(dateText, timeText) {
+			return `${dateText} ${timeText}`
+		},
+		getConfirmValue(selected = this.selected) {
+			let result = selected
+			if (
+				this.mode === 'range' &&
+				this.rangeResultMode === 'boundary' &&
+				selected.length >= 2
+			) {
+				const len = selected.length - 1
+				result = [selected[0], selected[len]]
+			}
+			if (!this.showTimePanel || !this.enableTime) {
+				return result
+			}
+			if (this.mode === 'single' && result.length >= 1) {
+				return [this.appendTime(result[0], this.singleTime)]
+			}
+			if (this.mode === 'range' && this.rangeResultMode === 'boundary' && result.length >= 2) {
+				return [
+					this.appendTime(result[0], this.rangeStartTime),
+					this.appendTime(result[1], this.rangeEndTime)
+				]
+			}
+			return result
+		},
+		// 在微信小程序中，不支持将函数当做props参数，故只能通过ref形式调用
+		setFormatter(e) {
+			this.innerFormatter = e
+		},
+		// month组件内部选择日期后，通过事件通知给父组件
+		monthSelected(e,scene ='init') {
+			this.selected = e
+			if (!this.showConfirm) {
+				// 在不需要确认按钮的情况下，如果为单选，或者范围多选且已选长度大于2，则直接进行返还
+				if (
+					this.mode === 'multiple' ||
+					this.mode === 'single' ||
+					(this.mode === 'range' && this.selected.length >= 2)
+				) {
+				   if( scene === 'init'){
+					 return
+				   }
+				   if( scene === 'tap') {
+					 if (!this.validateSameDayRangeTime()) return
+					 this.$emit('confirm', this.getConfirmValue())
+				   }
 				}
 			}
-			this.confirmValues = this.getSelectedValues();
 		},
-
+		init() {
+			// 校验maxDate，不能小于minDate。
+			if (
+				this.innerMaxDate &&
+                this.innerMinDate &&
+				new Date(this.innerMaxDate).getTime() < new Date(this.innerMinDate).getTime()
+			) {
+				return error('maxDate不能小于minDate时间')
+			}
+			// 滚动区域的高度
+			let bottomPadding = 0;
+			if (this.pageInline) {
+				bottomPadding = 0
+			} else {
+				bottomPadding = 30
+			}
+			this.listHeight = this.rowHeight * (this.monthSwitch ? 6 : 5) + bottomPadding
+			this.initTimeOptions()
+			this.initTimeValues()
+			this.setMonth()
+		},
 		close() {
-			this.popupShow = false;
-			this.levelList = [];
-			this.selectedValueIndexs = [];
-			this.tabsIndex = 0;
-			this.confirmValues = [];
-			this.$emit('update:show', false);
-			this.$emit('cancel');
+			this.$emit('close')
 		},
-
-		tabsChange(item) {},
-		toFatherIndex(index) {
-			this.tabsIndex = index;
-		},
-		levelChange(levelIndex, index) {
-			this.$set(this.selectedValueIndexs, levelIndex, index);
-			this.selectedValueIndexs.splice(levelIndex + 1);
-			this.tabsIndex = Math.min(this.tabsIndex, levelIndex);
-			this.levelList.splice(levelIndex + 1);
-
-			const currentItem = this.levelList[levelIndex][index];
-			if (currentItem && currentItem[this.childrenKey] && currentItem[this.childrenKey].length > 0) {
-				if (this.levelList.length <= levelIndex + 1) {
-					this.levelList.push(currentItem[this.childrenKey]);
-				} else {
-					this.$set(this.levelList, levelIndex + 1, currentItem[this.childrenKey]);
+		// 点击确定按钮
+		confirm() {
+			if (!this.buttonDisabled) {
+				if (!this.validateSameDayRangeTime()) return
+				this.$emit('confirm', this.getConfirmValue())
+			}
+		},
+		// 获得两个日期之间的月份数
+		getMonths(minDate, maxDate) {
+			const minYear = dayjs(minDate).year()
+			const minMonth = dayjs(minDate).month() + 1
+			const maxYear = dayjs(maxDate).year()
+			const maxMonth = dayjs(maxDate).month() + 1
+			return (maxYear - minYear) * 12 + (maxMonth - minMonth) + 1
+		},
+		// 设置月份数据
+		setMonth() {
+			// 最小日期的毫秒数
+			const minDate = this.innerMinDate || dayjs().valueOf()
+			// 如果没有指定最大日期，则往后推3个月
+			const maxDate =
+				this.innerMaxDate ||
+				dayjs(minDate)
+					.add(this.monthNum - 1, 'month')
+					.valueOf()
+			// 最大最小月份之间的共有多少个月份，
+			const months = range(
+				1,
+				this.monthNum,
+				this.getMonths(minDate, maxDate)
+			)
+			// 记录上一次测量到的各月份top值，月份未发生变化时高度也不会变，
+			// 复用后可避免重新生成数据后onScroll没有判断依据
+			const topCache = {}
+			this.months.forEach(item => {
+				if (typeof item.top === 'number') {
+					topCache[`${item.year}-${item.month}`] = item.top
 				}
-				this.tabsIndex = levelIndex + 1;
-				// 有子级，不自动确认
-				if (this.autoClose) return;
-			} else {
-				// 已选到最后一级，自动确认
-				if (this.autoClose) {
-					this.handleConfirm();
+			})
+			// 先清空数组
+			this.months = []
+			// 最大最小日期只需格式化一次，YYYY-MM-DD的字典序即时间序，可直接比较字符串
+			const minDateStr = dayjs(minDate).format('YYYY-MM-DD')
+			const maxDateStr = dayjs(maxDate).format('YYYY-MM-DD')
+			const formatter = this.formatter || this.innerFormatter
+			for (let i = 0; i < months; i++) {
+				// 每个月只构造一个dayjs对象，当月的日期数据都由它派生，
+				// 避免按天重复解析（monthNum较大时这里是主要开销）
+				const monthStart = dayjs(minDate).add(i, 'month')
+				const monthValue = monthStart.month() + 1
+				this.months.push({
+					date: new Array(monthStart.daysInMonth())
+						.fill(1)
+						.map((item, index) => {
+							// 日期，取值1-31
+							let day = index + 1
+							const current = monthStart.date(day)
+							// 星期，0-6，0为周日
+							const week = current.day()
+							const date = current.format('YYYY-MM-DD')
+							let bottomInfo = ''
+							if (this.showLunar) {
+								// 将日期转为农历格式
+								const lunar = Calendar.solar2lunar(
+									current.year(),
+									monthValue,
+									day
+								)
+								bottomInfo = lunar.IDayCn
+							}
+							let config = {
+								day,
+								week,
+								// 小于最小允许的日期，或者大于最大的日期，则设置为disabled状态
+								disabled:
+									date < minDateStr || date > maxDateStr,
+								// 返回一个日期对象，供外部的formatter获取当前日期的年月日等信息，进行加工处理
+								date: new Date(date),
+								// 已格式化好的日期字符串，供month组件比较使用，
+								// 省掉渲染期对每个日期格子的重复解析
+								dateStr: date,
+								bottomInfo,
+								dot: false,
+								month: monthValue
+							}
+							return formatter(config)
+						}),
+					// 当前所属的月份
+					month: monthValue,
+					// 当前年份
+					year: monthStart.year()
+				})
+			}
+			this.months.forEach(item => {
+				const cachedTop = topCache[`${item.year}-${item.month}`]
+				if (typeof cachedTop === 'number') {
+					item.top = cachedTop
+				}
+			})
+			if (this.monthSwitch) {
+				this.monthIndex = this.getDefaultMonthIndex()
+			}
+		},
+		getDefaultMonthIndex() {
+			let selected = dayjs().format('YYYY-MM')
+			if (this.defaultDate) {
+				if (!test.array(this.defaultDate)) {
+					selected = dayjs(this.defaultDate).format('YYYY-MM')
+				} else if (this.defaultDate.length) {
+					selected = dayjs(this.defaultDate[0]).format('YYYY-MM')
+				}
+			}
+			const index = this.months.findIndex(({ year, month }) => {
+				return `${year}-${padZero(month)}` === selected
+			})
+			return index === -1 ? 0 : index
+		},
+		prevMonth() {
+			if (!this.switchPrevDisabled) {
+				this.monthIndex -= 1
+			}
+		},
+		nextMonth() {
+			if (!this.switchNextDisabled) {
+				this.monthIndex += 1
+			}
+		},
+		prevYear() {
+			if (!this.switchPrevYearDisabled) {
+				this.monthIndex -= 12
+			}
+		},
+		nextYear() {
+			if (!this.switchNextYearDisabled) {
+				this.monthIndex += 12
+			}
+		},
+		jumpToToday() {
+			if (this.todayDisabled) {
+				return
+			}
+			const targetMonth = dayjs(this.todayDate).format('YYYY-MM')
+			const selectToday = () => {
+				if (this.mode === 'range') {
+					return
+				}
+				this.$refs.month && this.$refs.month.selectDate(this.todayDate)
+			}
+			if (this.monthSwitch) {
+				const todayMonthIndex = this.months.findIndex(({ year, month }) => {
+					return `${year}-${padZero(month)}` === targetMonth
+				})
+				if (todayMonthIndex !== -1) {
+					this.monthIndex = todayMonthIndex
+					this.$nextTick(selectToday)
 				}
+				return
 			}
+			this.scrollIntoDefaultMonth(targetMonth)
+			this.$nextTick(selectToday)
 		},
-		emitChange(closePopup = true) {
-			const result = this.getSelectedValues();
-			this.confirmValues = [...result];
-			this.$emit('change', this.confirmValues);
-			if (closePopup) {
-				this.close();
+		// 滚动到默认设置的月份
+		scrollIntoDefaultMonth(selected) {
+			// 查询默认日期在可选列表的下标
+			const _index = this.months.findIndex(({
+				  year,
+				  month
+			  }) => {
+				month = padZero(month)
+				return `${year}-${month}` === selected
+			})
+			if (_index !== -1) {
+				// 滚动位置是程序主动设置的，同步更新副标题指向的月份索引。
+				// 只依赖scroll事件的话，滚动位置没有真正变化时收不到事件，副标题就会停留在上一次的月份
+				this.monthIndex = _index
+				// #ifndef MP-WEIXIN
+				this.$nextTick(() => {
+					this.scrollIntoView = ''
+					this.scrollIntoView = `month-${_index}`
+					this.scrollIntoViewScroll = this.scrollIntoView
+				})
+				// #endif
+				// #ifdef MP-WEIXIN
+				// scrollTop与scrollIntoView同理，需要有一个值变动过程才会生效，
+				// 否则二次打开日历时沿用上次的数值，scroll-view不会滚动到默认月份
+				const _top = this.months[_index].top || 0;
+				this.scrollTop = 0;
+				if (_top !== 0) {
+					this.$nextTick(() => {
+						this.scrollTop = _top;
+					})
+				}
+				// #endif
 			}
 		},
-		handleCancel() {
-			this.close();
+		// scroll-view滚动监听
+		onScroll(event) {
+			// 不允许小于0的滚动值，如果scroll-view到顶了，继续下拉，会出现负数值
+			const scrollTop = Math.max(0, event.detail.scrollTop)
+			// 月份的top值尚未测量出来时不做判断，否则所有月份的判断阈值相同，
+			// 会把副标题固定到最后一个月份上
+			if (!this.months.some(item => typeof item.top === 'number')) return
+			// 将当前滚动条数值，与各月份的top值比较，可以得出当前滚动到了哪一个月份的索引
+			let monthIndex = 0
+			for (let i = 0; i < this.months.length; i++) {
+				const top = this.months[i].top
+				if (typeof top !== 'number') continue
+				if (scrollTop >= top) {
+					monthIndex = i
+				} else {
+					break
+				}
+			}
+			this.monthIndex = monthIndex
+			this.scrollIntoViewScroll = `month-${monthIndex}`
+		},
+		// 更新月份的top值
+		onUpdateMonthTop(topArr = []) {
+			if (this.monthSwitch) {
+				return
+			}
+			this.updateMonthTop(topArr)
 		},
-		handleConfirm() {
-			// 校验：必须选择到最后一级
-			if (!this.isCurrentLeafNode()) {
-				uni.showToast({ title: '请选择到最后一级', icon: 'none' });
-				return;
+		updateMonthTop(topArr = []) {
+			// 设置对应月份的top值，用于onScroll方法更新月份
+			topArr.map((item, index) => {
+				this.months[index].top = item
+			})
+
+			// 获取默认日期的下标
+			if (!this.defaultDate) {
+				// 如果没有设置默认日期，则将当天日期设置为默认选中的日期
+				const selected = dayjs().format("YYYY-MM")
+				this.scrollIntoDefaultMonth(selected)
+				return
+			}
+			let selected = dayjs().format("YYYY-MM");
+			// 单选模式，可以是字符串或数组，Date对象等
+			if (!test.array(this.defaultDate)) {
+				selected = dayjs(this.defaultDate).format("YYYY-MM")
+			} else {
+				selected = dayjs(this.defaultDate[0]).format("YYYY-MM");
 			}
-			const values = this.getSelectedValues();
-			this.confirmValues = [...values];
-			// 向外输出 选中值数组
-			this.$emit('update:modelValue', values);
-			this.$emit('confirm', values);
-			this.close();
+			this.scrollIntoDefaultMonth(selected)
 		}
 	}
 }
 </script>
-<style lang="scss">
-	.area-box {
-		width: 100%;
+<style lang="scss" scoped>
+.u-calendar {
+	color: var(--up-main-color, $u-main-color);
+	background-color: var(--up-card-bg-color, #ffffff);
+
+	&__time-panel {
+		padding: 8px 16px 0;
+	}
+
+	&__time-row {
+		height: 34px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		margin-bottom: 6px;
+	}
+
+	&__time-date {
+		font-size: 13px;
+		color: #303133;
+	}
+
+	&__time-trigger {
+		min-width: 92px;
+		height: 30px;
+		padding: 0 10px;
+		border-radius: 15px;
+		border: 1px solid #dcdfe6;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+	}
+
+	&__time-text {
+		font-size: 14px;
+		color: #303133;
+	}
+
+	&__time-picker {
+		width: 320px;
+		background-color: #ffffff;
+		border-radius: 8px;
 		overflow: hidden;
-		height: 800rpx;
+	}
-		>view {
-			width: 150%;
-			transition: transform 0.3s ease-in-out 0s;
-			transform: translateX(0);
+	&__time-picker__header {
+		height: 44px;
+		padding: 0 14px;
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		border-bottom: 1px solid #f0f0f0;
+	}
-		&.change {
-				transform: translateX(-33.3333333%);
-			}
-		}
+	&__time-picker__cancel {
+		font-size: 14px;
+		color: #909399;
+	}
-		.area-item {
-			height: 800rpx;
-		}
+	&__time-picker__title {
+		font-size: 15px;
+		color: #303133;
+		font-weight: 600;
 	}
-	.u-cascader-action {
-		border-top: 1px solid var(--up-border-color, #eee);
+	&__time-picker__confirm {
+		font-size: 14px;
+		color: #3c9cff;
 	}
-</style>
 \ No newline at end of file
+
+	&__time-picker__body {
+		width: 320px;
+		height: 200px;
+	}
+
+	&__time-picker__item {
+		height: 40px;
+		line-height: 40px;
+		text-align: center;
+		font-size: 16px;
+		color: #303133;
+	}
+
+	&__confirm {
+		padding: 7px 18px;
+	}
+}
+</style>
+import dayjs from '../u-datetime-picker/dayjs.esm.min.js';
+export default {
+    methods: {
+        // 设置月份数据
+        setMonth() {
+            // 月初是周几
+            const day = dayjs(this.date).date(1).day()
+            const start = day == 0 ? 6 : day - 1
+
+            // 本月天数
+            const days = dayjs(this.date).endOf('month').format('D')
+
+            // 上个月天数
+            const prevDays = dayjs(this.date).endOf('month').subtract(1, 'month').format('D')
+
+            // 日期数据
+            const arr = []
+            // 清空表格
+            this.month = []
+
+            // 添加上月数据
+            arr.push(
+                ...new Array(start).fill(1).map((e, i) => {
+                    const day = prevDays - start + i + 1
+
+                    return {
+                        value: day,
+                        disabled: true,
+                        date: dayjs(this.date).subtract(1, 'month').date(day).format('YYYY-MM-DD')
+                    }
+                })
+            )
+
+            // 添加本月数据
+            arr.push(
+                ...new Array(days - 0).fill(1).map((e, i) => {
+                    const day = i + 1
+
+                    return {
+                        value: day,
+                        date: dayjs(this.date).date(day).format('YYYY-MM-DD')
+                    }
+                })
+            )
+
+            // 添加下个月
+            arr.push(
+                ...new Array(42 - days - start).fill(1).map((e, i) => {
+                    const day = i + 1
+
+                    return {
+                        value: day,
+                        disabled: true,
+                        date: dayjs(this.date).add(1, 'month').date(day).format('YYYY-MM-DD')
+                    }
+                })
+            )
+
+            // 分割数组
+            for (let n = 0; n < arr.length; n += 7) {
+                this.month.push(
+                    arr.slice(n, n + 7).map((e, i) => {
+                        e.index = i + n
+
+                        // 自定义信息
+                        const custom = this.customList.find((c) => c.date == e.date)
+
+                        // 农历
+                        if (this.lunar) {
+                            const {
+                                IDayCn,
+                                IMonthCn
+                            } = this.getLunar(e.date)
+                            e.lunar = IDayCn == '初一' ? IMonthCn : IDayCn
+                        }
+
+                        return {
+                            ...e,
+                            ...custom
+                        }
+                    })
+                )
+            }
+        }
+    }
+}
@@ -188,3 +188,11 @@ export default {
     ...Transition,
     ...Upload
 }
+
+export function registerComponentProps(defaultProps = {}) {
+    Object.keys(defaultProps || {}).forEach((key) => {
+        const componentProps = ensureComponentProps(key)
+        mergeDefaults(componentProps, defaultProps[key])
+    })
+    return props
+}
 \ No newline at end of file