Add Multiselect

package.json

     "normalize.css": "7.0.0",
     "nprogress": "0.2.0",
     "vue": "2.5.9",
+    "vue-multiselect": "^2.0.8",
     "vue-router": "3.0.1",
     "vuex": "3.0.1"
   },

src/api/agnetManagement.js

 export function fetchList(query) {
   return request({
     url: '/agents',
-    method: 'get'
-    // params: {
-    //   limit: query.limit,
-    //   offset: (query.page - 1) * query.limit,
-    //   name: query.name,
+    method: 'get',
+    params: {
+      limit: query.limit,
+      offset: (query.page - 1) * query.limit,
+      name: query.name
     //   chipsSort: query.chipsSort,
     //   updatedSort: query.updatedSort
-    // }
+    }
   })
 }
 

src/api/gambleMember.js

     method: 'get'
   })
 }
+
+export function fetchAgentList(name) {
+  return request({
+    url: '/agents',
+    method: 'get',
+    params: {
+      limit: 20,
+      offset: 0,
+      name
+    }
+  })
+}
+
+export function updateBelongAgent(member, agent) {
+  return request({
+    url: `/gambleMembers/${member.id}/belong_agent`,
+    method: 'put',
+    data: {
+      agent: agent.id
+    }
+  })
+}

src/views/room/gambleMember/index.vue

           <span>{{scope.row.chips}}</span>
         </template>
       </el-table-column>
-      <el-table-column align="center" label="操作" width="350">
+      <el-table-column label="代理商" align="center">
+        <template slot-scope="scope">
+          {{!scope.row.GambleAgent ? 'N/A': scope.row.GambleAgent.name}}
+        </template>
+      </el-table-column>
+      <el-table-column align="center" label="操作" width="450">
         <template slot-scope="scope">
             <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleChipsMangement(scope.row)">分數管理</el-button>
             <router-link to="/room/index/gambleMember/index/chipsHistory">
               <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handleLog(scope.row)">分數紀錄</el-button>            
             </router-link>
+            <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleAgentUpdate(scope.row)">代理商設定</el-button>            
             <router-link to="/room/index/gambleMember/index/gameHistory">
               <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handlePage(scope.row)">歷史查詢</el-button>
             </router-link>       
         <el-button v-if="dialogStatus=='deposit'" type="primary" @click="depositChips">確 定</el-button>
       </div>
     </el-dialog>
+
+
+    <el-dialog title="所屬代理商" :visible.sync="dialogUpdateFormVisible" :before-close="handleDialogClose" center>
+      <el-form :rules="rules" :model="temp" ref="updateForm" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+          <el-form-item label="使用者" prop="id">
+              <el-input v-model="temp.name" :disabled="true"></el-input>
+        </el-form-item>
+        <el-form-item label="代理商" prop="name">
+          <multiselect v-model="updateFormData" :options="agentLIstOptions" @search-change="getRemoteAgentList" placeholder="代理商搜尋" selectLabel="選擇"
+            deselectLabel="删除" track-by="key" :internalSearch="false" label="key">
+              <span slot='noResult'>無結果</span>
+          </multiselect>
+         </el-form-item>
+        </el-form>          
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleDialogClose">取 消</el-button>
+          <el-button type="primary" @click="updateData">確 定</el-button>
+        </div>
+    </el-dialog>
+
   </div>
     <router-view :member="member"></router-view>
   </div>
 
 import { mapGetters, mapActions } from 'vuex'
 // TODO 需更改抓取此房間人員
-import { fetchList, chipsDeposit, chipsReward, createGambleMember } from '@/api/gambleMember'
+import { fetchList, chipsDeposit, chipsReward, createGambleMember, fetchAgentList, updateBelongAgent } from '@/api/gambleMember'
 import waves from '@/directive/waves' // 水波纹指令
+import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
+import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
 
 export default {
   name: 'gambleMemberTable',
+  components: { Multiselect },
   directives: {
     waves
   },
         // name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]
       },
       activeName: 'deposit',
+      dialogUpdateFormVisible: false,
+      updateFormData: {},
+      agentLIstOptions: [],
     }
   },
   created() {
     getList() {
       this.listLoading = true
       fetchList(this.listQuery).then(response => {
+        console.log('list',response.data.rows)
         this.list = response.data.rows
         this.total = response.data.count
         this.listLoading = false
     handleDialogClose() {
       this.activeName = 'deposit';
       this.dialogFormVisible = false;
+      this.dialogUpdateFormVisible = false;
     },
     rewardChips() {
       this.$refs['rewardForm'].validate((valid) => {
           })
         }
       })
+    },
+    handleAgentUpdate(row) {
+      this.temp = Object.assign({}, row) // copy obj      
+      this.dialogUpdateFormVisible = true;
+      this.$nextTick(() => {
+        this.$refs['updateForm'].clearValidate()
+      })
+    },
+    updateData() {
+      this.$refs['updateForm'].validate((valid) => {
+        if (valid) {
+          const tempMember = Object.assign({}, this.temp)
+          const tempAgent = Object.assign({}, this.updateFormData.value)
+          console.log('aaaaa',tempAgent)
+          updateBelongAgent(tempMember, tempAgent).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.temp.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.temp)
+                break
+              }
+            }
+            this.dialogUpdateFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '操作成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }
+      })
+    },
+    getRemoteAgentList(query) {
+      fetchAgentList(query).then(response => {
+        if (!response.data.rows) return
+        this.agentLIstOptions = response.data.rows.map(v => ({
+          key: v.GambleMember.name,
+          value: v.GambleMember
+        }))
+      })
     }
   },
   // watch: {

yarn.lock

     vue-style-loader "^3.0.0"
     vue-template-es2015-compiler "^1.6.0"
 
+vue-multiselect@^2.0.8:
+  version "2.0.8"
+  resolved "http://registry.npm.taobao.org/vue-multiselect/download/vue-multiselect-2.0.8.tgz#8933c667723b7310d3516b381b834a3da8ca26be"
+
 vue-router@3.0.1:
   version "3.0.1"
   resolved "http://registry.npm.taobao.org/vue-router/download/vue-router-3.0.1.tgz#d9b05ad9c7420ba0f626d6500d693e60092cc1e9"