|
|
@@ -0,0 +1,334 @@
|
|
|
+<template>
|
|
|
+ <div class="batch-box">
|
|
|
+ <div class="batch-box-top tabs">
|
|
|
+ <a :class="[tabsIndex===0?'active':'']" @click="handleChangeTabs(0)">批量上传</a>
|
|
|
+ <a :class="[tabsIndex===1?'active':'']" @click="handleChangeTabs(1)">日志</a>
|
|
|
+ </div>
|
|
|
+ <div class="batch-box-center">
|
|
|
+ <template v-if="tabsIndex===0">
|
|
|
+ <div class="upload-box" v-if="!alreadyFile">
|
|
|
+ <el-upload
|
|
|
+ class="upload-demo"
|
|
|
+ :accept="'.xls,.xlsx'"
|
|
|
+ :limit="1"
|
|
|
+ :on-progress="uploadVideoProcess"
|
|
|
+ :before-upload="handlebeforeUpload"
|
|
|
+ :on-success="handleSuccess"
|
|
|
+ drag
|
|
|
+ :action="url"
|
|
|
+ :show-file-list="false"
|
|
|
+ multiple>
|
|
|
+ <div class="el-upload__text">
|
|
|
+ 点击或拖拽文件到此处上传
|
|
|
+ <span>只有 xlsx, xls 格式文件可以上传，文件大小不得超过 100MB</span>
|
|
|
+ </div>
|
|
|
+ </el-upload>
|
|
|
+ </div>
|
|
|
+ <template v-else>
|
|
|
+ <div class="file-top">
|
|
|
+ <div class="file-content">
|
|
|
+ <svg-icon icon-class="xlsx"></svg-icon>
|
|
|
+ <div class="file">
|
|
|
+ <p>{{fileList[0].name}}</p>
|
|
|
+ <el-progress v-if="progressFlag" :percentage="percentage" :show-text="false"></el-progress>
|
|
|
+ <b>{{fileList[0].fileSize}}</b>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <i class="el-icon-error" @click="handleErmoveFile"></i>
|
|
|
+ </div>
|
|
|
+ <div class="file-bottom">
|
|
|
+ <p>批量上传内容与系统中有重复时</p>
|
|
|
+ <el-radio-group v-model="sameUser">
|
|
|
+ <el-radio label="false">跳过</el-radio>
|
|
|
+ <el-radio label="true">覆盖</el-radio>
|
|
|
+ </el-radio-group>
|
|
|
+ <el-checkbox-group v-model="coverUser">
|
|
|
+ <el-checkbox label="1">覆盖时忽略密码</el-checkbox>
|
|
|
+ <el-checkbox label="2">上传完成后自动导出密码文件</el-checkbox>
|
|
|
+ </el-checkbox-group>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ <div class="batch-box-bottom">
|
|
|
+ <template v-if="tabsIndex===0">
|
|
|
+ <a class="downLoad">下载模板</a>
|
|
|
+ <div class="btn-box">
|
|
|
+ <el-button @click="closeDialog" size="small">取消</el-button>
|
|
|
+ <el-button type="primary" :disabled="!uploadFlag" v-if="!uploading&&!isStop"><svg-icon icon-class="upload"></svg-icon>开始上传</el-button>
|
|
|
+ <el-button type="primary" v-if="uploading&&!isStop"><svg-icon icon-class="pause-fill"></svg-icon>暂停</el-button>
|
|
|
+ <el-button type="warning" v-if="isStop"><i class="el-icon-refresh-right"></i>重试</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ <template v-else>
|
|
|
+ <div class="btn-box" style="flex:1">
|
|
|
+ <el-button type="primary"><svg-icon icon-class="upload"></svg-icon>导出日志</el-button>
|
|
|
+ </div>
|
|
|
+ </template>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script>
|
|
|
+import { getToken } from "../../utils/auth";
|
|
|
+export default {
|
|
|
+ components: {},
|
|
|
+ name: "batchImport",
|
|
|
+ props: [""],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ tabsIndex: 0,
|
|
|
+ alreadyFile: false, // 上传了需要解析的文件
|
|
|
+ file_id: '',
|
|
|
+ uploadFlag: false, // 是否可以点击开始上传按钮
|
|
|
+ uploading: false, // 上传中
|
|
|
+ isStop: false, // 暂停
|
|
|
+ fileList: [],
|
|
|
+ sameUser: 'false', // 存在相同的用户是否覆盖， true 覆盖，false 跳过。
|
|
|
+ coverUser: [], // 覆盖用户时是否更新用户密码， true 更新，false 不更新。
|
|
|
+ progressFlag:true,
|
|
|
+ percentage:0
|
|
|
+ };
|
|
|
+ },
|
|
|
+ watch: {},
|
|
|
+ computed: {
|
|
|
+ url() {
|
|
|
+ let userInfor = getToken();
|
|
|
+ let access_token = "";
|
|
|
+ if (userInfor) {
|
|
|
+ let user = JSON.parse(getToken());
|
|
|
+ access_token = user.access_token;
|
|
|
+ }
|
|
|
+ return (
|
|
|
+ process.env.VUE_APP_BASE_API +
|
|
|
+ "/FileServer/WebFileUpload?AccessToken=" +
|
|
|
+ access_token +
|
|
|
+ "&SecurityLevel=High"
|
|
|
+ );
|
|
|
+ },
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleChangeTabs(value){
|
|
|
+ this.tabsIndex = value
|
|
|
+ },
|
|
|
+ closeDialog(){
|
|
|
+ this.$emit("closeDialog")
|
|
|
+ },
|
|
|
+ handlebeforeUpload(file) {
|
|
|
+ if (file.size > 100 * 1024 * 1024) {
|
|
|
+ this.$message.warning('上传文件大小不能超过100M');
|
|
|
+ return false; // 必须返回false
|
|
|
+ }
|
|
|
+ this.alreadyFile = true
|
|
|
+ },
|
|
|
+ handleSuccess(response, file, fileList) {
|
|
|
+ if (response.status == 1) {
|
|
|
+ this.$message.success("用户上传成功");
|
|
|
+ this.file_id = response.file_info_list[0].file_id
|
|
|
+ this.uploadFlag = true
|
|
|
+ this.fileList = fileList
|
|
|
+ this.fileList.forEach((item) => {
|
|
|
+ if (item.size > 1000 * 1000) {
|
|
|
+ if (item.size / 1000 / 1000 / 1000 > 1) {
|
|
|
+ item.fileSize =
|
|
|
+ (item.size / 1000 / 1000 / 1000).toFixed(2) + "GB";
|
|
|
+ } else {
|
|
|
+ item.fileSize =
|
|
|
+ (item.size / 1000 / 1000).toFixed(2) + "MB";
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ item.fileSize = (item.size / 1000).toFixed(2) + "KB";
|
|
|
+ }
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ this.fileList = [];
|
|
|
+ this.file_id = ''
|
|
|
+ this.uploadFlag = false
|
|
|
+ this.$message.warning(response.msg);
|
|
|
+ this.alreadyFile = false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ handleErmoveFile(){
|
|
|
+ this.file_id = ''
|
|
|
+ this.uploadFlag = false
|
|
|
+ this.fileList = []
|
|
|
+ this.alreadyFile = false
|
|
|
+ },
|
|
|
+ uploadVideoProcess(event, file, fileList) {
|
|
|
+ // this.fileList = fileList
|
|
|
+ // this.progressFlag = true; // 显示进度条
|
|
|
+ // this.percentage = parseInt(event.percent); // 动态获取文件上传进度
|
|
|
+ // if (this.percentage >= 100) {
|
|
|
+ // this.percentage = 100
|
|
|
+ // setTimeout( () => {this.progressFlag = false}, 100) // 关闭进度条
|
|
|
+ // }
|
|
|
+ },
|
|
|
+ },
|
|
|
+ created() {
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ },
|
|
|
+ beforeDestroy() {
|
|
|
+ },
|
|
|
+};
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.batch-box{
|
|
|
+ height: 358px;
|
|
|
+ background: #FFFFFF;
|
|
|
+ &-top{
|
|
|
+ height: 56px;
|
|
|
+ border-bottom: 1px solid rgba(0,0,0,0.08);
|
|
|
+ }
|
|
|
+ &-center{
|
|
|
+ height: 233px;
|
|
|
+ overflow: auto;
|
|
|
+ }
|
|
|
+ &-bottom{
|
|
|
+ height: 64px;
|
|
|
+ border-top: 1px solid rgba(0,0,0,0.08);
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 16px 24px;
|
|
|
+ .btn-box{
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ .el-button{
|
|
|
+ font-size: 14px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ height: 32px;
|
|
|
+ .svg-icon,.el-icon-refresh-right{
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ &.el-button--warning{
|
|
|
+ background: #FF802B;
|
|
|
+ border: none;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .tabs{
|
|
|
+ display: flex;
|
|
|
+ padding: 12px 0;
|
|
|
+ justify-content: center;
|
|
|
+ a{
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ border-radius: 100px;
|
|
|
+ padding: 5px 16px;
|
|
|
+ margin-right: 12px;
|
|
|
+ &:hover{
|
|
|
+ background: #F2F3F5;
|
|
|
+ }
|
|
|
+ &.active{
|
|
|
+ background: #F2F3F5;
|
|
|
+ font-weight: 500;
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .downLoad{
|
|
|
+ color: #000;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ &:hover{
|
|
|
+ color: #165DFF;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .upload-box{
|
|
|
+ background: #F5F5F5;
|
|
|
+ padding: 24px;
|
|
|
+ height: 233px;
|
|
|
+ }
|
|
|
+ .file-top{
|
|
|
+ height: 88px;
|
|
|
+ padding: 24px 24px 0 24px;
|
|
|
+ background: #F5F5F5;
|
|
|
+ display: flex;
|
|
|
+ .file-content{
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ .file{
|
|
|
+ margin-left: 16px;
|
|
|
+ flex: 1;
|
|
|
+ b{
|
|
|
+ font-size: 12px;
|
|
|
+ font-style: normal;
|
|
|
+ font-weight: 600;
|
|
|
+ line-height: 14px;
|
|
|
+ color: #242634;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ p{
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ font-weight: 500;
|
|
|
+ line-height: 16px;
|
|
|
+ color: #242634;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-icon-error{
|
|
|
+ width: 16px;
|
|
|
+ height: 16px;
|
|
|
+ color: #CCCCCC;
|
|
|
+ cursor: pointer;
|
|
|
+ margin: 11px 0 0 14px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .file-bottom{
|
|
|
+ padding: 24px 24px 0 24px;
|
|
|
+ p{
|
|
|
+ margin: 0 0 8px 0;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 22px;
|
|
|
+ color: #4E5969;
|
|
|
+ }
|
|
|
+ .el-radio-group,.el-checkbox-group{
|
|
|
+ padding: 5px 0;
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+ .el-radio{
|
|
|
+ margin-right: 24px;
|
|
|
+ }
|
|
|
+ .el-checkbox{
|
|
|
+ margin-right: 16px;
|
|
|
+ }
|
|
|
+ .el-checkbox:last-of-type{
|
|
|
+ margin-right: 0;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .el-progress{
|
|
|
+ margin-bottom: 8px;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
|
|
+<style lang="scss">
|
|
|
+.upload-box{
|
|
|
+ .el-upload,.el-upload-dragger{
|
|
|
+ width: 100%;
|
|
|
+ }
|
|
|
+ .el-upload-dragger{
|
|
|
+ background: #F5F5F5;
|
|
|
+ border-radius: 24px;
|
|
|
+ padding: 24px;
|
|
|
+ border: 2px dashed var(--grey-03, #E2E6EA);
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ font-weight: 400;
|
|
|
+ line-height: 22px;
|
|
|
+ font-size: 14px;
|
|
|
+ color: #000;
|
|
|
+ span{
|
|
|
+ display: block;
|
|
|
+ font-size: 12px;
|
|
|
+ color: #86909C;
|
|
|
+ font-size: 12px;
|
|
|
+ line-height: 20px;
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
natasha
