| 1 |
- {"remainingRequest":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js??vue-loader-options!C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\product\\productList\\components\\goodsImport.vue?vue&type=style&index=0&id=8453a830&lang=scss&scoped=true","dependencies":[{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\src\\pages\\product\\productList\\components\\goodsImport.vue","mtime":1761185180166},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\css-loader\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\loaders\\stylePostLoader.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\postcss-loader\\src\\index.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\sass-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\cache-loader\\dist\\cjs.js","mtime":499162500000},{"path":"C:\\Users\\Administrator\\Desktop\\crmeb5.0\\template\\admin\\node_modules\\vue-loader\\lib\\index.js","mtime":499162500000}],"contextDependencies":[],"result":[{"type":"Buffer","data":"base64:DQouZG93bmxvYWQgew0KICBiYWNrZ3JvdW5kLWNvbG9yOiB2YXIoLS1wcmV2LWNvbG9yLXByaW1hcnktbGlnaHQtOSk7DQogIHBhZGRpbmc6IDEycHg7DQogIGJvcmRlci1yYWRpdXM6IDRweDsNCiAgY29sb3I6ICMzMDMxMzM7DQogIGZvbnQtc2l6ZTogMTJweDsNCiAgaW1nIHsNCiAgICB3aWR0aDogMTlweDsNCiAgICBoZWlnaHQ6IDE5cHg7DQogICAgbWFyZ2luOiAwIDRweCAwIDhweDsNCiAgfQ0KICAuZG93bmxvYWQtdGV4dCB7DQogICAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogIH0NCn0NCi5nb29kcy11cGxvYWQgew0KICB3aWR0aDogMTAwJTsNCiAgOjp2LWRlZXAgLmVsLXVwbG9hZCB7DQogICAgd2lkdGg6IDEwMCU7DQogICAgLmVsLXVwbG9hZC1kcmFnZ2VyIHsNCiAgICAgIHdpZHRoOiAxMDAlOw0KICAgICAgZGlzcGxheTogZmxleDsNCiAgICAgIGFsaWduLWl0ZW1zOiBjZW50ZXI7DQogICAgICBqdXN0aWZ5LWNvbnRlbnQ6IGNlbnRlcjsNCiAgICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQogICAgICBwYWRkaW5nOiAxNzBweCAwOw0KICAgICAgLmVsLXVwbG9hZC1kcmFnZ2VyX19pY29uIHsNCiAgICAgICAgd2lkdGg6IDQycHg7DQogICAgICAgIGhlaWdodDogNTdweDsNCiAgICAgIH0NCiAgICAgIC5lbC11cGxvYWRfX3RyaXAgew0KICAgICAgICBmb250LXdlaWdodDogNDAwOw0KICAgICAgICBmb250LXNpemU6IDEycHg7DQogICAgICAgIGNvbG9yOiAjOTk5OTk5Ow0KICAgICAgICBtYXJnaW4tdG9wOiA2cHg7DQogICAgICB9DQogICAgfQ0KICB9DQogIC5maWxlLWluZm8gew0KICAgIGhlaWdodDogMzQycHg7DQogICAgZGlzcGxheTogZmxleDsNCiAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgIGp1c3RpZnktY29udGVudDogY2VudGVyOw0KICAgIGZsZXgtZGlyZWN0aW9uOiBjb2x1bW47DQogICAgYm9yZGVyOiAxcHggZGFzaGVkICNkOWQ5ZDk7DQogICAgYm9yZGVyLXJhZGl1czogNHB4Ow0KICAgIG1hcmdpbi10b3A6IDEwcHg7DQogICAgLmFjdGl2ZS1idG4gew0KICAgICAgY29sb3I6IHZhcigtLXByZXYtY29sb3ItcHJpbWFyeSk7DQogICAgICBmb250LXNpemU6IDEycHg7DQogICAgICBmb250LXdlaWdodDogNDAwOw0KICAgICAgbWFyZ2luOiAwIDZweDsNCiAgICAgIGN1cnNvcjogcG9pbnRlcjsNCiAgICB9DQogICAgLmJ0bi1pbXBvcnQgew0KICAgICAgbWFyZ2luLXRvcDogMjZweDsNCiAgICB9DQogICAgLmVsLXVwbG9hZC1kcmFnZ2VyX19pY29uIHsNCiAgICAgIHdpZHRoOiA0MnB4Ow0KICAgICAgaGVpZ2h0OiA1N3B4Ow0KICAgIH0NCiAgICAuZWwtdXBsb2FkX190cmlwIHsNCiAgICAgIGRpc3BsYXk6IGZsZXg7DQogICAgICBhbGlnbi1pdGVtczogY2VudGVyOw0KICAgICAgZm9udC13ZWlnaHQ6IDQwMDsNCiAgICAgIGZvbnQtc2l6ZTogMTJweDsNCiAgICAgIGNvbG9yOiAjOTk5Ow0KICAgICAgbWFyZ2luLXRvcDogNnB4Ow0KICAgIH0NCiAgfQ0KfQ0KLmltcG9ydC1ydWxlIHsNCiAgLnJ1bGUtdGl0bGUgew0KICAgIGZvbnQtd2VpZ2h0OiA1MDA7DQogICAgZm9udC1zaXplOiAxNHB4Ow0KICAgIGNvbG9yOiAjMzAzMTMzOw0KICAgIG1hcmdpbi1ib3R0b206IDZweDsNCiAgfQ0KICAucnVsZS10ZXh0IHsNCiAgICBmb250LXNpemU6IDEycHg7DQogICAgY29sb3I6ICMzMDMxMzM7DQogIH0NCn0NCg=="},{"version":3,"sources":["goodsImport.vue"],"names":[],"mappings":";AAyKA;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"]}]}
|
