商城修改

1

src/components/Tinymce/components/editorImage.vue

@@ -1,6 +1,7 @@
 <template>
   <div class="upload-container">
     <el-button
+    :disabled="disabled"
       icon="el-icon-upload"
       size="mini"
       :style="{ background: color, borderColor: color }"
@@ -10,6 +11,7 @@
     </el-button>
     <el-dialog append-to-body :visible.sync="dialogVisible">
       <el-upload
+      :disabled="disabled"
         class="editor-slide-upload"
         :action="ossUploadUrl"
         :data="dataObj"
@@ -39,6 +41,10 @@ export default {
       type: String,
       default: "#1890ff",
     },
+        disabled: {
+      type: Boolean,
+      default: false,
+    },
   },
   data() {
     return {

src/components/Tinymce/index.vue

@@ -1,163 +1,190 @@
 <template>
-  <div class="tinymce-container editor-container">
-    <textarea class="tinymce-textarea" :id="tinymceId"></textarea>
-    <div class="editor-custom-btn-container">
-      <editorImage color="#1890ff" class="editor-upload-btn" @successCBK="imageSuccessCBK"></editorImage>
+  <div :class="disabled?'disable':''">
+    <div
+      class="tinymce-container editor-container"
+      :disabled="disabled"
+      :contenteditable="disabled"
+    >
+      <textarea
+        class="tinymce-textarea"
+        :contenteditable="disabled"
+        :disabled="disabled"
+        :id="tinymceId"
+      ></textarea>
+      <div class="editor-custom-btn-container">
+        <editorImage
+          :disabled="disabled"
+          color="#1890ff"
+          class="editor-upload-btn"
+          @successCBK="imageSuccessCBK"
+        ></editorImage>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  import editorImage from './components/editorImage'
-  import '../../../static/tinymce4.7.5/langs/zh_CN'
+import editorImage from "./components/editorImage";
+import "../../../static/tinymce4.7.5/langs/zh_CN";
 
-  const plugins = [
- `advlist anchor autolink autosave code codesample colorpicker colorpicker
+const plugins = [
+  `advlist anchor autolink autosave code codesample colorpicker colorpicker
   contextmenu directionality emoticons fullscreen hr image imagetools importcss insertdatetime
   legacyoutput link lists media nonbreaking noneditable pagebreak paste preview print save searchreplace
-  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`
-  ];
-  const toolbar = [
-    `bold italic underline strikethrough alignleft aligncenter
+  spellchecker tabfocus table template textcolor textpattern visualblocks visualchars wordcount`,
+];
+const toolbar = [
+  `bold italic underline strikethrough alignleft aligncenter
   alignright outdent indent  blockquote undo redo removeformat code`,
-    `hr bullist numlist link image charmap	 preview anchor pagebreak
-    fullscreen insertdatetime media table forecolor backcolor`
-  ];
-  export default {
-    name: 'tinymce',
-    components: {editorImage},
-    props: {
-      id: {
-        type: String
-      },
-      value: {
-        type: String,
-        default: ''
-      },
-      toolbar: {
-        type: Array,
-        required: false,
-        default() {
-          return []
-        }
-      },
-      menubar: {
-        default: 'file edit insert view format table'
-      },
-      height: {
-        type: Number,
-        required: false,
-        default: 360
+  `hr bullist numlist link image charmap	 preview anchor pagebreak
+    fullscreen insertdatetime media table forecolor backcolor`,
+];
+export default {
+  name: "tinymce",
+  components: { editorImage },
+  props: {
+    id: {
+      type: String,
+    },
+    value: {
+      type: String,
+      default: "",
+    },
+    toolbar: {
+      type: Array,
+      required: false,
+      default() {
+        return [];
       },
-      width: {
-        type: Number,
-        required: false,
-        default: 720
-      }
     },
-    data() {
-      return {
-        hasChange: false,
-        hasInit: false,
-        tinymceId: this.id || 'vue-tinymce-' + +new Date()
-      }
+    menubar: {
+      default: "file edit insert view format table",
     },
-    watch: {
-      value(val) {
-        if (!this.hasChange && this.hasInit) {
-          this.$nextTick(() => window.tinymce.get(this.tinymceId).setContent(val))
-        }
-      }
+    height: {
+      type: Number,
+      required: false,
+      default: 360,
     },
-    mounted() {
-      this.initTinymce()
+    width: {
+      type: Number,
+      required: false,
+      default: 720,
     },
-    activated() {
-      this.initTinymce()
+    disabled: {
+      type: Boolean,
+      default: false,
     },
-    deactivated() {
-      this.destroyTinymce()
+  },
+  data() {
+    return {
+      hasChange: false,
+      hasInit: false,
+      tinymceId: this.id || "vue-tinymce-" + +new Date(),
+    };
+  },
+  watch: {
+    value(val) {
+      if (!this.hasChange && this.hasInit) {
+        this.$nextTick(() =>
+          window.tinymce.get(this.tinymceId).setContent(val)
+        );
+      }
     },
-    methods: {
-      initTinymce() {
-        const _this = this
-        window.tinymce.init({
-          selector: `#${this.tinymceId}`,
-          width: this.width,
-          height: this.height,
-          language: 'zh_CN',
-          body_class: 'panel-body ',
-          object_resizing: false,
-          toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
-          menubar: false,
-          plugins: plugins,
-          end_container_on_empty_block: true,
-          powerpaste_word_import: 'clean',
-          code_dialog_height: 450,
-          code_dialog_width: 1000,
-          advlist_bullet_styles: 'square',
-          advlist_number_styles: 'default',
-          imagetools_cors_hosts: ['www.tinymce.com', 'codepen.io'],
-          default_link_target: '_blank',
-          link_title: false,
-          init_instance_callback: editor => {
-            if (_this.value) {
-              editor.setContent(_this.value)
-            }
-            _this.hasInit = true
-            editor.on('NodeChange Change KeyUp SetContent', () => {
-              this.hasChange = true
-              this.$emit('input', editor.getContent())
-            })
+  },
+  mounted() {
+    this.initTinymce();
+  },
+  activated() {
+    this.initTinymce();
+  },
+  deactivated() {
+    this.destroyTinymce();
+  },
+  methods: {
+    initTinymce() {
+      const _this = this;
+      window.tinymce.init({
+        selector: `#${this.tinymceId}`,
+        width: this.width,
+        height: this.height,
+        language: "zh_CN",
+        body_class: "panel-body ",
+        object_resizing: false,
+        toolbar: this.toolbar.length > 0 ? this.toolbar : toolbar,
+        menubar: false,
+        plugins: plugins,
+        end_container_on_empty_block: true,
+        powerpaste_word_import: "clean",
+        code_dialog_height: 450,
+        code_dialog_width: 1000,
+        advlist_bullet_styles: "square",
+        advlist_number_styles: "default",
+        imagetools_cors_hosts: ["www.tinymce.com", "codepen.io"],
+        default_link_target: "_blank",
+        link_title: false,
+        init_instance_callback: (editor) => {
+          if (_this.value) {
+            editor.setContent(_this.value);
           }
-        })
-      },
-      destroyTinymce() {
-        if (window.tinymce.get(this.tinymceId)) {
-          window.tinymce.get(this.tinymceId).destroy()
-        }
-      },
-      setContent(value) {
-        window.tinymce.get(this.tinymceId).setContent(value)
-      },
-      getContent() {
-        window.tinymce.get(this.tinymceId).getContent()
-      },
-      imageSuccessCBK(arr) {
-        const _this = this
-        arr.forEach(v => {
-          window.tinymce.get(_this.tinymceId).insertContent(`<img class="wscnph" src="${v.url}" >`)
-        })
+          _this.hasInit = true;
+          editor.on("NodeChange Change KeyUp SetContent", () => {
+            this.hasChange = true;
+            this.$emit("input", editor.getContent());
+          });
+        },
+      });
+    },
+    destroyTinymce() {
+      if (window.tinymce.get(this.tinymceId)) {
+        window.tinymce.get(this.tinymceId).destroy();
       }
     },
-    destroyed() {
-      this.destroyTinymce()
-    }
-  }
+    setContent(value) {
+      window.tinymce.get(this.tinymceId).setContent(value);
+    },
+    getContent() {
+      window.tinymce.get(this.tinymceId).getContent();
+    },
+    imageSuccessCBK(arr) {
+      const _this = this;
+      arr.forEach((v) => {
+        window.tinymce
+          .get(_this.tinymceId)
+          .insertContent(`<img class="wscnph" src="${v.url}" >`);
+      });
+    },
+  },
+  destroyed() {
+    this.destroyTinymce();
+  },
+};
 </script>
 
 <style scoped>
-  .tinymce-container {
-    position: relative;
-  }
+.tinymce-container {
+  position: relative;
+}
 
-  .tinymce-container >>> .mce-fullscreen {
-    z-index: 10000;
-  }
+.tinymce-container >>> .mce-fullscreen {
+  z-index: 10000;
+}
 
-  .tinymce-textarea {
-    visibility: hidden;
-    z-index: -1;
-  }
+.tinymce-textarea {
+  visibility: hidden;
+  z-index: -1;
+}
 
-  .editor-custom-btn-container {
-    position: absolute;
-    right: 10px;
-    top: 2px;
-    /*z-index: 2005;*/
-  }
+.editor-custom-btn-container {
+  position: absolute;
+  right: 10px;
+  top: 2px;
+  /*z-index: 2005;*/
+}
 
-  .editor-upload-btn {
-    display: inline-block;
-  }
+.editor-upload-btn {
+  display: inline-block;
+}
+.disable {
+   pointer-events: none;
+}
 </style>

src/components/Upload/multiUpload.vue

@@ -2,6 +2,7 @@
    
   <div>
     <el-upload
+    :disabled="disabled"
       :action="ossUploadUrl"
       :data="useOss ? dataObj : null"
       list-type="picture-card"
@@ -33,6 +34,10 @@ export default {
       type: Number,
       default: 5,
     },
+        disabled:{
+      type:Boolean,
+      default:false
+    }
   },
   data() {
     return {

src/components/Upload/singleUpload.vue

@@ -2,6 +2,7 @@
    
   <div>
     <el-upload
+    :disabled="disabled"
       :action="ossUploadUrl"
       :data="useOss ? dataObj : null"
       list-type="picture"
@@ -29,6 +30,10 @@ export default {
   name: "singleUpload",
   props: {
     value: String,
+    disabled:{
+      type:Boolean,
+      default:false
+    }
   },
   computed: {
     imageUrl() {

src/router/index.js

@@ -61,6 +61,13 @@ export const asyncRouterMap = [
         hidden: true
       },
       {
+        path: 'detailProduct',
+        name: 'detailProduct',
+        component: () => import('@/views/pms/product/detail'),
+        meta: {title: '查看商品', icon: 'product-add'},
+        hidden: true
+      },
+      {
         path: 'productCate',
         name: 'productCate',
         component: () => import('@/views/pms/productCate/index'),

src/views/home/index.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="app-container">
     <div class="address-layout">
-      <el-row :gutter="20">
+      <!-- <el-row :gutter="20">
         <el-col :span="6">
           <div class="out-border">
             <div class="layout-title">后台项目</div>
@@ -26,7 +26,7 @@
             </div>
           </div>
         </el-col>
-      </el-row>
+      </el-row> -->
     </div>
     <div class="total-layout">
       <el-row :gutter="20">
@@ -61,13 +61,13 @@
         <!--</el-col>-->
       </el-row>
     </div>
-    <el-card class="mine-layout">
+    <!-- <el-card class="mine-layout">
       <div style="text-align: center">
         <img width="150px" height="150px" src="http://macro-oss.oss-cn-shenzhen.aliyuncs.com/mall/banner/qrcode_for_macrozheng_258.jpg">
       </div>
       <div style="text-align: center">mall全套学习教程连载中！</div>
       <div style="text-align: center;margin-top: 5px"><span class="color-main">关注公号</span>，第一时间获取。</div>
-    </el-card>
+    </el-card> -->
     <div class="un-handle-layout">
       <div class="layout-title">待处理事务</div>
       <div class="un-handle-content">

src/views/pms/product/add.vue

@@ -1,5 +1,5 @@
 <template> 
-  <product-detail :is-edit='false'></product-detail>
+  <product-detail :is-edit='true'></product-detail>
 </template>
 <script>
   import ProductDetail from './components/ProductDetail'

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

@@ -3,6 +3,7 @@
     <el-form :model="value" ref="productAttrForm" label-width="120px" style="width: 720px" size="small">
       <el-form-item label="属性类型：">
         <el-select v-model="value.productAttributeCategoryId"
+        :disabled="!isEdit"
                    placeholder="请选择属性类型"
                    @change="handleProductAttrChange">
           <el-option
@@ -17,21 +18,22 @@
         <el-card shadow="never" class="cardBg">
           <div v-for="(productAttr,idx) in selectProductAttr">
             {{productAttr.name}}：
-            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values">
+            <el-checkbox-group v-if="productAttr.handAddStatus===0" v-model="selectProductAttr[idx].values" :disabled="!isEdit">
               <el-checkbox v-for="item in getInputListArr(productAttr.inputList)" :label="item" :key="item"
+              :disabled="!isEdit"
                            class="littleMarginLeft"></el-checkbox>
             </el-checkbox-group>
             <div v-else>
-              <el-checkbox-group v-model="selectProductAttr[idx].values">
+              <el-checkbox-group v-model="selectProductAttr[idx].values" :disabled="!isEdit">
                 <div v-for="(item,index) in selectProductAttr[idx].options" style="display: inline-block"
                      class="littleMarginLeft">
-                  <el-checkbox :label="item" :key="item"></el-checkbox>
-                  <el-button type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
+                  <el-checkbox :label="item" :key="item" :disabled="!isEdit"></el-checkbox>
+                  <el-button :disabled="!isEdit" type="text" class="littleMarginLeft" @click="handleRemoveProductAttrValue(idx,index)">删除
                   </el-button>
                 </div>
               </el-checkbox-group>
-              <el-input v-model="addProductAttrValue" style="width: 160px;margin-left: 10px" clearable></el-input>
-              <el-button class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
+              <el-input v-model="addProductAttrValue" :disabled="!isEdit" style="width: 160px;margin-left: 10px" clearable></el-input>
+              <el-button :disabled="!isEdit" class="littleMarginLeft" @click="handleAddProductAttrValue(idx)">增加</el-button>
             </div>
           </div>
         </el-card>
@@ -52,7 +54,7 @@
             width="80"
             align="center">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.price"></el-input>
+              <el-input v-model="scope.row.price"   :disabled="!isEdit"></el-input>
             </template>
           </el-table-column>
           <el-table-column
@@ -60,7 +62,7 @@
             width="80"
             align="center">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.stock"></el-input>
+              <el-input v-model="scope.row.stock"   :disabled="!isEdit"></el-input>
             </template>
           </el-table-column>
           <el-table-column
@@ -68,14 +70,14 @@
             width="80"
             align="center">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.lowStock"></el-input>
+              <el-input v-model="scope.row.lowStock"   :disabled="!isEdit"></el-input>
             </template>
           </el-table-column>
           <el-table-column
             label="SKU编号"
             align="center">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.skuCode"></el-input>
+              <el-input v-model="scope.row.skuCode"  :disabled="!isEdit"></el-input>
             </template>
           </el-table-column>
           <el-table-column
@@ -84,6 +86,7 @@
             align="center">
             <template slot-scope="scope">
               <el-button
+               :disabled="!isEdit"
                 type="text"
                 @click="handleRemoveProductSku(scope.$index, scope.row)">删除
               </el-button>
@@ -93,16 +96,20 @@
         <el-button
           type="primary"
           style="margin-top: 20px"
+            :disabled="!isEdit"
           @click="handleRefreshProductSkuList">刷新列表
         </el-button>
         <el-button
           type="primary"
           style="margin-top: 20px"
+           :disabled="!isEdit"
           @click="handleSyncProductSkuPrice">同步价格
+
         </el-button>
         <el-button
           type="primary"
           style="margin-top: 20px"
+           :disabled="!isEdit"
           @click="handleSyncProductSkuStock">同步库存
         </el-button>
       </el-form-item>
@@ -111,6 +118,7 @@
           <div v-for="(item,index) in selectProductAttrPics">
             <span>{{item.name}}:</span>
             <single-upload v-model="item.pic"
+             :disabled="!isEdit"
                            style="width: 300px;display: inline-block;margin-left: 10px"></single-upload>
           </div>
         </el-card>
@@ -119,7 +127,7 @@
         <el-card shadow="never" class="cardBg">
           <div v-for="(item,index) in selectProductParam" :class="{littleMarginTop:index!==0}">
             <div class="paramInputLabel">{{item.name}}:</div>
-            <el-select v-if="item.inputType===1" class="paramInput" v-model="selectProductParam[index].value">
+            <el-select v-if="item.inputType===1"  :disabled="!isEdit" class="paramInput" v-model="selectProductParam[index].value">
               <el-option
                 v-for="item in getParamInputList(item.inputList)"
                 :key="item"
@@ -127,20 +135,20 @@
                 :value="item">
               </el-option>
             </el-select>
-            <el-input v-else class="paramInput" v-model="selectProductParam[index].value"></el-input>
+            <el-input v-else class="paramInput"  :disabled="!isEdit" v-model="selectProductParam[index].value"></el-input>
           </div>
         </el-card>
       </el-form-item>
       <el-form-item label="商品相册：">
-        <multi-upload v-model="selectProductPics"></multi-upload>
+        <multi-upload v-model="selectProductPics"  :disabled="!isEdit"></multi-upload>
       </el-form-item>
       <el-form-item label="规格参数：">
         <el-tabs v-model="activeHtmlName" type="card">
           <el-tab-pane label="电脑端详情" name="pc">
-            <tinymce :width="595" :height="300" v-model="value.detailHtml"></tinymce>
+            <tinymce :width="595" :height="300" v-model="value.detailHtml"  :disabled="!isEdit"></tinymce>
           </el-tab-pane>
           <el-tab-pane label="移动端详情" name="mobile">
-            <tinymce :width="595" :height="300" v-model="value.detailMobileHtml"></tinymce>
+            <tinymce :width="595" :height="300" v-model="value.detailMobileHtml"  :disabled="!isEdit"></tinymce>
           </el-tab-pane>
         </el-tabs>
       </el-form-item>

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

@@ -1,4 +1,5 @@
-<template> 
+<template>
+   
   <el-card class="form-container" shadow="never">
     <el-steps :active="active" finish-status="success" align-center>
       <el-step title="填写商品信息"></el-step>
@@ -10,176 +11,199 @@
       v-show="showStatus[0]"
       v-model="productParam"
       :is-edit="isEdit"
-      @nextStep="nextStep">
+      @nextStep="nextStep"
+    >
     </product-info-detail>
     <product-sale-detail
       v-show="showStatus[1]"
       v-model="productParam"
       :is-edit="isEdit"
       @nextStep="nextStep"
-      @prevStep="prevStep">
+      @prevStep="prevStep"
+    >
     </product-sale-detail>
     <product-attr-detail
       v-show="showStatus[2]"
       v-model="productParam"
       :is-edit="isEdit"
       @nextStep="nextStep"
-      @prevStep="prevStep">
+      @prevStep="prevStep"
+    >
     </product-attr-detail>
     <product-relation-detail
       v-show="showStatus[3]"
       v-model="productParam"
       :is-edit="isEdit"
       @prevStep="prevStep"
-      @finishCommit="finishCommit">
+      @finishCommit="finishCommit"
+    >
     </product-relation-detail>
   </el-card>
 </template>
 <script>
-  import ProductInfoDetail from './ProductInfoDetail';
-  import ProductSaleDetail from './ProductSaleDetail';
-  import ProductAttrDetail from './ProductAttrDetail';
-  import ProductRelationDetail from './ProductRelationDetail';
-  import {createProduct,getProduct,updateProduct} from '@/api/product';
+import ProductInfoDetail from "./ProductInfoDetail";
+import ProductSaleDetail from "./ProductSaleDetail";
+import ProductAttrDetail from "./ProductAttrDetail";
+import ProductRelationDetail from "./ProductRelationDetail";
+import { createProduct, getProduct, updateProduct } from "@/api/product";
 
-  const defaultProductParam = {
-    albumPics: '',
-    brandId: null,
-    brandName: '',
-    deleteStatus: 0,
-    description: '',
-    detailDesc: '',
-    detailHtml: '',
-    detailMobileHtml: '',
-    detailTitle: '',
-    feightTemplateId: 0,
-    flashPromotionCount: 0,
-    flashPromotionId: 0,
-    flashPromotionPrice: 0,
-    flashPromotionSort: 0,
-    giftPoint: 0,
-    giftGrowth: 0,
-    keywords: '',
-    lowStock: 0,
-    name: '',
-    newStatus: 0,
-    note: '',
-    originalPrice: 0,
-    pic: '',
-    //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
-    memberPriceList: [],
-    //商品满减
-    productFullReductionList: [{fullPrice: 0, reducePrice: 0}],
-    //商品阶梯价格
-    productLadderList: [{count: 0,discount: 0,price: 0}],
-    previewStatus: 0,
-    price: 0,
-    productAttributeCategoryId: null,
-    //商品属性相关{productAttributeId: 0, value: ''}
-    productAttributeValueList: [],
-    //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
-    skuStockList: [],
-    //商品相关专题{subjectId: 0}
-    subjectProductRelationList: [],
-    //商品相关优选{prefrenceAreaId: 0}
-    prefrenceAreaProductRelationList: [],
-    productCategoryId: null,
-    productCategoryName: '',
-    productSn: '',
-    promotionEndTime: '',
-    promotionPerLimit: 0,
-    promotionPrice: null,
-    promotionStartTime: '',
-    promotionType: 0,
-    publishStatus: 0,
-    recommandStatus: 0,
-    sale: 0,
-    serviceIds: '',
-    sort: 0,
-    stock: 0,
-    subTitle: '',
-    unit: '',
-    usePointLimit: 0,
-    verifyStatus: 0,
-    weight: 0
-  };
-  export default {
-    name: 'ProductDetail',
-    components: {ProductInfoDetail, ProductSaleDetail, ProductAttrDetail, ProductRelationDetail},
-    props: {
-      isEdit: {
-        type: Boolean,
-        default: false
+const defaultProductParam = {
+  albumPics: "",
+  brandId: null,
+  brandName: "",
+  deleteStatus: 0,
+  description: "",
+  detailDesc: "",
+  detailHtml: "",
+  detailMobileHtml: "",
+  detailTitle: "",
+  feightTemplateId: 0,
+  flashPromotionCount: 0,
+  flashPromotionId: 0,
+  flashPromotionPrice: 0,
+  flashPromotionSort: 0,
+  giftPoint: 0,
+  giftGrowth: 0,
+  keywords: "",
+  lowStock: 0,
+  name: "",
+  newStatus: 0,
+  note: "",
+  originalPrice: 0,
+  pic: "",
+  //会员价格{memberLevelId: 0,memberPrice: 0,memberLevelName: null}
+  memberPriceList: [],
+  //商品满减
+  productFullReductionList: [{ fullPrice: 0, reducePrice: 0 }],
+  //商品阶梯价格
+  productLadderList: [{ count: 0, discount: 0, price: 0 }],
+  previewStatus: 0,
+  price: 0,
+  productAttributeCategoryId: null,
+  //商品属性相关{productAttributeId: 0, value: ''}
+  productAttributeValueList: [],
+  //商品sku库存信息{lowStock: 0, pic: '', price: 0, sale: 0, skuCode: '', spData: '', stock: 0}
+  skuStockList: [],
+  //商品相关专题{subjectId: 0}
+  subjectProductRelationList: [],
+  //商品相关优选{prefrenceAreaId: 0}
+  prefrenceAreaProductRelationList: [],
+  productCategoryId: null,
+  productCategoryName: "",
+  productSn: "",
+  promotionEndTime: "",
+  promotionPerLimit: 0,
+  promotionPrice: null,
+  promotionStartTime: "",
+  promotionType: 0,
+  publishStatus: 0,
+  recommandStatus: 0,
+  sale: 0,
+  serviceIds: "",
+  sort: 0,
+  stock: 0,
+  subTitle: "",
+  unit: "",
+  usePointLimit: 0,
+  verifyStatus: 0,
+  weight: 0,
+};
+export default {
+  name: "ProductDetail",
+  components: {
+    ProductInfoDetail,
+    ProductSaleDetail,
+    ProductAttrDetail,
+    ProductRelationDetail,
+  },
+  props: {
+    isEdit: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      active: 0,
+      productParam: Object.assign({}, defaultProductParam),
+      showStatus: [true, false, false, false],
+    };
+  },
+  created() {
+    // if(this.isEdit){
+    if (this.$route.query.id) {
+      getProduct(this.$route.query.id).then((response) => {
+        this.productParam = response.data;
+      });
+    }
+
+    // }
+  },
+  methods: {
+    hideAll() {
+      for (let i = 0; i < this.showStatus.length; i++) {
+        this.showStatus[i] = false;
       }
     },
-    data() {
-      return {
-        active: 0,
-        productParam: Object.assign({}, defaultProductParam),
-        showStatus: [true, false, false, false]
+    prevStep() {
+      if (this.active > 0 && this.active < this.showStatus.length) {
+        this.active--;
+        this.hideAll();
+        this.showStatus[this.active] = true;
       }
     },
-    created(){
-      if(this.isEdit){
-        getProduct(this.$route.query.id).then(response=>{
-          this.productParam=response.data;
-        });
+    nextStep() {
+      if (this.active < this.showStatus.length - 1) {
+        this.active++;
+        this.hideAll();
+        this.showStatus[this.active] = true;
       }
     },
-    methods: {
-      hideAll() {
-        for (let i = 0; i < this.showStatus.length; i++) {
-          this.showStatus[i] = false;
-        }
-      },
-      prevStep() {
-        if (this.active > 0 && this.active < this.showStatus.length) {
-          this.active--;
-          this.hideAll();
-          this.showStatus[this.active] = true;
-        }
-      },
-      nextStep() {
-        if (this.active < this.showStatus.length - 1) {
-          this.active++;
-          this.hideAll();
-          this.showStatus[this.active] = true;
-        }
-      },
-      finishCommit(isEdit) {
-        this.$confirm('是否要提交该产品', '提示', {
-          confirmButtonText: '确定',
-          cancelButtonText: '取消',
-          type: 'warning'
+    finishCommit(isEdit) {
+      if (this.$route.query.id && isEdit) {
+        this.$confirm("是否要提交该产品", "提示", {
+          confirmButtonText: "确定",
+          cancelButtonText: "取消",
+          type: "warning",
         }).then(() => {
-          if(isEdit){
-            updateProduct(this.$route.query.id,this.productParam).then(response=>{
+          updateProduct(this.$route.query.id, this.productParam).then(
+            (response) => {
               this.$message({
-                type: 'success',
-                message: '提交成功',
-                duration:1000
+                type: "success",
+                message: "提交成功",
+                duration: 1000,
               });
               this.$router.back();
-            });
-          }else{
-            createProduct(this.productParam).then(response=>{
+            }
+          );
+        });
+      } else if (!this.$route.query.id && isEdit) {
+          this.$confirm("是否要提交该产品", "提示", {
+            confirmButtonText: "确定",
+            cancelButtonText: "取消",
+            type: "warning",
+          }).then(() => {
+            createProduct(this.productParam).then((response) => {
               this.$message({
-                type: 'success',
-                message: '提交成功',
-                duration:1000
+                type: "success",
+                message: "提交成功",
+                duration: 1000,
               });
               location.reload();
             });
-          }
-        })
-      }
-    }
-  }
+          });
+        } else {
+          this.$router.back();
+        }
+
+    },
+  },
+};
 </script>
 <style>
-  .form-container {
-    width: 800px;
-  }
+.form-container {
+  width: 800px;
+}
 </style>
 
 

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

@@ -3,20 +3,22 @@
     <el-form :model="value" :rules="rules" ref="productInfoForm" label-width="120px" style="width: 600px" size="small">
       <el-form-item label="商品分类：" prop="productCategoryId">
         <el-cascader
+        :disabled="!isEdit"
           v-model="selectProductCateValue"
           :options="productCateOptions">
         </el-cascader>
       </el-form-item>
       <el-form-item label="商品名称：" prop="name">
-        <el-input v-model="value.name"></el-input>
+        <el-input v-model="value.name" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="副标题：" prop="subTitle">
-        <el-input v-model="value.subTitle"></el-input>
+        <el-input v-model="value.subTitle" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品品牌：" prop="brandId">
         <el-select
           v-model="value.brandId"
           @change="handleBrandChange"
+          :disabled="!isEdit"
           placeholder="请选择品牌">
           <el-option
             v-for="item in brandOptions"
@@ -30,30 +32,31 @@
         <el-input
           :autoSize="true"
           v-model="value.description"
+          :disabled="!isEdit"
           type="textarea"
           placeholder="请输入内容"></el-input>
       </el-form-item>
       <el-form-item label="商品货号：">
-        <el-input v-model="value.productSn"></el-input>
+        <el-input v-model="value.productSn" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品售价：">
-        <el-input v-model="value.price"></el-input>
+        <el-input v-model="value.price" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="市场价：">
-        <el-input v-model="value.originalPrice"></el-input>
+        <el-input v-model="value.originalPrice" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品库存：">
-        <el-input v-model="value.stock"></el-input>
+        <el-input v-model="value.stock" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="计量单位：">
-        <el-input v-model="value.unit"></el-input>
+        <el-input v-model="value.unit" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品重量：">
-        <el-input v-model="value.weight" style="width: 300px"></el-input>
+        <el-input v-model="value.weight" style="width: 300px" :disabled="!isEdit"></el-input>
         <span style="margin-left: 20px">克</span>
       </el-form-item>
       <el-form-item label="排序">
-        <el-input v-model="value.sort"></el-input>
+        <el-input v-model="value.sort" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item style="text-align: center">
         <el-button type="primary" size="medium" @click="handleNext('productInfoForm')">下一步，填写商品促销</el-button>

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

@@ -8,6 +8,7 @@
       <el-form-item label="关联专题：">
         <el-transfer
           style="display: inline-block"
+          :disabled="!isEdit"
           filterable
           :filter-method="filterMethod"
           filter-placeholder="请输入专题名称"
@@ -19,6 +20,7 @@
       <el-form-item label="关联优选：">
         <el-transfer
           style="display: inline-block"
+          :disabled="!isEdit"
           filterable
           :filter-method="filterMethod"
           filter-placeholder="请输入优选名称"
@@ -29,7 +31,7 @@
       </el-form-item>
       <el-form-item style="text-align: center">
         <el-button size="medium" @click="handlePrev">上一步，填写商品属性</el-button>
-        <el-button type="primary" size="medium" @click="handleFinishCommit">完成，提交商品</el-button>
+        <el-button type="primary" size="medium"  @click="handleFinishCommit">完成，提交商品</el-button>
       </el-form-item>
     </el-form>
   </div>
@@ -114,7 +116,8 @@
           for (let i = 0; i < list.length; i++) {
             this.subjectList.push({
               label: list[i].title,
-              key: list[i].id
+              key: list[i].id,
+              disabled:!this.isEdit
             });
           }
         });
@@ -125,7 +128,8 @@
           for (let i = 0; i < list.length; i++) {
             this.prefrenceAreaList.push({
               label: list[i].name,
-              key: list[i].id
+              key: list[i].id,
+                disabled:!this.isEdit
             });
           }
         });

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

@@ -2,16 +2,17 @@
   <div style="margin-top: 50px">
     <el-form :model="value" ref="productSaleForm" label-width="120px" style="width: 600px" size="small">
       <el-form-item label="赠送积分：">
-        <el-input v-model="value.giftPoint"></el-input>
+        <el-input v-model="value.giftPoint" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="赠送成长值：">
-        <el-input v-model="value.giftGrowth"></el-input>
+        <el-input v-model="value.giftGrowth" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="积分购买限制：">
-        <el-input v-model="value.usePointLimit"></el-input>
+        <el-input v-model="value.usePointLimit" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="预告商品：">
         <el-switch
+        :disabled="!isEdit"
           v-model="value.previewStatus"
           :active-value="1"
           :inactive-value="0">
@@ -20,6 +21,7 @@
       <el-form-item label="商品上架：">
         <el-switch
           v-model="value.publishStatus"
+          :disabled="!isEdit"
           :active-value="1"
           :inactive-value="0">
         </el-switch>
@@ -28,37 +30,39 @@
         <span style="margin-right: 10px">新品</span>
         <el-switch
           v-model="value.newStatus"
+          :disabled="!isEdit"
           :active-value="1"
           :inactive-value="0">
         </el-switch>
         <span style="margin-left: 10px;margin-right: 10px">推荐</span>
         <el-switch
           v-model="value.recommandStatus"
+          :disabled="!isEdit"
           :active-value="1"
           :inactive-value="0">
         </el-switch>
       </el-form-item>
       <el-form-item label="服务保证：">
-        <el-checkbox-group v-model="selectServiceList">
+        <el-checkbox-group v-model="selectServiceList" :disabled="!isEdit">
           <el-checkbox :label="1">无忧退货</el-checkbox>
           <el-checkbox :label="2">快速退款</el-checkbox>
           <el-checkbox :label="3">免费包邮</el-checkbox>
         </el-checkbox-group>
       </el-form-item>
       <el-form-item label="详细页标题：">
-        <el-input v-model="value.detailTitle"></el-input>
+        <el-input v-model="value.detailTitle" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="详细页描述：">
-        <el-input v-model="value.detailDesc"></el-input>
+        <el-input v-model="value.detailDesc" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品关键字：">
-        <el-input v-model="value.keywords"></el-input>
+        <el-input v-model="value.keywords" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="商品备注：">
-        <el-input v-model="value.note" type="textarea" :autoSize="true"></el-input>
+        <el-input v-model="value.note" type="textarea" :autoSize="true" :disabled="!isEdit"></el-input>
       </el-form-item>
       <el-form-item label="选择优惠方式：">
-        <el-radio-group v-model="value.promotionType" size="small">
+        <el-radio-group v-model="value.promotionType" size="small" :disabled="!isEdit">
           <el-radio-button :label="0">无优惠</el-radio-button>
           <el-radio-button :label="1">特惠促销</el-radio-button>
           <el-radio-button :label="2">会员价格</el-radio-button>
@@ -70,6 +74,7 @@
         <div>
           开始时间：
           <el-date-picker
+          :disabled="!isEdit"
             v-model="value.promotionStartTime"
             type="datetime"
             :picker-options="pickerOptions1"
@@ -80,6 +85,7 @@
           结束时间：
           <el-date-picker
             v-model="value.promotionEndTime"
+            :disabled="!isEdit"
             type="datetime"
             :picker-options="pickerOptions1"
             placeholder="选择结束时间">
@@ -87,14 +93,14 @@
         </div>
         <div class="littleMargin">
           促销价格：
-          <el-input style="width: 220px" v-model="value.promotionPrice" placeholder="输入促销价格"></el-input>
+          <el-input style="width: 220px" v-model="value.promotionPrice" :disabled="!isEdit" placeholder="输入促销价格"></el-input>
         </div>
 
       </el-form-item>
       <el-form-item v-show="value.promotionType===2">
         <div v-for="(item, index) in value.memberPriceList" :class="{littleMargin:index!==0}">
           {{item.memberLevelName}}：
-          <el-input v-model="item.memberPrice" style="width: 200px"></el-input>
+          <el-input v-model="item.memberPrice" :disabled="!isEdit" style="width: 200px"></el-input>
         </div>
       </el-form-item>
       <el-form-item v-show="value.promotionType===3">
@@ -105,7 +111,7 @@
             align="center"
             width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.count"></el-input>
+              <el-input v-model="scope.row.count" :disabled="!isEdit"></el-input>
             </template>
           </el-table-column>
           <el-table-column
@@ -113,15 +119,15 @@
             align="center"
             width="120">
             <template slot-scope="scope">
-              <el-input v-model="scope.row.discount"></el-input>
+              <el-input v-model="scope.row.discount" :disabled="!isEdit"></el-input>
             </template>
           </el-table-column>
           <el-table-column
             align="center"
             label="操作">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
-              <el-button type="text" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
+              <el-button type="text" :disabled="!isEdit" @click="handleRemoveProductLadder(scope.$index, scope.row)">删除</el-button>
+              <el-button type="text" :disabled="!isEdit" @click="handleAddProductLadder(scope.$index, scope.row)">添加</el-button>
             </template>
           </el-table-column>
         </el-table>
@@ -149,8 +155,8 @@
             align="center"
             label="操作">
             <template slot-scope="scope">
-              <el-button type="text" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
-              <el-button type="text" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
+              <el-button type="text" :disabled="!isEdit" @click="handleRemoveFullReduction(scope.$index, scope.row)">删除</el-button>
+              <el-button type="text" :disabled="!isEdit" @click="handleAddFullReduction(scope.$index, scope.row)">添加</el-button>
             </template>
           </el-table-column>
         </el-table>

src/views/pms/product/detail.vue

@@ -0,0 +1,13 @@
+<template> 
+  <product-detail  :is-edit='false'></product-detail>
+  <!-- -->
+</template>
+<script>
+  import ProductDetail from './components/ProductDetail'
+  export default {
+    name: 'detailProduct',
+    components: { ProductDetail }
+  }
+</script>
+<style>
+</style>

src/views/pms/product/index.vue

@@ -165,10 +165,10 @@
               </el-button>
             </p>
             <p>
-              <el-button
+              <!-- <el-button
                 size="mini"
                 @click="handleShowLog(scope.$index, scope.row)">日志
-              </el-button>
+              </el-button> -->
               <el-button
                 size="mini"
                 type="danger"
@@ -584,7 +584,8 @@
         this.$router.push({path:'/pms/updateProduct',query:{id:row.id}});
       },
       handleShowProduct(index,row){
-        console.log("handleShowProduct",row);
+             this.$router.push({path:'/pms/detailProduct',query:{id:row.id}});
+        // console.log("handleShowProduct",row);
       },
       handleShowVerifyDetail(index,row){
         console.log("handleShowVerifyDetail",row);