iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
91cd98	1	<template>
潘	2	<el-drawer
	3	v-model="drawer"
ebf2c1	4	size="60%"
6c2636	5	title="Http Tag"
91cd98	6	:direction="direction"
潘	7	:before-close="handleClose"
	8	>
	9	<!-- 搜索 -->
	10	<ContentWrap>
	11	<el-form
	12	class="-mb-15px"
	13	:model="queryParams"
	14	ref="queryFormRef"
	15	:inline="true"
	16	label-width="68px"
	17	>
	18	<el-form-item label="Tag名称" prop="tagName">
	19	<el-input
	20	v-model="queryParams.tagName"
	21	placeholder="请输入Tag名称"
	22	clearable
	23	@keyup.enter="handleQuery"
	24	class="!w-240px"
	25	/>
	26	</el-form-item>
	27	<el-form-item>
	28	<el-button @click="handleQuery">
93ce03	29	<Icon icon="ep:search" class="mr-5px"/>
91cd98	30	搜索
潘	31	</el-button>
	32	<el-button @click="resetQuery">
93ce03	33	<Icon icon="ep:refresh" class="mr-5px"/>
91cd98	34	重置
潘	35	</el-button>
	36	<el-button
	37	type="primary"
	38	plain
	39	@click="openForm('create')"
6c2636	40	v-hasPermi="['data:channel-http:create']"
91cd98	41	>
93ce03	42	<Icon icon="ep:plus" class="mr-5px"/>
91cd98	43	新增
6c2636	44	</el-button>
J	45	<el-button
	46	type="warning"
	47	plain
	48	@click="handleImport"
	49	v-hasPermi="['data:channel-http-tag:import']">
93ce03	50	<Icon icon="ep:upload"/>
D	51	导入
6c2636	52	</el-button>
J	53	<el-button
	54	type="success"
	55	plain
	56	@click="handleExport"
	57	:loading="exportLoading"
	58	v-hasPermi="['data:channel-http-tag:export']">
93ce03	59	<Icon icon="ep:download"/>
D	60	导出
91cd98	61	</el-button>
93ce03	62	</el-form-item>
D	63	<el-form-item label="更新当前值" label-width="100px">
	64	<el-switch
	65	v-model="queryParams.currentValue"
	66	active-color="#13ce66"
	67	inactive-color="#ff4949"/>
91cd98	68	</el-form-item>
潘	69	</el-form>
	70	</ContentWrap>
	71	<!-- 列表 -->
	72	<ContentWrap>
	73	<el-table v-loading="loading" :data="list">
	74	<el-table-column
	75	prop="tagName"
	76	label="Tag名称"
	77	header-align="center"
	78	align="left"
	79	min-width="150"
	80	/>
	81	<el-table-column
	82	prop="tagDesc"
	83	label="Tag描述"
	84	header-align="center"
	85	align="left"
	86	min-width="150"
	87	/>
	88	<el-table-column
	89	prop="dataType"
	90	label="数据类型"
	91	header-align="center"
	92	align="center"
	93	/>
	94	<el-table-column
	95	prop="enabled"
	96	label="是否启用"
	97	header-align="center"
	98	align="center"
	99	>
	100	<template #default="scope">
6c2636	101	<el-tag v-if="scope.row.enabled === 1" size="small">是</el-tag>
91cd98	102	<el-tag v-else size="small" type="danger">否</el-tag>
潘	103	</template>
	104	</el-table-column>
93ce03	105	<el-table-column
D	106	prop="dataValue"
	107	label="数据值"
	108	header-align="center"
	109	align="center"
ebf2c1	110	min-width="100"
93ce03	111	:formatter="(row) => {if (row.dataValue === -2.0) {return '--';}return row.dataValue;}"
D	112	/>
	113	<el-table-column
ebf2c1	114	prop="dataTime"
潘	115	label="数据时间"
	116	header-align="center"
	117	align="center"
	118	min-width="150"
	119	/>
	120	<el-table-column
	121	prop="dataQuality"
93ce03	122	label="数据质量"
D	123	header-align="center"
	124	align="center"
ebf2c1	125	/>
91cd98	126	<el-table-column label="操作" align="center" min-width="110" fixed="right">
潘	127	<template #default="scope">
	128	<el-button
	129	link
	130	type="primary"
	131	@click="openForm('update', scope.row.id)"
6c2636	132	v-hasPermi="['data:channel-http:update']"
91cd98	133	>
潘	134	编辑
	135	</el-button>
	136	<el-button
	137	link
	138	type="danger"
	139	@click="handleDelete(scope.row.id)"
6c2636	140	v-hasPermi="['data:channel-http:delete']"
91cd98	141	>
潘	142	删除
	143	</el-button>
	144	</template>
	145	</el-table-column>
	146	</el-table>
	147	<!-- 分页 -->
	148	<Pagination
	149	:total="total"
	150	v-model:page="queryParams.pageNo"
	151	v-model:limit="queryParams.pageSize"
	152	@pagination="getList"
	153	/>
	154	</ContentWrap>
	155	<!-- 表单弹窗：添加/修改 -->
93ce03	156	<TagForm ref="formRef" @success="getList"/>
D	157	<TagImportForm ref="importFormRef" @success="getList"/>
91cd98	158	</el-drawer>
潘	159	</template>
	160	<script lang="ts" setup>
93ce03	161	import type {DrawerProps} from 'element-plus'
D	162	import * as HttpTagApi from "@/api/data/channel/http/tag";
	163	import TagForm from './TagForm.vue'
	164	import download from "@/utils/download";
	165	import {ref} from "vue";
	166	import {onBeforeUnmount, onMounted} from "vue";
	167	import TagImportForm from '../../../common/tag/TagImportForm.vue'
050ddd	168	import * as OpcUaTagApi from "@/api/data/channel/opcua/tag";
91cd98	169
93ce03	170	defineOptions({name: 'HttpTag'})
91cd98	171
93ce03	172	const message = useMessage() // 消息弹窗
D	173	const {t} = useI18n() // 国际化
91cd98	174
93ce03	175	const drawer = ref(false)
D	176	const direction = ref<DrawerProps['direction']>('rtl')
	177	const loading = ref(true) // 列表的加载中
	178	const total = ref(0) // 列表的总页数
	179	const list = ref([]) // 列表的数据
	180	const queryParams = reactive({
	181	pageNo: 1,
	182	pageSize: 10,
	183	apiId: undefined,
	184	tagName: undefined,
	185	httpName: undefined,
	186	currentValue:false,
	187	})
	188	const queryFormRef = ref() // 搜索的表单
	189	const exportLoading = ref(false) // 导出的加载中
91cd98	190
93ce03	191	/** 查询列表 */
D	192	const getList = async () => {
	193	loading.value = true
	194	try {
	195	const page = await HttpTagApi.getHttpTagPage(queryParams)
	196	list.value = page.list
	197	total.value = page.total
	198	} finally {
	199	loading.value = false
	200	}
91cd98	201	}
潘	202
93ce03	203	/** 搜索按钮操作 */
D	204	const handleQuery = () => {
	205	queryParams.pageNo = 1
91cd98	206	getList()
潘	207	}
	208
93ce03	209	/** 重置按钮操作 */
D	210	const resetQuery = () => {
	211	queryFormRef.value.resetFields()
	212	handleQuery()
6c2636	213	}
J	214
93ce03	215	/** 添加/修改操作 */
D	216	const formRef = ref()
	217	const openForm = (type: string, id?: number) => {
	218	formRef.value.open(type, id, queryParams.apiId)
6c2636	219	}
93ce03	220
D	221	/** 删除按钮操作 */
	222	const handleDelete = async (id: number) => {
	223	try {
	224	// 删除的二次确认
	225	await message.delConfirm()
	226	// 发起删除
	227	await HttpTagApi.deleteHttpTag(id)
	228	message.success(t('common.delSuccess'))
	229	// 刷新列表
	230	await getList()
	231	} catch {
	232	}
	233	}
	234
	235	/** 打开弹窗 */
	236	const open = async (apiId?: string, name?: string) => {
	237	resetForm()
	238	drawer.value = true
	239	queryParams.apiId = apiId
	240	queryParams.httpName = name
	241	if (apiId) {
	242	getList()
	243	}
	244	}
	245	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	246
	247	/** 重置表单 */
	248	const resetForm = () => {
	249	queryParams.pageNo = 1
	250	queryParams.pageSize = 10
	251	queryParams.apiId = ''
	252	queryParams.tagName = ''
	253	}
	254
	255	const handleClose = (done: () => void) => {
	256	drawer.value = false
	257	}
	258
	259	/** tag导入 */
	260	const importFormRef = ref()
	261	const handleImport = () => {
	262	if (queryParams.apiId) {
	263	importFormRef.value.open(queryParams.httpName, '/data/channel/http/tag/import', HttpTagApi.importHttpTagTemplate(), 'Http', queryParams.apiId)
	264	}
	265	}
	266
	267	/** 导出按钮操作 */
	268	const handleExport = async () => {
	269	try {
	270	// 导出的二次确认
	271	await message.exportConfirm()
	272	// 发起导出
	273	exportLoading.value = true
	274	const data = await HttpTagApi.exportHttpTag(queryParams)
	275	download.excel(data, 'Http_' + queryParams.httpName + '_Tag列表.xlsx')
	276	} catch {
	277	} finally {
	278	exportLoading.value = false
	279	}
	280	}
050ddd	281
D	282	let intervalId;
	283
	284	onMounted(async () => {
	285	// 创建定时器
	286	intervalId = setInterval(async () => {
	287	if(queryParams.currentValue){
	288	const page = await HttpTagApi.getHttpTagPage(queryParams)
	289	list.value = page.list
	290	total.value = page.total
	291	}
	292	}, 10000);
	293	});
	294
	295	// 在组件卸载时清除定时器
	296	onBeforeUnmount(() => {
	297	if (intervalId) {
	298	clearInterval(intervalId);
	299	}
	300	});
91cd98	301	</script>