subject_gxj/xj_project_app/pages/projectInfo/report/index.vue

<script setup>
	import {
		ref
	} from 'vue'

	import {
		onLoad,
		onPageScroll
	} from "@dcloudio/uni-app"

	import {
		timeFormat
	} from "@/utils/timeFormatter.js"

	import {
		getWeeklyByProject,
		getMonthlyByProject,
		getYearlyByProject
	} from "@/api/work/weeklyAndMonthly.js"

	let subId = ref(null);
	let subName = ref(null);
	let pageType = ref(null);
	let pageTypeText = ref(null);

	let pageForm = ref({
		startWeek: null,
		endWeek: null,
		startMonth: null,
		endMonth: null,
		year: null
	})

	let reportListWeekAndMonth = ref([])
	let reportListYear = ref([{
			name: "01",
			amt: null
		},
		{
			name: "02",
			amt: null
		},
		{
			name: "03",
			amt: null
		},
		{
			name: "04",
			amt: null
		},
		{
			name: "05",
			amt: null
		},
		{
			name: "06",
			amt: null
		},
		{
			name: "07",
			amt: null
		},
		{
			name: "08",
			amt: null
		},
		{
			name: "09",
			amt: null
		},
		{
			name: "10",
			amt: null
		},
		{
			name: "11",
			amt: null
		},
		{
			name: "12",
			amt: null
		},
	])

	let showText = ref(null);

	// 根据类型修改页面内容
	function changeByReportKind(type) {
		// 修改页面标题
		const pageTypeTextObj = {
			"weekly": "项目周报",
			"monthly": "项目月报",
			"yearly": "项目年度计划"
		}
		pageTypeText.value = pageTypeTextObj[type]

		let now = new Date()

		// 根据不同类型初始化数据
		if (type === "weekly") {
			let nowFormat = timeFormat(now)
			endWeek.value = nowFormat
			pageForm.value.startWeek = getMondayToSunday(nowFormat)

			// // 结束时间
			// let nowFormat = timeFormat(now)
			// endWeek.value = nowFormat
			// pageForm.value.endWeek = getMondayToSunday(nowFormat)

			// // 开始时间
			// let start = now - 1000 * 60 * 60 * 24 * 30
			// let startFormat = timeFormat(start)
			// startWeek.value = startFormat
			// pageForm.value.startWeek = getMondayToSunday(startFormat)
			getWeekly();
			showText.value = "本周未填写周报"
		}

		if (type === "monthly") {
			let year = now.getFullYear();
			let month = now.getMonth() + 1 >= 10 ? now.getMonth() + 1 : '0' + (now.getMonth() + 1);
			// // 结束时间
			// let nowFormat = year + "/";
			// endMonth.value = nowFormat
			// pageForm.value.endMonth = nowFormat

			// 开始时间
			// let startFormat = year + "/01";
			let startFormat = year + "/" + month;
			startMonth.value = startFormat
			pageForm.value.startMonth = startFormat
			getMonthly()
			showText.value = "本月未填写月报"
		}

		if (type === "yearly") {
			let nowYear = now.getFullYear()

			pageForm.value.year = nowYear.toString()
			defaultIndex.value = [Number(nowYear) - 2000]

			getYearly()
		}
	}

	// 周报--切换
	const getWeeklyOther = function(type) {
		if (type === "next") {
			let end = pageForm.value.startWeek.substr(11);
			let Dms = new Date(end).getTime()
			const nextDay = new Date(Dms + 1000 * 60 * 60 * 24);
			let nowFormat = timeFormat(nextDay)
			pageForm.value.startWeek = getMondayToSunday(nowFormat);
			getWeekly();
		}

		if (type === "pre") {
			let start = pageForm.value.startWeek.substr(0, 10);
			let Dms = new Date(start).getTime()
			const preDay = new Date(Dms - 1000 * 60 * 60 * 24);
			let nowFormat = timeFormat(preDay)
			pageForm.value.startWeek = getMondayToSunday(nowFormat);
			getWeekly();
		}
	};

	// 周报--改变选择时间格式（周一至周天格式）
	function getMondayToSunday(date) {
		const chooseDay = new Date(date); // 选中的时间
		let nowTime = chooseDay.getTime(); // 选中的时间(时间戳化)
		let week = chooseDay.getDay() || 7; // 选中的是星期几
		let oneDayTime = 24 * 60 * 60 * 1000; // 一天的时间

		let mondayTime = nowTime - (week - 1) * oneDayTime; //周一
		let sundayTime = nowTime + (7 - week) * oneDayTime; //周日

		let mondayText = timeFormat(mondayTime); //周一文字化
		let sundayText = timeFormat(sundayTime); //周日文字化

		let mon1 = mondayText.replace("/", "-")
		let mon2 = mon1.replace("/", "-")

		let sun1 = sundayText.replace("/", "-")
		let sun2 = sun1.replace("/", "-")

		return mon2 + "至" + sun2
	}

	// 周报====================================选择开始时间
	let startWeek = ref(null)
	let beginTimeShowWeek = ref(false)

	function showBeginTimeChooseWeekly() {
		beginTimeShowWeek.value = true
	}

	function beginTimeCloseWeek(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.startWeek = getMondayToSunday(time)
		}
		beginTimeShowWeek.value = false

		getWeekly();
	}

	// 周报====================================选择结束时间
	let endWeek = ref(null)
	let endTimeShowWeek = ref(false)

	function showEndTimeChooseWeekly() {
		endTimeShowWeek.value = true
	}

	function endTimeCloseWeek(e) {
		if (e) {
			let time = timeFormat(e.value)
			pageForm.value.endWeek = getMondayToSunday(time)
		}
		endTimeShowWeek.value = false;
		getWeekly();
	}

	// 周报====================================请求数据
	function getWeekly() {
		let params = {
			subId: subId.value,
			beginDate: pageForm.value.startWeek.substr(0, 10),
			endDate: pageForm.value.startWeek.substr(11)
		}

		getWeeklyByProject(params).then(res => {
			reportListWeekAndMonth.value = res.data.list
		})
	}


	// 月报====================================选择开始时间
	let startMonth = ref(null)
	let beginTimeShow = ref(false)

	function showBeginTimeChooseMonth() {
		beginTimeShow.value = true
	}

	function beginTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			time = time.substring(0, 7)
			pageForm.value.startMonth = time
		}
		beginTimeShow.value = false

		getMonthly()
	}

	// 月报====================================选择结束时间
	let endMonth = ref(null)
	let endTimeShow = ref(false)

	function showEndTimeChoose() {
		endTimeShow.value = true
	}

	function endTimeClose(e) {
		if (e) {
			let time = timeFormat(e.value)
			time = time.substring(0, 7)
			pageForm.value.endMonth = time
		}
		endTimeShow.value = false

		getMonthly()
	}

	// 月报--切换
	const getMonthOther = function(type) {
		if (type === "next") {
			let time = pageForm.value.startMonth;
			let year = pageForm.value.startMonth.substr(0, 4);
			let month = pageForm.value.startMonth.substr(5);

			let dayNum = 0;
			if (month === "1" || month === "3" || month === "5" || month === "7" || month === "8" || month === "10" ||
				month === "12") {
				dayNum = 32;
			} else if (month === "2") {
				// 闰月
				if (year % 4 === 0 && year % 100 !== 0) {
					dayNum = 30;
				} else {
					dayNum = 29;
				}
			} else {
				dayNum = 31;
			}

			let Dms = new Date(time).getTime();
			let nextMonth = new Date(Dms + 1000 * 60 * 60 * 24 * dayNum);
			let nextFormat = timeFormat(nextMonth);
			pageForm.value.startMonth = nextFormat.substr(0, 7);
			getMonthly()
		}

		if (type === "pre") {
			let time = pageForm.value.startMonth;
			let month = pageForm.value.startMonth.substr(5);

			let Dms = new Date(time).getTime();
			let preMonth = new Date(Dms - 1000 * 60 * 60 * 24);
			let preFormat = timeFormat(preMonth);
			pageForm.value.startMonth = preFormat.substr(0, 7);
			getMonthly()
		}
	};

	// 月报====================================请求数据
	function getMonthly() {
		let start01 = pageForm.value.startMonth.replace('/', '-')
		let start02 = start01.replace('/', '-') + '-01'

		// let end01 = pageForm.value.endMonth.replace('/', '-')
		// let end02 = end01.replace('/', '-') + '-01'

		let params = {
			subId: subId.value,
			beginDate: start02,
			endDate: start02
		}

		getMonthlyByProject(params).then(res => {
			res.data.list.forEach(item => {
				item.editMonth = item.kjMonth.slice(0, 4) + "年" + item.kjMonth.slice(4, 6) + "月"
			})
			reportListWeekAndMonth.value = res.data.list
		})

	}

	// 年度计划====================================选择年
	let defaultIndex = ref([0])
	let yearShow = ref(false);

	let yearColumns = ref([
		["2000", "2001", "2002", "2003", "2004", "2005", "2006", "2007", "2008", "2009", "2010", "2011", "2012", "2013",
			"2014", "2015", "2016", "2017", "2018", "2019", "2020", "2021", "2022", "2023", "2024", "2025", "2026",
			"2027", "2028", "2029", "2030", "2031", "2032", "2033"
		]
	])

	function yearShowChoose() {
		yearShow.value = true;
	}

	function yearClose(e) {
		if (e) pageForm.value.year = e.value[0];
		yearShow.value = false

		getYearly()
	}

	// 年度计划====================================请求数据
	function getYearly() {
		let params = {
			subId: subId.value,
			year: pageForm.value.year
		}
		getYearlyByProject(params).then(res => {
			reportListYear.value = res.data.list
		})
	}

	onLoad(options => {
		pageType.value = options.type
		subId.value = options.subId
		subName.value = options.subName
		changeByReportKind(options.type)
	})
</script>

<template>
	<view class="container">
		<page-title>{{pageTypeText || "项目报告"}}</page-title>

		<view class="cards-list">
			<view class="card only-card">
				<view class="card-item first-card-item">
					<view class="card-item-name">项目名称</view>
					<view class="card-item-input">{{subName || "--"}}</view>
				</view>

				<!-- 周报-周显示 -->
				<view class="card-item" v-if="pageType === 'weekly'">
					<view class="card-item-name">时间范围</view>
					<view class="card-item-description">
						<view>{{pageForm.startWeek}}</view>
					</view>
				</view>

				<view class="card-item" v-if="pageType === 'weekly'">
					<view class="card-btn" @click="getWeeklyOther('pre')">上一周</view>
					<view class="card-btn" @click="getWeeklyOther('next')">下一周</view>
				</view>

				<!-- 周报-开始周 -->
				<!-- 		<view class="card-item" v-if="pageType === 'weekly'">
					<view class="card-item-name">开始周</view>
					<view class="card-item-description" @click="showBeginTimeChooseWeekly()">
						<view>{{pageForm.startWeek}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
 -->
				<!-- 周报-结束周 -->
				<!-- 	<view class="card-item" v-if="pageType === 'weekly'">
					<view class="card-item-name">结束周</view>
					<view class="card-item-description" @click="showEndTimeChooseWeekly()">
						<view>{{pageForm.endWeek}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view> -->

				<!-- 月报-月显示 -->
				<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name">月报时间</view>
					<view class="card-item-description">
						<view>{{pageForm.startMonth}}</view>
					</view>
				</view>

				<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-btn" @click="getMonthOther('pre')">上一月</view>
					<view class="card-btn" @click="getMonthOther('next')">下一月</view>
				</view>

				<!-- 月报-开始月 -->
				<!-- 		<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name">开始月</view>
					<view class="card-item-description" @click="showBeginTimeChooseMonth()">
						<view>{{pageForm.startMonth}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view> -->

				<!-- 月报-结束月 -->
				<!-- 	<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name">结束月</view>
					<view class="card-item-description" @click="showEndTimeChoose()">
						<view>{{pageForm.endMonth}}</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view> -->

				<!-- 年度计划 -->
				<view class="card-item" v-if="pageType === 'yearly'">
					<view class="card-item-name">年度</view>
					<view class="card-item-description" @click="yearShowChoose()">
						<view v-if="pageForm.year">{{pageForm.year}}</view>
						<view v-else class="remind-text">请选择年度</view>
						<u-icon name="arrow-right" color="#343437" size="16" customStyle="margin-left:10rpx"></u-icon>
					</view>
				</view>
			</view>

			<view class="card" style="padding-top: 40rpx;" v-for="(item,index) in reportListWeekAndMonth" :key="index">
				<!-- 录入周期 -->
				<view class="card-item first-card-item" v-if="pageType === 'weekly'">
					<view class="card-item-name">录入周期</view>
					<view class="card-item-input">{{item.kjMonth || "--"}}</view>
				</view>

				<!-- 录入年月 -->
				<view class="card-item first-card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name">录入年月</view>
					<view class="card-item-input">{{item.editMonth || "--"}}</view>
				</view>

				<!-- 资金使用 -->
				<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name">资金使用</view>
					<view class="card-item-input">{{item.amt || "--"}}万元</view>
				</view>

				<!-- 项目进展情况 -->
				<view class="card-item" v-if="pageType === 'weekly'">
					<view class="card-item-name">项目进展情况</view>
				</view>
				<view class="card-item" v-if="pageType === 'weekly'">
					<u--textarea class="card-item-textarea" v-model="item.content" disabled></u--textarea>
				</view>

				<!-- 项目延期原因 -->
				<view class="card-item">
					<view class="card-item-name">项目延期原因</view>
				</view>
				<view class="card-item">
					<u--textarea class="card-item-textarea" v-model="item.reason" disabled></u--textarea>
				</view>

				<!-- 进度 -->
				<view class="card-item">
					<view class="card-item-name">进度</view>
					<view class="card-item-input">{{item.numBl || "--"}}%</view>
				</view>

				<!-- 当月完成内容 -->
				<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name">当月完成内容</view>
				</view>
				<view class="card-item" v-if="pageType === 'monthly'">
					<u--textarea class="card-item-textarea" v-model="item.content" disabled></u--textarea>
				</view>

				<!-- 下月预测投资金额 -->
				<view class="card-item" v-if="pageType === 'monthly'">
					<view class="card-item-name" style="min-width: 256rpx;">下月预测投资金额</view>
					<view class="card-item-input">{{item.amtLast || "--"}}（万元）</view>
				</view>
			</view>

			<view class="card" style="padding-top: 40rpx;" v-if="pageType==='yearly'">
				<view class="card-name first-card-item">
					<view class="card-name-title">
						<text class="card-name-description">月份</text>
					</view>

					<view class="card-name-title">
						<text class="card-name-description">资金（万元）</text>
					</view>
				</view>

				<!-- 月份值 -->
				<view class="card-item" v-for="(item,index) in reportListYear" :key="index">
					<view class="card-item-name">{{item.ymonth}}</view>

					<view class="card-item-input">
						<text class="card-name-description">{{item.amt || "--"}}</text>
					</view>

					<!-- 	<input v-model="item.amt" type="number" class="card-item-input" placeholder="请填写金额"
						placeholder-style="color: #D8D8D8" maxlength="20" /> -->
				</view>
			</view>

			<empty-show v-if="pageType!=='yearly'&& reportListWeekAndMonth.length===0" heightPrecent="30%"
				:showText="showText" size='60rpx'></empty-show>
		</view>

		<!-- 周报--开始时间 -->
		<u-datetime-picker :show="beginTimeShowWeek" @confirm="beginTimeCloseWeek" @cancel="beginTimeCloseWeek"
			@close="beginTimeCloseWeek" v-model="startWeek" mode="date" closeOnClickOverlay></u-datetime-picker>
		<!-- 周报--结束时间 -->
		<u-datetime-picker :show="endTimeShowWeek" @confirm="endTimeCloseWeek" @cancel="endTimeCloseWeek"
			@close="endTimeCloseWeek" v-model="endWeek" mode="date" closeOnClickOverlay></u-datetime-picker>

		<!-- 月报--开始时间 -->
		<u-datetime-picker :show="beginTimeShow" @confirm="beginTimeClose" @cancel="beginTimeClose" @close="beginTimeClose"
			v-model="startMonth" mode="year-month" closeOnClickOverlay></u-datetime-picker>
		<!-- 月报--结束时间 -->
		<u-datetime-picker :show="endTimeShow" @confirm="endTimeClose" @cancel="endTimeClose" @close="endTimeClose"
			v-model="endMonth" mode="year-month" closeOnClickOverlay></u-datetime-picker>

		<!-- 年度选择 -->
		<u-picker :show="yearShow" :defaultIndex="defaultIndex" :columns="yearColumns" @confirm="yearClose"
			@cancel="yearClose" @close="yearClose" closeOnClickOverlay></u-picker>
	</view>
</template>


<style lang="scss" scoped>

</style>