新增场景信息文件导入功能

riku

2025-08-13 bf42ef43fccdf3d3486eec84ad4073b0c7650aba

 src/views/fysp/scene/CompSceneImport.vue

@@ -1,5 +1,7 @@
<template>
  <el-button disabled icon="Upload" type="success" @click="dialogVisible = true">批量导入</el-button>
  <el-button icon="Upload" type="success" @click="dialogVisible = true"
    >批量导入</el-button
  >
  <el-dialog
    v-model="dialogVisible"
    title="场景信息批量导入"
@@ -9,31 +11,102 @@
    <el-upload
      class="upload-demo"
      drag
      action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15"
      multiple
      :limit="1"
      v-model:file-list="fileList"
      :auto-upload="false"
      accept=".xlsx"
      :on-change="handleChange"
      :on-exceed="handleExceed"
    >
      <el-icon class="el-icon--upload"><upload-filled /></el-icon>
      <div class="el-upload__text">拖动文件或<em>点击上传</em></div>
      <template #tip>
        <!-- <div class="el-upload__tip">jpg/png files with a size less than 500kb</div> -->
        <el-text type="danger" size="small">{{ errMsg }}</el-text>
      </template>
    </el-upload>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="dialogVisible = false">确定</el-button>
      </div>
      <el-row justify="space-between">
        <el-button type="primary" plain @click="downloadTemplate"
          >下载模板</el-button
        >
        <div class="dialog-footer">
          <el-button @click="handleClose">取消</el-button>

          <el-button type="primary" @click="uploadFile" :loading="loading"
            >确定</el-button
          >
        </div>
      </el-row>
    </template>
  </el-dialog>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false
    };
<script setup>
import { ref } from 'vue';
import sceneApi from '@/api/fysp/sceneApi';
import { ElMessage } from 'element-plus';

const dialogVisible = ref(false);
const fileList = ref([]);
const errMsg = ref('');
const loading = ref(false);

function handleChange(file) {
  console.log(file);
  const ext = file.name.split('.').pop();
  if (ext !== 'xlsx') {
    ElMessage.error('请上传Excel文件');
    fileList.value.splice(0, 1);
    return;
  }
};
  fileList.value = [file];
}

function handleExceed(files, fileList) {
  ElMessage.error('最多只能上传一个文件');
}

function uploadFile() {
  if (fileList.value.length === 0) {
    ElMessage.error('请上传文件');
    return;
  }
  const formData = new FormData();
  loading.value = true;
  formData.append('file', fileList.value[0].raw);
  errMsg.value = '';
  sceneApi
    .importScene(formData)
    .then((res) => {
      dialogVisible.value = false;
      fileList.value = [];
    })
    .catch((err) => {
      errMsg.value = err;
    })
    .finally(() => {
      loading.value = false;
    });
}

function downloadTemplate() {
  // 创建下载链接
  const link = document.createElement('a');
  // 设置public目录下的文件路径
  link.href = '/现场监管场景信息导入模板.xlsx';
  // 设置下载文件名
  link.download = '现场监管场景信息导入模板.xlsx';
  // 将链接添加到页面
  document.body.appendChild(link);
  // 触发点击下载
  link.click();
  // 下载完成后移除链接
  document.body.removeChild(link);
}

function handleClose() {
  dialogVisible.value = false;
  fileList.value = [];
  errMsg.value = '';
}
</script>