【新增】管理SKU页面

2024-10-18 13:37:05 +08:00
parent 4d8b597abf
commit 90a3e60e76
5 changed files with 277 additions and 19 deletions
--- a/src/assets/css/index.scss
+++ b/src/assets/css/index.scss
@@ -401,7 +401,7 @@ img {
 }

 .el-pagination {
-  margin-top: 40px;
+  margin-top: 20px;
  text-align: center;
 }

--- a/src/components/AiDialog.vue
+++ b/src/components/AiDialog.vue
@@ -3,7 +3,7 @@
    <el-dialog custom-class="ai-dialog" v-on="$listeners" v-bind="$attrs" :visible.sync="dialog">
      <div class="ai-dialog__header fill" slot="title" v-text="title"/>
      <div class="ai-dialog__content">
-        <div class="ai-dialog__content--wrapper pad-r8">
+        <div class="ai-dialog__content--wrapper">
          <slot/>
        </div>
      </div>
@@ -69,13 +69,13 @@ export default {

  .ai-dialog__content {
    overflow-y: auto;
-    padding-bottom: 4px;
-    max-height: 500px;
+    padding-bottom: 0px;
+    max-height: 550px;

    .ai-dialog__content--wrapper {
      height: 100%;
      overflow-x: hidden;
-      overflow-y: auto;
+      overflow-y: hidden;
    }
  }

--- a/src/router/index.js
+++ b/src/router/index.js
@@ -312,6 +312,14 @@ const router = new VueRouter({
          path: 'labelsPrint',
          name: 'labelsPrint',
          component: () => import('../view/lables/Print.vue')
+        },
+        {
+          path: 'skuManage',
+          name: 'skuManage',
+          component: () => import('../view/lables/SkuManage.vue'),
+          meta: {
+            activeMenu:'/labelsTemplate'
+          }
        }
      ]
    },
--- a/src/view/lables/SkuManage.vue
+++ b/src/view/lables/SkuManage.vue
@@ -0,0 +1,238 @@
+<template>
+  <ai-list class="Template">
+    <ai-title
+      slot="title"
+      title="管理SKU"
+      isShowBack
+      isShowBottomBorder
+      @onBackClick="$router.go(-1)">
+    </ai-title>
+    <template slot="content">
+      <ai-search-bar>
+        <template #left>
+          <el-button type="primary" size="small" @click="isShow = true">添加</el-button>
+        </template>
+        <template #right>
+        </template>
+      </ai-search-bar>
+      <ai-table
+        :tableData="tableData"
+        :col-configs="colConfigs"
+        :total="total"
+        :current.sync="search.current"
+        :size.sync="search.size"
+        style="margin-top: 8px;"
+        @getList="getList">
+        <el-table-column slot="productName" width="300px" :show-overflow-tooltip='true' label="商品名称"  fixed="left">
+          <template slot-scope="scope">
+            <div>
+              <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
+              {{ scope.row.productName }}
+            </div>
+          </template>
+        </el-table-column>
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+          <template v-slot="{ row }">
+            <div class="table-options">
+              <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
+              <el-button type="text" @click="toDetail(row.url)">删除</el-button>
+            </div>
+          </template>
+        </el-table-column>
+      </ai-table>
+      <ai-dialog
+        :visible.sync="isShow"
+        title="添加SKU"
+        width="1400px"
+        @confirm="onConfirm">
+        <ai-search-bar>
+          <template #left>
+            <el-select v-model="skuSearch.mallId" placeholder="请选择店铺" size="small" @change="onMallChange">
+              <el-option
+                v-for="item in $store.state.mallList"
+                :key="item.mallId"
+                :label="item.mallName"
+                :value="item.mallId">
+              </el-option>
+            </el-select>
+          </template>
+          <template #right>
+          </template>
+        </ai-search-bar>
+        <ai-table
+          height="400"
+          :tableData="skuList"
+          :col-configs="colConfigs"
+          :total="skuTotal"
+          :current.sync="skuSearch.current"
+          :size.sync="skuSearch.size"
+          style="margin-top: 8px;"
+          @getList="getSkuList"
+          :pageSizes="[10, 20, 50, 100, 500, 1000]"
+          v-loading="isLoading">
+          <el-table-column slot="productName" width="300px" :show-overflow-tooltip="true" label="商品名称"  fixed="left">
+            <template slot-scope="scope">
+              <div>
+                <el-image :src="scope.row.mainImageUrl" style="width: 40px; height: 40px" class="image" :preview-src-list="[scope.row.mainImageUrl]" />
+                {{ scope.row.productName }}
+              </div>
+            </template>
+          </el-table-column>
+        </ai-table>
+      </ai-dialog>
+    </template>
+  </ai-list>
+</template>
+
+<script>
+  import { sendChromeAPIMessage } from '@/api/chromeApi'
+  export default {
+    name: 'Template',
+
+    data () {
+      return {
+        colConfigs: [
+          // { slot: 'productName', label: '商品名称', width: '300px', align: 'left', fixed: 'left' },
+          // { prop: 'category', label: '分类', width: '140px', align: 'left', fixed: 'left' },
+          { prop: 'mallName', label: '店铺名称', align: 'left' },
+          { prop: 'labelCode', label: '条码编码', align: 'center' },
+          // { prop: 'productSkcId', label: 'SKC', align: 'left' },
+          { prop: 'productSkuId', label: 'SKU', align: 'center' },
+          // { prop: 'extCode', label: 'SKC货号', align: 'left' },
+          { prop: 'skuExtCode', label: 'SKU货号',  align: 'center' },
+          { prop: 'skuSpecName', label: '次销售属性', align: 'center' }
+        ],
+        tableData: [],
+        total: 0,
+        search: {
+          current: 1,
+          size: 100
+        },
+        skuSearch: {
+          current: 1,
+          size: 100,
+          mallId: ''
+        },
+        skuTotal: 0,
+        skuList: [],
+        isShow: false,
+        skuReqParams: {
+          page: 1,
+          pageSize: 100
+        },
+        isLoading: false
+      }
+    },
+
+    computed: {
+      currMall () {
+        if (!this.$store.state.mallList.length) {
+          return {}
+        }
+
+        return this.$store.state.mallList.filter(v => v.mallId === this.skuSearch.mallId)[0]
+      }
+    },
+
+    created () {
+      this.getList()
+    },
+
+    methods: {
+      toAdd () {
+        this.$router.push('/addLabelsTemplate')
+      },
+
+      requestSKUList () {
+        sendChromeAPIMessage({
+          url: 'bg-visage-mms/labelcode/pageQuery',
+          needMallId: true,
+          mallId: this.skuSearch.mallId,
+          anti: true,
+          data: {
+            page: this.skuSearch.size > 100 ? this.skuReqParams.page : this.skuSearch.current,
+            pageSize: this.skuSearch.size > 100 ? 100 : this.skuSearch.size
+          }
+        }).then(async (res) => {
+          if (res.errorCode == 1000000) {
+            const list = res.result.pageItems.map(v => {
+              return {
+                mallName: this.currMall.mallName,
+                productName: v.productName,
+                productSkuId: v.labelCodeVO.productSkuId,
+                labelCode: v.labelCodeVO.labelCode,
+                skuExtCode: v.labelCodeVO.skuExtCode,
+                skuSpecName: v.productSkuSpecList.map(item => {
+                  return item.specName
+                }).join(',')
+              }
+            })
+            this.skuTotal = res.result.total
+            this.skuList.push(...list)
+
+            if (this.skuSearch.size > 100 && (res.result.total > this.skuList.length)) {
+              this.skuReqParams.page++
+              await this.$sleepSync(5000)
+              this.requestSKUList()
+            } else {
+              this.isLoading = false
+            }
+          }
+        })
+      },
+
+      onMallChange (e) {
+        if (!e) {
+          this.skuList = []
+
+          return false
+        }
+
+        this.$userCheck(this.skuSearch.mallId).then(() => {
+          this.skuList = []
+          this.skuReqParams.page = 1
+          this.isLoading = true
+          this.requestSKUList()
+        }).catch(() => {
+          this.skuSearch.mallId = ''
+        })
+      },
+
+      getSkuList () {
+        if (!this.skuSearch.mallId) {
+          return this.$message.error('请选择店铺')
+        }
+
+        this.$userCheck(this.skuSearch.mallId).then(() => {
+          this.skuList = []
+          this.skuReqParams.page = 1
+          this.isLoading = true
+
+          this.requestSKUList()
+        }).catch(() => {
+          this.skuSearch.mallId = ''
+        })
+      },
+
+      getList () {
+        this.$http.post('/api/learning/pluginPage', null, {
+          params: {
+            ...this.search
+          }
+        }).then(res => {
+          if (res.code === 0) {
+            this.tableData = res.data.records
+            this.total = res.data.total
+          }
+        })
+      },
+
+      onConfirm () {
+
+      }
+    }
+  }
+</script>
+
+<style scoped lang="scss">
+</style>
--- a/src/view/lables/Template.vue
+++ b/src/view/lables/Template.vue
@@ -8,7 +8,7 @@
    <template slot="content">
      <ai-search-bar>
        <template #left>
-          <el-button type="primary" @click="toAdd">添加</el-button>
+          <el-button type="primary" size="small" @click="toAdd">添加</el-button>
        </template>
        <template #right>
        </template>
@@ -21,11 +21,12 @@
        :size.sync="search.size"
        style="margin-top: 8px;"
        @getList="getList">
-        <el-table-column slot="options" label="操作" align="center" fixed="right" width="140px">
+        <el-table-column slot="options" label="操作" align="center" fixed="right" width="220px">
          <template v-slot="{ row }">
            <div class="table-options">
-              <el-button type="text" @click="collection(row.id, row.isFavorite)">{{ row.isFavorite === '0' ? '收藏' : '取消收藏' }}</el-button>
-              <el-button type="text" @click="toDetail(row.url)">详情</el-button>
+              <el-button type="text" @click="toAddSku(row.url)">添加SKU</el-button>
+              <el-button type="text" @click="toAdd(row.url)">编辑</el-button>
+              <el-button type="text" @click="toDetail(row.url)">删除</el-button>
            </div>
          </template>
        </el-table-column>
@@ -42,23 +43,25 @@
      return {
        colConfigs: [
          { prop: 'name', label: '模板名称', align: 'left' },
-          { prop: 'createTime', label: '绑定SKU数量', align: 'center' },
+          { prop: 'count', label: '绑定SKU数量', align: 'center' },
          { prop: 'createTime', label: '创建时间', align: 'center' },
        ],
-        tableData: [],
+        tableData: [
+          {
+            name: '电池',
+            count: 2
+          }
+        ],
        total: 0,
        search: {
          current: 1,
-          size: 10,
-          categoryId: ''
-        },
-        cateList: [],
-        isFavorite: 0
+          size: 10
+        }
      }
    },

    created () {
-      this.getList()
+      // this.getList()
    },

    methods: {
@@ -66,17 +69,26 @@
        this.$router.push('/addLabelsTemplate')
      },

+      toAddSku () {
+        this.$router.push('/skuManage')
+      },
+
      getList () {
+        console.log(this.tableData)
        this.$http.post('/api/learning/pluginPage', null, {
          params: {
            ...this.search
          }
        }).then(res => {
          if (res.code === 0) {
-            this.tableData = res.data.records
-            this.total = res.data.total
+            // this.tableData = res.data.records
+            // this.total = res.data.total
          }
        })
+      },
+
+      onConfirm () {
+
      }
    }
  }