add 补料任务添加

src/views/admin/template/components/culture-protocol-form.vue

@@ -62,7 +62,7 @@
                   v-if="state.form.equReactorId && state.reactorOptions.find(r => r.id === state.form.equReactorId)?.needExternalPump === true"
                   label="外置泵" prop="equPumpId" min-width="100">
                   <template #default="scope">
-                    <el-select v-model="scope.row.equPumpId" placeholder="请选择外置泵" style="width: 100%" filterable
+                    <el-select v-model="scope.row.equPumpId" placeholder="请选择外置泵" style="width: 100%" clearable filterable
                       @change="() => handlePumpChange(scope.$index)">
                       <el-option v-for="item in state.pumpOptions" :key="item.id" :label="item.name" :value="item.id" />
                     </el-select>
@@ -76,7 +76,7 @@
 
                 <el-table-column label="补料培养基" prop="itemDefFeedingMediumID" min-width="200">
                   <template #default="scope">
-                    <el-select v-model="scope.row.itemDefFeedingMediumID" placeholder="请选择补料培养基" filterable
+                    <el-select v-model="scope.row.itemDefFeedingMediumID" placeholder="请选择补料培养基" clearable filterable
                       @change="() => handleMediumChange(scope.$index)" style="width: 100%">
                       <el-option v-for="item in state.mediumOptions" :key="item.id"
                         :label="item.name + ' (' + item.glucoseConc + 'g/L)' + (item.isGlucose ? ' (糖补料)' : '')"
@@ -87,7 +87,7 @@
 
                 <el-table-column label="耗材" prop="itemDefBagID" min-width="200">
                   <template #default="scope">
-                    <el-select v-model="scope.row.itemDefBagID" placeholder="请选择耗材" style="width: 100%">
+                    <el-select v-model="scope.row.itemDefBagID" placeholder="请选择耗材" clearable style="width: 100%">
                       <el-option v-for="item in state.bagOptions" :key="item.id"
                         :label="item.name + ' (下限体积: ' + item.lowerLimitVolume + 'g)'" :value="item.id" />
                     </el-select>
@@ -96,7 +96,7 @@
 
                 <el-table-column label="泵速策略" prop="configId" min-width="200">
                   <template #default="scope">
-                    <el-select v-model="scope.row.configId" placeholder="请选择泵速策略" style="width: 100%">
+                    <el-select v-model="scope.row.configId" placeholder="请选择泵速策略" clearable style="width: 100%">
                       <el-option v-for="item in state.configOptions" :key="item.id"
                         :label="item.name + (item.isTwo === 1 ? ' (二段式)' : ' (三段式)')" :value="item.id" />
                     </el-select>
@@ -110,36 +110,39 @@
           <!-- 补料任务 -->
           <el-tab-pane label="补料任务" name="tasks">
             <div class="form-section">
-              <div v-for="(task, index) in form.feedingTasks" :key="index" class="task-item">
-                <el-row :gutter="25">
-                  <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
-                    <el-form-item :label="index === 0 ? '补料泵编号' : ''"
-                      :prop="'feedingTasks.' + index + '.feedingPumpNo'">
-                      <el-input-number v-model="task.feedingPumpNo" :min="1" style="width: 100%" placeholder="泵编号" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
-                    <el-form-item :label="index === 0 ? '培养天数' : ''" :prop="'feedingTasks.' + index + '.day'">
-                      <el-input-number v-model="task.day" :min="1" style="width: 100%" placeholder="天数" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
-                    <el-form-item :label="index === 0 ? '补料时间' : ''" :prop="'feedingTasks.' + index + '.feedingTime'">
-                      <el-time-picker v-model="task.feedingTime" format="HH:mm" style="width: 100%"
-                        placeholder="补料时间" />
-                    </el-form-item>
-                  </el-col>
-                  <el-col :xs="24" :sm="6" :md="6" :lg="6" :xl="6">
-                    <el-form-item :label="index === 0 ? '补料体积' : ''" :prop="'feedingTasks.' + index + '.feedingVolume'">
-                      <el-input-number v-model="task.feedingVolume" :min="0" :precision="2" style="width: 100%"
-                        placeholder="补料体积" />
-                    </el-form-item>
-                  </el-col>
-                </el-row>
-                <el-button type="danger" icon="ele-Delete" circle @click="removeTask(index)"
-                  v-if="form.feedingTasks.length > 1" />
-              </div>
-              <el-button type="primary" icon="ele-Plus" @click="addTask">添加任务</el-button>
+              <el-tabs v-model="feedingTaskActiveTab" type="card" v-if="feedingPumpTabs.length">
+                <el-tab-pane
+                  v-for="pump in feedingPumpTabs"
+                  :key="pump.feedingPumpNo"
+                  :label="pump.feedingPumpName + (pump.mediumName ? '（' + pump.mediumName + '）' : '')"
+                  :name="String(pump.feedingPumpNo)"
+                >
+                  <el-table :data="getTasksByPumpNo(pump.feedingPumpNo)" border style="width: 100%">
+                    <el-table-column label="培养天数" prop="day" width="100">
+                      <template #default="scope">
+                        <el-input-number v-model="scope.row.day" :min="1" style="width: 100%" placeholder="天数" />
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="补料时间" prop="feedingTime" width="120">
+                      <template #default="scope">
+                        <el-time-picker v-model="scope.row.feedingTime" format="HH:mm" style="width: 100%" placeholder="补料时间" />
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="补料体积" prop="feedingVolume" width="120">
+                      <template #default="scope">
+                        <el-input-number v-model="scope.row.feedingVolume" :min="0" :precision="2" style="width: 100%" placeholder="补料体积" />
+                      </template>
+                    </el-table-column>
+                    <el-table-column label="操作" width="80">
+                      <template #default="scope">
+                        <el-button type="danger" icon="ele-Delete" circle @click="removeTaskByPump(pump.feedingPumpNo, scope.$index)" v-if="getTasksByPumpNo(pump.feedingPumpNo).length > 1" />
+                      </template>
+                    </el-table-column>
+                  </el-table>
+                  <el-button type="primary" icon="ele-Plus" class="mt-2" @click="addTaskByPump(pump.feedingPumpNo)">添加任务</el-button>
+                </el-tab-pane>
+              </el-tabs>
+              <div v-else>请先在"固定补料泵"选择补料培养基</div>
             </div>
           </el-tab-pane>
 
@@ -253,6 +256,61 @@ const state = reactive({
 const { form } = toRefs(state)
 const activeTab = ref('basic')
 const lastActiveTab = ref('basic')
+const feedingTaskActiveTab = ref('')
+
+const feedingPumpTabs = computed(() => {
+  // 只显示已选择补料培养基的泵
+  return state.form.fixedFeedingPumps
+    .filter(pump => pump.itemDefFeedingMediumID)
+    .map(pump => {
+      const medium = state.mediumOptions.find(m => m.id === pump.itemDefFeedingMediumID)
+      return {
+        feedingPumpNo: pump.feedingPumpNo,
+        feedingPumpName: pump.feedingPumpName,
+        mediumName: medium ? medium.name : ''
+      }
+    })
+})
+
+watch(
+  () => feedingPumpTabs.value,
+  (tabs) => {
+    // 自动切换到第一个tab
+    if (tabs.length && !feedingTaskActiveTab.value) {
+      feedingTaskActiveTab.value = String(tabs[0].feedingPumpNo)
+    } else if (!tabs.length) {
+      feedingTaskActiveTab.value = ''
+    }
+  },
+  { immediate: true }
+)
+
+function getTasksByPumpNo(pumpNo: number) {
+  return state.form.feedingTasks.filter(task => task.feedingPumpNo === pumpNo)
+}
+
+function addTaskByPump(pumpNo: number) {
+  state.form.feedingTasks.push({
+    id: 0,
+    cultureProtocolId: 0,
+    feedingPumpNo: pumpNo,
+    day: 0,
+    feedingTime: '',
+    feedingType: 0,
+    feedingVolumePercent: 0,
+    feedingVolume: 0
+  })
+}
+
+function removeTaskByPump(pumpNo: number, index: number) {
+  // 只移除当前泵下的第index个任务
+  const tasks = getTasksByPumpNo(pumpNo)
+  const task = tasks[index]
+  const globalIndex = state.form.feedingTasks.findIndex(t => t === task)
+  if (globalIndex !== -1) {
+    state.form.feedingTasks.splice(globalIndex, 1)
+  }
+}
 
 // 监听反应器选择变化
 watch(() => state.form.equReactorId, (newVal, oldVal) => {
@@ -379,25 +437,6 @@ const removeRule = (index: number) => {
   state.form.autoGlucoseFeedingRules.splice(index, 1)
 }
 
-// 添加任务
-const addTask = () => {
-  state.form.feedingTasks.push({
-    id: 0,
-    cultureProtocolId: 0,
-    feedingPumpNo: 0,
-    day: 0,
-    feedingTime: '',
-    feedingType: 0,
-    feedingVolumePercent: 0,
-    feedingVolume: 0
-  })
-}
-
-// 移除任务
-const removeTask = (index: number) => {
-  state.form.feedingTasks.splice(index, 1)
-}
-
 const handleTabClick = async (tab: any, event: any) => {
   if (lastActiveTab.value == 'pumps') {
 
@@ -665,7 +704,7 @@ const handleMediumChange = (index: number) => {
   }
 
   // 校验重复的补料培养基
-  const medium = state.form.fixedFeedingPumps.find(item => item.itemDefFeedingMediumID == row.itemDefFeedingMediumID && item.feedingPumpNo != row.feedingPumpNo)
+  const medium = state.form.fixedFeedingPumps.find(item => item.itemDefFeedingMediumID != undefined && item.itemDefFeedingMediumID == row.itemDefFeedingMediumID && item.feedingPumpNo != row.feedingPumpNo)
   if (medium) {
     proxy.$modal.msgWarning('补料培养基存在重复')
   }