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