完成商品分类选择和其他

TODO.md

@@ -32,15 +32,19 @@
 ## RearEnd Bugs
 
 - [ ] 批量导入接口[导入 excel 文件]缺失, 需要下载相对应的 excel 模板文件接口
-- [ ] 商品库接口。
-- [ ] 商品库分类接口(2 级) (3 级-带产品)
-- [ ] 根据商品 id 查询详情的接口
+- [x] 商品库接口。
+- [x] 商品库分类接口(2 级) (3 级-带产品)
+- [x] ~~根据商品 id 查询详情的接口~~
 - [ ] 商品库搜索商品接口
 
 -- 2023/12/12 --
 
-- [ ] 分类接口需要根据字段 展示全部分类数据或者 展示有商品的数据
-- [ ] 分类规格数据
+- [x] 分类接口需要根据字段 展示全部分类数据或者 展示有商品的数据
+- [x] 分类规格数据
+
+-- 2023/12/13 --
+
+- [ ] 新增商品。 修改商品时 需要分类中文展示
 
 ## Warning
 

src/router/index.js

@@ -53,6 +53,16 @@ const routes = [
     name: 'Goods',
     component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/goods.vue')
   },
+  {
+    path: '/applyfor/goods-specifications',
+    name: 'GoodsSpeci',
+    component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/goods-specifications.vue')
+  },
+  {
+    path: '/applyfor/goods-unit',
+    name: 'GoodsUnit',
+    component: () => import(/* webpackChunkName: "applyfor" */ '../views/applyfor/goods-unit-price.vue')
+  },
 
   // NOTE：我的审核状态
   {

src/views/applyfor/ProductStore.vue

@@ -1,18 +1,19 @@
 <template>
   <div class="product-store-container flex flex-col">
     <div class="product-store__header">
-      <div class="search-box">
+      <div class="search-box" v-if="type === '1'">
         <van-field v-model="searchVal" clearable placeholder="搜索" left-icon="search" @click="handleClickSearchBox" />
       </div>
       <div class="sub-title">
-        <span>商品库</span>
+        <span v-if="type === '2'">请选择商品分类</span>
+        <span v-else>商品库</span>
       </div>
     </div>
 
     <!-- 展示内容 -->
     <div class="product-store__main">
       <van-radio-group v-model="radioCategory">
-        <div class="row" v-for="(item, idx) in tableData" :key="idx">
+        <div class="row" v-for="(item, idx) in categoryData" :key="idx">
           <div class="row__header row__header--b-line flex flex-row flex-row-aic">
             <div class="row__header__content">
               {{ item.name }}
@@ -52,6 +53,12 @@
       </van-radio-group>
     </div>
 
+
+    <!-- 提交 -->
+    <div class="btn-container" v-if="type === '2'">
+      <div class="btn-span" @click="handleConfirmCategory">确定</div>
+    </div>
+
     <van-popup class="popup flex flex-col" v-model="popupVisibility" position="bottom" :style="{ height: '60%' }"
       closeable close-icon-position="top-right">
       <div class="popup__header">
@@ -328,7 +335,7 @@ export default {
     type: "1", // 页面状态。 默认1：商品选择。 可选项2：选择分类
     radioCategory: '', // 二级分类Id
     searchVal: '', // 搜索商品?
-    tableData: [], // 分类数据
+    categoryData: [], // 分类数据
     // NOTE: Popup data and context data
     popupVisibility: false,
     productData: [], // 弹出选择商品的数量等。
@@ -389,7 +396,7 @@ export default {
       row.val = item.id
     },
 
-    // 弹窗确认
+    // NOTE: popup confirm 确认数据正常
     handleConfirmInput() {
       try {
         let _list = this.productData
@@ -459,7 +466,7 @@ export default {
       return new Promise((resolve, reject) => {
         goodsApi.category().then(result => {
           if (result.code === 1) {
-            this.tableData = result.data
+            this.categoryData = result.data
             resolve()
           } else {
             reject()
@@ -485,6 +492,32 @@ export default {
           reject(error)
         })
       })
+    },
+
+    // NOTE: 确定选择的分类
+    handleConfirmCategory() {
+      let selId = this.radioCategory
+      let arrs = this.categoryData
+      for (let i = 0; i < arrs.length; i++) {
+        const row = arrs[i];
+        const childlist = row.childlist
+        for (let j = 0; j < childlist.length; j++) {
+          const item = childlist[j];
+          if (selId === item.id) {
+            let first = { ...row }
+            delete first.childlist
+            delete first.expand
+            vueBus.$emit('listenCategoryEvent', {
+              first,
+              second: { ...item }
+            })
+            break
+            // row, item,
+            // NOTE: 选中项这边
+          } else continue
+        }
+      }
+      this.$router.go(-1)
     }
   },
 

src/views/applyfor/components/CProductStore.vue

@@ -316,7 +316,11 @@ export default {
   }),
 
   created() {
+    // 商品库选择
     vueBus.$on('updateProductList', this.handleUpdateList)
+
+    // 添加/更新商品
+    vueBus.$on('changeGoods', this.handleAddOrUpdateData)
   },
 
   deactivated() {
@@ -337,6 +341,13 @@ export default {
     handleTest() {
       this.list.push({ name: 1 })
     },
+
+    // NOTE: 处理新增和修改商品
+    // 更新  flag = 3。 新增 flag = 1
+    handleAddOrUpdateData(data) {
+      console.log('%c add & update data >>>', 'background: blue; color: #fff', data);
+
+    },
     // NOTE: 商品库选择数据
     handleUpdateList(data) {
       const { customCount, goodsStock, item, GoodsPrice } = data
@@ -499,9 +510,14 @@ export default {
     },
     // NOTE: 添加新商品
     handleAddGoods() {
-      this.$toast('添加商品页面')
-      this.$router.push({
-        name: 'Goods'
+      this.$store.commit({
+        type: "app/ROUTE_ADD",
+        value: "Goods"
+      })
+      this.$nextTick(() => {
+        this.$router.push({
+          name: 'Goods'
+        })
       })
     }
   },
@@ -525,6 +541,7 @@ export default {
   beforeDestroy() {
     console.log('%c destory $off updateProductList >>>', 'background: blue; color: #fff',);
     vueBus.$off('updateProductList')
+    vueBus.$off('changeGoods')
   },
 }
 </script>

src/views/applyfor/components/CSelectImitate.vue

@@ -0,0 +1,74 @@
+<template>
+    <layout :title="$attrs.title" :required="$attrs.required">
+        <div class="custom-select-container flex flex-row flex-row-aic">
+            <div class="left" @click="$emit('click')">
+                <div v-if="value" class="value">{{ value }}</div>
+                <div v-else class="default">{{ placeholder }}</div>
+            </div>
+            <div class="right">
+                <van-icon v-if="value" :size="20" color="#A2A3A4" name="clear" @click="$emit('clear')" />
+                <van-icon color="#A2A3A4" :size="20" name="arrow" @click="$emit('click')" />
+            </div>
+        </div>
+    </layout>
+</template>
+
+<script>
+/**
+ * @description 当前组件只为展示UI和数据。
+ */
+import Layout from './Layout.vue';
+export default {
+    name: 'CSelectImitate',
+    components: {
+        Layout
+    },
+
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        placeholder: {
+            type: String,
+            default: '请选择'
+        }
+    },
+
+    data: () => ({
+
+    })
+}
+</script>
+
+<style lang="less" scoped>
+.custom-select {
+    &-container {
+        justify-content: space-between;
+
+        .left {
+            flex: 1;
+
+            .value {
+                font-size: 14px;
+                font-weight: 400;
+                color: #1A1A1F;
+                line-height: 20px;
+            }
+
+            .default {
+                font-size: 14px;
+                font-weight: 400;
+                color: #727273;
+                line-height: 20px;
+            }
+        }
+
+        .right {
+            .van-icon {
+                margin-left: 2px;
+            }
+        }
+    }
+}
+</style>

src/views/applyfor/components/IndexType1.vue

@@ -123,6 +123,7 @@ export default {
             }
 
             this.apply_goods = data.apply_goods.map(goods => ({
+                flag: 3, // NOTE: 默认接口返回数据是商品库来的
                 ...goods,
                 goods_stock: JSON.parse(goods.goods_stock)
             }))

src/views/applyfor/goods-specifications.vue

@@ -1,5 +1,32 @@
+<template>
+  <div class="specifications-container">
+    <div class="main">
+      <!-- 规格示例 -->
+      <div class="addbtn">
+        <van-icon name="plus" :size="18" />
+        添加规格
+      </div>
+      <!-- 内容 -->
+    </div>
+
+    <!-- btn -->
+    <div class="btn-container">
+      <div class="btn-span">提交</div>
+    </div>
+  </div>
+</template>
 <script>
 /**
  * @description 商品规格页面
  */
+export default {
+  name: 'GoodsSpeci',
+  data: () => ({
+    standars: []
+  }),
+  created() {
+    console.log('%c standars >>>', 'background: blue; color: #fff', this.$route.query.standars);
+
+  },
+}
 </script>

src/views/applyfor/goods.vue

@@ -1,31 +1,20 @@
 <template>
   <div class="goods-container flex flex-col">
     <div class="goods__main">
+      <c-select-imitate title="商品分类" :value="goods_category_text" @click="handleClickCategory"
+        @clear="handleClearCategory" />
 
-      <!-- TODO: 商品分类是否可以采用数据多级别联动。 不跳转页面 -->
-      <c-select
-        title="商品分类"
-      />
+      <c-input title="商品编号" v-model="goods_no" />
 
-      <c-input
-        title="商品编号"
-      />
+      <c-input title="商品名称" v-model="goods_name" />
 
-      <c-input
-        title="商品名称"
-      ></c-input>
+      <c-input title="商品品牌" v-model="goods_brand" />
 
-      <c-input
-        title="商品品牌"
-      ></c-input>
+      <c-select-imitate title="商品规格" :value="goodsStandarsTxt" @click="handleClickStandards"
+        @clear="handleClearStandards" />
+      <c-select-imitate title="单价及数量设置" :value="goodsStandarsTxt" @click="handleClickCategory"
+        @clear="handleClearStandards" />
 
-      <c-select
-        title="商品规格"
-      />
-
-      <c-select
-        title="单价及数量设置"
-      />
     </div>
 
     <div class="goods__footer">
@@ -41,13 +30,16 @@
   &-container {
     height: 100vh;
     justify-content: space-between;
+
     .layout-container {
       margin-top: 10px;
     }
+
     .btn-container {
       margin-top: initial;
     }
   }
+
   &__main {
     height: 0;
     flex: 1;
@@ -61,24 +53,97 @@
  * @description 添加商品/修改商品页
  * @date 2023/11/30
  * @param flag = edit 表示修改
- * @param goodsId = xxx 商品Id
+ * @param goods_id = xxx 商品Id
  */
 
+import vueBus from '@/utils/vueBus';
 import CInput from './components/CInput.vue';
 import CSelect from './components/CSelect.vue';
+import CSelectImitate from './components/CSelectImitate.vue'
 
 export default {
   name: 'Goods',
   name_cn: '商品', // 新增或修改商品单项时存在
   components: {
     CInput,
-    CSelect
+    CSelect,
+    CSelectImitate
+  },
+  computed: {
+    goodsStandarsTxt() {
+      if (this.standars.length) {
+        return `共${this.standars.length}个规格`
+      } else {
+        return ''
+      }
+    }
   },
   data: () => ({
-    flag: 'new', // 默认是新增
+    flag: '1', // 默认是新增:1 修改：3
+    id: '', // 与goods_id 相同
     goodsId: undefined, // 商品id
+    goods_category_first: '',
+    goods_category_id: '',
+    goods_category_text: '',
+    goods_no: '',
+    goods_name: '',
+    goods_brand: '',
+    standars: [], // string[]
+    goods_stock: [] // object[]
   }),
+  created() {
+    vueBus.$on('listenCategoryEvent', this.handleCategoryData)
+    vueBus.$on('listenStrandarsEvent', this.handleStandarsData)
+  },
   methods: {
+    handleClickCategory() {
+      this.$router.push({
+        name: 'ProductStore',
+        query: {
+          type: '2'
+        }
+      })
+    },
+    handleClearCategory() {
+      this.goods_category_first = ''
+      this.goods_category_id = ''
+      this.goods_category_text = ''
+    },
+    // NOTE: 处理商品分类数据
+    handleCategoryData(data) {
+      const { first, second } = data
+      this.goods_category_text = `${first.name}/${second.name}`
+      this.goods_category_first = first.id
+      this.goods_category_id = second.id
+    },
+    handleClickStandards() {
+      this.$router.push({
+        name: 'GoodsSpeci',
+        query: {
+          standars: this.standars.join(',')
+        }
+      })
+    },
+    handleClearStandards() {
+      this.standars = []
+    },
+    // NOTE: 更新规格数据
+    handleStandarsData(data) {
+      this.standars = data.value
+    },
+
+    handleClickUnit() {
+      this.$router.push({
+        name: 'GoodsUnit',
+        query: {
+          standars: this.standars.join(',')
+        }
+      })
+    }
+
+  },
+  beforeDestroy() {
+    vueBus.$off('listenCategoryEvent')
   }
 }
 </script>