jfcloud-coldchain/snowy-admin-web/src/views/motoring/report/noticelist.vue

<template>
	<div class="table_item">
		<s-table ref="tableRef" :columns="columns" :data="loadData" :row-key="(record) => record.sctime" bordered>
			<template #operator>
				<!-- 搜索区域 -->
				<div class="table-search">
					<div class="table-search-form">
						<a-row :gutter="10">
							<a-form
								ref="searchFormRef"
								name="advanced_search"
								layout="inline"
								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
								:model="searchFormState"
								class="ant-advanced-search-form"
							>
								<a-col :xs="24" :sm="24" :md="24" :lg="12" :xl="8">
									<a-form-item label="生成时间" name="searchKey">
										<a-range-picker
											v-model:value="searchFormState.searchKey"
											value-format="YYYY/MM/DD"
											style="width: 100%"
										/>
									</a-form-item>
								</a-col>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
									><a-form-item label="接收人" name="code">
										<a-input v-model:value="searchFormState.code" placeholder="请输入接收人" /> </a-form-item
								></a-col>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
									<a-form-item label="通知类型" name="jkdmc">
										<a-select v-model:value="searchFormState.jkdmc" placeholder="请选择通知类型">
											<a-select-option value="1">短信报警</a-select-option>
											<a-select-option value="2">电话报警</a-select-option>
											<a-select-option value="3">微信报警</a-select-option>
											<a-select-option value="4">邮件报警</a-select-option>
											<a-select-option value="5">弹出报警</a-select-option>
											<a-select-option value="6">音乐报警</a-select-option>
										</a-select>
									</a-form-item></a-col
								>
								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
									<a-form-item label="状态" name="jkdmc">
										<a-select v-model:value="searchFormState.jkdmc" placeholder="请选择状态">
											<a-select-option value="1">发送成功</a-select-option>
											<a-select-option value="2">未发送</a-select-option>
											<a-select-option value="3">发送失败</a-select-option>
											<a-select-option value="4">非报警时间记录</a-select-option>
										</a-select>
									</a-form-item></a-col
								>

								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
									><a-form-item label="对象编码" name="code">
										<a-input v-model:value="searchFormState.code" placeholder="请输入对象编码" /> </a-form-item
								></a-col>

								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
									><a-form-item label="对象名称" name="bjyy">
										<a-input v-model:value="searchFormState.bjyy" placeholder="请输入对象名称" /> </a-form-item
								></a-col>
							</a-form>
						</a-row>
					</div>
					<div class="table-search-buttons">
						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
						<a-button class="xn-mg08" @click="reset">重置</a-button>
					</div>
				</div>

				<!-- 其他操作区域 -->
				<div class="table-head-btn">
					<div class="btn-right">
						<a-button>
							<template #icon><download-outlined /></template>导出
						</a-button>
					</div>
				</div>
			</template>
			<template #bodyCell="{ column, index }">
				<!-- 序号 -->
				<template v-if="column.dataIndex === 'index'">{{ index + 1 }} </template>
			</template>
		</s-table>
	</div>
</template>

<script setup>
	import tool from '@/utils/tool'
	import jobApi from '@/api/dev/jobApi'
	const searchFormRef = ref()
	const searchFormState = ref({})
	const tableRef = ref()
	const columns = [
		{
			title: '序号',
			dataIndex: 'index',
			align: 'center',
			width: 50
		},
		{
			title: '生成时间',
			dataIndex: 'sctime',
			align: 'center',
			ellipsis: true
		},
		{
			title: '发送时间',
			dataIndex: 'fstime',
			align: 'center',
			ellipsis: true
		},
		{
			title: '接收人',
			dataIndex: 'jsr',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象编码',
			dataIndex: 'dxcpde',
			align: 'center',
			ellipsis: true
		},
		{
			title: '对象名称',
			dataIndex: 'name',
			align: 'center',
			ellipsis: true
		},
		{
			title: '发送内容',
			dataIndex: 'fsnr',
			align: 'center',
			ellipsis: true,
			width: '20%'
		},
		{
			title: '通知类型',
			dataIndex: 'type',
			align: 'center',
			ellipsis: true
		},
		{
			title: '短信',
			dataIndex: 'dx',
			align: 'center',
			ellipsis: true
		},
		{
			title: '电话',
			dataIndex: 'dh',
			align: 'center',
			ellipsis: true
		},
		{
			title: '微信',
			dataIndex: 'wx',
			align: 'center',
			ellipsis: true
		},
		{
			title: '邮件',
			dataIndex: 'yj',
			align: 'center',
			ellipsis: true
		},
		{
			title: '状态',
			dataIndex: 'zt',
			align: 'center',
			ellipsis: true
		},
		{
			title: '故障原因',
			dataIndex: 'gzyy',
			align: 'center',
			ellipsis: true
		}
	]

	const loadData = (parameter) => {
		if (searchFormState.value.searchKey) {
			searchFormState.value.startCreateTime = searchFormState.value.searchKey[0]
			searchFormState.value.endCreateTime = searchFormState.value.searchKey[1]
			delete searchFormState.value.searchKey
		}

		return jobApi.jobPage(Object.assign(parameter, searchFormState.value)).then((res) => {
			// return res
			const obj = {
				current: 1,
				pages: 1,
				records: [
					{
						sctime: '2024-08-28 07:03:24',
						fstime: '2024-08-28 09:03:42',
						jsr: '周小杰',
						dxcpde: '',
						name: '-21度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						gzyy: ''
					},
					{
						sctime: '2024-08-28 11:32:12',
						fstime: '2024-08-28 11:52:42',
						jsr: '周小杰',
						dxcpde: '',
						name: '-22度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						gzyy: ''
					},
					{
						sctime: '2024-08-28 13:07:34',
						fstime: '2024-08-28 13:10:12',
						jsr: '周小杰',
						dxcpde: '',
						name: '-23度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						gzyy: ''
					},
					{
						sctime: '2024-08-28 15:41:04',
						fstime: '2024-08-28 15:55:51',
						jsr: '周小杰',
						dxcpde: '',
						name: '-24度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						gzyy: ''
					},
					{
						sctime: '2024-08-28 16:43:14',
						fstime: '2024-08-28 16:57:32',
						jsr: '周小杰',
						dxcpde: '',
						name: '-25度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						gzyy: ''
					},
					{
						sctime: '2024-08-28 18:21:33',
						fstime: '2024-08-28 18:33:12',
						jsr: '周小杰',
						dxcpde: '',
						name: '-26度冰箱',
						fsnr: '广州海关基数中心-[-20度冰箱]报警;温度超过上限:-7.7℃',
						type: '短信报警',
						dx: '13578945780',
						dh: '/',
						wx: '/',
						yj: '/',
						zt: '发送成功',
						gzyy: ''
					}
				],
				size: 10,
				total: 6
			}
			return obj
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		tableRef.value.refresh(true)
	}
</script>

<style lang="less" scoped>
	.table_item {
		padding: 15px 20px;
	}
	:deep(.ant-table-pagination-right) {
		justify-content: center !important;
	}
</style>