fix:商品后台-新增了详情页和返回,部分字段修改

src/pages/Goods/Detail/index.vue

@@ -78,16 +78,16 @@
                 clearable
               ></el-cascader>
             </el-form-item>
-            <el-form-item label="描述：">
+            <el-form-item label="说明：">
               <el-input
                 v-if="$route.params.operation === 'EDIT'"
                 type="textarea"
                 maxlength="50"
                 show-word-limit
                 :autosize="{ minRows: 4 }"
-                v-model="goodsObj.desc"
+                v-model="goodsObj.introduce"
               ></el-input>
-              <span v-else>{{ goodsObj.desc }}</span>
+              <span v-else>{{ goodsObj.introduce }}</span>
             </el-form-item>
           </el-form>
         </section>
@@ -160,14 +160,16 @@
               <i class="el-icon-plus"></i>
             </template>
           </el-upload>
-          <h4 style="margin-top:20px">商品介绍：</h4>
+          <!-- <h4 style="margin-top:20px">商品介绍：</h4>
           <el-input
             v-if="$route.params.operation === 'EDIT'"
             type="textarea"
             :autosize="{ minRows: 4 }"
             v-model="goodsObj.introduce"
+            :maxlength="500"
+            show-word-limit
           ></el-input>
-          <span v-else>{{ goodsObj.introduce }}</span>
+          <span v-else>{{ goodsObj.introduce }}</span> -->
         </section>
       </section>
     </el-card>
@@ -351,28 +353,29 @@
             <el-form-item label="售价">
               <el-input
                 v-if="$route.params.operation === 'EDIT'"
-                type="number"
                 v-model="goodsObj.price"
-                @blur="salePrice"
+                @change="salePrice"
               ></el-input>
               <span v-else>{{ goodsObj.price }}</span>
             </el-form-item>
             <el-form-item label="原价">
               <el-input
                 v-if="$route.params.operation === 'EDIT'"
-                type="number"
                 v-model="goodsObj.original_price"
-                @blur="perPrice"
+                @change="perPrice"
               ></el-input>
               <span v-else>{{ goodsObj.original_price }}</span>
             </el-form-item>
             <h4 style="margin:20px 0">库存信息</h4>
             <el-form-item label="剩余库存量:">
+              <span>{{ goodsObj.inventory_rest }}</span>
+            </el-form-item>
+            <el-form-item label="库存增减:">
               <el-input-number
                 v-if="$route.params.operation === 'EDIT'"
-                v-model="goodsObj.inventory_rest"
-                :min="0"
-                @blur="hasNumber"
+                v-model="inventoryAdd"
+                @change="hasNumberChange"
+                @blur="hasNumberChange"
               ></el-input-number>
               <span v-else>{{ goodsObj.inventory_rest }}</span>
             </el-form-item>
@@ -404,6 +407,8 @@
             :min="0"
             :precision="0"
             v-model="goodsObj.rule_limit"
+            @change="handleLimitChange"
+            @blur="handleLimitChange"
           ></el-input-number>
           <span v-else>{{ goodsObj.rule_limit }}</span>
         </el-form-item>
@@ -448,16 +453,24 @@
                 goodsObj.rule_date_type === 2
             ">仅工作日可用</span>
         </el-form-item>
-        <el-form-item label="使用时间：">
+        <el-form-item label="使用开始时间：">
           <el-time-picker
+            arrow-control
             v-if="$route.params.operation === 'EDIT'"
-            is-range
-            v-model="rulesForm.useTime"
-            range-separator="-"
-            start-placeholder="开始时间"
-            end-placeholder="结束时间"
-            placeholder="选择时间范围"
-            @change="pickerTime"
+            v-model="rulesForm.useStartTime"
+            @change="pickerStartTime"
+          >
+          </el-time-picker>
+          <span v-else>{{
+            goodsObj.rule_start_time + "-" + goodsObj.rule_end_time
+          }}</span>
+        </el-form-item>
+        <el-form-item label="使用结束时间：">
+          <el-time-picker
+            arrow-control
+            v-if="$route.params.operation === 'EDIT'"
+            v-model="rulesForm.useEndTime"
+            @change="pickerEndTime"
           >
           </el-time-picker>
           <span v-else>{{
@@ -621,7 +634,7 @@ export default {
     }
   },
 
-  created () {
+  mounted () {
     this.getOptions();
     this.getGoodsDetailList(this.$route.params.spuId);
   },
@@ -653,10 +666,8 @@ export default {
   watch: {
     goodsObj (val) {
       this.optionsValue = [val.category_1_id, val.category_2_id];
-      this.rulesForm.useTime = this.formatDate(
-        val.rule_start_time,
-        val.rule_end_time
-      );
+      this.rulesForm.useStartTime = this.formatDate(val.rule_start_time);
+      this.rulesForm.useEndTime = this.formatDate(val.rule_end_time);
     },
     rejectVisible (val) {
       if (!val) {
@@ -685,6 +696,7 @@ export default {
       goodsObj: {
         introduce: "" // 商品介绍
       },
+      inventoryAdd: 0, // 库存增减
 
       originalGoodsName: "", // 原商品名
       isGoodsNameRepeat: false, // 商品名称是否重复
@@ -707,7 +719,8 @@ export default {
           { value: 2, label: "购买后不允许退款" },
           { value: 3, label: "到期后不退款" }
         ],
-        useTime: [], // 使用时间
+        useStartTime: "", // 使用开始时间
+        useEndTime: "", // 使用结束时间
         rule_desc: "" // 使用描述
       },
 
@@ -829,30 +842,16 @@ export default {
     },
 
     // 格式化日期
-    formatDate (startTime, endTime) {
+    formatDate (time) {
       const nowTime = new Date();
       const nowYear = nowTime.getFullYear();
       const nowMonth = nowTime.getMonth() + 1;
       const nowDate = nowTime.getDate();
-      const startTimeArray = startTime.split(":");
-      const endTimeArray = endTime.split(":");
-      const startHour = parseInt(startTimeArray[0]);
-      const startMinute = parseInt(startTimeArray[1]);
-      const startSecond = parseInt(startTimeArray[2]);
-      const endHour = parseInt(endTimeArray[0]);
-      const endMinute = parseInt(endTimeArray[1]);
-      const endSecond = parseInt(endTimeArray[2]);
-      return [
-        new Date(
-          nowYear,
-          nowMonth,
-          nowDate,
-          startHour,
-          startMinute,
-          startSecond
-        ),
-        new Date(nowYear, nowMonth, nowDate, endHour, endMinute, endSecond)
-      ];
+      const timeArray = time.split(":");
+      const Hour = parseInt(timeArray[0]);
+      const Minute = parseInt(timeArray[1]);
+      const Second = parseInt(timeArray[2]);
+      return new Date(nowYear, nowMonth, nowDate, Hour, Minute, Second);
     },
 
     // 获取门店列表
@@ -870,7 +869,8 @@ export default {
 
     // 门店列表更改时操作
     handleShopsChange (value) {
-      this.goodsObj.sub_shop = value;
+      console.log(value);
+      this.goodsObj.sub_shop = this.goodsObj.sub_shop.concat(value);
       const shopList = value.map(item => {
         return item.sub_shop_id;
       });
@@ -954,7 +954,6 @@ export default {
         goods_name: this.goodsObj.goods_name,
         goods_spu_id: this.goodsObj.goods_spu_id
       });
-      console.log(res);
       if (res.code !== 0) return this.$message.error(res.reason);
       if (res.result.can_use) {
         this.isGoodsNameRepeat = true;
@@ -963,7 +962,6 @@ export default {
       } else {
         this.isGoodsNameRepeat = false;
       }
-      console.log("商品名称是否可用", this.isGoodsNameRepeat);
     },
 
     // 商品详情图上传成功时
@@ -989,48 +987,58 @@ export default {
       this.isShowPopver = true;
     },
 
-    // 剩余库存量更改
-    hasNumber () {
-      if (!this.goodsObj.inventory_rest || this.goodsObj.inventory_rest < 0) {
-        this.goodsObj.inventory_rest = 0;
+    // 库存增减更改
+    hasNumberChange () {
+      if (!this.inventoryAdd) {
+        this.$nextTick(() => {
+          this.inventoryAdd = 0;
+        })
+      }
+      if (this.inventoryAdd + this.goodsObj.inventory_rest < 0) {
+        this.$nextTick(() => {
+          this.inventoryAdd = 0;
+        });
+        this.$message.error("库存增减不得超出剩余库存范围");
       }
+      console.log(this.inventoryAdd);
     },
 
-    // 选择时间
-    pickerTime (time) {
-      let startHours = time[0].getHours() + "";
-      let startMinutes = time[0].getMinutes() + "";
-      let startSeconds = time[0].getSeconds() + "";
-      let endHours = time[1].getHours() + "";
-      let endMinutes = time[1].getMinutes() + "";
-      let endSeconds = time[1].getSeconds() + "";
-      if (startHours < 10) {
-        startHours = "0" + startHours;
-      }
-      if (startMinutes < 10) {
-        startMinutes = "0" + startMinutes;
-      }
-      if (startSeconds < 10) {
-        startSeconds = "0" + startSeconds;
+    // 单人可购买上限的修改
+    handleLimitChange () {
+      if (!this.goodsObj.rule_limit) {
+        this.$nextTick(() => {
+          this.goodsObj.rule_limit = 0;
+        });
       }
-      if (endHours < 10) {
-        endHours = "0" + endHours;
+    },
+
+    // 时间校验器
+    timePicker (time) {
+      let Hours = time.getHours() + "";
+      let Minutes = time.getMinutes() + "";
+      let Seconds = time.getSeconds() + "";
+      if (Hours < 10) {
+        Hours = "0" + Hours;
       }
-      if (endMinutes < 10) {
-        endMinutes = "0" + endMinutes;
+      if (Minutes < 10) {
+        Minutes = "0" + Minutes;
       }
-      if (endSeconds < 10) {
-        endSeconds = "0" + endSeconds;
+      if (Seconds < 10) {
+        Seconds = "0" + Seconds;
       }
-      this.activeStartTime = `${startHours}:${startMinutes}:${startSeconds}`;
-      this.activeEndTime = `${endHours}:${endMinutes}:${endSeconds}`;
-
-      console.log("时间节点", this.activeStartTime, this.activeEndTime);
+      return `${Hours}:${Minutes}:${Seconds}`;
+    },
+    // 选择规则开始时间
+    pickerStartTime (time) {
+      this.activeStartTime = this.timePicker(time);
+    },
+    // 选择规则结束时间
+    pickerEndTime (time) {
+      this.activeEndTime = this.timePicker(time);
     },
 
     // 过期时间更改
     expirDateChange (time) {
-      console.log(time);
       let YYYY = time.getFullYear();
       let MM = time.getMonth() + 1;
       let DD = time.getDate();
@@ -1053,7 +1061,6 @@ export default {
         ss = "0" + ss;
       }
       this.expirationTime = `${YYYY}-${MM}-${DD} ${HH}:${mm}:${ss}`;
-      console.log(this.expirationTime);
     },
 
     // 禁用时间
@@ -1068,30 +1075,36 @@ export default {
 
     // 更改售价
     salePrice () {
-      const parsePrice = parseFloat(this.goodsObj.price).toFixed(2);
       if (this.goodsObj.price.length === 0) {
         this.goodsObj.price = 0;
       }
-      if (typeof parsePrice !== "number") {
+      const parseFloatValue = Number(this.goodsObj.price).toFixed(2);
+      this.goodsObj.price = Number(parseFloatValue);
+      if (
+        typeof this.goodsObj.price === "number" &&
+        isNaN(this.goodsObj.price)
+      ) {
         this.goodsObj.price = 0;
-        return this.$message.error("售价必为数字");
+        return this.$message.error("售价价格必须为数字");
       }
-      this.goodsObj.price = parsePrice;
     },
 
     // 更改原价
     perPrice () {
-      const parseOriginalPrice = parseFloat(
-        this.goodsObj.original_price
-      ).toFixed(2);
       if (this.goodsObj.original_price.length === 0) {
         this.goodsObj.original_price = 0;
       }
-      if (typeof parseOriginalPrice !== "number") {
+      const parseOriginalPrice = Number(this.goodsObj.original_price).toFixed(
+        2
+      );
+      this.goodsObj.original_price = Number(parseOriginalPrice);
+      if (
+        typeof this.goodsObj.original_price === "number" &&
+        isNaN(this.goodsObj.original_price)
+      ) {
         this.goodsObj.original_price = 0;
-        return this.$message.error("原价必为数字");
+        return this.$message.error("原价价格必为数字");
       }
-      this.goodsObj.original_price = parseOriginalPrice;
     },
 
     // 审核通过
@@ -1104,8 +1117,9 @@ export default {
 
     // 审核拒绝
     async onDefault () {
-      if (!this.rejectReason.reason)
+      if (this.rejectReason.reason != "0" || this.rejectReason.reason === "") {
         return this.$message.error("审核驳回时，驳回原因不能为空");
+      }
       const query = {
         goods_spu_id: this.goodsObj.goods_spu_id,
         rejected_reason: this.rejectReason.reason
@@ -1124,6 +1138,9 @@ export default {
     // 保存修改信息
     async saveDetailMessage () {
       await this.checkSameName(); // 检验商品名称是否可用
+      if (!this.optionsValue) {
+        return this.$message.error("请选择商品分类");
+      }
       const query = {
         goods_spu_id: this.goodsObj.goods_spu_id, // 商品id
         category_1_id: this.optionsValue[0], // 商品一级分类id
@@ -1139,20 +1156,17 @@ export default {
         rule_refund: this.goodsObj.rule_refund, // 退款规则
         rule_start_time: this.activeStartTime, // 规则开始时间
         rule_end_time: this.activeEndTime, // 规则结束时间
-        inventory_add: this.goodsObj.inventory_rest, // 库存
+        inventory_add: this.inventoryAdd, // 库存增减
         original_price: this.goodsObj.original_price, // 原价
         price: this.goodsObj.price, // 现价
         sub_shop_ids: this.shopIds // 门店id
       };
 
-      console.log(query);
       // 必填校验
       if (!this.goodsObj.goods_spu_id) {
         return this.$message.error("未传入商品id");
       }
-      if (!query.category_1_id || !query.category_2_id) {
-        return this.$message.error("请选择商品分类");
-      }
+
       if (!query.goods_name) {
         return this.$message.error("请填写商品名称");
       }
@@ -1171,15 +1185,9 @@ export default {
       if (typeof query.rule_limit !== "number") {
         return this.$message.error("单人可购上线只可为数值");
       }
-      if (!query.rule_desc) {
-        return this.$message.error("请填写使用规则描述");
-      }
       if (!query.rule_refund) {
         return this.$message.error("请填写退款规则");
       }
-      if (query.inventory_add.length === 0) {
-        return this.$message.error("请填写库存剩余量");
-      }
       if (query.original_price.length === 0) {
         return this.$message.error("请填写原价(保留两位小数)");
       }

src/pages/Goods/List/index.vue

@@ -200,6 +200,11 @@
                 <el-button type="text">下架</el-button>
               </template>
             </el-popconfirm>
+
+            <el-button
+              @click="goDetail(`DETAIL`,scope.row.goods_spu_id)"
+              type="text"
+            >详情</el-button>
           </template>
         </el-table-column>
       </el-table>