{"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"]}]}