Skip to content

W
welfare
Commit 57d59012 by 萱草
Options

update: 虚拟礼品文件上传

parent 456d92e9
Showing with 183 additions and 45 deletions
src/api/gift.js
......@@ -65,7 +65,9 @@ let realGift = {
updateName: '/gift/update-name', // 修改礼品名称
virtualGiftUpload: {
url: '/gift/vir-gift-upload',
useFormData: true,
method: 'post',
headers: { 'Content-Type': 'application/x-www-form-urlencoded' }
// useFormData: true,
}, // 虚拟礼品卡密卡号上传
operatorSave: {
url: '/auth/operator-save',
......
src/views/gift-manage/module/update-virtual-stock.vue
<template>
<el-dialog title="调整可占用库存" :visible.sync="dialogVisible" width="500px" @close="cancelSubmit()">
<div v-loading="loading">
<el-form>
<el-form-item prop="导入券码文件" required>
<div class="upload-btn mt20">
<el-upload class="upload-ele" show-file-list :action="uploadAction" :on-success="uploadFile" with-credentials>
<el-button><i class="el-icon-upload2" style="margin-right:5px"></i>上传</el-button>
</el-upload>
</div>
<el-button type="text" class="mr30 inline-block">下载文件模板</el-button>
<el-popover placement="top" trigger="hover">
<div style="font-size:6px">
1.填充空缺内容，导出所有项均为必填项;<br>
2.请勿导入重复的内容，导入的内容在原来基础上增加库存;<br>
3.上传完整仅支持.xlsx .xls文件的导入，填充数据不超过“10万”条;
<el-form label-width="130px">
<el-form-item label="导入券码文件" required>
<div class="pickup-upload">
<input type="text" id="textfield" class="txt" />
<!-- <input type="file" name="file" onchange="document.getElementById('textfield').value = this.files[0].name;console.log(this.files)"> -->
<input type="file" name="file" @change="change">
<dm-upload-file
:show-file-list="false"
:action="uploadAction"
:on-success="successUpload"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
with-credentials>
<el-button class="upload-trigger"><i class="iconfont-components4 icon-cp-shangc upload-icon"></i> 上传</el-button>
<span slot="tip" class="upload-tip inline-block">
<el-button style="margin-right: 30px" type="text" @click="downloadFile">下载文件模板</el-button>
<el-popover trigger="click" placement="right" popper-class="upload-popper">
<el-button slot="reference" type="text">查看导入规则</el-button>
<div class="upload-tip-text">
<p>1.填充空缺内容，导出所有项均为必填项;</p>
<p>2.请勿导入重复的内容，导入的内容在原来基础上增加库存;</p>
<p>3.上传完整仅支持.xlsx .xls文件的导入，填充数据不超过“10万”条;</p>
</div>
</el-popover>
</span>
<div slot="file-item" slot-scope="{fileData}">{{ fileData.name }}</div>
</dm-upload-file>
<div class="pickup-list" v-if="uploadFile.name">
<p class="pickup-list-name">
<i class="iconfont-welfare4 icon-wenjian1 file-icon"></i>
{{ uploadFile.name }}
</p>
</div>
<el-button slot="reference" type="text">查看导入规则</el-button>
</el-popover>
</div>
</el-form-item>
<el-form-item prop="调整备注" required>
<el-form-item label="调整备注" required>
<el-input type="textarea" style="width:260px" :rows="3" placeholder="请填入调整备注" v-model="textarea" :maxlength="240" show-word-limit></el-input>
</el-form-item>
</el-form>
......@@ -33,7 +51,7 @@
<script>
// import request from '../service/request.js';
import api from '@/api/gift.js';
const { realStockUpdate } = api;
const { virtualGiftUpload } = api;
export default {
props: {
stockData: {
......@@ -49,25 +67,50 @@ export default {
loading: false,
textarea: '',
// uploadAction: window.location.origin + '/api-marketing/upload/upload-image?requestProject=marketing',
uploadAction: 'https://four.gicdev.com/api-marketing/upload/upload-image?requestProject=marketing',
uploadAction: 'https://four.gicdev.com/api-marketing/upload/upload-image?requestProject=welafre',
// uploadAction: '/api-marketing/upload/upload-image?requestProject=welafre',
uploadFile: {
name: ''
},
file: {},
files: []
};
},
mounted() {
this.dialogVisible = true;
console.log(this.files);
},
methods: {
change(e){
// document.getElementById('textfield').value = this.files[0].name;
// console.log(this.files[0].name);
console.log(e.target.files[0]);
console.log(e.target.files[0].name);
this.file = e.target.files[0];
console.log(this.file);
},
getData(){
console.log('获取成本数据');
},
beforeUpload(file) {
console.log(file);
this.uploadFile.name = file.name;
// this.file = file;
},
downloadFile() {
const prev = process.env['NODE_ENV'] === 'development' ? '' : '/welfare'; // eslint-disable-line
window.open(`${prev}/static/虚拟礼品卡券模板.xlsx`, '_blank');
},
submitProNanme() {
if(this.loading) return;
console.log(this.file);
let params = {
giftId: this.stockData.id,
updateList: this.updateList,
remark: this.textarea
file: this.file,
remark: ''
};
console.log(params.file);
this.loading = true;
realStockUpdate(params).then(res =>{
virtualGiftUpload(params).then(res =>{
if(res.code === '0000'){
this.dialogVisible = false;
setInterval(() => {
......@@ -77,7 +120,7 @@ export default {
}else{
this.$message.error(res.message);
}
}).finally(() => this.loading = false);
});
},
// 取消修改
cancelSubmit() {
......@@ -86,8 +129,10 @@ export default {
this.$emit('closeUpdateStock');
}, 10);
},
uploadFile(file){
successUpload(response, file){
console.log(response);
console.log(file);
this.file = file;
},
// 合并单元格，行合并
getSpanArr(data) {
......@@ -176,20 +221,21 @@ export default {
}
};
</script>
<style scoped>
<style lang="scss" scoped>
@import '@/assets/styles/colors.scss';
.upload-btn {
height: 40px;
height: 32px;
border: 1px dashed rgba(192, 196, 204, 1);
display: inline-block;
font-size: 14px;
color: #c0c4cc;
cursor: pointer;
margin-right: 20px;
/* width: 250px; */
width: 84px;
border-radius: 4px;
}
.upload-btn .el-icon-upload2 {
font-size: 18px;
font-size: 14px;
color: #c0c4cc;
}
.upload-btn:hover {
......@@ -198,7 +244,7 @@ export default {
.upload-ele .el-button {
border: none;
color: #c0c4cc;
margin-left: 60px;
/* margin-left: 16px; */
}
.upload-ele .el-button--small {
padding: 0;
......@@ -206,4 +252,30 @@ export default {
.uploadText p{
line-height: 26px;
}
.pickup-upload{
display: inline-block;
vertical-align: top;
margin-left: 10px;
.upload-trigger{
border-style: dashed;
.upload-icon {
font-size: 14px;
}
}
.pickup-list {
margin-top: 18px;
.pickup-list-name {
font-size: 14px;
font-weight: 400;
color: $gray01;
line-height: 20px;
.file-icon {
font-size: 14px;
}
}
}
}
// .upload-tip .upload-popper {
// padding: 10px 12px!important;
// }
</style>
src/views/gift-manage/virtual-gift-detail.vue
......@@ -64,7 +64,7 @@
<el-step>
<div slot="description">
<span class="step-text">下载当前内容生成的模板。</span>
<el-button type="text" @click="downloadTemplate">点击下载模板</el-button></div>
<el-button type="text" @click="downloadFile">点击下载模板</el-button></div>
</el-step>
<el-step>
<div slot="description">
......@@ -87,6 +87,37 @@
<!-- <el-button type="text">查看导入规则</el-button> -->
</div>
<el-button type="text" class="block" @click="checkUploadDetail">查看内容</el-button>
<div class="pickup-upload">
<span class="inline-block step-text" style="margin-bottom:20px">上传完善后的文件。</span>
<dm-upload-file
:show-file-list="false"
:action="uploadAction"
:on-success="successUpload"
accept=".xls,.xlsx"
:before-upload="beforeUpload"
with-credentials>
<el-button class="upload-trigger"><i class="iconfont-components4 icon-cp-shangc upload-icon"></i> 上传</el-button>
<span slot="tip" class="upload-tip inline-block">
<el-button style="margin-right: 30px" type="text" @click="downloadFile">下载文件模板</el-button>
<el-popover trigger="click" placement="right" popper-class="upload-popper">
<el-button slot="reference" type="text">查看导入规则</el-button>
<div class="upload-tip-text">
<p>1.填充空缺内容，导出所有项均为必填项;</p>
<p>2.请勿导入重复的内容，导入的内容在原来基础上增加库存;</p>
<p>3.上传完整仅支持.xlsx .xls文件的导入，填充数据不超过“10万”条;</p>
</div>
</el-popover>
</span>
<div slot="file-item" slot-scope="{fileData}">{{ fileData.name }}</div>
</dm-upload-file>
<div class="pickup-list" v-if="uploadFile.name">
<p class="pickup-list-name">
<i class="iconfont-welfare4 icon-wenjian1 file-icon"></i>
{{ uploadFile.name }}
<el-button type="text" class="block" @click="checkUploadDetail">查看内容</el-button>
</p>
</div>
</div>
</div>
</el-step>
</el-steps>
......@@ -216,7 +247,7 @@ export default {
actionUrl: '/api-plug/upload-images', // 必选参数，上传的相对地址 String 类型,切勿硬编码写死地址
maxlength: 5, // 图片数量 默认 5
// uploadAction: window.location.origin + '/api-marketing/upload/upload-image?requestProject=marketing',
uploadAction: 'https://four.gicdev.com/api-marketing/upload/upload-image?requestProject=marketing',
uploadAction: 'https://four.gicdev.com/api-marketing/upload/upload-image?requestProject=welfare',
openStorePick: 0,
btnLoading: false,
loading: false,
......@@ -234,6 +265,9 @@ export default {
isEdit: false,
active: 3,
image: [],
uploadFile: {
name: ''
}
};
},
mounted() {
......@@ -271,22 +305,28 @@ export default {
// console.log(file);
// },
beforeUploadFile(file, fileList){
console.log(file);
console.log(fileList);
this.fileName = file.name;
console.log(file.response);
let result = file.response.result;
console.log(result);
let fileUrl = result.url;
console.log(fileUrl);
this.uploadFile.name = file.name;
// console.log(file);
// console.log(fileList);
// this.fileName = file.name;
// console.log(file.response);
// let result = file.response.result;
// console.log(result);
// let fileUrl = result.url;
// console.log(fileUrl);
let params = {
giftId: this.giftId,
file: fileUrl
file: file,
remark: ''
};
virtualGiftUpload(params).then(res =>{
console.log(res);
});
},
downloadFile() {
const prev = process.env['NODE_ENV'] === 'development' ? '' : '/welfare'; // eslint-disable-line
window.open(`${prev}/static/虚拟礼品卡券模板.xlsx`, '_blank');
},
// uploadChange(file){
// console.log(file);
// let params = {
......@@ -363,9 +403,9 @@ export default {
this.$message.error('请填写正确的格式');
this.isSave = false;
};
if(this.isSave){
this.generateTemplate();
}
// if(this.isSave){
// this.generateTemplate();
// }
},
// 生成模板
// generateTemplate(){
......@@ -572,7 +612,8 @@ export default {
},
};
</script>
<style lang="less" scoped>
<style lang="scss" scoped>
@import '@/assets/styles/colors.scss';
.step-text{
color: #000000;
font-size: 14px;
......@@ -708,6 +749,29 @@ export default {
.underline{
text-decoration: underline;
}
.pickup-upload{
display: inline-block;
vertical-align: top;
margin-left: 10px;
.upload-trigger{
border-style: dashed;
.upload-icon {
font-size: 14px;
}
}
.pickup-list {
margin-top: 18px;
.pickup-list-name {
font-size: 14px;
font-weight: 400;
color: $gray01;
line-height: 20px;
.file-icon {
font-size: 14px;
}
}
}
}
/* 规格值 */
</style>
<style>
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment