Skip to content

W
welfare
Commit 773f973a by chenxin
Options

fix: 上传券码

parent 3ef7b6be
Showing with 142 additions and 134 deletions
src/api/gic-card.js
......@@ -3,7 +3,7 @@
* GIC卡券
*/
import getFetch from './get-fetch.js';
import config, { welfarePrefix, origin } from '@/config';
import config, { welfarePrefix } from '@/config';
// 卡券相关接口
......@@ -59,6 +59,12 @@ let destory = {
couponConsumeOrder: '/coupon-log/coupon-consume-order', // 核销 - 订单信息
couponConsume: '/coupon-log/coupon-consume', // 核销 - 核销
couponDestroy: '/coupon-log/coupon-destroy', // 销毁
importCode: {
url: '/coupon/import-custom-code',
method: 'post',
headers: { 'Content-Type': 'multipart/form-data;' },
file: true
}, // 导入券码
};
......@@ -69,7 +75,6 @@ export default { ...card, ...destory };
export const downloadCouponCSV = config.api + welfarePrefix + '/destroy-plugin/download-destroy-code-template'; // 下载导入GIC券号csv示例文件
export const importCode = origin + welfarePrefix + '/coupon/import-custom-code'; // 导入券码
export const importDestoryCode = welfarePrefix + '/destroy-plugin/import-destroy-code'; // 上传销毁code列表
export const downloadDestroyCodeTemplate = config.api + welfarePrefix + '/coupon/download-code-template'; // 下载销毁模板示例
src/utils/common.js
......@@ -224,4 +224,23 @@ export const getHours2 = (time) => {
let minute = now.getMinutes();
// minute >= 10 ? (minute = minute) : (minute = '0' + minute); //判断小于10的分的情况
return hour + ':' + minute;
};
/**
* 获取文件大小,obj为dom对象
* @param {File} obj 文件类型
* @returns {Number} 文件大小(单位为KB)
*/
export const getFileSize = (obj) => {
let fileSize = 0;
const isIE = /msie/i.test(navigator.userAgent) && !window.opera;
if (isIE && !obj.files) {
const filePath = obj.value;
const fileSystem = new ActiveXObject('Scripting.FileSystemObject'); // eslint-disable-line
const file = fileSystem.GetFile(filePath);
fileSize = file.Size;
} else {
fileSize = obj.files[0].size;
}
return Math.round(fileSize / 1024); // 单位为KB
};
\ No newline at end of file
src/views/card/gic-card/card-form.js
import { reRreshRoute, formatDateTimeByType, deepClone } from '@/utils';
import api from '@/api/gic-card';
import api, { downloadCouponCSV } from '@/api/gic-card';
import { isEmpty } from '@/utils/index';
import { showConfirm } from '@/utils/common';
import { predefineColors, startDayOptionsDay, startDayOptionsMonth } from '@/config/mapping/gic-card';
import { marketPrefix as prefix } from '@/config';
import resultDialog from './module/result-dialog';
import sendPreview from './module/send-preview';
import importCode from './module/import-code';
import commomApi from '@/api/common.js';
const { uploadUrl, getRelationId } = commomApi;
const { addCard, copyCard, checkDemoCode, getMallShopList } = api;
const { addCard, copyCard, checkDemoCode, getMallShopList, importCode } = api;
// 禁止回车
const preventEnter = function(e) {
......@@ -119,8 +118,7 @@ export default {
name: 'card-form',
components: {
resultDialog,
sendPreview,
importCode
sendPreview
},
data() {
// 校验优惠金额和折扣额度
......@@ -281,6 +279,14 @@ export default {
callback();
};
const validUploadFileList = (rule, value, callback) => {
if (this.ruleForm1.customCodeFlag == 2 && this.fileList.length == 0) {
callback(new Error('请导入券码文件'));
return;
}
callback();
};
return {
loading: false,
active: 1,
......@@ -320,6 +326,7 @@ export default {
{ required: true, trigger: 'blur', message: '请输入成本' },
{ validator: validMin0, trigger: 'change', message: '成本必须大于0' }
],
uploadFlag: { required: true, validator: validUploadFileList, trigger: 'change' },
cardEffectiveMode0: [ { validator: validTime, trigger: 'change' } ],
cardEffectiveMode1: [ { required: true, validator: validEffectTimeMode, trigger: 'change' } ],
customCode: [
......@@ -345,7 +352,7 @@ export default {
visible: false,
disabled: true
},
importVisible: false, // 导入券码model
uploadFileloading: false,
fileList: [], // 导入券码的的文件的列表
// 线下门店适用
xxsy: { ...defaultXxsy },
......@@ -864,6 +871,26 @@ export default {
}
return true;
},
downloadCouponCSV() {
window.open(downloadCouponCSV);
},
uploadCode() {
this.uploadFileloading = true;
const file = this.$refs.file.files[0];
importCode({
file,
remark: this.remark,
couponId: this.couponId
}).then(res => {
this.uploadFileloading = false;
this.fileList.push({ name: file.name });
this.$tips({ message: '上传成功', type: 'success' });
this.$refs.file.value = '';
this.$refs.ruleForm1.validateField('uploadFlag');
}).catch(() => {
this.uploadFileloading = false;
});
},
// **********商品选择器*************
confirm(keyName, res) { // 点击确认返回数据
this[keyName].goodsFilterId = res.goodsSelectorId;
......@@ -945,6 +972,7 @@ export default {
},
'ruleForm1.customCodeFlag'(val) {
this.$refs.ruleForm1.validateField('customCode');
this.$refs.ruleForm1.validateField('uploadFlag');
},
'ruleForm1.giveFlag'(val) {
if (val) {
......
src/views/card/gic-card/card-form.vue
......@@ -103,16 +103,23 @@
</div>
</div>
</el-form-item>
<el-form-item>
<el-radio v-model="ruleForm1.customCodeFlag" :label="2" @change="(v) => { if(v == 2) { importVisible = true } }">
<span @click="ruleForm1.customCodeFlag = 2;importVisible = true">导入券码</span>
<span class="gray03 cursor" v-if="fileList.length > 0">
<el-popover placement="top-start" title="已上传列表" width="250" trigger="hover">
<ul><li v-for="(f, idx) in fileList" :key="idx" class="ellipsis"><i class="el-icon-success success-color mr5"></i>{{ f.name }}({{ f.size }}k)</li></ul>
<i slot="reference" class="el-icon-document ml5"></i>
</el-popover>
</span>
</el-radio>
<el-form-item prop="uploadFlag">
<el-radio v-model="ruleForm1.customCodeFlag" :label="2">导入券码</el-radio>
<div class="inline-block" v-show="ruleForm1.customCodeFlag == 2">
<input style="position:absolute;top:3px;opacity:0;height:0px;width:0px;" type="file" name="file" accept=".csv" ref="file" @change="uploadCode">
<el-button :disabled="fileList.length >= 10" :loading="uploadFileloading" class="dashed" @click="$refs.file.click()"><i class="iconfont-components4 icon-cp-shangc mr5"></i>上传</el-button>
<el-button type="text" class="ml20" @click="downloadCouponCSV">点击下载文件模板</el-button>
<el-popover placement="bottom" width="350" trigger="hover" open-delay="200">
<ul>
<li>1. 单次上传最多可支持 5000 条</li>
<li>2. 券码格式可由 6~20 位的数字或字母组成</li>
<li>3. 若券码为纯数字组成，为避免发生意外错误，请将其格式设置为 ‘文本’ 格式</li>
<li>4. 仅支持.csv 文件的导入 (建议直接下载模板，在模板的基础上进行数据的填充)</li>
</ul>
<el-button class="ml30" type="text" slot="reference">查看导入规则</el-button>
</el-popover>
</div>
<ul style="padding-left:112px;margin-top:5px;" class="gray01"><li v-for="(f, idx) in fileList" :key="idx" class="ellipsis"><i class="el-icon-document mr10"></i>{{ f.name }}</li></ul>
</el-form-item>
<!-- 自定义号段库存最大100w 随机生成默认10w最大一千万 -->
<el-form-item v-if="!ruleForm1.customCodeFlag" key="couponStock" prop="couponStock" label="库存数量">
......@@ -309,7 +316,6 @@
<el-button slot="footer" class="mt30" @click="handleResClose">关闭</el-button>
</result-dialog>
<send-preview :data="ruleForm1" :visible.sync="preview.visible" /><!-- 转赠预览 -->
<import-code :coupon-id="couponId" :visible.sync="importVisible" open-type="blank" @success="(fileList)=> { fileList = fileList; }" /><!-- 导入券码 -->
<div style="opacity:0;height:1px;visiable:hidden;">
<!-- 链接小工具 -->
<dm-link-tools :member-card-id="currentAreaId" v-if="currentAreaId" :data="ruleForm1.giveBannerJumpUrl" ref="link" @save="onSave" @onHide="onHide" />
......
src/views/card/gic-card/card-info.js
......@@ -229,8 +229,7 @@ export default {
});
},
// 关闭导入券码弹窗
importCodeSuccess(fileList) {
this.fileList = fileList;
importCodeSuccess() {
this.getCardInfo('code');
},
// ***********门店选择器***************
......
src/views/card/gic-card/card-info.vue
......@@ -23,7 +23,7 @@
</div>
</el-form-item>
<el-form-item label="导入券码" v-if="info.customCodeFlag === 2 && isEdit">
<el-button type="text" @click="importVisible = true">上传</el-button>
<el-button type="text" @click="importVisible = true">上传文件</el-button>
<span class="gray03 cursor" v-if="fileList.length > 0">
<el-popover open-delay="200" placement="top-start" title="已上传列表" width="250" trigger="hover">
<ul><li v-for="(f, idx) in fileList" :key="idx" class="ellipsis"><i class="el-icon-success success-color mr5"></i>{{ f.name }}({{ f.size }}k)</li></ul>
......
src/views/card/gic-card/card-list.vue
......@@ -140,7 +140,7 @@
</div>
<adjust-stock ref="adjust" title="调整可占用库存" :show.sync="adjustStock" :total-count="currentCard.remainedStock" @handleSubmit="adjustStockBack" /><!-- 调整库存 -->
<sync-stock :visible.sync="syncStock.visible" :coupon-id="syncStock.couponId" :type="1" @syncSuccess="getTableList" /><!-- 同步库存 -->
<import-code :coupon-id="codeDialog.couponId" ref="importCode" :visible.sync="codeDialog.visible" @close="(len) => { if(len) { getTableList(); } }" /><!-- 导入券码 -->
<import-code :coupon-id="codeDialog.couponId" ref="importCode" :visible.sync="codeDialog.visible" @success="getTableList" @close="(len) => { if(len) { getTableList(); } }" /><!-- 导入券码 -->
</div>
</template>
......
src/views/card/gic-card/module/import-code.vue
<template>
<el-dialog title="批量导入券码" :visible.sync="visible" width="600px" @close="close" :close-on-click-modal="false" :show-close="!loading">
<el-form label-width="120px">
<el-form-item label="选择文件" class="is-required">
<span class="file-style inline-block" style="position:relative">
<input style="position:absolute;top:3px;opacity:0;" type="file" name="file" accept=".csv" ref="file" @change="change">
<el-button class="dashed" @click="triggerClick"><i class="iconfont-components4 icon-cp-shangc upload-icon mr5"></i>上传</el-button>
</span>
<el-button type="text" class="ml10" @click="downloadCouponCSV">点击下载CSV模板</el-button>
<el-popover placement="bottom" width="350" trigger="hover">
<el-dialog title="批量导入券码" :visible.sync="visible" width="600px" @close="close">
<el-form v-loading="loading" :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px">
<el-form-item prop="file" label="导入券码文件">
<input style="position:absolute;top:3px;opacity:0;height:0px;width:0px;" type="file" name="file" accept=".csv" ref="file" @change="change">
<el-button class="dashed" @click="$refs.file.click()"><i class="iconfont-components4 icon-cp-shangc upload-icon mr5"></i>上传</el-button>
<el-button type="text" class="ml20" @click="downloadCouponCSV">点击下载文件模板</el-button>
<el-popover placement="bottom" width="350" trigger="hover" open-delay="200">
<ul>
<li>1. 单次上传最多可支持 5000 条</li>
<li>2. 券码格式可由 6~20 位的数字或字母组成</li>
<li>3. 若券码为纯数字组成，为避免发生意外错误，请将其格式设置为 ‘文本’ 格式</li>
<li>4. 仅支持.csv 文件的导入 (建议直接下载模板，在模板的基础上进行数据的填充)</li>
</ul>
<el-button class="ml10" type="text" slot="reference">导入规则</el-button>
<el-button class="ml30" type="text" slot="reference">查看导入规则</el-button>
</el-popover>
<!-- <el-button type="text" class="ml10 hover-btn deep" @click="viewErrorList">导入失败记录</el-button> -->
<ul class="file-list">
<li v-for="(f, idx) in fileList" :key="idx">
<i class="el-icon-document gray03 fl"></i>
<p class="ellipsis-80">{{ f.name }}({{ f.size }}k)</p>
<i class="el-icon-success success-color fr"></i>
</li>
</ul>
<div v-if="fileName"><i class="el-icon-document mr10"></i>{{ fileName }}</div>
</el-form-item>
<el-form-item label="调整备注" class="is-required" v-if="!isAdd">
<el-input type="textarea" v-model="remark" class="w260" :col="4" />
<el-form-item prop="remark" label="调整备注">
<el-input type="textarea" v-model="ruleForm.remark" class="w260" :col="4" maxlength="240" show-word-limit />
</el-form-item>
</el-form>
<span slot="footer" class="dialog-footer">
<el-button type="primary" :disabled="loading" @click="close">确认</el-button>
<el-button @click="close">取消</el-button>
<el-button type="primary" :disabled="loading" @click="submitForm">确认</el-button>
</span>
</el-dialog>
</template>
<script>
// import { SUCCESS_CODE } from '@/config';
import { downloadCouponCSV, importCode } from '@/api/gic-card';
import gicCardApi, { downloadCouponCSV } from '@/api/gic-card';
const { importCode } = gicCardApi;
export default {
name: 'ImportCode',
props: {
......@@ -50,112 +43,70 @@ export default {
type: String,
required: true
},
openType: {
openType: { // 暂无用
type: String, // 打开方式
default: 'self', // self在本窗口打开 blank在新窗口打开
},
isAdd: {
// 新增点击上传直接上传 编辑展示备注，点击保存上传
type: Boolean,
default: true
}
},
data() {
const validateFile = (rule, value, callback) => {
console.log(this.$refs.file);
console.log(this.$refs.file.value);
if (this.$refs.file.value === '') {
callback(new Error('请导入券码文件'));
return;
}
callback();
};
return {
importCode,
loading: false,
fileList: [], // 已上传列表
file: undefined, // 储存当前上传文件
remark: ''
// fileList: [], // 已上传列表
ruleForm: {
remark: '',
},
rules: {
file: { required: true, validator: validateFile, trigger: 'blur' },
remark: { required: true, message: '请输入备注', trigger: 'change' }
},
fileName: '',
};
},
methods: {
change(e){
this.file = e.target.value;
change() {
this.fileName = this.$refs.file.files[0].name;
},
triggerClick() {
this.$refs.file.click();
submitForm() {
this.$refs.ruleForm.validate((valid) => {
if (!valid) {
return;
}
const file = this.$refs.file;
this.loading = true;
importCode({
file: file.files[0],
remark: this.ruleForm.remark,
couponId: this.couponId
}).then(res => {
this.loading = false;
this.$tips({ message: '上传成功', type: 'success' });
this.$refs.ruleForm.validateField('file');
this.$emit('success');
this.close();
}).catch(() => {
this.loading = false;
});
});
},
// change(e){
// console.log(e.target.value);
// this.file = e.target.files[0];
// },
// upload(){
// this.change();
// },
// 查看导入失败记录
// viewErrorList() {
// const { couponId } = this;
// if(this.openType === 'self') {
// this.$router.push(`/gic-card/code-error/list?id=${couponId}`);
// } else {
// // 新窗口
// let routeData = this.$router.resolve({ path: '/gic-card/code-error/list', query: { id: couponId } });
// window.open(routeData.href, '_blank');
// }
// },
downloadCouponCSV() {
window.open(downloadCouponCSV);
},
close() {
this.$emit('update:visible', false);
this.$emit('close', this.fileList.length);
this.fileName = '';
this.ruleForm.remark = '';
this.$refs.file.value = '';
this.$refs.ruleForm.resetFields();
}
},
};
</script>
<style lang="scss" scoped>
.file-style:hover .upload-trigger {
border-color: $blue;
}
.upload-ele .el-button {
border: none;
color: #c0c4cc;
/* margin-left: 16px; */
}
.upload-ele .el-button--small {
padding: 0;
}
.uploadText p{
line-height: 26px;
}
.pickup-upload{
display: inline-block;
vertical-align: top;
// margin-left: 10px;
.upload-trigger{
border-style: dashed;
margin-right: 10px;
.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;
}
}
}
}
.rule {
color: $gray03;
padding-top: 22px;
margin-top: 36px;
border-top: 1px solid $gray-separator;
margin-bottom: 11px;
& + ul {
color: $gray03;
li {
font-size:12px;
line-height:20px;
}
}
}
</style>
\ No newline at end of file
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