uniProject/pages/admin/Jiazheng/banzhengXinxi.vue

<template>
	<view class="jz-content-box">
		<view class="content-body-box">
			<view v-if="status =='add'" class="bzsm-tip-box form-top-margin">
				<view class="title-btn-box">
					<view class="phone-line-title">说明</view>
					<view @click="resetFun" class="reset-btn">重置</view>
				</view>
				<view class="tip-content-box">1.如果不需要办理证书，可直接点击保存按钮。</view>
				<view class="tip-content-box">2.点击重置按钮，只重置办证信息，其他信息不改变。</view>
			</view>
			<!-- 报证机构（picker 实现下拉选择） -->
			<view class="form-label-select form-top-margin">
				<view class="phone-form-label"><text class="form-label-require">*</text>报证机构</view>
				<picker :disabled="(status =='edit'&&localStatus=='')" mode="selector" :range="jigouNames"
					@change="jigouChange" class="select-picker-box">
					<view class="form-radio-select" :class="{'form-radio-disabled': (status =='edit'&&localStatus=='')}">
						<view>{{ formData.baozhengJigouName || '请选择报证机构' }}</view>
						<icon></icon>
					</view>
				</picker>
			</view>
			<!-- 职业名称（picker 实现下拉选择） -->
			<view class="form-label-select">
				<view class="phone-form-label"><text class="form-label-require">*</text>职业名称</view>
				<picker mode="selector" :disabled="isJgFlag" :style="isJgFlag?'color:#999':''" :range="zhiyeNames"
					range-key="name" @change="zhiyeChange" class="select-picker-box">
					<view class="form-radio-select">
						<view>{{ formData.zhiyeName || '请选择职业名称' }}</view>
						<icon></icon>
					</view>
				</picker>
			</view>
			<!-- 职业等级（picker 实现下拉选择） -->
			<view class="form-label-select">
				<view class="phone-form-label"><text class="form-label-require">*</text>职业等级</view>
				<picker mode="selector" :disabled="isZyFlag" :style="isZyFlag?'color:#999':''" :range="zhiyeLevels"
					@change="levelChange" class="select-picker-box">
					<view class="form-radio-select">
						<view>{{ formData.zhiyeLevelName || '请选择等级' }}</view>
						<icon></icon>
					</view>
				</picker>
			</view>

			<view v-if="formData.banzhengInfoFlag" class="form-label-select">
				<view class="phone-form-label"><text class="form-label-require">*</text>参训时间</view>
				<uni-datetime-picker class="form-radio-picker" v-model="formData.canxunshijian" type="date"
					@change="canxunShijianChange">
					<view class="form-radio-select">
						<view>{{formData.canxunshijian}}</view>
						<icon></icon>
					</view>
				</uni-datetime-picker>
			</view>

			<view v-if="formData.banzhengInfoFlag" class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require">*</text>实操成绩</view>
				<input v-model="formData.shicaochengji" placeholder="请填写实操成绩" />
			</view>
			<view v-if="formData.banzhengInfoFlag" class="form-label-input">
				<view class="phone-form-label"><text class="form-label-require">*</text>总课时</view>
				<input v-model="formData.zongkeshi" placeholder="请填写总课时" />
			</view>
			<view v-if="formData.needFlag" class="form-label-select">
				<view class="phone-form-label"><text class="form-label-require"></text>需要考试</view>
				<radio-group @change="kaoshiChange">
					<label class="radio-label">
						<radio :value="'true'" :checked="formData.needKaoshi == 'true'" color="#3fd2a1"
							style="transform:scale(0.65)" />
						<text>是</text>
					</label>
					<label class="radio-label">
						<radio :value="'false'" :checked="formData.needKaoshi == 'false'" color="#3fd2a1"
							style="transform:scale(0.65)" />
						<text>否</text>
					</label>
				</radio-group>
			</view>
			<view class="page-btn-box">
				<button type="default" v-if="piliang !=1" @click="goBack" class="phone-white-btn">返回</button>
				<button type="default" v-if="piliang ==1" @click="piliangBaocun" class="phone-green-btn">保存</button>
				<button type="default" v-if="piliang !=1" @click="addSaveForm" class="phone-green-btn">添加333</button>
			</view>
			<view v-if="piliangArray.length>0" v-for="(item,index) in piliangArray" :key="index" class="bzsm-tip-box form-top-margin">
				<view class="title-btn-box">
					<view class="phone-line-title">机构名称:{{item.jgName}}</view>
					<view class="reset-btn" @click="piliangDelete(item,index)">删除</view>
				</view>
				<view class="tip-content-box">职业名称:{{item.zyName}}</view>
				<view class="tip-content-box">职业等级:{{item.zyLevelName}}</view>
			</view>

			
		</view>
		<view class="page-btn-box content-footer-box">
			<button type="default" v-if="piliang ==1" @click="goBack" class="phone-white-btn">批量返回</button>
			<button type="default" v-if="piliang ==1" @click="addSaveFormPiliang" class="phone-green-btn">批量添加</button>
		</view>
	</view>
</template>

<script>
	import {
		getBaozhengJigou,
		getJiazhengLevel,
		getJiazhengZhiye,
		getJiazhengBanzhengCheckKc
	} from "@/api/jiazheng.js"
	import dayjs from "dayjs";
	export default {
		data() {
			return {
				formData: {
					baozhengJigouId: '',
					baozhengJigouName: '',
					baozhengJigouType: '',
					banzhengInfoFlag: false,
					zhiyeName: '',
					zhiyeId: '',
					zhiyeLevelName: '',
					zhiyeLevelId: '',
					canxunshijian: '',
					shicaochengji: '',
					zongkeshi: '',
					needKecheng: 'false', // 默认选中"是"
					needKaoshi: 'false', // 默认选中"是"
					kcDisabled: false,
					needFlag: false,
					id: '',
					createTime: ''
				},
				baozhengJigouOpt: [

				],
				zhiyelevelsOpt: [],
				zhiyeNameOpt: [

				],
				localStatus: '',
				currentIndex: '',
				isJgFlag: true,
				isZyFlag: true,
				piliang: '',
				piliangArray: []
			};
		},
		props: {
			status: {
				type: String,
			}

		},
		computed: {
			jigouNames() {
				return this.baozhengJigouOpt.map(item => item.name);
			},
			zhiyeNames() {
				return this.zhiyeNameOpt.map(item => item.name);
			},
			zhiyeLevels() {
				return this.zhiyelevelsOpt.map(item => item.name);
			},
		},
		created() {
			this.getJigou()
			this.localStatus = this.status

		},
		methods: {
			piliangDelete(item, index) {
				this.piliangArray.splice(index, 1);
			},
			isPiliang(data) {
				this.piliang = data
			},
			goBack() {
				this.isJgFlag = true
				this.isZyFlag = true
				this.piliangArray = []
				this.$emit('goBack');
			},
			editinfo(data, index) {

				console.log('123123', data);
				this.$nextTick(() => {
					if (!data) {
						return false
					}
					console.log('datssssa', data);
					this.currentIndex = index
					this.formData.baozhengJigouName = data.jgName;
					this.formData.baozhengJigouId = data.jgId;
					this.formData.id = data.id;
					this.formData.baozhengJigouType = data.jgType;
					this.formData.banzhengInfoFlag = data.jgType == 1;
					this.formData.zhiyeName = data.zyName;
					this.formData.zhiyeId = data.zyId;
					this.formData.zhiyeLevelName = data.zyLevelName;
					this.formData.zhiyeLevelId = data.zyLevel;
					if (this.formData.baozhengJigouId) {
						this.isJgFlag = false
						getJiazhengZhiye({
							id: this.formData.baozhengJigouId
						}).then(res => {
							console.log('res', res);
							this.zhiyeNameOpt = res.data
						})
					}
					if (this.formData.baozhengJigouId && this.formData.zhiyeId) {
						this.isZyFlag = false
						let req = {
							jgId: this.formData.baozhengJigouId,
							zyId: this.formData.zhiyeId,

						}
						getJiazhengLevel(req).then(res => {
							console.log('res', res);
							this.zhiyelevelsOpt = res.data
						})
					}
					this.formData.canxunshijian = data.canxunshijian;
					this.formData.zongkeshi = data.zongkeshi;
					this.formData.shicaochengji = data.shicaochengji;
					this.formData.needKecheng = data.needKecheng ? data.needKecheng.toString() : 'false';
					this.formData.needKaoshi = data.needKaoshi ? data.needKaoshi.toString() : 'false';

					if (this.formData.banzhengInfoFlag) {
						this.formData.needFlag = false

					} else {
						this.formData.needFlag = true

					}
				})
			},
			getJigou() {
				getBaozhengJigou({}).then(res => {
					console.log('res', res);
					this.baozhengJigouOpt = res.data
				})
			},
			getZhiye() {
				this.zhiyeNameOpt = []
				this.formData.zhiyeName = ''
				this.formData.zhiyeId = ''
				getJiazhengZhiye({
					id: this.formData.baozhengJigouId
				}).then(res => {
					console.log('res', res);
					this.zhiyeNameOpt = res.data
				})
			},
			getZhiyeLevel() {
				this.zhiyelevelsOpt = []
				this.formData.zhiyeLevelName = ''
				this.formData.zhiyeLevelId = ''
				let req = {
					jgId: this.formData.baozhengJigouId,
					zyId: this.formData.zhiyeId,

				}
				getJiazhengLevel(req).then(res => {
					console.log('res', res);
					this.zhiyelevelsOpt = res.data
				})
			},
			resetData() {
				this.formData.zhiyeName = ''
				this.formData.zhiyeId = ''
				this.formData.zhiyeLevelName = ''
				this.formData.zhiyeLevelId = ''
				this.formData.canxunshijian = ''
				this.formData.shicaochengji = ''
				this.formData.zongkeshi = ''
				this.isJgFlag = true
				this.isZyFlag = true
			},
			resetFun() {
				this.formData.zhiyeName = ''
				this.formData.zhiyeId = ''
				this.formData.zhiyeLevelName = ''
				this.formData.zhiyeLevelId = ''
				this.formData.canxunshijian = ''
				this.formData.shicaochengji = ''
				this.formData.zongkeshi = ''
				this.formData.baozhengJigouName = ''
				this.formData.baozhengJigouId = ''
				this.formData.baozhengJigouName = ''
				this.formData.needKecheng = 'false'
				this.formData.needKaoshi = 'false'
				this.formData.needFlag = false
				this.formData.kcDisabled = false
				this.formData.banzhengInfoFlag = false
				this.isJgFlag = true
				this.isZyFlag = true

			},
			// 报证机构选择
			jigouChange(e) {
				this.formData.baozhengJigouName = this.baozhengJigouOpt[e.detail.value].name;
				this.formData.baozhengJigouId = this.baozhengJigouOpt[e.detail.value].jgId;
				this.formData.baozhengJigouType = this.baozhengJigouOpt[e.detail.value].jgType;
				this.formData.banzhengInfoFlag = this.baozhengJigouOpt[e.detail.value].jgType == 1;
				// 每一次都重置
				this.resetData()

				console.log('this.formData.banzhengInfoFlag', this.formData.banzhengInfoFlag);
				if (this.formData.banzhengInfoFlag) {
					this.formData.needFlag = false
					this.formData.needKaoshi = 'false'
					this.formData.needKecheng = 'false'
				} else {
					this.formData.needFlag = true
					this.formData.needKaoshi = 'true'
					this.formData.needKecheng = 'false'
				}
				if (this.formData.baozhengJigouId) {
					this.isJgFlag = false //开启
					this.getZhiye()
				}
			},

			// 职业等级选择
			levelChange(e) {
				this.formData.zhiyeLevelId = this.zhiyelevelsOpt[e.detail.value].id;
				this.formData.zhiyeLevelName = this.zhiyelevelsOpt[e.detail.value].name;
			},
			checkKc() {
				let req = {
					zyId: this.formData.zhiyeId,
					zyLevel: this.formData.zhiyeLevelId
				}
				getJiazhengBanzhengCheckKc(req).then(res => {
					console.log('res', res);
					if (res.data.pass.toString() == 'true') {
						this.formData.kcDisabled = false
						this.formData.needKecheng = 'true'
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'none'
						});
						this.formData.needKecheng = 'false'
						this.formData.kcDisabled = true
					}
					//	this.zhiyelevelsOpt = res.data
				})
			},
			// 职业名称选择
			zhiyeChange(e) {
				this.formData.zhiyeName = this.zhiyeNameOpt[e.detail.value].name;
				this.formData.zhiyeId = this.zhiyeNameOpt[e.detail.value].id;
				if (this.formData.baozhengJigouId && this.formData.zhiyeId) {
					this.isZyFlag = false
					this.getZhiyeLevel()
				}
			},
			canxunShijianChange(e) {
				console.log('e', e);
				this.formData.canxunshijian = e
			},

			// 需要课程选择
			kechengChange(e) {
				this.formData.needKecheng = e.detail.value.toString();
				console.log('this.formData.needKecheng', this.formData.needKecheng);
				if (this.formData.needKecheng == 'true') {
					if (this.formData.zhiyeId && this.formData.zhiyeLevelId) {
						this.checkKc()
					} else {
						uni.showToast({
							title: '请选择职业以及职业等级',
							icon: 'none'
						});
						setTimeout(() => {
							this.formData.needKecheng = 'false'
						}, 1000)

						return false
					}
				}
			},

			// 需要考试选择
			kaoshiChange(e) {
				this.formData.needKaoshi = e.detail.value.toString();
			},
			currentMove(data) {
				console.log('data', data);
				// currentMove 编辑状态下的新增
				this.localStatus = data
				console.log('localStatus', this.localStatus);
			},
			piliangBaocun() {
				let req = {
					canxunshijian: this.formData.canxunshijian,
					jgId: this.formData.baozhengJigouId,
					needKaoshi: this.formData.needKaoshi,
					needKecheng: this.formData.needKecheng,
					shicaochengji: this.formData.shicaochengji,
					zongkeshi: this.formData.zongkeshi,
					zyId: this.formData.zhiyeId,
					zyLevel: this.formData.zhiyeLevelId,
					jgType: this.formData.baozhengJigouType,
					jgName: this.formData.baozhengJigouName,
					zyName: this.formData.zhiyeName,
					zyLevelName: this.formData.zhiyeLevelName,
					id: this.formData.id,
					createTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
				}
				if (this.status == 'add' || this.localStatus == 'editadd' || this.localStatus == 'addEdit') {
					req.createTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
				}
				if (req.jgId == '' || req.zyId == '' || req.zyLevel == '') {
					uni.showToast({
						title: '请选择保证机构,职业名称,职业等级',
						icon: 'none'
					});
					return false
				}
				if (this.formData.baozhengJigouType == 1 && (this.formData.shicaochengji == '' || this.formData
						.zongkeshi ==
						'' || this.formData.canxunshijian == '')) {
					uni.showToast({
						title: '请填写参训时间,实操成绩,总课时',
						icon: 'none'
					});
					return false
				}
				//console.log('req', req);
				this.piliangArray.push(req)
				console.log('this.piliangArray', this.piliangArray);
			},
			// 提交表单
			addSaveFormPiliang() {
				let req = {
					canxunshijian: this.formData.canxunshijian,
					jgId: this.formData.baozhengJigouId,
					needKaoshi: this.formData.needKaoshi,
					needKecheng: this.formData.needKecheng,
					shicaochengji: this.formData.shicaochengji,
					zongkeshi: this.formData.zongkeshi,
					zyId: this.formData.zhiyeId,
					zyLevel: this.formData.zhiyeLevelId,
					jgType: this.formData.baozhengJigouType,
					jgName: this.formData.baozhengJigouName,
					zyName: this.formData.zhiyeName,
					zyLevelName: this.formData.zhiyeLevelName,
					id: this.formData.id,
					createTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
				}
				console.log('statusstatusstatus', this.status);
				if (this.status == 'add' || this.localStatus == 'editadd' || this.localStatus == 'addEdit') {
					req.createTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
				}
				if (req.jgId == '' || req.zyId == '' || req.zyLevel == '') {
					uni.showToast({
						title: '请选择保证机构,职业名称,职业等级',
						icon: 'none'
					});
					return false
				}
				if (this.formData.baozhengJigouType == 1 && (this.formData.shicaochengji == '' || this.formData
						.zongkeshi ==
						'' || this.formData.canxunshijian == '')) {
					uni.showToast({
						title: '请填写参训时间,实操成绩,总课时',
						icon: 'none'
					});
					return false
				}
				if (this.piliangArray.length == 0) {
					this.$emit('addSavePiliang', req);
				} else {
					console.log('this.piliangArray', this.piliangArray);
					this.$emit('addSavePiliang', this.piliangArray)
				}
			},
			// 提交表单
			addSaveForm() {
				//debugger

				console.log('statusstatusstatus', this.status);

				let req = {
					canxunshijian: this.formData.canxunshijian,
					jgId: this.formData.baozhengJigouId,
					needKaoshi: this.formData.needKaoshi,
					needKecheng: this.formData.needKecheng,
					shicaochengji: this.formData.shicaochengji,
					zongkeshi: this.formData.zongkeshi,
					zyId: this.formData.zhiyeId,
					zyLevel: this.formData.zhiyeLevelId,
					jgType: this.formData.baozhengJigouType,
					jgName: this.formData.baozhengJigouName,
					zyName: this.formData.zhiyeName,
					zyLevelName: this.formData.zhiyeLevelName,
					id: this.formData.id,
					createTime: dayjs().format("YYYY-MM-DD HH:mm:ss")
				}
				console.log('req', req);
				if (this.status == 'add' || this.localStatus == 'editadd' || this.localStatus == 'addEdit') {
					req.createTime = dayjs().format("YYYY-MM-DD HH:mm:ss")
				}
				if (req.jgId == '' || req.zyId == '' || req.zyLevel == '') {
					uni.showToast({
						title: '请选择保证机构,职业名称,职业等级',
						icon: 'none'
					});
					return false
				}
				if (this.formData.baozhengJigouType == 1 && (this.formData.shicaochengji == '' || this.formData
						.zongkeshi ==
						'' || this.formData.canxunshijian == '')) {
					uni.showToast({
						title: '请填写参训时间,实操成绩,总课时',
						icon: 'none'
					});
					return false
				}
				console.log('req123123123', req);
				if (req.jgId && req.zyId && req.zyLevel) {
					if (this.localStatus == 'addEdit') {
						this.$emit('addEdit', req, 'addEdit', this.currentIndex);
					} else if (this.status == 'add') {
						this.$emit('addSave', req);
					} else if (this.localStatus == 'editAdd') {
						this.$emit('editSave', req, 'editAdd');
					} else {
						this.$emit('editSave', req, 'edit', this.currentIndex);
					}

				} else if (req.jgId == '' && req.zyId == '' && req.zyLevel == '') {
					if (this.status == 'add') {
						this.$emit('addSave', '');
					} else if (this.localStatus == 'editAdd') {
						//this.$emit('editSave', '');
						// uni.showToast({
						// 	title: '请选择保证机构,职业名称,职业等级',
						// 	icon: 'none'
						// });

						// return false
					} else {

					}
				} else {
					uni.showToast({
						title: '请选择保证机构,职业名称,职业等级',
						icon: 'none'
					});

					return false
				}

			}
		}
	};
</script>