Merge pull request #6 from osindex/develop

🎨 Select远程搜索;vif;AuthApi

Author: SmallRuralDog

docs/components.md

@@ -398,6 +398,17 @@ Select::make()
 
 ```php
 Select::make()->filterable()->remote($remoteUrl)
+Select::make()->filterable()->remote($remoteUrl)->extUrlParams(['type'=>'A']) // 远程搜索带参数
+Select::make()->filterable()->remote($remoteUrl)->depend(['keyA','keyB.0.key']) // 远程搜索带表单值
+Select::make()->filterable()->remote($remoteUrl)->paginate($per_page = 10) // 远程搜索带分页加载
+```
+
+支持
+
+```php
+
+
+
 ```
 
 更多属性请查看element-ui文档

docs/form.md

@@ -190,6 +190,7 @@ $form->item('username', '用户名')->serveRulesMessage(["required" => '必填']
 
 ```php
 $form->item('username', '用户名')->vif("key","value")
+$form->item('username', '用户名')->vif("email",false,true) // 表示填写email任意字符之后才会出现username 注意第二个参数最好不要用null或者可能存在的值
 $form->item('username', '用户名')->vif("key.key","value") //支持点操作
 ```
 

docs/thirdparty.md

@@ -10,3 +10,5 @@
 
 ## 全局组件
 
+## 其它扩展
+* [AuthApi](https://github.com/osindex/laravel-auth-api)基于`laravel/sanctum`的API认证方案，支持多用户。

resources/js/components/form/Form.vue

@@ -161,7 +161,6 @@ export default {
       this.$refs[formName].validate(valid => {
         if (valid) {
           this.loading = true;
-          console.log(this.ignoreKey)
           const formatData = this._.pick(this.formData, this.ignoreKey)
           if (this.isEdit) {
             this.$http

resources/js/components/form/ItemIf.vue

@@ -14,17 +14,17 @@ export default {
     ifShow() {
       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) {
+        if (cValue == value || (cValue && anyValue)) {
           return true;
         } else {
           return false;
         }
       }
 
-      return true;
+      return !anyValue;
     }
   }
 };

resources/js/components/widgets/Select.vue

@@ -47,6 +47,12 @@
         <div class="flex-c" v-if="item.desc" v-html="item.desc"></div>
       </div>
     </el-option>
+    <el-option v-if="attrs.paginate && loadMore && options.length" :value="undefined">
+        <div @click.stop='paginateData($event)'>
+          <i class="el-icon-loading"></i>
+          <span>加载更多</span>
+        </div>
+    </el-option>
   </el-select>
 </template>
 <script>
@@ -60,23 +66,61 @@ export default {
   },
   data() {
     return {
-      options: this.attrs.options
+      options: this.attrs.options,
+      extUrlParams: this.attrs.extUrlParams,
+      query: null,
+      loadMore: true,
+      meta: {
+        page: 1,
+        per_page: this.attrs.paginate
+      }
     };
   },
   model: {
     prop: "value",
     event: "change"
   },
+  computed: {
+    depend() {
+      return _.pick(this.form_data, this.attrs.depend);
+    }
+  },
   methods: {
     onChange(value) {
-      this.$emit("change", value);
+      let resValue = value
+      if(typeof value === 'object'){
+        // 排除value = 0
+        resValue = value.filter(e=> e !== undefined)
+      }else if(value === undefined){
+        resValue = null
+      }
+      this.$emit("change", resValue);
     },
     remoteMethod(query) {
+      this.query = query
+      this.meta.page = 1
       this.$http
-        .get(this.attrs.remoteUrl, { params: { query: query } })
+        .get(this.attrs.remoteUrl, { params: { ...this.meta, query: query, depend: this.depend, extUrlParams: this.extUrlParams } })
         .then(res => {
           this.options = res.data;
+          this.meta.page++
+          this.loadMore = true
         });
+    },
+    paginateData(event) {
+      this.$http
+        .get(this.attrs.remoteUrl, { params: { ...this.meta, query: this.query, depend: this.depend, extUrlParams: this.extUrlParams } })
+        .then(res => {
+          if (res.data.length) {
+            this.options.push(...res.data)            
+          }
+          if(this.meta.page < res.meta.to){
+            this.meta.page = res.meta.to
+            this.loadMore = true
+          }else{
+            this.loadMore = false
+          }
+        })
     }
   }
 };

src/Components/Attrs/Depend.php

@@ -0,0 +1,39 @@
+<?php
+
+namespace SmallRuralDog\Admin\Components\Attrs;
+
+trait Depend
+{
+    protected $depend;
+    protected $paginate = 0;
+    protected $extUrlParams;
+
+    /**
+     * @param mixed $depend
+     * @return $this
+     */
+    public function depend($depend)
+    {
+        $this->depend = $depend;
+        return $this;
+    }
+
+    /**
+     * @param mixed $paginate
+     * @return $this
+     */
+    public function paginate($paginate)
+    {
+        $this->paginate = $paginate;
+        return $this;
+    }
+    /**
+     * @param mixed $extUrlParams
+     * @return $this
+     */
+    public function extUrlParams($extUrlParams)
+    {
+        $this->extUrlParams = $extUrlParams;
+        return $this;
+    }
+}

src/Components/Select.php

@@ -1,14 +1,14 @@
 <?php
 
-
 namespace SmallRuralDog\Admin\Components;
 
+use SmallRuralDog\Admin\Components\Attrs\Depend;
 
 class Select extends Component
 {
+    use Depend;
     public $componentName = 'Select';
 
-
     protected $multiple = false;
 
     protected $disabled = false;
@@ -38,7 +38,7 @@ class Select extends Component
      */
     protected $options = [];
 
-    static public function make($value = null)
+    public static function make($value = null)
     {
         return new Select($value);
     }
@@ -52,14 +52,13 @@ public function block($block = true)
     {
         if ($block) {
             $style = collect($this->style)->add([
-                'display' => 'block'
+                'display' => 'block',
             ]);
             $this->style($style);
         }
         return $this;
     }
 
-
     /**
      * 是否多选
      * @param bool $multiple
@@ -68,7 +67,10 @@ public function block($block = true)
     public function multiple($multiple = true)
     {
         $this->multiple = $multiple;
-        if (!$this->componentValue) $this->componentValue([]);
+        if (!$this->componentValue) {
+            $this->componentValue([]);
+        }
+
         return $this;
     }
 
@@ -176,7 +178,7 @@ public function filterable($filterable = true)
      * @param string $allowCreateUrl 创建新条目Url
      * @return $this
      */
-    public function allowCreate($allowCreateUrl=null)
+    public function allowCreate($allowCreateUrl = null)
     {
         $this->allowCreate = true;
         $this->filterable = true;

src/Form/FormItem.php

@@ -49,6 +49,7 @@ class FormItem
     protected $vif = [
         'key' => null,
         'value' => null,
+        'anyValue' => false,
     ];
 
     /**
@@ -441,11 +442,12 @@ public function help($help)
      * @param $value
      * @return $this
      */
-    public function vif($key, $value)
+    public function vif($key, $value, $anyValue = false)
     {
         $this->vif = [
             'key' => $key,
             'value' => $value,
+            'anyValue' => $anyValue,
         ];
         return $this;
     }