|
|
@@ -77,10 +77,10 @@
|
|
|
</text>
|
|
|
<text
|
|
|
class="month-filter"
|
|
|
- :class="{ 'month-filter-sel': selectedMonth === 'next' }"
|
|
|
- @click="changeMonth('next')"
|
|
|
+ :class="{ 'month-filter-sel': selectedMonth === 'custom' }"
|
|
|
+ @click="showCustomDatePicker"
|
|
|
>
|
|
|
- 下月
|
|
|
+ 自定义
|
|
|
</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -141,6 +141,40 @@
|
|
|
</template>
|
|
|
</common-list>
|
|
|
|
|
|
+ <!-- 自定义时间选择弹窗 -->
|
|
|
+ <l-popup v-model="showDatePickerPopup" position="bottom">
|
|
|
+ <view class="date-picker-popup">
|
|
|
+ <view class="popup-header">
|
|
|
+ <text class="popup-title">选择年月</text>
|
|
|
+ <view class="popup-actions">
|
|
|
+ <text class="cancel-btn" @click="closeDatePicker">取消</text>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <view class="date-picker-container">
|
|
|
+ <view class="date-picker-item">
|
|
|
+ <!-- <text class="date-label">选择年月</text> -->
|
|
|
+ <view class="date-display" @click="openDatePicker">
|
|
|
+ {{ customDate != null && customDate != '' ? customDate : '请选择年月' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </l-popup>
|
|
|
+
|
|
|
+ <!-- Date Picker -->
|
|
|
+ <l-popup v-model="showDatePicker" position="bottom" :z-index="1000">
|
|
|
+ <l-date-time-picker
|
|
|
+ :mode="3"
|
|
|
+ format="YYYY-MM"
|
|
|
+ :modelValue="customDate"
|
|
|
+ confirm-btn="确定"
|
|
|
+ cancel-btn="取消"
|
|
|
+ @confirm="onDateConfirm"
|
|
|
+ @cancel="showDatePicker = false">
|
|
|
+ </l-date-time-picker>
|
|
|
+ </l-popup>
|
|
|
+
|
|
|
<!-- 底部 TabBar -->
|
|
|
<custom-tabbar :current="3" />
|
|
|
</view>
|
|
|
@@ -166,6 +200,11 @@
|
|
|
const repairScore = ref<number>(0)
|
|
|
const rank = ref<number | null>(null)
|
|
|
const totalRankingUsers = ref<number | null>(null)
|
|
|
+ const customDate = ref<string>('')
|
|
|
+
|
|
|
+ // 弹窗显示状态
|
|
|
+ const showDatePickerPopup = ref<boolean>(false)
|
|
|
+ const showDatePicker = ref<boolean>(false)
|
|
|
|
|
|
// 工单状态字典列表
|
|
|
const statusDictList = ref<SysDictData[]>([])
|
|
|
@@ -178,13 +217,29 @@
|
|
|
return '上月'
|
|
|
case 'current':
|
|
|
return '本月'
|
|
|
- case 'next':
|
|
|
- return '下月'
|
|
|
+ case 'custom':
|
|
|
+ // 显示自定义选择的年月
|
|
|
+ return (customDate.value != null && customDate.value != '') ? customDate.value : '自定义'
|
|
|
default:
|
|
|
return '本月'
|
|
|
}
|
|
|
})
|
|
|
|
|
|
+ // 打开自定义日期选择弹窗
|
|
|
+ function showCustomDatePicker() {
|
|
|
+ showDatePickerPopup.value = true
|
|
|
+ }
|
|
|
+
|
|
|
+ function closeDatePicker() {
|
|
|
+ showDatePicker.value = false
|
|
|
+ showDatePickerPopup.value = false
|
|
|
+ }
|
|
|
+
|
|
|
+ // 打开日期选择器
|
|
|
+ function openDatePicker() {
|
|
|
+ showDatePicker.value = true
|
|
|
+ }
|
|
|
+
|
|
|
// 获取工单评分状态字典列表
|
|
|
const loadStatusDictList = async (): Promise<void> => {
|
|
|
try {
|
|
|
@@ -279,9 +334,24 @@
|
|
|
|
|
|
// 获取统计数据
|
|
|
function getStatistics() {
|
|
|
+ // Convert 'current' and 'prev' values to actual date strings
|
|
|
+ let monthValue = '';
|
|
|
+ if (selectedMonth.value === 'custom') {
|
|
|
+ monthValue = customDate.value;
|
|
|
+ } else if (selectedMonth.value === 'current') {
|
|
|
+ const now = new Date();
|
|
|
+ monthValue = `${now.getFullYear()}-${(now.getMonth() + 1).toString().padStart(2, '0')}`;
|
|
|
+ } else if (selectedMonth.value === 'prev') {
|
|
|
+ const now = new Date();
|
|
|
+ const prevMonth = now.getMonth(); // getMonth() returns 0-11
|
|
|
+ const prevYear = prevMonth === 0 ? now.getFullYear() - 1 : now.getFullYear();
|
|
|
+ const monthStr = prevMonth === 0 ? '12' : prevMonth.toString().padStart(2, '0');
|
|
|
+ monthValue = `${prevYear}-${monthStr}`;
|
|
|
+ }
|
|
|
+
|
|
|
const params: UTSJSONObject = {
|
|
|
//scoringStatus: statusFilter.value,
|
|
|
- month: selectedMonth.value
|
|
|
+ month: monthValue
|
|
|
}
|
|
|
|
|
|
getOrderScoreStatistics(params).then((response: any) => {
|
|
|
@@ -303,7 +373,15 @@
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
+ function onDateConfirm(value: string) {
|
|
|
+ customDate.value = value
|
|
|
+ showDatePicker.value = false
|
|
|
+ showDatePickerPopup.value = false
|
|
|
+ selectedMonth.value = 'custom'
|
|
|
+ getStatistics()
|
|
|
+ }
|
|
|
+
|
|
|
// 方法
|
|
|
function loadData(isRefresh: boolean) {
|
|
|
const shouldRefresh = isRefresh
|
|
|
@@ -318,12 +396,35 @@
|
|
|
refreshing.value = true
|
|
|
}
|
|
|
|
|
|
+ // Convert 'current' and 'prev' values to actual date strings
|
|
|
+ let monthValue = '';
|
|
|
+ if (selectedMonth.value === 'custom') {
|
|
|
+ monthValue = customDate.value;
|
|
|
+ } else if (selectedMonth.value === 'current') {
|
|
|
+ const now = new Date();
|
|
|
+ const m = now.getMonth() + 1
|
|
|
+ let mStr = m.toString()
|
|
|
+ if (m < 10) {
|
|
|
+ mStr = '0' + mStr
|
|
|
+ }
|
|
|
+ monthValue = `${now.getFullYear()}-${mStr}`;
|
|
|
+ } else if (selectedMonth.value === 'prev') {
|
|
|
+ const now = new Date();
|
|
|
+ const prevMonth = now.getMonth(); // getMonth() returns 0-11
|
|
|
+ const prevYear = prevMonth === 0 ? now.getFullYear() - 1 : now.getFullYear();
|
|
|
+ let monthStr = prevMonth === 0 ? '12' : prevMonth.toString()
|
|
|
+ if (prevMonth !== 0 && prevMonth < 10) {
|
|
|
+ monthStr = '0' + monthStr
|
|
|
+ }
|
|
|
+ monthValue = `${prevYear}-${monthStr}`;
|
|
|
+ }
|
|
|
+
|
|
|
const params: UTSJSONObject = {
|
|
|
pageNum: currentPage.value,
|
|
|
pageSize: 5,
|
|
|
keyword: searchKeyword.value,
|
|
|
scoringStatus: statusFilter.value,
|
|
|
- //month: selectedMonth.value
|
|
|
+ month: monthValue
|
|
|
}
|
|
|
|
|
|
listMobileOrderScores(params).then((response: any) => {
|
|
|
@@ -641,8 +742,71 @@
|
|
|
color: #666;
|
|
|
}
|
|
|
|
|
|
+/* 日期选择弹窗 */
|
|
|
+.date-picker-popup {
|
|
|
+ background-color: white;
|
|
|
+ border-top-left-radius: 30rpx;
|
|
|
+ border-top-right-radius: 30rpx;
|
|
|
+ padding: 40rpx;
|
|
|
+ padding-bottom: 40rpx;
|
|
|
+ margin-bottom: 150rpx; /* 提高弹窗,避免被底部导航栏遮挡 */
|
|
|
+}
|
|
|
+
|
|
|
+.popup-header {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.popup-title {
|
|
|
+ font-size: 34rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.popup-actions {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: row;
|
|
|
+}
|
|
|
+
|
|
|
+.cancel-btn {
|
|
|
+ color: #999;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.confirm-btn {
|
|
|
+ color: #165dff;
|
|
|
+ padding: 10rpx 20rpx;
|
|
|
+ font-weight: bold;
|
|
|
+}
|
|
|
+
|
|
|
+.date-picker-container {
|
|
|
+ padding: 20rpx 0;
|
|
|
+ padding-bottom: env(safe-area-inset-bottom); // 适配安全区域
|
|
|
+}
|
|
|
+
|
|
|
+.date-picker-item {
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+}
|
|
|
+
|
|
|
+.date-label {
|
|
|
+ display: flex;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
+ font-size: 30rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
+.date-display {
|
|
|
+ width: 100%;
|
|
|
+ padding: 20rpx;
|
|
|
+ border: 2rpx solid #ddd;
|
|
|
+ border-radius: 8rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ color: #333;
|
|
|
+}
|
|
|
+
|
|
|
// 添加底部填充的类
|
|
|
.list-with-padding {
|
|
|
padding-bottom: 40rpx;
|
|
|
}
|
|
|
-</style>
|
|
|
+</style>
|