房间的新增改查

snowy-admin-web/package.json

@@ -77,7 +77,7 @@
 		"typescript": "5.6.2",
 		"unplugin-auto-import": "0.18.3",
 		"unplugin-vue-components": "0.27.4",
-		"vite": "^5.4.8",
+		"vite": "^5.4.11",
 		"vite-plugin-compression": "0.5.1",
 		"vite-plugin-vue-setup-extend": "0.4.0",
 		"vue-eslint-parser": "9.3.2"

snowy-admin-web/src/api/coldchain/targetRoomApi.js

@@ -0,0 +1,30 @@
+import { baseRequest } from '@/utils/request'
+
+const request = (url, ...arg) => baseRequest(`/coldchain/targetroom/` + url, ...arg)
+
+/**
+ * 房间数据Api接口管理器
+ **/
+export default {
+	// 获取房间数据分页
+	targetRoomPage(data) {
+		return request('page', data, 'get')
+	},
+
+	// 获取房间数据列表
+	targetRoomList(data) {
+		return request('list', data, 'get')
+	},
+	// 提交房间数据表单 edit为true时为编辑，默认为新增
+	targetRoomSubmitForm(data, edit = false) {
+		return request(edit ? 'edit' : 'add', data)
+	},
+	// 删除房间数据
+	targetRoomDelete(data) {
+		return request('delete', data)
+	},
+	// 获取房间数据详情
+	targetRoomDetail(data) {
+		return request('detail', data, 'get')
+	}
+}

snowy-admin-web/src/views/biz/monitor/targetroom/form.vue

@@ -0,0 +1,114 @@
+<template>
+	<xn-form-container
+		:title="formData.id ? '编辑房间' : '新增房间'"
+		:width="'500px'"
+		:visible="visible"
+		:destroy-on-close="true"
+		@close="onClose"
+	>
+		<a-form
+			ref="formRef"
+			:model="formData"
+			:rules="formRules"
+			layout="inline"
+			:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
+		>
+			<a-form-item label="所属组织" name="createOrg">
+				<a-select
+					ref="select"
+					v-model:value="formData.createOrg"
+					:options="orgOptions"
+					allowClear
+					style="width: 100%"
+					placeholder="请选择您要绑定的组织"
+					:field-names="{ label: 'name', value: 'id' }"
+				/>
+			</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="排序：" name="sortCode">
+				<a-input-number class="xn-wd" v-model:value="formData.sortCode" :max="100" />
+			</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>
+</template>
+
+<script setup>
+	import { required } from '@/utils/formRules'
+	import orgApi from '@/api/sys/orgApi.js'
+	import targetRoomApi from '@/api/coldchain/targetRoomApi'
+	const alarmUsersOptions = ref([]) // 报警接收人数据
+
+	// 默认是关闭状态
+	const visible = ref(false)
+	const emit = defineEmits({ successful: null })
+	const orgOptions = ref([])
+	// 表单数据
+	const formData = ref({})
+	const formRef = ref()
+
+	// 默认要校验的
+	const formRules = {
+		name: [required('请输入房间配置名称')],
+		createOrg: [required('请选择所属组织')],
+		sortCode: [required('请选择排序')]
+	}
+
+	// 打开抽屉
+	const onOpen = (record) => {
+		setalarmUsersData()
+		visible.value = true
+		if (record) {
+			formData.value = Object.assign({}, record)
+		} else {
+			formData.value = { sortCode: 99 }
+		}
+	}
+	//获取机构的数据
+	const setalarmUsersData = () => {
+		orgApi.orgList().then((res) => {
+			orgOptions.value = res
+		})
+	}
+	// 关闭抽屉
+	const onClose = () => {
+		formRef.value.resetFields()
+		visible.value = false
+	}
+
+	// 验证并提交数据
+	const onSubmit = () => {
+		formRef.value
+			.validate()
+			.then(() => {
+				const parameter = {
+					...formData.value
+				}
+				targetRoomApi.targetRoomSubmitForm(parameter, formData.value.id).then(() => {
+					onClose()
+					emit('successful')
+				})
+			})
+			.catch((error) => {
+				console.log(error)
+			})
+	}
+
+	// 调用这个函数将子组件的一些数据和方法暴露出去
+	defineExpose({
+		onOpen
+	})
+</script>
+
+<style lang="less" scoped>
+	:deep(.ant-form-item) {
+		width: 100%;
+		margin-bottom: 10px;
+	}
+</style>

snowy-admin-web/src/views/biz/monitor/targetroom/index.vue

@@ -0,0 +1,168 @@
+<template>
+	<div class="table_item">
+		<s-table
+			ref="tableRef"
+			:columns="columns"
+			:data="loadData"
+			:row-key="(record) => record.id"
+			@resizeColumn="handleResizeColumn"
+		>
+			<template #operator>
+				<!-- 搜索区域 -->
+				<div class="table-search">
+					<div class="table-search-form">
+						<a-row :gutter="10">
+							<a-form
+								ref="searchFormRef"
+								name="advanced_search"
+								layout="inline"
+								:label-col="{ style: { width: '70px', justifyContent: 'end' } }"
+								:model="searchFormState"
+								class="ant-advanced-search-form"
+							>
+								<a-col :xs="24" :sm="24" :md="12" :lg="8" :xl="8"
+									><a-form-item label="房间名称" name="name">
+										<a-input v-model:value="searchFormState.name" placeholder="请输入房间名称" /> </a-form-item
+								></a-col>
+							</a-form>
+						</a-row>
+					</div>
+					<div class="table-search-buttons">
+						<a-button type="primary" @click="tableRef.refresh(true)">查询</a-button>
+						<a-button class="xn-mg08" @click="reset">重置</a-button>
+					</div>
+				</div>
+
+				<!-- 其他操作区域 -->
+				<div class="table-head-btn">
+					<div class="btn-left">
+						<a-button type="primary" @click="formRef.onOpen()">
+							<template #icon><plus-outlined /></template>新增
+						</a-button>
+					</div>
+				</div>
+			</template>
+
+			<template #bodyCell="{ column, record, index }">
+				<!-- 序号 -->
+				<template v-if="column.dataIndex === 'index'">{{ index + 1 }} </template>
+				<template v-if="column.dataIndex === 'action'">
+					<a-button type="link" size="small" @click="formRef.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>
+		<Form ref="formRef" @successful="tableRef.refresh(true)" />
+	</div>
+</template>
+
+<script setup>
+	import targetRoomApi from '@/api/coldchain/targetRoomApi'
+	import Form from './form.vue'
+	const formRef = ref()
+
+	const searchFormRef = ref()
+	const searchFormState = ref({})
+	const tableRef = ref()
+	const columns = [
+		{
+			title: '序号',
+			dataIndex: 'index',
+			align: 'center',
+			width: 50
+		},
+		{
+			title: '房间名称',
+			dataIndex: 'name',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
+		},
+		{
+			title: '所属组织',
+			dataIndex: 'createOrgName',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
+		},
+		{
+			title: '创建时间',
+			dataIndex: 'createTime',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
+		},
+		{
+			title: '排序',
+			dataIndex: 'sortCode',
+			align: 'center',
+			ellipsis: true,
+			resizable: true
+		},
+		{
+			title: '操作',
+			dataIndex: 'action',
+			align: 'center',
+			width: 200
+		}
+	]
+	// 可伸缩列
+	const handleResizeColumn = (w, col) => {
+		col.width = w
+	}
+
+	const loadData = (parameter) => {
+		return targetRoomApi.targetRoomPage(Object.assign(parameter, searchFormState.value)).then((res) => {
+			return res
+		})
+	}
+
+	// 重置
+	const reset = () => {
+		searchFormRef.value.resetFields()
+		tableRef.value.refresh(true)
+	}
+	// 删除
+	const deleteData = (record) => {
+		let params = [
+			{
+				id: record.id
+			}
+		]
+		targetRoomApi.targetRoomDelete(params).then(() => {
+			tableRef.value.refresh(true)
+			reset()
+		})
+	}
+</script>
+
+<style lang="less" scoped>
+	.table_item {
+		padding: 15px 20px;
+		background-color: #ffffff;
+		:deep(.ant-table-pagination-right) {
+			justify-content: center !important;
+		}
+	}
+	.list {
+		width: 60%;
+		padding: 20px 20px;
+		border-radius: 10px;
+
+		:deep(.ant-descriptions) {
+			width: 100%;
+			.ant-descriptions-row {
+				width: 100%;
+			}
+
+			.ant-descriptions-item-label {
+				width: 120px;
+			}
+			.ant-descriptions-item-content {
+				width: calc(100% - 120px);
+			}
+		}
+	}
+</style>