opt_web/src/views/price-approval/direct-sales/component/DataTable.vue

<script lang="ts" setup>
/**
 * @Name: DataTable.vue
 * @Description:
 * @Author: xinyan
 */

import { Download, Plus, Refresh, Upload } from '@element-plus/icons-vue';
import { ElMessage } from 'element-plus';
import { usePagination } from '/@/utils/usePagination';
import { useTableData } from '/@/utils/useTableData';
import DataTableSlot from './DataTableSlot.vue';
import { downloadFile } from '/@/utils/service';
import PermissionButton from '/src/components/PermissionButton/index.vue';
import ImportButton from '/src/components/ImportButton/index.vue';
import VerticalDivider from '/src/components/VerticalDivider/index.vue';
import EditDrawer from '/src/views/product-manage/product-list/component/EditDrawer.vue';
import NoticeDialog from '/src/views/product-manage/product-list/component/NoticeDialog.vue';
import * as api from '../api';
import { useResponse } from '/@/utils/useResponse';
import {
	CostDetailColumns,
	DirectSalesCheckColumns_Regular,
	SupplyCheckColumns,
	SupplyCheckColumns_Regular,
} from '/@/views/price-approval/Columns';
import router from '/@/router';


interface Parameter {
	description: string;
	platform: string;
	station: string;
}

const queryParameter: Parameter | undefined = inject('query-parameter');
const { tableOptions, handlePageChange } = usePagination(fetchList);

const gridRef = ref();
const gridOptions: any = reactive({
	size: 'mini',
	border: false,
	round: true,
	stripe: true,
	currentRowHighLight: true,
	height: '100%',
	toolbarConfig: {
		size: 'large',
		slots: {
			buttons: 'toolbar_buttons',
			tools: 'toolbar_tools',
		},
	},
	rowConfig: {
		isHover: true,
	},
	columnConfig: {
		resizable: true,
	},
	pagerConfig: {
		total: tableOptions.value.total,
		page: tableOptions.value.page,
		limit: tableOptions.value.limit,
	},
	loading: false,
	loadingConfig: {
		icon: 'vxe-icon-indicator roll',
		text: '正在拼命加载中...',
	},
	columns: '',
	data: '',
});

const checkedList = ref<Set<number>>(new Set());
const btnLoading = ref(false);

const editOpen = ref(false);
const rowData = ref({});

const dialogVisible = ref(false);

const templateType = ref('cost');

onBeforeMount(() => {
	gridOptions.pagerConfig.limit = 10;
});

onMounted(() => {
	fetchList();
});

async function fetchList(isQuery = false) {
	if (isQuery) {
		gridOptions.pagerConfig.page = 1;
	}

	gridOptions.data = [];
	gridOptions.columns = [];

	const query = {
		description: queryParameter?.description,
		platform: queryParameter?.platform,
		station: queryParameter?.station,
	};

	await useTableData(api.getTableData, query, gridOptions);
	await gridRef.value.loadColumn(DirectSalesCheckColumns_Regular);
	gridOptions.showHeader = Boolean(gridOptions.data?.length);
}

function handleRefresh() {
	fetchList();
}

async function handleDownload() {
	gridOptions.loading = true;
	try {
		const query = {
			description: queryParameter?.description,
			platform: queryParameter?.platform,
			station: queryParameter?.station,
		};
		const response = await api.exportData(query);
		const url = window.URL.createObjectURL(new Blob([response.data]));
		const link = document.createElement('a');
		link.href = url;
		link.setAttribute('download', '商品列表数据.xlsx');
		document.body.appendChild(link);
		link.click();
		ElMessage.success('数据导出成功！');
	} catch (error) {
		ElMessage.error('数据导出失败，请重试！');
		console.error(error);
	} finally {
		gridOptions.loading = false; // 结束加载状态
	}
}

function selectChangeEvent({ checked, row }: any) {
	if (checked) {
		checkedList.value.add(row.id); // 获取单个数据
	} else {
		checkedList.value.delete(row.id);
	}
}

function selectAllChangeEvent({ checked }: any) {
	const $grid = gridRef.value;
	if ($grid) {
		const records = $grid.getData(); // 获取所有数据
		if (checked) {
			records.forEach((item: any) => {
				checkedList.value.add(item.id);
			});
		} else {
			checkedList.value.clear();
		}
	}
}

function handleCreate() {
  router.push({ name: 'AddPage', query: { type: 'direct' } });
}

function handleEdit(row: any) {
	editOpen.value = true;
	rowData.value = row;
}

async function singleDelete(row: any) {
	const res = await useResponse(api.deleteRow, row);
	if (res.code === 2000) {
		ElMessage.error({ message: '已删除!', plain: true, icon: 'Delete' });
		handleRefresh();
	}
}


function downloadTemplate() {
	const url = '/api/choice/reviews_monitor/import_data/';
	const fileName = '商品监控模板.xlsx';

	if (url) {
		downloadFile({
			url,
			method: 'GET',
			filename: fileName,
		});
	} else {
		console.error('未知的模板类型:', templateType.value);
	}
}

const gridEvents = {
	custom({ type }: any) {
		if (type == 'confirm') {
			fetchList();
		}
	},
};

function cellStyle(){
	return{
		fontWeight:500,
	}
}

defineExpose({ fetchList });
</script>

<template>
	<vxe-grid ref="gridRef" v-bind="gridOptions" v-on="gridEvents" @checkbox-change="selectChangeEvent" @checkbox-all="selectAllChangeEvent" :cell-style="cellStyle">
		<!-- 工具栏左侧 -->
		<template #toolbar_buttons>
			<div class="flex gap-2">
				<!--<div>-->
				<!--	<el-popconfirm :icon="InfoFilled" icon-color="#626AEF" title="你确定要删除此项吗?" width="220" @confirm="batchDelete">-->
				<!--		<template #reference>-->
				<!--			<PermissionButton :disabled="!checkedList.size" :icon="Delete" plain round type="danger"> 批量删除 </PermissionButton>-->
				<!--		</template>-->
				<!--		<template #actions="{ confirm, cancel }">-->
				<!--			<el-button size="small" @click="cancel">No!</el-button>-->
				<!--			<el-button size="small" type="danger" @click="confirm">Yes?</el-button>-->
				<!--		</template>-->
				<!--	</el-popconfirm>-->
				<!--</div>-->
				<div>
					<PermissionButton :icon="Plus" plain round type="primary" @click="handleCreate">新 增</PermissionButton>
				</div>
				<div class="custom-el-input">
					<el-select v-model="templateType" style="width: 190px">
						<template #prefix>
							<div class="flex items-center">
								<el-button
									size="small"
									style="margin-left: -7px; font-size: 14px; border-radius: 29px"
									text
									type="success"
									@click.stop="downloadTemplate"
								>
									下载
								</el-button>
								<VerticalDivider style="margin-left: 7px" />
							</div>
						</template>
						<el-option label="成本查看模板" value="cost" />
					</el-select>
				</div>
				<VerticalDivider class="px-1" style="margin-left: 7px" />
				<ImportButton :icon="Upload" :uploadFunction="api.upload" bg text>导 入</ImportButton>
			</div>
		</template>
		<!-- 工具栏右侧 -->
		<template #toolbar_tools>
			<el-button circle class="toolbar-btn" @click="handleRefresh">
				<el-icon>
					<Refresh />
				</el-icon>
			</el-button>
			<el-button circle class="toolbar-btn" @click="handleDownload">
				<el-icon>
					<Download />
				</el-icon>
			</el-button>
		</template>
		<template #top>
			<div class="mb-2"></div>
		</template>
		<!-- 分页 -->
		<template #pager>
			<vxe-pager
				v-model:currentPage="gridOptions.pagerConfig.page"
				v-model:pageSize="gridOptions.pagerConfig.limit"
				:total="gridOptions.pagerConfig.total"
				class="mt-1.5"
				@page-change="handlePageChange"
			/>
		</template>
		<template #empty>
			<el-empty description="暂无数据" />
		</template>
		<!-- 自定义列插槽 -->
		<template v-for="col in DirectSalesCheckColumns_Regular" #[`${col.field}`]="{ row }">
			<DataTableSlot :field="col.field" :row="row" @edit-row="handleEdit" @handle-delete="singleDelete" />
		</template>
	</vxe-grid>
	<EditDrawer v-if="editOpen" v-model="editOpen" :row-data="rowData" @refresh="handleRefresh" />
	<NoticeDialog v-if="dialogVisible" v-model="dialogVisible" :row-data="rowData" />
</template>

<style scoped>
.toolbar-btn {
	width: 34px;
	height: 34px;
	font-size: 18px;
}

:deep(.custom-el-input .el-select__wrapper) {
	border-radius: 20px;
}
</style>