商品属性修改

src/api/product/category.js

@@ -17,10 +17,11 @@ export function getCategory(id) {
   })
 }
 
-export function getTemplateAttribute(id) {
+export function getTemplateAttribute(data) {
   return request({
-    url: '/product/category/getTemplateAttribute/' + id,
+    url: '/product/category/getTemplateAttribute/',
-    method: 'get'
+    method: 'post',
+    data
   })
 }
 

src/api/product/info.js

@@ -17,7 +17,12 @@ export function getInfo(id) {
   })
 }
 
-
+export function getPro(id) {
+  return request({
+    url: '/product/info/getProductDetail?id=' + id,
+    method: 'get'
+  })
+}
 
 
 // 新增商品信息

src/layouttest/index.vue

@@ -1,19 +1,97 @@
 <template>
   <div>
-    <h1>hello 这是第一个路由视图</h1>
+    <el-container>
-    <router-view></router-view>
+      <el-header>
+        <el-menu
+          default-active="1"
+          class="el-menu-demo el-menu-right"
+          mode="horizontal"
+          background-color="#545c64"
+          text-color="#fff"
+          active-text-color="#ffd04b">
+
+          <el-menu-item index="1">处理中心</el-menu-item>
+          <el-submenu index="2">
+            <template slot="title">我的工作台</template>
+            <el-menu-item index="2-1">选项1</el-menu-item>
+            <el-menu-item index="2-2">选项2</el-menu-item>
+            <el-menu-item index="2-3">选项3</el-menu-item>
+            <el-submenu index="2-4">
+              <template slot="title">选项4</template>
+              <el-menu-item index="2-4-1">选项1</el-menu-item>
+              <el-menu-item index="2-4-2">选项2</el-menu-item>
+              <el-menu-item index="2-4-3">选项3</el-menu-item>
+            </el-submenu>
+          </el-submenu>
+          <el-menu-item index="3" disabled>消息中心</el-menu-item>
+          <el-menu-item index="4"><a href="https://www.ele.me" target="_blank">订单管理</a></el-menu-item>
+        </el-menu>
+      </el-header>
+      <el-main>
+        <el-row :gutter="20">
+          <el-col :span="12" :offset="6">
+            <router-view></router-view>
+          </el-col>
+        </el-row>
+      </el-main>
+    </el-container>
+
   </div>
 </template>
 <script>
+import {getInfo} from "@/api/product/info";
+import {getTemplateAttribute} from "@/api/product/category";
+
 export default {
   name: 'Index',
   data() {
-    return {}
+    return {
+      good:{
+        name:"商品1",
+        num:999,
+        id:44
+      },
+      test:{
+        id:44,
+        value:45
+      }
+    }
   },
   created() {
   },
-  methods: {}
+  methods: {
+    /*获取商品信息*/
+
+  }
 }
 </script>
 <style scoped>
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+
+.el-menu-demo {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.el-main {
+  color: #333;
+}
+
+body > .el-container {
+  margin-bottom: 40px;
+}
+
+.el-container:nth-child(5) .el-aside,
+.el-container:nth-child(6) .el-aside {
+  line-height: 260px;
+}
+
+.el-container:nth-child(7) .el-aside {
+  line-height: 320px;
+}
 </style>

src/router/index.js

@@ -3,7 +3,7 @@ import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
 import Layouttest from "@/layouttest";
-
+import DetailsComponent from '@/views/a/detailsComponent.vue';
 Vue.use(Router)
 
 /**
@@ -80,10 +80,10 @@ export const constantRoutes = [
     redirect: 'test',
     children: [
       {
-        path: 'test',
+        path: '/test/:id',
         component: () => import('@/views/a/index'),
         name: 'Test',
-        meta: {title: "测试", icon: 'dashboard', affix: true}
+        meta: {title: "商品商城", icon: 'dashboard', affix: true}
       }
     ]
   },
@@ -100,6 +100,11 @@ export const constantRoutes = [
         meta: {title: '个人中心', icon: 'user'}
       }
     ]
+  },
+  {
+    path:'/details',
+    name:'/details',
+    component: DetailsComponent
   }
 ]
 
@@ -192,5 +197,5 @@ Router.prototype.replace = function push(location) {
 export default new Router({
   mode: 'history', // 去掉url中的#
   scrollBehavior: () => ({y: 0}),
-  routes: constantRoutes
+  routes: constantRoutes,
 })

src/views/a/detailsComponent.vue

@@ -0,0 +1,19 @@
+<template>
+  <div>
+
+
+  </div>
+</template>
+<script>
+export default {
+  name: 'Index',
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+<style scoped>
+</style>

src/views/a/index.vue

@@ -1,23 +1,289 @@
 <template>
   <div>
-    <h2>第二个</h2>
+    <!--    <el-main>-->
-
+    <!--      <el-row :gutter="20">-->
-
+    <!--        <el-col :span="6" :offset="6">-->
+    <!--          <el-descriptions v-model="good" title="商品列表">-->
+    <!--            <el-descriptions-item label="商品图片">-->
+    <!--              <img :src="good.image" style="width: 100px" height="100px">-->
+    <!--            </el-descriptions-item>-->
+    <!--            <el-descriptions-item label="商品名称">{{ good.name }}</el-descriptions-item>-->
+    <!--            <el-descriptions-item label="销量">-->
+    <!--              {{ good.num }}-->
+    <!--            </el-descriptions-item>-->
+    <!--            <el-descriptions-item label="备注">-->
+    <!--              <el-tag size="small">食品</el-tag>-->
+    <!--            </el-descriptions-item>-->
+    <!--            <el-descriptions-item label="产地">-->
+    <!--              江苏省苏州市吴中区吴中大道 1188 号-->
+    <!--            </el-descriptions-item>-->
+    <!--            <el-descriptions-item>-->
+
+    <!--            </el-descriptions-item>-->
+    <!--          </el-descriptions>-->
+    <!--        </el-col>-->
+    <!--        <el-col :span="6" :offset="6">-->
+    <!--          <div class="grid-content bg-purple"></div>-->
+    <!--        </el-col>-->
+    <!--      </el-row>-->
+    <!--    </el-main>-->
+    <el-button type="primary" size="small" @click="details()">详情</el-button>
+
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="breadcrumb in breadcrumbList">{{ breadcrumb }}</el-breadcrumb-item>
+    </el-breadcrumb>
 
 
+    <el-row>
+      <el-col :span="12">
+        <el-carousel indicator-position="outside" style="width: 350px">
+          <el-carousel-item v-for="item in imageList" :key="item">
+            <h3>
+              <img :src="item">
+            </h3>
+          </el-carousel-item>
+        </el-carousel>
+        <el-row :gutter="20" style="margin-top: 20px">
+          <el-col :span="6">
+            <div>
+              <el-statistic
+                group-separator=","
+                :precision="2"
+                :value="value2"
+                title="销量人气"
+              ></el-statistic>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div>
+              <el-statistic title="商品评价">
+                <template slot="formatter">
+                  999
+                </template>
+              </el-statistic>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div>
+              <el-statistic
+                group-separator=","
+                :precision="2"
+                decimal-separator="."
+                :value="value1"
+                title="收藏人气"
+              >
+                <template slot="prefix">
+                  <i class="el-icon-s-flag" style="color: red"></i>
+                </template>
+                <template slot="suffix">
+                  <i class="el-icon-s-flag" style="color: blue"></i>
+                </template>
+              </el-statistic>
+            </div>
+          </el-col>
+          <el-col :span="6">
+            <div>
+              <el-statistic :value="like ? 521 : 520" :title="brandName">
+                <template slot="suffix">
+              <span @click="like = !like" class="like">
+                <i
+                  class="el-icon-star-on"
+                  style="color:red"
+                  v-show="!!like"
+                ></i>
+                <i class="el-icon-star-off" v-show="!like"></i>
+              </span>
+                </template>
+              </el-statistic>
+            </div>
+          </el-col>
+        </el-row>
+      </el-col>
+      <el-col :span="12">
+        <h1 style=" display: inline-block; margin-right: 200px; margin-left: 30px">{{ good.name }}</h1>
+        <h3 style="display: inline-block; color: red;">￥50</h3>
+        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 80px">
+          <el-form-item :label="rule.name" v-for="(rule, index) in form.ruleList" :key="index">
+            <el-radio-group size="small" v-model="rule.selectedValue">
+              <el-radio v-for="item in rule.value" :key="item" :label="item">{{ item }}</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="规格2">
+            <el-input-number v-model="form.num" :min="1" :max="100" label="描述文字"></el-input-number>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">加入购物车</el-button>
+            <el-button type="danger">立即购买</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row>
+      <el-card class="box-card" style="margin-top: 20px">
+        <div slot="header" class="clearfix">
+          <span>商品详情</span>
+        </div>
+        <el-descriptions class="margin-top" :column="3" size="medium" border>
+          <template slot="extra">
+            <el-button type="primary" size="small">商品评论</el-button>
+          </template>
+          <el-descriptions-item v-for="detail in goodDetail">
+            <template slot="label">
+              <i class="el-icon-user"></i>
+              {{ detail.name }}
+            </template>
+            {{ detail.value }}
+          </el-descriptions-item>
+        </el-descriptions>
+        <el-row>
+          <img :src="good.carouselImages" style="width: 100%" height="500px">
+          <img :src="good.carouselImages" style="width: 100%" height="500px">
+        </el-row>
+      </el-card>
+    </el-row>
 
   </div>
 </template>
 <script>
+
+import {getPro} from "@/api/product/info";
+
 export default {
   name: 'Index',
+  computed: {},
   data() {
-    return {}
+    return {
+      names:"",
+      /*图片*/
+      imageList: [],
+      /*品牌信息*/
+      brandName: "",
+      good: {
+        name: "",
+        carouselImages: ""
+      },
+      like: true,
+      value1: 999,
+      value2: 999,
+      title: "增长人数",
+      breadcrumbList: [],
+      //规格表单
+      form: {
+        ruleList: [],
+        selectedValue: 1
+      },
+      ruleValueList: [],
+      /*国歌表单*/
+      categoryCommonElement: {
+        templateAttributeGroupList: [],
+        templateAttributeList: [],
+        attributeList: []
+      },
+      /*商品详情*/
+      goodDetail: []
+    }
   },
   created() {
+    const id = this.$route.params.id;
+    this.details(id)
   },
-  methods: {}
+  watch:{
+    "names":{
+      handler(val){
+        console.log(val)
+      }
+    }
+  },
+  methods: {
+    /*立即购买按钮*/
+    onSubmit() {
+
+    },
+    details: function (id) {
+      getPro(id).then(
+        res => {
+          console.log(res)
+          this.breadcrumbList = res.data.typeList
+          this.brandName = res.data.brandName
+          this.good.name = res.data.product.name
+          this.good.carouselImages = res.data.product.carouselImages
+          this.imageList.push(res.data.product.carouselImages)
+          let e1=[]
+          res.data.ruleList.forEach(
+            rule=>{
+              e1.push(
+                {id:rule.id,name:rule.name,value:rule.value}
+              )
+            }
+          )
+          console.log(e1)
+          this.form.ruleList =e1
+            this.categoryCommonElement = res.data.categoryCommonElementResp
+          e = []
+          let e = []
+          this.categoryCommonElement.attributeList.forEach(
+            attribute => {
+              e.push(
+                {name: attribute.name, value: attribute.value}
+              )
+            }
+          )
+          this.categoryCommonElement.templateAttributeList.forEach(
+            attribute => {
+              e.push(
+                {name: attribute.name, value: attribute.value}
+              )
+            }
+          )
+          let f = []
+          this.categoryCommonElement.templateAttributeGroupList.forEach(
+            group => {
+              f.push(group.attributeList)
+            }
+          )
+          f.forEach(
+            group => {
+              group.forEach(
+                group1 => {
+                  e.push(
+                    {name: group1.name, value: group1.value}
+                  )
+                }
+              )
+            }
+          )
+
+          this.goodDetail = []
+          this.goodDetail = e.filter(rule => rule.value !== null)
+          console.log(this.goodDetail)
+        }
+      )
+    }
+
+  }
 }
 </script>
 <style scoped>
+.like {
+  cursor: pointer;
+  font-size: 12px;
+  display: inline-block;
+}
+
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 20px;
+  opacity: 0.75;
+  line-height: 300px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
 </style>

src/views/product/productInfo/index.vue

@@ -108,6 +108,12 @@
             v-hasPermi="['product:info:remove']"
           >删除
           </el-button>
+          <el-button
+            size="mini"
+            type="text"
+            @click="detail(scope.row.id)"
+          >详细
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -278,7 +284,7 @@
             <div slot="header" class="clearfix">
               <el-tabs v-model="activeName">
                 <el-tab-pane label="商品属性组" name="first">
-                  {{e}}
+
                   <el-row>
                     <el-col :span="6"
                             v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
@@ -286,12 +292,10 @@
                         <div slot="header" class="clearfix">
                           <span>属性组名称【{{ templateAttributeGroup.groupName }}】</span>
                         </div>
-                        <div style="width: 100px;height: 500px">
+                        <div style="width: 100px;height: 200px">
-
+                          <el-form-item  :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
-                          <el-form-item  :label="attribute.id" v-for="attribute in templateAttributeGroup.attributeList">
                             <el-input style="width: 100px;" v-model="attribute.value"></el-input>
                           </el-form-item>
-
                         </div>
                       </el-card>
                     </el-col>
@@ -299,7 +303,7 @@
                 </el-tab-pane>
 
                 <el-tab-pane label="商品属性" name="second">
-                  商品属性{{e}}
+                  商品属性
                   <el-row style="overflow-x: auto; height: 300px;">
                     <el-form label-width="80px">
                       <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
@@ -313,7 +317,7 @@
 
 
                 <el-tab-pane label="自有属性" name="third">
-                  自有属性{{e}}
+                  自有属性
                   <el-card class="box-card">
                     <el-row>
                       <el-form :inline="true" :model="customAttributeForm" class="demo-form-inline">
@@ -388,7 +392,7 @@
 import {listInfo, getInfo, delInfo, addInfo, updateInfo} from "@/api/product/info";
 import {listBrand} from "@/api/product/brand";
 import {listRule} from "@/api/product/rule";
-import {getTemplateAttribute, listCategory} from "@/api/product/category";
+import {getTemplateAttribute,  listCategory} from "@/api/product/category";
 import {addAttribute} from "@/api/product/attribute";
 
 export default {
@@ -524,6 +528,11 @@ export default {
           "value":""
         }
       ],
+      test:{
+        id:0,
+        value:0,
+      },
+      check:[]
     };
   },
   watch: {
@@ -540,11 +549,16 @@ export default {
         }
       }
     },
+    "form.id":{
+      handler(val){
+        this.test.id=val
+      }
+    },
     "form.type": {
       handler(value) {
         if (value != null) {
-          getTemplateAttribute(value).then(response => {
+          this.test.value=value
-            console.log(response)
+          getTemplateAttribute(this.test).then(response => {
             const {data} = response;
             const {templateAttributeGroupList, templateAttributeList, attributeList} = data;
             this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
@@ -554,6 +568,7 @@ export default {
         }
       }
     },
+
   },
   created() {
     this.getList();
@@ -561,6 +576,10 @@ export default {
     this.CategoryTree();
   },
   methods: {
+    detail(id){
+      console.log(id)
+      this.$router.push('/test/'+id)
+    },
     onSubmit() {
       this.skuList.forEach(skuInfo => {
         skuInfo.image = this.oneSettingValue.image;
@@ -761,19 +780,10 @@ export default {
       this.reset();
       const id = row.id || this.ids
       getInfo(id).then(response => {
-        console.log(response)
+        console.log(this.categoryCommonElement)
-
+        this.test.id=id
         this.form = response.data;
         this.oneSettingValue=response.data.specification
-
-        this.e=[]
-        this.e1=[]
-        this.e2=[]
-        this.e3=[]
-        this.e = response.data.asProductAttributeInfo.map(item => {
-          return { attributeId: item.attributeId, value: item.value };
-        });
-        console.log(this.e)
         this.changeRule(response.data.ruleId)
         this.onSubmit()
         this.form.type=parseInt(response.data.type)
@@ -791,7 +801,6 @@ export default {
         if (valid) {
           if (this.form.id != null) {
             this.selectAttribute()
-            console.log(this.form)
             updateInfo(this.form).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;