编写

config/dev.env.js

@@ -5,7 +5,7 @@ const prodEnv = require('./prod.env');
 module.exports = merge(prodEnv, {
   NODE_ENV: '"development"',
   API_URL: '"/"',
-  MAX_FILESIZE:'1024*1024*5',
+  MAX_FILESIZE:'1024*1024*10',
   IMAGE_URL_HEAD:'"http://cdn.singsingenglish.com/"',
   INVITE_URL:'"http://wechat.test.singsingenglish.com"',
 });

config/prod.env.js

@@ -3,5 +3,5 @@ module.exports = {
   NODE_ENV: '"production"',
   IMAGE_URL_HEAD:'"http://cdn.singsingenglish.com/"',
   API_URL: '"/"',
-  MAX_FILESIZE:'1024*1024*5',
+  MAX_FILESIZE:'1024*1024*10',
 }

config/test.env.js

@@ -6,5 +6,5 @@ module.exports = merge(prodEnv, {
   NODE_ENV: '"production"',
   IMAGE_URL_HEAD:'"http://cdn.singsingenglish.com/"',
   API_URL: '"/"',
-  MAX_FILESIZE:'1024*1024*5',
+  MAX_FILESIZE:'1024*1024*10',
 })

src/components/resources/editorDialog.vue

@@ -23,14 +23,27 @@
             </el-card>
           </div>
         </div>
-
       </el-aside>
       <el-main>
-        <editor :selectedMould="selectedMould"/>
+        <el-button size="mini" @click="showDialog = true">
+          课程基本信息编辑
+        </el-button>
+        <el-button size="mini">
+          保存
+        </el-button>
+        <editor :selectedMould="selectedMould" :editorObj="editorObj"/>
       </el-main>
     </el-container>
-    <el-dialog>
+    <el-dialog
+      title="信息编辑"
+      :modal="false"
+      :visible.sync="showDialog"
+      width="30%">
+      <el-form>
+        <el-form-item>
 
+        </el-form-item>
+      </el-form>
     </el-dialog>
   </el-dialog>
 </template>
@@ -39,6 +52,8 @@
   import addUrl from '../../assets/editor/Group 7.png'
   import {MOULDLIST} from "../../util/resourceMould";
   import editor from './editor'
+  import {addCategoryApi} from "../../service/api";
+
   export default {
     props:[
       'editorObj'
@@ -50,6 +65,7 @@
       return{
         selectedMould:[],
         addUrl:addUrl,
+        showDialog:false,
         mouldList:MOULDLIST,
         age:[0,0],
         level:[0,0],

src/service/api.js

@@ -143,12 +143,12 @@ const getCategoryUrl = `${_baseUrl}api/admin/category/list/0`;
 export const getCategoryApi = function (pid) {
   return Vue.prototype.$fetch(getCategoryUrl,{'pid':pid})
 };
-//删除元素分类
+//删除分类
 const delCategoryUrl = `${_baseUrl}api/admin/category`;
 export const delCategoryApi = function (id) {
   return Vue.prototype.$del(`${delCategoryUrl}/${id}`)
 };
-//元素排序修改
+//分类排序修改
 const sortCategoryUrl = `${_baseUrl}api/admin/category/sort`;
 export const sortCategoryApi = function (json) {
   return Vue.prototype.$patch(sortCategoryUrl,json)
@@ -158,6 +158,21 @@ const getCateDetailListUrl = `${_baseUrl}api/admin/element/list/0`;
 export const getCateListApi = function (id) {
   return Vue.prototype.$fetch(getCateDetailListUrl,id)
 };
+// 添加元素
+const addElementUrl = `${_baseUrl}api/admin/element/add/`;
+export const addElementApi = function (json, id) {
+  return Vue.prototype.$post(`${addElementUrl}${id}`,json)
+};
+// 查询元素详情
+const getElemenetDetailUrl = `${_baseUrl}api/admin/element/`;
+export const getElemenetDetailApi = function (id) {
+  return Vue.prototype.$fetch(`${getElemenetDetailUrl}${id}`)
+};
+// 编辑元素
+const editElementUrl = `${_baseUrl}api/admin/element/`;
+export const editElementApi = function (id, json) {
+  return Vue.prototype.$put(`${editElementUrl}${id}`, json)
+};
 // 获取单品列表
 const getSingleListUrl = `${_baseUrl}api/admin/item/stock/list`;
 export const getSingleListApi = function (name) {
@@ -256,8 +271,8 @@ export const getMediaListApi = function (json) {
 // const getGoodsListUrl = `${_baseUrl}api/admin/goods/list`;
 // 文件上传
 const uploadFileUrl = `${_baseUrl}api/public/upload/zone`;
-export const uploadFileApi = function (data) {
-  return Vue.prototype.$upload(uploadFileUrl,data)
+export const uploadFileApi = function (json) {
+  return Vue.prototype.$upload(uploadFileUrl,json)
 };
 // 获取菜单列表
 const getMenuListUrl = `${_baseUrl}api/admin/category/list/2`;

src/service/index.js

 import axios from 'axios';
 import md5 from 'js-md5';
+import store from "@/store"
 import { MessageBox ,Message  } from 'element-ui';
 import router from '../router'
 import Cookie from '../util/cookie'
@@ -65,29 +66,34 @@ axios.interceptors.response.use(
  * @param params
  * @returns {Promise}
  */
-export function upload(url,data) {
+export function upload(url,json) {
   return new Promise((resolve,reject) => {
-
     //开启分片
-      let size = parseInt(Number(data.size)/Number(process.env.MAX_FILESIZE) +1);
+      let size = parseInt(Number(json.file.size)/Number(process.env.MAX_FILESIZE) +1);
       let y = 0;
       let fun = function(){
         let formData = new FormData();
-        let file = data.slice(y*process.env.MAX_FILESIZE,(y+1)*process.env.MAX_FILESIZE)
-        console.log(data)
+        let file = json.file.slice(y*process.env.MAX_FILESIZE,(y+1)*process.env.MAX_FILESIZE);
+        console.log(json.file);
         formData.append('chunk', y);
-        formData.append('file_name', data.name);
+        formData.append('file_name', json.file.name);
         formData.append('count', size);
         formData.append('file', file);
         axios.post(url,formData,{ headers: {
             'Content-Type': 'multipart/form-data'
-          },timeout:60000})
+          },timeout:60000,
+          onUploadProgress: progressEvent => {
+            let progress =  ((Number(progressEvent.loaded) + Number(y*process.env.MAX_FILESIZE)) / Number(json.file.size) * 100| 0);
+            console.log((Number(progressEvent.loaded), Number(y*process.env.MAX_FILESIZE),progress));
+            store.dispatch('setProgress',{type: 'change',id: json.file.uid ,num: progress});
+          },})
           .then(response => {
             if(response.data.code === 200){
-              y++;
-              if(y<size){
+              if(y+1<size){
+                y++;
                 fun()
               }else{
+                y=0;
                 resolve(response.data.data);
               }
             }else{

src/store/actions.js

@@ -7,4 +7,7 @@ export default{
   setUserName({commit},name){
     commit('setUserName',name);
   },
+  setProgress({commit},data){
+    commit('progress',data);
+  },
 }

src/store/index.js

@@ -14,6 +14,7 @@ export default new vuex.Store({
     menuList:menu,
     menuType:false,
     nowTab:'first',
+    progressList:[],
     openedTab:[
       {
         value:'首页',

src/store/mutations.js

@@ -19,6 +19,19 @@ const mutations={
   },
   changeParentRouter(state,data){
     state.menuList.find((a)=>{return a.name === data.name}).routerName = data.to.name
+  },
+  progress(state,data){
+    switch (data.type) {
+      case 'new':
+        state.progressList.push({num:0,id:data.id});
+        break;
+      case 'change':
+        state.progressList.find((x)=>{return x.id === data.id}).num = data.num;
+        break;
+      case 'delete':
+        delete state.progressList.find((x)=>{return x.id === data.id});
+        break
+    }
   }
 };
 export default mutations;

src/util/resourceMould.js

@@ -41,8 +41,8 @@ export const MOULDLIST = [
     name:'玩-video-1',
     key:'play1',
     content:{
-      videoUrl:'',
-      banner:"",
+      videoUrl:[],
+      banner:[],
       nextIndex:'',
       lastIndex:'',
       tabRadio:{
@@ -54,11 +54,24 @@ export const MOULDLIST = [
     title:'唱学加油包',
     imgUrl:RefuelingUrl,
     name:'加油包-1',
-    key:'refueling1'
+    key:'refueling1',
+    content:{
+      radio:[],
+      banner:[],
+      nextIndex:'',
+      nextType:true,
+      lastIndex:'',
+    }
   },{
     title:'爸妈秀宝贝',
     imgUrl:showBabyUrl,
     name:'秀宝贝-1',
-    key:'show1'
+    key:'show1',
+    content:{
+      text:'',
+      check:true,
+      nextIndex:'',
+      lastIndex:'',
+    }
   },
 ];