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

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2023-02-03 11:12:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-05-26 20:42:41
-->
<!--批量导入-->
<template>
  <el-dialog
    v-model="dialogFormVisible"
    :before-close="close"
    title="账号导入"
    width="800px"
  >
    <div>
      <el-upload
        accept=".xls,.xlsx"
        :action="action"
        class="upload-demo"
        :data="uploadData"
        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 class="model">
        <a :download="modelName" :href="modelUrl">
          点击下载模板：{{ modelName }}
        </a>
      </div>
    </div>

    <div class="model">
      <div class="import-msg">
        <p style="margin-bottom: 5px">注意:</p>
        <p>1.请严格按照模板中提供的数据案例格式进行填写；</p>
        <p>2.填写错误可能会导致数据无法导入成功！</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 { accountImport } from './api/index'
  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({
        formRef: null,
        treeRef: null,
        action: '', //上传文件地址
        uploadData: { file_type: 'file', dir: 'account' },
        fileList: [],
        header: {},
        modelUrl: '', //模版地址
        modelName: '', //模版名称
        title: '',
        dialogFormVisible: false,
        resource_id: '',
        apiUrl: '',
        type: -1, //类型供应商导入时需要
      })

      const showEdit = (row) => {
        const userStore = useUserStore()
        const { token } = userStore
        state.header.Authorization = token
        state.action = baseURL + '/base/resource/upload'
        state.modelUrl = fileUrl + row.modelUrl //模版地址
        state.modelName = row.name //模版名称
        state.apiUrl = row.url
        if (row.type) {
          state.type = row.type
        }
        state.dialogFormVisible = true
      }
      const close = () => {
        state.resource_id = ''
        state.fileList = []
        state.dialogFormVisible = false
      }
      //文件上传失败
      const handleError = () => {
        $baseMessage('文件上传失败', 'danger', 'vab-hey-message-danger')
      }
      //移除已上传文件
      const handleRemove = () => {
        state.resource_id = ''
      }
      //文件上传成功
      const handleSuccess = (res) => {
        state.resource_id = res.data.id
      }

      const batchImport = async () => {
        if (!state.resource_id) {
          $baseMessage('上传需要导入的文件', 'error', 'vab-hey-message-error')
          return
        }
        const url = state.apiUrl
        let data = {}
        if (state.type !== -1) {
          data = {
            resource_id: state.resource_id,
            type: state.type,
          }
        } else {
          data = {
            resource_id: state.resource_id,
          }
        }
        const { message } = await accountImport(url, data)
        $baseMessage(message, 'success', 'vab-hey-message-success')
        emit('fetch-data')
        close()
      }
      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>