批量导入

zhouwx

2024-09-06 d098e2e3a16837ad0a61c1a2df93b27c7d16bfd2

 src/views/hazardousChemicals/basicInfon/index.vue

@@ -1,13 +1,22 @@
<template>
  <div class="app-container">
    <div style="display: flex;flex-direction: column">
      <el-button
          type="primary"
          plain
          icon="Plus"
          style="width: 70px;margin-bottom: 10px"
          @click="openDialog('add',{})"
      >新增</el-button>
      <div style="display: flex">
        <el-button
            type="primary"
            plain
            icon="Plus"
            style="width: 70px;margin-bottom: 10px"
            @click="openDialog('add',{})"
        >新增</el-button>
        <el-button
            type="primary"
            plain
            style="width: 80px;margin-bottom: 10px"
            @click="exportData"
        >批量导入</el-button>
      </div>

      <el-form :inline="true" style="display: flex;align-items: center;flex-wrap: wrap;" >
        <el-form-item label="名称：" >
          <el-input v-model="data.queryParams.name" placeholder="请输入危化品名称"></el-input>
@@ -71,7 +80,11 @@
        </template>
      </el-table-column>
      <el-table-column label="含税售价" prop="price" align="center"/>
      <el-table-column label="每箱数量" prop="perBox" align="center"/>
      <el-table-column label="每箱数量" prop="perBox" align="center">
        <template #default="scope">
          <span>{{scope.row.perBox === 0 || scope.row.perBox === null ? '--' : scope.row.perBox}}</span>
        </template>
      </el-table-column>
      <el-table-column label="最小包装类型" prop="minPackage" align="center">
        <template #default="scope">
          <span>{{scope.row.minPackage == 0 ? '瓶' :scope.row.minPackage == 1?'袋':scope.row.minPackage == 2?'桶 ':scope.row.minPackage == 3?'盒':scope.row.minPackage == 4?'箱':'其他'}}</span>
@@ -96,18 +109,60 @@
    />

    <basic-dialog ref="dialogRef" @getList=getList></basic-dialog>
    <el-dialog
        v-model="exportDialog"
        title="批量导入危化品"
        width="500px"
        :before-close="handleClose"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
    >
      <el-form size="default" ref="busRef" label-width="150px" >
        <el-form-item label="危化品表格模板：">
          <el-button type="primary" plain @click="downloadFile">下载模板</el-button>
        </el-form-item>
        <div style="color: #ed5565;margin-left: 20px;margin-top: -8px;margin-bottom: 18px">
          导入危化品基础数据须依据此模板
        </div>
        <el-form-item label="危化品表格文件：">
          <el-upload
              :auto-upload="false"
              action="#"
              :file-list="data.fileList"
              :remove="handleRemove"
              :on-change="handleChange"
              accept=".xlsx,.xls"
              :limit="data.limit"
              style="width: 230px"
          >
            <el-button type="primary"> 点击上传 </el-button>
          </el-upload>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
            <el-button @click="handleClose" size="default">取 消</el-button>
            <el-button type="primary"  @click="onUpload" size="default" v-preReClick>确认</el-button>
        </span>
      </template>


    </el-dialog>

  </div>
</template>

<script setup>
import {getCurrentInstance, onMounted, onUnmounted, reactive, ref, toRefs} from "vue";
import {InfoFilled} from '@element-plus/icons-vue'
import {ElMessage, ElMessageBox} from "element-plus";
import {delCompany, getCompany} from "@/api/hazardousChemicals/company";
import basicDialog from "./components/basicDialog.vue";
import {delBasic, getBasicList} from "@/api/hazardousChemicals/basicInfo";
import {delBasic, exportBasicInfo, getBasicList} from "@/api/hazardousChemicals/basicInfo";
const { proxy } = getCurrentInstance();
const loading = ref(false);
const dialogRef = ref();
const exportDialog = ref(false)
const data = reactive({
  queryParams: {
    pageNum: 1,
@@ -141,7 +196,9 @@
      id:4,
      name: '其他'
    },
  ]
  ],
  fileList: [],
  limit: 1
});

const { queryParams, total, dataList } = toRefs(data);
@@ -203,5 +260,68 @@
      })
}

const exportData = () => {
  exportDialog.value = true
}

const handleClose = () => {
  data.fileList = []
  exportDialog.value = false
}
const downloadFile = () => {
  const link = document.createElement('a')
  link.href = 'files/hazard.xls'
  link.target = '_blank'
  link.download = '危化品基础信息模板.xlsx'
  link.click()
}
const handleRemove = (file) => {
  const index = data.fileList.indexOf(file)
  const newFileList = data.fileList.slice()
  newFileList.splice(index, 1)
  data.fileList = newFileList;
}

const f = ref()
const handleChange = (file,fileList) => {
console.log('file',file)
  let fileExtension = file.name.split('.').pop();
  if(fileExtension == 'xls' || fileExtension == 'xlsx'){
    f.value = file.raw
  }else {
    data.fileList = []
    ElMessage.warning('仅可上传Execl文件')
  }
}
const onUpload = async () => {

  if(!f.value){
    ElMessage.warning('请先上传危化品表格')
    return;
  }else{
    const formData = new FormData();
    formData.append('file', f.value)

    const res = await exportBasicInfo(formData)
    if(res.code == 200){
      ElMessage.success('上传成功')
      data.fileList = []
      exportDialog.value = false
      await getList()
    }else{
      ElMessage.warning(res.message)
    }
  }
}




</script>
<style scoped lang="scss">
.app-container{
  :deep(.el-form .el-form-item__label) {
    font-size: 15px;
  }
}
</style>