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-select
					label="请选择期望行业"
					:items="dictObj?.industryTreeData || []"
					item-label="nameCn"
					item-value="id"
					multiple
					v-model="formData.industryIdList"
				></m-select>
			</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">
				<m-select
					label="请选择其它感兴趣的城市"
					:items="dictObj?.areaTreeData || []"
					item-label="name"
					item-value="id"
					multiple
					v-model="formData.interestedAreaIdList"
				>
				</m-select>
			</uni-forms-item>
    </uni-forms>
    <view class="f-horizon-center">
      <button 
				v-if="editId"
				size="default"
				class="delete-button commonBtnStyle MiSans-Medium"
				:disabled="deleteDisabled"
				@click="handleDelete"
			>删 除</button>
      <button
				size="default"
				class="MiSans-Medium"
				:class="{'save-button': editId, 'commonBtnStyle': editId, 'send-button': !editId}"
				:disabled="disabled"
				@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 MSelect from '@/components/FilterList/select.vue'

let formData = ref({ positionId: '', payFrom: 0, payTo: 0 })
const form = ref()
const editId = ref(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)

	const interest = obj.interestedAreaIdList
	formData.value.interestedAreaIdList = interest && interest.length ? interest.map(e => +e) : []
	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 disabled = ref(false)
const submit = async () => {
  const valid = await unref(form).validate()
  if (!valid) return

	disabled.value = true
	try {
		await saveResumeJobInterested(formData.value)
		uni.showToast({
			icon: 'success',
			title: '保存成功'
		})
		setTimeout(() => {
			editId.value = null
			uni.navigateBack({
				delta: 1
			})
			disabled.value = false
		}, 1000)
	} catch (err) {
		disabled.value = false
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}

// 删除
const deleteDisabled = ref(false)
const handleDelete = async () => {
	deleteDisabled.value = true
	try {
		await deleteResumeJobInterested(editId.value)
		uni.showToast({
			icon: 'success',
			title: '删除成功'
		})
		setTimeout(() => {
			editId.value = null
			uni.navigateBack({
				delta: 1
			})
			deleteDisabled.value = false
		}, 1000)
	} catch (err) {
		deleteDisabled.value = false
		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
}
</script>

<style lang="scss" scoped>
:deep(.uni-forms-item__content) {
	max-width: 100%;
	overflow: hidden;
}
</style>