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