弹窗表单宽度设置

Author: SmallRuralDog

docs/grid.md

@@ -825,7 +825,9 @@ $toolbars->addRight(new MyRoghtTool());//添加在右侧
 
 ## 弹窗模式表单
 
+适用于一些简单的表单需求，复杂多字段的表单不建议使用
+
 ```php
-$grid->dialogForm($this->form()->isDialog());
+$grid->dialogForm($this->form()->isDialog(),500);//500是弹窗的宽度
 ```
 

public/app.js

@@ -1626,9 +1626,11 @@ __webpack_require__.r(__webpack_exports__);
 //
 //
 //
+//
 /* harmony default export */ __webpack_exports__["default"] = ({
   props: {
-    dialogForm: Object
+    dialogForm: Object,
+    dialogFormWidth: Number | null
   },
   data: function data() {
     return {
@@ -1912,6 +1914,7 @@ function _defineProperty(obj, key, value) { if (key in obj) { Object.definePrope
 //
 //
 //
+//
 
 
 
@@ -29880,6 +29883,7 @@ var render = function() {
     {
       attrs: {
         title: "",
+        width: _vm.dialogFormWidth + "px",
         visible: _vm.dialogVisible,
         "close-on-click-modal": false
       },
@@ -30425,7 +30429,10 @@ var render = function() {
       _vm.attrs.dialogForm
         ? _c("DialogForm", {
             ref: "DialogGridFrom",
-            attrs: { dialogForm: _vm.attrs.dialogForm }
+            attrs: {
+              dialogFormWidth: _vm.attrs.dialogFormWidth,
+              dialogForm: _vm.attrs.dialogForm
+            }
           })
         : _vm._e()
     ],

public/mix-manifest.json

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=da20f538047979cfecd9",
+    "/app.js": "/app.js?id=40683f324ec4be6c6472",
     "/manifest.js": "/manifest.js?id=af490cb90066598b3f0e",
     "/vendor.js": "/vendor.js?id=0651917a3e4f144a9e23"
 }

resources/js/components/grid/DialogForm.vue

@@ -1,6 +1,7 @@
 <template>
   <el-dialog
     title=""
+    :width="dialogFormWidth+'px'"
     :visible.sync="dialogVisible"
     :close-on-click-modal="false"
     @closed="onClose"
@@ -16,6 +17,7 @@
 export default {
   props: {
     dialogForm: Object,
+    dialogFormWidth: Number | null,
   },
   data() {
     return {

resources/js/components/grid/Table.vue

@@ -218,6 +218,7 @@
     <DialogForm
       ref="DialogGridFrom"
       v-if="attrs.dialogForm"
+      :dialogFormWidth='attrs.dialogFormWidth'
       :dialogForm="attrs.dialogForm"
     />
   </div>

src/Grid.php

@@ -74,6 +74,10 @@ class Grid extends Component implements \JsonSerializable
      * @var Form
      */
     protected $dialogForm;
+    /**
+     * @var int
+     */
+    protected $dialogFormWidth;
 
 
     public function __construct(Eloquent $model)
@@ -235,7 +239,7 @@ public function actions($closure)
      */
     public function batchActions(\Closure $closure)
     {
-        call_user_func($closure,$this->batchActions);
+        call_user_func($closure, $this->batchActions);
         return $this;
     }
 
@@ -255,11 +259,13 @@ public function getActions($row, $key)
 
     /**
      * @param Form $dialogForm
+     * @param int $width
      * @return Grid
      */
-    public function dialogForm(Form $dialogForm)
+    public function dialogForm(Form $dialogForm,int $width = 500)
     {
         $this->dialogForm = $dialogForm;
+        $this->dialogFormWidth = $width;
         return $this;
     }
 
@@ -272,9 +278,6 @@ public function getDialogForm()
     }
 
 
-
-
-
     /**
      * 隐藏行操作
      * @return $this
@@ -347,6 +350,7 @@ public function jsonSerialize()
             $viewData['top'] = $this->top;
             $viewData['bottom'] = $this->bottom;
             $viewData['dialogForm'] = $this->dialogForm;
+            $viewData['dialogFormWidth'] = $this->dialogFormWidth;
             return $viewData;
         }
     }