商品信息-ui

src/api/product/category.js

@@ -17,6 +17,13 @@ export function getCategory(id) {
   })
 }
 
+export function getTemplateAttribute(id) {
+  return request({
+    url: '/product/category/getTemplateAttribute/' + id,
+    method: 'get'
+  })
+}
+
 //通过父类id  查询品类详情
 export function parentCategoryCommon(id) {
   return request({

src/views/product/productInfo/index.vue

@@ -24,7 +24,8 @@
           size="mini"
           @click="handleAdd"
           v-hasPermi="['product:info:add']"
-        >新增</el-button>
+        >新增
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -35,7 +36,8 @@
           :disabled="single"
           @click="handleUpdate"
           v-hasPermi="['product:info:edit']"
-        >修改</el-button>
+        >修改
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -46,7 +48,8 @@
           :disabled="multiple"
           @click="handleDelete"
           v-hasPermi="['product:info:remove']"
-        >删除</el-button>
+        >删除
+        </el-button>
       </el-col>
       <el-col :span="1.5">
         <el-button
@@ -56,19 +59,20 @@
           size="mini"
           @click="handleExport"
           v-hasPermi="['product:info:export']"
-        >导出</el-button>
+        >导出
+        </el-button>
       </el-col>
       <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
     </el-row>
 
     <el-table v-loading="loading" :data="infoList" @selection-change="handleSelectionChange">
-      <el-table-column type="selection" width="55" align="center" />
+      <el-table-column type="selection" width="55" align="center"/>
-      <el-table-column label="主键" align="center" prop="id" />
+      <el-table-column label="主键" align="center" prop="id"/>
-      <el-table-column label="商品名称" align="center" prop="name" />
+      <el-table-column label="商品名称" align="center" prop="name"/>
-      <el-table-column label="商品描述" align="center" prop="introduction" />
+      <el-table-column label="商品描述" align="center" prop="introduction"/>
-      <el-table-column label="主类型" align="center" prop="mainType" />
+      <el-table-column label="主类型" align="center" prop="mainType"/>
-      <el-table-column label="父类型" align="center" prop="parentType" />
+      <el-table-column label="父类型" align="center" prop="parentType"/>
-      <el-table-column label="商品类型" align="center" prop="type" />
+      <el-table-column label="商品类型" align="center" prop="type"/>
       <el-table-column label="商品图片" align="center" prop="image" width="100">
         <template slot-scope="scope">
           <image-preview :src="scope.row.image" :width="50" :height="50"/>
@@ -84,8 +88,8 @@
           <dict-tag :options="dict.type.sys_normal_disable" :value="scope.row.status"/>
         </template>
       </el-table-column>
-      <el-table-column label="规格" align="center" prop="ruleId" />
+      <el-table-column label="规格" align="center" prop="ruleId"/>
-      <el-table-column label="备注" align="center" prop="remark" />
+      <el-table-column label="备注" align="center" prop="remark"/>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
         <template slot-scope="scope">
           <el-button
@@ -94,14 +98,16 @@
             icon="el-icon-edit"
             @click="handleUpdate(scope.row)"
             v-hasPermi="['product:info:edit']"
-          >修改</el-button>
+          >修改
+          </el-button>
           <el-button
             size="mini"
             type="text"
             icon="el-icon-delete"
             @click="handleDelete(scope.row)"
             v-hasPermi="['product:info:remove']"
-          >删除</el-button>
+          >删除
+          </el-button>
         </template>
       </el-table-column>
     </el-table>
@@ -125,14 +131,13 @@
       </el-steps>
 
 
-
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
 
         <div v-if="active==1">
           <el-row>
             <el-col :span="12">
               <el-form-item label="商品名称" prop="name">
-                <el-input v-model="form.name" placeholder="请输入商品名称" />
+                <el-input v-model="form.name" placeholder="请输入商品名称"/>
               </el-form-item>
             </el-col>
             <el-col :span="12">
@@ -142,7 +147,8 @@
                     v-for="dict in dict.type.sys_normal_disable"
                     :key="dict.value"
                     :label="dict.value"
-                  >{{dict.label}}</el-radio>
+                  >{{ dict.label }}
+                  </el-radio>
                 </el-radio-group>
               </el-form-item>
             </el-col>
@@ -150,27 +156,37 @@
 
           <el-row>
             <el-col :span="12">
-              <el-form-item label="商品品牌" prop="name">
+              <el-form-item label="商品描述">
+                <editor v-model="form.introduction" :min-height="192"/>
+              </el-form-item>
+
+              <!--商品品牌-->
+
+              <el-form-item label="品牌" prop="brandId">
                 <el-select
-                  v-model="value"
+                  v-model="form.brandId"
-                  multiple
                   filterable
                   remote
                   reserve-keyword
                   placeholder="请输入关键词"
-                  :remote-method="remoteMethod"
+                  :remote-method="remoteSearchBrandList"
                   :loading="loading">
                   <el-option
-                    v-for="item in options"
+                    v-for="brand in brandList"
-                    :key="item.value"
+                    :key="brand.id"
-                    :label="item.label"
+                    :label="brand.nam"
-                    :value="item.value">
+                    :value="brand.id">
+                    <el-row>
+                      <div style="display: inline-flex; align-items: center;">
+                        {{ brand.nam }}-----------------
+                        <image-preview :src="brand.logo" style="height: 30px; width: 30px;"></image-preview>
+                      </div>
+                    </el-row>
                   </el-option>
                 </el-select>
               </el-form-item>
-              <el-form-item label="商品描述">
+
-                <editor v-model="form.introduction" :min-height="192"/>
+
-              </el-form-item>
             </el-col>
 
             <el-col :span="12">
@@ -185,22 +201,130 @@
         </div>
 
         <div v-if="active==2">
-          <el-form-item label="商品备注">
+          <el-form-item label="商品规格" prop="ruleId">
-            <editor v-model="form.remark" :min-height="192"/>
+            <el-select v-model="form.ruleId" placeholder="商品规格">
-
+              <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() }}-----
+                  {{ rule.ruleAttrList.map(ruleAttr => ruleAttr.ruleList.map(a => a.toString())) }}
+                </span>
+              </el-option>
+            </el-select>
 
           </el-form-item>
         </div>
 
+
         <div v-if="active==3">
+          <el-form-item label="商品品类" prop="ruleId">
+            <el-cascader
+              v-model="categoryOptionValue"
+              clearable
+              :props="{'value': 'id', 'label': 'name'}"
+              :options="categoryOptions"></el-cascader>
+          </el-form-item>
+
+          <el-card class="box-card">
+            <div slot="header" class="clearfix">
+              <el-tabs v-model="activeName">
+                <el-tab-pane label="商品属性组" name="first">
+                  <el-row>
+                    <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="width: 50px;height: 100px">
+                          <el-form :label="attribute.name" v-for="attribute in templateAttributeGroup.attributeList">
+                            <el-form-item>
+                              <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="second">
+                  商品属性
+                  <el-row style="overflow-x: auto; height: 300px;">
+                    <el-form ref="form" :model="form" label-width="80px">
+                      <el-col :span="6" v-for="templateAttribute in categoryCommonElement.templateAttributeList">
+                        <el-form-item :label="templateAttribute.name">
+                          <el-input v-model="templateAttribute.value"></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">
+                    <el-row>
+                      <el-form :inline="true" :model="customAttributeForm" class="demo-form-inline">
+                        <el-form-item label="属性编码">
+                          <el-input v-model="customAttributeForm.code" placeholder="属性编码"></el-input>
+                        </el-form-item>
+                        <el-form-item label="属性名称">
+                          <el-input v-model="customAttributeForm.name" placeholder="属性名称"></el-input>
+                        </el-form-item>
+                        <el-form-item label="属性值">
+                          <el-input v-model="customAttributeForm.value" placeholder="属性值"></el-input>
+                        </el-form-item>
+                        <el-form-item>
+                          <el-button type="primary" @click="saveCustomAttribute">确定</el-button>
+                        </el-form-item>
+                      </el-form>
+                    </el-row>
+                  </el-card>
+
+                  <el-card class="box-card">
+                    <el-row>
+                      <el-checkbox-group v-model="attributeIdCheckedList" @change="handleCheckedCitiesChange">
+                        <el-checkbox v-for="attribute in categoryCommonElement.attributeList"
+                                     :label="attribute.id"
+                                     :value="attribute.id"
+                                     :key="attribute.id">
+                          {{ attribute.name }}
+                        </el-checkbox>
+                      </el-checkbox-group>
+                    </el-row>
+                  </el-card>
+
+                  <el-card class="box-card">
+                    <el-row>
+                      <el-col :span="6" v-for="attribute in attributeCheckedList">
+                        <el-form-item :label="attribute.name">
+                          <el-input v-model="attribute.value"></el-input>
+                        </el-form-item>
+                      </el-col>
+                    </el-row>
+                  </el-card>
+
+
+                </el-tab-pane>
+              </el-tabs>
+            </div>
+
+          </el-card>
 
 
         </div>
 
+
         <div v-if="active==4">
-          <el-form-item label="商品品类" prop="name">
+
-            <el-input v-model="form.name" placeholder="商品品类" />
+          <el-form-item label="商品备注">
+            <editor v-model="form.remark" :min-height="192"/>
           </el-form-item>
         </div>
 
@@ -216,49 +340,44 @@
       </div>
 
 
-
     </el-dialog>
   </div>
 </template>
 
 <script>
-import { listInfo, getInfo, delInfo, addInfo, updateInfo } from "@/api/product/info";
+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 {addAttribute} from "@/api/product/attribute";
 
 export default {
   name: "Info",
   dicts: ['sys_normal_disable'],
   data() {
     return {
-      options: [],
+      attributeIdCheckedList: [],
+      attributeCheckedList: [],
+      customAttributeForm: {},
+      activeName: '',
+      categoryOptionValue: [],
+      categoryOptions: [],
       value: [],
       list: [],
-      states: ["Alabama", "Alaska", "Arizona",
-        "Arkansas", "California", "Colorado",
-        "Connecticut", "Delaware", "Florida",
-        "Georgia", "Hawaii", "Idaho", "Illinois",
-        "Indiana", "Iowa", "Kansas", "Kentucky",
-        "Louisiana", "Maine", "Maryland",
-        "Massachusetts", "Michigan", "Minnesota",
-        "Mississippi", "Missouri", "Montana",
-        "Nebraska", "Nevada", "New Hampshire",
-        "New Jersey", "New Mexico", "New York",
-        "North Carolina", "North Dakota", "Ohio",
-        "Oklahoma", "Oregon", "Pennsylvania",
-        "Rhode Island", "South Carolina",
-        "South Dakota", "Tennessee", "Texas",
-        "Utah", "Vermont", "Virginia",
-        "Washington", "West Virginia", "Wisconsin",
-        "Wyoming"],
       brandList: [],
       ruleList: [],
       ruleAddForm: {
         name: null,
         ruleList: null,
       },
+      categoryCommonElement: {
+        templateAttributeGroupList: [],
+        templateAttributeList: [],
+        attributeList: []
+      },
       ruleAddFormStatus: false,
       addRulePropertyValue: null,
-      active:1,
+      active: 1,
       // 遮罩层
       loading: true,
       // 选中数组
@@ -283,77 +402,136 @@ export default {
         pageSize: 10,
         name: null,
         introduction: null,
-        mainType: null,
+        mianType: null,
         parentType: null,
+        type: null,
+        image: null,
+        carouselImages: null,
+        status: null,
+        ruleId: null,
+        brandId: null,
       },
       // 表单参数
-      form: {
+      form: {},
-      },
       // 表单校验
       rules: {
         name: [
-          { required: true, message: "商品名称不能为空", trigger: "blur" }
+          {required: true, message: "商品名称不能为空", trigger: "blur"}
         ],
         introduction: [
-          { required: true, message: "商品描述不能为空", trigger: "blur" }
+          {required: true, message: "商品描述不能为空", trigger: "blur"}
         ],
         mainType: [
-          { required: true, message: "主类型不能为空", trigger: "change" }
+          {required: true, message: "主类型不能为空", trigger: "change"}
         ],
         parentType: [
-          { required: true, message: "父类型不能为空", trigger: "change" }
+          {required: true, message: "父类型不能为空", trigger: "change"}
         ],
         type: [
-          { required: true, message: "商品类型不能为空", trigger: "change" }
+          {required: true, message: "商品类型不能为空", trigger: "change"}
         ],
         image: [
-          { required: true, message: "商品图片不能为空", trigger: "blur" }
+          {required: true, message: "商品图片不能为空", trigger: "blur"}
         ],
         carouselImages: [
-          { required: true, message: "商品轮播图不能为空", trigger: "blur" }
+          {required: true, message: "商品轮播图不能为空", trigger: "blur"}
         ],
         status: [
-          { required: true, message: "商品状态不能为空", trigger: "change" }
+          {required: true, message: "商品状态不能为空", trigger: "change"}
-        ],
-        ruleId: [
-          { required: true, message: "规格不能为空", trigger: "change" }
         ],
         remark: [
-          { required: true, message: "备注不能为空", trigger: "blur" }
+          {required: true, message: "备注不能为空", trigger: "blur"}
         ],
       }
     };
   },
-  created() {
+  watch: {
-    this.getList();
+    categoryOptionValue: {
-    this.getBrandList();
+      handler(value) {
-  },
+        if (value != null && value !== undefined && value.length > 0) {
-  mounted() {
+          this.form.mainType = value[0];
-    this.list = this.states.map(item => {
+          this.form.parentType = value[1];
-      return { value: `value:${item}`, label: `label:${item}` };
+          this.form.type = value[2];
-    });
+        } else {
-  },
+          this.form.mainType = null
-  methods: {
+          this.form.parentType = null
-    getBrandList() {
+          this.form.type = null
-      listBrand(this.queryParams).then(response => {
+        }
-        this.brandList = response.data.rows;
-      });
-    },
-    remoteMethod(query) {
-      if (query !== '') {
-        this.loading = true;
-        setTimeout(() => {
-          this.loading = false;
-          this.options = this.list.filter(item => {
-            return item.label.toLowerCase()
-              .indexOf(query.toLowerCase()) > -1;
-          });
-        }, 200);
-      } else {
-        this.options = [];
       }
     },
+    "form.type": {
+      handler(value) {
+        console.log(value)
+        if (value != null) {
+          getTemplateAttribute(value).then(response => {
+            console.log(response)
+            const {data} = response;
+            const {templateAttributeGroupList, templateAttributeList, attributeList} = data;
+            this.categoryCommonElement.templateAttributeGroupList = templateAttributeGroupList;
+            this.categoryCommonElement.templateAttributeList = templateAttributeList;
+            this.categoryCommonElement.attributeList = attributeList;
+          })
+        }
+      }
+    }
+  },
+  created() {
+    this.getList();
+    this.ruleListFind();
+    this.CategoryTree();
+  },
+  methods: {
+    handleCheckedCitiesChange() {
+      let attributeId = this.attributeIdCheckedList
+        .find(attributeId => this.attributeCheckedList.map(attributeChecked => attributeChecked.id).indexOf(attributeId) === -1)
+      if (attributeId != undefined) {
+        let attributeInfo=this.categoryCommonElement.attributeList.find(attributeInfo=>attributeInfo.id===attributeId);
+        this.attributeCheckedList.push(attributeInfo)
+      }else{
+        let  attributeChecked =this.attributeCheckedList.find(attributeChecked=>this.attributeIdCheckedList.indexOf(attributeChecked));
+        this.attributeCheckedList.splice(this.attributeCheckedList.indexOf(attributeChecked),1);
+      }
 
+    },
+    saveCustomAttribute() {
+      addAttribute({"code": this.customAttributeForm.code, "name": this.customAttributeForm.name}).then(response => {
+        if (response.code == 200) {
+          let attributeId = response.data,
+            code = this.customAttributeForm.code,
+            name = this.customAttributeForm.name,
+            value = this.customAttributeForm.value;
+          this.categoryCommonElement.attributeList.push({
+            "id":attributeId,
+            "name":name,
+            "code":code
+          });
+          this.attributeIdCheckedList.push(attributeId)
+          this.attributeCheckedList.push({
+            "id":attributeId,
+            "name":name,
+            "value":value
+          });
+          this.customAttributeForm={}
+        }
+      })
+    },
+    ruleListFind() {
+      listRule({"params[isPage]": false}).then(response => {
+        this.ruleList = response.data;
+      });
+    },
+    remoteSearchBrandList(queryValue) {
+      listBrand({"nam": queryValue, "params[isPage]": false}).then(response => {
+        this.brandList = response.data;
+      });
+    },
+    CategoryTree() {
+      listCategory().then(response => {
+        this.categoryOptions = []
+        this.categoryOptions = this.handleTree(response.data, "id", "parentId");
+        console.log(this.categoryOptions);
+      })
+    },
     next() {
       if (this.active++ >= 4) this.active = 1;
     },
@@ -408,7 +586,7 @@ export default {
     // 多选框选中数据
     handleSelectionChange(selection) {
       this.ids = selection.map(item => item.id)
-      this.single = selection.length!==1
+      this.single = selection.length !== 1
       this.multiple = !selection.length
     },
     /** 新增按钮操作 */
@@ -450,12 +628,13 @@ export default {
     /** 删除按钮操作 */
     handleDelete(row) {
       const ids = row.id || this.ids;
-      this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function() {
+      this.$modal.confirm('是否确认删除商品信息编号为"' + ids + '"的数据项？').then(function () {
         return delInfo(ids);
       }).then(() => {
         this.getList();
         this.$modal.msgSuccess("删除成功");
-      }).catch(() => {});
+      }).catch(() => {
+      });
     },
     /** 导出按钮操作 */
     handleExport() {