yxk_h5_master/pages/task/acceptEvaluation.vue

<template>
	<view>
		<view class="myContainer redMi acceptTitle">验收评价</view>
		<view class="myContainer myContentBox">
			<view class="star_content">
				<view class="star_name">完成效率</view>
				<view class="star">
					<uni-rate :value="value1" active-color="#3382FF" color="#C1C1C1" @change="changeValue1"></uni-rate>
				</view>
			</view>
			<view class="star_content">
				<view class="star_name">完成质量</view>
				<view class="star">
					<uni-rate :value="value2" active-color="#3382FF" color="#C1C1C1"  @change="changeValue2"></uni-rate>
				</view>
			</view>
			<view class="star_content">
				<view class="star_name">工作态度</view>
				<view class="star">
					<uni-rate :value="value3" active-color="#3382FF" color="#C1C1C1" @change="changeValue3" ></uni-rate>
				</view>
			</view>
		</view>
		<view class="myContainer redMi acceptTitle">验收意见</view>
		<view class="myContainer myContentBox">
			<textarea placeholder="请输入验收意见" class="mytextarea" v-model="content"></textarea>
		</view>
		<view class="myContainer myContentBox">
			<view class="myItemBox">
				<view class="myItemBox_name">验收结果</view>
				<view class="myItemBox_value" @click="showSinglePicker" :value="result.level_label">{{result.level_label}}</view>
				<uni-icons type="arrowright" class="myarrowright"></uni-icons> 
			</view>
			<view class="myItemBox" @click="onShowDatePicker()">
				<view class="myItemBox_name">验收时间</view>
				<view >
					<view class="myItemBox_value">{{timevalue!=''?timevalue:"请选择时间"}}</view>
					<img src="../../static/img/dateIcon.png" class="riliIcon" />
				</view>
			</view>
		</view>
		<view class="fixMargin"></view>
		<view class="fixBottom">
			<button type="primary"  style="width: 100%;" @click="submit">确认验收</button>
		</view>
		<mx-datepicker type="datetime" :value="timevalue" :show="showPicker" @confirm="onSelected" @cancel="onSelected"></mx-datepicker>
		<mpvue-picker themeColor="#007AFF" ref="mpvuePicker" mode="selector" :deepLength="deepLength"
		 @onConfirm="pickerConfirm" :pickerValueArray="resultArray"></mpvue-picker>
		 <view class="goHome" @click='goMain("taskInfo")'>
		 	<img src="../../static/img/gohome.png">
		 </view>
	</view>
</template>

<script>
	import uniRate from "@/components/uni-rate/uni-rate.vue";
	import mpvuePicker from '@/components/mpvue-picker/mpvuePicker.vue';
	import uniIcons from "@/components/uni-icons/uni-icons.vue"
	import mxDatepicker from '@/components/mx-datepicker/mx-datepicker.vue'
	export default {
	    components: {uniRate,uniIcons,mxDatepicker,mpvuePicker},
		data(){
			return{
				id:'',
				showPicker: false,
				timevalue: '',
				value1:0,
				value2:0,
				value3:0,
				content:'',
				deepLength:1,
				resultArray:[],
				result:{
					level_value:'',
					level_label:''
				},
				pickerValueDefault:[0]
			}
		},
		onLoad(option) {
			var _this = this;
			let d = new Date();
			this.id = option.id;
			if (this.id == undefined) {
				uni.reLaunch({
					url: 'eqRepair'
				});
				return false;
			}
			this.timevalue=d.getFullYear()+'-'+this.formatDate(d.getMonth()+1)+"-"+this.formatDate(d.getDate())+' '+this.formatDate(d.getHours())+":"+this.formatDate(d.getMinutes())
			
			//初始化获取 任务等级数据字典。
			this.$http.request({
				 url: '/apis/dict/getDictsByType',
				 params: {
				   type: 'acceptance_result'
				 },
			}).then(res=>{
				if(res.statusCode == '200'){
					var useType = res.data.datas;
					for (let i = 0; i < useType.length; i++) {
					    var myVal=
					    	{
					    		'label': useType[i].name,
					    		'value': useType[i].id
					    	}
					    _this.resultArray.push(myVal);
					}
					if(!_this.result.level_value){
						_this.result.level_value = useType[0].id;
						_this.result.level_label = useType[0].name;
					}
				}
			}).catch(err=>{
				console.log(err);
			});
		},
		methods:{
			formatDate(v){
				v=v.toString();
				if(v.length<2){
					return '0'+v;
				}else{
					return v;
				}
			},
			changeValue1(v){
				this.value1=v.value;
			},
			changeValue2(v){
				this.value2=v.value;
			},
			changeValue3(v){
				this.value3=v.value;
			},
			pickerConfirm(e){
				this.result.level_label = e.label;
				this.result.level_value = e.value[0]; 
			},
			showSinglePicker() {
				this.pickerValueDefault = [0];
				this.$refs.mpvuePicker.show();
			},
			bindPickerChange: function(e) {
				this.index = e.target.value
			},	
			onShowDatePicker() { //显示
				this.showPicker = true;
			},
			onSelected(e) { //选择
				this.showPicker = false;
				if (e) {
					this.timevalue = e.value;
					//选择的值
					// console.log('value => ' + e.value);
					//原始的Date对象
					// console.log('date => ' + e.date);
				}
			},
			submit(){
				
				if(this.value1==0||this.value2==0||this.value3==0){
					uni.showToast({
						title: '请填写验收评价',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				if(this.content.trim()==''){
					uni.showToast({
						title: '请填写验收意见',
						icon: 'none',
						duration: 2000
					});
					return false;
				}
				var json_ = {
					taskid: this.id,
					status: this.result.level_value,
					solution:this.content,
					// checkTime:this.timevalue,  //pc端暂时没有用到。所以这里先注释掉。界面暂时不变。
					completeRate:this.value1,
					completeQuality:this.value2,
					workState:this.value3
				}
				
				var _this = this;
				this.$http.request({
					url: '/apis/taskMain/checkSave',
					params: json_,
				}).then(res => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '提交成功',
							icon: 'none',
							duration: 1000
						});
						setTimeout(function(){
							uni.navigateTo({
							    url: "taskDetail?id="+_this.id
							});
						},1000)
						
					}else{
						uni.showToast({
							title: res.data.msg,
							icon: 'none',
							duration: 2000
						});
					}
				}).catch(err => {});
			}
		}
	}
</script>

<style scoped>
	
	.mytextarea{
		width: 100%;
		height: 280upx;
		padding: 20upx;
		box-sizing: border-box;
		font-size: 28upx;
	}
</style>