修改视频

src/views/articleManagement/articleList.vue

@@ -352,10 +352,17 @@ export default {
       if (!item || !item.id) {
         return;
       }
-      this.$router.push({
-        path: "/articleManagement/create",
-        query: { id: item.id, type: "edit" }
-      });
+      if (item.type === "ARTICLE") {
+        this.$router.push({
+          path: "/articleManagement/create",
+          query: { id: item.id, type: "edit" }
+        });
+      } else if (item.type === "VIDEO") {
+        this.$router.push({
+          path: "/articleManagement/videoCreate",
+          query: { id: item.id, type: "edit" }
+        });
+      }
     },
     //  // 操作：编辑文章
     // handleAddArticleItem(){

src/views/articleManagement/videoCreate.vue

@@ -131,8 +131,8 @@
     </div>
     <div class="common-card a-card-margin-top">
       <div class="information-title">视频内容</div>
-      <div style="margin-bottom: 10px;">上传视频</div>
-      <div style="margin-bottom: 10px;">
+      <div style="margin-bottom: 10px">上传视频</div>
+      <div style="margin-bottom: 10px">
         <a-upload
           :customRequest="uploadOssVideoFile"
           list-type="picture"
@@ -143,7 +143,7 @@
           <a-button> <a-icon type="upload" />Upload </a-button>
         </a-upload>
       </div>
-      <div style="margin-bottom: 10px;">上传封面</div>
+      <div style="margin-bottom: 10px">上传封面</div>
       <div>
         <a-upload
           :customRequest="uploadOssImageFile"
@@ -187,39 +187,39 @@
 </template>
 
 <script>
-const OSS = require('ali-oss');
+const OSS = require("ali-oss");
 import {
   formatePathParams,
   formateStringDate,
-  formateDateToString,
-} from '@/filters';
+  formateDateToString
+} from "@/filters";
 export default {
-  name: 'videoCreate',
+  name: "videoCreate",
   props: {},
   components: {},
   data() {
     return {
       previewVisible: false,
-      videoUrl: '',
-      faceUrl: '',
-      content: '',
-      form: this.$form.createForm(this, { name: 'articleCreate' }),
+      videoUrl: "",
+      faceUrl: "",
+      content: "",
+      form: this.$form.createForm(this, { name: "articleCreate" }),
       articleParentClassArr: [],
       articleChildClassArr: [],
       engineerTypeArray: [],
       articleParentClass: {},
       articleChildClass: {},
-      engineerType: '',
-      learnDate: '',
-      optionType: '',
-      description: '',
+      engineerType: "",
+      learnDate: "",
+      optionType: "",
+      description: "",
       bodyStyle: {
-        img: '{max-width:100%;width: auto;height: auto;}',
-        video: '{max-width:100%;width: auto;height: auto;}',
-        color: 'red',
+        img: "{max-width:100%;width: auto;height: auto;}",
+        video: "{max-width:100%;width: auto;height: auto;}",
+        color: "red"
       },
       defaultVideoFileList: [],
-      defaultImageFileList: [],
+      defaultImageFileList: []
     };
   },
   created() {
@@ -235,20 +235,19 @@ export default {
       await this.getArticleParentClass();
       await this.getEngineersWork();
       let type = this.$route.query.type;
-      this.optionType = type ? type : 'create';
+      this.optionType = type ? type : "create";
       // 判断是新增文章还是编辑文章
-      if ('edit' === type) {
-        console.log('---edit---');
+      if ("edit" === type) {
         await this.getArticleContent();
-      } else if ('create' === type) {
-        console.log('---create---');
+      } else if ("create" === type) {
+        console.log("---create---");
       }
     },
     // 查询文章分类父级
     getArticleParentClass() {
       this.$_http
         .get(this.$_API.INTERFACE_GET_CATEGORIES)
-        .then((res) => {
+        .then(res => {
           this.articleParentClassArr = res.data;
           this.loading = false;
         })
@@ -269,12 +268,12 @@ export default {
             pathParamsData
           )
         )
-        .then((res) => {
+        .then(res => {
           if (res && res.data.length !== 0) {
             this.articleChildClassArr = res.data;
             this.articleChildClass = this.articleChildClassArr[0];
             this.form.setFieldsValue({
-              articleChildClass: this.articleChildClass.name,
+              articleChildClass: this.articleChildClass.name
             });
           }
           this.loading = false;
@@ -287,8 +286,8 @@ export default {
     async getEngineersWork() {
       await this.$_http
         .get(this.$_API.INTERFACE_GET_ENGINEERINGWORK_LIST)
-        .then((res) => {
-          this.engineerTypeArray = [{ name: '不限', id: '' }, ...res.data];
+        .then(res => {
+          this.engineerTypeArray = [{ name: "不限", id: "" }, ...res.data];
           this.engineerType = this.engineerTypeArray[0];
         });
     },
@@ -299,7 +298,7 @@ export default {
       // 子类选项清空
       this.articleChildClassArr = [];
       this.form.setFieldsValue({
-        articleChildClass: '',
+        articleChildClass: ""
       });
       // 获取子类的值
       this.getArticleChildClass();
@@ -317,7 +316,7 @@ export default {
       this.learnDate = dateString;
     },
     handleSubmitBtnFun() {
-      document.getElementById('articleCreateSubmit').click();
+      document.getElementById("articleCreateSubmit").click();
     },
     // 查询文章内容
     getArticleContent() {
@@ -326,8 +325,7 @@ export default {
         .get(
           formatePathParams(this.$_API.INTERFACE_GET_MATERIALS, pathParamsData)
         )
-        .then((res) => {
-          console.log('----' + JSON.stringify(res));
+        .then(res => {
           this.initEditArticleForm(res.data);
           this.loading = false;
         })
@@ -336,13 +334,12 @@ export default {
         });
     },
     initEditArticleForm(item) {
-      console.log('--------' + JSON.stringify(item));
       //   文章标题
       this.form.setFieldsValue({
-        name: item.name,
+        name: item.name
       });
       //   文章描述
-      this.description = item.description ? item.description : '';
+      this.description = item.description ? item.description : "";
       // 文章分类-父类：
       this.articleParentClass = item.rootMaterialCategory;
       this.getArticleChildClass(); // 获取子类列表的值
@@ -361,70 +358,93 @@ export default {
       let learnDate = item.tags.length > 0 ? item.tags[0] : null;
       // 必学日期
       this.learnDate = learnDate ? formateStringDate(learnDate) : null;
-      console.log('编辑初始化时间为YYYY-MM-DD', this.learnDate, learnDate);
+      console.log("编辑初始化时间为YYYY-MM-DD", this.learnDate, learnDate);
       // 文章内容
       this.content = item.contents;
+      // 附件内容
+      let contentObj = JSON.parse(this.content);
+      console.log(contentObj);
+      if (contentObj.videoUrl) {
+        let videoFile = {
+          uid: this.getUid(),
+          name: this.getUrlName(contentObj.videoUrl),
+          status: "done",
+          url: contentObj.videoUrl
+        };
+        this.videoUrl = contentObj.videoUrl;
+        this.defaultVideoFileList.push(videoFile);
+      }
+      if (contentObj.faceUrl) {
+        let faceFile = {
+          uid: this.getUid(),
+          name: this.getUrlName(contentObj.faceUrl),
+          status: "done",
+          url: contentObj.faceUrl
+        };
+        this.faceUrl = contentObj.faceUrl;
+        this.defaultImageFileList.push(faceFile);
+      }
     },
     // 提交表单
     handleSubmit(e) {
       e.preventDefault();
-      if ('create' === this.optionType) {
-        console.log('创建文章');
+      if ("create" === this.optionType) {
+        console.log("创建文章");
         this.createArtical();
-      } else if ('edit' === this.optionType) {
-        console.log('更新文章');
+      } else if ("edit" === this.optionType) {
+        console.log("更新文章");
         this.updateArtical();
       }
     },
     createArtical() {
       this.form.setFieldsValue({
-        articleParentClass: this.articleParentClass.name,
+        articleParentClass: this.articleParentClass.name
       });
       this.form.setFieldsValue({
-        articleChildClass: this.articleChildClass.name,
+        articleChildClass: this.articleChildClass.name
       });
       this.form.setFieldsValue({
-        engineerType: this.engineerType.name,
+        engineerType: this.engineerType.name
       });
       this.form.validateFields((err, values) => {
         if (!err) {
           // 新建文章
           let that = this;
           that.$confirm({
-            title: '新建文章',
+            title: "新建文章",
             content: `确认新建文章吗？`,
-            okText: '确认',
-            cancelText: '取消',
+            okText: "确认",
+            cancelText: "取消",
             onOk() {
               that.loading = true;
               let params = {
                 categoryid: that.articleChildClass.id,
-                engineertypeid: that.engineerType.id,
+                engineertypeid: that.engineerType.id
               };
               let tag = formateDateToString(that.learnDate);
               let links = [];
               let contentObj = {
                 faceUrl: that.faceUrl,
-                videoUrl: that.videoUrl,
+                videoUrl: that.videoUrl
               };
               let bodyParams = {
                 name: values.name,
                 description: values.description,
-                type: 'VIDEO',
+                type: "VIDEO",
                 contents: JSON.stringify(contentObj),
                 tags: tag ? [tag] : [],
                 engineerTypes: [that.engineerType.id],
-                links: links,
+                links: links
               };
               that.$_http
                 .post(that.$_API.INTERFACE_POST_ADMIN_MATERIALS, bodyParams, {
-                  params,
+                  params
                 })
                 .then(() => {
-                  that.$message.success('新建文章成功');
+                  that.$message.success("新建文章成功");
                 });
             },
-            onCancel() {},
+            onCancel() {}
           });
         }
       });
@@ -436,34 +456,34 @@ export default {
           // 更新文章
           let that = this;
           that.$confirm({
-            title: '更新文章',
+            title: "更新文章",
             content: `确认更新文章吗？`,
-            okText: '确认',
-            cancelText: '取消',
+            okText: "确认",
+            cancelText: "取消",
             onOk() {
               that.loading = true;
               let params = {
                 categoryid: that.articleChildClass.id,
-                engineertypeid: that.engineerType.id,
+                engineertypeid: that.engineerType.id
               };
               let tag = formateDateToString(that.learnDate);
               let links = [];
               let contentObj = {
                 faceUrl: that.faceUrl,
-                videoUrl: that.videoUrl,
+                videoUrl: that.videoUrl
               };
               let bodyParams = {
                 id: that.$route.query.id,
                 name: values.name,
                 description: values.description,
-                type: 'VIDEO',
+                type: "VIDEO",
                 contents: JSON.stringify(contentObj),
                 tags: tag ? [tag] : [],
                 engineerTypes: [that.engineerType.id],
-                links: links,
+                links: links
               };
               console.log(
-                '保存修改日期格式为YYYYMMDD',
+                "保存修改日期格式为YYYYMMDD",
                 bodyParams.tags,
                 that.learnDate
               );
@@ -475,14 +495,14 @@ export default {
                   ),
                   bodyParams,
                   {
-                    params,
+                    params
                   }
                 )
                 .then(() => {
-                  that.$message.success('更新文章成功');
+                  that.$message.success("更新文章成功");
                 });
             },
-            onCancel() {},
+            onCancel() {}
           });
         }
       });
@@ -491,39 +511,39 @@ export default {
       let that = this;
       let file = fileData.file;
 
-      var index = file.name.indexOf('.'); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
+      var index = file.name.indexOf("."); //（考虑严谨用lastIndexOf(".")得到）得到"."在第几位
       var subfix = file.name.substring(index); //截断"."之前的，得到后缀
-      if (subfix != '.mp4') {
+      if (subfix != ".mp4") {
         fileData.onError();
-        this.$message.error('只能上传mp4格式的文件');
+        this.$message.error("只能上传mp4格式的文件");
         return;
       }
 
-      let bucket = 'jtxt-file-public';
-      let ossPath = 'file/';
+      let bucket = "jtxt-file-public";
+      let ossPath = "file/";
       let res = await that.$_http.get(
         that.$_API.INTERFACE_GET_ASSUME_OSS_WRITER
       );
-      console.log('--oss-writer--' + JSON.stringify(res));
+      console.log("--oss-writer--" + JSON.stringify(res));
       const client = new OSS({
         // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: 'oss-cn-beijing',
+        region: "oss-cn-beijing",
         // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
         accessKeyId: res.data.accessKeyId,
         accessKeySecret: res.data.accessKeySecret,
         // 从STS服务获取的安全令牌（SecurityToken）。
         stsToken: res.data.securityToken,
         // 填写Bucket名称。
-        bucket: bucket,
+        bucket: bucket
       });
       try {
-        client.put(ossPath + file.name, file).then((res) => {
+        client.put(ossPath + file.name, file).then(res => {
           console.log(res);
           let upFile = {
             uid: this.getUid(),
             name: file.name,
-            status: 'done',
-            url: res.url,
+            status: "done",
+            url: res.url
           };
           that.videoUrl = res.url;
           that.defaultVideoFileList.push(upFile);
@@ -545,31 +565,31 @@ export default {
     async uploadOssImageFile(fileData) {
       let that = this;
       let file = fileData.file;
-      let bucket = 'jtxt-file-public';
-      let ossPath = 'file/';
+      let bucket = "jtxt-file-public";
+      let ossPath = "file/";
       let res = await that.$_http.get(
         that.$_API.INTERFACE_GET_ASSUME_OSS_WRITER
       );
-      console.log('--oss-writer--' + JSON.stringify(res));
+      console.log("--oss-writer--" + JSON.stringify(res));
       const client = new OSS({
         // yourRegion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
-        region: 'oss-cn-beijing',
+        region: "oss-cn-beijing",
         // 从STS服务获取的临时访问密钥（AccessKey ID和AccessKey Secret）。
         accessKeyId: res.data.accessKeyId,
         accessKeySecret: res.data.accessKeySecret,
         // 从STS服务获取的安全令牌（SecurityToken）。
         stsToken: res.data.securityToken,
         // 填写Bucket名称。
-        bucket: bucket,
+        bucket: bucket
       });
       try {
-        client.put(ossPath + file.name, file).then((res) => {
+        client.put(ossPath + file.name, file).then(res => {
           console.log(res);
           let upFile = {
             uid: this.getUid(),
             name: file.name,
-            status: 'done',
-            url: res.url,
+            status: "done",
+            url: res.url
           };
           that.faceUrl = res.url;
           that.defaultImageFileList.push(upFile);
@@ -580,8 +600,18 @@ export default {
         console.error(e);
       }
     },
+    // 截取路径名字
+    getUrlName(url) {
+      let strArr = url.split("/");
+      console.log(strArr);
+      let fileName = strArr[strArr.length - 1];
+      console.log(fileName);
+      fileName = decodeURIComponent(fileName);
+      console.log(fileName);
+      return fileName;
+    },
     getUid() {
-      let uid = '';
+      let uid = "";
       for (let i = 0; i < 5; i++) {
         uid += Math.floor(Math.random() * 10);
       }
@@ -608,10 +638,10 @@ export default {
     // 截取视频第一帧
     findvideocover(file) {
       file.src = file.url; // url地址 url跟 视频流是一样的
-      console.log('-----filesrc-' + file.src);
-      var canvas = document.createElement('canvas'); // 获取 canvas 对象
-      const ctx = canvas.getContext('2d'); // 绘制2d
-      file.crossOrigin = 'anonymous'; // 解决跨域问题，也就是提示污染资源无法转换视频
+      console.log("-----filesrc-" + file.src);
+      var canvas = document.createElement("canvas"); // 获取 canvas 对象
+      const ctx = canvas.getContext("2d"); // 绘制2d
+      file.crossOrigin = "anonymous"; // 解决跨域问题，也就是提示污染资源无法转换视频
       file.currentTime = 1; // 第一帧
       file.oncanplay = () => {
         canvas.width = file.clientWidth; // 获取视频宽度
@@ -619,8 +649,8 @@ export default {
         // 利用canvas对象方法绘图
         ctx.drawImage(file, 0, 0, file.clientWidth, file.clientHeight);
         // 转换成base64形式
-        this.faceUrl = canvas.toDataURL('image/png'); // 截取后的视频封面
-        console.log('----faceUrl--' + this.faceUrl);
+        this.faceUrl = canvas.toDataURL("image/png"); // 截取后的视频封面
+        console.log("----faceUrl--" + this.faceUrl);
         // file.url = this.imgsrc;
       };
     },
@@ -631,8 +661,8 @@ export default {
     // 关闭预览
     closepreview() {
       this.previewVisible = false;
-    },
-  },
+    }
+  }
 };
 </script>
 
@@ -661,7 +691,7 @@ export default {
 </style>
 
 <style lang="less" scoped>
-@import '~@/styles/common/variable.less';
+@import "~@/styles/common/variable.less";
 .app-container {
   .information-title {
     font-size: 18px;