iailab-plat-ui-vue3.git

houzhongjian

2024-11-06 f0028ceb4888ba53844714ebcc7c1b0a61eaec98

提交 \| 用户 \| 时间
91cd98	1	<template>
潘	2	<el-drawer
	3	v-model="drawer"
	4	size="50%"
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"
	110	:formatter="(row) => {if (row.dataValue === -2.0) {return '--';}return row.dataValue;}"
	111	/>
	112	<el-table-column
	113	prop="quality"
	114	label="数据质量"
	115	header-align="center"
	116	align="center"
	117	>
	118	<template #default="scope">
	119	<el-tag v-if="scope.row.dataValue === Number(-2.0)" type="danger" size="small">bad
	120	</el-tag>
	121	<el-tag v-else size="small">good</el-tag>
	122	</template>
	123	</el-table-column>
91cd98	124	<el-table-column label="操作" align="center" min-width="110" fixed="right">
潘	125	<template #default="scope">
	126	<el-button
	127	link
	128	type="primary"
	129	@click="openForm('update', scope.row.id)"
6c2636	130	v-hasPermi="['data:channel-http:update']"
91cd98	131	>
潘	132	编辑
	133	</el-button>
	134	<el-button
	135	link
	136	type="danger"
	137	@click="handleDelete(scope.row.id)"
6c2636	138	v-hasPermi="['data:channel-http:delete']"
91cd98	139	>
潘	140	删除
	141	</el-button>
	142	</template>
	143	</el-table-column>
	144	</el-table>
	145	<!-- 分页 -->
	146	<Pagination
	147	:total="total"
	148	v-model:page="queryParams.pageNo"
	149	v-model:limit="queryParams.pageSize"
	150	@pagination="getList"
	151	/>
	152	</ContentWrap>
	153	<!-- 表单弹窗：添加/修改 -->
93ce03	154	<TagForm ref="formRef" @success="getList"/>
D	155	<TagImportForm ref="importFormRef" @success="getList"/>
91cd98	156	</el-drawer>
潘	157	</template>
	158	<script lang="ts" setup>
93ce03	159	import type {DrawerProps} from 'element-plus'
D	160	import * as HttpTagApi from "@/api/data/channel/http/tag";
	161	import TagForm from './TagForm.vue'
	162	import download from "@/utils/download";
	163	import {ref} from "vue";
	164	import {onBeforeUnmount, onMounted} from "vue";
	165	import TagImportForm from '../../../common/tag/TagImportForm.vue'
91cd98	166
93ce03	167	defineOptions({name: 'HttpTag'})
91cd98	168
93ce03	169	const message = useMessage() // 消息弹窗
D	170	const {t} = useI18n() // 国际化
91cd98	171
93ce03	172	const drawer = ref(false)
D	173	const direction = ref<DrawerProps['direction']>('rtl')
	174	const loading = ref(true) // 列表的加载中
	175	const total = ref(0) // 列表的总页数
	176	const list = ref([]) // 列表的数据
	177	const queryParams = reactive({
	178	pageNo: 1,
	179	pageSize: 10,
	180	apiId: undefined,
	181	tagName: undefined,
	182	httpName: undefined,
	183	currentValue:false,
	184	})
	185	const queryFormRef = ref() // 搜索的表单
	186	const exportLoading = ref(false) // 导出的加载中
91cd98	187
93ce03	188	/** 查询列表 */
D	189	const getList = async () => {
	190	loading.value = true
	191	try {
	192	const page = await HttpTagApi.getHttpTagPage(queryParams)
	193	list.value = page.list
	194	total.value = page.total
	195	} finally {
	196	loading.value = false
	197	}
91cd98	198	}
潘	199
93ce03	200	/** 搜索按钮操作 */
D	201	const handleQuery = () => {
	202	queryParams.pageNo = 1
91cd98	203	getList()
潘	204	}
	205
93ce03	206	/** 重置按钮操作 */
D	207	const resetQuery = () => {
	208	queryFormRef.value.resetFields()
	209	handleQuery()
6c2636	210	}
J	211
93ce03	212	/** 添加/修改操作 */
D	213	const formRef = ref()
	214	const openForm = (type: string, id?: number) => {
	215	formRef.value.open(type, id, queryParams.apiId)
6c2636	216	}
93ce03	217
D	218	/** 删除按钮操作 */
	219	const handleDelete = async (id: number) => {
	220	try {
	221	// 删除的二次确认
	222	await message.delConfirm()
	223	// 发起删除
	224	await HttpTagApi.deleteHttpTag(id)
	225	message.success(t('common.delSuccess'))
	226	// 刷新列表
	227	await getList()
	228	} catch {
	229	}
	230	}
	231
	232	/** 打开弹窗 */
	233	const open = async (apiId?: string, name?: string) => {
	234	resetForm()
	235	drawer.value = true
	236	queryParams.apiId = apiId
	237	queryParams.httpName = name
	238	if (apiId) {
	239	getList()
	240	}
	241	}
	242	defineExpose({open}) // 提供 open 方法，用于打开弹窗
	243
	244	/** 重置表单 */
	245	const resetForm = () => {
	246	queryParams.pageNo = 1
	247	queryParams.pageSize = 10
	248	queryParams.apiId = ''
	249	queryParams.tagName = ''
	250	}
	251
	252	const handleClose = (done: () => void) => {
	253	drawer.value = false
	254	}
	255
	256	/** tag导入 */
	257	const importFormRef = ref()
	258	const handleImport = () => {
	259	if (queryParams.apiId) {
	260	importFormRef.value.open(queryParams.httpName, '/data/channel/http/tag/import', HttpTagApi.importHttpTagTemplate(), 'Http', queryParams.apiId)
	261	}
	262	}
	263
	264	/** 导出按钮操作 */
	265	const handleExport = async () => {
	266	try {
	267	// 导出的二次确认
	268	await message.exportConfirm()
	269	// 发起导出
	270	exportLoading.value = true
	271	const data = await HttpTagApi.exportHttpTag(queryParams)
	272	download.excel(data, 'Http_' + queryParams.httpName + '_Tag列表.xlsx')
	273	} catch {
	274	} finally {
	275	exportLoading.value = false
	276	}
	277	}
91cd98	278	</script>