menduner-uniapp/pagesA/resumeOnline/educationExp.vue

<!-- 教育经历 -->
<template>
  <view class="ss-m-x-30 ss-m-y-30">
    <uni-forms ref="form" :modelValue="formData" :rules="rules" validateTrigger="bind" label-width="90px">
      <uni-forms-item label="学校名称" name="schoolName" required>
				<uni-combox :candidates="schoolData" placeholder="学校名称" v-model="formData.schoolName" @input="handleSearchSchool"></uni-combox>
			</uni-forms-item>
      <uni-forms-item label="所学专业" name="major" required>
				<uni-combox :candidates="majorData" placeholder="所学专业" v-model="formData.major" @input="handleSearchMajor"></uni-combox>
			</uni-forms-item>
      <uni-forms-item label="学历" name="educationType" required>
        <uni-data-select v-model="formData.educationType" :localdata="searchData.eduType"></uni-data-select>
			</uni-forms-item>
      <uni-forms-item label="学制类型" name="educationSystemType" required>
        <uni-data-select v-model="formData.educationSystemType" :localdata="searchData.eduSystemType"></uni-data-select>
			</uni-forms-item>
      <uni-forms-item label="开始时间" name="startTime" required>
				<picker mode="date" :value="formData.startTime" fields="month" :end="endDate" @change="e => formData.startTime = e.detail.value">
					<view class="uni-input ss-m-t-20">{{ formData.startTime }}</view>
				</picker>
			</uni-forms-item>
      <uni-forms-item label="结束时间" name="endTime" required>
				<picker mode="date" :value="formData.endTime" fields="month" @change="e => formData.endTime = e.detail.value">
					<view class="uni-input ss-m-t-20">{{ formData.endTime }}</view>
				</picker>
			</uni-forms-item>
      <uni-forms-item label="在校经历" name="content">
				<uni-easyinput type="textarea" v-model="formData.content" autoHeight  placeholder="请输入内容"></uni-easyinput>
			</uni-forms-item>
    </uni-forms>
    <view class="f-horizon-center">
      <button v-if="editId" size="default" class="delete-button commonBtnStyle MiSans-Medium" :disabled="deleteDisabled" @click="handleDelete">删 除</button>
      <button 
        size="default" 
        class="MiSans-Medium" 
        :class="{'save-button': editId, 'commonBtnStyle': editId, 'send-button': !editId}" 
        @click="submit"
        :disabled="disabled"
       >保 存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { dictObj } from '@/utils/position.js'
import { convertYearMonthToTimestamp, timesTampChange } from '@/utils/date.js'
import { schoolSearchByName, schoolMajorByName, saveResumeEduExp, getResumeEduExp, deleteResumeEduExp } from '@/api/resume.js'
import { onLoad } from '@dcloudio/uni-app'
import { cloneDeep } from 'lodash-es'

let formData = ref({
  startTime: '2014-01',
  endTime: '2018-01'
})
const editId = ref(null)
const majorData = ref([])
const schoolData = ref([])
const form = ref()
const date = new Date()
const endDate = date.getFullYear() + '-' + (date.getMonth() + 1) // 不可选时间
const searchData = ref({
  school: [],
  major: [],
  eduType: dictObj.edu.map(e => ({ text: e.label, value: e.value})),
  eduSystemType: dictObj.eduSystemType.map(e => ({ text: e.label, value: e.value}))
})

const rules = {
	schoolName:{
		rules: [{required: true, errorMessage: '请输入学校名称' }]
	},
	major:{
		rules: [{required: true, errorMessage: '请输入所学专业' }]
	},
	educationType:{
		rules: [{required: true, errorMessage: '请选择学历' }]
	},
	educationSystemType:{
		rules: [{required: true, errorMessage: '请选择学制类型' }]
	},
	startTime:{
		rules: [{required: true, errorMessage: '请选择开始时间' }]
	},
	endTime:{
		rules: [{required: true, errorMessage: '请选择结束时间' }]
	}
}
const getEduExp = async (id) => {
  const { data } = await getResumeEduExp()
  if (!data || !data.length) {
    return
  }
  const obj = data.find(e => e.id == id)
  formData.value = cloneDeep(obj)
  formData.value.startTime = obj.startTime ? timesTampChange(obj.startTime, 'Y-M') : '2014-01'
  formData.value.endTime = obj.endTime ? timesTampChange(obj.endTime, 'Y-M') : '2018-01'
  handleSearchSchool(obj.schoolName)
  handleSearchMajor(obj.major)
}

onLoad((options) => {
  if (options.id) {
    editId.value = options.id
    getEduExp(options.id)
  }
})

// 学校搜索
const handleSearchSchool = (e) => {
  if (!e) return schoolData.value = []
  schoolSearchByName({ name: e }).then(res => {
    searchData.value.school = res.data
    schoolData.value = res.data && res.data?.length ? res.data.map(e => e.value) : []
  })
}

// 专业搜索
const handleSearchMajor = (e) => {
  if (!e) return majorData.value = []
  schoolMajorByName({ name: e }).then(res => {
    searchData.value.major = res.data
    majorData.value = res.data && res.data?.length ? res.data.map(e => e.nameCn) : []
  })
}

// 保存
const disabled = ref(false)
const submit = async () => {
  const valid = await unref(form).validate()
  if (!valid) return
  formData.value.majorId = searchData.value.major.find(e => e.nameCn === formData.value.major)?.id
  formData.value.schoolId = searchData.value.school.find(e => e.value === formData.value.schoolName)?.key

  const startTime = convertYearMonthToTimestamp(formData.value.startTime)
  const endTime = convertYearMonthToTimestamp(formData.value.endTime)
  if (startTime > endTime) {
    uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间' })
    return
  }

  disabled.value = true
  try {
    
    await saveResumeEduExp({ ...formData.value, startTime, endTime })
    uni.showToast({
			icon: 'success',
			title: '保存成功'
		})
		setTimeout(() => {
      editId.value = null
      uni.navigateBack({
        delta: 1
      })
      disabled.value = false
    }, 1000)
  } catch (err) {
    disabled.value = false
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}

// 删除
const deleteDisabled = ref(false)
const handleDelete = async () => {
  deleteDisabled.value = true
	try {
		await deleteResumeEduExp(editId.value)
		uni.showToast({
			icon: 'success',
			title: '删除成功'
		})
		setTimeout(() => {
			editId.value = null
			uni.navigateBack({
				delta: 1
			})
      deleteDisabled.value = false
		}, 1000)
	} catch (err) {
    deleteDisabled.value = false
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}
</script>

<style lang="scss" scoped>
</style>