pig/pig-farm-controller-fe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

调整设备管理界面

Browse Source
This commit is contained in:
huang
2025-09-30 23:52:59 +08:00
parent 7710abcf9e
commit 9a701b339b
3 changed files with 41 additions and 36 deletions
Download Patch File Download Diff File Expand all files Collapse all files

55
src/components/DeviceForm.vue
View File

@@ -51,13 +51,12 @@
<el-form-item label="设备模板" prop="device_template_id">
<el-select v-model="formData.device_template_id" placeholder="请选择设备模板">
<!-- 假设设备模板列表从API获取或硬编码 -->
<el-option label="温度传感器" :value="1" />
<el-option label="湿度传感器" :value="2" />
<el-option label="氨气传感器" :value="3" />
<el-option label="饲料阀门" :value="4" />
<el-option label="风扇" :value="5" />
<el-option label="水帘" :value="6" />
<el-option
v-for="template in deviceTemplates"
:key="template.id"
:label="template.name"
:value="template.id"
/>
</el-select>
</el-form-item>
@@ -78,15 +77,6 @@
style="width: 100%"
/>
</el-form-item>
<el-form-item label="继电器通道号" prop="properties.relay_channel">
<el-input-number
v-model="formData.properties.relay_channel"
:min="0"
controls-position="right"
style="width: 100%"
/>
</el-form-item>
</div>
</el-form>
@@ -103,6 +93,7 @@
import { ref, reactive, onMounted, watch, computed, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import { AreaControllerApi, DeviceApi } from '../api/device.js';
import deviceTemplateService from '../services/deviceTemplateService.js'; // 导入设备模板服务
export default {
name: 'DeviceForm',
@@ -125,6 +116,7 @@ export default {
const formRef = ref(null);
const loading = ref(false);
const areaControllers = ref([]);
const deviceTemplates = ref([]); // 新增设备模板列表状态
const initialFormData = () => ({
id: '',
@@ -137,7 +129,6 @@ export default {
properties: { // 嵌套的properties对象
bus_number: 0,
bus_address: 0,
relay_channel: 0,
}
});
@@ -168,9 +159,6 @@ export default {
'properties.bus_address': [
{ required: formData.type === 'device', message: '请输入485总线地址', trigger: 'blur' }
],
'properties.relay_channel': [
{ required: formData.type === 'device', message: '请输入继电器通道号', trigger: 'blur' }
]
}));
const title = computed(() => {
@@ -182,13 +170,13 @@ export default {
if (value === 'area_controller') {
formData.area_controller_id = '';
formData.device_template_id = '';
formData.properties = { bus_number: 0, bus_address: 0, relay_channel: 0 };
formData.properties = { bus_number: 0, bus_address: 0 };
} else {
formData.network_id = '';
}
// 触发验证规则更新
nextTick(() => {
if (formRef.value) { // 添加null检查
if (formRef.value) {
formRef.value.clearValidate();
}
});
@@ -204,14 +192,27 @@ export default {
}
};
// 新增：加载设备模板列表
const loadDeviceTemplates = async () => {
try {
const response = await deviceTemplateService.getDeviceTemplates();
deviceTemplates.value = response.data || [];
} catch (error) {
console.error('获取设备模板列表失败:', error);
deviceTemplates.value = [];
}
};
const handleClose = () => {
emit('update:visible', false);
emit('cancel');
// 重置表单
Object.assign(formData, initialFormData());
nextTick(() => {
if (formRef.value) {
formRef.value.resetFields();
}
});
};
const getSubmitData = () => {
@@ -231,6 +232,7 @@ export default {
};
const handleSubmit = async () => {
if (!formRef.value) return;
await formRef.value.validate(async (valid) => {
if (valid) {
loading.value = true;
@@ -278,7 +280,7 @@ export default {
// 重置表单以清除旧数据和验证状态
Object.assign(formData, initialFormData());
nextTick(() => {
if (formRef.value) { // 添加null检查
if (formRef.value) {
formRef.value.clearValidate();
}
});
@@ -305,7 +307,7 @@ export default {
// 如果没有传入deviceData，则重置为初始状态
Object.assign(formData, initialFormData());
nextTick(() => {
if (formRef.value) { // 添加null检查
if (formRef.value) {
formRef.value.clearValidate();
}
});
@@ -315,11 +317,12 @@ export default {
watch(() => props.visible, (newVal) => {
if (newVal) {
loadAreaControllers();
loadDeviceTemplates(); // 新增：对话框打开时加载设备模板
// 如果是新增，确保type是默认值，且清空所有字段
if (!props.isEdit) {
Object.assign(formData, initialFormData());
nextTick(() => {
if (formRef.value) { // 添加null检查
if (formRef.value) {
formRef.value.clearValidate();
}
});
@@ -329,12 +332,14 @@ export default {
onMounted(() => {
loadAreaControllers();
loadDeviceTemplates(); // 新增：组件挂载时加载设备模板
});
return {
formRef,
loading,
areaControllers,
deviceTemplates, // 暴露设备模板列表
formData,
rules,
title,

14
src/layouts/MainLayout.vue
View File

@@ -15,6 +15,7 @@
:collapse="isCollapse"
:collapse-transition="false"
router
:default-openeds="['/device-management']"
>
<el-menu-item index="/">
<el-icon><House /></el-icon>
@@ -87,7 +88,7 @@
<script>
import { ref, computed, onMounted, onUnmounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue'; // 导入Setting和Tickets图标
import { House, Monitor, Calendar, ArrowDown, Menu, Fold, Expand, Setting, Tickets } from '@element-plus/icons-vue';
export default {
name: 'MainLayout',
@@ -99,8 +100,8 @@ export default {
Menu,
Fold,
Expand,
Setting, // 注册Setting图标
Tickets // 注册Tickets图标
Setting,
Tickets
},
setup() {
const route = useRoute();
@@ -126,9 +127,8 @@ export default {
};
const activeMenu = computed(() => {
// 对于二级菜单，需要判断当前路由是否在其子菜单中
if (route.path === '/devices' || route.path === '/device-templates') {
return route.path; // 激活子菜单项
return route.path;
}
return route.path;
});
@@ -145,8 +145,8 @@ export default {
const logout = () => {
localStorage.removeItem('jwt_token');
localStorage.removeItem('username');
username.value = '管理员';
localStorage.removeItem('username'); // 清除用户名
username.value = '管理员'; // 重置显示
router.push('/login');
};

2
src/services/deviceTemplateService.js
View File

@@ -8,7 +8,7 @@ class DeviceTemplateService {
async getDeviceTemplates() {
try {
const response = await apiClient.deviceTemplates.list();
return response.data || [];
return response || [];
} catch (error) {
console.error('获取设备模板列表失败:', error);
throw error;