提交11月3日

This commit is contained in:
wuzhimiao
2025-11-03 09:32:51 +08:00
parent 228800c214
commit 97922abde8
8 changed files with 1171 additions and 642 deletions

View File

@@ -4,48 +4,30 @@
* @LastEditTime: 2025-05-07 09:33:39
-->
<template>
<view class="input-outer-part">
<scroll-view scroll-y="true" :style="{height: edit?'calc(90vh - 150px)':'calc(100vh - 144px)'}">
<view class="container">
<scroll-view scroll-y="true" :style="{height: edit?'calc(90vh - 150px)':'calc(100vh - 144px)', backgroundColor: '#eef1f5'}">
<view class="inner">
<view class="part-title" style="display: flex;justify-content: space-between;">培训需求信息
<view v-if="!edit&&formData.id&&formData.currentStatus!=3" class="btn"
style="font-weight: normal;display: flex;" @click="edit=true">编辑<u-icon name="edit-pen"
color="#A6A6A6"></u-icon></view>
style="font-weight: normal;display: flex;" @click="edit=true">编辑<view class="icon-right"></view></view>
</view>
<view class="inner-part">
<u--form labelPosition="left" :model="formData" :rules="rules" ref="uForm" class="self-form"
labelWidth="120">
<u-form-item label="姓名" prop="personName" required
v-if="$store.getters.roles.includes('shequn'|| $store.getters.roles.includes('gly'))">
<view style="width: 100%;" @click="openPersonChooser"
<view class="self-form">
<view class="form-item">
<view class="form-label">姓名 <text class="required">*</text></view>
<view v-if="name" style="width: 100%;"
class="disabledLine">
{{ formData.personName || '请选择' }}
</view>
<view v-else style="width: 100%;" @click="openPersonChooser"
:class="{disabledLine: !edit||!canChoosePerson, noValue: !formData.personName}">
{{ formData.personName || '请选择' }}
</view>
<u-icon slot="right" name="edit-pen" color="#A6A6A6"></u-icon>
</u-form-item>
<!-- <u-form-item label="需求标题" prop="demandTitle" required>
<u--textarea :disabled="!edit" v-model="formData.demandTitle"
placeholder="请输入"></u--textarea>
<u-icon slot="right" name="edit-pen" color="#A6A6A6"></u-icon>
</u-form-item -->
<!-- <u-form-item label="有无创业指导需求" prop="isWillingnessReceiveTraining" required>
<u-radio-group :disabled="!edit" v-model="formData.isWillingnessReceiveTraining"
placement="row">
<u-radio :customStyle="{marginRight: '16px'}" label="是" name="是" value="1"></u-radio>
<u-radio :customStyle="{marginRight: '16px'}" label="否" name="否" value="0"></u-radio>
</u-radio-group>
</u-form-item>
<u-form-item label="是否接受推荐工作" prop="isAcceptRecommendedJobs" required>
<u-radio-group :disabled="!edit" v-model="formData.isAcceptRecommendedJobs" placement="row">
<u-radio :customStyle="{marginRight: '16px'}" label="是" name="是" value="1"></u-radio>
<u-radio :customStyle="{marginRight: '16px'}" label="否" name="否" value="0"></u-radio>
</u-radio-group>
</u-form-item> -->
<u-form-item label="培训意愿工种" prop="qwpxgz" required>
<view class="icon-right"></view>
</view>
<view class="form-item">
<view class="form-label">培训意愿工种 <text class="required">*</text></view>
<picker
mode="multiSelector"
:range="workTypeColumns"
@@ -56,39 +38,33 @@
v-if="workTypeColumns[0] && workTypeColumns[0].length"
>
<view class="picker-view">
<text>{{ formData.qwpxgzName || '请选择工种' }}</text>
<view class="picker-view-text">{{ formData.qwpxgzName || '请选择工种' }}</view>
<view class="icon-right"></view>
</view>
</picker>
<view v-else class="picker-view">
<text>工种数据加载中...</text>
<view class="picker-view-text">工种数据加载中...</view>
</view>
</u-form-item>
<u-form-item label="期望培训时间" prop="qwpxsj" required>
<view class="bordered" style="width: 100%" @click="showTime = true"
:class="{ noValue: !formData.qwpxsj }">
{{ formData.qwpxsj || "请选择" }}</view>
<view class="icon-right"></view>
</u-form-item>
</u--form>
<u--form labelPosition="left" class="self-form" labelWidth="110">
<u-form-item label="需求说明" prop="jobDescription">
<u-textarea :disabled="!edit" v-model="formData.jobDescription" placeholder="请输入"></u-textarea>
</u-form-item>
</u--form>
</view>
<view class="form-item">
<view class="form-label">期望培训时间 <text class="required">*</text></view>
<picker mode="date" :value="formData.qwpxsj" start="1900-01-01" end="2100-12-31" @change="onDateChange">
<view class="date-picker-wrapper" :class="{ noValue: !formData.qwpxsj }">
<view v-if="formData.qwpxsj" class="date-value">{{ formData.qwpxsj }}</view>
<view v-else>请选择</view>
<view class="icon-right"></view>
</view>
</picker>
</view>
<view class="form-item">
<view class="form-label">需求说明 <text class="required">*</text></view>
<textarea :disabled="!edit" v-model="formData.jobDescription" placeholder="请输入" :class="['form-textarea', { 'form-textarea-disabled': !edit }]"></textarea>
</view>
</view>
</view>
</view>
<!-- <view class="inner">
<view class="part-title" style="margin-top: 32rpx;">附件信息</view>
<view class="inner-part">
<u--form labelPosition="left" class="self-form" labelWidth="110">
<u-form-item label="附件" prop="fileUrl">
<ImageUpload :fileList="fileList" @update="changeFile" :maxCount="6" />
</u-form-item>
</u--form>
</view>
</view> -->
<!-- 办理完成后 需求说明 -->
<req-comp :form="{
@@ -99,14 +75,6 @@
}" />
</scroll-view>
<u-datetime-picker :show="show.qwpxsj" v-model="dates.qwpxsj" mode="date"
@confirm="confirmDate('qwpxsj', $event)" @cancel="cancelPicker('qwpxsj')"></u-datetime-picker>
<u-picker :show="show.qwpxgz" :columns="[jobTypeList]" keyName="workTypeName"
@confirm="jobTypeConfirm('qwpxgz', $event)" @cancel="cancelPicker('qwpxgz')"></u-picker>
<choose-person ref="personChooser" @confirm="personNameConfirm" />
<u-datetime-picker style="position: relative; z-index: 100" :show="showTime" v-model="hopeSolveDate"
mode="datetime" closeOnClickOverlay @confirm="confirmDate" @cancel="showTime = false"
@close="showTime = false"></u-datetime-picker>
<view class="button-area" v-if="edit">
<view class="btn" @click="cancelPage">取消</view>
<view class="btn reset" @click="getDetail(formData.id)">重置</view>
@@ -116,25 +84,15 @@
</template>
<script>
import {
getPersonBase
} from "@/packageRc/api/personinfo/index";
import {
addPersonDemand,
updatePersonDemand,
getPersonDemand
} from "@/packageRc/api/needs/personDemand";
import {
listJobType
} from "@/packageRc/api/jobType/index";
import ImageUpload from './ImageUpload'
import ChoosePerson from './choosePerson';
// import dayjs from "dayjs";
import { getPersonBase } from "@/packageRc/api/personinfo/index";
import { addPersonDemand, updatePersonDemand, getPersonDemand } from "@/packageRc/api/needs/personDemand";
import { listJobType } from "@/packageRc/api/jobType/index";
import uniDateformat from '@/uni_modules/uni-dateformat/components/uni-dateformat/uni-dateformat.vue';
export default {
components: {
// ChoosePerson,
// ImageUpload
// ChoosePerson
},
props: {
needId: {
@@ -148,24 +106,20 @@
},
data() {
return {
fileList: [],
edit: true,
showTime: false,
personBase: {},
hopeSolveDate: Number(new Date()),
dates: {},
formData: {
userId:"",
personName:"",
demandType: "3",
personName: '',
personId: "",
userId: "",
demandTitle: '',
isAcceptAssistance: '',
isAcceptApprovalResult: '',
personName: '',
qwpxsj: '',
qwpxgz: '',
qwpxgzName: ''
qwpxgzName: '',
jobDescription: ''
},
rules: {
personName: [{
@@ -211,11 +165,28 @@
this.$refs.uForm.setRules(this.rules)
},
created() {
this.loading = true;
this.workTypeRemoteMethod('');
},
this.setName();
this.loading = true;
this.workTypeRemoteMethod('');
},
methods: {
cancelPage() {
setName() {
// 直接设置人员信息
this.formData.personName = this.name;
this.formData.personId = this.needId;
this.formData.userId = this.needId;
// 设置需求标题
if (this.formData.personName) {
const today = new Date();
const year = today.getFullYear();
const month = String(today.getMonth() + 1).padStart(2, '0');
const day = String(today.getDate()).padStart(2, '0');
const formattedDate = `${year}-${month}-${day}`;
this.formData.demandTitle = `${this.formData.personName}_于${formattedDate}_提出培训需求`;
}
},
cancelPage() {
if (this.formData.id) {
this.edit = false;
this.getDetail(this.formData.id)
@@ -235,14 +206,9 @@
this.formNameChange();
this.$forceUpdate();
},
confirmDate(e) {
this.showTime = false;
// 获取选中的日期
const date = e.value;
// 使用 uView 的 uTime 方法格式化日期,包含时分秒
const formattedDateTime = uni.$u.timeFormat(date, "yyyy-mm-dd");
// 设置表单数据
this.formData.qwpxsj = formattedDateTime;
// 使用picker组件的日期选择
onDateChange(e) {
this.formData.qwpxsj = e.detail.value;
},
changeFile(e) {
// 清空当前的 fileUrl 数组
@@ -298,7 +264,7 @@
this.setWorkTypeIndexes(this.formData.qwpxgz);
}
this.edit = false;
this.fileList = this.$processFileUrl(this.formData.fileUrl)
}).catch(error => {
console.error('Error fetching training detail:', error);
});
@@ -337,6 +303,7 @@
this.$store.dispatch("GetInfo").then((res) => {
if (res.data.roles.indexOf('qunzhong') == -1) {
this.canChoosePerson = true;
this.setName() // 确保非群众角色也能获取姓名
} else {
this.canChoosePerson = false;
getPersonBase(res.data.user.userId).then(resp => {
@@ -349,35 +316,46 @@
}
})
},
formNameChange() {
let date = new Date()
const dayNew = dayjs(date).format("YYYY-MM-DD");
this.formData.demandTitle = `${this.formData.personName}_于${dayNew}_提出培训需求`
},
setName() {
this.formData.personName = this.name;
this.formData.personId = this.needId;
this.formData.userId = this.needId;
let date = new Date();
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0');
const day = String(date.getDate()).padStart(2, '0');
const dayNew = `${year}-${month}-${day}`;
this.formData.demandTitle = `${this.formData.personName}_于${dayNew}_提出培训需求`;
},
async saveInfo() {
try {
this.setName();
// 手动检查培训意愿工种是否已选择
if (!this.formData.qwpxgz || this.formData.qwpxgz.trim() === '') {
this.$u.toast('请选择培训意愿工种!');
try {
this.setName();
console.log("执行保存,表单数据:", this.formData);
console.log("personName:", this.formData.personName);
console.log("personId:", this.formData.personId);
console.log("userId:", this.formData.userId);
// 手动检查培训意愿工种是否已选择
if (!this.formData.qwpxgz || (typeof this.formData.qwpxgz === 'string' && this.formData.qwpxgz.trim() === '')) {
uni.showToast({
title: '请选择培训意愿工种!',
icon: 'none'
});
return;
}
// 手动检查期望培训时间是否已选择
if (!this.formData.qwpxsj || this.formData.qwpxsj.trim() === '') {
this.$u.toast('请选择期望培训时间!');
if (!this.formData.qwpxsj || (typeof this.formData.qwpxsj === 'string' && this.formData.qwpxsj.trim() === '')) {
uni.showToast({
title: '请选择期望培训时间!',
icon: 'none'
});
return;
}
// 验证表单
const isValid = await this.$refs.uForm.validate();
if (!isValid) {
throw new Error('请检查必填项填写');
return
}
this.$showLoading();
// 表单字段已通过手动检查,无需额外验证
uni.showLoading({
title: '加载中...'
});
let response;
let successMessage;
this.formData.demandType = 3;
@@ -390,24 +368,42 @@
}
// 检查响应码是否为200
if (response.code === 200) {
this.$u.toast(successMessage);
uni.showToast({
title: successMessage,
icon: 'success'
});
// 如果是编辑模式,关闭编辑状态;否则返回上一页
if (this.formData.id) {
this.edit = false;
} else {
await this.$delay(1000); // 延迟1秒后返回上一页
uni.navigateBack();
setTimeout(() => {
uni.navigateBack();
}, 1000);
}
} else {
// 响应码不为200时显示服务器返回的错误信息或默认错误信息
uni.showToast({
title: response.msg || '操作失败,请重试!',
icon: 'none'
});
}
} catch (error) {
if(error.length){
this.$u.toast('请填写完整信息!');
}else{
this.$u.toast('系统错误,请联系管理员!');
console.error('保存失败:', error);
// 检查错误是否为字符串类型或有特定消息
if(typeof error === 'string' || (error && error.message && error.message.includes('请检查'))){
uni.showToast({
title: '请填写完整信息!',
icon: 'none'
});
} else {
uni.showToast({
title: '系统错误,请联系管理员!',
icon: 'none'
});
}
} finally {
// 确保加载页总是会被隐藏
this.$hideLoading();
uni.hideLoading();
}
},
// getWorkTypeTree() {
@@ -500,20 +496,20 @@
const selectedLevel2 = this.workTypeColumns[1][indexes[1]];
const selectedLevel3 = this.workTypeColumns[2][indexes[2]];
// 使用$set确保响应式更新
if (selectedLevel3) {
// 选择第三级
this.$set(this.formData, 'qwpxgz', selectedLevel3.id);
this.$set(this.formData, 'qwpxgzName', `${selectedLevel1.workTypeName}/${selectedLevel2.workTypeName}/${selectedLevel3.workTypeName}`);
} else if (selectedLevel2) {
// 选择第二级
this.$set(this.formData, 'qwpxgz', selectedLevel2.id);
this.$set(this.formData, 'qwpxgzName', `${selectedLevel1.workTypeName}/${selectedLevel2.workTypeName}`);
} else if (selectedLevel1) {
// 选择第一级
this.$set(this.formData, 'qwpxgz', selectedLevel1.id);
this.$set(this.formData, 'qwpxgzName', selectedLevel1.workTypeName);
}
// 直接赋值确保响应式更新
if (selectedLevel3) {
// 选择第三级
this.formData.qwpxgz = selectedLevel3.id;
this.formData.qwpxgzName = `${selectedLevel1.workTypeName}/${selectedLevel2.workTypeName}/${selectedLevel3.workTypeName}`;
} else if (selectedLevel2) {
// 选择第二级
this.formData.qwpxgz = selectedLevel2.id;
this.formData.qwpxgzName = `${selectedLevel1.workTypeName}/${selectedLevel2.workTypeName}`;
} else if (selectedLevel1) {
// 选择第一级
this.formData.qwpxgz = selectedLevel1.id;
this.formData.qwpxgzName = selectedLevel1.workTypeName;
}
this.workTypeIndexes = indexes;
@@ -563,29 +559,46 @@
</script>
<style lang="scss">
.date-picker-wrapper {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
justify-content: space-between;
align-items: center;
border: 1px solid #ddd;
border-radius: 4px;
}
.date-picker-wrapper.noValue {
color: #999;
}
.date-value {
color: #333;
}
.page ::v-deep .u-navbar__content {
background-color: transparent !important;
}
.container {
height: 100vh;
overflow: hidden;
background-color: #f7f7f7;
}
.page {
background-color: #EEF1F5 !important;
background-color: #3161c7;
height: 100vh;
background-image: url('https://rc.jinan.gov.cn/qcwjyH5/static/images/top.png');
background-repeat: no-repeat;
background-size: 100% auto;
}
.input-outer-part {
padding: 0 32rpx;
box-sizing: border-box;
}
.inner {
background: #eef1f5;
border-radius: 16rpx;
padding: 32rpx;
margin-bottom: 24rpx;
}
.inner-part {
width: 100%;
}
@@ -595,10 +608,129 @@
width: 100%;
}
/* 表单项目样式 */
.form-item {
display: flex;
align-items: flex-start;
margin-bottom: 24rpx;
background-color: #fff;
border-radius: 8rpx;
padding: 24rpx;
}
.form-label {
width: 200rpx;
font-size: 28rpx;
color: #333;
flex-shrink: 0;
line-height: 48rpx;
}
.required {
color: #f56c6c;
margin-left: 4rpx;
}
.form-input {
flex: 1;
border: none;
outline: none;
font-size: 28rpx;
color: #333;
background: none;
height: 48rpx;
line-height: 48rpx;
}
.form-input-disabled {
color: #909399;
background-color: #f5f7fa;
}
.form-textarea {
flex: 1;
border: none;
outline: none;
font-size: 28rpx;
color: #333;
background: none;
min-height: 120rpx;
line-height: 40rpx;
}
.form-textarea-disabled {
color: #909399;
background-color: #f5f7fa;
}
.icon-right {
width: 40rpx;
height: 40rpx;
display: flex;
align-items: center;
justify-content: center;
color: #A6A6A6;
margin-left: 16rpx;
}
/* 单选框样式 */
.radio-group {
flex: 1;
display: flex;
align-items: center;
}
.radio-item {
display: flex;
align-items: center;
margin-right: 32rpx;
cursor: pointer;
}
.radio-item.radio-disabled {
cursor: not-allowed;
}
.radio {
width: 28rpx;
height: 28rpx;
border-radius: 50%;
border: 2rpx solid #dcdfe6;
margin-right: 12rpx;
position: relative;
}
.radio.radio-checked {
border-color: #409eff;
background-color: #409eff;
}
.radio.radio-checked::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 12rpx;
height: 12rpx;
border-radius: 50%;
background-color: #fff;
}
/* 调整按钮区域样式 */
.button-area {
margin-top: 24rpx;
}
.picker-cover {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 99;
}
.button-area {
padding: 24rpx 32rpx 68rpx;
width: calc(100% + 64rpx);
@@ -640,7 +772,7 @@
background: rgb(245, 247, 250);
cursor: not-allowed;
}
.bordered {
border: 1rpx solid #dadbde;
padding: 9px;
@@ -652,28 +784,12 @@
align-items: center;
justify-content: space-between;
width: 100%;
padding: 28rpx 36rpx;
background: #ffffff;
border: 2rpx solid #e5e5e5;
border-radius: 12rpx;
min-height: 88rpx;
box-sizing: border-box;
transition: all 0.3s ease;
}
.picker-view:active {
background: #f8f9fa;
border-color: #007aff;
}
.picker-view text {
.picker-view-text {
color: #333333;
font-size: 28rpx;
flex: 1;
text-align: left; font-size: 28rpx;
flex: 1;
}
.picker-view .u-icon {
margin-left: 16rpx;
color: #999999;
}
</style>