|
@@ -1,7 +1,7 @@
|
|
|
<template>
|
|
|
<xn-form-container
|
|
|
:title="formData.id ? '编辑冰箱' : '新增冰箱'"
|
|
|
- :width="'500px'"
|
|
|
+ :width="'800px'"
|
|
|
:visible="visible"
|
|
|
:destroy-on-close="true"
|
|
|
@close="onClose"
|
|
@@ -13,41 +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="status">
|
|
|
- <a-select ref="select" v-model:value="formData.status" placeholder="请选择冰箱状态">
|
|
|
- <a-select-option value="1">正常</a-select-option>
|
|
|
- <a-select-option value="2">停用</a-select-option>
|
|
|
- </a-select>
|
|
|
- </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>
|
|
@@ -74,12 +72,11 @@
|
|
|
const formRules = {
|
|
|
roomId: [required('请选择您要绑定的房间')],
|
|
|
name: [required('请输入冰箱名称')],
|
|
|
- status: [required('请选择冰箱状态')],
|
|
|
alarmUsers: [required('请选择报警接收人')]
|
|
|
}
|
|
|
|
|
|
// 表单数据
|
|
|
- const formData = ref({ status: '1', alarmUsers: [] })
|
|
|
+ const formData = ref({ alarmUsers: [] })
|
|
|
|
|
|
// 打开抽屉
|
|
|
const onOpen = (record) => {
|
|
@@ -93,7 +90,7 @@
|
|
|
formData.value.alarmUsers = formData.value.alarmUsers.map((item) => item.openId)
|
|
|
}
|
|
|
} else {
|
|
|
- formData.value = { status: '1', alarmUsers: [] }
|
|
|
+ formData.value = { alarmUsers: [] }
|
|
|
}
|
|
|
}
|
|
|
//获取房间的数据
|
|
@@ -142,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;
|