var frameUi_vueExtend = window.frameUi_vueExtend || {}; if (window.SparkMD5 == undefined) { document.write(""); } Vue.mixin({ methods: { //抽屉回调 openDrawerCallBack: function () { var _this = this; _this.drawerConfig.loading = false; }, //抽屉公共方法 openDrawer: function (config) { var _this = this; _this.drawerConfig.loading = true; this.drawerConfig.url = config.url; this.drawerConfig.show = true; this.drawerConfig.title = config.title; }, //抽屉公共方法 closeDrawer: function (refreshList) { parent.vue.drawerConfig.show = false; if (refreshList) { try { parent.vue.loadData(); } catch (err) { console.log(err); } } }, //弹出窗口 dialog: function (options) { var vue = this; var defaultParams = { title: "标题", url: "", data: {}, additionals: "", width: "100%", height: "100%", target: 'self', beforeExecute: "", shadeClose: true }; defaultParams = extend(defaultParams, options); var canExecuting = true; var beforeExecute = defaultParams.beforeExecute; try { if (typeof (beforeExecute) == "string") { if (beforeExecute != "") { canExecuting = eval(beforeExecute); } } else if (typeof (beforeExecute) == "function") { canExecuting = beforeExecute(); } } catch (err) { canExecuting = false; console.log(err) } if (canExecuting == false) { return; } frameUi_ui.dialog(defaultParams); }, ajax: function (options) { var loadingInstance = this.$loading(); var completeFun = options.complete; options.complete = function () { if (completeFun != undefined && typeof (completeFun) == "function") { completeFun(); } loadingInstance.close(); }; return ajax(options); }, submit:function (options) { var defaultParams = { type: "post", contentType: "application/x-www-form-urlencoded;charset=utf-8", url: "", data: {}, async: true, beforeExecute: "", beforeRequest: "", success: "", failTipsType: "notification", failCallback: "", showSuccessMsg: true, showFailMsg: true, confirmMsg: "", successMsg: "提交成功!", cancel: false, cancelMsg: "提交被取消" }; defaultParams = extend(defaultParams, options); var confirmMsg = defaultParams.confirmMsg; var successMsg = defaultParams.successMsg; var async = defaultParams.async; var beforeExecute = defaultParams.beforeExecute; var beforeRequest = defaultParams.beforeRequest; var successCallback = defaultParams.success; var failCallBack = defaultParams.failCallback; var ajaxUrl = defaultParams.url; var showSuccessMsg = defaultParams.showSuccessMsg; var showFailMsg = defaultParams.showFailMsg; var failTipsType = defaultParams.failTipsType; //提交返回失败后的错误提示方式,采用Notification组件或Message组件方式 var canExecuting = true; var data = defaultParams.data; var cancel = defaultParams.cancel; var vue = this; if (cancel) { vue.$notify({ title: '提示', message: defaultParams.cancelMsg, type: 'warning' }); return; } if (ajaxUrl == "") { alert("url参数未设置!") } try { if (typeof (beforeExecute) == "string") { if (beforeExecute != "") { canExecuting = eval(beforeExecute); } } else if (typeof (beforeExecute) == "function") { canExecuting = beforeExecute(); } } catch (err) { console.log(err) } if (canExecuting == false) { return; } if (confirmMsg != "") { vue.$confirm(confirmMsg, '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning', callback: function (action, instance) { switch (action) { case "confirm": request(); break; case "cancel": break; case "close": break; } } }) } else { request(); } function request() { try { if (typeof (beforeRequest) == "string") { if (beforeRequest != "") { canExecuting = eval(beforeRequest); } } else if (typeof (beforeRequest) == "function") { canExecuting = beforeRequest(); } } catch (err) { console.log(err) } if (canExecuting == false) { return; } var callBack = function (data) { try { if (typeof (successCallback) == "string") { if (successCallback != "") { eval(successCallback); } } else if (typeof (successCallback) == "function") { successCallback.call(vue, data); } } catch (err) { console.log(err) } } var notifyCallBack = function (data) { if (typeof (data) != "object") { data = jsonParse(data); } if (data.State == 1) { var delayCallBack = 600; if (showSuccessMsg) { if (successMsg != "") { successMsg = successMsg; } else if (data.Msg != "") { successMsg = data.Msg; } vue.$notify({ title: '成功', message: successMsg, type: 'success', position: 'top-right' }); setTimeout(function () { callBack(data); }, delayCallBack); } else { callBack(data); } } else { if (data.Msg != "" && showFailMsg) { if (failTipsType == "notification") { vue.$notify({ title: '提示', message: data.Msg, type: 'error', position: 'top-left' }); } else { vue.$message.error(data.Msg); } } try { if (typeof (failCallBack) == "string") { if (failCallBack != "") { eval(failCallBack); } } else if (typeof (failCallBack) == "function") { failCallBack(data); } } catch (err) { console.log(err) } } } var error = function () { vue.$message.error("ajax http请求错误,请联系管理员处理!") } var ajaxOptions = { type: defaultParams.type, contentType: defaultParams.contentType, url: ajaxUrl, data: data, async: async, error: error, success: function (data) { notifyCallBack(data); } } vue.ajax(ajaxOptions); } }, } }) //列表页外部的常用全局方法 var dataListExternal = { methods: { //对集合进行排序,支持多级数据集 updateXuhao: function (options) { var defaultParams = { type: "", url: "", row: {}, dataList: [], keyField: "Id", sortField: "Xuhao", parentIdField: "ParentId", childrenField: "Children" }; defaultParams = extend(defaultParams, options); var vue = this; var type = defaultParams.type; var url = defaultParams.url; var row = defaultParams.row; var dataList = defaultParams.dataList; //console.log(dataList) var sortField = defaultParams.sortField; var childrenField = defaultParams.childrenField; var keyField = defaultParams.keyField; var parentIdField = defaultParams.parentIdField; var id = row[keyField]; var parentId = row[parentIdField];//获取当前行的父级id var prevIndex = 0; var nextIndex = 0; var currentIndex = 0; var newDataList = []; //构造一个新的数组,用于传输到后台,默认的数据属性太多没有必要都传递到后台去 //列表序号对调 var startSort = function (dataList) { newDataList = []; //1、先整理顺序 dataList.forEach(function (item, index) { var i = index + 1; var currentParentId = item[parentIdField]; if (currentParentId == parentId)//同一级的数据才进行处理 { item[sortField] = i; if (item[keyField] == id) { prevIndex = i - 1; currentIndex = i; nextIndex = i + 1; } } }); //2、再进行顺序对调 dataList.forEach(function (item, index) { var i = index + 1; var currentParentId = item[parentIdField]; if (currentParentId == parentId)//同一级的数据才进行处理 { switch (type) { case "-": case "up": case -1: if (prevIndex == i) { item[sortField] = i + 1; } if (currentIndex == i && i > 1) { item[sortField] = i - 1; } break; case "+": case "down": case 1: if (currentIndex == i && i < dataList.length) { item[sortField] = i + 1; } if (nextIndex == i) { item[sortField] = i - 1; } break; } //重构减少http传输 var newRow = {} newRow[keyField] = item[keyField]; newRow[sortField] = item[sortField] newDataList.push(newRow); index++; } }); } //对列表进行顺序排序 var reSort = function (dataList, sortField, nodeField) { if (sortField == undefined) { sortField = "Xuhao"; //默认序号字段 } if (nodeField == undefined) { nodeField = "Children"; //默认节点字段 } dataList.sort(function (a, b) { return a[sortField] - b[sortField] });//1级排序 //树形数据继续对数据进行递归排序 dataList.some(function (item) { if (parentId == item[parentIdField]) { //第一级或默认只有一级的情况 newDataList = dataList; //新的数组,提交到服务器进行更新的数据 return true; } else //第一级找不到继续往下找 { var childrenList = item[nodeField]; if (Array.isArray(childrenList)) { reSort(childrenList, sortField, nodeField); //递归排序 } } }); }; if (type != "0" && type != "") { reSort(dataList, sortField, childrenField); startSort(newDataList); } reSort(dataList, sortField, childrenField); //console.log(dataList) vue.submit({ url: url, data: { data: JSON.stringify(newDataList) }, showSuccessMsg: false }) }, //获取选中列表的属性值,不填写属性默认读取Id getSelectedPropertys: function (selectedItem, prop) { if (!Array.isArray(selectedItem)) { throw "getSelectedPropertys的第2个参数必须是数组" } if (prop == undefined) { prop = "Id"; } var props = []; selectedItem.map(function (item, index, ary) { if (item[prop] != undefined) { props.push(item[prop]); } }) return props.join(); }, //回调方法,设置列表页选中项目的属性 setSelectedItem: function (dataList, selectedItems, setProperty, setValue) { var vue = this; var selectedItem = []; if (!Array.isArray(deleteItems)) { selectedItem.push(deleteItems); } else { selectedItem = deleteItems; } var selectedIds = []; selectedItems.forEach(function (item) { selectedIds.push(item[key]); }); dataList.forEach(function (item, index) { if (selectedIds.indexOf(item[key]) >= 0) { item[setProperty] = setValue; } else { vue.$set(item, setProperty, setValue); } }); }, //删除列表项目的方法 deleteItem: function (dataList, deleteItems, key) { if (key == undefined) { key = "Id"; } var vue = this; var selectedItem = []; if (!Array.isArray(deleteItems)) { selectedItem.push(deleteItems); } else { selectedItem = deleteItems; } var selectedIds = []; selectedItem.forEach(function (item) { selectedIds.push(item[key]); }); dataList.forEach(function (item, index) { if (selectedIds.indexOf(item[key]) >= 0) { dataList.splice(index, 1); } if (item.Children != undefined) { vue.deleteItem(item.Children, deleteItems); } }); }, //设置前的检测选中项目 checkSelectedItems: function (selectedItem) { if (selectedItem.length == 0) { vue.$message.error("请选择要操作的项!") return false; } return true; } } }; Vue.mixin(dataListExternal); //百度编辑器 Vue.component("ui-editor", { props: { value: { default: "" }, maxLength: { type: Number, default: 0 }, action: { type: String, default: "/E/EditorUploadApi/", required: false }, toolbars: { type: String, default: "normal", required: false }, height: { type: Number, default: 300 }, config: { type: Object, default: function () { return {} }, required: false }, data: { type: Object, default: function () { return { guid:"",watermark:-1,maxImageWidth:0,fieldName:"", tableName:"", fieldName:""} }, required: true }, }, data: function () { return { instanceId: "ueditorObject", content: this.value, ueditor: {}, } }, methods: { reset: function () { //编辑器重置为可视化模式,源码模式下修改无法获取到修改的内容 if (this.ueditor.queryCommandState('source') != 0) { this.ueditor.execCommand('source'); vue.content = ueditor.getContent(); vue.$emit("input", vue.content); } } }, created: function () { if (window["ueditorInstanceNums"] == undefined) { window["ueditorInstanceNums"] = 1; } else { window["ueditorInstanceNums"] = window["ueditorInstanceNums"] + 1; } this.instanceId = "ueditorObject" + window["ueditorInstanceNums"]; }, mounted: function () { var vue = this; var defaultConfig = { autoHeightEnabled: false, serverUrl: vue.action, initialFrameWidth: null, initialFrameHeight: vue.height, //初始化编辑器高度,默认320 toolbars: _UeditorZdyConfig[vue.toolbars] }; var config = extend(vue.config, defaultConfig); vue.ueditor = UE.getEditor(vue.instanceId, config); var ueditor = vue.ueditor; ueditor.ready(function () { ueditor.execCommand("serverparam", vue.data); ueditor.addListener('blur', function () { vue.content = ueditor.getContent(); var currentLength = vue.content.strLength(); if (vue.maxLength > 0 && currentLength > vue.maxLength) { vue.content = vue.content.left(vue.maxLength); ueditor.setContent(vue.content); } vue.$emit("input", vue.content); }); }); }, template: '' }); //Id转文本组件 Vue.component("el-input-convert", { props: { convertUrl: { type: String, default: "", required: false }, value: {//v-mode传递进来,内部不需要需用 type: Number | undefined, default: 0, required: false }, clearable: { type: Boolean, default: false, required: false }, }, data: function () { return { name: "", } }, methods: { getName: function () { var vue = this; var data = this.serverData; var defaultOptions = { async: true, type: "get", url: this.convertUrl, data: data, cache: true }; defaultOptions = extend(defaultOptions, this.config); defaultOptions.success = function (data) { if (data.Name != null && data.Name != undefined) { vue.name = data.Name; } }; if (defaultOptions.url == "") { return; } vue.ajax(defaultOptions); }, clearName: function () { var vue = this; vue.name = ""; vue.$emit('input', 0) } }, watch: { convertUrl: { handler: function (newName, oldName) { if (newName != oldName) { this.getName(); } }, immediate: true, deep: true }, }, template: '' }); //ui-page-panel Vue.component("ui-page-panel", { props: { value: { type: Object, default: function () { return {} }, required: false }, }, data: function () { return { pageInfo: this.value } }, watch: { value: function (newValue, oldValue) { this.pageInfo = newValue; } }, methods: { goPage: function (page) { if (page != undefined) { this.pageInfo.CurrentPage = page; } this.$emit("input", this.pageInfo); this.$emit("change"); }, changePageSize: function () { this.pageInfo.CurrentPage = 1; this.$emit("input", this.pageInfo); this.$emit("change"); }, }, computed: { pageItem: function () { var pageItem = []; var pageInfo = this.pageInfo; var currentPage = pageInfo.CurrentPage; var recordCount = pageInfo.RecordCount; if (recordCount == 0) { return [{ value: 1, text: "第1页" }]; } var pageSize = pageInfo.PageSize; var pageCount = 1; if (recordCount % pageSize > 0) { pageCount = Math.floor(recordCount / pageSize) + 1; } else { pageCount = recordCount / pageSize; } if (currentPage > pageCount) { currentPage = pageCount; } pageInfo.PageCount = pageCount; var startpage = currentPage - 10; if (startpage < 1) { startpage = 1; } var endpage = currentPage + 10; if (endpage >= pageCount) { endpage = pageCount; } for (var i = startpage; i <= endpage; i++) { pageItem.push({ value: i, text: "第" + i + "页" }); } if (startpage > 1) { if (startpage > 2) { pageItem.unshift({ value: startpage - 1, text: "..." }); } pageItem.unshift({ value: 1, text: "新澳门电子网络游戏中心" }); } if (endpage < pageCount) { if (endpage < pageCount - 1) { pageItem.push({ value: endpage + 1, text: "..." }); } pageItem.push({ value: pageCount, text: "尾页" }); } return pageItem; } , pageSizeItem: function () { var pageItem = [10, 15, 20, 30, 40, 50, 100]; var pageSize = this.pageInfo.PageSize; if (pageItem.indexOf(pageSize) < 0) { pageItem.push(pageSize); } return pageItem.sort(function (a, b) { return a - b }); } }, template: '\
\
\ 共{{pageInfo.RecordCount}}条\ 上一页下一页\ \ \ \ \ \ \
\
' }); //ui-verificationCode验证码组件 Vue.component("ui-verification-code-image", { props: { src: { default: null }, }, data: function () { return { random: "", autoMinutes: 10,//自动刷新分钟数 timer: null } }, created: function () { this.autoRefresh(); }, methods: { change: function () { var _this = this; var r = Math.floor(Math.random() * 100000000); var imgSrc = this.src; if (imgSrc.indexOf("?") < 0) { r = "?" + r; } r = "&" + r; this.random = r; _this.autoRefresh(); }, autoRefresh: function () //定时刷新 { var _this = this; if (_this.timer != null) { clearTimeout(_this.timer); } _this.timer = setTimeout(function () { _this.change() }, (this.autoMinutes) * 60 * 1000); } }, template: '' }); //上传文件共有属性方法 var _uploadMixinsData_ = { data: function () { return { dialogImageUrl: '', dialogVisible: false, elementUiFileList: [], hideUpload: false, acceptExt: [".jpg", ".jpeg", ".png", ".gif"], uploadBtnState: false, multiple: false, watchFileList: true, //从内到外改变时设置为false,避免死循环 watchValue: true, //从内到外改变v-model时设置为false,避免死循环 } }, props: { data: { type: Object, default: function () { return { fileType: "image" } }, required: false, loadingInstance: null }, btnTxt: { type: String, default: "点击上传" //可选择array或string }, disabled: { type: Boolean, default: false, required: false }, returnType: { type: String, default: "array" //可选择array或string }, value: {//v-mode传递进来,内部不需要 type: Array | String | undefined, default: function () { return [] }, required: false }, action: {//----------接口地址 type: String, default: '#' }, accept: { type: Array | String, default: [".jpg", ".jpeg", ".png", ".gif"], required: false }, limit: { //-------限制个数 type: Number, default: 5 }, disabled: { //------是否禁止 type: Boolean, default: false }, maxSize: {//------------最大尺寸限制,0则不限制,单位kb type: Number, default: 1 }, fileList: { //-------------数据源(数据绑定时实现双向绑定:file-list.sync) type: Array, default: function () { return []; } }, drag: { //-----------是否启动拖拽 type: Boolean, default: true } }, methods: { formatFileList: function (fileList, modelValue) {//格式化FileList,以适应ui-element的规则 var newFileList = []; if (Array.isArray(fileList)) { fileList.forEach(function (item) { newFileList.push({ name: item.name || item.Name, url: item.url || item.Thumbnail || item.Path,path: item.Path }); }); } if (newFileList.length == 0 && !isNullOrEmpty(modelValue)) { var valueAray = []; if (Array.isArray(modelValue)) { valueAray = modelValue; } else { valueAray = modelValue.split(","); } valueAray.forEach(function (fileItem) { if (!isNullOrEmpty(fileItem)) { var fileName = fileItem.split("/")[fileItem.split("/").length - 1]; newFileList.push({ name: fileName, url: fileItem, path: fileItem }); } }); } //console.log(newFileList) return newFileList; }, columnDrop: function () { // 左右拖动 var _this = this; var sortBox = _this.$refs.upload.querySelector('.el-upload-list'); if (sortBox != null && typeof (Sortable) != "undefined") { Sortable.create(sortBox, { handle: "", onEnd: function (evt) { var newIndex = evt.newIndex; if (newIndex == undefined) { newIndex = 0; } var oldIndex = evt.oldIndex; var currRow = _this.elementUiFileList.splice(oldIndex, 1)[0]; _this.elementUiFileList.splice(newIndex, 0, currRow) // 调整顺序 _this.updateImgSrc(_this.elementUiFileList); } }) } }, getFileList: function () { return this.elementUiFileList; }, getImgSrc: function (file) { var imageUrl = file.localUrl; //优先使用本地blob文件,ftp异步上传时候http图片不能实时返回 if (isNullOrEmpty(imageUrl)) { imageUrl = file.url } return imageUrl; }, //更新父级v-model updateImgSrc: function (fileLists) { var _this = this; var newdata = fileLists.map(function (item) { return item.url; }) if (this.returnType == "string") { newdata = newdata.join(","); } this.watchFileList = false; this.watchValue = false; this.$emit('input', newdata); }, //下载文件。 downFile: function (file) { //console.log(file) console.log(file); var url = file.path || file.url; var fileName = file.name; if (isImage(url)) { //图片直接打开 window.open(url, "_blank"); } else {//其他格式直接下载 window.open("/e/download?file=" + urlEncode(url) + "&name=" + urlEncode(fileName), "_blank"); } }, handleRemove: function (file) { //-----------删除 var _this = this _this.elementUiFileList.forEach(function (item, index) { if (item.uid == file.uid) { _this.elementUiFileList.splice(index, 1) } }) this.showUploadBthHandel(); this.updateImgSrc(_this.elementUiFileList); }, handlePictureCardPreview: function (file) {//----------预览 //console.log("handlePictureCardPreview", file) var imageUrl = file.localUrl; //本地bob文件 if (isNullOrEmpty(imageUrl)) { imageUrl = file.path || file.url; } this.dialogImageUrl = imageUrl; this.dialogVisible = true; }, onImageError: function (err, file, fileList) {//-------上传失败,http服务器错误 //console.log("onImageError") this.elementUiFileList = fileList; try { this.$store.getters.chunkedUploadXhr.forEach(function (item) { item.abort(); }); } catch (err) { } if (err) { this.$message.error(err); } }, onRequestOver: function (response, file, fileList) { //--------http请求结束后的回调 //console.log("onRequestOver----------", response, file, fileList) this.showUploadBthHandel(); this.elementUiFileList = fileList; if (!response.State) //response.State==0时表示已被服务器端终止上传并返回提示 { this.handleRemove(file); this.$message.error(response.Msg); } else { //ftp异步上传时url还没有上传成功,导致图片打不开 file.localUrl = file.url; //格式:blob:http://localhost:8800/78e7c95e-2fa8-4759-bb5b-78724b6f9f74 file.url = response.Thumbnail || response.Url; file.path = response.Url; } }, handleUploadRequest: function (uploadFile) {//自定义上传。 if (!uploadFile.file.allowUpload) { return; } //console.log("handleUploadRequest", uploadFile.file.allowUpload, uploadFile) var _this = this; var uploadTaskList = _this.$uploadTaskList; if (uploadTaskList == undefined) { _this.$uploadTaskList = []; uploadTaskList = _this.$uploadTaskList; } uploadFile.onProgress({ percent: 0 });//设置初始进度 if (uploadTaskList.length == 0) { uploadTaskList.push(uploadFile); _this.loadingInstance = _this.$loading(); startUpload(uploadFile,_this); } else { uploadTaskList.push(uploadFile); //只加入任务队列,否则会导致多个文件同时上传导致未知的ajax冲突。 return; } function startUpload(uploadFile,_this) { //_this.elementUiFileList.push(uploadFile.file);//不能先添加,否则进度条不显示 var action = _this.action; _this.uploadByPieces({ uploadFile: uploadFile, pieceSize: 2,//分片大小,单位mb chunkUrl: action, fileUrl: action, progress: function (num, response) { uploadFile.onProgress({ percent: num }); if (num == 100) { uploadFile.onSuccess(response)//显示完成按钮小图标,会触发on-success对应的函数 //继续下一个任务 uploadTaskList.splice(0,1); if (uploadTaskList.length > 0) { startUpload(uploadTaskList[0], _this); } else { _this.loadingInstance.close(); } } }, success: function (data) { //alert(_this.uploadTaskList.length) //_this.elementUiFileList.push(uploadFile.file);//onSuccess后自动添加了 }, error: function (response) { _this.loadingInstance.close(); uploadTaskList.forEach(function (item, index) { var error = response.Msg; if (index > 0) { error = ""; } item.onError(error); }); uploadTaskList.splice(0, uploadTaskList.length); } }) } }, uploadByPieces: function (_ref) {//分片上传 var _this = this; var uploadingFile = _ref.uploadFile, chunkUrl = _ref.chunkUrl, fileUrl = _ref.fileUrl, pieceSize = _ref.pieceSize, progress = _ref.progress, success = _ref.success, error = _ref.error; if (!uploadingFile) return; // 上传过程中用到的变量 var progressNum = 1; // 进度 var hasError = 0;//是否有报错 var successAllCount = 0; // 上传成功的片数 // let currentAllChunk = 0 // 当前上传的片数索引 var AllChunk = 1; // 所有文件的chunk数之和 // 获取md5 var readFileMD5 = function (uploadFile) { var fileRederInstance = new FileReader(); //var blob = uploadFile.file.slice(0, uploadFile.file.length); fileRederInstance.readAsArrayBuffer(uploadFile.file); fileRederInstance.addEventListener("load", function (e) { readChunkMD5(uploadFile); }, false); function loadNext() { var start = currentChunk * chunkSize, end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; fileReader.readAsArrayBuffer(blobSlice.call(file, start, end)); } }; var getChunkInfo = function getChunkInfo(file, currentChunk, chunkSize) { var start = currentChunk * chunkSize; var end = Math.min(file.size, start + chunkSize); var chunk = file.slice(start, end); return { start: start, end: end, chunk: chunk }; }; // 针对每个文件进行chunk处理 var readChunkMD5 = function (currentFile) { var chunks = []; var chunksMd5 = []; var file = currentFile.file; var blobSlice = File.prototype.slice || File.prototype.mozSlice || File.prototype.webkitSlice;// chunkIdx = 0, spark = new SparkMD5.ArrayBuffer(), chunkSize = pieceSize * 1024 * 1024, // 单位字节 chunkCount = Math.ceil(file.size / chunkSize); // 总片数 fileReader = new FileReader(); AllChunk = chunkCount; fileReader.onload = function (e) { spark.append(e.target.result); chunksMd5.push(SparkMD5.ArrayBuffer.hash(e.target.result)); chunkIdx++; if (chunkIdx < chunkCount) { loadNext(); } else { //获取md5后,触发分片上传。 var md5 = spark.end(); currentFile.file.md5=md5; startUpload(0); } }; function loadNext() { var start = chunkIdx * chunkSize, end = ((start + chunkSize) >= file.size) ? file.size : start + chunkSize; var currentChunk = blobSlice.call(file, start, end); chunks.push(currentChunk); fileReader.readAsArrayBuffer(currentChunk); } loadNext(); function startUpload(i) { try { var currentChunk = chunks[i]; var chunkMD5 = chunksMd5[i]; uploadChunk( currentFile, { chunkMD5: chunkMD5, chunk: currentChunk, currentChunk: i, chunkCount: chunkCount }, function () { var nextIdx = i + 1; if (nextIdx <= AllChunk - 1) { startUpload(nextIdx); } } ); } catch (err) { error && error({ State: 0, Msg:err.description }); } } }; // 更新进度 var progressFun = function progressFun(response) { progressNum = Math.ceil(successAllCount / AllChunk * 100); progress(progressNum, response); }; // 分片上传完毕后再请求api进行合并。 var uploadFile = function (currentFile, chucksCount) { var data = _this.data; data.fileMd5 = currentFile.file.md5; data.fileName = currentFile.file.name; data.isMerge = "true"; data.chunksCount = chucksCount; ajax({ type: "post", url: fileUrl + "?merge=1", data: data, error: function (xhr) { error && error({ State: 0, Msg: "http error" }); }, success: function (res) { if (res.State == 1) { progressFun(res); success && success(res); } else { error && error(res); } } }); }; var uploadChunk = function (currentFile,chunkInfo,nextCallBack) { var fetchForm = new FormData(); fetchForm.append("fileName", currentFile.file.name); fetchForm.append("data", chunkInfo.chunk); fetchForm.append("fileMd5", currentFile.file.md5); fetchForm.append("chunksCount", chunkInfo.chunkCount); fetchForm.append("chunkIdx", chunkInfo.currentChunk); fetchForm.append("chunkMd5", chunkInfo.chunkMD5); for (var key in _this.data) { fetchForm.append(key, _this.data[key]); } ajax({ type: 'post', url: chunkUrl, data: fetchForm, processData: false, contentType: false, // 注意这里应设为false error: function (xhr) { error && error({ State: 0, Msg: "http error" }); }, success: function (responseData) { var tipsInfo = responseData; if (tipsInfo.State == 1) { progressFun(responseData); successAllCount++; // 当分片上传完毕后 if (successAllCount >= chunkInfo.chunkCount) { if (chunkInfo.chunkCount == 1) {//分片只有一片时不要请求合并api,后端已经处理 progressFun(responseData); return; } else { uploadFile(currentFile, successAllCount); } } else { nextCallBack && nextCallBack(); } } else { //tipsInfo.State ==0 if (hasError == 0) { hasError = 1; } error && error(responseData); } } }); }; readFileMD5(uploadingFile); // 开始执行代码 }, onChangeImageUpload: function (file, FileList) { //-----------上传成功/失败,正在上传 //console.log("onChangeImageUpload", file.status); this.showUploadBthHandel(); this.updateImgSrc(FileList); }, onLimItExceed: function (file, FileList) { //-----------超出上传个数 this.$message.error("最多只能上传" + this.limit + "个文件,请删除后再上传!"); }, beforeUpload: function (file) { //--------上传之前校验 //console.log("beforeUpload",file) var _this = this; file.allowUpload = false; if (file.size == 0) { _this.$message.error("对不起,零字节文件不能上传!"); return false; } if (!_this.validateSize(file) && _this.maxSize > 0) { var msg = "文件大小不能超过" + (_this.maxSize / 1024).toFixed(2) + "MB!" if (_this.maxSize < 1024) { msg = "文件大小不能超过" + _this.maxSize + "KB!"; } _this.$message.error(msg); return false; } if (!_this.validateExt(file)) { _this.$message.error("只能上传" + _this.acceptExt.join(",") + "格式文件!"); return false; } file.allowUpload = true; return true; }, validateSize: function (file, resolve, reject) { //---验证大小 var isSizeM = file.size / 1024 < this.maxSize; return isSizeM ? true : false }, validateExt: function (file, resolve, reject) { //---验证格式 var fileName = file.name; var indexStart = fileName.lastIndexOf("."); var indexEnd = fileName.length; var fileExt = fileName.substring(indexStart, indexEnd);//后缀名 var arrayAccept = this.accept; if (arrayAccept == "*") { return true; } if (!Array.isArray(arrayAccept)) { arrayAccept = arrayAccept.split(","); this.acceptExt = arrayAccept; } return arrayAccept.indexOf(fileExt.toLowerCase()) >= 0; }, uploadOnProgress: function (event, file, fileList) { this.progress = event.percent; //调用默认的进度条percentage }, showUploadBthHandel: function () { //上传按钮显示和隐藏控制 this.hideUpload = this.elementUiFileList.length >= this.limit && this.limit > 0; //console.log(this.elementUiFileList) //console.log(this.limit) if (this.hideUpload) { this.uploadBtnState = true; } else { this.uploadBtnState = false; } } }, created: function () { if (this.limit > 1 || this.limit === 0) { this.multiple = true; } }, mounted: function () { if (this.limit > 1 || this.limit === 0) { this.columnDrop(); } }, watch: { fileList: { handler: function (newVal, oldVal) { if (this.watchFileList) { if (!equals(newVal, oldVal)) { //二次判断,避免组件之间互相影响 this.elementUiFileList = this.formatFileList(newVal, this.value); this.showUploadBthHandel(); this.updateImgSrc(this.elementUiFileList); } } else { this.watchFileList = true; } }, immediate: true } , value: { handler: function (newVal, oldVal) { if (this.watchValue) { if (!equals(newVal, oldVal)) {//二次判断,避免组件之间互相影响 this.elementUiFileList = this.formatFileList(this.fileList, newVal); this.showUploadBthHandel(); } } else { this.watchValue = true; } }, immediate: true } } } //带缩约图显示 Vue.component('ui-picture-upload', { template: "
" + "
" + "" + "
" + "
" + "
" + "
" + "
" + "
" + "
", mixins: [_uploadMixinsData_], }) //不带缩约图 Vue.component('ui-file-upload', { template: "
" + "{{btnTxt}}" + "
", mixins: [_uploadMixinsData_], }) //tag标签 Vue.component('ui-tag', { template: "{{item}}" + "" + "{{buttonText}}", data: function () { return { inputVisible: false, inputValue: '', dataList: [], } }, props: { value: { //-----------数据源 type: Array | String, default: [] }, closable: { //-------是否有关闭 type: Boolean, default: true }, type: { //------------类型success/info/warning/danger type: String, default: '' }, disableTransitions: { //------是否关闭动画 type: Boolean, default: false }, hit: { //-----------是否有边框描边 type: Boolean, default: false }, color: {//----------------背景色 type: String, default: '' }, size: { //------------尺寸medium / small / mini type: String, default: '' }, effect: {//-----------主题dark / light / plain type: String, default: 'light' }, buttonText: { //------------按钮文本 type: String, default: '+添加' }, returnType: { type: String | Array, default: '' } }, created: function () { this.handleInit(this.value); }, methods: { handleInit: function (model) { //如果数据源不是数组则转换为数组 var _this = this; var midList; if (model == undefined || model == null || model == "") { midList = []; } else if (!Array.isArray(model)) { midList = model.split(',') } else { midList = model; } this.dataList.splice(0, this.dataList.length); for (var i = 0; i < midList.length; i++) { var item = midList[i]; if (!isNullOrEmpty(item)) { _this.dataList.push(item); } } }, handleUpdate: function (model) { //当v-model更改后,通过此方法更新 this.handleInit(model); this.returnTypeFlag(this.dataList); }, handleClose: function (val) { this.dataList.splice(this.dataList.indexOf(val), 1); this.returnTypeFlag(this.dataList) }, handleClick: function (val) { }, returnTypeFlag: function (dataList) { //如果传递的v-model是数组,则返回数组,反之则返回逗号隔开的字符串 if (Array.isArray(this.value)) { this.$emit('input', dataList) } else { this.$emit('input', dataList.join(",")) } }, handleInputConfirm: function () { var inputValue = this.inputValue; if (inputValue) { this.dataList.push(inputValue); } this.inputVisible = false; this.inputValue = ''; this.returnTypeFlag(this.dataList) }, showInput: function () { this.inputVisible = true; //dom节点渲染完毕后执行 this.$nextTick(function () { this.$refs.saveTagInput.$refs.input.focus(); }); } } }) //级联共有属性 var _cascaderMinix_ = { data: function () { return { timer: null, key: 0, optionsMiddleList: this.options, //optionsList的中间桥梁数据 selectedMiddleModel: this.value,//selectedModel的中间桥梁数据,频繁给selectedModel赋值会频繁触发watch出现未知错误。 optionsList: this.options, selectedModel: this.value, canUpdate: true,//是否触发更新 watchValue: true, watchOptions: true, cascaderKey: 0, cascaderProps: this.props,//传递给el-cascader的props } }, props: { options: { //----------数据源 type: Array, default: function () { return []; } }, optionsUrl: { //----------数据源请求地址,options和optionsUrl只能定义一个 type: String, default: "" }, clearable: { //--------------输入框可清空 type: Boolean, default: true }, props: { type: Object, default: function () { return { expandTrigger: 'hover', multiple: false, label: 'label', value: 'value', remark: "", children: "children" } } }, value: { //----------默认选中值 type: String | Number, default: '' }, placeholder: { //-----提示 type: String, default: '请选择' }, disabled: { //------是否禁用 type: Boolean, default: false }, size: { type: String, default: '' }, collapseTags: { //------多选情况下是否折叠 type: Boolean, default: false } }, methods: { init: function () { var _this = this; _this.key = new Date().getTime(); _this.formatOptions(); _this.formatValue();//对数据进行转换 _this.loadOptions(_this.selectedModel, _this.optionsUrl); _this.cascaderProps = deepCopy(_this.props);//深复制 _this.cascaderProps.label = "label"; _this.cascaderProps.value = "value"; _this.cascaderProps.children = "children"; }, formatOptions: function () {//格式化optionsList属性 var _this = this; var props = _this.props; props = extend({ label: "label", value: "value", remark: "", children: "children" }, props); var lableField = props.label; //label字段 var valueField = props.value; //value字段 var remarkField = props.remark; //remark字段 var optionsList = _this.optionsMiddleList; if (isNullOrEmpty(optionsList)) { optionsList = []; } if (!Array.isArray(optionsList)) { optionsList = [optionsList]; } //对options数据进行格式化 optionsList.remove(function (item) { return isNullOrEmpty(item) }); //移除空项目 optionsList.forEach(function (optionsItem, idx) { if (typeof (optionsItem) == "string") //options是字符数组 { optionsList[idx] = { label: optionsItem, value: optionsItem }; } else { if (!optionsItem.hasOwnProperty("label") && !isNullOrEmpty(lableField)) { if (optionsItem.hasOwnProperty(lableField)) { optionsItem["label"] = optionsItem[lableField]; } else { optionsItem["label"] = "props属性中未定义label属性"; } } if (!optionsItem.hasOwnProperty("value") && !isNullOrEmpty(valueField)) { if (optionsItem.hasOwnProperty(valueField)) { optionsItem["value"] = optionsItem[valueField]; } else { optionsItem["value"] = 0; } } if (!optionsItem.hasOwnProperty("remark") && !isNullOrEmpty(remarkField)) { optionsItem["remark"] = optionsItem[remarkField]; } } }); _this.optionsList = optionsList; }, formatValue: function () {//格式化v-model对应的value,以符合emement-ui的格式 var _this = this; var selectedModel = _this.selectedMiddleModel; var optionsNew = deepCopy(_this.optionsList); //定义递归查找函数 function findValueFormOptions(options, value, emptyArray, selectedValueArrayNew, currentLevel) { var findedSuccess = false; for (var i = 0; i < options.length; i++) { var item = options[i]; var parentValue = item.parentValue; var itemValue = item.value; if (parentValue == 0) {//重新从第一级开始找,清空arrayName。 emptyArray = []; currentLevel = 0; } if (i == 0) {//循环的第一个 emptyArray.push(itemValue) } else { emptyArray.splice(currentLevel, emptyArray.length - currentLevel, itemValue); //从当前级别重新添加 } var children = item.children; if (itemValue.toString() == value.toString()) { selectedValueArrayNew.push(emptyArray);//复制避免互相影响 findedSuccess = true; return true; //找到了返回,不需要再次循环查找 } else if (Array.isArray(children)) { var theLevel = currentLevel + 1; findedSuccess = findValueFormOptions(children, value, emptyArray, selectedValueArrayNew, theLevel); if (findedSuccess) { return true; } } } return findedSuccess; } //开发对数据进行转换 var selectedValueArray = []; if (Array.isArray(selectedModel)) { selectedValueArray = selectedModel; } else if (typeof (selectedModel) == "string") { selectedValueArray = selectedModel.split(","); } else if (typeof (selectedModel) == "number") { selectedValueArray.push(selectedModel); } var selectedValueArrayNew = [];//转换为适合element-ui的格式 selectedValueArray.forEach(function (item, index) { findValueFormOptions(optionsNew, item, [], selectedValueArrayNew, 0); }); if (_this.props.multiple) { _this.selectedModel = deepCopy(selectedValueArrayNew); } else { if (selectedValueArrayNew.length > 0) { _this.selectedModel = selectedValueArrayNew[0]; } else { _this.selectedModel = ""; } } }, updateModelValue: function (val) { //更新父级v-mode对应的value var data = val var selectedval; if (this.props.multiple) { if (Array.isArray(this.value)) { selectedval = []; val.forEach(function (item, inx) { selectedval.push(item[item.length - 1]); }); } else { selectedval = '' val.forEach(function (item, inx) { item.forEach(function (itemval, index) { if (inx == val.length - 1) { if (index == item.length - 1) { selectedval += itemval return } } else { if (inx != val.length - 1) { if (index == item.length - 1) { selectedval += itemval + ',' return } } else { if (index == item.length - 1) { selectedval += itemval return } } } }) }) } } else { if (val.length == 0) { selectedval = '' } else { selectedval = val[val.length - 1] } } this.$emit('input', selectedval); this.$emit('change', selectedval); this.watchValue = false; this.watchOptions = false; }, loadOptions: function (selectedValue, optionsUrl) { //ajax 根据OptionsUrl地址获取选项数据 var _this = this; var value = selectedValue; if (isNullOrEmpty(value)) { value = ""; } else if (Array.isArray(value)) { value = value.join(","); } if (!isNullOrEmpty(optionsUrl)) { var props = extend({ value: value, label: "label", value: "value", remark: "" }, _this.props); _this.ajax({ url: optionsUrl, data: { value: value, valueField: props.value, labelField: props.label }, success: function (responseData) { if (isNullOrEmpty(responseData)) { responseData = []; } _this.optionsMiddleList = responseData; _this.formatOptions();//格式化选项 _this.formatValue();//格式化数据 } }); } }, }, watch: { options: {//监听options属性 handler: function (newVal, oldVal) { //console.log("options-----改变") var _this = this; if (!equals(newVal, oldVal)) { //判断,避免object数据被父级组件变动影响 _this.optionsMiddleList = newVal; if (isNullOrEmpty(_this.optionsMiddleList)) { _this.optionsMiddleList = []; } if (_this.timer != null) { clearTimeout(_this.timer); } _this.timer = setTimeout(function () { _this.init(); }, 100);//延迟执行,避免两个属性同时改变触发连多次 } }, immediate: true, }, value: { //监听value属性 handler: function (newVal, oldVal) { //console.log("value-----改变") var _this = this; if (!_this.watchValue) {//从内部触发的不监听,避免死循环 _this.watchValue = true; return; } if (!equals(newVal, oldVal)) { _this.selectedMiddleModel = newVal; if (isNullOrEmpty(_this.selectedMiddleModel)) { _this.selectedMiddleModel = []; } if (_this.timer != null) { clearTimeout(_this.timer); } _this.timer = setTimeout(function () { _this.init(); }, 100); //延迟执行,避免两个属性同时改变触发连多次 } }, immediate: true, }, }, } // 级联多选单选 Vue.component('ui-cascader', { template: "", mixins: [_cascaderMinix_] }) // 级联面板多选单选 Vue.component('ui-cascader-panel', { template: "", mixins: [_cascaderMinix_] }) //下拉菜单,单选,多选共用 //-----公用属性方法 var _selectCheckbox_ = { props: { multiple: { //-----------true多选false单选 type: Boolean, default: false }, clearable: { //--------------选择器清空,仅适用于单选 type: Boolean, default: true }, filterable: { // type: Boolean, default: false }, options: { //选项,后期需要进行转换optionsList type: Array | Object, default: function () { return []; } }, optionsUrl: { // 获取options的地址。 type: String, default: "" }, size: { type: String, default: '' }, value: { //------------默认选中 type: String | Array | Number, default: function () { return [] } }, disabled: { //------------是否禁用 type: Boolean, default: false }, multipleLimit: { //------------用户最多选择的个数,默认为0不限制 type: Number, default: 0 }, placeholder: { //----------------提示语句 type: String, default: '请选择' }, props: { //属性配置 type: Object, default: function () { return { label: 'label', value: 'value', remark: "", children: "children", checkStrictly: false } } }, multiline: false, //v-model的值是否是采用换行分割。 data: { type: Object, default: function () { return {} } }, }, data: function () { return { key: 0, //prop options或value改变时同步修改key,重新渲染html timer: null,//延迟定时器 isMultple: this.multiple, optionsMiddleList: [], //optionsList的中间桥梁 selectedMiddleModel: "",//selectedModel的中间桥梁数据 optionsList: [], selectedModel: "", isPopup: false,//是否是弹出选择框 watchOptions: true, //是否监听options属性,避免内部改变时死循环 watchValue: true,//是否监听value属性,避免组件内部改变时死循环 } }, watch: { value: { //监听value属性 handler: function (newVal, oldVal) { //console.log("value 改变-------------"); var _this = this; if (!_this.watchValue) { _this.watchValue = true; return; } if (!equals(newVal, oldVal)) { //判断是否相等,避免父级数据变动影响 _this.selectedMiddleModel = newVal; if (isNullOrEmpty(_this.selectedMiddleModel)) { _this.selectedMiddleModel = ""; } if (_this.timer != null) { clearTimeout(_this.timer); } _this.timer = setTimeout(function () { _this.init(); }, 100);//延迟执行,避免两个属性同时改变触发多次 } }, immediate: true, }, options: {//监听options属性 handler: function (newVal, oldVal) { //console.log("options 改变-------------", newVal, oldVal, equals(newVal, oldVal)); var _this = this; if (!equals(newVal, oldVal)) { //判断是否相等,避免父级数据变动影响 _this.optionsMiddleList = newVal; if (isNullOrEmpty(_this.optionsMiddleList)) { _this.optionsMiddleList = []; } if (_this.timer != null) { clearTimeout(_this.timer); } _this.timer = setTimeout(function () { _this.init(); }, 100);//延迟执行,避免两个属性同时改变触发多次 } }, immediate: true, }, }, methods: { init: function () {//初始化 var _this = this; _this.key = new Date().getTime(); if (_this.$options._componentTag && _this.$options._componentTag == "ui-select") { _this.getOptionsSlot();//导入select的自定义options } _this.formatOptions();//对选项进行格式化,兼容element格式 _this.formatValue();//对数据进行转换 if (_this.isPopup) {//弹出选择器 if (!isNullOrEmpty(_this.value)) { if (Array.isArray(_this.value) && _this.value.length == 0) { return; } _this.loadOptions(_this.value, _this.optionsUrl); } } else { _this.loadOptions("", _this.optionsUrl); } }, formatOptions: function () {//格式化optionsList属性 var _this = this; var props = _this.props; props = extend({ label: "label", value: "value", remark: "" }, props); var lableField = props.label; //label字段 var valueField = props.value; //value字段 var remarkField = props.remark; //remark字段 var optionsList = _this.optionsMiddleList; if (isNullOrEmpty(optionsList)) { optionsList = []; } if (!Array.isArray(optionsList)) { optionsList = [optionsList]; } //对options数据进行格式化 optionsList.remove(function (item) { return isNullOrEmpty(item) }); //移除空项目 optionsList.forEach(function (optionsItem, idx) { if (typeof (optionsItem) == "string") //options是字符数组 { optionsList[idx] = { label: optionsItem, value: optionsItem }; } else { if (!optionsItem.hasOwnProperty("label") && !isNullOrEmpty(lableField)) { if (optionsItem.hasOwnProperty(lableField)) { optionsItem["label"] = optionsItem[lableField]; } else { optionsItem["label"] = "props中未定义label属性"; } } if (!optionsItem.hasOwnProperty("value") && !isNullOrEmpty(valueField)) { if (optionsItem.hasOwnProperty(valueField)) { optionsItem["value"] = optionsItem[valueField]; } else { optionsItem["value"] = 0; } } if (!optionsItem.hasOwnProperty("remark") && !isNullOrEmpty(remarkField)) { optionsItem["remark"] = optionsItem[remarkField]; } } }); _this.optionsList = optionsList; }, formatValue: function () {//格式化v-model中的value数据 var _this = this; var newModel = [];//转换后的值, var midModel = _this.selectedMiddleModel; if (this.isMultple) { if (isNullOrEmpty(midModel)) { midModel = []; } else if (typeof midModel == 'object' || typeof midModel == 'array') { } else { if (_this.multiline) { midModel = midModel.toString().split(/[(\r\n)\r\n]+/); } else { midModel = midModel.toString().split(','); } } midModel.forEach(function (val) { _this.optionsList.forEach(function (item) { if (item.value.toString() == val.toString()) { newModel.push(item.value) } }) }) } else { newModel = ""; var thisValue = midModel; if (isNullOrEmpty(thisValue)) { thisValue = ""; } _this.optionsList.forEach(function (item) { if (item.value.toString() == thisValue.toString()) { newModel = item.value } }) } _this.selectedModel = newModel; }, updateModelValue: function (selectedText) { //更新父级的v-model var _this = this; var selected = []; if (_this.isMultple) { if (!Array.isArray(selectedText)) { if (isNullOrEmpty(selectedText)) { selected = []; } else if (typeof (selectedText) == "string") { if (_this.multiline) { selected = selectedText.split(/[(\r\n)\r\n]+/); } else { selected = selectedText.split(","); } } else { selected.push(selectedText); } } else { selected = selectedText; //console.log(selected) } } else { if (Array.isArray(selectedText)) { if (selectedText.length > 0) { selected = selectedText[0]; } else { selected = ""; } } else { selected = selectedText; } } if (_this.isMultple && !Array.isArray(_this.value)) { //如果传递过来的v-model不是数组,那么就转为逗号隔开的字符串传回去。 if (typeof (this.value) == "number") { selected = parseInt(selected); } else { if (_this.multiline) { selected = selected.join("\r\n"); } else { selected = selected.join(); } } } this.$emit('input', selected) //----------回调父级的方法,改变v-model的值 this.$emit('change', selected) //----------回调父级的方法 this.watchOptions = false; this.watchValue = false;//从内到外的更新就暂停监听value,避免死循环 }, loadOptions: function (selectedValue, optionsUrl) { //ajax 根据OptionsUrl地址获取选项数据 var _this = this; var value = selectedValue; if (isNullOrEmpty(value)) { value = ""; } else if (Array.isArray(value)) { value = value.join(","); } if (!isNullOrEmpty(optionsUrl)) { var props = extend({ label: "label", value: "value", remark: "" }, _this.props); var serverData = extend({ value: value, valueField: props.value, labelField: props.label }, _this.data); _this.ajax({ url: optionsUrl, data: serverData, success: function (responseData) { if (isNullOrEmpty(responseData)) { responseData = []; }; if (!Array.isArray(responseData)) { _this.optionsMiddleList = [responseData]; } else { _this.optionsMiddleList = responseData; } _this.formatOptions();//对选项进行格式化,兼容element格式 _this.formatValue();//对数据进行转换 } }); } }, } } //单选框 Vue.component('ui-radio', { template: "" + "" + "{{item.label}}", mixins: [_selectCheckbox_], props: { multple: false, //重写属性 border: { type: Boolean, default: false }, size: { type: String, default: 'mini' } } }) //下拉表单 Vue.component('ui-select', { template: "" + "" + "", mixins: [_selectCheckbox_], props: { collapseTags: {//多选是否把标签收缩起来 type: Boolean, default: true }, width: { type: String, default: 'auto' } }, methods: { getOptionsSlot: function () { var _this = this; //console.log(this.$slots.default); if (this.$slots.default != undefined) { this.$slots.default.forEach(function (item) { if (item.data != undefined) { _this.optionsMiddleList.push(item.componentOptions.propsData) } }) } }, }, mounted: function () { //如果值不存在选项中,则构造一个选项出来,否则下拉中会直接显示数字 var _this = this; if (!this.multiple) { if (_this.optionsList.findIndex(function (item) { return item.value.toString() == _this.selectedModel.toString() }) < 0) { _this.selectedModel = ""; //_this.updateModelValue(""); } } }, }); //多选框 Vue.component('ui-checkbox', { template: "" + "{{item.label}}", mixins: [_selectCheckbox_], props: { multiple: { //重写属性 type: Boolean, default: true }, min: "", max: "", }, }) //数据选择框,配合ui-select-popup使用 Vue.component('ui-select-popup-data', { template: '\
\
\ \ \ 搜索\
\ \ \ \ \ \ \ \
\ 确定\ 关闭\
\
\
', props: { title: { //--------标题 type: String, default: '' }, width: { type: String,//-------宽度 default: '50%' }, value: { //------------默认选中值 type: Array | String | Number, default: function () { return []; } }, url: { //-----------Api地址 type: String, default: '' }, height: { //-----------高度 type: String, default: 'auto' }, pageInfo: { type: Object, default: function () { return {} } }, multiple: { type: Boolean, default: true }, thTitle: { type: String, default: '标题' }, dataSource: { type: Array, default: function () { return []; } }, props: { //属性配置 type: Object, default: function () { return { label: 'label', value: 'value', remark: "", children: "children", checkStrictly: false, showSearch: true } } } }, data: function () { return { tableData: [], selectList: [], pageInfos: this.pageInfo, showPagePanel: true, showSearch: true, classify: [],//分类 searchInfo: { keyword: "" }, loading: true, dialogVisible: false, SelectionChangeFlg: true, newValue: [], cascaderKey: "", } }, methods: { classifyChange: function () {//分类改变 this.loadData(); }, formatDataList: function (dataList) { //对数据列表进行格式化,并设置对应属性 var _this = this; var props = _this.props; props = extend({ label: "label", value: "value", remark: "", children: "children", only: false, showSearch: true }, props); var lableField = props.label; //label字段 var valueField = props.value; //value字段 var remarkField = props.remark; //remark字段 var childrenField = props.children; var parentOptions = _this.$parent.optionsList; //获取父级下拉数据 var checkStrictly = props.checkStrictly; _this.showSearch = props.showSearch;//控制搜索是否显示 function formatDataList(list, parentLabel) { //对options数据进行格式化 list.forEach(function (optionsItem) { if (!optionsItem.hasOwnProperty("label") && !isNullOrEmpty(lableField)) { optionsItem["label"] = optionsItem[lableField]; } if (parentLabel != undefined) { optionsItem["nodePath"] = parentLabel + ">" + optionsItem["label"]; } else { optionsItem["nodePath"] = optionsItem["label"]; } if (!optionsItem.hasOwnProperty("value") && !isNullOrEmpty(valueField)) { optionsItem["value"] = optionsItem[valueField]; } if (!optionsItem.hasOwnProperty("remark") && !isNullOrEmpty(remarkField)) { optionsItem["remark"] = optionsItem[remarkField]; } if (!optionsItem.hasOwnProperty("children") && !isNullOrEmpty(childrenField)) { optionsItem["children"] = optionsItem[childrenField]; } var rowValue = optionsItem["value"]; var idx = parentOptions.findIndex(function (item) { return item.value.toString() == rowValue.toString() }); if (idx >= 0) { optionsItem.checked = true; } else { optionsItem.checked = false; } var children = optionsItem["children"]; if (Array.isArray(children)) { if (checkStrictly == false) { optionsItem.disabled = true; } formatDataList(children, optionsItem["nodePath"]); //递归设置 } }); } if (Array.isArray(dataList)) { formatDataList(dataList); } }, getRowKey: function (row) { var props = this.props; props = extend({ label: "label", value: "value" }, props); return row["value"] || row[props.value]; }, loadClassify: function (responseData) { var _this = this; if (_this.classify.length > 0) //获取分类,只执行一次 { return; } _this.classify = responseData.Classify; if (_this.classify == null || _this.classify == undefined) { _this.classify = []; } else { //构造v-model _this.classify.forEach(function (item) { item.Model = ""; }); } }, loadData: function (callbacks) { //---------Api var _this = this; var searchInfos = { label: '' } var props = this.props; props = extend({ label: "label", value: "value" }, props); searchInfos[props.label] = _this.searchInfo.keyword; var serverData = extend(_this.$parent.data, searchInfos, _this.pageInfos); //构造分类搜索 this.classify.forEach(function (item) { serverData[item.Field] = item.Model; }); _this.ajax({ url: _this.url, data: serverData, success: function (responseData) { if (!isNullOrEmpty(responseData)) { var dataList; if (Array.isArray(responseData)) { dataList = responseData; } else if (Array.isArray(responseData.Data)) { dataList = responseData.Data; } if (!isNullOrEmpty(responseData.PageInfo)) { _this.pageInfos = responseData.PageInfo; } else { _this.showPagePanel = false; } _this.formatDataList(dataList) _this.tableData = dataList; _this.loading = false; _this.loadClassify(responseData);//加载分类 } if (callbacks != undefined && typeof callbacks != 'object') { callbacks() } } }); }, loadDataSource: function () {//加载自定义数据源 var _this = this; var dataSource = JSON.parse(JSON.stringify(_this.dataSource)); _this.formatDataList(dataSource); _this.tableData = dataSource; _this.loading = false; _this.showPagePanel = false; _this.showSearch = false; }, checkedHandel: function (rows) { //点击选项触发 if (!this.multiple) { function singleCheck(list) { list.forEach(function (item) { if (item.value.toString() !== rows.value.toString()) { item.checked = false; } if (Array.isArray(item.children)) { singleCheck(item.children); } }); } singleCheck(this.tableData); } }, inits: function () { //----------打开窗口时执行回调 var _this = this; var selectedModel = deepCopy(this.$parent.selectedModel); if (_this.multiple) { if (isNullOrEmpty(selectedModel)) { selectedModel = []; } else if (Array.isArray(selectedModel)) { _this.newValue = selectedModel; } else { selectedModel = []; } } else { _this.newValue[0] = selectedModel; } if (Array.isArray(_this.dataSource) && _this.dataSource.length > 0) { _this.loadDataSource(); } else { this.pageInfos = this.pageInfo; this.loadData(function () { setTimeout(function () { }, 0); }); } }, confirmSelect: function () { //--------确定按钮触发 var _this = this; var options = JSON.parse(JSON.stringify(_this.$parent.optionsList)); var selectedValue = []; if (this.multiple) { selectedValue = _this.newValue; } //console.log(selectedValue); function getSelected(dataList) { dataList.forEach(function (item) { if (item.checked) { selectedValue.remove(function (selectedValue) { return selectedValue.toString() == item.value.toString(); }); selectedValue.push(item.value); if (_this.multiple) { options.remove(function (optionsItem) { return optionsItem.value.toString() == item.value.toString(); }); } else { options.splice(0, options.length); } if (!isNullOrEmpty(item.nodePath)) { item.label = item.nodePath; } options.push(item); } else { selectedValue.remove(function (selectedValue) { return selectedValue.toString() == item.value.toString(); }); options.remove(function (optionsItem) { return optionsItem.value.toString() == item.value.toString(); }); } var children = item["children"]; if (Array.isArray(children)) { getSelected(children); //递归设置 } }); } getSelected(this.tableData); if (this.multiple) { } else { if (Array.isArray(selectedValue)) { if (selectedValue.length > 0) { selectedValue = selectedValue[0]; } else { selectedValue = ""; } } } _this.$emit('updateOptions', { options: options, selectedValue: selectedValue });//更新tagOptions _this.$emit('input', selectedValue) _this.$emit('updateModelValue', selectedValue); _this.closeSelf(); }, closeSelf: function () { //------取消 this.dialogVisible = false } } }) //弹出选择器 Vue.component('ui-select-popup', { template: '\ \ {{tagItem.label}}\ \ {{btnTitle}}\ \ ', mixins: [_selectCheckbox_], props: { optionsUrl: { //选中后转换的url,不设置则默认使用value和label对象,设置后将传递value参数到请求的url中获取 type: String, default: "" }, selectWidth: { //------下拉宽度 type: String, default: '100%' }, btnTitle: { //-------按钮标题 type: String, default: '选择' }, title: { //----------顶部标题 type: String, default: '选择界面' }, url: { //---------数据源的地址 type: String, default: '' }, width: { //-----------对话框宽度 type: String, default: '50%' }, height: { //-----------对话框高度 type: String, default: 'auto' }, pageInfo: { type: Object, default: function () { return {} } }, collapseTags: { type: Boolean, default: true }, thTitle: { type: String, default: '选择' }, dataSource: { type: Array, default: function () { return []; } }, }, data: function () { return { isPopup: true, //重写data属性 dialogVisable: false,//---------显示对话框 serverData: this.data, //额外需要带到服务器端的参数对象 } }, watch: { data: {//监听options属性 handler: function (newVal, oldVal) { this.serverData = newVal; }, immediate: false, }, }, methods: { openDialog: function () { this.$refs.popupDialog.dialogVisible = true; }, removeTag: function (tagValue) { var _this = this; var optionsList = deepCopy(_this.optionsList); optionsList.remove(function (item) { return item.value.toString() == tagValue.toString() }); var remainValue = []; optionsList.forEach(function (item) { remainValue.push(item.value); }); _this.optionsMiddleList = optionsList; _this.selectedMiddleValue = remainValue; _this.formatOptions();//格式化选项 _this.formatValue();//格式化数据 _this.updateModelValue(remainValue);//更新value }, updateOptions: function (obj) { //弹出窗口选择后调用 var _this = this; var newOptions = obj.options; var selectedValue = obj.selectedValue; if (isNullOrEmpty(_this.optionsUrl)) { //optionsUrl未设置有效。 var _this = this; _this.optionsMiddleList = newOptions; _this.formatOptions();//格式化选项 } else { _this.loadOptions(selectedValue, _this.optionsUrl); } }, } }) //发送验证码 Vue.component('ui-input-code', { template: "\ \ ", data: function () { return { modelText: '', parameter: {},//--------Api参数 sendCodeFlag: true,//-------是否可以发送 btnTitleNews: '', delaySize: 120,//-----延迟秒数 btnloading: false, } }, created: function () { this.modelText = this.value; this.btnTitleNews = this.btnTitle }, props: { placeholder: { type: String, default: '请输入验证码' }, value: { type: String, default: '' }, focusTarget: { type: String, default: '' }, btnTitle: { type: String, default: '获取验证码' }, type: { type: String, default: 'email' }, urlApi: { type: String, //---------获取发送api default: '/E/SmsCode/Send' }, urlCode: { //-------获取TokenApi type: String, default: "/E/CodeBase/Send" }, account: { //---------获取手机号/email账号 type: String, default: '' }, maxlength: { type: Number, default: 6 } }, methods: { sendCode: function () { //-发送验证码 if (this.sendCodeFlag) { var _this = this var validationFlag = this.validationText(); if (validationFlag) { this.sendCodeFlag = false this.btnloading = true this.callToken(function () { _this.callApi(_this.type) }) } } }, changeCode: function (val) {//-------back-value this.$emit('input', val) }, callToken: function (callbacks) { //----------获取Token var _this = this _this.ajax({ url: _this.urlCode, data: {}, async: true, success: function (responseData) { _this.parameter.Token = responseData.token; callbacks() }, error: function () { setTimeout(function () { _this.sendCodeFlag = true _this.btnloading = false }, 1000) _this.$message.error('接口调用失败。请联系开发人员'); } }); }, timingDelay: function () { //--------定时器 var _this = this var seconds = _this.delaySize; var time = setInterval(function () { if (seconds == _this.delaySize) { _this.btnloading = false; } if (seconds <= 0) { clearInterval(time) _this.btnTitleNews = _this.btnTitle _this.sendCodeFlag = true return; } _this.btnTitleNews = seconds + '秒' --seconds; }, 1000) }, callApi: function (type) { //------调用Api var _this = this if (type == 'email') { this.parameter.email = this.account; } else { this.parameter.mobile = this.account; } _this.ajax({ url: _this.urlApi, type: "post", data: _this.parameter, success: function (responseData) { if (responseData.State == 1) { _this.timingDelay() } else { setTimeout(function () { _this.btnloading = false _this.sendCodeFlag = true _this.$message.error(responseData.Msg); }, 1000) } }, error: function () { _this.btnloading = false _this.sendCodeFlag = true //_this.$message.error(responseData.Msg); } }); }, focus: function () { //提示后获取焦点 var focusTarget = this.focusTarget; if (focusTarget == "") { return; } var focusTarget = document.querySelector(focusTarget); if (focusTarget != null) { focusTarget.focus(); } }, validationText: function () { //----------验证文本 if (this.type == 'email') { if (this.account == '' || this.account == null) { this.focus(); this.$message.error('请填写邮箱账号!') return false } var emailFlag = isEmail(this.account); if (!emailFlag) { this.focus(); this.$message.error("邮箱账号填写错误,请重新填写!"); return false; } else { return true; } } if (this.type == 'mobile') { if (this.account == '' || this.account == null) { this.focus(); this.$message.error('请填写手机号码!') return false } var mobileFlag = isMobile(this.account); if (!mobileFlag) { this.focus(); this.$message.error("手机号码填写错误,请重新填写!"); return false; } else { return true; } } } } }) //图标选择器 Vue.component('icon-picker', { template: '\ \ \ \ ', data: function () { return { iconList: ["fa-address-book", "fa-address-book-o", "fa-address-card", "fa-address-card-o", "fa-adjust", "fa-american-sign-language-interpreting", "fa-anchor", "fa-archive", "fa-area-chart", "fa-arrows", "fa-arrows-h", "fa-arrows-v", "fa-asl-interpreting", "fa-assistive-listening-systems", "fa-asterisk", "fa-at", "fa-audio-description", "fa-automobile", "fa-balance-scale", "fa-ban", "fa-bank", "fa-bar-chart", "fa-bar-chart-o", "fa-barcode", "fa-bars", "fa-bath", "fa-bathtub", "fa-battery", "fa-battery-0", "fa-battery-1", "fa-battery-2", "fa-battery-3", "fa-battery-4", "fa-battery-empty", "fa-battery-full", "fa-battery-half", "fa-battery-quarter", "fa-battery-three-quarters", "fa-bed", "fa-beer", "fa-bell", "fa-bell-o", "fa-bell-slash", "fa-bell-slash-o", "fa-bicycle", "fa-binoculars", "fa-birthday-cake", "fa-blind", "fa-bluetooth", "fa-bluetooth-b", "fa-bolt", "fa-bomb", "fa-book", "fa-bookmark", "fa-bookmark-o", "fa-braille", "fa-briefcase", "fa-bug", "fa-building", "fa-building-o", "fa-bullhorn", "fa-bullseye", "fa-bus", "fa-cab", "fa-calculator", "fa-calendar", "fa-calendar-check-o", "fa-calendar-minus-o", "fa-calendar-o", "fa-calendar-plus-o", "fa-calendar-times-o", "fa-camera", "fa-camera-retro", "fa-car", "fa-caret-square-o-down", "fa-caret-square-o-left", "fa-caret-square-o-right", "fa-caret-square-o-up", "fa-cart-arrow-down", "fa-cart-plus", "fa-cc", "fa-certificate", "fa-check", "fa-check-circle", "fa-check-circle-o", "fa-check-square", "fa-check-square-o", "fa-child", "fa-circle", "fa-circle-o", "fa-circle-o-notch", "fa-circle-thin", "fa-clock-o", "fa-clone", "fa-close", "fa-cloud", "fa-cloud-download", "fa-cloud-upload", "fa-code", "fa-code-fork", "fa-coffee", "fa-cog", "fa-cogs", "fa-comment", "fa-comment-o", "fa-commenting", "fa-commenting-o", "fa-comments", "fa-comments-o", "fa-compass", "fa-copyright", "fa-creative-commons", "fa-credit-card", "fa-credit-card-alt", "fa-crop", "fa-crosshairs", "fa-cube", "fa-cubes", "fa-cutlery", "fa-dashboard", "fa-database", "fa-deaf", "fa-deafness", "fa-desktop", "fa-diamond", "fa-dot-circle-o", "fa-download", "fa-drivers-license", "fa-drivers-license-o", "fa-edit", "fa-ellipsis-h", "fa-ellipsis-v", "fa-envelope", "fa-envelope-o", "fa-envelope-open", "fa-envelope-open-o", "fa-envelope-square", "fa-eraser", "fa-exchange", "fa-exclamation", "fa-exclamation-circle", "fa-exclamation-triangle", "fa-external-link", "fa-external-link-square", "fa-eye", "fa-eye-slash", "fa-eyedropper", "fa-fax", "fa-feed", "fa-female", "fa-fighter-jet", "fa-file-archive-o", "fa-file-audio-o", "fa-file-code-o", "fa-file-excel-o", "fa-file-image-o", "fa-file-movie-o", "fa-file-pdf-o", "fa-file-photo-o", "fa-file-picture-o", "fa-file-powerpoint-o", "fa-file-sound-o", "fa-file-video-o", "fa-file-word-o", "fa-file-zip-o", "fa-film", "fa-filter", "fa-fire", "fa-fire-extinguisher", "fa-flag", "fa-flag-checkered", "fa-flag-o", "fa-flash", "fa-flask", "fa-folder", "fa-folder-o", "fa-folder-open", "fa-folder-open-o", "fa-frown-o", "fa-futbol-o", "fa-gamepad", "fa-gavel", "fa-gear", "fa-gears", "fa-gift", "fa-glass", "fa-globe", "fa-graduation-cap", "fa-group", "fa-hand-grab-o", "fa-hand-lizard-o", "fa-hand-paper-o", "fa-hand-peace-o", "fa-hand-pointer-o", "fa-hand-rock-o", "fa-hand-scissors-o", "fa-hand-spock-o", "fa-hand-stop-o", "fa-handshake-o", "fa-hard-of-hearing", "fa-hashtag", "fa-hdd-o", "fa-headphones", "fa-heart", "fa-heart-o", "fa-heartbeat", "fa-history", "fa-home", "fa-hotel", "fa-hourglass", "fa-hourglass-1", "fa-hourglass-2", "fa-hourglass-3", "fa-hourglass-end", "fa-hourglass-half", "fa-hourglass-o", "fa-hourglass-start", "fa-i-cursor", "fa-id-badge", "fa-id-card", "fa-id-card-o", "fa-image", "fa-inbox", "fa-industry", "fa-info", "fa-info-circle", "fa-institution", "fa-key", "fa-keyboard-o", "fa-language", "fa-laptop", "fa-leaf", "fa-legal", "fa-lemon-o", "fa-level-down", "fa-level-up", "fa-life-bouy", "fa-life-buoy", "fa-life-ring", "fa-life-saver", "fa-lightbulb-o", "fa-line-chart", "fa-location-arrow", "fa-lock", "fa-low-vision", "fa-magic", "fa-magnet", "fa-mail-forward", "fa-mail-reply", "fa-mail-reply-all", "fa-male", "fa-map", "fa-map-marker", "fa-map-o", "fa-map-pin", "fa-map-signs", "fa-meh-o", "fa-microchip", "fa-microphone", "fa-microphone-slash", "fa-minus", "fa-minus-circle", "fa-minus-square", "fa-minus-square-o", "fa-mobile", "fa-mobile-phone", "fa-money", "fa-moon-o", "fa-mortar-board", "fa-motorcycle", "fa-mouse-pointer", "fa-music", "fa-navicon", "fa-newspaper-o", "fa-object-group", "fa-object-ungroup", "fa-paint-brush", "fa-paper-plane", "fa-paper-plane-o", "fa-paw", "fa-pencil", "fa-pencil-square", "fa-pencil-square-o", "fa-percent", "fa-phone", "fa-phone-square", "fa-photo", "fa-picture-o", "fa-pie-chart", "fa-plane", "fa-plug", "fa-plus", "fa-plus-circle", "fa-plus-square", "fa-plus-square-o", "fa-podcast", "fa-power-off", "fa-print", "fa-puzzle-piece", "fa-qrcode", "fa-question", "fa-question-circle", "fa-question-circle-o", "fa-quote-left", "fa-quote-right", "fa-random", "fa-recycle", "fa-refresh", "fa-registered", "fa-remove", "fa-reorder", "fa-reply", "fa-reply-all", "fa-retweet", "fa-road", "fa-rocket", "fa-rss", "fa-rss-square", "fa-s15", "fa-search", "fa-search-minus", "fa-search-plus", "fa-send", "fa-send-o", "fa-server", "fa-share", "fa-share-alt", "fa-share-alt-square", "fa-share-square", "fa-share-square-o", "fa-shield", "fa-ship", "fa-shopping-bag", "fa-shopping-basket", "fa-shopping-cart", "fa-shower", "fa-sign-in", "fa-sign-language", "fa-sign-out", "fa-signal", "fa-signing", "fa-sitemap", "fa-sliders", "fa-smile-o", "fa-snowflake-o", "fa-soccer-ball-o", "fa-sort", "fa-sort-alpha-asc", "fa-sort-alpha-desc", "fa-sort-amount-asc", "fa-sort-amount-desc", "fa-sort-asc", "fa-sort-desc", "fa-sort-down", "fa-sort-numeric-asc", "fa-sort-numeric-desc", "fa-sort-up", "fa-space-shuttle", "fa-spinner", "fa-spoon", "fa-square", "fa-square-o", "fa-star", "fa-star-half", "fa-star-half-empty", "fa-star-half-full", "fa-star-half-o", "fa-star-o", "fa-sticky-note", "fa-sticky-note-o", "fa-street-view", "fa-suitcase", "fa-sun-o", "fa-support", "fa-tablet", "fa-tachometer", "fa-tag", "fa-tags", "fa-tasks", "fa-taxi", "fa-television", "fa-terminal", "fa-thermometer", "fa-thermometer-0", "fa-thermometer-1", "fa-thermometer-2", "fa-thermometer-3", "fa-thermometer-4", "fa-thermometer-empty", "fa-thermometer-full", "fa-thermometer-half", "fa-thermometer-quarter", "fa-thermometer-three-quarters", "fa-thumb-tack", "fa-thumbs-down", "fa-thumbs-o-down", "fa-thumbs-o-up", "fa-thumbs-up", "fa-ticket", "fa-times", "fa-times-circle", "fa-times-circle-o", "fa-times-rectangle", "fa-times-rectangle-o", "fa-tint", "fa-toggle-down", "fa-toggle-left", "fa-toggle-off", "fa-toggle-on", "fa-toggle-right", "fa-toggle-up", "fa-trademark", "fa-trash", "fa-trash-o", "fa-tree", "fa-trophy", "fa-truck", "fa-tty", "fa-tv", "fa-umbrella", "fa-universal-access", "fa-university", "fa-unlock", "fa-unlock-alt", "fa-unsorted", "fa-upload", "fa-user", "fa-user-circle", "fa-user-circle-o", "fa-user-o", "fa-user-plus", "fa-user-secret", "fa-user-times", "fa-users", "fa-vcard", "fa-vcard-o", "fa-video-camera", "fa-volume-control-phone", "fa-volume-down", "fa-volume-off", "fa-volume-up", "fa-warning", "fa-wheelchair", "fa-wheelchair-alt", "fa-wifi", "fa-window-close", "fa-window-close-o", "fa-window-maximize", "fa-window-minimize", "fa-window-restore", "fa-wrench"], selectVal: this.value, dialogTableVisible: false, } }, props: { value: { type: String, default: "" }, }, computed: { showPreview: function () //是否显示预览 { return this.selectVal != undefined && this.selectVal != null && this.selectVal != ""; }, }, methods: { openDialog: function () { this.dialogTableVisible = true; }, setSelected: function (iconName) //点击图标触发 { if (iconName == undefined) { iconName = ""; } this.selectVal = iconName; this.$emit('input', iconName); this.dialogTableVisible = false; }, clearVal: function () { this.selectVal = ""; this.$emit('input', ""); }, iconActive: function (iconName) { if (iconName == undefined) { iconName = ""; } var _this = this; if (iconName == _this.selectVal) { return { "color": "#409EFF", "font-weight": "bold" }; } }, iconClass: function (iconName) { return [iconName]; }, } }); //管理列表附件展示组件 Vue.component('ui-list-attachment-display', { template: '\ \ \ \ \ {{firstFile.name}}\ \ \ \ \ \ \ \ {{item.name}} \ \ \ \ \ \ \ \ \ {{item.name}}\ \ \ \ ', data: function () { return { imageLoaded: false,//图片是否加载过 dialogVisible: false,//图片预览窗口 allFileList: this.fileList,//所有图片 firstFile: [], //第一条记录 fileListWithOutFirst: [], //排除第一条记录的数组 onLoadImageError: "this.style.display='none'" } }, props: { fileList: {//附件集合,格式[{name:'',url:''},{name:'',url:''}] type: Array, default: function () { return []; } }, displayType: { //展示方式 type: String, default: "file" }, }, created: function () { this.init(); }, computed: { isImageList: function () { //是否是图片类型附件 return this.displayType == "image"; }, showFirst: function () { return this.firstFile != undefined && this.firstFile.url != undefined && this.firstFile.url != undefined }, showMore: function () { return this.fileListWithOutFirst.length > 0; } }, methods: { init: function () { if (isNullOrEmpty(this.allFileList)) { this.allFileList = []; } if (this.allFileList.length > 0) { this.firstFile = this.allFileList[0]; this.fileListWithOutFirst = this.allFileList.slice(1); } }, loadImage: function (item) { var img = new Image(); img.src = item.url; img.onload = function () { item.url = img.src; } return item.url; }, getThumbnail: function (file) { //获取缩略图路径 var thumbnail = file.thumbnail; if (isNullOrEmpty(thumbnail)) { return file.url; } return thumbnail; }, downFile: function (file) { //下载文件 var url = file.url; var fileName = file.name; if (isImage(url)) { //图片直接打开 window.open(url, "_blank"); } else {//其他格式直接下载 window.open("/e/download?file=" + urlEncode(url) + "&name=" + urlEncode(fileName), "_blank"); } }, openUrl: function (file) {//打开文件。 var fileName = file.name; var url = file.url; if (this.displayType == "file") { this.downFile(file);//非图片改为直接下载 } else { this.dialogVisible = true; } }, } }); //自定义组件 Vue.component('ui-script', { template: "", data: function () { return { isTrue: false, } }, props: { value: { //-----------数据源 type: Array | String, default: "" }, src: { //js地址 type: Array | String, default: "" }, componentName: { //组件名称 type: String, default: "" }, parameter: { //自定义json参数 type: Object, default: function () { return {} } }, }, created: function () { var _this = this; var url = _this.src if (url != undefined && url != null && url != "") { var script = document.createElement("script"); script.type = "text/javascript"; script.src = url; document.head.appendChild(script); if (script.readyState) { script.onreadystatechange = function () { if (script.readyState == 'loaded' || script.readyState == 'complete') { script.onreadystatechange = null; _this.isTrue = true; } }; } else {//其他浏览器 script.onload = function () { _this.isTrue = true; }; } } }, methods: { }, watch: { value: { handler: function (newVal, oldVal) { this.$emit('input', newVal) }, immediate: true, deep: true }, }, })