<template>
|
<el-dialog
|
:title="'导入' + importFileConfig.title"
|
:visible.sync="editConfig.visible"
|
:width="dialogWidth"
|
:before-close="handleClose"
|
:append-to-body="true"
|
>
|
<div class="import-body-bg">
|
<el-steps :active="1">
|
<el-step title="上传文件"></el-step>
|
<el-step title="映射字段"></el-step>
|
<el-step title="导入数据"></el-step>
|
<el-step title="完成"></el-step>
|
</el-steps>
|
<div class="step">
|
<div>1.请按照数据模板的格式准备要导入的数据</div>
|
<el-button type="text" size="mini">下载数据模板</el-button>
|
<div class="note">{{ "查看注意事项>>" }}</div>
|
</div>
|
<div class="step">
|
<div>{{ "2.请设置" + editConfig.title + "查重字段" }}</div>
|
<el-select v-model="setValue" size="mini">
|
<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"> </el-option>
|
</el-select>
|
<el-select v-model="maybe" class="maybe-view" size="mini">
|
<el-option v-for="item in maybeOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
<i class="el-icon-delete" title="删除" @click="deleteClick"></i>
|
<div>
|
<el-button type="info" size="mini" plain>新条件</el-button>
|
</div>
|
</div>
|
<div class="step">
|
<div>{{ "3.请设置" + editConfig.title + "重复时导入方式" }}</div>
|
<el-select v-model="importMethod" size="mini">
|
<el-option v-for="item in importMethodOptions" :key="item.value" :label="item.label" :value="item.value">
|
</el-option>
|
</el-select>
|
</div>
|
<div class="step">
|
<div>4.请选择需要导入的文件（请使用系统导出的Excel模板）</div>
|
<el-button type="info" size="mini" plain>添加文件</el-button>
|
<div class="note">
|
{{ "支持文件类型：.xls/.xlsx，不支持WPS格式（但是，可以在WPS中编辑后另存为*.xls格式再导入）" }}
|
</div>
|
</div>
|
</div>
|
|
<div slot="footer">
|
<el-button type="primary" size="small" @click="editConfig.visible = false">下一步</el-button>
|
</div>
|
</el-dialog>
|
</template>
|
|
<script>
|
export default {
|
name: "EditImportFileDialog",
|
props: {
|
importFileConfig: {
|
type: Object,
|
default: () => {
|
return {
|
visible: false,
|
title: "",
|
infomation: {
|
name: "",
|
color: "",
|
setDefault: ""
|
}
|
}
|
}
|
}
|
},
|
components: {},
|
computed: {},
|
data() {
|
return {
|
dialogWidth: "45%",
|
editConfig: this.importFileConfig,
|
setValue: "联系人姓名",
|
options: [],
|
maybe: "或",
|
maybeOptions: [],
|
importMethod: "跳过",
|
importMethodOptions: []
|
}
|
},
|
created() {},
|
methods: {
|
handleClose() {
|
this.editConfig.visible = false
|
},
|
deleteClick() {}
|
}
|
}
|
</script>
|
|
<!-- Add "scoped" attribute to limit CSS to this component only -->
|
<style lang="scss" scoped>
|
.import-body-bg {
|
margin: 20px 40px;
|
.step {
|
margin-top: 10px;
|
.note,
|
.el-button,
|
.el-select {
|
margin-left: 20px;
|
font-size: 12px;
|
margin-top: 10px;
|
}
|
.maybe-view {
|
width: 60px;
|
margin-right: 20px;
|
}
|
}
|
}
|
::v-deep {
|
.el-step__icon,
|
.el-step__title {
|
font-size: 13px;
|
}
|
}
|
</style>
|
