zhouwx
2025-07-23 0a7829811f6df7a6eb4e32ba5ba53b1db9f10e9c
src/views/work/onlineEducation/offlineEducation/index.vue
@@ -62,7 +62,7 @@
      <el-table-column label="课程名称" prop="courseName" align="center"/>
      <el-table-column label="培训等级" prop="level" align="center">
        <template #default="scope">
          <span>{{scope.row.sex == 1 ? '公司级':scope.row.sex == 2 ? '部门级' : '车间级'}}</span>
          <span>{{scope.row.level == 1 ? '公司级':scope.row.level == 2 ? '部门级' : '车间级'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="要求课时(分)" prop="period" align="center"/>
@@ -71,6 +71,24 @@
      <el-table-column label="是否合格" prop="passed" align="center">
        <template #default="scope">
          <span>{{scope.row.passed == 0 ? '不合格':'合格'}}</span>
        </template>
      </el-table-column>
      <el-table-column label="培训记录" prop="passed" align="center" width="180">
        <template #default="scope">
          <div v-for="item in scope.row.files" style="display: flex;flex-direction: column">
            <div style="display: flex;flex-direction: column;align-items: center">
              <el-link type="primary" @click="openFile(item.filePath)">{{item.fileName}}</el-link>
              <el-button style="width: 50px;margin-bottom: 5px" size="small" @click="downloadFile(item)">下载</el-button>
            </div>
          </div>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
        <template #default="scope">
          <el-button link type="primary"  @click="openDialog('edit',scope.row)" >编辑</el-button>
          <el-button link type="danger"  @click="handleDelete(scope.row)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
@@ -95,7 +113,10 @@
import {delUser, getUser} from "@/api/onlineEducation/user";
import Cookies from "js-cookie";
import {delStudent, getStudent} from "@/api/onlineEducation/student";
import {getRecord} from "@/api/onlineEducation/examRecord";
import {delRecord, getRecord} from "@/api/onlineEducation/examRecord";
import {renderAsync} from "docx-preview";
import axios from "axios";
import {getToken} from "@/utils/auth";
const { proxy } = getCurrentInstance();
@@ -103,6 +124,7 @@
const dialogRef = ref();
const data = reactive({
  queryParams: {
    companyId: null,
    companyName: '',
    courseName: '',
    pageNum: 1,
@@ -121,8 +143,10 @@
  console.log("userInfo",userInfo)
  if(userInfo.userType === 0){
    data.isAdmin = true;
    // data.queryParams.companyId = null
  }else {
    data.isAdmin = false;
    // data.queryParams.companyId = userInfo.companyId
  }
  await getList()
})
@@ -167,7 +191,7 @@
        type: 'warning',
      })
      .then( async() => {
        const res = await delStudent(val.id)
        const res = await delRecord(val.id)
        if(res.code == 200){
          ElMessage.success('数据删除成功')
          await getList()
@@ -176,5 +200,65 @@
        }
      })
}
const openFile = async(path)=>{
  const ext = path.split('.').pop().toLowerCase();
  if (ext === 'doc' || ext === 'xls' || ext === 'xlsx') {
    ElMessageBox.confirm(`暂不支持线上预览.${ext}文件,是否下载查看?`, '提示', { confirmButtonText: '确认', cancelButtonText: '取消', type: 'warning' }).then(() => {
      window.open(`${import.meta.env.VITE_APP_BASE_API}/${path}`, '_blank');
    }).catch(() => {
      console.log('取消预览')
    });
    return
  }else if(ext === 'pdf' || ext === 'jpg'||  ext === 'jpeg' || ext === 'png' ){
    window.open(`${import.meta.env.VITE_APP_BASE_API}/${path}`, '_blank');
  }else{
    try {
      // 1. 获取文件
      const response = await fetch(import.meta.env.VITE_APP_BASE_API + '/' + path);
      const arrayBuffer = await response.arrayBuffer();
      // 2. 创建新窗口
      const win = window.open('', '_blank');
      win.document.write(`
      <!DOCTYPE html>
      <html>
        <head>
          <title>预览</title>
          <style>
            body { margin: 20px; font-family: Arial; }
            .docx-container { width: 100%; height: 100%; }
          </style>
        </head>
        <body>
          <div id="container" class="docx-container"></div>
        </body>
      </html>
    `);
      // 3. 渲染 DOCX
      await renderAsync(arrayBuffer, win.document.getElementById('container'));
    } catch (error) {
      console.error('预览失败:', error);
      alert(`预览失败: ${error.message}`);
    }
  }
}
const downloadFile = (e)=>{
  axios.get(import.meta.env.VITE_APP_BASE_API + '/' +e.filePath,{headers:{'Content-Type': 'application/json','Authorization': `${getToken()}`},responseType: 'blob'}).then(res=>{
    if (res) {
      const link = document.createElement('a')
      let blob = new Blob([res.data],{type: res.data.type})
      link.style.display = "none";
      link.href = URL.createObjectURL(blob); // 创建URL
      link.setAttribute("download", e.fileName);
      document.body.appendChild(link);
      link.click();
      document.body.removeChild(link);
    } else {
      ElMessage({
        type: 'warning',
        message: '文件读取失败'
      });
    }
  })
}
</script>