许成详 6 years ago
parent
commit
433b351ecc

+ 116
- 87
src/pages/system/systemSet/userManager/add.vue View File

@@ -3,36 +3,12 @@
3 3
     <form class="mainForm">
4 4
       <ul>
5 5
         <li class="flex-h">
6
-          <span>用户名:</span>
6
+          <span>帐户名称:</span>
7 7
           <div class="flex-item">
8 8
             <div style="width:50%">
9 9
               <el-input
10
-                placeholder="请输入用户名"
11
-                v-model="postData.userName"
12
-                clearable>
13
-              </el-input>
14
-            </div>
15
-          </div>
16
-        </li>
17
-        <li class="flex-h">
18
-          <span>密码:</span>
19
-          <div class="flex-item">
20
-            <div style="width:50%">
21
-              <el-input
22
-                placeholder="请输入密码"
23
-                v-model="postData.passWord"
24
-                clearable>
25
-              </el-input>
26
-            </div>
27
-          </div>
28
-        </li>
29
-        <li class="flex-h">
30
-          <span>确认密码:</span>
31
-          <div class="flex-item">
32
-            <div style="width:50%">
33
-              <el-input
34
-                placeholder="请再输入一次密码"
35
-                v-model="postData.checkPassWord"
10
+                placeholder="请输入帐户名称"
11
+                v-model="postData.UserName"
36 12
                 clearable>
37 13
               </el-input>
38 14
             </div>
@@ -42,11 +18,14 @@
42 18
           <span>用户头像:</span>
43 19
           <div class="flex-item">
44 20
             <div>
45
-              <a class="formImg">
46
-                <img src="" class="centerLabel contain" alt="">
47
-                <i class="iconfont icon-quxiao"></i>
48
-              </a>
49
-              <el-button type="success" size="mini">上传图片</el-button>
21
+              <el-upload
22
+                class="avatar-uploader"
23
+                :action='$api.file.image.url'
24
+                :show-file-list="false"
25
+                :on-success="handleAvatarSuccess">
26
+                <img v-if="postData.HeadImgUrl" :src="postData.HeadImgUrl" class="avatar">
27
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
28
+              </el-upload>
50 29
             </div>
51 30
           </div>
52 31
         </li>
@@ -56,7 +35,7 @@
56 35
             <div style="width:50%">
57 36
               <el-input
58 37
                 placeholder="请输入真实姓名"
59
-                v-model="postData.realName"
38
+                v-model="postData.RealName"
60 39
                 clearable>
61 40
               </el-input>
62 41
             </div>
@@ -68,7 +47,7 @@
68 47
             <div style="width:50%">
69 48
               <el-input
70 49
                 placeholder="请输入邮箱"
71
-                v-model="postData.email"
50
+                v-model="postData.Email"
72 51
                 clearable>
73 52
               </el-input>
74 53
             </div>
@@ -80,7 +59,7 @@
80 59
             <div style="width:50%">
81 60
               <el-input
82 61
                 placeholder="请输入工号"
83
-                v-model="postData.number"
62
+                v-model="postData.workNo"
84 63
                 clearable>
85 64
               </el-input>
86 65
             </div>
@@ -92,7 +71,7 @@
92 71
             <div style="width:50%">
93 72
               <el-input
94 73
                 placeholder="请输入手机号"
95
-                v-model="postData.mobile"
74
+                v-model="postData.Phone"
96 75
                 clearable>
97 76
               </el-input>
98 77
             </div>
@@ -102,14 +81,9 @@
102 81
           <span>用户标签:</span>
103 82
           <div class="flex-item">
104 83
             <div style="width:50%">
105
-              <el-select v-model="postData.userLabel" placeholder="请选择">
106
-                <el-option
107
-                  v-for="item in userLabelList"
108
-                  :key="item.value"
109
-                  :label="item.label"
110
-                  :value="item.value">
111
-                </el-option>
112
-              </el-select>
84
+              <el-checkbox-group v-model="TagIds" @change="handleCheckedCitiesChange">
85
+                <el-checkbox v-for="(item,index) in TagList" :label="item.TagId" :key="index">{{item.TagName}}</el-checkbox>
86
+              </el-checkbox-group>
113 87
             </div>
114 88
           </div>
115 89
         </li>
@@ -117,39 +91,28 @@
117 91
           <span>用户类型:</span>
118 92
           <div class="flex-item">
119 93
             <div style="width:50%">
120
-              <el-select v-model="postData.userLabel" placeholder="请选择">
94
+              <el-select v-model="postData.TypeId" placeholder="请选择">
121 95
                 <el-option
122
-                  v-for="item in userLabelList"
123
-                  :key="item.value"
124
-                  :label="item.label"
125
-                  :value="item.value">
96
+                  v-for="item in typeList"
97
+                  :key="item.TypeId"
98
+                  :label="item.TypeName"
99
+                  :value="item.TypeId">
126 100
                 </el-option>
127 101
               </el-select>
128 102
             </div>
129 103
           </div>
130 104
         </li>
131 105
         <li class="flex-h">
132
-          <span>锁定用户:</span>
106
+          <span>选择案场:</span>
133 107
           <div class="flex-item">
134
-            <div style="width:50%" class="switch">
135
-              <el-switch
136
-                v-model="postData.lockUser"
137
-                active-color="#13ce66"
138
-                inactive-color="#ff4949">
139
-              </el-switch>
140
-            </div>
141
-          </div>
142
-        </li>
143
-        <li class="flex-h">
144
-          <span>是否案场联系人:</span>
145
-          <div class="flex-item">
146
-            <div style="width:50%" class="switch">
147
-              <el-switch
148
-                v-model="postData.linkMan"
149
-                active-color="#13ce66"
150
-                inactive-color="#ff4949">
151
-              </el-switch>
152
-            </div>
108
+            <el-select v-model="CaseId" placeholder="请选择">
109
+              <el-option
110
+                v-for="item in cases"
111
+                :key="item.CaseId"
112
+                :label="item.CaseName"
113
+                :value="item.CaseId">
114
+              </el-option>
115
+            </el-select>
153 116
           </div>
154 117
         </li>
155 118
         <li style="text-align:center">
@@ -162,41 +125,107 @@
162 125
 </template>
163 126
 
164 127
 <script>
165
-import { createNamespacedHelpers } from 'vuex'
166
-const { mapState: mapUserState } = createNamespacedHelpers('user')
128
+import { mapState } from 'vuex'
129
+
167 130
 export default {
168 131
   name: '',
169 132
   data () {
170 133
     return {
134
+      TagIds: [],
135
+      typeList: [],
136
+      TagList: [],
137
+      CheckPwd: '',
171 138
       postData: {
172
-        userName: '', // 用户名
173
-        passWord: '', // 密码
174
-        checkPassWord: '', // 确认密码
175
-        realName: '', // 真实姓名
176
-        email: '', // 邮箱
177
-        number: '', // 工号
178
-        mobile: '', // 手机号
179
-        userLabel: '',
180
-        lockUser: true,
181
-        linkMan: true
139
+        UserId: '', // 用户id
140
+        UserName: '', // 用户名
141
+        RealName: '', // 真实姓名
142
+        Pwd: '', // 密码
143
+        OrgId: '', // 机构id
144
+        Sex: '', // 性别
145
+        WorkNo: '', // 工号
146
+        Email: '', // 邮箱
147
+        Phone: '', // 手机号
148
+        HeadImgUrl: '', // 头像
149
+        TypeId: '', // 用户类型id
150
+        TagIds: '', // 用户标签
151
+        BelongCaseId: '', // 所属案场id
182 152
       }
183 153
     }
184 154
   },
185 155
   components: {},
186 156
   computed: {
187
-    ...mapUserState({
188
-      userLabelList: x => x.userLabelList,
189
-    })
157
+    ...mapState({
158
+      cases: x => x.app.cases.list,
159
+      defaultCaseId: x => x.app.cases.default,
160
+    }),
161
+    CaseId: {
162
+      get () {
163
+        return this.postData.BelongCaseId || this.defaultCaseId
164
+      },
165
+      set (val) {
166
+        this.postData.BelongCaseId = val
167
+      }
168
+    }
169
+  },
170
+  created () {
171
+    this.getCaseTagList()
172
+    this.getUserTypeList()
190 173
   },
191 174
   methods: {
192
-    submit () {
193
-      console.log(this.postData)
175
+    getCaseTagList () { // 获取标签数据
176
+      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
177
+        method: this.$api.caseManager.getCaseTagList.method,
178
+        queryData: { caseid: this.CaseId, page: 1, pagesize: 10000 }
179
+      }).then(res => {
180
+        this.TagList = res.list
181
+      })
182
+    },
183
+    getUserTypeList () { // 获取用户类型
184
+      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
185
+        method: this.$api.caseManager.getUserTypeList.method,
186
+      }).then(res => {
187
+        this.typeList = res
188
+        this.postData.TypeId = res[0].TypeId
189
+      })
190
+    },
191
+    handleCheckedCitiesChange (val) {
192
+      this.postData.TagIds = val.join(',')
193
+    },
194
+    handleAvatarSuccess (res, file) {
195
+      this.postData.HeadImgUrl = res.result.url
196
+    },
197
+    submit () { // 提交数据
198
+      if (this.postData.UserName === '') {
199
+        this.$message({
200
+          type: 'error',
201
+          message: '帐户名称不能为空'
202
+        })
203
+        return false
204
+      }
205
+      if (this.postData.Phone === '') {
206
+        this.$message({
207
+          type: 'error',
208
+          message: '手机号不能为空'
209
+        })
210
+        return false
211
+      }
212
+      if (this.postData.BelongCaseId === '') this.postData.BelongCaseId = this.CaseId
213
+      this.$ajax(this.$api.systemSet.addUser.url, {
214
+        method: this.$api.systemSet.addUser.method,
215
+        data: this.postData
216
+      }).then(res => {
217
+        this.$message({
218
+          type: 'success',
219
+          message: '操作成功'
220
+        })
221
+        this.$router.push({name: 'userManager'})
222
+      })
194 223
     },
195 224
     cancel () {
196 225
       this.$router.go(-1)
197 226
     }
198 227
   },
199
-  mounted () {}
228
+  mounted () { }
200 229
 }
201 230
 </script>
202 231
 

+ 134
- 87
src/pages/system/systemSet/userManager/edit.vue View File

@@ -3,36 +3,12 @@
3 3
     <form class="mainForm">
4 4
       <ul>
5 5
         <li class="flex-h">
6
-          <span>用户名:</span>
6
+          <span>帐户名称:</span>
7 7
           <div class="flex-item">
8 8
             <div style="width:50%">
9 9
               <el-input
10
-                placeholder="请输入用户名"
11
-                v-model="postData.userName"
12
-                clearable>
13
-              </el-input>
14
-            </div>
15
-          </div>
16
-        </li>
17
-        <li class="flex-h">
18
-          <span>密码:</span>
19
-          <div class="flex-item">
20
-            <div style="width:50%">
21
-              <el-input
22
-                placeholder="请输入密码"
23
-                v-model="postData.passWord"
24
-                clearable>
25
-              </el-input>
26
-            </div>
27
-          </div>
28
-        </li>
29
-        <li class="flex-h">
30
-          <span>确认密码:</span>
31
-          <div class="flex-item">
32
-            <div style="width:50%">
33
-              <el-input
34
-                placeholder="请再输入一次密码"
35
-                v-model="postData.checkPassWord"
10
+                placeholder="请输入帐户名称"
11
+                v-model="postData.UserName"
36 12
                 clearable>
37 13
               </el-input>
38 14
             </div>
@@ -42,11 +18,14 @@
42 18
           <span>用户头像:</span>
43 19
           <div class="flex-item">
44 20
             <div>
45
-              <a class="formImg">
46
-                <img src="" class="centerLabel contain" alt="">
47
-                <i class="iconfont icon-quxiao"></i>
48
-              </a>
49
-              <el-button type="success" size="mini">上传图片</el-button>
21
+              <el-upload
22
+                class="avatar-uploader"
23
+                :action='$api.file.image.url'
24
+                :show-file-list="false"
25
+                :on-success="handleAvatarSuccess">
26
+                <img v-if="postData.HeadImgUrl" :src="postData.HeadImgUrl" class="avatar">
27
+                <i v-else class="el-icon-plus avatar-uploader-icon"></i>
28
+              </el-upload>
50 29
             </div>
51 30
           </div>
52 31
         </li>
@@ -56,7 +35,7 @@
56 35
             <div style="width:50%">
57 36
               <el-input
58 37
                 placeholder="请输入真实姓名"
59
-                v-model="postData.realName"
38
+                v-model="postData.RealName"
60 39
                 clearable>
61 40
               </el-input>
62 41
             </div>
@@ -68,7 +47,7 @@
68 47
             <div style="width:50%">
69 48
               <el-input
70 49
                 placeholder="请输入邮箱"
71
-                v-model="postData.email"
50
+                v-model="postData.Email"
72 51
                 clearable>
73 52
               </el-input>
74 53
             </div>
@@ -80,7 +59,7 @@
80 59
             <div style="width:50%">
81 60
               <el-input
82 61
                 placeholder="请输入工号"
83
-                v-model="postData.number"
62
+                v-model="postData.workNo"
84 63
                 clearable>
85 64
               </el-input>
86 65
             </div>
@@ -92,7 +71,7 @@
92 71
             <div style="width:50%">
93 72
               <el-input
94 73
                 placeholder="请输入手机号"
95
-                v-model="postData.mobile"
74
+                v-model="postData.Phone"
96 75
                 clearable>
97 76
               </el-input>
98 77
             </div>
@@ -102,14 +81,9 @@
102 81
           <span>用户标签:</span>
103 82
           <div class="flex-item">
104 83
             <div style="width:50%">
105
-              <el-select v-model="postData.userLabel" placeholder="请选择">
106
-                <el-option
107
-                  v-for="item in userLabelList"
108
-                  :key="item.value"
109
-                  :label="item.label"
110
-                  :value="item.value">
111
-                </el-option>
112
-              </el-select>
84
+              <el-checkbox-group v-model="TagIds" @change="handleCheckedCitiesChange">
85
+                <el-checkbox v-for="(item,index) in TagList" :label="item.TagId" :key="index">{{item.TagName}}</el-checkbox>
86
+              </el-checkbox-group>
113 87
             </div>
114 88
           </div>
115 89
         </li>
@@ -117,39 +91,28 @@
117 91
           <span>用户类型:</span>
118 92
           <div class="flex-item">
119 93
             <div style="width:50%">
120
-              <el-select v-model="postData.userLabel" placeholder="请选择">
94
+              <el-select v-model="postData.TypeId" placeholder="请选择">
121 95
                 <el-option
122
-                  v-for="item in userLabelList"
123
-                  :key="item.value"
124
-                  :label="item.label"
125
-                  :value="item.value">
96
+                  v-for="item in typeList"
97
+                  :key="item.TypeId"
98
+                  :label="item.TypeName"
99
+                  :value="item.TypeId">
126 100
                 </el-option>
127 101
               </el-select>
128 102
             </div>
129 103
           </div>
130 104
         </li>
131 105
         <li class="flex-h">
132
-          <span>锁定用户:</span>
133
-          <div class="flex-item">
134
-            <div style="width:50%" class="switch">
135
-              <el-switch
136
-                v-model="postData.lockUser"
137
-                active-color="#13ce66"
138
-                inactive-color="#ff4949">
139
-              </el-switch>
140
-            </div>
141
-          </div>
142
-        </li>
143
-        <li class="flex-h">
144
-          <span>是否案场联系人:</span>
106
+          <span>选择案场:</span>
145 107
           <div class="flex-item">
146
-            <div style="width:50%" class="switch">
147
-              <el-switch
148
-                v-model="postData.linkMan"
149
-                active-color="#13ce66"
150
-                inactive-color="#ff4949">
151
-              </el-switch>
152
-            </div>
108
+            <el-select v-model="CaseId" placeholder="请选择">
109
+              <el-option
110
+                v-for="item in cases"
111
+                :key="item.CaseId"
112
+                :label="item.CaseName"
113
+                :value="item.CaseId">
114
+              </el-option>
115
+            </el-select>
153 116
           </div>
154 117
         </li>
155 118
         <li style="text-align:center">
@@ -162,41 +125,125 @@
162 125
 </template>
163 126
 
164 127
 <script>
165
-import { createNamespacedHelpers } from 'vuex'
166
-const { mapState: mapUserState } = createNamespacedHelpers('user')
128
+import { mapState } from 'vuex'
129
+
167 130
 export default {
168 131
   name: '',
169 132
   data () {
170 133
     return {
134
+      TagIds: [],
135
+      typeList: [],
136
+      TagList: [],
137
+      CheckPwd: '',
171 138
       postData: {
172
-        userName: '', // 用户名
173
-        passWord: '', // 密码
174
-        checkPassWord: '', // 确认密码
175
-        realName: '', // 真实姓名
176
-        email: '', // 邮箱
177
-        number: '', // 工号
178
-        mobile: '', // 手机号
179
-        userLabel: '',
180
-        lockUser: true,
181
-        linkMan: true
139
+        UserId: '', // 用户id
140
+        UserName: '', // 用户名
141
+        RealName: '', // 真实姓名
142
+        Pwd: '', // 密码
143
+        OrgId: '', // 机构id
144
+        Sex: '', // 性别
145
+        WorkNo: '', // 工号
146
+        Email: '', // 邮箱
147
+        Phone: '', // 手机号
148
+        HeadImgUrl: '', // 头像
149
+        TypeId: '', // 用户类型id
150
+        TagIds: '', // 用户标签
151
+        BelongCaseId: '', // 所属案场id
182 152
       }
183 153
     }
184 154
   },
185 155
   components: {},
186 156
   computed: {
187
-    ...mapUserState({
188
-      userLabelList: x => x.userLabelList,
189
-    })
157
+    ...mapState({
158
+      cases: x => x.app.cases.list,
159
+      defaultCaseId: x => x.app.cases.default,
160
+    }),
161
+    CaseId: {
162
+      get () {
163
+        return this.postData.BelongCaseId || this.defaultCaseId
164
+      },
165
+      set (val) {
166
+        this.postData.BelongCaseId = val
167
+      }
168
+    }
169
+  },
170
+  created () {
171
+    this.getCaseTagList()
172
+    this.getUserTypeList()
173
+    this.getUserInfo()
190 174
   },
191 175
   methods: {
192
-    submit () {
193
-      console.log(this.postData)
176
+    getUserInfo () { // 获取用户信息
177
+      this.$ajax(this.$api.systemSet.getUserInfo.url, {
178
+        method: this.$api.systemSet.getUserInfo.method,
179
+        urlData: { id: this.$route.query.id }
180
+      }).then(res => {
181
+        for (var n = 0; n < res.UserTag.length; n++) {
182
+          this.TagIds.push(res.UserTag[n].TagId)
183
+        }
184
+        if (res.UserType !== null) res.TypeId = res.UserType[0].TypeId
185
+        for (var key in this.postData) {
186
+          if (res[key] !== undefined) {
187
+            this.postData[key] = res[key]
188
+          }
189
+        }
190
+      })
191
+    },
192
+    getCaseTagList () { // 获取标签数据
193
+      this.$ajax(this.$api.caseManager.getCaseTagList.url, {
194
+        method: this.$api.caseManager.getCaseTagList.method,
195
+        queryData: { caseid: this.CaseId, page: 1, pagesize: 10000 }
196
+      }).then(res => {
197
+        this.TagList = res.list
198
+      })
199
+    },
200
+    getUserTypeList () { // 获取用户类型
201
+      this.$ajax(this.$api.caseManager.getUserTypeList.url, {
202
+        method: this.$api.caseManager.getUserTypeList.method,
203
+      }).then(res => {
204
+        this.typeList = res
205
+        this.postData.TypeId = res[0].TypeId
206
+      })
207
+    },
208
+    handleCheckedCitiesChange (val) {
209
+      this.postData.TagIds = val.join(',')
210
+    },
211
+    handleAvatarSuccess (res, file) {
212
+      this.postData.HeadImgUrl = res.result.url
213
+    },
214
+    submit () { // 提交数据
215
+      if (this.postData.UserName === '') {
216
+        this.$message({
217
+          type: 'error',
218
+          message: '帐户名称不能为空'
219
+        })
220
+        return false
221
+      }
222
+      if (this.postData.Phone === '') {
223
+        this.$message({
224
+          type: 'error',
225
+          message: '手机号不能为空'
226
+        })
227
+        return false
228
+      }
229
+      if (this.postData.BelongCaseId === '') this.postData.BelongCaseId = this.CaseId
230
+      if (this.postData.TagIds === '') this.postData.TagIds = this.TagIds.join(',')
231
+      this.$ajax(this.$api.systemSet.editUser.url, {
232
+        method: this.$api.systemSet.editUser.method,
233
+        data: this.postData
234
+      }).then(res => {
235
+        this.$message({
236
+          type: 'success',
237
+          message: '操作成功'
238
+        })
239
+        this.$router.push({ name: 'userManager' })
240
+      })
194 241
     },
195 242
     cancel () {
196 243
       this.$router.go(-1)
197 244
     }
198 245
   },
199
-  mounted () {}
246
+  mounted () { }
200 247
 }
201 248
 </script>
202 249
 

+ 148
- 78
src/pages/system/systemSet/userManager/index.vue View File

@@ -5,53 +5,63 @@
5 5
         <div class="flex-item flex-h">
6 6
           <el-button size="mini" type="success" @click="addUser">新增用户</el-button>
7 7
         </div>
8
-        <tableSearch value='请输入用户名' @exportSearchKey="searchList"></tableSearch>
8
+        <ul>
9
+          <li>
10
+            <span>选择案场:</span>
11
+            <el-select v-model="CaseId" placeholder="请选择">
12
+              <el-option
13
+                v-for="item in cases"
14
+                :key="item.CaseId"
15
+                :label="item.CaseName"
16
+                :value="item.CaseId">
17
+              </el-option>
18
+            </el-select>
19
+          </li>
20
+        </ul>
21
+        <el-button
22
+          size="mini"
23
+          type="primary" @click="search">搜索</el-button>
9 24
       </div>
10 25
       <div class="moreFilter"></div>
11 26
     </div>
12 27
     <div class="system-table-box">
13 28
       <el-table
14
-        :data="tableData"
29
+        :data="currentList"
15 30
         stripe
16 31
         style="width: 100%">
17 32
         <el-table-column
18 33
           fixed
19
-          prop="userName"
34
+          prop="UserName"
20 35
           label="用户名"
21 36
           width="150">
22 37
         </el-table-column>
23 38
         <el-table-column
24
-          prop="realName"
39
+          prop="RealName"
25 40
           label="真实姓名"
26 41
           width="120">
27 42
         </el-table-column>
28 43
         <el-table-column
29
-          prop="email"
44
+          prop="Email"
30 45
           label="邮箱"
31 46
           width="150">
32 47
         </el-table-column>
33 48
         <el-table-column
34
-          prop="workNum"
49
+          prop="WorkNo"
35 50
           label="工号"
36 51
           width="200">
37 52
         </el-table-column>
38 53
         <el-table-column
39
-          prop="mobile"
54
+          prop="Phone"
40 55
           label="手机号"
41 56
           width="100">
42 57
         </el-table-column>
43 58
         <el-table-column
44
-          prop="userType"
59
+          prop="UserTypeNames"
45 60
           label="用户类型"
46 61
           width="100">
47 62
         </el-table-column>
48 63
         <el-table-column
49
-          prop="lock"
50
-          label="是否锁定"
51
-          width="100">
52
-        </el-table-column>
53
-        <el-table-column
54
-          prop="creatTime"
64
+          prop="CreateDate"
55 65
           label="创建时间"
56 66
           width="200">
57 67
         </el-table-column>
@@ -74,14 +84,13 @@
74 84
       </el-table>
75 85
     </div>
76 86
     <el-pagination
77
-      @size-change="handleSizeChange"
78 87
       @current-change="handleCurrentChange"
79
-      :current-page.sync="currentPage"
80
-      :page-size="10"
88
+      :current-page.sync="postData.page"
89
+      :page-size="postData.pagesize"
81 90
       layout="prev, pager, next, jumper"
82
-      :total="100">
91
+      :total="total">
83 92
     </el-pagination>
84
-    <el-dialog title='绑定角色' :visible.sync="dialogTableVisible">
93
+    <el-dialog v-if="currentEditItem != null" :title="'绑定角色 - ' + currentEditItem.UserName" :visible.sync="dialogTableVisible">
85 94
       <form class="mainForm">
86 95
         <ul>
87 96
           <li class="flex-h">
@@ -90,7 +99,7 @@
90 99
               <div>
91 100
                 <el-input
92 101
                   placeholder="请输入角色名称并按回车搜索"
93
-                  v-model="postData.searchData"
102
+                  v-model="postData.name"
94 103
                   @change='getRole'
95 104
                   clearable>
96 105
                 </el-input>
@@ -102,11 +111,11 @@
102 111
             <div class="flex-item">
103 112
               <div>
104 113
                 <el-button
105
-                  v-for="tag in searchTags"
106
-                  :key="tag.name"
114
+                  v-for="tag in searchTagList"
115
+                  :key="tag.RoleId"
107 116
                   style="margin-right:1rem"
108 117
                   @click='addTag(tag)'>
109
-                  {{tag.name}}
118
+                  {{tag.RoleName}}
110 119
                   </el-button>
111 120
               </div>
112 121
             </div>
@@ -117,15 +126,20 @@
117 126
               <div>
118 127
                 <el-tag
119 128
                   v-for="tag in tags"
120
-                  :key="tag.name"
129
+                  :key="tag.RoleId"
121 130
                   style="margin-right:1rem"
122 131
                   @close="handleClose(tag)"
123 132
                   closable>
124
-                  {{tag.name}}
133
+                  {{tag.RoleName}}
125 134
                 </el-tag>
126 135
               </div>
127 136
             </div>
128 137
           </li>
138
+          <li style="text-align:right;">
139
+            <el-button
140
+              size="mini"
141
+              type="success" @click="bindRoles">确认绑定</el-button>
142
+          </li>
129 143
         </ul>
130 144
       </form>
131 145
     </el-dialog>
@@ -133,69 +147,115 @@
133 147
 </template>
134 148
 
135 149
 <script>
136
-import tableSearch from '@/components/tableSearch/index'
137
-import { createNamespacedHelpers } from 'vuex'
138
-const { mapState: mapUserState, mapActions: mapUserActions } = createNamespacedHelpers('user')
150
+import { mapState } from 'vuex'
151
+
139 152
 export default {
140 153
   name: '',
141 154
   data () {
142 155
     return {
143
-      currentPage: 0, // 当前页码
156
+      currentEditItem: null,
144 157
       dialogTableVisible: false,
145
-      tableSearch: { // 表格搜索条件
146
-        key: '111', // 搜索关键字
158
+      total: 0,
159
+      postData: { // 表格搜索条件
160
+        caseid: '',
161
+        name: '', // 搜索关键词
162
+        page: 1, // 当前页码
163
+        pagesize: 10000, // 请求数据量
147 164
       },
148
-      tableData: [{
149
-        userName: '赵日天',
150
-        realName: '13446666666',
151
-        email: '赵日地',
152
-        workNum: '赵爸爸',
153
-        mobile: '1376975175',
154
-        userType: '1',
155
-        lock: true,
156
-        creatTime: '2018-08-08 10:00:00'
157
-      }],
158
-      postData: {
159
-        searchData: ''
160
-      },
161
-      tags: [
162
-        { name: '角色0' },
163
-        { name: '角色1' },
164
-        { name: '角色2' },
165
-        { name: '角色3' },
166
-        { name: '角色4' }
167
-      ]
165
+      currentList: [],
166
+      searchTagList: [],
167
+      tags: [],
168 168
     }
169 169
   },
170
-  components: {
171
-    tableSearch,
172
-  },
173 170
   computed: {
174
-    ...mapUserState({
175
-      searchTags: x => x.roleList,
176
-    })
171
+    ...mapState({
172
+      cases: x => x.app.cases.list,
173
+      defaultCaseId: x => x.app.cases.default
174
+    }),
175
+    CaseId: {
176
+      get () {
177
+        return this.postData.caseid || this.defaultCaseId
178
+      },
179
+      set (val) {
180
+        this.postData.caseid = val
181
+      }
182
+    }
183
+  },
184
+  created () {
185
+    this.getList()
177 186
   },
178 187
   methods: {
179
-    handleSizeChange (val) {
180
-      console.log(`每页 ${val} 条`)
188
+    bindRoles () { // 绑定角色
189
+      this.$ajax(this.$api.systemSet.bindRoles.url, {
190
+        method: this.$api.systemSet.bindRoles.method,
191
+        queryData: {
192
+          userid: this.currentEditItem.UserId,
193
+          roles: this.returnRoles()
194
+        }
195
+      }).then(res => {
196
+        this.$message({
197
+          type: 'success',
198
+          message: '操作成功'
199
+        })
200
+        this.dialogTableVisible = false
201
+        this.postData.name = ''
202
+        this.tags = []
203
+        this.searchTagList = []
204
+      })
205
+    },
206
+    returnRoles () {
207
+      var arr = []
208
+      for (var n = 0; n < this.tags.length; n++) {
209
+        arr.push(this.tags[n].RoleId)
210
+      }
211
+      return arr.join(',')
212
+    },
213
+    search () { // 搜索
214
+      this.postData.page = 1
215
+      this.currentList = []
216
+      this.getList()
217
+    },
218
+    getList () { // 获取列表
219
+      this.$ajax(this.$api.systemSet.getUserList.url, {
220
+        method: this.$api.systemSet.getUserList.method,
221
+        queryData: { ...this.postData, caseid: this.CaseId }
222
+      }).then(res => {
223
+        for (var n = 0; n < res.list.length; n++) {
224
+          res.list[n].CreateDate = this.returnTime(res.list[n].CreateDate)
225
+        }
226
+        this.currentList = res.list
227
+        this.postData.page = res.page
228
+        this.total = res.pagenum
229
+      })
230
+    },
231
+    returnTime (val) {
232
+      val = new Date(val)
233
+      return val.getFullYear() + '-' + this.returnNum(val.getMonth() + 1) + '-' + this.returnNum(val.getDate()) + ' ' + this.returnNum(val.getHours()) + ':' + this.returnNum(val.getMinutes()) + ':' + this.returnNum(val.getSeconds())
181 234
     },
182
-    handleCurrentChange (val) {
183
-      console.log(`当前页: ${val}`)
235
+    returnNum (num) {
236
+      return num > 9 ? num : '0' + num
237
+    },
238
+    handleCurrentChange (val) { // 跳转到分页
239
+      this.getList()
184 240
     },
185 241
     handleEdit (index, row) { // 编辑
186
-      console.log(index, row)
187
-      this.$router.push({ name: 'editUser', query: { realName: row.realName } })
242
+      this.$router.push({ name: 'editUser', query: { id: row.UserId } })
188 243
     },
189 244
     handleDelete (index, row) { // 删除
190
-      console.log(index, row)
191 245
       this.$confirm('确认删除此用户?', '提示', {
192 246
         confirmButtonText: '确定',
193 247
         cancelButtonText: '取消',
194 248
         type: 'warning'
195 249
       }).then(() => {
196
-        this.$message({
197
-          type: 'success',
198
-          message: '删除成功!'
250
+        this.$ajax(this.$api.systemSet.deleteUser.url, {
251
+          method: this.$api.systemSet.deleteUser.method,
252
+          urlData: { id: row.UserId }
253
+        }).then(res => {
254
+          this.$message({
255
+            type: 'success',
256
+            message: '删除成功!'
257
+          })
258
+          this.getList()
199 259
         })
200 260
       }).catch(() => {
201 261
         this.$message({
@@ -205,11 +265,14 @@ export default {
205 265
       })
206 266
     },
207 267
     handleBind (index, row) {
208
-      console.log(index, row)
209
-      this.dialogTableVisible = true
210
-    },
211
-    searchList (key) { // 搜索列表
212
-      console.log(key)
268
+      this.$ajax(this.$api.systemSet.getUserRoles.url, {
269
+        method: this.$api.systemSet.getUserRoles.method,
270
+        queryData: { userid: row.UserId }
271
+      }).then(res => {
272
+        if (res !== null) this.tags = res
273
+        this.currentEditItem = row
274
+        this.dialogTableVisible = true
275
+      })
213 276
     },
214 277
     addUser () {
215 278
       this.$router.push({ name: 'addUser' })
@@ -217,14 +280,21 @@ export default {
217 280
     handleClose (tag) {
218 281
       this.tags.splice(this.tags.indexOf(tag), 1)
219 282
     },
220
-    ...mapUserActions(['upDateRoleList']),
221
-    addTag (tag) {
222
-      // 调用添加绑定角色接口
223
-      this.tags.push(tag)
224
-      this.upDateRoleList(tag)
283
+    addTag (tag) { // 调用添加绑定角色接口
284
+      if (!this.tags.filter(x => x.RoleId === tag.RoleId)[0]) {
285
+        this.tags.push({
286
+          RoleId: tag.RoleId,
287
+          RoleName: tag.RoleName
288
+        })
289
+      }
225 290
     },
226 291
     getRole () { // 绑定角色搜索事件,发送请求搜索角色列表
227
-      console.log(this.postData.searchData)
292
+      this.$ajax(this.$api.caseManager.getRolesList.url, {
293
+        method: this.$api.caseManager.getRolesList.method,
294
+        data: this.postData
295
+      }).then(res => {
296
+        this.searchTagList = res.list
297
+      })
228 298
     }
229 299
   }
230 300
 }

+ 6
- 0
src/style/main.css View File

@@ -337,6 +337,12 @@ select:focus {
337 337
   margin-right: 20px;
338 338
 }
339 339
 
340
+.el-tag{
341
+  height: 40px;
342
+  line-height: 40px;
343
+  margin-bottom: 10px;
344
+}
345
+
340 346
 
341 347
 
342 348
 

+ 38
- 0
src/util/api.js View File

@@ -12,6 +12,36 @@ const $api = {
12 12
       url: `${baseUrl}/common/system/init`
13 13
     }
14 14
   },
15
+  systemSet: {
16
+    getUserList: { // 获取用户列表
17
+      method: 'get',
18
+      url: `${baseUrl}/common/user`
19
+    },
20
+    getUserInfo: { // 获取用户信息
21
+      method: 'get',
22
+      url: `${baseUrl}/common/user/:id`
23
+    },
24
+    addUser: { // 新增用户
25
+      method: 'post',
26
+      url: `${baseUrl}/common/user`
27
+    },
28
+    editUser: { // 更新用户
29
+      method: 'put',
30
+      url: `${baseUrl}/common/user`
31
+    },
32
+    deleteUser: { // 删除用户
33
+      method: 'delete',
34
+      url: `${baseUrl}/common/user/:id`
35
+    },
36
+    bindRoles: { // 绑定角色
37
+      method: 'put',
38
+      url: `${baseUrl}/common/userrole`
39
+    },
40
+    getUserRoles: { // 获取用户绑定角色
41
+      method: 'get',
42
+      url: `${baseUrl}/common/userrole`
43
+    },
44
+  },
15 45
   channelManager: {
16 46
     getChannelList: { // 渠道列表
17 47
       method: 'get',
@@ -19,6 +49,10 @@ const $api = {
19 49
     },
20 50
   },
21 51
   caseManager: {
52
+    getRolesList: { // 获取角色列表
53
+      method: 'get',
54
+      url: `${baseUrl}/common/role`
55
+    },
22 56
     getCaseList: { // 获取案场列表
23 57
       method: 'get',
24 58
       url: `${baseUrl}/common/case/info`
@@ -103,6 +137,10 @@ const $api = {
103 137
       method: 'delete',
104 138
       url: `${baseUrl}/common/case/tag/:id`
105 139
     },
140
+    getUserTypeList: { // 获取用户类型列表
141
+      method: 'get',
142
+      url: `${baseUrl}/common/usertype`
143
+    },
106 144
   },
107 145
   goodsManager: {
108 146
     getGoodsSpecList: { // 商品规格列表