|
@@ -2,57 +2,89 @@
|
|
|
<div>
|
|
|
<!-- 按钮类型 -->
|
|
|
<el-button type="success" size="small" @click="dialogUploadVisible = true" icon="el-icon-upload">导 入</el-button>
|
|
|
- <el-dialog title="文件上传" class="import-panel" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :show-close="false" :before-close="clearFiles">
|
|
|
+ <el-dialog title="文件上传" class="import-panel" :visible.sync="dialogUploadVisible" width="500px" append-to-body
|
|
|
+ :close-on-click-modal="false" :show-close="false" :before-close="clearFiles">
|
|
|
<div slot="title"></div>
|
|
|
- <div style="background:#f1f2f3" class="my-tabs" >
|
|
|
+ <div style="background:#f1f2f3" class="my-tabs">
|
|
|
<el-tabs v-model="activeName" type="card">
|
|
|
- <el-tab-pane label="导入经销商线索" name="first"></el-tab-pane>
|
|
|
+ <!--标准模板-->
|
|
|
+ <el-tab-pane label="Excel标准模板" name="first">
|
|
|
+ <div style="padding:20px;background:#ffffff">
|
|
|
+ <el-upload style="width:100%" ref="my-upload" class="upload-demo normal-margin" :accept="accept"
|
|
|
+ action="#" :auto-upload="false" :show-file-list="false" :on-change="handleChange" drag multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ </el-upload>
|
|
|
+ <div class="progress_panel" v-for="file in filelist" :key="file.uid">
|
|
|
+ <img v-if="file.type === 'DOC' || file.type === 'DOCX'" width="30"
|
|
|
+ src="../../assets/file_icons/word.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PDF'" width="30" src="../../assets/file_icons/PDF.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'MP4' || file.type === 'AVI'" width="30"
|
|
|
+ src="../../assets/file_icons/video.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'XLS' || file.type === 'XLSX'" width="30"
|
|
|
+ src="../../assets/file_icons/excel.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PNG' || file.type === 'JPG'|| file.type === 'JPEG'" width="30"
|
|
|
+ src="../../assets/file_icons/image.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PPT' || file.type === 'PPTX'" width="30"
|
|
|
+ src="../../assets/file_icons/PPT.png" alt="">
|
|
|
+ <img v-else width="30" src="../../assets/file_icons/unknow.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p v-if="file.progress === 100" style="float:right"><span style="color:#67C23A">●</span>上传成功</p>
|
|
|
+ <p>{{file.raw?file.raw.name:'暂无上传文件'}}</p>
|
|
|
+ <el-progress :percentage="file.progress" :show-text="false"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <slot name="errorFile"></slot>
|
|
|
+ <p class="tips">• 请下载并使用<a :href="modelurl">《Excel标准模板》</a></p>
|
|
|
+ <p class="tips">• 文件中数据不能超过5000行</p>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button size="small" @click="dialogUploadVisible = false" class="normal-btn-width">取 消</el-button>
|
|
|
+ <el-button size="small" type="warning" @click="dialogUploadVisible = false"
|
|
|
+ class="normal-btn-width btn-warning">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
+ <el-tab-pane label="Excel专用模板" name="last">
|
|
|
+ <!--专用模板-->
|
|
|
+ <div style="padding:20px;background:#ffffff">
|
|
|
+ <el-upload style="width:100%" ref="my-upload" class="upload-demo normal-margin" :accept="accept"
|
|
|
+ action="#" :auto-upload="false" :show-file-list="false" :on-change="handleChange2" drag multiple>
|
|
|
+ <i class="el-icon-upload"></i>
|
|
|
+ <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
+ </el-upload>
|
|
|
+ <div class="progress_panel" v-for="file in filelist" :key="file.uid">
|
|
|
+ <img v-if="file.type === 'DOC' || file.type === 'DOCX'" width="30"
|
|
|
+ src="../../assets/file_icons/word.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PDF'" width="30" src="../../assets/file_icons/PDF.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'MP4' || file.type === 'AVI'" width="30"
|
|
|
+ src="../../assets/file_icons/video.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'XLS' || file.type === 'XLSX'" width="30"
|
|
|
+ src="../../assets/file_icons/excel.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PNG' || file.type === 'JPG'|| file.type === 'JPEG'" width="30"
|
|
|
+ src="../../assets/file_icons/image.png" alt="">
|
|
|
+ <img v-else-if="file.type === 'PPT' || file.type === 'PPTX'" width="30"
|
|
|
+ src="../../assets/file_icons/PPT.png" alt="">
|
|
|
+ <img v-else width="30" src="../../assets/file_icons/unknow.png" alt="">
|
|
|
+ <div>
|
|
|
+ <p v-if="file.progress === 100" style="float:right"><span style="color:#67C23A">●</span>上传成功</p>
|
|
|
+ <p>{{file.raw?file.raw.name:'暂无上传文件'}}</p>
|
|
|
+ <el-progress :percentage="file.progress" :show-text="false"></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <slot name="errorFile"></slot>
|
|
|
+ <p class="tips">• 请下载并使用快手与抖音模板<a :href="modelurl2">《Excel专用模板》</a></p>
|
|
|
+ <p class="tips">• 文件中数据不能超过5000行</p>
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button size="small" @click="dialogUploadVisible = false" class="normal-btn-width">取 消</el-button>
|
|
|
+ <el-button size="small" type="warning" @click="dialogUploadVisible = false"
|
|
|
+ class="normal-btn-width btn-warning">确 定</el-button>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-tab-pane>
|
|
|
<!-- <el-tab-pane label="导入业务员线索" name="second"></el-tab-pane> -->
|
|
|
</el-tabs>
|
|
|
</div>
|
|
|
- <div style="padding:20px">
|
|
|
- <el-upload
|
|
|
- style="width:100%"
|
|
|
- ref="my-upload"
|
|
|
- class="upload-demo normal-margin"
|
|
|
- :accept="accept"
|
|
|
- action="#"
|
|
|
- :auto-upload="false"
|
|
|
- :show-file-list="false"
|
|
|
- :on-change="handleChange"
|
|
|
- drag
|
|
|
- multiple>
|
|
|
- <i class="el-icon-upload"></i>
|
|
|
- <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
|
|
|
- </el-upload>
|
|
|
- <div class="progress_panel" v-for="file in filelist" :key="file.uid">
|
|
|
- <img v-if="file.type === 'DOC' || file.type === 'DOCX'" width="30" src="../../assets/file_icons/word.png"
|
|
|
- alt="">
|
|
|
- <img v-else-if="file.type === 'PDF'" width="30" src="../../assets/file_icons/PDF.png" alt="">
|
|
|
- <img v-else-if="file.type === 'MP4' || file.type === 'AVI'" width="30" src="../../assets/file_icons/video.png"
|
|
|
- alt="">
|
|
|
- <img v-else-if="file.type === 'XLS' || file.type === 'XLSX'" width="30" src="../../assets/file_icons/excel.png"
|
|
|
- alt="">
|
|
|
- <img v-else-if="file.type === 'PNG' || file.type === 'JPG'|| file.type === 'JPEG'" width="30"
|
|
|
- src="../../assets/file_icons/image.png" alt="">
|
|
|
- <img v-else-if="file.type === 'PPT' || file.type === 'PPTX'" width="30" src="../../assets/file_icons/PPT.png"
|
|
|
- alt="">
|
|
|
- <img v-else width="30" src="../../assets/file_icons/unknow.png" alt="">
|
|
|
- <div>
|
|
|
- <p v-if="file.progress === 100" style="float:right"><span style="color:#67C23A">●</span>上传成功</p>
|
|
|
- <p>{{file.raw?file.raw.name:'暂无上传文件'}}</p>
|
|
|
- <el-progress :percentage="file.progress" :show-text="false"></el-progress>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <slot name="errorFile"></slot>
|
|
|
- <p class="tips">• 为保证数据导入顺利,推荐您下载并使用<a :href="modelurl">《Excel标准模板》</a></p>
|
|
|
- <p class="tips">• 文件中数据不能超过5000行</p>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button size="small" @click="dialogUploadVisible = false" class="normal-btn-width">取 消</el-button>
|
|
|
- <el-button size="small" type="warning" @click="dialogUploadVisible = false" class="normal-btn-width btn-warning">确 定</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
+
|
|
|
</el-dialog>
|
|
|
</div>
|
|
|
</template>
|
|
@@ -66,7 +98,7 @@ export default {
|
|
|
accept:限制上传文件类型;
|
|
|
bindData:附件上传成功后对应需要绑定的数据信息
|
|
|
*/
|
|
|
- props:['folderid','btntype','accept','bindData'],
|
|
|
+ props: ['folderid', 'btntype', 'accept', 'bindData'],
|
|
|
data () {
|
|
|
return {
|
|
|
dialogUploadVisible: false,
|
|
@@ -81,14 +113,18 @@ export default {
|
|
|
},
|
|
|
file: {},
|
|
|
filelist: [],
|
|
|
- activeName:'first',
|
|
|
- modelurl:''
|
|
|
+ activeName: 'first',
|
|
|
+ modelurl: '',
|
|
|
+ modelurl2: '',/* 快手与抖音模板 */
|
|
|
+ /* 上传模板类型 */
|
|
|
+ type:''
|
|
|
}
|
|
|
},
|
|
|
mounted () {
|
|
|
this.getModelUrl()
|
|
|
},
|
|
|
methods: {
|
|
|
+ /* 模板1 */
|
|
|
handleChange (file, filelist) {
|
|
|
this.filelist = filelist
|
|
|
var index = file.raw.name.lastIndexOf(".");
|
|
@@ -96,16 +132,36 @@ export default {
|
|
|
this.params.content.filename = file.raw.name
|
|
|
this.params.content.filetype = ext
|
|
|
this.getUploadUrl(file, ext)
|
|
|
+ this.type = 'module1'
|
|
|
+ },
|
|
|
+ /* 模板2 */
|
|
|
+ handleChange2 (file, filelist) {
|
|
|
+ this.filelist = filelist
|
|
|
+ var index = file.raw.name.lastIndexOf(".");
|
|
|
+ var ext = file.name.substr(index + 1);
|
|
|
+ this.params.content.filename = file.raw.name
|
|
|
+ this.params.content.filetype = ext
|
|
|
+ this.getUploadUrl(file, ext)
|
|
|
+ this.type = 'module2'
|
|
|
},
|
|
|
// 获取导入模板
|
|
|
async getModelUrl () {
|
|
|
const res = await this.$api.requested({
|
|
|
- "classname":"webmanage.saletool.orderclue.orderclue",
|
|
|
+ "classname": "webmanage.saletool.orderclue.orderclue",
|
|
|
"method": "downloadOrderclueuploadbillExcel",
|
|
|
- "content": {
|
|
|
+ "content": {
|
|
|
+ }
|
|
|
+ })
|
|
|
+ const res2 = await this.$api.requested({
|
|
|
+ "classname": "webmanage.saletool.orderclue.orderclue",
|
|
|
+ "method": "downloadOrderclueuploadbillExcelByPlatform",
|
|
|
+ "content": {
|
|
|
}
|
|
|
})
|
|
|
this.modelurl = res.msg
|
|
|
+ this.modelurl2 = res2.msg
|
|
|
+ console.log(this.modelurl, this.modelurl2);
|
|
|
+
|
|
|
},
|
|
|
// 获取华为云上传地址
|
|
|
async getUploadUrl (file, ext) {
|
|
@@ -117,7 +173,7 @@ export default {
|
|
|
this.upoladFileToServer(url, file, ext, obsfilename)
|
|
|
},
|
|
|
// 上传到华为云
|
|
|
- async upoladFileToServer (url, file, ext, obsfilename) {
|
|
|
+ async upoladFileToServer (url, file, ext, obsfilename) {
|
|
|
let THIS = this
|
|
|
let config = {
|
|
|
headers: ext === 'pdf' ? { 'Content-Type': 'application/pdf' } : { 'Content-Type': 'application/octet-stream' },
|
|
@@ -138,17 +194,17 @@ export default {
|
|
|
// 上传成功以后生成附件记录
|
|
|
async createFileRecord (obsfilename) {
|
|
|
let obj = {
|
|
|
- "serialfilename": obsfilename
|
|
|
+ "serialfilename": obsfilename
|
|
|
}
|
|
|
- obj = Object.assign({},obj,this.bindData)
|
|
|
+ obj = Object.assign({}, obj, this.bindData)
|
|
|
let param = {
|
|
|
"classname": "system.attachment.huawei.OBS",
|
|
|
"method": "uploadSuccess",
|
|
|
- "content":obj
|
|
|
+ "content": obj
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
const res = await this.$api.requested(param)
|
|
|
- this.$emit('onSuccess',res,this.activeName === 'first'?'经销商':'业务员')
|
|
|
+ this.$emit('onSuccess', res, this.activeName === 'first' ? '经销商' : '业务员',this.type)
|
|
|
},
|
|
|
|
|
|
clearFiles () {
|
|
@@ -161,7 +217,8 @@ export default {
|
|
|
|
|
|
</script>
|
|
|
<style>
|
|
|
-.import-panel .el-dialog__header,.import-panel .el-dialog__body{
|
|
|
+.import-panel .el-dialog__header,
|
|
|
+.import-panel .el-dialog__body {
|
|
|
padding: 0 !important;
|
|
|
}
|
|
|
.upload-demo > div {
|
|
@@ -190,7 +247,7 @@ export default {
|
|
|
.progress_panel > div > p {
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
-.tips{
|
|
|
+.tips {
|
|
|
line-height: 30px;
|
|
|
}
|
|
|
</style>
|