Merge branch 'dev-eduadmin-20190222' of...

Merge branch 'dev-eduadmin-20190222' of 192.168.110.53:com.pica.cloud.education.frontend/pica.cloud.web-app into dev-eduadmin-20190222

index.html

@@ -14,5 +14,6 @@
     <div id="app">
     	<router-view></router-view>
     </div>
+    <script src="https://unpkg.com/qiniu-js@2.2.0/dist/qiniu.min.js"></script>
   </body>
 </html>

src/components/breadcrumb.vue

@@ -3,6 +3,7 @@
         <el-breadcrumb separator-class="el-icon-arrow-right">
             <el-breadcrumb-item>{{curmbFirst}}</el-breadcrumb-item>
             <el-breadcrumb-item>{{curmbSecond}}</el-breadcrumb-item>
+            <el-breadcrumb-item :to="jumPathThird">{{curmbThird}}</el-breadcrumb-item>
         </el-breadcrumb>
     </div>
 </template>
@@ -14,15 +15,26 @@ export default {
         },
         curmbSecond: {
             type: String
+        },
+        curmbThird: {
+            type: String
+        },
+        jumPathThird: {
+            type: String
         }
     }
 }
 </script>
 <style lang="scss">
 .bread-crumb {
+    position: fixed;
+    left: 225px;
+    top: 70px;
+    width: 100%;
     background: #F4F5F6;
     height: 50px;
     padding: 20px 0 0 25px;
+    z-index: 99999;
     .el-breadcrumb__inner {
         font-size: 12px;
     }

src/utils/envConfig.js

@@ -14,26 +14,46 @@ export const envConfig = {
     // webPageUrl: 'https://test1-phome.yunqueyi.com/'  
     baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
-    webPageUrl: 'https://uat-phome.yunqueyi.com/'  
+    webPageUrl: 'https://uat-phome.yunqueyi.com/',
+    qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token",
+    qiniuFileUrl: "http://localhost:10201/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
+    qiniuImgUrl: "https://test1-file.yunqueyi.com"
   },
   dev: {
     baseUrl: 'https://dev-sc.yunqueyi.com/',
     apiUrl: 'https://dev-api.yunqueyi.com/',
-    webPageUrl: 'https://dev-phome.yunqueyi.com/'  
+    webPageUrl: 'https://dev-phome.yunqueyi.com/',
+    qiniuUrl: "http://localhost:10201/contents/admin/qiniu/token",
+    qiniuFileUrl: "http://localhost:10201/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
+    qiniuImgUrl: "https://test1-file.yunqueyi.com"
   },
   test: {
     baseUrl: 'https://test1-sc.yunqueyi.com/',
     apiUrl: 'https://test1-api.yunqueyi.com/',
-    webPageUrl: 'https://test1-phome.yunqueyi.com/'  
+    webPageUrl: 'https://test1-phome.yunqueyi.com/',
+    qiniuUrl: "https://test1-sc.yunqueyi.com/contents/admin/qiniu/token",
+    qiniuFileUrl: "https://test1-sc.yunqueyi.com/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://test1-videos.yunqueyi.com",
+    qiniuImgUrl: "https://test1-file.yunqueyi.com"
   },
   uat: {
     baseUrl: 'https://uat-sc.yunqueyi.com/',
     apiUrl: 'https://uat-api.yunqueyi.com/',
-    webPageUrl: 'https://uat-phome.yunqueyi.com/'  
+    webPageUrl: 'https://uat-phome.yunqueyi.com/',
+    qiniuUrl: "https://uat-sc.yunqueyi.com/contents/admin/qiniu/token",
+    qiniuFileUrl: "https://uat-sc.yunqueyi.com/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://videos.yunqueyi.com",  // 视频
+    qiniuImgUrl: "https://file.yunqueyi.com"
   },
   pro: {  
     baseUrl: 'https://sc.yunqueyi.com/',
     apiUrl: 'https://api.yunqueyi.com/',
-    webPageUrl: 'https://phome.yunqueyi.com/'
+    webPageUrl: 'https://phome.yunqueyi.com/',
+    qiniuUrl: "https://sc.yunqueyi.com/contents/admin/qiniu/token",
+    qiniuFileUrl: "https://sc.yunqueyi.com/contents/admin/qiniu/token1",
+    qiniuResourceUrl: "https://videos.yunqueyi.com",
+    qiniuImgUrl: "https://file.yunqueyi.com"
   }
 }

src/utils/fetchQiniu.js

+//api路径
+import {isNotEmptyUtils} from "./utils";
+
+export default async(url = '', data = {}, type = 'POST', method = 'fetch',server='CONTENT') => {
+	type = type.toUpperCase();
+
+	// url = (server==='WECHAT'?wechatUrl:baseUrl) + url;
+    if (url.match("^http") == null){
+        url = localStorage.getItem("Url") + url;
+    }
+
+	console.log("完整url:",url)
+    if (type == 'GET' && data) {
+		let dataStr = ''; //数据拼接字符串
+		Object.keys(data).forEach(key => {
+			dataStr += key + '=' + data[key] + '&';
+		})
+
+		if (dataStr !== '') {
+			dataStr = dataStr.substr(0, dataStr.lastIndexOf('&'));
+			url = url + '?' + dataStr;
+            // url = encodeURI(url + '?' + dataStr, true);
+		}
+	}
+
+	if (window.fetch && method == 'fetch') {
+        let requestConfig = {
+            credentials: 'include',
+            method: type,
+            // mode: "cors",
+            headers: {
+                // 'Access-Control-Allow-Origin': '*',
+                'Accept': '*',
+                'Content-Type': 'application/json',
+                'sysCode':'2'
+                // 'token': localStorage.getItem('token') || null, //固定传header：
+                // 'system_code': 'todo'   //固定传header：系统编号
+            },
+        }
+
+        if (type == 'POST' || type === 'PUT' || type === 'PATCH' || type === 'DELETE' && data) {
+            Object.defineProperty(requestConfig, 'body', {
+                value: JSON.stringify(data)
+            })
+        }
+		try {
+			const response = await fetch(url, requestConfig);
+			const responseJson = await response.json();
+
+			return responseJson
+		} catch (error) {
+			throw new Error(error)
+		}
+	} else {
+		return new Promise((resolve, reject) => {
+			let requestObj;
+			if (window.XMLHttpRequest) {
+				requestObj = new XMLHttpRequest();
+			} else {
+				requestObj = new ActiveXObject;
+			}
+
+			let sendData = '';
+			if (type == 'POST' || type == 'DELETE' || type == 'PUT') {
+				sendData = JSON.stringify(data);
+			}
+
+			requestObj.open(type, url, true);
+			requestObj.setRequestHeader("Content-Type", "application/json");
+			requestObj.send(sendData);
+
+			requestObj.onreadystatechange = () => {
+				if (requestObj.readyState == 4) {
+					if (requestObj.status == 200) {
+						let obj = requestObj.response
+						if (typeof obj !== 'object' && isNotEmptyUtils(obj)) {
+							obj = JSON.parse(obj);
+						}
+						resolve(obj)
+					} else {
+						reject(requestObj)
+					}
+				}
+			}
+		})
+	}
+}

src/utils/index.js

@@ -126,6 +126,22 @@ export function getWebPageUrl(url) {
   return getConfigByEnvType('webPageUrl') + url
 }
 
+// 获取七牛token
+export function getQiniuToken() {
+  return getConfigByEnvType('qiniuUrl')
+}
+export function getQiniuToken1() {
+  return getConfigByEnvType('qiniuFileUrl')
+}
+
+// 七牛上传视频和图片
+export function uploadVideo() {
+  return getConfigByEnvType('qiniuResourceUrl')
+}
+export function uploadImg() {
+  return getConfigByEnvType('qiniuImgUrl')
+}
+
 // 根据不同环境，生成URL
 function getConfigByEnvType(urlType) {
   return envConfig[process.env.BUILD_ENV][urlType]

src/utils/qiniuUtil.js

+import {isEmptyUtils, isNotEmptyUtils, subString} from "./utils";
+import fetchQiniu from './fetchQiniu.js';
+import { getQiniuToken, getQiniuToken1, uploadVideo, uploadImg } from './index'
+
+
+// let apiUrl = localStorage.getItem("qiniuUrl");
+// let fileApiUrl = localStorage.getItem("qiniuFileUrl");
+let apiUrl = getQiniuToken()
+let fileApiUrl = getQiniuToken1()
+//该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
+let subscription = null;
+
+//上传返回结果
+let result = {
+    key: null,//文件保存在空间中的资源名
+    path: null,//保存到db的路径(不带域名)
+    fullPath: null,//文件网络路径(文件url)
+    size: null,//资源尺寸，单位为字节
+    name: null,//原始文件名
+    ext: null//上传资源的后缀名，通过自动检测的mimeType 或者原文件的后缀来获取
+};
+
+//上传状态
+// var status = false;
+
+//FIXME 请注意vue里面不要使用全局变量
+let domain = uploadVideo()  // 视频
+
+let domain1 = uploadImg()  // 图片
+
+let errorCode = new Map([
+    [298,'部分操作执行成功'],
+    [400,'请求报文格式错误'],
+    [401,'认证授权失败'],
+    [403,'权限不足，拒绝访问。'],
+    [404,'资源不存在'],
+    [405,'请求方式错误'],
+    [406,'上传的数据 CRC32 校验错误'],
+    [413,'请求资源大小大于指定的最大值'],
+    [419,'用户账号被冻结'],
+    [478,'镜像回源失败'],
+    [502,'错误网关'],
+    [503,'服务端不可用'],
+    [504,'服务端操作超时'],
+    [573,'单个资源访问频率过高'],
+    [579,'上传成功但是回调失败'],
+    [599,'服务端操作失败'],
+    [608,'资源内容被修改'],
+    [612,'指定资源不存在或已被删除'],
+    [614,'目标资源已存在'],
+    [630,'已创建的空间数量达到上限，无法创建新空间。'],
+    [631,'指定空间不存在'],
+    [640,'调用列举资源(list)接口时，指定非法的marker参数。'],
+    [701,'在断点续上传过程中，后续上传接收地址不正确或ctx信息已过期。']
+]);
+
+let qiniuErrorCheck = function (code) {
+    errorCode.forEach(function (value, key, map) {
+        if (code === key){
+            console.error(key+':'+value)
+        }
+    })
+}
+
+//用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
+let mimeTypeArray = null;
+
+export const createFilePath = (file, fileName) => {
+    if (isEmptyUtils(file)) {
+        return null;
+    }
+    let arr = fileName.split('_');
+    if(arr.length != 4){
+        alert('上传视频文件名格式不正确');
+        return null;
+    }
+    let arr4 = arr[3].split('.');
+
+    //文件全路径(文件路径 + 文件名) 扩展名​/年/月/日/
+    let filePath = arr[0] + "/" + arr[1] + "/" + arr[2] + "_" + arr4[0] + '.'+arr4[1];
+    console.log(filePath);
+    return filePath;
+};
+
+/**
+ * 获取七牛上传凭证
+ *
+ * @return {Promise} token 七牛上传凭证
+ * */
+const doQiniuAction = () => {
+    console.log('send---'+apiUrl);
+    return new Promise(function (resolve, reject) {
+            fetchQiniu(apiUrl,{}, 'GET').then(function (result) {
+                let token = null;
+                if (isNotEmptyUtils(result) && result.code == "000000") {
+                    token = result.data.qiniuToken;
+                    resolve(token);
+                    console.log('七牛临时授权成功');
+                    localStorage.setItem('qiniuToken',token);
+                } else {
+                    reject(result);
+                    console.error('七牛临时授权失败:', result);
+                }
+            }).catch(function (error) {
+                reject();
+                console.error('七牛临时授权失败:', error);
+            });
+    });
+};
+
+/**
+ * 获取七牛上传凭证
+ *
+ * @return {Promise} token 七牛上传凭证
+ * */
+const doQiniuAction1 = (fileType) => {
+    console.log('send---'+fileApiUrl);
+    return new Promise(function (resolve, reject) {
+       // if(isEmptyUtils(localStorage.getItem('qiniuToken'))){
+            fetchQiniu(fileApiUrl, {"fileType": fileType}, 'GET').then(function (result) {
+                let token = null;
+                if (isNotEmptyUtils(result) && result.code == "000000") {
+                    token = result.data.qiniuToken;
+                    resolve(token);
+                    console.log('七牛临时授权成功');
+                    localStorage.setItem('qiniuToken',token);
+                } else {
+                    reject(result);
+                    console.error('七牛临时授权失败:', result);
+                }
+            }).catch(function (error) {
+                reject();
+                console.error('七牛临时授权失败:', error);
+            });
+        // }else{
+        //     console.log('从localStorage获取token:'+localStorage.getItem('qiniuToken'))
+        //     resolve(localStorage.getItem('qiniuToken'));
+        // }
+    });
+};
+
+/**
+ *
+ * @param self
+ * @param file
+ * @param filePath
+ * @param previewId
+ * @param progressId
+ * @returns {Promise}
+ */
+export const qiniuUpload = (self, file, filePath, previewId, progressId) => {
+
+    // var deferred = $q.defer();
+
+    return new Promise(function (resolve, reject) {
+
+        if (isEmptyUtils(file) || isEmptyUtils(filePath)) {
+            console.error('七牛上传失败:非法参数');
+            reject();
+        }
+
+        let key = filePath ? filePath : getFilePath(file);
+
+        //修改状态为上传
+        self.qiniuUploadStatus = true;
+
+
+        // let token = "BRVB4TpxVFA5Wo6lIpfltmWKOltzGar46tvC3BlR:UHn0LDElwjP4jEZTXdq_1qV6_hw=:eyJzY29wZSI6InBpY2EtdGVzdCIsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiYnVja2V0XCI6XCIkKGJ1Y2tldClcIixcImZzaXplXCI6JChmc2l6ZSksXCJmbmFtZVwiOiQoZm5hbWUpLFwiZXh0XCI6JChleHQpfSIsImRlYWRsaW5lIjoxNTI5NDk0MTc1fQ==";
+        doQiniuAction().then(function (token) {
+            let putExtra = {
+                fname: file.name, //原文件名
+                params: {}, //用来放置自定义变量
+                mimeType: mimeTypeArray || null //null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
+            };
+
+            let config = {
+                useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
+                region: null //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
+            };
+
+            /*
+             * qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，
+             * 订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
+             * */
+            let observable = qiniu.upload(file, key, token, putExtra, config);
+
+            /**
+             * 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进
+             * total.loaded: number，已上传大小，单位为字节。
+             * total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
+             * total.percent: number，当前上传进度，范围：0～100
+             * */
+            let next = function (res) {
+                //res值{"total":{"loaded":18184,"size":18185,"percent":99.99450096233159}}
+
+                //获取百分比进度
+                let progress = res.total.percent.toFixed(2);
+                self.uploadProgress = Number(progress);
+                console.log('Progress: ' + progress);
+                //如果有进度条
+                /*if (isNotEmptyUtils(progressId)) {
+                    let obj = $("#" + progressId);
+                    //开始上传时,显示进度条
+                    if (isNotEmptyUtils(obj.parent())) {
+                        //修改状态为上传
+                        // status = true;
+                        self.qiniuUploadStatus = true;
+                        obj.parent().removeClass("hidden");
+                        obj.fadeIn("fast");
+                    }
+                    obj.css("width", progress + '%');
+                    obj.text(progress + '%');
+                    //上传完成,2秒后淡出进度条
+                    if (progress === "100.00") {
+                        //修改状态为非上传
+                        // status = false;
+                        self.qiniuUploadStatus = true;
+                        obj.fadeOut(2000);
+                    }
+                }*/
+            };
+
+            /**
+             * 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息
+             * ，具体返回结构取决于后端sdk的配置，可参考上传策略(https://developer.qiniu.com/kodo/manual/1206/put-policy)
+             * */
+            let complete = function (res) {
+                console.log("七牛上传完成");
+                setTimeout(function(){
+                    result.key = res.key;
+                    result.path = '/' + res.key;
+                    result.fullPath = domain + '/' + res.key + '?v=' + new Date().getTime();
+                    result.size = res.fsize;
+                    result.name = res.fname ;
+                    result.ext = res.ext;
+
+                    // deferred.resolve(result);
+                    resolve(result);
+                    // self.model.qCloudUrl = result.fullPath;
+                    // $("#introVideoLecture").attr("src", self.model.qCloudUrl);
+                    //修改状态为非上传
+                    // status = false;
+                    self.qiniuUploadStatus = false;
+
+                    if (isNotEmptyUtils(previewId)) {
+                        let address = domain + result.path;
+                        console.log('文件路径: ' + address);
+
+                        //显示图片
+                        let $img = $('<img>').attr("src", address);
+                        let obj = $("#" + previewId);
+                        obj.empty().append($img);
+                        obj.css('max-width', '100%');
+                    }
+
+                },2000);
+
+            };
+
+            /**
+             * 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object：
+             * err.isRequestError: 用于区分是否 xhr 请求错误；当 xhr 请求出现错误并且后端通过 HTTP 状态码返回了错误信息时，该参数为 true；否则为 undefined 。
+             * err.reqId: string，xhr请求错误的 X-Reqid。
+             * err.code: number，请求错误状态码，只有在 err.isRequestError 为 true 的时候才有效，可查阅码值对应说明。
+             * err.message: string，错误信息，包含错误码，当后端返回提示信息时也会有相应的错误信息。
+             * */
+            let error = function (err) {
+                //修改状态为非上传
+                // status = false;
+                self.qiniuUploadStatus = false
+                localStorage.removeItem('qiniuToken');
+                console.log("七牛上传失败,详细信息请参考:https://developer.qiniu.com/kodo/api/3928/error-responses");
+                //输出简略错误信息
+                if (err.isRequestError){
+                    qiniuErrorCheck(err.code)
+                }else {
+                    console.error(err);
+                }
+
+                /*modalClick("提示", "上传失败！", "确定", function () {
+                    $('#model-modify').modal('hide');
+                }, "", null);*/
+                // deferred.reject(new Error('七牛上传失败'));
+                // return deferred.promise;
+                return reject(new Error('七牛上传失败'));
+            };
+
+            // 上传开始
+            subscription = observable.subscribe(next, error, complete);
+
+
+            });
+
+        // return deferred.promise;
+
+
+    });
+};
+
+/**
+ * 获取时间戳
+ * @param {Date} [date]日期对象,为空时,返回当前时间戳
+ * @return {String} timeStamp时间戳 格式:yyyyMMddhhmmssS
+ */
+const timeStamp = (date) => {
+    if (isEmptyUtils(date)) {
+        return new Date().format('yyyyMMddhhmmssS');
+    }
+
+    return date.format('yyyyMMddhhmmssS');
+}
+/**
+ * 获取全局唯一标识符（GUID，Globally Unique Identifier）
+ * @return {String} guid
+ */
+const guid = () => {
+    /**
+     * @return {String}
+     */
+    function S4() {
+        return (((1 + Math.random()) * 0x10000) | 0).toString(16).substring(1);
+    }
+
+    return (S4() + S4() + "-" + S4() + "-" + S4() + "-" + S4() + "-" + S4() + S4() + S4());
+};
+/**
+ * 文件重命名--七牛图片 2018 11
+ * @param {File} [file] 上传文件对象
+ * @param {String} [fileName] 指定文件名
+ * @param {String} [folder] 指定文件夹
+ * @return {String} fileName
+ */
+export const getFilePath = (file,fileName,folder) => {
+    if (isEmptyUtils(file)) {
+        return null;
+    }
+    //文件类型
+    var ext = file.type;
+    //后缀名
+    var suffix = file.name.substring(file.name.lastIndexOf(".") + 1);
+    //若为空则从name中获取---对wps格式的文件获取不到file.type
+    if (isEmptyUtils(ext)) {
+        ext = suffix;
+    }
+    //获取当前日期对象
+    var date = new Date();
+    if (isEmptyUtils(fileName)) {
+        //重命名后的文件名
+        fileName = timeStamp(date) + "-" + subString(guid(), 8) + "." + suffix;
+    }
+
+    //文件全路径(文件路径 + 文件名) 扩展名​/年/月/日/
+    // var filePath = ext + "/" + date.format('yyyy/MM/dd') + "/" + (isEmptyUtils(folder) ? "" : (folder + "/")) + fileName;
+    //var filePath = ext + "/" + "common/" + file.name.split('.')[0] + '-' + timeStamp(date) + "." + suffix;
+    var filePath = ext + "/" + "common/" + timeStamp(date) + "." + suffix;
+    console.log('filePath==============',filePath);
+    return filePath;
+
+}
+
+/**
+ *七牛上传图片、视频、文件 2018 11 hws
+ * @param self
+ * @param file
+ * @param filePath
+ * @param previewId
+ * @param progressId
+ * @param fileType 1--图片和文件   空为视频
+ * @returns {Promise}
+ */
+export const doUpload = (self,file, filePath, previewId,progressId, fileType) => {
+
+    // var deferred = $q.defer();
+
+    return new Promise(function (resolve, reject) {
+
+        if (isEmptyUtils(file) || isEmptyUtils(filePath)) {
+            console.error('七牛上传失败:非法参数');
+            reject();
+        }
+
+        let key = filePath ? filePath : getFilePath(file);
+
+        //修改状态为上传
+        self.qiniuUploadStatus = true;
+
+
+        // let token = "BRVB4TpxVFA5Wo6lIpfltmWKOltzGar46tvC3BlR:UHn0LDElwjP4jEZTXdq_1qV6_hw=:eyJzY29wZSI6InBpY2EtdGVzdCIsInJldHVybkJvZHkiOiJ7XCJrZXlcIjpcIiQoa2V5KVwiLFwiaGFzaFwiOlwiJChldGFnKVwiLFwiYnVja2V0XCI6XCIkKGJ1Y2tldClcIixcImZzaXplXCI6JChmc2l6ZSksXCJmbmFtZVwiOiQoZm5hbWUpLFwiZXh0XCI6JChleHQpfSIsImRlYWRsaW5lIjoxNTI5NDk0MTc1fQ==";
+        doQiniuAction1(fileType).then(function (token) {
+            let putExtra = {
+                fname: file.name, //原文件名
+                params: {}, //用来放置自定义变量
+                mimeType: mimeTypeArray || null //null || array，用来限制上传文件类型，为 null 时表示不对文件类型限制；限制类型放到数组里： ["image/png", "image/jpeg", "image/gif"]
+            };
+
+            let config = {
+                useCdnDomain: true, //表示是否使用 cdn 加速域名，为布尔值，true 表示使用，默认为 false。
+                region: null //选择上传域名区域；当为 null 或 undefined 时，自动分析上传域名区域
+            };
+
+            /*
+             * qiniu.upload 返回一个 observable 对象用来控制上传行为，observable 对像通过 subscribe 方法可以被 observer 所订阅，
+             * 订阅同时会开始触发上传，同时返回一个 subscription 对象，该对象有一个 unsubscribe 方法取消订阅，同时终止上传行为。
+             * */
+            let observable = qiniu.upload(file, key, token, putExtra, config);
+
+            /**
+             * 接收上传进度信息，res 参数是一个带有 total 字段的 object，包含loaded、total、percent三个属性，提供上传进
+             * total.loaded: number，已上传大小，单位为字节。
+             * total.total: number，本次上传的总量控制信息，单位为字节，注意这里的 total 跟文件大小并不一致。
+             * total.percent: number，当前上传进度，范围：0～100
+             * */
+            let next = function (res) {
+                //res值{"total":{"loaded":18184,"size":18185,"percent":99.99450096233159}}
+
+                //获取百分比进度
+                let progress = res.total.percent.toFixed(2);
+                self.uploadProgress = Number(progress);
+                if(progressId == 'uploadProgress1') {
+                    self.uploadProgress1 = Number(progress);
+                }
+                if(progressId == 'uploadProgress2') {
+                    self.uploadProgress2 = Number(progress);
+                }
+                console.log('Progress: ' + progress);
+                //如果有进度条
+                /*if (isNotEmptyUtils(progressId)) {
+                    let obj = $("#" + progressId);
+                    //开始上传时,显示进度条
+                    if (isNotEmptyUtils(obj.parent())) {
+                        //修改状态为上传
+                        // status = true;
+                        self.qiniuUploadStatus = true;
+                        obj.parent().removeClass("hidden");
+                        obj.fadeIn("fast");
+                    }
+                    obj.css("width", progress + '%');
+                    obj.text(progress + '%');
+                    //上传完成,2秒后淡出进度条
+                    if (progress === "100.00") {
+                        //修改状态为非上传
+                        // status = false;
+                        self.qiniuUploadStatus = true;
+                        obj.fadeOut(2000);
+                    }
+                }*/
+            };
+
+            /**
+             * 接收上传完成后的后端返回信息，res 参数为一个 object， 为上传成功后后端返回的信息
+             * ，具体返回结构取决于后端sdk的配置，可参考上传策略(https://developer.qiniu.com/kodo/manual/1206/put-policy)
+             * */
+            let complete = function (res) {
+                console.log("七牛上传完成");
+                setTimeout(function(){
+                    result.key = res.key;
+                    result.path = '/' + res.key;
+                   // result.fullPath = domain + '/' + res.key + '_' + new Date().getTime();
+                    if(!fileType) { // 图片  文件
+                        result.fullPath = domain + '/' + res.key;
+                    }else{  // 视频
+                        result.fullPath = domain1 + '/' + res.key;
+                    }
+                   
+                    result.size = res.fsize;
+                    result.name = res.fname ;
+                    result.ext = res.ext;
+
+                    // deferred.resolve(result);
+                    resolve(result);
+                    // self.model.qCloudUrl = result.fullPath;
+                    // $("#introVideoLecture").attr("src", self.model.qCloudUrl);
+                    //修改状态为非上传
+                    // status = false;
+                    self.qiniuUploadStatus = false;
+
+                    // if (isNotEmptyUtils(previewId)) {
+                    //     let address = domain + result.path;
+                    //     console.log('文件路径: ' + address);
+
+                    //     //显示图片
+                    //     let uplodImg = $('<img>').attr("src", address);
+                    //     let obj = $("#" + previewId);
+                    //     obj.empty().append(uplodImg);
+                    //     obj.css('max-width', '100%');
+                    // }
+
+                },2000);
+
+            };
+
+            /**
+             * 上传错误后触发，当不是 xhr 请求错误时，会把当前错误产生原因直接抛出，诸如 JSON 解析异常等；当产生 xhr 请求错误时，参数 err 为一个包含 code、message、isRequestError 三个属性的 object：
+             * err.isRequestError: 用于区分是否 xhr 请求错误；当 xhr 请求出现错误并且后端通过 HTTP 状态码返回了错误信息时，该参数为 true；否则为 undefined 。
+             * err.reqId: string，xhr请求错误的 X-Reqid。
+             * err.code: number，请求错误状态码，只有在 err.isRequestError 为 true 的时候才有效，可查阅码值对应说明。
+             * err.message: string，错误信息，包含错误码，当后端返回提示信息时也会有相应的错误信息。
+             * */
+            let error = function (err) {
+                //修改状态为非上传
+                // status = false;
+                self.qiniuUploadStatus = false
+                localStorage.removeItem('qiniuToken');
+                console.log("七牛上传失败,详细信息请参考:https://developer.qiniu.com/kodo/api/3928/error-responses");
+                //输出简略错误信息
+                if (err.isRequestError){
+                    qiniuErrorCheck(err.code)
+                }else {
+                    console.error(err);
+                }
+
+                /*modalClick("提示", "上传失败！", "确定", function () {
+                    $('#model-modify').modal('hide');
+                }, "", null);*/
+                // deferred.reject(new Error('七牛上传失败'));
+                // return deferred.promise;
+                return reject(new Error('七牛上传失败'));
+            };
+
+            // 上传开始
+            subscription = observable.subscribe(next, error, complete);
+
+
+            });
+
+        // return deferred.promise;
+
+
+    });
+};

src/utils/utils.js

+import axios from 'axios';
+//共通函数
+Array.prototype.contains = function (obj) {
+    if (this.length > 0) {
+        for (let i = 0; i < this.length; i++) {
+            if (obj === this[i]) {
+                return true;
+            }
+        }
+    }
+    return false;
+};
+
+Array.prototype.remove = function (obj) {
+    if (this.contains(obj)) {
+        for (let i = 0; i < this.length; i++) {
+            if (obj === this[i]) {
+                this.splice(i, 1);
+                break;
+            }
+        }
+    }
+    return this;
+};
+
+// 时间处理
+Date.prototype.format = function (fmt) { // author: meizz
+    let o = {
+        "M+": this.getMonth() + 1, // 月份
+        "d+": this.getDate(), // 日
+        "h+": this.getHours(), // 小时
+        "m+": this.getMinutes(), // 分
+        "s+": this.getSeconds(), // 秒
+        "q+": Math.floor((this.getMonth() + 3) / 3), // 季度
+        "S": this.getMilliseconds()
+        // 毫秒
+    };
+    if (/(y+)/.test(fmt))
+        fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "")
+            .substr(4 - RegExp.$1.length));
+    for (let k in o)
+        if (new RegExp("(" + k + ")").test(fmt))
+            fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
+    return fmt;
+};
+
+/**
+ * base64编码
+ * @param {Object} str
+ */
+export const base64encode = (str) => {
+    let base64EncodeChars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789+/";
+    let out, i, len;
+    let c1, c2, c3;
+    len = str.length;
+    i = 0;
+    out = "";
+    while (i < len) {
+        c1 = str.charCodeAt(i++) & 0xff;
+        if (i == len) {
+            out += base64EncodeChars.charAt(c1 >> 2);
+            out += base64EncodeChars.charAt((c1 & 0x3) << 4);
+            out += "==";
+            break;
+        }
+        c2 = str.charCodeAt(i++);
+        if (i == len) {
+            out += base64EncodeChars.charAt(c1 >> 2);
+            out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
+            out += base64EncodeChars.charAt((c2 & 0xF) << 2);
+            out += "=";
+            break;
+        }
+        c3 = str.charCodeAt(i++);
+        out += base64EncodeChars.charAt(c1 >> 2);
+        out += base64EncodeChars.charAt(((c1 & 0x3) << 4) | ((c2 & 0xF0) >> 4));
+        out += base64EncodeChars.charAt(((c2 & 0xF) << 2) | ((c3 & 0xC0) >> 6));
+        out += base64EncodeChars.charAt(c3 & 0x3F);
+    }
+    return out;
+};
+/**
+ * base64解码
+ * @param {Object} str
+ */
+export const base64decode = (str) => {
+    let base64DecodeChars = new Array(-1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, -1, 62, -1, -1, -1, 63, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, -1, -1, -1, -1, -1, -1, -1, 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24, 25, -1, -1, -1, -1, -1, -1, 26, 27, 28, 29, 30, 31, 32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, -1, -1, -1, -1, -1);
+    let c1, c2, c3, c4;
+    let i, len, out;
+    len = str.length;
+    i = 0;
+    out = "";
+    while (i < len) {
+        /* c1 */
+        do {
+            c1 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
+        }
+        while (i < len && c1 == -1);
+        if (c1 == -1)
+            break;
+        /* c2 */
+        do {
+            c2 = base64DecodeChars[str.charCodeAt(i++) & 0xff];
+        }
+        while (i < len && c2 == -1);
+        if (c2 == -1)
+            break;
+        out += String.fromCharCode((c1 << 2) | ((c2 & 0x30) >> 4));
+        /* c3 */
+        do {
+            c3 = str.charCodeAt(i++) & 0xff;
+            if (c3 == 61)
+                return out;
+            c3 = base64DecodeChars[c3];
+        }
+        while (i < len && c3 == -1);
+        if (c3 == -1)
+            break;
+        out += String.fromCharCode(((c2 & 0XF) << 4) | ((c3 & 0x3C) >> 2));
+        /* c4 */
+        do {
+            c4 = str.charCodeAt(i++) & 0xff;
+            if (c4 == 61)
+                return out;
+            c4 = base64DecodeChars[c4];
+        }
+        while (i < len && c4 == -1);
+        if (c4 == -1)
+            break;
+        out += String.fromCharCode(((c3 & 0x03) << 6) | c4);
+    }
+    return out;
+};
+
+/**
+ * 时间秒数格式化
+ * @param s 时间戳（单位：秒）
+ * @returns {*} 格式化后的时分秒
+ */
+export const secToTime = (s) => {
+    let t = "";
+    if (s > -1) {
+        // let hour = Math.floor(s/3600);
+        let min = Math.floor(s / 60) % 60;
+        let sec = s % 60;
+        // if(hour < 10) {
+        //     t = '0'+ hour + ":";
+        // } else {
+        //     t = hour + ":";
+        // }
+
+        if (min < 10) {
+            t += "0";
+        }
+        t += min + ":";
+        if (sec < 10) {
+            t += "0";
+        }
+        t += sec.toFixed(0);
+    }
+    return t;
+};
+
+/**
+ * 校验对象是否为空
+ * */
+export const isNotEmptyUtils = (obj) => {
+    if ("" == obj || null == obj || undefined == obj || "null" == obj) {
+        return false;
+    }
+    return true;
+};
+
+/**
+ * 校验对象是否为空
+ * */
+export const isEmptyUtils = (obj) => {
+    return !isNotEmptyUtils(obj);
+};
+
+/**
+ * 校验数组是否为空
+ * */
+export const isEmptyList = (list) => {
+    return (isEmptyUtils(list) || !(list instanceof Array) || list.length === 0);
+};
+
+/**
+ * 校验数组是否为空
+ * */
+export const isNotEmptyList = (list) => {
+    return !isEmptyList(list);
+};
+
+
+/**
+ * 校验对象是否只包含数字0~9
+ * * @param {String} [obj] 校验对象
+ * */
+export const isNumber = (obj) => {
+    return (obj != null && obj.toString().match('^[0-9]*$') != null);
+};
+
+// 获取用户系统信息start
+const detectOS = () => {
+    let sUserAgent = navigator.userAgent;
+    let isWin = (navigator.platform == "Win32")
+        || (navigator.platform == "Windows");
+    let isMac = (navigator.platform == "Mac68K")
+        || (navigator.platform == "MacPPC")
+        || (navigator.platform == "Macintosh")
+        || (navigator.platform == "MacIntel");
+    if (isMac)
+        return "Mac";
+    let isUnix = (navigator.platform == "X11") && !isWin && !isMac;
+    if (isUnix)
+        return "Unix";
+    let isLinux = (String(navigator.platform).indexOf("Linux") > -1);
+    if (isLinux)
+        return "Linux";
+    let isIos = (sUserAgent.indexOf("Mac OS X") > -1);
+    if (isIos)
+        return "Mac";
+    if (isWin) {
+        let isWinXP = sUserAgent.indexOf("Windows NT 5.1") > -1
+            || sUserAgent.indexOf("Windows XP") > -1;
+        if (isWinXP)
+            return "WinXP";
+        let isWinVista = sUserAgent.indexOf("Windows NT 6.0") > -1
+            || sUserAgent.indexOf("Windows Vista") > -1;
+        if (isWinVista)
+            return "WinVista";
+        let isWin7 = sUserAgent.indexOf("Windows NT 6.1") > -1
+            || sUserAgent.indexOf("Windows 7") > -1;
+        if (isWin7)
+            return "Win7";
+        let isWin8_1 = sUserAgent.indexOf("Windows NT 6.2") > -1
+            || sUserAgent.indexOf("Windows 8") > -1;
+        let isWin8_2 = sUserAgent.indexOf("Windows NT 6.3") > -1
+            || sUserAgent.indexOf("Windows 8.1") > -1;
+        if (isWin8_1 || isWin8_2)
+            return "Win8";
+        let isWin10_1 = sUserAgent.indexOf("Windows NT 6.4") > -1
+            || sUserAgent.indexOf("Windows 10") > -1;
+        let isWin10_2 = sUserAgent.indexOf("Windows NT 10.0") > -1
+            || sUserAgent.indexOf("Windows 10") > -1;
+        if (isWin10_1 || isWin10_2)
+            return "Win10";
+    }
+    return "other";
+};
+
+// 获取用户浏览器信息
+const getBrowser = () => {
+    // let OsObject = "未知";
+    // if (navigator.userAgent.indexOf("MSIE") > 0) {
+    //     return "IE";
+    // }
+    // if (navigator.userAgent.indexOf("Firefox") > 0) {
+    //     return "Firefox";
+    // }
+    // if (navigator.userAgent.indexOf("Chrome") > 0) {
+    //     return "Chrome";
+    // }
+    // if (navigator.userAgent.indexOf("Safari") > 0) {
+    //     return "Safari";
+    // }
+    // if (navigator.userAgent.indexOf("Gecko") > 0) {
+    //     return "Gecko";
+    // }
+    return navigator.userAgent;
+};
+
+const GetLocalIPAddress = () => {
+    // let url ='http://counter.sina.com.cn/ip/';
+    // let url ='http://chaxun.1616.net/s.php?type=ip&output=json&callback=?&_='+Math.random();
+    // let ip = "";
+    // $.getJSON(url, function(data){
+    //     localStorage.setItem("ipAddress",data.Ip);
+    //     // check();
+    // });
+    // $.getScript('http://pv.sohu.com/cityjson?ie=utf-8', function () {
+    return returnCitySN["cip"];
+    // });
+    // return ip;
+};
+
+// 获取用户终端信息
+const getTerminalType = () => {
+    let brow = "未知";
+    // alert(navigator.userAgent);
+    if (navigator.userAgent.indexOf('iPad') > -1) {
+        // alert("iPad");
+        return brow = "iPad";
+    }
+    if (navigator.userAgent.indexOf('Android') > -1
+        || navigator.userAgent.indexOf('Linux') > -1) {
+        // alert("Android");
+        return brow = "android手机";
+    }
+    if (navigator.userAgent.indexOf('iPhone') > -1
+    // || navigator.userAgent.indexOf('Mac') > -1
+    ) {
+        // alert("iPhone");
+        return brow = "iPhone手机";
+    }
+    if (navigator.userAgent.indexOf('Trident') > -1) {
+        // alert("Trident");
+        return brow = "电脑";
+    }
+    if (navigator.userAgent.indexOf('Presto') > -1) {
+        // alert("Presto");
+        return brow = "电脑";
+    }
+    if (navigator.userAgent.indexOf('Chrome') > -1) {
+        // alert("Chrome");
+        return brow = "电脑";
+    }
+    if (navigator.userAgent.indexOf('AppleWebKit') > -1) {
+        // alert("AppleWebKit");
+        return brow = "iPad";
+    }
+    if (navigator.userAgent.indexOf('Gecko') > -1
+        && navigator.userAgent.indexOf('KHTML') == -1) {
+        // alert("Gecko");
+        return brow = "电脑";
+    }
+    if (navigator.userAgent.indexOf("Mac OS X") > -1) {
+        // alert("ios");
+        return brow = "ios";
+    }
+    if (navigator.userAgent.indexOf('Safari') == -1) {
+        // alert("Safari");
+        return brow = "电脑";
+    }
+    return brow;
+};
+
+const initEnvironment = () => {
+    let OS = detectOS();
+    let browser = getBrowser();
+    let ip = GetLocalIPAddress();
+    let terminalType = getTerminalType();
+    localStorage.setItem("OS", OS);
+    localStorage.setItem("browser", browser);
+    localStorage.setItem("ipAddress", ip);
+    localStorage.setItem("terminalType", terminalType);
+};
+
+/**
+ * str数据字符串,split分隔符
+ * @param {String} [str] 当前vue对象
+ * @param {String} [split] 当前vue对象
+ * @return{Array} [array]
+ * */
+export const stringToArr = (str, split) => {
+    if (isEmptyUtils(str) || isEmptyUtils(split) || str.indexOf(split) === -1) {
+        return [str];
+    } else {
+        return str.split(split);
+    }
+};
+
+//单点登录--start
+/**
+ * str数据字符串,split分隔符
+ * @param {String} [str] url参数部分
+ * @param {String} [split] 分隔符
+ * @return{Array} [parArr] 返回键值对list
+ * */
+const getUrlParams = (str, split) => {
+    let parArr = [];
+    if (isEmptyUtils(str) || isEmptyUtils(split) || str.indexOf(split) === -1) {
+        return parArr;
+    } else {
+        let parMapArray = str.split(split);
+        if (parMapArray.length > 0) {
+            for (let i = 0; i < parMapArray.length; i++) {
+                if (parMapArray[i].indexOf("=") > -1) {
+                    let item = parMapArray[i].split("=");
+                    let par = {};
+                    par[item[0]] = item[1];
+                    parArr.push(par);
+                }
+            }
+        }
+        return parArr;
+    }
+};
+
+/**
+ * str数据字符串,split分隔符
+ * @param {String} [str] url参数部分
+ * @param {String} [split] 分隔符
+ * @return{Map} [parMap] 返回键值对Map
+ * */
+export const getUrlParamsMap = (str, split) => {
+    let parMap = new Map();
+    if (isEmptyUtils(str) || isEmptyUtils(split) || str.indexOf(split) === -1) {
+        return parMap;
+    } else {
+        let parMapArray = str.split(split);
+        if (parMapArray.length > 0) {
+            for (let i = 0; i < parMapArray.length; i++) {
+                if (parMapArray[i].indexOf("=") > -1) {
+                    let item = parMapArray[i].split("=");
+                    parMap[item[0]] = item[1];
+                }
+            }
+        }
+        return parMap;
+    }
+};
+
+export const ssoLogin = (href, paramMap) => {
+    console.log("ssoLogin开始");
+    if (isNotEmptyUtils(paramMap)) {
+        if (isNotEmptyUtils(paramMap)) {
+            for (var param in paramMap) {
+                localStorage.setItem(param, paramMap[param]);
+            }
+        }
+        //获取用户系统信息
+        initEnvironment();
+    }
+};
+
+
+//单点登录--end
+
+//退出登录,跳转到登录页面
+export const logout = () => {
+    let url = localStorage.getItem("Url");
+    let logoutUrl = localStorage.getItem("logoutUrl");
+    let ssoLoginUrl = localStorage.getItem("ssoLogin");
+    let ssoOriginUrl = localStorage.getItem("ssoOrigin");
+    console.log('logoutUrl:'+logoutUrl)
+/*    alert("ssoLogin Url:"+ ssoLoginUrl)
+    alert("logOut url:" + logoutUrl)
+    alert("ssoOrigin url:" + ssoOriginUrl);*/
+    localStorage.clear();
+    localStorage.setItem("Url", url);
+    localStorage.setItem("logoutUrl", logoutUrl);
+    localStorage.setItem("ssoLogin", ssoLoginUrl);
+    localStorage.setItem("ssoOrigin", ssoOriginUrl);
+    if (isEmptyUtils(logoutUrl)) {
+        if(isEmptyUtils(ssoLoginUrl)){
+            window.location.href =  localStorage.getItem("ssoOrigin")
+                + "/PICA_SSO_FE/html/pica_login.html";
+        }else{
+            window.location.href = localStorage.getItem("ssoLogin");
+        }
+    } else {
+        // window.location.href = logoutUrl;
+        window.location.href =  localStorage.getItem("ssoOrigin")
+            + "/PICA_SSO_FE/html/pica_login.html";
+    }
+};
+
+/**
+ * 消息提示 确定或取消
+ * @param {Object} [self] 当前vue对象
+ * @param {String} [title] 标题
+ * @param {String} [content] 内容
+ * @param {String} [confirmButton] 确认按钮文字
+ * @param {Function} [confirmFunction] 按下确按钮认时,执行的函数
+ * @param {String} [cancelButton] 取消按钮文字
+ * @param {Function} [cancelFunction] 按取消按钮认时,执行的函数
+ * @param {String} [messageType] 消息类型 success,info,warning,error
+ * */
+export const messageBox = (self, title, content, confirmButton, confirmFunction, cancelButton, cancelFunction, messageType) => {
+    let titleText = title ? title : '提示';
+    let contentText = content ? content : '';
+    let confirmButtonText = confirmButton ? confirmButton : '确定';
+    let type = messageType ? messageType : 'info';
+    let typeArray = ["error", "warning", "info", "success"];
+    if (!typeArray.contains(type)) {
+        type = "info";
+    }
+
+    if (isNotEmptyUtils(cancelButton)) {
+        self.$confirm(contentText, titleText, {
+            confirmButtonText: confirmButtonText,
+            cancelButtonText: cancelButton,
+            type: type
+        }).then(() => {
+            // self.$message({
+            //     type: 'success',
+            //     message: '删除成功!'
+            // });
+            if (confirmFunction instanceof Function) {
+                confirmFunction();
+            }
+        }).catch(() => {
+            // self.$message({
+            //     type: 'info',
+            //     message: '已取消删除'
+            // });
+            if (cancelFunction instanceof Function) {
+                cancelFunction();
+            }
+        });
+    } else {
+        self.$alert(contentText, titleText, {
+            confirmButtonText: confirmButtonText,
+            type: type,
+            callback: action => {
+                // self.$message({
+                //     type: 'info',
+                //     message: `action: ${ action }`
+                // });
+                if (confirmFunction instanceof Function) {
+                    confirmFunction();
+                }
+            }
+        });
+    }
+};
+
+/**
+ * 消息提示(支持html内容) 确定或取消
+ * @param {Object} [self] 当前vue对象
+ * @param {String} [title] 标题
+ * @param {String} [content] 内容
+ * @param {String} [confirmButton] 确认按钮文字
+ * @param {Function} [confirmFunction] 按下确按钮认时,执行的函数
+ * @param {String} [cancelButton] 取消按钮文字
+ * @param {Function} [cancelFunction] 按取消按钮认时,执行的函数
+ * @param {String} [messageType] 消息类型 success,info,warning,error
+ * */
+export const htmlMessageBox = (self, title, content, confirmButton, confirmFunction, cancelButton, cancelFunction, messageType) => {
+    let titleText = title ? title : '提示';
+    let contentText = content ? content : '';
+    let confirmButtonText = confirmButton ? confirmButton : '确定';
+    let type = messageType ? messageType : 'info';
+    let typeArray = ["error", "warning", "info", "success"];
+    if (!typeArray.contains(type)) {
+        type = "info";
+    }
+
+    // debugger
+    if (isNotEmptyUtils(cancelButton)) {
+        self.$confirm(contentText, titleText, {
+            confirmButtonText: confirmButtonText,
+            cancelButtonText: cancelButton,
+            dangerouslyUseHTMLString: true,//是否将 message 属性作为 HTML 片段处理
+            type: type
+        }).then(() => {
+            if (confirmFunction instanceof Function) {
+                confirmFunction();
+            }
+        }).catch(() => {
+            if (cancelFunction instanceof Function) {
+                cancelFunction();
+            }
+        });
+    } else {
+        self.$alert(contentText, titleText, {
+            confirmButtonText: confirmButtonText,
+            dangerouslyUseHTMLString: true,//是否将 message 属性作为 HTML 片段处理
+            type: type,
+            callback: action => {
+                // self.$message({
+                //     type: 'info',
+                //     message: `action: ${ action }`
+                // });
+                if (confirmFunction instanceof Function) {
+                    confirmFunction();
+                }
+            }
+        });
+    }
+};
+
+
+/**
+ *请求失败时判断
+ *
+ * @param {Object} [error] 后台返回的信息
+ * @param {Object} [self] 当前vue对象
+ * */
+export const errorResponseCheck = (error, self) => {
+    closeLoading(self);
+    console.log(error);
+    setTimeout(function () {
+        let code = error ? (error.response ? error.response.data : 0) : 0;
+        // console.log("请求失败:%s", code);
+        if (code == '40011') {
+            messageBox(self, "登录", "登录失效，请重新登录！", "是", function () {
+                logout();
+            }, "", null);
+            setTimeout(function () {
+                logout();
+            }, 2000);
+        } else if (code == '40013') {
+            messageBox(self, "提示", "刷新太过频繁，休息一下！", "是", function () {
+
+            }, "", null);
+            // setTimeout(function () {
+            //
+            // }, 2000);
+        } else {
+            //sendErrorReport(code);
+            // messageBox(self, "提示", "操作失败！", "确定", function () {
+            //
+            // }, "", null, "error");
+            self.$message.error("操作失败");
+        }
+    }, 100)
+
+};
+
+//截位
+export const subString = (obj, int) => {
+    if (isEmptyUtils(obj) || isEmptyUtils(int)) {
+        return "";
+    }
+    if (obj.length <= int) {
+        return obj;
+    } else {
+        obj = obj.substring(0, int);
+    }
+
+    return obj;
+};
+
+/**
+ * 打开loading
+ * @param {Object} [self] 当前this对象
+ * @return 当前loading对象
+ * */
+export const openLoading = (self) => {
+    const options = {
+        lock: true,
+        text: 'Loading',
+        // target:'#bodyContent',
+        spinner: 'el-icon-loading',
+        background: 'rgba(0, 0, 0, 0.7)'
+    };
+    self.elLoadingId = self.$loading(options);
+    return self.elLoadingId;
+};
+
+/**
+ * 关闭loading
+ * @param {Object} [self] 当前this对象
+ * @return 当前loading对象
+ * */
+export const closeLoading = (self) => {
+    if (self.elLoadingId) {
+        self.elLoadingId.close();
+    }
+};
+
+/**
+ * 获取常量集合
+ *
+ *
+ * @param {Object} [self] 当前this对象
+ * @param {Object} [codeObject] 例如:codeObject={list1:"P097",list2:"P097"}
+ * */
+export const getConstantList = (self, codeObject) => {
+    if (!codeObject instanceof Object) {
+        return;
+    }
+    let req = {
+        params: {
+            numMap: JSON.stringify(codeObject)
+        }
+    };
+    self.$axios.get(
+        localStorage.getItem("msUrl") + "constants"
+        , req
+    ).then(function (res) {
+        let map = JSON.parse(JSON.stringify(res.data.data));//通过这个实现深拷贝
+        for (let key  in map) {
+            self[key] = map[key];
+        }
+    });
+};
+
+
+export const initDepartment = (self, obj, type) => {
+    if (!obj instanceof Object) {
+        return;
+    }
+    var num = {
+        id: obj,
+        type: type
+    }
+    axios.create().post(
+        localStorage.getItem("kfUrl") + "PICAAddressHospitalServiceImpl/postDepartmentList",
+        num
+    ).then(function (res) {
+        let list = JSON.parse(JSON.stringify(res.data.departmentList));//通过这个实现深拷贝
+        if (obj == -1) {
+            self.departmentListP = list;
+        } else {
+            self.departmentList = list;
+        }
+
+        if (type == 'childGetChildList') {
+            self.departmentPid = getPdepartmentId(self,'model','departmentId');
+        }
+    });
+};
+
+export const getPdepartmentId = (self) =>{
+    if(isNotEmptyList(self.model.departmentId)
+        || !self.departmentList instanceof  Array) {
+        return null;
+    }
+    if(self.departmentList.length>0) {
+        return self.departmentList[0].parent_id;
+    }else{
+        return -1;
+    }
+};
+
+
+export const getObjectIdsStr = (list, key) => {
+    if (isEmptyUtils(list)) {
+        return ''
+    }
+    let strRet = '';
+    for (let temp of list) {
+        strRet = strRet + temp[key] + ',';
+    }
+    return strRet;
+}
+
+
+export const getPositionList = (provinceId,cityId,countyId,townId) => {
+    return new Promise(function (resolve, reject) {
+        var num = {
+            provinceId,
+            cityId,
+            countyId,
+            townId
+        }
+        axios.create().post(
+            localStorage.getItem("kfUrl") + "combineHospital/getPositionList",
+            num
+        ).then(function (res) {
+            resolve(res);
+        }).then(function (res) {
+            reject(res);
+        });
+    });
+};
+
+export const setOptionLabel = (self,selfModel,selfEId,selfEName,list,listEId,listEName) => {
+    if (isEmptyList(list) || isEmptyUtils(listEId) || isEmptyUtils(listEName)) {
+        return ;
+    }
+    for (let i = 0; i < list.length; i++) {
+        if(list[i][listEId] == self[selfModel][selfEId]){
+            self[selfModel][selfEName] = list[i][listEName];
+            break;
+        }
+    }
+    return;
+};

src/views/education/item-component.vue

 <template>
-    <div class="create-component">
-        <bread-crumb :curmbFirst="curmbFirst" :curmbSecond="curmbSecond"></bread-crumb>
+    <div class="create-component-wrap">
+        <bread-crumb 
+        :curmbFirst="curmbFirst" 
+        :curmbSecond="curmbSecond" 
+        :curmbThird="curmbThird"
+        :jumPathThird="jumPathThird">
+        </bread-crumb>
         <div class="step-content">
             <el-steps :active="stepNum" simple>
                 <span class="step-one">1</span><el-step title="基础信息"></el-step>
@@ -31,10 +36,15 @@
                         :before-upload="beforeAvatarUpload">
                         <img v-if="componentList.imageUrl" :src="componentList.imageUrl" class="bg-img">
                         <img v-if="!componentList.imageUrl" class="bg-img" src="../../assets/image/small.png">
+                        <div class="limit-text">
+                            <p>尺寸大小：750*420</p>
+                            <p>限制大小：2.0 Mb</p>
+                            <p>支持.jpg,.png格式</p>
+                        </div>
                     </el-upload>
                 </el-form-item>
                 <el-row>
-                    <el-col :span="10">
+                    <el-col :span="5">
                         <el-form-item label="配置证书" prop="certificateId">
                             <el-radio-group v-model="openLable" @change="selectIsOpen">
                                 <el-radio label="是"></el-radio>
@@ -61,7 +71,7 @@
                     controls-position="right"
                      @change="handleChange" 
                      :step="10" 
-                     :min="0" 
+                     :min="10" 
                      :max="100">
                      </el-input-number>
                 </el-form-item>
@@ -74,17 +84,13 @@
             </div>
             <div class="tab-content">
                 <el-tabs type="card" v-model="firstTab" editable @tab-click="handleClick">
-                    <el-tab-pane
-                        :key="index"
-                        v-for="(item, index) in editableTabs"
-                        :label="item.title"
-                        :name="item.name">
+                    <el-tab-pane v-for="(item,index) in componentList.moduleList"  :key="index" :label="'模块' + parseInt(index + 1)" :name='"" + parseInt(index + 1)'>
                         <div>
-                            <el-form ref="moduleForm" :model="componentList.moduleList[0]" :rules="rules" label-suffix=":" label-width="130px" style="width:100%;">
+                            <el-form ref="moduleForm" :model="item" :rules="rules" label-suffix=":" label-width="130px" style="width:100%;">
                                 <el-row>
                                     <el-col :span="10">
                                         <el-form-item label="模块名称" prop="name">
-                                            <el-input v-model="componentList.moduleList[0].name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
+                                            <el-input v-model="item.name" size="mini" placeholder="请选择模块名称" style="width:288px;"></el-input>
                                         </el-form-item>
                                     </el-col>
                                     <el-col :span="10">
@@ -99,97 +105,78 @@
                             </el-form>
                             <div class="template-btn">
                                 <span class="word-size">添加一个模板</span>
-                                <el-button type="primary" size="small" @click="addTest" style="margin-left:0;">单个考试</el-button>
-                                <el-button type="primary" size="small" @click="addCourse" style="margin-left:0;">单个课程</el-button>
-                                <el-button type="primary" size="small" @click="addMatterTest" style="margin-left:0;">摸底考试后培训</el-button>
-                                <el-button type="primary" size="small" @click="addTrainTest" style="margin-left:0;">培训后考试</el-button>
-                                <el-button type="primary" size="small" @click="addMatterTrain" style="margin-left:0;">摸底考试获得资格，培训再次考试</el-button>
+                                <el-button type="primary" size="small" @click="addTest(index)" style="margin-left:0;">单个考试</el-button>
+                                <el-button type="primary" size="small" @click="addCourse(index)" style="margin-left:0;">单个课程</el-button>
+                                <el-button type="primary" size="small" @click="addMatterTest(index)" style="margin-left:0;">摸底考试后培训</el-button>
+                                <el-button type="primary" size="small" @click="addTrainTest(index)" style="margin-left:0;">培训后考试</el-button>
+                                <el-button type="primary" size="small" @click="addMatterTrain(index)" style="margin-left:0;">摸底考试获得资格，培训再次考试</el-button>
                             </div>
-                            <el-form ref="templateForm" :model="componentList.moduleList[0]" :rules="templateRules" label-suffix=":" label-width="130px" style="width:100%;">
-                                <div v-for="(item,index) in componentList.moduleList[0].partList" :key="index">
-                                    <div class="single-test">
-                                        <div class="single-test-div">
-                                            <div class="title">{{item.titleName}}<span @click="deleteTest(index)"><i class="el-icon-delete"></i></span></div>
-                                            <div  v-if="item.type == 1">
-                                                <el-row>
-                                                    <el-col :span="10">
-                                                        <el-form-item label="考试名称" prop="name">
-                                                            <el-input v-model="item.name" size="mini" placeholder="请输入考试名称" style="width:288px;"></el-input>
-                                                        </el-form-item>
-                                                    </el-col>
-                                                    <el-col :span="10">
-                                                        <el-form-item label="考试ID" prop="id">
-                                                        <el-input v-model="item.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
-                                                        </el-form-item>
-                                                    </el-col>
-                                                </el-row>
-                                                <el-row>
-                                                    <el-col :span="10">
-                                                        <el-form-item label="配置证书" prop="name">
-                                                            <el-radio-group v-model="openLable" @change="selectIsOpen">
-                                                                <el-radio label="是"></el-radio>
-                                                                <el-radio label="否"></el-radio>
-                                                            </el-radio-group>
-                                                        </el-form-item>
-                                                    </el-col>
-                                                    <el-col :span="10">
-                                                        <el-form-item label="选择证书" prop="id">
-                                                        <el-input v-model="item.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
-                                                        </el-form-item>
-                                                    </el-col>
-                                                </el-row>
+                            <div v-for="(item1,index1) in item.templateList" :key="index1">
+                                <el-form ref="templateForm" :model="item1" :rules="templateRules" label-suffix=":" label-width="130px" style="width:100%;">
+                                    <div class="template-content">
+                                        <div class="template-content-div">
+                                            <div class="title">
+                                                {{item1.name}}
+                                                <span @click="deleteTemplate(index,index1)">
+                                                    变更顺序:
+                                                    <i class="el-icon-arrow-down" @click="sortUp(index,index1)"></i>
+                                                    <i class="el-icon-arrow-up" @click="sortDown(index,index1)"></i>
+                                                    <i class="el-icon-delete" style="color:red;"></i>
+                                                </span>
                                             </div>
-                                            <div v-if="item.type == 2">
-                                                <div v-if="item.numFlag == 1">
+                                            <div v-for="(item2,index2) in item1.partList" :key="index2">
+                                                <!-- 考试 -->
+                                                <div  v-if="item2.type == 1">
+                                                    <el-row>
+                                                        <el-col :span="10">
+                                                            <el-form-item label="考试名称" prop="name">
+                                                                <el-input v-model="item2.name" size="mini" placeholder="请输入考试名称" style="width:288px;"></el-input>
+                                                            </el-form-item>
+                                                        </el-col>
+                                                        <el-col :span="10">
+                                                            <el-form-item label="考试ID" prop="id">
+                                                            <el-input v-model="item2.id" size="mini" placeholder="请输入考试ID" style="width:288px;"></el-input>
+                                                            </el-form-item>
+                                                        </el-col>
+                                                    </el-row>
                                                     <el-row>
+                                                        <el-col :span="10">
+                                                            <el-form-item label="配置证书" prop="name">
+                                                                <el-radio-group v-model="openLable" @change="selectIsOpen">
+                                                                    <el-radio label="是"></el-radio>
+                                                                    <el-radio label="否"></el-radio>
+                                                                </el-radio-group>
+                                                            </el-form-item>
+                                                        </el-col>
+                                                        <el-col :span="10">
+                                                            <el-form-item label="选择证书" prop="id">
+                                                            <el-input v-model="item2.id" size="mini" placeholder="请选择证书" style="width:288px;"></el-input>
+                                                            </el-form-item>
+                                                        </el-col>
+                                                    </el-row>
+                                                </div>
+                                                <!-- 课程 -->
+                                                <div v-if="item2.type == 2">
+                                                    <el-row v-for="(item3,index3) in item2.partContentList" :key="index3">
                                                         <el-col :span="10">
                                                             <el-form-item label="课程名称" prop="name">
-                                                                <el-input v-model="item.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
+                                                                <el-input v-model="item3.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
+                                                                <span v-if="item2.numFlag == 2 && index3 == 0"><i class="el-icon-circle-plus-outline" @click="addMatterCourse(index,index1,index2)" style="color:#0486FE;"></i></span>
+                                                                <span v-if="item2.numFlag == 2 && index3 > 0"><i class="el-icon-delete" @click="deleteMatterCourse(index,index1,index2,index3)" style="color:red;"></i></span>
                                                             </el-form-item>
                                                         </el-col>
                                                         <el-col :span="10">
                                                             <el-form-item label="课程ID" prop="id">
-                                                                <el-input v-model="item.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
+                                                                <el-input v-model="item3.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
                                                             </el-form-item>
                                                         </el-col>
                                                     </el-row>
                                                 </div>
-                                                <div v-if="item.numFlag == 2">
-                                                    <div v-for="(item1,index1) in item1.partContentList" :key="index1">
-                                                        <el-row v-if="index1 == 0">
-                                                            <el-col :span="10">
-                                                                <el-form-item label="课程名称" prop="name">
-                                                                    <el-input v-model="item1.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
-                                                                    <span><i class="el-icon-circle-plus-outline" @click="addMatterCourse(index)" style="color:#0486FE;"></i></span>
-                                                                </el-form-item>
-                                                            </el-col>
-                                                            <el-col :span="10">
-                                                                <el-form-item label="课程ID" prop="id">
-                                                                    <el-input v-model="item1.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
-                                                                </el-form-item>
-                                                            </el-col>
-                                                        </el-row>
-                                                        <!-- <div class="tip">请注意该模板下，用户需要完成考试后才可参加培训</div> -->
-                                                        <el-row v-if="index1 > 0">
-                                                            <el-col :span="10">
-                                                                <el-form-item label="课程名称" prop="name">
-                                                                    <el-input v-model="item1.name" size="mini" placeholder="请输入课程名称" style="width:288px;"></el-input>
-                                                                    <span><i class="el-icon-delete" @click="deleteMatterCourse(index,index1)" style="color:red;"></i></span>
-                                                                </el-form-item>
-                                                            </el-col>
-                                                            <el-col :span="10">
-                                                                <el-form-item label="课程ID" prop="id">
-                                                                    <el-input v-model="item1.id" size="mini" placeholder="请输入课程ID" style="width:288px;"></el-input>
-                                                                </el-form-item>
-                                                            </el-col>
-                                                        </el-row>
-                                                    </div>
-                                                </div>
                                             </div>
                                         </div>
                                     </div>
-                                </div>
-                            </el-form>
+                                </el-form>
+                            </div>
                         </div>
                     </el-tab-pane>
                 </el-tabs>
@@ -227,6 +214,7 @@
 </template>
 <script>
 import BreadCrumb from '../../components/breadcrumb.vue'
+import { doUpload, getFilePath } from "../../utils/qiniuUtil"
 let vm = null
 export default {
     components: {
@@ -239,6 +227,8 @@ export default {
             dialogTitle: '调用资源包',
             curmbFirst: '教培项目',
             curmbSecond: '项目组件',
+            curmbThird: '新增项目组件',
+            jumPathThird: '{ path: '+'/item-component'+' }',
             firstTab: '1',
             openLable: '是',
             editableTabs: [{
@@ -252,45 +242,11 @@ export default {
                 imageUrl:'',
                 seqNo: '',
                 certificateId: '', // 0 没有证书
-                certificateCondition: '',
+                certificateCondition: '60',
                 moduleList: [{
                     name: '',
                     openFlag: '',  // 1不开放  2开放
-                    partList: [
-                        {
-                            titleName: '单个考试',
-                            type: 1, // 1考试  2课程
-                            name: '',
-                            id: '', // 新增时为空
-                            seqNo: '',
-                            conditionFlag: 1,  // 1为没有限制  2有限制
-                            numFlag: 1,  // 1为单个  2为可以无限添加
-                            templetSeqNo: ''
-                        },{
-                            titleName: '单个课程',
-                            type: 2, // 1考试  2课程
-                            name: '',
-                            id: '', // 新增时为空
-                            seqNo: '',
-                            conditionFlag: 1,  // 1为没有限制  2有限制
-                            numFlag: 1,  // 1为单个  2为可以无限添加
-                            templetSeqNo: ''
-                        },{
-                            titleName: '培训后考试',
-                            type: 1, // 1考试  2课程
-                            name: '',
-                            id: '', // 新增时为空
-                            seqNo: '',
-                            conditionFlag: 1,  // 1为没有限制  2有限制
-                            numFlag: 2,  // 1为单个  2为可以无限添加
-                            templetSeqNo: '',
-                            partContentList: [
-                                {
-                                    
-                                }
-                            ]
-                        }
-                    ]
+                    templateList: []
                 }]
             },
             resourceArray: [],
@@ -352,8 +308,11 @@ export default {
             vm.stepNum = 2
         },
         // 上传组件图片
-        beforeAvatarUpload() {
-
+        beforeAvatarUpload(file) {
+            doUpload(vm,file, getFilePath(file,null), 'preview4', 'progress1', 1).then(function (path) {
+                vm.componentList.imageUrl = path.fullPath
+                vm.$message.success('上传成功')
+            });
         },
         // 获取组件完成率
         handleChange(value) {
@@ -369,10 +328,11 @@ export default {
         },
         // 添加空白模块
         addModule() {
-            let seq = vm.editableTabs.length + 1
-            vm.editableTabs.push({
-                title: '模块 ' + seq,
-                name: '' + seq
+            let seq = vm.componentList.moduleList.length + 1
+            vm.componentList.moduleList.push({
+                name: '',
+                openFlag: '',  // 1不开放  2开放
+                templateList: []
             })
         },
         // 从模板中添加
@@ -380,105 +340,144 @@ export default {
             vm.columnFormVisible = true
         },
         // 添加单个考试
-        addTest() {
-            vm.moduleList.partList.push({
-                type: 1,
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+        addTest(index) {
+            for(let i = 0; i < vm.componentList.moduleList.length; i++) {
+                if(index == i) {
+                    vm.componentList.moduleList[i].templateList.push({
+                        name: '单个考试',
+                        partList: [{
+                            titleName: '',
+                            type: 1, // 1考试  2课程
+                            name: '',
+                            id: '', // 新增时为空
+                            seqNo: '',
+                            conditionFlag: 1,  // 1为没有限制  2有限制
+                            numFlag: 1,  // 1为单个  2为可以无限添加
+                            templetSeqNo: '',
+                            partContentList: [{
+                                    
+                            }]
+                        }]
+                    })
+                }
+            }
         },
         // 添加单个课程
-        addCourse() {
-            vm.moduleList.partList.push({
-                type: 2,
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+        addCourse(index) {
+            for(let i = 0; i < vm.componentList.moduleList.length; i++) {
+                if(index == i) {
+                    vm.componentList.moduleList[i].templateList.push({
+                        name: '单个课程',
+                        partList:[{
+                            titleName: '',
+                            type: 2, // 1考试  2课程
+                            name: '',
+                            id: '', // 新增时为空
+                            seqNo: '',
+                            conditionFlag: 1,  // 1为没有限制  2有限制
+                            numFlag: 1,  // 1为单个  2为可以无限添加
+                            templetSeqNo: '',
+                            partContentList: [{
+                                    
+                            }]
+                        }]
+                    })
+                }
+            }
         },
         //摸底考试后培训
-        addMatterTest() {
-            vm.moduleList.partList.push({
-                type: 3,
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+        addMatterTest(index) {
+            for(let i = 0; i < vm.componentList.moduleList.length; i++) {
+                if(index == i) {
+                    vm.componentList.moduleList[i].templateList.push({
+                        name: '摸底考试后培训',
+                        partList: [{
+                            titleName: '',
+                            type: 1, // 1考试  2课程
+                            name: '',
+                            id: '', // 新增时为空
+                            seqNo: '',
+                            conditionFlag: 1,  // 1为没有限制  2有限制
+                            numFlag: 1,  // 1为单个  2为可以无限添加
+                            templetSeqNo: '',
+                            partContentList: [{
+                                    
+                            }]
+                        },{
+                            titleName: '',
+                            type: 2, // 1考试  2课程
+                            name: '',
+                            id: '', // 新增时为空
+                            seqNo: '',
+                            conditionFlag: 1,  // 1为没有限制  2有限制
+                            numFlag: 2,  // 1为单个  2为可以无限添加
+                            templetSeqNo: '',
+                            partContentList: [{
+                                    
+                            }]
+                        }]
+                    })
+                }
+            }
         },
         // 培训后考试
         addTrainTest() {
-            vm.moduleList.partList.push({
-                type: 4,
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+            
         },
         // 摸底考试获得资格，培训再次考试
         addMatterTrain() {
-            vm.moduleList.partList.push({
-                type: 5,
-                seqNo: '',
-                name: '',
-                id: ''
-            })
-        },
-        // 删除单个考试
-        deleteTest(index) {
-            vm.moduleList.partList.splice(index,1)
-        },
-        // 删除单个课程
-        deleteCourse(index) {
-            vm.moduleList.partList.splice(index,1)
-        },
-        //摸底考试后培训
-        deleteMatter(index) {
-            vm.moduleList.partList.splice(index,1)
-        },
-        // 删除培训后考试
-        deleteTrain(index) {
-            vm.moduleList.partList.splice(index,1)
-        },
-        // 删除摸底考试获得资格，培训再次考试
-        deleteMatterTrain(index) {
-            vm.moduleList.partList.splice(index,1)
-        },
-        // 添加摸底考试后培训课程
-        addMatterCourse(index) {
-            vm.moduleList.partList[index].test.push({
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+            
         },
-        // 删除摸底考试后培训课程
-        deleteMatterCourse(index,_index) {
-            vm.moduleList.partList[index].test.splice(_index,1)
+        // 删除模板
+        deleteTemplate(index,index1) {
+            for(let i = 0; i < vm.componentList.moduleList.length; i++) {
+                if(index == i) {
+                    vm.componentList.moduleList[i].templateList.splice(index1,1)
+                }
+            }
         },
-        // 添加培训后考试课程
-        addTrainCourse(index) {
-            vm.moduleList.partList[index].test.push({
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+        // 添加多个课程
+        addMatterCourse(index,index1,index2) {
+            for(let i = 0; i < vm.componentList.moduleList.length; i++) {
+                if(index == i) {
+                    for(let j = 0; j < vm.componentList.moduleList[i].templateList.length; j++) {
+                        if(index1 == j) {
+                            for(let q = 0; q < vm.componentList.moduleList[i].templateList[j].partList.length;q++){
+                                if(index2 == q) {
+                                    vm.componentList.moduleList[i].templateList[j].partList[q].partContentList.push({
+                                        id: '',
+                                        seqNo: '',
+                                        content_1: '',
+                                        content_2: ''
+                                    })
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         },
-        // 删除培训后考试课程
-        deleteTrainCourse(index,_index) {
-            vm.moduleList.partList[index].test.splice(_index,1)
+        // 删除多个课程
+        deleteMatterCourse(index,index1,index2,index3) {
+            for(let i = 0; i < vm.componentList.moduleList.length; i++) {
+                if(index == i) {
+                    for(let j = 0; j < vm.componentList.moduleList[i].templateList.length; j++) {
+                        if(index1 == j) {
+                            for(let q = 0; q < vm.componentList.moduleList[i].templateList[j].partList.length;q++){
+                                if(index2 == q) {
+                                    vm.componentList.moduleList[i].templateList[j].partList[q].partContentList.splice(index3,1)
+                                }
+                            }
+                        }
+                    }
+                }
+            }
         },
-        // 添加摸底考试后培训,培训再次考试课程
-        addMatterTrainCourse(index) {
-            vm.moduleList.partList[index].test.push({
-                seqNo: '',
-                name: '',
-                id: ''
-            })
+        sortUp(index,index1) {
+
         },
-        // 删除摸底考试后培训课程
-        deleteMatterTrainCourse(index,_index) {
-            vm.moduleList.partList[index].test.splice(_index,1)
+        sortDown(index,index1) {
+
         },
         // 选择资源包
         selectChange() {
@@ -492,22 +491,40 @@ export default {
 }
 </script>
 <style lang="scss">
-.create-component {
+.create-component-wrap {
     .first-step {
         margin-top: 20px;
+        .el-form-item {
+            margin-bottom: 25px;
+        }
         .bg-img {
-            width: 80px;
-            height: 80px;
+            width: 84px;
+            height: 100px;
         }
         .word-num {
             font-size: 12px;
             color: #999;
             padding-top: 5px;
         }
+        .bg-uploader {
+            img {
+                float: left;
+            }
+            .limit-text {
+                float: left;
+                margin-left: 10px;
+                padding-top: 20px;
+                p {
+                    font-size: 12px;
+                    color: #999;
+                }
+            }
+        }
     }
     .step-content {
         overflow: hidden;
         height: 60px;
+        margin-top: 50px;
         border-bottom: 1px solid #efefef;
         .el-steps--simple {
             float: left;
@@ -565,14 +582,15 @@ export default {
             background: #F3F3F3;
             padding: 10px;
         }
-        .single-test-div, .single-course-div, .matter-test-div, .train-test-div, .matter-train-test-div {
+        .template-content-div {
             margin: 20px;
             border-bottom: 1px dotted #ccc;
             .title {
                 margin-bottom: 20px;
-                span{
+                span {
                     float: right;
-                    color: red;
+                    color: #666;
+                    font-size: 12px;
                 }
             }
         }