hp-storeroom-system/src/views/archivesManage/fileImport/dataImport/index.vue

<template>
  <div
    v-loading="loading1"
    class="import-container"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <ul class="import-header">
      <li><i class="step-img01" /><span>上传数据包</span></li>
      <li :class="['dot-img', {'dot-img-active':isShow02 || isShow03}]" />
      <li><i :class="['step-img02', {'step-img02-active':isShow02 || isShow03}]" /><span>读取数据</span></li>
      <li :class="['dot-img', {'dot-img-active':isShow03}]" />
      <li><i :class="['step-img03', {'step-img03-active':isShow03}]" /><span>导入数据</span></li>
    </ul>
    <div
      v-if="isShow01"
      class="step-content step-upload"
    >
      <div class="upload-container">
        <input ref="fileInput" :key="key" type="file" accept=".xlsx, .xls" @change="handleFileChange">
        <div class="upload-zip"><i class="el-icon-upload2" />选择文件</div>
      </div>
      <div class="el-upload__tip">上传限制文件类型：xlsx, xls</div>
      <div v-for="item in fileList" :key="item.name" class="file-list">
        {{ item.name }}
        <i class="el-icon-close" @click="deleteFile(item)" />
      </div>
    </div>
    <div v-if="isShow01" class="step-bottom-btn">
      <el-button type="primary" @click="handleStep01">下一步</el-button>
    </div>
    <div v-if="isShow02" class="step-content">
      <div class="import-data-number">共 <span style="color: #339cff;">{{ totalNum }}</span> 条  正常 <span style="color: #1AAE93;">{{ normalNum }}</span> 条  问题 <span style="color:rgb(246,81,99)">{{ errorNum }}</span> 条</div>
      <ListPre
        ref="importTableList"
        :hp-id="hpId"
        :initial-table-data="previewTableData"
        :initial-total="previewTotal"
      />
    </div>
    <div v-if="isShow02" class="step-bottom-btn">
      <el-button @click="handleReturn02">上一步</el-button>
      <el-button type="primary" @click="submitImport">导入</el-button>
    </div>
    <div v-if="isShow03" class="step-content step-content03">
      <!-- 导入中状态 -->
      <div v-if="importStatus === 'loading'" class="import-status-indicator">
        <i class="el-icon-loading" />
        <p>数据导入中,请耐心等待...</p>
      </div>

      <!-- 导入成功状态 -->
      <div v-else-if="importStatus === 'success'" class="import-status-indicator success">
        <i class="el-icon-circle-check" />
        <p>数据导入成功！</p>
        <el-button type="primary" @click="handleReturn03">完成</el-button>
      </div>

      <!-- 导入失败状态 -->
      <div v-else-if="importStatus === 'error'" class="import-status-indicator error">
        <i class="el-icon-circle-close" />
        <p>数据导入失败，请重试。</p>
        <el-button type="primary" @click="retryImport">重试</el-button>
        <el-button @click="handleReturn03">取消</el-button>
      </div>
    </div>
    <!-- <div v-if="isShow03" class="step-content step-content03">
      <el-form ref="form" :model="form" label-width="160px">
        <el-row>
          <el-form-item label="案卷及文件数据">
            <el-checkbox v-model="form.importArchive">导入</el-checkbox>
          </el-form-item>
          <el-form-item label="遇到重复数据导入方式">
            <el-radio-group v-model="form.archivesImportType">
              <el-radio label="2">覆盖</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-row>
          <el-form-item label="资料数据">
            <el-checkbox v-model="form.importInformation">导入</el-checkbox>
          </el-form-item>
          <el-form-item label="遇到重复数据导入方式" pr>
            <el-radio-group v-model="form.informationInputType">
              <el-radio label="2">覆盖</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-row>
        <el-form-item>
          <el-button type="primary" class="submit-btn" @click="submitForm('form')">导入</el-button>
          <el-button @click="handleReturn03">取消</el-button>
        </el-form-item>
      </el-form>
    </div> -->
    <el-dialog title="确认删除" :visible.sync="deleteVisible">
      <span class="dialog-right-top" />
      <span class="dialog-left-bottom" />
      <div class="setting-dialog">
        <p><span style="color:#fff;">此操作将清空所选数据</span></p>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click.native="handleDelConfirm">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import crudFileImport from '@/api/archivesManage/fileImport'
import { mapGetters } from 'vuex'
import ListPre from '../module/listPre.vue'
export default {
  name: 'DataImport',
  components: { ListPre },
  data() {
    return {
      key: 0,
      file: null,
      fileList: [],
      totalNum: 0,
      errorNum: 0,
      normalNum: 0,
      deleteVisible: false,
      fileName: null,
      form: {
        importArchive: true,
        importInformation: true,
        archivesImportType: '2',
        informationInputType: '2'
      },
      isShow01: true,
      isShow02: false,
      isShow03: false,
      timer: null,
      loading1: false,
      previewTableData: [], // 用于存储预览表格数据
      previewTotal: 0, // 用于存储预览数据总数
      hpId: null,
      importStatus: 'loading'
    }
  },
  computed: {
    ...mapGetters([
      'user',
      'baseApi'
    ])
  },
  created() {
  },
  methods: {
    // input-upload change
    handleFileChange(event) {
      const files = event.target.files
      this.file = files[0]
      this.key++
      // const sizeLimit = this.file.size / 1024 / 1024 > 10
      // if (sizeLimit) {
      //   this.$message.warning('上传文件大小不能超过 10MB!')
      // }
      for (let i = 0; i < files.length; i++) {
        this.fileList = []
        this.fileList.push(files[i])
      }
    },
    // delt file
    deleteFile(file) {
      this.$confirm('此操作将清空所选数据, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const index = this.fileList.indexOf(file)
        this.fileList.splice(index, 1)
        this.file = null
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    // 上传文件
    handleStep01() {
      this.loading1 = true
      const notifyInstance = this.$notify.info({
        title: '温馨提示',
        message: '当前批量数据导入所需的时间较长，请用户耐心等待，谢谢！',
        customClass: 'centered-notify',
        showClose: false,
        duration: 0
      })

      if (this.fileList.length === 0) {
        this.$message.warning('请上传相关文件 ！')
        this.loading1 = false
        notifyInstance.close()
        return
      }

      this.fileName = this.file.name.split('.')[0]

      crudFileImport.zipUpload(this.baseApi + '/api/unzip/importArchives', this.file, this.user.username)
        .then(res => {
          if (res.data.code === 200 && res.data.data) {
            this.hpId = res.data.data

            return crudFileImport.FetchHpArchivesDetailsByHpId({
              page: 0,
              size: 10,
              hpId: this.hpId,
              isError: true
            })
          } else {
            throw new Error('文件上传或解析失败')
          }
        })
        .then(res => {
          console.log('预览数据 res2:', res.data.content)
          this.totalNum = res.total
          this.errorNum = res.error
          this.normalNum = res.normal
          this.previewTableData = res.data.content
          this.previewTotal = res.data.totalElements

          this.isShow01 = false
          this.isShow02 = true
        })
        .catch(() => {
          this.$message.error('数据加载失败，请重试。')
          this.isShow01 = false
          this.isShow02 = true
        })
        .finally(() => {
          this.loading1 = false
          notifyInstance.close()
        })
    },
    // 第二步 上一步
    handleReturn02() {
      this.fileList = []
      this.isShow01 = true
      this.isShow02 = false
      this.isShow03 = false
    },
    // 第二步 下一步
    handleStep02() {
      this.isShow01 = false
      this.isShow02 = false
      this.isShow03 = true
    },
    // 确认导入
    submitImport() {
      this.isShow01 = false
      this.isShow02 = false
      this.isShow03 = true
      this.importStatus = 'loading'

      const modifiedRows = this.$refs.importTableList.getModifiedRows()
      const params = {
        'hpId': this.hpId,
        'hpTempList': modifiedRows
      }
      console.log('params:', params)
      crudFileImport.FetchImportHp(params).then(res => {
        // this.$message({
        //   type: 'success',
        //   message: '导入成功!'
        // })
        console.log('导入成功, 结果:', res)
        // this.importStatus = 'success' // 导入成功，更新状态
      }).catch(() => {
        // console.error('导入失败')
        // this.importStatus = 'error' // 导入失败，更新状态
        this.timer = setTimeout(() => {
          this.$emit('step-end', '1')
          clearTimeout(this.timer)
        }, 1000)
      })
      this.timer = setTimeout(() => {
        this.$emit('step-end', '1')
        clearTimeout(this.timer)
      }, 1000)
    },
    retryImport() {
      this.submitImport()
    },
    handleReturn03() {
      this.isShow01 = true
      this.isShow02 = false
      this.isShow03 = false
      this.fileList = []
      this.file = null
      this.importStatus = 'loading'
      if (this.timer) {
        clearTimeout(this.timer)
        this.timer = null
      }
    },
    submitForm(formName) {
      // this.loading1 = true
      // const notifyInstance = this.$notify.info({
      //   title: '温馨提示',
      //   message: '当前批量数据导入所需的时间较长，请用户耐心等待，谢谢！',
      //   customClass: 'centered-notify',
      //   showClose: false,
      //   duration: 0 // 设置为0表示不自动关闭
      // })
      this.$refs[formName].validate((valid) => {
        if (valid) {
          const params = {
            'archivesImportType': this.form.archivesImportType,
            'importArchive': this.form.importArchive,
            'importInformation': this.form.importInformation,
            'informationInputType': this.form.informationInputType,
            'name': this.fileName
          }
          console.log('params:', params)
          crudFileImport.FetchImportZip(params).then(res => {
            console.log('resZip', res)
            this.$message({
              type: 'success',
              message: '导入成功!'
            })
          }).catch(() => {
            this.timer = setTimeout(() => {
              this.$emit('step-end', '1')
              clearTimeout(this.timer)
            }, 1000)
          })
          this.timer = setTimeout(() => {
            this.$emit('step-end', '1')
            clearTimeout(this.timer)
          }, 1000)
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style>
  .centered-notify{
    top: calc(50% + 80px) !important;
    left: calc(50% + 160px) !important;
    right: 0 !important;
    transform: translate(-50%,-50%) !important;
    background-color: #031435!important;
    border: 1px solid #339CFF!important;
    & h2{
      color: #fff!important;
    }
    & .el-notification__content{
      color: #fff!important;
    }
  }
</style>
<style lang="scss" scoped>
::v-deep .el-loading-spinner{
  top: 60%;
}
.import-container{
  position: relative;
  padding: 30px;
  height: calc(100vh - 234px);
}
.import-header{
  display: flex;
  justify-content: center;
  align-items: center;
  li{
    display: flex;
    flex-direction: column;
    text-align: center;
    align-items: center;
    width: 140px;
    font-size: 14px;
    color: #fff;
    i{
      width: 45px;
      height: 45px;
      margin-bottom: 20px;
      &.step-img01{
        background: url('~@/assets/images/step01.png') no-repeat;
        background-size: contain;
      }
      &.step-img02{
        background: url('~@/assets/images/step02_2.png') no-repeat;
        background-size: contain;
        &.step-img02-active{
          background: url('~@/assets/images/step02.png') no-repeat;
          background-size: contain;
        }
      }
      &.step-img03{
        background: url('~@/assets/images/step03_3.png') no-repeat;
        background-size: contain;
        &.step-img03-active{
          background: url('~@/assets/images/step03.png') no-repeat;
          background-size: contain;
        }
      }
    }
    &.dot-img{
      width: 55px;
      height: 30px;
      background: url('~@/assets/images/dot1.png') no-repeat;
      background-size: contain;
      &.dot-img-active{
        background: url('~@/assets/images/dot2.png') no-repeat;
        background-size: contain;
      }
    }
  }
}
.step-content{
  position: relative;
}
.step-content03 {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center; // 垂直居中
  min-height: 200px; // 给一个最小高度，防止内容跳动
  color: #fff;

  .import-status-indicator {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px; // 元素之间的间距

    i {
      font-size: 48px;
    }

    p {
      font-size: 16px;
    }

    .el-button {
      margin-top: 10px;
    }

    &.success i {
      color: #19be6b; // 成功颜色
    }

    &.error i {
      color: #fa5555; // 失败颜色
    }
  }
}
.step-upload{
  width: 40%;
  padding: 30px 0;
  margin: 40px auto;
  background-color: #02255f;
  border-radius: 3px;
  div:first-child{
    display: flex;
    justify-content: center;
    flex-direction: column;
    align-items: center;
  }
}
.import-title{
  font-size: 14px;
  color: #fff;
  padding-left: 50px;
  margin-bottom: 6px;
  height: 50px;
  line-height: 50px;
  &.step01{
    background: url('~@/assets/images/step01.png') no-repeat;
    background-size: 30px 30px;
  }
  &.step02{
    background: url('~@/assets/images/step02.png') no-repeat;
    background-size: 30px 30px;
  }
  &.step03{
    background: url('~@/assets/images/step03.png') no-repeat;
    background-size: 30px 30px;
  }
}
.upload-container{
  position: relative;
  input{
    position: absolute;
    left: 50%;
    top: 50%;
    transform:translate(-50%,-50%);
    opacity: 0;
    border: 1px solid #000;
  }
  .upload-zip{
    flex-direction: row !important;
    width: 100px;
    padding: 6px 10px;
    font-size: 14px;
    color: #fff;
    border: 1px solid #339cff;
    background-color: transparent;
    border-radius: 3px;
    & i{
      margin-right: 4px;
    }
  }
}
.el-upload__tip{
  text-align: center;
}
.file-list{
  font-size: 16px;
  color: #fff;
  text-align: center;
  margin-top: 20px;
  i{
    font-size: 12px;
    cursor: pointer;
  }
}

::v-deep .el-upload{
  display: block;
}
::v-deep .el-upload-list{
  margin-top: 20px;
  .el-upload-list__item{
    font-size: 16px;
    line-height: 30px;
    &:hover{
      background-color: transparent;
    }
    &:first-child{
      margin-top: 0;
    }
  }
  .el-upload-list__item-name [class^=el-icon]{
    color: #fff;
  }
  .el-upload-list__item-name{
    color: #fff;
  }
  .el-icon-close{
    display: block;
    color: #fff;
    top: 8px;
  }
}

.step-bottom-btn{
  text-align: center;
  .el-button.el-button--primary{
    color: #fff;
    background-color: #1890ff;
    border-color: #1890ff;
  }
}

.import-data-number{
  position: absolute;
  right: 10px;
  top: 20px;
  font-size: 12px;
  color: #fff;
  & span{
    font-weight: bold;
    color: rgb(246,81,99);
  }
}

::v-deep .el-form{
  .el-row{
    display: flex;
    justify-content: flex-start;
  }
  .el-form-item{
    margin-right: 50px;
    .el-form-item__label,
    .el-checkbox__label,
    .el-radio__label{
      color: #fff;
    }
  }
}

.submit-btn{
  background-color: #3a99fd;
  border-color: #3a99fd;
  margin-top: 20px;
}

</style>