|
@@ -130,15 +130,15 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="tsx" name="ProTable">
|
|
|
-import { ref, provide, onMounted, unref, computed, reactive, PropType, watch,h } from 'vue';
|
|
|
+import { ref, provide, onMounted, unref, computed, reactive, PropType, watch, h, nextTick } from 'vue';
|
|
|
import { ElMessage, ElMessageBox, ElTable } from 'element-plus';
|
|
|
-import {Loading} from "@element-plus/icons-vue"
|
|
|
+import { Loading } from '@element-plus/icons-vue';
|
|
|
import { useSelection } from '@/hooks/useSelection';
|
|
|
import { ColumnProps, TypeProps } from '@/components/ProTable/interface';
|
|
|
import ColSettingCom from './components/ColSetting.vue';
|
|
|
import TableColumn from './components/TableColumn.vue';
|
|
|
import { downloadFileByStream } from '@/utils/tools';
|
|
|
-import { useResizeObserver,useWindowSize } from '@vueuse/core';
|
|
|
+import { useResizeObserver, useWindowSize } from '@vueuse/core';
|
|
|
|
|
|
// 接受父组件参数,配置默认值
|
|
|
const props = defineProps({
|
|
@@ -230,6 +230,16 @@ const props = defineProps({
|
|
|
type: Boolean,
|
|
|
default: false,
|
|
|
},
|
|
|
+ isRefreshClearSelection: {
|
|
|
+ // 是否刷新清空选中项
|
|
|
+ type: Boolean,
|
|
|
+ default: true,
|
|
|
+ },
|
|
|
+ selectIds: {
|
|
|
+ // 默认选中的id
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
});
|
|
|
const emit = defineEmits([
|
|
|
'dargSort',
|
|
@@ -383,7 +393,7 @@ const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) =>
|
|
|
|
|
|
// 过滤需要搜索的配置项 && 排序
|
|
|
const searchColumns = computed(() => {
|
|
|
- return flatColumns.value?.filter((item:any) => item.search?.el || item.search?.render).sort((a, b) => a.search!.order! - b.search!.order!);
|
|
|
+ return flatColumns.value?.filter((item: any) => item.search?.el || item.search?.render).sort((a, b) => a.search!.order! - b.search!.order!);
|
|
|
});
|
|
|
|
|
|
// 设置 搜索表单默认排序 && 搜索表单项的默认值
|
|
@@ -400,7 +410,7 @@ const openColSetting = () => colRef.value.openColSetting();
|
|
|
|
|
|
// 刷新事件
|
|
|
const onRefresh = () => {
|
|
|
- clearSelection();
|
|
|
+ if (props.isRefreshClearSelection) clearSelection();
|
|
|
emit('updateTable');
|
|
|
};
|
|
|
// 更新列设置
|
|
@@ -414,7 +424,7 @@ const updateColSetting = (test: ColumnProps[]) => {
|
|
|
};
|
|
|
// 递归获取isShow的列保持子父级关系
|
|
|
const findItems = (tree: any, conditionFn: (item: any) => boolean) => {
|
|
|
- let results:EmptyArrayType = [];
|
|
|
+ let results: EmptyArrayType = [];
|
|
|
for (let node of tree) {
|
|
|
// 如果当前节点满足条件,则将其添加到结果中,并保留父级关系
|
|
|
if (conditionFn(node)) {
|
|
@@ -462,7 +472,7 @@ const exportCurrent = () => {
|
|
|
emit('exportCurrent', exportNewColumns);
|
|
|
exportLoading.value = false;
|
|
|
})
|
|
|
- .catch((e:any) => {
|
|
|
+ .catch((e: any) => {
|
|
|
console.log(`导出失败:${e}`);
|
|
|
exportLoading.value = false;
|
|
|
});
|
|
@@ -495,17 +505,17 @@ const exportAll = () => {
|
|
|
columnInfos: exportNewColumns,
|
|
|
isExportAll: true,
|
|
|
};
|
|
|
- const message = ElMessage({
|
|
|
+ const message = ElMessage({
|
|
|
message: (
|
|
|
<div class="flex-center-center">
|
|
|
正在导出中,请稍后
|
|
|
- <Loading class="el-icon is-loading ml5"/>
|
|
|
+ <Loading class="el-icon is-loading ml5" />
|
|
|
</div>
|
|
|
),
|
|
|
type: 'info',
|
|
|
- duration:0,
|
|
|
- plain:true,
|
|
|
- })
|
|
|
+ duration: 0,
|
|
|
+ plain: true,
|
|
|
+ });
|
|
|
if (props.isSpecialExport) {
|
|
|
const specialRequest = {
|
|
|
...props.exportParams,
|
|
@@ -520,7 +530,7 @@ const exportAll = () => {
|
|
|
exportLoading.value = false;
|
|
|
message.close();
|
|
|
})
|
|
|
- .catch((e:any) => {
|
|
|
+ .catch((e: any) => {
|
|
|
console.log(`导出失败:${e}`);
|
|
|
exportLoading.value = false;
|
|
|
message.close();
|
|
@@ -535,7 +545,7 @@ const exportAll = () => {
|
|
|
exportLoading.value = false;
|
|
|
message.close();
|
|
|
})
|
|
|
- .catch((e:any) => {
|
|
|
+ .catch((e: any) => {
|
|
|
console.log(`导出失败:${e}`);
|
|
|
exportLoading.value = false;
|
|
|
message.close();
|
|
@@ -554,10 +564,24 @@ watch(
|
|
|
// 监听table数据改变后重置选择
|
|
|
() => props.data,
|
|
|
() => {
|
|
|
- clearSelection();
|
|
|
+ if (props.isRefreshClearSelection) clearSelection();
|
|
|
+ if (props.selectIds && props.selectIds.length > 0) {
|
|
|
+ // 监听已经选择的数组ID
|
|
|
+ nextTick(() => {
|
|
|
+ tableRef.value!.clearSelection();
|
|
|
+ for (let i of props.selectIds) {
|
|
|
+ for (let j of props.data) {
|
|
|
+ if (i === j.id) {
|
|
|
+ setTimeout(() => {
|
|
|
+ tableRef.value!.toggleRowSelection(j, true);
|
|
|
+ }, 0);
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
}
|
|
|
);
|
|
|
-
|
|
|
//下载逻辑
|
|
|
const downloadObj = reactive<any>({
|
|
|
fileName: '',
|
|
@@ -584,7 +608,7 @@ const download = async () => {
|
|
|
},
|
|
|
};
|
|
|
|
|
|
- const data:any = await props.exportMethod(params, config);
|
|
|
+ const data: any = await props.exportMethod(params, config);
|
|
|
|
|
|
//获取文件总大小
|
|
|
const arr = data.headers['content-range'].split('/');
|
|
@@ -603,7 +627,7 @@ const download = async () => {
|
|
|
};
|
|
|
|
|
|
//拿到文件总大小downloadObj.range,计算分为多少都段下载
|
|
|
-const chunkUpload = async (params:any, fileName:string, chunkSize:number) => {
|
|
|
+const chunkUpload = async (params: any, fileName: string, chunkSize: number) => {
|
|
|
//获取分段下载的数组
|
|
|
let chunkList = [];
|
|
|
function chunkPush(page = 1) {
|
|
@@ -618,7 +642,7 @@ const chunkUpload = async (params:any, fileName:string, chunkSize:number) => {
|
|
|
chunkList.push(downloadObj.range);
|
|
|
console.log(chunkList, 'chunkList');
|
|
|
//分段组合传参格式处理 0-1024 1024-2048
|
|
|
- let uploadRange:EmptyArrayType = [];
|
|
|
+ let uploadRange: EmptyArrayType = [];
|
|
|
chunkList.forEach((item, i) => {
|
|
|
if (i == chunkList.length - 1) return;
|
|
|
|