add member

src/api/room.js

     method: 'put'
   })
 }
+
+export function createWechatMember(data, query) {
+  return request({
+    url: `/gambleMembers`,
+    method: 'post',
+    data: {
+      name: query.name,
+      wechatRoom: data.id
+    }
+  })
+}

src/views/room/wechatMember/index.vue

           </el-option>
         </el-select> -->
         <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
+        <el-button class="filter-item" @click="handleCreate" type="primary" icon="el-icon-edit">創建</el-button>
         <el-button class="filter-item" type="danger" v-waves icon="el-icon-warning" @click="handlereset">歸零</el-button>
       </div>
       <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
             <el-button type="primary" @click="updateData">確 定</el-button>
           </div>
       </el-dialog>
-
+      <el-dialog title="會員創建" :visible.sync="dialogCreateFormVisible" :before-close="handleDialogClose" center>
+        <el-form :rules="rules" :model="tempCreate" ref="createForm" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+          <el-form-item label="名稱" prop="id">
+            <el-input v-model="tempCreate.name"></el-input>
+          </el-form-item>
+        </el-form>          
+        <div slot="footer" class="dialog-footer">
+          <el-button @click="handleDialogClose">取 消</el-button>
+          <el-button type="primary" @click="createData">確 定</el-button>
+        </div>
+      </el-dialog>
     </div>
     <router-view></router-view>
   </div>
 import { mapGetters, mapActions } from 'vuex'
 // TODO 需更改抓取此房間人員
 import { fetchWeChatMemberList, chipsDeposit, chipsReward, createGambleMember, fetchAgentList, updateBelongAgent } from '@/api/gambleMember'
-import { resetWechatRoomMembersChips } from '@/api/room'
+import { resetWechatRoomMembersChips, createWechatMember } from '@/api/room'
 import waves from '@/directive/waves' // 水波纹指令
 import Multiselect from 'vue-multiselect'// 使用的一个多选框组件，element-ui的select不能满足所有需求
 import 'vue-multiselect/dist/vue-multiselect.min.css'// 多选框组件css
         chipsSort: '', 
         updatedSort: '' 
       }, 
+      tempCreate: {
+        name: '',
+      },
+      dialogCreateFormVisible: false,
       temp: {
         id: '',
         WeChatUser: {
     }
   },
   created() {
+        console.log('sssss', this.data.secondLayer)
+
     this.SetVisible(2)
     this.getList()
   },
     noAgent(GambleMember) {
       return GambleMember.GambleAgent?false:true;
       // console.log('GambleAgent', GambleMember)
-    }
+    },
+    handleCreate() {
+      this.dialogCreateFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['createForm'].clearValidate()
+      })
+    },
+    createData() {
+     this.$refs['createForm'].validate((valid) => {
+        if (valid) {
+          const temp = Object.assign({}, this.tempCreate)
+          createWechatMember(this.data.secondLayer, temp).then(() => {
+            for (const v of this.list) {
+              if (v.id === this.tempCreate.id) {
+                const index = this.list.indexOf(v)
+                this.list.splice(index, 1, this.tempCreate)
+                break
+              }
+            }
+            this.dialogCreateFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '操作成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }
+      })
+    },
   },
   // watch: {
   //   activeName: (val) => {