<template> <a-modal centered class="chooseImport-modal" :footer="null" :maskClosable="false" title="导入" v-model="isShow" @cancel="isShow=false" :width="900"> <div class="chooseImport-con"> <!-- 可导入数据 --> <p class="">可导入数据{{ loadData.length }}条</p> <a-table class="sTable" ref="table" size="small" :rowKey="(record) => record.allocateSn" :columns="nowColumns" :dataSource="loadData" :loading="loading" :scroll="{ y: 200 }" :pagination="false" bordered> </a-table> <a-divider /> <!-- 不可导入数据 --> <p class="red">不可导入数据{{ unLoadData.length }}条</p> <a-table class="unTable" ref="unTable" size="small" :rowKey="(record) => record.errorDesc" :columns="nowUnColumns" :dataSource="unLoadData" :loading="loading" :scroll="{ y: 200 }" :pagination="false" bordered> </a-table> <!-- 按钮 --> <div class="btn-con"> <a-button type="primary" id="chooseImport-submit" size="large" :class="loadData.length==0?'button-grey':'button-primary'" @click="handleSubmit" style="padding: 0 40px;">确认导入</a-button> <a-button id="chooseImport-cancel" size="large" class="button-cancel" @click="isShow=false" style="padding: 0 40px;margin-left: 15px;">取消</a-button> <a-button type="primary" id="chooseImport-error" size="large" class="button-error" @click="handleError" style="padding: 0 40px;margin-left: 15px;">导出错误项</a-button> </div> </div> </a-modal> </template> <script> import { commonMixin } from '@/utils/mixin' import { hdExportExcel } from '@/libs/exportExcel' import { allocateBillParseProducts, allocateBillFailExcel } from '@/api/allocateBill' export default { name: 'TransferOutChooseImportModal', mixins: [commonMixin], props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, paramsData: { type: Object, default: () => { return {} } } }, data () { return { isShow: this.openModal, // 是否打开弹框 nowColumns: [ // 正品 { title: '序号', dataIndex: 'no', width: 70, align: 'center' }, { title: '产品编码', dataIndex: 'productCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: '产品名称', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' } }, { title: '数量', dataIndex: 'qtyText', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }, { title: '库存', dataIndex: 'currentStockQty', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }, { title: '单位', dataIndex: 'productUnit', width: 60, align: 'center', customRender: function (text) { return text || '--' } } ], nowUnColumns: [ // 促销品 { title: '序号', dataIndex: 'no', width: 70, align: 'center' }, { title: '产品编码', dataIndex: 'productCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: '产品名称', dataIndex: 'productName', align: 'center', customRender: function (text) { return text || '--' } }, { title: '数量', dataIndex: 'qtyText', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }, { title: '库存', dataIndex: 'currentStockQty', width: 80, align: 'center', customRender: function (text) { return ((text || text == 0) ? text : '--') } }, { title: '单位', dataIndex: 'productUnit', width: 60, align: 'center', customRender: function (text) { return text || '--' } }, { title: '备注', dataIndex: 'errorDesc', width: 180, align: 'center', customRender: function (text) { return text || '--' } } ], loadData: [], unLoadData: [], loading: false } }, methods: { getData () { const _this = this this.loading = true allocateBillParseProducts(this.paramsData).then(res => { this.loading = false if (res.status == 200) { if (res.data.okList && res.data.okList.length > 0) { res.data.okList.map((item, index) => { item.no = index + 1 }) } if (res.data.failList && res.data.failList.length > 0) { res.data.failList.map((item, index) => { item.no = index + 1 }) } _this.loadData = res.data.okList || [] _this.unLoadData = res.data.failList || [] } }) }, // 确认导入 handleSubmit () { if (this.loadData.length == 0) { this.$message.warning('无可导入产品!') } else { this.$emit('ok', this.loadData) this.isShow = false } }, // 导出 handleError () { const _this = this if (_this.unLoadData.length < 1) { _this.$message.info('暂无可导出错误项~') return } _this.spinning = true hdExportExcel(allocateBillFailExcel, _this.unLoadData, '产品导入错误项', function () { _this.spinning = false }) } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') this.loadData = [] this.unLoadData = [] } else { this.getData() } } } } </script> <style lang="less" scoped> .chooseImport-modal{ .chooseImport-con{ .red{ color: #f30; } .btn-con{ text-align: center; margin: 30px 0 20px; .button-cancel,.button-error{ font-size: 12px; } } } } </style>