lilei преди 3 години
родител
ревизия
43467aff9f

+ 23 - 12
src/config/router.config.js

@@ -48,17 +48,6 @@ export const asyncRouterMap = [
         },
         hidden: true
       },
-      // 新品列表
-      {
-        path: '/newProduct',
-        name: 'newProduct',
-        component: () => import(/* webpackChunkName: "home" */ '@/views/productManagement/newProduct/list'),
-        meta: {
-          title: '新品信息',
-          icon: 'home'
-        },
-        hidden: true
-      },
       // 销售管理
       {
         path: '/salesManagement',
@@ -1796,7 +1785,29 @@ export const asyncRouterMap = [
                 }
               }
             ]
-          }
+          },
+          // 新品列表
+          {
+            path: '/newProduct',
+            name: 'newProduct',
+            component: () => import(/* webpackChunkName: "home" */ '@/views/productManagement/newProduct/list'),
+            meta: {
+              title: '新品信息',
+              icon: 'home'
+            },
+            hidden: true
+          },
+          // 产品详情
+          {
+            path: '/viewProduct/:sn',
+            name: 'viewProduct',
+            component: () => import(/* webpackChunkName: "home" */ '@/views/productManagement/newProduct/detail'),
+            meta: {
+              title: '产品详情',
+              icon: 'home'
+            },
+            hidden: true
+          },
         ]
       },
       //  供应商管理

+ 171 - 0
src/views/productManagement/newProduct/detail.vue

@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <a-page-header :ghost="false" :backIcon="false" class="newProductDetail-back">
+      <!-- 自定义的二级文字标题 -->
+      <template slot="subTitle">
+        <a id="newProductDetail-back-btn" href="javascript:;" @click="$router.go(-1)">
+          <a-icon type="left" />
+          返回
+        </a>
+      </template>
+    </a-page-header>
+    <div class="newProductDetail-modal">
+      <!-- 产品详情 -->
+      <h4>{{ (detailsData && detailsData.name) || '--' }}</h4>
+      <div class="productHead">
+        <div class="productInfo">
+          <a-descriptions bordered :column="2" size="small">
+            <a-descriptions-item label="产品品牌:">{{ (detailsData && detailsData.productBrandName) || '--' }}</a-descriptions-item>
+            <a-descriptions-item label="产品编码:">{{ (detailsData && detailsData.code) || '--' }}</a-descriptions-item>
+            <a-descriptions-item label="原厂编码:">{{ (detailsData && detailsData.origCode) || '--' }}</a-descriptions-item>
+            <a-descriptions-item label="商品尺寸:">{{ (detailsData && detailsData.name) || '--' }}</a-descriptions-item>
+            <a-descriptions-item label="重量:">{{ (detailsData && detailsData.unit) || '--' }}</a-descriptions-item>
+            <a-descriptions-item label="计量单位:">{{ (detailsData && detailsData.unit) || '--' }}</a-descriptions-item>
+            <a-descriptions-item label="其它编号:">
+              {{ detailsData && (detailsData.specialPrice || detailsData.specialPrice == 0) ? detailsData.specialPrice : '--' }}
+            </a-descriptions-item>
+            <a-descriptions-item label=""></a-descriptions-item>
+            <a-descriptions-item label="适用车型:">{{ productTypeName || '--' }}</a-descriptions-item>
+          </a-descriptions>
+          <div class="productDetail">
+            <h4>产品介绍</h4>
+            <div class="productDesc">阿斯顿发链接撒旦发了就阿斯大幅拉四大佛教萨拉丁撒地方就拉萨撒萨德勒撒旦发了撒打发士大夫了士大夫了撒打发</div>
+          </div>
+        </div>
+        <div class="productImg">
+          <a-carousel arrows>
+            <div slot="prevArrow" slot-scope="props" class="custom-slick-arrow" style="left: 10px;zIndex: 1"><a-icon type="left-circle" /></div>
+            <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px"><a-icon type="right-circle" /></div>
+            <div><img src="../../../assets/avatar2.jpg" /></div>
+            <div><img src="../../../assets/avatar2.jpg" /></div>
+            <div><img src="../../../assets/avatar2.jpg" /></div>
+          </a-carousel>
+          <div class="sycxImg">
+            <p>适用车型图片</p>
+            <div>
+              <img src="../../../assets/avatar2.jpg" />
+              <div>江陵凯瑞200</div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import { productDetail } from '@/api/product.js'
+export default {
+  name: 'ProductInfoDetail',
+  computed: {
+    productTypeName () {
+      const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
+      const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
+      const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
+      return productTypeName1 + productTypeName2 + productTypeName3
+    }
+  },
+  data () {
+    return {
+      itemId: null,
+      detailsData: null //  详情数据
+    }
+  },
+  methods: {
+    //  获取详情
+    getDetail () {
+      productDetail({ sn: this.itemId }).then(res => {
+        if (res.status == 200) {
+          this.detailsData = res.data
+        } else {
+          this.detailsData = null
+        }
+      })
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {
+      vm.itemId = vm.$route.params.sn
+      vm.getDetail()
+    })
+  }
+}
+</script>
+
+<style lang="less">
+/* For demo */
+.ant-carousel .slick-slide {
+  text-align: center;
+  height: 190px;
+  line-height: 190px;
+  background: #364d79;
+  overflow: hidden;
+}
+.ant-carousel .custom-slick-arrow {
+  width: 25px;
+  height: 25px;
+  font-size: 25px;
+  color: #fff;
+  opacity: 0.3;
+}
+.ant-carousel .custom-slick-arrow:before {
+  display: none;
+}
+.ant-carousel .custom-slick-arrow:hover {
+  opacity: 0.5;
+}
+.ant-carousel .slick-slide img {
+  width: 100%;
+  height: 100%;
+}
+.newProductDetail-back {
+  margin-bottom: 10px;
+}
+.newProductDetail-modal {
+  background-color: #fff;
+  padding: 15px;
+  h4 {
+    font-size: 18px;
+  }
+  .productHead {
+    display: flex;
+    .productImg {
+      width: 25%;
+    }
+    .productInfo {
+      flex-grow: 1;
+      margin-right: 10px;
+    }
+    .sycxImg {
+      margin-top: 10px;
+      p {
+        font-size: 14px;
+        padding: 5px 10px;
+        background-color: #dcf1ff;
+      }
+      img {
+        width: 100px;
+      }
+    }
+  }
+  .productDetail {
+    border: 1px solid #eee;
+    margin-top: 10px;
+    h4 {
+      font-size: 14px;
+      padding: 5px 10px;
+      background-color: #dcf1ff;
+    }
+    .productDesc {
+      padding: 15px;
+    }
+  }
+  .ant-descriptions-item-label.ant-descriptions-item-colon {
+    width: 120px;
+  }
+  .btn-cont {
+    text-align: center;
+    margin: 35px 0 10px;
+  }
+}
+</style>

+ 0 - 197
src/views/productManagement/newProduct/detailModal.vue

@@ -1,197 +0,0 @@
-<template>
-  <a-modal
-    centered
-    class="newProductDetail-modal"
-    :footer="null"
-    :maskClosable="false"
-    title="产品详情"
-    v-model="isShow"
-    @cancle="isShow=false"
-    width="80%">
-    <!-- 产品详情 -->
-    <h4>{{ detailsData&&detailsData.name || '--' }}</h4>
-    <div class="productHead">
-      <div class="productInfo">
-        <a-descriptions bordered :column="2" size="small">
-          <a-descriptions-item label="产品品牌:">{{ detailsData&&detailsData.productBrandName || '--' }}</a-descriptions-item>
-          <a-descriptions-item label="产品编码:">{{ detailsData&&detailsData.code || '--' }}</a-descriptions-item>
-          <a-descriptions-item label="原厂编码:">{{ detailsData&&detailsData.origCode || '--' }}</a-descriptions-item>
-          <a-descriptions-item label="商品尺寸:">{{ detailsData&&detailsData.name || '--' }}</a-descriptions-item>
-          <a-descriptions-item label="重量:">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
-          <a-descriptions-item label="计量单位:">{{ detailsData&&detailsData.unit || '--' }}</a-descriptions-item>
-          <a-descriptions-item label="其它编号:">{{ detailsData&&(detailsData.specialPrice || detailsData.specialPrice==0) ? detailsData.specialPrice : '--' }}</a-descriptions-item>
-          <a-descriptions-item label=""></a-descriptions-item>
-          <a-descriptions-item label="适用车型:">{{ productTypeName || '--' }}</a-descriptions-item>
-        </a-descriptions>
-        <div class="productDetail">
-          <h4>产品介绍</h4>
-          <div class="productDesc">
-            阿斯顿发链接撒旦发了就阿斯大幅拉四大佛教萨拉丁撒地方就拉萨撒萨德勒撒旦发了撒打发士大夫了士大夫了撒打发
-          </div>
-        </div>
-      </div>
-      <div class="productImg">
-        <a-carousel arrows>
-          <div
-            slot="prevArrow"
-            slot-scope="props"
-            class="custom-slick-arrow"
-            style="left: 10px;zIndex: 1"
-          >
-            <a-icon type="left-circle" />
-          </div>
-          <div slot="nextArrow" slot-scope="props" class="custom-slick-arrow" style="right: 10px">
-            <a-icon type="right-circle" />
-          </div>
-          <div><img src="../../../assets/avatar2.jpg"></div>
-          <div><img src="../../../assets/avatar2.jpg"></div>
-          <div><img src="../../../assets/avatar2.jpg"></div>
-        </a-carousel>
-        <div class="sycxImg">
-          <p>适用车型图片</p>
-          <div>
-            <img src="../../../assets/avatar2.jpg">
-            <div>江陵凯瑞200</div>
-          </div>
-        </div>
-      </div>
-    </div>
-    <div class="btn-cont"><a-button id="product-management-detail-modal-back" @click="isShow = false">返回列表</a-button></div>
-  </a-modal>
-</template>
-
-<script>
-import { productDetail } from '@/api/product.js'
-export default {
-  name: 'ProductInfoDetailModal',
-  props: {
-    openModal: { //  弹框显示状态
-      type: Boolean,
-      default: false
-    },
-    itemId: {
-      type: [Number, String],
-      default: ''
-    }
-  },
-  computed: {
-    productTypeName () {
-      const productTypeName1 = this.detailsData && this.detailsData.productTypeName1 ? this.detailsData.productTypeName1 : ''
-      const productTypeName2 = this.detailsData && this.detailsData.productTypeName2 ? ' > ' + this.detailsData.productTypeName2 : ''
-      const productTypeName3 = this.detailsData && this.detailsData.productTypeName3 ? ' > ' + this.detailsData.productTypeName3 : ''
-      return productTypeName1 + productTypeName2 + productTypeName3
-    }
-  },
-  data () {
-    return {
-      isShow: this.openModal, //  是否打开弹框
-      detailsData: null //  详情数据
-    }
-  },
-  methods: {
-    //  获取详情
-    getDetail () {
-      productDetail({ sn: this.itemId }).then(res => {
-        if (res.status == 200) {
-          this.detailsData = res.data
-        } else {
-          this.detailsData = null
-        }
-      })
-    }
-  },
-  watch: {
-    //  父页面传过来的弹框状态
-    openModal (newValue, oldValue) {
-      this.isShow = newValue
-    },
-    //  重定义的弹框状态
-    isShow (newValue, oldValue) {
-      if (!newValue) {
-        this.$emit('close')
-      }
-    },
-    itemId (newValue, oldValue) {
-      if (this.isShow && newValue) {
-        this.getDetail()
-      }
-    }
-  }
-}
-</script>
-
-<style lang="less">
-  /* For demo */
-  .ant-carousel .slick-slide {
-    text-align: center;
-    height: 190px;
-    line-height: 190px;
-    background: #364d79;
-    overflow: hidden;
-  }
-  .ant-carousel .custom-slick-arrow {
-    width: 25px;
-    height: 25px;
-    font-size: 25px;
-    color: #fff;
-    opacity: 0.3;
-  }
-  .ant-carousel .custom-slick-arrow:before {
-    display: none;
-  }
-  .ant-carousel .custom-slick-arrow:hover {
-    opacity: 0.5;
-  }
-  .ant-carousel .slick-slide img {
-    width: 100%;
-    height: 100%;
-  }
-  .newProductDetail-modal{
-    .ant-modal-body {
-      padding: 15px;
-      h4{
-        font-size: 18px;
-      }
-      .productHead{
-        display: flex;
-        .productImg{
-          width: 25%;
-        }
-        .productInfo{
-          flex-grow: 1;
-          margin-right: 10px;
-        }
-        .sycxImg{
-          margin-top: 10px;
-          p{
-            font-size: 14px;
-            padding: 5px 10px;
-            background-color: #dcf1ff;
-          }
-          img{
-            width: 100px;
-          }
-        }
-      }
-      .productDetail{
-        border: 1px solid #eee;
-        margin-top: 10px;
-        h4{
-          font-size: 14px;
-          padding: 5px 10px;
-          background-color: #dcf1ff;
-        }
-        .productDesc{
-          padding: 15px;
-        }
-      }
-    }
-    .ant-descriptions-item-label.ant-descriptions-item-colon{
-      width: 120px;
-    }
-    .btn-cont {
-      text-align: center;
-      margin: 35px 0 10px;
-    }
-  }
-</style>

+ 2 - 12
src/views/productManagement/newProduct/list.vue

@@ -92,18 +92,14 @@
         <!-- 操作 -->
         <template slot="action" slot-scope="text, record">
           <a-button
-            v-if="$hasPermissions('B_product_dealerProduct_detail')"
             size="small"
             type="link"
             class="button-success"
             @click="handleDetail(record)"
             id="productInfoList-detail-btn">详情</a-button>
-          <span v-if="!$hasPermissions('B_product_dealerProduct_edit') && !$hasPermissions('B_product_dealerProduct_detail')">--</span>
         </template>
       </s-table>
     </a-spin>
-    <!-- 产品详情 -->
-    <product-info-detail-modal :openModal="openModal" :itemId="itemId" @close="closeModal" />
   </a-card>
 </template>
 
@@ -114,9 +110,8 @@ import { dealerProductTypeList } from '@/api/dealerProductType'
 import { dealerProductList, dealerProductExport } from '@/api/dealerProduct'
 import { STable, VSelect } from '@/components'
 import rangeDate from '@/views/common/rangeDate.vue'
-import productInfoDetailModal from './detailModal.vue'
 export default {
-  components: { STable, VSelect, productInfoDetailModal, rangeDate },
+  components: { STable, VSelect, rangeDate },
   data () {
     return {
       spinning: false,
@@ -203,12 +198,7 @@ export default {
     //  详情
     handleDetail (row) {
       this.itemId = row.productSn
-      this.openModal = true
-    },
-    //  关闭弹框
-    closeModal () {
-      this.itemId = ''
-      this.openModal = false
+      this.$router.push({ name: 'viewProduct', params: { sn: row.productSn } })
     },
     //  产品分类  change
     changeProductType (val, opt) {

+ 2 - 5
src/views/purchasingManagement/purchaseOrder/edit.vue

@@ -501,11 +501,8 @@ export default {
     },
     // 查看产品
     handlePicDetail (row) {
-      if (row.productMainPic && row.productMainPic.imageUrl) {
-        this.$viewerApi({
-          images: [row.productMainPic.imageUrl.replace('/small/', '/big/')]
-        })
-      }
+      console.log(row)
+      this.$router.push({ name: 'viewProduct', params: { sn: row.productSn } })
     },
     // 上次缺货 导入成功
     hanldeOkOutStock () {