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