menduner-uniapp/components/positionItem/components/requirement.vue

<!--  -->
<template>
	<view class="f-straight wrapper">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px" label-align="right">
			<uni-forms-item label="招聘类型" name="type" required>
				<uni-data-picker popup-title="请选择招聘类型" v-model="formData.type" :localdata="jobType" :clear-icon="false" :map="{ text: 'key', value: 'value'}" @change="typeChange"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="学历要求" name="eduType" required>
				<uni-data-picker popup-title="请选择学历要求" v-model="formData.eduType" :localdata="dictObj?.edu_extend || []" :clear-icon="false" :map="{ text: 'label', value: 'value'}"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item label="工作经验" name="expType" required>
				<uni-data-picker popup-title="请选择工作经验" v-model="formData.expType" :localdata="dictObj?.exp_extend || []" :clear-icon="false" :map="{ text: 'label', value: 'value'}"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="最低薪资" name="payFrom" :required="salary?.length === 0" label-width="90px">
				<view class="d-flex">
          <uni-number-box v-model="formData.payFrom" :disabled="salary?.length > 0" :min="1" :max="999999999" :step="salaryStep" :width="100" @change="payChange"></uni-number-box>
          <uni-data-checkbox v-model="salary" multiple :localdata="[{ text: '薪资面议', value: 1 }]" selectedColor="#00B760" class="ss-m-l-20" @change="salaryCheckboxChange"></uni-data-checkbox>
        </view>
			</uni-forms-item>
      <uni-forms-item label="最高薪资" name="payTo" :required="salary?.length === 0" label-width="90px">
        <uni-number-box v-model="formData.payTo" :disabled="salary?.length > 0" :min="payToMin" :max="999999999" :step="salaryStep" :width="100"></uni-number-box>
			</uni-forms-item>
			<uni-forms-item label="计薪时段" name="payUnit" :required="salary?.length === 0">
				<uni-data-picker popup-title="请选择计薪时段" v-model="formData.payUnit" :placeholder="salary?.length > 0 ? '薪资面议' : '请选择'" :readonly="salary?.length > 0" :localdata="dictObj?.payUnit || []" :clear-icon="false" :map="{ text: 'label', value: 'value'}"></uni-data-picker>
			</uni-forms-item>
      <uni-forms-item label="工作城市" name="areaId" required label-width="90px">
				<uni-data-picker popup-title="请选择工作城市" v-model="formData.areaId" :localdata="dictObj?.areaTreeData_extend || []" :clear-icon="false" :map="{ text: 'name', value: 'id'}"></uni-data-picker>
			</uni-forms-item>
			<uni-forms-item required label="详情地址" name="address">
        <uni-easyinput v-model="formData.address" placeholder="请填写详细地址"></uni-easyinput>
			</uni-forms-item>
			<uni-forms-item label="职位关键字" name="tagList">
        <view class="tagsBox" @tap="portraitOpen">
          <view class="tags" v-if="tagList?.length">
            <view
              v-for="tag in tagList"
              :key="tag"
              class="tag"
            >
              {{ tag }}
            </view>
          </view>
          <uni-icons
            type="icon-Edit"
            color="#00B760"
            class="ss-m-t-20"
            custom-prefix="iconfont"
            size="18"
          ></uni-icons>
        </view>
			</uni-forms-item>
		</uni-forms>
    <portrait ref="portraitRef" @submit="portraitSubmit"></portrait>
	</view>
</template>
<script setup>
import { ref, unref, watch } from 'vue'
import { dictObj } from '@/utils/position.js'
import { getEnterprisePubJobTypePermission } from '@/api/new/position'
import portrait from './portrait.vue'
const emit = defineEmits(['requireTypeChange'])
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  }
})

const formData = ref({
  type: props.data?.type || '',
  eduType: props.data?.eduType ? props.data?.eduType : props.data?.eduType === null ? -1 : '',
  expType: props.data?.expType ? props.data?.expType : props.data?.expType === null ? -1 : '',
  payFrom: props.data?.payFrom || '',
  payTo: props.data?.payTo || '',
  payUnit: props.data?.payUnit || '',
  areaId: props.data?.areaId ? props.data?.areaId : props.data?.areaId === null ? -1 : '',
  address: props.data?.address || '',
})
const tagList = ref(props.data?.tagList?.length ? props.data.tagList : [])

watch(
  () => props.data, 
  (newVal) => {
    salary.value = newVal?.payUnit === null ? [1] : []
    if (!salary.value?.length) {
      formData.value.payFrom = null
      formData.value.payTo = null
      formData.value.payUnit = null
    }
  },
  { immediate: true },
  { deep: true }
)

// const salaryDisabled = computed(() => {
//   return Boolean(salary?.value.length)
// })

const salaryCheckboxChange = (e) => {
  const bool = e.detail.value.length ? e.detail.value[0] : ''
  salary.value = bool ? [1] : []
  formData.value.payFrom = null
  formData.value.payTo = null
  formData.value.payUnit = null
}

const rules = {
	type:{
		rules: [{required: true, errorMessage: '请选择招聘类型' }]
	},
	eduType:{
		rules: [{required: true, errorMessage: '请选择学历要求' }]
	},
	expType:{
		rules: [{required: true, errorMessage: '请选择工作经验' }]
	},
	areaId:{
		rules: [{required: true, errorMessage: '请选择工作城市' }]
	},
	address:{
		rules: [{required: true, errorMessage: '请填写详细地址' }]
	},
  // 薪资
	payFrom: {
		rules: [
      {
        validateFunction: function (rule, value, data, callback) {
          if (!salary?.value.length) {
            callback('请填写最低薪资')
          }
          if (value < 1) {
            callback('数额不得小于1')
          }
          return true
        }
      },
      {
        validateFunction: function (rule, value, data, callback) {
          if (!formData.value?.payTo || (Number(value) < formData.value.payTo ? Number(formData.value.payTo) : 0)) {
            return true
          } else {
            callback('应低于最高薪资')
          }
        }
      }
    ]
	},
	payTo: {
		rules: [
      {
        validateFunction: function (rule, value, data, callback) {
          if (!salary?.value.length) {
            callback('请填写最高薪资')
          }
          if (value < 1) {
            callback('数额不得小于1')
          }
          return true
        }
      },
      {
        validateFunction: function (rule, value, data, callback) {
          if (!formData.value?.payFrom || (Number(value) > formData.value?.payFrom ? Number(formData.value?.payFrom) : 0)) {
            return true
          } else {
            callback('应高于最低薪资')
          }
        }
      }
    ]
	},
	payUnit: {
		// rules: [{required: true, errorMessage: '请选择计薪时段' }]
		rules: [
      {
        validateFunction: function (rule, value, data, callback) {
          if (!salary?.value.length) {
            callback('请选择计薪时段')
          }
          return true
        }
      }
      
    ]
	}
}
// const salaryRules = {}

const jobType = ref([])
const getJobTypeList = async () => {
  const res = await getEnterprisePubJobTypePermission()
  jobType.value = res?.data?.length ? res.data : []
}
getJobTypeList()

// 薪资面议
const salaryStep = 1000
const payToMin = ref(0)
const payChange = (val) => {
  payToMin.value = val
  if (val > formData.value.payTo) formData.value.payTo = val + salaryStep
}

const portraitRef = ref()
const portraitOpen = () => {
  portraitRef.value?.handleOpen()
}
const portraitSubmit = (arr) => {
  tagList.value = arr?.length ? arr : []
}

const typeChange = (e) => {
  const bool = Boolean(e?.detail?.value?.length ? e.detail.value[0]?.text === '实习' : false)
  emit('requireTypeChange', bool)
}

const form = ref()
const salary = ref(props.data?.payUnit === null ? [1] : [])
const getQuery = async () => {
  const valid = await unref(form).validate()
  if (!valid) return
  const obj = {
    hirePrice: 0,
    hire: false,
    salary: Boolean(salary.value?.length),
    tagList: tagList.value,
    ...formData.value
  }
  
  obj && Object.keys(obj).length && Object.keys(obj).forEach(key => {
    if (['areaId', 'eduType', 'expType'].includes(key) && obj[key] === -1) obj[key] = null 
    if (obj.salary && ['payFrom', 'payTo', 'payUnit'].includes(key)) obj[key] = null 
  })

  return obj
}

defineExpose({
  getQuery
})

</script>
<style lang="scss" scoped>
$px: 30rpx;
.positionTemplate {
  display: flex;
 .picker {
  flex: 1;
  margin-right: 5px;
 }
 .btn {
  width: 90px;
  line-height: 34px;
 }
}
.tagsBox {
  display: flex;
  flex-wrap: wrap;
  .tags {
    padding-top: 10px;
    display: flex;
    flex-wrap: wrap;
    .tag {
      margin: 0 10rpx 10rpx 0;
      border: 2rpx solid #00B760;
      color: #00B760;
      white-space: nowrap;
      padding: 4rpx 10rpx;
      border-radius: 10rpx;
      font-size: 24rpx;
    }
  }
}
</style>