invite.vue 2.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102
  1. <template>
  2. <CtForm ref="CtFormRef" :items="formItems" style="height: 420px;">
  3. <template #time="{ item }">
  4. <VueDatePicker
  5. v-model="item.value"
  6. placeholder="面试时间 *"
  7. class="mb-4"
  8. model-type="timestamp"
  9. :text-input="{ format: 'MM.dd.yyyy HH:mm' }" />
  10. </template>
  11. </CtForm>
  12. </template>
  13. <script setup>
  14. defineOptions({ name: 'formPage'})
  15. import { ref } from 'vue'
  16. const props = defineProps({
  17. itemData: {
  18. type: Object,
  19. default: () => {}
  20. }
  21. })
  22. const CtFormRef = ref()
  23. const formItems = ref({
  24. options: [
  25. {
  26. slotName: 'time',
  27. key: 'time',
  28. value: null,
  29. rules: [v => !!v || '请选择面试时间'],
  30. },
  31. {
  32. type: 'text',
  33. key: 'position',
  34. value: '',
  35. noParam: true,
  36. disabled: true,
  37. label: '面试岗位'
  38. },
  39. {
  40. type: 'text',
  41. key: 'address',
  42. value: '',
  43. label: '面试地点 *',
  44. rules: [v => !!v || '请输入面试地点'],
  45. },
  46. {
  47. type: 'text',
  48. key: 'invitePhone',
  49. value: null,
  50. label: '联系电话 *',
  51. outlined: true,
  52. rules: [v => !!v || '请填写联系电话']
  53. },
  54. {
  55. type: 'textarea',
  56. key: 'remark',
  57. value: '',
  58. label: '备注事项',
  59. counter: 140,
  60. rules: [
  61. value => {
  62. if (value?.length <= 140) return true
  63. return '请输入备注事项,最多140字'
  64. }
  65. ]
  66. }
  67. ]
  68. })
  69. if (Object.keys(props.itemData).length) {
  70. const obj = formItems.value.options.find(e => e.key === 'position')
  71. obj.value = `${props.itemData?.job?.name}${props.itemData?.job?.areaName ? '_' + props.itemData?.job?.areaName : ''} ${props.itemData?.job?.payFrom}-${props.itemData?.job?.payTo}/${props.itemData?.job?.payName}`
  72. formItems.value.options.find(e => e.key === 'address').value = props.itemData.job?.address
  73. }
  74. const getQuery = () => {
  75. const obj = {
  76. type: 1,
  77. jobId: props.itemData.job.id,
  78. userId: props.itemData.userId,
  79. latitude: props.itemData.job?.latitude,
  80. longitude: props.itemData.job?.longitude
  81. }
  82. formItems.value.options.forEach(item => {
  83. if (item.noParam) return
  84. obj[item.key] = item.value
  85. })
  86. return obj
  87. }
  88. defineExpose({
  89. CtFormRef,
  90. getQuery
  91. })
  92. </script>
  93. <style scoped lang="scss">
  94. </style>