1057 lines
31 KiB
Vue
1057 lines
31 KiB
Vue
<template>
|
||
<view class="page" style="background-image: url('../../../packageRc/static/pageBg.png');">
|
||
<view class="input-outer-part">
|
||
<scroll-view scroll-y="true" style="height: calc(100vh - 100px)">
|
||
<view class="inner">
|
||
<view class="inner-part">
|
||
<view class="form-item required">
|
||
<label class="form-label">被帮扶对象</label>
|
||
<input
|
||
v-model="serviceForm.serviceObjectName"
|
||
style="border: none; width: 100%;"
|
||
placeholder="请输入"
|
||
disabled
|
||
/>
|
||
</view>
|
||
|
||
<view class="form-item required">
|
||
<label class="form-label">帮扶方式</label>
|
||
<view class="form-select-wrapper" style="position: relative;">
|
||
|
||
<!-- 显示区域 -->
|
||
<view
|
||
class="form-value"
|
||
style="width: 100%;"
|
||
@click="showDemandTypePicker = !showDemandTypePicker"
|
||
:class="!serviceForm.demandType ? 'noValue' : ''"
|
||
>
|
||
{{ getDemandTypeLabel(serviceForm.demandType) || "请选择" }}
|
||
</view>
|
||
|
||
<!-- 选项列表 -->
|
||
<view
|
||
v-if="showDemandTypePicker"
|
||
class="options-list"
|
||
style="position: absolute; top: 45px; left: 0; right: 0; background-color: #fff; border: 1px solid #e6e6e6; border-radius: 8rpx; z-index: 1000; max-height: 200px; overflow-y: auto;"
|
||
>
|
||
<view
|
||
v-for="option in demandTypeOptions"
|
||
:key="option.value"
|
||
@click="selectDemandType(option.value)"
|
||
style="padding: 10px; border-bottom: 1px solid #f0f0f0; cursor: pointer;"
|
||
>
|
||
{{ option.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item required" v-if="serviceForm.demandType">
|
||
<label class="form-label">帮扶时间 <text class="required">*</text></label>
|
||
<picker style="width: 100%;" mode="date" :value="serviceForm.practicalSolutionTime" start="1900-01-01" end="2100-12-31" @change="onDateChange">
|
||
<view class="date-picker-wrapper" :class="{ noValue: !serviceForm.practicalSolutionTime }">
|
||
<view v-if="serviceForm.practicalSolutionTime" class="date-value">{{ serviceForm.practicalSolutionTime }}</view>
|
||
<view v-else>请选择</view>
|
||
<view class="arrow-down">▼</view>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
|
||
<view class="form-item required" v-if="serviceForm.demandType">
|
||
<label class="form-label">经办人</label>
|
||
<view class="form-select-wrapper">
|
||
<uni-data-select
|
||
style="width: 100%"
|
||
v-model="serviceForm.agentUserId"
|
||
placeholder="请选择经办人"
|
||
:localdata="jingbrList1"
|
||
@change="handleAgentChange"
|
||
>
|
||
</uni-data-select>
|
||
<!-- <el-option
|
||
v-for="item in jingbrList1"
|
||
:key="item.userId"
|
||
:label="item.nickName"
|
||
:value="item.userId"
|
||
></el-option> -->
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item required" v-if="serviceForm.demandType == '5'">
|
||
<label class="form-label">电话沟通结果</label>
|
||
<view class="form-value" @click="showPicker('dhgtjg')" :class="{ noValue: !serviceForm.dhgtjg }">
|
||
<view style="flex-grow: 1;">{{ getDhgtjgLabel(serviceForm.dhgtjg) || "请选择" }}</view>
|
||
<text class="arrow-down">▼</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-item required" v-if="serviceForm.demandType">
|
||
<label class="form-label">帮扶内容</label>
|
||
<view class="date-picker-wrapper" :class="{ noValue: !serviceForm.serviceContent }">
|
||
<picker
|
||
@change="onServiceContentChange"
|
||
:range="serviceContentOptions.map(item => item.label)"
|
||
:value="getServiceContentIndex(serviceForm.serviceContent)"
|
||
mode="selector"
|
||
>
|
||
<view class="date-value">
|
||
<view style="flex-grow: 1;">{{ getServiceContentLabel(serviceForm.serviceContent) || "请选择" }}</view>
|
||
<text class="arrow-down">▼</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
<!-- v-if="serviceForm.demandType" -->
|
||
<view class="form-item required" v-if="serviceForm.demandType">
|
||
<label class="form-label">人员状态</label>
|
||
<view class="date-picker-wrapper" :class="{ noValue: !serviceForm.personStatus }">
|
||
<picker
|
||
@change="onpersonStatusChange"
|
||
:range="personStatusOptions.map(item => item.label)"
|
||
:value="getpersonStatusIndex(serviceForm.personStatus)"
|
||
mode="selector"
|
||
>
|
||
<view class="date-value">
|
||
<view style="flex-grow: 1;">{{ getpersonStatusLabel(serviceForm.personStatus) || "请选择" }}</view>
|
||
<text class="arrow-down">▼</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="inner-part" v-if="serviceForm.demandType">
|
||
<view class="form-item required" v-if="serviceForm.demandType">
|
||
<label class="form-label">帮扶情况说明</label>
|
||
<textarea
|
||
v-model="serviceForm.blqksm"
|
||
style="width: 100%; border: none; padding: 10px 0; min-height: 100px; resize: none;"
|
||
placeholder="请输入"
|
||
></textarea>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="inner-part" v-if="serviceForm.demandType">
|
||
<view class="form-item">
|
||
<label class="form-label">附件</label>
|
||
<view style="width: 100%; padding: 10px 0;">
|
||
<button @click="chooseFiles" style="padding: 0px 24rpx; border: 1px solid #e4e4e4;border-radius: 4px;">
|
||
上传附件 (最多6个)
|
||
</button>
|
||
<!-- 简单的文件列表显示 -->
|
||
<view class="file-list">
|
||
<view v-for="(file, index) in fileList" :key="index" class="file-item">
|
||
{{ file.file.name }}
|
||
<text @click="removeFile(index)" style="margin-left: 10px; cursor: pointer; color: #ff4444;">删除</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</scroll-view>
|
||
|
||
<view class="button-area">
|
||
<view class="btn" @click="cancelPage">取消</view>
|
||
<view class="btn save" @click="submitServiceForm">保存</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 通用选择器 -->
|
||
<view v-if="currentPicker" class="datetime-picker-overlay">
|
||
<view class="datetime-picker">
|
||
<view class="picker-header">
|
||
<text @click="cancelPicker" style="padding: 10px;">取消</text>
|
||
<text style="font-weight: bold;">{{ getPickerTitle(currentPicker) }}</text>
|
||
<text @click="confirmPicker" style="padding: 10px; color: #007AFF;">确定</text>
|
||
</view>
|
||
<view class="picker-content">
|
||
<view v-if="currentPicker === 'practicalSolutionTime'">
|
||
<input
|
||
type="datetime-local"
|
||
v-model="manualDateTime"
|
||
style="width: 100%; padding: 15px; box-sizing: border-box;"
|
||
/>
|
||
</view>
|
||
<view v-else class="picker-options">
|
||
<view
|
||
v-for="option in getPickerOptions(currentPicker)"
|
||
:key="option.value"
|
||
@click="selectPickerOption(option.value)"
|
||
:class="{ 'selected': selectedOption === option.value }"
|
||
>
|
||
{{ option.label }}
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import config from '@/utilsRc/config.js'
|
||
import {getJbrInfo} from "@/apiRc/personinfo/index"
|
||
import {addInvestigate} from "@/apiRc/needs/person"
|
||
import { getDicts } from '@/apiRc/system/dict.js';
|
||
import { getToken } from "@/utilsRc/auth";
|
||
export default {
|
||
data() {
|
||
return {
|
||
serviceForm: {
|
||
serviceObjectName: '',
|
||
userId: '',
|
||
demandType: '', // 帮扶方式
|
||
practicalSolutionTime: '', // 帮扶时间
|
||
agentUserId: '', // 经办人ID
|
||
agentUserName: '', // 经办人名称
|
||
dhgtjg: '', // 电话沟通结果
|
||
serviceContent: '', // 帮扶内容
|
||
blqksm: '', // 帮扶情况说明
|
||
personStatus: '', // 人员状态
|
||
fileUrl: [] // 附件
|
||
},
|
||
|
||
personStatusMap: {
|
||
'1': '就业政策咨询',
|
||
'2': '职业指导',
|
||
'3': '技能培训',
|
||
'4': '岗位推荐',
|
||
'5': '创业指导',
|
||
'6': '其他'
|
||
},
|
||
serviceContentMap: {
|
||
'1': '就业政策咨询',
|
||
'2': '职业指导',
|
||
'3': '技能培训',
|
||
'4': '岗位推荐',
|
||
'5': '创业指导',
|
||
'6': '其他'
|
||
},
|
||
// 帮扶内容选项（picker组件需要的格式）
|
||
serviceContentOptions: [
|
||
{ value: '1', label: '就业政策咨询' },
|
||
{ value: '2', label: '职业指导' },
|
||
{ value: '3', label: '技能培训' },
|
||
{ value: '4', label: '岗位推荐' },
|
||
{ value: '5', label: '创业指导' },
|
||
{ value: '6', label: '其他' }
|
||
],
|
||
showDemandTypePicker: false, // 控制帮扶方式选择器显示
|
||
jingbrList1:[],
|
||
currentPicker: null,
|
||
selectedOption: '',
|
||
manualDateTime: this.formatDateTime(new Date()),
|
||
fileList: [], // 初始化文件列表
|
||
// 帮扶方式选项 (4: 上门服务, 5: 电话回访)
|
||
demandTypeOptions: [
|
||
{ value: '4', label: '上门服务' },
|
||
{ value: '5', label: '电话回访' }
|
||
],
|
||
// 经办人选项（模拟数据）
|
||
jingbrList: [
|
||
{ userId: '1', nickName: '张三' },
|
||
{ userId: '2', nickName: '李四' },
|
||
{ userId: '3', nickName: '王五' }
|
||
],
|
||
// 电话沟通结果选项
|
||
dhgtjgOptions: [
|
||
{ value: '1', label: '已沟通' },
|
||
{ value: '2', label: '未接通' },
|
||
{ value: '3', label: '拒绝沟通' }
|
||
],
|
||
// 帮扶内容选项（通过字典获取）
|
||
serviceContentOptions: [],
|
||
// 人员状态选项（通过字典获取）
|
||
personStatusOptions: []
|
||
};
|
||
},
|
||
created(){
|
||
this.getJbrInfo11();
|
||
// 使用getDicts API获取帮扶内容字典数据
|
||
getDicts('qcjy_fwnr').then(res => {
|
||
if (res.data && Array.isArray(res.data)) {
|
||
// 将字典数据转换为picker组件需要的格式
|
||
this.serviceContentOptions = res.data.map(item => ({
|
||
value: item.dictValue,
|
||
label: item.dictLabel
|
||
}));
|
||
}
|
||
});
|
||
getDicts('qyjy_dhgtjg').then(res => {
|
||
if (res.data && Array.isArray(res.data)) {
|
||
// 将字典数据转换为picker组件需要的格式
|
||
this.dhgtjgOptions = res.data.map(item => ({
|
||
value: item.dictValue,
|
||
label: item.dictLabel
|
||
}));
|
||
}
|
||
});
|
||
|
||
// 使用getDicts API获取人员状态字典数据
|
||
getDicts('qcjy_ryzt').then(res => {
|
||
if (res.data && Array.isArray(res.data)) {
|
||
this.personStatusOptions = res.data.map(item => ({
|
||
value: item.dictValue,
|
||
label: item.dictLabel
|
||
}));
|
||
}
|
||
});
|
||
},
|
||
onLoad(options) {
|
||
if (options.name) {
|
||
this.serviceForm.serviceObjectName = options.name;
|
||
}
|
||
if (options.id) {
|
||
this.serviceForm.userId = options.id;
|
||
}
|
||
},
|
||
methods: {
|
||
// 选择图片
|
||
chooseFiles() {
|
||
const remainingCount = 6 - this.fileList.length;
|
||
if (remainingCount <= 0) {
|
||
uni.showToast({ title: '最多只能上传6张图片', icon: 'none' });
|
||
return;
|
||
}
|
||
console.log(wx, 'wx')
|
||
wx.chooseMessageFile({
|
||
count: remainingCount,
|
||
extension: ['.png', '.jpg', '.jpeg', '.doc', '.docx', '.pdf', '.xls', '.xlsx' ],
|
||
success: (res) => {
|
||
console.log('选择文件成功:', res);
|
||
let arr = [];
|
||
|
||
let path = "";
|
||
const twoMBInBytes = 2 * 1024 * 1024; // 2MB转换为字节数
|
||
res.tempFiles.forEach((file) => {
|
||
|
||
if (file.size > twoMBInBytes) {
|
||
uni.showToast({
|
||
title: "图片大小不能超过2MB",
|
||
icon: "none",
|
||
});
|
||
return;
|
||
}
|
||
if (res.tempFiles && res.tempFiles.length > 0) {
|
||
path = file.path;
|
||
if (['png', 'jpg', 'jpeg', 'doc', 'docx', 'pdf', 'xls', 'xlsx' ].indexOf(path.split(".")[1])!=-1) {
|
||
uni.showLoading();
|
||
const tempFilePath = file;
|
||
uni.uploadFile({
|
||
url: config.baseUrl+'/system/oss/upload', //图片上传地址
|
||
filePath: tempFilePath.path,
|
||
name: 'file',
|
||
formData: {},
|
||
header: {
|
||
// 'Authorization': 'Bearer eyJ0eXAiOiJKV1QiLCJhbGciOiJIUzI1NiJ9.eyJsb2dpblR5cGUiOiJsb2dpbiIsImxvZ2luSWQiOiJzeXNfdXNlcjoxIiwicm5TdHIiOiJQSlUyVlJCc1E1aXRMMWgxdjNkcVh2eER1c2VVc0hvRiIsInVzZXJJZCI6MX0.z4Z2XqgXyU0GQU-i7Bsa5T-zCKApTxj1YQ73rk7bAVo'
|
||
'Authorization': 'Bearer ' + getToken(),
|
||
},
|
||
success: (res) => {
|
||
var data = JSON.parse(res.data);
|
||
console.log(data, 'sdfjiosdjfoi')
|
||
if(data.code==200) {
|
||
this.fileList.push({
|
||
url: data.data.url,
|
||
file: file
|
||
})
|
||
this.serviceForm.fileUrl = this.fileList.map(item => item.url).join(',')
|
||
this.$forceUpdate()
|
||
uni.hideLoading();
|
||
} else {
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: res.msg || '上传失败',
|
||
icon: 'none',
|
||
duration: 2000
|
||
});
|
||
}
|
||
},
|
||
fail: (error) => {
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'none'
|
||
});
|
||
console.error(error);
|
||
}
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
icon: "none",
|
||
duration: 1500,
|
||
title: `只能选择${['.png', '.jpg', '.jpeg', '.doc', '.docx', '.pdf', '.xls', '.xlsx' ].join('、')}格式文件`,
|
||
});
|
||
}
|
||
}
|
||
})
|
||
|
||
|
||
|
||
// // 添加新选择的图片到列表
|
||
// res.tempFiles.forEach((item, index) => {
|
||
// this.fileList.push({
|
||
// url: item.path,
|
||
// file: res.tempFiles[index]
|
||
// });
|
||
// });
|
||
// 更新 serviceForm.fileUrl
|
||
// this.updateFileUrls();
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败:', err);
|
||
}
|
||
});
|
||
// uni.chooseImage({
|
||
// count: remainingCount,
|
||
// sizeType: ['original', 'compressed'],
|
||
// sourceType: ['album', 'camera'],
|
||
// success: (res) => {
|
||
// // 添加新选择的图片到列表
|
||
// res.tempFilePaths.forEach((path, index) => {
|
||
// this.fileList.push({
|
||
// url: path,
|
||
// file: res.tempFiles[index]
|
||
// });
|
||
// });
|
||
// // 更新 serviceForm.fileUrl
|
||
// this.updateFileUrls();
|
||
// },
|
||
// fail: (err) => {
|
||
// console.error('选择图片失败:', err);
|
||
// }
|
||
// });
|
||
},
|
||
|
||
// 移除图片
|
||
removeImage(index) {
|
||
this.fileList.splice(index, 1);
|
||
// 更新 serviceForm.fileUrl
|
||
this.updateFileUrls();
|
||
},
|
||
|
||
// 更新文件URL数组
|
||
updateFileUrls() {
|
||
this.serviceForm.fileUrl = this.fileList.map(file => file.url);
|
||
},
|
||
getJbrInfo11(){
|
||
getJbrInfo().then(res => {
|
||
console.log(res, 'joisdfjiosdfjio')
|
||
this.jingbrList1=res.map(ele => {
|
||
return {
|
||
value: ele.userId,
|
||
text: ele.nickName
|
||
}
|
||
})
|
||
})
|
||
},
|
||
// 显示选择器
|
||
showPicker(type) {
|
||
this.currentPicker = type;
|
||
if (type !== 'practicalSolutionTime') {
|
||
this.selectedOption = this.serviceForm[type] || '';
|
||
}
|
||
},
|
||
// 取消选择器
|
||
cancelPicker() {
|
||
this.currentPicker = null;
|
||
},
|
||
// 确认选择器
|
||
confirmPicker() {
|
||
if (this.currentPicker === 'practicalSolutionTime') {
|
||
this.manualConfirmDate();
|
||
} else {
|
||
this.serviceForm[this.currentPicker] = this.selectedOption;
|
||
// 特殊处理经办人，同时保存名称
|
||
if (this.currentPicker === 'agentUserId') {
|
||
const agent = this.jingbrList1.find(item => item.value === this.selectedOption);
|
||
this.serviceForm.agentUserName = agent ? agent.nickName : '';
|
||
}
|
||
}
|
||
this.currentPicker = null;
|
||
},
|
||
// 选择选项
|
||
selectPickerOption(value) {
|
||
this.selectedOption = value;
|
||
},
|
||
// 获取选择器标题
|
||
getPickerTitle(type) {
|
||
const titles = {
|
||
demandType: '选择帮扶方式',
|
||
practicalSolutionTime: '选择帮扶时间',
|
||
agentUserId: '选择经办人',
|
||
dhgtjg: '选择电话沟通结果',
|
||
serviceContent: '选择帮扶内容'
|
||
};
|
||
return titles[type] || '请选择';
|
||
},
|
||
// 获取选择器选项
|
||
getPickerOptions(type) {
|
||
const options = {
|
||
demandType: this.demandTypeOptions || [],
|
||
agentUserId: this.jingbrList1 && this.jingbrList1.length > 0 ?
|
||
this.jingbrList1.map(item => ({ value: item.userId, label: item.nickName })) : [],
|
||
dhgtjg: this.dhgtjgOptions || [],
|
||
serviceContent: this.serviceContentOptions || []
|
||
};
|
||
return options[type] || [];
|
||
},
|
||
// 获取帮扶方式标签
|
||
getDemandTypeLabel(value) {
|
||
const option = this.demandTypeOptions.find(item => item.value === value);
|
||
return option ? option.label : '';
|
||
},
|
||
// 获取经办人名称
|
||
getAgentUserName(userId) {
|
||
const agent = this.jingbrList1.find(item => item.value === userId);
|
||
return agent ? agent.nickName : '';
|
||
},
|
||
// 处理经办人选择变化
|
||
handleAgentChange(value) {
|
||
if (!value || !this.jingbrList1 || !this.jingbrList1.length) {
|
||
this.serviceForm.agentUserName = '';
|
||
return;
|
||
}
|
||
const user = this.jingbrList1.find(item => item.value === value);
|
||
if (user) {
|
||
this.serviceForm.agentUserName = user.nickName;
|
||
} else {
|
||
this.serviceForm.agentUserName = '';
|
||
}
|
||
},
|
||
|
||
// 处理帮扶方式选择变化
|
||
handleDemandTypeChange(event) {
|
||
this.serviceForm.demandType = event.target.value;
|
||
},
|
||
|
||
// 选择帮扶方式
|
||
selectDemandType(value) {
|
||
this.serviceForm.demandType = value;
|
||
this.showDemandTypePicker = false;
|
||
},
|
||
// 获取电话沟通结果标签
|
||
getDhgtjgLabel(value) {
|
||
const option = this.dhgtjgOptions.find(item => item.value === value);
|
||
return option ? option.label : '';
|
||
},
|
||
// 获取帮扶内容标签
|
||
getServiceContentLabel(value) {
|
||
return this.serviceContentMap[value] || '';
|
||
},
|
||
// 获取帮扶内容标签
|
||
getpersonStatusLabel(value) {
|
||
let arr = this.personStatusOptions.filter(item => item.value == value)
|
||
return arr.length ? arr[0].label : ''
|
||
},
|
||
|
||
// 处理帮扶内容选择变化
|
||
onServiceContentChange(e) {
|
||
const index = e.detail.value;
|
||
if (this.serviceContentOptions && this.serviceContentOptions[index]) {
|
||
this.serviceForm.serviceContent = this.serviceContentOptions[index].value;
|
||
}
|
||
},
|
||
// 处理人员状态选择变化
|
||
onpersonStatusChange(e) {
|
||
const index = e.detail.value;
|
||
if (this.personStatusOptions && this.personStatusOptions[index]) {
|
||
this.serviceForm.personStatus = this.personStatusOptions[index].value;
|
||
}
|
||
},
|
||
|
||
// 获取帮扶内容当前索引
|
||
getServiceContentIndex(value) {
|
||
if (!value) return 0;
|
||
const index = this.serviceContentOptions.findIndex(item => item.value === value);
|
||
return index !== -1 ? index : 0;
|
||
},
|
||
getpersonStatusIndex(value) {
|
||
if (!value) return 0;
|
||
const index = this.personStatusOptions.findIndex(item => item.value === value);
|
||
return index !== -1 ? index : 0;
|
||
},
|
||
// 格式化日期时间为YYYY-MM-DDTHH:MM格式（datetime-local输入框需要）
|
||
formatDateTime(date) {
|
||
const year = date.getFullYear();
|
||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||
const day = String(date.getDate()).padStart(2, '0');
|
||
const hours = String(date.getHours()).padStart(2, '0');
|
||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||
return `${year}-${month}-${day}T${hours}:${minutes}`;
|
||
},
|
||
|
||
// 日期选择变化处理
|
||
onDateChange(e) {
|
||
this.serviceForm.practicalSolutionTime = e.detail.value;
|
||
},
|
||
|
||
// 手动确认日期选择
|
||
manualConfirmDate() {
|
||
// 将datetime-local格式转换为显示格式
|
||
const date = new Date(this.manualDateTime);
|
||
this.serviceForm.practicalSolutionTime = `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')} ${String(date.getHours()).padStart(2, '0')}:${String(date.getMinutes()).padStart(2, '0')}`;
|
||
},
|
||
|
||
// 触发文件上传
|
||
triggerFileUpload() {
|
||
if (this.serviceForm.fileUrl.length < 6) {
|
||
// 模拟添加文件
|
||
const mockFiles = ['文档.pdf', '图片.jpg', '表格.xlsx', '报告.docx'];
|
||
const randomFile = mockFiles[Math.floor(Math.random() * mockFiles.length)];
|
||
this.serviceForm.fileUrl.push({
|
||
name: randomFile,
|
||
url: `mock-url/${Date.now()}/${randomFile}`
|
||
});
|
||
} else {
|
||
uni.showToast({ title: '最多只能上传6个文件', icon: 'none' });
|
||
}
|
||
},
|
||
|
||
// 删除文件
|
||
removeFile(index) {
|
||
this.serviceForm.fileUrl.splice(index, 1);
|
||
},
|
||
|
||
// 取消页面
|
||
cancelPage() {
|
||
uni.navigateBack();
|
||
},
|
||
|
||
// 验证表单
|
||
validateForm() {
|
||
if (!this.serviceForm.serviceObjectName) {
|
||
uni.showToast({ title: '请填写被帮扶对象', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.serviceForm.demandType) {
|
||
uni.showToast({ title: '请选择帮扶方式', icon: 'none' });
|
||
return false;
|
||
}
|
||
|
||
// 如果是上门服务或电话回访，需要验证更多字段
|
||
if (this.serviceForm.demandType === '4' || this.serviceForm.demandType === '5') {
|
||
if (!this.serviceForm.practicalSolutionTime) {
|
||
uni.showToast({ title: '请选择帮扶时间', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.serviceForm.agentUserId) {
|
||
uni.showToast({ title: '请选择经办人', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (this.serviceForm.demandType === '5' && !this.serviceForm.dhgtjg) {
|
||
uni.showToast({ title: '请选择电话沟通结果', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.serviceForm.serviceContent) {
|
||
uni.showToast({ title: '请选择帮扶内容', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.serviceForm.blqksm) {
|
||
uni.showToast({ title: '请填写帮扶情况说明', icon: 'none' });
|
||
return false;
|
||
}
|
||
if (!this.serviceForm.personStatus) {
|
||
uni.showToast({ title: '请选择人员状态', icon: 'none' });
|
||
return false;
|
||
}
|
||
}
|
||
|
||
return true;
|
||
},
|
||
setName(){
|
||
this.serviceForm.serviceObjectName = this.name
|
||
this.serviceForm.serviceObjectId = this.userId
|
||
this.serviceForm.userId = this.userId
|
||
|
||
this.$forceUpdate();
|
||
},
|
||
// 提交表单
|
||
async submitServiceForm() {
|
||
try {
|
||
// 验证表单
|
||
if (!this.validateForm()) {
|
||
return;
|
||
}
|
||
|
||
// 模拟加载状态
|
||
uni.showLoading({ title: '保存中...' });
|
||
|
||
// 准备提交数据
|
||
const submitData = {
|
||
...this.serviceForm,
|
||
// 格式化文件数据
|
||
// fileUrl: JSON.stringify(this.serviceForm.fileUrl)
|
||
fileUrl: this.fileList.map(item => item.url).join(',')
|
||
};
|
||
|
||
// 打印提交数据
|
||
console.log('提交数据:', submitData);
|
||
|
||
// 模拟API调用延迟
|
||
// await new Promise(resolve => setTimeout(resolve, 1000));
|
||
addInvestigate(submitData).then(res => {
|
||
if(res.code == 200){
|
||
uni.showToast({ title: '保存成功', icon: 'success' });
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1000);
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error(error);
|
||
uni.showToast({ title: '保存失败', icon: 'none' });
|
||
} finally {
|
||
uni.hideLoading();
|
||
}
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.page {
|
||
height: 100vh;
|
||
background-color: #f4f4f4 !important;
|
||
background-image: url("~@/packageRc/static/images/top.png");
|
||
background-repeat: no-repeat;
|
||
background-size: 100% auto;
|
||
}
|
||
|
||
.input-outer-part {
|
||
padding: 32rpx;
|
||
position: relative;
|
||
border-radius: 32rpx 32rpx 0 0;
|
||
}
|
||
|
||
.inner {
|
||
.inner-part {
|
||
background: #fff;
|
||
padding: 24rpx 32rpx;
|
||
border-radius: 16rpx;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
|
||
.self-form {
|
||
// 表单样式
|
||
}
|
||
|
||
/* 表单项目样式 */
|
||
.form-item {
|
||
display: flex;
|
||
align-items: flex-start;
|
||
padding-bottom: 15px;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 选择器容器样式 */
|
||
.form-select-wrapper {
|
||
flex: 1;
|
||
position: relative;
|
||
}
|
||
|
||
.form-select {
|
||
width: 100%;
|
||
padding: 0 20rpx;
|
||
line-height: 64rpx;
|
||
box-sizing: border-box;
|
||
border: 1px solid #e6e6e6;
|
||
border-radius: 8rpx;
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
background-color: #fff;
|
||
appearance: none;
|
||
-webkit-appearance: none;
|
||
-moz-appearance: none;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.form-select.noValue {
|
||
color: #999;
|
||
}
|
||
|
||
.form-select-wrapper::after {
|
||
content: '▼';
|
||
position: absolute;
|
||
right: 20rpx;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
pointer-events: none;
|
||
color: #999;
|
||
font-size: 20rpx;
|
||
}
|
||
|
||
.form-item.required .form-label::after {
|
||
content: '*';
|
||
color: #ff4444;
|
||
margin-left: 4px;
|
||
}
|
||
|
||
.form-label {
|
||
width: 110px;
|
||
flex-shrink: 0;
|
||
font-size: 14px;
|
||
color: #333;
|
||
height: 64rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.form-value {
|
||
flex: 1;
|
||
height: 64rpx;
|
||
font-size: 14px;
|
||
color: #666;
|
||
box-sizing: border-box;
|
||
border: 1px solid #e6e6e6;
|
||
display: flex;
|
||
padding: 0 24rpx;
|
||
// justify-content: space-between;
|
||
align-items: center;
|
||
}
|
||
|
||
input{
|
||
flex: 1;
|
||
line-height: 64rpx;
|
||
height: 64rpx;
|
||
font-size: 14px;
|
||
color: #666;
|
||
|
||
}
|
||
|
||
.form-value.noValue {
|
||
color: #999;
|
||
}
|
||
|
||
.arrow-down {
|
||
font-size: 12px;
|
||
color: #A6A6A6;
|
||
}
|
||
|
||
.edit-icon {
|
||
font-size: 14px;
|
||
color: #A6A6A6;
|
||
}
|
||
|
||
.form-input-wrapper {
|
||
flex: 1;
|
||
position: relative;
|
||
padding: 0;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
picker{
|
||
width: 100%;
|
||
.date-value{
|
||
width: 100%;
|
||
display: flex;
|
||
}
|
||
}
|
||
.form-input-wrapper input {
|
||
width: 100%;
|
||
border: none;
|
||
outline: none;
|
||
font-size: 14px;
|
||
}
|
||
|
||
.form-input-wrapper .edit-icon {
|
||
position: absolute;
|
||
right: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
}
|
||
|
||
/* 单选按钮样式 */
|
||
.radio-group {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
padding: 10px 0;
|
||
}
|
||
|
||
.radio-item {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-right: 20px;
|
||
margin-bottom: 10px;
|
||
cursor: pointer;
|
||
}
|
||
|
||
.radio-item input[type="radio"] {
|
||
margin-right: 6px;
|
||
}
|
||
|
||
.radio-label {
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 文件列表样式 */
|
||
.file-list {
|
||
margin-top: 10px;
|
||
}
|
||
|
||
.file-item {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 8px 0;
|
||
font-size: 14px;
|
||
color: #666;
|
||
}
|
||
|
||
/* 文件上传样式 */
|
||
.file-upload-container {
|
||
width: 100%;
|
||
padding: 10px 0;
|
||
}
|
||
/* 选择器样式 */
|
||
.datetime-picker-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.5);
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center;
|
||
z-index: 999;
|
||
}
|
||
|
||
.datetime-picker {
|
||
background-color: #fff;
|
||
border-radius: 12px;
|
||
width: 85%;
|
||
max-width: 420px;
|
||
overflow: hidden;
|
||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
|
||
}
|
||
|
||
.picker-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
padding: 16px 20px;
|
||
border-bottom: 1px solid #f5f5f5;
|
||
font-size: 17px;
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.picker-header > text:first-child {
|
||
color: #666;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.picker-header > text:last-child {
|
||
color: #1d64cf;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.picker-content {
|
||
max-height: 280px;
|
||
overflow-y: auto;
|
||
}
|
||
|
||
.picker-options {
|
||
padding: 5px 0;
|
||
}
|
||
|
||
.picker-options > view {
|
||
padding: 16px 20px;
|
||
font-size: 16px;
|
||
color: #333;
|
||
position: relative;
|
||
transition: all 0.2s ease;
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.picker-options > view:not(:last-child) {
|
||
border-bottom: 1px solid #f8f8f8;
|
||
}
|
||
|
||
.picker-options > view:active {
|
||
background-color: #f5f5f5;
|
||
}
|
||
|
||
.picker-options > view.selected {
|
||
background-color: #f0f7ff;
|
||
color: #1d64cf;
|
||
font-weight: 500;
|
||
}
|
||
|
||
/* 添加选中状态的对勾图标 */
|
||
.picker-options > view.selected::after {
|
||
content: '✓';
|
||
position: absolute;
|
||
right: 20px;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
color: #1d64cf;
|
||
}
|
||
|
||
/* 日期选择器样式 */
|
||
.date-picker-wrapper {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
width: 100%;
|
||
box-sizing: border-box;
|
||
padding: 0 24rpx;
|
||
height: 64rpx;
|
||
border: 1px solid #ddd;
|
||
border-radius: 4px;
|
||
background-color: #fff;
|
||
}
|
||
|
||
// .date-picker-wrapper.noValue {
|
||
// background-color: #f9f9f9;
|
||
// }
|
||
|
||
.date-value {
|
||
color: #333;
|
||
width: 100%
|
||
}
|
||
|
||
.icon-right {
|
||
color: #999;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.noValue {
|
||
color: #c0c4cc;
|
||
}
|
||
|
||
.button-area {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
padding: 24rpx 32rpx;
|
||
background: #fff;
|
||
display: flex;
|
||
box-sizing: border-box;
|
||
box-shadow: 0 -2rpx 10rpx rgba(0, 0, 0, 0.05);
|
||
|
||
.btn {
|
||
line-height: 72rpx;
|
||
width: 176rpx;
|
||
margin-right: 16rpx;
|
||
font-size: 28rpx;
|
||
border: 1px solid #b8c5d4;
|
||
color: #282828;
|
||
text-align: center;
|
||
border-radius: 8rpx;
|
||
}
|
||
|
||
.save {
|
||
background: linear-gradient(103deg, #1d64cf 0%, #1590d4 99%);
|
||
color: #fff;
|
||
border: 0;
|
||
flex-grow: 1;
|
||
}
|
||
}
|
||
</style>
|