Form Item 添加vif属性

Form 添加表单验证回调事件

Author: SmallRuralDog

docs/form.md

@@ -212,11 +212,23 @@ $form->footerComponent(Divider::make("详细信息"));
 $form->editing(function (Form $form) {});
 $form->submitted(function (Form $form) {});
 $form->submitted(function (Form $form) {});
-$form->saving(function (Form $form) {});
+$form->saving(function (Form $form) {
+    
+    //返回错误信息
+    return \Admin::responseError("xxxx");
+});
 $form->saved(function (Form $form) {});
 $form->deleting(function (Form $form) {});
 $form->deleted(function (Form $form) {});
 
+//表单验证时回调，用于处理复杂的表单验证
+$form->validating(function (Form $form, $validator) {
+    //-------例如
+    $validator->sometimes('end_time', 'email', function ($input) {
+         return true;
+     });
+});
+
 //表单要编辑的数据查询并处理后，可用于对不存在的关联模型字段提供数据
 $form->editQuery(function (Form $form,$data) {
 

public/app.js

@@ -1,5 +1,5 @@
 {
-    "/app.js": "/app.js?id=b0257459c04305121b88",
-    "/manifest.js": "/manifest.js?id=3c768977c2574a34506e",
-    "/vendor.js": "/vendor.js?id=5a30bc9bc2e005aa1c33"
+    "/app.js": "/app.js?id=23a4859c644d4b2b623b",
+    "/manifest.js": "/manifest.js?id=d9708e48a6c10ccee4bb",
+    "/vendor.js": "/vendor.js?id=f4679ac178c0e413cb28"
 }

public/mix-manifest.json

@@ -22,7 +22,12 @@
         :disabled="attrs.attrs.disabled"
       >
         <template v-for="(item, index) in attrs.formItems">
-          <div :key="index">
+          <ItemIf
+            :key="index"
+            :form_item="item"
+            :form_items="attrs.formItems"
+            :form_data="formData"
+          >
             <component
               v-if="item.topComponent"
               :is="item.topComponent.componentName"
@@ -75,7 +80,7 @@
               :is="item.footerComponent.componentName"
               :attrs="item.footerComponent"
             />
-          </div>
+          </ItemIf>
         </template>
         <div class="form-bottom-actions">
           <div></div>
@@ -98,9 +103,11 @@
 </template>
 <script>
 import ItemDiaplsy from "./ItemDiaplsy";
+import ItemIf from "./ItemIf";
 export default {
   components: {
-    ItemDiaplsy
+    ItemDiaplsy,
+    ItemIf
   },
   props: {
     attrs: Object

resources/js/components/form/BaseForm.vue

@@ -0,0 +1,31 @@
+<template>
+  <div v-if="ifShow">
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  props: {
+    form_item: Object,
+    form_items: Array,
+    form_data: Object
+  },
+  computed: {
+    ifShow() {
+      let key = this.form_item.vif.key;
+      let value = this.form_item.vif.value;
+
+      if (key) {
+        let cValue = window._.get(this.form_data, key);
+        if (cValue == value) {
+          return true;
+        } else {
+          return false;
+        }
+      }
+
+      return true;
+    }
+  }
+};
+</script>

resources/js/components/form/ItemIf.vue

@@ -10,14 +10,14 @@
             :rows="selectionRows"
             v-if="attrs.selection"
           />
-          <div class="search-view mr-10">
+          <div class="search-view mr-10"  v-if="attrs.quickSearch">
             <el-input
               v-model="quickSearch"
               :placeholder="attrs.quickSearch.placeholder"
               :clearable="true"
               @clear="getData"
               @keyup.enter.native="getData"
-              v-if="attrs.quickSearch"
+             
             >
               <el-button @click="getData" :loading="loading" slot="append"
                 >搜索</el-button

resources/js/components/grid/Table.vue

@@ -1,7 +1,7 @@
 <template>
   <el-col :span="attrs.width">
     <component
-      v-for="(content,index) in attrs.contents"
+      v-for="(content, index) in attrs.contents"
       :key="index"
       :is="content.componentName"
       :attrs="content"
@@ -17,5 +17,4 @@ export default {
 };
 </script>
 
-<style>
-</style>
+<style></style>

resources/js/components/layout/Column.vue

@@ -32,6 +32,11 @@ export default {
       vm: this._.clone(this.value)
     };
   },
+  watch: {
+    value(value) {
+      this.vm = value;
+    }
+  },
   model: {
     prop: "value",
     event: "change"

resources/js/components/widgets/RadioGroup.vue

@@ -54,11 +54,6 @@
     :name="attrs.name"
     :prefix-icon="attrs.prefixIcon"
     :clear-icon="attrs.clearIcon"
-    :start="attrs.start"
-    :end="attrs.end"
-    :step="attrs.step"
-    :minTime="attrs.minTime"
-    :maxTime="attrs.maxTime"
     @change="onChange"
   ></el-time-select>
 </template>

resources/js/components/widgets/TimePicker.vue

@@ -31,11 +31,6 @@ class TimePicker extends Component
     protected $format = "HH:mm:ss";
     protected $type = "select";
 
-    protected $start = "09:00";
-    protected $end = "18:00";
-    protected $step = "00:30";
-    protected $minTime = "00:00";
-    protected $maxTime;
 
     static public function make($value = '', $type = "select")
     {
@@ -284,60 +279,6 @@ public function type($type)
         return $this;
     }
 
-    /**
-     * 开始时间
-     * @param string $start
-     * @return $this
-     */
-    public function start($start)
-    {
-        $this->start = $start;
-        return $this;
-    }
-
-    /**
-     * 结束时间
-     * @param string $end
-     * @return $this
-     */
-    public function end($end)
-    {
-        $this->end = $end;
-        return $this;
-    }
-
-    /**
-     * 间隔时间
-     * @param string $step
-     * @return $this
-     */
-    public function step($step)
-    {
-        $this->step = $step;
-        return $this;
-    }
-
-    /**
-     * 最小时间，小于该时间的时间段将被禁用
-     * @param string $minTime
-     * @return $this
-     */
-    public function minTime($minTime)
-    {
-        $this->minTime = $minTime;
-        return $this;
-    }
-
-    /**
-     * 最大时间，大于该时间的时间段将被禁用
-     * @param mixed $maxTime
-     * @return $this
-     */
-    public function maxTime($maxTime)
-    {
-        $this->maxTime = $maxTime;
-        return $this;
-    }
 
 
 }