400 lines
11 KiB
Vue
400 lines
11 KiB
Vue
<template>
|
||
<view class="con-body">
|
||
<view class="con-bg">
|
||
<!-- 头部 -->
|
||
<customHeader ref="customHeaderRef" :title="'周计划表'" :leftFlag="true" :rightFlag="true">
|
||
<template #right>
|
||
<!-- <view class="head-right" @click="handleAdd">
|
||
<uni-icons type="plus" size="24" color="#B7D2FF"></uni-icons>新增
|
||
</view>-->
|
||
</template>
|
||
</customHeader>
|
||
|
||
<!-- 高度来避免头部遮挡 -->
|
||
<view class="top-height"></view>
|
||
<!-- 正文内容 -->
|
||
<view>
|
||
|
||
<!-- 搜索 -->
|
||
<view class="search">
|
||
<picker mode="date" :value="defaultDate" :start="startDate" :end="endDate"
|
||
@change="bindDateChange" class="picker-bg">
|
||
<view class="picker">
|
||
<uni-icons custom-prefix="iconfont" color="#ffffff" type="icon-phoneshizhong" size="18"></uni-icons>
|
||
<view>{{ defaultDate }}</view>
|
||
<uni-icons type="down" size="18"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<picker @change="bindPickerChange" :value="areaIndex" :range="AreaList" class="picker-bg">
|
||
<view class="picker">
|
||
<uni-icons type="person" size="18"></uni-icons>
|
||
<view>{{ AreaList[areaIndex] }}</view>
|
||
<uni-icons type="down" size="18"></uni-icons>
|
||
</view>
|
||
</picker>
|
||
<button type="default" @click="handleSearch" size="mini" class="btn-search">查询</button>
|
||
</view>
|
||
|
||
<!-- 分页部分 -->
|
||
<!-- <mescroll-uni ref="mescrollRef" @init="mescrollInit" @down="downCallback" @up="upCallback"-->
|
||
<!-- :up="upOption" :down="downOption" :fixed="false" textColor="#ffffff" bgColor="#ffffff"-->
|
||
<!-- class="scroll-h" :class="{'loading-scroll':cssFlag}">-->
|
||
<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)) }}月
|
||
<span class="line"></span>
|
||
{{searchValue.selectDate.substring(0, 4) }}年
|
||
</view>
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="1">
|
||
<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>
|
||
</view>
|
||
</uni-col>
|
||
</block>
|
||
</uni-row>
|
||
<block v-for="(item, index) in list" :key="index">
|
||
<uni-row class="demo-uni-row">
|
||
<uni-col :span="1">
|
||
<view class="demo-uni-col right-radius">
|
||
<text>{{ index + 1 }}</text>
|
||
</view>
|
||
</uni-col>
|
||
<uni-col :span="2">
|
||
<view class="demo-uni-col left-radius">
|
||
<text>{{ item.nickName || item.userName }}</text>
|
||
</view>
|
||
</uni-col>
|
||
<block v-for="(field, i) in WorkType">
|
||
<uni-col :span="3">
|
||
<view class="demo-uni-col mar-left color-white" @click="handleDetail(index, i)"
|
||
: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>
|
||
</view>
|
||
</uni-col>
|
||
</block>
|
||
</uni-row>
|
||
</block>
|
||
</view>
|
||
<view v-else style="text-align: center; margin-top: 50%; color: white">
|
||
暂无数据
|
||
</view>
|
||
<!-- </mescroll-uni>-->
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import {ref, onMounted} from 'vue'
|
||
import customHeader from '@/components/customHeader.vue'
|
||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||
import {getNavBarPaddingTop} from '@/utils/system.js'
|
||
import {getAllWeekPlanList} from "@/api/crm/plan/getPlan";
|
||
import {AreaList, COLOR_MAP, OrdinalDate, WeekShortCN, WorkEvent, WorkType} from "./dataMap";
|
||
import {getCurrentWeekNum} from "./dateTimeUtils";
|
||
import {getDate} from "@/utils/datetime";
|
||
import {getWeekPlanListByDate} from "@/api/crm/plan/getPlan";
|
||
|
||
// const currentYear = new Date().getFullYear();
|
||
const currentMonth = new Date().getMonth() + 1;
|
||
const currentWeekNum = getCurrentWeekNum();
|
||
|
||
// 获取导航栏高度用于内容区域padding
|
||
const navBarPaddingTop = ref(0);
|
||
onMounted(() => {
|
||
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
|
||
uni.showLoading({})
|
||
getPlanList().then(res=>{
|
||
let {total, rows} = res;
|
||
console.log(rows, "周计划数据获取成功")
|
||
list.value = rows;
|
||
uni.hideLoading();
|
||
})
|
||
})
|
||
|
||
// 开始时间
|
||
let startDate = getDate('start');
|
||
// 结束时间，间隔10年
|
||
let endDate = getDate('end');
|
||
let defaultDate = getDate({format: true})
|
||
// 区域索引
|
||
let areaIndex = ref(0);
|
||
// 搜索内容
|
||
let searchValue = ref({
|
||
selectDate: defaultDate,
|
||
region: AreaList[areaIndex.value]
|
||
});
|
||
|
||
// 查询列表
|
||
let list = ref([]);
|
||
const mescrollRef = ref(null);
|
||
const upOption = ref({
|
||
page: {num: 0, size: 10},
|
||
noMoreSize: 5,
|
||
empty: {tip: '~ 空空如也 ~'},
|
||
textLoading: '加载中...',
|
||
textNoMore: '已经到底了'
|
||
});
|
||
|
||
const downOption = ref({
|
||
auto: true,
|
||
textInOffset: '下拉刷新',
|
||
textOutOffset: '释放更新',
|
||
textLoading: '刷新中...'
|
||
});
|
||
|
||
let cssFlag = ref(false);//控制样式
|
||
|
||
// 获取数据列表
|
||
const getPlanList = (month, date, pageIndex, pageSize) => {
|
||
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);
|
||
resolve({
|
||
rows,
|
||
total
|
||
});
|
||
});
|
||
}
|
||
|
||
// 搜索日期变更
|
||
let bindDateChange = (e) => {
|
||
defaultDate = e.detail.value
|
||
searchValue.value.selectDate = e.detail.value;
|
||
handleSearch();
|
||
}
|
||
|
||
// 查询搜索跳转
|
||
let handleSearch = () => {
|
||
console.log(searchValue.value, '查询参数')
|
||
uni.showLoading();
|
||
getWeekPlanListByDate(searchValue.value).then(res=>{
|
||
const {total, rows } = res;
|
||
list.value = rows;
|
||
console.log(rows, '查询成功');
|
||
}).catch(err=>{
|
||
console.warn(err,'数据获取失败');
|
||
}).finally(()=>{
|
||
uni.hideLoading();
|
||
})
|
||
}
|
||
const mescrollInit = (mescroll) => {
|
||
cssFlag.value = true;
|
||
mescrollRef.value = mescroll;
|
||
};
|
||
// 搜索区域变更
|
||
const bindPickerChange = (e) => {
|
||
// console.log('picker发送选择改变，携带值为', peopleIndex.value)
|
||
areaIndex.value = e.detail.value
|
||
searchValue.value.region = AreaList[e.detail.value]
|
||
// 查询
|
||
handleSearch();
|
||
}
|
||
|
||
// 跳转到详情
|
||
let 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) {
|
||
|
||
} else if (res.cancel) {
|
||
|
||
}
|
||
}
|
||
})
|
||
}
|
||
else{
|
||
uni.showToast({
|
||
title: "暂无内容",
|
||
icon: "none",
|
||
duration: 1500
|
||
})
|
||
}
|
||
}
|
||
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.demo-uni-row {
|
||
margin-bottom: 4rpx;
|
||
/* QQ、抖音小程序文档写有 :host，但实测不生效 */
|
||
/* 百度小程序没有 :host，需要设置block */
|
||
/* #ifdef MP-TOUTIAO || MP-QQ || MP-BAIDU */
|
||
display: block;
|
||
/* #endif */
|
||
}
|
||
|
||
/* 支付宝小程序没有 demo-uni-row 层级 */
|
||
/* 微信小程序使用了虚拟化节点，没有 demo-uni-row 层级 */
|
||
/* #ifdef MP-ALIPAY || MP-WEIXIN */
|
||
/deep/ .uni-row {
|
||
margin-bottom: 4rpx;
|
||
}
|
||
|
||
/* #endif */
|
||
|
||
.search {
|
||
display: flex;
|
||
padding: 0 30rpx;
|
||
height: 68rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.search .btn-search {
|
||
border: none;
|
||
background: none;
|
||
line-height: normal;
|
||
color: #fff;
|
||
/*line-height: 56rpx !important;*/
|
||
padding: 10rpx 0 0;
|
||
text-align: left;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.search .btn-search::after {
|
||
display: none;
|
||
}
|
||
|
||
.search .picker-bg {
|
||
display: flex;
|
||
flex-wrap: nowrap;
|
||
background-color: #6FA2F8;
|
||
border-radius: 25px;
|
||
color: #fff;
|
||
font-size: 28rpx;
|
||
padding: 0rpx 20rpx;
|
||
/* #ifndef APP-PLUS */
|
||
padding: 10rpx 20rpx 0 20rpx;
|
||
/* #endif */
|
||
margin-right: 20rpx;
|
||
}
|
||
|
||
.search .picker-bg .picker {
|
||
display: flex;
|
||
align-items: center;
|
||
/* #ifndef APP-PLUS */
|
||
padding-top: 2rpx;
|
||
/* #endif */
|
||
}
|
||
|
||
.search .picker-bg .picker .uni-icons {
|
||
color: #fff !important;
|
||
}
|
||
|
||
.search .picker-bg .picker .uni-icons:first-child {
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.search .picker-bg .picker .uniui-down {
|
||
margin-left: 20rpx;
|
||
}
|
||
|
||
.line {
|
||
display: inline-block;
|
||
width: 10rpx;
|
||
border-right: solid gray 1rpx;
|
||
height: 20rpx;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.demo-uni-col {
|
||
height: 36px;
|
||
border-radius: 4px;
|
||
background-color: #E7E7E7;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
text-align: center;
|
||
font-size: 30rpx;
|
||
line-height: 32rpx;
|
||
padding-top: 10rpx;
|
||
padding-bottom: 13rpx;
|
||
min-height: 130rpx;
|
||
overflow: hidden;
|
||
}
|
||
|
||
.mar-left {
|
||
margin-left: 5rpx;
|
||
}
|
||
|
||
.right-radius {
|
||
border-top-right-radius: 0;
|
||
border-bottom-right-radius: 0;
|
||
}
|
||
|
||
.left-radius {
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
}
|
||
|
||
.color-white {
|
||
color: white;
|
||
}
|
||
|
||
.white-bg {
|
||
width: 690rpx;
|
||
margin: 20rpx 0 0 0;
|
||
border-radius: 8px 8px 0 0;
|
||
/* #ifdef APP-PLUS */
|
||
min-height: calc(100vh - 160rpx/*.topbar height*/ - 68rpx/*.search height*/ - 40rpx/*.white-bg padding-top*/ - 40rpx/*.white-bg padding-bottom*/);
|
||
/* #endif */
|
||
/* #ifndef APP-PLUS */
|
||
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> |