查看 | 历史 | 提交 | 提交对比
liweilong
2020-12-09 efd7c8fea38ab641db8581fb8c9d910640cfc8fb
提交 | 用户 | age
3ca1b1 1 // 轮播图管理
037956 2 <template>
L 3   <div class="app-container">
4     <!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
5     <el-row :gutter="10" class="mb8">
6       <el-col :span="1.5">
7         <el-button
8           v-if="getAuthValueFN('banner_add')"
9           type="primary"
10           icon="el-icon-plus"
11           size="mini"
12           @click="showDialog('add')"
13         >新增</el-button>
14       </el-col>
15     </el-row>
16     <!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
17
18     <el-table :data="list">
19       <el-table-column type="index" label="序号" align="center" width="60" />
20       <el-table-column label="图片" prop="imgUrl" align="center" min-width="120">
21         <template slot-scope="scope">
22           <el-image :src="scope.row.imgUrl" style="width:80px;height:80px" fit="contain" :preview-src-list="[scope.row.imgUrl]" />
23         </template>
24       </el-table-column>
3ca1b1 25       <el-table-column prop="jumpType" label="跳转类型" align="center" min-width="120">
L 26         <template slot-scope="scope">
27           {{ ['不跳转','小程序页面','H5页面','其他小程序'][scope.row.jumpType] }}
28         </template>
29       </el-table-column>
30       <el-table-column prop="orderNum" label="排序号" align="center" />
31       <el-table-column prop="createTime" label="创建时间" align="center" min-width="120" />
037956 32       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" min-width="100">
L 33         <template slot-scope="scope">
34           <el-button
35             v-if="getAuthValueFN('banner_edit')"
36             size="mini"
37             type="text"
38             icon="el-icon-edit"
39             @click="handleEdit(scope.row)"
40           >编辑</el-button>
41           <el-button
42             v-if="getAuthValueFN('banner_del')"
43             size="mini"
44             type="text warn"
45             icon="el-icon-delete"
46             @click="handleDelete(scope.row)"
47           >删除</el-button>
48         </template>
49       </el-table-column>
50     </el-table>
51
52     <pagination
53       v-show="total>0"
54       :total="total"
55       :page.sync="pageNum"
56       :limit.sync="pageSize"
57       @pagination="getList"
58     />
59
60     <!-- 新增&编辑 -->
61     <el-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog">
9f32bd 62       <el-form :ref="formName" :model="dialogData" label-width="120px" :rules="rules" size="small">
L 63         <el-form-item label="排序号：" prop="orderNum">
037956 64           <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" />
L 65         </el-form-item>
9f32bd 66         <el-form-item ref="uploadFormItem" label="轮播图：" prop="uploadImgs">
037956 67           <!-- 上传图片组件(单图) -->
L 68           <el-upload
69             ref="refUploadImg"
70             accept="image/jpeg,image/jpg,image/gif,image/png"
71             :auto-upload="false"
72             list-type="picture-card"
73             :class="{disabled:uploadDisabled}"
74             action="#"
75             :limit="1"
76             :file-list="dialogData.uploadImgs"
77             :on-change="addUploadImg"
78             :on-remove="delUploadImg"
79             :http-request="uploadImg"
80             :on-preview="uploadPreview"
81             :before-upload="beforeUploadImg"
82           >
83             <i class="el-icon-plus" />
84           </el-upload>
85         </el-form-item>
9f32bd 86         <el-form-item label="跳转类型：" prop="jumpType">
L 87           <el-select
88             v-model="dialogData.jumpType"
89             clearable
90             placeholder="请选择跳转类型"
91             class="com-edit-input"
92           >
93             <el-option v-for="item in jumpTypeOpt" :key="item.value" :label="item.label" :value="item.value" />
94           </el-select>
95         </el-form-item>
96         <el-form-item v-if="dialogData.jumpType" label="跳转链接：" prop="jumpUrl">
97           <el-input v-model="dialogData.jumpUrl" placeholder="请输入跳转链接" class="com-edit-input" />
98         </el-form-item>
99         <el-form-item v-if="dialogData.jumpType===3" label="appId：" prop="jumpMpId">
100           <el-input v-model="dialogData.jumpMpId" placeholder="请输入小程序appId" class="com-edit-input" />
101         </el-form-item>
102         <el-form-item v-if="dialogData.jumpType===3" label="小程序版本：" prop="envVersion">
103           <el-select
104             v-model="dialogData.envVersion"
105             clearable
106             placeholder="请选择小程序版本"
107             class="com-edit-input"
108           >
109             <el-option v-for="item in envVersionOpt" :key="item.value" :label="item.label" :value="item.value" />
110           </el-select>
111         </el-form-item>
112         <el-form-item v-if="dialogData.jumpType===3" label="额外数据：" prop="extraData">
113           <el-input v-model="dialogData.extraData" placeholder="请输入小程序额外数据" class="com-edit-input" />
114         </el-form-item>
037956 115       </el-form>
L 116       <div slot="footer" class="dialog-footer">
117         <el-button @click="hideDialog">取消</el-button>
118         <el-button type="primary" @click="handleSave(dialogData.type)">确定</el-button>
119       </div>
120     </el-dialog>
121
122     <!-- upload放大图片 -->
123     <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
124       <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
125     </el-dialog>
126   </div>
127 </template>
128
129 <script>
130
131 import mixin_Upload from '@/mixins/upload.js'
9f32bd 132 import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项
037956 133 export default {
L 134   name: 'Equipment',
9f32bd 135   mixins: [mixin_Upload, mixin_bannerOpts],
037956 136   data() {
L 137     return {
138       list: [], // 设备列表
139
140       // 分页 ↓↓↓↓↓↓↓↓↓↓
141       total: 0,
142       pageNum: 1,
143       pageSize: 20,
144       // 分页 ↑↑↑↑↑↑↑↑↑↑
145
146       // 显示弹窗
147       isShowDialog: false,
148
149       // 表单校验
150       rules: {
151         orderNum: [
152           { required: true, message: '排序号不能为空', trigger: 'change' }
153         ],
154         uploadImgs: [
9f32bd 155           { required: true, message: '轮播图片不能为空', trigger: 'change' }
L 156         ],
157         jumpType: [
158           { required: true, message: '跳转类型不能为空', trigger: 'change' }
159         ],
160         jumpUrl: [
161           { required: true, message: '跳转链接不能为空', trigger: 'change' }
162         ],
163         jumpMpId: [
164           { required: true, message: '跳转小程序appId不能为空', trigger: 'change' }
165         ],
166         envVersion: [
167           { required: true, message: '跳转小程序版本不能为空', trigger: 'change' }
037956 168         ]
L 169       },
170
171       // 表单名称
172       formName: 'dialogForm',
173       // 弹窗表单
174       dialogData: {
175         // 上传图片
176         uploadImgs: []
177       }
178
179     }
180   },
181   computed: {
182     // 上传禁用
183     uploadDisabled() {
184       return this.dialogData.uploadImgs.length > 0
185     }
186   },
187   mounted() {
188     this.init()
189   },
190   methods: {
191     // 初始化
192     init() {
193       this.getList()
194     },
195
196     // 上传图片 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
197     // 上传前确认格式
198     beforeUploadImg(file) {
199       const isImg = file.type.indexOf('image/') > -1
200       if (!isImg) {
201         this.$message.error('必须是选择图片文件')
202       }
203       return isImg
204     },
205     // 增加图片
206     addUploadImg(file, fileList) {
207       this.$refs.uploadFormItem.resetField()
208       this.dialogData.uploadImgs = fileList
209     },
210     // 删除图片
211     delUploadImg(file, fileList) {
212       this.dialogData.uploadImgs = fileList
213     },
9f32bd 214     // 执行上传图
037956 215     runUploadImg(suc_cb) {
L 216       if (this.checkNeedUpload(this.dialogData.uploadImgs)) {
217         this.$refs.refUploadImg.submit()
218       } else {
219         suc_cb && suc_cb()
220       }
221     },
9f32bd 222     // 上传图
037956 223     uploadImg(res) {
L 224       console.log(res)
225       const file = res.file
226       const formData = new FormData()
227       formData.append('file', file)
228       console.log(formData)
229       this.postFN({
230         url: 'admin/image/upload',
231         header: { 'Content-Type': 'multipart/form-data' },
232         params: formData,
233         mockData: {
234           code: 100,
235           msg: '',
236           data: {
237             imgUrl: 'xxxx'
238           }
239         }
240       }, (inf) => {
241         console.log('上传图片成功')
242
243         // 替换掉未上传的图片
244         this.dialogData.uploadImgs[0] = { url: inf.imgUrl, status: 'success' }
245         this.dialogData.uploadImgs = JSON.parse(JSON.stringify(this.dialogData.uploadImgs))
246         this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
247
248         console.log('上传图片结束')
249
250         // 提交
251         this.submit(this.dialogData.type)
252       })
253     },
254     // 上传图片 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
255
256     // 获取列表
257     getList() {
258       var { pageNum, pageSize } = this
259       const params = {
260         pageNum: pageNum,
261         pageSize: pageSize
262       }
263
264       this.postFN({
265         url: 'admin/banner/list',
266         params: params,
267         mockData: {
268           code: 100,
269           msg: '',
270           data: {
271             list: [{
272               'imgUrl': 'https://profile.csdnimg.cn/0/1/7/3_weixin_38373875',
273               'jumpUrl': '123',
274               'jumpType': 0,
275               'orderNum': 1,
276               'createTime': '2020-02-02 02:00:00'
277             }],
278             total: 100
279           }
280         }
281       }, (inf) => {
282         this.list = inf.list || []
283         this.total = inf.total
284       })
285     },
286     // 重新获取列表
287     reGetList() {
288       this.pageNum = 1
289       this.getList()
290     },
291     // 删除
292     handleDelete(item) {
293       // 打开二次确认弹窗
294       this.$confirm('是否确认删除该轮播图?', '提示', {
295         confirmButtonText: '确定',
296         cancelButtonText: '取消',
297         type: 'warning'
298       }).then(() => {
299         // 确定回调
300         this.postFN({
301           url: 'admin/banner/del',
302           params: {
303             id: item.id
304           },
305           mockData: {
306             code: 100,
307             msg: '',
308             data: {}
309           }
310         }, () => {
311           this.getList()
312           this.$messageSuc('删除成功')
313         })
314       }).catch(() => {})
315     },
316     // 编辑
317     handleEdit(item) {
318       this.showDialog('edit', item)
319     },
320     // 显示弹框
321     showDialog(type, item) {
322       let dialogData = {}
323
324       this.isShowDialog = true
325       this.$nextTick(() => {
326         if (type === 'add') {
327           dialogData = {
328             type: 'add',
329             orderNum: 1,
330             uploadImgs: []
331           }
332         } else {
333           dialogData = {
334             type: 'edit',
335             ...item
336           }
337           dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }]
338         }
339         this.dialogData = dialogData
340         this.$refs[this.formName].resetFields()
341       })
342     },
343     // 隐藏弹框
344     hideDialog() {
345       this.$refs[this.formName].resetFields()
346       this.isShowDialog = false
347     },
348     // 提交
349     handleSave(type) {
350       // 验证
351       this.$refs[this.formName].validate((valid) => {
352         if (valid) {
353           // 上传图片
354           this.runUploadImg(() => {
355             this.submit(type)
356           })
357         }
358       })
359     },
360     submit(type) {
361       const url = type === 'add' ? 'admin/banner/add' : 'admin/banner/edit'
362       const dialogData = this.dialogData
363       const params = {
364         orderNum: dialogData.orderNum,
9f32bd 365         imgUrl: dialogData.imgUrl,
L 366         jumpType: dialogData.jumpType
037956 367       }
9f32bd 368       if (dialogData.jumpUrl) params.jumpUrl = dialogData.jumpUrl
L 369       if (dialogData.jumpMpId) params.jumpMpId = dialogData.jumpMpId
370       if (dialogData.envVersion) params.envVersion = dialogData.envVersion
371       if (dialogData.extraData) params.extraData = dialogData.extraData
372
037956 373       if (dialogData.type === 'edit') {
L 374         params.id = dialogData.id
375       }
376       this.postFN({
377         url,
378         params,
379         mockData: {
380           code: 100, data: {
381
382           }
383         }
384       }, inf => {
385         this.$messageSuc('保存成功')
386         this.hideDialog()
387         this.getList()
388       })
389     }
390   }
391 }
392 </script>
393
394 <style lang="scss" scoped>
395
396 </style>