create gamemaster

src/api/gambleMember.js

@@ -17,7 +17,7 @@ export function fetchGambleMemberList(query) {
 export function fetchWeChatMemberList(data, query) {
   // TODO check data 帶什麼
   return request({
-    url: `/weChatRooms/${data.room}/weChatUsers`,
+    url: `/weChatRooms/${data.id}/weChatUsers`,
     method: 'get',
     params: {
       limit: query.limit,

src/api/room.js

@@ -23,3 +23,28 @@ export function createWeChatRoom(data) {
     }
   })
 }
+
+export function fetchWechatGameMaster(data, query) {
+  return request({
+    url: `/weChatRooms/${data.id}/wechatGameMasters`,
+    method: 'get',
+    params: {
+      limit: query.limit,
+      offset: (query.page - 1) * query.limit,
+      // startAt: query.startAt,
+      // endAt: query.endAt,
+      name: query.name
+    }
+  })
+}
+
+export function createWechatGameMaster(data, query) {
+  return request({
+    url: `/weChatRooms/${data.id}/wechatGameMasters`,
+    method: 'post',
+    data: {
+      member: query.member,
+      wechatUser: query.id
+    }
+  })
+}

src/router/index.js

@@ -92,6 +92,15 @@ export const constantRouterMap = [
                 }
               }
             ]
+          }, {
+            path: '/room/index/wechatGameMaster/index',
+            name: 'WechatGameMaster',
+            component: _import('room/wechatGameMaster/index'),
+            hidden: true,
+            meta: {
+              title: '微信客服'
+              // role: ['dd']
+            }
           }
         ]
       }

src/views/room/index.vue

@@ -30,6 +30,9 @@
             <router-link to="/room/index/wechatMember/index">
               <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handlePage(scope.row)">會員管理</el-button>
             </router-link>       
+            <router-link to="/room/index/wechatGameMaster/index">
+              <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handlePage(scope.row)">客服管理</el-button>
+            </router-link>       
         </template>
       </el-table-column>
     </el-table>

src/views/room/wechatGameMaster/index.vue

@@ -0,0 +1,191 @@
+<!-- TODO select -->
+<template>
+<div class="app-container calendar-list-container">
+  <div  v-show="visible.secondLayer">
+    <div class="app-container">
+      <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名稱" v-model="listQuery.name">
+      </el-input>
+      <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>
+    </div>
+    <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
+      style="width: 100%">
+      <el-table-column align="center" label='ID' >
+        <template slot-scope="scope">
+          {{scope.row.WeChatUser.id}}
+        </template>
+      </el-table-column>
+      <el-table-column label="名稱" align="center">
+        <template slot-scope="scope">
+          {{scope.row.WeChatUser.name}}
+        </template>
+      </el-table-column>
+      <!-- <el-table-column label="操作者" align="center">
+        <template slot-scope="scope">
+          <span>{{moment(scope.row.createdAt)}}</span>
+        </template>
+      </el-table-column> -->
+      <el-table-column align="center" label="操作" width="350">
+        <template slot-scope="scope">
+            <!-- <router-link to="/room/index/wechatMember/index">
+              <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handlePage(scope.row)">會員管理</el-button>
+            </router-link>        -->
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <div v-show="!listLoading" class="pagination-container">
+      <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
+        :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
+      </el-pagination>
+    </div>
+
+    <el-dialog title="客服創建" :visible.sync="dialogCreateFormVisible" :before-close="handleDialogClose" center>
+      <el-form :rules="rules" :model="temp" ref="createForm" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
+          <el-form-item label="代理商" >
+            <multiselect v-model="createFormData" :options="agentLIstOptions" @search-change="getRemoteWeChatMemberList" 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="createData">確 定</el-button>
+      </div>
+    </el-dialog>
+
+  </div>
+  </div>
+</template>
+
+<script>
+
+import { mapGetters, mapActions } from 'vuex'
+import { fetchWechatGameMaster, createWechatGameMaster } from '@/api/room'
+import { fetchWeChatMemberList } from '@/api/gambleMember'
+import waves from '@/directive/waves' // 水波纹指令
+import moment from 'moment-timezone'
+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
+  },
+  data() {
+    return {
+      list: null,
+      total: null,
+      listLoading: true,
+      listQuery: {
+        page: 1,
+        limit: 20,
+        name: ''
+      },
+      temp: {
+        name: '',
+      },
+      rules: {
+        name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]
+      },
+      dialogCreateFormVisible: false,
+      agentLIstOptions: [],
+      createFormData: null
+    }
+  },
+  props: ['room'],
+  created() {
+    this.SetVisible(2)
+    this.getList()
+  },
+  destroyed() {
+    this.SetVisible(1)
+  },
+  computed: {
+    ...mapGetters([
+      'visible'
+    ])
+  },
+  methods: {
+    ...mapActions([
+      'SetVisible'
+    ]),
+    getList() {
+      this.listLoading = true
+      fetchWechatGameMaster(this.room, this.listQuery).then(response => {
+        this.list = response.data.rows
+        this.total = response.data.count
+        this.listLoading = false
+      })
+    },
+    handleCreate() {
+      this.dialogCreateFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['createForm'].clearValidate()
+      })
+    },
+    createData() {
+     this.$refs['createForm'].validate((valid) => {
+        if (valid) {
+          const room = Object.assign({}, this.room)            
+          const createFormData = Object.assign({}, this.createFormData.value)
+          console.log('eqwewq', createFormData)
+          createWechatGameMaster(room, createFormData).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.dialogCreateFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '操作成功',
+              type: 'success',
+              duration: 2000
+            })
+            this.getList()
+          })
+        }
+      })
+    },
+    handleFilter() {
+      this.listQuery.page = 1
+      this.getList()
+    },
+    handleSizeChange(val) {
+      this.listQuery.limit = val
+      this.getList()
+    },
+    handleCurrentChange(val) {
+      this.listQuery.page = val
+      this.getList()
+    },
+    handleDialogClose() {
+      this.dialogCreateFormVisible = false;
+      this.temp = {name: ''};
+    },
+    moment(time) {
+      return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
+    },
+    getRemoteWeChatMemberList(query) {
+      let temp = {
+        limit: 20,
+        page: 1,
+        name: query,
+      }
+      fetchWeChatMemberList(this.room, temp).then(response => {
+        if (!response.data.rows) return
+        this.agentLIstOptions = response.data.rows.map(v => ({
+          key: v.WeChatUser.name,
+          value: v.WeChatUser
+        }))
+      })
+    }
+  }
+}
+</script>