<template>
|
<span>
|
<el-button type="primary" @click="openimport">导入</el-button>
|
<el-dialog title="导入" v-model="visible" :width="900">
|
<h6><span>1</span>准备数据</h6>
|
<span class="desc">导入的数据个数需小于200,所有允许导入的字段请参考模板;
|
<span class="bolder">字段不符合规则，整条数据不予以导入</span>
|
<span class="more" @click="showDest = !showDest">更多字段导入规则></span>
|
</span>
|
<div class="text-desc" :class="{showDest: showDest}">
|
<ul class="tip">
|
<li>1、员工工号：必填；工号不可重复；支持大小写字母、数字组合；</li>
|
<li>2、员工姓名：必填；如果重名，建议加数字区分，如“张三1”；</li>
|
<li>3、状态：必填；选择在职/离职；</li>
|
<li>4、电话：必填；在本企业内不可重复；</li>
|
<li>5、PIN码：必填；支持4-6位数字；</li>
|
<li>6、岗位：非必填；可以填入多个岗位，以英文逗号‘,’间隔；不可重名；</li>
|
<li>7、邮箱：非必填；邮箱格式校验，比如“***@126.com”；</li>
|
<li>8、部门：非必填；请填写部门完整层级；中间间隔，请用英文符号”-“间隔。如”xx公司-xx部门-xx“</li>
|
<li>9、入职日期：非必填；日期格式“YY-MM-DD”</li>
|
</ul>
|
</div>
|
<div class="exportBtn" @click="exportBtn">下载模板</div>
|
<h6 class="marTop8"><span>2</span>上传数据文件</h6>
|
<div class="uploadBtn">
|
<el-upload class="upload" :action="uploadUrl">
|
<el-button type="primary">上传文件</el-button>
|
</el-upload>
|
<div class="uploadBtn-desc">目前支持的文件类型为.xls,.xlsx</div>
|
</div>
|
<template #footer>
|
<el-button @click="visible=false" >取 消</el-button>
|
</template>
|
</el-dialog>
|
</span>
|
</template>
|
|
<script>
|
export default {
|
data() {
|
return {
|
visible: false,
|
showDest: true
|
}
|
},
|
mounted() {
|
|
},
|
props: {
|
exportUrl: {type: String, default: true },
|
uploadUrl: {type: String, default: true }
|
},
|
methods: {
|
exportBtn() {
|
this.$HTTP.get(this.exportUrl).then(res=> {
|
if(res.code == 200) {
|
window.open(res.data.link);
|
}
|
})
|
},
|
openimport() {
|
this.visible = true;
|
}
|
}
|
}
|
</script>
|
|
<style scoped>
|
.showDest {
|
display: none;
|
}
|
.desc {
|
color: #333;
|
font-size: 14px;
|
padding-left: 25px;
|
}
|
.tip {
|
list-style: none;
|
margin-left: 40px;
|
margin-top: 8px;
|
font-size: 12px;
|
}
|
.desc .bolder {
|
font-weight: bolder;
|
}
|
h6 {
|
font-size: 14px;
|
margin-bottom:8px;
|
}
|
h6 span:nth-child(1) {
|
border-radius: 50%;
|
border: 1px solid;
|
text-align: center;
|
background: #fff;
|
width: 20px;
|
height: 20px;
|
font-size: 14px;
|
display: inline-block;
|
margin-right:8px;
|
}
|
.more {
|
color:#62a5a5;
|
cursor: pointer;
|
}
|
.marTop8 {
|
margin-top: 8px;
|
}
|
.uploadBtn {
|
padding-left: 25px;
|
padding-top: 4px;
|
}
|
.uploadBtn-desc {
|
margin-top:6px;
|
font-size: 12px;
|
}
|
.exportBtn {
|
color: #4f9999;
|
cursor: pointer;
|
margin-left: 40px;
|
margin-top: 8px;
|
}
|
</style>
|
