Excel导入部分

龚焕茏

2024-03-05 6d9e8a35d81e6d1feb2136690661d43c6cfd53b7

Excel导入部分

 src/api/dg/dangerInfo/index.ts

@@ -17,17 +17,15 @@
};

/**
 * 查询安全隐患类型条件
 * @param query
 * @returns {*}
 * 查询安全隐患信息列表
 */

// export const dangerTypes = (): AxiosPromise<String[]> => {
//   return request({
//     url: '/demo/dangerInfo/getDangerType',
//     method: 'get'
//   });
// };
export const getDangerType = (): AxiosPromise<DangerInfoVO[]> => {
  return request({
    url: '/demo/dangerInfo/getDangerType',
    method: 'get'
  });
};

/**
 * 查询安全隐患信息详细

 src/views/dg/danger/index.vue

@@ -139,7 +139,7 @@
</template>

<script setup name="DangerInfo" lang="ts">
import { listDangerInfo, getDangerInfo, delDangerInfo, addDangerInfo, updateDangerInfo } from '@/api/dg/dangerInfo';
import { getDangerType, listDangerInfo, getDangerInfo, delDangerInfo, addDangerInfo, updateDangerInfo } from '@/api/dg/dangerInfo';
import { DangerInfoVO, DangerInfoQuery, DangerInfoForm } from '@/api/dg/dangerInfo/types';
import type { TabsPaneContext, UploadProps, UploadUserFile } from "element-plus";
const fileList = ref<UploadUserFile[]>([])
@@ -183,11 +183,6 @@
  visible: false,
  title: ''
});

const dangerTypes = [
  {
    dangerType: '道路隐患'
  }];

const initFormData: DangerInfoForm = {
  id: undefined,
@@ -257,9 +252,13 @@
  loading.value = false;
}

// 调用后端API获取景区名称列表
const dangerTypes = ref<DangerInfoVO[]>([]);

/** 查询安全隐患类型查询条件 */
const getDangerTypes = async () => {
  // dangerTypes.value = await getDangerTypes();
  const res = await getDangerType();
  dangerTypes.value = res;
}

/** 取消按钮 */

 src/views/scenery/sceneryOperationData/index.vue

@@ -38,6 +38,9 @@
          <el-col :span="1.5">
            <el-button type="warning" plain icon="Download" @click="handleExport" v-hasPermi="['demo:sceneryOperationData:export']">导出</el-button>
          </el-col>
          <el-col :span="1.5">
            <el-button type="info" plain icon="Top" @click="handleImport" v-hasPermi="['demo:sceneryOperationData:importTemplate']">导入</el-button>
          </el-col>
          <right-toolbar v-model:showSearch="showSearch" @queryTable="getList"></right-toolbar>
        </el-row>
      </template>
@@ -129,6 +132,39 @@
        <div class="dialog-footer">
          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 数据导入对话框 -->
    <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body>
      <el-upload
        ref="uploadRef"
        :limit="1"
        accept=".xlsx, .xls"
        :headers="upload.headers"
        :action="upload.url + '?updateSupport=' + upload.updateSupport"
        :disabled="upload.isUploading"
        :on-progress="handleFileUploadProgress"
        :on-success="handleFileSuccess"
        :auto-upload="false"
        drag
      >
        <el-icon class="el-icon--upload">
          <i-ep-upload-filled />
        </el-icon>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <template #tip>
          <div class="text-center el-upload__tip">
            <span>仅允许导入xls、xlsx格式文件。</span>
            <el-link type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
          </div>
        </template>
      </el-upload>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitFileForm">确 定</el-button>
          <el-button @click="upload.open = false">取 消</el-button>
        </div>
      </template>
    </el-dialog>
@@ -358,4 +394,53 @@
  }
}

import { globalHeaders } from "@/utils/request";
/*** 导入参数 */
const upload = reactive<ImportOption>({
  // 是否显示弹出层（导入）
  open: false,
  // 弹出层标题（导入）
  title: "",
  // 是否禁用上传
  isUploading: false,
  // 是否更新已经存在的用户数据
  updateSupport: 0,
  // 设置上传的请求头部
  headers: globalHeaders(),
  // 上传的地址
  url: import.meta.env.VITE_APP_BASE_API + "/demo/sceneryOperationData/importData"
})
/** 下载模板操作 */
const importTemplate = () => {
  proxy?.download("demo/sceneryOperationData/importTemplate", {
  }, `景区运行数据导入模板_${new Date().getTime()}.xlsx`);
}

/** 导入按钮操作 */
const handleImport = () => {
  upload.title = "用户导入";
  upload.open = true;
}

/**文件上传中处理 */
const handleFileUploadProgress = () => {
  upload.isUploading = true;
}

const uploadRef = ref<ElUploadInstance>();

/** 文件上传成功处理 */
const handleFileSuccess = (response: any, file: UploadFile) => {
  upload.open = false;
  upload.isUploading = false;
  uploadRef.value?.handleRemove(file);
  ElMessageBox.alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
  getList();
}

/** 提交上传文件 */
function submitFileForm() {
  uploadRef.value?.submit();
}

</script>