375 lines
11 KiB
Vue
375 lines
11 KiB
Vue
<template>
|
|
<view style="width: 100vw; overflow-x: hidden">
|
|
<u-navbar title="项目经历"></u-navbar>
|
|
<!-- 项目名称 -->
|
|
<view class="item-line">
|
|
<text class="line-label must"> 项目名称</text>
|
|
<u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" maxlength="20"
|
|
v-model="formData.projectName" placeholder="请输入" />
|
|
</view>
|
|
<!-- 项目开始时间 -->
|
|
<view class="item-line item-date" @click="dateStartShowFn">
|
|
<text class="line-label must"> 项目开始时间</text>
|
|
<u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" v-model="formData.startTime"
|
|
@click.native="dateStartShowFn" placeholder="请选择" disabled />
|
|
<view class="img">
|
|
<image style="width: 15rpx; height: 25rpx; margin-left: 30rpx" src="/static/common/img/row_right.png" />
|
|
</view>
|
|
<!-- 点击盒子 -->
|
|
<view class="input-mask"></view>
|
|
</view>
|
|
<!-- 项目结束时间 -->
|
|
<view class="item-line item-date" @click="dateEndShowFn">
|
|
<text class="line-label must"> 项目结束时间</text>
|
|
<u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" v-model="formData.endTime"
|
|
@click.native="dateEndShowFn" placeholder="请选择" disabled />
|
|
<view class="img">
|
|
<image style="width: 15rpx; height: 25rpx; margin-left: 30rpx" src="/static/common/img/row_right.png" />
|
|
</view>
|
|
<!-- 点击盒子 -->
|
|
<view class="input-mask"></view>
|
|
</view>
|
|
<!-- 担任角色 -->
|
|
<view class="item-line">
|
|
<text class="line-label must"> 担任角色</text>
|
|
<u-input :custom-style="inputStyle" type="text" input-align="right" :border="false" maxlength="20"
|
|
v-model="formData.projectPosition" placeholder="请输入" />
|
|
</view>
|
|
<!-- 工作内容 -->
|
|
<view class="item-text">
|
|
<u-input type="textarea" height="200" maxlength="500" :border="false" v-model="formData.projectDesc"
|
|
placeholder="责任描述：请输入内容,字数限制500字以内" />
|
|
</view>
|
|
<!-- 按钮 -->
|
|
<view class="btn-box">
|
|
<u-button style="width: 80%" shape="circle" type="primary" @click="addFn"
|
|
v-if="queryParams.type === 'add'">提交</u-button>
|
|
<template v-if="queryParams.type === 'edit'">
|
|
<u-button style="width: 40%" shape="circle" type="error" @click="deleteFn">
|
|
删除
|
|
</u-button>
|
|
<u-button style="width: 40%" shape="circle" type="primary" @click="editFn">
|
|
保存
|
|
</u-button>
|
|
</template>
|
|
</view>
|
|
<!-- 开始日期 -->
|
|
<u-picker v-model="dateStartShow" mode="time" :params="{
|
|
year: true,
|
|
month: true,
|
|
}" @confirm="startChangeFn"></u-picker>
|
|
<!-- 离职日期 -->
|
|
<u-picker v-model="dateEndShow" mode="time" :params="{
|
|
year: true,
|
|
month: true,
|
|
}" @confirm="endChangeFn"></u-picker>
|
|
<u-top-tips ref="uTips" :navbar-height="50"></u-top-tips>
|
|
<u-toast ref="uToast" />
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
formData: {
|
|
projectName: "", //项目名称
|
|
startTime: "", //2025-01
|
|
endTime: "", //2025-02
|
|
projectPosition: "", //职位
|
|
projectDesc: "", //工作内容
|
|
id: "",
|
|
},
|
|
inputStyle: {
|
|
lineHeight: "90rpx",
|
|
height: "90rpx",
|
|
width: "400rpx",
|
|
},
|
|
dateStartShow: false,
|
|
dateEndShow: false,
|
|
queryParams: {
|
|
type: "add",
|
|
},
|
|
};
|
|
},
|
|
onLoad(e) {
|
|
Object.assign(this.queryParams, e);
|
|
if (e.type === "edit") {
|
|
let currentRow = JSON.parse(localStorage.getItem("workRow"));
|
|
console.log(currentRow, "currentRow");
|
|
Object.assign(this.formData, currentRow);
|
|
this.formData.startTime = currentRow.startTime.slice(0, 7);
|
|
this.formData.endTime = currentRow.endTime.slice(0, 7);
|
|
}
|
|
},
|
|
methods: {
|
|
// 打开起始日期
|
|
dateStartShowFn() {
|
|
this.dateStartShow = true;
|
|
},
|
|
// 起始日期确认结果
|
|
startChangeFn(val) {
|
|
console.log(val, "start");
|
|
this.formData.startTime = val.year + "-" + val.month;
|
|
},
|
|
// 打开离职日期
|
|
dateEndShowFn() {
|
|
this.dateEndShow = true;
|
|
},
|
|
// 离职日期确认结果
|
|
endChangeFn(val) {
|
|
console.log(val, "end");
|
|
this.formData.endTime = val.year + "-" + val.month;
|
|
},
|
|
// 删除
|
|
async deleteFn() {
|
|
uni.showModal({
|
|
// title: "提示",
|
|
content: `确定删除此项目经历？`,
|
|
success: async (res) => {
|
|
if (res.confirm) {
|
|
const req = {
|
|
id: this.formData.id,
|
|
};
|
|
const res = await this.$u.apiList.DelProjectInfoApi(req);
|
|
console.log(res, "res--");
|
|
/* uni.showToast({
|
|
title: "删除成功",
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: "删除成功",
|
|
type: "success",
|
|
});
|
|
setTimeout(() => {
|
|
/* uni.redirectTo({
|
|
url: "/pages/my/personalResume/online?type=2",
|
|
}); */
|
|
uni.navigateBack({
|
|
delta: 1, // 返回上一级页面
|
|
});
|
|
}, 1000);
|
|
}
|
|
if (res.cancel) {
|
|
// console.log('用户点击取消');
|
|
}
|
|
},
|
|
});
|
|
},
|
|
validate() {
|
|
return new Promise((res, rej) => {
|
|
if (!this.formData.projectName) {
|
|
// this.$tips("项目名称不能为空", "error");
|
|
this.$refs.uToast.show({
|
|
title: "项目名称不能为空",
|
|
type: "error",
|
|
});
|
|
rej(false);
|
|
return;
|
|
}
|
|
if (!this.formData.startTime) {
|
|
// this.$tips("项目开始时间不能为空", "error");
|
|
this.$refs.uToast.show({
|
|
title: "项目开始时间不能为空",
|
|
type: "error",
|
|
});
|
|
rej(false);
|
|
return;
|
|
}
|
|
if (!this.formData.endTime) {
|
|
// this.$tips("项目结束时间不能为空", "error");
|
|
this.$refs.uToast.show({
|
|
title: "项目结束时间不能为空",
|
|
type: "error",
|
|
});
|
|
rej(false);
|
|
return;
|
|
}
|
|
if (!this.formData.projectPosition) {
|
|
// this.$tips("担任角色不能为空", "error");
|
|
this.$refs.uToast.show({
|
|
title: "担任角色不能为空",
|
|
type: "error",
|
|
});
|
|
rej(false);
|
|
return;
|
|
}
|
|
// if (!this.formData.projectDesc) {
|
|
// this.$tips("工作内容不能为空", "error");
|
|
// rej(false);
|
|
// return;
|
|
// }
|
|
// 离职时间应该大于入职时间
|
|
if (new Date(this.formData.startTime) > new Date(this.formData.endTime)) {
|
|
// this.$tips("项目开始时间不应大于项目结束时间", "error");
|
|
this.$refs.uToast.show({
|
|
title: "项目开始时间不应大于项目结束时间",
|
|
type: "error",
|
|
});
|
|
|
|
rej(false);
|
|
return;
|
|
}
|
|
res(true);
|
|
});
|
|
},
|
|
// 增加
|
|
async addFn() {
|
|
console.log("%c%s", "color:red", "发起请求");
|
|
const result = await this.validate().catch((e) => e);
|
|
console.log(result, "result--");
|
|
if (result === false) {
|
|
return;
|
|
}
|
|
const req = {
|
|
projectName: this.formData.projectName,
|
|
projectDesc: this.formData.projectDesc,
|
|
projectPosition: this.formData.projectPosition,
|
|
startTime: this.formData.startTime,
|
|
endTime: this.formData.endTime,
|
|
userId: this.vuex_user.id,
|
|
};
|
|
const res = await this.$u.apiList.AddProjectInfoApi(req);
|
|
console.log(res, "res--");
|
|
/* uni.showToast({
|
|
title: "提交成功",
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: "提交成功",
|
|
type: "success",
|
|
});
|
|
setTimeout(() => {
|
|
/* uni.redirectTo({
|
|
url: "/pages/my/personalResume/online?type=2",
|
|
}); */
|
|
uni.navigateBack({
|
|
delta: 1, // 返回上一级页面
|
|
});
|
|
}, 1000);
|
|
},
|
|
// 保存
|
|
async editFn() {
|
|
console.log("%c%s", "color:red", "发起请求");
|
|
const result = await this.validate().catch((e) => e);
|
|
console.log(result, "result--");
|
|
if (result === false) {
|
|
return;
|
|
}
|
|
const req = {
|
|
projectName: this.formData.projectName,
|
|
projectDesc: this.formData.projectDesc,
|
|
startTime: this.formData.startTime,
|
|
endTime: this.formData.endTime,
|
|
projectPosition: this.formData.projectPosition,
|
|
id: this.formData.id,
|
|
};
|
|
const res = await this.$u.apiList.UpdateProjectInfoApi(req);
|
|
console.log(res, "res--");
|
|
/* uni.showToast({
|
|
title: "保存成功",
|
|
duration: 2000,
|
|
}); */
|
|
this.$refs.uToast.show({
|
|
title: "保存成功",
|
|
type: "success",
|
|
});
|
|
setTimeout(() => {
|
|
/* uni.redirectTo({
|
|
url: "/pages/my/personalResume/online?type=2",
|
|
}); */
|
|
uni.navigateBack({
|
|
delta: 1, // 返回上一级页面
|
|
});
|
|
}, 1000);
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
// 必填的样式
|
|
.must {
|
|
position: relative;
|
|
|
|
&::before {
|
|
content: "*";
|
|
color: red;
|
|
position: absolute;
|
|
top: -10rpx;
|
|
right: -17rpx;
|
|
transform: scale(0.8);
|
|
/* 相对于父元素的左上角定位 */
|
|
}
|
|
}
|
|
|
|
// 单行样式
|
|
.item-line {
|
|
text-align: left;
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
border-bottom: 1px solid #f1f2f6;
|
|
background-color: white;
|
|
|
|
.line-label {
|
|
// font-size: 30rpx;
|
|
color: black;
|
|
}
|
|
|
|
.line-value {
|
|
// font-weight: 700;
|
|
color: #969696;
|
|
}
|
|
}
|
|
|
|
// 返校日期
|
|
.item-date {
|
|
padding-left: 30rpx;
|
|
padding-right: 30rpx;
|
|
font-size: 30rpx;
|
|
line-height: 90rpx;
|
|
height: 90rpx;
|
|
display: flex;
|
|
position: relative;
|
|
background-color: white;
|
|
|
|
.input-mask {
|
|
position: absolute;
|
|
width: 100%;
|
|
height: 90rpx;
|
|
// background-color: red;
|
|
}
|
|
|
|
.img {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 15rpx;
|
|
// padding-right: 30rpx;
|
|
}
|
|
}
|
|
|
|
.item-text {
|
|
background-color: white;
|
|
padding: 30rpx;
|
|
}
|
|
|
|
// 按钮
|
|
.btn-box {
|
|
position: fixed;
|
|
width: 100%;
|
|
bottom: 0;
|
|
height: 150rpx;
|
|
border-top: 1px solid #f1f2f6;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background-color: white;
|
|
}
|
|
</style>
|