performance-test/src/views/ledger/component/windsitetolead.vue

<template>
  <div>
    <el-dialog
      title="导入文件"
      :visible.sync="localtolead"
      width="400px"
      @close="handleClose"
    >
      <el-alert title="请点击模板下载文件附件" type="success" :closable="false">
      </el-alert>
      <p class="model-center" @click="download">模板下载</p>
      <div class="UPcondition">
        <p>所属公司:</p>
        <selecttree
          placeholder="请选择所属公司"
          :list="parentOptdata"
          v-model="companyCode"
          @change="parentChange"
        >
        </selecttree>
      </div>

      <el-upload
        class="upload-demo"
        :file-list="fileList"
        drag
        action
        :multiple="false"
        :before-upload="beforeUpload"
        :limit="1"
        :auto-upload="false"
        :on-change="handleOnChange"
        accept=".xlsx"
      >
        <i class="el-icon-upload"></i>
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div class="el-upload__tip" slot="tip">
          只能上传xlsx文件，且不超过5MB
        </div>
      </el-upload>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="filesubmit" size="small"
          >提交</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
import selecttree from "../../../components/selecttree.vue";
import { windFieldImportData } from "@/api/ledger.js";
export default {
  components: {
    selecttree,
  },

  props: {
    tolead: {
      type: Boolean,
      default: false,
    },
    parentOptdata: {
      type: Array,
      default: () => [],
    },
    AllTemplateurl: {
      type: Object,
      default: () => {},
    },
  },
  computed: {
    localtolead: {
      get() {
        console.log(this.tolead);
        return this.tolead;
      },
      set(value) {
        // 在这里不进行任何修改
      },
    },
  },
  data() {
    return {
      companyCode: "",
      superior: "",
      superiorOptions: [],
      fileList: [],
    };
  },

  methods: {
    rowStyle() {
      return "text-align:center";
    },

    // 下载附件
    download() {
      if (this.AllTemplateurl.field) {
        const link = document.createElement("a");
        link.href = this.AllTemplateurl.field;
        link.download = ""; // 可以设置默认下载文件名
        link.target = "_blank"; // 新窗口打开
        document.body.appendChild(link);
        link.click();
        document.body.removeChild(link);
      } else {
        console.error("URL is not set");
      }
    },

    handleClose() {
      console.log(111);
      this.companyCode = "";
      this.fileList = [];
      this.globalFileList = null;
      this.localtolead = false;
      this.$emit("handleClose", false, "tolead");
    },
    // 附件提交
    filesubmit() {
      let filedata = {
        companyCode: this.companyCode,
        file: this.globalFileList,
      };
      if (
        !this.companyCode ||
        this.companyCode === "" ||
        this.companyCode === undefined
      ) {
        this.$message({
          message: "请选择所属公司",
          type: "warning",
        });
        return;
      }
      if (filedata.file == undefined) {
        this.$message({
          message: "请先上传附件",
          type: "warning",
        });
        return;
      }
      windFieldImportData(filedata)
        .then((res) => {
          if (res.code === -1) {
            // Assuming -1 indicates success, adjust according to actual API response
            this.$message.error(" 上传失败 ");
          } else {
            this.$message.success("上传成功");
          }
          this.companyCode = "";
          this.$emit("handleClose", false, "tolead");
          this.$emit("onSubmit");
        })
        .catch((error) => {
          // this.$message.error("上传失败");
          // console.error(error);
          // this.$emit("handleClose", false, "tolead");
          // this.$emit("onSubmit");
        });
    },

    parentChange(data) {
      //data为当前选中对象`
      console.log(data);
    },
    // 附件验证
    beforeUpload(fileList) {
      const isXLSX =
        fileList.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      if (!isXLSX) {
        this.$message.error("只能上传xlsx文件");
      }
      const isLt5MB = fileList.size / 1024 / 1024 < 5;
      if (!isLt5MB) {
        this.$message.error("文件大小不能超过5MB");
      }
      console.log(fileList, "fileList");
      return isXLSX && isLt5MB;
    },
    handleOnChange(fileList) {
      console.log(fileList);
      this.globalFileList = fileList.raw;
    },
  },
};
</script>

<style lang="scss" scoped>
.UPcondition {
  display: flex;
  margin-bottom: 10px;

  p {
    width: 74px;
    text-align: right;
    line-height: 40px;
  }

  .el-select {
    width: 100%;
    margin-bottom: 20px;
  }

  .el-input {
    margin-bottom: 20px;
  }
}

.model-center {
  color: #409eff;
  cursor: pointer;
  line-height: 40px;
  height: 40px;
  font-size: 14px;
}
</style>