long
2021-12-08 0e0365cb3abd31edcf0c09c3fc215027983dfca8
提交 | 用户 | age
2a61f6 1 <template>
L 2   <div class="app-container">
7f89d0 3     <!-- 返回按钮和标题 -->
C 4     <!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->
5
2a61f6 6     <!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
L 7     <el-form v-show="showSearch" ref="searchForm" :inline="true">
8       <el-form-item label="角色名称">
9         <el-input
10           v-model="keyWord"
11           placeholder="请输入角色名称"
12           clearable
13           size="small"
14           style="width: 240px"
36b711 15           maxlength="50"
2a61f6 16           @keyup.enter.native="reGetList"
L 17         />
18       </el-form-item>
19       <el-form-item>
20         <el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
21         <el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
22       </el-form-item>
23     </el-form>
24     <!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
25
26     <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
27     <el-row :gutter="10" class="mb8">
28       <el-col :span="1.5">
7f89d0 29         <!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
2a61f6 30         <el-button
L 31           type="primary"
32           icon="el-icon-plus"
33           size="mini"
838f4f 34           @click="showAddDialog"
2a61f6 35         >新增</el-button>
L 36       </el-col>
37       <right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
38     </el-row>
39     <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
40
5eac34 41     <!--
L 42       table参数设置:
43       stripe 是否为斑马纹
44       border 是否带有纵向边框
45       max-height 最大高度
46     -->
dbf068 47     <el-table :data="list" stripe>
2a61f6 48       <el-table-column type="index" label="序号" align="center" width="60" />
L 49       <el-table-column label="角色名称" prop="name" align="center" min-width="120" />
838f4f 50       <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
L 51         <template slot-scope="scope">
e9f808 52           <!-- 权限判断 :disabled="!getAuthValueFN('xxx_edit')" -->
838f4f 53           <el-switch
L 54             v-model="scope.row.isUp"
55             :active-value="1"
56             :inactive-value="0"
57             @change="handleUpChange(scope.row)"
58           />
59         </template>
60       </el-table-column>
61       <el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
36b711 62       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
2a61f6 63         <template slot-scope="scope">
7f89d0 64           <!-- 权限判断 v-if="getAuthValueFN('xxx_edit')" -->
2a61f6 65           <el-button
L 66             size="mini"
67             type="text"
68             icon="el-icon-edit"
838f4f 69             @click="showEditDialog(scope.row)"
2a61f6 70           >编辑</el-button>
7f89d0 71           <!-- 权限判断 v-if="getAuthValueFN('xxx_del')" -->
2a61f6 72           <el-button
L 73             size="mini"
74             type="text warn"
75             icon="el-icon-delete"
76             @click="handleDelete(scope.row)"
77           >删除</el-button>
78         </template>
79       </el-table-column>
80     </el-table>
838f4f 81
L 82     <!-- 新增&编辑 -->
7f89d0 83     <el-dialog v-el-drag-dialog :title="(dialogData.type=='add'?'新增':'编辑') + objectName" width="500px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
838f4f 84       <el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
L 85         <el-form-item label="名称" prop="name">
36b711 86           <el-input v-model="dialogData.name" placeholder="请输入名称" maxlength="50" />
838f4f 87         </el-form-item>
L 88         <el-form-item label="是否上架" prop="isUp">
89           <el-switch
90             v-model="dialogData.isUp"
91             :active-value="1"
92             :inactive-value="0"
93           />
94         </el-form-item>
95       </el-form>
96       <div slot="footer" class="dialog-footer">
97         <el-button @click="hideDialog">取消</el-button>
98         <el-button type="primary" @click="submitHandle">确定</el-button>
99       </div>
100     </el-dialog>
2a61f6 101
L 102     <pagination
103       v-show="total>0"
104       :total="total"
105       :page.sync="pageNum"
106       :limit.sync="pageSize"
107       @pagination="getList"
108     />
d8f5a1 109
L 110     <back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
2a61f6 111   </div>
L 112 </template>
113
114 <script>
d8f5a1 115 import BackToTop from '@/components/BackToTop'
2a61f6 116 export default {
838f4f 117   name: 'Demo',
d8f5a1 118   components: { BackToTop },
2a61f6 119   data() {
L 120     return {
121       showSearch: true, // 是否显示搜索区
7f89d0 122       keyWord: '', // 搜索区字段,可自行扩展其余字段
2a61f6 123
7f89d0 124       // TODO
C 125       objectName: 'xx', // 对象名称,用于删除提示、启用提示、弹窗标题等
126
127       // 数据列表
2a61f6 128       list: [],
L 129
838f4f 130       // 弹窗数据
L 131       dialogVisible: false,
132       dialogData: {},
7f89d0 133
C 134       // 富文本编辑器
135       // rangenum: null,
838f4f 136
2a61f6 137       // 分页 ↓↓↓↓↓↓↓↓↓↓
L 138       total: 0,
139       pageNum: 1,
838f4f 140       pageSize: 20,
2a61f6 141       // 分页 ↑↑↑↑↑↑↑↑↑↑
838f4f 142
7f89d0 143       // TODO
838f4f 144       // 表单校验
L 145       rules: {
146         name: [
147           { required: true, message: '名称不能为空', trigger: 'change' }
148         ],
149         isUp: [
150           { required: true, message: '是否上架不能为空', trigger: 'change' }
151         ]
152       }
2a61f6 153     }
L 154   },
155   mounted() {
156     this.init()
157   },
158   methods: {
159     // 初始化
160     init() {
161       this.getList()
162     },
163
7f89d0 164     // ========== 富文本相关
C 165     // 富文本编辑器的内容赋值
166     // catchData(content) {
167     //   if (content === '<p><br></p>') content = ''
168     //   try {
169     //     const currentRange = window.getSelection().getRangeAt(0)
170     //     this.rangenum = currentRange
171     //   } catch (e) {
172     //
173     //   }
174     //   this.$set(this.dialogData, 'content', content)
175     //   this.$refs[this.formName].validateField('content')
176     // },
177     // ========== 富文本相关
178
2a61f6 179     // 获取列表
L 180     getList() {
181       var { pageNum, pageSize, keyWord } = this
182       this.postFN({
183         url: 'xxx',
184         params: {
185           pageNum: pageNum,
efd7c8 186           pageSize: pageSize,
7f89d0 187
C 188           // TODO
2a61f6 189           keyWord: keyWord
L 190         },
191         mockData: {
192           code: 100,
193           msg: '',
194           data: {
195             list: [{
196               id: 'xxx',
197               index: 1,
198               name: '超级管理员',
199               createTime: '2020-08-09 10:10:10'
200             }],
201             total: 100
202           }
203         }
204       }, (inf) => {
205         this.list = inf.list || []
206         this.total = inf.total
207       })
208     },
209     // 重新获取列表
210     reGetList() {
211       this.pageNum = 1
212       this.getList()
213     },
214     // 重置
215     resetHandle() {
216       this.keyWord = ''
217       this.reGetList()
218     },
219     // 删除
220     handleDelete(item) {
221       // 打开二次确认弹窗
7f89d0 222       this.$confirm('是否确认删除该' + this.objectName + '?', '提示', {
2a61f6 223         confirmButtonText: '确定',
L 224         cancelButtonText: '取消',
225         type: 'warning'
226       }).then(() => {
227         // 确定回调
7f89d0 228         // TODO url
2a61f6 229         this.postFN({
L 230           url: 'xxx',
231           params: {
232             id: item.id
233           },
234           mockData: {
235             code: 100,
236             msg: '',
237             data: {}
238           }
239         }, () => {
240           this.getList()
241           this.$messageSuc('删除成功')
242         })
243       }).catch(() => {})
838f4f 244     },
7f89d0 245     // 修改是否上架
838f4f 246     handleUpChange(item) {
L 247       const text = item.isUp === 1 ? '上架' : '下架'
7f89d0 248       this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
838f4f 249         confirmButtonText: '确定',
L 250         cancelButtonText: '取消',
251         type: 'warning'
252       }).then(() => {
7f89d0 253         // TODO url
838f4f 254         this.postFN({
L 255           url: 'xxx',
256           params: {
9f3f35 257             id: item.id,
L 258             isUp: item.isUp
838f4f 259           },
L 260           mockData: {
261             code: 100,
262             msg: '',
263             data: {}
264           }
265         }, () => {
266           this.$messageSuc(text + '成功')
4dde14 267         }, (res) => {
L 268           item.isUp = item.isUp === 1 ? 0 : 1
269           this.$messageError(res.msg)
838f4f 270         })
L 271       }).catch(() => {
272         item.isUp = item.isUp === 1 ? 0 : 1
273       })
274     },
275
276     // 打开新增弹窗
277     showAddDialog() {
278       var dialogData = {
279         type: 'add',
280         isUp: 1
7f89d0 281         // TODO 部分组件需要预设字段,提供给v-model,例如 el-select el-timepicker el-datepicker 上传组件 富文本等
838f4f 282       }
L 283       this.dialogVisible = true
284       this.$nextTick(() => {
285         this.dialogData = dialogData
286         this.$refs['refDialog'].resetFields()
287       })
288     },
289     // 打开编辑弹框
290     showEditDialog(item) {
291       var dialogData = {
292         type: 'edit',
293         ...item
294       }
295       console.log('dialogData', dialogData)
296       this.dialogVisible = true
297       this.$nextTick(() => {
298         this.dialogData = dialogData
299         this.$refs['refDialog'].resetFields()
300       })
301     },
302     // 关闭编辑弹窗
303     hideDialog() {
304       this.dialogData = {}
305       this.dialogVisible = false
7f89d0 306       // 清空富文本
C 307       // this.rangenum = null
838f4f 308     },
L 309     // 提交新增&编辑
310     submitHandle() {
311       this.$refs['refDialog'].validate(valid => {
312         if (valid) {
313           this.submitReq()
314         }
315       })
316     },
317     // 提交接口
318     submitReq() {
319       var { dialogData } = this
320       var params = {
321         name: dialogData.name,
322         isUp: dialogData.isUp
7f89d0 323         // TODO 参数
838f4f 324       }
L 325
326       if (dialogData.password) params.password = dialogData.password
327
328       var isAdd = dialogData.type === 'add'
7f89d0 329       // TODO url
C 330       var url = isAdd ? 'xxx/add' : 'xxx/edit'
838f4f 331
L 332       !isAdd && (params.id = dialogData.id)
333
334       this.postFN({
335         url: url,
336         params: params,
337         mockData: {
338           code: 100,
339           msg: '',
340           data: {}
341         }
342       }, () => {
343         this.$messageSuc('保存成功')
344         this.hideDialog()
b82c1e 345         isAdd ? this.reGetList() : this.getList()
838f4f 346       })
2a61f6 347     }
L 348   }
349 }
350 </script>
351
352 <style lang="scss" scoped>
353
354 </style>