iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
30566d	1	<template>
H	2	<!-- 搜索 -->
	3	<ContentWrap>
	4	<el-form
	5	class="-mb-15px"
	6	:model="queryParams"
	7	ref="queryFormRef"
	8	:inline="true"
1ae890	9	label-width="40px"
30566d	10	>
H	11	<el-form-item label="品牌" prop="status">
	12	<el-select
	13	v-model="queryParams.brand"
	14	placeholder="品牌"
	15	clearable
1ae890	16	class="!w-140px"
30566d	17	>
H	18	<el-option
	19	v-for="dict in getIntDictOptions(DICT_TYPE.CAMERA_BRAND)"
	20	:key="dict.value"
	21	:label="dict.label"
	22	:value="dict.value"
	23	/>
	24	</el-select>
	25	</el-form-item>
1ae890	26	<el-form-item label="编码" prop="code">
30566d	27	<el-input
H	28	v-model="queryParams.code"
1ae890	29	placeholder="请输入编码"
30566d	30	clearable
H	31	@keyup.enter="handleQuery"
1ae890	32	class="!w-140px"
30566d	33	/>
H	34	</el-form-item>
1ae890	35	<el-form-item label="IP" prop="ip">
30566d	36	<el-input
H	37	v-model="queryParams.ip"
	38	placeholder="请输入IP"
	39	clearable
	40	@keyup.enter="handleQuery"
1ae890	41	class="!w-140px"
30566d	42	/>
H	43	</el-form-item>
	44	<el-form-item label="名称" prop="name">
	45	<el-input
	46	v-model="queryParams.name"
	47	placeholder="请输入名称"
	48	clearable
	49	@keyup.enter="handleQuery"
1ae890	50	class="!w-140px"
30566d	51	/>
H	52	</el-form-item>
	53	<el-form-item>
	54	<el-button @click="handleQuery">
aed8e1	55	<Icon icon="ep:search" class="mr-5px"/>
30566d	56	搜索
H	57	</el-button>
	58	<el-button @click="resetQuery">
aed8e1	59	<Icon icon="ep:refresh" class="mr-5px"/>
30566d	60	重置
H	61	</el-button>
	62	<el-button
	63	type="primary"
	64	plain
	65	@click="openForm('create')"
1ae890	66	v-hasPermi="['video:nvr:save']"
30566d	67	>
aed8e1	68	<Icon icon="ep:plus" class="mr-5px"/>
30566d	69	新增
H	70	</el-button>
	71	<el-button
	72	type="success"
	73	plain
	74	@click="handleExport"
	75	:loading="exportLoading"
1ae890	76	v-hasPermi="['video:nvr:export']"
30566d	77	>
aed8e1	78	<Icon icon="ep:download" class="mr-5px"/>
30566d	79	导出
H	80	</el-button>
	81	</el-form-item>
	82	</el-form>
	83	</ContentWrap>
	84
	85	<!-- 列表 -->
	86	<ContentWrap>
	87	<el-table v-loading="loading" :data="list">
	88	<el-table-column label="品牌" align="center" prop="brand" width="80">
	89	<template #default="scope">
aed8e1	90	<dict-tag :type="DICT_TYPE.CAMERA_BRAND" :value="scope.row.brand"/>
30566d	91	</template>
H	92	</el-table-column>
	93	<el-table-column label="编码" align="center" prop="code" width="100"/>
	94	<el-table-column label="名称" align="center" prop="name"/>
aed8e1	95	<el-table-column label="IP" align="center" prop="ip"/>
30566d	96	<el-table-column label="端口" align="center" prop="port" width="100"/>
H	97	<el-table-column label="用户名" align="center" prop="username" width="100"/>
	98	<el-table-column label="状态" prop="status" width="80">
	99	<template #default="scope">
aed8e1	100	<dict-tag :type="DICT_TYPE.NVR_ONLINE_STATUS" :value="scope.row.status"/>
30566d	101	</template>
H	102	</el-table-column>
	103	<el-table-column label="备注" align="center" prop="remark" width="150"/>
	104	<el-table-column label="操作" align="center" min-width="110" fixed="right">
	105	<template #default="scope">
	106	<el-button
	107	link
	108	type="primary"
	109	@click="openForm('update', scope.row.id)"
1ae890	110	v-hasPermi="['video:nvr:update']"
30566d	111	>
H	112	编辑
	113	</el-button>
	114	<el-button
	115	link
	116	type="danger"
	117	@click="handleDelete(scope.row.id)"
1ae890	118	v-hasPermi="['video:nvr:delete']"
30566d	119	>
H	120	删除
	121	</el-button>
aed8e1	122	<el-button link type="success" size="small" @click="cameraHandle(scope.row.id)">摄像头
H	123	</el-button>
30566d	124	</template>
H	125	</el-table-column>
	126	</el-table>
	127	<!-- 分页 -->
	128	<Pagination
	129	:total="total"
	130	v-model:page="queryParams.pageNo"
	131	v-model:limit="queryParams.pageSize"
	132	@pagination="getList"
	133	/>
	134	</ContentWrap>
	135
	136	<!-- 表单弹窗：添加/修改 -->
aed8e1	137	<NvrForm ref="formRef" @success="getList"/>
30566d	138
H	139	<!-- 弹窗, 摄像头 -->
1ae890	140	<NvrCamera ref="videoCameraRef"/>
30566d	141
H	142	</template>
	143	<script lang="ts" setup>
	144	import {DICT_TYPE, getIntDictOptions} from '@/utils/dict'
aed8e1	145	import download from '@/utils/download'
H	146	import * as NvrApi from '@/api/data/video/nvr'
	147	import NvrForm from './NvrForm.vue'
	148	import NvrCamera from './NvrCamera.vue'
30566d	149
aed8e1	150	defineOptions({name: 'Nvr'})
30566d	151
aed8e1	152	const message = useMessage() // 消息弹窗
H	153	const {t} = useI18n() // 国际化
30566d	154
aed8e1	155	const loading = ref(true) // 列表的加载中
H	156	const total = ref(0) // 列表的总页数
	157	const list = ref([]) // 列表的数据
	158	const queryParams = reactive({
	159	pageNo: 1,
	160	pageSize: 10,
	161	brand: undefined,
	162	ip: undefined,
	163	code: undefined,
	164	name: undefined,
	165	status: undefined
	166	})
	167	const queryFormRef = ref() // 搜索的表单
	168	const exportLoading = ref(false) // 导出的加载中
30566d	169
aed8e1	170	const videoCameraRef = ref()
30566d	171
aed8e1	172	/** 查询列表 */
H	173	const getList = async () => {
	174	loading.value = true
	175	try {
	176	const data = await NvrApi.getNvrPage(queryParams)
	177	list.value = data.list
	178	total.value = data.total
	179	} finally {
	180	loading.value = false
30566d	181	}
aed8e1	182	}
30566d	183
aed8e1	184	const cameraHandle = (id: string) => {
H	185	// devCameraVisible.value = true
	186	videoCameraRef.value.open(id)
	187	}
30566d	188
aed8e1	189	/** 搜索按钮操作 */
H	190	const handleQuery = () => {
	191	queryParams.pageNo = 1
	192	getList()
	193	}
30566d	194
aed8e1	195	/** 重置按钮操作 */
H	196	const resetQuery = () => {
	197	queryFormRef.value.resetFields()
	198	queryParams.brand = undefined
	199	handleQuery()
	200	}
30566d	201
aed8e1	202	/** 添加/修改操作 */
H	203	const formRef = ref()
	204	const openForm = (type: string, id?: number) => {
	205	formRef.value.open(type, id)
	206	}
30566d	207
aed8e1	208	/** 删除按钮操作 */
H	209	const handleDelete = async (id: number) => {
	210	try {
	211	// 删除的二次确认
	212	await message.delConfirm()
	213	// 发起删除
	214	await NvrApi.deleteNvr(id)
	215	message.success(t('common.delSuccess'))
	216	// 刷新列表
30566d	217	await getList()
aed8e1	218	} catch {
H	219	}
	220	}
	221
	222	/** 导出按钮操作 */
	223	const handleExport = async () => {
	224	try {
	225	// 导出的二次确认
	226	await message.exportConfirm()
	227	// 发起导出
	228	exportLoading.value = true
	229	const data = await NvrApi.exportNvr(queryParams)
	230	download.excel(data, '录像机列表.xls')
	231	} catch {
	232	} finally {
	233	exportLoading.value = false
	234	}
	235	}
	236
	237	/ 初始化 /
	238	onMounted(async () => {
	239	await getList()
	240	})
30566d	241	</script>