营养管理接口
This commit is contained in:
103
src/components/feed/NutrientForm.vue
Normal file
103
src/components/feed/NutrientForm.vue
Normal file
@@ -0,0 +1,103 @@
|
||||
<template>
|
||||
<el-form :model="formData" :rules="rules" ref="formRef" label-width="100px">
|
||||
<el-form-item label="营养名称" prop="name">
|
||||
<el-input v-model="formData.name" placeholder="请输入营养名称"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="描述" prop="description">
|
||||
<el-input
|
||||
v-model="formData.description"
|
||||
type="textarea"
|
||||
:rows="3"
|
||||
placeholder="请输入营养描述"
|
||||
></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button type="primary" @click="submitForm">提交</el-button>
|
||||
<el-button @click="cancelForm">取消</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { ref, reactive, watch } from 'vue';
|
||||
import { ElMessage } from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: 'NutrientForm',
|
||||
props: {
|
||||
isEdit: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
initialData: {
|
||||
type: Object,
|
||||
default: () => ({
|
||||
name: '',
|
||||
description: '',
|
||||
}),
|
||||
},
|
||||
},
|
||||
emits: ['submit', 'cancel'],
|
||||
setup(props, { emit }) {
|
||||
const formRef = ref(null);
|
||||
const formData = reactive({
|
||||
name: '',
|
||||
description: '',
|
||||
});
|
||||
|
||||
// 监听 initialData 变化，用于编辑模式下初始化表单
|
||||
watch(
|
||||
() => props.initialData,
|
||||
(newVal) => {
|
||||
if (newVal) {
|
||||
formData.name = newVal.name || '';
|
||||
formData.description = newVal.description || '';
|
||||
}
|
||||
},
|
||||
{ immediate: true, deep: true }
|
||||
);
|
||||
|
||||
const rules = {
|
||||
name: [
|
||||
{ required: true, message: '请输入营养名称', trigger: 'blur' },
|
||||
{ min: 2, max: 50, message: '长度在 2 到 50 个字符', trigger: 'blur' },
|
||||
],
|
||||
};
|
||||
|
||||
const submitForm = () => {
|
||||
formRef.value.validate((valid) => {
|
||||
if (valid) {
|
||||
emit('submit', { ...formData });
|
||||
} else {
|
||||
ElMessage.error('请检查表单项');
|
||||
return false;
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const cancelForm = () => {
|
||||
emit('cancel');
|
||||
resetForm();
|
||||
};
|
||||
|
||||
const resetForm = () => {
|
||||
formRef.value.resetFields();
|
||||
// 手动重置 formData，因为 resetFields 不会重置未绑定 prop 的字段
|
||||
formData.name = '';
|
||||
formData.description = '';
|
||||
};
|
||||
|
||||
return {
|
||||
formRef,
|
||||
formData,
|
||||
rules,
|
||||
submitForm,
|
||||
cancelForm,
|
||||
resetForm,
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
155
src/components/feed/NutrientTable.vue
Normal file
155
src/components/feed/NutrientTable.vue
Normal file
@@ -0,0 +1,155 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索区域 -->
|
||||
<div style="margin-bottom: 20px; display: flex; align-items: center; gap: 10px;">
|
||||
<el-select v-model="searchType" placeholder="请选择搜索类型" style="width: 150px;">
|
||||
<el-option label="按营养名称" value="name"></el-option>
|
||||
<!-- 根据接口定义，也可以按 raw_material_name 搜索，但目前界面上只提供按营养名称搜索 -->
|
||||
<!-- <el-option label="按原料名称" value="raw_material_name"></el-option> -->
|
||||
</el-select>
|
||||
<el-input
|
||||
v-model="searchKeyword"
|
||||
placeholder="请输入关键词"
|
||||
clearable
|
||||
style="width: 300px;"
|
||||
@keyup.enter="handleSearch"
|
||||
></el-input>
|
||||
<el-button type="primary" @click="handleSearch">搜索</el-button>
|
||||
</div>
|
||||
|
||||
<!-- 营养列表 -->
|
||||
<el-table :data="tableData" style="width: 100%" v-loading="loading" row-key="id">
|
||||
<el-table-column prop="id" label="ID" width="80"></el-table-column>
|
||||
<el-table-column prop="name" label="营养名称"></el-table-column>
|
||||
<el-table-column prop="description" label="描述"></el-table-column>
|
||||
<el-table-column label="操作" width="180">
|
||||
<template #default="scope">
|
||||
<el-button size="small" @click="handleEdit(scope.row)">编辑</el-button>
|
||||
<el-button size="small" type="danger" @click="handleDelete(scope.row)">删除</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<!-- 分页 -->
|
||||
<el-pagination
|
||||
style="margin-top: 20px;"
|
||||
:current-page="pagination.page"
|
||||
:page-size="pagination.page_size"
|
||||
:total="pagination.total"
|
||||
layout="total, sizes, prev, pager, next, jumper"
|
||||
@size-change="handleSizeChange"
|
||||
@current-change="handleCurrentChange"
|
||||
></el-pagination>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import {ref, onMounted} from 'vue';
|
||||
import {FeedApi} from '../../api/feed';
|
||||
import {ElMessageBox, ElMessage} from 'element-plus';
|
||||
|
||||
export default {
|
||||
name: 'NutrientTable',
|
||||
emits: ['edit'], // 声明触发的事件
|
||||
setup(props, { emit }) {
|
||||
const tableData = ref([]);
|
||||
const loading = ref(false);
|
||||
const searchKeyword = ref('');
|
||||
const searchType = ref('name'); // 默认按营养名称搜索
|
||||
|
||||
const pagination = ref({
|
||||
page: 1,
|
||||
page_size: 10,
|
||||
total: 0,
|
||||
});
|
||||
|
||||
const fetchNutrients = async () => {
|
||||
loading.value = true;
|
||||
try {
|
||||
const params = {
|
||||
page: pagination.value.page,
|
||||
page_size: pagination.value.page_size,
|
||||
};
|
||||
|
||||
if (searchKeyword.value) {
|
||||
params[searchType.value] = searchKeyword.value;
|
||||
}
|
||||
|
||||
const response = await FeedApi.getNutrients(params);
|
||||
|
||||
if (response.data) {
|
||||
tableData.value = response.data.list;
|
||||
pagination.value.total = response.data.pagination.total;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('获取营养列表失败:', error);
|
||||
ElMessage.error('获取营养列表失败');
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleSearch = () => {
|
||||
pagination.value.page = 1;
|
||||
fetchNutrients();
|
||||
};
|
||||
|
||||
const handleSizeChange = (size) => {
|
||||
pagination.value.page_size = size;
|
||||
fetchNutrients();
|
||||
};
|
||||
|
||||
const handleCurrentChange = (page) => {
|
||||
pagination.value.page = page;
|
||||
fetchNutrients();
|
||||
};
|
||||
|
||||
const handleEdit = (row) => {
|
||||
emit('edit', row); // 触发 edit 事件，并传递当前行数据
|
||||
};
|
||||
|
||||
const handleDelete = (row) => {
|
||||
ElMessageBox.confirm(
|
||||
`确定要删除营养 "${row.name}" 吗？`,
|
||||
'提示',
|
||||
{
|
||||
confirmButtonText: '确定',
|
||||
cancelButtonText: '取消',
|
||||
type: 'warning',
|
||||
}
|
||||
).then(async () => {
|
||||
try {
|
||||
await FeedApi.deleteNutrient(row.id);
|
||||
ElMessage.success('删除成功');
|
||||
await fetchNutrients();
|
||||
} catch (error) {
|
||||
ElMessage.error('删除失败: ' + (error.message || '未知错误'));
|
||||
}
|
||||
}).catch(() => {
|
||||
// 用户取消操作
|
||||
});
|
||||
};
|
||||
|
||||
onMounted(() => {
|
||||
fetchNutrients();
|
||||
});
|
||||
|
||||
return {
|
||||
tableData,
|
||||
loading,
|
||||
searchKeyword,
|
||||
searchType,
|
||||
pagination,
|
||||
handleSearch,
|
||||
handleSizeChange,
|
||||
handleCurrentChange,
|
||||
handleEdit,
|
||||
handleDelete,
|
||||
fetchNutrients, // 将方法暴露出去
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
</style>
|
||||
Reference in New Issue
Block a user