dbsd_kczx/src/views/zy/zyInfoStudent/components/ZyInfoStudentPiyueForm.vue

<template>
  <a-spin :spinning="confirmLoading">
    <a-form ref="formRef" class="antd-modal-form" :labelCol="labelCol" :wrapperCol="wrapperCol">
      <a-row>
        <a-col :push="leftSpan - 1" :span="0" :lg="{ span: 1 }">
          <!-- <a-button style="margin-left: 28px;" type="primary" @click="changeSpan" size="small">{{ leftSpan == 12? '放大' : '缩小' }}</a-button> -->
          <img v-show="leftSpan == 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
            src="/resource/img/toright.png" />
          <img v-show="leftSpan != 12" @click="changeSpan" style="width: 25px;margin-left: 50px;cursor: pointer;"
            src="/resource/img/toleft.png" />
        </a-col>
      </a-row>
      <a-row>
        <a-col :xs="24" :lg="leftSpan">
          <div v-show="showType == '1'">
            <div class="wps-iframe" id="wpsiframeid" style="width:100%;height: 500px;"></div>
          </div>
          <div v-if="showType == '2'">
            <div style="padding: 10px 20px;">
              <a-button type="primary" @click="rotateImage">顺时针旋转</a-button>
              <a-button type="primary" @click="rotateImage2" style="margin-left: 20px;">逆时针旋转</a-button>
            </div>

            <div class="image-container">
              <img :src="ylurl" :style="{ transform: 'rotate(' + rotationAngle + 'deg)' }" class="rotated-image" />
            </div>
          </div>
          <div v-if="showType == '3'">
            <div class="video-container">
              <video ref="videoPlayer" :controls="controls" :autoplay="autoplay" :loop="loop" :src="videoUrl"
                @loadedmetadata="playVideoInFullscreen">
              </video>
            </div>
          </div>
          <!-- <div v-else>
            <a-button type="primary">下载文件</a-button>
          </div> -->
        </a-col>
        <a-col :xs="24" :lg="rightSpan">
          <a-row>
            <a-col :span="24">
              <a-form-item label="作业名称">
                {{ zyInfo.title }}
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="学生姓名">
                {{ formData.studentName }}
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="学生学号">
                {{ formData.createBy }}
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="评分" v-bind="validateInfos.score">
                <a-input-number v-model:value="formData.score" style="width: 100%" placeholder="请填写评分"></a-input-number>
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="批阅内容" v-bind="validateInfos.pyContent">
                <JEditor v-model:value="formData.pyContent" />
              </a-form-item>
            </a-col>
            <a-col :span="24">
              <a-form-item label="批阅附件" v-bind="validateInfos.pyFilePath">
                <j-upload v-model:value="formData.pyFilePath" maxCount="1" :text="`上传批阅附件`"
                  style="background: #ededed; " :forceAcceptVerify="true"></j-upload>
              </a-form-item>
            </a-col>
            <a-col :span="24" style="text-align: center;" v-if="disabled">
              <div>
                <a-button type="primary" @click="submitForm">保存</a-button>
                <a-button type="primary" @click="submitNextForm" style="margin-left: 10px;">保存并下一个</a-button>
              </div>
            </a-col>
          </a-row>
        </a-col>

      </a-row>
    </a-form>
  </a-spin>
</template>

<script lang="ts" setup>
import { ref, reactive, defineExpose, nextTick, defineProps, computed, onMounted, onUnmounted } from 'vue';
import { defHttp } from '/@/utils/http/axios';
import { useMessage } from '/@/hooks/web/useMessage';
import JUpload from '/@/components/Form/src/jeecg/components/JUpload/JUpload.vue';
import { getValueType } from '/@/utils';
import { saveOrUpdate } from '../ZyInfoStudent.api';
import { Form } from 'ant-design-vue';
import JEditor from '/@/components/Form/src/jeecg/components/JEditor.vue';
import { useGlobSetting } from '/@/hooks/setting';
import { getFileAccessHttpUrl } from '/@/utils/common/compUtils';
import { getToken } from '/@/utils/auth';
import WebOfficeSDK from './wpsApi/web-office-sdk-solution-v2.0.7.es'
import { useUserStore } from '/@/store/modules/user';

const leftSpan = ref(12)
const rightSpan = ref(12)
const userStore = useUserStore();
const props = defineProps({
  formDisabled: { type: Boolean, default: false },
  formData: { type: Object, default: () => { } },
  formBpm: { type: Boolean, default: true }
});
const formRef = ref();
const useForm = Form.useForm;
const emit = defineEmits(['register', 'ok', 'ok2']);
const formData = reactive<Record<string, any>>({
  id: '',
  score: '',
  pyContent: '',
  pyFilePath: '',
});
const { createMessage } = useMessage();
const labelCol = ref<any>({ xs: { span: 24 }, sm: { span: 5 } });
const wrapperCol = ref<any>({ xs: { span: 24 }, sm: { span: 16 } });
const confirmLoading = ref<boolean>(false);
const showType = ref<string>('1');
const ylurl = ref<string>('');
const rotationAngle = ref(0);
const zyInfo = ref<any>({});
const globSetting = useGlobSetting();
const baseApiUrl = globSetting.domainUrl;

const videoPlayer = ref(null);
const videoOpen = ref<boolean>(false);
const controls = ref(true);
const autoplay = ref(false)
const loop = ref(false);
const videoUrl = ref<String>('');
const jssdkInfo = ref<any>({});
const record_ = ref(null)

function changeSpan() {
  console.log('leftSpan', leftSpan.value)
  console.log('rightSpan', rightSpan.value)
  if (leftSpan.value == 12) {
    leftSpan.value = 18
    rightSpan.value = 6
  } else {
    leftSpan.value = 12
    rightSpan.value = 12
  }
  console.log('leftSpan--》', leftSpan.value)
  console.log('rightSpan--》', rightSpan.value)
  edit(record_.value)
}

//表单验证
const validatorRules = {
  score: [{ required: true, message: '请输入分数!' }],
};
const { resetFields, validate, validateInfos } = useForm(formData, validatorRules, { immediate: true });

// 表单禁用
const disabled = computed(() => {
  if (props.formBpm === true) {
    if (props.formData.disabled === false) {
      return false;
    } else {
      return true;
    }
  }
  return props.formDisabled;
});

function handleJyfz(record) {
  console.log(`🚀 ~ handleJyfz ~ record:`, record)
  // if(zyInfo.score){
  //   if(parseInt(record) > parseInt(zyInfo.score)){
  //     createMessage.warning('评分不能超过预设作业分值!');
  //     formData.score = zyInfo.score;
  //   }
  // }else{
  //   if(parseInt(record) > 100){
  //     createMessage.warning('评分不能超过100分!');
  //     formData.score = zyInfo.score;
  //   }
  // }

  if (parseInt(record) > 100) {
    createMessage.warning('评分不能超过100分!');
    formData.score = '';
  }

  if (parseInt(record) < 0) {
    createMessage.warning('评分不能低于0分!');
    formData.score = '';
  }

}

function rotateImage() {
  rotationAngle.value += 90; // 每次点击旋转90度
}

function rotateImage2() {
  rotationAngle.value -= 90; // 每次点击旋转90度
}
/**
 * 新增
 */
function add() {
  edit({});
}

/**
 * 编辑
 */
function edit(record) {
  record_.value = record
  showType.value = '1';
  formData.pyContent = ''
  nextTick(() => {
    resetFields();

    defHttp.get({ url: '/zyInfo/zyInfo/queryById', params: { id: record.mainId } }).then(res => {
      console.log(`🚀 ~ defHttp.get ~ res:`, res)
      zyInfo.value = res;
    })
    const parts = record.filePath.split('.');
    const filetype = parts[parts.length - 1];
    console.log(`🚀 ~ nextTick ~ filetype:`, filetype)
    // var file = getFileAccessHttpUrl(record.filePath);
    // ylurl.value = file;
    let wpsType = "w";
    if (filetype == 'jpg' || filetype == 'png' || filetype == 'jpeg' || filetype == 'xls' || filetype == 'xlsx' || filetype == 'text') {
      showType.value = '2';
      var file = getFileAccessHttpUrl(record.filePath);
      ylurl.value = file;
    } else if (filetype == 'doc' || filetype == 'docx') {
      showType.value = '1';
      wpsType = "w";
    } else if (filetype == 'pdf') {
      showType.value = '1';
      wpsType = "f";
    } else if (filetype == 'ppt' || filetype == 'pptx') {
      showType.value = '1';
      wpsType = "p";
    } else if (filetype == 'xls' || filetype == 'xlsx') {
      showType.value = '1';
      wpsType = "s";
    } else if (filetype == 'mp4' || filetype == 'avi' || filetype == 'mp3' || filetype == 'wav') {
      showType.value = '3';
      let url = getFileAccessHttpUrl(record.filePath);
      console.log('视频预览-----》', url);
      // videoOpen.value = true;
      videoUrl.value = url;
    } else {
      showType.value = '0';
    }
    //赋值
    Object.assign(formData, record);

    formData.id = '1863389832580046849';

    console.log("🚀 ~ nextTick ~ formData.id:", formData.id)
    if (showType.value == '1') {// 获取元素
      const element = document.getElementById('wpsiframeid');
      // 清空内容
      element.innerHTML = '';
      const jssdk = WebOfficeSDK.init({
        officeType: wpsType,
        appId: 'SX20241118WSUGQN',
        fileId: formData.id,
        mount: document.querySelector('.wps-iframe'),
        commonOptions: {
          isShowDocMap: false, //是否开启目录功能，默认开启
          // isShowTopArea: false, // 隐藏顶部区域（头部和工具栏）
          // isShowHeader: false, // 隐藏头部区域
          isBrowserViewFullscreen: true, // 是否在浏览器区域全屏
          isIframeViewFullscreen: true, // 是否在 iframe 区域内全屏
          acceptVisualViewportResizeEvent: true // 控制 WebOffice 是否接受外部的 VisualViewport
        },
        wordOptions: {
          isShowDocMap: false, // 是否开启目录功能，默认开启
          isBestScale: true, // 打开文档时，默认以最佳比例显示
          isShowBottomStatusBar: false, // 是否展示底部状态栏
        },
        token: userStore.getUserInfo.username
      })
    }

  });
  console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
  console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
  console.log("🚀 ~ nextTick ~ userStore.getUserInfo.id:", userStore.getUserInfo.id)
}

// --------------------------视频------------------------------
const playVideo = () => {
  videoPlayer.value.play();
};

const pauseVideo = () => {
  videoPlayer.value.pause();
};
const handleFullScreenChange = () => {
  if (!document.fullscreenElement) {
    console.log('Video exited fullscreen');
    // 这里可以执行取消全屏后的逻辑
    videoOpen.value = false;
    videoPlayer.value.pause();
  }
};

function videoHandleCancel() {
  pauseVideo();
  videoOpen.value = false;
}
onMounted(() => {
  document.addEventListener('fullscreenchange', handleFullScreenChange);
});

onUnmounted(() => {
  document.removeEventListener('fullscreenchange', handleFullScreenChange);
});

//视频预览
function handleVideo(three) {
  let url = getFileAccessHttpUrl(three.filePath);
  console.log('视频预览-----》', url);
  videoOpen.value = true;
  videoUrl.value = url;
  playVideoInFullscreen();
  // setTimeout(() => {
  //   playVideo();
  // }, 1000);

}

// --------------------------视频------------------------------
const playVideoInFullscreen = async () => {
  if (videoPlayer.value) {
    try {
      // 使用原生DOM方法请求全屏
      // await videoPlayer.value.requestFullscreen();
    } catch (err) {
      console.error(err);
    }
  }
};

/**
 * 提交数据
 */
async function submitForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (model.id) {
    isUpdate.value = true;
  }
  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }

  defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
    emit('ok');
  })
    .finally(() => {
      confirmLoading.value = false;
    });
  // await saveOrUpdate(model, isUpdate.value)
  //   .then((res) => {
  //     if (res.success) {
  //       createMessage.success(res.message);
  //       emit('ok');
  //     } else {
  //       createMessage.warning(res.message);
  //     }
  //   })
  //   .finally(() => {
  //     confirmLoading.value = false;
  //   });
}

/**
 * 提交数据并下一个
 */
async function submitNextForm() {
  // 触发表单验证
  await validate();
  confirmLoading.value = true;
  const isUpdate = ref<boolean>(false);
  //时间格式化
  let model = formData;
  if (model.id) {
    isUpdate.value = true;
  }
  //循环数据
  for (let data in model) {
    //如果该数据是数组并且是字符串类型
    if (model[data] instanceof Array) {
      let valueType = getValueType(formRef.value.getProps, data);
      //如果是字符串类型的需要变成以逗号分割的字符串
      if (valueType === 'string') {
        model[data] = model[data].join(',');
      }
    }
  }

  await defHttp.post({ url: '/zyInfoStudent/zyInfoStudent/editPiyue', params: model }).then(res => {
    emit('ok2');
  })


  await defHttp.get({ url: '/zyInfoStudent/zyInfoStudent/getList2', params: { column: 'createTime', order: 'asc', pageNo: 1, pageSize: 10, ywid: zyInfo.value.id, rwbh: zyInfo.value.rwbh, queryType: 5 } }).then(res => {
    console.log(`🚀 ~ awaitdefHttp.post ~ res:`, res)
    var list = res.records;
    if (list.length > 0) {
      edit(list[0])
    } else {
      createMessage.warning('已批阅完毕,暂无下一条批阅数据！');
    }
  })
    .finally(() => {
      confirmLoading.value = false;
    });
}

defineExpose({
  add,
  edit,
  submitForm,
});
</script>

<style lang="less" scoped>
.antd-modal-form {
  min-height: 150px !important;
  overflow-y: auto;
  padding: 24px 24px 24px 24px;
}

.video-container {
  text-align: center;
}

video {
  display: block;
  max-width: 100%;
  /* 确保视频宽度不超过其容器宽度 */
}

.image-container {
  padding: 10px;
  width: 100%;
  /* 设置容器宽度 */
  height: auto;
  /* 设置容器高度 */
  overflow: hidden;
  /* 隐藏溢出的部分 */
  display: flex;
  align-items: center;
  justify-content: center;
}

.rotated-image {
  max-width: 100%;
  /* 最大宽度为容器宽度 */
  max-height: 100%;
  /* 最大高度为容器高度 */
  object-fit: contain;
  /* 保持图片内容不失真 */
  transform: rotate(90deg);
  /* 假设图片已经旋转90度 */
}
</style>