~chenshaoxiong/sms_center_backstage.git

children117cl

2021-06-03 8410b536a5f7cd16b5d8dcd86b28b6a283437626

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