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