DigitalScholl/Learun.Framework.Ultimate V7/LearunApp-2.2.0/pages/EducationalAdministration/LessonInfoOfElectiveOnline/list.vue

<template>
	<view class="page">
		<view class="mainpage" :class="sideOpen ? 'show' : ''" style="padding-top: 40px;">
			<!-- 顶部条目/分页信息栏 -->
			<l-customlist-banner @buttonClick="sideOpen = true">{{
			  tips
			}}</l-customlist-banner>
			<!-- <view class="records">共 {{ records }} 条数据</view> -->
			<l-scroll-list v-if="ready" @pullDown="pullDown" @toBottom="fetchList()" ref="data">
				<l-customlist :tips="loadState" showTips>
					<view class="pageBox customlist-item" showDelete="true" v-for="(item, ind) in data" :key="item.Id"
						@click="tapClick(item)">
						<view class="">
							<text>学年：</text>
							{{ item.AcademicYearNo }}
						</view>
						<view class="">
							<text>学期：</text>
							{{ item.Semester }}
						</view>
						<view class="">
							<text>课程编号：</text>
							{{ item.LessonNo }}
						</view>
						<view class="">
							<text>课程名称：</text>
							{{ item.LessonName }}
						</view>
						<view class="">
							<text>建课教师：</text>
							{{ item.EmpNo }}
						</view>
						<view class="">
							<text>建课学校：</text>
							{{ item.F_SchoolId }}
						</view>
						<view class="">
							<text>已报人数：</text>
							{{ item.StuNumOfApply }}
						</view>
						<view class="pageType">
							<text>报名状态：</text>
							{{ typePd(item.Status) }}
						</view>
						<view class="delbtn" v-if="item.Status == 1" @click.stop="delTap(item)">取消报名</view>
					</view>
				</l-customlist>
			</l-scroll-list>
		</view>

		<!-- 关闭侧边抽屉按钮 -->
		<view @click="sideOpen = false" :class="sideOpen ? 'show' : ''" class="sideclose">
			<l-icon type="pullright" color="blue" />
		</view>

		<!-- 侧边栏，用于设置查询条件 -->
		<scroll-view :class="sideOpen ? 'show' : ''" class="sidepage" scroll-y>
			<view v-if="ready" class="padding">

				<l-input v-model="queryData.LessonNo" @change="searchChange" title="课程编号" placeholder="按课程编号查询" />
				<l-input v-model="queryData.LessonName" @change="searchChange" title="课程名称" placeholder="按课程名称查询" />

				<!-- 重置查询条件按钮 -->
				<view class="padding-tb">
					<l-button @click="reset" line="orange" class="block" block>重置查询条件</l-button>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import pickBy from "lodash/pickBy";
	import mapValues from "lodash/mapValues";

	export default {
		data() {
			return {
				weekChina: ['一', '二', '三', '四', '五', '六', '日'],
				user: null,
				data: [],
				total: 1,
				records: 0,
				ready: false,
				page: 1,
				rows: 10,
				multipleData: null,
				sideOpen: false,
				tips: "加载中...",
				loadState: '向下翻以加载更多',
				// 数据源
				dataSource: {
					F_SchoolId: []
				},

				// 查询条件
				searchData: {},
				defaultQueryData: {},
				queryData: {
					LessonNo: "",
					LessonName: "",
				},

			};
		},
		onUnload() {
			this.OFF('LessonInfoOfElectiveOnline');
		},
		onShow() {
			if (this.data.length) {
				this.pullDown()
			}
		},
		methods: {
			init() {
				this.ON('LessonInfoOfElectiveOnline', this.refreshList);
				// 拉取加载列表和数据源
				Promise.all([
					this.FETCH_DATASOURCE('company').then(result => {
						this.dataSource.F_SchoolId = result.data.map(t => ({
							text: t.f_fullname,
							value: t.f_companyid
						}))
					}),
					() => {},
				]);
				// var _this = this;
				this.user = this.GET_GLOBAL('loginUser');
				this.fetchList();
				// 初始化查询条件
				this.defaultQueryData = this.COPY(this.queryData);
				this.ready = true;
			},
			// 拉取列表
			async fetchList() {
				if (this.page > this.total) {
					return;
				}
				// let _this = this;
				this.searchData.StuNo = this.user.account;
				this.searchData.StuMajorNo = this.user.majorno;
				this.searchData.StuGrade = this.user.grade;
				let _postParam = {
					pagination: {
						rows: this.rows,
						page: this.page,
						sidx: 'AcademicYearNo DESC, Semester DESC, LessonNo ASC',
						sord: 'asc'
					},
					//queryJson: '{}'
					queryJson: JSON.stringify(this.searchData),
				};
				this.LOADING('加载数据中…')
				this.HTTP_GET('learun/LessonInfoOfElectiveOnline/pagelist', _postParam, '加载数据时出错').then(res => {
					this.HIDE_LOADING();
					this.data = this.data.concat(res.rows);
					this.total = res.total;
					this.records = res.records;
					this.page = res.page + 1;
					this.loadState = res.page >= res.total ? '已加载所有项目' : '向下翻以加载更多';
					this.tips = `已加载 ${Math.min(res.page, res.total)} / ${
					  res.total
					} 页，共 ${res.records} 项`;
					// console.log(_this.data);
				});
			},
			// 列表下拉
			pullDown() {
				this.refreshList().then(() => {
					this.$refs.data.stopPullDown();
				});
			},
			async refreshList() {
				this.page = 1;
				this.total = 1;
				this.data = [];

				this.fetchList();
			},
			tapClick(data) {
				this.NAV_TO('./from', {
					keyValue: data.Id,
					Status: data.Status
				}, true);
			},
			delTap(item) {
				// console.log(item)
				// let this = this;
				this.CONFIRM('数字化校园提示', '确定要取消报名吗？', true).then(res => {
					if (res) {
						let _postData = {
							keyValue: item.Id,
							StuNo: this.user.account
						}
						this.LOADING('正在取消报名…')
						this.HTTP_POST(
							'learun/LessonInfoOfElectiveOnline/Cancel',
							_postData,
							'加载数据时出错'
						).then(data => {
							this.HIDE_LOADING()
							// console.log(data)
							if (data) { // 成功
								this.TOAST('取消报名成功！');
								this.refreshList()
							}
						})
					}
				})
			},

			// 设置搜索条件
			async searchChange() {
				const result = {};

				// 将其他查询项添加到查询 JSON 中
				const queryObj = pickBy(this.queryData, (t) =>
					Array.isArray(t) ? t.length > 0 : t
				);
				Object.assign(
					result,
					mapValues(queryObj, (t) => (Array.isArray(t) ? t.join(",") : t))
				);
				this.searchData = result;
				this.refreshList();
			},

			// 点击「清空查询条件」按钮
			reset() {
				this.queryData = this.COPY(this.defaultQueryData);
				this.searchChange();
			},

		},
		computed: {
			typePd() {
				return num => {
					let txt = '';
					if (num == 1) {
						txt = '审核中';
					} else if (num == 2) {
						txt = '报名成功';
					} else if (num == 3) {
						txt = '报名失败';
					} else {
						txt = '未报名';
					}
					return txt;
				};
			}
		},
		created() {
			this.init();
		}
	};
</script>

<style lang="less" scoped>
	@import '~@/common/css/sidepage.less';
	@import '~@/common/css/customlist.less';

	.page {
		background-color: #fff;
	}

	.page-content {
		margin-top: 39px;
	}

	.records {
		color: #8f8f94;
		background: #ffffff;
		padding: 10px 12px;
		width: 100%;
		vertical-align: middle;
		border-bottom: 0.5px solid #ddd;
		position: fixed;
		top: var(--window-top);
		z-index: 1024;
		border-bottom: 0.5px solid #ddd;
		height: 40px;
		width: 100%;
		box-shadow: 0 0.5px 3px rgba(0, 0, 0, 0.1);
		// background: #f1f1f1;
	}

	.pageBox {
		// margin-top: 34px;
		padding: 5px 15px;
		line-height: 24px;
		border-bottom: 5px solid #f5f5f5;
	}

	.delbtn {
		position: absolute;
		right: 15px;
		bottom: 7px;
		padding: 3px 10px;
		background: #dd524d;
		color: #fff;
		border-radius: 3px;
	}
</style>