iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
325d3d	1	<template>
L	2	<!-- 搜索 -->
	3	<ContentWrap>
	4	<el-form
	5	class="-mb-15px"
	6	:model="queryParams"
	7	ref="queryFormRef"
	8	:inline="true"
	9	label-width="68px"
	10	>
	11	<el-form-item label="服务名" prop="serverName">
	12	<el-input
	13	v-model="queryParams.serverName"
	14	placeholder="请输入服务名"
	15	clearable
	16	@keyup.enter="handleQuery"
	17	class="!w-240px"
	18	/>
	19	</el-form-item>
	20	<el-form-item>
	21	<el-button @click="handleQuery">
24d32b	22	<Icon icon="ep:search" class="mr-5px"/>
325d3d	23	搜索
L	24	</el-button>
	25	<el-button @click="resetQuery">
24d32b	26	<Icon icon="ep:refresh" class="mr-5px"/>
325d3d	27	重置
L	28	</el-button>
	29	<el-button
	30	type="primary"
	31	plain
	32	@click="openForm('create')"
24d32b	33	v-hasPermi="['data:channel-opcua:create']"
325d3d	34	>
24d32b	35	<Icon icon="ep:plus" class="mr-5px"/>
325d3d	36	新增
L	37	</el-button>
	38	</el-form-item>
	39	</el-form>
	40	</ContentWrap>
	41
	42	<!-- 列表 -->
	43	<ContentWrap>
	44	<el-table v-loading="loading" :data="list">
dea4e4	45	<el-table-column label="服务名" header-align="center" align="left" prop="serverName" min-width="180"/>
潘	46	<el-table-column label="端点URL" header-align="center" align="left" prop="endpointUrl" min-width="260"/>
24d32b	47	<el-table-column label="安全策略" align="center" prop="securityPolicy"/>
潘	48	<el-table-column label="安全模式" align="center" prop="securityMode"/>
dea4e4	49	<el-table-column label="连接方式" align="center" prop="connectionType">
潘	50	<template #default="scope">
	51	<dict-tag :type="DICT_TYPE.OPCUA_CONNECTION_TYPE" :value="scope.row.connectionType" />
	52	</template>
	53	</el-table-column>
24d32b	54	<el-table-column label="用户名" align="center" prop="userName"/>
潘	55	<el-table-column label="密码" align="center" prop="password"/>
dea4e4	56	<el-table-column label="安全证书路径" header-align="center" align="left" prop="certificatePath" min-width="200"/>
24d32b	57	<el-table-column label="设备不活动超时时间" align="center" prop="connectInactivityTimeout"/>
潘	58	<el-table-column label="重连超时" align="center" prop="reconnectInterval"/>
325d3d	59	<el-table-column label="操作" align="center" min-width="110" fixed="right">
L	60	<template #default="scope">
	61	<el-button
	62	link
	63	type="primary"
	64	@click="openForm('update', scope.row.id)"
24d32b	65	v-hasPermi="['data:channel-opcua:update']"
325d3d	66	>
L	67	编辑
	68	</el-button>
	69	<el-button
	70	link
24d32b	71	type="primary"
潘	72	@click="openTagList(scope.row.serverName)"
	73	v-hasPermi="['data:channel-modbus:update']"
	74	>
	75	TAG
	76	</el-button>
	77	<el-button
	78	link
325d3d	79	type="danger"
L	80	@click="handleDelete(scope.row.id)"
24d32b	81	v-hasPermi="['data:channel-opcua:delete']"
325d3d	82	>
L	83	删除
	84	</el-button>
	85	</template>
	86	</el-table-column>
	87	</el-table>
	88	<!-- 分页 -->
	89	<Pagination
	90	:total="total"
	91	v-model:page="queryParams.pageNo"
	92	v-model:limit="queryParams.pageSize"
	93	@pagination="getList"
	94	/>
	95	</ContentWrap>
	96
	97	<!-- 表单弹窗：添加/修改 -->
24d32b	98	<OpcUaDeviceForm ref="formRef" @success="getList"/>
潘	99
	100	<!-- TAG弹窗：添加/修改 -->
	101	<TagList ref="tagRef" @success="getList"/>
325d3d	102
L	103	</template>
	104	<script lang="ts" setup>
24d32b	105	import * as OpcUaApi from '@/api/data/channel/opcua'
潘	106	import OpcUaDeviceForm from './OpcUaDeviceForm.vue'
	107	import TagList from './tag/index.vue'
dea4e4	108	import { DICT_TYPE } from '@/utils/dict'
325d3d	109
24d32b	110	defineOptions({name: 'DataOpcUa'})
325d3d	111
L	112	const message = useMessage() // 消息弹窗
	113	const {t} = useI18n() // 国际化
	114
	115	const loading = ref(true) // 列表的加载中
	116	const total = ref(0) // 列表的总页数
	117	const list = ref([]) // 列表的数据
	118	const queryParams = reactive({
	119	pageNo: 1,
	120	pageSize: 10,
	121	serverName: undefined
	122	})
	123	const queryFormRef = ref() // 搜索的表单
	124	const exportLoading = ref(false) // 导出的加载中
	125
	126	/** 查询列表 */
	127	const getList = async () => {
	128	loading.value = true
	129	try {
	130	const page = await OpcUaApi.getOpcUaDevicePage(queryParams)
	131	list.value = page.list
	132	total.value = page.total
	133	} finally {
	134	loading.value = false
	135	}
	136	}
	137
	138	/** 搜索按钮操作 */
	139	const handleQuery = () => {
	140	queryParams.pageNo = 1
	141	getList()
	142	}
	143
	144	/** 重置按钮操作 */
	145	const resetQuery = () => {
	146	queryFormRef.value.resetFields()
	147	handleQuery()
	148	}
	149
	150	/** 添加/修改操作 */
	151	const formRef = ref()
	152	const openForm = (type: string, id?: number) => {
	153	formRef.value.open(type, id)
	154	}
	155
24d32b	156	/** TAG操作 */
潘	157	const tagRef = ref()
	158	const openTagList = (serverName?: string) => {
	159	tagRef.value.open(serverName)
	160	}
	161
325d3d	162	/** 删除按钮操作 */
L	163	const handleDelete = async (id: number) => {
	164	try {
	165	// 删除的二次确认
	166	await message.delConfirm()
	167	// 发起删除
	168	await OpcUaApi.deleteOpcUaDevice(id)
	169	message.success(t('common.delSuccess'))
	170	// 刷新列表
	171	await getList()
	172	} catch {
	173	}
	174	}
	175
	176	/ 初始化 /
	177	onMounted(async () => {
	178	await getList()
	179	})
	180	</script>