menduner/src/views/recruit/enterprise/resume/components/invite.vue

<template>
  <CtForm ref="CtFormRef" :items="formItems" style="height: 520px;">
    <template #time="{ item }">
      <VueDatePicker 
        v-model="item.value"
        placeholder="面试时间 *"
        class="mb-4"
        model-type="timestamp"
        :time-picker-inline="true"
        :disabled-dates="disabledDates"
        :day-names="['一', '二', '三', '四', '五', '六', '七']"
        select-text="确认"
        cancel-text="取消"
        locale="zh-CN"
        :text-input="{ format: 'MM.dd.yyyy HH:mm' }"
      >
      </VueDatePicker>
    </template>
  </CtForm>
</template>

<script setup>
defineOptions({ name: 'formPage'})
import { ref } from 'vue'

const props = defineProps({
  itemData: {
    type: Object,
    default: () => {}
  }
})

// 过去的日期不可选
const disabledDates = (date) => {
  const currentDate = new Date()
  currentDate.setDate(currentDate.getDate() - 1)
  return date.getTime() < currentDate.getTime()
}

const CtFormRef = ref()
const formItems = ref({
  options: [
    {
      type: 'ifRadio',
      key: 'type',
      value: '0',
      label: '发送方式 *',
      width: 90,
      noParam: true,
      items: [
        { label: '短信', value: '0' },
        { label: '邮箱', value: '1' }
      ]
    },
    {
      slotName: 'time',
      key: 'time',
      value: null,
      rules: [v => !!v || '请选择面试时间'],
    },
    {
      type: 'text',
      key: 'position',
      value: '',
      noParam: true,
      disabled: true,
      label: '面试岗位'
    },
    {
      type: 'text',
      key: 'address',
      value: '',
      label: '面试地点 *',
      rules: [v => !!v || '请输入面试地点'],
    },
    {
      type: 'text',
      key: 'invitePhone',
      value: null,
      label: '联系电话 *',
      outlined: true,
      rules: [v => !!v || '请填写联系电话']
    },
    {
      type: 'textarea',
      key: 'remark',
      value: '',
      label: '备注事项',
      counter: 140,
      rules: [
        value => {
          if (value?.length <= 140) return true
          return '请输入备注事项，最多140字'
        }
      ]
    }
  ]
})

if (Object.keys(props.itemData).length) {
  const obj = formItems.value.options.find(e => e.key === 'position')
  const salary = props.itemData?.job?.payFrom && props.itemData?.job?.payTo ? `${props.itemData?.job?.payFrom ? props.itemData?.job?.payFrom + '-' : ''}${props.itemData?.job?.payTo}${props.itemData?.job?.payName ? '/' + props.itemData?.job?.payName : ''}` : '面议'
  obj.value = `${props.itemData?.job?.name}${props.itemData?.job?.areaName ? '_' + props.itemData?.job?.areaName : ''} ${salary}`
  formItems.value.options.find(e => e.key === 'address').value = props.itemData.job?.address

  const baseInfo = localStorage.getItem('entBaseInfo')
  if (baseInfo) {
    const { phone } = JSON.parse(baseInfo)
    formItems.value.options.find(e => e.key === 'invitePhone').value = phone
  }
}

const getQuery = () => {
  const obj = {
    type: 1,
    jobId: props.itemData.job.id,
    userId: props.itemData.userId,
    latitude: props.itemData.job?.latitude,
    longitude: props.itemData.job?.longitude
  }
  formItems.value.options.forEach(item => {
    if (item.noParam) return
    obj[item.key] = item.value
  })
  return obj
}

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

<style scoped lang="scss">

</style>