long
2021-09-09 30a1729ee64a237a547566f655fee1ce93827768
提交 | 用户 | age
2a61f6 1 <template>
L 2   <div class="app-container">
3     <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
4     <el-form v-show="showSearch" ref="searchForm" :inline="true">
5       <el-form-item label="管理员搜索">
6         <el-input
7           v-model="keyWord"
8           placeholder="请输入管理员名称/账号"
9           clearable
10           size="small"
11           style="width: 240px"
36b711 12           maxlength="50"
2a61f6 13           @keyup.enter.native="reGetList"
L 14         />
15       </el-form-item>
16       <el-form-item>
17         <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
18         <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
19       </el-form-item>
20     </el-form>
21     <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
22
23     <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
24     <el-row :gutter="10" class="mb8">
25       <el-col :span="1.5">
26         <el-button
27           v-if="getAuthValueFN('sys_admin_add')"
28           type="primary"
29           icon="el-icon-plus"
30           size="mini"
31           @click="showAddAdminDialog"
32         >新增</el-button>
33       </el-col>
34       <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
35     </el-row>
36     <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
37
38     <el-table :data="list">
39       <el-table-column type="index" label="序号" align="center" width="60" />
9f32bd 40       <el-table-column label="名称" prop="name" align="center" min-width="120" />
2a61f6 41       <el-table-column label="账号" prop="account" align="center" min-width="120" />
7661a8 42       <el-table-column label="账号类型" prop="account" align="center" min-width="120">
L 43         <template slot-scope="scope">
d9cc69 44           {{ accountTypeOptions.find(item=>item.id == scope.row.type) ? accountTypeOptions.find(item=>item.id == scope.row.type).name : '' }}
7661a8 45         </template>
L 46       </el-table-column>
2a61f6 47       <el-table-column label="角色" prop="roleName" align="center" min-width="120" />
L 48       <!-- <el-table-column label="最近登录时间" prop="loginTime" align="center" min-width="180" /> -->
49       <el-table-column label="状态" align="center" min-width="100">
50         <template slot-scope="scope">
51           <el-switch
5041a2 52             v-if="scope.row.type!=0"
2a61f6 53             v-model="scope.row.isUse"
L 54             :active-value="1"
55             :inactive-value="0"
56             :disabled="!getAuthValueFN('sys_admin_edit')"
57             @change="handleStatusChange(scope.row)"
58           />
59         </template>
60       </el-table-column>
61       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
62         <template slot-scope="scope">
63           <el-button
64             v-if="getAuthValueFN('sys_admin_edit')"
65             size="mini"
66             type="text"
67             icon="el-icon-edit"
68             @click="showEditAdminDialog(scope.row)"
69           >编辑</el-button>
70           <el-button
5041a2 71             v-if="getAuthValueFN('sys_admin_del') && scope.row.type!=0"
2a61f6 72             size="mini"
L 73             type="text warn"
74             icon="el-icon-delete"
75             @click="handleDelete(scope.row)"
76           >删除</el-button>
77         </template>
78       </el-table-column>
79     </el-table>
80
81     <pagination
82       v-show="total>0"
83       :total="total"
84       :page.sync="pageNum"
85       :limit.sync="pageSize"
86       @pagination="getList"
87     />
88
89     <!-- 新增&编辑 -->
4dde14 90     <el-dialog v-el-drag-dialog :title="adminDialogData.type==='add'?'新增管理员':'编辑管理员'" width="500px" :visible.sync="adminDialogVisible" append-to-body :close-on-click-modal="false">
ad3cc5 91       <el-form ref="adminDialog" :model="adminDialogData" label-width="80px" :rules="rules" size="small">
2a61f6 92         <el-form-item label="名称" prop="name">
36b711 93           <el-input v-model="adminDialogData.name" placeholder="请输入名称" maxlength="50" />
2a61f6 94         </el-form-item>
L 95         <el-form-item label="账号" prop="account">
36b711 96           <el-input v-model="adminDialogData.account" placeholder="请输入帐号" maxlength="20" :disabled="adminDialogData.type!='add'" />
2a61f6 97         </el-form-item>
4602af 98         <el-form-item label="密码" :prop="adminDialogData.type==='add'||adminDialogData.password||adminDialogData.passwordSure?'password':'none'">
36b711 99           <el-input v-model="adminDialogData.password" type="password" placeholder="请输入密码" maxlength="20" />
2a61f6 100         </el-form-item>
4602af 101         <el-form-item label="确认密码" :prop="adminDialogData.type==='add'||adminDialogData.password||adminDialogData.passwordSure?'passwordSure':'none'">
36b711 102           <el-input v-model="adminDialogData.passwordSure" type="password" placeholder="请输入确认密码" maxlength="20" />
2a61f6 103         </el-form-item>
7661a8 104         <!-- 账号类型 -->
L 105         <el-form-item label="账号类型" prop="accountType">
106           <el-select
107             v-model="adminDialogData.accountType"
108             clearable
109             placeholder="账号类型"
110             style="width: 100%"
111           >
112             <el-option v-for="item in accountTypeOptions" :key="item.id" :label="item.name" :value="item.id" />
113           </el-select>
114         </el-form-item>
2a61f6 115         <!-- 角色 -->
L 116         <el-form-item label="角色" prop="sysRoleId">
117           <el-select
118             v-model="adminDialogData.sysRoleId"
119             clearable
120             placeholder="角色"
9f32bd 121             style="width: 100%"
2a61f6 122           >
L 123             <el-option v-for="item in roleArr" :key="item.id" :label="item.name" :value="item.id" />
124           </el-select>
9f32bd 125         </el-form-item>
L 126
abd7fd 127         <el-form-item label="是否启用" prop="isUse">
9f32bd 128           <el-switch
L 129             v-model="adminDialogData.isUse"
130             :active-value="1"
131             :inactive-value="0"
132           />
2a61f6 133         </el-form-item>
L 134
135       </el-form>
136       <div slot="footer" class="dialog-footer">
137         <el-button @click="hideAdminDialog">取消</el-button>
138         <el-button type="primary" @click="submitAdmin(adminDialogData.type)">确定</el-button>
139       </div>
140     </el-dialog>
141   </div>
142 </template>
143
144 <script>
145 export default {
146   name: 'Admin',
147   data() {
148     const equalToPassword = (rule, value, callback) => {
149       if (this.adminDialogData.password !== value) {
150         callback(new Error('两次输入的密码不一致'))
151       } else {
152         callback()
153       }
154     }
155     return {
156       showSearch: true, // 是否显示搜索区
157       keyWord: '',
158
159       list: [],
160
161       // 角色列表
162       roleArr: [],
7661a8 163       // 账号类型
L 164       accountTypeOptions: [
165         { name: '普通管理员', id: 1 },
166         { name: '超级管理员', id: 0 }
167       ],
2a61f6 168
7661a8 169       adminDialogVisible: false,
2a61f6 170       adminDialogData: {},
L 171
172       // 分页 ↓↓↓↓↓↓↓↓↓↓
173       total: 0,
174       pageNum: 1,
175       pageSize: 20,
176       // 分页 ↑↑↑↑↑↑↑↑↑↑
177
178       // 表单校验
179       rules: {
180         name: [
181           { required: true, message: '名称不能为空', trigger: 'change' }
182         ],
183         account: [
184           { required: true, message: '账号不能为空', trigger: 'change' }
185         ],
186         password: [
d9cc69 187           { required: true, message: '密码不能为空', trigger: 'change' },
eaaa5b 188           { min: 5, max: 20, message: '密码在5~20个字之间' }
2a61f6 189         ],
L 190         passwordSure: [
191           { required: true, message: '确认密码不能为空', trigger: 'change' },
192           { required: true, validator: equalToPassword, trigger: 'change' }
193         ],
194         sysRoleId: [
195           { required: true, message: '角色不能为空', trigger: 'change' }
7661a8 196         ],
L 197         accountType: [
198           { required: true, message: '账号类型不能为空', trigger: 'change' }
faeb37 199         ],
L 200         isUse: [
201           { required: true, message: '是否启用不能为空', trigger: 'change' }
2a61f6 202         ]
L 203       }
204     }
205   },
206   mounted() {
207     this.init()
208   },
209   methods: {
210     // 初始化
211     init() {
212       this.getList()
213       this.getRoleList()
214     },
215
216     // 获取角色列表
217     getRoleList() {
218       this.postFN({
7661a8 219         url: 'admin/role/list',
L 220         params: {
221           pageNum: 1,
222           pageSize: 9999
223         },
2a61f6 224         mockData: {
L 225           code: 100,
226           msg: '',
3f3c98 227           data: {
L 228             list: [{
229               id: 'xxx',
230               name: '野马发'
231             }]
232           }
2a61f6 233         }
L 234       }, (inf) => {
b61d33 235         this.roleArr = inf.list && inf.list.filter(item => item.isUse === 1) || []
2a61f6 236       })
L 237     },
238
239     // 获取列表
240     getList() {
241       var { pageNum, pageSize, keyWord } = this
242       this.postFN({
243         url: 'admin/list',
244         params: {
245           pageNum: pageNum,
efd7c8 246           pageSize: pageSize,
2a61f6 247           keyWord: keyWord
L 248         },
249         mockData: {
250           code: 100,
251           msg: '',
252           data: {
253             list: [{
254               id: 'xxx',
255               account: 'xasdasd2123123',
256               name: '野马发',
257               roleName: '超级管理员',
258               tel: '13760749294',
259               loginTime: '2020-08-08 12:10:10',
260               isUse: 1
261             }],
262             total: 100
263           }
264         }
265       }, (inf) => {
266         this.list = inf.list || []
267         this.total = inf.total
268       })
269     },
270     // 重新获取列表
271     reGetList() {
272       this.pageNum = 1
273       this.getList()
274     },
275     // 重置
276     resetHandle() {
277       this.keyWord = ''
278       this.reGetList()
279     },
280     // 修改状态
281     handleStatusChange(item) {
282       const text = item.isUse === 1 ? '启用' : '停用'
283       this.$confirm('确认要' + text + '"' + item.roleName + '"角色吗?', '提示', {
284         confirmButtonText: '确定',
285         cancelButtonText: '取消',
286         type: 'warning'
287       }).then(() => {
288         this.postFN({
289           url: 'admin/editUse',
290           params: {
291             id: item.id
292           },
293           mockData: {
294             code: 100,
295             msg: '',
296             data: {}
297           }
298         }, () => {
299           this.$messageSuc(text + '成功')
300         })
301       }).catch(() => {
302         item.isUse = item.isUse === 1 ? 0 : 1
303       })
304     },
305     // 删除
306     handleDelete(item) {
307       // 打开二次确认弹窗
308       this.$confirm('是否确认删除该帐号?', '提示', {
309         confirmButtonText: '确定',
310         cancelButtonText: '取消',
311         type: 'warning'
312       }).then(() => {
313         // 确定回调
314         this.postFN({
315           url: 'admin/delete/one',
316           params: {
317             id: item.id
318           },
319           mockData: {
320             code: 100,
321             msg: '',
322             data: {}
323           }
324         }, () => {
325           this.getList()
326           this.$messageSuc('删除成功')
327         })
328       }).catch(() => {})
329     },
330
331     // 打开新增分类弹窗
332     showAddAdminDialog() {
333       var adminDialogData = {
334         type: 'add',
335         name: '',
336         account: '',
337         password: '',
338         passwordSure: '',
9f32bd 339         sysRoleId: '',
7661a8 340         isUse: 1,
L 341         accountType: 1
2a61f6 342       }
7661a8 343       this.adminDialogVisible = true
L 344       this.$nextTick(() => {
345         this.adminDialogData = adminDialogData
346         this.$refs['adminDialog'].resetFields()
347       })
2a61f6 348     },
L 349     // 打开编辑分类弹框
350     showEditAdminDialog(item) {
351       var adminDialogData = {
352         type: 'edit',
353         name: item.name,
354         account: item.account,
355         password: '',
356         passwordSure: '',
357         sysRoleId: item.roId,
9f32bd 358         id: item.id,
57fedb 359         isUse: item.isUse,
L 360         accountType: item.type
2a61f6 361       }
7661a8 362       this.adminDialogVisible = true
L 363       this.$nextTick(() => {
364         this.adminDialogData = adminDialogData
365         this.$refs['adminDialog'].resetFields()
366       })
2a61f6 367     },
L 368     // 关闭编辑弹窗
369     hideAdminDialog() {
370       this.adminDialogData = {}
7661a8 371       this.adminDialogVisible = false
2a61f6 372     },
L 373     // 提交新增&编辑
374     submitAdmin(type) {
375       this.$refs['adminDialog'].validate(valid => {
376         if (valid) {
377           var { adminDialogData } = this
378           var params = {
379             name: adminDialogData.name,
380             account: adminDialogData.account,
9f32bd 381             sysAdRoleId: adminDialogData.sysRoleId,
7661a8 382             isUse: adminDialogData.isUse,
L 383             type: adminDialogData.accountType
2a61f6 384           }
7661a8 385           if (adminDialogData.password) params.password = adminDialogData.password
2a61f6 386           var isAdd = adminDialogData.type === 'add'
L 387           var url = isAdd ? 'admin/add' : 'admin/update'
388
389           !isAdd && (params.id = adminDialogData.id)
390
391           this.postFN({
392             url: url,
393             params: params,
394             mockData: {
395               code: 100,
396               msg: '',
397               data: {}
398             }
399           }, () => {
400             this.$messageSuc('保存成功')
401             this.hideAdminDialog()
b82c1e 402             isAdd ? this.reGetList() : this.getList()
2a61f6 403           })
L 404         }
405       })
406     }
407
408   }
409 }
410 </script>
411
412 <style lang="scss" scoped>
413
414 </style>