From 19a154e0b9d9edcbe2420ccfe9f459e76dcb74d8 Mon Sep 17 00:00:00 2001 From: kuaifan Date: Wed, 30 Jun 2021 23:49:06 +0800 Subject: [PATCH] no message --- app/Http/Controllers/Api/FileController.php | 4 +- app/Models/FileContent.php | 8 +- resources/assets/js/components/QuickEdit.vue | 8 +- resources/assets/js/pages/login.vue | 2 +- resources/assets/js/pages/manage.vue | 2 +- .../pages/manage/components/ProjectList.vue | 2 +- .../js/pages/manage/components/TaskDetail.vue | 4 +- resources/assets/js/pages/manage/file.vue | 189 ++++++++++++++---- resources/assets/sass/pages/page-file.scss | 135 ++++++++++++- resources/assets/sass/scrollbar.scss | 82 ++++---- 10 files changed, 330 insertions(+), 106 deletions(-) diff --git a/app/Http/Controllers/Api/FileController.php b/app/Http/Controllers/Api/FileController.php index 09c861c8..8675a659 100755 --- a/app/Http/Controllers/Api/FileController.php +++ b/app/Http/Controllers/Api/FileController.php @@ -222,7 +222,7 @@ class FileController extends AbstractController $content->save(); } // - $content->content = $content->getFormatContent(); + $content->content = $content->formatContent($file->type, $content->content); return Base::retSuccess('success', $content); } @@ -278,7 +278,7 @@ class FileController extends AbstractController $file->size = $content->size; $file->save(); // - $content->content = $content->getFormatContent(); + $content->content = $content->formatContent($file->type, $content->content); return Base::retSuccess('保存成功', $content); } } diff --git a/app/Models/FileContent.php b/app/Models/FileContent.php index 71ead09b..7aaaff48 100644 --- a/app/Models/FileContent.php +++ b/app/Models/FileContent.php @@ -42,13 +42,15 @@ class FileContent extends AbstractModel /** * 获取格式内容 + * @param $type + * @param $content * @return array|array[]|mixed|string[] */ - public function getFormatContent() + public static function formatContent($type, $content) { - $content = Base::json2array($this->content); + $content = Base::json2array($content); if (empty($content)) { - switch ($this->type) { + switch ($type) { case 'document': $content = [ "type" => "text", diff --git a/resources/assets/js/components/QuickEdit.vue b/resources/assets/js/components/QuickEdit.vue index d49c4d16..053389a6 100644 --- a/resources/assets/js/components/QuickEdit.vue +++ b/resources/assets/js/components/QuickEdit.vue @@ -6,7 +6,7 @@ @@ -26,8 +26,10 @@ export default { } }, - mounted() { - + watch: { + isEdit(val) { + this.$emit("on-edit", val); + } }, methods: { diff --git a/resources/assets/js/pages/login.vue b/resources/assets/js/pages/login.vue index 9cb78a41..71ea57f0 100644 --- a/resources/assets/js/pages/login.vue +++ b/resources/assets/js/pages/login.vue @@ -1,7 +1,7 @@ @@ -100,7 +116,7 @@ export default { loadIng: 0, searchKey: '', - pid: 0, + pid: this.$store.state.method.getStorageInt("fileOpenPid"), shearId: 0, types: [ @@ -111,6 +127,10 @@ export default { {value: 'flow', name: "流程图"}, ], + tableHeight: 500, + tableMode: this.$store.state.method.getStorageBoolean("fileTableMode"), + columns: [], + editShow: false, editHeight: 0, editInfo: {}, @@ -118,6 +138,7 @@ export default { }, mounted() { + this.tableHeight = window.innerHeight - 160; this.editHeight = window.innerHeight - 40; }, @@ -155,6 +176,8 @@ export default { if (file) { array.unshift(file); pid = file.pid; + } else { + pid = 0; } } return array; @@ -167,16 +190,99 @@ export default { this.loadIng++; this.$store.dispatch("getFiles", this.pid).then(() => { this.loadIng--; + this.$store.state.method.setStorage("fileOpenPid", this.pid) }).catch(({msg}) => { $A.modalError(msg); this.loadIng--; - }) + }); }, immediate: true + }, + + tableMode(val) { + this.$store.state.method.setStorage("fileTableMode", val) } }, methods: { + initLanguage() { + this.columns = [ + { + title: this.$L('文件名'), + key: 'name', + minWidth: 200, + resizable: true, + sortable: true, + render: (h, {row}) => { + return h('div', { + class: 'file-name ' + row.type + }, [ + h('QuickEdit', { + props: { + value: row.name, + }, + on: { + 'on-edit': (b) => { + const file = this.files.find(({id}) => id == row.id); + if (file) { + setTimeout(() => { + this.$set(file, '_edit', b); + }, 100); + } + }, + 'on-update': (val, cb) => { + const file = this.files.find(({id}) => id == row.id); + if (file) { + file.newname = val + this.onEnter(file); + } + cb(); + } + } + }, [ + h('AutoTip', row.name) + ]) + ]); + } + }, + { + title: this.$L('大小'), + key: 'size', + width: 120, + resizable: true, + sortable: true, + render: (h, {row}) => { + if (row.type == 'folder') { + return h('div', '-') + } + return h('AutoTip', $A.bytesToSize(row.size)); + } + }, + { + title: this.$L('类型'), + key: 'type', + width: 120, + resizable: true, + sortable: true, + render: (h, {row}) => { + let type = this.types.find(({value}) => value == row.type); + if (type) { + return h('AutoTip', type.name); + } else { + return h('div', '-') + } + } + }, + { + title: this.$L('最后修改'), + key: 'updated_at', + width: 168, + resizable: true, + sortable: true, + }, + ] + }, + addFile(command) { let id = $A.randomString(8); this.files.push({ @@ -195,7 +301,10 @@ export default { }, openFile(item) { - if (item._edit || item._load) { + if (this.fileList.findIndex((file) => file._edit === true) > -1) { + return; + } + if (item._load) { return; } if (item.type == 'folder') { @@ -208,6 +317,10 @@ export default { } }, + clickRow(row) { + this.dropFile(row, 'open'); + }, + dropFile(item, command) { switch (command) { case 'open': diff --git a/resources/assets/sass/pages/page-file.scss b/resources/assets/sass/pages/page-file.scss index 024507e5..98a3bb37 100644 --- a/resources/assets/sass/pages/page-file.scss +++ b/resources/assets/sass/pages/page-file.scss @@ -5,6 +5,7 @@ flex-direction: column; .file-wrapper { flex: 1; + height: 0; display: flex; flex-direction: column; .file-head { @@ -120,28 +121,142 @@ text-overflow: ellipsis; } } + .flex-full { + flex: 1; + } + .switch-button { + display: flex; + align-items: center; + background-color: #ffffff; + border-radius: 6px; + position: relative; + transition: box-shadow 0.2s; + &:hover { + box-shadow: 0 0 10px #e6ecfa; + } + &:before { + content: ""; + position: absolute; + top: 0; + left: 0; + width: 50%; + height: 100%; + z-index: 0; + color: $primary-color; + border-radius: 6px; + border: 1px solid $primary-color; + background-color: rgba($primary-color, 0.1); + transition: left 0.2s; + } + > div { + z-index: 1; + width: 32px; + height: 30px; + display: flex; + align-items: center; + justify-content: center; + border-radius: 6px; + cursor: pointer; + color: #515a6e; + > i { + font-size: 17px; + } + &:first-child { + color: $primary-color; + } + } + &.table { + &:before { + left: 50%; + } + > div:first-child { + color: #515a6e; + } + > div:last-child { + color: $primary-color; + } + } + } + } + .file-table { + flex: 1; + cursor: default; + margin: 16px 32px 32px; + .ivu-table { + &:before { + display: none; + } + .ivu-table-tip { + opacity: 0.8; + span { + font-size: 14px; + font-weight: 500; + line-height: 1.8; + &:before { + display: block; + content: "\e60b"; + font-family: "iconfont", "serif" !important; + font-size: 64px; + font-style: normal; + -webkit-font-smoothing: antialiased; + -webkit-text-stroke-width: 0.2px; + } + } + } + } + .file-name { + display: flex; + align-items: center; + position: relative; + padding-right: 26px; + &:before { + flex-shrink: 0; + content: ""; + width: 18px; + height: 18px; + background-repeat: no-repeat; + background-size: contain; + margin-right: 8px; + } + &.folder:before { + background-image: url("../images/file/folder.svg"); + } + &.document:before { + background-image: url("../images/file/document.svg"); + } + &.mind:before { + background-image: url("../images/file/mind.svg"); + } + &.sheet:before { + background-image: url("../images/file/sheet.svg"); + } + &.flow:before { + background-image: url("../images/file/flow.svg"); + } + } } .file-list { flex: 1; padding: 0 20px 20px; + margin-top: 16px; + overflow: auto; > ul { + margin-top: -12px; > li { list-style: none; float: left; margin: 12px; - width: 94px; - height: 100px; - text-align: center; + width: 100px; + height: 110px; position: relative; - overflow: visible; - border: 1px dashed transparent; border-radius: 5px; display: flex; flex-direction: column; align-items: center; justify-content: space-between; + cursor: pointer; .file-input { - margin: 0 2px 2px; + margin: 0 4px 4px; position: relative; input { margin: 0; @@ -168,8 +283,7 @@ color: #515a6e; font-size: 12px; text-align: center; - margin-top: 5px; - margin-bottom: 3px; + margin-bottom: 5px; padding: 0 6px; overflow: hidden; white-space: nowrap; @@ -194,8 +308,8 @@ } .file-icon { display: inline-block; - width: 52px; - height: 52px; + width: 64px; + height: 64px; background-repeat: no-repeat; background-size: contain; margin-top: 12px; @@ -236,6 +350,7 @@ align-items: center; position: relative; &:before { + flex-shrink: 0; content: ""; width: 18px; height: 18px; diff --git a/resources/assets/sass/scrollbar.scss b/resources/assets/sass/scrollbar.scss index 72a26f32..e07142d3 100644 --- a/resources/assets/sass/scrollbar.scss +++ b/resources/assets/sass/scrollbar.scss @@ -1,48 +1,40 @@ -/* 滚动条美化 */ -::-webkit-scrollbar { - width: 10px; - height: 10px; -} - -/*滚动条滑块隐藏*/ -::-webkit-scrollbar-thumb { - border-radius: 10px; - background: rgba(0, 0, 0, 0); -} - -/*按下滚动条，颜色加深*/ -::-webkit-scrollbar-thumb:active { - border-radius: 10px; - background: rgba(0, 0, 0, .5); -} - -/*鼠标浮到容器上，让该容器的滚动条滑块显示*/ -:hover::-webkit-scrollbar-thumb { - border: 2px solid transparent; - background: rgba(0, 0, 0, .2); - background-clip: content-box; -} - -/*鼠标浮到容器上，让该容器的滚动条滑块显示*/ -:hover::-webkit-scrollbar-thumb:hover { - border-top-width: 0; - border-bottom-width: 0; -} - -/*滚动条轨道*/ -::-webkit-scrollbar-track { - border-radius: 10px; - background: rgba(0, 0, 0, 0); -} - -.overlay { - overflow: overlay !important; -} - -.overlay-x { - overflow-x: overlay !important; -} - .overlay-y { overflow-y: overlay !important; + + /* 滚动条美化 */ + &::-webkit-scrollbar { + width: 10px; + height: 10px; + } + + /*滚动条滑块隐藏*/ + &::-webkit-scrollbar-thumb { + border-radius: 10px; + background: rgba(0, 0, 0, 0); + } + + /*按下滚动条，颜色加深*/ + &::-webkit-scrollbar-thumb:active { + border-radius: 10px; + background: rgba(0, 0, 0, .5); + } + + /*鼠标浮到容器上，让该容器的滚动条滑块显示*/ + &:hover::-webkit-scrollbar-thumb { + border: 2px solid transparent; + background: rgba(0, 0, 0, .2); + background-clip: content-box; + } + + /*鼠标浮到容器上，让该容器的滚动条滑块显示*/ + &:hover::-webkit-scrollbar-thumb:hover { + border-top-width: 0; + border-bottom-width: 0; + } + + /*滚动条轨道*/ + &::-webkit-scrollbar-track { + border-radius: 10px; + background: rgba(0, 0, 0, 0); + } }