|
@@ -4,12 +4,13 @@
|
|
class="importGuide-modal"
|
|
class="importGuide-modal"
|
|
:footer="null"
|
|
:footer="null"
|
|
:maskClosable="false"
|
|
:maskClosable="false"
|
|
- title="导入"
|
|
|
|
|
|
+ destroyOnClose
|
|
|
|
+ title="导入产品"
|
|
v-model="isShow"
|
|
v-model="isShow"
|
|
- @cancel="isShow=false"
|
|
|
|
- :width="750">
|
|
|
|
|
|
+ :closable="false"
|
|
|
|
+ :width="850">
|
|
<div class="importGuide-con">
|
|
<div class="importGuide-con">
|
|
- <div class="explain-con">
|
|
|
|
|
|
+ <div class="explain-con" v-show="step==0">
|
|
<div class="explain-item">
|
|
<div class="explain-item">
|
|
<div class="explain-tit">
|
|
<div class="explain-tit">
|
|
<span>1</span>准备导入
|
|
<span>1</span>准备导入
|
|
@@ -24,7 +25,7 @@
|
|
type="link"
|
|
type="link"
|
|
icon="download"
|
|
icon="download"
|
|
style="padding: 0 0 0 23px;"
|
|
style="padding: 0 0 0 23px;"
|
|
- :loading="exportLoading"
|
|
|
|
|
|
+ :loading="spinning"
|
|
@click="handleExport">下载导入模板</a-button>
|
|
@click="handleExport">下载导入模板</a-button>
|
|
</div>
|
|
</div>
|
|
<div class="explain-item">
|
|
<div class="explain-item">
|
|
@@ -46,39 +47,97 @@
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
+ <!-- 第二步 -->
|
|
|
|
+ <div v-show="step==1">
|
|
|
|
+ <!-- 可导入数据 -->
|
|
|
|
+ <p class="blue">可导入数据<span>{{ loadData.length }}</span>条</p>
|
|
|
|
+ <a-table
|
|
|
|
+ class="sTable"
|
|
|
|
+ ref="table"
|
|
|
|
+ size="small"
|
|
|
|
+ :rowKey="(record) => record.no"
|
|
|
|
+ :columns="nowColumns"
|
|
|
|
+ :dataSource="loadData"
|
|
|
|
+ :loading="spinning"
|
|
|
|
+ :scroll="{ y: 200 }"
|
|
|
|
+ :pagination="false"
|
|
|
|
+ bordered>
|
|
|
|
+ </a-table>
|
|
|
|
+ <!-- 不可导入数据 -->
|
|
|
|
+ <p class="red">不可导入数据<span>{{ unLoadData.length }}</span>条</p>
|
|
|
|
+ <a-table
|
|
|
|
+ class="unTable"
|
|
|
|
+ ref="unTable"
|
|
|
|
+ size="small"
|
|
|
|
+ :rowKey="(record) => record.no"
|
|
|
|
+ :columns="nowUnColumns"
|
|
|
|
+ :dataSource="unLoadData"
|
|
|
|
+ :loading="spinning"
|
|
|
|
+ :scroll="{ y: 200 }"
|
|
|
|
+ :pagination="false"
|
|
|
|
+ bordered>
|
|
|
|
+ </a-table>
|
|
|
|
+ </div>
|
|
<!-- 按钮 -->
|
|
<!-- 按钮 -->
|
|
<div class="btn-con">
|
|
<div class="btn-con">
|
|
|
|
+ <a-button
|
|
|
|
+ id="importGuide-cancel"
|
|
|
|
+ size="large"
|
|
|
|
+ class="button-cancel"
|
|
|
|
+ @click="handleCancel"
|
|
|
|
+ :disabled="spinning"
|
|
|
|
+ style="padding: 0 40px;margin-left: 15px;">取消</a-button>
|
|
<a-button
|
|
<a-button
|
|
type="primary"
|
|
type="primary"
|
|
id="importGuide-nextStep"
|
|
id="importGuide-nextStep"
|
|
size="large"
|
|
size="large"
|
|
class="button-primary"
|
|
class="button-primary"
|
|
@click="handlerNextStep"
|
|
@click="handlerNextStep"
|
|
- style="padding: 0 60px;">下一步</a-button>
|
|
|
|
|
|
+ v-if="step==0"
|
|
|
|
+ :disabled="spinning"
|
|
|
|
+ style="padding: 0 40px;margin-left: 15px;">下一步</a-button>
|
|
<a-button
|
|
<a-button
|
|
- id="importGuide-cancel"
|
|
|
|
|
|
+ type="default"
|
|
|
|
+ id="importGuide-prevStep"
|
|
size="large"
|
|
size="large"
|
|
- class="button-cancel"
|
|
|
|
- @click="isShow=false"
|
|
|
|
- style="padding: 0 60px;margin-left: 15px;">取消</a-button>
|
|
|
|
|
|
+ v-if="step==1"
|
|
|
|
+ class="button-primary"
|
|
|
|
+ @click="handlerPrevStep"
|
|
|
|
+ :disabled="spinning"
|
|
|
|
+ style="padding: 0 40px;margin-left: 15px;">上一步</a-button>
|
|
|
|
+ <a-button
|
|
|
|
+ type="primary"
|
|
|
|
+ id="chooseImport-submit"
|
|
|
|
+ v-if="step==1"
|
|
|
|
+ size="large"
|
|
|
|
+ class="button-primary"
|
|
|
|
+ @click="handleSubmit"
|
|
|
|
+ :disabled="spinning"
|
|
|
|
+ style="padding: 0 40px;margin-left: 15px;">确认导入</a-button>
|
|
|
|
+ <a-button
|
|
|
|
+ type="primary"
|
|
|
|
+ id="chooseImport-error"
|
|
|
|
+ v-if="step==1"
|
|
|
|
+ size="large"
|
|
|
|
+ class="button-error"
|
|
|
|
+ :disabled="spinning"
|
|
|
|
+ @click="handleError"
|
|
|
|
+ style="padding: 0 40px;margin-left: 15px;">导出错误项</a-button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
- <!-- 导入 -->
|
|
|
|
- <chooseImportModal :openModal="openImportModal" :paramsData="paramsData" @close="handleClose" @ok="hanldeOk" />
|
|
|
|
</a-modal>
|
|
</a-modal>
|
|
</template>
|
|
</template>
|
|
|
|
|
|
<script>
|
|
<script>
|
|
import { commonMixin } from '@/utils/mixin'
|
|
import { commonMixin } from '@/utils/mixin'
|
|
-// 组件
|
|
|
|
-import ChooseImportModal from './chooseImportModal.vue'
|
|
|
|
|
|
+import { hdExportExcel } from '@/libs/exportExcel'
|
|
import { Upload } from '@/components'
|
|
import { Upload } from '@/components'
|
|
// 接口
|
|
// 接口
|
|
-import { allocateBillDownload } from '@/api/allocateBill'
|
|
|
|
|
|
+import { allocateBillDownload, allocateBillParseProducts, allocateBillFailExcel, allocateBillBatchInsert } from '@/api/allocateBill'
|
|
export default {
|
|
export default {
|
|
name: 'TransferOutImportGuideModal',
|
|
name: 'TransferOutImportGuideModal',
|
|
mixins: [commonMixin],
|
|
mixins: [commonMixin],
|
|
- components: { ChooseImportModal, Upload },
|
|
|
|
|
|
+ components: { Upload },
|
|
props: {
|
|
props: {
|
|
openModal: { // 弹框显示状态
|
|
openModal: { // 弹框显示状态
|
|
type: Boolean,
|
|
type: Boolean,
|
|
@@ -92,24 +151,35 @@ export default {
|
|
data () {
|
|
data () {
|
|
return {
|
|
return {
|
|
isShow: this.openModal, // 是否打开弹框
|
|
isShow: this.openModal, // 是否打开弹框
|
|
- openImportModal: false, // 导入
|
|
|
|
attachAction: process.env.VUE_APP_API_BASE_URL + '/upload', // 上传文件路径
|
|
attachAction: process.env.VUE_APP_API_BASE_URL + '/upload', // 上传文件路径
|
|
paramsData: null, // 上传参数
|
|
paramsData: null, // 上传参数
|
|
uploadParams: { // 上传参数
|
|
uploadParams: { // 上传参数
|
|
savePathType: 'local'
|
|
savePathType: 'local'
|
|
},
|
|
},
|
|
- exportLoading: false// 导出按钮加载状态
|
|
|
|
|
|
+ spinning: false, // 导出按钮加载状态
|
|
|
|
+ step: 0,
|
|
|
|
+ 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: [] // 错误数据
|
|
}
|
|
}
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
- // 下一步
|
|
|
|
- handlerNextStep () {
|
|
|
|
- if (this.paramsData) {
|
|
|
|
- this.openImportModal = true
|
|
|
|
- } else {
|
|
|
|
- this.$message.warning('添加文件后再进行下一步操作!')
|
|
|
|
- }
|
|
|
|
- },
|
|
|
|
// 上传文件 change
|
|
// 上传文件 change
|
|
changeImport (file) {
|
|
changeImport (file) {
|
|
if (file) {
|
|
if (file) {
|
|
@@ -117,28 +187,122 @@ export default {
|
|
allocateSn: this.params.allocateSn || '',
|
|
allocateSn: this.params.allocateSn || '',
|
|
path: file
|
|
path: file
|
|
}
|
|
}
|
|
|
|
+ this.loadData = []
|
|
|
|
+ this.unLoadData = []
|
|
|
|
+ this.handlerNextStep()
|
|
|
|
+ } else {
|
|
|
|
+ this.paramsData = null
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- // 导入
|
|
|
|
- hanldeOk (obj) {
|
|
|
|
- if (obj && obj.length > 0) {
|
|
|
|
- this.$emit('ok', obj)
|
|
|
|
- this.isShow = false
|
|
|
|
|
|
+ // 下一步
|
|
|
|
+ handlerNextStep () {
|
|
|
|
+ if (this.paramsData) {
|
|
|
|
+ if (this.loadData.length == 0 && this.unLoadData.length == 0) {
|
|
|
|
+ this.getData()
|
|
|
|
+ }
|
|
|
|
+ this.step = 1
|
|
|
|
+ } else {
|
|
|
|
+ this.$message.warning('添加文件后再进行下一步操作!')
|
|
}
|
|
}
|
|
},
|
|
},
|
|
- // 关闭
|
|
|
|
- handleClose () {
|
|
|
|
- this.openImportModal = false
|
|
|
|
- this.isShow = false
|
|
|
|
|
|
+ // 上一步
|
|
|
|
+ handlerPrevStep () {
|
|
|
|
+ const _this = this
|
|
|
|
+ if (this.loadData.length) {
|
|
|
|
+ this.$confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ content: '当前页面数据未导入,是否返回上页?',
|
|
|
|
+ centered: true,
|
|
|
|
+ cancelText: '返回上页',
|
|
|
|
+ okText: '继续导入',
|
|
|
|
+ onOk () {
|
|
|
|
+ _this.step = 1
|
|
|
|
+ },
|
|
|
|
+ onCancel () {
|
|
|
|
+ _this.step = 0
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ _this.step = 0
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 取消或关闭
|
|
|
|
+ handleCancel () {
|
|
|
|
+ const _this = this
|
|
|
|
+ if (_this.loadData.length) {
|
|
|
|
+ this.$confirm({
|
|
|
|
+ title: '提示',
|
|
|
|
+ content: '当前页面数据未导入,是否取消导入操作?',
|
|
|
|
+ centered: true,
|
|
|
|
+ cancelText: '确认取消',
|
|
|
|
+ okText: '继续导入',
|
|
|
|
+ onOk () {
|
|
|
|
+ _this.step = 1
|
|
|
|
+ },
|
|
|
|
+ onCancel () {
|
|
|
|
+ _this.isShow = false
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ } else {
|
|
|
|
+ _this.isShow = false
|
|
|
|
+ }
|
|
|
|
+ },
|
|
|
|
+ // 获取表格数据
|
|
|
|
+ getData () {
|
|
|
|
+ const _this = this
|
|
|
|
+ this.spinning = true
|
|
|
|
+ // 获取列表数据 无分页
|
|
|
|
+ allocateBillParseProducts(this.paramsData).then(res => {
|
|
|
|
+ this.spinning = 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.spinning = true
|
|
|
|
+ allocateBillBatchInsert(this.loadData).then(res => {
|
|
|
|
+ if (res.status == 200) {
|
|
|
|
+ this.$emit('ok')
|
|
|
|
+ this.isShow = false
|
|
|
|
+ }
|
|
|
|
+ this.spinning = 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
|
|
|
|
+ })
|
|
},
|
|
},
|
|
- // 导出
|
|
|
|
|
|
+ // 下载模板
|
|
handleExport () {
|
|
handleExport () {
|
|
const _this = this
|
|
const _this = this
|
|
_this.spinning = true
|
|
_this.spinning = true
|
|
- _this.exportLoading = true
|
|
|
|
allocateBillDownload({}).then(res => {
|
|
allocateBillDownload({}).then(res => {
|
|
_this.spinning = false
|
|
_this.spinning = false
|
|
- _this.exportLoading = false
|
|
|
|
if (res.type == 'application/json') {
|
|
if (res.type == 'application/json') {
|
|
var reader = new FileReader()
|
|
var reader = new FileReader()
|
|
reader.addEventListener('loadend', function () {
|
|
reader.addEventListener('loadend', function () {
|
|
@@ -176,8 +340,15 @@ export default {
|
|
isShow (newValue, oldValue) {
|
|
isShow (newValue, oldValue) {
|
|
if (!newValue) {
|
|
if (!newValue) {
|
|
this.$emit('close')
|
|
this.$emit('close')
|
|
|
|
+ } else {
|
|
this.paramsData = null
|
|
this.paramsData = null
|
|
- this.$refs.importUpload.setFileList('')
|
|
|
|
|
|
+ if (this.$refs.importUpload) {
|
|
|
|
+ this.$refs.importUpload.setFileList('')
|
|
|
|
+ }
|
|
|
|
+ this.loadData = []
|
|
|
|
+ this.unLoadData = []
|
|
|
|
+ this.step = 0
|
|
|
|
+ this.spinning = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
@@ -221,12 +392,23 @@ export default {
|
|
width: 100%;
|
|
width: 100%;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+ .blue{
|
|
|
|
+ span{
|
|
|
|
+ color: #1890ff;
|
|
|
|
+ margin: 0 5px;
|
|
|
|
+ }
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
|
|
+ .red{
|
|
|
|
+ span{
|
|
|
|
+ color: #f5222d;
|
|
|
|
+ margin: 0 5px;
|
|
|
|
+ }
|
|
|
|
+ margin: 10px 0;
|
|
|
|
+ }
|
|
.btn-con{
|
|
.btn-con{
|
|
- margin: 10px 0 20px;
|
|
|
|
|
|
+ margin: 30px 0 20px;
|
|
text-align: center;
|
|
text-align: center;
|
|
- .button-cancel{
|
|
|
|
- font-size: 12px;
|
|
|
|
- }
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|