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 background-survey-row adfacjb" v-if="type==2" @click="openBackgroundSurvey">
			<view>
				<view class="box-title">团队背景调研</view>
				<view class="background-survey-tip">随本次PERILL评估附带，发布前必须完成</view>
			</view>
			<view class="background-survey-status adfac" :class="{completed:backgroundSurveyStatus==='COMPLETED'}">
				<text>{{backgroundSurveyStatus==='COMPLETED'?'已完成':'待完成'}}</text>
				<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" :team="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:'',
				backgroundSurveyId:'',
				backgroundSurveyStatus:'DRAFT',
			}
		},
		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}日`
				}
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					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;
					if(this.$refs.cnbRef) this.$refs.cnbRef.value = this.dto.answerSetting;
					this.teamName = res.data.teamName;
					this.loadCoachBackgroundSurvey()
				})
			},
			async loadCoachBackgroundSurvey(){
				if(!this.teamQuestionnaireId) return
				try {
					const { data:res } = await this.$api.get(
						`/core/background/survey/coach/team-questionnaire/${this.teamQuestionnaireId}`)
					if(res.code!==0) throw new Error(res.msg)
					this.backgroundSurveyId = res.data.id
					this.backgroundSurveyStatus = res.data.status
				} catch(error) {
					this.backgroundSurveyStatus = 'DRAFT'
				}
			},
			openBackgroundSurvey(){
				if(!this.dto.teamId) return this.$showToast('请先选择团队')
				const query = this.isEdit
					? `mode=coach&teamQuestionnaireId=${encodeURIComponent(this.teamQuestionnaireId)}`
					: `mode=coach&teamId=${encodeURIComponent(this.dto.teamId)}&surveyId=${encodeURIComponent(this.backgroundSurveyId || '')}`
				uni.navigateTo({
					url:`/pagesPublish/backgroundSurvey?${query}`,
					events:{
						backgroundSurveyReady:data=>{
							this.backgroundSurveyId = data.surveyId
							this.backgroundSurveyStatus = data.status
						},
						backgroundSurveyCompleted:data=>{
							this.backgroundSurveyId = data.surveyId
							this.backgroundSurveyStatus = data.status
						}
					}
				})
			},
			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.filter(l=>l.hierarchy&&l.scale);
					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 || ''}&questionnaireId=${this.questionnaireId || ''}&backgroundSurveyId=${this.backgroundSurveyId || ''}&type=${this.type}`
				})
			},
			addTeam(){
				uni.navigateTo({
					url:'/pagesPublish/fillTeamInfo?type=add&qtype=team&questionnaireId='+this.questionnaireId,
					events:{
						saveTeamInfo: data =>{
							if(data && data.teamId){
								this.dto.teamId = data.teamId
								this.teamName = data.teamName || '新建团队'
								this.backgroundSurveyId = ''
								this.backgroundSurveyStatus = 'DRAFT'
							}
							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.filter(l=>l.hierarchy&&l.scale);
								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){
				if(!item) return this.$showToast('请选择团队')
				if(this.dto.teamId != item.id){
					this.backgroundSurveyId = ''
					this.backgroundSurveyStatus = 'DRAFT'
				}
				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;
				params.answerSetting = 1;

				if(!params?.teamId) return this.$showToast('请选择团队')
				if(this.type==2 && this.backgroundSurveyStatus!=='COMPLETED'){
					return uni.showModal({
						title:'团队背景调研未完成',
						content:'为了帮助教练更好地对团队现状做评估，请先完成团队背景调研',
						showCancel:false,
						confirmColor:'#199C9C'
					})
				}
				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
					params.backgroundSurveyId = this.backgroundSurveyId
					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;
		}

		.background-survey-row{
			padding:32rpx 24rpx;
		}
		.background-survey-tip{
			font-size:24rpx;
			color:#8A9BA8;
			line-height:34rpx;
			margin-top:18rpx;
		}
		.background-survey-status{
			font-size:28rpx;
			color:#FD4F66;
			flex:none;
			&.completed{
				color:#199C9C;
			}
			image{
				width:36rpx;
				height:36rpx;
				margin-left:10rpx;
			}
		}
	}
</style>