liweilong
2020-10-30 2a61f64ebeeec3fff23b7adbce8c7fbfc54add51
提交 | 用户 | 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
73 export default {
74   name: 'Role',
75   data() {
76     return {
77       showSearch: true, // 是否显示搜索区
78       keyWord: '',
79
80       list: [],
81
82       // 分页 ↓↓↓↓↓↓↓↓↓↓
83       total: 0,
84       pageNum: 1,
85       pageSize: 20
86       // 分页 ↑↑↑↑↑↑↑↑↑↑
87     }
88   },
89   mounted() {
90     this.init()
91   },
92   methods: {
93     // 初始化
94     init() {
95       this.getList()
96     },
97
98     // 获取列表
99     getList() {
100       var { pageNum, pageSize, keyWord } = this
101       this.postFN({
102         url: 'admin/role/list',
103         params: {
104           pageNum: pageNum,
105           rowCount: pageSize,
106           keyWord: keyWord
107         },
108         mockData: {
109           code: 100,
110           msg: '',
111           data: {
112             list: [{
113               id: 'xxx',
114               index: 1,
115               name: '超级管理员',
116               createTime: '2020-08-09 10:10:10'
117             }],
118             total: 100
119           }
120         }
121       }, (inf) => {
122         this.list = inf.list || []
123         this.total = inf.total
124       })
125     },
126     // 重新获取列表
127     reGetList() {
128       this.pageNum = 1
129       this.getList()
130     },
131     // 重置
132     resetHandle() {
133       this.keyWord = ''
134       this.reGetList()
135     },
136     // 删除
137     handleDelete(item) {
138       // 打开二次确认弹窗
139       this.$confirm('是否确认删除该角色?', '提示', {
140         confirmButtonText: '确定',
141         cancelButtonText: '取消',
142         type: 'warning'
143       }).then(() => {
144         // 确定回调
145         this.postFN({
146           url: 'admin/role/delete/one',
147           params: {
148             id: item.id
149           },
150           mockData: {
151             code: 100,
152             msg: '',
153             data: {}
154           }
155         }, () => {
156           this.getList()
157           this.$messageSuc('删除成功')
158         })
159       }).catch(() => {})
160     }
161   }
162 }
163 </script>
164
165 <style lang="scss" scoped>
166
167 </style>