<template> <a-modal centered class="importGuide-modal" :footer="null" :maskClosable="false" title="导入产品" v-model="isShow" @cancel="isShow=false" :width="750"> <div class="importGuide-con"> <div class="explain-con"> <div class="explain-item"> <div class="explain-tit"> <span>1</span>准备导入 </div> <ul> <li>1)导入的Excel文件中必须包含名称为“产品编码”、“最大库存数(个)”、“最小库存数(个)”的列,且名称必须相同,其他列可自定义,不影响数据导入</li> <li><a :href="templUrl"><a-icon type="download" />下载导入模板</a></li> </ul> </div> <div class="explain-item"> <div class="explain-tit"> <span>2</span>上传数据文件 </div> <p>目前支持的文件类型*.xls,*.xlsx.</p> <div style="overflow: hidden;padding-left: 23px;"> <Upload id="importGuide-attachList" ref="importUpload" :maxNums="1" fileType="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet,application/vnd.ms-excel" uploadType="import" :action="attachAction" :uploadParams="uploadParams" upText="添加文件" @change="changeImport"></Upload> </div> </div> </div> <!-- 按钮 --> <div class="btn-con"> <a-button type="primary" id="importGuide-nextStep" size="large" class="button-primary" @click="handlerNextStep" style="padding: 0 60px;">下一步</a-button> <a-button id="importGuide-cancel" size="large" class="button-cancel" @click="isShow=false" style="padding: 0 60px;margin-left: 15px;">取消</a-button> </div> </div> <!-- 导入 --> <chooseImportModal :openModal="openImportModal" :paramsData="paramsData" @close="handleClose" @ok="hanldeOk" /> </a-modal> </template> <script> import ChooseImportModal from './chooseImportModal.vue' import { Upload } from '@/components' export default { name: 'ImportGuideModal', components: { ChooseImportModal, Upload }, props: { openModal: { // 弹框显示状态 type: Boolean, default: false }, params: { type: Object, default: null } }, data () { return { isShow: this.openModal, // 是否打开弹框 openImportModal: false, // 导入 attachAction: process.env.VUE_APP_API_BASE_URL + '/upload', paramsData: null, uploadParams: { savePathType: 'local' }, templUrl: location.protocol + '//' + location.host + '/templ/连锁调出产品导入模板.xlsx' } }, methods: { // 下一步 handlerNextStep () { if (this.paramsData) { this.openImportModal = true } else { this.$message.warning('添加文件后再进行下一步操作!') } }, // 上传文件 change changeImport (file) { if (file) { this.paramsData = { path: file, allocationLinkageOutSn: this.params.allocationLinkageOutSn } } }, // 导入 hanldeOk (obj) { if (obj && obj.length > 0) { this.$emit('ok', obj) this.isShow = false } }, // 关闭 handleClose () { this.openImportModal = false this.isShow = false } }, watch: { // 父页面传过来的弹框状态 openModal (newValue, oldValue) { this.isShow = newValue }, // 重定义的弹框状态 isShow (newValue, oldValue) { if (!newValue) { this.$emit('close') this.paramsData = null this.$refs.importUpload.setFileList('') } } } } </script> <style lang="less" scoped> .importGuide-modal{ .importGuide-con{ .explain-con{ .explain-item{ margin-bottom: 10px; .explain-tit{ font-weight: bold; span{ display: inline-block; width: 18px; height: 18px; line-height: 16px; text-align: center; margin-right: 5px; border-radius: 50%; border: 1px solid rgba(0, 0, 0, 0.3); } } p{ margin: 8px 0; padding-left: 23px; } ul{ list-style: none; padding: 0; padding-left: 23px; margin: 0; li{ line-height: 26px; } } } #importGuide-attachList{ width: 100%; } } .btn-con{ margin: 10px 0 20px; text-align: center; .button-cancel{ font-size: 12px; } } } } </style>