simplePageForm.vue 2.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111
  1. <template>
  2. <div style="width: 100%;">
  3. <CtForm ref="formPageRef" :items="items"></CtForm>
  4. </div>
  5. </template>
  6. <script setup>
  7. import { getDict } from '@/hooks/web/useDictionaries'
  8. defineOptions({name: 'inviteConfirm-simplePageForm'})
  9. import { reactive, ref } from 'vue'
  10. const formPageRef = ref()
  11. let query = reactive({})
  12. const items = ref({
  13. options: [
  14. {
  15. type: 'text',
  16. key: 'name',
  17. value: '',
  18. default: null,
  19. label: '姓名 *',
  20. outlined: true,
  21. rules: [v => !!v || '请输入姓名']
  22. },
  23. {
  24. type: 'phoneNumber',
  25. key: 'phone',
  26. value: '',
  27. clearable: true,
  28. label: '联系手机号 *',
  29. rules: [v => !!v || '请填写联系手机号']
  30. },
  31. {
  32. type: 'autocomplete',
  33. key: 'jobStatus',
  34. value: '',
  35. default: null,
  36. label: '求职状态 *',
  37. outlined: true,
  38. itemText: 'label',
  39. itemValue: 'value',
  40. dictTypeName: 'menduner_job_status',
  41. rules: [v => !!v || '请选择求职状态'],
  42. items: []
  43. },
  44. {
  45. type: 'autocomplete',
  46. key: 'expType',
  47. value: '',
  48. default: null,
  49. label: '工作经验 *',
  50. outlined: true,
  51. itemText: 'label',
  52. itemValue: 'value',
  53. dictTypeName: 'menduner_exp_type',
  54. rules: [v => !!v || '请选择工作经验'],
  55. items: []
  56. },
  57. {
  58. type: 'autocomplete',
  59. key: 'eduType',
  60. value: '',
  61. default: null,
  62. label: '最高学历 *',
  63. outlined: true,
  64. itemText: 'label',
  65. itemValue: 'value',
  66. dictTypeName: 'menduner_education_type',
  67. rules: [v => !!v || '请选择最高学历'],
  68. items: []
  69. },
  70. ]
  71. })
  72. // 获取字典内容
  73. const getDictData = async (dictTypeName) => {
  74. const item = items.value.options.find(e => e.dictTypeName === dictTypeName)
  75. if (item) {
  76. const { data } = await getDict(dictTypeName)
  77. item.items = data
  78. }
  79. }
  80. items.value.options.forEach((e) => {
  81. if (e.dictTypeName) getDictData(e.dictTypeName) // 查字典set options
  82. // formItems回显
  83. // const infoExist = baseInfo.value && Object.keys(baseInfo.value).length
  84. // if (infoExist && baseInfo.value[e.key]) e.value = baseInfo.value[e.key]
  85. // // 日期相关
  86. // if (e.type === 'datepicker') e.value = timesTampChange(e.value).slice(0, 10)
  87. // // 所在城市回显
  88. // if (infoExist && e.nameKey) e[e.nameKey] = baseInfo.value[e.nameKey]
  89. })
  90. const getQuery = async () => {
  91. const { valid } = await formPageRef.value.formRef.validate()
  92. if (!valid) return false
  93. const obj = {}
  94. items.value.options.forEach(e => {
  95. if (Object.prototype.hasOwnProperty.call(e, 'data')) return obj[e.key] = e.data
  96. obj[e.key] = e.value
  97. })
  98. query = Object.assign(query, obj)
  99. return query
  100. }
  101. defineExpose({
  102. getQuery
  103. })
  104. </script>