栏舍管理界面

2025-10-22 18:55:51 +08:00
parent 828c3bbe36
commit dc3f311037
7 changed files with 833 additions and 9 deletions
--- a/src/components/PigHouseForm.vue
+++ b/src/components/PigHouseForm.vue
@@ -0,0 +1,144 @@
+<template>
+  <el-dialog
+    :model-value="visible"
+    :title="title"
+    @close="handleClose"
+    :close-on-click-modal="false"
+    width="500px"
+  >
+    <el-form
+      ref="formRef"
+      :model="formData"
+      :rules="rules"
+      label-width="100px"
+      @submit.prevent
+    >
+      <el-form-item label="猪舍名称" prop="name">
+        <el-input v-model="formData.name" placeholder="请输入猪舍名称" />
+      </el-form-item>
+      <el-form-item label="描述" prop="description">
+        <el-input v-model="formData.description" type="textarea" placeholder="请输入描述信息" />
+      </el-form-item>
+    </el-form>
+
+    <template #footer>
+      <span class="dialog-footer">
+        <el-button @click="handleClose">取消</el-button>
+        <el-button type="primary" @click="handleSubmit" :loading="loading">确定</el-button>
+      </span>
+    </template>
+  </el-dialog>
+</template>
+
+<script>
+import { ref, reactive, watch, computed, nextTick } from 'vue';
+import { ElMessage } from 'element-plus';
+import { createPigHouse, updatePigHouse } from '@/api/pigHouse.js';
+
+export default {
+  name: 'PigHouseForm',
+  props: {
+    visible: {
+      type: Boolean,
+      default: false
+    },
+    houseData: {
+      type: Object,
+      default: () => ({})
+    },
+    isEdit: {
+      type: Boolean,
+      default: false
+    }
+  },
+  emits: ['update:visible', 'success', 'cancel'],
+  setup(props, { emit }) {
+    const formRef = ref(null);
+    const loading = ref(false);
+
+    const initialFormData = () => ({
+      id: null,
+      name: '',
+      description: ''
+    });
+
+    const formData = reactive(initialFormData());
+
+    const rules = {
+      name: [
+        { required: true, message: '请输入猪舍名称', trigger: 'blur' }
+      ]
+    };
+
+    const title = computed(() => (props.isEdit ? '编辑猪舍' : '添加猪舍'));
+
+    const handleClose = () => {
+      emit('update:visible', false);
+      emit('cancel');
+      Object.assign(formData, initialFormData());
+      nextTick(() => {
+        formRef.value?.resetFields();
+      });
+    };
+
+    const handleSubmit = async () => {
+      if (!formRef.value) return;
+      await formRef.value.validate(async (valid) => {
+        if (valid) {
+          loading.value = true;
+          try {
+            const submitData = { name: formData.name, description: formData.description };
+            if (props.isEdit) {
+              await updatePigHouse(formData.id, submitData);
+            } else {
+              await createPigHouse(submitData);
+            }
+            emit('success');
+            handleClose();
+          } catch (error) {
+            ElMessage.error((props.isEdit ? '更新' : '创建') + '猪舍失败: ' + (error.message || '未知错误'));
+          } finally {
+            loading.value = false;
+          }
+        }
+      });
+    };
+
+    watch(() => props.houseData, (newVal) => {
+      Object.assign(formData, initialFormData());
+      if (props.isEdit && newVal && newVal.id) {
+        formData.id = newVal.id;
+        formData.name = newVal.name;
+        formData.description = newVal.description;
+      }
+    }, { immediate: true, deep: true });
+
+    watch(() => props.visible, (newVal) => {
+        if (newVal && !props.isEdit) {
+            Object.assign(formData, initialFormData());
+            nextTick(() => {
+                formRef.value?.clearValidate();
+            });
+        }
+    });
+
+    return {
+      formRef,
+      loading,
+      formData,
+      rules,
+      title,
+      handleClose,
+      handleSubmit
+    };
+  }
+};
+</script>
+
+<style scoped>
+.dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+}
+</style>