vis389/src/views/chartList/page1/left2.vue

<template>
	<el-row :gutter="20">
		<!--用户数据-->
		<el-col :span="24" :xs="24">
			<el-row :gutter="10" class="mb8 fr">
				<el-col :span="1.5">
					<el-button type="info" plain icon="el-icon-upload2" size="mini" @click="handleImport">导入</el-button>
				</el-col>
				<el-col :span="1.5">
					<el-button
						type="warning"
						plain
						icon="el-icon-download"
						size="mini"
						:loading="exportLoading"
						@click="importTemplate"
						>导出模板</el-button
					>
				</el-col>
			</el-row>

			<el-table v-loading="loading" :data="userList">
				<el-table-column label="序号" align="center" type="index" width="80"/>
				<el-table-column label="部门名称" align="center" prop="deptName" />
				<el-table-column label="月份" align="center" prop="month" />
				<el-table-column label="预测收入（件）" align="center" prop="forecastRevenue" />
				<el-table-column label="目标收入（件）" align="center" prop="targetRevenue" />
				<el-table-column label="已完成收入（件）" align="center" prop="completedRevenue" />
				<el-table-column label="收入完成率" align="center" prop="revenueRate" />
				<el-table-column label="预测利润（万元）" align="center" prop="forecastProfit" />
				<el-table-column label="目标利润（万元）" align="center" prop="targetProfit" />
				<el-table-column label="已完成利润（万元）" align="center" prop="completedProfit" />
				<el-table-column label="利润完成率" align="center" prop="profitRate" />
			</el-table>

			<pagination
				v-show="total > 0"
				:total="total"
				:autoScroll="false"
				:pageSizes="[2, 5, 10, 20]"
				:page.sync="queryParams.pageNum"
				:limit.sync="queryParams.pageSize"
				@pagination="getList"
			/>
		</el-col>
		<!-- 用户导入对话框 -->
		<el-dialog :title="upload.title" :visible.sync="upload.open" width="400px" append-to-body>
			<el-upload
				ref="upload"
				:limit="1"
				accept=".xlsx, .xls"
				:headers="upload.headers"
				:action="upload.url"
				:disabled="upload.isUploading"
				:on-progress="handleFileUploadProgress"
				:on-success="handleFileSuccess"
				:auto-upload="false"
				drag
			>
				<i class="el-icon-upload"></i>
				<div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
				<div class="el-upload__tip" slot="tip">
					<!-- <div class="el-upload__tip" slot="tip">
						<el-checkbox v-model="upload.updateSupport" /> 是否更新已经存在的用户数据
					</div> -->
					<span>仅允许导入xls、xlsx格式文件。</span>
					<!-- <el-link
						type="primary"
						:underline="false"
						style="font-size: 12px; vertical-align: baseline"
						@click="importTemplate"
						>下载模板</el-link
					> -->
				</div>
			</el-upload>
			<div slot="footer" class="dialog-footer">
				<el-button type="primary" @click="submitFileForm">确 定</el-button>
				<el-button @click="upload.open = false">取 消</el-button>
			</div>
		</el-dialog>
	</el-row>
</template>
<script>
import { leftTwoList, leftTwoImportTemplate } from './indexApi'
import { getToken } from '@/utils/auth'
export default {
	data() {
		return {
			// 遮罩层
			loading: true,
			// 导出遮罩层
			exportLoading: false,
			// 查询参数
			queryParams: {
				pageNum: 1,
				pageSize: this.page_size,
			},
			// 用户信息
			userList: [],
			// 总条数
			total: 0,
			// 用户导入参数
			upload: {
				// 是否显示弹出层（用户导入）
				open: false,
				// 弹出层标题（用户导入）
				title: '',
				// 是否禁用上传
				isUploading: false,
				// 是否更新已经存在的用户数据
				updateSupport: 0,
				// 设置上传的请求头部
				headers: { Authorization: 'Bearer ' + getToken() },
				// 上传的地址
				url: process.env.VUE_APP_BASE_API + '/hx/revenueProfit/importData',
			},
		}
	},
	methods: {
		/** 查询用户列表 */
		getList() {
			this.loading = true
			leftTwoList(this.queryParams).then(res => {
				this.userList = res.rows
				this.total = res.total
				this.loading = false
			})
		},
		/** 导出按钮操作 */
		handleExport() {
			const queryParams = this.queryParams
			this.$modal
				.confirm('是否确认导出所有用户数据项？')
				.then(() => {
					this.exportLoading = true
					return exportUser(queryParams)
				})
				.then(response => {
					this.$download.name(response.msg)
					this.exportLoading = false
				})
				.catch(() => {})
		},
		/** 导入按钮操作 */
		handleImport() {
			this.upload.title = '数据导入'
			this.upload.open = true
		},
		/** 下载模板操作 */
		importTemplate() {
			leftTwoImportTemplate().then(response => {
				this.$download.name(response.msg)
			})
		},
		// 文件上传中处理
		handleFileUploadProgress(event, file, fileList) {
			this.upload.isUploading = true
		},
		// 文件上传成功处理
		handleFileSuccess(response, file, fileList) {
			this.upload.open = false
			this.upload.isUploading = false
			this.$refs.upload.clearFiles()
			this.$alert(response.msg, '导入结果', { dangerouslyUseHTMLString: true })
			this.getList()
		},
		// 提交上传文件
		submitFileForm() {
			this.$refs.upload.submit()
		},
	},
	created() {
		this.getList()
	},
}
</script>