You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
594 lines
15 KiB
594 lines
15 KiB
<template>
|
|
<el-dialog
|
|
:visible="show"
|
|
:title="'导入' + crmTypeName"
|
|
:append-to-body="true"
|
|
:close-on-click-modal="false"
|
|
width="600px"
|
|
@close="closeView"
|
|
>
|
|
<div class="dialog-body">
|
|
<div v-if="stepsActive == 1" class="step-section">
|
|
<div class="sections">
|
|
<div class="sections__title" v-loading="loading">
|
|
一、导入说明：
|
|
<div class="sections__tips">
|
|
1、提供的导入模板需要文本格式，即.txt文件格式！
|
|
</div>
|
|
<div class="sections__tips">
|
|
2、请勿删除模板中设置的字段！
|
|
</div>
|
|
<div class="sections__tips">3、导入文件大小请勿超过100MB！</div>
|
|
</div>
|
|
</div>
|
|
<div class="sections">
|
|
<div class="sections__title">
|
|
二、导入条件设置（年、月，工厂，无则不用设置）。
|
|
</div>
|
|
<div class="sections__tips">
|
|
<span class="demonstration">选择年份：</span>
|
|
<el-date-picker
|
|
v-model="yeareVale"
|
|
style="width: 188px"
|
|
type="year"
|
|
format="yyyy 年"
|
|
value-format="yyyy"
|
|
placeholder="选择年"
|
|
>
|
|
</el-date-picker>
|
|
<span class="demonstration">选择月份：</span>
|
|
<el-date-picker
|
|
v-model="monthVale"
|
|
style="width: 188px"
|
|
type="month"
|
|
format=" MM 月"
|
|
value-format="MM"
|
|
placeholder="选择月"
|
|
>
|
|
</el-date-picker>
|
|
</div>
|
|
<div class="sections__tips">
|
|
<span class="demonstration">选择工厂：</span>
|
|
<el-select
|
|
v-model="selectValue"
|
|
clearable
|
|
style="width: 188px"
|
|
placeholder="请选择"
|
|
>
|
|
<el-option
|
|
v-for="item in factoryList"
|
|
:key="item.value"
|
|
:label="item.label"
|
|
:value="item.value"
|
|
></el-option>
|
|
</el-select>
|
|
</div>
|
|
</div>
|
|
<div class="sections">
|
|
<div class="sections__title">三、请选择需要导入的文件</div>
|
|
<div class="content">
|
|
<flexbox class="file-select">
|
|
<el-upload
|
|
ref="upload"
|
|
class="avatar-uploader"
|
|
drag
|
|
action="#"
|
|
:http-request="httpRequestfiles"
|
|
:headers="httpHeader"
|
|
:file-list="fileuploadList"
|
|
:before-upload="beforeAvatarUpload"
|
|
:before-remove="beforeRemove"
|
|
:on-remove="handleRemove"
|
|
multiple
|
|
:limit="1"
|
|
>
|
|
<i class="el-icon-upload"></i>
|
|
<div class="el-upload__text">
|
|
将文件拖到此处，或
|
|
<em>点击上传</em>
|
|
</div>
|
|
</el-upload>
|
|
</flexbox>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-loading="loading"
|
|
v-else-if="stepsActive == 2"
|
|
element-loading-text="数据导入中,请耐心等待..."
|
|
element-loading-spinner="el-icon-loading"
|
|
class="step-section"
|
|
/>
|
|
|
|
<div
|
|
v-loading="loading"
|
|
v-else-if="stepsActive == 3"
|
|
class="step-section"
|
|
>
|
|
<div class="result-info">
|
|
<el-card style="height: 300px; margin-top: -20px" shadow="always">
|
|
<i class="wk wk-success result-info__icon" />
|
|
<p class="result-info__detail">
|
|
导入成功数据：
|
|
<span class="result-info__detail--all"
|
|
>{{ this.resultData.totalSize }} </span
|
|
>条有效数据！
|
|
</p>
|
|
</el-card>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<span slot="footer" class="dialog-footer">
|
|
<el-popover
|
|
v-model="historyPopoverShow"
|
|
placement="top"
|
|
width="800"
|
|
popper-class="no-padding-popover"
|
|
trigger="click"
|
|
>
|
|
</el-popover>
|
|
|
|
<!-- <el-button @click="closeView">取消</el-button> -->
|
|
<el-button :class="{ 'is-hidden': !showCancel }" @click="closeView"
|
|
>取消</el-button
|
|
>
|
|
<el-button v-if="sureTitle" type="primary" @click="sureClick">{{
|
|
sureTitle
|
|
}}</el-button>
|
|
</span>
|
|
</el-dialog>
|
|
</template>
|
|
|
|
<script>
|
|
import { downloadFile } from "@/utils/crmindex.js";
|
|
import { getToken } from "@/utils/auth"; // get token from cookie
|
|
|
|
export default {
|
|
name: "CRMImport", // 文件导入
|
|
props: {
|
|
show: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// CRM类型
|
|
crmType: {
|
|
type: String,
|
|
default: "",
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
loading: false,
|
|
fieldList: [],
|
|
factoryList: [], //工厂列表
|
|
selectValue: [], //工厂选择项
|
|
config: 1, // 1 覆盖，2跳过
|
|
//file: { name: "" },
|
|
page: 1,
|
|
listQuery: {
|
|
Filters: [
|
|
{
|
|
logic: 0,
|
|
column: "description",
|
|
action: 0,
|
|
value: "工厂",
|
|
}, //默认查询可用的
|
|
],
|
|
SkipCount: 0,
|
|
MaxResultCount: 1000,
|
|
},
|
|
|
|
stepsActive: 1,
|
|
stepList: [
|
|
{
|
|
icon: "wk wk-upload",
|
|
title: "上传文件",
|
|
status: "wait",
|
|
},
|
|
{
|
|
icon: "wk wk-data-import",
|
|
title: "导入数据",
|
|
status: "wait",
|
|
},
|
|
{
|
|
icon: "wk wk-success",
|
|
title: "导入完成",
|
|
status: "wait",
|
|
},
|
|
],
|
|
//resultData: null,
|
|
resultData: {
|
|
totalSize: 0,
|
|
errSize: 0,
|
|
errTemplate: "",
|
|
errMessage: "",
|
|
},
|
|
processData: {
|
|
count: 0,
|
|
status: "",
|
|
},
|
|
messageId: null,
|
|
intervalTimer: null,
|
|
fileuploadList: [],
|
|
isLt2M: "",
|
|
isFileType: "",
|
|
historyPopoverShow: false,
|
|
yeareVale: "",
|
|
monthVale: "",
|
|
};
|
|
},
|
|
computed: {
|
|
sureTitle() {
|
|
return {
|
|
1: "立即导入",
|
|
2: "最小化",
|
|
3: "确定",
|
|
}[this.stepsActive];
|
|
},
|
|
showCancel() {
|
|
return this.stepsActive != 2;
|
|
},
|
|
crmTypeName() {
|
|
return (
|
|
{
|
|
fis: "FIS发运数据",
|
|
materialRelation: "零件匹配关系",
|
|
material: "物料主数据",
|
|
inventorydetail: "库存明细",
|
|
codeSetting: "通用代码设置",
|
|
estimatedSum: "应付暂估汇总",
|
|
estimatedInventoryDetail: "应付暂估收货明细",
|
|
}[this.crmType] || ""
|
|
);
|
|
},
|
|
getWebApi() {
|
|
return (
|
|
{
|
|
fis: "/api/settleaccount/FIS/ExcelImport",
|
|
materialRelation: "/api/settleaccount/materialRelation/ExcelImport",
|
|
material: "/api/settleaccount/material/ExcelImport",
|
|
inventorydetail: "/api/settleaccount/InventoryDetail/ExcelImport",
|
|
codeSetting: "/api/settleaccount/CodeSetting/ExcelImport",
|
|
estimatedSum: "/api/settleaccount/EstimatedSum/ExcelImport",
|
|
estimatedInventoryDetail:
|
|
"/api/settleaccount/EstimatedInventoryDetail/ExcelImport",
|
|
}[this.crmType] || ""
|
|
);
|
|
},
|
|
httpHeader() {
|
|
//文件上传时，带token认证信息，提高安全性
|
|
return {
|
|
Authorization: "Bearer " + getToken(),
|
|
};
|
|
},
|
|
},
|
|
watch: {
|
|
show: function (val) {
|
|
this.getAllFactory();
|
|
if (val) {
|
|
this.stepsActive = 1;
|
|
} else {
|
|
if (this.stepsActive == 3) {
|
|
//以下是重置数据
|
|
this.stepsActive = 1;
|
|
this.stepList = [
|
|
{
|
|
icon: "wk wk-upload",
|
|
title: "上传文件",
|
|
status: "wait",
|
|
},
|
|
{
|
|
icon: "wk wk-data-import",
|
|
title: "导入数据",
|
|
status: "wait",
|
|
},
|
|
{
|
|
icon: "wk wk-success",
|
|
title: "导入完成",
|
|
status: "wait",
|
|
},
|
|
];
|
|
this.resultData = null;
|
|
}
|
|
}
|
|
},
|
|
|
|
stepsActive() {
|
|
this.$emit(
|
|
"status",
|
|
{
|
|
1: "wait",
|
|
2: "process",
|
|
3: "finish",
|
|
}[this.stepsActive]
|
|
);
|
|
},
|
|
},
|
|
mounted() {},
|
|
methods: {
|
|
getAllFactory() {
|
|
//取工厂列表信息
|
|
this.factoryList = [];
|
|
this.listQuery.SkipCount = (this.page - 1) * 500;
|
|
this.$axios
|
|
.posts("/api/settleaccount/CodeSetting/list", this.listQuery)
|
|
.then((response) => {
|
|
response.items.forEach((element) => {
|
|
let options = {};
|
|
options.value = element.project;
|
|
options.label = element.value;
|
|
this.factoryList.push(options);
|
|
});
|
|
})
|
|
.catch(() => {
|
|
this.listLoading = false;
|
|
});
|
|
},
|
|
handleImportExcelClick() {
|
|
//父组件中，初始化此子组件时调用
|
|
this.fileuploadList = [];
|
|
//this.$refs.upload.clearFiles();
|
|
},
|
|
httpRequestfiles(data) {
|
|
let _this = this;
|
|
let rd = new FileReader(); // 创建文件读取对象
|
|
let file = data.file;
|
|
this.fileuploadList.push(file);
|
|
rd.readAsDataURL(file); // 文件读取装换为base64类型
|
|
},
|
|
beforeAvatarUpload(file) {
|
|
var FileExt = file.name.replace(/.+\./, "");
|
|
if (["txt"].indexOf(FileExt.toLowerCase()) === -1) {
|
|
this.$message({
|
|
type: "warning",
|
|
message: "只支持文本txt类型文件！",
|
|
});
|
|
this.isFileType = "0";
|
|
return false;
|
|
} else {
|
|
this.isFileType = "1";
|
|
}
|
|
this.isLt2M = file.size / 1024 / 1024 < 100 ? "1" : "0";
|
|
if (this.isLt2M === "0") {
|
|
this.$message.error("上传文件大小不能超过 100MB!");
|
|
}
|
|
return this.isLt2M === "1" ? true : false;
|
|
},
|
|
beforeRemove(file, fileList) {
|
|
if (this.isLt2M === "1" && this.isFileType === "1") {
|
|
return this.$confirm(`确定移除 ${file.name}？`);
|
|
}
|
|
},
|
|
handleRemove(file, fileList) {
|
|
//附件列表删除操作
|
|
const index = this.fileuploadList.indexOf(file.originFileObj);
|
|
const newFileList = this.fileuploadList.slice();
|
|
newFileList.splice(index, 1);
|
|
this.fileuploadList = newFileList;
|
|
},
|
|
//执行按钮
|
|
sureClick() {
|
|
if (
|
|
this.fileuploadList === [] ||
|
|
JSON.stringify(this.fileuploadList) === "[]"
|
|
) {
|
|
this.$message.error("请选择导入文件");
|
|
return false;
|
|
}
|
|
if (this.stepsActive == 1) {
|
|
if (this.stepList[0].status == "wait") {
|
|
this.stepsActive = 2;
|
|
this.loading = true;
|
|
setTimeout(() => {
|
|
this.saveTemplateData();
|
|
}, 1000);
|
|
if (this.stepList[1].status == "finish") {
|
|
}
|
|
} else {
|
|
if (this.fileuploadList === "[]") {
|
|
this.$message.error("请选择导入文件");
|
|
}
|
|
}
|
|
} else {
|
|
this.closeView();
|
|
}
|
|
},
|
|
|
|
saveTemplateData() {
|
|
//保存项目、合同管理、客户等信息的共用方法
|
|
//--上传附件，批量或拖拽
|
|
if (JSON.stringify(this.fileuploadList) != "[]") {
|
|
let fd = new FormData();
|
|
const { fileuploadList } = this;
|
|
fileuploadList.forEach((file) => {
|
|
fd.append("files", file); // 添加文件
|
|
});
|
|
fd.append("yeareVale", this.yeareVale);
|
|
fd.append("monthVale", this.monthVale);
|
|
const webapi = this.getWebApi;
|
|
this.$axios
|
|
.posts(webapi, fd)
|
|
.then((res) => {
|
|
//此处，导出模板上设置的错误
|
|
this.loading = false;
|
|
this.resultData = res;
|
|
this.stepList[1].status = "finish";
|
|
this.resultData.totalSize = res.length; //返回导入成功的数据总数
|
|
if (
|
|
this.isLt2M === "1" &&
|
|
this.isFileType === "1" &&
|
|
res.totalSize > 0
|
|
) {
|
|
this.$notify({
|
|
title: "成功",
|
|
message: "数据导入成功！",
|
|
type: "success",
|
|
duration: 2000,
|
|
});
|
|
}
|
|
this.stepsActive = 3;
|
|
this.$emit("status", "finish");
|
|
})
|
|
.catch(() => {
|
|
this.loading = false;
|
|
});
|
|
} else {
|
|
this.loading = false;
|
|
this.$message({
|
|
message: "未上传任何附件，请查检！",
|
|
type: "warning",
|
|
});
|
|
}
|
|
},
|
|
// 关闭操作
|
|
closeView() {
|
|
this.$emit("update:show", false);
|
|
this.$emit("close", this.stepsActive == 3 ? "finish" : "");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style scoped lang="scss">
|
|
@import "@/styles/xr-theme.scss";
|
|
.el-steps {
|
|
margin-bottom: 15px;
|
|
|
|
/deep/ .el-step__title {
|
|
font-size: 14px;
|
|
}
|
|
|
|
/deep/ .el-step.is-simple .el-step__arrow::before,
|
|
/deep/ .el-step.is-simple .el-step__arrow::after {
|
|
height: 10px;
|
|
width: 2px;
|
|
}
|
|
|
|
/deep/ .el-step.is-simple .el-step__arrow::after {
|
|
transform: rotate(45deg) translateY(3px);
|
|
}
|
|
/deep/ .el-step.is-simple .el-step__arrow::before {
|
|
transform: rotate(-45deg) translateY(-2px);
|
|
}
|
|
}
|
|
|
|
.step-section {
|
|
min-height: 300px;
|
|
|
|
/deep/ .el-loading-spinner {
|
|
top: 45%;
|
|
.el-icon-loading {
|
|
font-size: 40px;
|
|
color: #999;
|
|
}
|
|
|
|
.el-loading-text {
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
|
|
.sections {
|
|
font-size: 14px;
|
|
color: #333;
|
|
|
|
&__title {
|
|
font-weight: 600;
|
|
}
|
|
|
|
&__tips {
|
|
padding-left: 30px;
|
|
margin: 8px 0 15px;
|
|
color: #999;
|
|
font-size: 12px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.download {
|
|
cursor: pointer;
|
|
color: #2362fb;
|
|
}
|
|
}
|
|
|
|
.sections__tips + .content {
|
|
padding-top: 0;
|
|
}
|
|
|
|
.content {
|
|
padding: 10px 10px 10px 30px;
|
|
.el-select {
|
|
width: 400px;
|
|
}
|
|
.user-cell {
|
|
width: 400px;
|
|
}
|
|
}
|
|
|
|
#importInputFile {
|
|
display: none;
|
|
}
|
|
|
|
.file-select {
|
|
.el-input {
|
|
width: 400px;
|
|
}
|
|
button {
|
|
margin-left: 20px;
|
|
}
|
|
}
|
|
|
|
.is-hidden {
|
|
visibility: hidden;
|
|
}
|
|
|
|
.history-btn {
|
|
float: left;
|
|
margin-left: 15px;
|
|
}
|
|
|
|
// 结果信息
|
|
.result-info {
|
|
text-align: center;
|
|
padding-top: 50px;
|
|
|
|
&__icon {
|
|
font-size: 40px;
|
|
color: $xr-color-primary;
|
|
}
|
|
|
|
&__des {
|
|
margin-top: -15px;
|
|
color: #333;
|
|
font-size: 30px;
|
|
}
|
|
|
|
&__detail {
|
|
margin-top: 35px;
|
|
font-size: 20px;
|
|
color: #666;
|
|
&--all {
|
|
color: #333;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&--suc {
|
|
color: $xr-color-primary;
|
|
font-weight: 600;
|
|
}
|
|
|
|
&--err {
|
|
margin-top: 25px;
|
|
color: #f94e4e;
|
|
font-weight: 600;
|
|
}
|
|
}
|
|
|
|
&__btn--err {
|
|
margin-top: 10px;
|
|
font-size: 20px;
|
|
}
|
|
}
|
|
</style>
|
|
|
|
|
|
|
|
|