From 2336b39a790b8372b05a07101a2869cc50b7e4d0 Mon Sep 17 00:00:00 2001 From: jmal Date: Thu, 11 Aug 2022 18:09:19 +0800 Subject: [PATCH] =?UTF-8?q?:sparkles:=20=E6=96=B0=E5=A2=9Eonly=20office?= =?UTF-8?q?=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 2 +- src/components/ShowFile/ShowFile.vue | 11 ++ src/components/office/OnlyOfficeEditor.vue | 123 ++++++++--------- src/components/preview/OfficePreview.vue | 146 +++++++++++++++++++++ src/main.js | 3 + src/utils/common.js | 133 ++++--------------- src/utils/file-type.js | 2 + src/utils/web.js | 126 +++++++++--------- 8 files changed, 302 insertions(+), 244 deletions(-) create mode 100644 src/components/preview/OfficePreview.vue diff --git a/package.json b/package.json index d54d8c1..c2dd0d9 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "jmal-cloud-view", - "version": "2.2.35", + "version": "2.2.36", "description": "jmalcloud", "author": "Jmal ", "license": "MIT", diff --git a/src/components/ShowFile/ShowFile.vue b/src/components/ShowFile/ShowFile.vue index 1a1fd0a..6527347 100644 --- a/src/components/ShowFile/ShowFile.vue +++ b/src/components/ShowFile/ShowFile.vue @@ -377,6 +377,7 @@ + -1) { + // office文件 + this.officePreviewVisible = true + this.officePreviewRow = row + return + } if (row.suffix === 'pdf') { // pdf文件 fileConfig.preview(this.$store.state.user.name, row, this.$store.getters.token) diff --git a/src/components/office/OnlyOfficeEditor.vue b/src/components/office/OnlyOfficeEditor.vue index 4a9c428..99bd5b7 100644 --- a/src/components/office/OnlyOfficeEditor.vue +++ b/src/components/office/OnlyOfficeEditor.vue @@ -5,36 +5,10 @@ - + diff --git a/src/components/preview/OfficePreview.vue b/src/components/preview/OfficePreview.vue new file mode 100644 index 0000000..ef5f631 --- /dev/null +++ b/src/components/preview/OfficePreview.vue @@ -0,0 +1,146 @@ + + + + + diff --git a/src/main.js b/src/main.js index bc57103..53a629c 100644 --- a/src/main.js +++ b/src/main.js @@ -1,5 +1,8 @@ import 'normalize.css/normalize.css' // A modern alternative to CSS resets +import '@/utils/common' +import '@/utils/web' + import '@/styles/index.scss' // global css import uploader from 'vue-simple-uploader' import EVueContextmenu from 'e-vue-contextmenu' diff --git a/src/utils/common.js b/src/utils/common.js index a075a4e..30d4f6a 100755 --- a/src/utils/common.js +++ b/src/utils/common.js @@ -1,7 +1,7 @@ /** * 基础函数 */ -(function (window, $, undefined) { +(function (window, fuc, undefined) { window.systemInfo = window.systemInfo || {}; /** @@ -9,7 +9,7 @@ * ******************************* 基础函数类 ******************************* * ============================================================================= */ - $.extend({ + fuc.extend({ /** * 是否数组 * @param obj @@ -27,20 +27,6 @@ isJson(obj) { return typeof (obj) == "object" && Object.prototype.toString.call(obj).toLowerCase() === "[object object]" && typeof obj.length == "undefined"; }, - - /** - * 是否在数组里 - * @param key - * @param array - * @returns {boolean|*} - */ - inArray(key, array) { - if (!this.isArray(array)) { - return false; - } - return array.includes(key); - }, - /** * 随机获取范围 * @param Min @@ -168,21 +154,6 @@ return string; }, - /** - * 截取字符串 - * @param string - * @param start - * @param end - * @returns {string} - */ - subString(string, start, end) { - string += ""; - if (!this.isHave(end)) { - end = string.length; - } - return string.substring(start, end); - }, - /** * 随机字符 * @param len @@ -232,63 +203,7 @@ return _s; }, - /** - * 返回10位数时间戳 - * @param v - * @returns {number} - * @constructor - */ - Time(v) { - let time - if (typeof v === "string" && this.strExists(v, "-")) { - v = v.replace(/-/g, '/'); - time = new Date(v).getTime(); - } else { - time = new Date().getTime(); - } - return Math.round(time / 1000) - }, - /** - * 返回 时间对象|时间戳 - * @param v - * @param stamp 是否返回时间戳 - * @returns {Date|number} - * @constructor - */ - Date(v, stamp = false) { - if (typeof v === "string" && this.strExists(v, "-")) { - v = v.replace(/-/g, '/'); - } - if (stamp === true) { - return Math.round(new Date(v).getTime() / 1000) - } - return new Date(v); - }, - - /** - * 补零 - * @param str - * @param length - * @param after - * @returns {*} - */ - zeroFill(str, length, after) { - str+= ""; - if (str.length >= length) { - return str; - } - let _str = '', _ret = ''; - for (let i = 0; i < length; i++) { - _str += '0'; - } - if (after || typeof after === 'undefined') { - _ret = (_str + "" + str).substr(length * -1); - } else { - _ret = (str + "" + _str).substr(0, length); - } - return _ret; - }, /** * 时间戳转时间格式 @@ -319,7 +234,7 @@ } else { return v; } - dateObj = $A.Date(v); + dateObj = $J.Date(v); } // format = format.replace(/Y/g, dateObj.getFullYear()); @@ -339,7 +254,7 @@ */ timeDiff(s, e) { if (typeof e === 'undefined') { - e = $A.Time(); + e = $J.Time(); } let d = e - s; if (d > 86400) { @@ -448,7 +363,7 @@ if(typeof(myObj) !== 'object') return myObj; if(myObj === null) return myObj; // - return $A.jsonParse($A.jsonStringify(myObj)) + return $J.jsonParse($J.jsonStringify(myObj)) }, /** @@ -494,7 +409,7 @@ * @param callback */ resize(obj, callback) { - let myObj = $A(obj); + let myObj = $J(obj); if (myObj.length === 0) return; let height = parseInt(myObj.outerHeight()), width = parseInt(myObj.outerWidth()); @@ -611,7 +526,7 @@ return ""; } let str = ""; - $A.each(obj, (val) => { + $J.each(obj, (val) => { if (val !== null) { if (typeof val === "object" && this.count(val) > 0) { str += this.objImplode(val); @@ -658,7 +573,7 @@ removeURLParameter(url, parameter) { if (parameter instanceof Array) { parameter.forEach((key) => { - url = $A.removeURLParameter(url, key) + url = $J.removeURLParameter(url, key) }); return url; } @@ -688,7 +603,7 @@ * @returns {*} */ urlAddParams(url, params) { - if ($A.isJson(params)) { + if ($J.isJson(params)) { if (url) { url = this.removeURLParameter(url, Object.keys(params)) } @@ -763,7 +678,7 @@ if (object === null || typeof object !== "object") return; if (typeof object.length === 'number' && object.length > 0) object = object[0]; - let ele = typeof object.$el === "object" ? $A(object.$el) : $A(object); + let ele = typeof object.$el === "object" ? $J(object.$el) : $J(object); if (ele.length === 0) return; let eleDom = ele[0]; @@ -811,7 +726,7 @@ * @param callback */ loadScript(url, callback) { - url = $A.originUrl(url); + url = $J.originUrl(url); if (this.rightExists(url, '.css')) { this.loadCss(url, callback) return; @@ -865,7 +780,7 @@ * @param callback */ loadCss(url, callback) { - url = $A.originUrl(url); + url = $J.originUrl(url); if (this.rightExists(url, '.js')) { this.loadScript(url, callback) return; @@ -929,17 +844,17 @@ format = "Y-m-d H:i:s"; } if (params instanceof Date) { - params = $A.formatDate(format, params); - } else if ($A.isJson(params)) { + params = $J.formatDate(format, params); + } else if ($J.isJson(params)) { params = Object.assign({}, params) for (let key in params) { if (!params.hasOwnProperty(key)) continue; - params[key] = $A.date2string(params[key], format); + params[key] = $J.date2string(params[key], format); } - } else if ($A.isArray(params)) { + } else if ($J.isArray(params)) { params = Object.assign([], params) params.forEach((val, index) => { - params[index] = $A.date2string(val, format); + params[index] = $J.date2string(val, format); }); } return params; @@ -958,7 +873,7 @@ if (typeof sizes[i] === "undefined") { return '0 B'; } - return $A.runNum((bytes / Math.pow(k, i)), 2) + ' ' + sizes[i]; + return $J.runNum((bytes / Math.pow(k, i)), 2) + ' ' + sizes[i]; }, /** @@ -1014,7 +929,7 @@ * ******************************** storage ******************************** * ============================================================================= */ - $.extend({ + fuc.extend({ setStorage(key, value) { return this.storage(key, value); }, @@ -1102,7 +1017,7 @@ * ********************************* ihttp ********************************* * ============================================================================= */ - $.extend({ + fuc.extend({ serializeObject(obj, parents) { if (typeof obj === 'string') return obj; let resultArray = []; @@ -1446,7 +1361,7 @@ * ***************************** ajaxc **************************** * ============================================================================= */ - $.extend({ + fuc.extend({ ajaxc(params) { if (!params) return false; if (typeof params.url === 'undefined') return false; @@ -1463,7 +1378,7 @@ if (typeof params.header == 'undefined') params.header = {}; // params.before(); - $A.ihttp({ + $J.ihttp({ url: params.url, data: params.data, cache: params.cache, @@ -1487,5 +1402,5 @@ } }); - window.$A = $; -})(window, window.$ = window.jQuery = require('jquery')); + window.$J = fuc; +})(window, window.fuc = window.jQuery = require('jquery')); diff --git a/src/utils/file-type.js b/src/utils/file-type.js index 6d75b3f..6fb4442 100644 --- a/src/utils/file-type.js +++ b/src/utils/file-type.js @@ -53,6 +53,8 @@ iconClass.set('pkg','file-pkg') iconClass.set('mpkg','file-pkg') iconClass.set('exe','file-exe') iconClass.set('word','file-word') +iconClass.set('doc','file-word') +iconClass.set('docx','file-word') iconClass.set('pdf','file-pdf') iconClass.set('zip','zip') iconClass.set('rar','zip') diff --git a/src/utils/web.js b/src/utils/web.js index 7ed7835..805028e 100755 --- a/src/utils/web.js +++ b/src/utils/web.js @@ -2,7 +2,7 @@ * 页面专用 */ (function (window) { - const $ = window.$A; + const $ = window.$J; /** * ============================================================================= * ******************************* web extra ******************************* @@ -81,14 +81,14 @@ * @param data */ formatWebsocketMessageDetail(data) { - if ($A.isJson(data)) { + if ($J.isJson(data)) { for (let key in data) { if (!data.hasOwnProperty(key)) continue; - data[key] = $A.formatWebsocketMessageDetail(data[key]); + data[key] = $J.formatWebsocketMessageDetail(data[key]); } - } else if ($A.isArray(data)) { + } else if ($J.isArray(data)) { data.forEach((val, index) => { - data[index] = $A.formatWebsocketMessageDetail(val); + data[index] = $J.formatWebsocketMessageDetail(val); }); } else if (typeof data === "string") { data = data.replace(/\{\{RemoteURL\}\}/g, this.apiUrl('../')) @@ -102,14 +102,14 @@ * @returns {*|string} */ formatTime(date) { - let time = $A.Date(date, true), + let time = $J.Date(date, true), string = ''; - if ($A.formatDate('Ymd') === $A.formatDate('Ymd', time)) { - string = $A.formatDate('H:i', time) - } else if ($A.formatDate('Y') === $A.formatDate('Y', time)) { - string = $A.formatDate('m-d', time) + if ($J.formatDate('Ymd') === $J.formatDate('Ymd', time)) { + string = $J.formatDate('H:i', time) + } else if ($J.formatDate('Y') === $J.formatDate('Y', time)) { + string = $J.formatDate('m-d', time) } else { - string = $A.formatDate('Y-m-d', time) + string = $J.formatDate('Y-m-d', time) } return string || ''; }, @@ -262,7 +262,7 @@ if (retInt === true) { return time; } - return $A.formatDate("Y-m-d", parseInt(time / 1000)) + return $J.formatDate("Y-m-d", parseInt(time / 1000)) }, /** @@ -271,46 +271,46 @@ */ timeOptionShortcuts() { const lastSecond = (e) => { - return $A.Date($A.formatDate("Y-m-d 23:59:29", Math.round(e / 1000))) + return $J.Date($J.formatDate("Y-m-d 23:59:29", Math.round(e / 1000))) }; return [{ - text: $A.L('今天'), + text: $J.L('今天'), value() { return [new Date(), lastSecond(new Date().getTime())]; } }, { - text: $A.L('明天'), + text: $J.L('明天'), value() { let e = new Date(); e.setDate(e.getDate() + 1); return [new Date(), lastSecond(e.getTime())]; } }, { - text: $A.L('本周'), + text: $J.L('本周'), value() { - return [$A.getData('今天', true), lastSecond($A.getData('本周结束2', true))]; + return [$J.getData('今天', true), lastSecond($J.getData('本周结束2', true))]; } }, { - text: $A.L('本月'), + text: $J.L('本月'), value() { - return [$A.getData('今天', true), lastSecond($A.getData('本月结束', true))]; + return [$J.getData('今天', true), lastSecond($J.getData('本月结束', true))]; } }, { - text: $A.L('3天'), + text: $J.L('3天'), value() { let e = new Date(); e.setDate(e.getDate() + 2); return [new Date(), lastSecond(e.getTime())]; } }, { - text: $A.L('5天'), + text: $J.L('5天'), value() { let e = new Date(); e.setDate(e.getDate() + 4); return [new Date(), lastSecond(e.getTime())]; } }, { - text: $A.L('7天'), + text: $J.L('7天'), value() { let e = new Date(); e.setDate(e.getDate() + 6); @@ -327,7 +327,7 @@ dialogTags(dialog) { let tags = []; if (dialog.type === 'group') { - if (['project', 'task'].includes(dialog.group_type) && $A.isJson(dialog.group_info)) { + if (['project', 'task'].includes(dialog.group_type) && $J.isJson(dialog.group_info)) { if (dialog.group_type === 'task' && dialog.group_info.complete_at) { tags.push({ color: 'success', @@ -377,8 +377,8 @@ $.extend({ // 加载器 spinnerShow() { - $A.spinnerLoadNum++ - if ($A.spinnerLoadNum > 0) { + $J.spinnerLoadNum++ + if ($J.spinnerLoadNum > 0) { const spinner = document.getElementById("common-spinner"); if (spinner) { spinner.style.display = "block" @@ -387,8 +387,8 @@ }, spinnerHide() { - $A.spinnerLoadNum-- - if ($A.spinnerLoadNum <= 0) { + $J.spinnerLoadNum-- + if ($J.spinnerLoadNum <= 0) { const spinner = document.getElementById("common-spinner"); if (spinner) { spinner.style.display = "none" @@ -404,29 +404,29 @@ } else if (typeof config === "string") { config = {content: config}; } - config.title = $A.L(config.title || (typeof config.render === 'undefined' ? '温馨提示' : '')); - config.content = $A.L(config.content || ''); - config.okText = $A.L(config.okText || '确定'); - config.cancelText = $A.L(config.cancelText || '取消'); + config.title = $J.L(config.title || (typeof config.render === 'undefined' ? '温馨提示' : '')); + config.content = $J.L(config.content || ''); + config.okText = $J.L(config.okText || '确定'); + config.cancelText = $J.L(config.cancelText || '取消'); return config; }, modalInput(config, millisecond = 0) { if (millisecond > 0) { - setTimeout(() => { $A.modalInput(config) }, millisecond); + setTimeout(() => { $J.modalInput(config) }, millisecond); return; } if (typeof config === "string") config = {title:config}; - let inputId = "modalInput_" + $A.randomString(6); + let inputId = "modalInput_" + $J.randomString(6); const onOk = () => { if (typeof config.onOk === "function") { if (config.onOk(config.value, () => { - $A.Modal.remove(); + $J.Modal.remove(); }) === true) { - $A.Modal.remove(); + $J.Modal.remove(); } } else { - $A.Modal.remove(); + $J.Modal.remove(); } }; const onCancel = () => { @@ -434,7 +434,7 @@ config.onCancel(); } }; - $A.Modal.confirm({ + $J.Modal.confirm({ render: (h) => { return h('div', [ h('div', { @@ -443,11 +443,11 @@ fontWeight: '500', marginBottom: '20px', } - }, $A.L(config.title)), + }, $J.L(config.title)), h('Input', { props: { value: config.value, - placeholder: $A.L(config.placeholder), + placeholder: $J.L(config.placeholder), elementId: inputId, }, on: { @@ -455,7 +455,7 @@ config.value = val; }, 'on-enter': (e) => { - $A(e.target).parents(".ivu-modal-body").find(".ivu-btn-primary").click(); + $J(e.target).parents(".ivu-modal-body").find(".ivu-btn-primary").click(); } } }) @@ -464,8 +464,8 @@ onOk, onCancel, loading: true, - okText: $A.L(config.okText || '确定'), - cancelText: $A.L(config.cancelText || '取消'), + okText: $J.L(config.okText || '确定'), + cancelText: $J.L(config.cancelText || '取消'), }); setTimeout(() => { document.getElementById(inputId) && document.getElementById(inputId).focus(); @@ -477,10 +477,10 @@ return; } if (millisecond > 0) { - setTimeout(() => { $A.modalConfirm(config) }, millisecond); + setTimeout(() => { $J.modalConfirm(config) }, millisecond); return; } - $A.Modal.confirm($A.modalConfig(config)); + $J.Modal.confirm($J.modalConfig(config)); }, modalSuccess(config, millisecond = 0) { @@ -488,10 +488,10 @@ return; } if (millisecond > 0) { - setTimeout(() => { $A.modalSuccess(config) }, millisecond); + setTimeout(() => { $J.modalSuccess(config) }, millisecond); return; } - $A.Modal.success($A.modalConfig(config)); + $J.Modal.success($J.modalConfig(config)); }, modalInfo(config, millisecond = 0) { @@ -499,10 +499,10 @@ return; } if (millisecond > 0) { - setTimeout(() => { $A.modalInfo(config) }, millisecond); + setTimeout(() => { $J.modalInfo(config) }, millisecond); return; } - $A.Modal.info($A.modalConfig(config)); + $J.Modal.info($J.modalConfig(config)); }, modalWarning(config, millisecond = 0) { @@ -510,10 +510,10 @@ return; } if (millisecond > 0) { - setTimeout(() => { $A.modalWarning(config) }, millisecond); + setTimeout(() => { $J.modalWarning(config) }, millisecond); return; } - $A.Modal.warning($A.modalConfig(config)); + $J.Modal.warning($J.modalConfig(config)); }, modalError(config, millisecond = 0) { @@ -521,30 +521,30 @@ return; } if (millisecond > 0) { - setTimeout(() => { $A.modalError(config) }, millisecond); + setTimeout(() => { $J.modalError(config) }, millisecond); return; } - $A.Modal.error($A.modalConfig(config)); + $J.Modal.error($J.modalConfig(config)); }, modalAlert(msg) { if (msg === false) { return; } - alert($A.L(msg)); + alert($J.L(msg)); }, //提示 messageSuccess(msg) { - $A.Message.success($A.L(msg)); + $J.Message.success($J.L(msg)); }, messageWarning(msg) { - $A.Message.warning($A.L(msg)); + $J.Message.warning($J.L(msg)); }, messageError(msg) { - $A.Message.error($A.L(msg)); + $J.Message.error($J.L(msg)); }, //通知 @@ -554,17 +554,17 @@ } else if (typeof config === "string") { config = {desc: config}; } - config.title = $A.L(config.title || (typeof config.render === 'undefined' ? '温馨提示' : '')); - config.desc = $A.L(config.desc || ''); + config.title = $J.L(config.title || (typeof config.render === 'undefined' ? '温馨提示' : '')); + config.desc = $J.L(config.desc || ''); return config; }, noticeSuccess(config) { - $A.Notice.success($A.noticeConfig(config)); + $J.Notice.success($J.noticeConfig(config)); }, noticeWarning(config) { - $A.Notice.warning($A.noticeConfig(config)); + $J.Notice.warning($J.noticeConfig(config)); }, noticeError(config) { @@ -574,7 +574,7 @@ duration: 6 }; } - $A.Notice.error($A.noticeConfig(config)); + $J.Notice.error($J.noticeConfig(config)); }, }); @@ -718,7 +718,7 @@ }, enableDarkMode() { - if (!$A.isChrome()) { + if (!$J.isChrome()) { return; } if (this.isDarkEnabled()) { @@ -753,5 +753,5 @@ } }); - window.$A = $; + window.$J = $; })(window);