feat(displya_schedule): 新增：小卤链路中心_档期陈列_零食计划新增 2 个表格

package.json

@@ -48,6 +48,7 @@
   "devDependencies": {
     "@vant/auto-import-resolver": "^1.3.0",
     "@vitejs/plugin-vue": "5.0.5",
+    "@vitejs/plugin-vue-jsx": "^5.1.1",
     "cz-conventional-changelog": "^3.3.0",
     "postcss-pxtorem": "^6.1.0",
     "sass": "1.77.5",

src/api/promotion/display_schedule.js

@@ -19,7 +19,10 @@ export function submitDisplayPlan(data) {
     url: `/operation/sales/ap_display/core/${data.id}`,
     method: 'PUT',
     data: {
-      display: data
+      display: {
+        ...data,
+        id: undefined // 不携带 id
+      }
     }
   });
 }
@@ -47,3 +50,19 @@ export function submitDisplaySchedulePlan(data) {
     }
   });
 }
+
+// 获取-档期陈列列表
+export function getDisplayScheduleDetail(params) {
+  return request({
+    url: '/operation/sales/ap_display/query/pro_page',
+    params
+  })
+}
+
+// 获取-零食计划列表
+export function getSnackPlanList(params) {
+  return request({
+    url: '/operation/sales/ap_display/query/snack_page',
+    params
+  })
+}

src/assets/styles/index.scss

@@ -126,7 +126,7 @@ aside {
 // 全局样式
 // 容器
 .app-container {
-  padding: 10px;
+  padding: 20px;
   height: 100%;
 
   // 内容区域
@@ -134,7 +134,7 @@ aside {
     width: 100%;
     height: 100%;
     background-color: var(--el-bg-color-overlay);
-    padding: 10px;
+    padding: 20px;
     display: flex;
     flex-direction: column;
   }

src/views/promotion/components/CommonPlan/index.vue

+<template>
+  <el-row>
+    <el-form-item>
+      <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
+    ref="tableRef"
+    class="auto-fit-header-table"
+    v-loading="isLoading">
+    <template v-for="col in tableColumns">
+      <el-table-column v-if="col.visible"
+        :label="col.label"
+        :key="col.prop"
+        align="center"
+        :show-overflow-tooltip="col.type === 'string'"
+        class-name="column-style"
+        :width="col.width"
+        :fixed="operation === '填报模式' && col.fixed">
+        <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="operation === '填报模式'" style="overflow: visible !important;">
+            <!-- 带选择框/输入框的操作单元格 -->
+            <div v-if="col.render"
+              class="cell-style">
+              <component :is="col.render(h, row, col)" />
+            </div>
+            <!-- 正常显示/公式计算 -->
+            <div v-else-if="col.type === 'formula'">
+              {{ col.func(row) }}
+            </div>
+            <div v-else>
+              {{ row[col.prop] || '-' }}
+            </div>
+          </div>
+          <!-- 平铺模式 -->
+          <div v-else>{{ row[col.prop] || '-' }}</div>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table>
+  <!-- 分页 -->
+  <pagination :total="total"
+    v-model:page="params.pageNum"
+    v-model:limit="params.pageSize"
+    @pagination="getTableList" />
+</template>
+
+<script setup>
+import { h } from 'vue'
+/*************** 操作类型 ***************/
+const operation = ref('平铺模式');
+// const operation = ref('填报模式');
+const tableRef = ref(null)
+
+const props = defineProps({
+  tableColumns: { // 表格列
+    type: Array,
+    default: () => []
+  },
+  chooseColumns: { // 右上角工具选择列
+    type: Array,
+    default: () => []
+  },
+  visibleProps: { // 右上角工具为树结构，默认勾选的列
+    type: Array,
+    default: () => []
+  },
+  tableData: { // 数据源
+    type: Array,
+    default: () => []
+  },
+  isLoading: {
+    type: Boolean,
+    default: false
+  },
+  total: {
+    type: Number,
+    default: 0
+  },
+  params: {
+    type: Object,
+    default: () => ({
+      pageNum: 1,
+      pageSize: 10,
+    })
+  }
+})
+const emit = defineEmits(['updateColumns', 'getTableList'])
+
+// 右上角工具
+const showSearch = ref(true)
+
+// 切换平铺/填报模式
+const checkTableColumns = async () => {
+  // 通知外面传入 tableColumns / chooseColumns 数据源
+  await emit('updateColumns', operation.value)
+
+  // 强制表格立即应用所有宽度设置，避免先自适应再调整
+  nextTick(() => {
+    if (tableRef.value) {
+      tableRef.value.doLayout()
+    }
+  })
+}
+
+onMounted(() => {
+  checkTableColumns()
+})
+
+const getTableList = () => {
+  emit('getTableList')
+}
+
+</script>
+
+<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;
+
+          .pagination-container {
+            margin: 10px;
+          }
+        }
+
+        .formula-column {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+
+          .el-icon {
+            margin-left: 2px;
+          }
+        }
+      }
+    }
+
+    .el-form-item {
+      align-items: center;
+    }
+
+    /* 表格区域 */
+    .auto-fit-header-table {
+
+      /* 优化超长文本的显示效果 */
+      .cell {
+
+        /* padding: 0 .2133rem; */
+        >div {
+          width: 100%;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+        }
+      }
+
+      ::v-deep(.el-table__row) {
+        .el-table__cell {
+          padding: 0;
+        }
+      }
+
+
+      ::v-deep(.column-style) {
+
+        .cell {
+          /* overflow: visible; */
+
+          >div {
+            /* overflow: visible !important; */
+          }
+
+          .cell-style {
+            margin: 0 -12px;
+
+            >div {
+              display: flex;
+              flex-direction: column;
+              align-items: flex-start;
+
+              >span {
+                text-align: left;
+                text-indent: 5px;
+                display: inline-block;
+                width: 100%;
+                background-color: #e1e2e6;
+                border-bottom: 1px solid #ebeef5;
+              }
+            }
+
+            /* 表格内下拉框 */
+            .el-select {
+              width: 100% !important;
+              padding: 10px;
+            }
+
+            .el-input {
+              padding: 10px;
+            }
+
+            .date-picker {
+              width: 100%;
+              padding: 10px;
+
+              .el-input {
+                width: 100%;
+                padding: 0;
+              }
+            }
+
+          }
+        }
+
+      }
+
+    }
+  }
+
+  /* 特殊动态渲染单元格样式 */
+  .render-cell {
+    p {
+      margin: 0;
+    }
+  }
+</style>
\ No newline at end of file

src/views/promotion/display_schedule/index.vue

@@ -12,6 +12,14 @@
           name="档期计划">
           <Schedule />
         </el-tab-pane>
+        <el-tab-pane label="档期陈列"
+          name="档期陈列">
+          <ScheduleDis />
+        </el-tab-pane>
+        <el-tab-pane label="零食计划"
+          name="零食计划">
+          <Snack />
+        </el-tab-pane>
       </el-tabs>
     </div>
   </div>
@@ -20,7 +28,9 @@
 <script setup>
 import Display from './tabs/display.vue'
 import Schedule from './tabs/schedule.vue'
-const activeName = ref('陈列计划');
+import ScheduleDis from './tabs/schedule_dis.vue'
+import Snack from './tabs/snack.vue'
+const activeName = ref('档期陈列');
 const handleClickTabs = (tab) => {
   activeName.value = tab.name;
 }