属性组组件完成

src/components/CheckedAttribute/index.vue

@@ -0,0 +1,151 @@
+<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";
+import {listGroup} from "@/api/product/attribute_group";
+
+export default {
+  name:"AttributeGroupElement",
+  // 接参
+  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/main.js

@@ -37,6 +37,8 @@ import DictTag from '@/components/DictTag'
 import VueMeta from 'vue-meta'
 // 字典数据组件
 import DictData from '@/components/DictData'
+//属性组组件
+import AttributeGroupElement from '@/components/CheckedAttribute'
 
 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@@ -57,6 +59,7 @@ Vue.component('Editor', Editor)
 Vue.component('FileUpload', FileUpload)
 Vue.component('ImageUpload', ImageUpload)
 Vue.component('ImagePreview', ImagePreview)
+Vue.component('AttributeGroupElement', AttributeGroupElement)
 
 Vue.use(directive)
 Vue.use(plugins)

src/views/product/group/index.vue

@@ -137,52 +137,53 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <el-row>
+        <AttributeGroupElement v-model="form.checkedAttributeIds" :checked-attribute="this.checkedAttribute">
-          <el-card class="box-card" >
+        </AttributeGroupElement>
-            <div slot="header" class="clearfix">
+<!--        <el-row>-->
-              <span>属性关联关系</span>
+<!--          <el-card class="box-card" >-->
-            </div>
+<!--            <div slot="header" class="clearfix">-->
-            <el-card class="box-card" >
+<!--              <span>属性关联关系</span>-->
-              <div slot="header" class="clearfix">
+<!--            </div>-->
-                <span>已选属性</span>
+<!--            <el-card class="box-card" >-->
-                {{this.form.checkedAttributeIds}}
+<!--              <div slot="header" class="clearfix">-->
-                {{this.form.attributeList}}
+<!--                <span>已选属性</span>-->
-                {{this.checkedAttribute}}
+<!--                {{this.form.checkedAttributeIds}}-->
-              </div>
+<!--                {{this.form.attributeList}}-->
-              <el-row :gutter="20"  style="height: 100px">
+<!--              </div>-->
-                <el-col :span="3" v-for="(attribute,index) in checkedAttribute">
+<!--              <el-row :gutter="20"  style="height: 100px">-->
-                  <el-tag
+<!--                <el-col :span="3" v-for="(attribute,index) in checkedAttribute">-->
-                    style="margin: 0 10px"
+<!--                  <el-tag-->
-                    :key="attribute.name"
+<!--                    style="margin: 0 10px"-->
-                    closable
+<!--                    :key="attribute.name"-->
-                    @close="removeCheck(index)">
+<!--                    closable-->
-                    {{attribute.name}}
+<!--                    @close="removeCheck(index)">-->
-                  </el-tag>
+<!--                    {{attribute.name}}-->
-                </el-col>
+<!--                  </el-tag>-->
-              </el-row>
+<!--                </el-col>-->
-            </el-card>
+<!--              </el-row>-->
-            <el-divider></el-divider>
+<!--            </el-card>-->
-          <el-card class="box-card">
+<!--            <el-divider></el-divider>-->
-            <div slot="header" class="clearfix">
+<!--          <el-card class="box-card">-->
-              <span>可选属性</span>
+<!--            <div slot="header" class="clearfix">-->
-            </div>
+<!--              <span>可选属性</span>-->
-            <el-row>
+<!--            </div>-->
-              <el-col :span="3"
+<!--            <el-row>-->
-                      v-for="attribute in attributeList">
+<!--              <el-col :span="3"-->
-                <el-checkbox
+<!--                      v-for="attribute in attributeList">-->
-                  v-model="form.checkedAttributeIds"
+<!--                <el-checkbox-->
-                  :value="attribute.id"
+<!--                  v-model="form.checkedAttributeIds"-->
-                  :key="attribute.id"
+<!--                  :value="attribute.id"-->
-                  :label="attribute.id"
+<!--                  :key="attribute.id"-->
-                  @change="handleCheckedAttributeChange(attribute)"
+<!--                  :label="attribute.id"-->
-                  border>
+<!--                  @change="handleCheckedAttributeChange(attribute)"-->
-                  {{attribute.name}}
+<!--                  border>-->
-                </el-checkbox>
+<!--                  {{attribute.name}}-->
-              </el-col>
+<!--                </el-checkbox>-->
-            </el-row>
+<!--              </el-col>-->
-          </el-card>
+<!--            </el-row>-->
-          </el-card>
+<!--          </el-card>-->
-        </el-row>
+<!--          </el-card>-->
+<!--        </el-row>-->
       </el-form>
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -195,17 +196,14 @@
 <script>
 import { listGroup, getGroup, delGroup, addGroup, updateGroup } from "@/api/product/attribute_group";
 import {listAttribute} from "@/api/product/attribute";
-import attribute from "@/views/product/attribute/index.vue";
 
 export default {
   name: "Group",
   dicts: ['sys_yes_no'],
   data() {
     return {
-      inputVisible: false,
       //已选属性数组
       checkedAttribute: [],
-      //所选属性id集合
       //商品属性表
       attributeList: [],
       // 遮罩层
@@ -283,8 +281,6 @@ export default {
     /** 查询属性列表 */
     getAttribute(){
       listAttribute(this.queryParams).then(response => {
-        console.log('属性集合')
-        console.log(response)
         this.attributeList = response.data.rows;
         this.total = response.data.total;
         this.loading = false;