<template>
|
<view class="danger-investigation-detail">
|
<PageHeader :title="isEdit ? '编辑培训' : '新增培训'"
|
@back="goBack" />
|
<u-form @submit="handleSubmit"
|
ref="formRef"
|
label-width="110">
|
<!-- 培训信息 -->
|
<u-cell-group title="培训信息">
|
<u-form-item label="课程编号"
|
prop="courseCode"
|
border-bottom>
|
<u-input v-model="form.courseCode"
|
placeholder="系统自动生成"
|
readonly />
|
</u-form-item>
|
<u-form-item label="培训日期"
|
prop="trainingDate"
|
required
|
border-bottom>
|
<u-input v-model="form.trainingDate"
|
placeholder="请选择培训日期"
|
@click="showTrainingDatePicker"
|
readonly />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showTrainingDatePicker"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="开始时间"
|
prop="openingTime"
|
required
|
border-bottom>
|
<u-input v-model="form.openingTime"
|
placeholder="请选择开始时间"
|
@click="showOpeningTimePicker"
|
readonly />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showOpeningTimePicker"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="结束时间"
|
prop="endTime"
|
required
|
border-bottom>
|
<u-input v-model="form.endTime"
|
placeholder="请选择结束时间"
|
@click="showEndTimePicker"
|
readonly />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showEndTimePicker"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="培训目标"
|
prop="trainingObjectives"
|
border-bottom>
|
<u-input v-model="form.trainingObjectives"
|
placeholder="请输入培训目标" />
|
</u-form-item>
|
<u-form-item label="参加对象"
|
prop="participants"
|
border-bottom>
|
<u-input v-model="form.participants"
|
placeholder="请输入参加对象" />
|
</u-form-item>
|
<u-form-item label="培训内容"
|
prop="trainingContent"
|
required
|
border-bottom>
|
<u-textarea v-model="form.trainingContent"
|
placeholder="请输入培训内容"
|
:maxlength="200"
|
count
|
:autoHeight="true" />
|
</u-form-item>
|
<u-form-item label="培训讲师"
|
prop="trainingLecturer"
|
required
|
border-bottom>
|
<u-input v-model="form.trainingLecturer"
|
placeholder="请输入培训讲师" />
|
</u-form-item>
|
<u-form-item label="项目学分"
|
prop="projectCredits"
|
border-bottom>
|
<u-input v-model="form.projectCredits"
|
placeholder="请输入项目学分"
|
type="number" />
|
</u-form-item>
|
<u-form-item label="培训方式"
|
prop="trainingMode"
|
border-bottom>
|
<u-input v-model="trainingModeName"
|
placeholder="请选择培训方式"
|
@click="showTrainingModeSheet"
|
readonly />
|
<template #right>
|
<up-icon name="arrow-right"
|
@click="showTrainingModeSheet"></up-icon>
|
</template>
|
</u-form-item>
|
<u-form-item label="培训地点"
|
prop="placeTraining"
|
border-bottom>
|
<u-input v-model="form.placeTraining"
|
placeholder="请输入培训地点" />
|
</u-form-item>
|
<u-form-item label="课时"
|
prop="classHour"
|
required
|
border-bottom>
|
<u-input v-model="form.classHour"
|
placeholder="请输入课时"
|
type="number" />
|
</u-form-item>
|
</u-cell-group>
|
<!-- 提交按钮 -->
|
<view class="footer-btns">
|
<u-button class="cancel-btn"
|
@click="goBack">取消</u-button>
|
<u-button class="sign-btn"
|
type="primary"
|
@click="handleSubmit"
|
:loading="loading">{{ isEdit ? '保存修改' : '提交' }}</u-button>
|
</view>
|
</u-form>
|
<!-- 时间选择器 -->
|
<up-datetime-picker :show="trainingDateVisible"
|
mode="date"
|
v-model="nowDate"
|
@confirm="handleTrainingDateConfirm"
|
@cancel="trainingDateVisible = false"
|
title="选择培训日期" />
|
<u-datetime-picker :show="openingTimeVisible"
|
mode="time"
|
@confirm="handleOpeningTimeConfirm"
|
@cancel="openingTimeVisible = false"
|
title="选择开始时间" />
|
<u-datetime-picker :show="endTimeVisible"
|
mode="time"
|
@confirm="handleEndTimeConfirm"
|
@cancel="endTimeVisible = false"
|
title="选择结束时间" />
|
<!-- 培训方式选择器 -->
|
<up-action-sheet :show="trainingModeSheetVisible"
|
:actions="trainingModeOptions"
|
@select="handleTrainingModeSelect"
|
@close="trainingModeSheetVisible = false"
|
title="选择培训方式" />
|
</view>
|
</template>
|
|
<script setup>
|
// 替换 toast 方法
|
defineOptions({ name: "danger-investigation-detail" });
|
const showToast = message => {
|
uni.showToast({ title: message, icon: "none" });
|
};
|
|
import { ref, onMounted } from "vue";
|
import PageHeader from "@/components/PageHeader.vue";
|
import {
|
safeTrainingAdd,
|
safeTrainingUpdate,
|
} from "@/api/safeProduction/safetyTrainingAssessment";
|
import { onLoad } from "@dcloudio/uni-app";
|
import { useDict } from "@/utils/dict";
|
import dayjs from "dayjs";
|
|
// 获取字典数据
|
const { safe_training_methods } = useDict("safe_training_methods");
|
|
// 表单数据
|
const form = ref({
|
courseCode: "", // 课程编号
|
trainingDate: "", // 培训日期
|
openingTime: "", // 开始时间
|
endTime: "", // 结束时间
|
trainingObjectives: "", // 培训目标
|
participants: "", // 参加对象
|
trainingContent: "", // 培训内容
|
trainingLecturer: "", // 培训讲师
|
projectCredits: "", // 项目学分
|
trainingMode: "", // 培训方式
|
placeTraining: "", // 培训地点
|
classHour: "", // 课时
|
});
|
|
// 页面状态
|
const loading = ref(false);
|
const formRef = ref(null);
|
const isEdit = ref(false);
|
|
// 培训方式选择器
|
const trainingModeSheetVisible = ref(false);
|
const trainingModeName = ref("");
|
const trainingModeOptions = ref([]);
|
|
// 时间选择器
|
const trainingDateVisible = ref(false);
|
const openingTimeVisible = ref(false);
|
const endTimeVisible = ref(false);
|
const nowDate = ref(new Date());
|
|
const showTrainingDatePicker = () => {
|
trainingDateVisible.value = true;
|
};
|
|
const showOpeningTimePicker = () => {
|
openingTimeVisible.value = true;
|
};
|
|
const showEndTimePicker = () => {
|
endTimeVisible.value = true;
|
};
|
|
const handleTrainingDateConfirm = e => {
|
form.value.trainingDate = dayjs(e.value).format("YYYY-MM-DD");
|
nowDate.value = e.value;
|
trainingDateVisible.value = false;
|
};
|
|
const handleOpeningTimeConfirm = e => {
|
console.log(e);
|
form.value.openingTime = e.value;
|
openingTimeVisible.value = false;
|
};
|
|
const handleEndTimeConfirm = e => {
|
form.value.endTime = e.value;
|
endTimeVisible.value = false;
|
};
|
|
// 显示培训方式选择器
|
const showTrainingModeSheet = () => {
|
trainingModeSheetVisible.value = true;
|
};
|
|
// 处理培训方式选择
|
const handleTrainingModeSelect = item => {
|
form.value.trainingMode = item.value;
|
trainingModeName.value = item.name;
|
trainingModeSheetVisible.value = false;
|
};
|
|
// 返回上一页
|
const goBack = () => {
|
uni.removeStorageSync("safetyTraining");
|
uni.navigateBack();
|
};
|
|
// 提交表单
|
const handleSubmit = async () => {
|
if (!form.value.trainingDate) {
|
showToast("请选择培训日期");
|
return;
|
}
|
|
if (!form.value.openingTime) {
|
showToast("请选择开始时间");
|
return;
|
}
|
|
if (!form.value.endTime) {
|
showToast("请选择结束时间");
|
return;
|
}
|
if (!form.value.trainingContent) {
|
showToast("请输入培训内容");
|
return;
|
}
|
|
if (!form.value.trainingLecturer) {
|
showToast("请输入培训讲师");
|
return;
|
}
|
|
if (!form.value.classHour) {
|
showToast("请输入课时");
|
return;
|
}
|
if (
|
form.value.projectCredits &&
|
(isNaN(Number(form.value.projectCredits)) ||
|
Number(form.value.projectCredits) <= 0)
|
) {
|
showToast("学分必须是大于0的数字");
|
return;
|
}
|
form.value.openingTime = form.value.openingTime + ":00";
|
form.value.endTime = form.value.endTime + ":00";
|
|
if (
|
form.value.classHour &&
|
(isNaN(Number(form.value.classHour)) || Number(form.value.classHour) <= 0)
|
) {
|
showToast("课时必须是大于0的数字");
|
return;
|
}
|
|
try {
|
loading.value = true;
|
|
// 使用安全浅拷贝
|
const source =
|
form.value && typeof form.value === "object" ? form.value : {};
|
const submitData = {};
|
Object.keys(source).forEach(k => {
|
submitData[k] = source[k];
|
});
|
|
if (isEdit.value) {
|
const { code } = await safeTrainingAdd(submitData);
|
if (code === 200) {
|
showToast("修改成功");
|
setTimeout(() => {
|
goBack();
|
}, 500);
|
} else {
|
loading.value = false;
|
showToast("修改失败，请重试");
|
}
|
} else {
|
const { code } = await safeTrainingAdd(submitData);
|
if (code === 200) {
|
showToast("新增成功");
|
setTimeout(() => {
|
goBack();
|
}, 500);
|
} else {
|
loading.value = false;
|
showToast("新增失败，请重试");
|
}
|
}
|
} catch (e) {
|
loading.value = false;
|
console.error("提交失败:", e);
|
showToast("提交失败，请重试");
|
}
|
};
|
|
onLoad(() => {
|
// 编辑培训时，从本地存储获取数据
|
const safetyTraining = uni.getStorageSync("safetyTraining");
|
if (safetyTraining.id) {
|
form.value = safetyTraining;
|
nowDate.value = dayjs(form.value.trainingDate).toDate();
|
form.value.openingTime = form.value.openingTime
|
? form.value.openingTime.slice(0, 5)
|
: "";
|
form.value.endTime = form.value.endTime
|
? form.value.endTime.slice(0, 5)
|
: "";
|
isEdit.value = true;
|
} else {
|
isEdit.value = false;
|
// 默认培训日期为今天
|
form.value.trainingDate = dayjs().format("YYYY-MM-DD");
|
}
|
});
|
|
onMounted(() => {
|
// 初始化培训方式选项
|
if (safe_training_methods && Array.isArray(safe_training_methods.value)) {
|
trainingModeOptions.value =
|
safe_training_methods.value.map(item => ({
|
value: item.value,
|
name: item.label,
|
})) || [];
|
} else {
|
trainingModeOptions.value = [];
|
}
|
|
// 设置已选值的显示文本
|
if (form.value.trainingMode) {
|
const modeItem = trainingModeOptions.value.find(
|
item => String(item.value) === String(form.value.trainingMode)
|
);
|
trainingModeName.value = modeItem ? modeItem.name : "";
|
}
|
});
|
</script>
|
|
<style scoped lang="scss">
|
@import "@/static/scss/form-common.scss";
|
|
.danger-investigation-detail {
|
min-height: 100vh;
|
background: #f8f9fa;
|
padding-bottom: 100px;
|
}
|
|
.footer-btns {
|
position: fixed;
|
left: 0;
|
right: 0;
|
bottom: 0;
|
background: #fff;
|
display: flex;
|
justify-content: space-around;
|
align-items: center;
|
padding: 0.75rem 0;
|
box-shadow: 0 -0.125rem 0.5rem rgba(0, 0, 0, 0.05);
|
z-index: 1000;
|
}
|
|
.cancel-btn {
|
font-weight: 400;
|
font-size: 1rem;
|
color: #666;
|
background: #f5f5f5;
|
border: 1px solid #ddd;
|
width: 45%;
|
height: 2.5rem;
|
border-radius: 2.5rem;
|
}
|
|
.sign-btn {
|
font-weight: 500;
|
font-size: 1rem;
|
color: #fff;
|
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
border: none;
|
width: 45%;
|
height: 2.5rem;
|
border-radius: 2.5rem;
|
}
|
</style>
|
