<template> <a-modal centered class="chooseImport-modal" :footer="null" :maskClosable="false" title="导入" v-model="isShow" @cancle="isShow=false" :width="900"> <div class="chooseImport-con"> <!-- 可导入数据 --> <p class="">可导入数据{{ loadData.length }}条</p> <a-table class="sTable" ref="table" size="small" :rowKey="(record) => record.goodsSn" :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.goodsCode" :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 60px;">确认导入</a-button> <a-button id="chooseImport-cancel" size="large" class="button-cancel" @click="isShow=false" style="padding: 0 60px;margin-left: 15px;">取消</a-button> </div> </div> </a-modal> </template> <script> import { promoRuleGoods } from '@/api/promoRule' export default { name: 'ChooseImportModal', props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, itemId: { type: [Number, String], default: '' }, paramsData: { type: Object, default: () => { return {} } } }, computed: { nowColumns () { let columns = this.columns if ((this.paramsData && this.paramsData.promoRuleType == 'BUY_PROD_GIVE_PROD') || (this.paramsData && this.paramsData.promoRuleType == 'BUY_PROD_GIVE_MONEY')) { // 买产品送产品/买产品送采购额 if (this.paramsData && this.paramsData.promoGoodsType == 'NORMAL_PROD') { // 正品 columns = this.columns } else if (this.paramsData && this.paramsData.promoGoodsType == 'PROMO_PROD') { // 促销 columns = this.promoColumns } } else if (this.paramsData && this.paramsData.promoRuleType == 'PROMO_PROD') { // 特价产品 if (this.paramsData && this.paramsData.promoGoodsType == 'PROMO_PROD') { // 促销 columns = this.promoSpecialColumns } } else if (this.paramsData && this.paramsData.promoRuleType == 'ADD_PRICE_PURCH') { // 加价换购 if (this.paramsData && this.paramsData.promoGoodsType == 'NORMAL_PROD') { // 正品 columns = this.columns } else if (this.paramsData && this.paramsData.promoGoodsType == 'PROMO_PROD') { // 促销 columns = this.promoSpecialColumns } } return columns }, nowUnColumns () { let columns = this.unColumns if ((this.paramsData && this.paramsData.promoRuleType == 'BUY_PROD_GIVE_PROD') || (this.paramsData && this.paramsData.promoRuleType == 'BUY_PROD_GIVE_MONEY')) { // 买产品送产品/买产品送采购额 if (this.paramsData && this.paramsData.promoGoodsType == 'NORMAL_PROD') { // 正品 columns = this.unColumns } else if (this.paramsData && this.paramsData.promoGoodsType == 'PROMO_PROD') { // 促销 columns = this.unPromoColumns } } else if (this.paramsData && this.paramsData.promoRuleType == 'PROMO_PROD') { // 特价产品 if (this.paramsData && this.paramsData.promoGoodsType == 'PROMO_PROD') { // 促销 columns = this.unPromoSpecialColumns } } else if (this.paramsData && this.paramsData.promoRuleType == 'ADD_PRICE_PURCH') { // 加价换购 if (this.paramsData && this.paramsData.promoGoodsType == 'NORMAL_PROD') { // 正品 columns = this.unColumns } else if (this.paramsData && this.paramsData.promoGoodsType == 'PROMO_PROD') { // 促销 columns = this.unPromoSpecialColumns } } return columns } }, data () { return { isShow: this.openModal, // 是否打开弹框 columns: [ // 正品 { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '产品编码', dataIndex: 'goodsCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: '起订量限制', dataIndex: 'orderGoodsUnitDictValue', align: 'center', customRender: function (text) { return text || '--' } }, { title: '起订数量', dataIndex: 'orderGoodsQty', align: 'center', customRender: function (text) { return text || '--' } } ], promoColumns: [ // 促销品 { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '产品编码', dataIndex: 'goodsCode', align: 'center', customRender: function (text) { return text || '--' } } ], promoSpecialColumns: [ // 特价产品/加价促销品 { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '产品编码', dataIndex: 'goodsCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: this.paramsData && this.paramsData.promoRuleType == 'PROMO_PROD' ? '特惠单价(¥)' : '换购单价(¥)', dataIndex: 'goodsPrice', width: 200, align: 'center', customRender: function (text) { return text || '--' } } ], loadData: [], unColumns: [ // 不可导入产品 正品 { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '产品编码', dataIndex: 'goodsCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: '起订量限制', dataIndex: 'orderGoodsUnitDictValue', align: 'center', customRender: function (text) { return text || '--' } }, { title: '起订数量', dataIndex: 'orderGoodsQty', align: 'center', customRender: function (text) { return text || '--' } }, { title: '备注', dataIndex: 'remark', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true } ], unPromoColumns: [ // 不可导入产品 促销品 { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '产品编码', dataIndex: 'goodsCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: '备注', dataIndex: 'remark', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true } ], unPromoSpecialColumns: [ // 不可导入产品 特价产品/加价促销品 { title: '序号', dataIndex: 'no', width: 80, align: 'center' }, { title: '产品编码', dataIndex: 'goodsCode', align: 'center', customRender: function (text) { return text || '--' } }, { title: this.paramsData && this.paramsData.promoRuleType == 'PROMO_PROD' ? '特惠单价(¥)' : '换购单价(¥)', dataIndex: 'goodsPrice', width: 200, align: 'center', customRender: function (text) { return text || '--' } }, { title: '备注', dataIndex: 'remark', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true } ], unLoadData: [], loading: false } }, methods: { getData () { const _this = this this.loading = true promoRuleGoods(this.paramsData).then(res => { this.loading = false if (res.status == 200) { if (res.data.okGoodsList && res.data.okGoodsList.length > 0) { res.data.okGoodsList.map((item, index) => { item.no = index + 1 }) } if (res.data.erroGoodsList && res.data.erroGoodsList.length > 0) { res.data.erroGoodsList.map((item, index) => { item.no = index + 1 }) } _this.loadData = res.data.okGoodsList || [] _this.unLoadData = res.data.erroGoodsList || [] } }) }, // 确认导入 handleSubmit () { if (this.loadData.length == 0) { this.$message.warning('无可导入产品!') } else { this.$emit('ok', this.loadData) this.isShow = 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{ font-size: 12px; } } } } </style>