Browse Source

create room

Unknown 7 years ago
parent
commit
e14372a326
2 changed files with 59 additions and 3 deletions
  1. 10 0
      src/api/room.js
  2. 49 3
      src/views/room/index.vue

+ 10 - 0
src/api/room.js

13
     }
13
     }
14
   })
14
   })
15
 }
15
 }
16
+
17
+export function createWeChatRoom(data) {
18
+  return request({
19
+    url: `/weChatRooms`,
20
+    method: 'post',
21
+    data: {
22
+      name: data.name
23
+    }
24
+  })
25
+}

+ 49 - 3
src/views/room/index.vue

40
       </el-pagination>
40
       </el-pagination>
41
     </div>
41
     </div>
42
 
42
 
43
+    <el-dialog title="房間創建" :visible.sync="dialogCreateFormVisible" :before-close="handleDialogClose" center>
44
+      <el-form :rules="rules" :model="temp" ref="createForm" label-position="left" label-width="100px" style='width: 400px; margin-left:50px;'>
45
+        <el-form-item label="名稱" prop="id">
46
+          <el-input v-model="temp.name"></el-input>
47
+        </el-form-item>
48
+      </el-form>          
49
+      <div slot="footer" class="dialog-footer">
50
+        <el-button @click="handleDialogClose">取 消</el-button>
51
+        <el-button type="primary" @click="createData">確 定</el-button>
52
+      </div>
53
+    </el-dialog>
54
+
43
   </div>
55
   </div>
44
     <router-view :room="room"></router-view>
56
     <router-view :room="room"></router-view>
45
   </div>
57
   </div>
48
 <script>
60
 <script>
49
 
61
 
50
 import { mapGetters, mapActions } from 'vuex'
62
 import { mapGetters, mapActions } from 'vuex'
51
-import { fetchWechatRooms } from '@/api/room'
63
+import { fetchWechatRooms, createWeChatRoom } from '@/api/room'
52
 import waves from '@/directive/waves' // 水波纹指令
64
 import waves from '@/directive/waves' // 水波纹指令
53
 import moment from 'moment-timezone'
65
 import moment from 'moment-timezone'
54
 
66
 
67
         limit: 20,
79
         limit: 20,
68
       },
80
       },
69
       temp: {
81
       temp: {
70
-        id: '',
71
         name: '',
82
         name: '',
72
-        chips: '',
73
       },
83
       },
74
       room: {},
84
       room: {},
85
+      rules: {
86
+        name: [{ type: 'string', required: true, message: '必填', trigger: 'change' }]
87
+      },
88
+      dialogCreateFormVisible: false,
75
     }
89
     }
76
   },
90
   },
77
   created() {
91
   created() {
102
     },
116
     },
103
     handleCreate() {
117
     handleCreate() {
104
       //TODO 了解wechat 的 room 關聯
118
       //TODO 了解wechat 的 room 關聯
119
+      this.dialogCreateFormVisible = true
120
+      this.$nextTick(() => {
121
+        this.$refs['createForm'].clearValidate()
122
+      })
123
+    },
124
+    createData() {
125
+     this.$refs['createForm'].validate((valid) => {
126
+        if (valid) {
127
+          const temp = Object.assign({}, this.temp)
128
+          createWeChatRoom(temp).then(() => {
129
+            for (const v of this.list) {
130
+              if (v.id === this.temp.id) {
131
+                const index = this.list.indexOf(v)
132
+                this.list.splice(index, 1, this.temp)
133
+                break
134
+              }
135
+            }
136
+            this.dialogCreateFormVisible = false
137
+            this.$notify({
138
+              title: '成功',
139
+              message: '操作成功',
140
+              type: 'success',
141
+              duration: 2000
142
+            })
143
+            this.getList()
144
+          })
145
+        }
146
+      })
105
     },
147
     },
106
     handleFilter() {
148
     handleFilter() {
107
       this.listQuery.page = 1
149
       this.listQuery.page = 1
115
       this.listQuery.page = val
157
       this.listQuery.page = val
116
       this.getList()
158
       this.getList()
117
     },
159
     },
160
+    handleDialogClose() {
161
+      this.dialogCreateFormVisible = false;
162
+      this.temp = {name: ''};
163
+    },
118
     moment(time) {
164
     moment(time) {
119
       return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
165
       return moment(time).tz('Asia/Taipei').format('YYYY-MM-DD HH:mm:ss')
120
     },
166
     },