品类模块，填入属性组组件

src/components/CheckAttributes/index.vue

@@ -0,0 +1,150 @@
+<template>
+  <el-row>
+    <el-card class="box-card" >
+      <div slot="header" class="clearfix">
+        <span>属性关联关系</span>
+      </div>
+      <el-card class="box-card" >
+        <div slot="header" class="clearfix">
+          <span>已选属性</span>
+          <span>已选属性ids ：：{{this.checkedAttributeIds}}</span>
+          <span>属性：：{{this.checkedAttributeList}} </span>
+        </div>
+        <el-row :gutter="20"  style="height: 100px">
+          <el-col :span="3" v-for="(attribute,index) in checkedAttributeList">
+            <el-tag
+              style="margin: 0 10px"
+              :key="attribute.name"
+              closable
+              @close="removeCheck(index)">
+              {{attribute.name}}
+            </el-tag>
+          </el-col>
+        </el-row>
+      </el-card >
+      <el-divider></el-divider>
+      <el-card class="box-card">
+        <div slot="header" class="clearfix">
+          <span>可选属性</span>
+        </div>
+        <el-row>
+          <el-col :span="3"
+                  v-for="attribute in attributeList">
+            <el-checkbox
+              v-model="checkedAttributeIds"
+              :value="attribute.id"
+              :key="attribute.id"
+              :label="attribute.id"
+              @change="handleCheckedAttributeChange(attribute)"
+              border>
+              {{attribute.name}}
+            </el-checkbox>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-card>
+  </el-row>
+</template>
+<script>
+
+import {listAttribute} from "@/api/product/attribute";
+
+export default {
+  name:"AttributeElement",
+  // 接参
+  props: {
+    value: {
+      type: Array,
+      default: []
+    },
+    checkedAttribute:{
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    // 数据
+    return{
+      checkedAttributeIds: [],
+      //已选属性数组
+      checkedAttributeList: [],
+      //商品属性表
+      attributeList: [],
+      // 属性组数据
+      groupList: [],
+      // 总条数
+      total: 0,
+
+    }
+  },
+  // 挂载方法
+  created() {
+    this.getAttribute()
+  },
+  watch:{
+    value: {
+      handler(val) {
+        console.log("进入初始化value::"+val.toString())
+        if (val.toString() !== this.checkedAttributeIds.toString()){
+          this.checkedAttributeIds = val
+          this.checkedAttributeList = []
+        }
+        console.log("选中的ids：："+this.checkedAttributeIds)
+      },
+      immediate: true
+    },
+    checkedAttribute:{
+      handler(val) {
+        console.log("进入初始化checkedAttribute::"+val.toString())
+        if (val !==undefined && val.length>0){
+          this.checkedAttributeList = val
+          this.checkedAttributeIds = this.checkedAttributeList.map(checked => checked.id)
+        }
+      },
+      immediate: true
+    }
+  },
+  // 方法
+  methods: {
+    /** 属性复选框选择事件 */
+    handleCheckedAttributeChange(attribute){
+      let isChecked = this.checkedAttributeIds.indexOf(attribute.id) > -1;
+      if (isChecked){
+        this.checkedAttributeList.push(attribute)
+      }else {
+        //删除属性
+        this.checkedAttributeList.splice(
+          this.checkedAttributeList.indexOf(attribute),1
+        )
+      }
+      this.$emit("input",this.checkedAttributeIds)
+      console.log(this.checkedAttributeList)
+      // this.checkedAttributeList.splice(this.checkedAttributeIds.indexOf(attribute.id),1)
+    },
+    //关闭标签
+    removeCheck(index) {
+      console.log(index)
+      this.checkedAttributeList.splice(index,1);
+      this.checkedAttributeIds.splice(index,1)
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 查询属性列表 */
+    getAttribute(){
+      listAttribute(this.queryParams).then(response => {
+        console.log('属性集合')
+        console.log(response)
+        this.attributeList = response.data.rows;
+        this.total = response.data.total;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>

src/components/CheckedAttribute/index.vue

@@ -48,7 +48,6 @@
 <script>
 
 import {listAttribute} from "@/api/product/attribute";
-import {listGroup} from "@/api/product/attribute_group";
 
 export default {
   name:"AttributeGroupElement",

src/main.js

@@ -39,6 +39,8 @@ import VueMeta from 'vue-meta'
 import DictData from '@/components/DictData'
 //属性组组件
 import AttributeGroupElement from '@/components/CheckedAttribute'
+//属性组件
+import AttributeElement from '@/components/CheckAttributes'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -59,7 +61,9 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+//自定义组件全局挂载
 Vue.component('AttributeGroupElement', AttributeGroupElement)
+Vue.component('AttributeElement', AttributeElement)
 
 Vue.use(directive)
 Vue.use(plugins)

src/views/product/categoryInfo/index.vue

@@ -19,6 +19,7 @@
           />
         </el-select>
       </el-form-item>
+      <!--        属性组件-->
       <el-form-item>
 	    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
         <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
@@ -99,15 +100,13 @@
     <!-- 添加或修改品类信息对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="80%" append-to-body>
       <el-form ref="form" :model="form" :rules="rules" label-width="80px">
-        <el-form-item label="品类名称" prop="name">
-          <el-input v-model="form.name" placeholder="请输入品类名称" />
-        </el-form-item>
-        <el-form-item label="图片" prop="image">
-          <image-upload v-model="form.image"/>
-        </el-form-item>
+        <el-row>
+          <el-col :span="12">
             <el-form-item label="父级品类" prop="parentId">
               <treeselect v-model="form.parentId" :options="category_infoOptions" :normalizer="normalizer" placeholder="请选择父级品类" />
             </el-form-item>
+          </el-col>
+          <el-col :span="12">
             <el-form-item label="是否启用" prop="status">
               <el-radio-group v-model="form.status">
                 <el-radio
@@ -117,9 +116,31 @@
                 >{{dict.label}}</el-radio>
               </el-radio-group>
             </el-form-item>
+          </el-col>
+        </el-row>
+        <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="图片" prop="image">
+              <image-upload v-model="form.image"/>
+            </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-tabs v-model="activeName" @tab-click="handleClick">
+          <el-tab-pane label="用户管理" name="first">
+            <AttributeElement ></AttributeElement>
+          </el-tab-pane>
+          <el-tab-pane label="配置管理" name="second">配置管理</el-tab-pane>
+          <el-tab-pane label="角色管理" name="third">角色管理</el-tab-pane>
+        </el-tabs>
+
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -142,6 +163,8 @@ export default {
   },
   data() {
     return {
+      activeName: 'second',
+
       // 遮罩层
       loading: true,
       // 显示搜索条件
@@ -185,6 +208,11 @@ export default {
     this.getList();
   },
   methods: {
+    handleClick(tab, event) {
+      console.log(tab, event);
+    },
+
+
     /** 查询品类信息列表 */
     getList() {
       this.loading = true;