|
|
@@ -1,141 +1,56 @@
|
|
|
<template>
|
|
|
<!-- 目标展板 -->
|
|
|
<div class="app-container" style="overflow-y: scroll">
|
|
|
- <el-form
|
|
|
- ref="formRef"
|
|
|
- size="small"
|
|
|
- :model="form"
|
|
|
- :rules="rules"
|
|
|
- :inline="true"
|
|
|
- hide-required-asterisk
|
|
|
- >
|
|
|
- <el-form-item label="日期" prop="reportYear">
|
|
|
- <el-date-picker
|
|
|
- v-model="form.reportYear"
|
|
|
- type="year"
|
|
|
- format="yyyy"
|
|
|
- value-format="yyyy"
|
|
|
- placeholder="选择年"
|
|
|
- :clearable="false"
|
|
|
- >
|
|
|
- </el-date-picker>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item label="">
|
|
|
- <el-upload
|
|
|
- class="upload-demo"
|
|
|
- ref="upload"
|
|
|
- accept=".xls,.xlsx"
|
|
|
- :limit="1"
|
|
|
- :multiple="false"
|
|
|
- action="#"
|
|
|
- :on-preview="handlePreview"
|
|
|
- :on-remove="handleRemove"
|
|
|
- :file-list="fileList"
|
|
|
- :on-change="handleChange"
|
|
|
- :before-upload="beforeUpload"
|
|
|
- :http-request="uploadHttpRequest"
|
|
|
- :auto-upload="false"
|
|
|
+ <el-row>
|
|
|
+ <el-col :span="1.5">
|
|
|
+ <el-button
|
|
|
+ type="warning"
|
|
|
+ plain
|
|
|
+ icon="el-icon-download"
|
|
|
+ size="mini"
|
|
|
+ @click="handleExport"
|
|
|
+ >导出模版</el-button
|
|
|
>
|
|
|
- <el-button slot="trigger" size="mini" plain type="primary"
|
|
|
- >选取文件</el-button
|
|
|
- >
|
|
|
- </el-upload>
|
|
|
- </el-form-item>
|
|
|
- <el-form-item>
|
|
|
<el-button
|
|
|
type="primary"
|
|
|
icon="el-icon-upload2"
|
|
|
+ plain
|
|
|
size="mini"
|
|
|
- @click="submit"
|
|
|
- :loading="loading"
|
|
|
+ @click="handleImport"
|
|
|
>导入</el-button
|
|
|
>
|
|
|
- </el-form-item>
|
|
|
- </el-form>
|
|
|
+ </el-col>
|
|
|
+ </el-row>
|
|
|
+ <ImportModel ref="importModelRef"></ImportModel>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-import { importF } from "@/api/powerdistribution/power-outage-control";
|
|
|
+import ImportModel from "./components/ImportModel.vue";
|
|
|
export default {
|
|
|
+ components: { ImportModel },
|
|
|
data() {
|
|
|
- return {
|
|
|
- form: {
|
|
|
- reportYear: `${new Date().getFullYear()}`,
|
|
|
- },
|
|
|
- loading: false,
|
|
|
- fileList: [],
|
|
|
- rules: {
|
|
|
- reportYear: [
|
|
|
- { required: true, message: "请选择日期", trigger: "change" },
|
|
|
- ],
|
|
|
- },
|
|
|
- };
|
|
|
+ return {};
|
|
|
},
|
|
|
created() {},
|
|
|
methods: {
|
|
|
- submit() {
|
|
|
- this.$refs.formRef.validate(async (v) => {
|
|
|
- if (!v) return;
|
|
|
- if (!this.fileList.length) {
|
|
|
- this.$message.warning("请选择文件");
|
|
|
- return;
|
|
|
- }
|
|
|
- this.$refs.upload.submit();
|
|
|
- });
|
|
|
+ handleImport() {
|
|
|
+ this.$refs.importModelRef.openModel();
|
|
|
},
|
|
|
- // 文件上传之前的操作
|
|
|
- beforeUpload(file) {
|
|
|
- // 文件类型
|
|
|
- const isType = file.type === "application/vnd.ms-excel";
|
|
|
- const isTypeComputer =
|
|
|
- file.type ===
|
|
|
- "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
|
|
|
- const fileType = isType || isTypeComputer;
|
|
|
- if (!fileType) {
|
|
|
- console.log("上传文件只能是xls/xlsx格式！");
|
|
|
- }
|
|
|
-
|
|
|
- // 文件大小限制为20M
|
|
|
- const fileLimit = file.size / 1024 / 1024 < 20;
|
|
|
- if (!fileLimit) {
|
|
|
- console.log("上传文件大小不超过20M！");
|
|
|
+ async handleExport() {
|
|
|
+ const res = await downloadTemplate();
|
|
|
+ if (res) {
|
|
|
+ const elink = document.createElement("a");
|
|
|
+ elink.download = `停电预设模版.xlsx`;
|
|
|
+ elink.style.display = "none";
|
|
|
+ const blob = new Blob([res], { type: "application/x-msdownload" });
|
|
|
+ elink.href = URL.createObjectURL(blob);
|
|
|
+ document.body.appendChild(elink);
|
|
|
+ elink.click();
|
|
|
+ document.body.removeChild(elink);
|
|
|
+ } else {
|
|
|
+ this.$message.error("导出异常请联系管理员");
|
|
|
}
|
|
|
- // 返回判断条件,false停止上传
|
|
|
- return fileType && fileLimit;
|
|
|
- },
|
|
|
- handleChange(file, fileList) {
|
|
|
- this.fileList = fileList;
|
|
|
- },
|
|
|
- handleRemove(file, fileList) {
|
|
|
- console.log(file, fileList);
|
|
|
- this.fileList = [];
|
|
|
- },
|
|
|
- handlePreview(file) {
|
|
|
- console.log(file);
|
|
|
- },
|
|
|
- // 自定义上传方法，param是默认参数，可以取得file文件信息，具体信息如下图
|
|
|
- uploadHttpRequest(param) {
|
|
|
- this.loading = true;
|
|
|
- let data = new FormData();
|
|
|
- data.append("file", param.file);
|
|
|
- data.append("reportYear", this.form.reportYear);
|
|
|
- importF(data)
|
|
|
- .then((res) => {
|
|
|
- if (res.code == 200) {
|
|
|
- this.$message.success("导入成功");
|
|
|
- } else {
|
|
|
- this.$message.error("导入失败" || res.msg);
|
|
|
- }
|
|
|
- this.$refs.upload.clearFiles();
|
|
|
- this.fileList = [];
|
|
|
- })
|
|
|
- .catch((err) => {
|
|
|
- console.log(err);
|
|
|
- this.$refs.upload.clearFiles();
|
|
|
- this.fileList = [];
|
|
|
- });
|
|
|
- this.loading = false;
|
|
|
},
|
|
|
},
|
|
|
};
|
cfofpp