jsh_erp/jshERP-web/src/components/tools/ImportFileModal.vue

<template>
  <div ref="container">
    <a-modal
      :title="title"
      :width="500"
      :visible="visible"
      :confirm-loading="confirmLoading"
      :getContainer="() => $refs.container"
      :maskStyle="{ top: '93px', left: '154px' }"
      :wrapClassName="wrapClassNameInfo()"
      :mask="isDesktop()"
      :maskClosable="false"
      @cancel="handleCancel"
      style="top: 20%; height: 55%"
    >
      <template slot="footer">
        <a-button key="back" @click="handleCancel">取消</a-button>
      </template>
      <a-spin :spinning="confirmLoading">
        <a-row class="form-row" :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="第一步：">
              <a ref="myLink" @click="importTemplate" :href="templateUrl"
                ><b>{{ templateName }}</b></a
              >
              <p>提示：模板中的第一行请勿删除</p>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row class="form-row" :gutter="24">
          <a-col :md="24" :sm="24">
            <a-form-item :labelCol="labelCol" :wrapperCol="wrapperCol" label="第二步：">
              <a-upload
                name="file"
                :showUploadList="false"
                :multiple="false"
                :headers="tokenHeader"
                :action="importExcelUrl"
                @change="handleImportExcel"
              >
                <a-button type="primary" icon="import">导入</a-button>
              </a-upload>
            </a-form-item>
          </a-col>
        </a-row>
      </a-spin>
    </a-modal>
  </div>
</template>

<script>
import { JeecgListMixin } from '@/mixins/JeecgListMixin'
import { mixinDevice } from '@/utils/mixin'
export default {
  name: 'ImportFileModal',
  mixins: [JeecgListMixin, mixinDevice],
  data() {
    return {
      title: '',
      visible: false,
      model: {},
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 },
      },
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 18 },
      },
      confirmLoading: false,
      disableMixinCreated: true,
      templateUrl: '',
      templateName: '',
      templateDownloadName: '',
      url: {
        importExcelUrl: '',
      },
    }
  },
  created() {},
  computed: {
    importExcelUrl: function () {
      return `${window._CONFIG['domianURL']}${this.url.importExcelUrl}`
    },
  },
  methods: {
    initModal(apiUrl, templateUrl, templateName, templateDownloadName = '供应商模板') {
      this.url.importExcelUrl = apiUrl
      this.templateUrl = templateUrl
      this.templateName = templateName
      this.templateDownloadName = templateDownloadName
      this.visible = true
    },
    importTemplate() {
      let link = this.$refs.myLink
      link.setAttribute('download', this.templateDownloadName + '.xls')
    },
    close() {
      this.$emit('close')
      this.visible = false
    },
    handleCancel() {
      this.close()
    },
  },
}
</script>

<style scoped></style>