refactor(views/promotion/table): 样式：修改店内执行上报复用表格的样式

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

 <template>
+  <!-- 操作类型 -->
   <el-row>
     <el-form-item>
       <el-radio-group v-model="operation"
@@ -6,7 +7,8 @@
         <el-radio-button label="展示模式"
           value="展示模式" />
         <el-radio-button label="填报模式"
-          value="填报模式" v-if="useFill"/>
+          value="填报模式"
+          v-if="showFill" />
       </el-radio-group>
     </el-form-item>
     <right-toolbar v-model:showSearch="showSearch"
@@ -16,11 +18,11 @@
       :defaultCheckedKeys="visibleProps">
     </right-toolbar>
   </el-row>
-  <!-- 筛选列组的按钮 -->
+  <!-- 数据表格 -->
   <el-table :data="tableData"
     border
     ref="tableRef"
-    class="auto-fit-header-table "
+    class="auto-fit-header-table"
     :class="{ 'cell-no-padding': operation === '填报模式' }"
     v-loading="isLoading">
     <template v-for="col in tableColumns">
@@ -47,21 +49,19 @@
           <!-- 填报模式 -->
           <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
-              class="overflow_wrap">
-              <!-- 超出部分显示省略号 -->
-              <span>
-                {{ row[col.prop] || '-' }}
-              </span>
+            <!-- 其他类型内容 -->
+            <div v-else>
+              <!-- 正常显示 -->
+              <span>{{ row[col.prop] || '-' }}</span>
             </div>
           </div>
           <!-- 展示模式 -->
@@ -79,21 +79,16 @@
 
 <script setup>
 import { h } from 'vue'
-/*************** 操作类型 ***************/
-const operation = ref('展示模式');
-// const operation = ref('填报模式');
-const tableRef = ref(null)
-
 const props = defineProps({
   tableColumns: { // 表格列
     type: Array,
     default: () => []
   },
-  chooseColumns: { // 右上角工具选择列
+  chooseColumns: { // 显隐列数据结构
     type: Array,
     default: () => []
   },
-  visibleProps: { // 右上角工具为树结构，默认勾选的列
+  visibleProps: { // 显隐列数据，默认勾选的列
     type: Array,
     default: () => []
   },
@@ -101,38 +96,36 @@ const props = defineProps({
     type: Array,
     default: () => []
   },
-  isLoading: {
+  isLoading: { // 表格加载状态
     type: Boolean,
     default: false
   },
-  total: {
+  total: { // 总条数
     type: Number,
     default: 0
   },
-  params: {
+  params: { // 分页参数
     type: Object,
     default: () => ({
       pageNum: 1,
       pageSize: 10,
     })
   },
-  // 启用填报模式
-  useFill: {
+  showFill: { // 是否显示填报模式
     type: Boolean,
     default: false
   },
-  // 格式化表格某列内容
-  formatter: {
+  formatter: { // 格式化函数
     type: Function,
     default: (row, col, cellValue) => cellValue
   }
 })
 const emit = defineEmits(['updateColumns', 'getTableList', 'updateShowSearch'])
 
-// 右上角工具
-const showSearch = ref(true)
-
+/*************** 工具栏 ***************/
 // 切换平铺/填报模式
+const operation = ref('展示模式');
+const tableRef = ref(null)
 const checkTableColumns = async () => {
   // 通知外面传入 tableColumns / chooseColumns 数据源
   await emit('updateColumns', operation.value)
@@ -144,177 +137,98 @@ const checkTableColumns = async () => {
     }
   })
 }
-
 onMounted(() => {
   checkTableColumns()
 })
 
-const getTableList = () => {
-  emit('getTableList')
-}
-
+// 控制搜索框显隐
+const showSearch = ref(true)
 watch(showSearch, (newVal) => {
   emit('updateShowSearch', newVal)
 })
-
+// 刷新数据
+const getTableList = () => {
+  emit('getTableList')
+}
 </script>
 
 <style scoped
   lang="scss">
-  .container {
 
-    .el-tabs {
-      height: 100%;
-      display: flex;
-      flex-direction: column-reverse;
+  /* 表格样式 */
+  .auto-fit-header-table {
+    height: 100%;
 
-      .el-tabs__content {
-        display: flex;
-        flex-direction: column;
-        height: 100%;
+    /* 列样式 */
+    .column-style {
 
-        .el-tab-pane {
-          height: 100%;
-          display: flex;
-          flex-direction: column;
+      /* 列头样式 */
+      .formula-column {
+        display: flex;
+        justify-content: center;
+        align-items: center;
 
-          .pagination-container {
-            margin: 10px;
-          }
+        .el-icon {
+          margin-left: 2px;
         }
+      }
 
-        .formula-column {
-          display: flex;
-          justify-content: center;
-          align-items: center;
+      /* 单元格样式 */
+      /* 自定义渲染内容 */
+      .cell-style {
+        margin: 0 -12px;
 
-          .el-icon {
-            margin-left: 2px;
+        >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-form-item {
-      align-items: center;
-    }
 
-    /* 表格区域 */
-    .auto-fit-header-table {
+        /* 表格内下拉框 */
+        .el-select {
+          width: 100% !important;
+          padding: 10px;
+        }
 
-      /* 优化超长文本的显示效果 */
-      .cell {
+        .el-input {
+          padding: 10px;
+        }
 
-        /* padding: 0 .2133rem; */
-        >div {
+        .date-picker {
           width: 100%;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-        }
-      }
+          padding: 10px;
 
-      &.cell-no-padding {
-        ::v-deep(.el-table__row) {
-          .el-table__cell {
+          .el-input {
+            width: 100%;
             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;
-              }
-            }
+    /* 填报模式-单元格 */
+    &.cell-no-padding {
 
-          }
+      /* 无上下内边距 */
+      ::v-deep(.el-table__row) {
+        .el-table__cell {
+          padding: 0;
         }
-
       }
-
-    }
-  }
-
-  /* 特殊动态渲染单元格样式 */
-  .render-cell {
-    p {
-      margin: 0;
-    }
-  }
-
-  /* 操作提示列 */
-  .operation_tip_cell {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-
-    p {
-      width: 100%;
-      margin: 0;
-    }
-
-    p:first-child {
-      background-color: #e1e2e6;
-      border-bottom: 1px solid #ebeef5;
-    }
-
-    p:last-child {
-      padding: 15px 0;
     }
   }
 
-  /* 超出部分显示省略号 */
-  .overflow_wrap {
-    width: 100%;
-    /* 固定宽度 */
-    white-space: nowrap;
-    /* 不换行 */
-    overflow: hidden;
-    /* 隐藏超出部分 */
-    text-overflow: ellipsis;
-    /* 显示省略号 */
-    display: inline-block;
+  /* 分页器 */
+  .pagination-container {
+    margin: 10px;
   }
 </style>
\ No newline at end of file

src/views/promotion/display_schedule/tabs/display.vue

@@ -2,14 +2,14 @@
   <!-- 常规陈列 -->
   <SearchList :showSearch="showSearch"
     @change="searchChange" />
-  <CommonPlan :tableData="tableData"
+  <CustomTable :tableData="tableData"
     :isLoading="isLoading"
     :total="total"
     :tableColumns="tableColumns"
     :chooseColumns="chooseColumns"
     :visibleProps="visibleProps"
     :params="params"
-    :useFill="useFill"
+    :showFill="showFill"
     @updateColumns="updateColumns"
     @getTableList="getTableList"
     @updateShowSearch="updateShowSearch" />
@@ -17,7 +17,7 @@
 
 <script setup
   lang="jsx">
-  import CommonPlan from '@/views/promotion/components/CommonPlan'
+  import CustomTable from '@/views/promotion/components/Table'
   import SearchList from '@/views/promotion/components/SearchList'
   import { getDisplayList, submitDisplayPlan } from '@/api'
   import { parseTime } from '@/utils'
@@ -25,7 +25,7 @@
   import userStore from '@/store/modules/user'
 
   // 是否启用填报模式
-  const useFill = userStore().hasQcMarketEmpInfo
+  const showFill = userStore().hasQcMarketEmpInfo
 
   /*************** 操作类型 ***************/
 
@@ -153,7 +153,7 @@
         },
         {
           label: "门店名称",
-          prop: "storeNameCodeDealerName", //d 新增动态列（只在填报列显示）
+          prop: "storeNameCodeDealerName", //新增动态列（只在填报列显示）
           visible: true,
           type: 'string',
           fill: true,
@@ -163,22 +163,11 @@
           width: 225,
           render: (h, row) => {
             return h('div', {
-              class: 'render-cell',
-              style: {
-                alignItems: 'center',
-                whiteSpace: 'pre-line'
-              }
+              class: 'store-name-render-cell'
             }, [
               h('p', row.storeName),
               h('p', row.storeCode),
-              h('p', {
-                style: {
-                  whiteSpace: 'nowrap',
-                  overflow: 'hidden',
-                  textOverflow: 'ellipsis',
-                  maxWidth: '100%'
-                }
-              }, row.dealerName)
+              h('p', row.dealerName)
             ])
           }
         },
@@ -1133,4 +1122,40 @@
 
     }
   }
+</style>
+
+<style lang="scss">
+// 动态列内容的 render 内样式
+// 操作提示列
+.operation_tip_cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  p {
+    width: 100%;
+    margin: 0;
+  }
+
+  p:first-child {
+    background-color: #e1e2e6;
+    border-bottom: 1px solid #ebeef5;
+  }
+
+  p:last-child {
+    padding: 15px 0;
+  }
+}
+
+// 只在填报模式出现的门店名称+门店编码+经销山名称（合并到一起）
+.store-name-render-cell {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+
+  p {
+    width: 100%;
+    margin: 0;
+  }
+}
 </style>
\ No newline at end of file

src/views/promotion/display_schedule/tabs/schedule_dis.vue

@@ -2,14 +2,14 @@
   <!-- 档期陈列 -->
   <SearchList :showSearch="showSearch"
     @change="searchChange" />
-  <CommonPlan :tableData="tableData"
+  <CustomTable :tableData="tableData"
     :isLoading="isLoading"
     :total="total"
     :tableColumns="tableColumns"
     :chooseColumns="chooseColumns"
     :visibleProps="visibleProps"
     :params="params"
-    :useFill="useFill"
+    :showFill="showFill"
     @updateColumns="updateColumns"
     @getTableList="getTableList"
     @updateShowSearch="updateShowSearch" />
@@ -17,7 +17,7 @@
 
 <script setup
   lang="jsx">
-  import CommonPlan from '@/views/promotion/components/CommonPlan'
+  import CustomTable from '@/views/promotion/components/Table'
   import SearchList from '@/views/promotion/components/SearchList'
   import { getDisplayScheduleDetail, submitDisplayScheduleDetail } from '@/api'
   import { parseTime } from '@/utils'
@@ -25,7 +25,7 @@
   import userStore from '@/store/modules/user'
 
   // 是否启用填报模式
-  const useFill = userStore().hasQcMarketEmpInfo
+  const showFill = userStore().hasQcMarketEmpInfo
 
   /*************** 操作类型 ***************/
   // 全部列

src/views/promotion/display_schedule/tabs/snack.vue

@@ -2,14 +2,14 @@
   <!-- 零食陈列 -->
   <SearchList :showSearch="showSearch"
     @change="searchChange" />
-  <CommonPlan :tableData="tableData"
+  <CustomTable :tableData="tableData"
     :isLoading="isLoading"
     :total="total"
     :tableColumns="tableColumns"
     :chooseColumns="chooseColumns"
     :visibleProps="visibleProps"
     :params="params"
-    :useFill="useFill"
+    :showFill="showFill"
     @updateColumns="updateColumns"
     @getTableList="getTableList"
     @updateShowSearch="updateShowSearch" />
@@ -17,7 +17,7 @@
 
 <script setup
   lang="jsx">
-  import CommonPlan from '@/views/promotion/components/CommonPlan'
+  import CustomTable from '@/views/promotion/components/Table'
   import SearchList from '@/views/promotion/components/SearchList'
   import { getSnackPlanList, submitSnackPlan } from '@/api'
   import { parseTime } from '@/utils'
@@ -25,7 +25,7 @@
   import userStore from '@/store/modules/user'
 
   // 是否启用填报模式
-  const useFill = userStore().hasQcMarketEmpInfo
+  const showFill = userStore().hasQcMarketEmpInfo
   /*************** 操作类型 ***************/
   // 全部列
   const baseColumns = ref([