menduner-uniapp/pagesA/resumeOnline/trainingExperience.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="orgName" required>
				<uni-easyinput type="text" v-model="formData.orgName" placeholder="请输入内容"></uni-easyinput>
			</uni-forms-item>
      <uni-forms-item label="培训课程" name="course" required>
				<uni-easyinput type="text" v-model="formData.course" placeholder="请输入内容"></uni-easyinput>
			</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" :end="endDate" @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" @click="handleDelete">删 除</button>
      <button size="default" class="MiSans-Medium" :class="{'save-button': editId, 'commonBtnStyle': editId, 'send-button': !editId}"  @click="submit">保 存</button>
    </view>
  </view>
</template>

<script setup>
import { ref, unref } from 'vue'
import { convertYearMonthToTimestamp, timesTampChange } from '@/utils/date.js'
import { saveResumeTrainExp, deleteResumeTrainExp, getResumeTrainExp } 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 form = ref()
const date = new Date()
const endDate = date.getFullYear() + '-' + (date.getMonth() + 1) // 不可选时间

const rules = {
	orgName:{
		rules: [{required: true, errorMessage: '请输入培训中心' }]
	},
	course:{
		rules: [{required: true, errorMessage: '请输入培训课程' }]
	},
	startTime:{
		rules: [{required: true, errorMessage: '请选择培训开始时间' }]
	},
  endTime:{
		rules: [{required: true, errorMessage: '请选择培训结束时间' }]
	}
}
const getTTrainExp = async (id) => {
  const { data } = await getResumeTrainExp()
  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'
}

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

// 保存
const submit = async () => {
  const valid = await unref(form).validate()
  if (!valid) return
	const startTime = convertYearMonthToTimestamp(formData.value.startTime)
	const endTime = convertYearMonthToTimestamp(formData.value.endTime)
	if (startTime > endTime) {
    uni.showToast({ icon: 'none', title: '开始时间不能大于结束时间' })
		return
	}
  try {
		await saveResumeTrainExp({ ...formData.value, startTime, endTime })
    uni.showToast({
			icon: 'success',
			title: '保存成功'
		})
		setTimeout(() => {
      editId.value = null
      uni.navigateBack({
        delta: 1
      })
    }, 1000)
  } catch (err) {
		uni.showToast({
			icon: 'none',
			title: err.msg
		})
	}
}

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

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