From 2e59c07704c0c69e822894b0a504e12679a6250e Mon Sep 17 00:00:00 2001
From: HashMap <xiaojingye0817@gmail.com>
Date: Sun, 18 Jan 2026 14:50:06 +0800
Subject: [PATCH] =?UTF-8?q?feat|fix(views):=20=E5=8E=9F=E6=96=99=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E9=9D=A2=E6=9D=BF=20|=20=E4=B8=8B=E6=8B=89=E5=88=97?=
 =?UTF-8?q?=E8=A1=A8=E8=AF=B7=E6=B1=82=E9=80=BB=E8=BE=91=E4=BF=AE=E6=AD=A3?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

+ 添加原料管理面板以支持手动原料增删改
+ 对`配方管理``饲喂统计`部分有关原料列表获取函数的传参错误做出修正
    使用materialQueryParams.value, 解决引用错误导致后端无法正确收到查询参数
    这将导致分页参数被错误置为默认10，从而使下拉列表无法显示全部原料
---
 src/views/feed/FeedStatistic/index.vue     |  10 +-
 src/views/feed/FormulaManagement/index.vue | 954 +++++++++++----------
 src/views/feed/material/index.vue          | 278 ++++++
 3 files changed, 763 insertions(+), 479 deletions(-)
 create mode 100644 src/views/feed/material/index.vue

diff --git a/src/views/feed/FeedStatistic/index.vue b/src/views/feed/FeedStatistic/index.vue
index 6f2c79c..505a095 100644
--- a/src/views/feed/FeedStatistic/index.vue
+++ b/src/views/feed/FeedStatistic/index.vue
@@ -201,7 +201,7 @@
   import { listFeedStatistic, getFeedStatistic, delFeedStatistic, addFeedStatistic, updateFeedStatistic, initFeedStatistic } from "@/api/feed/FeedStatistic"
   import { listFormulaManagement } from "@/api/feed/FormulaManagement"
   import { listSheepfold } from "@/api/produce/manage_sheep/trans_group.js";
-  import { listMaterial } from "@/api/feed/Material"
+  import { listMaterial } from "@/api/feed/material"
   import { ref } from "vue";
 
   const { proxy } = getCurrentInstance()
@@ -263,10 +263,12 @@
   const materialQueryParams = ref({
     materialId: null,
     materialName: null,
-    isGranular: null
+    isGranular: null,
+    pageNum: 1,
+    pageSize: 99999
   })
   function getMaterials() {
-    listMaterial(materialQueryParams).then(response => {
+    listMaterial(materialQueryParams.value).then(response => {
       console.log("获取原料列表：", response)
       materials.value = response.rows.map(item => ({
         value: item.materialId,
@@ -282,7 +284,7 @@
 
   // 从后端获取数据并按isGranular分组
   function getGroupMaterials() {
-    listMaterial(materialQueryParams).then(response => {
+    listMaterial(materialQueryParams.value).then(response => {
       console.log("获取原料列表：", response)
 
       // 根据material_type分组数据
diff --git a/src/views/feed/FormulaManagement/index.vue b/src/views/feed/FormulaManagement/index.vue
index 06c552d..c858eb4 100644
--- a/src/views/feed/FormulaManagement/index.vue
+++ b/src/views/feed/FormulaManagement/index.vue
@@ -149,14 +149,14 @@
           <el-table-column label="序号" type="index" width="60" align="center" />
           <el-table-column label="原料编号" prop="materialId" align="center" />
           <el-table-column label="原料" align="center">
-            <el-table-column label="名称" prop="materialName" align="center"/>
+            <el-table-column label="名称" prop="materialName" align="center" />
             <el-table-column label="类型" align="center" prop="isGranular">
               <template #default="scope">
                 <dict-tag :options="material_type" :value="scope.row.isGranular" />
               </template>
             </el-table-column>
           </el-table-column>
-          <el-table-column label="比例" align="center" prop="ratio" sortable/>
+          <el-table-column label="比例" align="center" prop="ratio" sortable />
           <el-table-column label="类型" prop="isSupplement" align="center">
             <template #default="scope">
               <dict-tag :options="materialType" :value="scope.row.isSupplement" />
@@ -279,492 +279,496 @@
 </template>
 
 <script setup>
-import { listFormulaManagement, getFormulaManagement, delFormulaManagement, addFormulaManagement, updateFormulaManagement } from "@/api/feed/FormulaManagement"
-import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
-import { listFormulaList, getFormulaList, delFormulaList, addFormulaList, updateFormulaList } from "@/api/feed/FormulaList"
-import { listMaterial } from "@/api/feed/Material"
-import { fa } from "element-plus/es/locales.mjs"
-const { proxy } = getCurrentInstance()
-const { pres_status } = proxy.useDict('pres_status')
-// Data and refs
-const FormulaManagementList = ref([])
-const showFormulaManagementList = ref([])
-const FormulaDetailList = ref([])
-const open = ref(false)
-const loading = ref(true)
-const showSearch = ref(true)
-const ids = ref([])
-const single = ref(true)
-const multiple = ref(true)
-const total = ref(0)
-const title = ref("")
-const expandedRows = ref([])  // Track expanded rows
-const isView = ref(false)
+  import { listFormulaManagement, getFormulaManagement, delFormulaManagement, addFormulaManagement, updateFormulaManagement } from "@/api/feed/FormulaManagement"
+  import { ref, reactive, toRefs, getCurrentInstance } from 'vue'
+  import { listFormulaList, getFormulaList, delFormulaList, addFormulaList, updateFormulaList } from "@/api/feed/FormulaList"
+  import { listMaterial } from "@/api/feed/material"
+  import { fa } from "element-plus/es/locales.mjs"
+  const { proxy } = getCurrentInstance()
+  const { pres_status } = proxy.useDict('pres_status')
+  // Data and refs
+  const FormulaManagementList = ref([])
+  const showFormulaManagementList = ref([])
+  const FormulaDetailList = ref([])
+  const open = ref(false)
+  const loading = ref(true)
+  const showSearch = ref(true)
+  const ids = ref([])
+  const single = ref(true)
+  const multiple = ref(true)
+  const total = ref(0)
+  const title = ref("")
+  const expandedRows = ref([])  // Track expanded rows
+  const isView = ref(false)
 
-/**
- * add : 添加配方
- * update : 修改配方
- */
-const operationType = ref("") // 操作类型：add 或 update
-// 控制批号是否可编辑
-const BatchIdEditable = ref(false)
-const FormulaIdEditable = ref(false)
-// 原料下拉列表
-const materials = ref([])
-// 原料类型
-const materialType = [
-  { value: '1', label: '补饲原料' },
-  { value: '0', label: '原料' }
-]
-// 原料类型字典
-const { material_type } = proxy.useDict('material_type')
-console.log("material_type: ", material_type);
-const useStaus = [
-  { value: '1', label: '启用' },
-  { value: '0', label: '停用' }
-]
-const checkedSwPresDetail = ref([])       // 子表选中的行序号数组
+  /**
+   * add : 添加配方
+   * update : 修改配方
+   */
+  const operationType = ref("") // 操作类型：add 或 update
+  // 控制批号是否可编辑
+  const BatchIdEditable = ref(false)
+  const FormulaIdEditable = ref(false)
+  // 原料下拉列表
+  const materials = ref([])
+  // 原料类型
+  const materialType = [
+    { value: '1', label: '补饲原料' },
+    { value: '0', label: '原料' }
+  ]
+  // 原料类型字典
+  const { material_type } = proxy.useDict('material_type')
+  console.log("material_type: ", material_type);
+  const useStaus = [
+    { value: '1', label: '启用' },
+    { value: '0', label: '停用' }
+  ]
+  const checkedSwPresDetail = ref([])       // 子表选中的行序号数组
 
-const data = reactive({
-  form: {},
-  queryParams: {
-    pageNum: 1,
-    pageSize: 10,
-    feedStage: null,
-    batchId: null,
-  },
-  rules: {
-    formulaId: [
-      { required: true, message: "配方编号不能为空", trigger: "blur" }
-    ],
-    feedStage: [
-      { required: true, message: "饲养阶段不能为空", trigger: "blur" }
-    ],
-    ratio: [
-      { required: true, message: "比例不能为空", trigger: "blur" },
-    ]
-  }
-})
-
-const { queryParams, form, rules } = toRefs(data)
-
-
-const formulaForm = ref({
-  materialId: '',
-  materialName: '',
-  ratio: '',
-  isGranular: false
-})
-const formulaListOpen = ref(false)
-/** 查询配方管理列表 */
-function getList() {
-  loading.value = true
-  listFormulaManagement(queryParams.value).then(response => {
-    FormulaManagementList.value = response.rows
-    total.value = response.total
-    loading.value = false
-    console.log("配方管理列表数据：", FormulaManagementList.value)
-  })
-}
-
-// 处理展开行的变化
-function handleExpandChange(row, expandedRows) {
-  // 收起其他行
-  expandedRows.forEach(r => {
-    if (r !== row) {
-      mainTable.value.toggleRowExpansion(r, false)
+  const data = reactive({
+    form: {},
+    queryParams: {
+      pageNum: 1,
+      pageSize: 10,
+      feedStage: null,
+      batchId: null,
+    },
+    rules: {
+      formulaId: [
+        { required: true, message: "配方编号不能为空", trigger: "blur" }
+      ],
+      feedStage: [
+        { required: true, message: "饲养阶段不能为空", trigger: "blur" }
+      ],
+      ratio: [
+        { required: true, message: "比例不能为空", trigger: "blur" },
+      ]
     }
   })
 
-  // 如果是展开状态，刷新子表数据
-  const isExpanded = expandedRows.includes(row)
-  if (isExpanded) {
+  const { queryParams, form, rules } = toRefs(data)
+
+
+  const formulaForm = ref({
+    materialId: '',
+    materialName: '',
+    ratio: '',
+    isGranular: false
+  })
+  const formulaListOpen = ref(false)
+  /** 查询配方管理列表 */
+  function getList() {
     loading.value = true
-    getList();
+    listFormulaManagement(queryParams.value).then(response => {
+      FormulaManagementList.value = response.rows
+      total.value = response.total
+      loading.value = false
+      console.log("配方管理列表数据：", FormulaManagementList.value)
+    })
   }
-}
 
-// 取消按钮
-function cancel() {
-  open.value = false
-  formulaListOpen.value = false
-  formulaFormReset()
-  reset()
-}
-
-// 表单重置
-function reset() {
-  form.value = {
-    formulaId: null,
-    feedStage: null,
-    batchId: null,
-    useStartDate: null,
-    useEndDate: null,
-    useState: null,
-    remark: null
-  }
-  proxy.resetForm("FormulaManagementRef")
-}
-
-/** 搜索按钮操作 */
-function handleQuery() {
-  queryParams.value.pageNum = 1
-  getList()
-}
-
-/** 重置按钮操作 */
-function resetQuery() {
-  proxy.resetForm("queryRef")
-  handleQuery()
-}
-
-// 多选框选中数据
-function handleSelectionChange(selection) {
-  ids.value = selection.map(item => item.formulaId)
-  single.value = selection.length != 1
-  multiple.value = !selection.length
-}
-
-/** 新增按钮操作 */
-function handleAddFormulatemplate() {
-  formulaFormReset()
-  reset()
-  operationType.value = "add"
-  // 模板禁用批号编辑
-  BatchIdEditable.value = false
-  // 添加模板时配方编号可编辑
-  FormulaIdEditable.value = true
-  isView.value = false
-  // 初始化表单
-  showFormulaManagementList.value = {
-    formulaId: null,
-    // 模板批号为 0
-    batchId: "0",
-    feedStage: null,
-    useStartDate: null,
-    useEndDate: null,
-    useState: '1', // 默认启用
-    remark: null,
-    sgFormulaList: [{
-      materialId: null,
-      materialName: null,
-      ratio: null,
-      isGranular: "0",
-      isSupplement: "0"
-    }]
-  }
-  formulaListOpen.value = true
-  title.value = "添加配方管理模板"
-}
-
-/** 修改按钮操作 */
-function handleFormulaTemplateUpdate(row) {
-  reset()
-  operationType.value = "update"
-  const _id = row.formulaId || ids.value
-  BatchIdEditable.value = false // 修改时批号不可编辑
-  FormulaIdEditable.value = false // 修改时配方编号不可编辑
-  const batchId = row.batchId
-  const queryParams = {
-    formulaId: _id,
-    batchId: batchId,
-    queryType: "query"
-  }
-  listFormulaManagement(queryParams).then(response => {
-    if (response.rows && response.rows.length > 0) {
-      showFormulaManagementList.value = response.rows[0] // 取第一条记录
-    } else {
-      showFormulaManagementList.value = {}
-    }
-    formulaListOpen.value = true
-    title.value = "修改处方"
-    isView.value = false
-  })
-}
-
-/** 提交按钮 */
-function submitForm() {
-  proxy.$refs["FormulaManagementRef"].validate(valid => {
-    if (valid) {
-      if (form.value.formulaId != null) {
-        updateFormulaManagement(form.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          open.value = false
-          getList()
-        })
-      } else {
-        addFormulaManagement(form.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          open.value = false
-          getList()
-        })
+  // 处理展开行的变化
+  function handleExpandChange(row, expandedRows) {
+    // 收起其他行
+    expandedRows.forEach(r => {
+      if (r !== row) {
+        mainTable.value.toggleRowExpansion(r, false)
       }
-    }
-  })
-}
-
-/** 删除按钮操作 */
-function handleDelete(row) {
-  const _formulaIds = row.formulaId || ids.value
-  proxy.$modal.confirm('是否确认删除配方管理编号为"' + _formulaIds + '"的数据项？').then(function () {
-    return delFormulaManagement(_formulaIds)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => { })
-}
-
-/** ================= 配方列表操作 ================= */
-function handleAddSgFormulaList(row) {
-  formulaFormReset()
-  reset()
-  operationType.value = "add"
-  BatchIdEditable.value = true
-  FormulaIdEditable.value = false
-  isView.value = false
-  console.log(row.sgFormulaList)
-  // 初始化表单
-  showFormulaManagementList.value = {
-    formulaId: row.formulaId || null,
-    batchId: null,
-    feedStage: null,
-    useStartDate: null,
-    useEndDate: null,
-    useState: '1', // 默认启用
-    remark: null,
-    sgFormulaList: row.sgFormulaList || [{
-      materialId: null,
-      materialName: null,
-      ratio: null,
-      isGranular: "0",
-      isSupplement: "0"
-    }]
-  }
-  formulaListOpen.value = true
-  title.value = "添加配方"
-}
-
-/** 修改按钮操作 */
-function handleFormulaUpdate(row) {
-  formulaFormReset()
-  const _code = row.code || ids.value
-  getFormulaList(_code).then(response => {
-    formulaForm.value = response.data
-    if (formulaForm.value.isGranular === "1") {
-      formulaForm.value.isGranular = true
-    } else {
-      formulaForm.value.isGranular = false
-    }
-    console.log("formulaForm: ", formulaForm.value)
-    formulaListOpen.value = true
-    FormulaIdEditable.value = false
-    title.value = "修改配方列表"
-  })
-}
-
-/** 删除按钮操作 */
-function handleFormulaDelete(row) {
-  const _codes = row.formulaId + "/" + row.batchId
-  proxy.$modal.confirm('是否确认删除配方列表编号为"' + _codes + '"的数据项？').then(function () {
-    return delFormulaManagement(_codes)
-  }).then(() => {
-    getList()
-    proxy.$modal.msgSuccess("删除成功")
-  }).catch(() => { })
-}
-
-/** 提交按钮 */
-function submitFormulaListForm() {
-  proxy.$refs["FormulaManagementRef"].validate(valid => {
-    if (valid) {
-      if (showFormulaManagementList.value.formulaId != null && operationType.value === "update") {
-        updateFormulaManagement(showFormulaManagementList.value).then(response => {
-          proxy.$modal.msgSuccess("修改成功")
-          formulaListOpen.value = false
-          getList()
-        })
-      } else if (operationType.value === "add" && showFormulaManagementList.value.formulaId != null && showFormulaManagementList.value.batchId != null) {
-        addFormulaManagement(showFormulaManagementList.value).then(response => {
-          proxy.$modal.msgSuccess("新增成功")
-          formulaListOpen.value = false
-          getList()
-        })
-      }
-    }
-  })
-}
-
-// 原料下拉选择变化时，更新对应的原料名称
-function handleMaterialChange(row, selectedValue) {
-  const selectedItem = this.materials.find(item => item.value === selectedValue);
-  if (selectedItem) {
-    // materialName 也在 row 中
-    row.materialName = selectedItem.label;
-    row.isGranular = selectedItem.isGranular; // 更新 isGranular
-    row.isSupplement = selectedItem.isSupplement; // 更新 isSupplement
-  }
-}
-
-/**
- * 查看详情
- * 根据 id 拉取单条记录及子表数据，弹窗只读展示
- */
-function handleView(row) {
-  reset()
-  const _id = row.formulaId || ids.value
-  const batchId = row.batchId
-  const queryParams = {
-    formulaId: _id,
-    batchId: batchId,
-    queryType: "query"
-  }
-  listFormulaManagement(queryParams).then(response => {
-    if (response.rows && response.rows.length > 0) {
-      showFormulaManagementList.value = response.rows[0] // 取第一条记录
-    } else {
-      showFormulaManagementList.value = {}
-    }
-    title.value = "配方详情"
-    isView.value = true
-    formulaListOpen.value = true
-    console.log("handleView showFormulaManagementList: ", showFormulaManagementList.value);
-    console.log("handleView response: ", response);
-  })
-}
-
-/**
- * 修改按钮
- * 与查看详情共用接口，但弹窗可编辑
- */
-function handleFormulaDetailUpdate(row) {
-  reset()
-  operationType.value = "update"
-  const _id = row.formulaId || ids.value
-  BatchIdEditable.value = false // 修改时批号不可编辑
-  const batchId = row.batchId
-  const queryParams = {
-    formulaId: _id,
-    batchId: batchId,
-    queryType: "query"
-  }
-  listFormulaManagement(queryParams).then(response => {
-    if (response.rows && response.rows.length > 0) {
-      showFormulaManagementList.value = response.rows[0] // 取第一条记录
-    } else {
-      showFormulaManagementList.value = {}
-    }
-    formulaListOpen.value = true
-    title.value = "修改配方"
-    isView.value = false
-  })
-}
-
-// 添加项
-function handleAddSgFormulaListDetail() {
-  showFormulaManagementList.value.sgFormulaList.push({
-    materialId: null,
-    materialName: null,
-    ratio: null,
-    isGranular: "0",
-    isSupplement: "0"
-  })
-}
-// 删除项
-function deleteFormulaListDetail(row) {
-  const index = showFormulaManagementList.value.sgFormulaList.findIndex(item => item.index === row.index)
-  if (index !== -1) {
-    showFormulaManagementList.value.sgFormulaList.splice(index, 1)
-  }
-}
-// 表单重置
-function formulaFormReset() {
-  form.value = {
-    code: null,
-    formulaId: null,
-    materialId: null,
-    materialName: null,
-    ratio: null,
-    isGranular: null,
-    isSupplement: null
-  }
-  proxy.resetForm("FormulaListRef")
-}
-
-// 原料列表查询参数
-const materialQueryParams = ref({
-  materialId: null,
-  materialName: null,
-  isGranular: null
-})
-function getMaterials() {
-  listMaterial(materialQueryParams).then(response => {
-    console.log("获取原料列表：", response)
-    materials.value = response.rows.map(item => ({
-      value: item.materialId,
-      label: item.materialName,
-      isGranular: item.isGranular,
-      isSupplement: "0" // 默认补饲原料为 0
-    }))
-    console.log("原料列表：", materials.value)
-  })
-}
-
-/** ================== 分组下拉列表部分 ======================== */
-const groupedMaterials = ref([])  // 存储分组后的原料数据
-
-// 从后端获取数据并按isGranular分组
-function getGroupMaterials() {
-  listMaterial(materialQueryParams).then(response => {
-    console.log("获取原料列表：", response)
-
-    // 根据material_type分组数据
-    const groups = material_type.value.map(type => ({
-      label: type.label,
-      options: []
-    }))
-
-    // 遍历原料数据，根据isGranular字段分组
-    response.rows.forEach(item => {
-      const group = groups.find(group => group.label === material_type.value.find(type => type.value === item.isGranular).label)
-      group.options.push({
-        value: item.materialId,
-        label: item.materialName
-      })
     })
 
-    // 将分组后的数据赋值给groupedMaterials
-    groupedMaterials.value = groups
-    console.log("分组后的原料列表：", groupedMaterials.value)
+    // 如果是展开状态，刷新子表数据
+    const isExpanded = expandedRows.includes(row)
+    if (isExpanded) {
+      loading.value = true
+      getList();
+    }
+  }
+
+  // 取消按钮
+  function cancel() {
+    open.value = false
+    formulaListOpen.value = false
+    formulaFormReset()
+    reset()
+  }
+
+  // 表单重置
+  function reset() {
+    form.value = {
+      formulaId: null,
+      feedStage: null,
+      batchId: null,
+      useStartDate: null,
+      useEndDate: null,
+      useState: null,
+      remark: null
+    }
+    proxy.resetForm("FormulaManagementRef")
+  }
+
+  /** 搜索按钮操作 */
+  function handleQuery() {
+    queryParams.value.pageNum = 1
+    getList()
+  }
+
+  /** 重置按钮操作 */
+  function resetQuery() {
+    proxy.resetForm("queryRef")
+    handleQuery()
+  }
+
+  // 多选框选中数据
+  function handleSelectionChange(selection) {
+    ids.value = selection.map(item => item.formulaId)
+    single.value = selection.length != 1
+    multiple.value = !selection.length
+  }
+
+  /** 新增按钮操作 */
+  function handleAddFormulatemplate() {
+    formulaFormReset()
+    reset()
+    operationType.value = "add"
+    // 模板禁用批号编辑
+    BatchIdEditable.value = false
+    // 添加模板时配方编号可编辑
+    FormulaIdEditable.value = true
+    isView.value = false
+    // 初始化表单
+    showFormulaManagementList.value = {
+      formulaId: null,
+      // 模板批号为 0
+      batchId: "0",
+      feedStage: null,
+      useStartDate: null,
+      useEndDate: null,
+      useState: '1', // 默认启用
+      remark: null,
+      sgFormulaList: [{
+        materialId: null,
+        materialName: null,
+        ratio: null,
+        isGranular: "0",
+        isSupplement: "0"
+      }]
+    }
+    formulaListOpen.value = true
+    title.value = "添加配方管理模板"
+  }
+
+  /** 修改按钮操作 */
+  function handleFormulaTemplateUpdate(row) {
+    reset()
+    operationType.value = "update"
+    const _id = row.formulaId || ids.value
+    BatchIdEditable.value = false // 修改时批号不可编辑
+    FormulaIdEditable.value = false // 修改时配方编号不可编辑
+    const batchId = row.batchId
+    const queryParams = {
+      formulaId: _id,
+      batchId: batchId,
+      queryType: "query"
+    }
+    listFormulaManagement(queryParams).then(response => {
+      if (response.rows && response.rows.length > 0) {
+        showFormulaManagementList.value = response.rows[0] // 取第一条记录
+      } else {
+        showFormulaManagementList.value = {}
+      }
+      formulaListOpen.value = true
+      title.value = "修改处方"
+      isView.value = false
+    })
+  }
+
+  /** 提交按钮 */
+  function submitForm() {
+    proxy.$refs["FormulaManagementRef"].validate(valid => {
+      if (valid) {
+        if (form.value.formulaId != null) {
+          updateFormulaManagement(form.value).then(response => {
+            proxy.$modal.msgSuccess("修改成功")
+            open.value = false
+            getList()
+          })
+        } else {
+          addFormulaManagement(form.value).then(response => {
+            proxy.$modal.msgSuccess("新增成功")
+            open.value = false
+            getList()
+          })
+        }
+      }
+    })
+  }
+
+  /** 删除按钮操作 */
+  function handleDelete(row) {
+    const _formulaIds = row.formulaId || ids.value
+    proxy.$modal.confirm('是否确认删除配方管理编号为"' + _formulaIds + '"的数据项？').then(function () {
+      return delFormulaManagement(_formulaIds)
+    }).then(() => {
+      getList()
+      proxy.$modal.msgSuccess("删除成功")
+    }).catch(() => { })
+  }
+
+  /** ================= 配方列表操作 ================= */
+  function handleAddSgFormulaList(row) {
+    formulaFormReset()
+    reset()
+    operationType.value = "add"
+    BatchIdEditable.value = true
+    FormulaIdEditable.value = false
+    isView.value = false
+    console.log(row.sgFormulaList)
+    // 初始化表单
+    showFormulaManagementList.value = {
+      formulaId: row.formulaId || null,
+      batchId: null,
+      feedStage: null,
+      useStartDate: null,
+      useEndDate: null,
+      useState: '1', // 默认启用
+      remark: null,
+      sgFormulaList: row.sgFormulaList || [{
+        materialId: null,
+        materialName: null,
+        ratio: null,
+        isGranular: "0",
+        isSupplement: "0"
+      }]
+    }
+    formulaListOpen.value = true
+    title.value = "添加配方"
+  }
+
+  /** 修改按钮操作 */
+  function handleFormulaUpdate(row) {
+    formulaFormReset()
+    const _code = row.code || ids.value
+    getFormulaList(_code).then(response => {
+      formulaForm.value = response.data
+      if (formulaForm.value.isGranular === "1") {
+        formulaForm.value.isGranular = true
+      } else {
+        formulaForm.value.isGranular = false
+      }
+      console.log("formulaForm: ", formulaForm.value)
+      formulaListOpen.value = true
+      FormulaIdEditable.value = false
+      title.value = "修改配方列表"
+    })
+  }
+
+  /** 删除按钮操作 */
+  function handleFormulaDelete(row) {
+    const _codes = row.formulaId + "/" + row.batchId
+    proxy.$modal.confirm('是否确认删除配方列表编号为"' + _codes + '"的数据项？').then(function () {
+      return delFormulaManagement(_codes)
+    }).then(() => {
+      getList()
+      proxy.$modal.msgSuccess("删除成功")
+    }).catch(() => { })
+  }
+
+  /** 提交按钮 */
+  function submitFormulaListForm() {
+    proxy.$refs["FormulaManagementRef"].validate(valid => {
+      if (valid) {
+        if (showFormulaManagementList.value.formulaId != null && operationType.value === "update") {
+          updateFormulaManagement(showFormulaManagementList.value).then(response => {
+            proxy.$modal.msgSuccess("修改成功")
+            formulaListOpen.value = false
+            getList()
+          })
+        } else if (operationType.value === "add" && showFormulaManagementList.value.formulaId != null && showFormulaManagementList.value.batchId != null) {
+          addFormulaManagement(showFormulaManagementList.value).then(response => {
+            proxy.$modal.msgSuccess("新增成功")
+            formulaListOpen.value = false
+            getList()
+          })
+        }
+      }
+    })
+  }
+
+  // 原料下拉选择变化时，更新对应的原料名称
+  function handleMaterialChange(row, selectedValue) {
+    const selectedItem = this.materials.find(item => item.value === selectedValue);
+    if (selectedItem) {
+      // materialName 也在 row 中
+      row.materialName = selectedItem.label;
+      row.isGranular = selectedItem.isGranular; // 更新 isGranular
+      row.isSupplement = selectedItem.isSupplement; // 更新 isSupplement
+    }
+  }
+
+  /**
+   * 查看详情
+   * 根据 id 拉取单条记录及子表数据，弹窗只读展示
+   */
+  function handleView(row) {
+    reset()
+    const _id = row.formulaId || ids.value
+    const batchId = row.batchId
+    const queryParams = {
+      formulaId: _id,
+      batchId: batchId,
+      queryType: "query"
+    }
+    listFormulaManagement(queryParams).then(response => {
+      if (response.rows && response.rows.length > 0) {
+        showFormulaManagementList.value = response.rows[0] // 取第一条记录
+      } else {
+        showFormulaManagementList.value = {}
+      }
+      title.value = "配方详情"
+      isView.value = true
+      formulaListOpen.value = true
+      console.log("handleView showFormulaManagementList: ", showFormulaManagementList.value);
+      console.log("handleView response: ", response);
+    })
+  }
+
+  /**
+   * 修改按钮
+   * 与查看详情共用接口，但弹窗可编辑
+   */
+  function handleFormulaDetailUpdate(row) {
+    reset()
+    operationType.value = "update"
+    const _id = row.formulaId || ids.value
+    BatchIdEditable.value = false // 修改时批号不可编辑
+    const batchId = row.batchId
+    const queryParams = {
+      formulaId: _id,
+      batchId: batchId,
+      queryType: "query"
+    }
+    listFormulaManagement(queryParams).then(response => {
+      if (response.rows && response.rows.length > 0) {
+        showFormulaManagementList.value = response.rows[0] // 取第一条记录
+      } else {
+        showFormulaManagementList.value = {}
+      }
+      formulaListOpen.value = true
+      title.value = "修改配方"
+      isView.value = false
+    })
+  }
+
+  // 添加项
+  function handleAddSgFormulaListDetail() {
+    showFormulaManagementList.value.sgFormulaList.push({
+      materialId: null,
+      materialName: null,
+      ratio: null,
+      isGranular: "0",
+      isSupplement: "0"
+    })
+  }
+  // 删除项
+  function deleteFormulaListDetail(row) {
+    const index = showFormulaManagementList.value.sgFormulaList.findIndex(item => item.index === row.index)
+    if (index !== -1) {
+      showFormulaManagementList.value.sgFormulaList.splice(index, 1)
+    }
+  }
+  // 表单重置
+  function formulaFormReset() {
+    form.value = {
+      code: null,
+      formulaId: null,
+      materialId: null,
+      materialName: null,
+      ratio: null,
+      isGranular: null,
+      isSupplement: null
+    }
+    proxy.resetForm("FormulaListRef")
+  }
+
+  // 原料列表查询参数
+  const materialQueryParams = ref({
+    pageNum: 1,
+    pageSize: 30,
+    materialId: null,
+    materialName: null,
+    isGranular: null
   })
-}
+  function getMaterials() {
+    listMaterial(materialQueryParams.value).then(response => {
+      materials.value = response.rows.map(item => ({
+        value: item.materialId,
+        label: item.materialName,
+        isGranular: item.isGranular,
+        isSupplement: "0" // 默认补饲原料为 0
+      }))
+      console.log("原料列表：", materials.value)
+    })
+  }
 
-/**
- * 子表多选回调
- * 记录被选中的行序号数组
- */
-function handleSgFormulaListDetailSelectionChange(selection) {
-  checkedSwPresDetail.value = selection.map(item => item.index)
-}
-/**
- * 子表行序号计算
- * 通过 el-table 的 row-class-name 钩子给每一行写入 index（从 1 开始）
- */
-function rowSgFormulaListDetailIndex({ row, rowIndex }) {
-  row.index = rowIndex + 1
-}
+  /** ================== 分组下拉列表部分 ======================== */
+  const groupedMaterials = ref([])  // 存储分组后的原料数据
 
-/** ================================= */
-/** 导出按钮操作 */
-function handleExport() {
-  proxy.download('feed/FormulaManagement/export', {
-    ...queryParams.value
-  }, `FormulaManagement_${new Date().getTime()}.xlsx`)
-}
+  // 从后端获取数据并按isGranular分组
+  function getGroupMaterials() {
+    listMaterial(materialQueryParams.value).then(response => {
+      console.log("获取原料列表：", response)
 
-// 初始化加载数据
-getList()
-// 加载原料列表
-getMaterials()
-// 加载分组原料列表
-getGroupMaterials()
+      const groups = material_type.value.map(type => ({
+        label: type.label,
+        value: type.value,
+        options: []
+      }))
+      console.log("初始化分组：", groups)
+      response.rows.forEach(item => {
+        const group = groups.find(
+          g => String(g.value) === String(item.isGranular)
+        )
+        if (group) {
+          group.options.push({
+            value: item.materialId,
+            label: item.materialName
+          })
+        }
+      })
+
+      // 将分组后的数据赋值给groupedMaterials
+      groupedMaterials.value = groups
+      console.log("分组后的原料列表：", groupedMaterials.value)
+    })
+  }
+
+  /**
+   * 子表多选回调
+   * 记录被选中的行序号数组
+   */
+  function handleSgFormulaListDetailSelectionChange(selection) {
+    checkedSwPresDetail.value = selection.map(item => item.index)
+  }
+  /**
+   * 子表行序号计算
+   * 通过 el-table 的 row-class-name 钩子给每一行写入 index（从 1 开始）
+   */
+  function rowSgFormulaListDetailIndex({ row, rowIndex }) {
+    row.index = rowIndex + 1
+  }
+
+  /** ================================= */
+  /** 导出按钮操作 */
+  function handleExport() {
+    proxy.download('feed/FormulaManagement/export', {
+      ...queryParams.value
+    }, `FormulaManagement_${new Date().getTime()}.xlsx`)
+  }
+
+  // 初始化加载数据
+  getList()
+  // 加载原料列表
+  getMaterials()
+  // 加载分组原料列表
+  getGroupMaterials()
 </script>
diff --git a/src/views/feed/material/index.vue b/src/views/feed/material/index.vue
new file mode 100644
index 0000000..8c80dd1
--- /dev/null
+++ b/src/views/feed/material/index.vue
@@ -0,0 +1,278 @@
+<template>
+  <div class="app-container">
+    <el-form :model="queryParams" ref="queryRef" :inline="true" v-show="showSearch" label-width="68px">
+      <el-form-item label="原料编码" prop="materialId">
+        <el-input
+          v-model="queryParams.materialId"
+          placeholder="请输入原料编码"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="原料名称" prop="materialName">
+        <el-input
+          v-model="queryParams.materialName"
+          placeholder="请输入原料名称"
+          clearable
+          @keyup.enter="handleQuery"
+        />
+      </el-form-item>
+      <el-form-item label="颗粒料" prop="isGranular">
+        <el-select v-model="queryParams.isGranular" placeholder="请选择颗粒料" clearable>
+          <el-option
+            v-for="dict in material_type"
+            :key="dict.value"
+            :label="dict.label"
+            :value="dict.value"
+          />
+        </el-select>
+      </el-form-item>
+      <el-form-item>
+        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
+        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <el-row :gutter="10" class="mb8">
+      <el-col :span="1.5">
+        <el-button
+          type="primary"
+          plain
+          icon="Plus"
+          @click="handleAdd"
+          v-hasPermi="['feed:material:add']"
+        >新增</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="success"
+          plain
+          icon="Edit"
+          :disabled="single"
+          @click="handleUpdate"
+          v-hasPermi="['feed:material:edit']"
+        >修改</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="danger"
+          plain
+          icon="Delete"
+          :disabled="multiple"
+          @click="handleDelete"
+          v-hasPermi="['feed:material:remove']"
+        >删除</el-button>
+      </el-col>
+      <el-col :span="1.5">
+        <el-button
+          type="warning"
+          plain
+          icon="Download"
+          @click="handleExport"
+          v-hasPermi="['feed:material:export']"
+        >导出</el-button>
+      </el-col>
+      <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
+    </el-row>
+
+    <el-table v-loading="loading" :data="materialList" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column label="原料编码" align="center" prop="materialId" />
+      <el-table-column label="原料名称" align="center" prop="materialName" />
+      <el-table-column label="颗粒料" align="center" prop="isGranular">
+        <template #default="scope">
+          <dict-tag :options="material_type" :value="scope.row.isGranular"/>
+        </template>
+      </el-table-column>
+      <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
+        <template #default="scope">
+          <el-button link type="primary" icon="Edit" @click="handleUpdate(scope.row)" v-hasPermi="['feed:material:edit']">修改</el-button>
+          <el-button link type="primary" icon="Delete" @click="handleDelete(scope.row)" v-hasPermi="['feed:material:remove']">删除</el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+    
+    <pagination
+      v-show="total>0"
+      :total="total"
+      v-model:page="queryParams.pageNum"
+      v-model:limit="queryParams.pageSize"
+      @pagination="getList"
+    />
+
+    <!-- 添加或修改原料对话框 -->
+    <el-dialog :title="title" v-model="open" width="500px" append-to-body>
+      <el-form ref="materialRef" :model="form" :rules="rules" label-width="80px">
+        <el-form-item label="原料编码" prop="materialId">
+          <el-input v-model="form.materialId" placeholder="请输入原料编码" :disabled="option==='edit'"/>
+        </el-form-item>
+        <el-form-item label="原料名称" prop="materialName">
+          <el-input v-model="form.materialName" placeholder="请输入原料名称" />
+        </el-form-item>
+        <el-form-item label="颗粒料" prop="isGranular">
+          <el-select v-model="form.isGranular" placeholder="请选择颗粒料">
+            <el-option
+              v-for="dict in material_type"
+              :key="dict.value"
+              :label="dict.label"
+              :value="parseInt(dict.value)"
+            ></el-option>
+          </el-select>
+        </el-form-item>
+      </el-form>
+      <template #footer>
+        <div class="dialog-footer">
+          <el-button type="primary" @click="submitForm">确 定</el-button>
+          <el-button @click="cancel">取 消</el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
+</template>
+
+<script setup name="Material">
+import { listMaterial, getMaterial, delMaterial, addMaterial, updateMaterial } from "@/api/feed/material"
+
+const { proxy } = getCurrentInstance()
+const { material_type } = proxy.useDict('material_type')
+
+const materialList = ref([])
+const open = ref(false)
+const loading = ref(true)
+const showSearch = ref(true)
+const ids = ref([])
+const single = ref(true)
+const multiple = ref(true)
+const total = ref(0)
+const title = ref("")
+
+const option = ref("")
+
+const data = reactive({
+  form: {},
+  queryParams: {
+    pageNum: 1,
+    pageSize: 10,
+    materialId: null,
+    materialName: null,
+    isGranular: null
+  },
+  rules: {
+    materialId: [
+      { required: true, message: "原料编码不能为空", trigger: "blur" }
+    ],
+    materialName: [
+      { required: true, message: "原料名称不能为空", trigger: "blur" }
+    ],
+  }
+})
+
+const { queryParams, form, rules } = toRefs(data)
+
+/** 查询原料列表 */
+function getList() {
+  loading.value = true
+  listMaterial(queryParams.value).then(response => {
+    materialList.value = response.rows
+    total.value = response.total
+    loading.value = false
+  })
+}
+
+// 取消按钮
+function cancel() {
+  open.value = false
+  reset()
+}
+
+// 表单重置
+function reset() {
+  form.value = {
+    materialId: null,
+    materialName: null,
+    isGranular: null
+  }
+  proxy.resetForm("materialRef")
+  option.value = ""
+}
+
+/** 搜索按钮操作 */
+function handleQuery() {
+  queryParams.value.pageNum = 1
+  getList()
+}
+
+/** 重置按钮操作 */
+function resetQuery() {
+  proxy.resetForm("queryRef")
+  handleQuery()
+}
+
+// 多选框选中数据
+function handleSelectionChange(selection) {
+  ids.value = selection.map(item => item.materialId)
+  single.value = selection.length != 1
+  multiple.value = !selection.length
+}
+
+/** 新增按钮操作 */
+function handleAdd() {
+  reset()
+  open.value = true
+  title.value = "添加原料"
+  option.value = "add"
+}
+
+/** 修改按钮操作 */
+function handleUpdate(row) {
+  reset()
+  const _materialId = row.materialId || ids.value
+  option.value = "edit"
+  getMaterial(_materialId).then(response => {
+    form.value = response.data
+    open.value = true
+    title.value = "修改原料"
+  })
+}
+
+/** 提交按钮 */
+function submitForm() {
+  proxy.$refs["materialRef"].validate(valid => {
+    if (valid) {
+      if (option.value === "edit") {
+        updateMaterial(form.value).then(response => {
+          proxy.$modal.msgSuccess("修改成功")
+          open.value = false
+          getList()
+        })
+      } else if(option.value === "add") {
+        addMaterial(form.value).then(response => {
+          proxy.$modal.msgSuccess("新增成功")
+          open.value = false
+          getList()
+        })
+      }
+    }
+  })
+}
+
+/** 删除按钮操作 */
+function handleDelete(row) {
+  const _materialIds = row.materialId || ids.value
+  proxy.$modal.confirm('是否确认删除原料编号为"' + _materialIds + '"的数据项？').then(function() {
+    return delMaterial(_materialIds)
+  }).then(() => {
+    getList()
+    proxy.$modal.msgSuccess("删除成功")
+  }).catch(() => {})
+}
+
+/** 导出按钮操作 */
+function handleExport() {
+  proxy.download('feed/material/export', {
+    ...queryParams.value
+  }, `material_${new Date().getTime()}.xlsx`)
+}
+
+getList()
+</script>