可以设置按钮名称和大小 #25

表单字段vifEval表达式显示隐藏

Author: SmallRuralDog

docs/form.md

@@ -99,6 +99,41 @@ $form->size("small");
 $form->disabled(true);
 ```
 
+### 弹窗模式
+
+在Grid中使用
+
+```php
+$form->isDialog();
+$grid->dialogForm($this->form()->isDialog());
+```
+
+### 创建按钮名称
+
+```php
+ $form->createButtonName("创建");
+```
+
+### 更新按钮名称
+
+```php
+ $form->updateButtonName("更新");
+```
+
+### 取消/返回按钮名称
+
+```php
+ $form->backButtonName("取消");
+```
+
+### 按钮宽度
+
+```php
+$form->buttonWidth("200px");
+```
+
+
+
 ## 字段使用
 
 提供各种丰富的表单字段
@@ -208,6 +243,46 @@ $form->item('username', '用户名')->vif("email",false,true) // 表示填写ema
 $form->item('username', '用户名')->vif("key.key","value") //支持点操作
 ```
 
+#### 表达式方式
+
+基于`eval`实现
+
+```php
+ $form->item('username', '用户名')->vifEval(function (Form\Utils\VIfEval $eval) {
+     //需要监听的字段，必须是数组
+     $eval->props(['is_rec', 'is_hot']);
+     //表达式字符串
+     $eval->functionStr("console.log(this.form_data)");
+     //读取js文件，文件地址随意，这个优先级大于functionStr
+     $eval->functionPath(admin_path('Script/demo.js'));
+ });
+```
+
+##### js表达式模板
+
+建议在`Admin`目录下创建一个`Script`文件夹
+
+```javascript
+(function (form_item, form_items, form_data) {
+    console.log(form_item,form_items,form_data);
+    return true;
+})(this.form_item, this.form_items, this.form_data);
+//----------可复制上面的代码，下面是说明
+
+//必须返回true或false
+
+//内置lodash对象，可调用所有方法，文档：https://www.html.cn/doc/lodash/
+window._
+//当前字段属性
+form_item
+//当前所有表单字段属性
+form_items
+//当前表单的值
+form_data
+```
+
+
+
 ### 忽略空值(留空则不修改)
 
 > 若此字段的值为 ''/null/undefined 或 空对象/空数组 则在提交的表单对象中删除键名

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=f0fb13cdad18a7035008",
+    "/app.js": "/app.js?id=6de18520d14ae80705c3",
     "/manifest.js": "/manifest.js?id=8991394a854ee5cdffc3",
     "/vendor.js": "/vendor.js?id=159feaa1cb9cfd111212"
 }

public/mix-manifest.json

@@ -101,20 +101,30 @@
           <div></div>
           <div>
             <el-button
-              :loading="loading"
+              v-if="!attrs.attrs.isDialog"
               class="submit-btn"
-              type="primary"
-              @click="submitForm('ruleForm')"
-              >{{ isEdit ? "立即修改" : "立即创建" }}</el-button
+              @click="$router.go(-1)"
+              :style="{ width: attrs.attrs.buttonWidth }"
+              >{{ attrs.attrs.backButtonName }}</el-button
             >
             <el-button
-              v-if="!attrs.attrs.isDialog"
+              v-else
               class="submit-btn"
-              @click="$router.go(-1)"
-              >返回</el-button
+              @click="closeDialog"
+              :style="{ width: attrs.attrs.buttonWidth }"
+              >{{ attrs.attrs.backButtonName }}</el-button
             >
-            <el-button v-else class="submit-btn" @click="closeDialog"
-              >关闭</el-button
+            <el-button
+              :loading="loading"
+              class="submit-btn"
+              type="primary"
+              :style="{ width: attrs.attrs.buttonWidth }"
+              @click="submitForm('ruleForm')"
+              >{{
+                isEdit
+                  ? attrs.attrs.updateButtonName
+                  : attrs.attrs.createButtonName
+              }}</el-button
             >
           </div>
         </div>
@@ -256,9 +266,6 @@ export default {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    .submit-btn {
-      width: 120px;
-    }
   }
   .form-item-help {
     color: #999;

resources/js/components/form/Form.vue

@@ -1,5 +1,5 @@
 <template>
-  <div v-if="ifShow">
+  <div v-if="ifVif && ivEval">
     <slot></slot>
   </div>
 </template>
@@ -8,13 +8,15 @@ export default {
   props: {
     form_item: Object,
     form_items: Array,
-    form_data: Object
+    form_data: Object,
   },
+  mounted() {},
   computed: {
-    ifShow() {
+    ifVif() {
       let key = this.form_item.vif.key;
       let value = this.form_item.vif.value;
       let anyValue = this.form_item.vif.anyValue;
+
       if (key) {
         let cValue = window._.get(this.form_data, key);
         if (cValue == value || (cValue && anyValue)) {
@@ -25,7 +27,26 @@ export default {
       }
 
       return !anyValue;
-    }
-  }
+    },
+    ivEval() {
+      try {
+        if (!this.form_item.vifEval) {
+          return true;
+        }
+        let expression = this.form_item.vifEval.expression;
+        let props = this.form_item.vifEval.props;
+        props.map((prop) => {
+          window._.get(this.form_data, prop);
+        });
+        if (expression) {
+          return eval(expression);
+        }
+        return true;
+      } catch (error) {
+        console.error("表达式错误：" + error);
+        return true;
+      }
+    },
+  },
 };
 </script>

resources/js/components/form/ItemIf.vue

@@ -11,7 +11,11 @@
     },
     "devDependencies": {
         "cross-env": "^5.1",
-        "laravel-mix": "^4.1.4"
+        "laravel-mix": "^4.1.4",
+        "resolve-url-loader": "^2.3.1",
+        "sass": "^1.20.1",
+        "sass-loader": "7.*",
+        "vue-template-compiler": "^2.6.10"
     },
     "dependencies": {
         "vue": "^2.6.11"

src/Console/extend-stubs/package.json

@@ -25,4 +25,9 @@ class FormAttrs
 
     public $isDialog = false;
 
+    public $createButtonName = "立即添加";
+    public $updateButtonName = "立即修改";
+    public $backButtonName = "返回";
+    public $buttonWidth;
+
 }

src/Form/FormAttrs.php

@@ -58,6 +58,8 @@ class FormItem
         'anyValue' => false,
     ];
 
+    protected $vifEval;
+
     /**
      * FormItem constructor.
      * @param $prop
@@ -127,9 +129,9 @@ public function footerComponent($component)
     }
 
     /**
-     * @deprecated
      * @param $component
      * @return $this
+     * @deprecated
      */
     public function displayComponent($component)
     {
@@ -240,7 +242,7 @@ public function defaultValue($defaultValue)
     {
         $this->defaultValue = $defaultValue;
 
-        if($this->component) $this->component->componentValue($defaultValue);
+        if ($this->component) $this->component->componentValue($defaultValue);
 
         return $this;
     }
@@ -449,6 +451,7 @@ public function help($help)
     /**
      * @param $key
      * @param $value
+     * @param bool $anyValue
      * @return $this
      */
     public function vif($key, $value, $anyValue = false)
@@ -461,6 +464,21 @@ public function vif($key, $value, $anyValue = false)
         return $this;
     }
 
+    /**
+     * @param \Closure $closure
+     * @return FormItem
+     */
+    public function vifEval(\Closure $closure)
+    {
+        $vifEval = new Form\Utils\VIfEval();
+
+        call_user_func($closure, $vifEval);
+
+        $this->vifEval = $vifEval->build();
+        return $this;
+    }
+
+
     /**
      * 设置字段所属tab名称
      * @param string $tab
@@ -489,16 +507,18 @@ public function ignoreEmpty()
         $this->ignoreEmpty = true;
         return $this;
     }
+
     /**
      * 传递当前组件所在模式
-     * @param  string $value
+     * @param string $value
      * @return $this
      */
     public function hiddenMode($value = '')
     {
         $this->hiddenMode = $value;
         return $this;
     }
+
     /**
      * @return mixed
      */
@@ -507,6 +527,7 @@ public function hiddenInCreate()
         $this->hiddenMode = Form::MODE_CREATE;
         return $this;
     }
+
     /**
      * @return mixed
      */
@@ -515,13 +536,15 @@ public function hiddenInEdit()
         $this->hiddenMode = Form::MODE_EDIT;
         return $this;
     }
+
     /**
      * @return mixed
      */
     public function getHiddenMode()
     {
         return $this->hiddenMode;
     }
+
     public function getAttrs()
     {
         return [
@@ -543,7 +566,8 @@ public function getAttrs()
             'relationName' => $this->relationName,
             'relationValueKey' => $this->relationValueKey,
             'vif' => $this->vif,
-            'tab'=>$this->tab,
+            'vifEval' => $this->vifEval,
+            'tab' => $this->tab,
             'ignoreEmpty' => $this->ignoreEmpty,
             'hiddenMode' => $this->hiddenMode,
         ];

src/Form/FormItem.php

@@ -168,6 +168,49 @@ public function hideTab(bool $hideTab = true)
         return $this;
     }
 
+    /**
+     * 创建按钮名称
+     * @param $createButtonName
+     * @return $this
+     */
+    public function createButtonName($createButtonName)
+    {
+        $this->attrs->createButtonName = $createButtonName;
+        return $this;
+    }
+
+    /**
+     * 修改按钮名称
+     * @param $updateButtonName
+     * @return $this
+     */
+    public function updateButtonName($updateButtonName)
+    {
+        $this->attrs->updateButtonName = $updateButtonName;
+        return $this;
+    }
+
+    /**
+     * 返回按钮名称
+     * @param $backButtonName
+     * @return $this
+     */
+    public function backButtonName($backButtonName)
+    {
+        $this->attrs->backButtonName = $backButtonName;
+        return $this;
+    }
+
+    public function buttonWidth($buttonWidth)
+    {
+        $this->attrs->buttonWidth = $buttonWidth;
+        return $this;
+    }
+
+    /**
+     * 弹窗模式
+     * @return $this
+     */
     public function isDialog()
     {
         $this->attrs->isDialog = true;