menduner/src/views/recruit/enterprise/positionManagement/components/baseInfo.vue

<template>
  <div>
    <CtForm ref="formPageRef" :items="items" style="width: 650px;">
      <template #bizId="{ item }">
        <div>
          <v-checkbox-btn
            v-model="jobFairCheckbox"
            color="primary"
            label="设置为招聘会职位"
            class="ml-2"
            :disabled="false"
            :style="`line-height: ${item.dense === 'default' ? 56 : item.dense === 'comfortable' ? 48 : 40 }px;`"
            style="width: 174px;"
            hide-details
            @update:modelValue="v => jobFairCheckboxChange(v, item)"
          ></v-checkbox-btn>
        </div>
      </template>
      <template #positionId="{ item }">
        <v-menu :close-delay="1" :open-delay="0" v-bind="$attrs">
          <template v-slot:activator="{  props }">
            <textUI
              :modelValue="item.value"
              :item="item"
              v-bind="props"
              style="position: relative;"
            ></textUI>
          </template>
          <jobTypeCard class="jobTypeCardBox" :select="[query.positionId].filter(Boolean)" :isSingle="true" @handleJobClick="handleJobClickItem"></jobTypeCard>
        </v-menu>
        <v-btn v-if="showTemplateBtn" class="ml-3 half-button" color="primary" style="margin-top: 2px;" @click="useJobTemplate(item)">职位模板</v-btn>
      </template>
      <template #expireTime="{ item }">
        <div>
          <v-checkbox-btn
            v-model="soFar"
            color="primary"
            label="长期有效"
            class="ml-2"
            :disabled="false"
            :style="`line-height: ${item.dense === 'default' ? 56 : item.dense === 'comfortable' ? 48 : 40 }px;`"
            style="width: 110px;"
            hide-details
            @update:modelValue="v => handleSoFarChange(v, item)"
          ></v-checkbox-btn>
        </div>
      </template>
    </CtForm>
  </div>
</template>

<script setup>
defineOptions({ name: 'position-add-baseInfo'})
import CtForm from '@/components/CtForm'
import { reactive, ref, watch } from 'vue'
import textUI from '@/components/FormUI/TextInput'
import jobTypeCard from '@/components/jobTypeCard'
import { getRecruitPositionDetails } from '@/api/recruit/enterprise/position'
import Confirm from '@/plugins/confirm'
import Snackbar from '@/plugins/snackbar'
import { useI18n } from '@/hooks/web/useI18n';
import { getJobFairWhiteList } from '@/api/recruit/enterprise/jobFair'

const { t } = useI18n()
const props = defineProps({
  itemData: Object,
  isFair: {
    type: Boolean,
    default: false
  }
})

const getValue = (key) => {
  return items.value.options.find(e => e.key === key)
}

const showTemplateBtn = ref(true)
const formPageRef = ref()
let query = reactive({})

const items = ref({
  options: [
    {
      slotName: 'bizId',
      type: 'autocomplete',
      key: 'bizId',
      value: null,
      label: '招聘会',
      itemText: 'title',
      itemValue: 'id',
      disabled: true,
      items: [],
    },
    {
      slotName: 'positionId',
      key: 'positionId',
      value: '',
      flexStyle: 'mt-5',
      labelKey: 'positionName',
      label: '职位类型 *',
      noParam: true,
      readonly: true,
      rules: [v => !!v || '请选择职位类型']
    },
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '职位名称 *',
      rules: [v => !!v || '请填写职位名称']
    },
    {
      type: 'datePicker',
      key: 'expireTime',
      value: null,
      format: 'YYYY-MM-DD',
      label: '到期时间 *',
      disabledDate: true,
      dayAfter: true,
      labelWidth: 120,
      slotName: 'expireTime',
    },
    {
      type: 'wangEditor',
      key: 'content',
      value: '',
      label: '岗位职责 *',
      maxLength: 5000,
      rules: '请填写岗位职责'
    },
    {
      type: 'wangEditor',
      key: 'requirement',
      value: '',
      label: '岗位要求 *',
      maxLength: 5000,
      rules: '请填写岗位要求'
    }
  ]
})

// 获取企业已加入的招聘会列表
const jobFairLoaded = ref(false)
const jobFairWhiteList = ref([])
const getJobFairData = async () => {
  const data = await getJobFairWhiteList()
  jobFairWhiteList.value = data?.length ? data : []
  jobFairLoaded.value = true
  // 没有加入任何招聘会则不展示招聘会
  if (!jobFairWhiteList.value?.length) items.value.options = items.value.options.filter(e => e.key !== 'bizId')
}
getJobFairData()

const jobFairValid = async () => {
  if (props.isFair) {
    // 招聘会内编辑职位，不需要展示选择招聘会
    items.value.options = items.value.options.filter(e => e.key !== 'bizId')
    return
  }
  // 加载招聘会白名单列表
  if (!jobFairLoaded.value) await getJobFairData()
  const bizIdObj = items.value.options.find(e => e.key === 'bizId') // 招聘会下拉框
  if (!bizIdObj) return
  bizIdObj.items = jobFairWhiteList.value // 下拉框内容赋值
  if (bizIdObj.value) {
    const index = jobFairWhiteList.value.findIndex(e => e.id === props.itemData.bizId)
    if (index === -1) bizIdObj.value = null // 招聘会已经关闭 或者已被移除招聘会白名单
    jobFairCheckboxChange(Boolean(bizIdObj.value), bizIdObj) // 招聘会回显
  }
}
jobFairValid()

// 设置为招聘会职位
// 现有逻辑：设置为招聘会职位后，职位管理编辑再修改为去掉选中招聘会不会改变数据的jobFairIds字段（用于职位列表判断是否展示招聘会标识），只有去招聘会移除才会改变jobFairIds字段。
const jobFairCheckbox = ref(false)
const jobFairCheckboxChange = (bool, item) => {
  item.value = bool ? (item?.value || null) : null
  jobFairCheckbox.value = bool
  item.disabled = bool ? false : true
  item.label = bool ? '招聘会 *' : '招聘会'
}

// 长期有效
const soFar = ref(false)
const handleSoFarChange = (bool, item) => {
  soFar.value = bool
  item.value = null
  item.disabled = bool ? true : false
  item.label = bool ? '到期时间' : '到期时间 *'
}

// 编辑回显
watch(
  () => props.itemData,
  (val) => {
    if (!Object.keys(val).length) return
    items.value.options.forEach(e => {
      if (e.labelKey) {
        query[e.key] = val[e.key]
        e.value = val[e.labelKey]
        return
      }
      if (e.noParam) return
      if (e.key === 'expireTime' && !val[e.key]) return handleSoFarChange(true, e)
      if (e.key === 'bizId' && val.source === '0') return // 非招聘会职位
      e.value = val[e.key]
    })
    // jobFairValid()  // 招聘会回显
  },
  { immediate: true },
  { deep: true }
)

// 职位类型
const handleJobClickItem = (list, name) => {
  const positionId = getValue('positionId')
  if (!list.length) {
    delete query.positionId
    positionId.value = ''
    return
  }
  showTemplateBtn.value = true
  query.positionId = list[0]
  positionId.value = name
}

const useJobTemplate = async () => {
  if (!query.positionId) return Snackbar.warning('请先选择职位类型')
  // 获取职位模板内容-赋值
  const res = await getRecruitPositionDetails(query.positionId)
  if (!res || !res.content || !res.requirement) {
    Snackbar.warning('此职位类型没有可使用的模板！')
    showTemplateBtn.value = false
    return
  }
  const content =  items.value.options.find(e => e.key === 'content')
  const requirement =  items.value.options.find(e => e.key === 'requirement')
  if ((content && content.value) || (requirement && requirement.value)) {
    // 弹窗提示
    Confirm(t('common.confirmTitle'), '您确定要放弃目前岗位描述的内容吗？').then(() => {
      content.value = res.content
      requirement.value = res.requirement
      Snackbar.success('模板填充完成！')
    })
  } else {
    // 无内容点击默认填充
    if (content) content.value = res.content
    if (requirement) requirement.value = res.requirement
    Snackbar.success('模板填充完成！')
  }
}

const getQuery = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  const obj = {
    hirePrice: 0,
    soFar: soFar.value,
    hire: false
  }
  items.value.options.forEach(e => {
    if (e.noParam || e.value === null) return
    else obj[e.key] = e.value
  })
  
  if (jobFairCheckbox.value && !obj.bizId && jobFairWhiteList.value?.length) {
    Snackbar.warning('请选择招聘会')
    return 'failed'
  }

  if (!obj.content) {
    Snackbar.warning('请填写岗位职责')
    return 'failed'
  }

  if (!obj.requirement) {
    Snackbar.warning('请填写岗位要求')
    return 'failed'
  }

  if (!obj.expireTime && !soFar.value) {
    Snackbar.warning('请填写到期时间')
    return 'failed'
  }
  
  obj.source = jobFairCheckbox.value ? '2' : '0' // 职位来源(0职位管理|1众聘职位|2招聘会)
  if (obj.source === '0')  obj.bizId = null

  Object.assign(query, obj)
  return query
}

defineExpose({
  formPageRef,
  getQuery
})
</script>

<style scoped lang="scss">
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
.calculation {
  display: block;
  width: 120px;
}
</style>