监控对象新增编辑，对象类别管理新增编辑，对象型号管理新增编辑

snowy-admin-web/src/views/basicset/devicetype/category.vue

@@ -5,27 +5,66 @@
 				<!-- 其他操作区域 -->
 				<div class="table-head-btn">
 					<div class="btn-left">
-						<a-button type="primary">
-							<template #icon><plus-outlined /></template>新增</a-button
-						>
+						<a-button type="primary" @click="onOpen()">
+							<template #icon><plus-outlined /></template>新增
+						</a-button>
 					</div>
 				</div>
 			</template>
-			<template #bodyCell="{ column }">
+			<template #bodyCell="{ column, record }">
 				<template v-if="column.dataIndex === 'action'">
-					<a-button type="link" size="small">编辑</a-button>
+					<a-button type="link" size="small" @click="onOpen(record)">编辑</a-button>
 					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
 						<a-button type="link" danger size="small">删除</a-button>
 					</a-popconfirm>
 				</template>
 			</template>
 		</s-table>
+
+		<!-- 弹框 -->
+		<xn-form-container
+			:title="formData.code ? '编辑' : '新增'"
+			:width="'500px'"
+			:visible="visible"
+			:destroy-on-close="true"
+			@close="onClose"
+		>
+			<a-form
+				ref="formRef"
+				:model="formData"
+				:rules="formRules"
+				layout="inline"
+				:label-col="{ style: { width: '80px', justifyContent: 'end' } }"
+			>
+				<a-form-item label="类别编码" name="code">
+					<a-input v-model:value="formData.code" placeholder="请输入类别编码" allow-clear style="width: 100%" />
+				</a-form-item>
+				<a-form-item label="类别名称" name="name">
+					<a-input v-model:value="formData.name" placeholder="请输入类别名称" allow-clear />
+				</a-form-item>
+				<a-form-item label="备注">
+					<a-textarea
+						v-model:value="formData.remarks"
+						placeholder="请输入备注"
+						allow-clear
+						:maxlength="200"
+						:rows="4"
+					/>
+				</a-form-item>
+			</a-form>
+
+			<template #footer>
+				<a-button class="xn-mr8" @click="onClose">退出</a-button>
+				<a-button type="primary" @click="onSubmit">保存</a-button>
+			</template>
+		</xn-form-container>
 	</div>
 </template>
 
 <script setup>
 	import tool from '@/utils/tool'
 	import jobApi from '@/api/dev/jobApi'
+	import { required } from '@/utils/formRules'
 	const searchFormState = ref({})
 	const tableRef = ref()
 	const columns = [
@@ -125,16 +164,46 @@
 		})
 	}
 
-	// 重置
-	const reset = () => {
-		searchFormRef.value.resetFields()
-		tableRef.value.refresh(true)
-	}
-
 	// 删除
 	const deleteData = (record) => {
 		console.log(record, '删除')
 	}
+
+	const visible = ref(false)
+	const formRef = ref()
+	// 表单数据
+	const formData = ref({})
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入类别名称')],
+		code: [required('请输入类别编码')]
+	}
+	// 新增编辑打开弹框
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			formData.value = Object.assign({}, record)
+		} else {
+			formData.value = {}
+		}
+	}
+	// 关闭弹框
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				console.log(formData.value.list, '提交数据')
+				// 	onClose()
+			})
+			.catch((error) => {
+				console.log(error)
+			})
+	}
 </script>
 
 <style lang="less" scoped>
@@ -145,4 +214,8 @@
 			justify-content: center !important;
 		}
 	}
+	:deep(.ant-form-item) {
+		width: 100%;
+		margin-bottom: 10px;
+	}
 </style>

snowy-admin-web/src/views/basicset/devicetype/model.vue

@@ -30,27 +30,76 @@
 				<!-- 其他操作区域 -->
 				<div class="table-head-btn">
 					<div class="btn-left">
-						<a-button type="primary">
-							<template #icon><plus-outlined /></template>新增</a-button
-						>
+						<a-button type="primary" @click="onOpen()">
+							<template #icon><plus-outlined /></template>新增
+						</a-button>
 					</div>
 				</div>
 			</template>
-			<template #bodyCell="{ column }">
+			<template #bodyCell="{ column, record }">
 				<template v-if="column.dataIndex === 'action'">
-					<a-button type="link" size="small">编辑</a-button>
+					<a-button type="link" size="small" @click="onOpen(record)">编辑</a-button>
 					<a-popconfirm title="确定要删除吗？" @confirm="deleteData(record)">
 						<a-button type="link" danger size="small">删除</a-button>
 					</a-popconfirm>
 				</template>
 			</template>
 		</s-table>
+
+		<!-- 弹框 -->
+		<xn-form-container
+			:title="formData.code ? '编辑' : '新增'"
+			:width="'600px'"
+			:visible="visible"
+			:destroy-on-close="true"
+			@close="onClose"
+		>
+			<a-form
+				ref="formRef"
+				:model="formData"
+				:rules="formRules"
+				layout="inline"
+				:label-col="{ style: { width: '80px', justifyContent: 'end' } }"
+			>
+				<a-form-item label="名称" name="name">
+					<a-input v-model:value="formData.name" placeholder="请输入名称" allow-clear />
+				</a-form-item>
+				<a-form-item label="对象类别">
+					<a-select ref="select" v-model:value="formData.type" placeholder="请选择对象类别">
+						<a-select-option value="1">冰箱</a-select-option>
+						<a-select-option value="2">新装</a-select-option>
+						<a-select-option value="3">液氮罐</a-select-option>
+					</a-select>
+				</a-form-item>
+				<a-form-item label="品牌">
+					<a-input v-model:value="formData.pp" placeholder="请输入品牌" allow-clear />
+				</a-form-item>
+				<a-form-item label="型号图片" name="image">
+					<xn-upload v-model:value="formData.image" uploadMode="image" />
+				</a-form-item>
+				<a-form-item label="备注">
+					<a-textarea
+						v-model:value="formData.remarks"
+						placeholder="请输入备注"
+						allow-clear
+						:maxlength="200"
+						:rows="4"
+					/>
+				</a-form-item>
+			</a-form>
+
+			<template #footer>
+				<a-button class="xn-mr8" @click="onClose">退出</a-button>
+				<a-button type="primary" @click="onSubmit">保存</a-button>
+			</template>
+		</xn-form-container>
 	</div>
 </template>
 
 <script setup>
 	import tool from '@/utils/tool'
 	import jobApi from '@/api/dev/jobApi'
+	import { required } from '@/utils/formRules'
 	const searchFormState = ref({})
 	const tableRef = ref()
 	const columns = [
@@ -166,6 +215,41 @@
 	const deleteData = (record) => {
 		console.log(record, '删除')
 	}
+	const visible = ref(false)
+	const formRef = ref()
+	// 表单数据
+	const formData = ref({})
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入类别名称')],
+		code: [required('请输入类别编码')]
+	}
+	// 新增编辑打开弹框
+	const onOpen = (record) => {
+		visible.value = true
+		if (record) {
+			formData.value = Object.assign({}, record)
+		} else {
+			formData.value = { type: '1' }
+		}
+	}
+	// 关闭弹框
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				console.log(formData.value.list, '提交数据')
+				// 	onClose()
+			})
+			.catch((error) => {
+				console.log(error)
+			})
+	}
 </script>
 
 <style lang="less" scoped>
@@ -175,4 +259,8 @@
 	:deep(.ant-table-pagination-right) {
 		justify-content: center !important;
 	}
+	:deep(.ant-form-item) {
+		width: 100%;
+		margin-bottom: 10px;
+	}
 </style>

snowy-admin-web/src/views/basicset/mem/form.vue

@@ -16,29 +16,29 @@
 			<a-tabs v-model:activeKey="activeKey" type="editable-card" @edit="onEdit">
 				<a-tab-pane tab="对象信息" key="object" :closable="false">
 					<a-row :gutter="10">
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 							<a-form-item label="采集器名称" name="name">
 								<a-input v-model:value="formData.name" placeholder="请输入采集器名称" allow-clear />
 							</a-form-item>
 						</a-col>
 
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 							<a-form-item label="采集器编号" name="code">
 								<a-input v-model:value="formData.code" placeholder="请输入采集器编号" allow-clear />
 							</a-form-item>
 						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 							<a-form-item label="采集器条码" name="barcode">
 								<a-input v-model:value="formData.barcode" placeholder="请输入采集器条码" allow-clear />
 							</a-form-item>
 						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 							<a-form-item label="品牌" name="brand">
 								<a-input v-model:value="formData.brand" placeholder="请输入品牌" allow-clear />
 							</a-form-item>
 						</a-col>
 
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 							<a-form-item label="状态" name="state">
 								<a-select ref="select" v-model:value="formData.state">
 									<a-select-option value="1">正常</a-select-option>
@@ -48,7 +48,7 @@
 								</a-select>
 							</a-form-item>
 						</a-col>
-						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="12">
+						<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8">
 							<a-form-item label="所属部门">
 								<a-input v-model:value="formData.division" placeholder="请输入所属部门" allow-clear />
 							</a-form-item>
@@ -137,27 +137,32 @@
 							:columns="columns"
 							:data-source="formData.loadData"
 							:row-key="(record) => record.startTime"
+							:pagination="false"
 						>
+							<template #headerCell="{ column }">
+								<template v-if="column.dataIndex === 'startTime'">
+									<text style="color: #e74032"> * </text>开始时间
+								</template>
+								<template v-if="column.dataIndex === 'endTime'">
+									<text style="color: #e74032"> * </text>结束时间
+								</template>
+								<template v-if="column.dataIndex === 'name'"> <text style="color: #e74032"> * </text>姓名 </template>
+								<template v-if="column.dataIndex === 'remindType'">
+									<text style="color: #e74032"> * </text>提醒方式
+								</template>
+								<template v-if="column.dataIndex === 'level'"> <text style="color: #e74032"> * </text>级别 </template>
+								<template v-if="column.dataIndex === 'phone'">
+									<text style="color: #e74032"> * </text>电话号码
+								</template>
+							</template>
 							<template #bodyCell="{ column, record, index }">
 								<!-- 表格内容 -->
 								<template v-if="column.dataIndex === 'startTime'">
-									<a-date-picker
-										v-model:value="record.startTime"
-										show-time
-										format="YYYY-MM-DD HH:mm:ss"
-										value-format="YYYY-MM-DD HH:mm:ss"
-										style="width: 100%"
-									/>
+									<a-time-picker v-model:value="record.startTime" value-format="HH:mm:ss" style="width: 100%" />
 								</template>
 
 								<template v-if="column.dataIndex === 'endTime'">
-									<a-date-picker
-										v-model:value="record.endTime"
-										show-time
-										format="YYYY-MM-DD HH:mm:ss"
-										value-format="YYYY-MM-DD HH:mm:ss"
-										style="width: 100%"
-									/>
+									<a-time-picker v-model:value="record.endTime" value-format="HH:mm:ss" style="width: 100%" />
 								</template>
 
 								<template v-if="column.dataIndex === 'name'">
@@ -176,7 +181,7 @@
 								</template>
 
 								<template v-if="column.dataIndex === 'level'">
-									<a-select v-model:value="record.level" placeholder="请选择提醒方式" style="width: 100px">
+									<a-select v-model:value="record.level" placeholder="请选择级别" style="width: 100px">
 										<a-select-option value="1">1</a-select-option>
 										<a-select-option value="2">2</a-select-option>
 										<a-select-option value="3">3</a-select-option>
@@ -239,21 +244,17 @@
 			<a-button class="xn-mr8" @click="onClose">退出</a-button>
 			<a-button type="primary" @click="onSubmit">保存</a-button>
 		</template>
-		<Icon-selector ref="iconSelectorRef" @iconCallBack="iconCallBack" />
 	</xn-form-container>
 </template>
 
 <script setup>
-	import jobApi from '@/api/dev/jobApi'
+	import { message } from 'ant-design-vue'
 	import { required } from '@/utils/formRules'
 	import moduleApi from '@/api/sys/resource/moduleApi'
-
-	import IconSelector from '@/components/Selector/iconSelector.vue'
 	// 默认是关闭状态
 	const visible = ref(false)
 	const emit = defineEmits({ successful: null })
 	const formRef = ref()
-	const iconSelectorRef = ref()
 
 	const tableRef = ref()
 
@@ -261,39 +262,37 @@
 		{
 			title: '开始时间',
 			dataIndex: 'startTime',
-			rules: [{ required: true, message: '请选择开始时间' }]
+			align: 'center'
 		},
 		{
 			title: '结束时间',
 			dataIndex: 'endTime',
-			rules: [{ required: true, message: '请选择结束时间' }]
+			align: 'center'
 		},
 		{
 			title: '姓名',
 			dataIndex: 'name',
-			rules: [{ required: true, message: '请输入姓名' }]
+			align: 'center'
 		},
 		{
 			title: '提醒方式',
 			dataIndex: 'remindType',
-			rules: [{ required: true, message: '请选择提醒方式' }]
+			align: 'center'
 		},
 		{
 			title: '级别',
 			dataIndex: 'level',
-			rules: [{ required: true, message: '请选择级别' }]
+			align: 'center'
 		},
 		{
 			title: '电话号码',
 			dataIndex: 'phone',
-			rules: [
-				{ required: true, message: '请输入电话号码' },
-				{ pattern: /^[0-9]{11}$/, message: '请输入有效的电话号码' }
-			]
+			align: 'center'
 		},
 		{
 			title: '操作',
 			dataIndex: 'action',
+			align: 'center',
 			scopedSlots: { customRender: 'action' }
 		}
 	]
@@ -343,8 +342,8 @@
 	// 表格添加一行空数据
 	const tableAdd = () => {
 		const newRow = {
-			startTime: null,
-			endTime: null,
+			startTime: '00:00:00',
+			endTime: '23:59:59',
 			name: '',
 			level: '',
 			phone: ''
@@ -358,25 +357,35 @@
 	}
 
 	// 验证并提交数据
-	const onSubmit = async () => {
-		try {
-			// 校验主表单数据
-			await formRef.value.validate()
-			console.log('主表单数据验证通过')
-
-			// 校验表格行数据
-			for (const [index, row] of formData.value.loadData.entries()) {
-				const rowForm = tableRef.value.$el.querySelectorAll('.ant-form')[index]
-				console.log(rowForm, 'rowForm')
-
-				// const formInstance = rowForm.__vue__
-				// await formInstance.validate() // 校验单行表单
-			}
-
-			console.log('表单数据验证通过，开始提交...')
-		} catch (error) {
-			console.log('表单验证失败', error)
-		}
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				// 校验表格信息里面的表单是否有空数据
+				for (let i = 0; i < formData.value.loadData.length; i++) {
+					if (
+						!formData.value.loadData[i].startTime ||
+						!formData.value.loadData[i].endTime ||
+						!formData.value.loadData[i].name ||
+						!formData.value.loadData[i].remindType ||
+						!formData.value.loadData[i].level ||
+						!formData.value.loadData[i].phone
+					) {
+						console.log(i, 'xxxxxx')
+
+						message.warning(`请完善表格中的必填项`)
+					} else {
+						console.log(formData.value.list, '提交数据')
+						// moduleApi.submitForm(formData.value, formData.value.id).then(() => {
+						// 	onClose()
+						// 	emit('successful')
+						// })
+					}
+				}
+			})
+			.catch((error) => {
+				console.log(error)
+			})
 	}
 
 	// 新增或删除路数