表单管理表单样式调整

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

@@ -1,7 +1,7 @@
 <template>
 	<xn-form-container
 		:title="formData.id ? '编辑冰箱' : '新增冰箱'"
-		:width="'500px'"
+		:width="'800px'"
 		:visible="visible"
 		:destroy-on-close="true"
 		@close="onClose"
@@ -13,35 +13,39 @@
 			layout="inline"
 			:label-col="{ style: { width: '100px', justifyContent: 'end' } }"
 		>
-			<a-form-item label="所属房间" name="roomId">
-				<a-select
-					ref="select"
-					v-model:value="formData.roomId"
-					:options="roomOptions"
-					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="alarmUsers">
-				<a-select
-					v-model:value="formData.alarmUsers"
-					mode="multiple"
-					style="width: 100%"
-					placeholder="请选择报警接收人"
-					:options="alarmUsersOptions"
-					:field-names="{ label: 'name', value: 'openId' }"
-				></a-select>
-			</a-form-item>
-			<a-form-item label="冰箱位置区域">
-				<a-input v-model:value="formData.monitorPoint" placeholder="请输入冰箱位置区域" allow-clear />
-			</a-form-item>
+			<a-row :gutter="10">
+				<a-col :xs="24" :sm="24" :md="24" :lg="24" :xl="24">
+					<a-form-item label="所属房间" name="roomId">
+						<a-radio-group class="dict" v-model:value="formData.roomId" name="name" option-type="button">
+							<a-radio-button v-for="item in roomOptions" :key="item.id" :value="item.id">{{
+								item.name
+							}}</a-radio-button>
+						</a-radio-group>
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="12" :xl="12">
+					<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="12" :xl="12">
+					<a-form-item label="冰箱位置区域">
+						<a-input v-model:value="formData.monitorPoint" placeholder="请输入冰箱位置区域" allow-clear />
+					</a-form-item>
+				</a-col>
+				<a-col :xs="24" :sm="24" :md="12" :lg="24" :xl="24">
+					<a-form-item label="报警接收人" name="alarmUsers">
+						<a-select
+							v-model:value="formData.alarmUsers"
+							mode="multiple"
+							style="width: 100%"
+							placeholder="请选择报警接收人"
+							:options="alarmUsersOptions"
+							:field-names="{ label: 'name', value: 'openId' }"
+						></a-select>
+					</a-form-item>
+				</a-col>
+			</a-row>
 		</a-form>
 
 		<template #footer>
@@ -135,6 +139,19 @@
 </script>
 
 <style lang="less" scoped>
+	.dict {
+		width: 100%;
+		display: grid;
+		grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
+		gap: 10px;
+		:deep(.ant-radio-button-wrapper) {
+			text-align: center;
+		}
+		:deep(.ant-radio-button-wrapper-checked) {
+			color: #2b61ff;
+			background-color: #e6f3ff;
+		}
+	}
 	:deep(.ant-form-item) {
 		width: 100%;
 		margin-bottom: 10px;