menduner-uniapp/pagesA/resumeOnline/jobIntention.vue

<!--  -->
<template>
  <view class="ss-m-x-30 ss-m-y-30">
    <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind">
      <uni-forms-item label="期望岗位" name="positionId" required label-width="90px">
				<uni-data-picker popup-title="请选择期望岗位" v-model="formData.positionId" :localdata="dictObj?.positionTreeData || []" :clear-icon="false" :map="{ text: 'nameCn', value: 'id'}"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="期望行业" name="industryIdList" required label-width="90px">
				<m-filter
					label="请选择期望行业"
					:items="dictObj?.industryTreeData || []"
					item-label="nameCn"
					item-value="id"
					multiple
					:value="industryIdObj.id"
					@change="industryChange"
					@init="industryInit"
				>
					<view class="content">
						<view class="content-cover"></view>
						<uni-easyinput v-model="industryIdObj.label" placeholder="请选择期望行业" :clearable="false"/>
					</view>
				</m-filter>
				<!-- <uni-data-picker popup-title="请选择期望行业" v-model="formData.industryIdList" :localdata="dictObj?.industryTreeData || []" :clear-icon="false" :map="{ text: 'nameCn', value: 'id'}"></uni-data-picker> -->
			</uni-forms-item>
      <uni-forms-item label="最低薪资" name="payFrom" required label-width="90px">
        <uni-number-box v-model="formData.payFrom" :min="1" :max="999999999" :step="1000" :width="150" @change="payChange"></uni-number-box>
			</uni-forms-item>
      <uni-forms-item label="最高薪资" name="payTo" required label-width="90px">
        <uni-number-box v-model="formData.payTo" :min="payToMin" :max="999999999" :step="1000" :width="150"></uni-number-box>
			</uni-forms-item>
      <uni-forms-item label="求职类型" name="jobType" required label-width="90px">
				<uni-data-picker popup-title="请选择求职类型" v-model="formData.jobType" :localdata="dictObj?.jobType || []" :clear-icon="false" :map="{ text: 'label', value: 'value'}"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="工作城市" name="workAreaId" required label-width="90px">
				<uni-data-picker popup-title="请选择工作城市" v-model="formData.workAreaId" :localdata="dictObj?.areaTreeData || []" :clear-icon="false" :map="{ text: 'name', value: 'id'}"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="其它感兴趣的城市" name="interestedAreaIdList" label-width="90px">
				<!-- <uni-data-picker popup-title="其它感兴趣的城市" v-model="formData.interestedAreaIdList" :localdata="dictObj?.areaTreeData || []" :clear-icon="false" :map="{ text: 'name', value: 'id'}"></uni-data-picker> -->
				<m-filter
					label="请选择其它感兴趣的城市"
					:items="dictObj?.areaTreeData || []"
					item-label="name"
					item-value="id"
					multiple
					:value="interestedAreaIdObj.id"
					@change="interestedAreaChange"
					@init="interestedAreaInit"
				>
					<view class="content">
						<view class="content-cover"></view>
						<uni-easyinput v-model="interestedAreaIdObj.label" placeholder="请选择其它感兴趣的城市" :clearable="false"/>
					</view>
				</m-filter>
			</uni-forms-item>
    </uni-forms>
    <view class="f-horizon-center">
      <button v-if="editId" size="default" class="delete-button commonBtnStyle" @click="handleDelete">删 除</button>
      <button size="default" :class="{'save-button': editId, 'commonBtnStyle': editId, 'send-button': !editId}"  @click="submit">保 存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { dictObj } from '@/utils/position.js'
import { saveResumeJobInterested, getResumeJobInterested, deleteResumeJobInterested } from '@/api/resume.js'
import { onLoad } from '@dcloudio/uni-app'
import { cloneDeep } from 'lodash-es'
import MFilter from '@/components/FilterList/mFilter'

let formData = ref({ positionId: '', payFrom: 0, payTo: 0 })
const form = ref()
const editId = ref(null)

// 预览 回显 期望行业
const industryIdObj = ref({
	id: null,
	label: null
})

// 预览 回显 感兴趣城市
const interestedAreaIdObj = ref({
	id: null,
	label: null
})

// 获取求职意向
async function getJobInterested (id) {
  const { data } = await getResumeJobInterested()
  if (!data || !data.length) {
    return
  }
  const obj = data.find(k => k.id === id)
	formData.value = cloneDeep(obj)
	// formData.value.industryIdList = obj.industryIdList?.length ? obj.industryIdList[0] : ''
	industryIdObj.value.id = obj.industryIdList
	// formData.value.interestedAreaIdList = obj.interestedAreaIdList
	interestedAreaIdObj.value.id = obj.interestedAreaIdList.map(e => +e)
	console.log(interestedAreaIdObj.value)
	if (dictObj && dictObj?.areaTreeData) {
		const type = typeof dictObj.areaTreeData[0].id
		formData.value.workAreaId = type === 'string' ? obj.workAreaId.toString() : Number(obj.workAreaId)
	}
}

onLoad((options) => {
	if (options.id) {
		editId.value = options.id
		getJobInterested(options.id)
	}
})

// 提交
const submit = async () => {
  const valid = await unref(form).validate()
  if (!valid) return
	// 后续做多选
	// const query = {...formData.value, industryIdList: formData.value.industryIdList, interestedAreaIdList: formData.value.interestedAreaIdList}
	try {
		await saveResumeJobInterested(formData.value)
		uni.showToast({
			icon: 'success',
			title: '保存成功'
		})
		setTimeout(() => {
			editId.value = null
			uni.navigateBack({
				delta: 1
			})
		}, 1000)
	} catch (err) {
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}

// 删除
const handleDelete = async () => {
	try {
		await deleteResumeJobInterested(editId.value)
		uni.showToast({
			icon: 'success',
			title: '删除成功'
		})
		setTimeout(() => {
			editId.value = null
			uni.navigateBack({
				delta: 1
			})
		}, 1000)
	} catch (err) {
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}

const rules = {
	positionId:{
		rules: [{required: true, errorMessage: '请选择期望岗位' }]
	},
	industryIdList:{
		rules: [{required: true, errorMessage: '请选择期望行业' }]
	},
	payFrom:{
		rules: [{required: true, errorMessage: '请输入薪资最低要求' }]
	},
	payTo:{
		rules: [{required: true, errorMessage: '请输入薪资最高要求' }]
	},
	jobType:{
		rules: [{required: true, errorMessage: '请选择求职类型' }]
	},
	workAreaId:{
		rules: [{required: true, errorMessage: '请选择工作城市' }]
	},
}

const payToMin = ref(1)
const payChange = (val) => {
  payToMin.value = val
  if (val > formData.value.payTo) formData.value.payTo = val
}
// 选中
const industryChange = (value, label, item) => {
	if (!value.length) {
		industryIdObj.value.label = null
		formData.value.industryIdList = null
		return
	}
	industryIdObj.value.label = item.data.filter(e => value.includes(e.id)).map(e => e.nameCn)
	formData.value.industryIdList = value
}
// 回显
const industryInit = (label) => {
	industryIdObj.value.label = label
}
// 选中
const interestedAreaChange = (value, label, item) => {
	if (!value.length) {
		interestedAreaIdObj.value.label = null
		formData.value.interestedAreaIdList = null
		return
	}
	interestedAreaIdObj.value.label = item.data.filter(e => value.includes(e.id)).map(e => e.name)
	formData.value.interestedAreaIdList = value
}
// 回显
const interestedAreaInit = (label) => {
	interestedAreaIdObj.value.label = label
}


</script>

<style lang="scss" scoped>
.content {
	position: relative;
	&-cover {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 3;
	}
}
</style>