新增 编辑 接口修改

src/api/points/pointsMall_api.js

@@ -67,3 +67,13 @@ export function productUpdate(data) {
     data: data,
   });
 }
+
+//新增商品
+export function productCreate(data) {
+  return request({
+    url: "/product/create",
+    method: "post",
+    data: data,
+  });
+}
+

src/views/pointsManagement/pointsMall/addOrEditOrDetail.vue

@@ -48,8 +48,8 @@
             <div class="titleInfo">售卖信息</div>
             <div style="padding:0 20px;">
               <el-form-item label="规格">
-                <el-button type="primary" size="small" plain @click="dialogVisibleSpec = true"
-                  style="margin-bottom: 15px;">编辑</el-button>
+                <el-button type="primary" size="small" plain @click="specEditFun"
+                  style="margin-bottom: 15px;"  :disabled="title == '详情'?true:false" >编辑</el-button>
                 <tableCompontent :maxHeight="'400px'" :border="true" ref="tableRef1"
                   :tableData="this.formInline.specList" :columnData="columnData1">
                 </tableCompontent>
@@ -73,13 +73,15 @@
                       <el-form-item :prop="`skuList[${scope.$index}].pricePoint`"
                         :rules="{ required: true, message: '请输入', trigger: 'blur' }">
                         <div v-if="formInline.paymentType == 1 || formInline.paymentType == 2">
-                          <el-input-number v-model="scope.row.pricePoint" controls-position="right"
-                            :min="0"></el-input-number>
+                          <el-input-number v-if="formInline.paymentType == 1" v-model="scope.row.pricePoint"
+                            controls-position="right" :min="0"></el-input-number>
+                          <el-input-number v-if="formInline.paymentType == 2" v-model="scope.row.priceMoney"
+                            controls-position="right" :min="0"></el-input-number>
                           <span>{{ formInline.paymentType == 1 ? '积分' : '元' }}</span>
                         </div>
 
                         <div v-if="formInline.paymentType == 3" style="display: flex;width: 100%;">
-                          <el-input-number style="width:140px" v-model="scope.row.pricePoint" controls-position="right"
+                          <el-input-number style="width:140px" v-model="scope.row.priceMoney" controls-position="right"
                             :min="0"></el-input-number>
                           <span>元 +</span>
                           <el-input-number style="width:140px" v-model="scope.row.pricePoint" controls-position="right"
@@ -117,7 +119,7 @@
               <el-checkbox-group v-model="formInline.servicePromise" @change="handleCheckedChange">
                 <el-checkbox v-for="(item, index) in servicePromiseArr" :label="item.cdescribe" :key="index">{{
                   item.cdescribe
-                  }}
+                }}
                 </el-checkbox>
               </el-checkbox-group>
             </el-form-item>
@@ -140,7 +142,7 @@
             <!-- 操作按钮 -->
             <div style="display: flex;justify-content: center;margin-top: 25px;">
               <el-button @click="dialogVisibleSpec = false">取 消</el-button>
-              <el-button type="primary" @click="specSetSave">保存</el-button>
+              <el-button type="primary" @click="specSetSave" >保存</el-button>
             </div>
           </div>
         </el-dialog>
@@ -148,7 +150,7 @@
 
         <div style="display: flex;justify-content: center;margin-top: 25px;">
           <el-button @click="dialogVisible = false">取 消</el-button>
-          <el-button type="primary" @click="addOrEditOrDetailSave">保存</el-button>
+          <el-button type="primary" @click="addOrEditOrDetailSave" :disabled="title == '详情'?true:false" >保存</el-button>
           <!-- <el-button type="primary" @click="previewFun">预览</el-button> -->
         </div>
       </div>
@@ -163,7 +165,7 @@
 import SavePreview from './savePreview.vue'
 import tableCompontent from "@/components/tableCompontent/index.vue";
 import Tinymce from "@/components/tinymce/index.vue";
-import { productSpecSetup, productGenerateProductNo, productSpecCombinations, productUpdate } from "@/api/points/pointsMall_api";
+import { productSpecSetup, productGenerateProductNo, productSpecCombinations, productUpdate, productCreate } from "@/api/points/pointsMall_api";
 import { upload } from "@/api/public";
 import { setTimeout } from "core-js";
 export default {
@@ -305,6 +307,60 @@ export default {
       })
 
     },
+    //编辑规格按钮
+    specEditFun() {
+      //查询规格组合
+      if (this.formInline.productNo == null || this.formInline.productNo == '') {
+        this.$message.error("请先选择商品类型")
+        return
+      }
+      productSpecCombinations({ productNo: this.formInline.productNo }).then(res => {
+        if (!res.data.length) {
+          this.dialogVisibleSpec = true
+          return
+        }
+        this.list2 = []
+        this.columnData2 = [{ label: '规格', prop: 'specName', type: 'editItem', tag: 'input', icon: 'el-icon-remove-outline', align: 'center' }]
+        let arr = res.data
+        const map = new Map();
+        arr.forEach(item => {
+          item.specNameValueList.forEach(spec => {
+            const key = spec.specName;
+            if (!map.has(key)) {
+              map.set(key, new Set());
+            }
+            map.get(key).add(spec.specValue);
+          });
+        })
+        let maxSpecValueCount = 0;
+        // 2. 转成要的格式：specName + specValue1 + specValue2
+        map.forEach((valueSet, specName, index) => {
+          const values = Array.from(valueSet);
+          const obj = { specName: specName };
+          // 循环：自动加 specValue1、specValue2、specValue3...
+          values.forEach((val, index) => {
+            obj[`specValue${index + 1}`] = val;
+          });
+          maxSpecValueCount = Math.max(maxSpecValueCount, valueSet.size)
+
+          this.list2.push(obj); //生成展示页规格列表
+        });
+        for (let i = 1; i <= maxSpecValueCount; i++) {
+          this.columnData2.push({
+            prop: `specValue${i}`,
+            label: `规格值${i}`,
+            tag: 'input',
+            type: 'editItem',
+            headerIcon: 'el-icon-remove-outline',
+          });
+        }
+
+        this.dialogVisibleSpec = true
+        console.log(this.list2, 'this.list2')
+        console.log(this.columnData2, 'this.columnData2')
+      })
+    },
+
     // 图片
     handleImageSuccess(file) {
       const formData = new FormData()
@@ -323,11 +379,39 @@ export default {
     },
     //预览后保存
     savePreviewFun(params) {
-      productUpdate(params).then(res => {
-        this.$message.success(res.msg)
-        this.dialogVisible = false
-        this.$emit("getList");
-      })
+      let obj = {}
+
+      obj.productNo = params.productNo
+      obj.categoryId = params.categoryId
+      obj.name = params.name
+      obj.productMainImage = params.productMainImage
+      obj.productImage = params.productImage
+      obj.summary = params.summary
+      obj.detail = params.detail
+      obj.specList = params.specList
+      obj.paymentType = params.paymentType
+      obj.skuList = params.skuList
+      obj.freight = params.freight
+      obj.deliveryTime = params.deliveryTime
+      obj.servicePromise = params.servicePromise
+      obj.saleStartTime = params.saleStartTime
+      obj.saleEndTime = params.saleEndTime
+      if (this.title == '详情' || this.title == '编辑') {
+        obj.id = params.id
+        productUpdate(obj).then(res => {
+
+          this.$message.success(res.msg)
+          this.dialogVisible = false
+          this.$emit("getList");
+        })
+      } else {
+        productCreate(obj).then(res => {
+          this.$message.success(res.msg)
+          this.dialogVisible = false
+          this.$emit("getList");
+        })
+      }
+
     },
 
     //新增、编辑、详情商品 ----保存
@@ -372,7 +456,7 @@ export default {
       //获取商品编号
       productGenerateProductNo({ categoryId: e }).then((res) => {
         this.formInline.productNo = res.data
-        //查询规格组合
+        // //查询规格组合
         this.getSpecDetail(this.formInline.productNo)
       });
 
@@ -425,9 +509,11 @@ export default {
     //查询商品规格和规格明细
     getSpecDetail() {
       productSpecCombinations({ productNo: this.formInline.productNo }).then(res => {
+        if (!res.data.length) return
         this.specDataReorganizeFun(res.data)
       })
     },
+
     //拿到后端返回的规格组合数据--组装成页面需要的格式
     specDataReorganizeFun(data) {
       this.formInline.specList = []
@@ -438,9 +524,13 @@ export default {
       arr.forEach(item => {
         let obj = { specCombo: null, image: '', pricePoint: null, originPrice: null, stock: null }
         obj.specCombo = item.specValueText
+        obj.originPrice = item.originPrice
+        obj.priceMoney = item.priceMoney
+        obj.pricePoint = item.pricePoint
+        obj.stock = item.stock
         obj.image = item.image
-        //生成规格明细table数据
-        this.tableForm.skuList.push(obj)
+
+        this.tableForm.skuList.push(obj)  //生成规格明细table数据
 
         item.specNameValueList.forEach(spec => {
           const key = spec.specName;
@@ -460,7 +550,8 @@ export default {
           obj[`specValue${index + 1}`] = val;
         });
         maxSpecValueCount = Math.max(maxSpecValueCount, valueSet.size)
-        this.formInline.specList.push(obj);
+
+        this.formInline.specList.push(obj); //生成展示页规格列表
       });
       for (let i = 1; i <= maxSpecValueCount; i++) {
         this.columnData1.push({
@@ -468,7 +559,7 @@ export default {
           label: `规格值${i}`,
         });
       }
-      //console.log(this.formInline.skuList, 'this.formInline.skuList')
+      console.log(this.tableForm.skuList, 'this.tableForm.skuList')
     },
     //组装编辑规格table保存数据
     specListReorganizeFun(data) {
@@ -524,6 +615,7 @@ export default {
         newRow[col.prop] = "";
       });
       this.list2.push(newRow);
+      console.log(this.list2, this.columnData2, 'this.list2新增行')
     },
 
     // 2. 删除行
@@ -534,6 +626,7 @@ export default {
     // 3. 新增列
     addColumn() {
       let colIndex = this.columnData2.length;
+      // 给每一行添加新列的空数据
       let newCol = {
         label: `规格值${colIndex}`,
         prop: `specValue${colIndex}`,
@@ -542,13 +635,13 @@ export default {
         headerIcon: 'el-icon-remove-outline',
         align: 'center'
       };
-      this.columnData2.push(newCol);
 
-      // 给每一行添加新列的空数据
+      this.columnData2.push(newCol);
       this.list2.forEach(row => {
-        row[newCol.prop] = "";
+        //row[newCol.prop] = "";
+        this.$set(row, row[newCol.prop], '')
+
       });
-      console.log(this.list2, this.columnData2, 'this.list2新增列')
     },
 
     // 4. 删除列

src/views/pointsManagement/pointsMall/index.vue

@@ -8,8 +8,8 @@
         <el-form-item label="商品编号" prop="productNo">
           <el-input v-model="formInlineParent.productNo" placeholder="请输入商品编号" clearable></el-input>
         </el-form-item>
-        <el-form-item label="商品类型" prop="shopTypeValue">
-          <DictSelect v-model="formInlineParent.shopTypeValue" :dictOptions="shopType" :clearable="true"
+        <el-form-item label="商品类型" prop="categoryId">
+          <DictSelect v-model="formInlineParent.categoryId" :dictOptions="shopType" :clearable="true"
             placeholder="请选择" />
         </el-form-item>
         <el-form-item label="状态" prop="status">
@@ -24,20 +24,35 @@
     </div>
     <div style="padding:0 15px;">
       <el-button style="margin-bottom: 15px;" type="primary" size="small" plain
-        @click="handleAddOrEditOrDetails('新增',null)">新增商品</el-button>
+        @click="handleAddOrEditOrDetails('新增', null)">新增商品</el-button>
       <!-- :selection="true" -->
       <tableCompontent ref="tableRef" :loading="loading" :tableData="list" :height="'calc(100vh - 280px)'"
         :columnData="columnData">
+
+        <!-- <div v-if="formInline.paymentType == 1 || formInline.paymentType == 2">
+          <el-input-number v-if="formInline.paymentType == 1" v-model="scope.row.pricePoint" controls-position="right"
+            :min="0"></el-input-number>
+          <el-input-number v-if="formInline.paymentType == 2" v-model="scope.row.priceMoney" controls-position="right"
+            :min="0"></el-input-number>
+          <span>{{ formInline.paymentType == 1 ? '积分' : '元' }}</span>
+        </div> -->
+        <template v-slot:pricePoint="row">
+          <span>
+            {{ row.paymentType == 1 ? row.pricePoint + ' 积分' : row.paymentType == 2 ? row.priceMoney +
+                  ' 元':row.paymentType == 3 ? row.priceMoney+' 元' +'+'+row.pricePoint + ' 积分'
+                  :null }}</span>
+        </template>
+
         <template v-slot:status="row">
-          <span :style="{ color: row.status === 1 ?'#13ce66':'red' }">{{ row.status === 1 ? '上架' : '下架' }}</span>
+          <span :style="{ color: row.status === 1 ? '#13ce66' : 'red' }">{{ row.status === 1 ? '上架' : '下架' }}</span>
         </template>
         <template v-slot:sellTime="row">
           {{ row.saleStartTime + '-' + row.saleEndTime }}
         </template>
         <template v-slot:operation="row">
           <el-button size="mini" type="text" plain @click="handleUpdateStatus(row)">{{ row.status === 0 ? '上架' : '下架'
-          }}</el-button>
-          <el-button size="mini" type="text" plain @click="handleAddOrEditOrDetails('编辑',row.id)">编辑</el-button>
+            }}</el-button>
+          <el-button size="mini" type="text" plain @click="handleAddOrEditOrDetails('编辑', row.id)">编辑</el-button>
           <el-button size="mini" type="text" plain @click="handleAddOrEditOrDetails('详情', row.id)">详情</el-button>
         </template>
       </tableCompontent>
@@ -70,7 +85,7 @@ export default {
   },
   data() {
     return {
-      title:null,
+      title: null,
       loading: false,
       formInlineParent: {
         current: 1,
@@ -111,6 +126,7 @@ export default {
           prop: 'pricePoint',
           label: '价格（元+积分）',
           align: 'center',
+          type: 'diy',
           width: 120,
         },
         {
@@ -179,13 +195,13 @@ export default {
     },
     //新增、编辑、详情商品
     handleAddOrEditOrDetails(title, id) {
-      this.title=title
-      if(!id){
-        this.$refs.AddOrEditOrDetailRef.showPage(title,id)
+      this.title = title
+      if (!id) {
+        this.$refs.AddOrEditOrDetailRef.showPage(title, id)
         return
       }
       productGetById({ id: id }).then(res => {
-        this.$refs.AddOrEditOrDetailRef.showPage(title,id,res.data)
+        this.$refs.AddOrEditOrDetailRef.showPage(title, id, res.data)
       })
 
 

src/views/pointsManagement/pointsMall/savePreview.vue

@@ -3,7 +3,7 @@
     <el-dialog center title="预览" width="25%" :append-to-body="true" :close-on-click-modal="false"
       :visible.sync="dialogVisible">
       <div style="overflow-y: auto;height:70vh;background-color: #eee;border: 1px solid #bdbdbd;">
-        <div style="height: 200px;background-color: #fff;display: flex;align-items: center;">
+        <div style="height: 200px;background-color: #fff;display: flex;align-items: center;overflow: hidden;">
           <img :src="params.productMainImage" alt="" style="width: 100%;object-fit: cover">
         </div>
         <div style="border: 1px solid #bdbdbd;border-radius: 5px;margin: 10px 10px 0 10px;
@@ -14,26 +14,26 @@
               <div style="margin-top: 10px;font-size: 14px;color: #878787;">{{ params.summary }}</div>
             </div>
             <div style="">
-              <div style="font-size: 15px;color: red;font-weight: 600">
-                {{ params.skuList[0].paymentType == 1 ? params.skuList[0].pricePoint + '积分' : params.skuList[0].paymentType == 2 ? params.skuList[0].pricePoint +
-                  '元'
-                  : params.skuList[0].pricePoint }}
+              <div style="font-size: 15px;color: red;font-weight: 600;font-family: Arial,">
+                {{ params.paymentType == 1 ? skuListItem.pricePoint + '积分' : params.paymentType == 2 ? '￥'+skuListItem.priceMoney +
+                  '元':params.paymentType == 3 ? '￥'+skuListItem.priceMoney+'元' +'+'+skuListItem.pricePoint + '积分'
+                  :null }}
               </div>
-              <div style="font-size: 14px;color: #878787;text-decoration: line-through;text-align: right;">{{ params.skuList[0].originPrice }}</div>
+              <div style="font-size: 14px;color: #878787;text-decoration: line-through;text-align: right;">{{ skuListItem.originPrice }}</div>
             </div>
           </div>
           <div style="display: flex;justify-content: space-between;align-items: center;margin-top: 5px;">
             <div style="display: flex;align-items: center;">
               <div style="color: 12px;">规格</div>
               <div style="display: flex;">
-                <div v-show="params.skuList.length"
-                  style="border: 1px solid #bdbdbd;width: 40px;height: 35px;display: flex;align-items: center;margin-left: 15px;">
-                  <img :src="params.skuList[0].image" alt="" style="width: 100%;object-fit: cover">
+                <div v-show="skuListItem"
+                  style="border: 1px solid #bdbdbd;width: 40px;height: 35px;display: flex;align-items: center;margin-left: 15px;overflow: hidden;">
+                  <img :src="skuListItem.image" alt="" style="width: 100%;object-fit: cover;">
                 </div>
               </div>
 
             </div>
-            <div style="color: #f6a66e;font-size: 12px;">已选: {{ params.skuList[0].specCombo }}</div>
+            <div style="color: #f6a66e;font-size: 12px;">已选: {{ skuListItem.specCombo }}</div>
 
           </div>
         </div>
@@ -60,14 +60,14 @@
         <div
           style="border: 1px solid #bdbdbd;border-radius: 5px;margin: 10px 10px 0 10px;padding:10px;background-color: #fff;;">
           <div style="">商品详情</div>
-          <div style="height: 200px;display: flex;align-items: center;margin-top: 10px;border: 1px solid #f1f1f1"
+          <div style="height: 200px;display: flex;align-items: center;margin-top: 10px;border: 1px solid #f1f1f1;overflow: hidden;"
             v-for="item in params.productImage">
             <img :src="item" alt="" style="width: 100%;object-fit: cover">
           </div>
         </div>
 
 
-        <div style="display: flex;justify-content: center;margin-top: 25px;">
+        <div style="display: flex;justify-content: center;margin: 25px 0;">
           <el-button type="primary" size="small" plain @click="savePreviewFun">保存</el-button>
         </div>
       </div>
@@ -82,6 +82,7 @@ export default {
     return {
       dialogVisible: false,
       params: {},
+      skuListItem:null
 
     }
 
@@ -93,7 +94,9 @@ export default {
       this.dialogVisible = true
       this.$nextTick(() => {
         this.params=null
+        this.skuListItem=null
         this.params = params
+        this.skuListItem = params.skuList.length?params.skuList[0]:null
         console.log(params, 'params')
       })