Procházet zdrojové kódy

解决树形图传值问题

Liuzhenyu před 1 dnem
rodič
revize
024be0810c

+ 359 - 267
src/components/components/pageContent.vue

@@ -1,314 +1,406 @@
 <template>
-  <div class="contenBox">
-    <!-- 表格标题栏 -->
-    <div class="table-action flex-b">
-      <div class="customList">{{ contentConfig.header.title || '' }}</div>
-      <div class="btns">
-        <slot name="button"></slot>
-      </div>
-    </div>
-
-    <!-- 表格容器(核心:控制高度铺满剩余空间) -->
-    <div class="table-container">
-      <el-table
-        :data="pageList"
-        style="width: 100%; height: 100%"
-        @selection-change="handleSelectionChange"
-        ref="multipleTableRef"
-        v-bind="props.contentConfig?.tableProps"
-        :row-key="getRowKeys"
-        v-loading="loading"
-        size="medium"
-      >
-        <!-- 表格列配置 -->
-        <template v-for="item in contentConfig.propsList" :key="item.prop || item.label">
-          <!-- 序号列 -->
-          <el-table-column
-            v-if="item.type === 'index'"
-            type="index"
-            :fixed="item.fixed"
-            :width="item.width || 50"
-            align="center"
-          />
-
-          <!-- 选择列 -->
-          <el-table-column
-            v-if="item.type === 'selection'"
-            type="selection"
-            :fixed="item.fixed"
-            width="55"
-            align="center"
-            :reserve-selection="true"
-          />
-
-          <!-- 操作列 -->
-          <el-table-column
-            v-else-if="item.type === 'handler'"
-            :fixed="item.fixed"
-            :label="item.label || '操作'"
-            :width="item.width || 150"
-            align="center"
-          >
-            <template #default="scope">
-              <slot :name="item.slotName" v-bind="scope"></slot>
-            </template>
-          </el-table-column>
-
-          <!-- 自定义列 -->
-          <el-table-column
-            v-else-if="item.type === 'custom'"
-            show-overflow-tooltip
-            :fixed="item.fixed"
-            :label="item.label"
-            :width="item.width"
-            :prop="item.prop"
-            :sortable="item.sortable || false"
-            :column-key="item.prop"
-          >
-            <template #default="scope">
-              <slot :name="item.slotName" v-bind="scope"></slot>
-            </template>
-          </el-table-column>
+    <div class="contenBox">
+        <div class="table-action flex-b">
+            <div class="customList">{{ contentConfig.header.title ? contentConfig.header.title : '' }}</div>
+            <div class="btns">
+                <slot name="button"></slot>
+            </div>
+        </div>
+        <el-table :data="pageList" style="width: 100%; max-height: 55vh; overflow: auto"
+            @selection-change="handleSelectionChange" ref="multipleTableRef" v-bind="props.contentConfig?.tableProps"
+            :row-key="getRowKeys" v-loading="loading">
+            <template v-for="item in contentConfig.propsList">
+                <!-- 序号 -->
+                <el-table-column :fixed="item.fixed" v-if="item.type === 'index'" type="index" :key="item.prop" center>
+                </el-table-column>
+                <!-- 选择 -->
+                <el-table-column :fixed="item.fixed" type="selection" width="55" align="center" :key="item.prop"
+                    v-if="item.type === 'selection'" :reserve-selection="true" />
+                <!-- 操作类 -->
+                <el-table-column :key="item" :fixed="item.fixed" align="center" v-bind="item"
+                    v-else-if="item.type === 'handler'">
+                    <template #default="scope">
+                        <slot :name="item.slotName" v-bind="scope"></slot>
+                    </template>
+                </el-table-column>
 
-          <!-- 时间格式化列 -->
-          <el-table-column
-            v-else-if="item.type === 'time'"
-            show-overflow-tooltip
-            :fixed="item.fixed"
-            :label="item.label"
-            :width="item.width || 180"
-            align="center"
-          >
-            <template #default="scope">
-              {{ parseTime(scope.row[item.prop]) }}
+                <!-- 自定义类 -->
+                <el-table-column show-overflow-tooltip :fixed="item.fixed" :key="item.label"
+                    v-else-if="item.type === 'custom'" :label="item.label" :width="item.width" :prop="item.prop"
+                    :sortable="item.sortable || false" :column-key="item.prop">
+                    <template #default="scope">
+                        <slot :name="item.slotName" v-bind="scope"></slot>
+                    </template>
+                </el-table-column>
+                <!-- 时间类 -->
+                <el-table-column show-overflow-tooltip :fixed="item.fixed" :key="item.label"
+                    v-else-if="item.type === 'time'" align="center" :label="item.label" :width="item.width">
+                    <template #default="scope">
+                        {{ parseTime(scope.row[item.prop]) }}
+                    </template>
+                </el-table-column>
+                <!-- 普通渲染类 -->
+                <el-table-column :fixed="item.fixed" show-overflow-tooltip v-else-if="item.type === 'normal'"
+                    :key="item.label" v-bind="item" :prop="item.prop" :sortable="item.sortable || false"
+                    :column-key="item.prop" />
+                <!-- 倒序类 -->
+                <el-table-column :fixed="item.fixed" show-overflow-tooltip v-else-if="item.type === 'sortable'"
+                    :key="item.label" sortable v-bind="item" />
             </template>
-          </el-table-column>
+        </el-table>
+        <div class="flex-b">
+            <div v-if="contentConfig.moneyTotal">
+                <div class="flex" v-if="contentConfig.moneyTotalType === false">
+                    <div class="footSlotStyle mr10">小计:</div>
+                    <div class="footSlotStyle mr20" v-if="!contentConfig.customSubtotal">
+                        数量 {{ subNumber || 0 }}
+                        张
+                    </div>
+                    <div class="footSlotStyle mr20" v-else>数量 {{ subtotalNum || 0 }}</div>
+                    <slot name="subtotalSlot"></slot>
+                </div>
+                <div v-else class="flex">
+                    <div class="footSlotStyle mr10">小计:</div>
+                    <div class="footSlotStyle mr20" v-if="!contentConfig.customSubtotal">
+                        费用金额 {{ subtotal || 0 }}元
+                    </div>
+                    <div class="footSlotStyle mr20" v-else>费用金额 {{ subtotalNum || 0 }}元</div>
+                    <slot name="subtotalSlot"></slot>
+                </div>
+                <div v-if="contentConfig.moneyTotalType === false" class="flex">
+                    <div class="footSlotStyle mr10">总计:</div>
+                    <div class="footSlotStyle mr20">数量 {{ resDate.moneyTotal || 0 }} 张</div>
+                    <slot name="totalSlot"></slot>
+                </div>
+                <div v-else class="flex">
+                    <div class="footSlotStyle mr10">总计:</div>
+                    <div class="footSlotStyle mr20">费用金额 {{ resDate.moneyTotal || 0 }} 元</div>
+                    <slot name="totalSlot"></slot>
+                </div>
+            </div>
+            <div v-else-if="contentConfig.energyMonery">
+                <div class="flex">
+                    <div class="footSlotStyle mr10">小计:</div>
+                    <div class="footSlotStyle mr20 energyClass">
+                        <div class="itemName">电:{{ electricity || 0 }}</div>
+                        <div class="itemName">水:{{ water || 0 }}</div>
+                        <div class="itemName">气:{{ gas || 0 }}</div>
+                    </div>
+                    <slot name="subtotalSlot"></slot>
+                </div>
+                <div class="flex">
+                    <div class="footSlotStyle mr10">总计:</div>
+                    <div class="footSlotStyle mr20 energyClass">
+                        <div class="itemName">电:{{ electricityTotalPrice || 0 }}</div>
+                        <div class="itemName">水:{{ waterTotalPrice || 0 }}</div>
+                        <div class="itemName">气:{{ gasTotalPrice || 0 }}</div>
+                    </div>
+                    <slot name="totalSlot"></slot>
+                </div>
+            </div>
+            <!-- 其他/能耗费用计算 -->
+            <div style="width: 60%;" v-else-if="contentConfig.energyConsumption">
+                <div class="flex" v-if="contentConfig.energyConsumptionType === false">
+                    <div class="footSlotStyle mr10">能耗总量:</div>
+                    <div class="footSlotStyle mr20 energyClass">
+                        <div class="itemName" v-for="(item, index) in rowDate.value" :key="index">{{ item.energyName
+                        }}:{{
+                                item.dosage || 0 }}
+                        </div>
 
-          <!-- 普通列 -->
-          <el-table-column
-            v-else
-            show-overflow-tooltip
-            :fixed="item.fixed"
-            :label="item.label"
-            :width="item.width"
-            :prop="item.prop"
-            :sortable="item.sortable || false"
-            :column-key="item.prop"
-            align="center"
-          />
-        </template>
-      </el-table>
+                    </div>
+                </div>
+                <div class="flex" v-else>
+                    <div class="footSlotStyle mr10">能耗总量:</div>
+                    <div class="footSlotStyle mr20 energyClass">
+                        <div class="itemName">电:{{ electricityDosage || 0 }}</div>
+                        <div class="itemName">水:{{ waterDosage || 0 }}</div>
+                        <div class="itemName">气:{{ gasDosage || 0 }}</div>
+                    </div>
+                </div>
+            </div>
+            <div class="flex" v-else></div>
+            <el-pagination class="mt10" v-model:current-page="systemStore.pageInfo.pageNum"
+                v-model:page-size="systemStore.pageInfo.pageSize" :page-sizes="sizes" :small="false" :disabled="false"
+                :background="true" layout="total, sizes, prev, pager, next, jumper" :total="pageTotalCount"
+                @size-change="onPageSizeChange" @current-change="onPageChange" />
+        </div>
     </div>
-  </div>
 </template>
 
 <script setup lang="ts" name="content">
-import { ref, watch, onMounted } from 'vue';
-import type { Table } from 'element-plus';
 import useSystemStore from '@/store/main';
-import useUserStore from '@/store/modules/user';
 import { parseTime } from '@/utils/ruoyi';
+import useUserStore from '@/store/modules/user';
+const userStore = useUserStore().userInfo.userName === 'admin' ? '' : useUserStore().userInfo.userId;
+import { ref, watch } from 'vue';
+// import { ElTable } from 'element-plus';
+import { useSharedValueStore } from './sharedValueStore';
 
-// Props 定义
-interface IProps {
-  contentConfig: {
-    pageName: string;
-    status: string;
-    createUser: string;
-    oneself: number;
-    header: { title: string };
-    tableProps?: Record<string, any>; // 表格额外属性(如 border)
-    propsList: Array<{
-      prop?: string;
-      label: string;
-      type?: 'index' | 'selection' | 'handler' | 'custom' | 'time' | string;
-      width?: number | string;
-      fixed?: 'left' | 'right' | boolean;
-      slotName?: string;
-      sortable?: boolean;
-      [key: string]: any;
-    }>;
-    pageListParams?: Record<string, any>;
-    // 其他原有配置...
-    energyConsumption?: boolean;
-    energyConsumptionType?: boolean;
-    // ...
-  };
-  sizes?: number[];
-  showSummary?: boolean;
-  summaryMethod?: () => any;
-  subtotalNum?: number;
-}
-const props = withDefaults(defineProps<IProps>(), {
-  sizes: () => [10, 50, 100, 300, 500],
-  showSummary: false,
-  customSubtotal: false,
-});
+const props = withDefaults(
+    defineProps<{
+        contentConfig: {
+            pageName: string;
+            status: string;
+            createUser: string;
+            oneself: number;
+            header: {
+                title: string;
+            };
+            tableProps: any;
+            propsList: any[];
+            pageListParams?: {};
+            moneyTotal?: boolean;
+            energyConsumption?: boolean;
+            energyConsumptionType?: boolean;
+            energyMonery?: boolean;
+            moneyTotalType?: boolean;
+            customSubtotal?: boolean;
+        };
+        sizes?: number[];
+        showSummary?: boolean;
+        summaryMethod?: () => any;
+        subtotalNum?: number;
+    }>(),
+    {
+        sizes: [10, 50, 100, 300, 500],
+        customSubtotal: false,
+    }
+);
 const emit = defineEmits(['handleSelect', 'pageChanged']);
+const loading = ref(true);
 
-// 状态管理
+// 请求数据
 const systemStore = useSystemStore();
-const userStore = useUserStore().userInfo.userName === 'admin' ? '' : useUserStore().userInfo.userId;
-const { pageList, pageTotalCount, resDate } = storeToRefs(systemStore);
-const loading = ref(true);
-const multipleTableRef = ref<InstanceType<typeof Table>>();
-const selectedItems = ref<any[]>([]);
+// const pageNum = ref(1);
+// const pageSize = ref(10);
 
-// 初始化表格数据
-onMounted(() => {
-  fetchPageListData();
-});
+const sharedValueStore = useSharedValueStore();
+const sharedValue = computed(() => sharedValueStore.sharedValue);
 
-// 请求表格数据
-async function fetchPageListData(queryInfo: Record<string, any> = {}) {
-  loading.value = true;
-  try {
-    await systemStore.getPageListDataAction(props.contentConfig.pageName, {
-      pageNum: systemStore.pageInfo.pageNum,
-      pageSize: systemStore.pageInfo.pageSize,
-      userId: userStore,
-      status: props.contentConfig.status,
-      createUser: props.contentConfig.createUser,
-      oneself: props.contentConfig.oneself,
-      ...queryInfo,
-      ...props.contentConfig.pageListParams,
-    });
-  } finally {
-    loading.value = false;
-  }
+// 获取列表
+async function fetchPageListData(queryInfo: any = {}) {
+    loading.value = true;
+    // const pageNumber = pageNum.value;
+    // const pageSizeValue = pageSize.value;
+    // 2.发生网络请求
+    await systemStore
+        .getPageListDataAction(props.contentConfig.pageName, {
+            pageNum: systemStore.pageInfo.pageNum,
+            pageSize: systemStore.pageInfo.pageSize,
+            userId: userStore,
+            status: props.contentConfig.status,
+            createUser: props.contentConfig.createUser,
+            oneself: props.contentConfig.oneself,
+            ...queryInfo,
+            ...props.contentConfig.pageListParams,
+        })
+        .then(res => {
+            loading.value = false;
+        });
 }
 
-// 监听页面操作后刷新表格
-systemStore.$onAction(({ name }) => {
-  if (['newPageDataAction', 'deletePageDataAction'].includes(name)) {
-    systemStore.pageInfo.pageNum = 1;
-    systemStore.pageInfo.pageSize = 50;
-    fetchPageListData(); // 重新加载第一页
-  }
+fetchPageListData();
+systemStore.$onAction(arg => {
+    if (arg.name === 'newPageDataAction' || arg.name === 'deletePageDataAction') {
+        // pageNum.value = 1;
+        // pageSize.value = 10;
+        systemStore.pageInfo.pageNum = 1;
+        systemStore.pageInfo.pageSize = 50;
+    }
 });
 
-// 表格选择事件
-function handleSelectionChange(selection: any[]) {
-  selectedItems.value = selection;
-  emit('handleSelect', selection);
-}
-
-// 行唯一标识
-const getRowKeys = (row: any) => row.checkId || row.id;
-
-// 其他原有逻辑...
+// 2.展示数据
+const { pageList, pageTotalCount, resDate } = storeToRefs(systemStore);
+// 监听列表数据变化清空选择器
+const multipleTableRef = ref();
+let subtotal = ref(0 as any);
+let subNumber = ref(0 as any);
 const clearFlag = ref(true);
 const rowDate = reactive<any>([]);
-// ...(省略原有其他状态逻辑,如 subtotal、energy 相关)...
+const electricityDosage = ref();
+const gasDosage = ref();
+const waterDosage = ref();
+const electricityTotalPrice = ref();
+const gasTotalPrice = ref();
+const waterTotalPrice = ref();
+watch(
+    () => resDate,
+    (newValue: any) => {
+        if (props.contentConfig?.energyConsumption === true) {
+            if (props.contentConfig?.energyConsumptionType === false) {
+                rowDate.value = newValue._object.resDate.otherEnergyList
+            } else {
+                electricityDosage.value = newValue._object.resDate.electricityDosage
+                gasDosage.value = newValue._object.resDate.gasDosage
+                waterDosage.value = newValue._object.resDate.waterDosage
+            }
+        } if (props.contentConfig?.energyMonery === true) {
+            electricityTotalPrice.value = newValue._object.resDate.electricityDosage
+            gasTotalPrice.value = newValue._object.resDate.gasDosage
+            waterTotalPrice.value = newValue._object.resDate.waterDosage
+        }
 
-// 监听 resDate 变化(原有逻辑保留)
+    },
+    { deep: true }
+);
 watch(
-  () => resDate,
-  (newValue: any) => {
-    if (props.contentConfig?.energyConsumption === true) {
-      // ...原有能源统计逻辑...
-    }
-  },
-  { deep: true }
+    () => pageList,
+    (newValue: any) => {
+        if (clearFlag.value) {
+            multipleTableRef.value!.clearSelection();
+            subtotal.value = 0;
+            subNumber.value = 0;
+        }
+        // 控制是否清空所选项
+        clearFlag.value = true;
+        // pageList.value.forEach((item: any) => {
+        //     subtotal.value += item.moneyTotal;
+        // });
+        // subtotal.value = Number(subtotal.value.toFixed(2)).toFixed(2);
+    },
+    { deep: true }
 );
+// 处理选中状态
+const selectedItems = ref([] as any);
 
-// 暴露方法给父组件
-defineExpose({
-  fetchPageListData,
-  clearSelection: () => multipleTableRef.value?.clearSelection(),
-  // ...其他需要暴露的方法...
-});
-</script>
+const getRowKeys = row => {
+    return row.checkId;
+};
 
-<style scoped lang="scss">
-/* 容器样式:启用 Flex 布局 */
-.contenBox {
-	flex: 1;
-  padding: 15px 20px 20px 20px;
-  margin-top: 20px;
-  background-color: #fff;
-  border-radius: 4px; /* 可选:添加边框圆角 */
-  display: flex; /* 核心:Flex 布局 */
-  flex-direction: column; /* 垂直排列 */
-  height: 100%; /* 继承父容器高度(需确保父容器有高度) */
-  min-height: 400px; /* 最小高度,避免内容过少时表格过矮 */
-  box-sizing: border-box; /* 包含 padding 计算高度 */
-}
+const echoWay = async () => {
+    await pageList.value.forEach((row: any) => {
+        if (selectedItems.value!.indexOf(row.checkId) >= 0) {
+            multipleTableRef.value!.toggleRowSelection(row, true);
+        }
+    });
+    // console.log(selectedItems.value);
+};
 
-/* 标题栏样式 */
-.table-action {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  height: 40px; /* 固定高度,不参与弹性拉伸 */
-  margin-bottom: 15px;
-  padding: 0 5px;
+// 清空多选
+function clearSelection() {
+    if (pageList) {
+        multipleTableRef.value!.clearSelection();
+    }
+}
+const water = ref();
+const electricity = ref();
+const gas = ref();
+// 多选框切换
+function handleSelectionChange(e: any) {
+    emit('handleSelect', e);
+    if (props.contentConfig.energyMonery) {
+        water.value = 0;
+        electricity.value = 0;
+        gas.value = 0;
+        e.forEach(item => {
+            if (item.energyType == '水') {
+                let waters = item.moneyTotal * 100; // 将金额转换为分;
+                water.value += waters;
+            } else if (item.energyType == '电') {
+                let electricitys = item.moneyTotal * 100; // 将金额转换为分;
+                electricity.value += electricitys;
+            } else if (item.energyType == '气') {
+                let gase = item.moneyTotal * 100; // 将金额转换为分;
+                gas.value += gase;
+            }
+        });
+        water.value = (water.value / 100).toFixed(2);
+        electricity.value = (electricity.value / 100).toFixed(2);
+        gas.value = (gas.value / 100).toFixed(2);
+        console.log('zheshi', water.value, electricity.value, gas.value);
 
-  .customList {
-    font-size: 16px;
-    font-weight: 600;
-    color: #303133;
-  }
+    } else {
+        subtotal.value = 0;
+        subNumber.value = 0;
+        selectedItems.value = [];
+        e.forEach(item => {
+            subNumber.value += item.moneyTotal;
+            let moneyTotalInCents = item.moneyTotal * 100; // 将金额转换为分
+            subtotal.value += moneyTotalInCents;
+            selectedItems.value.push(item.checkId);
+        });
+        subtotal.value = (subtotal.value / 100).toFixed(2);
+        // selectedItems.value = e.map(item => {
+        //     console.log(item.moneyTotal);
+        //     subtotal.value += item.moneyTotal;
+        //     return item.checkId;
+        // });
+        // console.log(subtotal.value);
+    }
 
-  .btns {
-    display: flex;
-    gap: 10px;
-  }
 }
 
-/* 表格容器:铺满剩余高度 */
-.table-container {
-  flex: 1; /* 关键:占据父容器剩余所有空间 */
-  min-height: 300px; /* 最小高度,确保表格可视 */
-  overflow: hidden; /* 隐藏容器自身滚动条 */
-  position: relative; /* 解决 loading 定位问题 */
+// 页码变化
+async function onPageSizeChange(size: number) {
+    // 每页条数改变函数
+    // pageSize.value = size;
+    // pageNum.value = 1;
+    systemStore.pageInfo.pageSize = size;
+    systemStore.pageInfo.pageNum = 1;
+    // 控制是否清空所选项
+    clearFlag.value = false;
+    await fetchPageListData();
+    // 恢复选中状态
+    // await echoWay();
 }
-
-/* 表格样式调整 */
-.el-table {
-  width: 100% !important;
-  height: 100% !important; /* 表格高度铺满容器 */
-  max-height: none !important; /* 移除原有最大高度限制 */
-  display: flex;
-  flex-direction: column;
+async function onPageChange(current: number) {
+    // 页码改变函数
+    systemStore.pageInfo.pageNum = current;
+    systemStore.pageInfo.pageNum = current;
+    // 控制是否清空所选项
+    clearFlag.value = false;
+    await fetchPageListData();
+    // 恢复选中状态
+    // await echoWay();
 }
+watch(
+    () => sharedValueStore.pageNum,
+    (newVal, oldVal) => {
+        // pageNum.value = 1;
+        systemStore.pageInfo.pageNum = 1;
+    },
+    { deep: true }
+);
+// 暴露函数
+defineExpose({
+    clearSelection,
+    fetchPageListData,
+});
+</script>
 
-/* 表头样式 */
-.el-table__header-wrapper {
-  flex-shrink: 0; /* 表头不收缩 */
-  background-color: #f5f7fa; /* 表头背景色(可选) */
-}
+<style scoped lang="scss">
+.contenBox {
+    padding: 15px 20px 20px 20px;
+    margin-top: 20px;
+    background-color: #fff;
 
-/* 表体样式:内容超出时滚动 */
-.el-table__body-wrapper {
-  flex: 1; /* 表体占据剩余空间 */
-  overflow-y: auto !important; /* 垂直滚动 */
-  overflow-x: auto !important; /* 水平滚动(内容过宽时) */
-}
+    .table-action {
+        margin-bottom: 15px;
 
-/* 修复固定列高度问题 */
-.el-table__fixed, .el-table__fixed-right {
-  height: 100% !important;
-}
-.el-table__fixed-body-wrapper, .el-table__fixed-right-body-wrapper {
-  height: calc(100% - 41px) !important; /* 固定列表体高度(减去表头高度) */
+        button {
+            margin-right: 10px;
+        }
+    }
+
+    .ivu-table-header thead tr th {
+        background-color: #f0f9fe;
+    }
 }
 
-/* 其他原有样式 */
-/* ...(保留原有其他样式,如 customList、itemName 等)... */
 .customList {
-	color: #606266;
-	font-weight: 700;
+    color: #606266;
+    font-weight: 700;
 }
 
 .itemName {
-	margin: 0 10px 5px 10px;
+    margin: 0 10px 5px 10px;
 }
 
 .energyClass {
-	display: flex;
-	align-items: center;
-	flex-wrap: wrap;
-	flex: 1;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    flex: 1;
 }
-</style>
+</style>

+ 14 - 8
src/views/addressBook/components/treeSelect.vue

@@ -20,7 +20,7 @@
 				check-on-click-node
 				node-key="id"
 				:filter-node-method="filterNode"
-				@current-change="handleCheckChange"
+				@check-change="handleCheckChange"
 				class="custom-tree"
 			/>
 		</div>
@@ -31,6 +31,8 @@
 import { ref, computed } from 'vue';
 import { ElTree } from 'element-plus';
 
+const emit = defineEmits(['treeCheck']); 
+
 // 树形配置项
 const treeProps = {
 	label: 'label',
@@ -101,13 +103,17 @@ const filterNode = (value: string, data: any) => {
 	return data.label.toLowerCase().includes(value.toLowerCase());
 };
 
-const handleCheckChange = () => {
-	// // 参数:是否只含叶子、是否含半选(不全选,也显示父级数据)
-	// const checkedNodes = treeRef.value!.getCheckedNodes(false, false) as any[];
-	// console.log('所有选中的节点:', checkedNodes);
-	// 如果只想拿 key 数组  参数:是否只含叶子
-	checkedKeys.value = treeRef.value!.getCheckedKeys(false);
-	console.log('选中的 keys:', checkedKeys);
+const handleCheckChange = (data: Tree, checked: boolean, indeterminate: boolean) => {
+  console.log('勾选状态变化:', {
+    nodeId: data.id,
+    nodeLabel: data.label,
+    isChecked: checked,       // 是否完全勾选
+    isIndeterminate: indeterminate  // 是否半选(父节点部分子节点勾选)
+  });
+	// 以上参数按照项目需求取值,正常情况下只会用到 allCheckedKeys
+  const allCheckedKeys = treeRef.value?.getCheckedKeys(false) || [];
+  console.log('所有勾选的节点ID:', allCheckedKeys);
+	emit('treeCheck', allCheckedKeys)
 };
 
 // 处理搜索

+ 10 - 2
src/views/addressBook/index.vue

@@ -2,7 +2,7 @@
 	<el-tabs type="card" v-model="activeTab" style="height: 100%">
 		<el-tab-pane v-for="tab in tabs" :key="tab.key" :label="tab.label" :name="tab.key">
 			<div class="sensitive-words flex">
-				<TreeSelect class="mr20"></TreeSelect>
+				<TreeSelect class="mr20" @treeCheck="getTreeCheck"></TreeSelect>
 				<div class="table-box">
 					<pageSearch
 						ref="searchTableRef"
@@ -56,7 +56,7 @@ const { pageDetailInfo } = storeToRefs(systemStore);
 const total = ref(0);
 const pageSize = ref([10, 20, 30]);
 const tableData = ref([]);
-const tableListRef = ref();
+const tableListRef = ref<InstanceType<typeof pageContent>>(); 
 
 const tabs = reactive([
 	{
@@ -84,6 +84,14 @@ import usePageModal from '@/components/components/hooks/usePageDetails';
 const { modalRef, handleNewDataClick, handleEditDataClick, handleCheckDataClick, handlePageDetail } =
 	usePageModal();
 
+const getTreeCheck = async(data) => {
+    console.log(await tableListRef.value);
+    // TODO 因为是tabs的v-for,现在有两个tableListRef节点,后面你需要优化一下
+    if (tableListRef.value) {
+        await tableListRef.value[0].fetchPageListData();
+    }
+}
+
 const handleEdit = async (id: string) => {
 	await handlePageDetail(id);
 	await handleEditDataClick();