project-manager/h5/src/views/payrollModule/export.vue

<template>
	<div class="system-edit-user-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" width="400px" draggable
			:close-on-click-modal="false">
			<div>确定要导出物品记录表吗？</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel">取 消</el-button>
					<el-button type="primary" @click="onSubmit()">
						{{ state.dialog.submitTxt }}
					</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts" setup name="payrollModuleAttendanceImport">
import { reactive, ref, nextTick } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { ElForm, UploadInstance, UploadProps, UploadRawFile } from 'element-plus';
import { UploadFilled } from '@element-plus/icons-vue';
import noPacking from '/@/api/noPacking/noPacking';
import Good from '/@/api/model/Good'; //gzs:引入模型
import config from '/@/config';
import { ElLoading } from "element-plus";
type FormInstance = InstanceType<typeof ElForm>;
// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
const deptDialogFormRef = ref();

const upload = ref<UploadInstance>();
const refForm = ref<FormInstance>();
const uploadEle = ref<any>(null);
const state = reactive<any>({
	productOptions: [],
	ruleForm: {
		path: '',
	},
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	isTips: false,
	fileUrl: '',
	uploadUrl: config.host + '/admin/upload/file',
	download_file_url: config.file + '/static/salaryRateItem.xlsx',
	param: {},
});

// 打开弹窗
const openDialog = (param: any) => {
	//param 导出参数
	state.param = param;
	state.dialog.isShowDialog = true;
	state.dialog.title = '导出物品记录表';
	state.dialog.submitTxt = '导 出';
	console.log("param", param);
};
// 关闭弹窗
const closeDialog = () => {
	state.dialog.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};

// 清除文件缓存
const ClearFiles = () => {
	console.log('uploadEle.value=>', uploadEle.value);
	if (uploadEle.value != null) {
		state.isTips = false;
		state.ruleForm.path = '';
		uploadEle.value.clearFiles();
	}
};

// 导出
const onSubmit = async () => {
	const loadingInstance = ElLoading.service({ fullscreen: true, text: "正在导出，请耐心等待" });
	let res = await Good.export(state.param);
	if (res.code != 0) {
		nextTick(() => {
			loadingInstance.close();
		});
		return ElMessage.error(res.msg);
	}
	state.download_file_url = res.data.url;
	console.log('state.download_file_url', state.download_file_url);
	window.open(state.download_file_url);
	nextTick(() => {
		loadingInstance.close();
	});
	setTimeout(() => {
		ElMessage.success('导出成功，请留意浏览器下载列表');
		console.log('submit succ!');
	}, 500)
	closeDialog();
	emit('refresh');
};

// 上传文件成功的事件
const handleAvatarSuccess = (res: any, file: any) => {
	console.log('res=>', res);
	console.log('file=>', file);
	state.ruleForm.path = res.data.file;
	state.fileUrl = res.data.url;
	state.isTips = true;
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style lang="scss" scoped>
.down-a {
	text-decoration: none;
	color: #FFFFFF;
}

.tips {
	font-size: 12px;
	line-height: 1.2;
	color: #666;
}

.two {
	margin: 8px 0px;
}

.download-file {
	margin-top: 10px;

	a {
		text-decoration: none;
		color: #409eff;
	}
}

.avatar-uploader .avatar {
	width: 178px;
	height: 178px;
	display: block;
}

.avatar-uploader .el-upload {
	border: 1px dashed var(--el-border-color);
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
	transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
	border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	text-align: center;
}
</style>