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

<template>
	<view class="f-straight wrapper">
		<uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px" label-align="right">
      <template v-if="!props.isFair && jobFairLIst?.length">
        <!-- 设置为招聘会职位 -->
        <uni-forms-item label="招聘会" name="bizId" >
          <uni-data-picker class="picker" popup-title="请选择招聘会" v-model="formData.bizId" :localdata="jobFairLIst" :clear-icon="false" :map="{ text: 'title', value: 'id'}"></uni-data-picker>
          <view style="color: #777; font-size: 12px;" class="ss-m-t-8 ss-m-l-10">职位会在对应的招聘会显示</view>
        </uni-forms-item>
      </template>
			<uni-forms-item label="职位类型" name="positionId" required>
        <view class="positionTemplate">
          <uni-data-picker class="picker" popup-title="请选择职位类型" v-model="formData.positionId" :localdata="dictObj?.positionTreeData || []" :clear-icon="false" :map="{ text: 'nameCn', value: 'id'}"></uni-data-picker>
          <button v-if="formData.positionId" class="btn" type="primary" size="mini" @click="useJobTemplate">职位模板</button>
        </view>
			</uni-forms-item>
			<uni-forms-item required label="职位名称" name="name">
        <uni-easyinput v-model="formData.name" placeholder="请填写职位名称"></uni-easyinput>
			</uni-forms-item>
      <uni-forms-item label="到期时间" name="expireTime" required>
				<view class="d-flex">
          <picker mode="date" :value="formData.expireTime" :disabled="expireTimeDisabled" :start="startDate" @change="expireTimeChange">
            <view class="uni-input ss-m-t-20" :style="{'opacity': expireTimeDisabled ? '0.5' : '1'}">{{ formData.expireTime }}</view>
          </picker>
          <uni-data-checkbox selectedColor="#00B760" class="ss-m-l-50 ss-m-t-14" multiple v-model="soFar" :localdata="[{ text: '长期有效', value: 1 }]" @change="handleChangeSofar"></uni-data-checkbox>
        </view>
			</uni-forms-item>
      <uni-forms-item label="岗位职责" name="content" required>
        <RichEditor ref="contentRef" :richValue="formData.content" @blur="val => editorBlur('content', val)" :max="5000" />
			</uni-forms-item>
      <uni-forms-item label="岗位要求 " name="requirement" required>
        <RichEditor ref="requirementRef" :richValue="formData.requirement" @blur="val => editorBlur('requirement', val)" :max="5000" />
			</uni-forms-item>
		</uni-forms>
    <!-- 确认框 -->
    <uni-popup ref="confirm" type="dialog">
      <uni-popup-dialog
        type="warn"
        cancelText="取消"
        confirmText="确认"
        title="系统提示"
        content="您确定要放弃目前岗位描述的内容吗？"
        @confirm="handleConfirm"
        @close="handleClose"
      ></uni-popup-dialog>
    </uni-popup>
	</view>
</template>
<script setup>
import { ref, unref } from 'vue'
import { dictObj } from '@/utils/position.js'
import { getNextDate } from '@/utils/date'
import { getRecruitPositionDetails } from '@/api/new/position'
import { dateToTimestamp } from '@/utils/date.js'
import { getJobFairWhiteList } from '@/api/jobFair'
import RichEditor from '@/components/RichEditor'
const props = defineProps({
  data: {
    type: Object,
    default: () => {}
  },
  isFair: {
    type: Boolean,
    default: false
  }
})

const formData = ref({
  bizId: props.data?.bizId || '',
  positionId: props.data?.positionId || '',
  name: props.data?.name || '', // + new Date().getTime().toString()
  expireTime: props.data?.expireTime || getNextDate(15, 'YYYY-MM-DD', 'day'),
  content: props.data?.content || '',
  requirement: props.data?.requirement || ''
})

const startDate = new Date().getFullYear() + '-' + (new Date().getMonth() + 1) // 不可选时间
const expireTimeDisabled = ref(props.data?.expireTime === null ? true : false)
// 至今
const handleChangeSofar = (e) => {
  const value = e.detail.value.length ? e.detail.value[0] : ''
  expireTimeDisabled.value = value ? true : false
}
const expireTimeChange = (e) => {
  formData.value.expireTime = e?.detail?.value
}

const rules = {
	positionId:{
		rules: [{required: true, errorMessage: '请选择职位类型' }]
	},
	positionId:{
		rules: [{required: true, errorMessage: '请选择职位类型' }]
	},
	name:{
		rules: [{required: true, errorMessage: '请填写职位名称' }]
	},
	expireTime:{
		rules: [{required: true, errorMessage: '请选择职位到期时间' }]
	},
	content:{
		rules: [{required: true, errorMessage: '请填写岗位职责' }]
	},
	requirement:{
		rules: [{required: true, errorMessage: '请填写岗位要求' }]
	},
}

const editorBlur = (key, val) => {
  formData.value[key] = val || ''
}

// 获取企业已加入的招聘会列表
const jobFairLIst = ref(false)
const getJobFairData = async () => {
  if (props.isFair) return
  const res = await getJobFairWhiteList()
  jobFairLIst.value = res?.data || []
}
getJobFairData()

const pushTemplate = () => {
  formData.value.content = jobTemplateRes.value.content
  formData.value.requirement = jobTemplateRes.value.requirement
  uni.showToast({ title: '模板填充完成！', icon: 'success' })
}

const confirm = ref()
const handleClose = () => {
  confirm.value.close()
}
const handleConfirm = () => {
  try {
    uni.showLoading({ title: '替换中...', mask: true })
    pushTemplate()
  } catch (error) {
    uni.showToast({ title: '替换失败', icon: 'error' })
    console.log(error)
  } finally {
    uni.hideLoading()
  }
}

const jobTemplateRes = ref({})
const useJobTemplate = async () => {
  if (!formData.value.positionId) return Snackbar.warning('请先选择职位类型')
  // 获取职位模板内容-赋值
  const res = await getRecruitPositionDetails(formData.value.positionId)
  if (!res?.data || !res.data .content || !res.data.requirement) {
    uni.showToast({ title: '此职位类型没有可使用的模板！', icon: 'none', duration: 2000 })
    return
  }
  jobTemplateRes.value = res.data
  if (formData.value?.content || formData.value?.requirement) {
    // 弹窗提示
    confirm.value.open()
  } else {
    // 无内容点击默认填充
    pushTemplate()
  }
}

const form = ref()
const contentRef = ref()
const requirementRef = ref()
const soFar = ref(props.data?.expireTime === null ? [1] : [])
const getQuery = async () => {
  const valid = await unref(form).validate()
  if (!valid) return

  const obj = {
    hirePrice: 0,
    soFar: Boolean(soFar.value?.length),
    hire: false,
    ...formData.value
  }

  obj.source = obj.bizId ? '2' : '0' // 职位来源(0职位管理|1众聘职位|2招聘会)
  obj.expireTime = obj.soFar ? null : dateToTimestamp(obj.expireTime)
  obj && Object.keys(obj).length && Object.keys(obj).forEach(key => { if (['areaId', 'eduType', 'expType'].includes(key) && obj[key] === -1)  obj[key] = null })
  return obj
}

defineExpose({
  getQuery
})

</script>
<style lang="scss" scoped>
.positionTemplate {
  text-align: left;
 .btn {
  width: 90px;
  line-height: 34px;
  margin-top: 10px;
 }
}

:deep(.uni-forms-item__content) {
  width: 100% !important;
	overflow: hidden !important;
}

</style>