children117cl
2021-05-26 7f89d0b6ce12fd9ad39e501f63e2894b568aad02
提交 | 用户 | 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     <!-- 新增&编辑 -->
4dde14 61     <el-dialog v-el-drag-dialog :title="dialogData.type=='add'?'新增轮播图':'编辑轮播图'" width="500px" :visible.sync="isShowDialog" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
9f32bd 62       <el-form :ref="formName" :model="dialogData" label-width="120px" :rules="rules" size="small">
L 63         <el-form-item label="排序号:" prop="orderNum">
36b711 64           <el-input v-model="dialogData.orderNum" placeholder="请输入排序号" maxlength="10" />
037956 65         </el-form-item>
89cecf 66         <el-form-item ref="uploadFormItem" prop="uploadImgs">
C 67           <span slot="label">
68             <!-- 尺寸 -->
69             轮播图:<br><span style="color: #999;font-size: 12px">(xxx*xxx像素)</span>
70           </span>
3fccf2 71           <!-- 上传图片组件(多图) -->
L 72           <UploadSingleImg
037956 73             ref="refUploadImg"
3fccf2 74             v-model="dialogData.uploadImgs"
L 75             @change.capture="$refs[formName].clearValidate()"
76           />
037956 77         </el-form-item>
9f32bd 78         <el-form-item label="跳转类型:" prop="jumpType">
L 79           <el-select
80             v-model="dialogData.jumpType"
81             clearable
82             placeholder="请选择跳转类型"
83             class="com-edit-input"
84           >
85             <el-option v-for="item in jumpTypeOpt" :key="item.value" :label="item.label" :value="item.value" />
86           </el-select>
87         </el-form-item>
88         <el-form-item v-if="dialogData.jumpType" label="跳转链接:" prop="jumpUrl">
36b711 89           <el-input v-model="dialogData.jumpUrl" placeholder="请输入跳转链接" class="com-edit-input" maxlength="100" />
9f32bd 90         </el-form-item>
L 91         <el-form-item v-if="dialogData.jumpType===3" label="appId:" prop="jumpMpId">
36b711 92           <el-input v-model="dialogData.jumpMpId" placeholder="请输入小程序appId" class="com-edit-input" maxlength="50" />
9f32bd 93         </el-form-item>
L 94         <el-form-item v-if="dialogData.jumpType===3" label="小程序版本:" prop="envVersion">
95           <el-select
96             v-model="dialogData.envVersion"
97             clearable
98             placeholder="请选择小程序版本"
99             class="com-edit-input"
cf8a75 100             @change="handleJumpTypeChange"
9f32bd 101           >
L 102             <el-option v-for="item in envVersionOpt" :key="item.value" :label="item.label" :value="item.value" />
103           </el-select>
104         </el-form-item>
105         <el-form-item v-if="dialogData.jumpType===3" label="额外数据:" prop="extraData">
36b711 106           <el-input v-model="dialogData.extraData" placeholder="请输入小程序额外数据" class="com-edit-input" maxlength="50" />
9f32bd 107         </el-form-item>
037956 108       </el-form>
L 109       <div slot="footer" class="dialog-footer">
110         <el-button @click="hideDialog">取消</el-button>
111         <el-button type="primary" @click="handleSave(dialogData.type)">确定</el-button>
112       </div>
113     </el-dialog>
114
115     <!-- upload放大图片 -->
116     <el-dialog :visible.sync="uploadPreviewVisible" style="text-align:center">
117       <img style="max-width:100%" :src="uploadPreviewUrl" alt="">
118     </el-dialog>
119   </div>
120 </template>
121
122 <script>
123
124 import mixin_Upload from '@/mixins/upload.js'
9f32bd 125 import mixin_bannerOpts from '@/mixins/bannerOpts.js' // 通用轮播图下拉选项
3fccf2 126 import UploadSingleImg from '@/components_simple/UploadSingleImg'
037956 127 export default {
L 128   name: 'Equipment',
3fccf2 129   components: { UploadSingleImg },
9f32bd 130   mixins: [mixin_Upload, mixin_bannerOpts],
037956 131   data() {
L 132     return {
133       list: [], // 设备列表
134
135       // 分页 ↓↓↓↓↓↓↓↓↓↓
136       total: 0,
137       pageNum: 1,
138       pageSize: 20,
139       // 分页 ↑↑↑↑↑↑↑↑↑↑
140
141       // 显示弹窗
142       isShowDialog: false,
143
144       // 表单校验
145       rules: {
146         orderNum: [
147           { required: true, message: '排序号不能为空', trigger: 'change' }
148         ],
149         uploadImgs: [
9f32bd 150           { required: true, message: '轮播图片不能为空', trigger: 'change' }
L 151         ],
152         jumpType: [
153           { required: true, message: '跳转类型不能为空', trigger: 'change' }
154         ],
155         jumpUrl: [
156           { required: true, message: '跳转链接不能为空', trigger: 'change' }
157         ],
158         jumpMpId: [
159           { required: true, message: '跳转小程序appId不能为空', trigger: 'change' }
160         ],
161         envVersion: [
162           { required: true, message: '跳转小程序版本不能为空', trigger: 'change' }
037956 163         ]
L 164       },
165
166       // 表单名称
167       formName: 'dialogForm',
168       // 弹窗表单
169       dialogData: {
170         // 上传图片
171         uploadImgs: []
172       }
173
174     }
175   },
176   computed: {
177     // 上传禁用
178     uploadDisabled() {
179       return this.dialogData.uploadImgs.length > 0
180     }
181   },
182   mounted() {
183     this.init()
184   },
185   methods: {
186     // 初始化
187     init() {
188       this.getList()
189     },
190
191     // 获取列表
192     getList() {
193       var { pageNum, pageSize } = this
194       const params = {
195         pageNum: pageNum,
196         pageSize: pageSize
197       }
198
199       this.postFN({
200         url: 'admin/banner/list',
201         params: params,
202         mockData: {
203           code: 100,
204           msg: '',
205           data: {
206             list: [{
207               'imgUrl': 'https://profile.csdnimg.cn/0/1/7/3_weixin_38373875',
208               'jumpUrl': '123',
209               'jumpType': 0,
210               'orderNum': 1,
211               'createTime': '2020-02-02 02:00:00'
212             }],
213             total: 100
214           }
215         }
216       }, (inf) => {
217         this.list = inf.list || []
218         this.total = inf.total
219       })
220     },
221     // 重新获取列表
222     reGetList() {
223       this.pageNum = 1
224       this.getList()
225     },
226     // 删除
227     handleDelete(item) {
228       // 打开二次确认弹窗
229       this.$confirm('是否确认删除该轮播图?', '提示', {
230         confirmButtonText: '确定',
231         cancelButtonText: '取消',
232         type: 'warning'
233       }).then(() => {
234         // 确定回调
235         this.postFN({
236           url: 'admin/banner/del',
237           params: {
238             id: item.id
239           },
240           mockData: {
241             code: 100,
242             msg: '',
243             data: {}
244           }
245         }, () => {
246           this.getList()
247           this.$messageSuc('删除成功')
248         })
249       }).catch(() => {})
250     },
251     // 编辑
252     handleEdit(item) {
253       this.showDialog('edit', item)
254     },
cf8a75 255     // 跳转类型为【不跳转】时,清空其余跳转字段
C 256     handleJumpTypeChange() {
257       if (this.dialogData.jumpType === 0) {
258         this.dialogData.jumpUrl = ''
259         this.dialogData.jumpMpId = ''
260         this.dialogData.envVersion = ''
261         this.dialogData.extraData = ''
262       }
263     },
037956 264     // 显示弹框
L 265     showDialog(type, item) {
266       let dialogData = {}
267
268       this.isShowDialog = true
269       this.$nextTick(() => {
270         if (type === 'add') {
271           dialogData = {
272             type: 'add',
273             orderNum: 1,
274             uploadImgs: []
275           }
276         } else {
277           dialogData = {
278             type: 'edit',
279             ...item
280           }
281           dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }]
282         }
283         this.dialogData = dialogData
284         this.$refs[this.formName].resetFields()
285       })
286     },
287     // 隐藏弹框
288     hideDialog() {
289       this.$refs[this.formName].resetFields()
290       this.isShowDialog = false
291     },
292     // 提交
293     handleSave(type) {
294       // 验证
295       this.$refs[this.formName].validate((valid) => {
296         if (valid) {
297           // 上传图片
3fccf2 298           this.$refs.refUploadImg.runUploadImg((imgUrl) => {
L 299             imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
037956 300             this.submit(type)
L 301           })
302         }
303       })
304     },
305     submit(type) {
306       const url = type === 'add' ? 'admin/banner/add' : 'admin/banner/edit'
307       const dialogData = this.dialogData
308       const params = {
309         orderNum: dialogData.orderNum,
9f32bd 310         imgUrl: dialogData.imgUrl,
L 311         jumpType: dialogData.jumpType
037956 312       }
9f32bd 313       if (dialogData.jumpUrl) params.jumpUrl = dialogData.jumpUrl
L 314       if (dialogData.jumpMpId) params.jumpMpId = dialogData.jumpMpId
315       if (dialogData.envVersion) params.envVersion = dialogData.envVersion
316       if (dialogData.extraData) params.extraData = dialogData.extraData
317
037956 318       if (dialogData.type === 'edit') {
L 319         params.id = dialogData.id
320       }
321       this.postFN({
322         url,
323         params,
324         mockData: {
325           code: 100, data: {
326
327           }
328         }
329       }, inf => {
330         this.$messageSuc('保存成功')
331         this.hideDialog()
b82c1e 332         type === 'add' ? this.reGetList() : this.getList()
037956 333       })
L 334     }
335   }
336 }
337 </script>
338
339 <style lang="scss" scoped>
340
341 </style>