Commit 87b3fd5e by liangjianmin

feat(consignmentRecall): add bulk upload and template download functionality

- Implemented a file upload feature for batch recall using Excel formats (.xlsx, .xls).
- Added loading state management during file upload.
- Included a button for downloading the batch recall template to streamline user operations.
- Enhanced user feedback with success and error messages upon upload completion.
parent 0addfec2
No preview for this file type
......@@ -27,6 +27,12 @@
<div class="operation-button row verCenter">
<el-button type="primary" @click="$router.push('/createConsignmentRecallOrder')">生成寄售召回单</el-button>
<el-button type="danger" @click="popupEvent(2)">作废</el-button>
<el-upload action="/api/consignmentRecall/batchRecallUpload" :on-success="handleUploadSuccess" :on-error="handleUploadError" :before-upload="handleBeforeUpload" accept=".xlsx,.xls" :show-file-list="false" name="file" style="display: inline-block; margin-left: 10px;">
<el-button type="primary" :loading="uploadLoading">导入</el-button>
</el-upload>
<a href="http://cloud.liexindev.net/template/批量召回模板.xlsx" download style="text-decoration: none; margin-left: 10px;">
<el-button type="primary">下载模板</el-button>
</a>
<!--
<el-button type="primary" @click="popupEvent(1)">提交审核</el-button>
<el-button type="danger" @click="popupEvent(3)"> 收货信息</el-button>
......@@ -101,12 +107,12 @@
<script>
import Vue from 'vue';
import Menu from "@/components/menu.vue";
import { Autocomplete, Button, Cascader, DatePicker, Descriptions, DescriptionsItem, Dialog, Divider, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Link, Message, MessageBox, Option, Pagination, Popover, Select, Table, TableColumn, Tag, Tooltip } from 'element-ui'
import { Autocomplete, Button, Cascader, DatePicker, Descriptions, DescriptionsItem, Dialog, Divider, Dropdown, DropdownItem, DropdownMenu, Form, FormItem, Input, Link, Message, MessageBox, Option, Pagination, Popover, Select, Table, TableColumn, Tag, Tooltip, Upload } from 'element-ui'
import { pcaTextArr } from 'element-china-area-data'
Vue.prototype.$message = Message
Vue.prototype.$confirm = MessageBox.confirm;
Vue.use(Button).use(Link).use(Cascader).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete).use(Popover).use(Tag).use(Divider);
Vue.use(Button).use(Link).use(Cascader).use(Form).use(Select).use(Option).use(Input).use(FormItem).use(Dialog).use(Tooltip).use(Autocomplete).use(Popover).use(Tag).use(Divider).use(Upload);
Vue.use(DatePicker).use(Dropdown).use(DropdownMenu).use(DropdownItem).use(TableColumn).use(Table).use(Pagination).use(Descriptions).use(DescriptionsItem);
export default {
name: "consignmentRecall",
......@@ -147,6 +153,7 @@
district: '',//区
detail: ''//详细地址
},
uploadLoading: false,
formParam: {
recall_sn: '',
goods_name: '',
......@@ -246,6 +253,41 @@
this.multipleSelection = val;
},
/**
* 导入上传前校验,开启 loading
* @param file 上传的文件
* @return {boolean}
*/
handleBeforeUpload(file) {
var isExcel = /\.(xlsx|xls)$/i.test(file.name);
if (!isExcel) {
this.$message.error('仅支持上传 .xlsx 或 .xls 格式的文件');
return false;
}
this.uploadLoading = true;
return true;
},
/**
* 导入上传成功回调
* @param res 接口返回数据
*/
handleUploadSuccess(res) {
this.uploadLoading = false;
if (res.code === 0) {
var { success_total = 0, fail_total = 0 } = res.data || {};
this.$message.success(`导入完成,成功 ${success_total} 条,失败 ${fail_total} 条`);
this.getData();
} else {
this.$message.error(res.msg || '导入失败');
}
},
/**
* 导入上传失败回调
*/
handleUploadError() {
this.uploadLoading = false;
this.$message.error('导入失败,请重试');
},
/**
* 弹窗事件
*/
popupEvent(type) {
......
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 sign in to comment