csi-financial-front/src/components/Upload/UploadDialog.vue

<template>
	<div class="dialogZ">
		<el-dialog v-model="dialogVisible" v-loading="loading" width="500" :before-close="handleClose" modal-class="modal_class">
			<template #header>
				<text class="dialog_title">财报信息填写</text>
			</template>

			<div class="container">
				<el-form label-position="top" class="formthis" ref="formRef" :model="queryFrom" :rules="rules">
					<el-form-item label="文件年份" style="width: 100%" prop="year">
						<el-select v-model="queryFrom.year" placeholder="请选择年份" style="width: 100%">
							<el-option :label="item.label" :value="item.value" v-for="(item, index) in YEAR" :key="index"></el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="文件类型" style="width: 100%" prop="reportType">
						<el-select v-model="queryFrom.reportType" placeholder="请选择类型" style="width: 100%">
							<el-option label="一季报" value="2"></el-option>
							<el-option label="半年报" value="1"></el-option>
							<el-option label="三季报" value="3"></el-option>
							<el-option v-if="queryFrom.year != '2026'" label="年报" value="0"></el-option>
							<el-option label="日常公告" value="5"></el-option>
						</el-select>
					</el-form-item>

					<!-- <el-form-item label="文件类型" style="width: 100%" prop="reportType">
						<el-select v-model="queryFrom.reportType" placeholder="请选择类型" style="width: 100%">
							<el-option label="一季报" value="2"
								v-if="(accountType == 1 && queryFrom.year <= 2025) || accountType == 0"></el-option>
							<el-option label="半年报" value="1"
								v-if="(accountType == 1 && queryFrom.year <= 2025) || (accountType == 0 && queryFrom.year <= 2025)"></el-option>
							<el-option label="三季报" value="3"
								v-if="(accountType == 1 && queryFrom.year < 2025) || (accountType == 0 && queryFrom.year < 2026)"></el-option>
							<el-option label="年报" value="0" v-if="
								(accountType == 1 && queryFrom.year != 2025 && queryFrom.year != 2024 && queryFrom.year < 2025) ||
								(accountType == 0 && queryFrom.year < 2025)
							"></el-option>
							<el-option label="日常公告" value="5"
								v-if="(textCheckSwitch == 1 && accountType == 1 && queryFrom.year <= 2025) || accountType == 0"></el-option>
						</el-select>
					</el-form-item> -->
					<!-- 
					<el-form-item label="算法类型" style="width: 100%" prop="sdfx"
						v-if="Session.get('userData').sdfxFlag == 1 && queryFrom.reportType == 0">
						<el-select v-model="queryFrom.sdfx" placeholder="请选择类型" style="width: 100%"
							@change="errorChange">
							<el-option label="准确性优先" value="0"></el-option>
							<el-option label="全面性优先" value="1"></el-option>
						</el-select>
					</el-form-item>
					<text :style="{ marginTop: hasError ? '0px' : '-15px', fontSize: '12px', color: 'red' }"
						v-if="queryFrom.sdfx == 0">*算法尽可能保证识别的准确性，以表格中的数据识别为主</text>

					<text :style="{ marginTop: hasError ? '0px' : '-15px', fontSize: '12px', color: 'red' }"
						v-if="queryFrom.sdfx == 1">*全文检查，尽可能发现潜在问题，存在一定误识别率</text> -->

					<el-form-item label="" prop="fileName">
						<Upload
							ref="uploadRef"
							:style="{
								transform: !uploadPercent ? 'scaleY(1)' : 'scaleY(0)',
								opacity: !uploadPercent ? '1' : '0',
								height: !uploadPercent ? '200px' : '0',
							}"
							class="upload"
							@handleAvatarSuccess="handleAvatarSuccess"
							@onProgress="onUploadProgress"
							@onChange="onUploadChange"
						/>
					</el-form-item>
					<el-popover :visible="isPdfTips" placement="top" :width="400">
						<div style="display: flex; align-items: center">
							<el-icon color="#FFB100">
								<WarningFilled />
							</el-icon>
							<p style="font-weight: bold; marin-gleft: 5px">确认使用PDF格式?</p>
						</div>
						<p style="margin-top: 10px">您选择的文件中包含pdf文件，推荐使用word文件进行检校，可获得更好检校结果。是否继续使用pdf文件做检校？</p>
						<div style="text-align: right; margin: 0">
							<el-button size="small" @click="delFile">取消</el-button>
							<el-button size="small" type="primary" @click="isPdfTips = false"> 确认 </el-button>
						</div>
						<template #reference>
							<div
								class="file_name"
								:style="{
									transform: !uploadPercent ? 'scaleY(0)' : 'scaleY(1)',
									opacity: !uploadPercent ? '0' : '1',
								}"
							>
								<img :src="iconFile" />
								<div style="flex: 1">
									{{ fileName }}
									<el-progress :percentage="uploadPercent" />
								</div>

								<img :src="iconClose" @click="delFile" style="width: 16px; height: 16px; margin-top: 15px; margin-left: 10px; cursor: pointer" />
							</div>
						</template>
						<template slot="content">
							<div>
								<p>这是自定义的确认内容</p>
								<p>可以包含更多的HTML和样式</p>
							</div>
						</template>
					</el-popover>
				</el-form>
			</div>
			<template #footer>
				<div class="dialog-footer">
					<ZButton btnType="cancel" btnWidth="56px" btnHeight="32px" @btnClick="handleClose"> 取消 </ZButton>
					<ZButton
						v-loading="loading"
						btnType="submit"
						btnWidth="56px"
						btnHeight="32px"
						@btnClick="submit"
						:btnDisabled="!canSubmit"
						style="margin-left: 10px"
					>
						确认
					</ZButton>
				</div>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="loginIndex">
import { ref, reactive, nextTick } from 'vue';
import { ElMessage } from 'element-plus';
import Upload from '/@/components/Upload/index.vue';
import ZButton from '/@/components/ZButton/index.vue';
import { getReportAdd } from '/@/api/dashboard/index';
import iconFile from '/@/assets/images/icon_file_big.png';
import iconClose from '/@/assets/images/icon_close.png';
import { YEAR } from '/@/utils/constants';
import { useUserInfo } from '/@/stores/userInfo';
import { addBatch, getTextCheckSwitch } from '/@/api/api';
import { WarningFilled } from '@element-plus/icons-vue';
import { Session } from '/@/utils/storage';

const hasError = ref(false);
function errorChange(val) {
	// el-form-item__error
	const myElement = document.querySelector('.el-form-item__error');
	hasError.value = myElement ? true : false;
}
const show = ref(true);
const stroes = useUserInfo();
const emit = defineEmits(['handleClose']);
const queryFrom = ref({});
const loading = ref(false);
const uploadPercent = ref(null);
const fileName = ref('');
const canSubmit = ref(true);

const textCheckSwitch = ref(0);
async function getTextCheckSwitchFn() {
	let { code, data } = await getTextCheckSwitch({});
	if (code == 200) {
		textCheckSwitch.value = data;
	}
}

const rules = reactive({
	year: [{ required: true, message: '请选择年份', trigger: 'blur' }],
	fileName: [{ required: true, message: '请选择文件', trigger: 'blur' }],
	reportType: [{ required: true, message: '请选择类型', trigger: 'blur' }],
	sdfx: [{ required: true, message: '请选择算法类型', trigger: 'blur' }],
});

function delFile() {
	uploadPercent.value = null;
	queryFrom.value.filePath = null;
	queryFrom.value.fileName = null;
	queryFrom.value.title = null;
	uploadRef.value.clearFile();
	isPdfTips.value = false;
}

function onUploadChange(name: string) {
	fileName.value = name;
}

function onUploadProgress(percent: number) {
	canSubmit.value = false;
	uploadPercent.value = Number(percent).toFixed(2);
}

const isPdfTips = ref(false);
// 文件上传完成之后
function handleAvatarSuccess(item) {
	console.log('🚀 ~ handleAvatarSuccess ~ item:', item);
	canSubmit.value = true;
	queryFrom.value.filePath = item.filePath;
	queryFrom.value.fileName = item.fileName;
	queryFrom.value.title = item.title;
	queryFrom.value.fileMd5 = item.fileMd5;

	let extension = item.fileName.split('.').pop();
	console.log('🚀 ~ handleAvatarSuccess ~ extension:', extension);
	// nextTick(() => {
	// 	setTimeout(() => {
	// 		if (extension == 'pdf' || extension == 'PDF') {
	// 			isPdfTips.value = true;
	// 		} else {
	// 			isPdfTips.value = false;
	// 		}
	// 	}, 200);
	// });
}

const formRef = ref(null);

async function submit() {
	if (loading.value) {
		return;
	}

	if (!fileName.value) {
		ElMessage.error('请先上传文件');
		return;
	}

	await formRef.value.validate();
	loading.value = true;
	let { code } = await getReportAdd({
		...queryFrom.value,
	});
	loading.value = false;

	if (code == 200) {
		ElMessage.success('系统分析中，耗时约5分钟');
		hideModal();
	}
}

const years = ref([]);

// 0：正式 1：试用
const accountType = ref();
const dialogVisible = ref(false);
function showModal() {
	dialogVisible.value = true;
	getTextCheckSwitchFn();

	accountType.value = Session.get('userData').accountType;
	console.log('🚀 ~ showModal ~ accountType.value:', accountType.value);

	// if (Session.get('userData').accountType == 1) {
	// 	// 0：正式 1：试用
	// }
}

function handleClose() {
	hideModal();
	isPdfTips.value = false;
}
const uploadRef = ref();
async function hideModal() {
	uploadRef.value.clearFile();

	queryFrom.value.filePath = null;
	queryFrom.value.fileName = null;
	queryFrom.value.title = null;
	queryFrom.value.year = null;
	queryFrom.value.reportType = null;

	uploadPercent.value = null;
	dialogVisible.value = false;

	emit('handleClose');
}

defineExpose({
	hideModal,
	showModal,
});
</script>

<style scoped lang="scss">
.dialogZ {
	:deep(.el-overlay) {
		background-color: var(--mainColor);
		backdrop-filter: var(--backFilter);
	}
}

.container {
	font-family: PingFang SC;
	width: 100%;
	border-top: 1px solid #f6f6f6;
	margin-top: -10px;
}

.formthis {
	width: 100%;
	display: flex;
	flex-direction: column;
	text-align: left;
	width: 100%;
	gap: 20px;
	margin-top: 10px;
}

.el-select {
	:deep(.el-input__wrapper) {
		border: 1px solid #f0f2f5;
		box-shadow: 0 0 0 0 !important;
	}
}

.dialog-footer {
	display: flex;
	float: right;
	padding-bottom: 30px;
	margin-top: 80px;
}

.modal_class {
	background-color: red;
}

:deep(.el-form-item) {
	margin-bottom: 0;
}

.dialog_title {
	color: #19213d;
	text-align: center;
	font-size: 18px;
	font-style: normal;
	font-weight: 500;
	line-height: 23.4px;
}

.file_name {
	border: 1px solid #f6f6f6;
	border-radius: 10px;
	padding: 16px;
	display: flex;
	transition: all 0.2s ease-in-out;
	transform-origin: top;
	align-items: center;

	img {
		width: 32px;
		height: 32px;
	}
}

:deep(.el-select__wrapper) {
	border: 1px solid #f0f2f5;
	box-shadow: 0 0 0 rgba($color: #000000, $alpha: 0);
}

.upload {
	transition: all 0.2s ease-in-out;
	transform-origin: top;
}
</style>