adjust UI & fix Create display lost ID & refactor Vue data()

src/views/gambleMember/index.vue

@@ -3,7 +3,7 @@
     <div class="app-container">
       <el-input @keyup.enter.native="handleFilter" style="width: 200px;" class="filter-item" placeholder="名稱" v-model="listQuery.name">
       </el-input>
-      <el-select clearable @change='handleFilter' style="width: 90px" class="filter-item" v-model="listQuery.chipsSort" placeholder="點數">
+      <el-select clearable @change='handleFilter' style="width: 120px" class="filter-item" v-model="listQuery.chipsSort" placeholder="點數">
         <el-option v-for="item in chipsSortOptions" :key="item.label" :label="item.label" :value="item.key">
         </el-option>
       </el-select>
@@ -88,13 +88,14 @@ export default {
       listQuery: {
         page: 1,
         limit: 20,
-        importance: undefined,
-        title: undefined,
-        type: undefined,
-        sort: '+id'
+        importance: '',
+        title: '',
+        type: '',
+        chipsSort: '',
+        updatedSort: ''
       },
       temp: {
-        id: undefined,
+        id: '',
         importance: 1,
         name: '',
         chips: '',
@@ -106,8 +107,8 @@ export default {
         deposit: '儲值',
         create: '新增'
       },
-      chipsSortOptions: [{ label: '多到少', key: 'DESC' }, { label: '少到多', key: 'ASC' }],
-      updatedSortOptions: [{ label: '新到舊', key: 'DESC' }, { label: '舊到新', key: 'ASC' }],
+      chipsSortOptions: [{ label: '多 -> 少', key: 'DESC' }, { label: '少 -> 多', key: 'ASC' }],
+      updatedSortOptions: [{ label: '新 -> 舊', key: 'DESC' }, { label: '舊 -> 新', key: 'ASC' }],
       rules: {
         depositChips: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: '請輸入整數', trigger: 'change' }],
         chips: [{ pattern: /^\+?[1-9][0-9]*$/, required: true, message: '請輸入整數', trigger: 'change' }],
@@ -179,8 +180,8 @@ export default {
     createData() {
       this.$refs['dataForm'].validate((valid) => {
         if (valid) {
-          createGambleMember(this.temp).then(() => {
-            this.list.unshift(this.temp)
+          createGambleMember(this.temp).then((response) => {
+            this.list.unshift(response.data)
             this.dialogFormVisible = false
             this.$notify({
               title: '成功',
@@ -188,7 +189,6 @@ export default {
               type: 'success',
               duration: 2000
             })
-            // this.getList()
           })
         }
       })