liweilong
2020-12-29 838f4ff0eb6808eb740de5f028b30f9c0434abc8
提交 | 用户 | 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_role_add')"
27           type="primary"
28           icon="el-icon-plus"
29           size="mini"
30           @click="jumpToFN('/system/roleAdd')"
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" />
39       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
40       <el-table-column label="创建时间" prop="createTime" align="center" min-width="180" />
41       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
42         <template slot-scope="scope">
43           <el-button
44             v-if="getAuthValueFN('sys_admin_role_edit')"
45             size="mini"
46             type="text"
47             icon="el-icon-edit"
48             @click="jumpToFN('/system/roleEdit?id='+scope.row.id)"
49           >编辑</el-button>
50           <el-button
51             v-if="getAuthValueFN('sys_admin_role_del')"
52             size="mini"
53             type="text warn"
54             icon="el-icon-delete"
55             @click="handleDelete(scope.row)"
56           >删除</el-button>
57         </template>
58       </el-table-column>
59     </el-table>
60
61     <pagination
62       v-show="total>0"
63       :total="total"
64       :page.sync="pageNum"
65       :limit.sync="pageSize"
66       @pagination="getList"
67     />
68   </div>
69 </template>
70
71 <script>
72
3f3c98 73 import mixin_keepAlive from '@/mixins/keepAlive.js' // 页面缓存
2a61f6 74 export default {
L 75   name: 'Role',
3f3c98 76   mixins: [mixin_keepAlive],
2a61f6 77   data() {
L 78     return {
79       showSearch: true, // 是否显示搜索区
80       keyWord: '',
81
82       list: [],
83
84       // 分页 ↓↓↓↓↓↓↓↓↓↓
85       total: 0,
86       pageNum: 1,
87       pageSize: 20
88       // 分页 ↑↑↑↑↑↑↑↑↑↑
89     }
90   },
91   mounted() {
3f3c98 92     // 在mixin_keepAlive => activated初始化
2a61f6 93   },
L 94   methods: {
95     // 初始化
96     init() {
3f3c98 97       // keepalive重置初始值
L 98       this.resetHandle()
99     },
100
101     // 返回刷新
102     regInit() {
2a61f6 103       this.getList()
L 104     },
105
106     // 获取列表
107     getList() {
108       var { pageNum, pageSize, keyWord } = this
109       this.postFN({
110         url: 'admin/role/list',
111         params: {
112           pageNum: pageNum,
efd7c8 113           pageSize: pageSize,
2a61f6 114           keyWord: keyWord
L 115         },
116         mockData: {
117           code: 100,
118           msg: '',
119           data: {
120             list: [{
121               id: 'xxx',
122               index: 1,
123               name: '超级管理员',
124               createTime: '2020-08-09 10:10:10'
125             }],
126             total: 100
127           }
128         }
129       }, (inf) => {
130         this.list = inf.list || []
131         this.total = inf.total
132       })
133     },
134     // 重新获取列表
135     reGetList() {
136       this.pageNum = 1
137       this.getList()
138     },
139     // 重置
140     resetHandle() {
141       this.keyWord = ''
142       this.reGetList()
143     },
144     // 删除
145     handleDelete(item) {
146       // 打开二次确认弹窗
147       this.$confirm('是否确认删除该角色?', '提示', {
148         confirmButtonText: '确定',
149         cancelButtonText: '取消',
150         type: 'warning'
151       }).then(() => {
152         // 确定回调
153         this.postFN({
154           url: 'admin/role/delete/one',
155           params: {
156             id: item.id
157           },
158           mockData: {
159             code: 100,
160             msg: '',
161             data: {}
162           }
163         }, () => {
164           this.getList()
165           this.$messageSuc('删除成功')
166         })
167       }).catch(() => {})
168     }
169   }
170 }
171 </script>
172
173 <style lang="scss" scoped>
174
175 </style>