1

lzhe

2024-09-26 7d59e8e2c727dd49d9552a8febc2af47c5b95a69

 src/layout/components/importTable.vue

@@ -1,55 +1,122 @@
<template>
   <div>
      <el-steps direction="vertical" :active="1">
          <el-step title="准备数据">
             <span class="desc">导入的数据个数需小于200,所有允许导入的字段请参考模板;
                <span class="bolder">字段不符合规则，整条数据不予以导入</span>
             </span>
             <button type="button" class="el-button more-btn el-button--text el-button--mini"><span>更多字段导入规则 <i class="el-icon-arrow-down no-open"></i></span></button>
             <div class="desc">
                <ul class="tip" style="">
                   <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>
                <a class="download el-link el-link--primary is-underline"><i class="el-icon-download"></i><span class="el-link--inner">下载模板</span></a>
             </div>
          </el-step>
          <el-step title="上传数据文件"></el-step>
        </el-steps>
   </div>
   <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">更多字段导入规则&gt</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;
}
.tip {
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;
    padding-left: 16px
}
.exportBtn {
   color: #4f9999;
    cursor: pointer;
    margin-left: 40px;
    margin-top: 8px;
}
</style>