From e525cb67effd521ed38cb373ce80369ca0c1bad2 Mon Sep 17 00:00:00 2001
From: Saisai Liu <1374434128@qq.com>
Date: Tue, 5 Mar 2024 11:40:19 +0800
Subject: [PATCH] =?UTF-8?q?=E5=B1=9E=E6=80=A7=E7=BB=84=E7=BB=84=E4=BB=B6?=
 =?UTF-8?q?=E5=AE=8C=E6=88=90?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/CheckedAttribute/index.vue | 151 ++++++++++++++++++++++
 src/main.js                               |   3 +
 src/views/product/group/index.vue         |  98 +++++++-------
 3 files changed, 201 insertions(+), 51 deletions(-)
 create mode 100644 src/components/CheckedAttribute/index.vue

diff --git a/src/components/CheckedAttribute/index.vue b/src/components/CheckedAttribute/index.vue
new file mode 100644
index 0000000..bbe18d3
--- /dev/null
+++ b/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>
diff --git a/src/main.js b/src/main.js
index 546f125..e5ed6bd 100644
--- a/src/main.js
+++ b/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)
diff --git a/src/views/product/group/index.vue b/src/views/product/group/index.vue
index 88fabd4..731694e 100644
--- a/src/views/product/group/index.vue
+++ b/src/views/product/group/index.vue
@@ -137,52 +137,53 @@
             </el-form-item>
           </el-col>
         </el-row>
-        <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>
-                {{this.form.checkedAttributeIds}}
-                {{this.form.attributeList}}
-                {{this.checkedAttribute}}
-              </div>
-              <el-row :gutter="20"  style="height: 100px">
-                <el-col :span="3" v-for="(attribute,index) in checkedAttribute">
-                  <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="form.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>
+        <AttributeGroupElement v-model="form.checkedAttributeIds" :checked-attribute="this.checkedAttribute">
+        </AttributeGroupElement>
+<!--        <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>-->
+<!--                {{this.form.checkedAttributeIds}}-->
+<!--                {{this.form.attributeList}}-->
+<!--              </div>-->
+<!--              <el-row :gutter="20"  style="height: 100px">-->
+<!--                <el-col :span="3" v-for="(attribute,index) in checkedAttribute">-->
+<!--                  <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="form.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>-->
       </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;