zhgdyunapp/pages/projectEnd/trainPlan/addPlan.vue

<template>
	<!-- 新增问题 -->
	<view class="addIssue">
		<headers :showBack="true" :themeType="true">
			<view class="headerName">
				培训计划新增
			</view>
		</headers>
		<view class="content">
			<view class="type flex" v-if="typeCheck == 'type1'">
				<view class="name"><text class="star">*</text>培训计划名称：</view>
				<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent"
					@input='trainPlanNameTextarea' :value="form.name" placeholder="请输入"></textarea>
			</view>
			<view class="type flex" v-if="typeCheck == 'type1'">
				<view class="name"><text class="star">*</text>科目类型：</view>
				<picker @change="(e)=>bindPickerChange(e,1)" :value="kmTypeIndex" class="picker"
					:range="kmTypeList" range-key="name">
					<view class="uni-input uni-select cl" v-if="form.subjectId==''">
						请选择 <image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
					<view class="uni-input uni-select" v-else>
						{{kmTypeList[kmTypeIndex].name}}
						<image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
				</picker>
			</view>
			<view class="type flex" v-if="typeCheck == 'type1'">
				<view class="name"><text class="star">*</text>教育主题：</view>
				<textarea class="textarea" maxlength="-1" placeholder-class="cl" name="inspectContent"
					@input='supplementTextarea' :value="form.title" placeholder="请输入"></textarea>
			</view>
			<view class="type flex" v-if="typeCheck == 'type1'">
				<view class="name">培训课件：</view>
				<picker @change="(e)=>bindPickerChange(e,2)" :value="trainKjIndex" class="picker"
					:range="trainKjList" range-key="courseName">
					<view class="uni-input uni-select cl" v-if="form.courseId==''">
						请选择 <image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
					<view class="uni-input uni-select" v-else>
						{{trainKjList[trainKjIndex].courseName}}
						<image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
				</picker>
			</view>

			<view class="type flex" v-if="typeCheck == 'type1'">
				<view class="name">考试试卷：</view>
				<picker @change="(e)=>bindPickerChange(e,3)" :value="examSjIndex" class="picker"
					:range="examSjList" range-key="name">
					<view class="uni-input uni-select cl" v-if="form.examPaperId==''">
						请选择 <image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
					<view class="uni-input uni-select" v-else>
						{{examSjList[examSjIndex].name}}
						<image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
				</picker>
			</view>
			<view class="type flex">
				<view class="name"><text class="star">*</text>培训开始时间：</view>
				<dateTimePiccker :placeholder="'请选择'" :start="startTime" fields="second" :default-value="form.trainBeginTime"
					@change="bindPickerChange($event,'startTime')" class="dateTimePiccker">
				</dateTimePiccker>
				<!-- <picker @change="(e)=>bindPickerChange(e,4)" mode="date" :value="form.inspectTime" class="picker">
					<view class="uni-input uni-select cl" v-if="form.inspectTime===''">
						请选择 <image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
					<view class="uni-input uni-select" v-else>{{form.inspectTime}}
						<image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
				</picker> -->
			</view>

			<view class="type flex">
				<view class="name"><text class="star">*</text>培训结束时间：</view>
				<dateTimePiccker :placeholder="'请选择'" :start="startTime" fields="second" :default-value="form.trainEndTime"
					@change="bindPickerChange($event,'endTime')" class="dateTimePiccker">
				</dateTimePiccker>
				<!-- <picker @change="(e)=>bindPickerChange(e,4)" mode="date" :value="form.inspectTime" class="picker">
					<view class="uni-input uni-select cl" v-if="form.inspectTime===''">
						请选择 <image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
					<view class="uni-input uni-select" v-else>{{form.inspectTime}}
						<image class="icon-down" src="/static/icon-down-black.png"></image>
					</view>
				</picker> -->
			</view>
		</view>
		<view class="addSaveBtn" @click="addSaveBtn">下一步</view>
	</view>
</template>

<script>
	import dateTimePiccker from '@/components/dateTimePicker/index.vue'
	import {
		dateformat
	} from "@/utils/tool.js"
	export default {
		components: {
			dateTimePiccker

		},
		data() {
			return {
				isShowPicker: true,
				startTime: this.getDate({
					format: true,
				}),
				startTime2: this.getDate({
					format: true,
				}),
				checkedTab: 'type1',
				imgList: {},
				openImg: false,
				base64Image: '',
				imgIndex: -1,
				pointList: [],
				location: {
					left: '0',
					top: '0'
				},
				x: 0,
				y: 0,
				imgDialogUrlSu: false,
				imgDialogUrlText: "编辑隐患点",
				imgDialog: false,
				imgDialogUrl: [],
				pageTitle: '新增检查',
				projectSn: '',
				checkType: 1, //分包商类型   1专业分包  6劳务分包
				kmTypeIndex: 0,
				kmTypeList: [{
					name: '数学',
					value: 1
				}],
				trainKjIndex: 0,
				trainKjList: [{
					name: '数学',
					value: 1
				}],
				examSjIndex: 0,
				examSjList: [{
					name: '数学',
					value: 1
				}],
				form: {
					name: "",
					subjectId: "",
					title: "",
					courseId: "",
					examPaperId: "",
					trainBeginTime: "",
					trainEndTime: ""
				},
				checkPointName: '',
				issueList: [], //问题分类 || 问题描述
				issueName: '',
				issueGradeList: [{
						name: '一级',
						value: 1
					},
					{
						name: '二级',
						value: 2
					},
					{
						name: '三级',
						value: 3
					},
					{
						name: '四级',
						value: 4
					},
				], //问题等级
				issueGradeIndex: 0,
				urgencyList: [{
						name: '一般',
						value: 1
					},
					{
						name: '严重',
						value: 2
					},
					{
						name: '紧要',
						value: 3
					},
				], //紧急程度
				urgencyIndex: 0,
				personUpdateList: [], // 人员列表-整改人
				personList: [], //人员列表  -- 检查人、整改人、复查人、核验人、通知人
				inspectManIndex: null, //检查人
				changePeopleIndex: null, //整改人
				verifyManIndex: null, //核验人
				reviewIndex: null, //复查人
				notifier: '', //通知人
				unitDialog: false, //分包商弹窗
				subpackageLsit: [], //分包商数据列表
				videoFileList: [],
				imgFileList: [],
				mapImgList: [],
				basicInfo: {},
				selectIndex: null,
				userInfo: '',
				typeCheck: 'type1', // 类型 type1为质量问题  type2为排查记录
				listData: [], //分部工程
				subListData: [], //分项工程
				subsectionIndex: -1, //分部工程
				subentryIndex: -1, ////分项工程
				unitEnterpriseId: "",
				taskId: '', //任务ID
				itemId: '', // 任务子ID
				defaultAuditPerson: "",
				areaData: {}
			}
		},
		onLoad(option) {
			this.pageTitle = option.type == 'add' ? '新增检查' : '编辑检查';
			this.projectSn = JSON.parse(uni.getStorageSync('projectDetail')).projectSn;
			this.userInfo = JSON.parse(uni.getStorageSync('userInfo'));
			this.getKmListFn();
			this.getTrainListFn();
			this.getExamSjListFn();
		},


		methods: {
			// 考试试卷列表
			getExamSjListFn(){
				let that = this;
				this.sendRequest({
					url: 'exam/paper/list',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						if (res.code == 200) {
							that.examSjList = res.result
						}
					}
				})
			},
			// 培训课件列表
			getTrainListFn(){
				let that = this;
				this.sendRequest({
					url: 'exam/course/list',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						if (res.code == 200) {
							that.trainKjList = res.result
						}
					}
				})
			},
			// 科目列表
			getKmListFn(){
				let that = this;
				this.sendRequest({
					url: 'exam/subject/list',
					method: 'post',
					data: {
						projectSn: this.projectSn
					},
					success: res => {
						if (res.code == 200) {
							that.kmTypeList = res.result
						}
					}
				})
			},
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
				if (type === 'start') {
					year = year;
				} else if (type === 'end') {
					// year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			},

			trainPlanNameTextarea(e) {
				this.form.name = e.detail.value
			},
			//补充说明
			supplementTextarea(e) {
				this.form.title = e.detail.value
			},
			//下拉选择回显
			bindPickerChange(e, type) {
				console.log(e)
				if(!e) return;
				//type ==1 问题等级;2紧急情况;3检查人;4 检查时间;5整改时限; 6整改人; 7复查人; 8核验人;
				if (type == 1) {
					this.kmTypeIndex = e.detail.value;
					this.form.subjectId = this.kmTypeList.length?this.kmTypeList[e.detail.value].id:"";
				} else if (type == 2) {
					this.trainKjIndex = e.detail.value;
					this.form.courseId = this.trainKjList.length?this.trainKjList[e.detail.value].id:"";
				} else if (type == 3) {
					this.examSjIndex = e.detail.value;
					this.form.examPaperId = this.examSjList.length?this.examSjList[e.detail.value].id:"";
				} else if (type == 'startTime') {
					this.form.trainBeginTime = e.f3;
				} else if (type == 'endTime') {
					this.form.trainEndTime = e.f3;
				}

			},
			//新增保存
			async addSaveBtn() {
				if(!this.form.name){
					uni.showToast({
						title: '请输入培训计划名称',
						icon: 'none'
					})
					return
				}
				if(!this.form.subjectId){
					uni.showToast({
						title: '请选择科目类型',
						icon: 'none'
					})
					return
				}
				if(!this.form.title){
					uni.showToast({
						title: '请输入教育主题',
						icon: 'none'
					})
					return
				}
				if(!this.form.courseId && !this.form.examPaperId){
					uni.showToast({
						title: '请选择至少选择培训课件或考试试卷一种',
						icon: 'none'
					})
					return
				}
				if(!this.form.trainBeginTime){
					uni.showToast({
						title: '请选择培训开始时间',
						icon: 'none'
					})
					return
				}
				if(!this.form.trainEndTime){
					uni.showToast({
						title: '请选择培训结束时间',
						icon: 'none'
					})
					return
				}
				let pageData = {
					...this.form
				}
				uni.navigateTo({
					url: './selectPerson?pageData=' + JSON.stringify(pageData)
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.point {
		height: 20px;
		width: 20px;
		position: absolute;
	}

	.flex {
		display: flex;
		align-items: center;
	}

	.content {
		width: 100%;
		box-sizing: border-box;
		padding: 20px 30rpx;
	}

	.type {
		font-size: 30rpx;
		line-height: 40px;
		margin-bottom: 8px;
		/* border-bottom: 1px solid rgba(194, 194, 194, 0.2); */
	}

	.type .name {
		margin-right: 6px;
		width: 240rpx;
		text-align: right;
		font-family: Source Han Sans CN, Source Han Sans CN;
		font-weight: 400;
		font-size: 28rpx;
		color: #272D45;
	}

	.radio-wrap {
		display: flex;
		align-items: center;

		.radio {
			margin-right: 20px;
		}
	}

	.accessory {
		width: 100%;
		height: 70px;
		padding: 0 10px;
		box-sizing: border-box;
	}

	.accessoryImg {
		width: 110rpx;
		height: 60px;
		margin-right: 8px;
	}

	.picker {
		width: 70%;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 0px 30rpx;
		box-sizing: border-box;
		border-radius: 5px;
	}

	.uni-input {
		line-height: 32px;
	}

	.textarea {
		width: calc(79% - 32px);
		border-radius: 5px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 50px;
	}

	.inpuStyle {
		width: calc(80% - 35px);
		border-radius: 20px;
		border: 1px solid rgba(42, 43, 91, 0.3);
		padding: 8px 15px;
		box-sizing: border-box;
		height: 35px;
		color: #000;
	}

	.cl {
		font-size: 30rpx;
		border-radius: 5px;
	}


	.imgBox_wrap {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10px;
		width: 75%;
	}

	.imgBox {
		width: 60px;
		height: 60px;
		display: inline-flex;
		position: relative;
		margin-right: 15px;
		margin-bottom: 8px;

		.img {
			width: 100%;
			height: 100%;
			border-radius: 10px;
		}

	}

	.addImgBox {
		border: 1px solid rgba(42, 43, 91, 0.1);
		background-color: #f6f5f8;
		width: 60px;
		height: 60px;
		display: inline-flex;
		align-items: center;
		justify-content: center;
		border-radius: 10px;
		font-size: 12px;

		.icon-add {
			width: 18px;
			height: 18px;
		}
	}

	.checkName {
		border-bottom: 2px solid #4181FE;
		color: #4181FE;
	}

	.noCheckName {
		padding-top: 4px;
	}

	.unitList {
		margin: 10px 0;
		font-size: 30rpx;

		.title {
			margin-bottom: 10px;
		}

		.list_val {
			padding: 8px 10px;
		}
	}

	.bg_999 {
		background-color: rgba(153, 153, 153, 0.1);
	}

	.ellipsis {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
	}

	.addSaveBtn {
		margin: 30px auto;
		width: 60%;
		padding: 10px 0;
		text-align: center;
		background-color: #4181FE;
		color: #fff;
		font-size: 34rpx;
		border-radius: 30px;
		letter-spacing: 2px;
		position: fixed;
		bottom: 5%;
		left: 20%;
	}

	.addSaveBtn:active {
		background-color: rgba(65, 129, 254, 0.8);
	}
	.dateTimePiccker {
		border: 1px solid #ccc;
		border-radius: 5px;
		width: calc(79% - 32px);
		padding-left: 10px;
	}
</style>