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="150px"
	10	>
	11	<el-form-item label="短信类型" prop="type">
	12	<el-select
	13	v-model="queryParams.type"
	14	placeholder="请选择短信类型"
	15	clearable
	16	class="!w-240px"
	17	>
	18	<el-option
	19	v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE)"
	20	:key="dict.value"
	21	:label="dict.label"
	22	:value="dict.value"
	23	/>
	24	</el-select>
	25	</el-form-item>
	26	<el-form-item label="开启状态" prop="status">
	27	<el-select
	28	v-model="queryParams.status"
	29	placeholder="请选择开启状态"
	30	clearable
	31	class="!w-240px"
	32	>
	33	<el-option
	34	v-for="dict in getIntDictOptions(DICT_TYPE.COMMON_STATUS)"
	35	:key="dict.value"
	36	:label="dict.label"
	37	:value="dict.value"
	38	/>
	39	</el-select>
	40	</el-form-item>
	41	<el-form-item label="模板编码" prop="code">
	42	<el-input
	43	v-model="queryParams.code"
	44	placeholder="请输入模板编码"
	45	clearable
	46	@keyup.enter="handleQuery"
	47	class="!w-240px"
	48	/>
	49	</el-form-item>
	50	<el-form-item label="短信 API 的模板编号" prop="apiTemplateId">
	51	<el-input
	52	v-model="queryParams.apiTemplateId"
	53	placeholder="请输入短信 API 的模板编号"
	54	clearable
	55	@keyup.enter="handleQuery"
	56	class="!w-240px"
	57	/>
	58	</el-form-item>
	59	<el-form-item label="短信渠道" prop="channelId">
	60	<el-select
	61	v-model="queryParams.channelId"
	62	placeholder="请选择短信渠道"
	63	clearable
	64	class="!w-240px"
	65	>
	66	<el-option
	67	v-for="channel in channelList"
	68	:key="channel.id"
	69	:value="channel.id"
	70	:label="
	71	channel.signature +
	72	`【 ${getDictLabel(DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE, channel.code)}】`
	73	"
	74	/>
	75	</el-select>
	76	</el-form-item>
	77	<el-form-item label="创建时间" prop="createTime">
	78	<el-date-picker
	79	v-model="queryParams.createTime"
	80	style="width: 240px"
	81	type="daterange"
	82	value-format="YYYY-MM-DD HH:mm:ss"
	83	start-placeholder="开始日期"
	84	end-placeholder="结束日期"
	85	class="!w-240px"
	86	/>
	87	</el-form-item>
	88	<el-form-item>
	89	<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
	90	<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
	91	<el-button
	92	type="primary"
	93	plain
	94	@click="openForm('create')"
	95	v-hasPermi="['system:sms-template:create']"
	96	>
	97	<Icon icon="ep:plus" class="mr-5px" />新增
	98	</el-button>
	99	<el-button
	100	type="success"
	101	plain
	102	@click="handleExport"
	103	:loading="exportLoading"
	104	v-hasPermi="['system:sms-template:export']"
	105	>
	106	<Icon icon="ep:download" class="mr-5px" /> 导出
	107	</el-button>
	108	</el-form-item>
	109	</el-form>
	110	</ContentWrap>
	111
	112	<!-- 列表 -->
	113	<ContentWrap>
	114	<el-table v-loading="loading" :data="list">
	115	<el-table-column
	116	label="模板编码"
	117	align="center"
	118	prop="code"
	119	width="120"
	120	:show-overflow-tooltip="true"
	121	/>
	122	<el-table-column
	123	label="模板名称"
	124	align="center"
	125	prop="name"
	126	width="120"
	127	:show-overflow-tooltip="true"
	128	/>
	129	<el-table-column
	130	label="模板内容"
	131	align="center"
	132	prop="content"
	133	width="200"
	134	:show-overflow-tooltip="true"
	135	/>
	136	<el-table-column label="短信类型" align="center" prop="type">
	137	<template #default="scope">
	138	<dict-tag :type="DICT_TYPE.SYSTEM_SMS_TEMPLATE_TYPE" :value="scope.row.type" />
	139	</template>
	140	</el-table-column>
	141	<el-table-column label="状态" align="center" prop="status" width="80">
	142	<template #default="scope">
	143	<dict-tag :type="DICT_TYPE.COMMON_STATUS" :value="scope.row.status" />
	144	</template>
	145	</el-table-column>
	146	<el-table-column label="备注" align="center" prop="remark" />
	147	<el-table-column
	148	label="短信 API 的模板编号"
	149	align="center"
	150	prop="apiTemplateId"
	151	width="200"
	152	:show-overflow-tooltip="true"
	153	/>
	154	<el-table-column label="短信渠道" align="center" width="120">
	155	<template #default="scope">
	156	<div>
	157	{{ channelList.find((channel) => channel.id === scope.row.channelId)?.signature }}
	158	</div>
	159	<dict-tag :type="DICT_TYPE.SYSTEM_SMS_CHANNEL_CODE" :value="scope.row.channelCode" />
	160	</template>
	161	</el-table-column>
	162	<el-table-column
	163	label="创建时间"
	164	align="center"
	165	prop="createTime"
	166	width="180"
	167	:formatter="dateFormatter"
	168	/>
	169	<el-table-column label="操作" align="center" width="210" fixed="right">
	170	<template #default="scope">
	171	<el-button
	172	link
	173	type="primary"
	174	@click="openForm('update', scope.row.id)"
	175	v-hasPermi="['system:sms-template:update']"
	176	>
	177	修改
	178	</el-button>
	179	<el-button
	180	link
	181	type="primary"
	182	@click="openSendForm(scope.row.id)"
	183	v-hasPermi="['system:sms-template:send-sms']"
	184	>
	185	测试
	186	</el-button>
	187	<el-button
	188	link
	189	type="danger"
	190	@click="handleDelete(scope.row.id)"
	191	v-hasPermi="['system:sms-template:delete']"
	192	>
	193	删除
	194	</el-button>
	195	</template>
	196	</el-table-column>
	197	</el-table>
	198	<!-- 分页 -->
	199	<Pagination
	200	:total="total"
	201	v-model:page="queryParams.pageNo"
	202	v-model:limit="queryParams.pageSize"
	203	@pagination="getList"
	204	/>
	205	</ContentWrap>
	206
	207	<!-- 表单弹窗：添加/修改 -->
	208	<SmsTemplateForm ref="formRef" @success="getList" />
	209	<!-- 表单弹窗：测试发送 -->
	210	<SmsTemplateSendForm ref="sendFormRef" />
	211	</template>
	212	<script lang="ts" setup>
	213	import { DICT_TYPE, getIntDictOptions, getDictLabel } from '@/utils/dict'
	214	import { dateFormatter } from '@/utils/formatTime'
	215	import * as SmsTemplateApi from '@/api/system/sms/smsTemplate'
	216	import * as SmsChannelApi from '@/api/system/sms/smsChannel'
	217	import download from '@/utils/download'
	218	import SmsTemplateForm from './SmsTemplateForm.vue'
	219	import SmsTemplateSendForm from './SmsTemplateSendForm.vue'
	220
	221	defineOptions({ name: 'SystemSmsTemplate' })
	222
	223	const message = useMessage() // 消息弹窗
	224	const { t } = useI18n() // 国际化
	225
	226	const loading = ref(false) // 列表的加载中
	227	const total = ref(0) // 列表的总页数
	228	const list = ref([]) // 列表的数据
	229	const queryFormRef = ref() // 搜索的表单
	230	const queryParams = reactive({
	231	pageNo: 1,
	232	pageSize: 10,
	233	type: undefined,
	234	status: undefined,
	235	code: '',
	236	content: '',
	237	apiTemplateId: '',
	238	channelId: undefined,
	239	createTime: []
	240	})
	241	const exportLoading = ref(false) // 导出的加载中
	242	const channelList = ref<SmsChannelApi.SmsChannelVO[]>([]) // 短信渠道列表
	243
	244	/** 查询列表 */
	245	const getList = async () => {
	246	loading.value = true
	247	try {
	248	const data = await SmsTemplateApi.getSmsTemplatePage(queryParams)
	249	list.value = data.list
	250	total.value = data.total
	251	} finally {
	252	loading.value = false
	253	}
	254	}
	255
	256	/** 搜索按钮操作 */
	257	const handleQuery = () => {
	258	queryParams.pageNo = 1
	259	getList()
	260	}
	261
	262	/** 重置按钮操作 */
	263	const resetQuery = () => {
	264	queryFormRef.value.resetFields()
	265	handleQuery()
	266	}
	267
	268	/** 添加/修改操作 */
	269	const formRef = ref()
	270	const openForm = (type: string, id?: number) => {
	271	formRef.value.open(type, id)
	272	}
	273
	274	/** 发送短信按钮 */
	275	const sendFormRef = ref()
	276	const openSendForm = (id: number) => {
	277	sendFormRef.value.open(id)
	278	}
	279
	280	/** 删除按钮操作 */
	281	const handleDelete = async (id: number) => {
	282	try {
	283	// 删除的二次确认
	284	await message.delConfirm()
	285	// 发起删除
	286	await SmsTemplateApi.deleteSmsTemplate(id)
	287	message.success(t('common.delSuccess'))
	288	// 刷新列表
	289	await getList()
	290	} catch {}
	291	}
	292
	293	/** 导出按钮操作 */
	294	const handleExport = async () => {
	295	try {
	296	// 导出的二次确认
	297	await message.exportConfirm()
	298	// 发起导出
	299	exportLoading.value = true
	300	const data = await SmsTemplateApi.exportSmsTemplate(queryParams)
	301	download.excel(data, '短信模板.xls')
	302	} catch {
	303	} finally {
	304	exportLoading.value = false
	305	}
	306	}
	307
	308	/ 初始化 /
	309	onMounted(async () => {
	310	await getList()
	311	// 加载渠道列表
	312	channelList.value = await SmsChannelApi.getSimpleSmsChannelList()
	313	})
	314	</script>