emergencyManagement/packageA/pages/duty/index.vue

<template>
	<view class="page-wrap">
		<view class="title">
			<uni-list-item :show-switch="true" title="按周排班">
				<template v-slot:footer>
					<view class="tip">
						<text>第</text>
						<view class="week">
							<uni-tag :text="`${week}`" size="mini" type="primary"></uni-tag>
						</view>
						<text>周</text>
						<text class="time">{{startDate}}至{{endDate}}</text>
					</view>
				</template>
			</uni-list-item>
		</view>
		<view class="selectbox">
			<uni-data-select  class="item-select year" v-model="year" :localdata="years" :clear="false" @change="getData"></uni-data-select>
			<uni-data-select  class="item-select" v-model="week" :localdata="weeks" :clear="false" @change="getData"></uni-data-select>
		</view>
		<uni-list>
			<uni-swipe-action  ref="itemSwipe">
				<uni-swipe-action-item :auto-close="true" v-for="(item,idx) in items" :key="item.id">				
					<template v-slot:right>
						<view class="slot-button">
							<view class="bt edit" @click="swipeHandle({type:1,item})"><text class="slot-button-text">编辑</text></view>
							<view class="bt del" @click="swipeHandle({type:2,item})"><text class="slot-button-text">删除</text></view>
						</view>
					</template>
					<uni-list-item 
						:title="item.accountName" 
						:note="item.remark" 
						thumb="/static/images/avatar.png"
						:rightText="item.posName" >					
						<template v-slot:footer>
							<div class="rtbox">
								<view class="rt">
									<view class="positionName">
										<uni-tag :text="item.positionName" size="mini" type="primary"></uni-tag>
									</view>
									<view class="posName">
										<uni-tag :text="item.posName" size="mini" type="success"></uni-tag>
									</view>
								</view>
							</div>
						</template>
					</uni-list-item>
				</uni-swipe-action-item>
			</uni-swipe-action>
		</uni-list>
		<div class="addbt" @click="onAdd">
			<view class="word">
				<uni-icons type="plusempty" size="30" color="#fff"></uni-icons>
			</view>
		</div>
		<AddForm ref="add" @success='getData' />
	</view>
</template>

<script>
	import AddForm from './components/AddForm.vue'
	import {getNumberOfWeeks,currentWeek,getDateByWeek,parseTime} from '@/libs/index.js'
	import dutyApi from '@/api/duty.js'
	export default {
		components:{
			AddForm
		},
		computed:{
			weeks(){				
				return Array.from({length:getNumberOfWeeks(this.year)},(_,i)=>{return{value:i+1,text:`${this.year}年第${i+1}周`}})				
			},
			years(){
				let year=this.year;
				return Array.from({ length: 101 }, (_, i) => {return {value:year+i - 20,text:`${year+i - 20}年`}})			
			},
			startDate(){
				let day=getDateByWeek(this.week-1,this.year)
				return 	parseTime(day,'{y}-{m}-{d}')		
			},
			endDate(){
				let day=new Date(getDateByWeek(this.week-1,this.year))
				let endDate=day.setDate(day.getDate()+6)
				return parseTime(endDate,'{y}-{m}-{d}')			
			}
		},
		data() {
			return {
				keywords:"",
				year:new Date().getFullYear(),
				dutyDate:'',
				week: currentWeek(),
				changeIndx:-1,
				items:[]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			getData(){
				dutyApi.getWeekRecordByList({
					year:this.year,
					week:this.week
				}).then((res)=>{
					this.items=res.data.map((item,idx)=>{return{...item,id:`${item.accountId}-${idx+1}`}})
				})
			},
			swipeHandle({type,item}){
				const self=this;
				let week=this.week;let year=this.year; 			
				if(type===1){
					this.$refs.add.show({type:'edit',params:{week,year,...item}})
				}else{
					uni.showModal({
						title: '提示',
						content: '是否确定删除',
						success: function (res) {
							if (res.confirm) {
								dutyApi.deleteWeekRecordById(year, week, item.accountId).then(()=>{
									uni.showToast({
										title:'删除成功！',
										icon:'none'
									})
									self.getData()
								})

							}
						}
					});
				}
			},
			onAdd(){
				this.$refs.add.show({type:'add',params:{week:this.week,year:this.year}})
			}
		}
	}
</script>

<style lang="scss" scoped>
.page-wrap{
	width: 710rpx;
	background-color: #fff;
	margin: 20rpx auto;
	box-shadow: 0 0 4px rgba(0,0,0,0.46);
	padding: 20rpx;
	box-sizing: border-box;
	border-radius: 4px;
	.tip{
		font-size: 28rpx;
		color: #666;
		.week{
			padding: 0 10rpx;
			display: inline-block;
		}
		.time{
			padding-left: 10rpx;
			font-size: 26rpx;
		}
	}
	.selectbox{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx;
		.item-select{
			width: 300rpx;
			&.year{
				width: 200rpx;
			}
		}
	}
	.addbt{
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		color: #fff;
		background-color: rgba(64,158,255,0.6);			
		box-shadow:0 0 10rpx rgba(0,0,0,0.6);
		position: fixed;
		right: 10rpx;
		bottom: 20%;
		z-index: 99;
		text-align: center;
		display: flex;
		justify-content: center;
		align-items: center;
		.word{
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			margin: 5rpx auto;
			font-size: 28rpx;
			letter-spacing: 2px;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
	.slot-button{
		width: 260rpx;
		height: 80%;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		color: #fff;
		margin-top: 7%;
		.bt{
			width: 50%;
			height: 100%;
			font-size: 30rpx;
			box-sizing: border-box;
			display: flex;
			justify-content: center;
			align-items: center;
			&.edit{
			    background-color:#007aff;
			}
			&.del{
				background-color:#F56C6C;
			}
		}
	}
	.rtbox{
		display: flex;
		align-items: center;
		justify-content: space-between;
		.rt{
			text-align: right;
		}
	}
	.delbt{
		padding: 20rpx;
		image{
			display: block;
			width: 30rpx;
			height: 30rpx;
		}
	}
}
</style>