ibms/src/components/relation/relationShip/Modal/exportExcel.vue

<template>
  <div class="export-excel">
    <el-dialog
      :title="values.relation_maintenance"
      :visible.sync="dialogExport"
    >
      <p class="option-tip">{{values.optionTips}}</p>
      <el-row :span="24">
        <el-col :span="8">
          <p>
            <i class="iconfont icon-doc-line"/>
            {{values.currentNum}} 0
          </p>

          <a :href="downloadProject('excel')">
            <el-button
              type="primary"
              class="mt-10"
            >
              {{values.download}}
            </el-button>
          </a>
        </el-col>
        <el-col :span="10">
          {{values.lastTime}}
        </el-col>
      </el-row>
      <el-upload
        class="upload-demo"
        drag
        action="/api/datacenter/graphic/import"
        multiple
        :show-file-list='false'
        name="file"
        :headers="headers"
        :data="dataId"
        :on-progress="progress"
        :on-success="success"
        :on-error="error"
        accept="xlsx,xls"
      >
        <i class="el-icon-upload"/>
        <div
          class="el-upload__text"
          v-html="values.uploadTxt"
        />
        <div class="upload__tip danger" slot="tip">{{ values.uploadTips}}</div>
      </el-upload>
    </el-dialog>
    <!--手动编辑：手动维护.process结束-->
    <el-dialog
      :title="values.relation_maintenance"
      :visible.sync="dialogProcess"
    >
      <div class="block">
        <el-timeline>
          <el-timeline-item
            v-for="(activity, index) in activities"
            :key="index"
            :icon="activity.icon"
            :type="activity.type"
            :color="activity.color"
            :size="activity.size"
          >
            {{activity.content}}
          </el-timeline-item>
        </el-timeline>
      </div>
      <!--            下载报告-->
      <a :href="downloadProject('report')">
        <el-button>{{values.downloadFile}}</el-button>
      </a>
      <footer
        slot="footer"
        class="dialog-footer "
      >
        <el-button @click="errBack">{{values.back}}</el-button>
        <el-button
          type="primary"
          @click="finish"
        >{{values.done}}
        </el-button>
      </footer>
    </el-dialog>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex'
  import storage from '@/framework/utils/storage'

  export default {
    name: "exportExcel",
    props: ['values'],
    data() {
      return {
        dialogExport: false,
        dialogProcess: false,
        activities: [{
          content: '数据文件处理中..',
          size: 'large',
          type: 'primary',
          icon: 'el-icon-check',
          color: '#0bbd87'
        }, {
          content: '数据处理成功',
          color: '#0bbd87',
          icon: 'el-icon-check',
          size: 'large',
          type: 'primary',
        }],
      }
    },
    computed: {
      ...mapGetters('layout', ['projectId']),
      headers() {
        return {
          'ProjectId': this.projectId,
          'Comming': 'adm',
          'Account': storage.get("user_name")
        }
      },
      dataId() {
        return {
          // relType: this.ManualMaintenance.RelationType || '',
          // zoneType: this.ManualMaintenance.ZoneType || '',
          // projectId: this.projectId
        }
      },
    },
    methods: {
      downloadProject(str) {
        // let relType = this.ManualMaintenance.RelationType ? `?relType=${this.ManualMaintenance.RelationType}` : ''
        // let zoneType = this.ManualMaintenance.ZoneType ? `&zoneType=${this.ManualMaintenance.ZoneType}` : ''
        // let url;
        // if (str === 'excel') {
        //   relType = this.ManualMaintenance.RelationType ? `&relType=${this.ManualMaintenance.RelationType}` : ''
        //   url = `/api/datacenter/graphic/export?code=对象ID${relType}${zoneType}`
        // } else {
        //   url = `/api/datacenter/graphic/report-downloads${relType}${zoneType}`
        // }
        // return url
      },
      progress(event, file, fileList) {
        // console.log(event.file, fileList)
      },
      success(event, file, fileList) {
        this.dialogExport = true
        this.dialogProcess = true

      },
      error(event, file, fileList) {
        this.dialogExport = true
        this.dialogProcess = true

      },
      errBack() {
        this.dialogProcess = false
      },
      finish() {
        this.dialogProcess = false
        this.dialogExport = false
      },

    }
  }
</script>

<style scoped lang="less">
  .export-excel {
    .mt-10 {
      margin-top: 10px;
    }

    .danger {
      color: #d9001b;
    }

    .font-big {
      font-weight: 600;
    }


    .exist-title {
      font-size: 12px;
      color: #AAAAAA;
    }

    .option-tip {
      font-size: 18px;
      font-weight: 600;
    }

    .upload-demo {
      margin: 20px 0;

    }

    /deep/ .el-upload-dragger {
      width: 600px;
      margin: 0 auto;
    }
  }
</style>