Merge pull request #7 from osindex/develop

select组件增加 label方法

Author: SmallRuralDog

docs/components.md

@@ -400,7 +400,21 @@ Select::make()
 Select::make()->filterable()->remote($remoteUrl)
 Select::make()->filterable()->remote($remoteUrl)->extUrlParams(['type'=>'A']) // 远程搜索带参数
 Select::make()->filterable()->remote($remoteUrl)->depend(['keyA','keyB.0.key']) // 远程搜索带表单值
+// 带分页加载的数据反馈接受 
+// {data:{data:[],total:x}} // 优先接受此框架一般返回 或 
+// {data:[],meta:{total:x}} // laravel资源返回
 Select::make()->filterable()->remote($remoteUrl)->paginate($per_page = 10) // 远程搜索带分页加载
+// 远程搜索占位显示
+$label = [
+'key'=>'model', // 模型中支持的方法
+'value' => 
+    [
+    'value'=>'id', //同样支持复合键位
+    'label'=>['title','label']
+    ]
+]
+//注意 $form 一般通过use 传递
+Select::make()->filterable()->remote($remoteUrl)->label($form, $label)
 ```
 
 支持

resources/js/components/widgets/Form/Select.vue

@@ -48,7 +48,7 @@
       </div>
     </el-option>
     <el-option v-if="attrs.paginate && loadMore && options.length" :value="undefined">
-        <div @click.stop='paginateData($event)'>
+        <div @click.stop='remoteMethod(null,"next")'>
           <i class="el-icon-loading"></i>
           <span>加载更多</span>
         </div>
@@ -85,6 +85,9 @@ export default {
       return _.pick(this.form_data, this.attrs.depend);
     }
   },
+  mounted() {
+      this.setLable()
+  },
   methods: {
     onChange(value) {
       let resValue = value
@@ -96,31 +99,39 @@ export default {
       }
       this.$emit("change", resValue);
     },
-    remoteMethod(query) {
-      this.query = query
-      this.meta.page = 1
-      this.$http
-        .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) {
+    remoteMethod(query,next = null) {
+      if (!next) {
+        this.options = []
+        this.query = query
+        this.meta.page = 1
+      }
       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)            
+          const total = res.data.total || res.meta.total
+          const data = res.data.data || res.data
+          if (data.length) {
+            this.options.push(...data)            
           }
-          if(this.meta.page < res.meta.to){
-            this.meta.page = res.meta.to
+          if(this.options.length < total){
+            this.meta.page++
             this.loadMore = true
           }else{
             this.loadMore = false
           }
-        })
+        });
+    },
+    setLable(){
+        const label = this.attrs.label
+        if (label && this.form_data[label.key]) {
+          const options = label.value || {value: "value",label: "label"}
+          this.options = [_.transform(options, (result, value, key) => {
+            const tempValue = _.values(_.pick(this.form_data[label.key], value)).join('-')
+            // 数字校验
+            result[key] = (parseFloat(tempValue).toString() == "NaN")?tempValue:parseFloat(tempValue)
+          }, {})]
+          this.loadMore = false
+        }
     }
   }
 };

src/Components/Attrs/Depend.php

@@ -7,6 +7,7 @@ trait Depend
     protected $depend;
     protected $paginate = 0;
     protected $extUrlParams;
+    protected $label;
 
     /**
      * @param mixed $depend
@@ -36,4 +37,16 @@ public function extUrlParams($extUrlParams)
         $this->extUrlParams = $extUrlParams;
         return $this;
     }
+    /**
+     * 远程加载时的默认显示名称，因远程时一般仅有value
+     * @param object form 所属表单
+     * @param array $label ['key'=>'model','value'=>['value'=>'id','label'=>['title','label']]] // 所属关联模型 用于从data取值
+     * @return $this
+     */
+    public function label(&$form, $label)
+    {
+        $this->label = $label;
+        $form->item($label['key'])->vif('label' . mt_rand(10000, 99999), false);
+        return $this;
+    }
 }