feat(admin): Support form multi file component & fixed richtext error

GoAdminGroup · Mar 8, 2020 · 121621f · 121621f
1 parent 34bf64a
commit 121621f
Show file tree

Hide file tree

Showing 13 changed files with 162 additions and 122 deletions.
diff --git a/adminlte/resource/adminlte/adminlte.css b/adminlte/resource/adminlte/adminlte.css
@@ -93,10 +93,6 @@
     display: inline-block;
 }
 
-.w-e-toolbar {
-    overflow: scroll;
-}
-
 .navbar-static-top .nav-tabs > li.active > a, navbar-static-top .nav-tabs > li.active > a:focus, navbar-static-top .nav-tabs > li.active > a:hover {
     color: #555;
     cursor: default;
@@ -135,4 +131,17 @@ form .select2-selection.select2-selection--single {
 
 form .select2-selection__rendered {
     line-height: 28px !important;
+}
+
+form .select2-selection.select2-selection--multiple .select2-selection__choice {
+    height: 24px;
+    line-height: 19px;
+}
+
+form .select2-selection.select2-selection--multiple {
+    height: 34px;
+}
+
+form .select2-selection.select2-selection--multiple .select2-selection__clear {
+    margin-top: 3px !important;
 }
diff --git a/adminlte/resource/assets.go b/adminlte/resource/assets.go
diff --git a/adminlte/resource/assets/dist/css/all.min.css b/adminlte/resource/assets/dist/css/all.min.css
diff --git a/adminlte/template.go b/adminlte/template.go
@@ -233,15 +233,7 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
            data-initial-caption="{{.Value}}">
     <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
     <script>
-        $("input.{{.Field}}").fileinput({
-            "overwriteInitial": true,
-            "initialPreviewAsData": true,
-            "browseLabel": "Browse",
-            "showRemove": false,
-            "previewClass": "preview-{{.Field}}",
-            "showUpload": false,
-            "allowedFileTypes": ["image"]
-        });
+        $("input.{{.Field}}").fileinput({{.OptionExt}});
         $(".preview-{{.Field}} .close.fileinput-remove").on("click", function (e) {
             $(".{{.Field}}__delete_flag").val("1")
         });
@@ -275,6 +267,16 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
                value='{{.Value}}' class="form-control json"
                placeholder="{{.Placeholder}}">
     </div>
+{{end}}`,"components/form/multi_file":`{{define "form_multi_file"}}
+    <input type="file" class="{{.Field}}" name="{{.Field}}" multiple data-initial-preview="{{.Value2}}"
+           data-initial-caption="{{.Value}}">
+    <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
+    <script>
+        $("input.{{.Field}}").fileinput({{.OptionExt}});
+        $(".preview-{{.Field}} .close.fileinput-remove").on("click", function (e) {
+            $(".{{.Field}}__delete_flag").val("1")
+        });
+    </script>
 {{end}}`,"components/form/number":`{{define "form_number"}}
     <div class="input-group">
         <input {{if .Must}}required="1"{{end}} style="width: 100px; text-align: center;" type="text" id="{{.Field}}"
@@ -354,19 +356,22 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
     </script>
 {{end}}`,"components/form/richtext":`{{define "form_rich_text"}}
     <div id="{{.Field}}-editor">
-        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
     </div>
     <input type="hidden" id="{{.Field}}" name="{{.Field}}" value='{{.Value}}'
            placeholder="{{.Placeholder}}">
     <script type="text/javascript">
-        editor = new window.wangEditor('#{{.Field}}-editor');
-        editor.customConfig.onchange = function (html) {
+        {{$field := (js .Field)}}
+        {{$field}}editor = new window.wangEditor('#{{.Field}}-editor');
+        {{$field}}editor.customConfig.onchange = function (html) {
             $('#{{.Field}}').val(html)
         };
-        editor.create();
-        editor.txt.html('{{.Value}}');
+        {{$field}}editor.customConfig.uploadImgServer = '/editor/imgs/upload';
+        {{$field}}editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
+        {{$field}}editor.customConfig.uploadImgMaxLength = 5;
+        {{$field}}editor.create();
+        {{$field}}editor.txt.html('{{.Value}}');
         {{if not .Editable}}
-        editor.$textElem.attr('contenteditable', false);
+        {{$field}}editor.$textElem.attr('contenteditable', false);
         {{end}}
     </script>
 {{end}}`,"components/form/select":`{{define "form_select"}}
@@ -532,6 +537,8 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
         {{ template "form_text" .  }}
     {{else if eq .FormType.String "file"}}
         {{ template "form_file" .  }}
+    {{else if eq .FormType.String "multi_file"}}
+        {{ template "form_multi_file" .  }}
     {{else if eq .FormType.String "password"}}
         {{ template "form_password" .  }}
     {{else if eq .FormType.String "selectbox"}}

diff --git a/common/assets/js/form/3_wangEditor.min.js b/common/assets/js/form/3_wangEditor.min.js
diff --git a/common/pages/components/form/file.tmpl b/common/pages/components/form/file.tmpl
@@ -3,15 +3,7 @@
            data-initial-caption="{{.Value}}">
     <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
     <script>
-        $("input.{{.Field}}").fileinput({
-            "overwriteInitial": true,
-            "initialPreviewAsData": true,
-            "browseLabel": "Browse",
-            "showRemove": false,
-            "previewClass": "preview-{{.Field}}",
-            "showUpload": false,
-            "allowedFileTypes": ["image"]
-        });
+        $("input.{{.Field}}").fileinput({{.OptionExt}});
         $(".preview-{{.Field}} .close.fileinput-remove").on("click", function (e) {
             $(".{{.Field}}__delete_flag").val("1")
         });

diff --git a/common/pages/components/form/multi_file.tmpl b/common/pages/components/form/multi_file.tmpl
@@ -0,0 +1,11 @@
+{{define "form_multi_file"}}
+    <input type="file" class="{{.Field}}" name="{{.Field}}" multiple data-initial-preview="{{.Value2}}"
+           data-initial-caption="{{.Value}}">
+    <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
+    <script>
+        $("input.{{.Field}}").fileinput({{.OptionExt}});
+        $(".preview-{{.Field}} .close.fileinput-remove").on("click", function (e) {
+            $(".{{.Field}}__delete_flag").val("1")
+        });
+    </script>
+{{end}}
diff --git a/common/pages/components/form/richtext.tmpl b/common/pages/components/form/richtext.tmpl
@@ -1,18 +1,21 @@
 {{define "form_rich_text"}}
     <div id="{{.Field}}-editor">
-        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
     </div>
     <input type="hidden" id="{{.Field}}" name="{{.Field}}" value='{{.Value}}'
            placeholder="{{.Placeholder}}">
     <script type="text/javascript">
-        editor = new window.wangEditor('#{{.Field}}-editor');
-        editor.customConfig.onchange = function (html) {
+        {{$field := (js .Field)}}
+        {{$field}}editor = new window.wangEditor('#{{.Field}}-editor');
+        {{$field}}editor.customConfig.onchange = function (html) {
             $('#{{.Field}}').val(html)
         };
-        editor.create();
-        editor.txt.html('{{.Value}}');
+        {{$field}}editor.customConfig.uploadImgServer = '/editor/imgs/upload';
+        {{$field}}editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
+        {{$field}}editor.customConfig.uploadImgMaxLength = 5;
+        {{$field}}editor.create();
+        {{$field}}editor.txt.html('{{.Value}}');
         {{if not .Editable}}
-        editor.$textElem.attr('contenteditable', false);
+        {{$field}}editor.$textElem.attr('contenteditable', false);
         {{end}}
     </script>
 {{end}}
diff --git a/common/pages/components/form_components.tmpl b/common/pages/components/form_components.tmpl
@@ -5,6 +5,8 @@
         {{ template "form_text" .  }}
     {{else if eq .FormType.String "file"}}
         {{ template "form_file" .  }}
+    {{else if eq .FormType.String "multi_file"}}
+        {{ template "form_multi_file" .  }}
     {{else if eq .FormType.String "password"}}
         {{ template "form_password" .  }}
     {{else if eq .FormType.String "selectbox"}}

diff --git a/sword/resource/assets.go b/sword/resource/assets.go
diff --git a/sword/resource/assets/dist/css/all.min.css b/sword/resource/assets/dist/css/all.min.css
diff --git a/sword/resource/sword/sword.css b/sword/resource/sword/sword.css
@@ -105,10 +105,6 @@ body {
     background-color: #04142a !important;
 }
 
-.w-e-toolbar {
-    overflow: scroll;
-}
-
 .navbar-static-top .nav-tabs > li.active > a, navbar-static-top .nav-tabs > li.active > a:focus, navbar-static-top .nav-tabs > li.active > a:hover {
     color: #555;
     cursor: default;
@@ -537,4 +533,17 @@ form .select2-selection.select2-selection--single {
 
 form .select2-selection__rendered {
     line-height: 28px !important;
+}
+
+form .select2-selection.select2-selection--multiple .select2-selection__choice {
+    height: 24px;
+    line-height: 19px;
+}
+
+form .select2-selection.select2-selection--multiple {
+    height: 34px;
+}
+
+form .select2-selection.select2-selection--multiple .select2-selection__clear {
+    margin-top: 3px !important;
 }
diff --git a/sword/template.go b/sword/template.go
@@ -227,15 +227,7 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
            data-initial-caption="{{.Value}}">
     <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
     <script>
-        $("input.{{.Field}}").fileinput({
-            "overwriteInitial": true,
-            "initialPreviewAsData": true,
-            "browseLabel": "Browse",
-            "showRemove": false,
-            "previewClass": "preview-{{.Field}}",
-            "showUpload": false,
-            "allowedFileTypes": ["image"]
-        });
+        $("input.{{.Field}}").fileinput({{.OptionExt}});
         $(".preview-{{.Field}} .close.fileinput-remove").on("click", function (e) {
             $(".{{.Field}}__delete_flag").val("1")
         });
@@ -269,6 +261,16 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
                value='{{.Value}}' class="form-control json"
                placeholder="{{.Placeholder}}">
     </div>
+{{end}}`,"components/form/multi_file":`{{define "form_multi_file"}}
+    <input type="file" class="{{.Field}}" name="{{.Field}}" multiple data-initial-preview="{{.Value2}}"
+           data-initial-caption="{{.Value}}">
+    <input type="hidden" value="0" name="{{.Field}}__delete_flag" class="{{.Field}}__delete_flag">
+    <script>
+        $("input.{{.Field}}").fileinput({{.OptionExt}});
+        $(".preview-{{.Field}} .close.fileinput-remove").on("click", function (e) {
+            $(".{{.Field}}__delete_flag").val("1")
+        });
+    </script>
 {{end}}`,"components/form/number":`{{define "form_number"}}
     <div class="input-group">
         <input {{if .Must}}required="1"{{end}} style="width: 100px; text-align: center;" type="text" id="{{.Field}}"
@@ -348,19 +350,22 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
     </script>
 {{end}}`,"components/form/richtext":`{{define "form_rich_text"}}
     <div id="{{.Field}}-editor">
-        <p>欢迎使用 <b>wangEditor</b> 富文本编辑器</p>
     </div>
     <input type="hidden" id="{{.Field}}" name="{{.Field}}" value='{{.Value}}'
            placeholder="{{.Placeholder}}">
     <script type="text/javascript">
-        editor = new window.wangEditor('#{{.Field}}-editor');
-        editor.customConfig.onchange = function (html) {
+        {{$field := (js .Field)}}
+        {{$field}}editor = new window.wangEditor('#{{.Field}}-editor');
+        {{$field}}editor.customConfig.onchange = function (html) {
             $('#{{.Field}}').val(html)
         };
-        editor.create();
-        editor.txt.html('{{.Value}}');
+        {{$field}}editor.customConfig.uploadImgServer = '/editor/imgs/upload';
+        {{$field}}editor.customConfig.uploadImgMaxSize = 3 * 1024 * 1024;
+        {{$field}}editor.customConfig.uploadImgMaxLength = 5;
+        {{$field}}editor.create();
+        {{$field}}editor.txt.html('{{.Value}}');
         {{if not .Editable}}
-        editor.$textElem.attr('contenteditable', false);
+        {{$field}}editor.$textElem.attr('contenteditable', false);
         {{end}}
     </script>
 {{end}}`,"components/form/select":`{{define "form_select"}}
@@ -526,6 +531,8 @@ var TemplateList = map[string]string{"admin_panel":`{{define "admin_panel"}}
         {{ template "form_text" .  }}
     {{else if eq .FormType.String "file"}}
         {{ template "form_file" .  }}
+    {{else if eq .FormType.String "multi_file"}}
+        {{ template "form_multi_file" .  }}
     {{else if eq .FormType.String "password"}}
         {{ template "form_password" .  }}
     {{else if eq .FormType.String "selectbox"}}