From b36874538051c56d9c76485d4485f7b3c164aad3 Mon Sep 17 00:00:00 2001 From: 疯狂的狮子li <15040126243@163.com> Date: 星期三, 06 一月 2021 09:35:00 +0800 Subject: [PATCH] Merge branch 'master' of https://gitee.com/y_project/RuoYi-Vue --- /dev/null | 68 -------- ruoyi-common/src/main/java/com/ruoyi/common/constant/GenConstants.java | 7 ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm | 27 ++ ruoyi-ui/package.json | 4 ruoyi-ui/src/views/tool/gen/index.vue | 19 ++ ruoyi-ui/src/components/HeaderSearch/index.vue | 2 ruoyi-ui/src/views/tool/gen/editTable.vue | 3 ruoyi-ui/src/main.js | 4 ruoyi-generator/src/main/resources/vm/vue/index.vue.vm | 28 ++ ruoyi-ui/src/components/FileUpload/index.vue | 178 ++++++++++++++++++++++ ruoyi-ui/src/components/ImageUpload/index.vue | 100 ++++++++++++ ruoyi-generator/src/main/java/com/ruoyi/generator/util/GenUtils.java | 9 12 files changed, 355 insertions(+), 94 deletions(-) diff --git a/ruoyi-common/src/main/java/com/ruoyi/common/constant/GenConstants.java b/ruoyi-common/src/main/java/com/ruoyi/common/constant/GenConstants.java index 40a4d63..6baaa8c 100644 --- a/ruoyi-common/src/main/java/com/ruoyi/common/constant/GenConstants.java +++ b/ruoyi-common/src/main/java/com/ruoyi/common/constant/GenConstants.java @@ -76,8 +76,11 @@ /** 鏃ユ湡鎺т欢 */ public static final String HTML_DATETIME = "datetime"; - /** 涓婁紶鎺т欢 */ - public static final String HTML_UPLOAD_IMAGE = "uploadImage"; + /** 鍥剧墖涓婁紶鎺т欢 */ + public static final String HTML_IMAGE_UPLOAD = "imageUpload"; + + /** 鏂囦欢涓婁紶鎺т欢 */ + public static final String HTML_FILE_UPLOAD = "fileUpload"; /** 瀵屾枃鏈帶浠� */ public static final String HTML_EDITOR = "editor"; diff --git a/ruoyi-generator/src/main/java/com/ruoyi/generator/util/GenUtils.java b/ruoyi-generator/src/main/java/com/ruoyi/generator/util/GenUtils.java index ded1587..06c6821 100644 --- a/ruoyi-generator/src/main/java/com/ruoyi/generator/util/GenUtils.java +++ b/ruoyi-generator/src/main/java/com/ruoyi/generator/util/GenUtils.java @@ -112,10 +112,15 @@ { column.setHtmlType(GenConstants.HTML_SELECT); } - // 鏂囦欢瀛楁璁剧疆涓婁紶鎺т欢 + // 鍥剧墖瀛楁璁剧疆鍥剧墖涓婁紶鎺т欢 else if (StringUtils.endsWithIgnoreCase(columnName, "image")) { - column.setHtmlType(GenConstants.HTML_UPLOAD_IMAGE); + column.setHtmlType(GenConstants.HTML_IMAGE_UPLOAD); + } + // 鏂囦欢瀛楁璁剧疆鏂囦欢涓婁紶鎺т欢 + else if (StringUtils.endsWithIgnoreCase(columnName, "file")) + { + column.setHtmlType(GenConstants.HTML_FILE_UPLOAD); } // 鍐呭瀛楁璁剧疆瀵屾枃鏈帶浠� else if (StringUtils.endsWithIgnoreCase(columnName, "content")) diff --git a/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm b/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm index f12eb2f..2f954f8 100644 --- a/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm +++ b/ruoyi-generator/src/main/resources/vm/vue/index-tree.vue.vm @@ -153,9 +153,13 @@ <el-form-item label="${comment}" prop="${field}"> <el-input v-model="form.${field}" placeholder="璇疯緭鍏�${comment}" /> </el-form-item> -#elseif($column.htmlType == "uploadImage") +#elseif($column.htmlType == "imageUpload") <el-form-item label="${comment}"> - <uploadImage v-model="form.${field}"/> + <imageUpload v-model="form.${field}"/> + </el-form-item> +#elseif($column.htmlType == "fileUpload") + <el-form-item label="${comment}"> + <imageUpload v-model="form.${field}"/> </el-form-item> #elseif($column.htmlType == "editor") <el-form-item label="${comment}"> @@ -244,8 +248,13 @@ import Treeselect from "@riophae/vue-treeselect"; import "@riophae/vue-treeselect/dist/vue-treeselect.css"; #foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage") -import UploadImage from '@/components/UploadImage'; +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload") +import ImageUpload from '@/components/ImageUpload'; +#break +#end +#end +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "fileUpload") +import FileUpload from '@/components/FileUpload'; #break #end #end @@ -260,8 +269,14 @@ name: "${BusinessName}", components: { #foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage") - UploadImage, +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload") + ImageUpload, +#break +#end +#end +#foreach($column in $columns) +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "fileUpload") + FileUpload, #break #end #end diff --git a/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm b/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm index 2e8b05d..c86f072 100644 --- a/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm +++ b/ruoyi-generator/src/main/resources/vm/vue/index.vue.vm @@ -185,9 +185,13 @@ <el-form-item label="${comment}" prop="${field}"> <el-input v-model="form.${field}" placeholder="璇疯緭鍏�${comment}" /> </el-form-item> -#elseif($column.htmlType == "uploadImage") +#elseif($column.htmlType == "imageUpload") <el-form-item label="${comment}"> - <uploadImage v-model="form.${field}"/> + <imageUpload v-model="form.${field}"/> + </el-form-item> +#elseif($column.htmlType == "fileUpload") + <el-form-item label="${comment}"> + <fileUpload v-model="form.${field}"/> </el-form-item> #elseif($column.htmlType == "editor") <el-form-item label="${comment}"> @@ -274,8 +278,14 @@ <script> import { list${BusinessName}, get${BusinessName}, del${BusinessName}, add${BusinessName}, update${BusinessName}, export${BusinessName} } from "@/api/${moduleName}/${businessName}"; #foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage") -import UploadImage from '@/components/UploadImage'; +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload") +import ImageUpload from '@/components/ImageUpload'; +#break +#end +#end +#foreach($column in $columns) +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "fileUpload") +import FileUpload from '@/components/FileUpload'; #break #end #end @@ -290,8 +300,14 @@ name: "${BusinessName}", components: { #foreach($column in $columns) -#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "uploadImage") - UploadImage, +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "imageUpload") + ImageUpload, +#break +#end +#end +#foreach($column in $columns) +#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "fileUpload") + FileUpload, #break #end #end diff --git a/ruoyi-ui/package.json b/ruoyi-ui/package.json index b64fab0..398bac5 100644 --- a/ruoyi-ui/package.json +++ b/ruoyi-ui/package.json @@ -44,7 +44,7 @@ "element-ui": "2.14.1", "file-saver": "2.0.4", "fuse.js": "6.4.3", - "highlight.js": "10.4.1", + "highlight.js": "9.18.5", "js-beautify": "1.13.0", "js-cookie": "2.2.1", "jsencrypt": "3.0.0-rc.1", @@ -69,8 +69,8 @@ "eslint": "7.15.0", "eslint-plugin-vue": "7.2.0", "lint-staged": "10.5.3", - "sass": "1.30.0", "runjs": "4.4.2", + "sass": "1.32.0", "sass-loader": "10.1.0", "script-ext-html-webpack-plugin": "2.1.5", "svg-sprite-loader": "5.1.1", diff --git a/ruoyi-ui/src/components/FileUpload/index.vue b/ruoyi-ui/src/components/FileUpload/index.vue new file mode 100644 index 0000000..841d3ae --- /dev/null +++ b/ruoyi-ui/src/components/FileUpload/index.vue @@ -0,0 +1,178 @@ +<template> + <div class="upload-file"> + <el-upload + :action="uploadFileUrl" + :before-upload="handleBeforeUpload" + :file-list="fileList" + :limit="1" + :on-error="handleUploadError" + :on-exceed="handleExceed" + :on-success="handleUploadSuccess" + :show-file-list="false" + :headers="headers" + class="upload-file-uploader" + ref="upload" + > + <!-- 涓婁紶鎸夐挳 --> + <el-button size="mini" type="primary">閫夊彇鏂囦欢</el-button> + <!-- 涓婁紶鎻愮ず --> + <div class="el-upload__tip" slot="tip" v-if="showTip"> + 璇蜂笂浼� + <template v-if="fileSize"> 澶у皬涓嶈秴杩� <b style="color: #f56c6c">{{ fileSize }}MB</b> </template> + <template v-if="fileType"> 鏍煎紡涓� <b style="color: #f56c6c">{{ fileType.join("/") }}</b> </template> + 鐨勬枃浠� + </div> + </el-upload> + + <!-- 鏂囦欢鍒楄〃 --> + <transition-group class="upload-file-list el-upload-list el-upload-list--text" name="el-fade-in-linear" tag="ul"> + <li :key="file.uid" class="el-upload-list__item ele-upload-list__item-content" v-for="(file, index) in list"> + <el-link :href="file.url" :underline="false" target="_blank"> + <span class="el-icon-document"> {{ getFileName(file.name) }} </span> + </el-link> + <div class="ele-upload-list__item-content-action"> + <el-link :underline="false" @click="handleDelete(index)" type="danger">鍒犻櫎</el-link> + </div> + </li> + </transition-group> + </div> +</template> + +<script> +import { getToken } from "@/utils/auth"; + +export default { + props: { + // 鍊� + value: [String, Object, Array], + // 澶у皬闄愬埗(MB) + fileSize: { + type: Number, + default: 5, + }, + // 鏂囦欢绫诲瀷, 渚嬪['png', 'jpg', 'jpeg'] + fileType: { + type: Array, + default: () => ["doc", "xls", "ppt", "txt", "pdf"], + }, + // 鏄惁鏄剧ず鎻愮ず + isShowTip: { + type: Boolean, + default: true + } + }, + data() { + return { + uploadFileUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 + headers: { + Authorization: "Bearer " + getToken(), + }, + fileList: [], + }; + }, + computed: { + // 鏄惁鏄剧ず鎻愮ず + showTip() { + return this.isShowTip && (this.fileType || this.fileSize); + }, + // 鍒楄〃 + list() { + let temp = 1; + if (this.value) { + // 棣栧厛灏嗗�艰浆涓烘暟缁� + const list = Array.isArray(this.value) ? this.value : [this.value]; + // 鐒跺悗灏嗘暟缁勮浆涓哄璞℃暟缁� + return list.map((item) => { + if (typeof item === "string") { + item = { name: item, url: item }; + } + item.uid = item.uid || new Date().getTime() + temp++; + return item; + }); + } else { + return []; + } + }, + }, + methods: { + // 涓婁紶鍓嶆牎妫�鏍煎紡鍜屽ぇ灏� + handleBeforeUpload(file) { + // 鏍℃鏂囦欢绫诲瀷 + if (this.fileType) { + let fileExtension = ""; + if (file.name.lastIndexOf(".") > -1) { + fileExtension = file.name.slice(file.name.lastIndexOf(".") + 1); + } + const isTypeOk = this.fileType.some((type) => { + if (file.type.indexOf(type) > -1) return true; + if (fileExtension && fileExtension.indexOf(type) > -1) return true; + return false; + }); + if (!isTypeOk) { + this.$message.error(`鏂囦欢鏍煎紡涓嶆纭�, 璇蜂笂浼�${this.fileType.join("/")}鏍煎紡鏂囦欢!`); + return false; + } + } + // 鏍℃鏂囦欢澶у皬 + if (this.fileSize) { + const isLt = file.size / 1024 / 1024 < this.fileSize; + if (!isLt) { + this.$message.error(`涓婁紶鏂囦欢澶у皬涓嶈兘瓒呰繃 ${this.fileSize} MB!`); + return false; + } + } + return true; + }, + // 鏂囦欢涓暟瓒呭嚭 + handleExceed() { + this.$message.error(`鍙厑璁镐笂浼犲崟涓枃浠禶); + }, + // 涓婁紶澶辫触 + handleUploadError(err) { + this.$message.error("涓婁紶澶辫触, 璇烽噸璇�"); + }, + // 涓婁紶鎴愬姛鍥炶皟 + handleUploadSuccess(res, file) { + this.$message.success("涓婁紶鎴愬姛"); + this.$emit("input", res.url); + }, + // 鍒犻櫎鏂囦欢 + handleDelete(index) { + this.fileList.splice(index, 1); + this.$emit("input", ''); + }, + // 鑾峰彇鏂囦欢鍚嶇О + getFileName(name) { + if (name.lastIndexOf("/") > -1) { + return name.slice(name.lastIndexOf("/") + 1).toLowerCase(); + } else { + return ""; + } + } + }, + created() { + this.fileList = this.list; + }, +}; +</script> + +<style scoped lang="scss"> +.upload-file-uploader { + margin-bottom: 5px; +} +.upload-file-list .el-upload-list__item { + border: 1px solid #e4e7ed; + line-height: 2; + margin-bottom: 10px; + position: relative; +} +.upload-file-list .ele-upload-list__item-content { + display: flex; + justify-content: space-between; + align-items: center; + color: inherit; +} +.ele-upload-list__item-content-action .el-link { + margin-right: 10px; +} +</style> \ No newline at end of file diff --git a/ruoyi-ui/src/components/HeaderSearch/index.vue b/ruoyi-ui/src/components/HeaderSearch/index.vue index 67f6c30..ce9f305 100644 --- a/ruoyi-ui/src/components/HeaderSearch/index.vue +++ b/ruoyi-ui/src/components/HeaderSearch/index.vue @@ -20,7 +20,7 @@ <script> // fuse is a lightweight fuzzy-search module // make search results more in line with expectations -import Fuse from 'fuse.js' +import Fuse from 'fuse.js/dist/fuse.min.js' import path from 'path' export default { diff --git a/ruoyi-ui/src/components/ImageUpload/index.vue b/ruoyi-ui/src/components/ImageUpload/index.vue new file mode 100644 index 0000000..ce540eb --- /dev/null +++ b/ruoyi-ui/src/components/ImageUpload/index.vue @@ -0,0 +1,100 @@ +<template> + <div class="component-upload-image"> + <el-upload + :action="uploadImgUrl" + list-type="picture-card" + :on-success="handleUploadSuccess" + :before-upload="handleBeforeUpload" + :on-error="handleUploadError" + name="file" + :show-file-list="false" + :headers="headers" + style="display: inline-block; vertical-align: top" + > + <el-image v-if="!value" :src="value"> + <div slot="error" class="image-slot"> + <i class="el-icon-plus" /> + </div> + </el-image> + <div v-else class="image"> + <el-image :src="value" :style="`width:150px;height:150px;`" fit="fill"/> + <div class="mask"> + <div class="actions"> + <span title="棰勮" @click.stop="dialogVisible = true"> + <i class="el-icon-zoom-in" /> + </span> + <span title="绉婚櫎" @click.stop="removeImage"> + <i class="el-icon-delete" /> + </span> + </div> + </div> + </div> + </el-upload> + <el-dialog :visible.sync="dialogVisible" title="棰勮" width="800" append-to-body> + <img :src="value" style="display: block; max-width: 100%; margin: 0 auto;"> + </el-dialog> + </div> +</template> + +<script> +import { getToken } from "@/utils/auth"; + +export default { + data() { + return { + dialogVisible: false, + uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 + headers: { + Authorization: "Bearer " + getToken(), + }, + }; + }, + props: { + value: { + type: String, + default: "", + }, + }, + methods: { + removeImage() { + this.$emit("input", ""); + }, + handleUploadSuccess(res) { + this.$emit("input", res.url); + this.loading.close(); + }, + handleBeforeUpload() { + this.loading = this.$loading({ + lock: true, + text: "涓婁紶涓�", + background: "rgba(0, 0, 0, 0.7)", + }); + }, + handleUploadError() { + this.$message({ + type: "error", + message: "涓婁紶澶辫触", + }); + this.loading.close(); + }, + }, + watch: {}, +}; +</script> + +<style scoped lang="scss"> +.image { + position: relative; + .mask { + opacity: 0; + position: absolute; + top: 0; + width: 100%; + background-color: rgba(0, 0, 0, 0.5); + transition: all 0.3s; + } + &:hover .mask { + opacity: 1; + } +} +</style> \ No newline at end of file diff --git a/ruoyi-ui/src/components/UploadImage/index.vue b/ruoyi-ui/src/components/UploadImage/index.vue deleted file mode 100644 index 3941006..0000000 --- a/ruoyi-ui/src/components/UploadImage/index.vue +++ /dev/null @@ -1,68 +0,0 @@ -<template> - <div class="component-upload-image"> - <el-upload - :action="uploadImgUrl" - list-type="picture-card" - :on-success="handleUploadSuccess" - :before-upload="handleBeforeUpload" - :on-error="handleUploadError" - name="file" - :show-file-list="false" - :headers="headers" - style="display: inline-block; vertical-align: top" - > - <img v-if="value" :src="value" class="avatar" /> - <i v-else class="el-icon-plus avatar-uploader-icon"></i> - </el-upload> - </div> -</template> - -<script> -import { getToken } from "@/utils/auth"; - -export default { - components: {}, - data() { - return { - uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/upload", // 涓婁紶鐨勫浘鐗囨湇鍔″櫒鍦板潃 - headers: { - Authorization: "Bearer " + getToken(), - }, - }; - }, - props: { - value: { - type: String, - default: "", - }, - }, - methods: { - handleUploadSuccess(res) { - this.$emit("input", res.url); - this.loading.close(); - }, - handleBeforeUpload() { - this.loading = this.$loading({ - lock: true, - text: "涓婁紶涓�", - background: "rgba(0, 0, 0, 0.7)", - }); - }, - handleUploadError() { - this.$message({ - type: "error", - message: "涓婁紶澶辫触", - }); - this.loading.close(); - }, - }, - watch: {}, -}; -</script> - -<style scoped lang="scss"> -.avatar { - width: 100%; - height: 100%; -} -</style> \ No newline at end of file diff --git a/ruoyi-ui/src/main.js b/ruoyi-ui/src/main.js index 678431f..5668d91 100644 --- a/ruoyi-ui/src/main.js +++ b/ruoyi-ui/src/main.js @@ -20,9 +20,6 @@ import Pagination from "@/components/Pagination"; // 鑷畾涔夎〃鏍煎伐鍏锋墿灞� import RightToolbar from "@/components/RightToolbar" -// 浠g爜楂樹寒鎻掍欢 -import hljs from 'highlight.js' -import 'highlight.js/styles/github-gist.css' // 鍏ㄥ眬鏂规硶鎸傝浇 Vue.prototype.getDicts = getDicts @@ -52,7 +49,6 @@ Vue.component('RightToolbar', RightToolbar) Vue.use(permission) -Vue.use(hljs.vuePlugin); /** * If you don't want to use mock-server diff --git a/ruoyi-ui/src/views/tool/gen/editTable.vue b/ruoyi-ui/src/views/tool/gen/editTable.vue index 9ecab45..62a8314 100644 --- a/ruoyi-ui/src/views/tool/gen/editTable.vue +++ b/ruoyi-ui/src/views/tool/gen/editTable.vue @@ -90,7 +90,8 @@ <el-option label="鍗曢�夋" value="radio" /> <el-option label="澶嶉�夋" value="checkbox" /> <el-option label="鏃ユ湡鎺т欢" value="datetime" /> - <el-option label="涓婁紶鎺т欢" value="uploadImage" /> + <el-option label="鍥剧墖涓婁紶" value="imageUpload" /> + <el-option label="鏂囦欢涓婁紶" value="fileUpload" /> <el-option label="瀵屾枃鏈帶浠�" value="editor" /> </el-select> </template> diff --git a/ruoyi-ui/src/views/tool/gen/index.vue b/ruoyi-ui/src/views/tool/gen/index.vue index ad9dd2e..7025796 100644 --- a/ruoyi-ui/src/views/tool/gen/index.vue +++ b/ruoyi-ui/src/views/tool/gen/index.vue @@ -169,7 +169,7 @@ :name="key.substring(key.lastIndexOf('/')+1,key.indexOf('.vm'))" :key="key" > - <highlightjs autodetect :code="value" /> + <pre><code class="hljs" v-html="highlightedCode(value, key)"></code></pre> </el-tab-pane> </el-tabs> </el-dialog> @@ -181,6 +181,14 @@ import { listTable, previewTable, delTable, genCode, synchDb } from "@/api/tool/gen"; import importTable from "./importTable"; import { downLoadZip } from "@/utils/zipdownload"; +import hljs from "highlight.js/lib/highlight"; +import "highlight.js/styles/github-gist.css"; +hljs.registerLanguage("java", require("highlight.js/lib/languages/java")); +hljs.registerLanguage("xml", require("highlight.js/lib/languages/xml")); +hljs.registerLanguage("html", require("highlight.js/lib/languages/xml")); +hljs.registerLanguage("vue", require("highlight.js/lib/languages/xml")); +hljs.registerLanguage("javascript", require("highlight.js/lib/languages/javascript")); +hljs.registerLanguage("sql", require("highlight.js/lib/languages/sql")); export default { name: "Gen", @@ -294,6 +302,13 @@ this.preview.open = true; }); }, + /** 楂樹寒鏄剧ず */ + highlightedCode(code, key) { + const vmName = key.substring(key.lastIndexOf("/") + 1, key.indexOf(".vm")); + var language = vmName.substring(vmName.indexOf(".") + 1, vmName.length); + const result = hljs.highlight(language, code || "", true); + return result.value || ' '; + }, // 澶氶�夋閫変腑鏁版嵁 handleSelectionChange(selection) { this.ids = selection.map(item => item.tableId); @@ -322,4 +337,4 @@ } } }; -</script> \ No newline at end of file +</script> -- Gitblit v1.9.3