代码生成支持上传控件

ruoyi-admin/src/main/resources/static/css/style.css

@@ -1829,6 +1829,10 @@ table.dataTable thead .sorting:after {
     font-size: 14px;
 }
 
+.form-control.kv-fileinput-caption {
+    height: 34px!important;
+}
+
 .form-control:focus, .single-line:focus {
     border-color: #3c8dbc !important;
 }
@@ -4917,14 +4921,13 @@ dd.project-people {
     font-size: 10px;
     text-transform: uppercase;
 }
-
 /* Chat view */
 .message-input {
     height: 90px !important;
 }
 
 .chat-avatar {
-    width: 36px;
+    white: 36px;
     height: 36px;
     float: left;
     margin-right: 10px;
@@ -4951,10 +4954,9 @@ dd.project-people {
     margin-left: -30px;
 }
 
-@media (max-width: 992px) {
-    .chat-users,
-    .chat-statistic {
-        margin-left: 0;
+@media ( max-width : 992px) {
+    .chat-users, .chat-statistic {
+        margin-left: 0px;
     }
 }
 
@@ -4974,12 +4976,12 @@ dd.project-people {
     margin-top: 1px;
 }
 
-.chat-discussion .chat-message.left .message-avatar {
+.chat-discussion .chat-message:nth-child(2n+1) .message-avatar {
     float: left;
     margin-right: 10px;
 }
 
-.chat-discussion .chat-message.right .message-avatar {
+.chat-discussion .chat-message:nth-child(2n) .message-avatar {
     float: right;
     margin-left: 10px;
 }
@@ -4994,20 +4996,20 @@ dd.project-people {
     border-radius: 4px;
 }
 
-.chat-discussion .chat-message.left .message-date {
+.chat-discussion .chat-message:nth-child(2n+1) .message-date {
     float: right;
 }
 
-.chat-discussion .chat-message.right .message-date {
+.chat-discussion .chat-message:nth-child(2n) .message-date {
     float: left;
 }
 
-.chat-discussion .chat-message.left .message {
+.chat-discussion .chat-message:nth-child(2n+1) .message {
     text-align: left;
     margin-left: 55px;
 }
 
-.chat-discussion .chat-message.right .message {
+.chat-discussion .chat-message:nth-child(2n) .message {
     text-align: right;
     margin-right: 55px;
 }
@@ -5036,7 +5038,6 @@ dd.project-people {
 .chat-message-form .form-group {
     margin-bottom: 0;
 }
-
 /* jsTree */
 .jstree-open>.jstree-anchor>.fa-folder:before {
     content: "\f07c";

ruoyi-common/src/main/java/com/ruoyi/common/constant/GenConstants.java

@@ -71,6 +71,9 @@ public class GenConstants
     /** 日期控件 */
     public static final String HTML_DATETIME = "datetime";
 
+    /** 上传控件 */
+    public static final String HTML_UPLOAD = "upload";
+
     /** 字符串类型 */
     public static final String TYPE_STRING = "String";
 

ruoyi-generator/src/main/java/com/ruoyi/generator/domain/GenTableColumn.java

@@ -59,7 +59,7 @@ public class GenTableColumn extends BaseEntity
     /** 查询方式（EQ等于、NE不等于、GT大于、LT小于、LIKE模糊、BETWEEN范围） */
     private String queryType;
 
-    /** 显示类型（input文本框、textarea文本域、select下拉框、checkbox复选框、radio单选框、datetime日期控件） */
+    /** 显示类型（input文本框、textarea文本域、select下拉框、checkbox复选框、radio单选框、datetime日期控件、upload上传控件） */
     private String htmlType;
 
     /** 字典类型 */

ruoyi-generator/src/main/java/com/ruoyi/generator/util/GenUtils.java

@@ -111,6 +111,11 @@ public class GenUtils
         {
             column.setHtmlType(GenConstants.HTML_SELECT);
         }
+        // 文件字段设置上传控件
+        else if (StringUtils.endsWithIgnoreCase(columnName, "file"))
+        {
+            column.setHtmlType(GenConstants.HTML_UPLOAD);
+        }
     }
 
     /**

ruoyi-generator/src/main/resources/templates/tool/gen/edit.html

@@ -520,6 +520,7 @@
     <option value="radio" {{if htmlType==="radio"}}selected{{/if}}>单选框</option>
     <option value="checkbox" {{if htmlType==="checkbox"}}selected{{/if}}>复选框</option>
     <option value="datetime" {{if htmlType==="datetime"}}selected{{/if}}>日期控件</option>
+    <option value="upload" {{if htmlType==="upload"}}selected{{/if}}>上传控件</option>
 </select>
 </div>
 </script>

ruoyi-generator/src/main/resources/vm/html/add.html.vm

@@ -8,6 +8,12 @@
 #break
 #end
 #end
+#foreach($column in $columns)
+#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "upload")
+    <th:block th:include="include :: bootstrap-fileinput-css"/>
+#break
+#end
+#end
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -46,6 +52,16 @@
                     <input name="${field}" class="form-control" type="text"#if($column.required) required#end>
                 </div>
             </div>
+#elseif($column.htmlType == "upload")
+            <div class="form-group">    
+                <label class="col-sm-3 control-label#if($column.required) is-required#end">${comment}：</label>
+                <div class="col-sm-8">
+                    <input type="hidden" name="${field}">
+                    <div class="file-loading">
+                        <input class="form-control file-upload" id="${field}" name="file" type="file">
+                    </div>
+                </div>
+            </div>
 #elseif($column.htmlType == "select" && "" != $dictType)
             <div class="form-group">    
                 <label class="col-sm-3 control-label">${comment}：</label>
@@ -146,6 +162,12 @@
     <th:block th:include="include :: datetimepicker-js" />
 #break
 #end
+#end
+#foreach($column in $columns)
+#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "upload")
+    <th:block th:include="include :: bootstrap-fileinput-js"/>
+#break
+#end
 #end
     <script th:inline="javascript">
         var prefix = ctx + "${moduleName}/${businessName}"
@@ -175,6 +197,21 @@
         });
 #end
 #end
+#foreach($column in $columns)
+#if($column.edit && !$column.superColumn && !$column.pk && $column.htmlType == "upload")
+
+        $(".file-upload").fileinput({
+            uploadUrl: '/common/upload',
+            maxFileCount: 1,
+            autoReplace: true
+        }).on('fileuploaded', function (event, data, previewId, index) {
+            $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
+        }).on('fileremoved', function (event, id, index) {
+            $("input[name='" + event.currentTarget.id + "']").val('')
+        })
+#break
+#end
+#end
 #if($table.tree)
 
         /*${functionName}-新增-选择父部门树*/

ruoyi-generator/src/main/resources/vm/html/edit.html.vm

@@ -8,6 +8,12 @@
 #break
 #end
 #end
+#foreach($column in $columns)
+#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "upload")
+    <th:block th:include="include :: bootstrap-fileinput-css"/>
+#break
+#end
+#end
 </head>
 <body class="white-bg">
     <div class="wrapper wrapper-content animated fadeInRight ibox-content">
@@ -46,6 +52,16 @@
                     <input name="${field}" th:field="*{${field}}" class="form-control" type="text"#if($column.required) required#end>
                 </div>
             </div>
+#elseif($column.htmlType == "upload")
+            <div class="form-group">    
+                <label class="col-sm-3 control-label#if($column.required) is-required#end">${comment}：</label>
+                <div class="col-sm-8">
+                    <input type="hidden" name="${field}" th:field="*{${field}}">
+                    <div class="file-loading">
+                        <input class="form-control file-upload" id="${field}" name="file" type="file">
+                    </div>
+                </div>
+            </div>
 #elseif($column.htmlType == "select" && "" != $dictType)
             <div class="form-group">    
                 <label class="col-sm-3 control-label">${comment}：</label>
@@ -146,6 +162,12 @@
     <th:block th:include="include :: datetimepicker-js" />
 #break
 #end
+#end
+#foreach($column in $columns)
+#if($column.insert && !$column.superColumn && !$column.pk && $column.htmlType == "upload")
+    <th:block th:include="include :: bootstrap-fileinput-js"/>
+#break
+#end
 #end
     <script th:inline="javascript">
         var prefix = ctx + "${moduleName}/${businessName}";
@@ -175,6 +197,27 @@
         });
 #end
 #end
+#foreach($column in $columns)
+#if($column.edit && !$column.superColumn && !$column.pk && $column.htmlType == "upload")
+
+        $(".file-upload").each(function (i) {
+            var val = $("input[name='" + this.id + "']").val()
+            $(this).fileinput({
+                'uploadUrl': '/common/upload',
+                initialPreviewAsData: true,
+                initialPreview: [val],
+                maxFileCount: 1,
+                autoReplace: true
+            }).on('fileuploaded', function (event, data, previewId, index) {
+                $("input[name='" + event.currentTarget.id + "']").val(data.response.url)
+            }).on('fileremoved', function (event, id, index) {
+                $("input[name='" + event.currentTarget.id + "']").val('')
+            })
+            $(this).fileinput('_initFileActions');
+        });
+#break
+#end
+#end
 #if($table.tree)
 
         /*${functionName}-新增-选择父部门树*/