732 lines
16 KiB
Vue
732 lines
16 KiB
Vue
<!-- src/pages/view/routine/yishiyice/addkc.vue -->
|
||
<template>
|
||
<view class="add-course-page">
|
||
<!-- 提交遮罩层 -->
|
||
<view v-if="isSubmitting" class="submit-overlay">
|
||
<view class="submit-loading">
|
||
<view class="loading-spinner"></view>
|
||
<text class="loading-text">保存中...</text>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="form-container">
|
||
<scroll-view scroll-y class="form-scroll">
|
||
<!-- 基本信息 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<text class="title-text">基本信息</text>
|
||
</view>
|
||
|
||
<!-- 课程名称 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">课程名称</text>
|
||
<input
|
||
v-model="formData.kcmc"
|
||
class="item-input"
|
||
placeholder="请输入课程名称"
|
||
maxlength="100"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 课程描述 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">课程描述</text>
|
||
<textarea
|
||
v-model="formData.kcms"
|
||
class="item-textarea"
|
||
placeholder="请输入课程描述"
|
||
maxlength="500"
|
||
:show-count="true"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 课程缩略图 -->
|
||
<view class="form-item">
|
||
<text class="item-label">课程缩略图</text>
|
||
<view class="upload-section">
|
||
<view class="upload-list">
|
||
<view v-if="thumbnailImage" class="upload-item">
|
||
<image
|
||
:src="thumbnailImage.url ? imagUrl(thumbnailImage.url) : thumbnailImage.tempPath"
|
||
mode="aspectFill"
|
||
class="upload-image"
|
||
@click="previewThumbnail"
|
||
/>
|
||
<view class="upload-delete" @click="deleteThumbnail">
|
||
<text class="delete-icon">×</text>
|
||
</view>
|
||
</view>
|
||
<view
|
||
v-if="!thumbnailImage"
|
||
class="upload-add"
|
||
@click="chooseThumbnail"
|
||
>
|
||
<text class="add-icon">+</text>
|
||
<text class="add-text">添加缩略图</text>
|
||
</view>
|
||
</view>
|
||
<view class="upload-tip">建议尺寸：800×600像素</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 教师设置 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<text class="title-text">教师设置</text>
|
||
</view>
|
||
|
||
<!-- 课程导师（上课老师） -->
|
||
<view class="form-item">
|
||
<text class="item-label required">课程导师</text>
|
||
<BasicJsPicker
|
||
:multiple="false"
|
||
title="选择课程导师"
|
||
placeholder="请选择课程导师"
|
||
searchPlaceholder="输入教师名称查询"
|
||
@change="onTeacherChange"
|
||
:defaultValue="formData.jsId ? [formData.jsId] : []"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 班主任 -->
|
||
<view class="form-item">
|
||
<text class="item-label">班主任</text>
|
||
<BasicJsPicker
|
||
:multiple="true"
|
||
title="选择班主任"
|
||
placeholder="请选择班主任"
|
||
searchPlaceholder="输入教师名称查询"
|
||
@change="onBzrChange"
|
||
:defaultValue="selectedBzrIds"
|
||
/>
|
||
</view>
|
||
|
||
<!-- 校级联系人 -->
|
||
<view class="form-item">
|
||
<text class="item-label">校级联系人</text>
|
||
<BasicJsPicker
|
||
:multiple="false"
|
||
title="选择校级联系人"
|
||
placeholder="请选择校级联系人"
|
||
searchPlaceholder="输入教师名称查询"
|
||
@change="onLjlxChange"
|
||
:defaultValue="formData.ljlxId ? [formData.ljlxId] : []"
|
||
/>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 发布设置 -->
|
||
<view class="section-card">
|
||
<view class="section-title">
|
||
<text class="title-text">发布设置</text>
|
||
</view>
|
||
|
||
<!-- 是否发布 -->
|
||
<view class="form-item">
|
||
<text class="item-label required">发布状态</text>
|
||
<picker
|
||
:range="publishOptions"
|
||
range-key="label"
|
||
:value="getPublishIndex()"
|
||
@change="onPublishChange"
|
||
class="item-picker"
|
||
>
|
||
<view class="picker-content">
|
||
<text class="picker-text">{{ getPublishLabel() }}</text>
|
||
<text class="picker-arrow">▼</text>
|
||
</view>
|
||
</picker>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 底部留白，避免被按钮遮挡 -->
|
||
<view style="height: 100px;"></view>
|
||
</scroll-view>
|
||
</view>
|
||
|
||
<!-- 底部操作按钮 -->
|
||
<view class="bottom-actions">
|
||
<view class="action-buttons">
|
||
<button @click="goBack" class="cancel-btn">取消</button>
|
||
<button @click="handleSubmit" :disabled="isSubmitting" class="submit-btn">
|
||
{{ isSubmitting ? '保存中...' : '保存' }}
|
||
</button>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script lang="ts" setup>
|
||
import { ref, reactive } from 'vue';
|
||
import { kcjbSaveApi } from '@/api/base/kcjbApi';
|
||
import { attachmentUpload } from '@/api/system/upload';
|
||
import { imagUrl } from '@/utils';
|
||
import BasicJsPicker from '@/components/BasicForm/components/BasicJsPicker.vue';
|
||
|
||
// 图片项类型
|
||
interface ImageItem {
|
||
tempPath?: string;
|
||
url?: string;
|
||
name?: string;
|
||
}
|
||
|
||
// 表单数据
|
||
const formData = reactive({
|
||
kcmc: '', // 课程名称
|
||
kcms: '', // 课程描述
|
||
jsId: '', // 上课老师ID
|
||
jsxm: '', // 上课老师姓名
|
||
bzrId: '', // 班主任ID（逗号分隔）
|
||
bzrxm: '', // 班主任姓名（逗号分隔）
|
||
ljlxId: '', // 校级联系人ID
|
||
ljlxxm: '', // 校级联系人姓名
|
||
kcjbtp: '', // 课程缩略图
|
||
kczt: 1 // 是否发布：1已发布，0未发布
|
||
});
|
||
|
||
// 缩略图
|
||
const thumbnailImage = ref<ImageItem | null>(null);
|
||
|
||
// 班主任选中的ID数组
|
||
const selectedBzrIds = ref<string[]>([]);
|
||
|
||
// 提交状态
|
||
const isSubmitting = ref(false);
|
||
|
||
// 发布状态选项
|
||
const publishOptions = [
|
||
{ label: '已发布', value: 1 },
|
||
{ label: '未发布', value: 0 }
|
||
];
|
||
|
||
// 获取发布状态索引
|
||
const getPublishIndex = () => {
|
||
return publishOptions.findIndex(item => item.value === formData.kczt);
|
||
};
|
||
|
||
// 获取发布状态标签
|
||
const getPublishLabel = () => {
|
||
const option = publishOptions.find(item => item.value === formData.kczt);
|
||
return option ? option.label : '已发布';
|
||
};
|
||
|
||
// 发布状态改变
|
||
const onPublishChange = (e: any) => {
|
||
const index = e.detail.value;
|
||
formData.kczt = publishOptions[index].value;
|
||
};
|
||
|
||
// 课程导师改变
|
||
const onTeacherChange = (selected: any[]) => {
|
||
console.log('课程导师选择:', selected);
|
||
if (selected && selected.length > 0) {
|
||
const teacher = selected[0];
|
||
formData.jsId = teacher.id;
|
||
formData.jsxm = teacher.jsxm;
|
||
} else {
|
||
formData.jsId = '';
|
||
formData.jsxm = '';
|
||
}
|
||
};
|
||
|
||
// 班主任改变
|
||
const onBzrChange = (selected: any[]) => {
|
||
console.log('班主任选择:', selected);
|
||
if (selected && selected.length > 0) {
|
||
selectedBzrIds.value = selected.map(item => item.id);
|
||
formData.bzrId = selected.map(item => item.id).join(',');
|
||
formData.bzrxm = selected.map(item => item.jsxm).join(',');
|
||
} else {
|
||
selectedBzrIds.value = [];
|
||
formData.bzrId = '';
|
||
formData.bzrxm = '';
|
||
}
|
||
};
|
||
|
||
// 校级联系人改变
|
||
const onLjlxChange = (selected: any[]) => {
|
||
console.log('校级联系人选择:', selected);
|
||
if (selected && selected.length > 0) {
|
||
const contact = selected[0];
|
||
formData.ljlxId = contact.id;
|
||
formData.ljlxxm = contact.jsxm;
|
||
} else {
|
||
formData.ljlxId = '';
|
||
formData.ljlxxm = '';
|
||
}
|
||
};
|
||
|
||
// 选择缩略图
|
||
const chooseThumbnail = () => {
|
||
uni.chooseImage({
|
||
count: 1,
|
||
sizeType: ['compressed'],
|
||
sourceType: ['album', 'camera'],
|
||
success: (res) => {
|
||
const tempPath = res.tempFilePaths[0];
|
||
thumbnailImage.value = { tempPath };
|
||
|
||
// 立即上传
|
||
uploadThumbnail(tempPath);
|
||
},
|
||
fail: (err) => {
|
||
console.error('选择图片失败:', err);
|
||
uni.showToast({
|
||
title: '选择图片失败',
|
||
icon: 'none'
|
||
});
|
||
}
|
||
});
|
||
};
|
||
|
||
// 上传缩略图
|
||
const uploadThumbnail = async (filePath: string) => {
|
||
uni.showLoading({ title: '上传中...' });
|
||
|
||
try {
|
||
const result = await attachmentUpload(filePath);
|
||
console.log('缩略图上传成功:', result);
|
||
|
||
if (thumbnailImage.value) {
|
||
thumbnailImage.value.url = result.url || result;
|
||
formData.kcjbtp = result.url || result;
|
||
}
|
||
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '上传成功',
|
||
icon: 'success'
|
||
});
|
||
} catch (error) {
|
||
console.error('缩略图上传失败:', error);
|
||
uni.hideLoading();
|
||
uni.showToast({
|
||
title: '上传失败',
|
||
icon: 'error'
|
||
});
|
||
|
||
// 上传失败，清除缩略图
|
||
thumbnailImage.value = null;
|
||
}
|
||
};
|
||
|
||
// 删除缩略图
|
||
const deleteThumbnail = () => {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '确定删除该缩略图吗？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
thumbnailImage.value = null;
|
||
formData.kcjbtp = '';
|
||
}
|
||
}
|
||
});
|
||
};
|
||
|
||
// 预览缩略图
|
||
const previewThumbnail = () => {
|
||
if (!thumbnailImage.value) return;
|
||
|
||
const url = thumbnailImage.value.url
|
||
? imagUrl(thumbnailImage.value.url)
|
||
: thumbnailImage.value.tempPath;
|
||
|
||
if (url) {
|
||
uni.previewImage({
|
||
urls: [url],
|
||
current: 0
|
||
});
|
||
}
|
||
};
|
||
|
||
// 表单验证
|
||
const validateForm = () => {
|
||
if (!formData.kcmc.trim()) {
|
||
uni.showToast({
|
||
title: '请输入课程名称',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (!formData.kcms.trim()) {
|
||
uni.showToast({
|
||
title: '请输入课程描述',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
if (!formData.jsId) {
|
||
uni.showToast({
|
||
title: '请选择课程导师',
|
||
icon: 'none'
|
||
});
|
||
return false;
|
||
}
|
||
|
||
return true;
|
||
};
|
||
|
||
// 提交表单
|
||
const handleSubmit = async () => {
|
||
if (!validateForm()) {
|
||
return;
|
||
}
|
||
|
||
isSubmitting.value = true;
|
||
|
||
try {
|
||
console.log('提交课程数据:', formData);
|
||
|
||
const submitData = {
|
||
kcmc: formData.kcmc,
|
||
kcms: formData.kcms,
|
||
jsId: formData.jsId,
|
||
jsxm: formData.jsxm,
|
||
bzrId: formData.bzrId,
|
||
bzrxm: formData.bzrxm,
|
||
ljlxId: formData.ljlxId,
|
||
ljlxxm: formData.ljlxxm,
|
||
kcjbtp: formData.kcjbtp,
|
||
kczt: formData.kczt
|
||
};
|
||
|
||
await kcjbSaveApi(submitData);
|
||
|
||
uni.showToast({
|
||
title: '保存成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
});
|
||
|
||
setTimeout(() => {
|
||
uni.navigateBack();
|
||
}, 1500);
|
||
} catch (error) {
|
||
console.error('保存课程失败:', error);
|
||
uni.showToast({
|
||
title: '保存失败，请重试',
|
||
icon: 'error'
|
||
});
|
||
} finally {
|
||
isSubmitting.value = false;
|
||
}
|
||
};
|
||
|
||
// 返回
|
||
const goBack = () => {
|
||
uni.navigateBack();
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.add-course-page {
|
||
min-height: 100vh;
|
||
background-color: #f5f7fa;
|
||
padding-bottom: 80px;
|
||
}
|
||
|
||
// 提交遮罩层
|
||
.submit-overlay {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
right: 0;
|
||
bottom: 0;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
z-index: 9999;
|
||
|
||
.submit-loading {
|
||
background-color: rgba(0, 0, 0, 0.8);
|
||
padding: 30px 40px;
|
||
border-radius: 12px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
gap: 15px;
|
||
|
||
.loading-spinner {
|
||
width: 40px;
|
||
height: 40px;
|
||
border: 3px solid rgba(255, 255, 255, 0.3);
|
||
border-top-color: #fff;
|
||
border-radius: 50%;
|
||
animation: spin 0.8s linear infinite;
|
||
}
|
||
|
||
.loading-text {
|
||
color: #fff;
|
||
font-size: 14px;
|
||
}
|
||
}
|
||
}
|
||
|
||
@keyframes spin {
|
||
to {
|
||
transform: rotate(360deg);
|
||
}
|
||
}
|
||
|
||
// 表单容器
|
||
.form-container {
|
||
flex: 1;
|
||
|
||
.form-scroll {
|
||
height: calc(100vh - 80px);
|
||
padding: 15px;
|
||
}
|
||
}
|
||
|
||
// 区块卡片
|
||
.section-card {
|
||
background-color: #ffffff;
|
||
border-radius: 12px;
|
||
padding: 20px;
|
||
margin-bottom: 15px;
|
||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
|
||
|
||
.section-title {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
margin-bottom: 20px;
|
||
padding-bottom: 12px;
|
||
border-bottom: 2px solid #f0f0f0;
|
||
|
||
.title-text {
|
||
font-size: 16px;
|
||
font-weight: 600;
|
||
color: #2c3e50;
|
||
position: relative;
|
||
padding-left: 12px;
|
||
|
||
&::before {
|
||
content: '';
|
||
position: absolute;
|
||
left: 0;
|
||
top: 50%;
|
||
transform: translateY(-50%);
|
||
width: 4px;
|
||
height: 16px;
|
||
background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
|
||
border-radius: 2px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 表单项
|
||
.form-item {
|
||
margin-bottom: 20px;
|
||
|
||
&:last-child {
|
||
margin-bottom: 0;
|
||
}
|
||
|
||
.item-label {
|
||
display: block;
|
||
font-size: 14px;
|
||
color: #606266;
|
||
margin-bottom: 10px;
|
||
font-weight: 500;
|
||
|
||
&.required::before {
|
||
content: '*';
|
||
color: #f56c6c;
|
||
margin-right: 4px;
|
||
}
|
||
}
|
||
|
||
.item-input {
|
||
width: 100%;
|
||
padding: 12px 15px;
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
|
||
&::placeholder {
|
||
color: #c0c4cc;
|
||
}
|
||
}
|
||
|
||
.item-textarea {
|
||
width: 100%;
|
||
min-height: 120px;
|
||
padding: 12px 15px;
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
font-size: 14px;
|
||
color: #333;
|
||
box-sizing: border-box;
|
||
|
||
&::placeholder {
|
||
color: #c0c4cc;
|
||
}
|
||
}
|
||
|
||
.item-picker {
|
||
width: 100%;
|
||
|
||
.picker-content {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
padding: 12px 15px;
|
||
background-color: #f8f9fa;
|
||
border: 1px solid #e9ecef;
|
||
border-radius: 8px;
|
||
|
||
.picker-text {
|
||
font-size: 14px;
|
||
color: #333;
|
||
}
|
||
|
||
.picker-arrow {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 上传区域
|
||
.upload-section {
|
||
.upload-list {
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
|
||
.upload-item {
|
||
position: relative;
|
||
width: 100px;
|
||
height: 100px;
|
||
border-radius: 8px;
|
||
overflow: hidden;
|
||
|
||
.upload-image {
|
||
width: 100%;
|
||
height: 100%;
|
||
object-fit: cover;
|
||
}
|
||
|
||
.upload-delete {
|
||
position: absolute;
|
||
top: 0;
|
||
right: 0;
|
||
width: 24px;
|
||
height: 24px;
|
||
background-color: rgba(0, 0, 0, 0.6);
|
||
border-radius: 0 8px 0 8px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
|
||
.delete-icon {
|
||
color: #fff;
|
||
font-size: 18px;
|
||
font-weight: bold;
|
||
}
|
||
}
|
||
}
|
||
|
||
.upload-add {
|
||
width: 100px;
|
||
height: 100px;
|
||
border: 2px dashed #dcdfe6;
|
||
border-radius: 8px;
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
justify-content: center;
|
||
background-color: #fafafa;
|
||
cursor: pointer;
|
||
|
||
.add-icon {
|
||
font-size: 32px;
|
||
color: #909399;
|
||
margin-bottom: 5px;
|
||
}
|
||
|
||
.add-text {
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
|
||
&:active {
|
||
background-color: #f0f0f0;
|
||
}
|
||
}
|
||
|
||
.upload-tip {
|
||
margin-top: 8px;
|
||
font-size: 12px;
|
||
color: #909399;
|
||
}
|
||
}
|
||
|
||
// 底部操作按钮
|
||
.bottom-actions {
|
||
position: fixed;
|
||
bottom: 0;
|
||
left: 0;
|
||
right: 0;
|
||
background-color: #fff;
|
||
padding: 15px;
|
||
box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
|
||
z-index: 100;
|
||
|
||
.action-buttons {
|
||
display: flex;
|
||
gap: 15px;
|
||
|
||
button {
|
||
flex: 1;
|
||
height: 44px;
|
||
border-radius: 8px;
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.cancel-btn {
|
||
background-color: #f5f7fa;
|
||
color: #606266;
|
||
|
||
&:active {
|
||
background-color: #e9ecef;
|
||
}
|
||
}
|
||
|
||
.submit-btn {
|
||
background: linear-gradient(135deg, #007aff 0%, #0056cc 100%);
|
||
color: #fff;
|
||
box-shadow: 0 4px 16px rgba(0, 122, 255, 0.3);
|
||
|
||
&:active {
|
||
opacity: 0.9;
|
||
}
|
||
|
||
&:disabled {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|
||
|