ads_web/src/views/reportManage/dataCenter/combinedDisplay/index.vue

<script lang="ts" setup>
import { ref } from 'vue';
import mainData from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/mainData.vue';
import monthlyComparativeData
  from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/monthlyComparativeData.vue';
import planInfo from '/src/views/reportManage/dataCenter/combinedDisplay/components/tableData/planInfo.vue';
// 筛选查询
const selectorRef = ref(null);
const taskIds = ref({});

const dayDate = ref(null);
const weekDate = ref(null);
const monthDate = ref(null);

const monthCurrentDate = ref({});

const monthQueryParams = ref({
  taskIds,
  monthCurrentDate,
});

// 表格
const showTable = ref('mainData'); // 初始显示表格
const currentTable: any = {
  mainData,
  monthlyComparativeData,
  planInfo
};
const panes = [
  { label: '主数据', name: 'mainData' },
  { label: '月度对比数据', name: 'monthlyComparativeData' },
  { label: '计划销售额', name: 'planInfo' },
];

// function updateDataChange(newId) {
//   if (selectorRef.value) {
//     taskIds.value = newId.value;
//   }
// }
//
// const handelDateChange = (date) => {
//   monthCurrentDate.value = date;
// };
//
// const processingDateChange = (date) => {
//   dayDate.value = date.dayDate;
//   weekDate.value = date.weekDate;
//   monthDate.value = date.monthDate;
// };

function handleButtonClick(tableName) {
  showTable.value = tableName;
}

</script>

<template>
  <div>
    <component :is="currentTable[showTable]"
               ref="mainDataComponent"
               :dayDate="dayDate"
               :monthCurrentDate="monthCurrentDate"
               :monthDate="monthDate"
               :taskIds="taskIds"
               :weekDate="weekDate"
    >
      <template #table-header>
        <div class="custom-button my">
          <!--<el-button-->
          <!--    v-for="pane in panes"-->
          <!--    :key="pane.name"-->
          <!--    :type="showTable === pane.name ? 'primary' : 'default'"-->
          <!--    @click="handleButtonClick(pane.name)">-->
          <!--  {{ pane.label }}-->
          <!--</el-button>-->
          <el-radio-group
              v-model="showTable"
              aria-label="size control"
              @change="handleButtonClick">
            <el-radio-button
                v-for="pane in panes"
                :key="pane.name"
                :label="pane.name">
              {{ pane.label }}
            </el-radio-button>
          </el-radio-group>
        </div>
      </template>
    </component>


  </div>
</template>

<style scoped>
.custom-card-style {
  z-index: 999;
  position: sticky;
  top: 0;
}

.demonstration {
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin: 10px;
}

.custom-button {
  z-index: 8;
  position: absolute;
  /* color: #3a83f7 !important; */
}

.my {
  margin: 0.8rem 0;

}
</style>