Compare commits

3 Commits

5 changed files with 335 additions and 138 deletions

View File

@@ -0,0 +1,169 @@
<!--
* @author wangzhuo
* @date 2025/9/18 10:30
* @description 模态弹窗组件支持点击蒙层关闭支持换行显示内容
-->
<template>
<view class="model" v-if="modelValue" @click="handleClose" @touchmove.prevent @mousewheel.prevent>
<view v-if="closeTip" style="color:rgba(255,255,255,0.15); letter-spacing: 5rpx; margin-top: 50%;text-align: center">{{closeTip}}</view>
<view class="model-con" @click.stop>
<view class="model-top" v-if="title">{{ title }}</view>
<view :class="{'model-middle': true,'m-height': !title}">
<view v-for="text in content.split('\n')">{{text}}</view>
</view>
<view class="model-bottom">
<button v-if="cancelBtn" type="primary" class="btn-cancel" @click="handleCancel">{{ cancelText }}</button>
<button v-if="confirmBtn" type="default" class="btn-green" @click="handleConfirm" :loading="loading"
:disabled="loading">{{ confirmText }}
</button>
</view>
</view>
</view>
</template>
<script setup>
import {ref} from 'vue'
const props = defineProps({
modelValue: {
type: Boolean,
default: false
},
closeTip: {
type: String,
default: "点按空白处取消",
},
title: {
type: String,
},
content: {
type: String
},
cancelBtn: {
type: Boolean,
default: true
},
confirmBtn: {
type: Boolean,
default: true
},
cancelText: {
type: String,
default: '取消'
},
confirmText: {
type: String,
default: '确认'
}
})
let loading = ref(false);
// 调用父组件的方法
const emit = defineEmits(['update:modelValue', 'cancel', 'confirm', 'success'])
// 点击蒙层关闭模态窗
const handleClose = () => {
emit('update:modelValue', false);
}
const handleCancel = () => {
emit('cancel');
emit('success', 'cancel')
handleClose();
}
const handleConfirm = () => {
emit('confirm');
emit('success', 'confirm')
handleClose();
}
</script>
<style lang="scss" scoped>
.model {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
background: rgba(0, 0, 0, 0.4);
z-index: 9999;
.model-con {
background: #fff;
position: fixed;
display: flex;
flex-direction: column;
justify-content: space-around;
top: 50%;
left: 50%;
width: 500rpx;
min-height: 278rpx;
margin-left: -270rpx;
margin-top: -139rpx;
border-radius: 24rpx;
padding: 20rpx 30rpx;
}
.model-top {
text-align: center;
padding: 20rpx 0;
font-size: 36rpx;
font-weight: 700;
}
.model-middle {
// margin-top:290rpx;
text-align: start;
font-size: 30rpx;
//line-height: 42rpx;
color: #333333;
.font-green {
color: #05A3F4;
font-size: 42rpx;
font-weight: bold;
padding: 20rpx 0;
}
}
.m-height {
padding-top: 28rpx;
}
.model-bottom {
display: flex;
justify-content: center;
padding: 30rpx 0 20rpx;
// align-items: center;
.btn-green, .btn-cancel {
background-color: #fff;
color: #05A3F4;
border-radius: 48rpx;
width: 200rpx;
height: 65rpx;
line-height: 60rpx;
text-align: center;
font-size: 30rpx;
border: 1px solid #05A3F4;
margin-left: 0rpx !important;
margin-right: 0 !important;
&::after {
border: none;
border-radius: 37rpx;
}
}
.btn-green {
border: 1px solid #05A3F4;
background-color: #05A3F4;
color: #fff;
margin-left: 20rpx !important;
}
}
}
</style>

View File

@@ -40,7 +40,7 @@ export const COLOR_MAP = {
"办事处": "#307af5",
"请假": "#f2c55c",
"法定假日": "#e88f89",/*#ED8A73*/
"null": "#e7e7e7"
"null": "#e7e7e782"
};
// 地区/部门
export const AreaList = [

View File

@@ -17,7 +17,7 @@
<view class="top-height"></view>
<view class="week-plan-title">
<view v-if="userInfo.nickName">姓名<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>
<!-- <view v-if="userInfo.nickName">姓名<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>-->
<view v-if="weekNum">
{{ yearMonth }}
<view v-if="isThisWeek" style=" display: inline-block;">
@@ -28,16 +28,19 @@
</view>
<view class="nav-list">
<view class="nav-item" :class="{active:index==activeTab}"
<view class="nav-item" :class="{'active': index == activeTab}"
v-for="(item,index) in allPlans" :key="index"
@click="handleNav(index)"
>{{ getTapLabel(item) }}
</view>
</view>
<block v-if="onShowPlan" v-for="(item, index) in OrdinalDate" :key="item">
<uni-transition :duration="300"
:mode-class="['fade','slide-bottom']"
:styles="{'width':'100%', 'background-color':'#f0f0f0','border-top-left-radius': '8px', 'border-top-right-radius': '8px'}"
:show="showTrans">
<view v-if="onShowPlan" v-for="(item, index) in OrdinalDate" :key="index">
<!-- 计划详情 -->
<view class="white-bg white-bg-2" :class="index == 0 ? 'white-bg-r' : ''">
<view class="white-bg white-bg-2" :class="{'white-bg-r':index === 0}">
<view class="report-list">
<view class="w-b-title">
<view class="r-left">{{ getWorkDate(index) }} {{ WeekCN[index] }}</view>
@@ -54,11 +57,13 @@
</view>
</view>
</view>
<view class='bottom-spliter bg-gray'></view>
</block>
<view class='bottom-spliter'></view>
</view>
<view v-else style="text-align: center; margin-top: 50%; color: white">
暂无数据
</view>
</uni-transition>
<!-- 底部加高度来避免tabbar遮挡 -->
<!-- <view class="bottom-height bg-gray"></view> -->
</view>
@@ -69,13 +74,12 @@
<script setup>
import {onMounted, ref, reactive, computed} from "vue";
import {onMounted, ref, computed, watch} from "vue";
import {useRoute} from "vue-router"
import customHeader from '@/components/customHeader.vue'
import {WeekCN, WorkType, WorkEvent, OrdinalDate} from "./dataMap";
import {getCurrentWeekNum} from "./dateTimeUtils";
import {getUserInfo, getWeeklyPlanList} from "@/api/crm/plan/getPlan";
import {useMessage} from "@/utils/message";
import {getWeeklyPlanList} from "@/api/crm/plan/getPlan";
import {judgeThisWeek} from "@/api/crm/plan/updatePlan";
const userInfo = ref(null)
@@ -94,8 +98,6 @@ const yearMonth = ref(null);
const weekNum = ref(0);
const allPlans = ref([]);
const onShowPlan = ref(null);
const message = useMessage();
let getWorkDate = (index) => {
return onShowPlan.value ? onShowPlan.value[OrdinalDate[index]] : '';
};
@@ -107,7 +109,8 @@ let getWorkEvent = (index) => {
};
// 刷新计划列表
const refreshPlanList = () => {
message.showLoading();
showTrans.value = false;
uni.showLoading();
// 获取用户信息
// getUserInfo().then(res => {
// userInfo.value = res.user;
@@ -124,12 +127,12 @@ const refreshPlanList = () => {
weekNum.value = rows[0].date;
yearMonth.value = rows[0].firstDayOfTheWeek.substring(0, 7);
}
console.log(route.path, "用户周计划列表获取成功");
console.log(route.path, "用户周计划列表获取成功");
}).catch(err => {
console.warn(err, "用户周计划列表获取失败");
message.error("周计划获取失败");
console.log(err, "周计划列表获取失败")
}).finally(() => {
message.hideLoading();
uni.hideLoading();
setTimeout(() => showTrans.value = true, 20);
})
}
@@ -139,7 +142,7 @@ onMounted(() => {
// 判断计划是否为本周
let isThisWeek = computed(() => {
let theYear = onShowPlan.value.year || onShowPlan.value.firstDayOfTheWeek.substring(0, 4); // 获取年份
let theYear = onShowPlan.value.firstDayOfTheWeek.substring(0, 4); // 获取年份
weekNum.value = onShowPlan.value.date; // 当目前展示的计划列表变化时更新weekNum.value
yearMonth.value = onShowPlan.value.firstDayOfTheWeek.substring(0, 7); // 获取年月
return date.getFullYear() === parseInt(theYear) &&
@@ -204,6 +207,19 @@ function getTapLabel(row) {
return row.firstDayOfTheWeek.substring(0, 4) + '年' + row.month + '月 第' + row.date + '周';
}
// 展示动画
const showTrans = ref(false);
// 监听 activeTab 变化,触发动画
watch(activeTab, (newVal, oldVal) => {
if (oldVal !== newVal) { // 确保不是初始化时的触发
showTrans.value = false; // 先隐藏
setTimeout(() => {
onShowPlan.value = allPlans.value[newVal]; // 更新计划列表视图
showTrans.value = true; // 再显示,触发动画
}, 20);
}
});
// 选中计划时间段
function handleNav(index) {
console.log(index, "tab更换时间段");
@@ -247,7 +263,7 @@ function handleEdit(index) {
<style scoped>
.week-plan-title {
color: #fff;
padding: 0 30rpx 30rpx;
padding: 0 30rpx;
display: flex;
justify-content: space-between;
}
@@ -273,18 +289,22 @@ function handleEdit(index) {
.white-bg.white-bg-2 {
/* margin-bottom: 20rpx; */
}
.bottom-spliter {
height: 20rpx;
}
.bg-gray {
background-color: #f0f0f0;
}
.report-list .w-b-title .btn-edit {
background-color: #5C96F7;
}
.con-bg {
/*height: 445rpx;*/
/*height: 100%;*/
/* overflow-y: auto;*/
}
.nav-list {
@@ -306,10 +326,12 @@ function handleEdit(index) {
padding: 20rpx 30rpx 0;
/* #endif */
}
/* 为 Webkit 浏览器隐藏滚动条 */
.nav-list::-webkit-scrollbar {
background-color: transparent;
}
.nav-list .nav-item {
/* flex: 0 0 auto; 关键:不放大、不缩小、自动宽度 */
/* width: 200rpx;*/
@@ -334,5 +356,4 @@ function handleEdit(index) {
color: #3384DF;
font-weight: bold;
}
</style>

View File

@@ -16,11 +16,11 @@
<!-- 正文内容 -->
<view class="week-plan-title">
<view v-if="userInfo.nickName">姓名<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>
<!-- <view v-if="userInfo.nickName">姓名<strong>{{ userInfo.nickName || userInfo.userName }}</strong></view>-->
<view>{{ currentEditDate.yearMonth }} <strong>{{ currentEditDate.weekNum }}</strong> </view>
</view>
<uni-forms ref="formRef" :model="weekPlanFormData" :rules="rules" label-width="100px" label-position="top">
<block v-for="(item, index) in OrdinalDate">
<view v-for="(item, index) in OrdinalDate">
<view class="white-bg" :class="index==0?'white-bg-2':'white-bg-3'">
<view class="w-b-title" @click="handleExpand(index)">
{{ weekPlanFormData[item] }} {{ WeekCN[index] }}
@@ -29,7 +29,8 @@
</text>
</view>
<view v-show="expandFlag[index]" class="form-con">
<!--v-show="expandFlag[index]"-->
<view class="form-con" :class="{'show': expandFlag[index], 'hidden': !expandFlag[index]}">
<uni-forms-item label="工作类型" :name="getTypeField(index)" :required="index < workDays">
<view class="form-picker">
<picker @change="handleTypeChange" :range="WORK_TYPE" :data-field="getTypeField(index)">
@@ -41,13 +42,13 @@
</view>
</uni-forms-item>
<uni-forms-item label="内容" :name="getEventField(index)" :required="index < workDays">
<uni-easyinput type="textarea" autoHeight v-model="weekPlanFormData[getEventField(index)]"
<uni-easyinput type="textarea" v-model="weekPlanFormData[getEventField(index)]"
placeholder="请输入" class="form-texarea"/>
</uni-forms-item>
</view>
</view>
</block>
</view>
</uni-forms>
</view>
@@ -62,7 +63,6 @@ import {useRoute} from "vue-router"
import {useMessage} from "@/utils/message";
import {onLoad} from "@dcloudio/uni-app";
import {updateWeekPlanList, addPlan} from "@/api/crm/plan/updatePlan";
import {getUserInfo} from "@/api/crm/plan/getPlan";
import {getDate} from "@/utils/datetime";
import {getWeek2, getCurrentWeekNum} from "./dateTimeUtils";
@@ -129,13 +129,6 @@ let instance = null;
// 初始化创建任务
let initCreate = (params) => {
const {itemList, selectIndex} = params;
// 获取用户信息
// getUserInfo().then(res => {
// userInfo.value = res.user;
// console.log(route.path, ":用户信息获取成功");
// }).catch(err => {
// console.warn(err, "用户信息获取失败")
// });
console.log(route.path, `:创建${itemList[selectIndex]}计划`);
title.value = "创建周计划";
currentEditDate.value.yearMonth = getDate({format: true}).substring(0, 7); // 只要年月
@@ -301,6 +294,7 @@ const submitForm = async () => {
.white-bg {
width: 690rpx;
margin: 0;
padding-bottom: 0;
border-radius: 8px 8px 0 0;
}
@@ -320,10 +314,17 @@ const submitForm = async () => {
.form-con {
padding: 30rpx 0 0;
height: 500rpx;
overflow: hidden;
transition: height 0.3s;
}
:deep(.form-con .uni-forms-item) {
margin-bottom: 22px !important;
}
.hidden{
height: 0;
}
</style>

View File

@@ -1,3 +1,8 @@
<!--
* @author wangzhuo
* @update date 2025/9/18 19:38
* @description 所有人周计划查看
-->
<template>
<view class="con-body">
<view class="con-bg">
@@ -32,7 +37,7 @@
<uni-icons type="down" size="18"></uni-icons>
</view>
</picker>
<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
<!-- <button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>-->
</view>
<!-- 分页部分 -->
@@ -42,23 +47,24 @@
<view class="white-bg" v-if="list.length">
<!--v-for="(item, index) in list" :key="index" @click="handleDetail(item)"-->
<view style="text-align: center; margin-bottom: 30rpx; font-size: 30rpx;">
{{ parseInt(searchValue.selectDate.substring(5, 7)) }}
{{ (list[0][OrdinalDate[0]] || searchValue.selectDate).substring(5, 7) }}
<span class="line"></span>
{{ searchValue.selectDate.substring(0, 4) }}
{{ (list[0][OrdinalDate[0]] || searchValue.selectDate).substring(0, 4) }}
</view>
<uni-row class="demo-uni-row">
<uni-col :span="1">
<view class="demo-uni-col right-radius">序号</view>
<view class="demo-uni-col right-radius"></view>
</uni-col>
<uni-col :span="2">
<view class="demo-uni-col left-radius">姓名</view>
</uni-col>
<!--日期 星期-->
<block v-for="(field, i) in OrdinalDate">
<uni-col :span="3">
<view class="demo-uni-col mar-left" >
<text>{{ WeekShortCN[i] }}</text>
<text v-if="list[0][field]">{{ list[0][field].substring(8) }}</text>
<text v-else>{{ getWeek(i) }}</text>
<text v-if="list[0][field]" class="font-bold">{{ list[0][field].substring(8) }}</text>
<text v-else class="font-bold">{{ getWeek(i) }}</text>
</view>
</uni-col>
</block>
@@ -81,7 +87,7 @@
:style="{ backgroundColor: COLOR_MAP[item[field]] }"
><!--@click="handleView(index, i)"-->
<text v-if="item[field]">{{ item[field] }}</text>
<text v-else style="color: gray">暂无</text>
<text v-else style="font-weight: 300; color: gray">暂无</text>
</view>
</uni-col>
</block>
@@ -95,12 +101,21 @@
</view>
</view>
</view>
<closeable-modal closeTip=""
v-model="modalVisible"
:title="modalData.title"
:content="modalData.content"
:cancelBtn="modalData.showCancel"
confirmText="关闭"
@success="modalData.success"/>
</template>
<script setup>
import {ref, onMounted} from 'vue'
import customHeader from '@/components/customHeader.vue'
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
import CloseableModal from "@/components/closeableModal.vue";
import {getNavBarPaddingTop} from '@/utils/system.js'
import {getAllWeekPlanList} from "@/api/crm/plan/getPlan";
import {AreaList, COLOR_MAP, OrdinalDate, WeekShortCN, WorkEvent, WorkType} from "./dataMap";
@@ -109,10 +124,6 @@ import {getDate} from "@/utils/datetime";
import {getWeekPlanListByDate} from "@/api/crm/plan/getPlan";
import {onPullDownRefresh} from "@dcloudio/uni-app";
// const currentYear = new Date().getFullYear();
const currentMonth = new Date().getMonth() + 1;
const currentWeekNum = getCurrentWeekNum();
// 获取导航栏高度用于内容区域padding
const navBarPaddingTop = ref(0);
onMounted(() => {
@@ -144,35 +155,38 @@ let searchValue = ref({
// 查询列表
let list = ref([]);
const mescrollRef = ref(null);
// const mescrollRef = ref(null);
onPullDownRefresh(() => {
uni.showLoading();
getPlanList().then(res => {
const {rows} = res;
list.value = rows;
console.log(rows,'刷新周计划成功');
}).finally(()=>{
uni.stopPullDownRefresh();
uni.hideLoading();
})
});
// 查询当前周一周日期
// const currentYear = new Date().getFullYear();
const currentWeekNum = getCurrentWeekNum();
const aweek = getWeek2('本周');
const currentMonth = aweek.month;
console.log(currentWeekNum, '当前周数');
const getWeek = (i) => {
return aweek[OrdinalDate[i]].substring(7)
}
const queryParams = ref({
month: currentMonth,
date: currentWeekNum,
pageNum: 1,
pageSize: 10
});
// 获取数据列表
const getPlanList = (month, date, pageIndex, pageSize) => {
const getPlanList = () => {
return new Promise(async (resolve) => {
// 查询参数
let queryParams = {
month: month ? month : currentMonth,
date: date ? date : currentWeekNum,
pageNum: pageIndex ? pageIndex : 1,
pageSize: pageSize ? pageSize : 10
}
let {rows, total} = await getAllWeekPlanList(queryParams);
let {rows, total} = await getAllWeekPlanList(queryParams.value);
resolve({
rows,
total
@@ -210,31 +224,43 @@ const bindPickerChange = (e) => {
// 查询
handleSearch();
}
// 跳转到详情
let handleDetail = (rowIndex, colIndex) => {
// 模态窗可见性
const modalVisible = ref(false);
// 模态框的配置内容
const modalData = ref({
title: null,
content: null,
showCancel: false,
success: console.log
});
const showCloseableModal = (param)=>{
modalVisible.value = true;
Object.assign(modalData.value, param);
console.log(modalData.value);
}
// 查看计划详情
const handleDetail = (rowIndex, colIndex) => {
let detail = list.value[rowIndex];
let workDate = detail[OrdinalDate[colIndex]];
let workType = detail[WorkType[colIndex]];
let workEvent = detail[WorkEvent[colIndex]];
if (workType && workEvent) {
uni.showModal({
title: `${workDate}\n${workType}`,
content: `${workEvent}`,
confirmText: '关闭',
showCancel: false,
maskClosable: true, // 允许点击蒙层关闭弹窗
success: function (res) {
if (res.confirm) {
showCloseableModal({
title: `${workType}`,
content: `姓名:${detail.userName}\n时间${workDate}\n内容${workEvent}`
});
// uni.showModal({
// title: `${workDate}\n${workType}`,
// content: `${workEvent}`,
// confirmText: '关闭',
// showCancel: false,
// maskClosable: true, // 允许点击蒙层关闭弹窗
// success: console.log
// })
} else if (res.cancel) {
}
}
})
} else {
uni.showToast({
title: "无内容",
title: "无计划内容",
icon: "none",
duration: 1500
})
@@ -328,8 +354,9 @@ let handleDetail = (rowIndex, colIndex) => {
.demo-uni-col {
height: 36px;
border-radius: 4px;
background-color: #E7E7E7;
border-radius: 4rpx;
/*background-color: #E7E7E7;*/
background-color: #e7e7e782;
display: flex;
flex-direction: column;
align-items: center;
@@ -373,31 +400,10 @@ let handleDetail = (rowIndex, colIndex) => {
min-height: calc(100vh - 116rpx/*.topbar height*/ - 68rpx/*.search height*/ - 40rpx/*.white-bg padding-top*/ - 40rpx /*.white-bg padding-bottom*/
);
/* #endif */
//overflow-y: auto;
}
.white-bg.white-bg-2 {
margin-bottom: 20rpx;
}
.white-bg.white-bg-3 {
border-radius: 0
}
.white-bg .w-b-title {
color: #3384DF;
font-size: 38rpx;
}
.form-con {
padding: 30rpx 0 0;
}
:deep(.form-con .uni-forms-item) {
margin-bottom: 22px !important;
}
/*.con-bg {
height: 420rpx;
}*/
</style>