381 lines
11 KiB
Vue
381 lines
11 KiB
Vue
<template>
|
||
<AppLayout
|
||
title="添加工作经历"
|
||
border
|
||
back-gorund-color="#ffffff"
|
||
:show-bg-image="false"
|
||
>
|
||
<template #headerleft>
|
||
<view class="btn mar_le20 button-click" @click="navBack">取消</view>
|
||
</template>
|
||
<template #headerright>
|
||
<view class="btn mar_ri20 button-click" @click="handleConfirm">确认</view>
|
||
</template>
|
||
<view class="content">
|
||
<view class="content-input">
|
||
<view class="input-titile">公司名称</view>
|
||
<input class="input-con" v-model="formData.companyName" maxlength="200" placeholder-style="font-size: 16px" placeholder="请输入公司名称" />
|
||
</view>
|
||
<view class="content-input">
|
||
<view class="input-titile">职位名称</view>
|
||
<input class="input-con" v-model="formData.position" maxlength="100" placeholder-style="font-size: 16px" placeholder="请输入职位名称" />
|
||
</view>
|
||
<view class="content-input">
|
||
<view class="input-titile">工作时间</view>
|
||
<view class="date-range-container">
|
||
<picker mode="date" :value="startDate === '至今' ? currentDate : startDate" :start="minDate" :end="currentDate" @change="bindStartDateChange">
|
||
<view class="date-picker-item">
|
||
<text class="date-label">开始时间</text>
|
||
<view class="date-display" :class="{ 'current-text': startDate === '至今' }">{{startDate || '请选择开始时间'}}</view>
|
||
</view>
|
||
</picker>
|
||
<view class="date-separator">至</view>
|
||
<picker mode="date" :value="endDate === '至今' ? currentDate : endDate" :start="startDate === '至今' ? minDate : startDate" :end="currentDate" @change="bindEndDateChange">
|
||
<view class="date-picker-item">
|
||
<text class="date-label">结束时间</text>
|
||
<view class="date-display" :class="{ 'current-text': endDate === '至今' }">{{endDate}}</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<view class="content-input">
|
||
<view class="input-titile">工作描述</view>
|
||
<!-- <input class="input-con" placeholder="请输入工作描述" /> -->
|
||
<textarea class="textarea-con" v-model="formData.description" placeholder-style="font-size: 16px" maxlength="500" placeholder="请输入工作描述"/>
|
||
</view>
|
||
</view>
|
||
</AppLayout>
|
||
|
||
</template>
|
||
|
||
<script setup>
|
||
import { reactive, inject, watch, ref, onMounted, computed } from 'vue';
|
||
import { onLoad, onShow } from '@dcloudio/uni-app';
|
||
import SelectJobs from '@/components/selectJobs/selectJobs.vue';
|
||
import useUserStore from '@/stores/useUserStore';
|
||
|
||
const { $api, navTo, navBack, config } = inject('globalFunction');
|
||
const { userInfo } = useUserStore();
|
||
|
||
// 页面参数
|
||
const pageType = ref('add'); // add: 添加, edit: 编辑
|
||
const editData = ref(null); // 编辑时的数据
|
||
|
||
// 获取当前日期
|
||
const getDate = (options = {}) => {
|
||
const date = new Date();
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
|
||
if (options.format) {
|
||
return `${year}-${month}-${day}`;
|
||
}
|
||
return date;
|
||
};
|
||
|
||
const currentDate = getDate({ format: true });
|
||
const minDate = '1990-01-01'; // 开始时间最早只能选择到1990年
|
||
|
||
// 定义响应式数据
|
||
const startDate = ref(''); // 开始时间需要选择
|
||
const endDate = ref('至今'); // 结束时间默认为"至今"
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
companyName: '',
|
||
position: '',
|
||
userId: '', // 将在确认时动态获取
|
||
startDate: '',
|
||
endDate: '至今', // 设置默认值为"至今"
|
||
description: ''
|
||
});
|
||
|
||
// 页面加载时解析参数
|
||
onLoad((options) => {
|
||
console.log('页面参数:', options);
|
||
|
||
// 解析页面类型
|
||
if (options.type) {
|
||
pageType.value = options.type;
|
||
}
|
||
|
||
// 如果是编辑模式，解析传递的数据
|
||
if (options.type === 'edit' && options.data) {
|
||
try {
|
||
editData.value = JSON.parse(decodeURIComponent(options.data));
|
||
console.log('编辑数据:', editData.value);
|
||
|
||
// 回显数据到表单
|
||
if (editData.value) {
|
||
formData.companyName = editData.value.companyName || '';
|
||
formData.position = editData.value.position || '';
|
||
formData.startDate = editData.value.startDate || '';
|
||
formData.endDate = editData.value.endDate || '至今';
|
||
formData.description = editData.value.description || '';
|
||
|
||
// 同步日期选择器的显示
|
||
startDate.value = editData.value.startDate || '';
|
||
endDate.value = editData.value.endDate || '至今';
|
||
}
|
||
} catch (error) {
|
||
console.error('解析编辑数据失败:', error);
|
||
$api.msg('数据解析失败');
|
||
}
|
||
}
|
||
});
|
||
|
||
const state = reactive({
|
||
lfsalay: [2, 5, 10, 15, 20, 25, 30, 50],
|
||
risalay: [2, 5, 10, 15, 20, 25, 30, 50], // 修复未定义的salay变量
|
||
salayText: '',
|
||
areaText: '',
|
||
jobsText: []
|
||
});
|
||
|
||
// 开始日期选择器变化事件
|
||
const bindStartDateChange = (e) => {
|
||
const selectedDate = e.detail.value;
|
||
if (selectedDate === currentDate) {
|
||
// 如果选择的是今天，设置为"至今"
|
||
startDate.value = '至今';
|
||
formData.startDate = '至今';
|
||
} else {
|
||
startDate.value = selectedDate;
|
||
formData.startDate = selectedDate;
|
||
}
|
||
// 如果结束日期早于开始日期且结束日期不是"至今"，清空结束日期
|
||
if (endDate.value && endDate.value !== '至今' && endDate.value < startDate.value) {
|
||
endDate.value = '至今';
|
||
formData.endDate = '至今';
|
||
}
|
||
};
|
||
|
||
// 结束日期选择器变化事件
|
||
const bindEndDateChange = (e) => {
|
||
const selectedDate = e.detail.value;
|
||
if (selectedDate === currentDate) {
|
||
// 如果选择的是今天，设置为"至今"
|
||
endDate.value = '至今';
|
||
formData.endDate = '至今';
|
||
} else {
|
||
endDate.value = selectedDate;
|
||
formData.endDate = selectedDate;
|
||
}
|
||
};
|
||
|
||
// 确认保存工作经历
|
||
const handleConfirm = async () => {
|
||
// 表单验证
|
||
if (!formData.companyName.trim()) {
|
||
$api.msg('请输入公司名称');
|
||
return;
|
||
}
|
||
if (!formData.position.trim()) {
|
||
$api.msg('请输入职位名称');
|
||
return;
|
||
}
|
||
if (!formData.startDate) {
|
||
$api.msg('请选择开始时间');
|
||
return;
|
||
}
|
||
if (!formData.description.trim()) {
|
||
$api.msg('请输入工作描述');
|
||
return;
|
||
}
|
||
console.log(userInfo.userId)
|
||
// 调试：打印表单数据
|
||
console.log('表单数据:', formData);
|
||
console.log('结束时间:', formData.endDate);
|
||
|
||
try {
|
||
// 处理结束时间：如果是"至今"，则使用当前日期
|
||
const endDateValue = formData.endDate === '至今' ? currentDate : formData.endDate;
|
||
console.log('处理后的结束时间:', endDateValue);
|
||
|
||
// 准备请求参数（不包含userId，让后端通过token获取）
|
||
const params = {
|
||
companyName: formData.companyName.trim(),
|
||
position: formData.position.trim(),
|
||
startDate: formData.startDate,
|
||
endDate: endDateValue, // 使用处理后的结束时间
|
||
description: formData.description.trim()
|
||
};
|
||
|
||
console.log('请求参数:', params);
|
||
console.log('页面类型:', pageType.value);
|
||
|
||
let resData;
|
||
alert(editData.value.id)
|
||
// 根据页面类型调用不同的接口
|
||
if (pageType.value === 'edit' && editData.value?.id) {
|
||
// 编辑模式：调用更新接口
|
||
resData = await $api.createRequest(`/app/userworkexperiences/edit`, {...params, id: editData.value.id}, 'put');
|
||
console.log('编辑接口响应:', resData);
|
||
} else {
|
||
// 添加模式：调用新增接口
|
||
resData = await $api.createRequest('/app/userworkexperiences/add', params, 'post');
|
||
console.log('新增接口响应:', resData);
|
||
}
|
||
|
||
if (resData.code === 200) {
|
||
$api.msg(pageType.value === 'edit' ? '工作经历更新成功' : '工作经历保存成功');
|
||
// 返回上一页
|
||
navBack();
|
||
} else {
|
||
$api.msg(resData.msg || '操作失败');
|
||
}
|
||
} catch (error) {
|
||
console.error('保存工作经历失败:', error);
|
||
$api.msg('保存失败，请重试');
|
||
}
|
||
};
|
||
|
||
</script>
|
||
|
||
<style lang="stylus" scoped>
|
||
.content{
|
||
padding: 28rpx;
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: flex-start
|
||
height: calc(100% - 120rpx)
|
||
}
|
||
.content-input
|
||
margin-bottom: 52rpx
|
||
.input-titile
|
||
font-weight: 400;
|
||
font-size: 28rpx;
|
||
color: #6A6A6A;
|
||
.input-con
|
||
font-weight: 400;
|
||
font-size: 32rpx;
|
||
color: #333333;
|
||
line-height: 80rpx;
|
||
height: 80rpx;
|
||
border-bottom: 2rpx solid #EBEBEB
|
||
position: relative;
|
||
.triangle::before
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: calc(50% - 2rpx);
|
||
content: '';
|
||
width: 4rpx;
|
||
height: 18rpx;
|
||
border-radius: 2rpx
|
||
background: #697279;
|
||
transform: translate(0, -50%) rotate(-45deg) ;
|
||
.triangle::after
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
content: '';
|
||
width: 4rpx;
|
||
height: 18rpx;
|
||
border-radius: 2rpx
|
||
background: #697279;
|
||
transform: rotate(45deg)
|
||
.textarea-con
|
||
border: 2rpx solid #EBEBEB
|
||
width: 95%
|
||
height: 400rpx
|
||
margin-top: 20rpx
|
||
padding: 15rpx
|
||
|
||
.date-range-container
|
||
display: flex
|
||
align-items: flex-end
|
||
justify-content: space-between
|
||
margin-top: 20rpx
|
||
position: relative
|
||
border-bottom: 2rpx solid #EBEBEB
|
||
|
||
.date-picker-item
|
||
flex: 1
|
||
display: flex
|
||
flex-direction: column
|
||
align-items: center
|
||
|
||
.date-label
|
||
font-size: 24rpx
|
||
color: #999999
|
||
margin-bottom: 10rpx
|
||
|
||
.date-display
|
||
width: 100%
|
||
height: 80rpx
|
||
line-height: 80rpx
|
||
font-size: 32rpx
|
||
color: #333333
|
||
text-align: center
|
||
position: relative
|
||
|
||
&.current-text
|
||
color: #256BFA
|
||
font-weight: 500
|
||
|
||
.date-separator
|
||
position: absolute
|
||
left: 50%
|
||
bottom: 40rpx
|
||
transform: translateX(-50%)
|
||
font-size: 28rpx
|
||
color: #666666
|
||
background-color: #ffffff
|
||
padding: 0 10rpx
|
||
z-index: 2
|
||
height: 20rpx
|
||
line-height: 20rpx
|
||
display: flex
|
||
align-items: center
|
||
// .content-sex
|
||
// height: 110rpx;
|
||
// display: flex
|
||
// justify-content: space-between;
|
||
// align-items: flex-start;
|
||
// border-bottom: 2rpx solid #EBEBEB
|
||
// margin-bottom: 52rpx
|
||
// .sex-titile
|
||
// line-height: 80rpx;
|
||
// .sext-ri
|
||
// display: flex
|
||
// align-items: center;
|
||
// .sext-box
|
||
// height: 76rpx;
|
||
// width: 152rpx;
|
||
// text-align: center;
|
||
// line-height: 80rpx;
|
||
// border-radius: 12rpx 12rpx 12rpx 12rpx
|
||
// border: 2rpx solid #E8EAEE;
|
||
// margin-left: 28rpx
|
||
// font-weight: 400;
|
||
// font-size: 28rpx;
|
||
// .sext-boxactive
|
||
// color: #256BFA
|
||
// background: rgba(37,107,250,0.1);
|
||
// border: 2rpx solid #256BFA;
|
||
// .next-btn
|
||
// width: 100%;
|
||
// height: 90rpx;
|
||
// background: #256BFA;
|
||
// border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
// font-weight: 500;
|
||
// font-size: 32rpx;
|
||
// color: #FFFFFF;
|
||
// text-align: center;
|
||
// line-height: 90rpx
|
||
// .input-nx
|
||
// position: relative
|
||
// border-bottom: 2rpx solid #EBEBEB
|
||
// padding-bottom: 30rpx
|
||
// display: flex
|
||
// flex-wrap: wrap
|
||
// .nx-item
|
||
// padding: 20rpx 28rpx
|
||
// width: fit-content
|
||
// border-radius: 12rpx 12rpx 12rpx 12rpx;
|
||
// border: 2rpx solid #E8EAEE;
|
||
// margin-right: 24rpx
|
||
// margin-top: 24rpx
|
||
</style>
|