~chenshaoxiong/sms_center_backstage.git

liweilong

2020-12-23 35d31d5d6105c44e3c0a707f787357f0f86b4b65

提交 \| 用户 \| 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>