schangxiang@126.com
2025-09-19 9be9c3784b2881a3fa25e93ae2033dc2803c0ed0
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
  <el-dialog :visible.sync="currentVisible" title="其他入库导入">
    <el-upload :drag="true" :limit="1" :on-exceed="handleExceed" :action="Uploadxlsx()" :on-success="handleXlsxSuccess" multiple class="upload-demo">
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处,或
        <em>点击上传</em>
      </div>
      <div slot="tip" class="el-upload__tip">只能上传xls、xlsx格式文件,且不超过500kb</div>
    </el-upload>
    <div v-html="msg"></div>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" class="download" @click="downloadhttp">点击下载导入模板</el-button>
      <el-button @click="currentVisible = false">取 消</el-button>
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认导入</el-button>
    </div>
  </el-dialog>
</template>
 
<script>
// multiple 是否支持多选文件
// auto-upload  是否在选取文件后立即上传
// drag 是否启用拖拽
// list-type 文件类型
// show-file-list  是否显示已上传的文件列表
// limit  最大允许上传的个数
// action  参数选择上传的地址
// 文件超出数时限制的钩子
// handlePreview  点击文件列表已上传文件的钩子
// on-remove  文件列表移除文件时的钩子
// http-request  覆盖默认的上传行为,可以自定义上传的实现
export default {
  props: {
    visible: {
      type: Boolean,
      default: false,
      required: true
    }
  },
  data() {
    return {
      tabPosition: "left",
      fullFileRote: null,
      ImportType: "tab-0",
      Enter_Id: 0,
      msg: null
    };
  },
  computed: {
    currentVisible: {
      get: function() {
        return this.visible;
      },
      set: function(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    // 接受其他入库单主表id信息
    showData(Enter_Id) {},
    // 更改导入类型
    fenlei(tab, event) {
      this.ImportType = event.target.getAttribute("id");
    },
    // 导入模板下载
    downloadhttp(authNode) {
      // 其他入库信息导入模板下载
      if (this.ImportType === "tab-0") {
        window.open(this.common.ossDomain + "/node-wms/template/其他入库导入模板.xlsx");
      }
    },
    // 文件上传之前的钩子
    beforeUpload(file) {
      const isText = file.type === "application/vnd.ms-excel";
      const isTextComputer =
        file.type ===
        "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet";
      return isText | isTextComputer;
    },
    // 上传文件个数超过定义的数量
    handleExceed(files, fileList) {
      this.$message.warning("当前限制选择 1 个文件,请删除后继续上传");
    },
    // 上传文件
    Uploadxlsx: function() {
      const url = this.common.domain + "/api/Storage_Enter/UploadImport";
      return url;
    },
    // 文件上传成功返回文件保存路径
    handleXlsxSuccess(res, file) {
      this.fullFileRote = res.data.Url;
    },
    // 文件上传
    submitUpload() {
      this.msg = "";
      let url = "";
      // 其他入库信息导入
      if (this.ImportType === "tab-0") {
        url = "/api/Storage_Enter/ImportEnterExel";
      }
      const params = {
        Url: this.fullFileRote
      };
      var callback = res => {
        if (res.result) {
          this.msg = res.Msg;
          this.reload();
        } else {
          this.msg = "<font color='red'>" + res.Msg + "</font>";
        }
      };
      this.common.ajax(url, params, callback, true);
    },
    reload() {}
  }
};
</script>
 
<style lang="scss" scoped>
.upload-demo {
  text-align: center;
  margin-top: 100px;
}
.download {
  margin: 50px 0px 0px 80px;
  text-decoration: underline;
}
</style>