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