~chenshaoxiong/sms_center_backstage.git

children117cl

2021-04-14 cf8a751fa16e30b13080bf0e7af2ff6c9df693a8

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