商品共有元素

src/api/product/category.js

@@ -16,6 +16,13 @@ export function getCategory(id) {
     method: 'get'
   })
 }
+// 查询品类共有元素
+export function getTemplateAttribute(id) {
+  return request({
+    url: '/product/category/getTemplateAttribute/' + id,
+    method: 'get'
+  })
+}
 
 // 查询品类信息详细
 export function parentCommonElement(id) {

src/views/product/info/index.vue

@@ -143,19 +143,21 @@
 
     <!-- 添加或修改商品信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
+      <el-steps :active="stepNumber" finish-status="success">
+        <el-step title="基本信息"></el-step>
+        <el-step title="品类属性"></el-step>
+        <el-step title="商品规格"></el-step>
+        <el-step title="商品描述"></el-step>
+      </el-steps>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+        <div v-show="stepNumber === 0">
+          <el-row>
+            <el-col :span="12">
               <el-form-item label="商品名称" prop="name">
                 <el-input v-model="form.name" placeholder="请输入商品名称" />
               </el-form-item>
-        <el-form-item label="商品描述">
-          <editor v-model="form.introduction" :min-height="192"/>
-        </el-form-item>
-        <el-form-item label="商品图片" prop="image">
-          <image-upload v-model="form.image"/>
-        </el-form-item>
-        <el-form-item label="商品轮播图" prop="carouselImages">
-          <image-upload v-model="form.carouselImages"/>
-        </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <el-form-item label="商品状态" prop="status">
                 <el-radio-group v-model="form.status">
                   <el-radio
@@ -165,17 +167,163 @@
                   >{{dict.label}}</el-radio>
                 </el-radio-group>
               </el-form-item>
-        <el-form-item label="规格" prop="ruleId">
-          <el-input v-model="form.ruleId" placeholder="请输入规格" />
-        </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-col :span="12">
               <el-form-item label="品牌" prop="brandId">
-          <el-input v-model="form.brandId" placeholder="请输入品牌" />
+                <el-select
+                  v-model="form.brandId"
+                  filterable
+                  remote
+                  reserve-keyword
+                  placeholder="请输入关键词"
+                  :remote-method="remoteSearchBrandList"
+                  :loading="loading">
+                  <el-option
+                    v-for="brand in brandList"
+                    :key="brand.id"
+                    :label="brand.nam"
+                    :value="brand.id">
+                    <el-row>
+                      <image-preview :height="40" :width="40" :src="brand.logo" style="float: left;"/>
+                      <div style="float: left; margin: 2px 18px 0 15px; font-size: 20px;">{{brand.nam}}</div>
+                    </el-row>
+                  </el-option>
+                </el-select>
               </el-form-item>
+            </el-col>
+            <el-col :span="12">
               <el-form-item label="备注" prop="remark">
                 <el-input v-model="form.remark" type="textarea" placeholder="请输入内容" />
               </el-form-item>
+            </el-col>
+          </el-row>
+          <el-row>
+            <el-form-item label="商品图片" prop="image">
+              <image-upload v-model="form.image"/>
+            </el-form-item>
+          </el-row>
+          <el-row>
+            <el-form-item label="商品轮播图" prop="carouselImages">
+              <image-upload v-model="form.carouselImages"/>
+            </el-form-item>
+          </el-row>
+        </div>
+        <div v-show="stepNumber === 1">
+          <el-form-item label="品类" prop="ruleId">
+            <el-cascader
+              style="width: 100%"
+              v-model="categoryOptionValue"
+              clearable
+              :props="{'value': 'id', 'label': 'name'}"
+              :options="categoryOptions"></el-cascader>
+          </el-form-item>
+          <el-tabs v-model="activeName" type="border-card">
+            <el-tab-pane label="商品属性组" name="attributeGroup">
+              <el-row style="overflow-x: auto; height: 300px;">
+                <el-col :span="6" v-for="templateAttributeGroup in categoryCommonElement.templateAttributeGroupList">
+                  <el-card class="box-card">
+                    <div slot="header" class="clearfix">
+                      <span>属性组【{{templateAttributeGroup.groupName}}】</span>
+                    </div>
+                    <div style="height: 200px; width: 100%;">
+                      <el-form ref="form" 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>
+                      </el-form>
+                    </div>
+                  </el-card>
+                </el-col>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="商品属性" name="attribute">
+              <el-row style="overflow-x: auto; height: 300px;">
+                <el-form ref="form" :model="form" label-width="80px">
+                  <el-col :span="6" v-for="index in 10">
+                    <el-form-item :label="'属性'+index">
+                      <el-input v-model="form.name"></el-input>
+                    </el-form-item>
+                  </el-col>
+                </el-form>
+              </el-row>
+            </el-tab-pane>
+            <el-tab-pane label="自有属性" name="third">
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>添加商品属性</span>
+                </div>
+                <el-row>
+                  <el-button v-show="!customPropertiesFormStatus" @click="customPropertiesFormStatus = true">添加自有属性</el-button>
+                  <el-form v-show="customPropertiesFormStatus" :inline="true" :model="customPropertiesForm" class="demo-form-inline">
+                    <el-form-item label="属性编码">
+                      <el-input v-model="customPropertiesForm.code" placeholder="属性编码"></el-input>
+                    </el-form-item>
+                    <el-form-item label="属性名称">
+                      <el-input v-model="customPropertiesForm.name" placeholder="属性名称"></el-input>
+                    </el-form-item>
+                    <el-form-item label="属性值">
+                      <el-input v-model="customPropertiesForm.value" placeholder="属性值"></el-input>
+                    </el-form-item>
+                    <el-form-item>
+                      <el-button type="primary" @click="customPropertiesFormStatus = false">确定</el-button>
+                    </el-form-item>
+                  </el-form>
+                </el-row>
+              </el-card>
+
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>选择属性</span>
+                </div>
+                <el-row style="height: 80px; overflow-y: auto">
+                  <el-checkbox-group v-model="attributeCheckedList">
+                    <el-col :span="4" v-for="index in 40" style="margin: 5px 0">
+                      <el-checkbox :label="'复选框'+index" border></el-checkbox>
+                    </el-col>
+                  </el-checkbox-group>
+                </el-row>
+              </el-card>
+              <el-card class="box-card">
+                <div slot="header" class="clearfix">
+                  <span>属性值填写</span>
+                </div>
+                <el-row style="overflow-x: auto; height: 300px;">
+                  <el-form ref="form" :model="form" label-width="80px">
+                    <el-col :span="6" v-for="index in 10">
+                      <el-form-item :label="'属性'+index">
+                        <el-input v-model="form.name"></el-input>
+                      </el-form-item>
+                    </el-col>
+                  </el-form>
+                </el-row>
+              </el-card>
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div v-show="stepNumber === 2">
+          <el-form-item label="规格" prop="ruleId">
+            <el-select v-model="form.ruleId" placeholder="请选择" style="width: 100%;">
+              <el-option
+                v-for="rule in ruleList"
+                :key="rule.id"
+                :label="rule.name"
+                :value="rule.id">
+                <span>{{rule.name}} - {{rule.ruleAttrList.map(ruleAttr => ruleAttr.name).toString()}}</span>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </div>
+        <div v-show="stepNumber === 3">
+          <el-form-item label="商品描述">
+            <editor v-model="form.introduction" :min-height="192"/>
+          </el-form-item>
+        </div>
       </el-form>
       <div slot="footer" class="dialog-footer">
+        <el-button style="margin-top: 12px;" @click="last" v-if="stepNumber > 0">上一步</el-button>
+        <el-button style="margin-top: 12px;" @click="next" v-if="stepNumber < 3">下一步</el-button>
         <el-button type="primary" @click="submitForm">确 定</el-button>
         <el-button @click="cancel">取 消</el-button>
       </div>
@@ -185,6 +333,9 @@
 
 <script>
 import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
+import {listBrand} from "@/api/product/brand";
+import {getTemplateAttribute, listCategory} from "@/api/product/category";
+import {listRule} from "@/api/product/rule";
 
 export default {
   name: "Info",
@@ -234,13 +385,82 @@ export default {
         createTime: [
           { required: true, message: "创建时间不能为空", trigger: "blur" }
         ],
+      },
+      stepNumber: 1,
+      brandList: [],
+      categoryOptions: [],
+      categoryOptionValue: [],
+      ruleList: [],
+      activeName: "attributeGroup",
+      customPropertiesForm: {
+
+      },
+      customPropertiesFormStatus: false,
+      attributeCheckedList: [],
+      categoryCommonElement: {
+        templateAttributeGroupList: [],
+        templateAttributeList: [],
+        attributeList: []
       }
     };
   },
+  watch: {
+    categoryOptionValue: {
+      handler(value){
+        if (value !== null && value !== undefined && value.length > 0){
+          this.form.mianType = value[0];
+          this.form.parentType = value[1];
+          this.form.type = value[2];
+        }else {
+          this.form.mianType = null;
+          this.form.parentType = null;
+          this.form.type = null;
+        }
+      }
+    },
+    "form.type": {
+      handler(value) {
+        console.log(value)
+        if (value != null){
+          getTemplateAttribute(value).then(response => {
+            const {data} = response;
+            const {templateAttributeGroupList,templateAttributeList,attributeList} = data;
+            this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
+            this.categoryCommonElement.templateAttributeList = templateAttributeList;
+            this.categoryCommonElement.attributeList = attributeList;
+          })
+        }
+
+      }
+    }
+  },
   created() {
     this.getList();
   },
   methods: {
+    initRuleList(){
+      listRule({"params[isPage]": false}).then(response => {
+        this.ruleList = response.data;
+      });
+    },
+    initCategoryTree(){
+      listCategory().then(response => {
+        this.categoryOptions = [];
+        this.categoryOptions = this.handleTree(response.data, "id", "parentId");
+        console.log(this.categoryOptions)
+      });
+    },
+    remoteSearchBrandList(queryValue){
+      listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
+        this.brandList = response.data;
+      });
+    },
+    last() {
+      this.stepNumber--
+    },
+    next() {
+      this.stepNumber++
+    },
     /** 查询商品信息列表 */
     getList() {
       this.loading = true;
@@ -276,6 +496,8 @@ export default {
         updateTime: null
       };
       this.resetForm("form");
+      this.initCategoryTree();
+      this.initRuleList();
     },
     /** 搜索按钮操作 */
     handleQuery() {
@@ -348,3 +570,11 @@ export default {
   }
 };
 </script>
+<style>
+.el-select-dropdown__item{
+  height: 45px;
+}
+.box-card {
+  margin: 10px;
+}
+</style>