menduner/src/views/recruit/enterprise/interviewManagement/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"
        :disabled-dates="disabledDates"
        :day-names="['一', '二', '三', '四', '五', '六', '七']"
        select-text="确认"
        cancel-text="取消"
        :time-picker-inline="true"
        locale="zh-CN"
        :text-input="{ format: 'MM.dd.yyyy HH:mm' }" />
    </template>
  </CtForm>
</template>

<script setup>
defineOptions({ name: 'interview-invite-form'})
import { ref } from 'vue'

const props = defineProps({
  itemData: {
    type: Object,
    default: () => {}
  },
  position: {
    type: Array,
    default: () => []
  }
})

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

const CtFormRef = ref()
const formItems = ref({
  options: [
    {
      slotName: 'time',
      key: 'time',
      value: ref(),
      rules: [v => !!v || '请选择面试时间'],
    },
    {
      type: 'autocomplete',
      key: 'jobId',
      value: null,
      label: '招聘职位 *',
      outlined: true,
      clearable: false,
      itemText: 'label',
      itemValue: 'value',
      rules: [v => !!v || '请选择招聘职位'],
      items: props.position
    },
    {
      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) {
  formItems.value.options.forEach(item => {
    item.value = props.itemData[item.key]
  })
}

const getQuery = () => {
  const obj = {}
  formItems.value.options.forEach(item => {
    obj[item.key] = item.value
  })
  obj.type = 1
  obj.id = props.itemData.id
  obj.userId = props.itemData.userId
  return obj
}

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

<style scoped lang="scss">

</style>