| 1 |
- {"remainingRequest":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!D:\\front\\item\\zyAdmin\\src\\pages\\product\\productList\\components\\goodsImport.vue?vue&type=script&lang=js","dependencies":[{"path":"D:\\front\\item\\zyAdmin\\src\\pages\\product\\productList\\components\\goodsImport.vue","mtime":1761614939050},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\babel-loader\\lib\\index.js","mtime":1761614927320},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":1761614927801},{"path":"D:\\front\\item\\zyAdmin\\node_modules\\vue-loader\\lib\\index.js","mtime":1761614937402}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQppbXBvcnQgeyBpbXBvcnRQcm9kdWN0SW1wb3J0IH0gZnJvbSAnQC9hcGkvZXhwb3J0JzsNCmltcG9ydCBTZXR0aW5nIGZyb20gJ0Avc2V0dGluZyc7DQppbXBvcnQgeyBnZXRDb29raWVzIH0gZnJvbSAnQC9saWJzL3V0aWwnOw0KaW1wb3J0IHsgaXNYbHNVcGxvYWQgfSBmcm9tICdAL3V0aWxzL2luZGV4JzsNCg0KZXhwb3J0IGRlZmF1bHQgew0KICBuYW1lOiAnZ29vZHNJbXBvcnQnLA0KICBkYXRhKCkgew0KICAgIHJldHVybiB7DQogICAgICB1cGxvYWRVcmw6IFNldHRpbmcuYXBpQmFzZVVSTCArICcvZmlsZS91cGxvYWQvMScsDQogICAgICBoZWFkZXI6IHsNCiAgICAgICAgJ0F1dGhvcmktemF0aW9uJzogJ0JlYXJlciAnICsgZ2V0Q29va2llcygndG9rZW4nKSwNCiAgICAgIH0sDQogICAgICBmaWxlTmFtZTogJycsDQogICAgICBmaWxlVXJsOiAnJywNCiAgICAgIGltcG9ydFN0YXR1czogZmFsc2UsDQogICAgICBpbXBvcnRMb2FkaW5nOiBmYWxzZSwNCiAgICAgIHJlc3VsdERhdGE6IHsNCiAgICAgICAgYWxsOiAwLA0KICAgICAgICBzdWNjZXNzOiAwLA0KICAgICAgICBmYWlsOiAwLA0KICAgICAgICBqdW1wOiAwLA0KICAgICAgfSwNCiAgICAgIHN0YXR1c0ltYWdlOiByZXF1aXJlKCdAL2Fzc2V0cy9pbWFnZXMvZmlsZS1zdWNjZXNzLnBuZycpLA0KICAgIH07DQogIH0sDQogIHdhdGNoOiB7DQogICAgcmVzdWx0RGF0YTogew0KICAgICAgaGFuZGxlcihuZXdWYWx1ZSkgew0KICAgICAgICBpZiAobmV3VmFsdWUuZmFpbCA+IDApIHsNCiAgICAgICAgICB0aGlzLnN0YXR1c0ltYWdlID0gcmVxdWlyZSgnQC9hc3NldHMvaW1hZ2VzL2ZpbGUtZmFpbC5wbmcnKTsNCiAgICAgICAgfSBlbHNlIHsNCiAgICAgICAgICB0aGlzLnN0YXR1c0ltYWdlID0gcmVxdWlyZSgnQC9hc3NldHMvaW1hZ2VzL2ZpbGUtc3VjY2Vzcy5wbmcnKTsNCiAgICAgICAgfQ0KICAgICAgfSwNCiAgICAgIGRlZXA6IHRydWUsIC8vIOm7mOiupOWAvOaYryBmYWxzZe+8jOS7o+ihqOaYr+WQpua3seW6puebkeWQrA0KICAgIH0sDQogIH0sDQogIG1vdW50ZWQoKSB7fSwNCiAgbWV0aG9kczogew0KICAgIGZpbGVDaGFuZ2UoZmlsZSwgZmlsZUxpc3QpIHsNCiAgICAgIGlmIChpc1hsc1VwbG9hZChmaWxlKSkgew0KICAgICAgICAvLyDpmZDliLYxME0NCiAgICAgICAgaWYgKGZpbGUuc2l6ZSA+PSAxMDQ4NTc2MCkgew0KICAgICAgICAgIHRoaXMuJG1lc3NhZ2UuZXJyb3IoJ+aWh+S7tuWkp+Wwj+S4jeiDvei2hei/hzEwTUInKTsNCiAgICAgICAgICByZXR1cm4gZmFsc2U7DQogICAgICAgIH0gZWxzZSB7DQogICAgICAgICAgdGhpcy5maWxlTmFtZSA9IGZpbGUubmFtZTsNCiAgICAgICAgfQ0KICAgICAgfSBlbHNlIHsNCiAgICAgICAgcmV0dXJuIGZhbHNlOw0KICAgICAgfQ0KICAgIH0sDQogICAgc2VsZWN0RmlsZSgpIHsNCiAgICAgIHRoaXMuaW1wb3J0U3RhdHVzID0gZmFsc2U7DQogICAgICB0aGlzLmltcG9ydExvYWRpbmcgPSBmYWxzZTsNCiAgICAgIC8vIOiwg+i1t+mAieaLqeaWh+S7tg0KICAgICAgdGhpcy4kcmVmc1sndXBsb2FkJ10uJHJlZnNbJ3VwbG9hZC1pbm5lciddLmhhbmRsZUNsaWNrKCk7DQogICAgfSwNCiAgICBoYW5kbGVTdWNjZXNzKHJlcywgZmlsZSwgZmlsZUxpc3QpIHsNCiAgICAgIGNvbnNvbGUubG9nKHJlcywgJzInKTsNCiAgICAgIGlmIChyZXMuc3RhdHVzID09PSAyMDApIHsNCiAgICAgICAgdGhpcy5maWxlVXJsID0gcmVzLmRhdGEuc3JjOw0KICAgICAgfQ0KICAgIH0sDQogICAgaW1wb3J0R29vZHMoKSB7DQogICAgICB0aGlzLmltcG9ydExvYWRpbmcgPSB0cnVlOw0KICAgICAgdGhpcy5pbXBvcnRTdGF0dXMgPSBmYWxzZTsNCiAgICAgIGltcG9ydFByb2R1Y3RJbXBvcnQoew0KICAgICAgICBmaWxlOiB0aGlzLmZpbGVVcmwsDQogICAgICB9KQ0KICAgICAgICAudGhlbigocmVzKSA9PiB7DQogICAgICAgICAgLy8g6L+U5Zue5a+85YWl57uT5p6cDQogICAgICAgICAgdGhpcy5pbXBvcnRTdGF0dXMgPSB0cnVlOw0KICAgICAgICAgIHRoaXMucmVzdWx0RGF0YSA9IHJlcy5kYXRhOw0KICAgICAgICB9KQ0KICAgICAgICAuY2F0Y2goKGVycikgPT4gew0KICAgICAgICAgIHRoaXMuaW1wb3J0TG9hZGluZyA9IGZhbHNlOw0KICAgICAgICAgIHRoaXMuaW1wb3J0U3RhdHVzID0gZmFsc2U7DQogICAgICAgICAgdGhpcy4kbWVzc2FnZS5lcnJvcihlcnIubXNnKTsNCiAgICAgICAgfSk7DQogICAgfSwNCiAgICBjbG9zZSgpIHsNCiAgICAgIHRoaXMuZmlsZVVybCA9ICcnOw0KICAgICAgdGhpcy5maWxlTmFtZSA9ICcnOw0KICAgICAgdGhpcy5pbXBvcnRTdGF0dXMgPSBmYWxzZTsNCiAgICAgIHRoaXMuJGVtaXQoJ2Nsb3NlJyk7DQogICAgfSwNCiAgICBkb3dubG9hZEZhaWxEYXRhKCkgew0KICAgICAgLy8g5LiL6L295aSx6LSl5pWw5o2uDQogICAgfSwNCiAgfSwNCn07DQo="},{"version":3,"sources":["goodsImport.vue"],"names":[],"mappings":";AAyEA;AACA;AACA;AACA;;AAEA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA;AACA","file":"goodsImport.vue","sourceRoot":"src/pages/product/productList/components","sourcesContent":["<!-- 商品导入 -->\r\n<template>\r\n <div class=\"goods-import\">\r\n <!-- 下载模板 -->\r\n <div class=\"download acea-row row-middle\">\r\n <span>上传前请先按Excel模板中的格式编辑内容</span>\r\n <img src=\"@/assets/images/excel-icon.png\" alt=\"\" />\r\n <a href=\"/product_migration.xlsx\" download class=\"download-text cup\">下载Excel模板</a>\r\n </div>\r\n\r\n <div class=\"goods-upload mt20\">\r\n <el-upload\r\n v-show=\"!fileUrl && !importStatus\"\r\n ref=\"upload\"\r\n class=\"upload-demo\"\r\n :drag=\"!fileUrl\"\r\n :show-file-list=\"false\"\r\n :action=\"uploadUrl\"\r\n :headers=\"header\"\r\n :before-upload=\"fileChange\"\r\n :on-success=\"handleSuccess\"\r\n accept=\".xls, .xlsx\"\r\n >\r\n <template>\r\n <img class=\"el-upload-dragger__icon mb20\" src=\"@/assets/images/upload-icon.png\" alt=\"\" />\r\n <div class=\"el-upload__text\">将文件拖到此处，或<em>点击添加</em></div>\r\n <div class=\"el-upload__trip\">支持 .xls，.xlsx，限10M以内</div>\r\n </template>\r\n </el-upload>\r\n <div v-show=\"fileUrl && !importStatus\" class=\"file-info\">\r\n <img class=\"el-upload-dragger__icon mb20\" src=\"@/assets/images/upload-icon.png\" alt=\"\" />\r\n <div class=\"el-upload__text\">{{ fileName }}</div>\r\n <div class=\"flex mt12\" v-if=\"fileUrl && !importLoading\">\r\n <div class=\"active-btn\" @click=\"selectFile\">重新上传</div>\r\n <div class=\"active-btn\" @click=\"fileUrl = ''\">删除</div>\r\n </div>\r\n <div class=\"el-upload__trip\" v-if=\"importLoading\">\r\n 正在导入，您可关闭当前弹窗，稍候可在列表查看导入结果\r\n <i class=\"el-icon-loading\"></i>\r\n </div>\r\n <el-button v-else class=\"btn-import\" type=\"primary\" size=\"small\" @click=\"importGoods\">立即导入</el-button>\r\n </div>\r\n <div v-show=\"fileUrl && importStatus\" class=\"file-info\">\r\n <img class=\"el-upload-dragger__icon mb20\" :src=\"statusImage\" alt=\"\" />\r\n <div class=\"el-upload__text\">\r\n 共导入 {{ resultData.all }} 个，成功 {{ resultData.success }} 个，失败 {{ resultData.fail }} 跳过\r\n {{ resultData.jump }} 个\r\n </div>\r\n <div class=\"el-upload__trip\" v-if=\"resultData.fail > 0\">\r\n 您可以下载失败数据，修改后再重新导入 <span class=\"active-btn\" @click=\"downloadFailData\">下载失败数据</span>\r\n </div>\r\n <div>\r\n <el-button class=\"btn-import\" size=\"small\" @click=\"selectFile\">再次导入</el-button>\r\n <el-button type=\"primary\" class=\"btn-import\" @click=\"close\">完成</el-button>\r\n </div>\r\n </div>\r\n </div>\r\n <!-- 导入规则 -->\r\n <div class=\"import-rule mt20\">\r\n <div class=\"rule-title\">导入规则</div>\r\n <!-- 1. 请先下载模板，在模板中按字段填写信息，然后上传该文件。\r\n2. 导入未完成之前，请勿关闭页面，否则可能数据错误。\r\n3. 文件大小不超过10MB。\r\n4. 限制导入10000行记录，超出部分请分多次导入。 -->\r\n <div class=\"rule-text\">1. 请先下载模板，在模板中按字段填写信息，然后上传该文件。</div>\r\n <div class=\"rule-text\">2. 导入未完成之前，请勿关闭页面，否则可能数据错误。</div>\r\n <div class=\"rule-text\">3. 文件大小不超过10MB。</div>\r\n <div class=\"rule-text\">4. 限制导入10000行记录，超出部分请分多次导入。</div>\r\n </div>\r\n </div>\r\n</template>\r\n\r\n<script>\r\nimport { importProductImport } from '@/api/export';\r\nimport Setting from '@/setting';\r\nimport { getCookies } from '@/libs/util';\r\nimport { isXlsUpload } from '@/utils/index';\r\n\r\nexport default {\r\n name: 'goodsImport',\r\n data() {\r\n return {\r\n uploadUrl: Setting.apiBaseURL + '/file/upload/1',\r\n header: {\r\n 'Authori-zation': 'Bearer ' + getCookies('token'),\r\n },\r\n fileName: '',\r\n fileUrl: '',\r\n importStatus: false,\r\n importLoading: false,\r\n resultData: {\r\n all: 0,\r\n success: 0,\r\n fail: 0,\r\n jump: 0,\r\n },\r\n statusImage: require('@/assets/images/file-success.png'),\r\n };\r\n },\r\n watch: {\r\n resultData: {\r\n handler(newValue) {\r\n if (newValue.fail > 0) {\r\n this.statusImage = require('@/assets/images/file-fail.png');\r\n } else {\r\n this.statusImage = require('@/assets/images/file-success.png');\r\n }\r\n },\r\n deep: true, // 默认值是 false，代表是否深度监听\r\n },\r\n },\r\n mounted() {},\r\n methods: {\r\n fileChange(file, fileList) {\r\n if (isXlsUpload(file)) {\r\n // 限制10M\r\n if (file.size >= 10485760) {\r\n this.$message.error('文件大小不能超过10MB');\r\n return false;\r\n } else {\r\n this.fileName = file.name;\r\n }\r\n } else {\r\n return false;\r\n }\r\n },\r\n selectFile() {\r\n this.importStatus = false;\r\n this.importLoading = false;\r\n // 调起选择文件\r\n this.$refs['upload'].$refs['upload-inner'].handleClick();\r\n },\r\n handleSuccess(res, file, fileList) {\r\n console.log(res, '2');\r\n if (res.status === 200) {\r\n this.fileUrl = res.data.src;\r\n }\r\n },\r\n importGoods() {\r\n this.importLoading = true;\r\n this.importStatus = false;\r\n importProductImport({\r\n file: this.fileUrl,\r\n })\r\n .then((res) => {\r\n // 返回导入结果\r\n this.importStatus = true;\r\n this.resultData = res.data;\r\n })\r\n .catch((err) => {\r\n this.importLoading = false;\r\n this.importStatus = false;\r\n this.$message.error(err.msg);\r\n });\r\n },\r\n close() {\r\n this.fileUrl = '';\r\n this.fileName = '';\r\n this.importStatus = false;\r\n this.$emit('close');\r\n },\r\n downloadFailData() {\r\n // 下载失败数据\r\n },\r\n },\r\n};\r\n</script>\r\n\r\n<style lang=\"scss\" scoped>\r\n.download {\r\n background-color: var(--prev-color-primary-light-9);\r\n padding: 12px;\r\n border-radius: 4px;\r\n color: #303133;\r\n font-size: 12px;\r\n img {\r\n width: 19px;\r\n height: 19px;\r\n margin: 0 4px 0 8px;\r\n }\r\n .download-text {\r\n color: var(--prev-color-primary);\r\n }\r\n}\r\n.goods-upload {\r\n width: 100%;\r\n ::v-deep .el-upload {\r\n width: 100%;\r\n .el-upload-dragger {\r\n width: 100%;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n padding: 170px 0;\r\n .el-upload-dragger__icon {\r\n width: 42px;\r\n height: 57px;\r\n }\r\n .el-upload__trip {\r\n font-weight: 400;\r\n font-size: 12px;\r\n color: #999999;\r\n margin-top: 6px;\r\n }\r\n }\r\n }\r\n .file-info {\r\n height: 342px;\r\n display: flex;\r\n align-items: center;\r\n justify-content: center;\r\n flex-direction: column;\r\n border: 1px dashed #d9d9d9;\r\n border-radius: 4px;\r\n margin-top: 10px;\r\n .active-btn {\r\n color: var(--prev-color-primary);\r\n font-size: 12px;\r\n font-weight: 400;\r\n margin: 0 6px;\r\n cursor: pointer;\r\n }\r\n .btn-import {\r\n margin-top: 26px;\r\n }\r\n .el-upload-dragger__icon {\r\n width: 42px;\r\n height: 57px;\r\n }\r\n .el-upload__trip {\r\n display: flex;\r\n align-items: center;\r\n font-weight: 400;\r\n font-size: 12px;\r\n color: #999;\r\n margin-top: 6px;\r\n }\r\n }\r\n}\r\n.import-rule {\r\n .rule-title {\r\n font-weight: 500;\r\n font-size: 14px;\r\n color: #303133;\r\n margin-bottom: 6px;\r\n }\r\n .rule-text {\r\n font-size: 12px;\r\n color: #303133;\r\n }\r\n}\r\n</style>\r\n"]}]}
|
