修改

src/api/course/index.js

@@ -722,9 +722,9 @@ export function SetTrialLesson(data){
  * 根据课程编号和章节编号获取单词列表
  * @param {JSON对象} data 
  */
-export function GetCourseWordsList(data){
+export function GetCourseWordsPage(data){
   return request({
-    url: '/CourseWords/GetCourseWordsList',
+    url: '/CourseWords/GetCourseWordsPage',
     method: 'post',
     data
   })
@@ -754,4 +754,16 @@ export function SetCourseWords(data){
   })
 }
 
+/**
+ * 根据编号删除单词
+ * @param {JSON对象} data 
+ */
+export function RemoveCourseWords(data){
+  return request({
+    url: '/CourseWords/RemoveCourseWords',
+    method: 'post',
+    data
+  })
+}
+
 

src/components/course/words-form.vue

@@ -105,20 +105,19 @@
               class="col-6 q-pr-lg q-pb-lg" label="中文意思" />
           </div>
         </div>
-        <div class="row wrap">
+        <div class="row wrap" style="align-items:center">
           <div class="col-6">
-            <q-circular-progress v-if="objOption.FileUrl" :value="Minutes" show-value class="text-red q-ma-md" size="70px"
-              :thickness="0.2" color="light-blue" track-color="grey-3" @click.stop="playVoice(objOption.FileUrl)">
-              <q-icon name="volume_up" class="q-mr-xs" />
-              <span style="font-size: 11px;">
-                {{Minutes?Minutes.toFixed(1):0}}
-              </span>
-            </q-circular-progress>
             <el-upload class="avatar-uploader " action="" :before-upload="uploadFile" :show-file-list="false">
               <q-btn color="accent" size="sm" class="q-mr-md" icon="cloud_upload" label="上传">
               </q-btn>
             </el-upload>
           </div>
+          <div class="col-6">
+            <audio v-if="objOption.FileUrl" :src="objOption.FileUrl" controls="controls">
+              您的浏览器不支持 audio 标签。
+            </audio>
+            <!-- <div>{{FileName}}</div> -->
+          </div>
         </div>
       </q-card-section>
       <q-separator />
@@ -140,7 +139,6 @@
   import {
     UploadSelfFile
   } from "../../api/common/common"; //上传图片
-  import BenzAMRRecorder from 'benz-amr-recorder'
   export default {
     components: {},
     props: {
@@ -169,7 +167,6 @@
         },
         optionTitle: "",
         saveWordLoading: false,
-        Minutes:0,
         FileName:''
       }
     },
@@ -186,7 +183,6 @@
           GetCourseWords({
             Id: this.saveObj.Id
           }).then(res => {
-            console.log(res, '数据');
             if (res.Code == 1) {
               var tempDate = res.Data;
               this.objOption.Id = tempDate.Id;
@@ -224,26 +220,21 @@
         // 文件类型进行判断
         let types = ['mp3', 'wma', 'wav', 'amr'];
         const isAudio = types.includes(files.type);
-        const isLt2M = files.size / 1024 / 1024 < 2;
-        if (!isLt2M) {
-          this.$q.notify({
-            type: 'negative',
-            message: `上传文件大小不能超过 2MB!!`,
-            position: 'top'
-          })
-        } else {
+        if(files&&files.name){
+          let flieArr = files.name.split(".");
+          let fileSuffix = flieArr[flieArr.length - 1];
+          if(fileSuffix!='mp3'){
+            this.$q.notify({
+              type: 'negative',
+              message: `请上传mp3格式文件!`,
+              position: 'top'
+            })
+            return
+          }
           UploadSelfFile('words', files, res => {
             if (res.Code == 1) {
-              let amr = new BenzAMRRecorder()
-              let that = this
-              amr.initWithUrl(res.FileUrl).then(function () {
-                that.duration = amr.getDuration();
-                that.objOption.FileUrl = res.FileUrl;
-                that.FileName = res.FileName ? res.FileName : '';
-                that.Minutes = parseInt(that.duration.toFixed());
-              }).catch((e) => {
-
-              })
+                this.objOption.FileUrl = res.FileUrl;
+                this.FileName = res.FileName ? res.FileName : '';
             }
           })
         }
@@ -281,7 +272,9 @@
           })
           return;
         }
+        this.saveWordLoading=true;
         SetCourseWords(this.objOption).then(res => {
+          this.saveWordLoading=false;
           if (res.Code == 1) {
             this.$q.notify({
               icon: 'iconfont icon-chenggong',

src/pages/course/chapterEditor.vue

@@ -84,19 +84,19 @@
               </div>
               <div class="text-h6 q-mb-md">单词列表</div>
               <div class="q-mb-md">
-                <q-table :pagination="pageMsg" no-data-label="暂无相关数据" flat
-                  class="sticky-right-column-table sticky-column-table" separator="none" :data="WordData" :columns="columns"
-                  row-key="name">
+                <q-table :pagination="wordMsg" no-data-label="暂无相关数据" flat
+                  class="sticky-right-column-table sticky-column-table" separator="none" :data="WordData"
+                  :columns="columns" row-key="name">
                   <template v-slot:top="props">
                     <q-space />
                     <div class="page-option">
                       <q-btn color="accent" size="sm" class="q-mr-md" icon="add" label="新增单词" @click="EditWord(null)" />
                     </div>
                   </template>
-                  <!-- <template v-slot:bottom>
-                        <q-pagination class="full-width justify-end" v-model="msg.pageIndex" color="primary" :max="pageCount"
-                          :input="true" @input="changePage" />
-                      </template> -->
+                  <template v-slot:bottom>
+                    <q-pagination class="full-width justify-end" v-model="wordMsg.PageIndex" color="primary"
+                      :max="PageCount" :input="true" @input="changePage" />
+                  </template>
                   <template v-slot:body-cell-Id="props">
                     <q-td :props="props">
                       <div>
@@ -142,7 +142,8 @@
     queryCourseInfo,
     deleteChapters,
     setChaptersRate,
-    GetCourseWordsList
+    GetCourseWordsPage,
+    RemoveCourseWords
   } from "../../api/course/index";
   import {
     compareObject
@@ -220,45 +221,50 @@
         isShowChapter: false, //是否显示导入
         chapterObj: {},
         MyChapterNo: 0,
-        WordData:[], //单词数组
-        pageMsg:{
-          rowsPerPage: 10000
-        },
+        WordData: [], //单词数组
         columns: [{
-            name: 'WordContent',
-            required: true,
-            label: '单词名',
-            align: 'left',
-            field: 'WordContent'
-         },{
-            name: 'WordType',
-            required: true,
-            label: '单词类型',
-            align: 'left',
-            field: 'WordType'
-         },{
-            name: 'WordWrite',
-            required: true,
-            label: '单词写法',
-            align: 'left',
-            field: 'WordWrite'
-         },{
-            name: 'ChineseMean',
-            required: true,
-            label: '中文意思',
-            align: 'left',
-            field: 'ChineseMean'
-         },{
-            name: 'Id',
-            label: '操作',
-            field: 'Id'
-         }],
-         wordObj:{},
-         isShowWordForm:false,
-         addObj:{
-           CourseId:0,
-           ChapterId:0
-         }
+          name: 'WordContent',
+          required: true,
+          label: '单词名',
+          align: 'left',
+          field: 'WordContent'
+        }, {
+          name: 'WordType',
+          required: true,
+          label: '单词类型',
+          align: 'left',
+          field: 'WordType'
+        }, {
+          name: 'WordWrite',
+          required: true,
+          label: '单词写法',
+          align: 'left',
+          field: 'WordWrite'
+        }, {
+          name: 'ChineseMean',
+          required: true,
+          label: '中文意思',
+          align: 'left',
+          field: 'ChineseMean'
+        }, {
+          name: 'Id',
+          label: '操作',
+          field: 'Id'
+        }],
+        wordObj: {},
+        isShowWordForm: false,
+        addObj: {
+          CourseId: 0,
+          ChapterId: 0
+        },
+        wordMsg: {
+          CourseId: 0,
+          ChapterId: 0,
+          PageIndex: 1,
+          PageSize: 15,
+          rowsPerPage: 15
+        },
+        PageCount: 0
       };
     },
     created() {
@@ -299,27 +305,51 @@
       },
       //导入成功获取所有
       getAllWords(ChapterId) {
-        let msg = {
-          CourseId: this.courseId,
-          ChapterId: ChapterId
-        }
-        GetCourseWordsList(msg).then(res => {
+        this.wordMsg.CourseId = this.courseId;
+        this.wordMsg.ChapterId = ChapterId;
+        GetCourseWordsPage(this.wordMsg).then(res => {
           console.log(res, '数据');
-          if(res.Code==1){
-            this.WordData = res.Data;
+          if (res.Code == 1) {
+            this.WordData = res.Data.PageData;
+            this.PageCount = res.Data.PageCount;
           }
         })
       },
-      //删除单词
-      delWord(Id) {
-
+      changePage(val) {
+        this.wordMsg.PageIndex = val;
+        this.getAllWords();
       },
-      //新增单词
-      addWord(){
+      //删除单词
+      delWord(item) {
+        let delMsg = {
+          Id: item.Id
+        };
+        this.$q.dialog({
+          title: '提示信息',
+          message: '是否确定删除该单词？',
+          cancel: true,
+          persistent: true,
+          ok: "确定",
+          cancel: "取消",
+        }).onOk(() => {
+          RemoveCourseWords(delMsg).then(res => {
+            if (res.Code == 1) {
+              this.$q.notify({
+                icon: 'iconfont icon-chenggong',
+                color: 'accent',
+                timeout: 2000,
+                message: '删除成功！',
+                position: 'top'
+              })
+              this.getAllWords();
+            }
+          })
+        }).onCancel(() => {
 
+        });
       },
       //新增单词
-      EditWord(obj){
+      EditWord(obj) {
         if (obj) {
           this.wordObj = obj
         } else {
@@ -342,7 +372,7 @@
         })
       },
       changeNode(data, node, ev) {
-        console.log(data,'点击了');
+        console.log(data, '点击了');
         if (this.chapter && this.chapter.ChapterId > 0) {
           if (this.defauRateObj.Id != 0) {
             this.chapter.CourseRate = this.defauRateObj.Id