Merge branch 'chenlie_dangqi' into dev

src/api/index.js

@@ -25,6 +25,7 @@ export * from './monitor/job'
 export * from './monitor/jobLog'
 export * from './monitor/online'
 export * from './monitor/server'
+export * from './promotion/display'
 export * from './promotion/plan'
 export * from './promotion/task'
 export * from './scm/logistics_receipt'

src/api/promotion/display.js

+import request from '@/utils/request';
+// 获取-陈列计划列表
+export function getDisplayList(params) {
+  return request({
+    url: '/operation/sales/ap_display/query/page',
+    params
+  });
+}

src/components/RightToolbar/index.vue

@@ -39,14 +39,35 @@
               <template v-for="item in columns"
                 :key="item.key">
                 <el-dropdown-item>
-                  <el-checkbox :checked="item.visible"
-                    @change="checkboxChange($event, item.label)"
+                  <el-checkbox v-model="item.visible"
                     :label="item.label" />
                 </el-dropdown-item>
               </template>
             </el-dropdown-menu>
           </template>
         </el-dropdown>
+        <!-- 树结构选择方式 -->
+        <el-dropdown trigger="click"
+          :hide-on-click="false"
+          style="padding-left: 12px"
+          v-if="showColumnsType == 'tree'">
+          <el-button circle
+            icon="Menu" />
+          <template #dropdown>
+            <el-dropdown-menu class="tree-dropdown-menu">
+              <el-tree
+                :data="treeData"
+                show-checkbox
+                node-key="prop"
+                ref="columnTree"
+                :props="treeProps"
+                default-expand-all
+                check-on-click-node
+                :default-checked-keys="defaultCheckedKeys"
+                @check="handleTreeCheck" />
+            </el-dropdown-menu>
+          </template>
+        </el-dropdown>
       </el-tooltip>
       <!-- 自定义功能 -->
       <slot></slot>
@@ -79,7 +100,7 @@ const props = defineProps({
     type: Boolean,
     default: true,
   },
-  /* 显隐列类型（transfer穿梭框、checkbox复选框） */
+  /* 显隐列类型（transfer穿梭框、checkbox复选框、tree树形结构） */
   showColumnsType: {
     type: String,
     default: "checkbox",
@@ -89,6 +110,19 @@ const props = defineProps({
     type: Number,
     default: 10,
   },
+  /* 树形结构配置（可选） */
+  treeConfig: {
+    type: Object,
+    default: () => ({
+      labelKey: 'label',
+      childrenKey: 'children'
+    })
+  },
+  /* 树形结构默认选中的节点 */
+  defaultCheckedKeys: {
+    type: Array,
+    default: () => []
+  }
 })
 
 const emits = defineEmits(['update:showSearch', 'queryTable']);
@@ -99,6 +133,15 @@ const value = ref([]);
 const title = ref("显示/隐藏");
 // 是否显示弹出层
 const open = ref(false);
+// 树结构数据
+const treeData = ref([]);
+// 树结构配置
+const treeProps = {
+  label: props.treeConfig.labelKey || 'label',
+  children: props.treeConfig.childrenKey || 'children'
+};
+// 树引用
+const columnTree = ref(null);
 
 const style = computed(() => {
   const ret = {};
@@ -131,6 +174,80 @@ function showColumn() {
   open.value = true;
 }
 
+// 树形结构节点勾选变化
+function handleTreeCheck(currentNode, checkedInfo) {
+  const node = currentNode;
+  
+  // 判断当前节点是否被勾选（检查当前节点prop是否在checkedKeys中）
+  const isChecked = checkedInfo.checkedKeys.includes(node.prop);
+  
+  // 处理父节点的特殊情况：如果是父节点（有children），则更新其所有子节点
+  if (node.children && node.children.length > 0) {
+    // 获取该父节点下的所有子节点prop
+    const allChildProps = [];
+    const collectChildProps = (nodes) => {
+      nodes.forEach(child => {
+        if (child.children && child.children.length > 0) {
+          collectChildProps(child.children);
+        } else {
+          allChildProps.push(child.prop);
+        }
+      });
+    };
+    collectChildProps(node.children);
+    
+    // 更新所有子节点的visible属性
+    allChildProps.forEach(prop => {
+      updateColumnVisibilityByProp(prop, isChecked);
+    });
+  } else {
+    // 对于单个节点，直接更新其visible属性
+    updateColumnVisibilityByProp(node.prop, isChecked);
+  }
+}
+// 新增：根据prop更新对应列的visible属性
+function updateColumnVisibilityByProp(prop, visible) {
+  const updateColumn = (columns) => {
+    for (let i = 0; i < columns.length; i++) {
+      const item = columns[i];
+      
+      if (item.children && item.children.length > 0) {
+        // 递归查找子节点
+        const found = updateColumn(item.children);
+        if (found) return true;
+      } else if (item.prop === prop) {
+        // 找到匹配的节点，更新其visible属性
+        item.visible = visible;
+        return true;
+      }
+    }
+    return false;
+  };
+  
+  // 从props.columns中查找并更新
+  updateColumn(props.columns);
+}
+
+// 3. 修改initTreeData方法，确保正确处理prop字段
+function initTreeData() {
+  if (props.columns && props.showColumnsType === 'tree') {
+    // 创建树数据但不深拷贝，保持引用关系
+    treeData.value = props.columns;
+  }
+}
+watch(() => props.columns, () => {
+  initTreeData();
+})
+// 再添加一个watcher来监听showColumnsType变化
+watch(
+  () => props.showColumnsType,
+  (newType, oldType) => {
+    if (newType === 'tree') {
+      initTreeData();
+    }
+  }
+)
+
 if (props.showColumnsType == 'transfer') {
   // 显隐列初始默认隐藏列
   for (let item in props.columns) {
@@ -138,13 +255,19 @@ if (props.showColumnsType == 'transfer') {
       value.value.push(parseInt(item));
     }
   }
+} else if (props.showColumnsType === 'tree') {
+  // 初始化树数据
+  initTreeData();
 }
 
-// 勾选
-function checkboxChange(event, label) {
-  props.columns.filter(item => item.label == label)[0].visible = event;
-}
-
+// 勾选 - 修改为更健壮的实现
+// function checkboxChange(event, label) {
+//   // 使用find方法而不是filter，更高效
+//    const column = props.columns.find(item => item.label === label);
+//   if (column) {
+//     column.visible = event;
+//   }
+// }
 </script>
 
 <style lang='scss'
@@ -174,4 +297,25 @@ function checkboxChange(event, label) {
     }
   }
   
+  /* 树结构下拉菜单样式 */
+  .tree-dropdown-menu {
+    max-height: 400px;
+    overflow-y: auto;
+    min-width: 300px;
+    padding: 10px;
+  }
+  
+  :deep(.el-tree) {
+    max-height: 380px;
+    overflow-y: auto;
+  }
+  
+  /* 添加选中节点文字蓝色样式 */
+  :deep(.el-tree-node.is-checked > .el-tree-node__content .el-tree-node__label) {
+    color: #409EFF;
+  }
+  
+  :deep(.el-tree-node__content .el-checkbox__input.is-checked + .el-checkbox__label) {
+    color: #409EFF;
+  }
 </style>
\ No newline at end of file

src/permission.js

@@ -50,10 +50,7 @@ router.beforeEach((to, from, next) => {
             })
           })
         }).catch(err => {
-          useUserStore().logOut().then(() => {
           ElMessage.error(err)
-            next({ path: '/' })
-          })
         })
       } else {
         next()

src/utils/request.js

@@ -7,6 +7,7 @@ import cache from '@/plugins/cache'
 import { saveAs } from 'file-saver'
 import useUserStore from '@/store/modules/user'
 import { fsClientAuth } from '@/api'
+import router from '@/router'
 
 let downloadLoadingInstance;
 // 是否显示重新登录
@@ -103,14 +104,15 @@ service.interceptors.response.use(async res => {
     // PC/移动端刷新 token 有效期
     // await useUserStore().refreshTokenFn()
     // return service(res.config)
-    // ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
-    //   isRelogin.show = false;
-    //   useUserStore().logOut().then(() => {
+    ElMessageBox.confirm('登录状态已过期，您可以继续留在该页面，或者重新登录', '系统提示', { confirmButtonText: '重新登录', cancelButtonText: '取消', type: 'warning' }).then(() => {
+      isRelogin.show = false;
+      useUserStore().logOut().then(() => {
         // location.href = '#/login';
-    //   })
-    // }).catch(() => {
-    //   isRelogin.show = false;
-    // });
+        router.push({ path: '/login' })
+      })
+    }).catch(() => {
+      isRelogin.show = false;
+    });
     return Promise.reject('无效的会话，或者会话已过期，请重新登录。')
 
   } else if (code === 403) {

src/views/halogen/details/index.vue

+<template>
+  <div class="app-container">
+    <div class="container">
+      卤币明细
+    </div>
+  </div>
+</template>
+
+<script setup>
+
+</script>
+
+<style scoped
+  lang="scss"></style>
\ No newline at end of file

src/views/promotion/display/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>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { getDisplayList } from '@/api'
+/*************** 操作类型 ***************/
+const operation = ref('全部列');
+
+// 全部列
+const baseColumns = ref([
+  {
+    label: "基础信息",
+    children: [{ label: "销售大区", prop: "regionName", visible: true, type: 'string' },
+    { label: "销售战区", prop: "districtName", visible: true, type: 'string' },
+    { label: "经销商-省份", prop: "dealerProvince", visible: true, type: 'string' },
+    { label: "经销商-城市", prop: "dealerCity", visible: true, type: 'string' },
+    { label: "经销商-代码", prop: "dealerCode", visible: true, type: 'string' },
+    { label: "经销商名称", prop: "dealerName", visible: true, type: 'string' },
+    { label: "经销商-类型", prop: "dealerType", visible: true, type: 'string' },
+    { label: "开户日期", prop: "openingDate", visible: true, type: 'string' },
+    { label: "闭户日期", prop: "closingDate", visible: true, type: 'string' },
+    { label: "大区总监", prop: "regionManager", visible: true, type: 'string' },
+    { label: "战区经理", prop: "districtManager", visible: true, type: 'string' },
+    { label: "城市经理", prop: "cityManager", visible: true, type: 'string' },
+    { label: "门店编码", prop: "storeCode", visible: true, type: 'string' },
+    { label: "门店名称", prop: "storeName", visible: true, type: 'string' },
+    { label: "门店-省份", prop: "storeProvince", visible: true, type: 'string' },
+    { label: "门店-城市", prop: "storeCity", visible: true, type: 'string' },
+    { label: "系统名称", prop: "lineName", visible: true, type: 'string' },
+    { label: "系统类型", prop: "lineType", visible: true, type: 'string' },
+    { label: "渠道大类", prop: "channelDl", visible: true, type: 'string' },
+    { label: "渠道小类", prop: "channelXl", visible: true, type: 'string' },
+    { label: "门店类型", prop: "storeType", visible: true, type: 'string' },
+    { label: "系统业态", prop: "systemFormat", visible: true, type: 'string' },
+    { label: "门店面积", prop: "storeArea", visible: true, type: 'string' },
+    { label: "门店分级（销量坎级）", prop: "storeLevel", visible: true, type: 'string' },
+    { label: "门店地址", prop: "storeAddress", visible: true, type: 'string' },
+    { label: "品项数", prop: "productCount", visible: true, type: 'string' }],
+    prop: 'baseColumns',
+    visible: true
+  },
+  {
+    label: "大业态测试",
+    children: [
+      { label: "大业态测试-动销模型", prop: "lfSalesModel", visible: true, type: 'string' },
+      { label: "大业态测试-月均POS", prop: "lfMonthlyPos", visible: true, type: 'string' },
+    ],
+    prop: 'lfColumns',
+    visible: true
+  },
+  {
+    label: "费用计划",
+    prop: 'fpColumns',
+    children: [
+      { label: "计划主货架-形式", prop: "plannedMainShelfType", visible: true, type: 'string' },
+      { label: "计划主货架-数量", prop: "plannedMainShelfQty", visible: true, type: 'string' },
+      { label: "计划主货架-单个费用", prop: "plannedMainShelfUnitCost", visible: true, type: 'string' },
+      { label: "计划主货架-总费用", prop: "plannedMainShelfTotalCost", visible: true, type: 'string' },
+      {
+        label: "实际主货架-形式",
+        prop: "actualMainShelfType",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '4纵', value: '4纵' },
+          { label: '5纵', value: '5纵' },
+          { label: '6纵', value: '6纵' },
+          { label: '7纵', value: '7纵' },
+          { label: '8纵及以上', value: '8纵及以上' }
+        ]
+      },
+      {
+        label: "实际主货架-数量",
+        prop: "actualMainShelfQty",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '1', value: 1 },
+          { label: '2', value: 2 }
+        ]
+      },
+      {
+        label: "实际主货架-是否执行",
+        prop: "actualMainShelfExecuted",
+        visible: true,
+        type: 'formula', // 公式
+        func: (row) => {
+          row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
+          return row.actualMainShelfExecuted;
+        }
+      },
+      { label: "计划端架-数量", prop: "plannedEndCapQty", visible: true },
+      { label: "计划端架-总费用", prop: "plannedEndCapTotalCost", visible: true },
+      { label: "计划端架-单个费用", prop: "plannedEndCapUnitCost", visible: true },
+      {
+        label: "实际端架-数量",
+        prop: "actualEndCapQty",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '0', value: 0 },
+          { label: '0.5', value: 0.5 },
+          { label: '1', value: 1 },
+          { label: '2', value: 2 }
+        ]
+      },
+      {
+        label: "实际端架-是否执行",
+        prop: "actualEndCapExecuted",
+        visible: true,
+        type: 'formula', // 公式
+        func: (row) => {
+          row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
+          return row.actualEndCapExecuted;
+        }
+      },
+      {
+        label: "计划地堆-平米数（㎡）",
+        prop: "plannedFloorStackArea",
+        visible: true
+      },
+      { label: "计划地堆-数量", prop: "plannedFloorStackQty", visible: true },
+      { label: "计划主题地堆-是否", prop: "plannedThemedFloorStack", visible: true },
+      { label: "计划地堆-总费用", prop: "plannedFloorStackTotalCost", visible: true },
+      { label: "计划折算1㎡-单个费用", prop: "plannedFloorStackUnitCostPerSqm", visible: true },
+      {
+        label: "实际地堆-平米数（㎡）",
+        prop: "actualFloorStackArea",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '0', value: 0 },
+          { label: '0.5', value: 0.5 },
+          { label: '0.8', value: 0.8 },
+          { label: '1', value: 1 },
+          { label: '2', value: 2 },
+          { label: '3', value: 3 },
+          { label: '4', value: 4 },
+        ]
+      },
+      {
+        label: "实际地堆-数量",
+        prop: "actualFloorStackQty",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '0', value: 0 },
+          { label: '1', value: 1 },
+          { label: '2', value: 2 },
+          { label: '3', value: 3 }
+        ]
+      },
+      {
+        label: "实际主题地堆-是否",
+        prop: "actualThemedFloorStack",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '是', value: '是' },
+          { label: '否', value: '否' },
+        ]
+      },
+      {
+        label: "实际地堆是否执行",
+        prop: "actualFloorStackExecuted",
+        visible: true,
+        type: 'formula', // 公式
+        func: (row) => {
+          row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
+          return row.actualFloorStackExecuted;
+        }
+      },
+      { label: "计划多点陈列-数量+形式", prop: "plannedMultiDisplay", visible: true },
+      { label: "计划多点陈列-总费用", prop: "plannedMultiDisplayTotalCost", visible: true },
+      {
+        label: "实际多点陈列-数量+形式",
+        prop: "actualMultiDisplay",
+        visible: true,
+        type: 'input',
+        func: (row) => {
+          // 没有输入内容时，则是否执行设置为否
+          row.actualMultiDisplayExecuted = !row.actualMultiDisplay ? '否' : '是'
+        }
+      },
+      {
+        label: "实际多点陈列-是否执行",
+        prop: "actualMultiDisplayExecuted",
+        visible: true,
+        type: 'select',
+        options: [
+          { label: '是', value: '是' },
+          { label: '否', value: '否' },
+        ]
+      },
+      { label: "合计费用-费用", prop: "totalCost", visible: true },
+      { label: "合计费用-费率", prop: "totalCostRate", visible: true },
+      {
+        label: "常规陈列是否执行",
+        prop: "regularDisplayExecuted",
+        visible: true,
+        type: 'formula', // 公式
+        func: (row) => {
+          // 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
+          row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
+          return row.regularDisplayExecuted;
+        }
+      },
+      { label: "综合标签-拜访辅助列", prop: "visitAssistTag", visible: true },
+      { label: "付费陈列- 是否", prop: "paidDisplay", visible: true },
+      { label: "当月拜访目标", prop: "monthlyVisitTarget", visible: true },
+      { label: "当月是否拜访", prop: "monthlyVisited", visible: true }
+    ],
+    visible: true
+  }
+  // ...baseColumns.value,
+  // ...lfColumns.value,
+  // ...fpColumns.value
+]);
+// 填报列
+const fillColumns = ref([
+  { label: "经销商名称", prop: "dealerName", visible: true },
+  { label: "门店编码", prop: "storeCode", visible: true },
+  { label: "门店名称", prop: "storeName", visible: true },
+  // 从fpColumns中提取的匹配对象
+  {
+    label: "实际主货架-形式",
+    prop: "actualMainShelfType",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '4纵', value: '4纵' },
+      { label: '5纵', value: '5纵' },
+      { label: '6纵', value: '6纵' },
+      { label: '7纵', value: '7纵' },
+      { label: '8纵及以上', value: '8纵及以上' }
+    ]
+  },
+  {
+    label: "实际主货架-数量",
+    prop: "actualMainShelfQty",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '1', value: 1 },
+      { label: '2', value: 2 }
+    ]
+  },
+  {
+    label: "实际主货架-是否执行",
+    prop: "actualMainShelfExecuted",
+    visible: true,
+    type: 'formula', // 公式
+    func: (row) => {
+      row.actualMainShelfExecuted = ((parseInt(row.actualMainShelfType) >= parseInt(row.plannedMainShelfType)) && (parseInt(row.actualMainShelfQty) >= parseInt(row.plannedMainShelfQty))) ? '是' : '否';
+      return row.actualMainShelfExecuted;
+    }
+  },
+  {
+    label: "实际端架-数量",
+    prop: "actualEndCapQty",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '0', value: 0 },
+      { label: '0.5', value: 0.5 },
+      { label: '1', value: 1 },
+      { label: '2', value: 2 }
+    ]
+  },
+  {
+    label: "实际端架-是否执行",
+    prop: "actualEndCapExecuted",
+    visible: true,
+    type: 'formula', // 公式
+    func: (row) => {
+      row.actualEndCapExecuted = ((parseFloat(row.actualEndCapQty) >= parseFloat(row.plannedEndCapQty))) ? '是' : '否';
+      return row.actualEndCapExecuted;
+    }
+  },
+  {
+    label: "实际地堆-平米数（㎡）",
+    prop: "actualFloorStackArea",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '0', value: 0 },
+      { label: '0.5', value: 0.5 },
+      { label: '0.8', value: 0.8 },
+      { label: '1', value: 1 },
+      { label: '2', value: 2 },
+      { label: '3', value: 3 },
+      { label: '4', value: 4 },
+    ]
+  },
+  {
+    label: "实际地堆-数量",
+    prop: "actualFloorStackQty",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '0', value: 0 },
+      { label: '1', value: 1 },
+      { label: '2', value: 2 },
+      { label: '3', value: 3 }
+    ]
+  },
+  {
+    label: "实际主题地堆-是否",
+    prop: "actualThemedFloorStack",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '是', value: '是' },
+      { label: '否', value: '否' },
+    ]
+  },
+  {
+    label: "实际地堆是否执行",
+    prop: "actualFloorStackExecuted",
+    visible: true,
+    type: 'formula', // 公式
+    func: (row) => {
+      row.actualFloorStackExecuted = ((parseFloat(row.actualFloorStackArea) >= parseFloat(row.plannedFloorStackArea)) && (parseInt(row.actualFloorStackQty) >= parseInt(row.plannedFloorStackQty))) ? '是' : '否';
+      return row.actualFloorStackExecuted;
+    }
+  },
+  {
+    label: "实际多点陈列-数量+形式",
+    prop: "actualMultiDisplay",
+    visible: true,
+    type: 'input',
+    func: (row) => {
+      // 没有输入内容时，则是否执行设置为否
+      row.actualMultiDisplayExecuted = !row.actualMultiDisplay ? '否' : '是'
+    }
+  },
+  {
+    label: "实际多点陈列-是否执行",
+    prop: "actualMultiDisplayExecuted",
+    visible: true,
+    type: 'select',
+    options: [
+      { label: '是', value: '是' },
+      { label: '否', value: '否' },
+    ]
+  },
+  {
+    label: "常规陈列是否执行",
+    prop: "regularDisplayExecuted",
+    visible: true,
+    type: 'formula', // 公式
+    func: (row) => {
+      // 实际主货架-是否执行 && 实际端架-是否执行 && 实际地堆-是否执行 && 实际多点陈列-是否执行
+      row.regularDisplayExecuted = (row.actualMainShelfExecuted === '是' && row.actualEndCapExecuted === '是' && row.actualFloorStackExecuted === '是' && row.actualMultiDisplayExecuted === '是') ? '是' : '否';
+      return row.regularDisplayExecuted;
+    }
+  }
+])
+
+// 表格列数据
+const tableColumns = ref([])
+// 右上角工具选择列
+const chooseColumns = ref([])
+// 加载进度
+const isLoading = ref(false)
+// 计算列具体数据
+const checkTableColumns = () => {
+  if (operation.value === '全部列') {
+    chooseColumns.value = baseColumns.value
+    tableColumns.value = baseColumns.value.flatMap(item => {
+      if (item.children) {
+        // 在扁平化时就过滤掉 visible 为 false 的列
+        return item.children.filter(child => child.visible);
+      }
+      // 如果是没有 children 的单元素，也检查其 visible 属性
+      return item.visible ? item : [];
+    }).filter(Boolean); // 过滤掉空数组项
+  } else if (operation.value === '填报列') {
+    chooseColumns.value = fillColumns.value
+    console.log(fillColumns, 'fill')
+    tableColumns.value = fillColumns.value.filter(item => item.visible);
+  }
+}
+checkTableColumns()
+// 选择列默认选中哪些
+const visibleProps = computed(() => {
+  // 分情况返回
+  return tableColumns.value.flatMap(item => {
+    if (item.children) {
+      return item.children.map(child => child.prop);
+    }
+    return item.prop;
+  });
+});
+// 监听chooseColumns变化，当列的visible属性改变时重新计算tableColumns
+watch(
+  () => chooseColumns.value,
+  () => {
+    // 不需要重新赋值，只需要重新计算tableColumns
+    checkTableColumns();
+  },
+  { deep: true }
+);
+
+
+// 表格数据
+const tableData = ref([])
+const params = reactive({
+  pageNum: 1,
+  pageSize: 10,
+})
+const total = ref(0)
+
+// 筛选工具
+const showSearch = ref(true);
+const getTableList = async () => {
+  isLoading.value = true
+  const res = await getDisplayList({
+    ...params
+  })
+  tableData.value = res.data.rows
+  total.value = res.data.total
+  setTimeout(() => {
+    isLoading.value = false
+  }, 3000)
+
+}
+getTableList()
+
+// 列宽度
+const getColumnMinWidth = (column) => {
+  // 根据列名或属性判断合适的最小宽度
+  const widthMap = {
+    // 短文本列
+    'dealerProvince': 100,
+    'dealerCity': 100,
+    'storeProvince': 100,
+    'storeCity': 100,
+    'openingDate': 120,
+    'closingDate': 120,
+    'monthlyVisitTarget': 80,
+    // 中等长度文本列
+    'regionName': 120,
+    'districtName': 120,
+    'dealerType': 120,
+    'lineName': 140,
+    'lineType': 120,
+    'channelDl': 120,
+    'channelXl': 120,
+    'storeType': 120,
+    'systemFormat': 120,
+    'monthlyVisitTarget': 120,
+
+    // 长文本列
+    'dealerName': 200,
+    'storeName': 220,
+    'storeAddress': 300,
+    'visitAssistTag': 180,
+    'storeLevel': 170,
+    'plannedFloorStackArea': 170,
+    'plannedFloorStackUnitCostPerSqm': 170,
+    'actualFloorStackArea': 170,
+    'actualMultiDisplay': 190,
+    'plannedMultiDisplay': 190,
+    'actualMultiDisplayExecuted': 170
+  };
+
+  return widthMap[column.prop] || 150; // 默认宽度
+};
+
+</script>
+
+<style scoped
+  lang="scss">
+  .container {
+    .el-form-item {
+      align-items: center;
+    }
+
+    .auto-fit-header-table {
+      width: 100%;
+      --el-table-header-cell-text-color: #333;
+      --el-table-header-cell-padding: 0 .4267rem;
+      /* 列头内边距（可调整） */
+
+      .el-table__header th.el-table__cell {
+        white-space: nowrap;
+        /* 禁止列头文本换行 */
+        text-overflow: clip;
+        /* 溢出不隐藏（若想隐藏用 ellipsis，但需配合 overflow: hidden） */
+        overflow: visible;
+        /* 允许内容撑满（避免文本被截断） */
+      }
+
+      /* 保持原有的单元格样式，但优化内容显示 */
+      .el-table__body td.el-table__cell {
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        overflow: hidden;
+      }
+
+      /* 优化超长文本的显示效果 */
+      .cell {
+        padding: 0 .2133rem;
+      }
+
+      /* 表格内下拉框 */
+      .el-select {
+        width: 100% !important;
+      }
+    }
+  }
+</style>
\ No newline at end of file