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-11-22 19:22:21 +08:00
parent f44dc710c9
commit 55a3dbd1d5
2 changed files with 262 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

159
src/components/feed/PigBreedTable.vue
View File

@@ -53,27 +53,45 @@
<el-divider></el-divider>
<!-- 下半段：该品种下的年龄阶段简介 -->
<h4 style="margin-bottom: 16px;">该品种下的年龄阶段简介</h4>
<el-table
:data="props.row.pig_types"
border
style="width: 100%; margin-top: 10px;"
>
<el-table-column prop="age_stage_name" label="年龄阶段"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column prop="min_days" label="最小天数"></el-table-column>
<el-table-column prop="max_days" label="最大天数"></el-table-column>
<el-table-column prop="min_weight" label="最小体重(kg)" :formatter="weightFormatter"></el-table-column>
<el-table-column prop="max_weight" label="最大体重(kg)" :formatter="weightFormatter"></el-table-column>
<el-table-column prop="daily_gain_weight" label="日增重(kg)" :formatter="weightFormatter"></el-table-column>
<el-table-column prop="daily_feed_intake" label="日采食量(kg)" :formatter="weightFormatter"></el-table-column>
<!-- 新增营养需求列 -->
<el-table-column label="营养需求" width="120">
<template #default="scope">
<el-button type="text" @click="handleViewNutrientRequirements(scope.row)">查看详情</el-button>
</template>
</el-table-column>
</el-table>
<div style="display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px;">
<h4>该品种下的年龄阶段简介</h4>
<el-button type="primary" size="small" @click="handleAddPigType(props.row.id)">添加年龄阶段</el-button>
</div>
<template v-if="props.row.pig_types && props.row.pig_types.length > 0">
<el-table
:data="props.row.pig_types"
border
style="width: 100%; margin-top: 10px;"
>
<el-table-column prop="age_stage_name" label="年龄阶段"></el-table-column>
<el-table-column prop="description" label="描述"></el-table-column>
<el-table-column prop="min_days" label="最小天数"></el-table-column>
<el-table-column prop="max_days" label="最大天数"></el-table-column>
<el-table-column prop="min_weight" label="最小体重(kg)" :formatter="weightFormatter"></el-table-column>
<el-table-column prop="max_weight" label="最大体重(kg)" :formatter="weightFormatter"></el-table-column>
<el-table-column prop="daily_gain_weight" label="日增重(kg)" :formatter="weightFormatter"></el-table-column>
<el-table-column prop="daily_feed_intake" label="日采食量(kg)" :formatter="weightFormatter"></el-table-column>
<!-- 新增营养需求列 -->
<el-table-column label="营养需求" width="120">
<template #default="scope">
<el-button type="text" @click="handleViewNutrientRequirements(scope.row)">查看详情</el-button>
</template>
</el-table-column>
<!-- 新增操作列 -->
<el-table-column label="操作" width="150">
<template #default="scope">
<el-button size="small" @click="handleEditPigType(scope.row)">编辑</el-button>
<el-button size="small" type="danger" @click="handleDeletePigType(scope.row)">删除</el-button>
</template>
</el-table-column>
</el-table>
</template>
<template v-else>
<el-empty description="暂无年龄阶段数据">
<el-button type="primary" @click="handleAddPigType(props.row.id)">点击添加首个年龄阶段</el-button>
</el-empty>
</template>
</div>
</template>
</el-table-column>
@@ -112,6 +130,22 @@
@refresh="handleNutrientRequirementsRefresh"
></PigNutrientRequirementsDisplay>
</el-dialog>
<!-- 新增：年龄阶段编辑弹窗 -->
<el-dialog
v-model="showPigTypeDialog"
:title="isEditingPigType ? '编辑年龄阶段' : '添加年龄阶段'"
width="600px"
:close-on-click-modal="false"
>
<PigTypeEditor
v-if="showPigTypeDialog"
:initialData="currentPigType"
:breedId="currentBreedIdForPigType"
@save="handlePigTypeSave"
@cancel="handlePigTypeCancel"
></PigTypeEditor>
</el-dialog>
</div>
</template>
@@ -120,12 +154,14 @@ import {ref, onMounted} from 'vue';
import {FeedApi} from '../../api/feed';
import {ElMessageBox, ElMessage} from 'element-plus';
import PigNutrientRequirementsDisplay from './PigNutrientRequirementsDisplay.vue'; // 导入新的组件
import PigTypeEditor from './PigTypeEditor.vue'; // 导入年龄阶段编辑器组件
export default {
name: 'PigBreedTable',
emits: ['edit'], // 声明触发的事件
components: {
PigNutrientRequirementsDisplay, // 注册组件
PigTypeEditor, // 注册年龄阶段编辑器组件
},
setup(props, { emit }) {
const mainTable = ref(null); // el-table 的引用
@@ -140,6 +176,11 @@ export default {
const currentBreedName = ref('');
const currentAgeStageName = ref('');
const currentPigTypeId = ref(null); // 新增：用于传递给营养需求编辑器的 pigType ID
// 年龄阶段编辑弹窗相关
const showPigTypeDialog = ref(false);
const currentPigType = ref({}); // 当前编辑的年龄阶段数据
const currentBreedIdForPigType = ref(null); // 当前操作的品种ID
const isEditingPigType = ref(false); // 是否是编辑模式
const pagination = ref({
page: 1,
@@ -279,6 +320,73 @@ export default {
showNutrientDialog.value = false;
};
// 处理添加年龄阶段
const handleAddPigType = (breedId) => {
isEditingPigType.value = false;
currentPigType.value = { // 初始化新年龄阶段的数据
age_stage_name: '',
description: '',
min_days: 0,
max_days: 0,
min_weight: 0,
max_weight: 0,
daily_gain_weight: 0,
daily_feed_intake: 0,
};
currentBreedIdForPigType.value = breedId;
showPigTypeDialog.value = true;
};
// 处理编辑年龄阶段
const handleEditPigType = (pigType) => {
isEditingPigType.value = true;
currentPigType.value = { ...pigType }; // 复制一份数据进行编辑
currentBreedIdForPigType.value = pigType.breed_id;
showPigTypeDialog.value = true;
};
// 处理删除年龄阶段
const handleDeletePigType = (pigType) => {
ElMessageBox.confirm(
`确定要删除年龄阶段 "${pigType.age_stage_name}" 吗？`,
'提示',
{
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning',
}
).then(async () => {
try {
await FeedApi.deletePigType(pigType.id);
ElMessage.success('年龄阶段删除成功');
// 刷新当前展开行的 pig_types 数据
const expandedRow = tableData.value.find(item => expandRowKeys.value.includes(item.breed_id));
if (expandedRow) {
await handleExpandChange(expandedRow, [expandedRow]);
}
} catch (error) {
ElMessage.error('删除失败: ' + (error.message || '未知错误'));
}
}).catch(() => {
// 用户取消操作
});
};
// 年龄阶段编辑器保存后的回调
const handlePigTypeSave = async () => {
showPigTypeDialog.value = false;
// 刷新当前展开行的 pig_types 数据
const expandedRow = tableData.value.find(item => expandRowKeys.value.includes(currentBreedIdForPigType.value));
if (expandedRow) {
await handleExpandChange(expandedRow, [expandedRow]);
}
};
// 年龄阶段编辑器取消后的回调
const handlePigTypeCancel = () => {
showPigTypeDialog.value = false;
};
onMounted(() => {
fetchPigBreeds();
});
@@ -295,6 +403,10 @@ export default {
currentBreedName,
currentAgeStageName,
currentPigTypeId,
showPigTypeDialog,
currentPigType,
currentBreedIdForPigType,
isEditingPigType,
handleSearch,
handleSizeChange,
handleCurrentChange,
@@ -305,7 +417,12 @@ export default {
handleEdit,
handleDelete,
fetchPigBreeds, // 将方法暴露出去
handleAddPigType,
handleEditPigType,
handleDeletePigType,
handleNutrientRequirementsRefresh, // 暴露给模板
handlePigTypeSave,
handlePigTypeCancel,
};
},
};

124
src/components/feed/PigTypeEditor.vue Normal file
View File

@@ -0,0 +1,124 @@
<template>
<div class="pig-type-editor">
<el-form :model="formData" ref="formRef" label-width="120px">
<el-form-item label="年龄阶段名称" prop="age_stage_name" :rules="[{ required: true, message: '请输入年龄阶段名称', trigger: 'blur' }]">
<el-input v-model="formData.age_stage_name"></el-input>
</el-form-item>
<el-form-item label="描述" prop="description">
<el-input type="textarea" v-model="formData.description"></el-input>
</el-form-item>
<el-form-item label="最小天数" prop="min_days" :rules="[{ required: true, message: '请输入最小天数', trigger: 'blur' }]">
<el-input-number v-model="formData.min_days" :min="0" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="最大天数" prop="max_days" :rules="[{ required: true, message: '请输入最大天数', trigger: 'blur' }]">
<el-input-number v-model="formData.max_days" :min="0" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="最小体重(kg)" prop="min_weight">
<el-input-number v-model="formData.min_weight" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="最大体重(kg)" prop="max_weight">
<el-input-number v-model="formData.max_weight" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="日增重(kg)" prop="daily_gain_weight">
<el-input-number v-model="formData.daily_gain_weight" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
</el-form-item>
<el-form-item label="日采食量(kg)" prop="daily_feed_intake">
<el-input-number v-model="formData.daily_feed_intake" :min="0" :step="0.01" :precision="2" controls-position="right"></el-input-number>
</el-form-item>
</el-form>
<div class="dialog-footer">
<el-button @click="handleCancel">取消</el-button>
<el-button type="primary" @click="handleSave">保存</el-button>
</div>
</div>
</template>
<script>
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
import { FeedApi } from '../../api/feed'; // Assuming FeedApi has createPigType and updatePigType
export default {
name: 'PigTypeEditor',
props: {
initialData: {
type: Object,
default: () => ({}),
},
breedId: {
type: Number,
required: true,
},
},
emits: ['save', 'cancel'],
setup(props, { emit }) {
const formRef = ref(null);
const formData = ref({});
watch(() => props.initialData, (newData) => {
// 复制一份数据，避免直接修改props
formData.value = { ...newData };
// 将克转换为公斤显示
if (formData.value.min_weight) formData.value.min_weight /= 1000;
if (formData.value.max_weight) formData.value.max_weight /= 1000;
if (formData.value.daily_gain_weight) formData.value.daily_gain_weight /= 1000;
if (formData.value.daily_feed_intake) formData.value.daily_feed_intake /= 1000;
}, { immediate: true, deep: true });
const handleSave = () => {
formRef.value.validate(async (valid) => {
if (valid) {
try {
const dataToSave = {
breed_id: props.breedId,
age_stage_name: formData.value.age_stage_name,
description: formData.value.description,
min_days: formData.value.min_days,
max_days: formData.value.max_days,
min_weight: formData.value.min_weight * 1000, // Convert kg to g
max_weight: formData.value.max_weight * 1000, // Convert kg to g
daily_gain_weight: formData.value.daily_gain_weight * 1000, // Convert kg to g
daily_feed_intake: formData.value.daily_feed_intake * 1000, // Convert kg to g
};
if (formData.value.id) {
// 编辑现有年龄阶段
await FeedApi.updatePigType(formData.value.id, dataToSave);
ElMessage.success('年龄阶段更新成功');
} else {
// 添加新年龄阶段
await FeedApi.createPigType(dataToSave);
ElMessage.success('年龄阶段添加成功');
}
emit('save');
} catch (error) {
ElMessage.error('操作失败: ' + (error.message || '未知错误'));
}
}
});
};
const handleCancel = () => {
emit('cancel');
};
return {
formRef,
formData,
handleSave,
handleCancel,
};
},
};
</script>
<style scoped>
.pig-type-editor {
padding: 20px;
}
.dialog-footer {
margin-top: 20px;
text-align: right;
}
</style>