lm-safe-app/pages/apply/subPages/FM/scheduling.vue

<template>
	<view class="page-wrap">
		<view class="date-select">
			<view class="previous-day" @click="handleChangeDay(-1)">
				<u-icon name="arrow-left-double"></u-icon>
				<text>前一天</text>
			</view>
			<uni-datetime-picker class="date-picker" type="date" :clear-icon="false" v-model="single"
				@maskClick="maskClick" @change="onChangeTime" />
			<view class="next-day" @click="handleChangeDay(1)">
				<text>后一天</text>
				<u-icon name="arrow-right-double"></u-icon>
			</view>
		</view>
		<view class="card" v-for="(item, key) in workShopScheduling" :key="key">
			<uni-card :is-shadow="false" margin="0">
				<view slot="title">
					<view class="custom-card-title">
						<text class="text">{{item[0].DEPARTMENT_NAME}}</text>
					</view>
				</view>
				<view v-for="(sub, index) in item" :key="index" class="class-list">
					<view class="class-info">
						<view class="class-name">{{sub.Nav_Team.NAME}}: </view>
						<view class="subDep">{{sub.Nav_Class.NAME}}</view>
					</view>
					<view class="users-icon" @click="showUsers(sub.ID,sub.Nav_Team.NAME)">
						<uni-icons type="staff-filled" color="#007aff" size="24" />
					</view>
				</view>
			</uni-card>
		</view>
		<u-modal :show="showModal" :title="currTeam ? currTeam + '人员' : '班组人员'" @confirm="onConfirm" style="width: 1em;" confirm-text="关闭">
			<scroll-view scroll-y="true" class="user-list-wrap">
				<view class="user-list" v-for="(item, key) in userLists" :key="key">
					<view>
						{{item.Nav_Person.NAME}}|{{item.Nav_Person.CODE}}({{item.Nav_Person.Nav_Post?item.Nav_Person.Nav_Post.NAME:''}})
						<u-icon @click="delUser(item)" style="float: right;" name="trash" color="#ff4d4f"
							v-if="showDelete" size="21"></u-icon>
					</view>
				</view>
			</scroll-view>
		</u-modal>
		<u-modal :show="delUserItem!=undefined" @confirm="confirmDel" @cancel="cancelDel" showCancelButton
			title="确认删除？"></u-modal>
	</view>
</template>

<script>
	import {
		getScheduleData,
		getWorkShopData,
	} from '../../../../services/apply/FMServices/FMServices'
	import {
		extendFilterGroup,
		extendGroupRule,
		extendInclude,
		extendRule,
		initFilter,
		initFilterGroup
	} from '../../../../utils/common'
	import {
		getRequest,
	} from '../../../../services/apply/FOServices/FOServices';
	import request from '../../../../utils/request';
	export default {
		data() {
			return {
				showModal: false,
				currTeam: {},
				single: uni.$u.timeFormat(new Date(), 'yyyy-mm-dd'),
				workShops: [],
				workShopScheduling: [],
				userLists: [],
				delUserItem: undefined,
				currUserPersonId: uni.getStorageSync('appInfo').User.PERSON_ID,
				showDelete: false,
			}
		},
		onLoad() {
			this.loadWorkShopData()
		},
		methods: {
			delUser(item) {
				this.delUserItem = item;
			},
			cancelDel() {
				this.delUserItem = undefined
			},
			confirmDel() {
				let SchedulingId = this.delUserItem.DEPARTMENT_SCHEDULING_ID;
				request.get("/FM/DepartmentSchedulingDetail/Delete?id=" + this.delUserItem.ID).then(res => {
					if (res) {
						this.showUsers(SchedulingId)
						this.delUserItem = undefined;
					}
				})
			},
			loadWorkShopData() {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "NAME", 0)
				json.Level = -1
				json.Limit = 100
				getWorkShopData(json).then(res => {
					this.workShops = res || []
					this.loadScheduleData(res)
				})
			},
			loadScheduleData(deps) {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "NUM", 0)
				extendRule(json, 'DATE_TIME', 1, this.single)
				const tempGroup = initFilterGroup(false)
				deps.forEach(i => {
					extendGroupRule(tempGroup, 'DEPARTMENT_ID', 1, i.Node.ID)
				})
				extendFilterGroup(json, tempGroup)
				extendInclude(json, "Nav_Class")
				extendInclude(json, "Nav_Class.Nav_ClassDetail")
				extendInclude(json, 'Nav_DepartmentSchedulingDetail')
				extendInclude(json, 'Nav_Team.Nav_ChargePerson')
				json.Limit = 100
				getScheduleData(json).then(res => {
					res.forEach(r => {
						deps.forEach(d => {
							if (r.DEPARTMENT_ID === d.Node.ID) {
								r.DEPARTMENT_NAME = d.Node.NAME
							}
						})
					})
					const groupData = this.depGroup(res || [], e => e.DEPARTMENT_ID)
					this.workShopScheduling = groupData
				})
			},
			depGroup(arr, fn) {
				const obj = {};
				arr.forEach(item => {
					const key = JSON.stringify(fn(item));
					obj[key] = obj[key] || [];
					obj[key].push(item)
				});
				return Object.keys(obj).map(k => {
					return obj[k];
				})
			},
			showUsers(ID, NAME) {
				const orgId = uni.getStorageSync('orgId')
				const json = initFilter(orgId, "", "Nav_Person.NAME")
				if (NAME != undefined) {
					this.currTeam = NAME
				}
				extendInclude(json, "Nav_Person.Nav_Post")
				extendInclude(json, "Nav_DepartmentScheduling.Nav_Team")
				extendRule(json, 'DEPARTMENT_SCHEDULING_ID', 1, ID)
				getRequest(json, "/FM/DepartmentSchedulingDetail/OrderEntities").then(res => {
					if (res && res.length) {
						if (res[0].Nav_DepartmentScheduling.Nav_Team.CHARGE_PERSON_ID == this.currUserPersonId) {
							this.showDelete = true;
						} else {
							this.showDelete = false;
						}
						this.showModal = true
						this.userLists = res || []
					}
				})
			},
			onChangeTime(e) {
				this.single = e
				this.loadWorkShopData()
			},
			handleChangeDay(day) {
				const stamp = new Date(this.single).getTime() + 24 * 60 * 60 * 1000 * day
				this.single = uni.$u.timeFormat(stamp)
				this.loadWorkShopData()
			},
			onConfirm() {
				this.showModal = false
				this.currTeam = {}
				this.userLists = []
			}
		}
	}
</script>

<style scoped>
	.page-wrap {
		padding: 16px 16px 66px;
	}

	.date-picker {
		/*margin-bottom: 16px;*/
	}

	.date-select {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 16px;
	}

	.date-select .previous-day,
	.date-select .next-day {
		display: flex;
		font-size: 14px;
		width: 78px;
	}

	.date-select .next-day {
		justify-content: flex-end;
	}

	.date-select .previous-day text {
		margin-left: 4px;
	}

	.date-select .next-day text {
		margin-right: 4px;
	}

	.card {
		margin-bottom: 18px;
	}

	.custom-card-title {
		display: flex;
		border-bottom: 1px #EBEEF5 solid;
		flex-direction: row;
		align-items: center;
		padding: 10px;
		overflow: hidden;
		justify-content: space-between;
	}

	.custom-card-title .text {
		font-size: 18px;
		font-weight: bold;
	}

	.class-list {
		display: flex;
		margin-bottom: 12px;
		align-items: center;
		justify-content: space-between;
	}

	.class-info {
		display: flex;
		flex: 1;
	}

	.users-icon {
		width: 30px;
		text-align: right;
	}

	.class-info .name {
		flex: 1
	}

	.class-name {
		font-weight: 500;
		font-size: 16px;
		margin-right: 8px;
	}

	.user-list-wrap {
		max-height: 300px;
	}

	.user-list {
		margin-bottom: 15px;
	}
</style>