fu-hsi-web/src/views/caseDetails/components/AddEvidence/edit.vue

<template>
  <div class="EditEvidence">
    <div class="step-list">
      <div class="step-list-item">
        <img :src="actUploadImg" alt="">
        <span class="actived">证据上传并归档</span>
      </div>
      <div :class="[activeStep > 0 ?'act-step-line':'step-line']">
        <span>>></span>
      </div>
      <div class="step-list-item">
        <img v-if="activeStep > 0" :src="actIdentifyImg" alt="">
        <img v-else :src="identifyImg" alt="">
        <span :class="[activeStep > 0 ?'actived':'']">证据识别并提取</span>
      </div>
      <div :class="[activeStep > 0 ?'act-step-line':'step-line']">
        <span>>></span>
      </div>
      <div class="step-list-item">
        <img v-if="activeStep > 1" :src="actUploadImg" alt="">
        <img v-else :src="uploadImg" alt="">
        <span :class="[activeStep > 1 ?'actived':'']">证据确认</span>
      </div>
    </div>
    <UploadEvidence v-show="activeStep === 0" ref="UploadEvidenceRef" @save="saveOk" />
    <EvidenceExtract v-if="activeStep === 1" ref="EvidenceExtractRef" @save="saveOk" />
    <EvidenceConfirm v-if="activeStep === 2" ref="EvidenceConfirmRef" />
  </div>
</template>
<script>
import { baseURL } from '@/config'
import { commonDownloadFile } from '@/api/config/uploadApi'
import * as vuedraggable from 'vuedraggable'
import UploadEvidence from './components/UploadEvidence.vue'
import EvidenceExtract from './components/EvidenceExtract.vue'
import EvidenceConfirm from './components/EvidenceConfirm.vue'
export default {
  name: 'EditEvidence',
  components: { vuedraggable, UploadEvidence, EvidenceExtract, EvidenceConfirm },
  data() {
    return {
      fileList: [],
      actRecordImg: require('@/assets/record/act_record.png'),
      actIdentifyImg: require('@/assets/record/act_identify.png'),
      actUploadImg: require('@/assets/record/act_upload.png'),
      identifyImg: require('@/assets/record/identify.png'),
      uploadImg: require('@/assets/record/upload.png'),
      activeStep: 0,
      status: '1',
      interval: undefined
    }
  },
  mounted() {

  },
  methods: {
    getImgUrl(id) {
      return `${baseURL}${commonDownloadFile}${id}`
    },
    beforeUpload(file) {
      const isLt5M = file.size / 1024 / 1024 < 5
      const filename = file.name
      const postfix = filename.substring(filename.lastIndexOf('.'))
      if (!['.jpg', '.png'].includes(postfix)) {
        this.$message.error('上传图片只能是 JPG,PNG 格式!')
        return false
      }
      if (!isLt5M) {
        this.$message.error('上传头像图片大小不能超过 5MB!')
        return false
      }
      if (this.fileList >= 12) {
        this.$message.error('上传文件数量不能超过12张!')
        return false
      }
      return true
    },
    del(index) {
      this.fileList.splice(index, 1)
    },
    handleSuccess(res, file) {
      const obj = {
        name: file.name,
        fileId: res.data
      }
      this.fileList.push(obj)
      this.imgOcrIdentify(res.data)
    },
    saveOk() {
      this.activeStep += 1
    },
    async submit() {

    }
  }
}
</script>

  <style scoped lang="scss">
  .EditEvidence {
    width: 100%;
      height: 100%;
      background: #fff;
    display: flex;
    flex-direction: column;
    .step-list {
        display: flex;
        align-items: center;
        width: 100%;
        justify-content: center;
        padding-top: 36px;
        margin-bottom: 32px;
        .step-list-item {
          display: flex;
          align-items: center;
          span {
            font-size: 20px;
            color: #999999;
            margin-left: 16px;
            margin-right: 16px;
          }
          .actived {
            color: #3763FF;
          }
        }
        .step-line {
          width: 137px;
          height: 2px;
          border-top: 2px dashed #999999;
          display: flex;
          position: relative;
          margin-right: 42px;
          span {
            position: absolute;
            right: -24px;
            top: -11px;
            color: #999999;
            font-size: 16px;
          }
        }
        .act-step-line {
          width: 137px;
          height: 2px;
          border-top: 2px dashed #3763FF;
          display: flex;
          position: relative;
          margin-right: 42px;
          span {
            position: absolute;
            right: -24px;
            top: -11px;
            color: #3763FF;
            font-size: 16px;
          }
        }
        img {
          width: 36px;
          height: 36px;
        }
      }
  }
  </style>