feat(display_schedule): 新增：合并陈列计划和档期计划在同一个菜单，用 tab 区分，并完成了陈列计划的接口调用对接完成

src/api/promotion/display.js

@@ -6,3 +6,14 @@ export function getDisplayList(params) {
     params
   });
 }
+
+// 填报-陈列计划
+export function submitDisplayPlan(data) {
+  return request({
+    url: `/operation/sales/ap_display/core/${data.id}`,
+    method: 'PUT',
+    data: {
+      display: data
+    }
+  });
+}

src/views/promotion/display/index.vue → src/views/promotion/display_schedule/index.vue

 <template>
   <div class="app-container">
     <div class="container">
-      <el-row>
-        <el-form-item label="操作类型">
-          <el-radio-group v-model="operation"
-            @change="checkTableColumns">
-            <el-radio-button label="全部列"
-              value="全部列" />
-            <el-radio-button label="填报列"
-              value="填报列" />
-          </el-radio-group>
-        </el-form-item>
-        <right-toolbar v-model:showSearch="showSearch"
-          @queryTable="getTableList()"
-          :columns="chooseColumns"
-          :showColumnsType="operation === '全部列' ? 'tree' : 'checkbox'"
-          :defaultCheckedKeys="visibleProps">
-        </right-toolbar>
-      </el-row>
-      <!-- 筛选列组的按钮 -->
-      <el-table :data="tableData"
-        border
-        :scroll-x="'max-content'"
-        class="auto-fit-header-table"
-        fit
-        :loading="isLoading">
-        <el-table-column v-for="col in tableColumns"
-          :label="col.label"
-          align="center"
-          :min-width="getColumnMinWidth(col)"
-          show-overflow-tooltip>
-          <template #default="{ row }">
-            <div v-if="col.type === 'select'">
-              <!-- 实际主货架-数量（要根据实际主货架-形式不为空时才可以选择否则为 0） -->
-              <div v-if="col.prop === 'actualMainShelfQty'">
-                <el-select :disabled="!row.actualMainShelfType"
-                  v-model="row[col.prop]"
-                  placeholder="请选择"
-                  clearable>
-                  <el-option v-for="item in col.options"
-                    :key="item.value"
-                    :label="item.label"
-                    :value="item.value" />
-                </el-select>
-              </div>
-              <el-select v-else
-                v-model="row[col.prop]"
-                placeholder="请选择"
-                clearable>
-                <el-option v-for="item in col.options"
-                  :key="item.value"
-                  :label="item.label"
-                  :value="item.value" />
-              </el-select>
-            </div>
-            <!-- 公式计算 -->
-            <div v-else-if="col.type === 'formula'">
-              {{ col.func(row) }}
-            </div>
-            <!-- 输入框 -->
-            <div v-else-if="col.type === 'input'">
-              <el-input v-model="row[col.prop]"
-                placeholder="请输入"
-                @input="col.func(row)" />
-            </div>
-            <!-- 为其他类型或未定义类型提供默认显示 -->
-            <div v-else>
-              {{ row[col.prop] || '-' }}
-            </div>
-          </template>
-        </el-table-column>
-      </el-table>
+      <el-tabs v-model="activeName"
+        type="card"
+        class="demo-tabs"
+        @tab-click="handleClickTabs">
+        <el-tab-pane label="陈列计划"
+          name="陈列计划">
+          <el-row>
+            <el-form-item label="操作类型">
+              <el-radio-group v-model="operation"
+                @change="checkTableColumns">
+                <el-radio-button label="全部列"
+                  value="全部列" />
+                <el-radio-button label="填报列"
+                  value="填报列" />
+              </el-radio-group>
+            </el-form-item>
+            <right-toolbar v-model:showSearch="showSearch"
+              @queryTable="getTableList()"
+              :columns="chooseColumns"
+              :showColumnsType="operation === '全部列' ? 'tree' : 'checkbox'"
+              :defaultCheckedKeys="visibleProps">
+            </right-toolbar>
+          </el-row>
+          <!-- 筛选列组的按钮 -->
+          <el-table :data="tableData"
+            height="100%"
+            border
+            :scroll-x="'max-content'"
+            class="auto-fit-header-table"
+            fit
+            v-loading="isLoading">
+            <el-table-column v-for="col in tableColumns"
+              :label="col.label"
+              align="center"
+              :min-width="getColumnMinWidth(col)"
+              show-overflow-tooltip>
+              <template #header="{ column }">
+                <!-- 只为特定列添加问号图标 -->
+                <span class="formula-column">
+                  {{ column.label }}
+                  <el-tooltip v-if="col.type === 'formula'"
+                    :content="col.formulaStr"
+                    placement="top">
+                    <el-icon><question-filled /></el-icon>
+                  </el-tooltip>
+                </span>
+              </template>
+              <template #default="{ row }">
+                <div v-if="col.type === 'select'">
+                  <!-- 实际主货架-数量（要根据实际主货架-形式不为空时才可以选择否则为 0） -->
+                  <div v-if="col.prop === 'actualMainShelfQty'">
+                    <el-select :disabled="!row.actualMainShelfType"
+                      v-model="row[col.prop]"
+                      placeholder="请选择"
+                      clearable
+                      @change="submitChange(row, col)">
+                      <el-option v-for="item in col.options"
+                        :key="item.value"
+                        :label="item.label"
+                        :value="item.value" />
+                    </el-select>
+                  </div>
+                  <el-select v-else
+                    v-model="row[col.prop]"
+                    placeholder="请选择"
+                    clearable
+                    @change="submitChange(row, col)">
+                    <el-option v-for="item in col.options"
+                      :key="item.value"
+                      :label="item.label"
+                      :value="item.value" />
+                  </el-select>
+                </div>
+                <!-- 公式计算 -->
+                <div v-else-if="col.type === 'formula'">
+                  {{ col.func(row) }}
+                </div>
+                <!-- 输入框 -->
+                <div v-else-if="col.type === 'input'">
+                  <el-input v-model="row[col.prop]"
+                    placeholder="请输入"
+                    @input="submitChange(row, col)" />
+                </div>
+                <!-- 为其他类型或未定义类型提供默认显示 -->
+                <div v-else>
+                  {{ row[col.prop] || '-' }}
+                </div>
+              </template>
+            </el-table-column>
+          </el-table>
+          <!-- 分页 -->
+          <pagination :total="total"
+            v-model:page="params.pageNum"
+            v-model:limit="params.pageSize"
+            @pagination="getTableList" />
+        </el-tab-pane>
+        <el-tab-pane label="档期计划"
+          name="档期计划">Config</el-tab-pane>
+      </el-tabs>
     </div>
   </div>
 </template>
 
 <script setup>
-import { getDisplayList } from '@/api'
+import { getDisplayList, submitDisplayPlan } from '@/api'
+
+const activeName = ref('陈列计划');
+const handleClickTabs = (tab) => {
+  activeName.value = tab.name;
+}
+
 /*************** 操作类型 ***************/
 const operation = ref('全部列');
 
@@ -161,7 +196,8 @@ const baseColumns = ref([
         func: (row) => {
           row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
           return row.actualMainShelfExecuted;
-        }
+        },
+        formulaStr: '公式：（实际主货架形式 >= 计划主货架形式）并且（实际主货架数量 >= 计划主货架数量）',
       },
       { label: "计划端架-数量", prop: "plannedEndCapQty", visible: true },
       { label: "计划端架-总费用", prop: "plannedEndCapTotalCost", visible: true },
@@ -186,7 +222,8 @@ const baseColumns = ref([
         func: (row) => {
           row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
           return row.actualEndCapExecuted;
-        }
+        },
+        formulaStr: '公式：（实际端架数量 >= 计划端架数量）',
       },
       {
         label: "计划地堆-平米数（㎡）",
@@ -242,7 +279,8 @@ const baseColumns = ref([
         func: (row) => {
           row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
           return row.actualFloorStackExecuted;
-        }
+        },
+        formulaStr: '公式：（实际地堆平米数 >= 计划地堆平米数）并且（实际地堆数量 >= 计划地堆数量）',
       },
       { label: "计划多点陈列-数量+形式", prop: "plannedMultiDisplay", visible: true },
       { label: "计划多点陈列-总费用", prop: "plannedMultiDisplayTotalCost", visible: true },
@@ -292,10 +330,11 @@ const baseColumns = ref([
 ]);
 // 填报列
 const fillColumns = ref([
-  { label: "经销商名称", prop: "dealerName", visible: true },
+  { label: "系统名称", prop: "lineName", visible: true, type: 'string' },
   { label: "门店编码", prop: "storeCode", visible: true },
   { label: "门店名称", prop: "storeName", visible: true },
-  // 从fpColumns中提取的匹配对象
+  { label: "计划主货架-形式", prop: "plannedMainShelfType", visible: true, type: 'string' },
+  { label: "计划主货架-数量", prop: "plannedMainShelfQty", visible: true, type: 'string' },
   {
     label: "实际主货架-形式",
     prop: "actualMainShelfType",
@@ -327,8 +366,10 @@ const fillColumns = ref([
     func: (row) => {
       row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
       return row.actualMainShelfExecuted;
-    }
+    },
+    formulaStr: '公式：（实际主货架形式 >= 计划主货架形式）并且（实际主货架数量 >= 计划主货架数量）',
   },
+  { label: "计划端架-数量", prop: "plannedEndCapQty", visible: true },
   {
     label: "实际端架-数量",
     prop: "actualEndCapQty",
@@ -349,8 +390,16 @@ const fillColumns = ref([
     func: (row) => {
       row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
       return row.actualEndCapExecuted;
-    }
+    },
+    formulaStr: '公式：（实际端架数量 >= 计划端架数量）',
   },
+  {
+    label: "计划地堆-平米数（㎡）",
+    prop: "plannedFloorStackArea",
+    visible: true
+  },
+  { label: "计划地堆-数量", prop: "plannedFloorStackQty", visible: true },
+  { label: "计划主题地堆-是否", prop: "plannedThemedFloorStack", visible: true },
   {
     label: "实际地堆-平米数（㎡）",
     prop: "actualFloorStackArea",
@@ -396,8 +445,11 @@ const fillColumns = ref([
     func: (row) => {
       row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
       return row.actualFloorStackExecuted;
-    }
+    },
+    formulaStr: '公式：（实际地堆平米数 >= 计划地堆平米数）并且（实际地堆数量 >= 计划地堆数量）',
   },
+  { label: "计划多点陈列-数量+形式", prop: "plannedMultiDisplay", visible: true },
+  { label: "计划多点陈列-总费用", prop: "plannedMultiDisplayTotalCost", visible: true },
   {
     label: "实际多点陈列-数量+形式",
     prop: "actualMultiDisplay",
@@ -418,6 +470,8 @@ const fillColumns = ref([
       { label: '否', value: '否' },
     ]
   },
+  { label: "合计费用-费用", prop: "totalCost", visible: true },
+  { label: "合计费用-费率", prop: "totalCostRate", visible: true },
   {
     label: "常规陈列是否执行",
     prop: "regularDisplayExecuted",
@@ -427,7 +481,8 @@ const fillColumns = ref([
       // 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
       row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
       return row.regularDisplayExecuted;
-    }
+    },
+    formulaStr: '公式：（实际主货架是否执行 = 是）并且（实际端架是否执行 = 是）并且（实际地堆是否执行 = 是）并且（实际多点陈列是否执行 = 是）',
   }
 ])
 
@@ -435,8 +490,6 @@ const fillColumns = ref([
 const tableColumns = ref([])
 // 右上角工具选择列
 const chooseColumns = ref([])
-// 加载进度
-const isLoading = ref(false)
 // 计算列具体数据
 const checkTableColumns = () => {
   if (operation.value === '全部列') {
@@ -451,7 +504,6 @@ const checkTableColumns = () => {
     }).filter(Boolean); // 过滤掉空数组项
   } else if (operation.value === '填报列') {
     chooseColumns.value = fillColumns.value
-    console.log(fillColumns, 'fill')
     tableColumns.value = fillColumns.value.filter(item => item.visible);
   }
 }
@@ -476,9 +528,48 @@ watch(
   { deep: true }
 );
 
+// 提交变更
+const submitChange = async (row, col) => {
+  // 有个类型输入框的需要调用 func
+  if (col.type === 'input') {
+    col.func(row)
+  }
+  await submitDisplayPlan({
+    id: row.sadId,
+    [col.prop]: row[col.prop]
+  })
+  // 这些提交变化的，同时会影响公式计算的，需要把公式计算的字段列结果，一起发给后台
+  // 主货架
+  if (['actualMainShelfType', 'actualMainShelfQty'].includes(col.prop)) {
+    await submitDisplayPlan({
+      id: row.sadId,
+      actualMainShelfExecuted: row.actualMainShelfExecuted,
+    })
+  }
+  // 端架
+  if (['actualEndCapQty'].includes(col.prop)) {
+    await submitDisplayPlan({
+      id: row.sadId,
+      actualEndCapExecuted: row.actualEndCapExecuted,
+    })
+  }
+  // 地堆
+  if (['actualFloorStackArea', 'actualFloorStackQty'].includes(col.prop)) {
+    await submitDisplayPlan({
+      id: row.sadId,
+      actualFloorStackExecuted: row.actualFloorStackExecuted,
+    })
+  }
+  // 常规陈列是否执行
+  await submitDisplayPlan({
+    id: row.sadId,
+    regularDisplayExecuted: row.regularDisplayExecuted,
+  })
+}
 
 // 表格数据
 const tableData = ref([])
+const isLoading = ref(true)
 const params = reactive({
   pageNum: 1,
   pageSize: 10,
@@ -494,10 +585,7 @@ const getTableList = async () => {
   })
   tableData.value = res.data.rows
   total.value = res.data.total
-  setTimeout(() => {
-    isLoading.value = false
-  }, 3000)
-
+  isLoading.value = false
 }
 getTableList()
 
@@ -536,7 +624,8 @@ const getColumnMinWidth = (column) => {
     'actualFloorStackArea': 170,
     'actualMultiDisplay': 190,
     'plannedMultiDisplay': 190,
-    'actualMultiDisplayExecuted': 170
+    'actualMultiDisplayExecuted': 170,
+    'actualMainShelfExecuted': 190,
   };
 
   return widthMap[column.prop] || 150; // 默认宽度
@@ -547,6 +636,35 @@ const getColumnMinWidth = (column) => {
 <style scoped
   lang="scss">
   .container {
+
+    .el-tabs {
+      height: 100%;
+      display: flex;
+      flex-direction: column-reverse;
+
+      .el-tabs__content {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+
+        .el-tab-pane {
+          height: 100%;
+          display: flex;
+          flex-direction: column;
+        }
+
+        .formula-column {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .el-icon {
+            margin-left: 2px;
+          }
+        }
+      }
+    }
+
     .el-form-item {
       align-items: center;
     }