课程管理功能细化

src/views/modules/course/chapter-add-or-update.vue

@@ -66,7 +66,6 @@
           :inactive-value="0"
           active-text="是"
           inactive-text="否"
-      
         >
         </el-switch>
       </el-form-item>
@@ -91,10 +90,44 @@
         >
         </quill-editor>
       </el-form-item>
-      <!-- <el-form-item label="视频/音频ID" prop="sort">
-        <el-input v-model="dataForm.sort" placeholder="请输入视频/音频ID"></el-input>
-      </el-form-item>
-      <div><span>添加一项</span></div> --->
+      <!-- <el-form-item  prop="sort" label-width="0">         -->
+      <div
+        class="flexbox videoBox"
+        v-for="(item, index) in video_audio_url"
+        :key="index"
+      >
+        <div style="width:120px">视频/音频ID</div>
+        <div style="width:300px; margin-right:10px; margin-left:10px">
+          <el-input
+            style=""
+            v-model="item.url"
+            placeholder="请输入视频/音频ID"
+          ></el-input>
+        </div>
+        <div style="margin-right:10px; height:38px">
+          <el-form-item label="加密类型" prop="type">
+            <el-select
+              v-model="item.type"
+              filterable
+              placeholder="请选择类型"
+            >
+              <el-option
+                v-for="item in typeList"
+                :key="item.dictType"
+                :label="item.dictValue"
+                :value="item.dictType"
+              >
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+
+        <el-button @click="delItem(index)" plain type="danger" size="mini">删除</el-button>
+      </div>
+      <!-- </el-form-item> -->
+      <div style="text-align:center">
+        <el-button @click="addItem">添加一条音/视频</el-button>
+      </div>
     </el-form>
     <span slot="footer" class="dialog-footer">
       <el-button @click="handlereset">取消</el-button>
@@ -171,6 +204,18 @@ export default {
         dictType: "",
         dictValue: ""
       },
+      typeList: [
+        //类型0普通1加密
+
+        {
+          dictType: 0,
+          dictValue: "普通"
+        },
+        {
+          dictType: 1,
+          dictValue: "加密"
+        }
+      ],
       gushuList: [],
       authorList: [],
       restaurants: [],
@@ -187,8 +232,15 @@ export default {
         title: "",
         imgUrl: "",
         content: "",
-        sort: 1
-      },
+        sort: 1,
+        // video_audio_url: [
+        //   {url:'454545',type:0}
+        // ]
+      }, 
+      video_audio_url: [
+          {url:'454545',type:0}
+        ], 
+      obj:{ url: "" ,type:0},   
       splitsTypeList: [],
       dataRule: {}
     };
@@ -199,6 +251,16 @@ export default {
   created() {},
   mounted() {},
   methods: {
+    delItem(index){
+      this.video_audio_url.splice(index, 1)
+      // console.log(this.video_audio_url,'删除后的')
+    },
+    addItem() {
+      var jj = {...this.obj}
+     
+      this.video_audio_url.push({...jj});
+      console.log(this.video_audio_url,'this.dataForm.video_audio_url')
+    },
     contentUploadSuccess(res, file) {
       // console.log(res)
       let quill = this.$refs.myQuillEditor.quill;
@@ -233,6 +295,11 @@ export default {
       this.dataForm.courseId = courseid ? courseid : "";
       this.dataForm.catalogueId = catalogue_id ? catalogue_id : "";
       this.visible = true;
+      if(this.dataForm.video_audio_url && this.dataForm.video_audio_url.length > 0){
+        this.video_audio_url = {...this.dataForm.video_audio_url}
+      }else{
+        this.video_audio_url = []
+      }
       if (this.dataForm.imgUrl && this.dataForm.imgUrl != "") {
         var img = {
           name: "",
@@ -267,6 +334,7 @@ export default {
               content: this.dataForm.content,
               sort: this.dataForm.sort,
               isAudition: this.dataForm.isAudition,
+              video_audio_url:this.video_audio_url,
             })
           }).then(({ data }) => {
             if (data && data.code === 0) {
@@ -345,3 +413,11 @@ export default {
   }
 };
 </script>
+<style lang="less" scoped>
+.flexbox {
+  display: flex;
+}
+.videoBox { width: 100%;
+  margin-bottom: 15px; align-items: center;
+}
+</style>