zxj

src/api/product/info.js

@@ -16,6 +16,13 @@ export function getInfo(id) {
     method: 'get'
   })
 }
+// 查询商品信息详细
+export function getDetailInfo(id) {
+  return request({
+    url: '/product/info/detail/' + id,
+    method: 'get'
+  })
+}
 
 // 新增商品信息
 export function addInfo(data) {

src/components/Editor/index.vue

@@ -124,6 +124,9 @@ export default {
   methods: {
     init() {
       const editor = this.$refs.editor;
+      if (this.readOnly){
+        this.options.modules.toolbar = {};
+      }
       this.Quill = new Quill(editor, this.options);
       // 如果设置了上传地址则自定义图片上传事件
       if (this.type == 'url') {

src/layout-shop/index.vue

@@ -0,0 +1,74 @@
+<template>
+  <el-container>
+    <el-header>
+      <el-menu
+        default-active="1"
+        class="el-menu-demo"
+        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/>
+        </el-col>
+      </el-row>
+    </el-main>
+  </el-container>
+</template>
+
+<script>
+export default {
+  name: "layoutShop",
+  data() {
+    return {}
+  },
+  created() {
+  },
+  methods: {}
+}
+</script>
+
+<style scoped>
+.el-header, .el-footer {
+  background-color: #B3C0D1;
+  color: #333;
+  text-align: center;
+  line-height: 60px;
+}
+.el-main {
+  background-color: #E9EEF3;
+  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

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Router from 'vue-router'
 /* Layout */
 import Layout from '@/layout'
+import LayoutShop from "@/layout-shop";
 
 Vue.use(Router)
 
@@ -73,6 +74,19 @@ export const constantRoutes = [
       }
     ]
   },
+  {
+    path: '',
+    component: LayoutShop,
+    redirect: 'product-detail',
+    children: [
+      {
+        path: 'product-detail/:id',
+        component: () => import('@/views/product/info/detail/index'),
+        name: 'Demo',
+        meta: {title: '商品详情', icon: 'dashboard', affix: true}
+      }
+    ]
+  },
   {
     path: '/user',
     component: Layout,

src/views/product/info/detail/index.vue

@@ -0,0 +1,186 @@
+<template>
+  <div>
+    <el-breadcrumb separator-class="el-icon-arrow-right">
+      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
+      <el-breadcrumb-item v-for="categoryInfo in projectDetail.categoryInfoList">{{categoryInfo.name}}</el-breadcrumb-item>
+
+      <el-breadcrumb-item>{{projectDetail.projectInfo.name}}</el-breadcrumb-item>
+    </el-breadcrumb>
+    <el-row :gutter="20" style="margin-top: 20px">
+      <el-col :span="12">
+        <el-carousel trigger="click" height="400px">
+          <el-carousel-item v-for="item in 4" :key="item">
+            <h3 class="small">{{ item }}</h3>
+          </el-carousel-item>
+        </el-carousel>
+        <div style="margin-top: 20px;">
+          <el-row :gutter="20">
+            <el-col :span="6">
+              <div>
+                <el-statistic
+                  group-separator=","
+                  :precision="2"
+                  :value="value2"
+                  :title="title"
+                ></el-statistic>
+              </div>
+            </el-col>
+            <el-col :span="6">
+              <div>
+                <el-statistic title="商品评价">
+                  <template slot="formatter">
+                    456/2
+                  </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="品牌信息">
+                  <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>
+        </div>
+      </el-col>
+      <el-col :span="12">
+          <h1>商品名称</h1>
+          <h3>商品规格（内存-储存-颜色）</h3>
+          <h2 style="color: red">￥125</h2>
+        <el-form ref="form" :model="form" label-width="80px" style="margin-top: 110px">
+          <el-form-item label="规格1">
+            <el-radio-group v-model="form.rule1">
+              <el-radio :label="3" border>备选项</el-radio>
+              <el-radio :label="6" border>备选项</el-radio>
+              <el-radio :label="9" border>备选项</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="规格2">
+            <el-radio-group v-model="form.rule2">
+              <el-radio :label="3" border>备选项</el-radio>
+              <el-radio :label="6" border>备选项</el-radio>
+              <el-radio :label="9" border>备选项</el-radio>
+            </el-radio-group>
+          </el-form-item>
+          <el-form-item label="规格2">
+            <el-input-number v-model="form.num" :min="1" :max="10" label="描述文字"></el-input-number>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary" @click="onSubmit">加入购物车</el-button>
+            <el-button>立即购买</el-button>
+          </el-form-item>
+        </el-form>
+      </el-col>
+    </el-row>
+    <el-row style="margin-top: 30px;">
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>商品详情</span>
+        </div>
+        <el-descriptions title="分组1" :column="1">
+          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+          <el-descriptions-item label="居住地">苏州市</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>
+        <el-descriptions title="其他属性" :column="1">
+          <el-descriptions-item label="用户名">kooriookami</el-descriptions-item>
+          <el-descriptions-item label="手机号">18100000000</el-descriptions-item>
+          <el-descriptions-item label="居住地">苏州市</el-descriptions-item>
+        </el-descriptions>
+
+        <editor v-model="editorValue" :read-only="true" >
+
+        </editor>
+      </el-card>
+    </el-row>
+  </div>
+</template>
+
+<script>
+import {getDetailInfo} from "@/api/product/info";
+
+export default {
+  name: "productDetail",
+  data() {
+    return {
+      breadcrumbList: [
+        "服装",
+        "外衣",
+        "女式超柔软拉毛运动开衫"
+      ],
+      like: true,
+      value1: 4154.564,
+      value2: 1314,
+      title: "销量人气",
+      form: {
+        num: 1
+      },
+      editorValue: "awejfoiajovhahrfhaowiejfoawijfeoiawjefoawjjogihao",
+      projectDetail: {}
+    }
+  },
+  created() {
+    this.initProjectDetailInfo();
+  },
+  methods: {
+    initProjectDetailInfo(){
+      getDetailInfo(2).then(response => {
+        this.projectDetail = response.data;
+      })
+    }
+  }
+}
+</script>
+
+<style scoped>
+.el-carousel__item h3 {
+  color: #475669;
+  font-size: 14px;
+  opacity: 0.75;
+  line-height: 150px;
+  margin: 0;
+}
+
+.el-carousel__item:nth-child(2n) {
+  background-color: #99a9bf;
+}
+
+.el-carousel__item:nth-child(2n+1) {
+  background-color: #d3dce6;
+}
+.ql-toolbar{
+  display: none;
+}
+</style>

src/views/product/info/index.vue

@@ -129,6 +129,12 @@
             @click="handleDelete(scope.row)"
             v-hasPermi="['product:info:remove']"
           >删除</el-button>
+          <el-button
+            size="mini"
+            type="text"
+            icon="el-icon-info"
+            @click="handleDetail(scope.row.id)"
+          >查看详细信息</el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -211,7 +217,7 @@
           </el-row>
         </div>
         <div v-show="stepNumber === 1">
-          <el-form-item label="品类" prop="ruleId">
+          <el-form-item label="品类" prop="type">
             <el-cascader
               style="width: 100%"
               v-model="categoryOptionValue"
@@ -229,7 +235,7 @@
                       <span>属性组【{{templateAttributeGroup.groupName}}】</span>
                     </div>
                     <div style="height: 200px; width: 100%;">
-                      <el-form ref="form" label-width="80px">
+                      <el-form ref="templateAttributeGroupForm" label-width="80px">
                         <el-form-item :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
                           <el-input v-model="attribute.value"></el-input>
                         </el-form-item>
@@ -291,7 +297,7 @@
                   <span>属性值填写</span>
                 </div>
                 <el-row style="overflow-x: auto; height: 300px;">
-                  <el-form ref="form" :model="form" label-width="80px">
+                  <el-form ref="attributeForm" :model="form" label-width="80px">
                     <el-col :span="6" v-for="attribute in attributeCheckedList">
                       <el-form-item :label="attribute.name">
                         <el-input v-model="attribute.value"></el-input>
@@ -305,7 +311,7 @@
         </div>
         <div v-show="stepNumber === 2">
           <el-form-item label="规格" prop="ruleId">
-            <el-select v-model="form.ruleId" placeholder="请选择" style="width: 100%;">
+            <el-select v-model="form.ruleId" placeholder="请选择" @change="changeRule" style="width: 100%;">
               <el-option
                 v-for="rule in ruleList"
                 :key="rule.id"
@@ -315,9 +321,42 @@
               </el-option>
             </el-select>
           </el-form-item>
+          <el-form :inline="true" :model="oneSettingForm" class="demo-form-inline">
+            <el-form-item label="图片">
+              <image-upload
+                :limit="1"
+                :is-show-tip="false"
+                v-model="oneSettingForm.image" placeholder="审批人"></image-upload>
+            </el-form-item>
+            <el-form-item label="价格">
+              <el-input v-model="oneSettingForm.price" placeholder="价格"></el-input>
+            </el-form-item>
+            <el-form-item label="库存">
+              <el-input v-model="oneSettingForm.stock" placeholder="库存"></el-input>
+            </el-form-item>
+            <el-form-item>
+              <el-button type="primary" @click="oneSetting">一键设置</el-button>
+            </el-form-item>
+          </el-form>
+          <el-table
+            :data="skuList"
+            border
+            max-height="500"
+            style="width: 100%">
+            <el-table-column v-for="title in titleList" :prop="title.prop" :label="title.label">
+              <template slot-scope="scope">
+                <span v-if="title.prop.indexOf('prop') > -1">{{scope.row[title.prop]}}</span>
+                <el-input-number v-else-if="['stock','price'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]" :precision="2" :step="0.01"></el-input-number>
+                <image-upload v-else-if="['image'].indexOf(title.prop) > -1" v-model="scope.row[title.prop]"
+                :limit="1"
+                :is-show-tip="false"
+                ></image-upload>
+              </template>
+            </el-table-column>
+          </el-table>
         </div>
         <div v-show="stepNumber === 3">
-          <el-form-item label="商品描述">
+          <el-form-item label="商品描述" prop="introduction">
             <editor v-model="form.introduction" :min-height="192"/>
           </el-form-item>
         </div>
@@ -381,14 +420,34 @@ export default {
       form: {},
       // 表单校验
       rules: {
-        createBy: [
-          { required: true, message: "创建人不能为空", trigger: "blur" }
+        name: [
+          { required: true, message: "商品名称不能为空", trigger: "blur" }
         ],
-        createTime: [
-          { required: true, message: "创建时间不能为空", trigger: "blur" }
+        status: [
+          { required: true, message: "商品状态不能为空", trigger: "blur" }
+        ],
+        brandId: [
+          { required: true, message: "商品品牌不能为空", trigger: "blur" }
+        ],
+        image: [
+          { required: true, message: "商品图片不能为空", trigger: "blur" }
+        ],
+        carouselImages: [
+          { required: true, message: "商品轮播图不能为空", trigger: "blur" }
+        ],
+        type: [
+          { required: true, message: "商品品类不能为空", trigger: "blur" }
+        ],
+        ruleId: [
+          { required: true, message: "商品规格不能为空", trigger: "blur" }
         ],
       },
-      stepNumber: 1,
+      rulesTemplateMap: {
+        0: ["name", "status", "brandId", "image", "carouselImages"],
+        1: ["type"],
+        2: ["ruleId"],
+      },
+      stepNumber: 0,
       brandList: [],
       categoryOptions: [],
       categoryOptionValue: [],
@@ -404,6 +463,26 @@ export default {
         templateAttributeGroupList: [],
         templateAttributeList: [],
         attributeList: []
+      },
+      templateTitleList: [
+        {
+          "label":"规格图片",
+          "prop":"image"
+        },
+        {
+          "label":"商品库存",
+          "prop":"stock"
+        }, {
+          "label":"商品价格",
+          "prop":"price"
+        }
+      ],
+      titleList: [],
+      skuList: [],
+      oneSettingForm: {
+        "image": null,
+        "stock": null,
+        "price": null
       }
     };
   },
@@ -441,6 +520,61 @@ export default {
     this.getList();
   },
   methods: {
+    oneSetting(){
+      this.skuList.forEach(skuInfo => {
+        skuInfo.image = this.oneSettingForm.image;
+        skuInfo.stock = this.oneSettingForm.stock;
+        skuInfo.price = this.oneSettingForm.price;
+      })
+    },
+    changeRule(ruleId){
+      this.titleList = []
+      let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === ruleId);
+      const {ruleAttrList} = ruleInfo;
+      let skuTotal = 1;
+      for (let ruleAttrListKey in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[ruleAttrListKey];
+        this.titleList.push({
+          "label":ruleAttrInfo.name,
+          "prop":"prop"+ruleAttrListKey
+        })
+        skuTotal = skuTotal * ruleAttrInfo.valueList.length;
+      }
+      this.titleList.push(...this.templateTitleList) ;
+      console.log(this.titleList);
+      this.skuList = [];
+      for (let i = 0; i < skuTotal; i++) {
+        this.skuList.push(
+          {
+            "image": null,
+            "price": 85.62,
+            "stock": 236
+          }
+        );
+      }
+      // currentIndex 当前下标
+      for (let currentIndex in ruleAttrList) {
+        let ruleAttrInfo = ruleAttrList[currentIndex];
+        // 连续出现次数  循环出现次数
+        let continuousSize = 1, forSize = 1;
+        for (let continuousIndex = parseInt(currentIndex) + 1 ; continuousIndex < ruleAttrList.length ; continuousIndex++ ){
+          continuousSize = continuousSize * ruleAttrList[continuousIndex].valueList.length;
+        }
+        for (let forIndex = parseInt(currentIndex) - 1; forIndex >= 0; forIndex--){
+          forSize = forSize * ruleAttrList[forIndex].valueList.length
+        }
+        console.log(`${ruleAttrInfo.name} 规格 连续出现次数：${continuousSize}  循环出现次数：${forSize}`)
+        let counter = 0;
+        for (let forIndex = 0; forIndex < forSize; forIndex++) {
+          const {valueList} = ruleAttrInfo;
+          valueList.forEach(value => {
+            for (let continuousIndex = 0; continuousIndex < continuousSize; continuousIndex++) {
+              this.skuList[counter++]["prop"+currentIndex] = value;
+            }
+          })
+        }
+      }
+    },
     saveCustomAttribute(){
       addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
         if (response.code === 200){
@@ -511,7 +645,16 @@ export default {
       this.stepNumber--
     },
     next() {
-      this.stepNumber++
+      let isValidate = true;
+      this.$refs["form"].validateField(this.rulesTemplateMap[this.stepNumber],(valid) => {
+        console.log(valid)
+        if (valid) {
+          isValidate = false;
+        }
+      });
+      if (isValidate){
+        this.stepNumber++
+      }
     },
     /** 查询商品信息列表 */
     getList() {
@@ -587,14 +730,47 @@ export default {
     submitForm() {
       this.$refs["form"].validate(valid => {
         if (valid) {
+          let attrValueList = [];
+          for (const templateAttributeGroup of this.categoryCommonElement.templateAttributeGroupList) {
+            templateAttributeGroup.attributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          }
+
+          this.categoryCommonElement.templateAttributeList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          this.attributeCheckedList.map(attribute => attrValueList.push({id: attribute.id, value: attribute.value}))
+          let ruleInfo = this.ruleList.find(ruleInfo => ruleInfo.id === this.form.ruleId);
+          const {ruleAttrList} = ruleInfo;
+          let ruleAttrSize = ruleAttrList.length;
+          let productSkuList = this.skuList.map(skuInfo => {
+            let sku = "";
+            for (let index = 0; ; index++) {
+              sku += skuInfo["prop"+index];
+              if (index+1 >= ruleAttrSize){
+                break;
+              }else {
+                sku += "-";
+              }
+            }
+            return {
+              sku: sku,
+              image: skuInfo.image,
+              stock: skuInfo.stock,
+              price: skuInfo.price
+            }
+          })
+          let productAddReq = {
+            projectAddModel: this.form,
+            attrValueList: attrValueList,
+            productSkuList: productSkuList
+          };
+          console.log(productAddReq)
           if (this.form.id != null) {
-            updateInfo(this.form).then(response => {
+            updateInfo(productAddReq).then(response => {
               this.$modal.msgSuccess("修改成功");
               this.open = false;
               this.getList();
             });
           } else {
-            addInfo(this.form).then(response => {
+            addInfo(productAddReq).then(response => {
               this.$modal.msgSuccess("新增成功");
               this.open = false;
               this.getList();
@@ -603,6 +779,15 @@ export default {
         }
       });
     },
+    /** 查询详细信息 */
+    handleDetail(id){
+      // this.$router.push 是在 SPA 中使用的，不会刷新页面，只会动态地加载或卸载组件
+      this.$router.push("/product-detail/"+id)
+
+      // window.open 会打开一个新的浏览器窗口或标签页，并加载一个全新的页面，这会导致整个页面的刷新
+      // let url = `${window.location.origin}/product-detail/${detailId}`
+      // window.open(url);
+    },
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;

vue.config.js

@@ -35,7 +35,7 @@ module.exports = {
     proxy: {
       // detail: https://cli.vuejs.org/config/#devserver-proxy
       [process.env.VUE_APP_BASE_API]: {
-        target: `http://localhost:8080`,
+        target: `http://127.0.0.1:8080`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''