~chenshaoxiong/sms_center_backstage.git

liweilong

2020-12-25 faeb372259f5d47cd3ba304bf383361d18da2714

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