商品页面编辑

src/views/pms/product/components/ProductDetail.vue

@@ -1,15 +1,16 @@
 <template>
   <el-card class="form-container" shadow="never">
-    <el-steps :active="active" finish-status="success" align-center>
+    <!-- <el-steps :active="active" finish-status="success" align-center>
       <el-step title="填写商品信息"></el-step>
-      <!-- <el-step title="填写商品促销"></el-step> -->
+      <el-step title="填写商品促销"></el-step>
       <el-step title="填写商品属性"></el-step>
-      <!-- <el-step title="选择商品关联"></el-step> -->
-    </el-steps>
+      <el-step title="选择商品关联"></el-step>
+    </el-steps> -->
     <product-info-detail
       v-show="showStatus[0]"
       v-model="productParam"
       :is-edit="isEdit"
+       @finishCommit="finishCommit"
       @nextStep="nextStep">
     </product-info-detail>
     <!-- <product-sale-detail
@@ -193,7 +194,7 @@
 </script>
 <style>
   .form-container {
-    width: 800px;
+    width: 900px;
   }
 </style>
 

src/views/pms/product/components/ProductInfoDetail.vue

@@ -1,6 +1,6 @@
 <template>
-  <div style="margin-top: 50px">
-    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
+  <div>
+    <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 700px" size="small">
       <el-form-item label="商品分类：" prop="productCategoryId">
         <el-cascader
           v-model="selectProductCateValue"
@@ -80,12 +80,13 @@
         <el-input v-model="value.qualityGuaranteePeriod"></el-input>
       </el-form-item>
       <el-form-item label="商品介绍：" >
-        <el-input
+          <tinymce :width="580" :height="200" v-model="value.description"></tinymce>
+        <!-- <el-input
           :autoSize="true"
           v-model="value.description"
           type="textarea"
           :rows="5"
-          placeholder="请输入内容"></el-input>
+          placeholder="请输入内容"></el-input> -->
       </el-form-item>
       <el-form-item label="商品货号：">
         <el-input v-model="value.productSn"></el-input>
@@ -109,8 +110,12 @@
       <el-form-item label="排序">
         <el-input v-model="value.sort"></el-input>
       </el-form-item>
+      <el-form-item label="商品图片：" prop="selectProductPics">
+        <multi-upload v-model="selectProductPics"></multi-upload>
+      </el-form-item>
       <el-form-item style="text-align: center">
-        <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>
+        <!-- <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button> -->
+        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -120,9 +125,13 @@
   import {fetchListWithChildren} from '@/api/productCate'
   import {fetchList as fetchBrandList,fetchOriginList} from '@/api/brand'
   import {getProduct, selectCompList} from '@/api/product';
+  import SingleUpload from '@/components/Upload/singleUpload'
+  import MultiUpload from '@/components/Upload/multiUpload'
+  import Tinymce from '@/components/Tinymce'
 
   export default {
     name: "ProductInfoDetail",
+    components: {SingleUpload, MultiUpload, Tinymce},
     props: {
       value: Object,
       isEdit: {
@@ -156,6 +165,7 @@
           description: [{required: true, message: '该项为必填项', trigger: 'blur'}],
           price: [{required: true, message: '该项为必填项', trigger: 'blur'}],
           qualityGuaranteePeriod: [{required: true, message: '该项为必填项', trigger: 'blur'}],
+          selectProductPics: [ {required: true, message: '请上传商品图片', trigger: 'blur'}],
         }
       };
     },
@@ -168,6 +178,41 @@
       //商品的编号
       productId(){
         return this.value.id;
+      },
+      //商品的主图和画册图片
+      selectProductPics:{
+        get:function () {
+          let pics=[];
+          if(this.value.pic===undefined||this.value.pic==null||this.value.pic===''){
+            return pics;
+          }
+          pics.push(this.value.pic);
+          if(this.value.albumPics===undefined||this.value.albumPics==null||this.value.albumPics===''){
+            return pics;
+          }
+          let albumPics = this.value.albumPics.split(',');
+          for(let i=0;i<albumPics.length;i++){
+            pics.push(albumPics[i]);
+          }
+          return pics;
+        },
+        set:function (newValue) {
+          if (newValue == null || newValue.length === 0) {
+            this.value.pic = null;
+            this.value.albumPics = null;
+          } else {
+            this.value.pic = newValue[0];
+            this.value.albumPics = '';
+            if (newValue.length > 1) {
+              for (let i = 1; i < newValue.length; i++) {
+                this.value.albumPics += newValue[i];
+                if (i !== newValue.length - 1) {
+                  this.value.albumPics += ',';
+                }
+              }
+            }
+          }
+        }
       }
     },
     watch: {
@@ -315,6 +360,18 @@
           }
         }
         this.value.placeOfProduction = placeOfProduction;
+      },
+      handleFinishCommit(){
+        console.log('1111');
+        if(!this.selectProductPics || (this.selectProductPics || []).length==0){
+          this.$message({
+            message: '请上传商品相册',
+            type: 'error',
+            duration:1000
+          });
+          return;
+        }
+        this.$emit('finishCommit',this.isEdit);
       }
     }
   }