|
|
@@ -1,203 +1,295 @@
|
|
|
<template>
|
|
|
- <div>
|
|
|
- <el-button type="success" size="small" @click="onShow(0)" icon="el-icon-upload">{{$t(`图 片 导 入`)}}</el-button>
|
|
|
- <el-dialog :title="$t('文件上传')" class="import-panel" :visible.sync="dialogUploadVisible" width="500px" append-to-body :close-on-click-modal="false" :show-close="false" @close="clearFiles">
|
|
|
- <div slot="title"></div>
|
|
|
- <div style="background:#f1f2f3" class="my-tabs" >
|
|
|
- <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
|
|
|
- <el-tab-pane :label="$t(`导入`)" 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">{{$t('将文件拖到此处,或') + ' '}}<em>{{$t('点击上传')}}</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>{{$t('上传成功')}}</p>
|
|
|
- <p>{{file.raw?file.raw.name:$t('暂无上传文件')}}</p>
|
|
|
- <el-progress :percentage="file.progress" :show-text="false"></el-progress>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <slot name="errorFile"></slot>
|
|
|
- <p class="tips">• + {{$t('为保证数据导入顺利,推荐您下载并使用' + ' ')}}<a :href="modelurl">《{{$t('Excel标准模板')}}》</a></p>
|
|
|
- <p class="tips">• {{$t('文件中数据不能超过5000行')}}</p>
|
|
|
- <a :href="errorUrl" class="tips" style="color:red" v-if="errorUrl">•{{$t(`下载错误数据`)}}</a>
|
|
|
- <div class="dialog-footer">
|
|
|
- <el-button size="small" @click="cancel" class="normal-btn-width">{{$t('取 消')}}</el-button>
|
|
|
- <el-button size="small" type="warning" @click="dialogUploadVisible = false" class="normal-btn-width btn-warning">{{$t('确 定')}}</el-button>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
- </el-dialog>
|
|
|
- </div>
|
|
|
+ <div>
|
|
|
+ <el-button
|
|
|
+ type="success"
|
|
|
+ size="small"
|
|
|
+ @click="onShow(0)"
|
|
|
+ icon="el-icon-upload"
|
|
|
+ >{{ $t(`图 片 导 入`) }}</el-button
|
|
|
+ >
|
|
|
+ <el-dialog
|
|
|
+ :title="$t('文件上传')"
|
|
|
+ class="import-panel"
|
|
|
+ :visible.sync="dialogUploadVisible"
|
|
|
+ width="500px"
|
|
|
+ append-to-body
|
|
|
+ :close-on-click-modal="false"
|
|
|
+ :show-close="false"
|
|
|
+ @close="clearFiles"
|
|
|
+ >
|
|
|
+ <div slot="title"></div>
|
|
|
+ <div style="background: #f1f2f3" class="my-tabs">
|
|
|
+ <el-tabs
|
|
|
+ v-model="activeName"
|
|
|
+ type="card"
|
|
|
+ @tab-click="handleClick"
|
|
|
+ >
|
|
|
+ <el-tab-pane
|
|
|
+ :label="$t(`导入`)"
|
|
|
+ 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">
|
|
|
+ {{ $t("将文件拖到此处,或") + " "
|
|
|
+ }}<em>{{ $t("点击上传") }}</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
|
|
|
+ >{{ $t("上传成功") }}
|
|
|
+ </p>
|
|
|
+ <p>
|
|
|
+ {{ file.raw ? file.raw.name : $t("暂无上传文件") }}
|
|
|
+ </p>
|
|
|
+ <el-progress
|
|
|
+ :percentage="file.progress"
|
|
|
+ :show-text="false"
|
|
|
+ ></el-progress>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <slot name="errorFile"></slot>
|
|
|
+ <p class="tips">
|
|
|
+ • + {{ $t("为保证数据导入顺利,推荐您下载并使用" + " ")
|
|
|
+ }}<a :href="modelurl">《{{ $t("Excel标准模板") }}》</a>
|
|
|
+ </p>
|
|
|
+ <p class="tips">• {{ $t("文件中数据不能超过5000行") }}</p>
|
|
|
+ <a
|
|
|
+ :href="errorUrl"
|
|
|
+ class="tips"
|
|
|
+ style="color: red"
|
|
|
+ v-if="errorUrl"
|
|
|
+ >•{{ $t(`下载错误数据`) }}</a
|
|
|
+ >
|
|
|
+ <div class="dialog-footer">
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ @click="cancel"
|
|
|
+ class="normal-btn-width"
|
|
|
+ >{{ $t("取 消") }}</el-button
|
|
|
+ >
|
|
|
+ <el-button
|
|
|
+ size="small"
|
|
|
+ type="warning"
|
|
|
+ @click="dialogUploadVisible = false"
|
|
|
+ class="normal-btn-width btn-warning"
|
|
|
+ >{{ $t("确 定") }}</el-button
|
|
|
+ >
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </el-dialog>
|
|
|
+ </div>
|
|
|
</template>
|
|
|
|
|
|
<script>
|
|
|
-
|
|
|
export default {
|
|
|
- props:['btntype','accept','bindData','errorUrl'],
|
|
|
- data () {
|
|
|
- return {
|
|
|
- dialogUploadVisible: false,
|
|
|
- params: {
|
|
|
- "classname": "system.attachment.huawei.OBS",
|
|
|
- "method": "getFileName",
|
|
|
- "content": {
|
|
|
- "filename": '',
|
|
|
- "filetype": '',
|
|
|
- "parentid": ""
|
|
|
- }
|
|
|
- },
|
|
|
- file: {},
|
|
|
- filelist: [],
|
|
|
- CampaignList:[],
|
|
|
- activeName:'last',
|
|
|
- modelurl:'',
|
|
|
- campaignid:'',
|
|
|
- folderid:JSON.parse(sessionStorage.getItem('folderid')).appfolderid,
|
|
|
- }
|
|
|
- },
|
|
|
- mounted () {
|
|
|
-
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onShow () {
|
|
|
- this.dialogUploadVisible = true
|
|
|
- this.getModelUrl()
|
|
|
- },
|
|
|
- cancel () {
|
|
|
- this.dialogUploadVisible = false
|
|
|
- this.campaignid = ''
|
|
|
- this.$refs['my-upload'].clearFiles()
|
|
|
- this.filelist = []
|
|
|
- },
|
|
|
- handleChange (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)
|
|
|
- },
|
|
|
- handleClick () {
|
|
|
- this.getModelUrl()
|
|
|
+ props: ["btntype", "accept", "bindData", "errorUrl"],
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ dialogUploadVisible: false,
|
|
|
+ params: {
|
|
|
+ classname: "system.attachment.huawei.OBS",
|
|
|
+ method: "getFileName",
|
|
|
+ content: {
|
|
|
+ filename: "",
|
|
|
+ filetype: "",
|
|
|
+ parentid: "",
|
|
|
+ },
|
|
|
+ },
|
|
|
+ file: {},
|
|
|
+ filelist: [],
|
|
|
+ CampaignList: [],
|
|
|
+ activeName: "last",
|
|
|
+ modelurl: "",
|
|
|
+ campaignid: "",
|
|
|
+ folderid: JSON.parse(sessionStorage.getItem("folderid"))
|
|
|
+ .appfolderid,
|
|
|
+ };
|
|
|
},
|
|
|
- async getModelUrl () {
|
|
|
- const res = await this.$api.requested({
|
|
|
- "accesstoken": "7023086e7fe38389a359dc05ba950b33",
|
|
|
- "id": 20230407164004,
|
|
|
- "content": {
|
|
|
- }
|
|
|
- })
|
|
|
- this.modelurl = res.data
|
|
|
-
|
|
|
- },
|
|
|
- async getUploadUrl (file, ext) {
|
|
|
- this.params.content.parentid = this.folderid
|
|
|
- const res = await this.$api.requested(this.params)
|
|
|
- let url = res.data.uploadurl
|
|
|
- let obsfilename = res.data.serialfilename
|
|
|
+ mounted() {},
|
|
|
+ methods: {
|
|
|
+ onShow() {
|
|
|
+ this.dialogUploadVisible = true;
|
|
|
+ this.getModelUrl();
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ this.dialogUploadVisible = false;
|
|
|
+ this.campaignid = "";
|
|
|
+ this.$refs["my-upload"].clearFiles();
|
|
|
+ this.filelist = [];
|
|
|
+ },
|
|
|
+ handleChange(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);
|
|
|
+ },
|
|
|
+ handleClick() {
|
|
|
+ this.getModelUrl();
|
|
|
+ },
|
|
|
+ async getModelUrl() {
|
|
|
+ const res = await this.$api.requested({
|
|
|
+ accesstoken: "7023086e7fe38389a359dc05ba950b33",
|
|
|
+ id: 20250520083606,
|
|
|
+ content: {},
|
|
|
+ });
|
|
|
+ console.log("res-----------", res);
|
|
|
+ this.modelurl = res.data;
|
|
|
+ },
|
|
|
+ async getUploadUrl(file, ext) {
|
|
|
+ this.params.content.parentid = this.folderid;
|
|
|
+ const res = await this.$api.requested(this.params);
|
|
|
+ let url = res.data.uploadurl;
|
|
|
+ let obsfilename = res.data.serialfilename;
|
|
|
|
|
|
- this.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' },
|
|
|
- onUploadProgress: function (progressEvent) {
|
|
|
- let percent = progressEvent.loaded / progressEvent.total * 100
|
|
|
- THIS.filelist.forEach(e => {
|
|
|
- if (e.uid === file.uid) {
|
|
|
- THIS.$set(e, 'type', ext.toUpperCase());
|
|
|
- THIS.$set(e, 'progress', percent);
|
|
|
- }
|
|
|
- })
|
|
|
+ this.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" },
|
|
|
+ onUploadProgress: function (progressEvent) {
|
|
|
+ let percent =
|
|
|
+ (progressEvent.loaded / progressEvent.total) * 100;
|
|
|
+ THIS.filelist.forEach((e) => {
|
|
|
+ if (e.uid === file.uid) {
|
|
|
+ THIS.$set(e, "type", ext.toUpperCase());
|
|
|
+ THIS.$set(e, "progress", percent);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ },
|
|
|
+ };
|
|
|
+ const res = await this.$upload.hw_upload(url, file.raw, config);
|
|
|
+ this.createFileRecord(obsfilename);
|
|
|
},
|
|
|
- }
|
|
|
- const res = await this.$upload.hw_upload(url, file.raw, config)
|
|
|
- this.createFileRecord(obsfilename)
|
|
|
- },
|
|
|
|
|
|
- async createFileRecord (obsfilename) {
|
|
|
- let obj = {
|
|
|
- "serialfilename": obsfilename
|
|
|
- }
|
|
|
- obj = Object.assign({},obj,this.bindData)
|
|
|
- let param = {
|
|
|
- "classname": "system.attachment.huawei.OBS",
|
|
|
- "method": "uploadSuccess",
|
|
|
- "content":obj
|
|
|
- }
|
|
|
+ async createFileRecord(obsfilename) {
|
|
|
+ let obj = {
|
|
|
+ serialfilename: obsfilename,
|
|
|
+ };
|
|
|
+ obj = Object.assign({}, obj, this.bindData);
|
|
|
+ let param = {
|
|
|
+ classname: "system.attachment.huawei.OBS",
|
|
|
+ method: "uploadSuccess",
|
|
|
+ content: obj,
|
|
|
+ };
|
|
|
|
|
|
- const res = await this.$api.requested(param)
|
|
|
- this.$emit('onSuccess',res.data.attachmentids[0])
|
|
|
- },
|
|
|
+ const res = await this.$api.requested(param);
|
|
|
+ this.$emit("onSuccess", res.data.attachmentids[0]);
|
|
|
+ },
|
|
|
|
|
|
- clearFiles () {
|
|
|
- this.$refs['my-upload'].clearFiles()
|
|
|
- this.filelist = []
|
|
|
- this.dialogUploadVisible = false
|
|
|
- this.$emit('clearUrl')
|
|
|
+ clearFiles() {
|
|
|
+ this.$refs["my-upload"].clearFiles();
|
|
|
+ this.filelist = [];
|
|
|
+ this.dialogUploadVisible = false;
|
|
|
+ this.$emit("clearUrl");
|
|
|
+ },
|
|
|
},
|
|
|
- }
|
|
|
-}
|
|
|
-
|
|
|
+};
|
|
|
</script>
|
|
|
<style>
|
|
|
-.import-panel .el-dialog__header,.import-panel .el-dialog__body{
|
|
|
- padding: 0 !important;
|
|
|
+.import-panel .el-dialog__header,
|
|
|
+.import-panel .el-dialog__body {
|
|
|
+ padding: 0 !important;
|
|
|
}
|
|
|
.upload-demo > div {
|
|
|
- width: 100% !important;
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
.upload-demo .el-upload-dragger {
|
|
|
- width: 100% !important;
|
|
|
+ width: 100% !important;
|
|
|
}
|
|
|
</style>
|
|
|
<style scoped>
|
|
|
.progress_panel {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- padding: 10px;
|
|
|
- margin: 10px 0;
|
|
|
- border-radius: 5px;
|
|
|
- transition: linear 0.2s all;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 10px;
|
|
|
+ margin: 10px 0;
|
|
|
+ border-radius: 5px;
|
|
|
+ transition: linear 0.2s all;
|
|
|
}
|
|
|
.progress_panel:hover {
|
|
|
- box-shadow: 0px 0px 5px #ccc;
|
|
|
+ box-shadow: 0px 0px 5px #ccc;
|
|
|
}
|
|
|
.progress_panel > div {
|
|
|
- flex: 1;
|
|
|
- padding: 0 10px;
|
|
|
+ flex: 1;
|
|
|
+ padding: 0 10px;
|
|
|
}
|
|
|
.progress_panel > div > p {
|
|
|
- line-height: 30px;
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
-.tips{
|
|
|
- line-height: 30px;
|
|
|
+.tips {
|
|
|
+ line-height: 30px;
|
|
|
}
|
|
|
</style>
|