编写

src/components/resources/editorDialog.vue

@@ -4,6 +4,7 @@
     :visible.sync="editorObj.show"
     :close-on-click-modal="false"
     :close-on-press-escape="false"
+    :modal="false"
     :center="true"
     :fullscreen="true">
     <el-container>
@@ -25,10 +26,10 @@
         </div>
       </el-aside>
       <el-main>
-        <el-button size="mini" @click="showDialog = true">
+        <el-button @click="showDialog = true">
           课程基本信息编辑
         </el-button>
-        <el-button size="mini">
+        <el-button type="success" @click="onSave()">
           保存
         </el-button>
         <editor :selectedMould="selectedMould" :editorObj="editorObj"/>
@@ -37,13 +38,27 @@
     <el-dialog
       title="信息编辑"
       :modal="false"
-      :visible.sync="showDialog"
-      width="30%">
-      <el-form>
-        <el-form-item>
-
+      :visible.sync="showDialog">
+      <el-form ref="form" :model="form" label-width="80px">
+        <el-form-item label="标题">
+          <el-input v-model="form.title"></el-input>
+        </el-form-item>
+        <el-form-item label="封面">
+          <el-upload
+            class="upload-demo"
+            action="/api/public/upload"
+            list-type="picture-card"
+            :http-request="uploadCover"
+            multiple
+            :limit="1"
+            :disabled="(fileUid && progress < 99)"
+            :file-list="imgList">
+          </el-upload>
         </el-form-item>
       </el-form>
+      <div slot="footer" class="dialog-footer" style="text-align: center">
+          <el-button type="success" @click="showDialog = false">确 定</el-button>
+        </div>
     </el-dialog>
   </el-dialog>
 </template>
@@ -52,7 +67,7 @@
   import addUrl from '../../assets/editor/Group 7.png'
   import {MOULDLIST} from "../../util/resourceMould";
   import editor from './editor'
-  import {addCategoryApi} from "../../service/api";
+  import {addElementApi,editElementApi,getElemenetDetailApi,uploadFileApi} from "../../service/api";
 
   export default {
     props:[
@@ -66,23 +81,83 @@
         selectedMould:[],
         addUrl:addUrl,
         showDialog:false,
+        imgList:[],
         mouldList:MOULDLIST,
         age:[0,0],
         level:[0,0],
-        form:{}
+        fileUid:null,
+        form:{
+          category_id:this.editorObj.category_id,
+          title:'',
+          content:'',
+          cover:'',
+        }
+      }
+    },
+    computed:{
+      progress(){
+        return this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num <100 ? this.$store.state.progressList.find(i=>{return i.id === this.fileUid}).num : 100
       }
     },
     methods:{
       addMould(data){
         this.selectedMould.push(JSON.parse(JSON.stringify(data)))
       },
+      uploadCover(a){
+        this.$store.dispatch('setProgress',{type:'new',id:a.file.uid});
+        uploadFileApi({file:a.file,type:'local'}).then(res=>{
+          this.form.cover = process.env.IMAGE_URL_HEAD  +  res.url;
+          this.imgList.push({name:res.url,url:process.env.IMAGE_URL_HEAD  +  res.url})
+        })
+      },
+      onSave(){
+        this.form.content = JSON.stringify(this.selectedMould);
+        this.category_id = this.editorObj.category_id;
+        switch (this.editorObj.type) {
+          case 0:
+            addElementApi(this.form , '0').then(res=>{
+
+              this.editorObj.show = false
+            });
+            break;
+          case 1:
+            editElementApi(this.form , this.editorObj.id).then(res=>{
+
+              this.editorObj.show = false
+            });
+        }
+      },
       initPage(){
         switch (this.editorObj.type) {
           case 0:
-            this.selectedMould=[]
+            this.selectedMould=[];
+            this.form = {
+              category_id:this.editorObj.category_id,
+              title:'',
+              content:'',
+              cover:'',
+            };
+            break;
+          case 1:
+            getElemenetDetailApi(this.editorObj.id).then(res=>{
+              this.form = {
+                category_id:res.category_id,
+                content:res.content,
+                cover:res.cover,
+                title:res.title
+              }
+              this.selectedMould = JSON.parse(res.content)
+              console.log(this.selectedMould)
+            })
+
         }
       }
-    }
+    },
+    watch:{
+      'editorObj'(){
+        this.initPage()
+      }
+    },
   }
 </script>
 

src/components/resources/list.vue

@@ -24,7 +24,7 @@
           type=""
           icon="el-icon-edit"
           circle size="mini"
-          @click="editLesson()">
+          @click="onEdit(data)">
         </el-button>
         <el-button
           type=""
@@ -85,6 +85,15 @@
           type:0,
           title:'新增课包'
         }
+      },
+      onEdit(data){
+        this.editorObj = {
+          show:true,
+          category_id:this.id,
+          id:data.id,
+          type:1,
+          title:'编辑课包'
+        }
       }
     },
     watch:{

src/service/api.js

@@ -160,8 +160,9 @@ export const getCateListApi = function (id) {
 };
 // 添加元素
 const addElementUrl = `${_baseUrl}api/admin/element/add/`;
-export const addElementApi = function (json, id) {
-  return Vue.prototype.$post(`${addElementUrl}${id}`,json)
+export const addElementApi = function (json, type) {
+  console.log(type)
+  return Vue.prototype.$post(`${addElementUrl}${type}`,json)
 };
 // 查询元素详情
 const getElemenetDetailUrl = `${_baseUrl}api/admin/element/`;
@@ -170,7 +171,7 @@ export const getElemenetDetailApi = function (id) {
 };
 // 编辑元素
 const editElementUrl = `${_baseUrl}api/admin/element/`;
-export const editElementApi = function (id, json) {
+export const editElementApi = function (json, id) {
   return Vue.prototype.$put(`${editElementUrl}${id}`, json)
 };
 // 获取单品列表

src/service/index.js

@@ -78,6 +78,7 @@ export function upload(url,json) {
         formData.append('chunk', y);
         formData.append('file_name', json.file.name);
         formData.append('count', size);
+        formData.append('type', json.type);
         formData.append('file', file);
         axios.post(url,formData,{ headers: {
             'Content-Type': 'multipart/form-data'