zhxy-jsd/src/pages/view/routine/kefuxuncha/kyXkkcDetail.vue

<template>
  <BasicLayout>
    <!-- 待巡查内容 -->
    <view class="pending-inspection">
      <!-- 课程信息卡片 -->
      <view class="course-card mx-15 my-15 bg-white white-bg-color r-md p-15">
        <view class="flex-row items-center mb-15">
          <view class="course-icon flex-center mr-10">
            <u-icon name="calendar" color="#4080ff" size="20"></u-icon>
          </view>
          <text class="font-16 font-bold">{{ xkkc.kcmc }}</text>
          <text class="font-14 cor-999 ml-10"
            >{{ todayInfo.date }} ({{ todayInfo.weekName }})</text
          >
        </view>

        <!-- 课业辅导信息 -->
        <view class="course-time-info">
          <view class="time-item">
            <view class="time-label">年级：</view>
            <view class="time-value">{{ xkkc.gradeName || '暂无' }}</view>
          </view>
          <view class="time-item" v-if="xkkc.bjmc">
            <view class="time-label">班级：</view>
            <view class="time-value">{{ xkkc.bjmc || '暂无' }}</view>
          </view>
          <view class="time-item">
            <view class="time-label">巡查类型：</view>
            <view class="time-value">{{ xkkc.xclx === 'B' ? '课业辅导巡查' : '课程巡查' }}</view>
          </view>
          <view class="time-item">
            <view class="time-label">排班标题：</view>
            <view class="time-value">{{ xkkc.xcbt || '暂无' }}</view>
          </view>
          <view class="time-item">
            <view class="time-label">学期：</view>
            <view class="time-value">{{ xkkc.xqmc || '暂无' }}</view>
          </view>
        </view>

        <!-- 巡查时间状态 -->
        <view class="inspection-status" v-if="!canInspect">
          <u-icon name="clock" color="#ff9900" size="16"></u-icon>
          <text class="status-text">{{ inspectionStatusText }}</text>
        </view>
      </view>

      <view v-if="canInspect">
        <!-- 巡查项目 -->
        <view class="section mx-15 mb-15">
          <view class="section-title-bar">
            <view class="decorator"></view>
            <text class="title-text">巡查项目</text>
          </view>
          <view class="check-card bg-white r-md p-15">
            <template v-if="checkItems && checkItems.length > 0">
              <view class="check-list">
                <view
                  v-for="(item, index) in checkItems"
                  :key="item.id"
                  class="check-item"
                >
                  <view class="item-info flex-1">
                    <!-- 项目名称单独一行 -->
                    <text class="item-text"
                      >{{ index + 1 }}、{{ item.xcMc }}</text
                    >
                    <!-- 分值和结果同一行 -->
                    <view class="item-score-result">
                      <text class="item-deduction mr-20">
                        分值：{{ item.xmFz }}分
                      </text>
                      <view class="item-result">
                        <radio-group
                          :name="'result_' + item.id"
                          class="item-radio-group"
                          @change="onCheckItemChange($event, item)"
                          >
                          <label class="item-radio-label mr-10">
                            <radio
                              :value="'A'"
                              :checked="item.checked === true"
                              color="#4080ff"
                              class="item-radio"
                            />
                            <text class="ml-2">有</text>
                          </label>
                          <label class="item-radio-label">
                            <radio
                              :value="'B'"
                              :checked="item.checked === false"
                              color="#4080ff"
                              class="item-radio"
                            />
                            <text class="ml-2">无</text>
                          </label>
                        </radio-group>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
            </template>
            <template v-else>
              <view
                class="no-check-items"
                style="text-align: center; color: #999; padding: 20px 0"
              >
                暂无巡查项目
              </view>
            </template>
          </view>
        </view>

        <!-- 拍照上传 -->
        <view class="section mx-15 mb-15">
          <view class="section-title-bar">
            <view class="decorator"></view>
            <text class="title-text">拍照上传</text>
          </view>
          <view class="upload-card bg-white r-md p-15">
            <view class="upload-section">
              <view class="upload-list">
                <view
                  v-for="(image, index) in imageList"
                  :key="index"
                  class="upload-item"
                >
                  <image
                    :src="image.url ? imagUrl(image.url) : image.tempPath"
                    mode="aspectFill"
                    class="upload-image"
                    @click="previewImage(index)"
                  />
                  <view class="upload-delete" @click="deleteImage(index)">
                    <text class="delete-icon">×</text>
                  </view>
                </view>
                <view
                  v-if="imageList.length < 5"
                  class="upload-add"
                  @click="chooseImage"
                >
                  <text class="add-icon">+</text>
                  <text class="add-text">添加图片</text>
                </view>
              </view>
            </view>
          </view>
        </view>

        <!-- 拍视频上传 -->
        <view class="section mx-15 mb-30">
          <view class="section-title-bar">
            <view class="decorator"></view>
            <text class="title-text">拍视频上传</text>
          </view>
          <view class="upload-card bg-white r-md p-15">
            <view class="upload-section">
              <view class="upload-list">
                      <view
                  v-for="(video, index) in videoList"
                  :key="index"
                  class="upload-item"
                    >
                      <video
                    :src="video.url ? video.url : video.tempPath"
                    class="upload-video"
                        :controls="false"
                        :show-center-play-btn="false"
                        :show-play-btn="false"
                        :show-fullscreen-btn="false"
                        :show-progress="false"
                        :show-mute-btn="false"
                        :enable-progress-gesture="false"
                        :enable-play-gesture="false"
                        :loop="false"
                        :muted="true"
                        :poster="''"
                      ></video>
                  <view class="video-play-icon">
                    <u-icon name="play-right-fill" color="#fff" size="20"></u-icon>
                  </view>
                  <view class="upload-delete" @click="deleteVideo(index)">
                    <text class="delete-icon">×</text>
                  </view>
                </view>
                      <view
                  v-if="videoList.length < 3"
                  class="upload-add"
                  @click="chooseVideo"
                >
                  <text class="add-icon">+</text>
                  <text class="add-text">添加视频</text>
                      </view>
                    </view>
                  </view>
                </view>
              </view>
      </view>
    </view>

    <template #bottom>
      <view
        v-if="canInspect"
        class="submit-btn-wrap py-10 px-20 bg-white"
      >
        <button 
          class="submit-btn" 
          :class="{ 'submit-btn-disabled': isSubmitting }"
          :disabled="isSubmitting"
          @click="submit"
        >
          {{ isSubmitting ? '提交中...' : '提交巡查' }}
        </button>
      </view>
    </template>
  </BasicLayout>
</template>

<script setup lang="ts">
import { xcXmFindByXcLxApi } from "@/api/base/xcXmApi";
import { kyXcSaveApi } from "@/api/base/kyXcApi";
import { attachmentUpload } from "@/api/system/upload";
import BasicLayout from "@/components/BasicLayout/Layout.vue";
import { useDataStore } from "@/store/modules/data";
import { useUserStore } from "@/store/modules/user";
import { computed, onMounted, ref } from "vue";
import dayjs from "dayjs";
import { imagUrl } from "@/utils";
import { showLoading, hideLoading, showToast } from "@/utils/uniapp";

const { getJs } = useUserStore();
const { getData } = useDataStore();

const js = computed(() => getJs);
const xkkc = computed(() => getData);

const now = dayjs();
let wDay = now.day();
if (wDay === 0) {
  wDay = 7;
}
const wdNameList = ["周一", "周二", "周三", "周四", "周五", "周六", "周日"];
const todayInfo = ref({
  date: now.format("YYYY-MM-DD"),
  weekName: wdNameList[wDay - 1],
});

// 巡查项目
const checkItems = ref<any[]>([]);

// 图片列表 - 修改为包含临时路径和服务器路径的对象
interface ImageItem {
  tempPath?: string; // 临时路径（用于预览）
  url?: string; // 服务器路径（上传成功后）
  name?: string; // 文件名
}

// 视频列表 - 修改为包含临时路径和服务器路径的对象
interface VideoItem {
  tempPath?: string; // 临时路径（用于预览）
  url?: string; // 服务器路径（上传成功后）
  name?: string; // 文件名
}

const imageList = ref<ImageItem[]>([]);
const videoList = ref<VideoItem[]>([]);

// 巡查状态相关
const inspectionStatusText = ref("");
const canInspect = ref(true); // 是否可以巡查

// 提交状态控制
const isSubmitting = ref(false);

// 加载巡查项目
const loadCheckItems = async () => {
  try {
    const res = await xcXmFindByXcLxApi("课业辅导巡查");
    
    if (res && res.resultCode === 1 && res.result && res.result.length > 0) {
      checkItems.value = res.result.map((item: any) => {
        return {
          id: item.id,
          xcMc: item.xcMc,
          xmFz: item.xmFz,
          xcLx: item.xcLx,
          checked: false,
        };
      });
    } else {
      checkItems.value = [];
    }
  } catch (error) {
    console.error("加载巡查项目失败:", error);
    checkItems.value = [];
  }
};

const onCheckItemChange = (e: any, item: any) => {
  item.checked = e.detail.value === "A";
};

// 选择图片
const chooseImage = () => {
  uni.chooseImage({
    count: 5 - imageList.value.length,
    sizeType: ['compressed'],
    sourceType: ['album', 'camera'],
    success: async (res) => {
      // 添加临时图片到列表
      const tempFilePaths = res.tempFilePaths as string[];
      const newImages = tempFilePaths.map((path: string) => ({
        tempPath: path,
        name: path.split('/').pop() || 'image.jpg'
      }));
      imageList.value = [...imageList.value, ...newImages];
      // 自动上传图片
      await uploadImages(newImages);
    }
  });
};

// 选择视频
const chooseVideo = () => {
  uni.chooseVideo({
    sourceType: ['album', 'camera'],
    maxDuration: 60,
    camera: 'back',
    success: async (res) => {
      // 添加临时视频到列表
      const tempFilePath = res.tempFilePath;
      const newVideo = {
        tempPath: tempFilePath,
        name: tempFilePath.split('/').pop() || 'video.mp4'
      };
      videoList.value = [...videoList.value, newVideo];
      // 自动上传视频
      await uploadVideos([newVideo]);
    }
  });
};

// 上传图片到服务器
const uploadImages = async (images: ImageItem[]) => {
  try {
    showLoading('上传图片中...');
    
    for (let i = 0; i < images.length; i++) {
      const image = images[i];
      if (image.tempPath) {
        try {
          // 调用上传接口
          const uploadResult: any = await attachmentUpload(image.tempPath as any);
          
          if (uploadResult && uploadResult.resultCode === 1 && uploadResult.result && uploadResult.result.length > 0) {
            // 保存服务器返回的文件路径
            const serverPath = uploadResult.result[0].filePath;
            
            // 更新图片对象，保存服务器路径
            const index = imageList.value.findIndex(img => img.tempPath === image.tempPath);
            if (index !== -1) {
              imageList.value[index].url = serverPath;
              // 可以删除临时路径以节省内存
              delete imageList.value[index].tempPath;
            }
          } else {
            throw new Error('上传响应格式异常');
          }
        } catch (error) {
          console.error('图片上传失败:', error);
          showToast({ title: `${image.name || '图片'}上传失败`, icon: 'none' });
          
          // 从列表中移除上传失败的图片
          const index = imageList.value.findIndex(img => img.tempPath === image.tempPath);
          if (index !== -1) {
            imageList.value.splice(index, 1);
          }
        }
      }
    }
    
    hideLoading();
    showToast({ title: '图片上传完成', icon: 'success' });
  } catch (error) {
    hideLoading();
    console.error('批量上传图片失败:', error);
    showToast({ title: '图片上传失败，请重试', icon: 'none' });
  }
};

// 上传视频到服务器
const uploadVideos = async (videos: VideoItem[]) => {
  try {
    showLoading('上传视频中...');
    
    for (let i = 0; i < videos.length; i++) {
      const video = videos[i];
      if (video.tempPath) {
        try {
          // 调用上传接口
          const uploadResult: any = await attachmentUpload(video.tempPath as any);
          
          if (uploadResult && uploadResult.resultCode === 1 && uploadResult.result && uploadResult.result.length > 0) {
            // 保存服务器返回的文件路径
            const serverPath = uploadResult.result[0].filePath;
            
            // 更新视频对象，保存服务器路径
            const index = videoList.value.findIndex(v => v.tempPath === video.tempPath);
            if (index !== -1) {
              videoList.value[index].url = serverPath;
              // 可以删除临时路径以节省内存
              delete videoList.value[index].tempPath;
            }
          } else {
            throw new Error('上传响应格式异常');
          }
        } catch (error) {
          console.error('视频上传失败:', error);
          showToast({ title: `${video.name || '视频'}上传失败`, icon: 'none' });
          
          // 从列表中移除上传失败的视频
          const index = videoList.value.findIndex(v => v.tempPath === video.tempPath);
          if (index !== -1) {
            videoList.value.splice(index, 1);
          }
        }
      }
    }
    
    hideLoading();
    showToast({ title: '视频上传完成', icon: 'success' });
  } catch (error) {
    hideLoading();
    console.error('批量上传视频失败:', error);
    showToast({ title: '视频上传失败，请重试', icon: 'none' });
  }
};

// 预览图片
const previewImage = (index: number) => {
  const urls = imageList.value.map(img => 
    img.url ? imagUrl(img.url) : img.tempPath
  ).filter((url): url is string => !!url);
  
  uni.previewImage({
    urls: urls,
    current: index
  });
};

// 删除图片
const deleteImage = (index: number) => {
  imageList.value.splice(index, 1);
};

// 删除视频
const deleteVideo = (index: number) => {
  videoList.value.splice(index, 1);
};

// 检查巡查时间 - 课业辅导巡查不需要时间验证
const checkInspectionTime = () => {
  // 课业辅导巡查直接允许巡查，不需要时间验证
  canInspect.value = true;
  inspectionStatusText.value = "可以巡查";
};

// 提交数据
const submit = async () => {
  // 防抖动：如果正在提交，直接返回
  if (isSubmitting.value) {
    uni.showToast({
      title: "正在提交中，请勿重复点击",
      icon: "none",
      duration: 1500,
    });
    return;
  }

  if (!canInspect.value) {
    uni.showToast({
      title: inspectionStatusText.value,
      icon: "none",
      duration: 2000,
    });
    return;
  }

  // 验证巡查项目是否已选择
  const hasCheckedItems = checkItems.value.some(item => item.checked !== undefined);
  if (!hasCheckedItems) {
    uni.showToast({
      title: "请至少选择一个巡查项目",
      icon: "none",
      duration: 2000,
    });
    return;
  }

  // 设置提交状态
  isSubmitting.value = true;

  try {
    // 构建巡查项目列表
    const xkXcXmList = checkItems.value.map((item: any) => {
      const newItem = {
        ...item,
        xcXmId: item.id,
        xcJg: item.checked ? "A" : "B",
        xkXcId: "", // 这个会在后端设置
      };
      newItem.id = "";
      return newItem;
    });

    const submitData = {
      jsId: js.value.id,
      jsxm: js.value.xm || js.value.jsxm, // 添加教师姓名
      njId: xkkc.value.njId || '', // 确保年级ID不为空
      njmcId: xkkc.value.njmcId || '', // 确保年级名称ID不为空
      bjId: xkkc.value.bjId || '', // 确保班级ID不为空
      pbJsId: xkkc.value.pbJsId || xkkc.value.id, // 使用传递的pbJsId或课程记录ID
      xctime: now.format("YYYY-MM-DD HH:mm:ss"),
      zp: getImageUrls(),
      sp: getVideoUrls(),
      kyXcXmList: xkXcXmList, // 添加巡查项目列表
    };

    const res = await kyXcSaveApi(submitData);

    if (res && res.resultCode === 1) {
      uni.showToast({
        title: "提交成功",
        icon: "success",
      });
      setTimeout(() => {
        uni.navigateBack();
      }, 1500);
    } else {
      uni.showToast({
        title: "提交失败",
        icon: "none",
      });
    }
  } catch (error) {
    console.error('提交巡查失败:', error);
    uni.showToast({
      title: "提交失败",
      icon: "none",
    });
  } finally {
    // 重置提交状态
    isSubmitting.value = false;
  }
};

// 获取图片URL列表 - 转换为逗号分隔的字符串
const getImageUrls = () => {
  const urls = imageList.value
    .filter(img => img.url) // 只返回有url的图片
    .map(img => img.url)
    .filter((url): url is string => !!url); // 过滤掉undefined和null
  
  // 返回逗号分隔的字符串，如果没有图片则返回空字符串
  return urls.length > 0 ? urls.join(',') : '';
};

// 获取视频URL列表 - 转换为逗号分隔的字符串
const getVideoUrls = () => {
  const urls = videoList.value
    .filter(video => video.url) // 只返回有url的视频
    .map(video => video.url)
    .filter((url): url is string => !!url); // 过滤掉undefined和null
  
  // 返回逗号分隔的字符串，如果没有视频则返回空字符串
  return urls.length > 0 ? urls.join(',') : '';
};

// 页面加载时获取状态选项
onMounted(async () => {
  await loadCheckItems(); // 加载巡查项目
  checkInspectionTime();
});
</script>

<style scoped lang="scss">
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.bg-white {
  background-color: white;
}

.pending-inspection {
  padding-top: 0;
}

.course-card {
  border-radius: 8px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
}

.course-icon {
  width: 30px;
  height: 30px;
  border-radius: 4px;
  background-color: rgba(64, 128, 255, 0.1);
}

.course-time-info {
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #f9f9f9;
  border-radius: 4px;
  border: 1px solid #eee;

  .time-item {
    display: flex;
    justify-content: space-between;
    margin-bottom: 5px;

    .time-label {
      font-size: 14px;
      color: #666;
    }

    .time-value {
      font-size: 14px;
      font-weight: bold;
      color: #333;
    }
  }
}

.inspection-status {
  display: flex;
  align-items: center;
  margin-top: 15px;
  padding: 10px 15px;
  background-color: #fffbe6;
  border: 1px solid #ffe58f;
  border-radius: 4px;
  color: #faad14;
  font-size: 14px;

  .status-text {
    margin-left: 5px;
  }
}

.section {
  .section-title-bar {
    display: flex;
    align-items: center;
    margin-bottom: 10px;

    .decorator {
      width: 4px;
      height: 16px;
      background-color: #4080ff;
      margin-right: 8px;
      border-radius: 2px;
    }

    .title-text {
      font-size: 16px;
      font-weight: bold;
      color: #333;
    }
  }
}

.check-card {
  background-color: white;

  .check-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 0;
    border-bottom: 1px solid #eee;

    .item-score-result {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    &:first-child {
      padding-top: 0;
    }

    &:last-child {
      border-bottom: none;
      padding-bottom: 0;
    }
  }

  .item-info {
    display: flex;
    flex-direction: column;
  }

  .item-text {
    font-size: 14px;
    color: #333;
    margin-bottom: 4px;
  }

  .item-deduction {
    font-size: 12px;
    color: #999;
  }
}

.upload-card {
  background-color: white;
}

.upload-section {
  .upload-list {
      display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .upload-item {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 8px;
    overflow: hidden;
    border: 1px solid #e9ecef;

    .upload-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .upload-video {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .video-play-icon {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 32px;
      height: 32px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .upload-delete {
      position: absolute;
      top: 4px;
      right: 4px;
      width: 20px;
      height: 20px;
      background-color: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
        display: flex;
      align-items: center;
      justify-content: center;

      .delete-icon {
        color: #ffffff;
        font-size: 14px;
          font-weight: bold;
      }
    }
  }

  .upload-add {
    width: 80px;
    height: 80px;
    border: 2px dashed #e9ecef;
    border-radius: 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
    justify-content: center;
    background-color: #f8f9fa;
    cursor: pointer;

    .add-icon {
      font-size: 24px;
      color: #6c757d;
      margin-bottom: 4px;
    }

    .add-text {
      font-size: 12px;
      color: #6c757d;
    }
  }
}

.submit-btn {
  background-color: #4080ff;
  color: #fff;
  height: 44px;
  border-radius: 22px;
  font-size: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.submit-btn-disabled {
  background-color: #d9d9d9 !important;
  color: #999 !important;
  cursor: not-allowed;
}

.cor-primary {
  color: #4080ff;
}

.cor-warning {
  color: #ff9900;
}

.cor-danger {
  color: #ff4d4f;
}

.cor-666 {
  color: #666;
}

.cor-999 {
  color: #999;
}
</style>