ChuangHengWx/pagesHome/questionnaireEdit.vue

<template>
	<view class="default_page" :style="{'min-height':h+'px', 'padding-top':mt+'px'}">
		<cus-header :title='title'></cus-header>
		<view class="box adfacjb" style="padding: 32rpx 24rpx 40rpx;">
			<view class="box-left">
				<view class="box-title">问卷名称</view>
				<view class="box-tip" style="margin-top: 32rpx;">{{questionnaireName}}</view>
			</view>
			<view class="box-right adfac" @click="handlePreview">
				<text>预览</text>
				<image :src="imgBase+'my_arrow_right.png'"></image>
			</view>
		</view>
		<view class="box" style="padding: 32rpx 24rpx;" @click="showTeam">
			<view class="box-title">选择团队</view>
			<view class="box-team adfacjb" @click="showTeam">
				<view class="box-tip">{{teamName}}</view>
				<image :src="imgBase+'my_arrow_right.png'"></image>
			</view>
		</view>
		<view class="box" style="padding: 32rpx 24rpx 0;">
			<view class="box-title">问卷作答时间设置</view>
			<view class="box-time adfacjb" style="margin-top: 32rpx;" @click="startShow=true">
				<view class="box-time-left">开始时间</view>
				<view class="box-time-right adfac">
					<text>{{dto.startTime}}</text>
					<image :src="imgBase+'my_arrow_right.png'"></image>
				</view>
			</view>
			<view class="box-time adfacjb" @click="endShow=true">
				<view class="box-time-left">截止时间</view>
				<view class="box-time-right adfac">
					<text>{{dto.endTime}}</text>
					<image :src="imgBase+'my_arrow_right.png'"></image>
				</view>
			</view>
		</view>
		<view class="box" style="padding: 32rpx 24rpx 18rpx;">
			<view class="box-title adfacjb">
				<text>限制每位用户提交次数</text>
				<u-switch v-model="limit" activeColor="#199C9C" size="38"></u-switch>
			</view>
			<view class="box-num adfacjb" v-if="limit">
				<view class="box-num-title">可提交次数</view>
				<view class="box-num-right">
					<cus-number-box ref="cnbRef" :min="1" :number="dto.answerSetting" @valChange="valChange"></cus-number-box>
				</view>
			</view>
		</view>
		<view class="box" style="padding: 30rpx 24rpx 0;" v-if="type==2&&!isEdit">
			<view class="box-title adfacjb" style="margin-bottom: 21rpx;">
				<text>团队人员</text>
				<view class="box-add" @click="addTeamUser">+ 添加</view>
			</view>
			<view class="box-user">
				<view class="box-user-item adfacjb" v-for="(item,index) in dto.memberList" :key="index">
					<view class="box-user-item-left">
						<view class="box-user-item-left-name adfac">
							<text>{{item.realName}}</text>
							<view class="type">{{item.categoryName}}</view>
						</view>
						<view class="box-user-item-left-email">{{item.email}}</view>
					</view>
					<image class="box-user-item-right" :src="imgBase+'icon_delete.png'" @click="deleteTeamUser(item,index)"></image>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="zt_btn" @click="confirmPublish">{{confirmText}}</view>
		</view>
		<cus-select :show="teamShow" :list="teamList" :addShow="true" 
			@close="teamShow=false" @addTeam="addTeam" @confirmTeam="confirmTeam"></cus-select>
		<u-datetime-picker ref="datetimePicker1" title="开始时间" :minDate="minStartTime" itemHeight="88" :show="startShow" mode="datetime" :formatter="formatter" @cancel="startShow=false" @confirm="startConfirm"></u-datetime-picker>
		<u-datetime-picker ref="datetimePicker2" title="结束时间" :minDate="minEndTime" itemHeight="88" :show="endShow" mode="datetime" :formatter="formatter" @cancel="endShow=false" @confirm="endConfirm"></u-datetime-picker>
	</view>
</template>

<script>
	import CusNumberBox from '@/components/CusNumberBox/index.vue'
	import CusSelect from '@/components/CusSelect/index.vue'
	export default {
		components:{ CusNumberBox, CusSelect },
		data(){
			return {
				id:'',
				type:'',
				title:'编辑问卷',
				confirmText:'保存',
				questionnaireId:'',
				questionnaireName:'',
				limit:true,
				teamShow:false,
				startShow:false,
				endShow:false,
				dto:{
					memberList:[]
				},
				teamName:'请选择团队',
				teamList:[],
				minStartTime:new Date().getTime(),
				minEndTime:new Date().getTime(),
				isEdit:'',
			}
		},
		onReady() {
			this.$refs.datetimePicker1.setFormatter(this.formatter)
			this.$refs.datetimePicker2.setFormatter(this.formatter)
		},
		onLoad(options) {
			this.teamQuestionnaireId = options.teamQuestionnaireId;
			this.questionnaireId = options.questionnaireId;
			this.questionnaireName = options.questionnaireName;
			this.type = options.type;
			this.isEdit = options.isEdit;
			if(this.type==2){
				this.title = '发布问卷';
				this.confirmText = '确认发布';
				this.dto.answerSetting = 1;
				if(this.isEdit){
					this.title = '编辑问卷';
					this.getDetail()
				}
			}else if(this.type==1) this.getDetail()
		},
		methods:{
			formatter(type, value) {
				if (type === 'year') {
					return `${value}年`
				}
				if (type === 'month') {
					return `${value}月`
				}
				if (type === 'day') {
					return `${value}日`
				}
				return value
			},
			valChange(e){
				this.dto.answerSetting = e;
			},
			async getDetail(){
				this.$api.get('/core/team/questionnaire/'+this.teamQuestionnaireId).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.dto = {...this.dto,...res.data}
					this.questionnaireId = this.dto.questionnaireId;
					this.$refs.cnbRef.value = this.dto.answerSetting;
					this.teamName = res.data.teamName;
				})
			},
			showTeam(){
				this.teamShow = true;
				this.$api.get('/core/user/team/page',{
					page:1,
					limit:-1,
					coachId:JSON.parse(uni.getStorageSync('userInfo')).id
				}).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.teamList = res.data.list;
					this.teamList.forEach(t=>t.name=t.teamName)
				})
			},
			handlePreview(){
				uni.navigateTo({
					url:`/pagesPublish/questionnairePreview?questionnaireName=${this.questionnaireName}&teamQuestionnaireId=${this.teamQuestionnaireId}&type=${this.type}`
				})
			},
			addTeam(){
				uni.navigateTo({
					url:'/pagesPublish/fillTeamInfo?type=add&questionnaireId='+this.questionnaireId,
					events:{
						saveTeamInfo: data =>{
							this.$api.get('/core/user/team/page',{
								page:1,
								limit:-1,
								coachId:JSON.parse(uni.getStorageSync('userInfo')).id
							}).then(({data:res})=>{
								if(res.code!==0) return this.$showToast(res.msg)
								this.teamList = res.data.list;
								this.teamList.forEach(t=>t.name=t.teamName)
							})
						}
					}
				})
			},
			addTeamUser(){
				uni.navigateTo({
					url:'/pagesMy/teamUser?type=select',
					success: (res) => {
						res.eventChannel.emit('acceptDataFromOpenerPage', { data: '来自A页面的初始数据' });
					},
					events:{
						selectUserConfirm: data => {
							this.dto.memberList = data;
						}
					}
				})
			},
			deleteTeamUser(item,index){
				this.dto.memberList.splice(index,1);
			},
			confirmTeam(item){
				this.teamName = item.teamName;
				this.dto.teamId = item.id;
				this.teamShow = false;
			},
			startConfirm(e){
				this.dto.startTime = new Date(e.value).Format('yyyy-MM-dd hh:mm:ss');
				this.minEndTime = e.value;
				this.startShow = false;
			},
			endConfirm(e){
				this.dto.endTime = new Date(e.value).Format('yyyy-MM-dd hh:mm:ss');
				this.endShow = false;
			},
			confirmPublish(){
				let params = JSON.parse(JSON.stringify(this.dto));
				params.coachId = JSON.parse(uni.getStorageSync('userInfo')).id;
				params.type = this.type;
				
				if(!params?.teamId) return this.$showToast('请选择团队')
				if(!params?.startTime) return this.$showToast('请选择开始时间')
				if(!params?.endTime) return this.$showToast('请选择结束时间')
				if(params?.memberList.length==0&&!this.isEdit) return this.$showToast('请选择团队人员')
				
				let url = '/core/team/questionnaire';
				let method = 'put';
				if(this.type==2){
					url = '/core/team/questionnaire/publish';
					method = 'post'
					params.questionnaireId = this.questionnaireId
					if(this.isEdit){
						url = '/core/team/questionnaire';
						method = 'put';
					}
				}
				this.$api[method](url,params).then(({data:res})=>{
					if(res.code!==0) return this.$showToast(res.msg)
					this.$showToast('操作成功')
					setTimeout(()=>{
						if(this.type==2){
							if(this.isEdit) return uni.navigateBack()
							uni.navigateTo({ url:'/pagesPublish/publishResult?title='+this.questionnaireName+'&teamQuestionnaireId='+res.data })
						}else uni.navigateBack()
					},1500)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.default_page{
		padding: 0 24rpx 182rpx;
		box-sizing: border-box;
		
		.box{
			background: #FFFFFF;
			box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
			border-radius: 24rpx;
			margin-top: 20rpx;
			overflow: hidden;
			
			&-title,&-title>text{
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 32rpx;
				color: #002846;
				line-height: 32rpx;
			}
			&-tip{
				font-family: PingFangSC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #667E90;
				line-height: 32rpx;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
			}
			
			&-left{
				width: calc(100% - 150rpx);
			}
			&-right{
				&>text{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 26rpx;
					color: #33A7A7;
					line-height: 32rpx;
				}
				&>image{
					width: 32rpx;
					height: 32rpx;
					margin-left: 10rpx;
				}
			}
			&-team{
				margin-top: 31rpx;
				&>image{
					width: 36rpx;
					height: 36rpx;
				}
			}
			&-time{
				padding: 33rpx 0;
				box-shadow: inset 0rpx -1rpx 0rpx 0rpx rgba(229,231,235,0.5);
				&-left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 32rpx;
				}
				&-right{
					&>text{
						font-family: PingFangSC, PingFang SC;
						font-weight: 400;
						font-size: 30rpx;
						color: #667E90;
						line-height: 32rpx;
					}
					&>image{
						width: 36rpx;
						height: 36rpx;
						margin-left: 10rpx;
					}
				}
			}
			&-num{
				margin-top: 65rpx;
				&-left{
					font-family: PingFangSC, PingFang SC;
					font-weight: 400;
					font-size: 30rpx;
					color: #002846;
					line-height: 32rpx;
				}
			}
			&-add{
				width: 120rpx;
				height: 54rpx;
				border-radius: 27rpx;
				border: 1rpx solid #33A7A7;
				font-family: PingFang-SC, PingFang-SC;
				font-weight: bold;
				font-size: 24rpx;
				color: #33A7A7;
				line-height: 54rpx;
				text-align: center;
			}
			&-user{
				&-item{
					box-shadow: inset 0rpx -1rpx 0rpx 0rpx #EFEFEF;
					border-radius: 24rpx;
					padding: 30rpx 0 36rpx;
					&-left{
						&-name{
							text{
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 30rpx;
								color: #002846;
								line-height: 32rpx;
							}
							.type{
								background: #FFF7DC;
								border-radius: 21rpx;
								margin-left: 20rpx;
								padding: 5rpx 16rpx;
								font-family: PingFangSC, PingFang SC;
								font-weight: 400;
								font-size: 22rpx;
								color: #BA9B31;
								line-height: 30rpx;
								text-align: center;
							}
						}
						&-email{
							font-family: PingFangSC, PingFang SC;
							font-weight: 400;
							font-size: 28rpx;
							color: #667E90;
							line-height: 28rpx;
							margin-top: 20rpx;
						}
					}
					&-right{
						width: 36rpx;
						height: 36rpx;
					}
				}
			}
		}
		
		.bottom{
			width: 100%;
			height: 162rpx;
			background: #FFFFFF;
			padding: 20rpx 50rpx;
			box-sizing: border-box;
			position: fixed;
			left: 0;
			bottom: 0;
			z-index: 888;
		}
	}
</style>