提交工艺路线的表格触底加载

CD配唱片

2025-04-24 b0e84af3dafe8984b69858c4420b5611c9b58f30

 src/components/HxlhTable/index.vue

@@ -1,180 +1,185 @@
<template>
    <div class="hxlh-table">
        <vxe-grid
            ref="vxeTable"
            :show-header-overflow="true"
            :show-overflow="showOverflow"
            :stripe="true"
            :border="true"
            :show-footer="showfooter"
            header-align="center"
            highlight-hover-column
            highlight-hover-row
            resizable
            size="small"
            :loading="loading"
            :pager-config="tablePage"
            :form-config="tableForm"
            :columns="columns"
            :column-config="{resizable: true}"
            :data.sync="data"
            :checkbox-config="checkboxConfig"
            :height="height"
            :max-height="maxHeight"
            :toolbar="toolbar"
            :reload-data="reloadData"
            :footer-method="footerMethod"
            :footer-cell-class-name="footerCellClassName"
            :scroll-x="{enabled: true}"
            :scroll-y="{enabled: true}"
            row-height="auto"
            :expand-config="expandConfig"
            :tree-config="treeConfig"
            :row-style="rowStyle"
            @sort-change="sortChange"
            @page-change="pagerChange"
            @form-submit="findList"
            @checkbox-change="checkChange"
            @checkbox-all="checkChangeall"
            >
            <template v-slot:buttons="row">
                <slot name="buttons" v-bind="row"/>
            </template>
            <template #expandContent="{ row }">
              <vxe-grid v-bind="subGridOptions" :data="row.subList">
              </vxe-grid>
            </template>
            <template v-slot:status="row" >
              <slot name="status" v-bind="row"/>
            </template>
            <template v-slot:mark="row" >
              <slot name="mark" v-bind="row"/>
            </template>
        </vxe-grid>
    </div>
  </template>
  
  <div class="hxlh-table">
    <vxe-grid
      ref="vxeTable"
      :show-header-overflow="true"
      :show-overflow="showOverflow"
      :stripe="true"
      :border="true"
      :show-footer="showfooter"
      header-align="center"
      highlight-hover-column
      highlight-hover-row
      resizable
      size="small"
      :loading="loading"
      :pager-config="tablePage"
      :form-config="tableForm"
      :columns="columns"
      :column-config="{ resizable: true }"
      :data.sync="data"
      :checkbox-config="checkboxConfig"
      :height="height"
      :max-height="maxHeight"
      :toolbar="toolbar"
      :reload-data="reloadData"
      :footer-method="footerMethod"
      :footer-cell-class-name="footerCellClassName"
      :scroll-x="{ enabled: true }"
      :scroll-y="{ enabled: true }"
      row-height="auto"
      :expand-config="expandConfig"
      :tree-config="treeConfig"
      :row-style="rowStyle"
      :virtualYConfig="virtualYConfig"
      @sort-change="sortChange"
      @page-change="pagerChange"
      @form-submit="findList"
      @checkbox-change="checkChange"
      @checkbox-all="checkChangeall"
      @scroll-boundary="scrollBoundaryEvent"
    >
      <template v-slot:buttons="row">
        <slot name="buttons" v-bind="row" />
      </template>
      <template #expandContent="{ row }">
        <vxe-grid v-bind="subGridOptions" :data="row.subList"> </vxe-grid>
      </template>
      <template v-slot:status="row">
        <slot name="status" v-bind="row" />
      </template>
      <template v-slot:mark="row">
        <slot name="mark" v-bind="row" />
      </template>
    </vxe-grid>
  </div>
</template>

<script setup>
// 获取 Vuex 存储实例
// const useStore = useStore();

const props = defineProps({
/* table 参数*/
showOverflow: {
  /* table 参数*/
  showOverflow: {
    type: Boolean,
    default: () => {
    return true
    }
},
columns: {
      return true;
    },
  },
  columns: {
    type: Array,
    default: () => {
    return []
    }
},
showfooter: {
      return [];
    },
  },
  showfooter: {
    type: Boolean,
    default: () => {
    return false
    }
},
toolbar: {
      return false;
    },
  },
  toolbar: {
    type: Object,
    default: () => {
        return {
            id: 'khjgz',
            zoom: true,
            resizable: {
            storage: true
            },
            custom: {
            storage: true
            },
            slots: {
            buttons: 'buttons'
            }
        }
    }
},
data: {
      return {
        id: "khjgz",
        zoom: true,
        resizable: {
          storage: true,
        },
        custom: {
          storage: true,
        },
        slots: {
          buttons: "buttons",
        },
      };
    },
  },
  data: {
    type: Array,
    default: () => {
    return []
    }
},
loading: {
      return [];
    },
  },
  loading: {
    type: Boolean,
    default: false
},
page: {
    default: false,
  },
  page: {
    type: Object,
    default: function() {
        return null
    }
},
checkboxConfig: {
    default: function () {
      return null;
    },
  },
  checkboxConfig: {
    type: Object,
    default: () => {
    return {}
    }
},
maxHeight: {
      return {};
    },
  },
  maxHeight: {
    type: String,
    default: () => {
    return ''
    }
},
height: {
      return "";
    },
  },
  height: {
    type: String,
    default: () => {
    return ''
    }
},
reloadData: {
      return "";
    },
  },
  reloadData: {
    type: Function,
    default: () => {
    return {}
    }
},
footerCellClassName: {
      return {};
    },
  },
  footerCellClassName: {
    type: Function,
    default: () => {
    return {}
    }
},
mxTableFootData: {
      return {};
    },
  },
  mxTableFootData: {
    type: Array,
    default: () => {
    return []
    }
},
expandConfig: {
      return [];
    },
  },
  expandConfig: {
    type: Object,
    default: () => {
      return {lazy: false}
    }
},
subGridOptions: {
    type:Object,
    default :()=>{
      return {}
    }
},
treeConfig: {
      return { lazy: false };
    },
  },
  subGridOptions: {
    type: Object,
    default: () => {
    return {}
    }
},
rowStyle: {
      return {};
    },
  },
  treeConfig: {
    type: Object,
    default: () => {
      return {};
    },
  },
  rowStyle: {
    type: Function,
    default: () => {
    return {}
    }
},

})

      return {};
    },
  },
  virtualYConfig:{
    type: Object,
    default: () => {
      return {};
    },
  }
});

const tableForm = ref([]);

@@ -182,55 +187,72 @@
const emit = defineEmits();

function pagerChange({ type, currentPage, pageSize }) {
    if (type == 'current') {
        emit("changePageNo", currentPage);
    } else if (type == 'size') {
        emit('changePageSize', pageSize)
    }
  if (type == "current") {
    emit("changePageNo", currentPage);
  } else if (type == "size") {
    emit("changePageSize", pageSize);
  }
}
function findList() {}

function sortChange({ column, property, order }) {
    emit('sortTable', property, order)
  emit("sortTable", property, order);
}

function checkChange(info) {
    const { records, checked, row, rowIndex } = info
    emit('on-checkbox', { records, rowIndex, checked })
  const { records, checked, row, rowIndex } = info;
  emit("on-checkbox", { records, rowIndex, checked });
}

function checkChangeall(info) {
    const { records, checked, row } = info
    emit('on-checkbox', { records, rowIndex: null, checked })
  const { records, checked, row } = info;
  emit("on-checkbox", { records, rowIndex: null, checked });
}

// 定义 footerMethod 函数
function footerMethod({ columns, data }) {
  // 触发 footerMethod 事件
  emit('footerMethod', { columns, data });
  emit("footerMethod", { columns, data });
  // 返回 Vuex 中的 hxlhTableFootData 状态
//   return useStore.state.hxlhTableFootData;
};

  //   return useStore.state.hxlhTableFootData;
}
function scrollBoundaryEvent ({ direction }) {
  switch (direction) {
    case 'top':
      console.log('触发顶部阈值范围')
      break
    case 'bottom':
      console.log('触发底部阈值范围')
      // this.loadList(20)
      emit('bottomAutoLoadMore')
      break
    case 'left':
      console.log('触发左侧阈值范围')
      break
    case 'right':
      console.log('触发右侧阈值范围')
      break
  }
}
function handleSum(list, field) {
    var total = 0
    for (var index = 0; index < list.length; index++) {
    total += Number(list[index][field] || 0)
    }
    return total
  var total = 0;
  for (var index = 0; index < list.length; index++) {
    total += Number(list[index][field] || 0);
  }
  return total;
}
const vxeTable = ref(null);

// 在值发生改变时更新表尾合计
function updateFooter(params) {
    const xTable = vxeTable.value
    xTable.updateFooter()
  const xTable = vxeTable.value;
  xTable.updateFooter();
}

// 取消复选框选择
function clearCheckboxRow() {
    const xTable = vxeTable.value
    xTable.clearCheckboxRow()
  const xTable = vxeTable.value;
  xTable.clearCheckboxRow();
}

// 定义 tablePage 计算属性
@@ -242,10 +264,19 @@
    total: props.page.total,
    currentPage: props.page.current,
    pageSize: props.page.size,
    align: 'left',
    align: "left",
    pageSizes: [10, 20, 50, 100, 500],
    layouts: ['PrevJump', 'PrevPage', 'Number', 'NextPage', 'NextJump', 'Sizes', 'FullJump', 'Total'],
    perfect: true
    layouts: [
      "PrevJump",
      "PrevPage",
      "Number",
      "NextPage",
      "NextJump",
      "Sizes",
      "FullJump",
      "Total",
    ],
    perfect: true,
  };
});

@@ -273,17 +304,16 @@
</script>

<style lang="scss">
  .hxlh-table .vxe-toolbar .vxe-tools--operate {
    margin-top: -23px;
  }
.hxlh-table .vxe-toolbar .vxe-tools--operate {
  margin-top: -23px;
}

  .hxlh-table .vxe-toolbar {
    min-height: 52px;
    height: auto;
  }
.hxlh-table .vxe-toolbar {
  min-height: 52px;
  height: auto;
}

  .vxe-table .vxe-footer--column.col-red {
    color: red;
  }

</style>
.vxe-table .vxe-footer--column.col-red {
  color: red;
}
</style>