| | |
| | | <template> |
| | | <div class="app-container"> |
| | | <div style="text-align: right; margin-bottom: 10px;"> |
| | | <el-button type="info" plain icon="Upload" @click="handleImport">导入</el-button> |
| | | <el-button type="warning" plain icon="Download" @click="handleExport" |
| | | :disabled="selectedRows.length !== 1">导出</el-button> |
| | | <el-button type="info" plain icon="Upload" @click="handleImport" |
| | | v-hasPermi="['product:bom:import']">导入</el-button> |
| | | <el-button type="warning" plain icon="Download" @click="handleExport" :disabled="selectedRows.length !== 1" |
| | | v-hasPermi="['product:bom:export']">导出</el-button> |
| | | <el-button type="primary" @click="handleAdd">新增</el-button> |
| | | <el-button type="danger" plain @click="handleBatchDelete" :disabled="selectedRows.length === 0">删除</el-button> |
| | | </div> |
| | |
| | | <ProductSelectDialog v-model="showProductSelectDialog" @confirm="handleProductSelect" single /> |
| | | |
| | | <!-- BOM导入对话框 --> |
| | | <el-dialog :title="upload.title" v-model="upload.open" width="400px" append-to-body> |
| | | <el-upload ref="uploadRef" :limit="1" accept=".xlsx, .xls" :headers="upload.headers" :action="upload.url" |
| | | :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" |
| | | :auto-upload="false" drag> |
| | | <el-icon class="el-icon--upload"><upload-filled /></el-icon> |
| | | <div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div> |
| | | <template #tip> |
| | | <div class="el-upload__tip text-center"> |
| | | <span>仅允许导入xls、xlsx格式文件。</span> |
| | | </div> |
| | | </template> |
| | | </el-upload> |
| | | <template #footer> |
| | | <div class="dialog-footer"> |
| | | <el-button type="primary" @click="submitFileForm">确 定</el-button> |
| | | <el-button @click="upload.open = false">取 消</el-button> |
| | | </div> |
| | | </template> |
| | | </el-dialog> |
| | | <ImportDialog ref="uploadRef" v-model="upload.open" :title="upload.title" :action="upload.url" |
| | | :headers="upload.headers" :disabled="upload.isUploading" :on-progress="handleFileUploadProgress" |
| | | :on-success="handleFileSuccess" :show-download-template="true" @confirm="submitFileForm" |
| | | @download-template="handleDownloadTemplate" @close="handleImportClose" /> |
| | | </div> |
| | | </template> |
| | | |
| | | <script setup> |
| | | import { ref, reactive, toRefs, onMounted, getCurrentInstance, defineAsyncComponent } from "vue"; |
| | | import { getToken } from "@/utils/auth"; |
| | | import { listPage, add, update, batchDelete, exportBom } from "@/api/productionManagement/productBom.js"; |
| | | import { listPage, add, update, batchDelete, exportBom, downloadTemplate } from "@/api/productionManagement/productBom.js"; |
| | | import { useRouter } from 'vue-router' |
| | | import { ElMessageBox } from 'element-plus' |
| | | import ProductSelectDialog from "@/views/basicData/product/ProductSelectDialog.vue"; |
| | | import ImportDialog from "@/components/Dialog/ImportDialog.vue"; |
| | | |
| | | const router = useRouter() |
| | | const { proxy } = getCurrentInstance() |
| | |
| | | upload.open = true; |
| | | }; |
| | | |
| | | // 关闭导入对话框时清除文件 |
| | | const handleImportClose = () => { |
| | | proxy.$refs["uploadRef"].clearFiles(); |
| | | }; |
| | | |
| | | // 文件上传中处理 |
| | | const handleFileUploadProgress = (event, file, fileList) => { |
| | | upload.isUploading = true; |
| | |
| | | const handleFileSuccess = (response, file, fileList) => { |
| | | upload.open = false; |
| | | upload.isUploading = false; |
| | | proxy.$refs["uploadRef"].handleRemove(file); |
| | | proxy.$refs["uploadRef"].clearFiles(); |
| | | if (response.code === 200) { |
| | | proxy.$modal.msgSuccess(response.msg || "导入成功"); |
| | | getList(); |
| | |
| | | }); |
| | | }; |
| | | |
| | | // 下载模板 |
| | | const handleDownloadTemplate = async () => { |
| | | const res = await downloadTemplate(); |
| | | // 返回的数据是否为空 |
| | | if (!res) { |
| | | proxy.$modal.msgError("下载失败,返回数据为空"); |
| | | return; |
| | | } |
| | | |
| | | const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' }); |
| | | const downloadElement = document.createElement('a'); |
| | | const href = window.URL.createObjectURL(blob); |
| | | |
| | | downloadElement.href = href; |
| | | downloadElement.download = "BOM模板.xlsx"; |
| | | |
| | | document.body.appendChild(downloadElement); |
| | | downloadElement.click(); |
| | | |
| | | document.body.removeChild(downloadElement); |
| | | window.URL.revokeObjectURL(href); |
| | | |
| | | proxy.$modal.msgSuccess("下载成功"); |
| | | }; |
| | | |
| | | // 查看详情 |
| | | const showDetail = (row) => { |
| | | router.push({ |