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