Nav apraksta

index.vue 8.3KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238
  1. <!-- TODO select -->
  2. <template>
  3. <div class="app-container calendar-list-container">
  4. <div v-show="visible">
  5. <div class="app-container">
  6. <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名稱" v-model="listQuery.name">
  7. </el-input>
  8. <el-select clearable @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.chipsSort" placeholder="點數">
  9. <el-option v-for="item in chipsSortOptions" :key="item.label" :label="item.label" :value="item.key">
  10. </el-option>
  11. </el-select>
  12. <el-select clearable @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.updatedSort" placeholder="更新時間">
  13. <el-option v-for="item in updatedSortOptions" :key="item.label" :label="item.label" :value="item.key">
  14. </el-option>
  15. </el-select>
  16. <el-button class="filter-item" type="primary" v-waves icon="el-icon-search" @click="handleFilter">搜尋</el-button>
  17. <el-button class="filter-item" @click="handleCreate" type="primary" icon="el-icon-edit">創建</el-button>
  18. </div>
  19. <el-table :data="list" v-loading.body="listLoading" element-loading-text="Loading" border fit highlight-current-row
  20. style="width: 100%">
  21. <el-table-column align="center" label='ID' >
  22. <template slot-scope="scope">
  23. {{scope.row.id}}
  24. </template>
  25. </el-table-column>
  26. <el-table-column label="名稱" align="center">
  27. <template slot-scope="scope">
  28. {{scope.row.name}}
  29. </template>
  30. </el-table-column>
  31. <el-table-column label="點數" align="center">
  32. <template slot-scope="scope">
  33. <span>{{scope.row.chips}}</span>
  34. </template>
  35. </el-table-column>
  36. <el-table-column align="center" label="操作" width="350">
  37. <template slot-scope="scope">
  38. <el-button type="primary" size="mini" icon="el-icon-edit" @click="handleDeposit(scope.row)">上下分</el-button>
  39. <router-link to="/gambleMember/index/chipsHistory">
  40. <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handleLog(scope.row)">上下分紀錄</el-button>
  41. </router-link>
  42. <router-link to="/gambleMember/index/gameHistory">
  43. <el-button type="primary" size="mini" icon="el-icon-tickets" @click="handlePage(scope.row)">歷史查詢</el-button>
  44. </router-link>
  45. </template>
  46. </el-table-column>
  47. </el-table>
  48. <div v-show="!listLoading" class="pagination-container">
  49. <el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page"
  50. :page-sizes="[10,20,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total">
  51. </el-pagination>
  52. </div>
  53. <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
  54. <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
  55. <el-form-item v-if="dialogStatus=='deposit'" label="ID" prop="id">
  56. <el-input v-model="temp.id" :disabled="true"></el-input>
  57. </el-form-item>
  58. <el-form-item label="名稱" prop="name">
  59. <el-input v-if="dialogStatus=='deposit'" v-model="temp.name" :disabled="true"></el-input>
  60. <el-input v-if="dialogStatus=='create'" v-model="temp.name"></el-input>
  61. </el-form-item>
  62. <el-form-item label="點數" prop="chips">
  63. <el-input v-if="dialogStatus=='deposit'" v-model="temp.chips" :disabled="true"></el-input>
  64. <el-input v-if="dialogStatus=='create'" v-model="temp.chips"></el-input>
  65. </el-form-item>
  66. <el-form-item v-if="dialogStatus=='deposit'" label="上下分" prop="depositChips">
  67. <el-input placeholder="請輸入上下分" v-model="temp.depositChips">
  68. </el-input>
  69. </el-form-item>
  70. </el-form>
  71. <div slot="footer" class="dialog-footer">
  72. <el-button @click="dialogFormVisible = false">取 消</el-button>
  73. <el-button v-if="dialogStatus=='create'" type="primary" @click="createData">確 定</el-button>
  74. <el-button v-if="dialogStatus=='deposit'" type="primary" @click="depositChips">確 定</el-button>
  75. </div>
  76. </el-dialog>
  77. </div>
  78. <router-view :member="member"></router-view>
  79. </div>
  80. </template>
  81. <script>
  82. import { mapGetters, mapActions } from 'vuex'
  83. import { fetchList, updateChips, createGambleMember } from '@/api/gambleMember'
  84. import waves from '@/directive/waves' // 水波纹指令
  85. export default {
  86. name: 'gambleMemberTable',
  87. directives: {
  88. waves
  89. },
  90. data() {
  91. return {
  92. list: null,
  93. total: null,
  94. listLoading: true,
  95. listQuery: {
  96. page: 1,
  97. limit: 20,
  98. chipsSort: '',
  99. updatedSort: ''
  100. },
  101. temp: {
  102. id: '',
  103. name: '',
  104. chips: '',
  105. depositChips: ''
  106. },
  107. dialogFormVisible: false,
  108. dialogStatus: '',
  109. textMap: {
  110. deposit: '儲值',
  111. create: '新增'
  112. },
  113. member: {},
  114. chipsSortOptions: [{ label: '多 -> 少', key: 'DESC' }, { label: '少 -> 多', key: 'ASC' }],
  115. updatedSortOptions: [{ label: '新 -> 舊', key: 'DESC' }, { label: '舊 -> 新', key: 'ASC' }],
  116. rules: {
  117. depositChips: [{ pattern: /^-?\d+$/, required: true, message: '請輸入整數', trigger: 'change' }],
  118. chips: [{ pattern: /^(0|[1-9][0-9]*)$/, required: true, message: '請輸入整數', trigger: 'change' }],
  119. name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]
  120. }
  121. }
  122. },
  123. created() {
  124. this.SetVisible(true)
  125. this.getList()
  126. },
  127. computed: {
  128. ...mapGetters([
  129. 'visible'
  130. ])
  131. },
  132. methods: {
  133. ...mapActions([
  134. 'SetVisible'
  135. ]),
  136. getList() {
  137. this.listLoading = true
  138. fetchList(this.listQuery).then(response => {
  139. this.list = response.data.rows
  140. this.total = response.data.count
  141. this.listLoading = false
  142. })
  143. },
  144. handleDeposit(row) {
  145. this.temp = Object.assign({}, row) // copy obj
  146. this.dialogStatus = 'deposit'
  147. this.dialogFormVisible = true
  148. this.$nextTick(() => {
  149. this.$refs['dataForm'].clearValidate()
  150. })
  151. },
  152. depositChips() {
  153. this.$refs['dataForm'].validate((valid) => {
  154. if (valid) {
  155. const tempData = Object.assign({}, this.temp)
  156. updateChips(tempData).then(() => {
  157. for (const v of this.list) {
  158. if (v.id === this.temp.id) {
  159. const index = this.list.indexOf(v)
  160. this.list.splice(index, 1, this.temp)
  161. break
  162. }
  163. }
  164. this.dialogFormVisible = false
  165. this.$notify({
  166. title: '成功',
  167. message: '操作成功',
  168. type: 'success',
  169. duration: 2000
  170. })
  171. this.getList()
  172. })
  173. }
  174. })
  175. },
  176. resetTemp() {
  177. this.temp = {
  178. id: undefined,
  179. name: '',
  180. chips: '',
  181. depositChips: ''
  182. }
  183. },
  184. handleCreate() {
  185. this.resetTemp()
  186. this.dialogStatus = 'create'
  187. this.dialogFormVisible = true
  188. this.$nextTick(() => {
  189. this.$refs['dataForm'].clearValidate()
  190. })
  191. },
  192. createData() {
  193. this.$refs['dataForm'].validate((valid) => {
  194. if (valid) {
  195. createGambleMember(this.temp).then((response) => {
  196. this.list.unshift(response.data)
  197. this.dialogFormVisible = false
  198. this.$notify({
  199. title: '成功',
  200. message: '創建成功',
  201. type: 'success',
  202. duration: 2000
  203. })
  204. })
  205. }
  206. })
  207. },
  208. handlePage(row) {
  209. const temp = Object.assign({}, row) // copy obj
  210. this.SetVisible(false)
  211. this.member = temp
  212. },
  213. handleLog(row) {
  214. const temp = Object.assign({}, row) // copy obj
  215. this.SetVisible(false)
  216. this.member = temp
  217. },
  218. handleFilter() {
  219. this.listQuery.page = 1
  220. this.getList()
  221. },
  222. handleSizeChange(val) {
  223. this.listQuery.limit = val
  224. this.getList()
  225. },
  226. handleCurrentChange(val) {
  227. this.listQuery.page = val
  228. this.getList()
  229. }
  230. }
  231. }
  232. </script>