subject_gxj/xj_project_app/pages/monthly/list/index.vue

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

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

	import {
		getMonthlyList,
		delMonthlyItem
	} from "@/api/work/weeklyAndMonthly.js"

	let editIcon = '@/static/icon-input.svg'
	let seeIcon = '@/static/pass-see.svg'
	let scrollTop = ref(0)
	let loading = ref(true)

	// 参数
	let searchInfo = ref({
		pageNo: 1,
		pageSize: 10,
	})
	// 触底加载flag
	let moreListFlag = true

	// 主要列表
	let enterpriseList = ref([])
	let listTotal = ref(0)
	// 查询信息
	let optionsBack = null
	// 获取列表
	function getList() {
		if (searchInfo.value.pageNo == 1) {
			loading.value = true
		}

		let params = Object.assign({
			orderType: orderByStatus.value
		}, searchInfo.value)

		getMonthlyList(params).then(res => {
			loading.value = false
			enterpriseList.value = enterpriseList.value.concat(res.data.list);
			listTotal.value = res.data.totalCount;
			if (res.data.totalCount == searchInfo.value.pageNo * searchInfo.value.pageSize - (10 - res.data.list
					.length)) moreListFlag = false;
		}).catch(() => {
			loading.value = false
		})
	}

	// 按金额排序
	let orderByStatus = ref(null)
	const changeOrderByStatus = () => {
		if (orderByStatus.value === "desc") {
			orderByStatus.value = "asc"
		} else if (orderByStatus.value === "asc") {
			orderByStatus.value = null
		} else {
			orderByStatus.value = "desc"
		}
		searchInfo.value.pageNo = 1;
		enterpriseList.value = [];
		moreListFlag = true;
		getList();
	}

	// 折叠/展开
	const changeFoldItem = (status, id) => {
		let item = enterpriseList.value.find(item => item.sub_id === id);
		item.unfold = status;
	}

	// 去录入
	function gotoInput(subId, startDate, year, kj_month, num_bl, sub_plan_id, amt_rt) {
		uni.navigateTo({
			url: `/pages/monthly/input/index?subId=${subId}&startDate=${startDate}&year=${year}&kj_month=${kj_month}&num_bl=${num_bl}&sub_plan_id=${sub_plan_id}&amtRt=${amt_rt}`
		})
	}

	// 去删除
	function goToDel(year, beginDate, subId) {
		uni.showModal({
			title: "删除确认",
			content: "确定要删除该月报录入吗?",
			success: function(res) {
				if (res.confirm) {
					let beginDateFormat = beginDate.replace("年", "-")
					beginDateFormat = beginDateFormat.slice(0, beginDateFormat.length - 1) + "-01"
					let params = {
						year,
						beginDate: beginDateFormat,
						subId,
					}
					delMonthlyItem(params).then(delRes => {
						if (delRes.code === 200) {
							uni.showToast({
								title: "删除成功",
								icon: "success",
								duration: 2000,
							})
							getList(optionsBack)
						} else {
							uni.showToast({
								title: delRes.msg || "删除失败",
								icon: "error",
								duration: 2000,
							})
						}
					})
				} else if (res.cancel) {
					uni.showToast({
						title: "取消删除",
						icon: "none",
						duration: 2000,
					})
				}
			}
		})
	}

	// 去详情
	function gotoDetail(id, subName) {
		uni.navigateTo({
			url: `/pages/projectInfo/detail/index?id=${id}&subName=${subName}`
		})
	}

	onLoad((options) => {
		optionsBack = options
		searchInfo.value = Object.assign(searchInfo.value, options);
		searchInfo.value.pageNo = 1;
		enterpriseList.value = [];
		listTotal.value = 0;
		moreListFlag = true;

		getList();
	})

	onPageScroll((e) => {
		scrollTop.value = e.scrollTop
	})

	onPullDownRefresh(() => {
		searchInfo.value.pageNo = 1;
		projectList.value = [];
		moreListFlag = true;
		try {
			getList();
		} finally {
			uni.stopPullDownRefresh()
		}
	})

	onReachBottom(() => {
		if (!moreListFlag) {
			return uni.showToast({
				title: "已经到底了。",
				icon: "none",
				duration: 2000
			})
		}
		searchInfo.value.pageNo++;
		getList();
	})
</script>

<template>
	<view class="container">
		<page-title>项目信息</page-title>

		<view class="cards-list">
			<view class="order-by">
				<view class=" order-by-item">
					实际金额
					<view class="order-by-icon" :class="orderByStatus" @click="changeOrderByStatus()"></view>
				</view>
			</view>


			<!-- 	<view class="card" v-for="(item,index) in enterpriseList" :key="index">
				<card-title :numerator="index+1" :denominator="listTotal"></card-title>

				<view class="card-name">
					<view class="card-name-title">
						<view class="card-name-icon" :class="index%2 === 1?'icon-double':''"></view>

						<text class="card-name-description">项目名称</text>
					</view>

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

				<view class="card-item">
					<view class="card-item-name">月</view>

					<view class="card-item-content">{{item.kj_month || "--"}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">资金使用</view>

					<view class="card-item-content">{{item.amt==null ? "--" : item.amt}}</view>
				</view>

				<view class="card-item">
					<view class="card-item-name">完成比例</view>

					<view class="card-item-content">{{item.num_bl==null ? "--" : item.num_bl}}%</view>
				</view>

				<view class="card-item">
					<view v-if="item.checkedit ==='1'" class="card-btn thin-btn text-btn"
						@click="gotoInput(item.sub_id,item.begin_date,item.year,item.kj_month,item.num_bl,item.sub_plan_id,item.amt_rt)">
						<image src="@/static/icon-input.svg" mode=""></image>
						录入
					</view>

					<view v-else class="card-btn thin-btn text-btn"
						@click="gotoInput(item.sub_id,item.begin_date,item.year,item.kj_month,item.num_bl,item.sub_plan_id,item.amt_rt)">
						<image src="@/static/pass-see.svg" mode=""></image>
						查看
					</view>

					<view class="card-btn thin-btn  empty-btn" @click="goToDel(item.year,item.kj_month,item.sub_id)">删除
					</view>

					<view class="card-btn thin-btn " @click="gotoDetail(item.sub_id,item.sub_name)">项目查看</view>
				</view>
			</view> -->

			<view v-for="(item,index) in enterpriseList" :key="index">
				<!-- 未折叠卡片 -->
				<view class="card" v-if="item.unfold">
					<!-- 项目名称 -->
					<view class="card-item">
						<view class="card-item-name">项目名称</view>
						<view class="card-item-content">{{item.sub_name ?? "--"}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">月</view>
						<view class="card-item-content">{{item.kj_month || "--"}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">资金使用</view>
						<view class="card-item-content">{{item.amt==null ? "--" : item.amt}}</view>
					</view>

					<view class="card-item">
						<view class="card-item-name">完成比例</view>
						<view class="card-item-content">{{item.num_bl==null ? "--" : item.num_bl}}%</view>
					</view>

					<view class="card-item bottom-item">
						<view v-if="item.checkedit ==='1'" class="card-btn thin-btn text-btn"
							@click="gotoInput(item.sub_id,item.begin_date,item.year,item.kj_month,item.num_bl,item.sub_plan_id,item.amt_rt)">
							<image src="@/static/icon-input.svg" mode=""></image>
							录入
						</view>

						<view v-else class="card-btn thin-btn text-btn"
							@click="gotoInput(item.sub_id,item.begin_date,item.year,item.kj_month,item.num_bl,item.sub_plan_id,item.amt_rt)">
							<image src="@/static/pass-see.svg" mode=""></image>
							查看
						</view>

						<view class="card-btn thin-btn  empty-btn" @click="goToDel(item.year,item.kj_month,item.sub_id)">删除
						</view>

						<view class="card-btn thin-btn " @click="gotoDetail(item.sub_id,item.sub_name)">项目查看</view>
					</view>

					<!-- 编号 -->
					<view class="card-fold-option">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(false,item.sub_id)">
							<view class="card-fold-btn card-unfold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>

				<!-- 折叠卡片 -->
				<view class="card-fold" v-else>
					{{item.sub_name ?? "--"}}

					<view class="card-fold-option">
						<view class="card-fold-count">{{index + 1}} / {{listTotal}}</view>

						<view class="card-fold-center" @click.stop="changeFoldItem(true, item.sub_id)">
							<view class="card-fold-btn"></view>
						</view>

						<view class="card-fold-chaos"></view>
					</view>
				</view>
			</view>

			<view class="gap-bottom"></view>

			<empty-show v-if="enterpriseList.length===0"></empty-show>
		</view>

		<u-back-top :scroll-top="scrollTop"></u-back-top>

		<u-loading-page :loading="loading"></u-loading-page>
	</view>
</template>

<style lang="scss" scoped>
	.card-fold {
		position: relative;
		width: 100%;
		min-height: 152rpx;
		margin-bottom: 20rpx;
		padding: 24rpx 30rpx 52rpx;
		box-sizing: border-box;
		background: #FFFFFF;
		border-radius: 40rpx;
		overflow: hidden;
	}

	.card-fold-option {
		position: absolute;
		display: flex;
		justify-content: space-between;
		align-items: center;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 38rpx;
		padding: 0 40rpx;
		box-sizing: border-box;
		background: linear-gradient(270deg, #CADDFF 4%, rgba(219, 232, 255, 0) 100%);
		z-index: 999;

		.card-fold-count {
			flex: 1;
			font-size: 28rpx;
			color: #1869F6;
		}

		.card-fold-center {
			flex: 1;

			.card-fold-btn {
				width: 32rpx;
				height: 20rpx;
				margin: 0 auto;
				background-image: url("@/static/icon-fold.png");
				background-size: 100% 100%;
			}

			.card-unfold-btn {
				transform: rotate(180deg);
			}
		}

		.card-fold-chaos {
			flex: 1;
		}
	}

	.bottom-item {
		margin-bottom: 20rpx;
	}
</style>