iailab-plat-ui-vue3.git

潘志宝

2024-11-22 df90c0c5cfa4de114798015b92120ad8ba8b4826

提交 \| 用户 \| 时间
30566d	1	<template>
H	2	<Dialog v-model="dialogVisible" :title="dialogTitle" width="50%">
	3	<el-form
	4	ref="formRef"
	5	v-loading="formLoading"
	6	:model="formData"
	7	:rules="formRules"
	8	label-width="80px"
	9	>
	10	<el-row>
	11	<el-col :span="12">
f0028c	12	<el-form-item label="品牌">
H	13	<el-select v-model="formData.brand" prop="brand" placeholder="请选择">
	14	<el-option
	15	v-for="dict in getIntDictOptions(DICT_TYPE.CAMERA_BRAND)"
	16	:key="dict.value"
	17	:label="dict.label"
	18	:value="dict.value"
	19	/>
	20	</el-select>
	21	</el-form-item>
	22	</el-col>
	23	<el-col :span="12">
30566d	24	<el-form-item label="编码" prop="code">
H	25	<el-input v-model="formData.code" placeholder="请输入编码" />
	26	</el-form-item>
	27	</el-col>
f0028c	28	</el-row>
H	29	<el-row>
	30	<el-col :span="12">
	31	<el-form-item label="设备类型" prop="device">
	32	<el-input v-model="formData.device" placeholder="请输入设备类型" />
	33	</el-form-item>
	34	</el-col>
c3e84e	35	<el-col :span="12">
H	36	<el-form-item label="抓图方式">
f0028c	37	<el-select v-model="formData.captureType" prop="captureType" placeholder="请选择">
c3e84e	38	<el-option
H	39	v-for="dict in getStrDictOptions(DICT_TYPE.CAPTURE_TYPE)"
	40	:key="dict.value"
	41	:label="dict.label"
	42	:value="dict.value"
	43	/>
	44	</el-select>
	45	</el-form-item>
	46	</el-col>
30566d	47	</el-row>
H	48	<el-row>
	49	<el-col :span="12">
f0028c	50	<el-form-item label="IP" prop="ip">
H	51	<el-input v-model="formData.ip" placeholder="请输入IP" />
	52	</el-form-item>
	53	</el-col>
	54	<el-col :span="12">
	55	<el-form-item label="端口" prop="port">
	56	<el-input v-model="formData.port" placeholder="请输入端口" />
	57	</el-form-item>
	58	</el-col>
	59	</el-row>
	60	<el-row>
	61	<el-col :span="12">
	62	<el-form-item label="用户名" prop="username">
	63	<el-input v-model="formData.username" placeholder="请输入用户名" />
	64	</el-form-item>
	65	</el-col>
	66	<el-col :span="12">
	67	<el-form-item label="密码" prop="password">
	68	<el-input show-password v-model="formData.password" placeholder="请输入密码" />
	69	</el-form-item>
	70	</el-col>
	71	</el-row>
	72	<el-row>
	73	<el-col :span="12">
30566d	74	<el-form-item label="通道" prop="channel">
H	75	<el-input v-model="formData.channel" placeholder="请输入通道" />
	76	</el-form-item>
	77	</el-col>
	78	<el-col :span="12">
f0028c	79	<el-form-item label="具体位置" prop="location">
H	80	<el-input v-model="formData.location" placeholder="请输入具体位置" />
30566d	81	</el-form-item>
H	82	</el-col>
	83	</el-row>
	84	<el-row>
	85	<el-col :span="24">
	86	<el-form-item label="备注" prop="remark">
	87	<el-input v-model="formData.remark" clearable type="textarea" />
	88	</el-form-item>
	89	</el-col>
	90	</el-row>
	91	</el-form>
	92	<template #footer>
	93	<el-button :disabled="formLoading" type="primary" @click="submitForm">确定</el-button>
	94	<el-button @click="dialogVisible = false">取消</el-button>
	95	</template>
	96	</Dialog>
	97	</template>
	98	<script lang="ts" setup>
f0028c	99	import * as CameraApi from '@/api/data/video/camera'
c3e84e	100	import {DICT_TYPE, getIntDictOptions, getStrDictOptions} from "@/utils/dict";
30566d	101
H	102	defineOptions({ name: 'CameraForm' })
	103
	104	const { t } = useI18n() // 国际化
	105	const message = useMessage() // 消息弹窗
	106	const dialogVisible = ref(false) // 弹窗的是否展示
	107	const dialogTitle = ref('') // 弹窗的标题
	108	const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
	109	const nvrId = ref('') // 录像机id
	110	const formType = ref('') // 表单的类型：create - 新增；update - 修改
	111	const formData = ref({
	112	id: undefined,
f0028c	113	brand: undefined,
H	114	type: 1,
30566d	115	code: undefined,
c3e84e	116	captureType: '',
f0028c	117	ip: undefined,
H	118	port: undefined,
	119	username: undefined,
	120	password: undefined,
	121	device: undefined,
30566d	122	channel: undefined,
H	123	location: undefined,
	124	remark: undefined
	125	})
	126	const formRules = reactive({
f0028c	127	brand: [{ required: true, message: '品牌不能为空', trigger: 'blur' }],
H	128	code: [{ required: true, message: '设备类型不能为空', trigger: 'blur' }],
c3e84e	129	captureType: [{ required: true, message: '抓图方式不能为空', trigger: 'blur' }],
f0028c	130	name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
H	131	ip: [{ required: true, message: 'IP不能为空', trigger: 'blur' }],
	132	port: [{ required: true, message: '端口不能为空', trigger: 'blur' }],
30566d	133	location: [{ required: true, message: '监控区域不能为空', trigger: 'blur' }]
H	134	})
	135	const formRef = ref() // 表单 Ref
	136
	137	/** 打开弹窗 */
	138	const open = async (type: string, id?: number, nvr_id?: string) => {
	139	dialogVisible.value = true
	140	if (nvr_id != null) {
	141	nvrId.value = nvr_id
	142	}
	143	dialogTitle.value = t('action.' + type)
	144	formType.value = type
	145	resetForm()
	146	// 修改时，设置数据
	147	if (id) {
	148	formLoading.value = true
	149	try {
	150	formData.value = await CameraApi.getCamera(id)
	151	} finally {
	152	formLoading.value = false
	153	}
	154	}
	155	}
	156	defineExpose({ open }) // 提供 open 方法，用于打开弹窗
	157
	158	/** 提交表单 */
	159	const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
	160	const submitForm = async () => {
	161	// 校验表单
	162	if (!formRef) return
	163	const valid = await formRef.value.validate()
	164	if (!valid) return
	165	// 提交请求
	166	formLoading.value = true
	167	try {
	168	const data = formData.value as unknown as CameraApi.CameraVO
	169	if (formType.value === 'create') {
	170	data.nvrId = nvrId.value
f0028c	171	data.type = 1
30566d	172	await CameraApi.createCamera(data)
H	173	message.success(t('common.createSuccess'))
	174	} else {
	175	await CameraApi.updateCamera(data)
	176	message.success(t('common.updateSuccess'))
	177	}
	178	dialogVisible.value = false
	179	// 发送操作成功的事件
	180	emit('success')
	181	} finally {
	182	formLoading.value = false
	183	}
	184	}
	185
	186	/** 重置表单 */
	187	const resetForm = () => {
	188	formData.value = {
	189	id: undefined,
c3e84e	190	nvrId: '',
30566d	191	code: undefined,
c3e84e	192	captureType: '',
H	193	channel: undefined,
	194	location: undefined,
30566d	195	remark: undefined
H	196	}
	197	formRef.value?.resetFields()
	198	}
	199	</script>