~chenshaoxiong/sms_center_backstage.git

long

2021-12-08 bf97988edfb77f5436d4ef20575e9f34477f36a7

提交 \| 用户 \| 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>
133cfa	71	<!-- 上传图片组件(单图) -->
3fccf2	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
30a172	141	jumpTypeOpt: [
L	142	{ label: '不跳转', value: 0 },
	143	{ label: '小程序页面', value: 1 },
	144	{ label: 'H5页面', value: 2 },
	145	{ label: '其它小程序', value: 3 }
	146	],
	147
	148	envVersionOpt: [
	149	{ label: '开发版', value: 'develop' },
	150	{ label: '体验版', value: 'trial' },
	151	{ label: '正式版', value: 'release' }
	152	],
	153
037956	154	// 显示弹窗
L	155	isShowDialog: false,
	156
	157	// 表单校验
	158	rules: {
	159	orderNum: [
	160	{ required: true, message: '排序号不能为空', trigger: 'change' }
	161	],
	162	uploadImgs: [
9f32bd	163	{ required: true, message: '轮播图片不能为空', trigger: 'change' }
L	164	],
	165	jumpType: [
	166	{ required: true, message: '跳转类型不能为空', trigger: 'change' }
	167	],
	168	jumpUrl: [
	169	{ required: true, message: '跳转链接不能为空', trigger: 'change' }
	170	],
	171	jumpMpId: [
	172	{ required: true, message: '跳转小程序appId不能为空', trigger: 'change' }
	173	],
	174	envVersion: [
	175	{ required: true, message: '跳转小程序版本不能为空', trigger: 'change' }
037956	176	]
L	177	},
	178
	179	// 表单名称
	180	formName: 'dialogForm',
	181	// 弹窗表单
	182	dialogData: {
	183	// 上传图片
	184	uploadImgs: []
	185	}
	186
	187	}
	188	},
	189	mounted() {
	190	this.init()
	191	},
	192	methods: {
	193	// 初始化
	194	init() {
	195	this.getList()
	196	},
	197
	198	// 获取列表
	199	getList() {
	200	var { pageNum, pageSize } = this
	201	const params = {
	202	pageNum: pageNum,
	203	pageSize: pageSize
	204	}
	205
	206	this.postFN({
	207	url: 'admin/banner/list',
	208	params: params,
	209	mockData: {
	210	code: 100,
	211	msg: '',
	212	data: {
	213	list: [{
	214	'imgUrl': 'https://profile.csdnimg.cn/0/1/7/3_weixin_38373875',
	215	'jumpUrl': '123',
	216	'jumpType': 0,
	217	'orderNum': 1,
	218	'createTime': '2020-02-02 02:00:00'
	219	}],
	220	total: 100
	221	}
	222	}
	223	}, (inf) => {
	224	this.list = inf.list \|\| []
	225	this.total = inf.total
	226	})
	227	},
	228	// 重新获取列表
	229	reGetList() {
	230	this.pageNum = 1
	231	this.getList()
	232	},
	233	// 删除
	234	handleDelete(item) {
	235	// 打开二次确认弹窗
	236	this.$confirm('是否确认删除该轮播图?', '提示', {
	237	confirmButtonText: '确定',
	238	cancelButtonText: '取消',
	239	type: 'warning'
	240	}).then(() => {
	241	// 确定回调
	242	this.postFN({
	243	url: 'admin/banner/del',
	244	params: {
	245	id: item.id
	246	},
	247	mockData: {
	248	code: 100,
	249	msg: '',
	250	data: {}
	251	}
	252	}, () => {
	253	this.getList()
	254	this.$messageSuc('删除成功')
	255	})
	256	}).catch(() => {})
	257	},
	258	// 编辑
	259	handleEdit(item) {
	260	this.showDialog('edit', item)
	261	},
cf8a75	262	// 跳转类型为【不跳转】时，清空其余跳转字段
C	263	handleJumpTypeChange() {
	264	if (this.dialogData.jumpType === 0) {
	265	this.dialogData.jumpUrl = ''
	266	this.dialogData.jumpMpId = ''
	267	this.dialogData.envVersion = ''
	268	this.dialogData.extraData = ''
	269	}
	270	},
037956	271	// 显示弹框
L	272	showDialog(type, item) {
	273	let dialogData = {}
	274
	275	this.isShowDialog = true
	276	this.$nextTick(() => {
	277	if (type === 'add') {
	278	dialogData = {
	279	type: 'add',
	280	orderNum: 1,
	281	uploadImgs: []
	282	}
	283	} else {
	284	dialogData = {
	285	type: 'edit',
	286	...item
	287	}
	288	dialogData.uploadImgs = [{ url: item.imgUrl, status: 'success' }]
	289	}
	290	this.dialogData = dialogData
	291	this.$refs[this.formName].resetFields()
	292	})
	293	},
	294	// 隐藏弹框
	295	hideDialog() {
	296	this.$refs[this.formName].resetFields()
	297	this.isShowDialog = false
	298	},
	299	// 提交
	300	handleSave(type) {
	301	// 验证
	302	this.$refs[this.formName].validate((valid) => {
	303	if (valid) {
	304	// 上传图片
3fccf2	305	this.$refs.refUploadImg.runUploadImg((imgUrl) => {
L	306	imgUrl && this.$set(this.dialogData, 'imgUrl', imgUrl)
037956	307	this.submit(type)
L	308	})
	309	}
	310	})
	311	},
	312	submit(type) {
	313	const url = type === 'add' ? 'admin/banner/add' : 'admin/banner/edit'
	314	const dialogData = this.dialogData
	315	const params = {
	316	orderNum: dialogData.orderNum,
9f32bd	317	imgUrl: dialogData.imgUrl,
L	318	jumpType: dialogData.jumpType
037956	319	}
9f32bd	320	if (dialogData.jumpUrl) params.jumpUrl = dialogData.jumpUrl
L	321	if (dialogData.jumpMpId) params.jumpMpId = dialogData.jumpMpId
	322	if (dialogData.envVersion) params.envVersion = dialogData.envVersion
	323	if (dialogData.extraData) params.extraData = dialogData.extraData
	324
037956	325	if (dialogData.type === 'edit') {
L	326	params.id = dialogData.id
	327	}
	328	this.postFN({
	329	url,
	330	params,
	331	mockData: {
	332	code: 100, data: {
	333
	334	}
	335	}
	336	}, inf => {
	337	this.$messageSuc('保存成功')
	338	this.hideDialog()
b82c1e	339	type === 'add' ? this.reGetList() : this.getList()
037956	340	})
L	341	}
	342	}
	343	}
	344	</script>
	345
	346	<style lang="scss" scoped>
	347
	348	</style>