all-project/mobile/src/pages/visit/edit.vue

<template>
    <view class="visit-edit-container">
        <!-- 表单内容 -->
        <u-form
            ref="formRef"
            :model="form"
            :rules="rules"
            label-width="180rpx"
            label-position="left"
        >
            <!-- 学生信息展示 -->
            <view class="form-section">
                <view class="section-title">学生信息</view>
                
                <view class="student-info-section">
                    <view class="info-row">
                        <text class="info-label">学生姓名：</text>
                        <text class="info-value">{{ visitInfo.studentName || '-' }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">学号：</text>
                        <text class="info-value">{{ visitInfo.studentNo || '-' }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">班级：</text>
                        <text class="info-value">{{ visitInfo.className || '-' }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">专业：</text>
                        <text class="info-value">{{ visitInfo.majorName || '-' }}</text>
                    </view>
                    <view class="info-row">
                        <text class="info-label">实习单位：</text>
                        <text class="info-value">{{ visitInfo.companyName || '-' }}</text>
                    </view>
                </view>
            </view>

            <!-- 走访基本信息 -->
            <view class="form-section">
                <view class="section-title">走访信息</view>
                
                <u-form-item label="走访日期" prop="visitDate" required>
                    <view @click="showVisitDatePicker = true" style="width: 100%">
                        <u-input
                            v-model="form.visitDate"
                            placeholder="请选择走访日期"
                            readonly
                            border="none"
                            suffix-icon="calendar"
                            suffix-icon-style="color: #c8c9cc;"
                            style="pointer-events: none"
                        />
                    </view>
                </u-form-item>
                
                <u-form-item label="走访人员" prop="visitorName" required>
                    <u-input
                        v-model="form.visitorName"
                        placeholder="请输入走访人员姓名"
                        border="none"
                        clearable
                    />
                </u-form-item>
                
                <u-form-item label="走访人职务" prop="visitorPosition">
                    <u-input
                        v-model="form.visitorPosition"
                        placeholder="请输入走访人员职务"
                        border="none"
                        clearable
                    />
                </u-form-item>
                
                <u-form-item label="走访目的" prop="visitPurpose" required>
                    <u-textarea
                        v-model="form.visitPurpose"
                        placeholder="请输入走访目的"
                        :maxlength="500"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
            </view>

            <!-- 走访内容 -->
            <view class="form-section">
                <view class="section-title">走访内容</view>
                
                <u-form-item label="企业情况" prop="companySituation">
                    <u-textarea
                        v-model="form.companySituation"
                        placeholder="请描述企业基本情况"
                        :maxlength="1000"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
                
                <u-form-item label="学生表现" prop="studentPerformance">
                    <u-textarea
                        v-model="form.studentPerformance"
                        placeholder="请描述学生实习表现"
                        :maxlength="1000"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
                
                <u-form-item label="发现问题" prop="problemsFound">
                    <u-textarea
                        v-model="form.problemsFound"
                        placeholder="请描述发现的问题"
                        :maxlength="1000"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
                
                <u-form-item label="改进建议" prop="suggestions">
                    <u-textarea
                        v-model="form.suggestions"
                        placeholder="请提出改进建议"
                        :maxlength="1000"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
                
                <u-form-item label="走访总结" prop="visitSummary">
                    <u-textarea
                        v-model="form.visitSummary"
                        placeholder="请输入走访总结"
                        :maxlength="1000"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
            </view>

            <!-- 现场照片 -->
            <view class="form-section">
                <view class="section-title">现场照片</view>
                
                <view class="upload-section">
                    <view class="image-list">
                        <view 
                            class="image-item" 
                            v-for="(image, index) in imageList" 
                            :key="index"
                        >
                            <image 
                                :src="image.url" 
                                mode="aspectFill" 
                                @click="previewImage(index)"
                            />
                            <view class="delete-btn" @click="removeImage(index)">
                                <u-icon name="close" size="12" color="#ffffff" />
                            </view>
                        </view>
                        
                        <view 
                            class="upload-btn" 
                            @click="chooseImage"
                            v-if="imageList.length < maxImageCount"
                        >
                            <u-icon name="camera" size="24" color="#c8c9cc" />
                            <text class="upload-text">添加照片</text>
                        </view>
                    </view>
                    <text class="upload-tip">最多上传{{ maxImageCount }}张照片</text>
                </view>
            </view>

            <!-- 备注信息 -->
            <view class="form-section">
                <view class="section-title">备注信息</view>
                
                <u-form-item label="备注" prop="remark">
                    <u-textarea
                        v-model="form.remark"
                        placeholder="请输入备注信息（可选）"
                        :maxlength="500"
                        show-confirm-bar
                        height="120"
                        auto-height
                    />
                </u-form-item>
            </view>
        </u-form>

        <!-- 底部操作按钮 -->
        <view class="bottom-actions">
            <u-button 
                type="default" 
                @click="saveDraft"
                :loading="draftLoading"
                style="margin-right: 20rpx;"
            >
                保存草稿
            </u-button>
            <u-button 
                type="primary" 
                @click="submitForm"
                :loading="submitLoading"
                style="flex: 1;"
            >
                更新走访记录
            </u-button>
        </view>

        <!-- 日期选择器 -->
        <u-datetime-picker
            :show="showVisitDatePicker"
            v-model="visitDateValue"
            mode="date"
            :maxDate="maxDate"
            @confirm="handleVisitDateConfirm"
            @cancel="showVisitDatePicker = false"
        />

        <!-- 加载遮罩 -->
        <u-loading-page 
            :loading="pageLoading" 
            loading-text="加载中..."
            loading-mode="circle"
        />
    </view>
</template>

<script>
import { getVisit, updateVisit } from '@/api/visit.js';

export default {
    name: 'VisitEdit',
    data() {
        return {
            // 页面参数
            visitId: '',
            
            // 页面状态
            pageLoading: true,
            
            // 走访信息
            visitInfo: {},
            
            // 表单数据
            form: {
                visitId: '',
                studentId: '',
                internshipId: '',
                companyName: '',
                companyAddress: '',
                visitDate: '',
                visitorName: '',
                visitorPosition: '',
                visitPurpose: '',
                companySituation: '',
                studentPerformance: '',
                problemsFound: '',
                suggestions: '',
                visitSummary: '',
                visitImages: '',
                remark: '',
                status: ''
            },
            
            // 表单验证规则
            rules: {
                visitDate: [
                    { required: true, message: '请选择走访日期', trigger: ['blur', 'change'] }
                ],
                visitorName: [
                    { required: true, message: '请输入走访人员姓名', trigger: ['blur', 'change'] }
                ],
                visitPurpose: [
                    { required: true, message: '请输入走访目的', trigger: ['blur', 'change'] }
                ]
            },
            
            // 日期选择
            showVisitDatePicker: false,
            visitDateValue: Date.now(),
            maxDate: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30天后
            
            // 图片上传
            imageList: [],
            maxImageCount: 10,
            
            // 加载状态
            submitLoading: false,
            draftLoading: false
        };
    },
    
    onLoad(options) {
        if (options.id) {
            this.visitId = options.id;
            this.loadVisitDetail();
        } else {
            uni.showToast({ title: '参数错误', icon: 'none' });
            uni.navigateBack();
        }
    },
    
    methods: {
        // 加载走访记录详情
        async loadVisitDetail() {
            this.pageLoading = true;
            try {
                const response = await getVisit(this.visitId);
                
                if (response.code === 200 && response.data) {
                    this.visitInfo = response.data;
                    
                    // 填充表单数据
                    this.form = {
                        visitId: response.data.visitId,
                        studentId: response.data.studentId,
                        internshipId: response.data.internshipId,
                        companyName: response.data.companyName,
                        companyAddress: response.data.companyAddress,
                        visitDate: response.data.visitDate,
                        visitorName: response.data.visitorName,
                        visitorPosition: response.data.visitorPosition,
                        visitPurpose: response.data.visitPurpose,
                        companySituation: response.data.companySituation,
                        studentPerformance: response.data.studentPerformance,
                        problemsFound: response.data.problemsFound,
                        suggestions: response.data.suggestions,
                        visitSummary: response.data.visitSummary,
                        visitImages: response.data.visitImages,
                        remark: response.data.remark,
                        status: response.data.status
                    };
                    
                    // 处理图片数据
                    if (response.data.visitImages) {
                        try {
                            this.imageList = JSON.parse(response.data.visitImages) || [];
                        } catch (e) {
                            console.warn('解析图片数据失败:', e);
                            this.imageList = [];
                        }
                    }
                    
                    // 设置日期选择器的值
                    if (response.data.visitDate) {
                        this.visitDateValue = new Date(response.data.visitDate).getTime();
                    }
                    
                } else {
                    uni.showToast({ title: response.msg || '获取数据失败', icon: 'none' });
                    uni.navigateBack();
                }
            } catch (error) {
                console.error('加载走访记录详情失败:', error);
                uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
                uni.navigateBack();
            } finally {
                this.pageLoading = false;
            }
        },
        
        // 走访日期确认
        handleVisitDateConfirm(value) {
            const date = new Date(value);
            this.form.visitDate = this.formatDate(date);
            this.showVisitDatePicker = false;
        },
        
        // 格式化日期
        formatDate(date) {
            const year = date.getFullYear();
            const month = String(date.getMonth() + 1).padStart(2, '0');
            const day = String(date.getDate()).padStart(2, '0');
            return `${year}-${month}-${day}`;
        },
        
        // 选择图片
        chooseImage() {
            const remainCount = this.maxImageCount - this.imageList.length;
            uni.chooseImage({
                count: remainCount,
                sizeType: ['compressed'],
                sourceType: ['album', 'camera'],
                success: (res) => {
                    this.handleImageUpload(res.tempFilePaths);
                }
            });
        },
        
        // 处理图片上传
        async handleImageUpload(filePaths) {
            uni.showLoading({ title: '上传中...' });
            
            try {
                for (const filePath of filePaths) {
                    // 这里应该调用具体的文件上传接口
                    // 暂时使用本地路径作为示例
                    this.imageList.push({
                        url: filePath,
                        path: filePath
                    });
                }
                
                // 更新表单中的图片数据
                this.form.visitImages = JSON.stringify(this.imageList);
            } catch (error) {
                console.error('上传图片失败:', error);
                uni.showToast({ title: '上传图片失败', icon: 'none' });
            } finally {
                uni.hideLoading();
            }
        },
        
        // 预览图片
        previewImage(index) {
            const urls = this.imageList.map(item => item.url);
            uni.previewImage({
                urls,
                current: index
            });
        },
        
        // 删除图片
        removeImage(index) {
            this.imageList.splice(index, 1);
            this.form.visitImages = JSON.stringify(this.imageList);
        },
        
        // 保存草稿
        async saveDraft() {
            this.draftLoading = true;
            try {
                const formData = {
                    ...this.form,
                    status: 'planned' // 草稿状态
                };
                
                const response = await updateVisit(formData);
                
                if (response.code === 200) {
                    uni.showToast({ title: '草稿保存成功', icon: 'success' });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                } else {
                    uni.showToast({ title: response.msg || '保存失败', icon: 'none' });
                }
            } catch (error) {
                console.error('保存草稿失败:', error);
                uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
            } finally {
                this.draftLoading = false;
            }
        },
        
        // 提交表单
        async submitForm() {
            // 表单验证
            try {
                await this.$refs.formRef.validate();
            } catch (error) {
                console.log('表单验证失败:', error);
                return;
            }
            
            this.submitLoading = true;
            try {
                const formData = {
                    ...this.form,
                    status: 'completed' // 已完成状态
                };
                
                const response = await updateVisit(formData);
                
                if (response.code === 200) {
                    uni.showToast({ title: '更新成功', icon: 'success' });
                    setTimeout(() => {
                        uni.navigateBack();
                    }, 1500);
                } else {
                    uni.showToast({ title: response.msg || '更新失败', icon: 'none' });
                }
            } catch (error) {
                console.error('更新走访记录失败:', error);
                uni.showToast({ title: '网络异常，请稍后重试', icon: 'none' });
            } finally {
                this.submitLoading = false;
            }
        }
    }
};
</script>

<style lang="scss" scoped>
.visit-edit-container {
    min-height: 100vh;
    background-color: #f8f8f8;
    padding-bottom: 120rpx; // 为底部按钮留出空间
}

.form-section {
    background: #ffffff;
    margin-bottom: 20rpx;
    padding: 0 20rpx;
    
    .section-title {
        padding: 24rpx 0 16rpx;
        font-size: 32rpx;
        font-weight: 600;
        color: #303133;
        border-bottom: 1rpx solid #ebeef5;
        margin-bottom: 20rpx;
    }
}

.student-info-section {
    background: #f8f9fa;
    border-radius: 8rpx;
    padding: 20rpx;
    margin-top: 16rpx;
    
    .info-row {
        display: flex;
        margin-bottom: 12rpx;
        
        &:last-child {
            margin-bottom: 0;
        }
        
        .info-label {
            font-size: 28rpx;
            color: #606266;
            width: 140rpx;
        }
        
        .info-value {
            font-size: 28rpx;
            color: #303133;
            flex: 1;
        }
    }
}

.upload-section {
    .image-list {
        display: flex;
        flex-wrap: wrap;
        gap: 16rpx;
        margin-bottom: 16rpx;
        
        .image-item {
            position: relative;
            width: 160rpx;
            height: 160rpx;
            border-radius: 8rpx;
            overflow: hidden;
            
            image {
                width: 100%;
                height: 100%;
            }
            
            .delete-btn {
                position: absolute;
                top: 8rpx;
                right: 8rpx;
                width: 32rpx;
                height: 32rpx;
                border-radius: 50%;
                background: rgba(0, 0, 0, 0.6);
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
        
        .upload-btn {
            width: 160rpx;
            height: 160rpx;
            border: 2rpx dashed #c8c9cc;
            border-radius: 8rpx;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            
            .upload-text {
                font-size: 24rpx;
                color: #c8c9cc;
                margin-top: 8rpx;
            }
        }
    }
    
    .upload-tip {
        font-size: 24rpx;
        color: #909399;
    }
}

.bottom-actions {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: #ffffff;
    padding: 20rpx;
    border-top: 1rpx solid #ebeef5;
    display: flex;
    align-items: center;
    z-index: 100;
}
</style>