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

<template>
  <div>
    <CtForm ref="formPageRef" :items="items" style="width: 600px;">
      <template #enterpriseName="{ item }">
        <div class="mb-4">
          <span style="color: var(--color-666);">公司：</span>
          <span style="color: #555">{{ item.value }}</span>
        </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>
      </template>
    </CtForm>
  </div>
</template>

<script setup>
defineOptions({ name: 'position-add-baseInfo'})
import CtForm from '@/components/CtForm'
import { reactive, ref, defineExpose, watch } from 'vue'
import textUI from '@/components/FormUI/TextInput'
import jobTypeCard from '@/components/jobTypeCard'

const props = defineProps({
  itemData: Object
})

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

// 众聘奖励类型
const handleChangeHireType = () => {
  const hireType = getValue('hireType')
  let hirePrice = getValue('hirePrice')
  let hirePoint = getValue('hirePoint')
  if (hireType.value === '0') {
    hirePrice.hide = false
    hirePoint.hide = true
    hirePoint.value = null
  } else {
    hirePoint.hide = false
    hirePrice.hide = true
    hirePrice.value = null
  }
}

// 是否众聘岗位
const handleChangePublic = (editHire) => {
  const hire = getValue('hire').value
  const hireType = getValue('hireType')
  const hirePrice = getValue('hirePrice')
  const hirePoint = getValue('hirePoint')
  if (editHire && editHire.hire) {
    hireType.hide = false
    hireType.value = editHire.hirePoint ? '1' : '0'
    handleChangeHireType()
  } else hireType.hide = hire === '1' ? false : true
  if (hire === '0') {
    hireType.value = '0'
    hirePoint.value = null
    hirePrice.value = null
    hirePoint.hide = true
    hirePrice.hide = true
  }
}

const formPageRef = ref()
let query = reactive({})
const items = ref({
  options: [
    {
      type: 'ifRadio',
      key: 'hire',
      value: '0',
      label: '众聘岗位 *',
      width: 90,
      items: [
        { label: '是', value: '1' },
        { label: '否', value: '0' }
      ],
      change: handleChangePublic
    },
    {
      type: 'ifRadio',
      key: 'hireType',
      value: '0',
      label: '众聘奖励类型 *',
      width: 120,
      hide: true,
      noParam: true,
      items: [
        { label: '赏金', value: '0' },
        { label: '积分', value: '1' }
      ],
      change: handleChangeHireType
    },
    {
      type: 'number',
      key: 'hirePrice',
      value: null,
      label: '众聘赏金 *',
      suffix: '元',
      hide: true,
      rules: [
        value => {
          if (value) return true
          return '请填写众聘赏金'
        },
        value => {
          if (value >= 1) return true
          return '赏金金额不得小于1'
        }
      ]
    },
    {
      type: 'number',
      key: 'hirePoint',
      value: null,
      label: '众聘奖励积分数 *',
      suffix: '点',
      hide: true,
      rules: [
        value => {
          if (value) return true
          return '请填写众聘众聘奖励积分数'
        },
        value => {
          if (value >= 1) return true
          return '积分数不得小于1'
        }
      ]
    },
    {
      type: 'text',
      key: 'name',
      value: '',
      label: '职位名称 *',
      rules: [v => !!v || '请填写职位名称']
    },
    {
      slotName: 'positionId',
      key: 'positionId',
      value: '',
      labelKey: 'positionName',
      label: '职位类型 *',
      noParam: true,
      rules: [v => !!v || '请选择职位类型']
    },
    {
      type: 'datePicker',
      key: 'expireTime',
      value: null,
      class: 'mb-3',
      options: {
        format: 'timestamp',
        placeholder: '到期时间 *',
      },
      rules: [v => !!v || '请选择到期时间']
    },
    {
      type: 'textarea',
      key: 'content',
      rows: 10,
      value: '',
      label: '岗位职责 *',
      counter: 5000,
      clearable: true,
      rules: [
        value => {
          if (value) return true
          return '请输入岗位职责'
        },
        value => {
          if (value?.length <= 5000) return true
          return '请输入2-5000个字符'
        }
      ]
    },
    {
      type: 'textarea',
      key: 'requirement',
      rows: 10,
      value: '',
      label: '岗位要求 *',
      counter: 5000,
      clearable: true,
      rules: [
        value => {
          if (value) return true
          return '请输入岗位要求'
        },
        value => {
          if (value?.length <= 5000) return true
          return '请输入2-5000个字符'
        }
      ]
    }
  ]
})

const setValue = (key, value) => {
  items.value.options.find(e => e.key === key).value = value
}

// 编辑回显
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 === 'hire') {
        e.value = val[e.key] ? '1' : '0'
      }
      else e.value = val[e.key]
    })
    handleChangePublic(val)
  },
  { immediate: true },
  { deep: true }
)

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

const getQuery = async () => {
  const { valid } = await formPageRef.value.formRef.validate()
  if (!valid) return
  const obj = {}
  items.value.options.forEach(e => {
    if (e.noParam) return
    if (e.key === 'hire') obj[e.key] = e.value === '1' ? true : false
    else obj[e.key] = e.value
  })
  query = Object.assign(query, obj)
  return query
}

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

<style scoped lang="scss">
.enterpriseName {
  color: var(--color-666);
}
.jobTypeCardBox {
  position: absolute;
  top: -22px;
  left: 0;
}
</style>