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
129
130
131
 
<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 slot="footer" class="dialog-footer">
      <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">确认导入</el-button>
      <el-button @click="currentVisible = false">取 消</el-button>
      <el-button class="download" type="text" @click="downloadhttp">点击下载导入模板</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",
      Outer_Id: 0
    };
  },
  computed: {
    currentVisible: {
      get: function() {
        return this.visible;
      },
      set: function(val) {
        this.$emit("update:visible", val);
      }
    }
  },
  methods: {
    // 接受其他入库单主表id信息
    showData(Outer_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 the = this;
      const url = the.common.domain + "/api/Storage_Outer/UploadImport";
      return url;
    },
    // 文件上传成功返回文件保存路径
    handleXlsxSuccess(res, file) {
      this.fullFileRote = res.data.Url;
    },
    // 文件上传
    submitUpload() {
      this.msg = "";
      const the = this;
      let url = "";
      // 其他出库信息导入
      if (the.ImportType === "tab-0") {
        url = "/api/Storage_Outer/ImportOuterExel";
      }
      const params = {
        Url: the.fullFileRote
      };
      var callback = res => {
        if (res.result) {
          this.msg = res.Msg;
          this.reload();
        } else {
          this.msg = "<font color='red'>" + res.Msg + "</font>";
        }
      };
      the.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>