feat: 完成商品新增和修改

src/router/index.js

@@ -58,11 +58,6 @@ const routes = [
     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/styles/variables.less

@@ -11,7 +11,7 @@
 @text-bold-color: rgba(51, 51, 51, 1);
 
 @link-font-size: 16px;
-@link-color: rgba(0, 122, 255, 1);
+@link-color: #007aff;
 
 @status-success-color: rgba(82, 196, 26, 1);
 @status-warning-color: rgba(250, 173, 21, 1);

src/utils/import-vant.js

@@ -26,11 +26,13 @@ import {
     Checkbox,
     Radio,
     RadioGroup,
-    Stepper
+    Stepper,
+    Tag
 } from 'vant'
 
 Vue.use(Tab).use(Tabs).use(Popup).use(Toast).use(Field).use(Button).use(NavBar).use(Icon).use(Tabbar).use(TabbarItem).use(Picker)
 .use(Uploader).use(Calendar).use(DatetimePicker).use(ActionSheet).use(Switch).use(List).use(Dialog).use(Checkbox).use(Radio).use(RadioGroup).use(Stepper)
+.use(Tag)
 
 
 Vue.use(ImagePreview)

src/views/applyfor/components/CProductStore.vue

@@ -345,9 +345,21 @@ export default {
     // NOTE: 处理新增和修改商品
     // 更新  flag = 3。 新增 flag = 1
     handleAddOrUpdateData(data) {
-      console.log('%c add & update data >>>', 'background: blue; color: #fff', data);
-
+      if (!data) return
+      console.log('%c handle AddOrUpdate data >>>', 'background: blue; color: #fff', data);
+
+      const { flag } = data
+      if (flag === '3') { // update
+        // NOTE: 可能存在新商品无Id情况； 要兼容
+        const hasGoodsId = Boolean(data.goods_id)
+        if (!hasGoodsId) data.flag = '1'
+        let idx = this.list.findIndex(goods => hasGoodsId ? goods.goods_id === data.goods_id : goods.__id__ === data.__id__)
+        if (idx >= 0) this.list.splice(idx, 1, { ...data })
+      } else { // add
+        this.list.push({ ...data })
+      }
     },
+
     // NOTE: 商品库选择数据
     handleUpdateList(data) {
       const { customCount, goodsStock, item, GoodsPrice } = data
@@ -493,13 +505,21 @@ export default {
     },
 
 
-    // TODO: 更新领用数据时，是重新选择还是弹出弹框
-    handleUpdateRow() {
-      // this.$router.push({
-      //   name: 'ProductStore',
-      //   query
-      // })
-
+    // NOTE: 编辑Row
+    handleUpdateRow(item) {
+      this.$store.commit({
+        type: "app/ROUTE_ADD",
+        value: "Goods"
+      })
+      this.$nextTick(() => {
+        this.$router.push({
+          name: 'Goods',
+          query: {
+            flag: '3',
+            edit: JSON.stringify(item)
+          }
+        })
+      })
     },
 
     // 前往商品库列表
@@ -539,7 +559,6 @@ export default {
     }
   },
   beforeDestroy() {
-    console.log('%c destory $off updateProductList >>>', 'background: blue; color: #fff',);
     vueBus.$off('updateProductList')
     vueBus.$off('changeGoods')
   },

src/views/applyfor/goods-specifications.vue

@@ -1,32 +1,259 @@
 <template>
-  <div class="specifications-container">
+  <div class="specifications-container flex flex-col">
+    <div class="s-header flex flex-row flex-row-aic" v-show="goods_stock.length">
+      <span>商品规格</span>
+      <div class="icons">
+        <van-icon @click="handleRemoveAll" name="delete-o" :size="18" color="#828181" />
+        <van-icon @click="closeable = !closeable" name="setting-o" :size="closeable ? 20 : 18"
+          :color="closeable ? '#414141' : '#828181'" />
+      </div>
+    </div>
+    <div class="s-context flex flex-row" v-show="goods_stock.length">
+      <template v-for="(standar, idx) in goods_stock">
+        <van-tag :closeable="closeable" size="large" type="primary" @close="handleClose(standar, idx)"
+          @click="handleEdit(standar, idx)" :key="idx">
+          {{ standar.name }}
+        </van-tag>
+      </template>
+    </div>
+    <div class="s-btn" v-show="goods_stock.length">
+      <van-icon name="plus" :size="14" />
+      <span @click="visibilityDialog = true">追加新规格</span>
+    </div>
+
     <div class="main">
+      <!-- 内容 -->
+      <div class="standars-box" v-if="goods_stock.length">
+        <!-- NOTE: goods_stock -->
+        <div class="row" v-for="(item, idx) in goods_stock" :key="idx">
+          <div class="row__header flex flex-row flex-row-aic">
+            <span>
+              {{ item.name }}
+            </span>
+            <!-- <van-icon v-show="closeable" @click="handleClose(item, idx)" name="delete-o" :size="18" color="#b8b8b8" /> -->
+          </div>
+          <div class="row__main">
+            <c-input title="价格" :maxlength="9" :showWordLimit="false" input-type="number" v-model="item.price" />
+            <c-input title="数量" :maxlength="5" :showWordLimit="false" input-type="digit" v-model="item.stock" />
+          </div>
+        </div>
+
+      </div>
+
       <!-- 规格示例 -->
-      <div class="addbtn">
+      <div class="addbtn" v-else @click="visibilityDialog = true">
         <van-icon name="plus" :size="18" />
         添加规格
       </div>
-      <!-- 内容 -->
     </div>
 
+    <van-dialog v-model="visibilityDialog" title="添加/修改规格" show-cancel-button confirm-button-color="#007aff"
+      @cancel="handleCancelEvent" @confirm="handleConfirmEdit" :before-close="handleBeforeCloseDialog">
+      <van-field v-model.trim="templateValue" center input-align="center" placeholder="蓝色,165cm" />
+    </van-dialog>
+
     <!-- btn -->
-    <div class="btn-container">
-      <div class="btn-span">提交</div>
+    <div class="btn-container" v-if="goods_stock.length">
+      <div class="btn-span" @click="handleSubmitStandars">提交</div>
     </div>
   </div>
 </template>
 <script>
+import CInput from './components/CInput.vue'
+import vueBus from '@/utils/vueBus'
+
 /**
  * @description 商品规格页面
  */
 export default {
   name: 'GoodsSpeci',
+  components: {
+    CInput
+  },
   data: () => ({
-    standars: []
+    templateValue: '',
+    visibilityDialog: false,
+    closeable: false,
+    editIdx: -1,
+    goods_stock: [], // {name, price, stock}
   }),
   created() {
-    console.log('%c standars >>>', 'background: blue; color: #fff', this.$route.query.standars);
-
+    // NOTE: 携带规格更新
+    this.__init__()
   },
+  methods: {
+    __init__() {
+      // NOTE: 携带规格更新
+      const { goods_stock } = this.$route.query
+      const stocks = goods_stock ? JSON.parse(goods_stock) : []
+
+      if (stocks.length) {
+        this.goods_stock = [...stocks].reverse()
+      }
+    },
+    // Remove all standars
+    handleRemoveAll() {
+      this.$dialog.confirm({
+        message: '是否删除全部规格',
+        confirmButtonColor: '#007aff',
+      }).then(() => {
+        this.goods_stock = []
+      }).catch(() => { })
+    },
+
+    // Close signal
+    handleClose(standar, idx) {
+      this.$dialog.confirm({
+        message: `是否删除规格 ${standar.name}`,
+        confirmButtonColor: '#007aff',
+      }).then(() => {
+        this.goods_stock.splice(idx, 1)
+      }).catch(() => { })
+    },
+
+    // Edit signal
+    handleEdit(standar, idx) {
+      this.templateValue = standar
+      this.visibilityDialog = true
+      this.editIdx = idx
+    },
+
+    // Close dialog on before-close
+    handleBeforeCloseDialog(action, done) {
+      if (action === 'confirm' && !this.templateValue) return done(false)
+      const isRepeat = this.goods_stock.some(stock => stock.name === this.templateValue)
+      if (isRepeat) return done(false)
+      return done()
+    },
+
+    handleCancelEvent() {
+      this.visibilityDialog = false
+      this.templateValue = ''
+      this.editIdx = -1
+    },
+    // Confirm edit
+    handleConfirmEdit() {
+      const val = this.templateValue
+      if (!val) return this.$toast('规格名称为空')
+      const isRepeat = this.goods_stock.some(stock => stock.name === val)
+      if (isRepeat) return this.$toast('规格名称重复！')
+
+      if (this.editIdx >= 0) {
+        this.goods_stock.splice(this.editIdx, 1, {
+          ...this.goods_stock[this.editIdx],
+          name: val
+        })
+      } else {
+        this.goods_stock.unshift({
+          name: val,
+          price: '',
+          stock: '',
+        })
+      }
+      this.$nextTick(() => {
+        this.visibilityDialog = false
+        this.templateValue = ''
+        this.editIdx = -1
+      })
+    },
+
+    // submit data
+    handleSubmitStandars() {
+      const arrs = this.goods_stock
+      let isExist = false
+      // NOTE: 判断内容是否存在
+      for (let i = 0; i < arrs.length; i++) {
+        const { price, stock, name } = arrs[i];
+        if (!price || !stock) {
+          isExist = true
+          this.$toast(`规则${name}的${!price ? '价格' : '数量'}为空，请填写`)
+          break
+        }
+      }
+
+      if (isExist) return
+
+      vueBus.$emit('listenStrandarsEvent', [...arrs].reverse())
+
+      this.$nextTick(() => {
+        this.$router.go(-1)
+      })
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.specifications-container {
+  height: 100vh;
+  justify-content: space-between;
+
+  .s-header {
+    justify-content: space-between;
+    background-color: #fff;
+    font-size: 18px;
+    padding: 10px;
+    border-bottom: 1px solid #eee;
+
+    .icons {
+      letter-spacing: 8px;
+    }
+  }
+
+  .s-btn {
+    padding: 12px 0;
+    text-align: center;
+    font-size: 14px;
+    color: #3290C4;
+  }
+
+  .s-context {
+    flex-wrap: wrap;
+    gap: 12px;
+    padding: 18px 10px;
+    background-color: #fff;
+  }
+
+  .main {
+    height: 0;
+    flex: 1;
+    overflow: auto;
+
+    .addbtn {
+      width: 195px;
+      height: 42px;
+      line-height: 42px;
+      text-align: center;
+      background: #FFFFFF;
+      border-radius: 21px;
+      border: 1px solid #3290C4;
+      font-size: 16px;
+      font-weight: 500;
+      color: #3290C4;
+      margin: 80px auto;
+    }
+
+    .row {
+      &__header {
+        justify-content: space-between;
+        padding: 0 10px;
+        font-size: 14px;
+        font-family: PingFangSC, PingFang SC;
+        font-weight: 400;
+        color: #727273;
+        line-height: 32px;
+      }
+
+      &__main {
+        .layout-container {
+          border-bottom: 1px solid #eee;
+
+          &:last-child {
+            border-bottom: initial;
+          }
+        }
+      }
+    }
+  }
 }
-</script>
+</style>

src/views/applyfor/goods-unit-price.vue

@@ -1,5 +0,0 @@
-<script>
-/**
- * @description 商品单价和数量
- */
-</script>

src/views/applyfor/goods.vue

@@ -1,7 +1,10 @@
 <template>
   <div class="goods-container flex flex-col">
     <div class="goods__main">
-      <c-select-imitate title="商品分类" :value="goods_category_text" @click="handleClickCategory"
+
+      <!-- NOTE: flag === 3 时、商品分类不展示。因为无法展示禁用状态 -->
+      <!-- <div class="tips">商品编辑不能修改分类</div> -->
+      <c-select-imitate v-if="flag === '1'" title="商品分类" :value="goods_category_text" @click="handleClickCategory"
         @clear="handleClearCategory" />
 
       <c-input title="商品编号" v-model="goods_no" />
@@ -12,14 +15,11 @@
 
       <c-select-imitate title="商品规格" :value="goodsStandarsTxt" @click="handleClickStandards"
         @clear="handleClearStandards" />
-      <c-select-imitate title="单价及数量设置" :value="goodsStandarsTxt" @click="handleClickCategory"
-        @clear="handleClearStandards" />
-
     </div>
 
     <div class="goods__footer">
       <div class="btn-container">
-        <div class="btn-span">提交</div>
+        <div class="btn-span" @click="handleConfirmSubmit">{{ flag === '3' ? '修改' : '提交' }}</div>
       </div>
     </div>
   </div>
@@ -52,13 +52,13 @@
 /**
  * @description 添加商品/修改商品页
  * @date 2023/11/30
- * @param flag = edit 表示修改
+ * @param flag = 3 表示修改
  * @param goods_id = xxx 商品Id
  */
 
 import vueBus from '@/utils/vueBus';
 import CInput from './components/CInput.vue';
-import CSelect from './components/CSelect.vue';
+// import CSelect from './components/CSelect.vue';
 import CSelectImitate from './components/CSelectImitate.vue'
 
 export default {
@@ -66,34 +66,49 @@ export default {
   name_cn: '商品', // 新增或修改商品单项时存在
   components: {
     CInput,
-    CSelect,
+    // CSelect,
     CSelectImitate
   },
   computed: {
     goodsStandarsTxt() {
-      if (this.standars.length) {
-        return `共${this.standars.length}个规格`
+      if (this.goods_stock.length) {
+        return `共${this.goods_stock.length}个规格`
       } else {
         return ''
       }
-    }
+    },
   },
   data: () => ({
     flag: '1', // 默认是新增:1 修改：3
-    id: '', // 与goods_id 相同
-    goodsId: undefined, // 商品id
+    id: '', // 自定义商品的Id
+    goods_id: 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)
+    const { flag } = this.$route.query
+    if (flag === '3') { // update state
+      const row = JSON.parse(this.$route.query.edit)
+      if (row) {
+        this.flag = flag
+        this.goods_id = row.goods_id
+        this.goods_category_first = row.goods_category_first
+        this.goods_category_id = row.goods_category_id
+        this.goods_no = row.goods_no
+        this.goods_name = row.goods_name
+        this.goods_brand = row.goods_brand
+        this.goods_stock = row.goods_stock
+        if (row.__id__) this.id = row.__id__ // 自定义添加商品才有
+      }
+    }
+
   },
   methods: {
     handleClickCategory() {
@@ -120,30 +135,55 @@ export default {
       this.$router.push({
         name: 'GoodsSpeci',
         query: {
-          standars: this.standars.join(',')
+          // standars: this.standars.join(','),
+          goods_stock: JSON.stringify(this.goods_stock)
         }
       })
     },
     handleClearStandards() {
-      this.standars = []
+      // this.standars = []
+      this.goods_stock = []
     },
+
     // NOTE: 更新规格数据
-    handleStandarsData(data) {
-      this.standars = data.value
+    handleStandarsData(arrs) {
+      console.log('%c ???? >>>', 'background: blue; color: #fff', arrs);
+
+      // this.standars = arrs
+      this.goods_stock = [...arrs]
     },
 
-    handleClickUnit() {
-      this.$router.push({
-        name: 'GoodsUnit',
-        query: {
-          standars: this.standars.join(',')
+    // 确认提交
+    handleConfirmSubmit() {
+
+      const temporary = {
+        flag: this.flag,
+        goods_category_first: this.goods_category_first,
+        goods_category_id: this.goods_category_id,
+        goods_no: this.goods_no,
+        goods_name: this.goods_name,
+        goods_brand: this.goods_brand,
+        goods_stock: this.goods_stock
+      }
+
+      if (this.flag === '3') { // update online goods
+        if (this.goods_id) { // 线上商品
+          temporary.goods_id = this.goods_id
+        } else if (this.id) { // 新增商品-修改
+          temporary['__id__'] = this.id
         }
+      } else temporary['__id__'] = Date.now()
+
+      vueBus.$emit('changeGoods', temporary)
+      this.$nextTick(() => {
+        this.$router.go(-1)
       })
     }
 
   },
   beforeDestroy() {
     vueBus.$off('listenCategoryEvent')
+    vueBus.$off('listenStrandarsEvent')
   }
 }
 </script>