educationExp.vue 5.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177
  1. <template>
  2. <view class="f-straight wrapper">
  3. <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px">
  4. <uni-forms-item label="学校名称" name="schoolName" required>
  5. <uni-combox :candidates="schoolData" placeholder="学校名称" v-model="formData.schoolName" @input="handleSearchSchool"></uni-combox>
  6. </uni-forms-item>
  7. <uni-forms-item label="所学专业" name="major" required>
  8. <uni-combox :candidates="majorData" placeholder="所学专业" v-model="formData.major" @input="handleSearchMajor"></uni-combox>
  9. </uni-forms-item>
  10. <uni-forms-item label="学历" name="educationType" required>
  11. <uni-data-select v-model="formData.educationType" :localdata="searchData.eduType"></uni-data-select>
  12. </uni-forms-item>
  13. <uni-forms-item label="学制类型" name="educationSystemType" required>
  14. <uni-data-select v-model="formData.educationSystemType" :localdata="searchData.eduSystemType"></uni-data-select>
  15. </uni-forms-item>
  16. <uni-forms-item label="开始时间" name="startTime" required>
  17. <picker mode="date" :value="formData.startTime" fields="month" :end="endDate" @change="e => formData.startTime = e.detail.value">
  18. <view class="uni-input ss-m-t-20">{{ formData.startTime }}</view>
  19. </picker>
  20. </uni-forms-item>
  21. <uni-forms-item label="结束时间" name="endTime" required>
  22. <picker mode="date" :value="formData.endTime" fields="month" @change="e => formData.endTime = e.detail.value">
  23. <view class="uni-input ss-m-t-20">{{ formData.endTime }}</view>
  24. </picker>
  25. </uni-forms-item>
  26. <uni-forms-item label="在校经历" name="content">
  27. <uni-easyinput type="textarea" v-model="formData.content" autoHeight placeholder="请输入内容"></uni-easyinput>
  28. </uni-forms-item>
  29. </uni-forms>
  30. </view>
  31. </template>
  32. <script setup>
  33. import { cloneDeep } from 'lodash-es'
  34. import { ref, watch, unref } from 'vue'
  35. import { dictObj } from '@/utils/position.js'
  36. import { convertYearMonthToTimestamp, timesTampChange } from '@/utils/date.js'
  37. import { removeEmptyProperties } from "@/utils/index"
  38. const props = defineProps({
  39. id: {
  40. type: String,
  41. default: ''
  42. },
  43. text: {
  44. type: String,
  45. default: ''
  46. },
  47. data: {
  48. type: Object,
  49. default: () => ({})
  50. }
  51. })
  52. let formData = ref({
  53. startTime: '2014-01',
  54. endTime: '2018-01'
  55. })
  56. const majorData = ref([])
  57. const schoolData = ref([])
  58. const form = ref()
  59. const date = new Date()
  60. const endDate = date.getFullYear() + '-' + (date.getMonth() + 1) // 不可选时间
  61. const searchData = ref({
  62. school: [],
  63. major: [],
  64. eduType: dictObj.edu.map(e => ({ text: e.label, value: e.value})),
  65. eduSystemType: dictObj.eduSystemType.map(e => ({ text: e.label, value: e.value}))
  66. })
  67. const getInfo = (data) => {
  68. data.startTime = data.startTime ? timesTampChange(data.startTime, 'Y-M') : '2014-01'
  69. data.endTime = data.endTime ? timesTampChange(data.endTime, 'Y-M') : '2018-01'
  70. formData.value = cloneDeep(data) || {
  71. startTime: '2014-01',
  72. endTime: '2018-01'
  73. }
  74. }
  75. watch(
  76. () => props.data,
  77. (newVal) => {
  78. if (newVal && Object.keys(newVal)) {
  79. const data = removeEmptyProperties(newVal)
  80. getInfo(data)
  81. }
  82. },
  83. { immediate: true },
  84. )
  85. const rules = {
  86. schoolName:{
  87. rules: [{required: true, errorMessage: '请输入学校名称' }]
  88. },
  89. major:{
  90. rules: [{required: true, errorMessage: '请输入所学专业' }]
  91. },
  92. educationType:{
  93. rules: [{required: true, errorMessage: '请选择学历' }]
  94. },
  95. educationSystemType:{
  96. rules: [{required: true, errorMessage: '请选择学制类型' }]
  97. },
  98. startTime:{
  99. rules: [{required: true, errorMessage: '请选择开始时间' }]
  100. },
  101. endTime:{
  102. rules: [{required: true, errorMessage: '请选择结束时间' }]
  103. }
  104. }
  105. // 学校搜索
  106. const handleSearchSchool = (e) => {
  107. if (!e) return schoolData.value = []
  108. schoolSearchByName({ name: e }).then(res => {
  109. searchData.value.school = res.data
  110. schoolData.value = res.data && res.data?.length ? res.data.map(e => e.value) : []
  111. })
  112. }
  113. // 专业搜索
  114. const handleSearchMajor = (e) => {
  115. if (!e) return majorData.value = []
  116. schoolMajorByName({ name: e }).then(res => {
  117. searchData.value.major = res.data
  118. majorData.value = res.data && res.data?.length ? res.data.map(e => e.nameCn) : []
  119. })
  120. }
  121. const submit = async () => {
  122. try {
  123. const valid = await unref(form).validate()
  124. // if (!valid) return { id: props.id, data: null}
  125. const startTime = convertYearMonthToTimestamp(formData.value.startTime)
  126. const endTime = convertYearMonthToTimestamp(formData.value.endTime)
  127. if (startTime > endTime) {
  128. uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间' })
  129. return
  130. }
  131. return { id: props.id, data: { ...formData.value, startTime, endTime }}
  132. } catch (error) {
  133. return { text: props.text }
  134. }
  135. }
  136. defineExpose({
  137. id: props.id,
  138. submit
  139. })
  140. </script>
  141. <style lang="less" scoped>
  142. .wrapper{
  143. padding: 15px;
  144. // padding-top: 30px;
  145. }
  146. .upload-img{
  147. position: relative;
  148. width: 200rpx;
  149. height: 200rpx;
  150. border: 1px solid #f1f1f1;
  151. margin: 10rpx;
  152. }
  153. .upload-file{
  154. width: 200rpx;
  155. height: 200rpx;
  156. border: 1px solid #f1f1f1;
  157. margin: 10rpx;
  158. display: flex;
  159. justify-content: center;
  160. align-items: center;
  161. border-radius: 10rpx;
  162. }
  163. </style>