~chenshaoxiong/sms_center_backstage.git

update_202208241120_临时发送添加短信类型

jazz

2022-08-24 b413394a0a4bdbb2b3af67f3faf86b3b7351655a

提交 \| 用户 \| age
5dfa4a	1	<template>
J	2	<div class="app-container">
	3	<!-- 返回按钮和标题 -->
	4	<!-- <el-page-header class="mb20" content="xx" @back="$router.go(-1)" /> -->
	5
	6	<!-- 搜索区 ↓↓↓↓↓↓↓↓↓↓ -->
	7	<el-form v-show="showSearch" ref="searchForm" :inline="true">
	8	<el-form-item label="批次名称">
	9	<el-input
	10	v-model="batchName"
	11	placeholder="搜索批次名称"
	12	clearable
	13	size="small"
	14	style="width: 240px"
	15	maxlength="50"
	16	@keyup.enter.native="reGetList"
	17	/>
	18	</el-form-item>
	19	<el-form-item label="批次编号">
	20	<el-input
	21	v-model="batchCode"
	22	placeholder="搜索批次编号"
	23	clearable
	24	size="small"
	25	style="width: 240px"
	26	maxlength="50"
	27	@keyup.enter.native="reGetList"
	28	/>
	29	</el-form-item>
b41339	30	<el-form-item label="短信类型">
J	31	<el-select v-model="smsType" clearable placeholder="选择短信类型" @change="reGetList">
	32	<el-option
	33	v-for="item in smsTypeOpts"
	34	:key="item.value"
	35	:label="item.label"
	36	:value="item.value"
	37	/>
	38	</el-select>
	39	</el-form-item>
5dfa4a	40	<el-form-item>
J	41	<el-button type="cyan" icon="el-icon-search" size="mini" @click="reGetList">搜索</el-button>
	42	<el-button icon="el-icon-refresh" size="mini" @click="resetHandle">重置</el-button>
f2a2b4	43	<el-button type="primary" icon="el-icon-download" size="mini" @click="exportList">下载发送模板</el-button>
5dfa4a	44	</el-form-item>
J	45	</el-form>
	46	<!-- 搜索区 ↑↑↑↑↑↑↑↑↑↑ -->
	47
	48	<!-- 操作区 ↓↓↓↓↓↓↓↓↓↓ -->
	49	<el-row :gutter="10" class="mb8">
	50	<el-col :span="1.5">
	51	<!-- 权限判断 v-if="getAuthValueFN('xxx_add')" -->
	52	<el-button
	53	type="primary"
	54	icon="el-icon-plus"
	55	size="mini"
	56	@click="showAddDialog"
	57	>临时发送</el-button>
	58	</el-col>
	59	<right-toolbar :show-search.sync="showSearch" @queryTable="getList" />
	60	</el-row>
	61	<!-- 操作区 ↑↑↑↑↑↑↑↑↑↑ -->
	62
	63	<!--
	64	table参数设置：
	65	stripe 是否为斑马纹
	66	border 是否带有纵向边框
	67	max-height 最大高度
	68	-->
	69	<el-table :data="list" stripe>
	70	<el-table-column type="index" label="序号" align="center" width="60" />
	71	<el-table-column label="创建时间" prop="createTime" align="center" min-width="160" />
	72	<el-table-column label="批次名称" prop="batchName" align="center" />
	73	<el-table-column label="批次编号" prop="batchCode" align="center" />
	74	<el-table-column label="期望发送时间" prop="timingTime" align="center" min-width="160" />
	75	<el-table-column label="发送短信时间" prop="executionTime" align="center" min-width="160" />
	76	<el-table-column label="发送成功总数" prop="sendSuccess" align="center" />
	77	<el-table-column label="发送失败总数" prop="sendFail" align="center" />
	78	<el-table-column label="发送总数" prop="sendTotal" align="center" />
	79	<el-table-column label="状态" prop="status" align="center">
	80	<template slot-scope="scope">
f2a2b4	81	<span v-if="scope.row.status == 0">待执行</span>
J	82	<span v-if="scope.row.status == 1">执行中</span>
	83	<span v-if="scope.row.status == 2">完成</span>
	84	<span v-if="scope.row.status == 3">取消</span>
	85	<span v-if="scope.row.status == 4">失败</span>
5dfa4a	86	</template>
J	87	</el-table-column>
	88	<el-table-column label="短信模内容" prop="smsTemplate" align="center" min-width="160">
	89	<template slot-scope="scope">
	90	<el-popover
	91	placement="top-start"
	92	width="400"
	93	popper-class="el-popover_tableFilter"
	94	trigger="hover"
	95	:popper-options="{ removeOnDestroy: true }"
	96	>
	97	<div style="max-height: 500px;overflow-y: auto;">{{ scope.row.smsTemplate }}</div>
	98	<div slot="reference" class="line-clamp-2" style="line-height: 1.2">{{ scope.row.smsTemplate }}</div>
	99	</el-popover>
	100	</template>
	101	</el-table-column>
	102	<!-- <el-table-column label="是否上架" prop="isUp" align="center" min-width="100">
	103	<template slot-scope="scope">
	104	<el-switch
	105	v-model="scope.row.isUp"
	106	:active-value="1"
	107	:inactive-value="0"
	108	@change="handleUpChange(scope.row)"
	109	/>
	110	</template>
	111	</el-table-column> -->
f2a2b4	112	<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="120">
5dfa4a	113	<template slot-scope="scope">
f2a2b4	114	<!-- <el-button
5dfa4a	115	size="mini"
J	116	type="text"
	117	icon="el-icon-edit"
	118	@click="showEditDialog(scope.row)"
f2a2b4	119	>编辑</el-button> -->
5dfa4a	120	<el-button
J	121	size="mini"
	122	type="text warn"
	123	icon="el-icon-delete"
	124	@click="handleDelete(scope.row)"
f2a2b4	125	>取消批次</el-button>
5dfa4a	126	</template>
f2a2b4	127	</el-table-column>
5dfa4a	128	</el-table>
J	129
	130	<!-- 新增&编辑 -->
	131	<el-dialog v-el-drag-dialog :title="'临时发送短信'" width="800px" :visible.sync="dialogVisible" append-to-body :before-close="hideDialog" :close-on-click-modal="false">
	132	<el-form ref="refDialog" :model="dialogData" label-width="110px" :rules="rules" size="small">
	133	<el-form-item label="批次名称" prop="batchName">
	134	<el-input v-model="dialogData.batchName" placeholder="请输入批次名称" maxlength="255" />
	135	</el-form-item>
	136	<el-form-item label="批次编号" prop="batchCode">
	137	<el-input v-model="dialogData.batchCode" placeholder="请输入批次编号" maxlength="255" />
	138	</el-form-item>
b41339	139	<el-form-item label="短信类型" prop="smsType">
J	140	<el-select v-model="dialogData.smsType" clearable placeholder="选择短信类型">
	141	<el-option
	142	v-for="item in smsTypeOpts"
	143	:key="item.value"
	144	:label="item.label"
	145	:value="item.value"
	146	/>
	147	</el-select>
	148	</el-form-item>
5dfa4a	149	<el-form-item label="上传文件" prop="uploadFiles">
J	150	<div class="upload_single_file">
	151	<!-- 上传文件组件(单) -->
	152	<el-upload
	153	ref="refUploadFile"
	154	:auto-upload="false"
	155	action="#"
	156	:limit="1"
	157	:file-list="uploadFiles"
	158	:on-change="addUploadFile"
	159	:on-remove="delUploadFile"
	160	:http-request="uploadFileReq"
	161	:before-upload="beforeUploadFile"
	162	size="mini"
	163	>
	164	<el-button style="display: block" :disabled="uploadFiles&&uploadFiles.length>0" class="mb8" type="primary" size="small" icon="el-icon-plus">上传文件</el-button>
	165	</el-upload>
	166	</div>
	167	</el-form-item>
	168	<el-form-item label="短信模内容" prop="smsTemplate">
	169	<el-input v-model="dialogData.smsTemplate" type="textarea" placeholder="请输入短信模版内容" maxlength="500" rows="5" />
	170	</el-form-item>
	171	<!-- <el-form-item label="短信模内容" prop="smsTemplate">
	172	<WangEnduit :catchdata="catchData" :content="dialogData.smsTemplate" :rangenum="rangenum" />
	173	</el-form-item> -->
	174	</el-form>
	175	<div slot="footer" class="dialog-footer">
	176	<el-button @click="hideDialog">取消</el-button>
	177	<el-button type="primary" @click="submitHandle">确定</el-button>
	178	</div>
	179	</el-dialog>
	180
	181	<pagination
	182	v-show="total>0"
	183	:total="total"
	184	:page.sync="pageNum"
	185	:limit.sync="pageSize"
	186	@pagination="getList"
	187	/>
	188
	189	<back-to-top :visibility-height="300" :back-position="50" transition-name="fade" />
	190	</div>
	191	</template>
	192
	193	<script>
	194	import BackToTop from '@/components/BackToTop'
f2a2b4	195	import { getToken } from '@/utils/auth' // get token from session
5dfa4a	196	// import WangEnduit from '@/components/WangEnduit' // 富文本
J	197	export default {
	198	name: 'Index',
	199	components: {
	200	BackToTop
	201	// WangEnduit
	202	},
	203	data() {
	204	return {
	205	showSearch: true, // 是否显示搜索区
	206	// keyWord: '', // 搜索区字段，可自行扩展其余字段
	207	batchName: '',
	208	batchCode: '',
b41339	209	smsType: '',
5dfa4a	210
J	211	objectName: '短信', // 对象名称，用于删除提示、启用提示、弹窗标题等
	212
	213	// 数据列表
	214	list: [],
	215	userList: [], // 用户列表
	216
	217	uploadFiles: [], // 上传文件
	218
	219	// 弹窗数据
	220	dialogVisible: false,
	221	dialogData: {},
b41339	222
J	223	smsTypeOpts: [
	224	{ label: '验证码', value: 0 },
	225	{ label: '通知短信', value: 1 },
	226	{ label: '营销短信', value: 2 }
	227	],
5dfa4a	228
J	229	// 富文本编辑器
	230	// rangenum: null,
	231
	232	// 分页 ↓↓↓↓↓↓↓↓↓↓
	233	total: 0,
	234	pageNum: 1,
	235	pageSize: 20,
	236	// 分页 ↑↑↑↑↑↑↑↑↑↑
	237
	238	// 表单校验
	239	rules: {
	240	batchName: [
	241	{ required: true, message: '批次名称不能为空', trigger: 'change' }
	242	],
	243	batchCode: [
	244	{ required: true, message: '批次编号不能为空', trigger: 'change' }
	245	],
	246	smsTemplate: [
	247	{ required: true, message: '短信模内容不能为空', trigger: 'change' }
b41339	248	],
J	249	smsType: [
	250	{ required: true, message: '短信类型不能为空', trigger: 'change' }
5dfa4a	251	]
J	252	// isUp: [
	253	// { required: true, message: '是否上架不能为空', trigger: 'change' }
	254	// ]
	255	}
	256	}
	257	},
	258	mounted() {
	259	this.init()
	260	},
	261	methods: {
	262	// 初始化
	263	init() {
	264	this.getList()
	265	},
	266
	267	// ========== 富文本相关
	268	// 富文本编辑器的内容赋值
	269	// catchData(content) {
	270	// if (content === '<p><br></p>') content = ''
	271	// try {
	272	// const currentRange = window.getSelection().getRangeAt(0)
	273	// this.rangenum = currentRange
	274	// } catch (e) {
	275	// console.log(e)
	276	// }
	277	// this.$set(this.dialogData, 'smsTemplate', content)
	278	// this.$refs['refDialog'].validateField('smsTemplate')
	279	// },
	280	// ========== 富文本相关
	281
	282	// 获取列表
	283	getList() {
b41339	284	var { pageNum, pageSize, batchName, batchCode, smsType } = this
5dfa4a	285	this.postFN({
J	286	url: 'send-general/list',
	287	header: { 'Content-Type': 'application/json;charset=UTF-8' },
	288	params: {
	289	pageNum: pageNum,
	290	pageSize: pageSize,
	291
	292	batchName: batchName,
b41339	293	batchCode: batchCode,
J	294	smsType: smsType
5dfa4a	295	},
J	296	mockData: {
	297	code: 100,
	298	msg: '',
	299	data: {
	300	list: [{
	301	id: 'xxx',
	302	index: 1,
	303	name: '超级管理员',
	304	createTime: '2020-08-09 10:10:10'
	305	}],
	306	total: 100
	307	}
	308	}
	309	}, (inf) => {
	310	this.list = inf.list \|\| []
	311	this.userList = inf.userList \|\| []
	312	this.total = inf.total
	313	})
	314	},
	315	// 重新获取列表
	316	reGetList() {
	317	this.pageNum = 1
	318	this.getList()
	319	},
	320	// 重置
	321	resetHandle() {
	322	this.batchCode = ''
	323	this.batchName = ''
b41339	324	this.smsType = ''
5dfa4a	325	this.reGetList()
J	326	},
	327	// 删除
	328	handleDelete(item) {
	329	// 打开二次确认弹窗
f2a2b4	330	this.$confirm('是否确认取消该短信批次?', '提示', {
5dfa4a	331	confirmButtonText: '确定',
J	332	cancelButtonText: '取消',
	333	type: 'warning'
	334	}).then(() => {
	335	// 确定回调
	336	this.postFN({
f2a2b4	337	url: 'send-general/cancel',
J	338	header: { 'Content-Type': 'application/json;charset=UTF-8' },
5dfa4a	339	params: {
J	340	id: item.id
	341	},
	342	mockData: {
	343	code: 100,
	344	msg: '',
	345	data: {}
	346	}
	347	}, () => {
	348	this.getList()
f2a2b4	349	this.$messageSuc('取消成功')
5dfa4a	350	})
J	351	}).catch(() => {})
	352	},
	353	// 修改是否上架
	354	handleUpChange(item) {
	355	const text = item.isUp === 1 ? '上架' : '下架'
	356	this.$confirm('确认要' + text + '该' + this.objectName + '吗?', '提示', {
	357	confirmButtonText: '确定',
	358	cancelButtonText: '取消',
	359	type: 'warning'
	360	}).then(() => {
	361	// TODO url
	362	this.postFN({
	363	url: 'xxx',
	364	params: {
	365	id: item.id,
	366	isUp: item.isUp
	367	},
	368	mockData: {
	369	code: 100,
	370	msg: '',
	371	data: {}
	372	}
	373	}, () => {
	374	this.$messageSuc(text + '成功')
	375	}, (res) => {
	376	item.isUp = item.isUp === 1 ? 0 : 1
	377	this.$messageError(res.msg)
	378	})
	379	}).catch(() => {
	380	item.isUp = item.isUp === 1 ? 0 : 1
	381	})
	382	},
	383
	384	// 打开新增弹窗
	385	showAddDialog() {
	386	var dialogData = {
	387	batchCode: '',
	388	batchName: '',
b41339	389	smsTemplate: '',
J	390	smsType: ''
5dfa4a	391	}
J	392	this.uploadFiles = []
	393	this.dialogVisible = true
	394	this.$nextTick(() => {
	395	this.dialogData = dialogData
	396	this.$refs['refDialog'].resetFields()
	397	})
	398	},
	399	// 打开编辑弹框
	400	showEditDialog(item) {
	401	var dialogData = {
	402	type: 'edit',
	403	...item
	404	}
	405	console.log('dialogData', dialogData)
	406	this.dialogVisible = true
	407	this.$nextTick(() => {
	408	this.dialogData = dialogData
	409	this.$refs['refDialog'].resetFields()
	410	})
	411	},
	412	// 关闭编辑弹窗
	413	hideDialog() {
	414	this.dialogData = {
	415
	416	}
	417	this.dialogVisible = false
	418	// 清空富文本
	419	// this.rangenum = null
	420	},
	421	// 提交新增&编辑
	422	submitHandle() {
	423	this.$refs['refDialog'].validate(valid => {
	424	if (valid) {
	425	this.uploadFileReq()
	426	// this.submitReq()
	427	}
	428	})
	429	},
	430	// 提交接口
	431	submitReq() {
	432	var { dialogData } = this
	433	var params = {
	434	name: dialogData.name,
	435	isUp: dialogData.isUp
	436	// TODO 参数
	437	}
	438
	439	if (dialogData.password) params.password = dialogData.password
	440
	441	var isAdd = dialogData.type === 'add'
	442	// TODO url
	443	var url = isAdd ? 'xxx/add' : 'xxx/edit'
	444
	445	!isAdd && (params.id = dialogData.id)
	446
	447	this.postFN({
	448	url: url,
	449	params: params,
	450	mockData: {
	451	code: 100,
	452	msg: '',
	453	data: {}
	454	}
	455	}, () => {
	456	this.$messageSuc('保存成功')
	457	this.hideDialog()
	458	isAdd ? this.reGetList() : this.getList()
	459	})
	460	},
	461	// 上传文件 ↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓↓
	462	// 上传前确认格式
	463	beforeUploadFile(file) {
	464	const isTooLarge = file.size / 1024 / 1024 > 50
	465	let flag = true
	466	if (isTooLarge) {
	467	this.$message.error('请勿上传大于50MB的文件')
	468	flag = false
	469	}
	470	return flag
	471	},
	472	// 增加文件
	473	addUploadFile(file, fileList) {
	474	this.uploadFiles = fileList
	475	},
	476	// 删除文件
	477	delUploadFile(file, fileList) {
	478	this.uploadFiles = fileList
	479	},
	480	// 执行上传商品图
	481	runUploadFile(suc_cb) {
	482	if (this.checkNeedUpload(this.uploadFiles)) {
	483	this.callback = suc_cb
	484	this.$refs.refUploadFile.submit()
	485	} else {
	486	suc_cb && suc_cb()
	487	}
	488	},
	489	// 上传文件
	490	uploadFileReq() {
	491	var { dialogData, uploadFiles } = this
	492	var file
	493	uploadFiles[0] && (file = uploadFiles[0].raw)
	494	const formData = new FormData()
	495	for (const key in dialogData) {
	496	formData.append(key, dialogData[key])
	497	}
	498	formData.append('file', file)
	499	if (!file) {
	500	this.$message.error('请上传文件')
	501	return
	502	}
	503	console.log('/*******************提交数据formData/', dialogData, file)
	504	this.postFN({
	505	url: 'send-general/temporary-send',
	506	header: { 'Content-Type': 'multipart/form-data' },
	507	params: formData,
	508	mockData: {
	509	code: 100,
	510	msg: '',
	511	data: {
	512	imgUrl: '上传文件成功'
	513	}
	514	}
	515	}, (inf) => {
	516	console.log('上传文件成功且结束', inf)
	517
	518	this.reGetList()
	519
	520	this.hideDialog()
	521
	522	// 提交
	523	// this.$set(this.dialogData, 'imgUrl', inf.imgUrl)
	524	// this.callback && this.callback(inf.imgUrl)
	525	})
	526	},
	527	// 获取文件后缀名
	528	extname(filename) {
	529	if (!filename \|\| typeof filename !== 'string') {
	530	return ''
	531	}
	532	const a = filename.split('').reverse().join('')
	533	const b = a.substring(0, a.search(/\./)).split('').reverse().join('')
	534	return b
f2a2b4	535	},
5dfa4a	536	// 上传文件 ↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑↑
f2a2b4	537	// 导出列表
J	538	exportList() {
	539	var adminToken = getToken()
	540	const path = `${window.location.protocol}//${window.location.host}/sms/send-general/get/temp?adminToken=${adminToken}`
	541	console.log('path', path)
	542	window.location.href = path
	543	}
5dfa4a	544	}
J	545	}
	546	</script>
	547
	548	<style lang="scss" scoped>
	549	.upload_single_file .el-upload-list__item-name{
	550	padding: 5px!important;
	551	}
	552	</style>