From 5a851b75029a724ec5ffe6c38084506353a70746 Mon Sep 17 00:00:00 2001
From: xzg <4727863@qq.com>
Date: Thu, 14 Mar 2024 16:36:05 +0800
Subject: [PATCH] =?UTF-8?q?=E5=88=87=E7=89=87=E4=B8=8A=E4=BC=A0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/router/axios.js                  |   2 +-
 src/views/edutraining/courseinfo.vue | 772 ++++++++++++++++-----------
 vue.config.js                        |   2 +
 3 files changed, 454 insertions(+), 322 deletions(-)

diff --git a/src/router/axios.js b/src/router/axios.js
index 12b7287..040050d 100644
--- a/src/router/axios.js
+++ b/src/router/axios.js
@@ -17,7 +17,7 @@ import NProgress from "nprogress";
 import "nprogress/nprogress.css";
 
 //默认超时时间
-axios.defaults.timeout = 500000;
+axios.defaults.timeout = 500000; 
 //返回其他状态码
 axios.defaults.validateStatus = function (status) {
   return status >= 200 && status <= 500;
diff --git a/src/views/edutraining/courseinfo.vue b/src/views/edutraining/courseinfo.vue
index 6869818..0cf28b5 100644
--- a/src/views/edutraining/courseinfo.vue
+++ b/src/views/edutraining/courseinfo.vue
@@ -1,347 +1,477 @@
 <template>
+
     <basic-container>
-        <avue-crud
-            :option="option"
-            :table-loading="loading"
-            :data="data"
-            :page.sync="page"
-            :permission="permissionList"
-            :before-open="beforeOpen"
-            v-model="form"
-            ref="crud"
-            @row-update="rowUpdate"
-            @row-save="rowSave"
-            @row-del="rowDel"
-            @search-change="searchChange"
-            @search-reset="searchReset"
-            @selection-change="selectionChange"
-            @current-change="currentChange"
-            @size-change="sizeChange"
-            @refresh-change="refreshChange"
-            @on-load="onLoad"
-        >
-            <template slot="menuLeft">
-                <el-button
-                    type="danger"
-                    size="small"
-                    icon="el-icon-delete"
-                    plain
-                    v-if="permission.courseinfo_delete"
-                    @click="handleDelete"
-                    >删 除
-                </el-button>
-            </template>
+      <avue-crud
+        :option="option"
+        :table-loading="loading"
+        :data="data"
+        :page.sync="page"
+        :permission="permissionList"
+        :before-open="beforeOpen"
+        v-model="form"
+        ref="crud"
+        @row-update="rowUpdate"
+        @row-save="rowSave"
+        @row-del="rowDel"
+        @search-change="searchChange"
+        @search-reset="searchReset"
+        @selection-change="selectionChange"
+        @current-change="currentChange"
+        @size-change="sizeChange"
+        @refresh-change="refreshChange"
+        @on-load="onLoad"
+        :upload-before="uploadBefore"
+        :upload-after="uploadAfter"
+      >
+        <template slot="menuLeft">
+          <el-button
+            type="danger"
+            size="small"
+            icon="el-icon-delete"
+            plain
+            v-if="permission.courseinfo_delete"
+            @click="handleDelete"
+            >删 除
+          </el-button>
+        </template>
 
-            <template slot-scope="scope" slot="menu">
-                <el-button
-                    type="text"
-                    icon="el-icon-video-play"
-                    size="small"
-                    @click="toCourseAwer(scope.row)"
-                    >管理课件
-                </el-button>
-            </template>
-        </avue-crud>
+        <template slot-scope="scope" slot="menu">
+          <el-button
+            type="text"
+            icon="el-icon-video-play"
+            size="small"
+            @click="toCourseAwer(scope.row)"
+            >管理课件
+          </el-button>
+        </template>
+      </avue-crud>
     </basic-container>
 </template>
 
 <script>
 import {
-    getList,
-    getDetail,
-    add,
-    update,
-    remove,
-    toDate,
+  getList,
+  getDetail,
+  add,
+  update,
+  remove,
+  toDate,
 } from "@/api/edutraining/courseinfo";
 import { createLogger, mapGetters } from "vuex";
-
+import axios from "axios";
 export default {
-    props: {
-        courseId: {
-            required: true,
-        },
+  props: {
+    courseId: {
+      required: true,
     },
-    data () {
-        return {
-            awarDrawer: false, //是否显示课件管理窗口
-            form: {},
-            query: {},
-            loading: true,
-            page: {
-                pageSize: 10,
-                currentPage: 1,
-                total: 0,
+  },
+  data() {
+    return {
+      awarDrawer: false, //是否显示课件管理窗口
+      form: {},
+      query: {},
+      loading: true,
+      percentage: 0,
+      jdState: false,
+      colors: [
+        { color: "#f56c6c", percentage: 20 },
+        { color: "#e6a23c", percentage: 40 },
+        { color: "#5cb87a", percentage: 60 },
+        { color: "#1989fa", percentage: 80 },
+        { color: "#6f7ad3", percentage: 100 },
+      ],
+      page: {
+        pageSize: 10,
+        currentPage: 1,
+        total: 0,
+      },
+      selectionList: [],
+      option: {
+        height: "auto",
+        calcHeight: 30,
+        tip: false,
+        searchShow: true,
+        searchMenuSpan: 6,
+        border: true,
+        index: false,
+        viewBtn: true,
+        selection: true,
+        dialogClickModal: false,
+        column: [
+          {
+            label: "章节名称",
+            prop: "chapterName",
+            rules: [
+              {
+                required: true,
+                message: "请输入章节名称",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "序号",
+            prop: "sort",
+            rules: [
+              {
+                required: true,
+                message: "请输入序号",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "视频地址",
+            prop: "videoUrl",
+            type: "upload",
+            limit: 1,
+            tip: "请上传视频、音频文件（只能上传一个文件）",
+            // listType: "picture-img",
+            dataType: "string",
+            fileType: "video", //img/video/audio
+            action: "#",
+            propsHttp: {
+              res: "data",
+              url: "link",
+            },
+            span: 24,
+            rules: [
+              {
+                required: true,
+                message: "请上传视频",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "课程简介",
+            prop: "description",
+            component: "AvueUeditor",
+            options: {
+              action: "/api/blade-resource/oss/endpoint/put-file",
+              props: {
+                res: "data",
+                url: "link",
+              },
             },
-            selectionList: [],
-            option: {
-                height: "auto",
-                calcHeight: 30,
-                tip: false,
-                searchShow: true,
-                searchMenuSpan: 6,
-                border: true,
-                index: false,
-                viewBtn: true,
-                selection: true,
-                dialogClickModal: false,
-                column: [
-                    {
-                        label: "章节名称",
-                        prop: "chapterName",
-                        rules: [
-                            {
-                                required: true,
-                                message: "请输入章节名称",
-                                trigger: "blur",
-                            },
-                        ],
-                    },
-                    {
-                        label: "序号",
-                        prop: "sort",
-                        rules: [
-                            {
-                                required: true,
-                                message: "请输入序号",
-                                trigger: "blur",
-                            },
-                        ],
-                    },
-                    {
-                        label: "视频地址",
-                        prop: "videoUrl",
-                        type: "upload",
-                        limit: 1,
-                        tip: "请上传视频、音频文件（只能上传一个文件）",
-                        // listType: "picture-img",
-                        dataType: "string",
-                        fileType: "video", //img/video/audio
-                        action: "/api/blade-resource/oss/endpoint/put-file",
-                        propsHttp: {
-                            res: "data",
-                            url: "link",
-                        },
-                        span: 24,
-                        rules: [
-                            {
-                                required: true,
-                                message: "请上传视频",
-                                trigger: "blur",
-                            },
-                        ],
-                    },
-                    {
-                        label: "课程简介",
-                        prop: "description",
-                        component: "AvueUeditor",
-                        options: {
-                            action: "/api/blade-resource/oss/endpoint/put-file",
-                            props: {
-                                res: "data",
-                                url: "link",
-                            },
-                        },
-                        hide: true,
-                        minRows: 6,
-                        span: 24,
-                        rules: [
-                            {
-                                required: true,
-                                message: "请输入课程简介",
-                                trigger: "blur",
-                            },
-                        ],
-                    },
-                    {
-                        label: "讲师",
-                        prop: "teacherName",
-                        rules: [
-                            {
-                                required: true,
-                                message: "请输入讲师",
-                                trigger: "blur",
-                            },
-                        ],
-                    },
-                    {
-                        label: "时长",
-                        prop: "duration",
-                        type: "time",
-                        value: "2022-01-01 00:00:00",
-                        rules: [
-                            {
-                                required: true,
-                                message: "请选择时长",
-                                trigger: "blur",
-                            },
-                        ],
-                        formatter: (val, value, label) => {
-                            return value + "秒";
-                        },
-                    },
-                ],
+            hide: true,
+            minRows: 6,
+            span: 24,
+            rules: [
+              {
+                required: true,
+                message: "请输入课程简介",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "讲师",
+            prop: "teacherName",
+            rules: [
+              {
+                required: true,
+                message: "请输入讲师",
+                trigger: "blur",
+              },
+            ],
+          },
+          {
+            label: "时长",
+            prop: "duration",
+            type: "time",
+            value: "2022-01-01 00:00:00",
+            rules: [
+              {
+                required: true,
+                message: "请选择时长",
+                trigger: "blur",
+              },
+            ],
+            formatter: (val, value, label) => {
+              return value + "秒";
             },
-            data: [],
-        };
+          },
+        ],
+      },
+      data: [],
+    };
+  },
+  computed: {
+    ...mapGetters(["permission"]),
+    permissionList() {
+      return {
+        addBtn: this.vaildData(this.permission.course_add, false),
+        viewBtn: this.vaildData(this.permission.course_view, false),
+        delBtn: this.vaildData(this.permission.course_delete, false),
+        editBtn: this.vaildData(this.permission.course_edit, false),
+      };
     },
-    computed: {
-        ...mapGetters(["permission"]),
-        permissionList () {
-            return {
-                addBtn: this.vaildData(this.permission.course_add, false),
-                viewBtn: this.vaildData(this.permission.course_view, false),
-                delBtn: this.vaildData(this.permission.course_delete, false),
-                editBtn: this.vaildData(this.permission.course_edit, false),
-            };
-        },
-        ids () {
-            let ids = [];
-            this.selectionList.forEach((ele) => {
-                ids.push(ele.id);
-            });
-            return ids.join(",");
-        },
+    ids() {
+      let ids = [];
+      this.selectionList.forEach((ele) => {
+        ids.push(ele.id);
+      });
+      return ids.join(",");
     },
-    methods: {
-        rowSave (row, done, loading) {
-            row.courseId = this.courseId; //将章节关联到课程
-            // row = { ...row, courseId: this.$route.query.courseId };
-            add(row).then(
-                () => {
-                    this.onLoad(this.page);
-                    this.$message({
-                        type: "success",
-                        message: "操作成功!",
-                    });
-                    done();
-                },
-                (error) => {
-                    window.console.log(error);
-                    loading();
-                }
-            );
+  },
+  methods: {
+    rowSave(row, done, loading) {
+      console.log(this, "row");
+
+      row.courseId = this.courseId; //将章节关联到课程
+      // row = { ...row, courseId: this.$route.query.courseId };
+      add(row).then(
+        () => {
+          console.log(
+            this.option.column.find((res) => res.label == "视频地址"),
+            "筛选出来的"
+          );
+          this.option.column.find((res) => res.label == "视频地址").tip =
+            "请上传视频、音频文件（只能上传一个文件）";
+          console.log(
+            this.option.column.find((res) => res.label == "视频地址").tip
+          );
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+
+          done();
         },
-        rowUpdate (row, index, done, loading) {
-            update(row).then(
-                () => {
-                    this.onLoad(this.page);
-                    this.$message({
-                        type: "success",
-                        message: "操作成功!",
-                    });
-                    done();
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
+    },
+
+    async uploadBefore(file, done, loading, column) {
+      let _this = this;
+      console.log(_this, "SS组件");
+      console.log(file, column);
+      console.log("上传前的方法");
+        const CHUNK_SIZE = 1 * 1024 * 1024; // 定义分片的大小，例如1MB
+    //   const CHUNK_SIZE = 512 * 1024; // 定义分片的大小，例如1MB
+      const totalChunks = Math.ceil(file.size / CHUNK_SIZE); // 计算总分片数
+      let uploadedChunks = 0; // 已上传的分片数
+
+
+      const overallStartTime = performance.now(); // 函数开始执行时的时间
+      for (let index = 0; index < totalChunks; index++) {
+        const start = index * CHUNK_SIZE;
+        const end = Math.min(start + CHUNK_SIZE, file.size);
+        const blob = file.slice(start, end); // 获取当前分片的内容
+
+        const chunkFile = new File([blob], `${file.name}-${index}`, {
+          type: file.type,
+        }); // 根据需要修改文件名以包含分片信息
+        const formData = new FormData();
+        formData.append("file", chunkFile);
+        formData.append("chunkNumber", index);
+        formData.append("totalChunks", totalChunks);
+        formData.append("fileName", file.name);
+
+        try {
+          const response = await axios.post(
+            "/api/blade-resource/oss/endpoint/chunk",
+            formData,
+            {
+              headers: {
+                "Content-Type": "multipart/form-data",
+              },
+            }
+          );
+
+          console.log(`Chunk ${index} uploaded successfully:`, response.data);
+          uploadedChunks++; // 更新已上传的分片数量
+          // 计算并显示上传进度
+          const progressPercentage = (
+            (uploadedChunks / totalChunks) *
+            100
+          ).toFixed(2);
+          console.log(`Upload progress: ${progressPercentage}%`);
+          this.$notify.info({
+            title: "进度",
+            message: `当前上传进度: ${progressPercentage}%`,
+          });
+         
+          // 这里可以根据需要更新进度条或进度文本
+
+          if (index === totalChunks - 1) {
+          
+            const fileData = {
+              fileName: file.name,
+              totalChunks: totalChunks,
+            };
+            const Stresponse = await axios.post(
+              "/api/blade-resource/oss/endpoint/mergeFile",
+              fileData,
+              {
+                headers: {
+                  "Content-Type": "application/json",
                 },
-                (error) => {
-                    window.console.log(error);
-                    loading();
-                }
+              }
             );
-        },
-        rowDel (row) {
-            this.$confirm("确定将选择数据删除?", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    return remove(row.id);
-                })
-                .then(() => {
-                    this.onLoad(this.page);
-                    this.$message({
-                        type: "success",
-                        message: "操作成功!",
-                    });
-                });
-        },
-        handleDelete () {
-            if (this.selectionList.length === 0) {
-                this.$message.warning("请选择至少一条数据");
-                return;
-            }
-            this.$confirm("确定将选择数据删除?", {
-                confirmButtonText: "确定",
-                cancelButtonText: "取消",
-                type: "warning",
-            })
-                .then(() => {
-                    return remove(this.ids);
-                })
-                .then(() => {
-                    this.onLoad(this.page);
-                    this.$message({
-                        type: "success",
-                        message: "操作成功!",
-                    });
-                    this.$refs.crud.toggleSelection();
-                });
-        },
-        beforeOpen (done, type) {
-            if (["edit", "view"].includes(type)) {
-                getDetail(this.form.id).then((res) => {
-                    res.data.data.duration = toDate(res.data.data);
-                    this.form = res.data.data;
-                });
+
+            if (Stresponse.data.code === 200) {
+                const overallEndTime = performance.now(); // 函数结束时的时间
+                const totalFunctionTime = (overallEndTime - overallStartTime) / 1000; // 总执行时间，转换为秒
+                column.tip = ``;
+              console.log(Stresponse.data, "合并请求成功");
+              _this.form.videoUrl =
+                Stresponse.data.data.domain + Stresponse.data.data.path; // 确保根据实际响应更新属性名
+              loading();
+              this.$message.success(
+                `上传成功:文件名:${file.name},文件大小${(
+                  file.size /
+                  (1024 * 1024)
+                ).toFixed(2)} MB, 上传进度: ${progressPercentage}%,总耗时:${totalFunctionTime.toFixed(2)}秒`
+              );
+            } else {
+              loading();
+              console.error("合并请求失败", Stresponse.data);
+              this.$message.error("文件合并失败");
             }
-            done();
-        },
-        searchReset () {
-            this.query = {};
-            this.onLoad(this.page);
-        },
-        searchChange (params, done) {
-            this.query = params;
-            this.page.currentPage = 1;
-            this.onLoad(this.page, params);
-            done();
-        },
-        selectionChange (list) {
-            this.selectionList = list;
-        },
-        selectionClear () {
-            this.selectionList = [];
-            this.$refs.crud.toggleSelection();
-        },
-        currentChange (currentPage) {
-            this.page.currentPage = currentPage;
-        },
-        sizeChange (pageSize) {
-            this.page.pageSize = pageSize;
-        },
-        refreshChange () {
-            this.onLoad(this.page, this.query);
-        },
-        onLoad (page, params = {}) {
-            this.loading = true;
-            params.courseId = this.courseId; //查询指定课程的章节
-            getList(
-                page.currentPage,
-                page.pageSize,
-                Object.assign(params, this.query, this.$route.query)
-            ).then((res) => {
-                const data = res.data.data;
-                this.page.total = data.total;
-                this.data = data.records;
-                this.loading = false;
-                this.selectionClear();
-            });
-        },
-        toCourseAwer (courseInfo) {
-            this.$router.push({
-                path: "/edutraining/tebcourseware",
-                query: { courseInfoId: courseInfo.id },
-            });
-        },
+          }
+        } catch (error) {
+          console.error(`Error uploading chunk ${index}:`, error);
+          this.$message.error("上传出错");
+          loading();
+          return; // 出错则停止上传
+        }
+      }
     },
-    watch: {
-        courseId (newVal, oldVal) {
-            if (newVal != oldVal) {
-                this.onLoad(this.page);
-            }
+
+    uploadAfter(res, done, loading, column) {
+      console.log(res, column);
+      done();
+      console.log("上传后的方法");
+      this.$message.success("上传后的方法");
+    },
+
+    rowUpdate(row, index, done, loading) {
+      update(row).then(
+        () => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          done();
         },
+        (error) => {
+          window.console.log(error);
+          loading();
+        }
+      );
+    },
+    rowDel(row) {
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return remove(row.id);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+        });
+    },
+    handleDelete() {
+      if (this.selectionList.length === 0) {
+        this.$message.warning("请选择至少一条数据");
+        return;
+      }
+      this.$confirm("确定将选择数据删除?", {
+        confirmButtonText: "确定",
+        cancelButtonText: "取消",
+        type: "warning",
+      })
+        .then(() => {
+          return remove(this.ids);
+        })
+        .then(() => {
+          this.onLoad(this.page);
+          this.$message({
+            type: "success",
+            message: "操作成功!",
+          });
+          this.$refs.crud.toggleSelection();
+        });
+    },
+    beforeOpen(done, type) {
+      if (["edit", "view"].includes(type)) {
+        getDetail(this.form.id).then((res) => {
+          res.data.data.duration = toDate(res.data.data);
+          this.form = res.data.data;
+        });
+      }
+      done();
+    },
+    searchReset() {
+      this.query = {};
+      this.onLoad(this.page);
+    },
+    searchChange(params, done) {
+      this.query = params;
+      this.page.currentPage = 1;
+      this.onLoad(this.page, params);
+      done();
+    },
+    selectionChange(list) {
+      this.selectionList = list;
+    },
+    selectionClear() {
+      this.selectionList = [];
+      this.$refs.crud.toggleSelection();
+    },
+    currentChange(currentPage) {
+      this.page.currentPage = currentPage;
+    },
+    sizeChange(pageSize) {
+      this.page.pageSize = pageSize;
+    },
+    refreshChange() {
+      this.onLoad(this.page, this.query);
+    },
+    onLoad(page, params = {}) {
+      this.loading = true;
+      params.courseId = this.courseId; //查询指定课程的章节
+      getList(
+        page.currentPage,
+        page.pageSize,
+        Object.assign(params, this.query, this.$route.query)
+      ).then((res) => {
+        const data = res.data.data;
+        this.page.total = data.total;
+        this.data = data.records;
+        this.loading = false;
+        this.selectionClear();
+      });
+    },
+    toCourseAwer(courseInfo) {
+      this.$router.push({
+        path: "/edutraining/tebcourseware",
+        query: { courseInfoId: courseInfo.id },
+      });
+    },
+  },
+  watch: {
+    courseId(newVal, oldVal) {
+      if (newVal != oldVal) {
+        this.onLoad(this.page);
+      }
     },
+  },
 };
 </script>
 
-<style></style>
+<style>
+</style>
diff --git a/vue.config.js b/vue.config.js
index e7b48c7..c0984a5 100644
--- a/vue.config.js
+++ b/vue.config.js
@@ -28,6 +28,7 @@ module.exports = {
                 // 本地服务接口地址
                 // target: 'http://nps.scqtkj.com:51490/',
                 target: 'http://127.0.0.1:8081/',
+                // target: 'http://192.168.3.2:8081/',
                 //target: 'http://10.10.10.11:8088/',
                 //远程演示服务地址,可用于直接启动项目
                 //target: 'https://saber.bladex.vip/api',
@@ -39,6 +40,7 @@ module.exports = {
             '/': {
                 // 本地服务接口地址
                 target: 'http://127.0.0.1:8088/',
+                // target: 'http://192.168.3.2:8081/',
                 //target: 'http://10.10.10.11:8088/',
                 //远程演示服务地址,可用于直接启动项目
                 //target: 'https://saber.bladex.vip/api',