充值导入选择充值类型

src/views/wallet/wallet-recharge-apply/index.vue

@@ -210,6 +210,7 @@ const { push } = useRouter()
 
 // 引入组件
 const FormDialog = defineAsyncComponent(() => import("./form.vue"))
+const UploadExcel = defineAsyncComponent(() => import("./upload-excel.vue"))
 // 定义查询字典
 const { wallet_biz_recharge, wallet_type, check_status } = useDict("wallet_biz_recharge", "wallet_type", "check_status")
 // store

src/views/wallet/wallet-recharge-apply/upload-excel.vue

@@ -0,0 +1,215 @@
+<!-- excel 导入组件 -->
+<template>
+	<el-dialog :title="prop.title" v-model="state.upload.open" :close-on-click-modal="false" draggable>
+		<el-form ref="dataFormRef" :model="form" :rules="dataRules" label-width="90px">
+			<el-form-item label="充值类型" prop="bizType" class="mb20">
+				<dict-select
+					v-model="form.bizType"
+					dict-code="wallet_biz_recharge"
+					:hide-ids="[
+						roleCodes.includes('RETURN_CANTEEN') || auths(['wallet_walletRechargeApply_refund']) ? '' : '3',
+						auths(['wallet_walletRechargeApply_select_jz']) ? '' : '2',
+					]"
+					placeholder="请选择充值类型"
+				/>
+			</el-form-item>
+
+			<el-form-item v-if="form.bizType == '1'" label="发票" prop="invoiceId" class="mb20">
+				<select-wallet-invoice v-model="form.invoiceId" />
+			</el-form-item>
+			<el-upload
+				v-else
+				v-loading="state.upload.isUploading"
+				ref="uploadRef"
+				:limit="1"
+				accept=".xlsx, .xls"
+				:headers="headers"
+				:action="baseURL + other.adaptationUrl(url)"
+				:disabled="state.upload.isUploading"
+				:on-progress="handleFileUploadProgress"
+				:on-success="handleFileSuccess"
+				:on-error="handleFileError"
+				:auto-upload="false"
+				drag
+			>
+				<i class="el-icon-upload"></i>
+				<div class="el-upload__text">
+					{{ $t("excel.operationNotice") }}
+					<em>{{ $t("excel.clickUpload") }}</em>
+				</div>
+				<template #tip>
+					<div class="el-upload__tip text-center">
+						<span>{{ $t("excel.fileFormat") }}</span>
+						<el-link
+							type="primary"
+							:underline="false"
+							style="font-size: 12px; vertical-align: baseline"
+							@click="downExcelTemp"
+							v-if="tempUrl"
+							>{{ $t("excel.downloadTemplate") }}
+						</el-link>
+					</div>
+				</template>
+			</el-upload>
+		</el-form>
+
+		<template #footer>
+			<el-button type="primary" @click="submitFileForm" :disabled="state.upload.isUploading">
+				{{ $t("common.confirmButtonText") }}
+			</el-button>
+			<el-button @click="state.upload.open = false">{{ $t("common.cancelButtonText") }}</el-button>
+		</template>
+	</el-dialog>
+
+	<!--校验失败错误数据-->
+	<el-dialog :title="$t('excel.validationFailureData')" v-model="state.errorVisible" :close-on-click-modal="false" draggable>
+		<el-table :data="state.errorData">
+			<el-table-column property="lineNum" align="center" :label="$t('excel.lineNumbers')" width="100" />
+			<el-table-column property="errors" align="center" :label="$t('excel.misDescription')" show-overflow-tooltip>
+				<template v-slot="scope">
+					<el-tag type="danger" v-for="error in scope.row.errors" :key="error">{{ error }}</el-tag>
+				</template>
+			</el-table-column>
+		</el-table>
+	</el-dialog>
+</template>
+
+<script setup lang="ts" name="upload-excel">
+import { useMessage } from "/@/hooks/message"
+import { useUserInfo } from "/@/stores/userInfo"
+import other from "/@/utils/other"
+import { Session } from "/@/utils/storage"
+import { auths } from "/@/utils/authFunction"
+
+const {
+	userInfos: { roleCodes },
+} = useUserInfo()
+
+const emit = defineEmits(["sizeChange", "refreshDataList"])
+const prop = defineProps({
+	url: {
+		type: String,
+	},
+	title: {
+		type: String,
+	},
+	tempUrl: {
+		type: String,
+	},
+})
+
+const uploadRef = ref()
+const dataFormRef = ref()
+const form = reactive({
+	bizType: "1",
+	invoiceId: "",
+})
+const dataRules = ref({
+	bizType: [{ required: true, message: "请选择充值类型", trigger: "change" }],
+	invoiceId: [{ required: true, message: "请选择发票", trigger: "change" }],
+})
+
+const state = reactive({
+	errorVisible: false,
+	errorData: [],
+	dialog: {
+		title: "",
+		isShowDialog: false,
+	},
+	upload: {
+		open: false,
+		isUploading: false,
+	},
+})
+
+/**
+ * 下载模板文件
+ */
+const downExcelTemp = async () => {
+	try {
+		await other.downBlobFile(other.adaptationUrl(prop.tempUrl), {}, "temp.xlsx")
+	} catch (error) {
+		useMessage().error("模板下载失败，请先维护模板文件")
+	}
+}
+
+/**
+ * 上传进度条变化事件
+ */
+const handleFileUploadProgress = () => {
+	state.upload.isUploading = true
+}
+
+/**
+ * 上传失败事件处理
+ */
+const handleFileError = () => {
+	useMessage().error("上传失败,数据格式不合法!")
+	state.upload.open = false
+}
+
+/**
+ * 上传成功事件处理
+ * @param {any} response - 上传成功的响应结果
+ */
+const handleFileSuccess = (response: any) => {
+	state.upload.isUploading = false
+	state.upload.open = false
+	uploadRef.value.clearFiles()
+
+	// 校验失败
+	if (response.code === 1) {
+		useMessage().error(response.msg ? response.msg : "导入失败，以下数据不合法")
+		state.errorVisible = true
+		state.errorData = response.data?.errors
+		if (!state.errorData && response.data) {
+			state.errorData = response.data
+		}
+		uploadRef.value.clearFiles()
+		// 刷新表格
+		emit?.("refreshDataList")
+	} else {
+		useMessage().success(response.msg ? response.msg : "导入成功")
+		// 刷新表格
+		emit?.("refreshDataList")
+	}
+}
+
+/**
+ * 提交表单，触发上传
+ */
+const submitFileForm = async () => {
+	if (form.bizType != "1") {
+		uploadRef.value.submit()
+		return
+	}
+
+	const valid = await dataFormRef.value.validate().catch(() => {})
+	if (!valid) return
+}
+
+/**
+ * 显示上传文件对话框，并清除上传信息
+ */
+const show = () => {
+	form.bizType = "1"
+	form.invoiceId = ""
+	state.upload.isUploading = false
+	state.upload.open = true
+}
+
+/**
+ * 计算请求头部信息
+ */
+const headers = computed(() => {
+	return {
+		Authorization: "Bearer " + Session.getToken(),
+		"TENANT-ID": Session.getTenant(),
+	}
+})
+
+// 暴露变量
+defineExpose({
+	show,
+})
+</script>