ngfrontend/src/views/finance/recharge-list.vue

<template>
	<div class="app-container" v-loading="listLoading">
		<el-table :data="list" border fit highlight-current-row>
			<el-table-column align="center" :label="$t('finance.createdTime')" prop="CREATED_AT" min-width="140px">
				<template slot-scope="{row}">
					<span>{{ row.CREATED_AT | parseTime('{y}-{m}-{d} {h}:{i}') }}</span>
				</template>
			</el-table-column>
			<el-table-column align="center" min-width="160px" :label="$t('finance.rechargeAmount')" prop="AMOUNT">
				<template slot-scope="{row}">
					{{ row.AMOUNT | toThousandFilter }}
				</template>
			</el-table-column>
			<el-table-column align="center" min-width="150px" :label="$t('finance.rechargeStatus')" prop="STATUS_NAME">
				<template slot-scope="{row}">
					<el-tag :type="row.AUDIT_STATUS | statusFilter">{{row.STATUS_NAME}}</el-tag>
				</template>
			</el-table-column>
			<el-table-column align="center" min-width="180px" :label="$t('finance.bankName')" prop="OPEN_BANK_NAME"></el-table-column>
			<el-table-column align="center" min-width="150px" :label="$t('finance.bankAccount')" prop="BANK_NO"></el-table-column>
			<el-table-column align="center" min-width="150px" :label="$t('finance.printVoucher')">
				<template slot-scope="{row}">
					<el-button type="primary" size="mini" v-if="row.AUDIT_STATUS === '0'" @click="handleUpload(row.ID)">{{ $t('finance.uploadVoucher') }}</el-button>
					<el-button type="success" size="mini" v-if="row.AUDIT_STATUS !== '0'" @click="handleView(row)">{{ $t('finance.viewVoucher') }}</el-button>
				</template>
			</el-table-column>
		</el-table>

		<div class="white-box-footer" style="margin-top: 10px;">
			<el-button size="small" type="primary" @click="dialog = true">{{ $t('finance.recharge') }}</el-button>
			<pagination v-show="total > 0" :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.pageSize" @pagination="getList" />
		</div>

		<el-dialog :title="$t('finance.recharge')" :visible.sync="dialog" :width="screenWidth" style="margin-top: -70px;">
			<el-form ref="form" :model="form" :rules="rules" :label-position="labelPosition" v-loading="loading" style="margin-top: -20px; margin-bottom: -30px;">
				<el-row :gutter="20">
					<el-col :xs="24" :sm="24" :lg="24">
						<el-form-item :label="$t('finance.rechargeAmount')" prop="applyAmount" required>
							<el-input-number v-model.number="form.applyAmount" :min="minAmount" :max="maxAmount" :step="10000" style="width: 100%" clearable></el-input-number>
						</el-form-item>
						<el-form-item :label="$t('finance.bankAccount')" prop="bankNo" required>
							<el-input v-model.trim="form.bankNo" type="text" clearable style="width: 100%"></el-input>
						</el-form-item>
						<el-form-item :label="$t('finance.bankName')" prop="openBank" required>
							<el-select v-model="form.openBank" clearable filterable style="width: 100%">
								<el-option v-for="(item,key) in bankList" :key="key" :label="item.BANK_NAME" :value="item.BANK_CODE"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item>
							<el-button type="warning" size="small" @click="onCancel">{{ $t('table.cancel') }}</el-button>
							<el-button type="primary" size="small" @click="onSubmit">{{ $t('table.confirm') }}</el-button>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-dialog>

		<el-dialog :title="$t('finance.viewVoucher')" :visible.sync="viewVoucher" :width="screenWidth" style="margin-top: -70px;">
			<div>
				<img :src="voucher" alt="" style="height: 100%; width: 100%;" />
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button size="small" type="primary" @click="uploadAgain(auditId)">{{ $t('finance.uploadVoucher') }}</el-button>
				<el-button size="small" type="normal"  @click="viewVoucher = false">{{ $t('common.close') }}</el-button>
			</div>
		</el-dialog>

		<el-dialog :title="$t('finance.uploadVoucher')" :visible.sync="uploadVoucher" :width="screenWidth" style="margin-top: -70px;">
			<el-upload
				class="avatar-uploader"
				:action="uploadUrl"
				:show-file-list="false"
				:headers="uploaderHeaders"
				:data="uploaderData"
				:on-success="handleSuccess"
				:before-upload="uploaderHandleBefore"
				:on-error="handleError">
				<img v-if="imageUrl" :src="imageUrl" class="avatar" alt="" />
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
			</el-upload>
		</el-dialog>
	</div>
</template>

<script>
import {fetchApplyRecharge,fetchBankList, fetchRechargeList} from '@/api/finance'
import {fetchToken} from "@/api/file"
import waves from '@/directive/waves'
import Pagination from '@/components/Pagination'
import tool from "@/utils/tool"
import {formatAmount, getScreenWidth} from "@/utils"
import {integer, range, required} from "@/utils/rules"
import LeoUploader from "@/components/Upload/Uploader"

export default {
	name: 'RechargeDetails',
	components: { Pagination,LeoUploader },
	directives: { waves },
	filters: {
		statusFilter(status) {
			const statusEnums = {
				'0': 'info',
				'1': 'primary',
				'2': 'success',
				'3': 'danger',
			}
			return statusEnums[status] || 'warning'
		},
	},
	data() {
		return {
			tool: tool,
			list: [],
			total: 0,
			listLoading: true,
			listQuery: {
				page: 1,
				pageSize: 5,
			},

			dialog: false,
			loading: false,
			form: {
				applyAmount: 0,
				bankNo: '',
				openBank: '',
				bankAddress: '',
			},
			minAmount: 1,
			maxAmount: 10000000000,
			rules: {
				applyAmount: [required, integer, range(this.minAmount, this.maxAmount)],
				bankNo: [required],
				openBank: [required],
			},
			bankList: [],

			screenWidth: getScreenWidth() > 600 ? '500px' : getScreenWidth() + 'px',
			labelPosition: getScreenWidth() > 600 ? 'right' : 'top',

			viewVoucher: false,
			voucher: '',
			auditId: null,

			voucherLoading: false,
			uploadVoucher: false,
			imageUrl: '',
			uploadUrl: '',
			uploaderData: {
				uploadToken: '',
			},
			uploaderHeaders: {
				'Device-Type': 'pc',
				'Suppress-Response-Code': '1',
				'Authorization': '',
			},
		}
	},
	created() {
		this.getList()
	},
	mounted() {
		this.fetchBankList()
	},
	methods: {
		getList() {
			this.listLoading = true
			fetchRechargeList(this.listQuery).then(response => {
				this.list = response.data.list
				this.total = response.data.totalCount

				setTimeout(() => {
					this.listLoading = false
				}, 0.5 * 1000)
			})
		},
		fetchBankList() {
			fetchBankList().then(response => {
				this.bankList = response.data.allOpenBank
			})
		},
		onSubmit() {
			this.$refs['form'].validate((valid) => {
				if (valid) {
					this.loading = true
					fetchApplyRecharge(this.form).then(response => {
						this.$message({
							message: response.data,
							type: 'success',
							duration: 1.5 * 1000
						})

						this.$refs['form'].resetFields()
						this.dialog = false
						this.loading = false

						this.getList()
					}).catch((err) => {
						this.$message({
							message: err,
							type: 'error',
							duration: 3 * 1000
						})

						this.loading = false
					})
				} else {
					return false;
				}
			});
		},
		onCancel() {
			this.dialog = false
			this.$refs['form'].resetFields()
		},
		handleView(row) {
			this.voucher = tool.getArImage(row.BANK_PROVE, 'files/')
			this.auditId = row.ID
			this.viewVoucher = true
		},
		uploadAgain(id) {
			this.viewVoucher = false
			this.auditId = id
			this.uploadUrl = `${process.env.VUE_APP_BASE_API}/v1/finance/prove-add?id=${this.auditId}`
			this.uploadVoucher = true
		},
		handleUpload(id) {
			setTimeout(() => {
				this.auditId = id
				this.uploadUrl = `${process.env.VUE_APP_BASE_API}/v1/finance/prove-add?id=${this.auditId}`
				this.uploadVoucher = true
			}, 0.5 * 1000)
		},
		async uploaderHandleBefore() {
			this.$message({
				message: this.$t('common.uploadHints'),
				type: 'warning',
				duration: 500,
			})

			await fetchToken().then(response => {
				this.uploaderHeaders.Authorization = process.env.VUE_APP_ACCESS_TOKEN_PREFIX + response.data
				this.uploaderData.uploadToken = response.data
			})
		},
		handleSuccess(res, file) {
			this.imageUrl = URL.createObjectURL(file.raw)

			setTimeout(() => {
				this.uploadVoucher = false
				this.getList()
			}, 2 * 1000)
		},
		beforeUpload(file) {
			const typeAllowed = ['image/jpeg', 'image/jpg', 'image/png']
			const isLt2M = file.size / 1024 / 1024 < 2
			if (!typeAllowed.includes(file.type)) {
				this.$message.error('图片只能是 JPG/JPEG/PNG 格式!')
				return false
			}
			if (!isLt2M) {
				this.$message.error('图片大小不能超过 2MB!')
				return false
			}

			return true
		},
		handleError(err, file) {
			console.log(err, file)
		},
	}
}
</script>

<style>
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409EFF;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 178px;
	height: 178px;
	line-height: 178px;
	text-align: center;
}
.avatar {
	width: 178px;
	height: 178px;
	display: block;
}
</style>