form layout

update

resources/assets/dcat/js/extensions/DialogForm.js

@@ -35,7 +35,10 @@ export default class DialogForm {
             error: nullFun,
         }, options);
 
+        // 表单
         _this.$form = null;
+        // 目标按钮
+        _this.$target = null;
         _this._dialog = w.layer;
         _this._counter = 1;
         _this._idx = {};
@@ -48,23 +51,22 @@ export default class DialogForm {
 
     _execute(options) {
         let _this = this,
-            defUrl = options.defaultUrl,
-            $btn;
+            defUrl = options.defaultUrl;
 
         (! options.buttonSelector) || $(options.buttonSelector).off('click').click(function () {
-            $btn = $(this);
+            _this.$target = $(this);
 
-            let counter = $btn.attr('counter'), url;
+            let counter = _this.$target.attr('counter'), url;
 
             if (! counter) {
                 counter = _this._counter;
 
-                $btn.attr('counter', counter);
+                _this.$target.attr('counter', counter);
 
                 _this._counter++;
             }
 
-            url = $btn.data('url') || defUrl;  // 给弹窗页面链接追加参数
+            url = _this.$target.data('url') || defUrl;  // 给弹窗页面链接追加参数
 
             if (url.indexOf('?') === -1) {
                 url += '?' + options.query + '=1'
@@ -72,16 +74,18 @@ export default class DialogForm {
                 url += '&' + options.query + '=1'
             }
 
-            _this._build($btn, url, counter);
+            _this._build(url, counter);
         });
 
         options.buttonSelector || setTimeout(function () {
-            _this._build($btn, defUrl, _this._counter)
+            _this._build(defUrl, _this._counter)
         }, 400);
     }
 
-    _build($btn, url, counter) {
-        let _this = this;
+    // 构建表单
+    _build(url, counter) {
+        let _this = this,
+            $btn = _this.$target;
 
         if (! url || _this.isLoading) {
             return;
@@ -107,7 +111,8 @@ export default class DialogForm {
 
         $btn && $btn.button('loading');
 
-        $.get(url, function (tpl) {
+        // 请求表单内容
+        $.get(url, function (template) {
             _this.isLoading = 0;
 
             if ($btn) {
@@ -118,31 +123,33 @@ export default class DialogForm {
                 }, 50);
             }
 
-            _this._popup($btn, tpl, counter);
+            _this._popup(template, counter);
         });
     }
 
-    _popup($btn, tpl, counter) {
+    // 弹出弹窗
+    _popup(template, counter) {
         let _this = this,
             options = _this.options;
 
-        tpl = Dcat.assets.filterScriptsAndLoad(tpl).render();
+        // 加载js代码
+        template = Dcat.assets.filterScriptsAndLoad(template).render();
         
-        let $template = $(tpl),
-            btns = [options.lang.submit],
+        let btns = [options.lang.submit],
             dialogOpts = {
                 type: 1,
                 area: (function (v) {
+                        // 屏幕小于800则最大化展示
                         if (w.screen.width <= 800) {
                             return ['100%', '100%',];
                         }
     
                         return v;
                     })(options.area),
-                content: tpl,
+                content: template,
                 title: options.title,
                 yes: function () {
-                    _this._submit($btn, $template)
+                    _this._submit()
                 },
                 cancel: function () {
                     if (options.forceRefresh) { // 是否强制刷新
@@ -171,6 +178,7 @@ export default class DialogForm {
         _this.$form = _this._dialogs[counter].find('form').first();
     }
 
+    // 销毁弹窗
     _destroy(counter) {
         let dialogs = this._dialogs;
 
@@ -181,10 +189,11 @@ export default class DialogForm {
         dialogs[counter] = null;
     }
 
-    _submit($btn) {
+    // 提交表单
+    _submit() {
         let _this = this, 
             options = _this.options,
-            counter = $btn.attr('counter');
+            counter = _this.$target.attr('counter');
 
         if (_this.isSubmitting) {
             return;
@@ -194,6 +203,7 @@ export default class DialogForm {
             form: _this.$form,
             disableRedirect: true,
             before: function () {
+                // 验证表单
                 _this.$form.validator('validate');
 
                 if (_this.$form.find('.has-error').length > 0) {

resources/assets/dcat/sass/components/_form.scss

@@ -32,7 +32,7 @@ select.form-control:not([multiple=multiple]) {
 }
 
 .control-label {
-  padding-top: 7px;
+  padding: 7px 5px;
   margin-bottom: 0;
   font-size: 1rem;
 }
@@ -41,6 +41,17 @@ select.form-control:not([multiple=multiple]) {
     text-align: right;
   }
 }
+
+.has-error .checkbox, .has-error .checkbox-inline, .has-error .control-label, .has-error .help-block, .has-error .radio, .has-error .radio-inline, .has-error.checkbox label, .has-error.checkbox-inline label, .has-error.radio label, .has-error.radio-inline label {
+  color: $red-darker;
+}
+
+.control-label.asterisk:before {
+  content: "*";
+  font-weight: bold;
+  color: $red-darker;
+}
+
 // --------------------- input-group-addon ---------------------
 .input-group-addon {
   width: 1%;

resources/dist/dcat/css/dcat-app.css

@@ -1885,7 +1885,7 @@ select.form-control:not([multiple=multiple]) {
 }
 
 .control-label {
-  padding-top: 7px;
+  padding: 7px 5px;
   margin-bottom: 0;
   font-size: 1rem;
 }
@@ -1896,6 +1896,25 @@ select.form-control:not([multiple=multiple]) {
   }
 }
 
+.has-error .checkbox,
+.has-error .checkbox-inline,
+.has-error .control-label,
+.has-error .help-block,
+.has-error .radio,
+.has-error .radio-inline,
+.has-error.checkbox label,
+.has-error.checkbox-inline label,
+.has-error.radio label,
+.has-error.radio-inline label {
+  color: #bd4147;
+}
+
+.control-label.asterisk:before {
+  content: "*";
+  font-weight: bold;
+  color: #bd4147;
+}
+
 .input-group-addon {
   width: 1%;
   white-space: nowrap;

resources/dist/dcat/js/dcat-app.js

@@ -1284,8 +1284,11 @@ var DialogForm = /*#__PURE__*/function () {
       success: nullFun,
       // 保存失败回调
       error: nullFun
-    }, options);
-    _this.$form = null;
+    }, options); // 表单
+
+    _this.$form = null; // 目标按钮
+
+    _this.$target = null;
     _this._dialog = w.layer;
     _this._counter = 1;
     _this._idx = {};
@@ -1300,21 +1303,23 @@ var DialogForm = /*#__PURE__*/function () {
     key: "_execute",
     value: function _execute(options) {
       var _this = this,
-          defUrl = options.defaultUrl,
-          $btn;
+          defUrl = options.defaultUrl;
 
       !options.buttonSelector || $(options.buttonSelector).off('click').click(function () {
-        $btn = $(this);
-        var counter = $btn.attr('counter'),
+        _this.$target = $(this);
+
+        var counter = _this.$target.attr('counter'),
             url;
 
         if (!counter) {
           counter = _this._counter;
-          $btn.attr('counter', counter);
+
+          _this.$target.attr('counter', counter);
+
           _this._counter++;
         }
 
-        url = $btn.data('url') || defUrl; // 给弹窗页面链接追加参数
+        url = _this.$target.data('url') || defUrl; // 给弹窗页面链接追加参数
 
         if (url.indexOf('?') === -1) {
           url += '?' + options.query + '=1';
@@ -1322,16 +1327,18 @@ var DialogForm = /*#__PURE__*/function () {
           url += '&' + options.query + '=1';
         }
 
-        _this._build($btn, url, counter);
+        _this._build(url, counter);
       });
       options.buttonSelector || setTimeout(function () {
-        _this._build($btn, defUrl, _this._counter);
+        _this._build(defUrl, _this._counter);
       }, 400);
-    }
+    } // 构建表单
+
   }, {
     key: "_build",
-    value: function _build($btn, url, counter) {
-      var _this = this;
+    value: function _build(url, counter) {
+      var _this = this,
+          $btn = _this.$target;
 
       if (!url || _this.isLoading) {
         return;
@@ -1353,8 +1360,9 @@ var DialogForm = /*#__PURE__*/function () {
         _this._destroy(counter);
       });
       _this.isLoading = 1;
-      $btn && $btn.button('loading');
-      $.get(url, function (tpl) {
+      $btn && $btn.button('loading'); // 请求表单内容
+
+      $.get(url, function (template) {
         _this.isLoading = 0;
 
         if ($btn) {
@@ -1364,31 +1372,33 @@ var DialogForm = /*#__PURE__*/function () {
           }, 50);
         }
 
-        _this._popup($btn, tpl, counter);
+        _this._popup(template, counter);
       });
-    }
+    } // 弹出弹窗
+
   }, {
     key: "_popup",
-    value: function _popup($btn, tpl, counter) {
+    value: function _popup(template, counter) {
       var _this = this,
-          options = _this.options;
+          options = _this.options; // 加载js代码
+
 
-      tpl = Dcat.assets.filterScriptsAndLoad(tpl).render();
-      var $template = $(tpl),
-          btns = [options.lang.submit],
+      template = Dcat.assets.filterScriptsAndLoad(template).render();
+      var btns = [options.lang.submit],
           dialogOpts = {
         type: 1,
         area: function (v) {
+          // 屏幕小于800则最大化展示
           if (w.screen.width <= 800) {
             return ['100%', '100%'];
           }
 
           return v;
         }(options.area),
-        content: tpl,
+        content: template,
         title: options.title,
         yes: function yes() {
-          _this._submit($btn, $template);
+          _this._submit();
         },
         cancel: function cancel() {
           if (options.forceRefresh) {
@@ -1417,7 +1427,8 @@ var DialogForm = /*#__PURE__*/function () {
       _this._idx[counter] = _this._dialog.open(dialogOpts);
       _this._dialogs[counter] = w.$('#layui-layer' + _this._idx[counter]);
       _this.$form = _this._dialogs[counter].find('form').first();
-    }
+    } // 销毁弹窗
+
   }, {
     key: "_destroy",
     value: function _destroy(counter) {
@@ -1427,13 +1438,14 @@ var DialogForm = /*#__PURE__*/function () {
 
       dialogs[counter] && dialogs[counter].remove();
       dialogs[counter] = null;
-    }
+    } // 提交表单
+
   }, {
     key: "_submit",
-    value: function _submit($btn) {
+    value: function _submit() {
       var _this = this,
           options = _this.options,
-          counter = $btn.attr('counter');
+          counter = _this.$target.attr('counter');
 
       if (_this.isSubmitting) {
         return;
@@ -1443,6 +1455,7 @@ var DialogForm = /*#__PURE__*/function () {
         form: _this.$form,
         disableRedirect: true,
         before: function before() {
+          // 验证表单
           _this.$form.validator('validate');
 
           if (_this.$form.find('.has-error').length > 0) {

resources/views/form.blade.php

@@ -4,7 +4,7 @@
     <div class="pull-right">{!! $form->renderTools() !!}</div>
 </div>
 @endif
-<div class="box-body" style="padding:{{ $tabObj->isEmpty() ? '18px 10px 12px' : '0'}}">
+<div class="box-body" style="padding:{{ $tabObj->isEmpty() ? '18px 0 12px' : '0'}}">
     @if(!$tabObj->isEmpty())
         @include('admin::form.tab', compact('tabObj', 'form'))
     @else