refactor(promotion/display_schedule): 修复：店内执行上报_重构框架和架构，梳理数据层和视图层关系，增加输入数字超出计划标红提示等细节（暂时完成常规陈列部分）

package.json

@@ -34,14 +34,14 @@
     "lib-flexible": "^0.3.2",
     "mitt": "^3.0.1",
     "nprogress": "0.2.0",
-    "pinia": "2.1.7",
+    "pinia": "^3.0.4",
     "splitpanes": "3.1.5",
     "uuid": "^11.0.5",
     "vant": "^4.9.18",
-    "vue": "^3.5.13",
+    "vue": "^3.5.25",
     "vue-count-to": "^1.0.13",
     "vue-cropper": "1.1.1",
-    "vue-router": "4.4.0",
+    "vue-router": "^4.6.3",
     "vue3-count-to": "^1.1.2",
     "vuedraggable": "^4.1.0"
   },

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

 <template>
-  <div class="search" v-show="showSearch">
+  <div class="search"
+    v-show="showSearch">
     <el-form :inline="true"
       :model="queryParams"
       class="demo-form-inline">
@@ -28,7 +29,8 @@
           @input="handleChange"
           clearable />
       </el-form-item>
-      <el-form-item label="门店编码/名称" v-if="showStoreSearch">
+      <el-form-item label="门店编码/名称"
+        v-if="showStoreSearch">
         <el-input v-model="queryParams.storeCN"
           placeholder="请输入门店编码/名称"
           @input="handleChange"
@@ -47,20 +49,17 @@ const props = defineProps({
   showStoreSearch: {
     type: Boolean,
     default: true
+  },
+  queryParams: {
+    type: Object,
+    default: () => ({})
   }
 })
-const queryParams = reactive({
-  // 当月
-  salesMonth: new Date(),
-  deptName: '',
-  dealerCN: '',
-  lineNameLike: '',
-  storeCN: ''
-})
+
 const emits = defineEmits(['change'])
 
 const handleChange = () => {
-  emits('change', queryParams)
+  emits('change')
 }
 </script>
 

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

@@ -3,8 +3,7 @@
     <!-- 操作类型 -->
     <el-row>
       <el-form-item>
-        <el-radio-group v-model="operation"
-          @change="checkTableColumns">
+        <el-radio-group v-model="operation">
           <el-radio-button label="展示模式"
             value="展示模式" />
           <el-radio-button label="填报模式"
@@ -77,13 +76,11 @@
                 </div>
                 <!-- 公式计算 -->
                 <div v-else-if="col.type === 'formula'">
-                  {{ col.func(row) }}
+                  {{ row[col.prop] || '-' }}
                 </div>
-                <!-- 其他类型内容 -->
-                <div cllass="fill-span-wrap"
-                  v-else>
-                  <!-- 正常显示 -->
-                  <span class="fill-span">{{ row[col.prop] || '-' }}</span>
+                <!-- 其他类型内容（正常显示文字） -->
+                <div class="fill-span-wrap"
+                  v-else>{{ row[col.prop] || '-' }}
                 </div>
               </div>
               <!-- 展示模式 -->
@@ -97,10 +94,10 @@
       <pagination :total="total"
         v-model:page="params.pageNum"
         v-model:limit="params.pageSize"
+        :pageSizes="[10, 20, 50, 100]"
         @pagination="getTableList" />
     </div>
   </div>
-
   <!-- 表格弹窗 - 使用DOM移动而非复制 -->
   <el-dialog v-model="showTableInDialog"
     title="表格详情"
@@ -115,27 +112,16 @@
 
 <script setup>
 import { h } from 'vue'
+import userStore from '@/store/modules/user'
 const props = defineProps({
-  tableColumns: { // 表格列
-    type: Array,
-    default: () => []
-  },
-  chooseColumns: { // 显隐列数据结构
-    type: Array,
-    default: () => []
-  },
-  visibleProps: { // 显隐列数据，默认勾选的列
+  tableData: { // 数据源
     type: Array,
     default: () => []
   },
-  tableData: { // 数据源
+  baseColumns: { // 表格列
     type: Array,
     default: () => []
   },
-  isLoading: { // 表格加载状态
-    type: Boolean,
-    default: false
-  },
   total: { // 总条数
     type: Number,
     default: 0
@@ -147,7 +133,7 @@ const props = defineProps({
       pageSize: 10,
     })
   },
-  showFill: { // 是否显示填报模式
+  isLoading: { // 表格加载状态
     type: Boolean,
     default: false
   },
@@ -156,27 +142,60 @@ const props = defineProps({
     default: (row, col, cellValue) => cellValue
   }
 })
-const emit = defineEmits(['updateColumns', 'getTableList', 'updateShowSearch'])
+const emit = defineEmits(['getTableList', 'updateShowSearch'])
 
 /*************** 工具栏 ***************/
-// 切换平铺/填报模式
-const operation = ref('展示模式');
-// const operation = ref('填报模式');
+const showFill = userStore().hasQcMarketEmpInfo // 是否启用填报模式
+// const operation = ref('展示模式'); // 切换平铺/填报模式
+const operation = ref('填报模式'); // 切换平铺/填报模式
 const tableRef = ref(null)
-const checkTableColumns = async () => {
-  // 通知外面传入 tableColumns / chooseColumns 数据源
-  await emit('updateColumns', operation.value)
+const chooseColumns = ref([]) // 右上角工具显隐列选择
+
+// 使用computed缓存展示列，避免重复创建
+const displayModeColumns = computed(() => {
+  return props.baseColumns.flatMap(item => {
+    if (item.children) {
+      return item.children.filter(child => !child.onlyFill);
+    }
+    return [];
+  });
+});
+
+// 使用computed缓存填报列，避免重复创建
+const fillModeColumns = computed(() => {
+  return props.baseColumns.flatMap(item => {
+    if (item.children) {
+      return item.children.filter(child => child.fill === true)
+    }
+    return [];
+  });
+});
+
+// 使用computed动态返回当前模式的列
+const tableColumns = computed(() => {
+  return operation.value === '展示模式' ? displayModeColumns.value : fillModeColumns.value;
+});
 
-  // 强制表格立即应用所有宽度设置，避免先自适应再调整
+// 监听operation变化，更新chooseColumns并触发布局调整
+watch(operation, () => {
+  chooseColumns.value = operation.value === '展示模式' ? props.baseColumns : fillModeColumns.value;
+
+  // 强制表格立即应用所有宽度设置
   nextTick(() => {
     if (tableRef.value) {
       tableRef.value.doLayout()
     }
-  })
-}
-onMounted(() => {
-  checkTableColumns()
-})
+  });
+}, { immediate: true });
+
+const visibleProps = computed(() => {
+  return props.baseColumns.flatMap(item => {
+    if (item.children) {
+      return item.children.filter(child => child.visible).map(child => child.prop);
+    }
+    return item.prop;
+  });
+});
 
 // 控制搜索框显隐
 const showSearch = ref(true)
@@ -285,9 +304,8 @@ const handleDialogClose = () => {
     display: flex;
     flex-direction: column;
     min-height: 0;
-    /* 解决flex子项内容溢出问题 */
 
-    /* overflow-y: scroll; */
+    /* 解决flex子项内容溢出问题 */
     .auto-fit-header-table {
       flex: 1;
 
@@ -326,6 +344,7 @@ const handleDialogClose = () => {
           white-space: nowrap;
         }
 
+        /* 自定义单元格样式（仅填充模式生效） */
         .cell-style {
           >div {
             display: flex;
@@ -383,17 +402,12 @@ const handleDialogClose = () => {
           }
         }
 
-        /* 填充模式下的普通战士文字 */
+        /* 普通文字单元格（仅填充模式生效） */
         .fill-span-wrap {
-          /* line-height: 1; */
-          .fill-span {
-            display: inline-block;
-            width: 80% !important;
-            /* 超出省略号 */
-            overflow: hidden;
-            text-overflow: ellipsis;
-            white-space: nowrap;
-          }
+          /* 超出省略号 */
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
         }
 
       }
@@ -404,7 +418,8 @@ const handleDialogClose = () => {
         /* 无上下内边距 */
         ::v-deep(.el-table__row) {
           .el-table__cell {
-            padding: 0;
+            padding-top: 0;
+            padding-bottom: 0;
 
             .cell {
               padding: 0 !important;
@@ -419,6 +434,8 @@ const handleDialogClose = () => {
       margin: 10px;
     }
   }
+
+
 </style>
 
 <style lang="scss">
@@ -440,6 +457,7 @@ const handleDialogClose = () => {
       display: flex;
       flex-direction: column;
       overflow: hidden !important;
+      padding-bottom: 5px;
 
       .dialog-table-container {
         flex: 1;
@@ -457,8 +475,24 @@ const handleDialogClose = () => {
         }
       }
     }
+  }
+}
+
+// 不显示数字输入框的 spinner
+.no-spinner input::-webkit-inner-spin-button,
+.no-spinner input::-webkit-outer-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
 
+.no-spinner {
+  -moz-appearance: textfield;
+}
 
+// 填入数字超过计划值时，红色文字提示
+.red-text {
+  input {
+    color: red !important;
   }
 }
 </style>
\ No newline at end of file

src/views/promotion/display_schedule/index.vue

@@ -42,10 +42,10 @@ import ThreeTwoSeconds from './tabs/three_two_seconds.vue'
 import SixLittleDiamonds from './tabs/six_little_diamonds.vue'
 
 const activeName = ref('常规陈列');
-// const activeName = ref('档期计划');
 const handleClickTabs = (tab) => {
   activeName.value = tab.name;
 }
+
 </script>
 
 <style scoped
@@ -71,24 +71,8 @@ const handleClickTabs = (tab) => {
             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;
-      }
-
     }
   }
-
 </style>
\ No newline at end of file