增加猪群管理界面
This commit is contained in:
216
src/components/PigBatchForm.vue
Normal file
216
src/components/PigBatchForm.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<el-dialog
|
||||
:model-value="visible"
|
||||
:title="title"
|
||||
@close="handleClose"
|
||||
:close-on-click-modal="false"
|
||||
width="600px"
|
||||
>
|
||||
<el-form
|
||||
ref="formRef"
|
||||
:model="formData"
|
||||
:rules="rules"
|
||||
label-width="120px"
|
||||
@submit.prevent
|
||||
>
|
||||
<el-form-item label="批次编号" prop="batch_number">
|
||||
<el-input v-model="formData.batch_number" placeholder="请输入批次编号"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="初始数量" prop="initial_count">
|
||||
<el-input-number v-model="formData.initial_count" :min="1" controls-position="right" style="width: 100%"/>
|
||||
</el-form-item>
|
||||
<el-form-item label="来源类型" prop="origin_type">
|
||||
<el-select v-model="formData.origin_type" placeholder="请选择来源类型" style="width: 100%">
|
||||
<el-option v-for="item in originTypeOptions" :key="item" :label="item" :value="item"/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始日期" prop="start_date">
|
||||
<el-date-picker
|
||||
v-model="formData.start_date"
|
||||
type="datetime"
|
||||
placeholder="选择开始日期和时间"
|
||||
value-format="YYYY-MM-DD HH:mm:ss"
|
||||
style="width: 100%"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="批次状态" prop="status">
|
||||
<el-select v-model="formData.status" placeholder="请选择批次状态" style="width: 100%">
|
||||
<el-option v-for="item in batchStatusOptions" :key="item" :label="item" :value="item"/>
|
||||
</el-select>
|
||||
</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 {createPigBatch, updatePigBatch} from '@/api/pigBatch.js';
|
||||
|
||||
export default {
|
||||
name: 'PigBatchForm',
|
||||
props: {
|
||||
visible: {
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
batchData: {
|
||||
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 originTypeOptions = ["自繁", "外购"];
|
||||
const batchStatusOptions = ["保育", "生长", "育肥", "待售", "已出售", "已归档"];
|
||||
|
||||
const initialFormData = () => ({
|
||||
id: null,
|
||||
batch_number: '',
|
||||
initial_count: 1,
|
||||
origin_type: '自繁',
|
||||
start_date: '',
|
||||
status: '保育',
|
||||
});
|
||||
|
||||
const formData = reactive(initialFormData());
|
||||
|
||||
const rules = {
|
||||
batch_number: [
|
||||
{required: true, message: '请输入批次编号', trigger: 'blur'}
|
||||
],
|
||||
initial_count: [
|
||||
{required: true, message: '请输入初始数量', trigger: 'blur'},
|
||||
{type: 'integer', min: 1, message: '初始数量必须是大于0的整数', trigger: 'blur'}
|
||||
],
|
||||
origin_type: [
|
||||
{required: true, message: '请选择来源类型', trigger: 'change'}
|
||||
],
|
||||
start_date: [
|
||||
{required: true, message: '请选择开始日期', trigger: 'change'}
|
||||
],
|
||||
status: [
|
||||
{required: true, message: '请选择批次状态', trigger: 'change'}
|
||||
]
|
||||
};
|
||||
|
||||
const title = computed(() => (props.isEdit ? '编辑猪群' : '添加猪群'));
|
||||
|
||||
// ✅ 修复：东八区 RFC3339 转换函数
|
||||
const toRFC3339 = (dateStr) => {
|
||||
if (!dateStr) return null;
|
||||
// "2025-10-23 14:30:00" → Date 对象（东八区）
|
||||
const date = new Date(dateStr.replace(/ /, 'T') + '+08:00');
|
||||
if (isNaN(date.getTime())) return null;
|
||||
return date.toISOString().slice(0, -1) + '+08:00'; // "2025-10-23T14:30:00+08:00"
|
||||
};
|
||||
|
||||
// ✅ 修复：RFC3339 转显示格式
|
||||
const fromRFC3339 = (rfc3339Str) => {
|
||||
if (!rfc3339Str) return '';
|
||||
const date = new Date(rfc3339Str);
|
||||
if (isNaN(date.getTime())) return '';
|
||||
const year = date.getFullYear();
|
||||
const month = String(date.getMonth() + 1).padStart(2, '0');
|
||||
const day = String(date.getDate()).padStart(2, '0');
|
||||
const hours = String(date.getHours()).padStart(2, '0');
|
||||
const minutes = String(date.getMinutes()).padStart(2, '0');
|
||||
const seconds = String(date.getSeconds()).padStart(2, '0');
|
||||
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
|
||||
};
|
||||
|
||||
const handleClose = () => {
|
||||
emit('update:visible', false);
|
||||
emit('cancel');
|
||||
nextTick(() => {
|
||||
formRef.value?.resetFields();
|
||||
Object.assign(formData, initialFormData());
|
||||
});
|
||||
};
|
||||
|
||||
const handleSubmit = async () => {
|
||||
if (!formRef.value) return;
|
||||
await formRef.value.validate(async (valid) => {
|
||||
if (valid) {
|
||||
loading.value = true;
|
||||
try {
|
||||
let response;
|
||||
const submitData = {...formData};
|
||||
delete submitData.id;
|
||||
|
||||
// ✅ 修复：正确转东八区 RFC3339
|
||||
submitData.start_date = toRFC3339(formData.start_date);
|
||||
console.log('提交的日期:', submitData.start_date); // 调试用
|
||||
|
||||
if (props.isEdit) {
|
||||
response = await updatePigBatch(props.batchData.id, submitData);
|
||||
} else {
|
||||
response = await createPigBatch(submitData);
|
||||
}
|
||||
ElMessage.success((props.isEdit ? '更新' : '创建') + '猪群成功');
|
||||
emit('success', response.data);
|
||||
handleClose();
|
||||
} catch (error) {
|
||||
console.error('提交错误:', error);
|
||||
ElMessage.error((props.isEdit ? '更新' : '创建') + '猪群失败: ' + (error.message || '未知错误'));
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
watch(() => props.visible, (newVal) => {
|
||||
if (newVal) {
|
||||
Object.assign(formData, initialFormData());
|
||||
if (props.isEdit && props.batchData) {
|
||||
// ✅ 修复：正确转换编辑时的日期
|
||||
formData.id = props.batchData.id;
|
||||
formData.batch_number = props.batchData.batch_number || '';
|
||||
formData.initial_count = props.batchData.initial_count || 1;
|
||||
formData.origin_type = props.batchData.origin_type || '自繁';
|
||||
formData.status = props.batchData.status || '保育';
|
||||
formData.start_date = fromRFC3339(props.batchData.start_date);
|
||||
}
|
||||
nextTick(() => {
|
||||
formRef.value?.clearValidate();
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
return {
|
||||
formRef,
|
||||
loading,
|
||||
formData,
|
||||
rules,
|
||||
title,
|
||||
originTypeOptions,
|
||||
batchStatusOptions,
|
||||
handleClose,
|
||||
handleSubmit
|
||||
};
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.dialog-footer {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
}
|
||||
</style>
|
||||
137
src/components/PigBatchList.vue
Normal file
137
src/components/PigBatchList.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div class="pig-batch-list">
|
||||
<div v-for="batch in pigBatches" :key="batch.id" class="pig-batch-item">
|
||||
<div class="batch-header" @click="toggleExpand(batch)">
|
||||
<div class="batch-info">
|
||||
<span>批次编号: {{ batch.batch_number }}</span>
|
||||
<span>状态: {{ batch.status }}</span>
|
||||
<span>初始数量: {{ batch.initial_count }}</span>
|
||||
</div>
|
||||
<div class="batch-actions">
|
||||
<el-button size="small" type="primary" @click.stop="emitAddPen(batch)">增加猪栏</el-button>
|
||||
<el-button size="small" @click.stop="emitEditBatch(batch)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click.stop="emitDeleteBatch(batch)">删除</el-button>
|
||||
</div>
|
||||
</div>
|
||||
<div v-if="batch.isExpanded" class="batch-content">
|
||||
<div v-if="batch.pens && batch.pens.length > 0" class="pig-pen-list">
|
||||
<PigPenInfoCard
|
||||
v-for="pen in batch.pens"
|
||||
:key="pen.id"
|
||||
:pen="pen"
|
||||
@edit="emitEditPen"
|
||||
@delete="emitDeletePen"
|
||||
/>
|
||||
</div>
|
||||
<div v-else class="no-pens-message">
|
||||
<p>该猪群下没有猪栏信息。</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import PigPenInfoCard from './PigPenInfoCard.vue';
|
||||
|
||||
export default {
|
||||
name: 'PigBatchList',
|
||||
components: {
|
||||
PigPenInfoCard
|
||||
},
|
||||
props: {
|
||||
pigBatches: {
|
||||
type: Array,
|
||||
required: true
|
||||
}
|
||||
},
|
||||
emits: ['edit-batch', 'delete-batch', 'add-pen', 'edit-pen', 'delete-pen'],
|
||||
methods: {
|
||||
toggleExpand(batch) {
|
||||
batch.isExpanded = !batch.isExpanded;
|
||||
},
|
||||
// 猪群操作
|
||||
emitAddPen(batch) {
|
||||
this.$emit('add-pen', batch);
|
||||
},
|
||||
emitEditBatch(batch) {
|
||||
this.$emit('edit-batch', batch);
|
||||
},
|
||||
emitDeleteBatch(batch) {
|
||||
this.$emit('delete-batch', batch);
|
||||
},
|
||||
// 猪栏操作
|
||||
emitEditPen(pen) {
|
||||
this.$emit('edit-pen', pen);
|
||||
},
|
||||
emitDeletePen(pen) {
|
||||
this.$emit('delete-pen', pen);
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.pig-batch-list {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.pig-batch-item {
|
||||
border: 1px solid #eee;
|
||||
border-radius: 4px;
|
||||
margin-bottom: 16px;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.batch-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding: 16px;
|
||||
cursor: pointer;
|
||||
background-color: #f9f9f9;
|
||||
transition: background-color 0.3s;
|
||||
}
|
||||
|
||||
.batch-header:hover {
|
||||
background-color: #f0f0f0;
|
||||
}
|
||||
|
||||
.batch-info {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.batch-info span:first-child {
|
||||
font-weight: bold;
|
||||
}
|
||||
|
||||
.batch-info span {
|
||||
margin-right: 20px;
|
||||
font-size: 14px;
|
||||
color: #606266;
|
||||
}
|
||||
|
||||
.batch-actions {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.batch-content {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #eee;
|
||||
}
|
||||
|
||||
.pig-pen-list {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.no-pens-message {
|
||||
color: #909399;
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
</style>
|
||||
@@ -4,7 +4,9 @@
|
||||
<div class="title">猪栏: {{ pen.pen_number }}</div>
|
||||
<div class="info-item">状态: <el-tag size="small" :type="statusType">{{ pen.status || '未知' }}</el-tag></div>
|
||||
<div class="info-item">容量: {{ pen.capacity }}</div>
|
||||
<div class="info-item">存栏: {{ pen.current_pig_count || 0 }}</div>
|
||||
<div class="info-item">批次: {{ pen.batch_number || '未分配' }}</div>
|
||||
<div class="info-item">猪舍: {{ pen.house_name || '未知' }}</div>
|
||||
</div>
|
||||
<div class="actions-section">
|
||||
<el-button size="small" @click="emitEdit">编辑</el-button>
|
||||
@@ -67,7 +69,7 @@ export default {
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
width: 200px; /* 适当加宽以容纳更多信息 */
|
||||
height: 240px;
|
||||
height: 260px; /* 调整高度以适应更多信息 */
|
||||
background-color: #fff;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
|
||||
transition: box-shadow 0.3s;
|
||||
@@ -80,7 +82,8 @@ export default {
|
||||
.info-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px; /* 增加信息项间距 */
|
||||
gap: 10px; /* 调整信息项间距 */
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.info-section .title {
|
||||
|
||||
Reference in New Issue
Block a user