shasteel-ui.git

houzhongjian

2024-10-09 314507f8ddadd9c66e98d260c3b2a5dad1a04015

提交 \| 用户 \| 时间
314507	1	<template>
H	2	<ContentWrap>
	3	<!-- 搜索工作栏 -->
	4	<el-form
	5	class="-mb-15px"
	6	:model="queryParams"
	7	ref="queryFormRef"
	8	:inline="true"
	9	label-width="100px"
	10	>
	11	<el-form-item label="手机号" prop="mobile">
	12	<el-input
	13	v-model="queryParams.mobile"
	14	placeholder="请输入手机号"
	15	clearable
	16	@keyup.enter="handleQuery"
	17	class="!w-240px"
	18	/>
	19	</el-form-item>
	20	<el-form-item label="短信渠道" prop="channelId">
	21	<el-select
	22	v-model="queryParams.channelId"
	23	placeholder="请选择短信渠道"
	24	clearable
	25	class="!w-240px"
	26	>
	27	<el-option
	28	v-for="channel in channelList"
	29	:key="channel.id"
	30	:value="channel.id"
	31	:label="
	32	channel.signature +
	33	`【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
	34	"
	35	/>
	36	</el-select>
	37	</el-form-item>
	38	<el-form-item label="模板编号" prop="templateId">
	39	<el-input
	40	v-model="queryParams.templateId"
	41	placeholder="请输入模板编号"
	42	clearable
	43	@keyup.enter="handleQuery"
	44	class="!w-240px"
	45	/>
	46	</el-form-item>
	47	<el-form-item label="发送状态" prop="sendStatus">
	48	<el-select
	49	v-model="queryParams.sendStatus"
	50	placeholder="请选择发送状态"
	51	clearable
	52	class="!w-240px"
	53	>
	54	<el-option
	55	v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_SEND_STATUS)"
	56	:key="dict.value"
	57	:label="dict.label"
	58	:value="dict.value"
	59	/>
	60	</el-select>
	61	</el-form-item>
	62	<el-form-item label="发送时间" prop="sendTime">
	63	<el-date-picker
	64	v-model="queryParams.sendTime"
	65	value-format="YYYY-MM-DD HH:mm:ss"
	66	type="daterange"
	67	start-placeholder="开始日期"
	68	end-placeholder="结束日期"
	69	class="!w-240px"
	70	/>
	71	</el-form-item>
	72	<el-form-item label="接收状态" prop="receiveStatus">
	73	<el-select
	74	v-model="queryParams.receiveStatus"
	75	placeholder="请选择接收状态"
	76	clearable
	77	class="!w-240px"
	78	>
	79	<el-option
	80	v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS)"
	81	:key="dict.value"
	82	:label="dict.label"
	83	:value="dict.value"
	84	/>
	85	</el-select>
	86	</el-form-item>
	87	<el-form-item label="接收时间" prop="receiveTime">
	88	<el-date-picker
	89	v-model="queryParams.receiveTime"
	90	value-format="YYYY-MM-DD HH:mm:ss"
	91	type="daterange"
	92	start-placeholder="开始日期"
	93	end-placeholder="结束日期"
	94	class="!w-240px"
	95	/>
	96	</el-form-item>
	97	<el-form-item>
	98	<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
	99	<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
	100	<el-button
	101	type="success"
	102	plain
	103	@click="handleExport"
	104	:loading="exportLoading"
	105	v-hasPermi="['system:sms-log:export']"
	106	>
	107	<Icon icon="ep:download" class="mr-5px" /> 导出
	108	</el-button>
	109	</el-form-item>
	110	</el-form>
	111	</ContentWrap>
	112
	113	<!-- 列表 -->
	114	<ContentWrap>
	115	<el-table v-loading="loading" :data="list">
	116	<el-table-column label="编号" align="center" prop="id" />
	117	<el-table-column
	118	label="创建时间"
	119	align="center"
	120	prop="createTime"
	121	width="180"
	122	:formatter="dateFormatter"
	123	/>
	124	<el-table-column label="手机号" align="center" prop="mobile" width="120">
	125	<template #default="scope">
	126	<div>{{ scope.row.mobile }}</div>
	127	<div v-if="scope.row.userType && scope.row.userId">
	128	<dict-tag :type="DICT_TYPE.USER_TYPE" :value="scope.row.userType" />
	129	{{ '(' + scope.row.userId + ')' }}
	130	</div>
	131	</template>
	132	</el-table-column>
	133	<el-table-column label="短信内容" align="center" prop="templateContent" width="300" />
	134	<el-table-column label="发送状态" align="center" width="180">
	135	<template #default="scope">
	136	<dict-tag :type="DICT_TYPE.SYSTEM_SMS_SEND_STATUS" :value="scope.row.sendStatus" />
	137	<div>{{ formatDate(scope.row.sendTime) }}</div>
	138	</template>
	139	</el-table-column>
	140	<el-table-column label="接收状态" align="center" width="180">
	141	<template #default="scope">
	142	<dict-tag :type="DICT_TYPE.SYSTEM_SMS_RECEIVE_STATUS" :value="scope.row.receiveStatus" />
	143	<div>{{ formatDate(scope.row.receiveTime) }}</div>
	144	</template>
	145	</el-table-column>
	146	<el-table-column label="短信渠道" align="center" width="120">
	147	<template #default="scope">
	148	<div>
	149	{{ channelList.find((channel) => channel.id === scope.row.channelId)?.signature }}
	150	</div>
	151	<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode" />
	152	</template>
	153	</el-table-column>
	154	<el-table-column label="模板编号" align="center" prop="templateId" />
	155	<el-table-column label="短信类型" align="center" prop="templateType">
	156	<template #default="scope">
	157	<dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.templateType" />
	158	</template>
	159	</el-table-column>
	160	<el-table-column label="操作" align="center" fixed="right" class-name="fixed-width">
	161	<template #default="scope">
	162	<el-button
	163	link
	164	type="primary"
	165	@click="openDetail(scope.row)"
	166	v-hasPermi="['system:sms-log:query']"
	167	>
	168	详情
	169	</el-button>
	170	</template>
	171	</el-table-column>
	172	</el-table>
	173	<!-- 分页 -->
	174	<Pagination
	175	:total="total"
	176	v-model:page="queryParams.pageNo"
	177	v-model:limit="queryParams.pageSize"
	178	@pagination="getList"
	179	/>
	180	</ContentWrap>
	181
	182	<!-- 表单弹窗：详情 -->
	183	<SmsLogDetail ref="detailRef" />
	184	</template>
	185	<script lang="ts" setup>
	186	import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
	187	import { dateFormatter, formatDate } from '@/utils/formatTime'
	188	import download from '@/utils/download'
	189	import * as SmsChannelApi from '@/api/system/sms/smsChannel'
	190	import * as SmsLogApi from '@/api/system/sms/smsLog'
	191	import SmsLogDetail from './SmsLogDetail.vue'
	192
	193	defineOptions({ name: 'SystemSmsLog' })
	194
	195	const message = useMessage() // 消息弹窗
	196
	197	const loading = ref(false) // 列表的加载中
	198	const total = ref(0) // 列表的总页数
	199	const list = ref([]) // 列表的数据
	200	const queryFormRef = ref() // 搜索的表单
	201	const queryParams = reactive({
	202	pageNo: 1,
	203	pageSize: 10,
	204	channelId: null,
	205	templateId: null,
	206	mobile: '',
	207	sendStatus: null,
	208	receiveStatus: null,
	209	sendTime: [],
	210	receiveTime: []
	211	})
	212	const exportLoading = ref(false) // 导出的加载中
	213	const channelList = ref([]) // 短信渠道列表
	214
	215	/** 查询列表 */
	216	const getList = async () => {
	217	loading.value = true
	218	try {
	219	const data = await SmsLogApi.getSmsLogPage(queryParams)
	220	list.value = data.list
	221	total.value = data.total
	222	} finally {
	223	loading.value = false
	224	}
	225	}
	226
	227	/** 搜索按钮操作 */
	228	const handleQuery = () => {
	229	queryParams.pageNo = 1
	230	getList()
	231	}
	232
	233	/** 重置按钮操作 */
	234	const resetQuery = () => {
	235	queryFormRef.value.resetFields()
	236	handleQuery()
	237	}
	238
	239	/** 导出按钮操作 */
	240	const handleExport = async () => {
	241	try {
	242	// 导出的二次确认
	243	await message.exportConfirm()
	244	// 发起导出
	245	exportLoading.value = true
	246	const data = await SmsLogApi.exportSmsLog(queryParams)
	247	download.excel(data, '短信日志.xls')
	248	} catch {
	249	} finally {
	250	exportLoading.value = false
	251	}
	252	}
	253
	254	/** 详情操作 */
	255	const detailRef = ref()
	256	const openDetail = (data: SmsLogApi.SmsLogVO) => {
	257	detailRef.value.open(data)
	258	}
	259
	260	/ 初始化 /
	261	onMounted(async () => {
	262	await getList()
	263	// 加载渠道列表
	264	channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
	265	})
	266	</script>