order-ui-pc/src/views/stock/check/components/resultUplodModel.vue

<template>
  <el-dialog
    v-loading="loading"
    title="导入数据"
    :center="true"
    align="left"
    top="5vh"
    width="1040px"
    :close-on-click-modal="false"
    :visible.sync="showModelThis"
    element-loading-text="拼命加载中"
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
    @close="closeModel"
  >
    <el-card style="margin: -20px">
      <el-row :gutter="10" style="height: 550px">
        <el-col :span="24">
          <upload-excel
            :on-success="handleSuccess"
            :before-upload="beforeUpload"
          />
          <el-table
            :data="tableData"
            size="mini"
            border
            max-height="400px"
            highlight-current-row
            style="width: 100%; margin-top: 20px"
          >
            <el-table-column
              show-overflow-tooltip
              v-for="(item, index) in columns"
              :key="item.prop + index"
              :prop="item.prop"
              :label="item.label"
              min-width="96px"
            />
          </el-table>
        </el-col>
        <el-col :span="24" style="text-align: right; margin: 15px 0 0 0">
          <el-button v-if="!isDetail" type="primary" @click="submitForm"
            >保 存
          </el-button>
          <el-button @click="showModelThis = false">{{
            isDetail ? "关 闭" : "取 消"
          }}</el-button>
        </el-col>
      </el-row>
    </el-card>
  </el-dialog>
</template>
<script>
import urlConfig from "@/apis/url-config";
import { getToken } from "@/utils/auth";
import resToken from "@/mixins/resToken";
import asyncRequest from "@/apis/service/stock/check/detail";
export default {
  name: "resultUplodModel",
  props: ["showModel",'id'],
  mixins: [resToken],
  data() {
    return {
      imgAPI: urlConfig.baseURL,
      loading: false,
      length: 0,
      showModelThis: this.showModel,
      isfile: false,
      head: [
        "商品编码",
        "商品属性编码",
        "商品名称",
        "商品描述",
        "品牌",
        "单位",
        "供应商编码",
        "供应商名称",
        "一级分类",
        "二级分类",
        "三级分类",
        "新建时间",
        "仓库编码",
        "仓库名称",
        "可用库存",
        "盘点库存",
      ],
      tableData: [],
      ruleForm: {
        execl: "",
      },
      rules: {
        execl: [
          {
            required: true,
            message: "请选择文件",
            trigger: "change",
          },
        ],
      },
      columns: [],
    };
  },
  watch: {
    showModel: function (val) {
      this.showModelThis = val;
      if (val) {
        this.initForm();
      }
    },
    showModelThis(val) {
      if (!val) {
        this.$emit("cancel");
      }
    },
  },
  methods: {
    closeModel() {
      console.log("closeModel!!");
    },
    async initForm() {
      this.loading = true;
      console.log(this.id);
      this.isfile = false;
      this.tableData = [];
      this.columns = [];
      this.head.forEach((v, i) => {
        let model = {
          prop: "value" + i,
          label: v,
        };
        this.columns.push(model);
      });
      this.loading = false;
    },

    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1;
      if (isLt1M) {
        return true;
      }
      this.$message({
        message: "请不要上传大于1MB的文件.",
        type: "warning",
      });
      return false;
    },
    handleSuccess({ results, header }) {
      this.length = 0;
      if (this.head.length !== header.length) {
        this.$message.error("表头与导入模板不匹配！");
        return;
      }
      let isok = true;
      this.head.forEach((v, i) => {
        if (v !== header[i]) {
          isok = false;
        }
      });
      if (!isok) {
        this.$message.error("表头与导入模板不匹配！");
        return;
      }
      this.length = header.length;
      this.tableHeader = header;
      let list = results;
      this.tableData = [];

      list.forEach((v1) => {
        let b = Object.values(v1);
        let model = {};
        for (let i = 0; i < b.length; i++) {
          model["value" + i] = b[i];
        }
        this.tableData.push(model);
      });
    },
    async submitForm() {
 
          if (!this.loading) {
            this.loading = true;
            let model = {
              id: this.id,
              data: this.tableData,
            };
            const res = await asyncRequest.checkimport(model);
            if (res && res.code === 0) {
              this.$notify.success({
                title: "盘点数据提交成功！",
                message: "",
              });
            } else if (res && res.code >= 100 && res.code <= 104) {
              await this.logout();
            } else {
              this.$message.warning(res.message);
            }
          }
    },
  },
};
</script>

   <style lang="scss" scoped>
.checkDetail {
  .excelUploadBox {
    position: relative;
    width: 100%;
    height: 120px;
    line-height: 120px;
    box-sizing: border-box;
    &:hover {
      cursor: pointer;
    }
    .el-icon-receiving {
      width: 100%;
      text-align: center;
      height: 50px;
      display: block;
      font-size: 32px;
      line-height: 90px;
      color: #d3d4d6;
    }
    .boxM {
      width: 100%;
      display: block;
      text-align: center;
      line-height: 65px;
      height: 60px;
      color: #909399;
    }
  }
  .excelUpload {
    top: 0;
    left: 0;
    position: absolute;
    z-index: 2;
    width: 100%;
    height: 120px;
    line-height: 120px;
    box-sizing: border-box;
    // opacity: 0!important;
    //     .excel-upload-input {
    //   top: 0 !important;
    //   left: 0 !important;

    //   position: absolute !important;
    //   z-index: 2 !important;
    //   width: 100% !important;
    //   height: 120px !important;
    //   line-height: 120px !important;
    //   box-sizing: border-box !important;
    // }
  }

  .excelUploadRes {
    width: 100%;
    height: 120px;
    line-height: 120px;
    box-sizing: border-box;
    i {
      width: 55px;
      height: 120px;
      line-height: 120px;
      text-align: center;
      font-size: 20px;
      &.fl {
        padding-left: 16px;
      }
      &.fr {
        padding-right: 16px;
        &:hover {
          cursor: pointer;
        }
      }
    }
    span {
      width: 386px;
      line-height: 16px;
      margin: 52px 0 0 0;
      font-size: 16px;
    }
  }
}
</style>