feat: 我的计划、计划查看
This commit is contained in:
wangzhuo
393
src/pages/business/CRM/plan/planView.vue
Normal file
393
src/pages/business/CRM/plan/planView.vue
Normal file
@@ -0,0 +1,393 @@
|
||||
<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" :style="{ paddingTop: navBarPaddingTop + 'px' }"></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>{{ item[field] }}</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/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;
|
||||
}
|
||||
|
||||
.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>
|
||||
Reference in New Issue
Block a user