luoshan_web/library/components/BatchImport/index.vue

<!--
 * @FilePath: index.vue
 * @Author: 旭颖
 * @Date: 2023-02-03 11:12:51
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2023-04-29 22:55:58
-->
<!--批量导入-->
<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 label="文件模版类型" prop="type">
          <el-select
            v-model="form.type"
            placeholder="请选择文件导入模版类型"
            style="width: 100%"
            @change="changeType"
          >
            <el-option
              v-for="item in typeList"
              :key="item.id"
              :label="item.name"
              :value="item.id"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="文件名称" prop="name">
          <el-input v-model="form.name" placeholder="请输入文件名称" />
        </el-form-item>
        <el-form-item>
          <div style="width: 100%">
            <el-upload
              accept=".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>
        </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 { accountImport, trmplateOptions } 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: '', //模版名称
        form: {
          name: '',
          type: 1,
          resource_id: '',
          status: 1,
        },
        title: '',
        dialogFormVisible: false,
        apiUrl: '',
        rules: {
          name: [
            { required: true, trigger: 'blur', message: '请输入文件名称' },
          ],
          type: [
            {
              required: true,
              trigger: 'change',
              message: '请选择文件导入模版类型',
            },
          ],
        },
        typeList: [
          {
            id: '',
            name: '标准模版',
          },
          {
            id: '',
            name: '信访投诉导入模版',
          },
          {
            id: '',
            name: '市12345投诉导入末班',
          },
        ], //类型列表
      })
      const templateOptionsList = async () => {
        const { data } = await trmplateOptions()
        state.typeList = data
      }
      //选择上传文件末班类型
      const changeType = (e) => {
        state.typeList.map((item) => {
          if (item.id == e) {
            state.type = e
            state.modelName = item.name
            state.modelUrl = item.url
          }
        })
      }
      const showEdit = (row) => {
        const userStore = useUserStore()
        templateOptionsList()
        const { token } = userStore
        state.header.Authorization = token
        state.action = `${baseURL}/base/resource/upload`
        state.modelUrl = fileUrl + row.modelUrl //模版地址
        state.modelName = row.name //模版名称
        state.uploadData.dir = row.dirName
        state.apiUrl = row.url
        state.dialogFormVisible = true
      }
      const close = () => {
        state.form={
          name: '',
          type: 1,
          resource_id: '',
          status: 1,
        }
        state.fileList = []
        state.dialogFormVisible = false
      }
      //文件上传失败
      const handleError = () => {
        $baseMessage('文件上传失败', 'danger', 'vab-hey-message-danger')
      }
      //移除已上传文件
      const handleRemove = () => {
        state.form.resource_id = ''
      }
      //文件上传成功
      const handleSuccess = (res) => {
        state.form.resource_id = res.data.id
      }

      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')
        emit('fetch-data')
        close()
      }
      onMounted(() => {})
      return {
        ...toRefs(state),
        showEdit,
        close,
        batchImport,
        handleError,
        handleRemove,
        changeType,
        templateOptionsList,
        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>