uniProject/pages/admin/Jiazheng/qiuzhiXinxi.vue

<template>
	<view class="jz-content-box">
		<view class="form-label-radio form-top-margin flex-start-row">
			<view class="phone-form-label"> <text class="form-label-require">*</text>类型</view>
			<dataChecked :list="typeList" mode="multiple" :defaultCount="9" @change="selectChangeType" @add="addType" />
		</view>
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require">*</text>经验</view>
			<picker :range="jingyanList" mode='selector' :value="jingyanIndex" range-key="name" @change="jingyanChange"
				@cancel="jingyanCancel">
				<view class="form-radio-select">
					<view>{{ jingyan }}</view>
					<icon></icon>
				</view>
			</picker>
		</view>
		<view class="form-label-radio flex-start-row">
			<view class="phone-form-label"><text class="form-label-require">*</text>技能</view>
			<dataChecked :list="skillList" mode="multiple" :defaultCount="9" @change="selectChangeSkill"
				@add="addSkill" />
		</view>
		<view class="form-label-radio form-top-margin flex-start-row">
			<view class="phone-form-label"><text class="form-label-require">*</text>状态</view>
			<dataChecked :list="zhuangtaiList" mode="single" :showAdd="false" @change="selectChangeZhuangtai" />
		</view>
		<view class="form-label-select">
			<view class="phone-form-label"><text class="form-label-require"></text>薪资级别</view>
			<picker :range="xinziJibieList" mode='selector' @change="xinziJibieChange" @cancel="xinziJibieCancel">
				<view class="form-radio-select">
					<view>{{jibiexinzi}}</view>
					<icon></icon>
				</view>
			</picker>
		</view>

		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require"></text>期望薪资</view>
			<input v-model="qiwangxinzi" placeholder="请输入期望薪资" />
		</view>
		<view class="form-label-input">
			<view class="phone-form-label"><text class="form-label-require"></text>工作经历</view>
			<input v-model="jingli" placeholder="请填写工作经历" />
		</view>
		<view class="page-btn-box">
			<button type="default" v-if="status =='add'" @click="goNext" class="phone-green-btn">下一步</button>
			<button type="default" v-if="status =='edit'" @click="editSave" class="phone-green-btn">保存</button>
		</view>
	</view>
</template>

<script>
	import dataChecked from './common/dataChecked.vue';
	import {
		getJiazhengLeixing,
		getJiazhengJineng,
		getJiazhengZhuangtai,

	} from "@/api/jiazheng.js";

	export default {
		components: {
			dataChecked
		},
		// onLoad 是 uni-app 的页面生命周期钩子，不需要导入
		created() {
			this.getLeixing()
			this.getJineng()
			this.getZhuangtai()
		},
		props: {
			status: {
				type: String,
			}
		},
		data() {
			return {
				formData: {},
				// 从后端获取的技能列表
				skillList: [],
				typeList: [],
				leixing: "",
				jineng: "",
				zhuangtaiList: [],
				zhuangtai: '',
				jingyan: "",
				jingyanIndex: 0,
				qiwangxinzi: '面议',
				jingli: '',
				xinziJibieList: ["一级", "二级", "三级", "四级", "五级", ],
				jibiexinzi: "",
				jingyanList: Array.from({
					length: 51
				}, (_, i) => i + '年'),
			};
		},
		methods: {
			// 点击完成按钮的时候触发，
			xinziJibieChange(e) {
				//通过e.detail.value获取值，获取的是自定义数据的下标
				const index = e.detail.value
				this.jibiexinzi = this.xinziJibieList[index]
				console.log('jibiexinzi', this.jibiexinzi);
			},
			xinziJibieCancel(e) {
				console.log("您已取消选择");
			},
			jingyanChange(e) {
				const index = e.detail.value
				this.jingyan = this.jingyanList[index]
			},
			jingyanCancel() {
				this.jingyanIndex = 0
			},
			getLeixing() {
				getJiazhengLeixing({}).then(res => {
					this.skillList = this.dataConversionObject(res.data)
					console.log('this.skillList', this.skillList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getJineng() {
				getJiazhengJineng({}).then(res => {
					this.typeList = this.dataConversionObject(res.data)
					console.log('this.typeList', this.typeList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			getZhuangtai() {
				getJiazhengZhuangtai({}).then(res => {
					console.log('res', res);
					this.zhuangtaiList = res.data
					// this.typeList = this.dataConversionObject(res.data)
					// console.log('this.typeList', this.typeList);
				}).catch(error => {
					console.error('获取技能类型失败:', error);
				});
			},
			dataConversionObject(data) {
				let newList
				newList = data.map((name, index) => ({
					id: index,
					name: name
				}));
				return newList
			},
			dataConversionArray(data) {
				let newList
				newList = data.map((item, index) => {
					return item.name
				});
				return newList
			},
			selectChangeType(data) {
				//	console.log('typeData', data);
				this.leixing = this.dataConversionArray(data).join(',')
				console.log('this.leixing', this.leixing);
			},
			addType(newType) {
				this.typeList.push({
					...newType,
				});
			},
			selectChangeSkill(data) {
				this.jineng = this.dataConversionArray(data).join(',')
				console.log('this.jineng', this.jineng);
			},
			addSkill(newSkill) {
				this.skillList.push({
					...newSkill,
				});
			},
			selectChangeZhuangtai(data) {
				console.log('zhuangtaiData', data);
				this.zhuangtai = data[0].id
				console.log('zhuangtai', this.zhuangtai);
				// const index = e.detail.value
				// this.jingyan = this.jingyanList[index]
			},
			showAlert() {
				uni.showToast({
					title: "请勾选本人同意！",
					icon: 'none',
					duration: 2000
				})
				return false
			},
			yanzheng() {
				this.formData = {
					leixing: this.leixing,
					jingyan: this.jingyan,
					jineng: this.jineng,
					zhuangtai: this.zhuangtai,
					jibiexinzi: this.jibiexinzi,
					qiwangxinzi: this.qiwangxinzi,
					jingli: this.jingli,

				}
				if (!this.formData.leixing) {
					uni.showToast({
						title: "请选择类型！",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.formData.jingyan) {
					uni.showToast({
						title: "请选择经验年限！",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.formData.jineng) {
					uni.showToast({
						title: "请选择相应技能！",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				if (!this.formData.zhuangtai) {
					uni.showToast({
						title: "请选择相应状态！",
						icon: 'none',
						duration: 2000
					})
					return false
				}
				return true
			},
			goNext() {
				let ispass = this.yanzheng()
				if (ispass) {
					this.$emit('goNext', this.formData, 1);
				}
			},
			editSave() {
				let ispass = this.yanzheng()
				if (ispass) {
					this.$emit('editSave', this.formData);
				}
			}
		}
	};
</script>