create GambleMember

src/api/gambleMember.js

@@ -20,3 +20,14 @@ export function updateChips(data) {
     }
   })
 }
+
+export function createGambleMember(data) {
+  return request({
+    url: '/gambleMembers',
+    method: 'post',
+    data: {
+      name: data.name,
+      chips: data.chips
+    }
+  })
+}

src/views/gambleMember/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <div class="app-container">
+<div class="app-container calendar-list-container">
+    <div class="app-container">
+        <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>
       <el-table-column align="center" label='ID' >
         <template slot-scope="scope">
@@ -31,16 +34,18 @@
 
     <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
       <el-form :rules="rules" ref="dataForm" :model="temp" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
-        <el-form-item label="ID" prop="id">
+        <el-form-item v-if="dialogStatus=='deposit'" label="ID" prop="id">
           <el-input v-model="temp.id" :disabled="true"></el-input>
         </el-form-item>
         <el-form-item label="名稱" prop="name">
-          <el-input v-model="temp.name" :disabled="true"></el-input>
+          <el-input v-if="dialogStatus=='deposit'" v-model="temp.name" :disabled="true"></el-input>
+          <el-input v-if="dialogStatus=='create'" v-model="temp.name"></el-input>          
         </el-form-item>
         <el-form-item label="點數" prop="chips">
-          <el-input v-model="temp.chips" :disabled="true"></el-input>
+          <el-input v-if="dialogStatus=='deposit'" v-model="temp.chips" :disabled="true"></el-input>
+          <el-input v-if="dialogStatus=='create'" v-model="temp.chips"></el-input>          
         </el-form-item>
-        <el-form-item label="加值點數" prop="depositChips">
+        <el-form-item v-if="dialogStatus=='deposit'" label="加值點數" prop="depositChips">
           <el-input placeholder="請輸入加值金額" v-model="temp.depositChips">
           </el-input>
         </el-form-item>
@@ -55,7 +60,7 @@
 </template>
 
 <script>
-import { fetchList, updateChips } from '@/api/gambleMember'
+import { fetchList, updateChips, createGambleMember } from '@/api/gambleMember'
 
 export default {
   data() {
@@ -74,11 +79,9 @@ export default {
       temp: {
         id: undefined,
         importance: 1,
-        remark: '',
-        timestamp: new Date(),
-        title: '',
-        type: '',
-        status: 'published'
+        name: '',
+        chips: '',
+        depositChips: '',
       },
       dialogFormVisible: false,
       dialogStatus: '',
@@ -87,7 +90,9 @@ export default {
         create: '新增'
       },
       rules: {
-        depositChips: [{pattern: /^\+?[1-9][0-9]*$/, required: true, message: '只能儲值整數', trigger: 'change' }],
+        depositChips: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: '請輸入整數', trigger: 'change' }],
+        chips: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: '請輸入整數', trigger: 'change' }],
+        name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]        
       }
     }
   },
@@ -136,6 +141,39 @@ export default {
         }
       })
     },
+    resetTemp() {
+      this.temp = {
+        id: undefined,
+        name: '',
+        chips: '',
+        depositChips: '',
+      }
+    },
+    handleCreate() {
+      this.resetTemp()
+      this.dialogStatus = 'create'
+      this.dialogFormVisible = true
+      this.$nextTick(() => {
+        this.$refs['dataForm'].clearValidate()
+      })
+    },
+    createData() {
+      this.$refs['dataForm'].validate((valid) => {
+        if (valid) {
+          createGambleMember(this.temp).then(() => {
+            this.list.unshift(this.temp)
+            this.dialogFormVisible = false
+            this.$notify({
+              title: '成功',
+              message: '創建成功',
+              type: 'success',
+              duration: 2000
+            })
+            // this.getList() 
+          }) 
+        }
+      })
+    },
     handleSizeChange(val) {
       this.listQuery.limit = val
       this.getList()