公共组件：查询用户

src/views/modules/common/user-component.vue

@@ -4,15 +4,18 @@
         v-model="value"
         ref="select"
         placeholder="请输入姓名"
+        clearable
         filterable
-        @change = "onChange"
-        v-el-select-loadmore="loadMore">
+        remote
+        :remote-method="remoteMethod"
+        @change = "onChange">
         <el-option
           v-for="item in options"
           :key="item.value"
           :label="item.label"
           :value="item.value">
         </el-option>
+        <el-option label="加载更多" style="font-style: italic; color: #8a979e" value="undefined" @click.native="handleClick()"></el-option>
       </el-select>
     </div>
 </template>
@@ -30,20 +33,6 @@
       prop: 'userId',
       event: 'userSelected'
     },
-    directives: {
-      'el-select-loadmore': {
-        bind (el, binding) {
-          // 获取element-ui定义好的scroll盒子
-          const SELECTWRAP_DOM = el.querySelector('.el-select-dropdown .el-select-dropdown__wrap')
-          SELECTWRAP_DOM.addEventListener('scroll', function () {
-            const condition = this.scrollHeight - this.scrollTop <= this.clientHeight
-            if (condition) {
-              binding.value()
-            }
-          })
-        }
-      }
-    },
     data () {
       return {
         value: '',
@@ -62,6 +51,12 @@
       async init () {
         this.getList()
       },
+      remoteMethod (query) {
+        this.options = []
+        this.current = 1
+        this.name = query
+        this.getList()
+      },
       getList () {
         this.$http({
           url: this.$http.adornUrl(`/user-service/user/list`),
@@ -87,12 +82,17 @@
           }
         })
       },
+      handleClick () {
+        this.loadMore()
+      },
       loadMore () {
         this.current ++
         this.getList()
       },
       onChange (item) {
-        console.log('item = ' + item)
+        if (item === 'undefined') {
+          this.value = null
+        }
         this.$emit('userSelected', item)
       }
     }

src/views/modules/warehouse/stock-order.vue

@@ -1,18 +1,46 @@
 <template>
   <div class="stock-order">
     <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
-      <el-form-item>
+      <el-form-item label="申请人姓名">
         <user-component v-model="dataForm.userId"/>
       </el-form-item>
-<!--      <el-form-item>-->
-<!--        <el-input v-model="dataForm.userName" placeholder="用户名" clearable></el-input>-->
-<!--      </el-form-item>-->
+      <el-form-item label="申请日期">
+        <el-date-picker
+          v-model="dataForm.dateFrom"
+          value-format="yyyy-MM-dd"
+          type="daterange"
+          range-separator="至"
+          start-placeholder="开始日期"
+          end-placeholder="结束日期">
+        </el-date-picker>
+      </el-form-item>
       <el-form-item>
         <el-button @click="getDataList()">查询</el-button>
+        <el-button type="primary" @click="test()">入库申请</el-button>
+        <el-button type="primary" @click="test()">出库申请</el-button>
 <!--        <el-button v-if="isAuth('sys:user:save')" type="primary" @click="addOrUpdateHandle()">新增</el-button>-->
 <!--        <el-button v-if="isAuth('sys:user:delete')" type="danger" @click="deleteHandle()" :disabled="dataListSelections.length <= 0">批量删除</el-button>-->
       </el-form-item>
     </el-form>
+    <el-table
+      :data="dataList"
+      border
+      v-loading="dataListLoading"
+      @selection-change="selectionChangeHandle"
+      style="width: 100%;">
+      <el-table-column
+        type="selection"
+        header-align="center"
+        align="center"
+        width="50">
+      </el-table-column>
+      <el-table-column
+        prop="code"
+        header-align="center"
+        align="center"
+        label="编码">
+      </el-table-column>
+    </el-table>
   </div>
 </template>
 
@@ -24,7 +52,8 @@
     data () {
       return {
         dataForm: {
-          userId: ''
+          userId: '',
+          dateFrom: ''
         },
         dataList: [],
         pageIndex: 1,
@@ -37,7 +66,9 @@
     methods: {
       // 获取数据列表
       getDataList () {
-        console.log('参数：' + this.dataForm.userId)
+        console.log('参数0：' + this.dataForm.userId)
+        console.log('参数1：' + this.dataForm.dateFrom[0])
+        console.log('参数2：' + this.dataForm.dateFrom[1])
         // this.dataListLoading = true
         // this.$http({
         //   url: this.$http.adornUrl('/user-service/user/list'),
@@ -68,6 +99,10 @@
       currentChangeHandle (val) {
         this.pageIndex = val
         this.getDataList()
+      },
+      // 多选
+      selectionChangeHandle (val) {
+        this.dataListSelections = val
       }
     }
   }