iailab-plat-ui-vue3.git

houzhongjian

2024-11-06 1ae890a97b92470ad7c163615873091622c1c8ae

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