bencao-subscribe/library/components/Batchimport/index.vue

<!--批量导入-->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    :before-close="close"
    title="数据导入"
    width="800px"
  >
    <div>
      <el-form ref="formRef" label-width="110px" :model="form" :rules="rules">
        <el-form-item>
          <div style="width: 100%">
            <el-upload
              ref="upload"
              accept=".xlsx"
              :action="action"
              :auto-upload="false"
              class="upload-demo"
              drag
              :file-list="fileList"
              :headers="header"
              multiple
              :on-error="handleError"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
            >
              <el-icon class="el-icon--upload"><upload-filled /></el-icon>
              <div class="el-upload__text">
                将文件拖拽到此处或
                <em>点击上传</em>
              </div>
            </el-upload>
          </div>
        </el-form-item>
        <el-form-item>
          <div class="model">
            <a :download="modelName" :href="modelUrl">
              点击下载模板：{{ modelName }}
            </a>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <div class="model">
      <div class="import-msg">
        <p style="margin-bottom: 5px">注意:</p>
        <p style="color: red">1.只可上传xlsx类型的表格文件</p>
        <p>2.请严格按照模板中提供的数据案例格式进行填写；</p>
        <p>3.填写错误可能会导致数据无法导入成功！</p>
      </div>
    </div>

    <template #footer>
      <!-- <el-button @click="close">取 消</el-button> -->
      <el-button type="primary" @click="batchImport">确 定</el-button>
    </template>
  </el-dialog>
</template>

<script>
  import { baseURL, fileUrl } from '@/config'
  import { useUserStore } from '@/store/modules/user'
  export default defineComponent({
    name: 'BatchSend',
    emits: ['fetch-data'],
    setup(props, { emit }) {
      const $baseMessage = inject('$baseMessage')
      const state = reactive({
        upload: null,
        formRef: null,
        treeRef: null,
        action: '', //上传文件地址
        // uploadData: { file_type: 'file', dir: 'account' },
        fileList: [],
        header: {},
        modelUrl: '', //模版地址
        modelName: '', //模版名称
        title: '',
        dialogFormVisible: false,
      })
      const showEdit = (row) => {
        const userStore = useUserStore()
        const { token } = userStore
        state.header.Authorization = token
        state.action = baseURL + row.url
        state.modelUrl = baseURL + row.modelUrl //模版地址
        state.modelName = row.name //模版名称
        state.dialogFormVisible = true
      }
      const close = () => {
        state.fileList = []
        state.dialogFormVisible = false
      }
      //文件上传失败
      const handleError = () => {
        $baseMessage('数据导入失败', 'error', 'vab-hey-message-danger')
      }
      //移除已上传文件
      const handleRemove = () => {
        state.form.resource_id = ''
      }
      //文件上传成功
      const handleSuccess = (res) => {
        // state.form.resource_id = res.data.id
        $baseMessage(res.msg, 'success', 'vab-hey-message-success')
        emit('fetch-data')
        close()
      }

      const batchImport = async () => {
        // if (!state.form.resource_id) {
        //   $baseMessage('上传需要导入的文件', 'error', 'vab-hey-message-error')
        //   return
        // }
        // const url = state.apiUrl

        // const { message } = await accountImport(url, state.form)
        // $baseMessage(message, 'success', 'vab-hey-message-success')
        state['upload'].submit()
      }
      onMounted(() => {})
      return {
        ...toRefs(state),
        showEdit,
        close,
        batchImport,
        handleError,
        handleRemove,
        handleSuccess,
      }
    },
  })
</script>

<style lang="scss" scoped>
  .vab-tree-border {
    width: 100%;
    height: 250px;
    padding: $base-padding;
    overflow-y: auto;
    border: 1px solid #dcdfe6;
    border-radius: $base-border-radius;
  }
  .upload {
    display: flex;
    .model {
      margin-left: 15px;
    }
  }
</style>