三组件

2024-03-22 16:03:03 +08:00 · 2024-03-22 16:03:03 +08:00 · c4c732f66b
parent 1aa705c8c5
commit c4c732f66b
4 changed files with 175 additions and 12 deletions
--- a/src/components/CheckAttributes/index.vue
+++ b/src/components/CheckAttributes/index.vue
@ -8,7 +8,6 @@
        <div slot="header" class="clearfix">
          <span>已选属性组</span>
          <span>已选属性组ids ：：{{this.checkedAttributeGroupIds}}</span>
-          <span>属性组：：{{this.checkedAttributeGroupList}} </span>
        </div>
        <el-row :gutter="20"  style="height: 100px">
          <el-col :span="3" v-for="(attributeGroup,index) in checkedAttributeGroupList">
@ -29,15 +28,15 @@
        </div>
        <el-row>
          <el-col :span="3"
-                  v-for="attribute in attributeList">
+                  v-for="group in groupList">
            <el-checkbox
              v-model="checkedAttributeGroupIds"
-              :value="attribute.id"
-              :key="attribute.id"
-              :label="attribute.id"
-              @change="handleCheckedAttributeChange(attribute)"
+              :value="group.id"
+              :key="group.id"
+              :label="group.id"
+              @change="handleCheckedAttributeChange(group)"
              border>
-              {{attribute.name}}
+              {{group.name}}
            </el-checkbox>
          </el-col>
        </el-row>
@ -57,7 +56,7 @@ export default {
      type: Array,
      default: []
    },
-    checkedAttribute:{
+    checkedAttributeGroup:{
      type: Array,
      default: null
    }
--- a/src/components/CheckBrank/index.vue
+++ b/src/components/CheckBrank/index.vue
@ -0,0 +1,149 @@
+<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.checkedBrandIds}}</span>
+        </div>
+        <el-row :gutter="20"  style="height: 100px">
+          <el-col :span="3" v-for="(brand,index) in checkedBrandList">
+            <el-tag
+              style="margin: 0 10px"
+              :key="brand.name"
+              closable
+              @close="removeCheck(index)">
+              {{brand.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="brand in brandList">
+            <el-checkbox
+              v-model="checkedBrandIds"
+              :value="brand.id"
+              :key="brand.id"
+              :label="brand.id"
+              @change="handleCheckedBrandChange(brand)"
+              border>
+              {{brand.name}}
+            </el-checkbox>
+          </el-col>
+        </el-row>
+      </el-card>
+    </el-card>
+  </el-row>
+</template>
+<script>
+
+import {listBrand} from "@/api/product/brand";
+
+export default {
+  name:"BrandElement",
+  // 接参
+  props: {
+    value: {
+      type: Array,
+      default: []
+    },
+    checkBrand:{
+      type: Array,
+      default: null
+    }
+  },
+  data() {
+    // 数据
+    return{
+      //已选品牌ids
+      checkedBrandIds: [],
+      //已选品牌数组
+      checkedBrandList: [],
+      //品牌品牌表
+      brandList: [],
+      // 总条数
+      total: 0,
+
+    }
+  },
+  // 挂载方法
+  created() {
+    this.getBrand()
+  },
+  watch:{
+    value: {
+      handler(val) {
+        console.log("进入初始化value::"+val.toString())
+        if (val.toString() !== this.checkedBrandIds.toString()){
+          this.checkedBrandIds = val
+          this.checkedBrandList = []
+        }
+        console.log("选中的ids：："+this.checkedBrandIds)
+      },
+      immediate: true
+    },
+    checkBrand:{
+      handler(val) {
+        console.log("进入初始化checkedBrand::"+val.toString())
+        if (val !==undefined && val.length>0){
+          this.checkedBrandList = val
+          this.checkedBrandIds = this.checkedBrandList.map(checked => checked.id)
+        }
+      },
+      immediate: true
+    }
+  },
+  // 方法
+  methods: {
+    /** 品牌复选框选择事件 */
+    handleCheckedBrandChange(brand){
+      let isChecked = this.checkedBrandIds.indexOf(brand.id) > -1;
+      if (isChecked){
+        this.checkedBrandList.push(brand)
+      }else {
+        //删除品牌
+        this.checkedBrandList.splice(
+          this.checkedBrandList.indexOf(brand),1
+        )
+      }
+      this.$emit("input",this.checkedBrandIds)
+      console.log(this.checkedBrandList)
+      // this.checkedBrandList.splice(this.checkedBrandIds.indexOf(brand.id),1)
+    },
+    //关闭标签
+    removeCheck(index) {
+      console.log(index)
+      this.checkedBrandList.splice(index,1);
+      this.checkedBrandIds.splice(index,1)
+    },
+    // 取消按钮
+    cancel() {
+      this.open = false;
+      this.reset();
+    },
+    /** 查询品牌列表 */
+    getBrand(){
+      listBrand(this.queryParams).then(response => {
+        console.log('品牌集合')
+        console.log(response)
+        this.brandList = response.data.rows;
+        this.total = response.data.total;
+      });
+    },
+  }
+}
+</script>
+
+<style scoped lang="scss">
+
+</style>
+
--- a/src/main.js
+++ b/src/main.js
@ -41,6 +41,8 @@ import DictData from '@/components/DictData'
 import AttributeGroupElement from '@/components/CheckedAttribute'
 //属性组件
 import AttributeElement from '@/components/CheckAttributes'
+//品牌组件
+import BrandElement from '@/components/CheckBrank'

 // 全局方法挂载
 Vue.prototype.getDicts = getDicts
@ -64,6 +66,7 @@ Vue.component('ImagePreview', ImagePreview)
 //自定义组件全局挂载
 Vue.component('AttributeGroupElement', AttributeGroupElement)
 Vue.component('AttributeElement', AttributeElement)
+Vue.component('BrandElement', BrandElement)

 Vue.use(directive)
 Vue.use(plugins)
--- a/src/views/product/categoryInfo/index.vue
+++ b/src/views/product/categoryInfo/index.vue
@ -135,12 +135,14 @@
        </el-row>
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="属性" name="first">
-            <AttributeGroupElement v-model="form.checkedAttributeIds"></AttributeGroupElement>
+            <AttributeGroupElement v-model="form.checkedAttributeIds" :checked-attribute="this.checkedAttribute"></AttributeGroupElement>
          </el-tab-pane>
          <el-tab-pane label="属性组" name="second">
-            <AttributeElement v-model="form.checkedAttributeIds"></AttributeElement>
+            <AttributeElement v-model="form.checkedAttributeGroupIds" :checked-attribute-group="this.checkedAttributeGroup"></AttributeElement>
+          </el-tab-pane>
+          <el-tab-pane label="品牌" name="third">
+            <BrandElement v-model="form.checkedBrandIds" :check-brand="this.checkedBrand"></BrandElement>
          </el-tab-pane>
-          <el-tab-pane label="品牌" name="third">角色管理</el-tab-pane>
        </el-tabs>

      </el-form>
@ -156,17 +158,24 @@
 import { listCategory_info, getCategory_info, delCategory_info, addCategory_info, updateCategory_info } from "@/api/product/category_info";
 import Treeselect from "@riophae/vue-treeselect";
 import "@riophae/vue-treeselect/dist/vue-treeselect.css";
+import Brand from "@/views/product/brand/index.vue";

 export default {
  name: "Category_info",
  dicts: ['sys_yes_no'],
  components: {
+    Brand,
    Treeselect
  },
  data() {
    return {
      activeName: 'first',
-
+      // 组件绑定的品牌
+      checkedBrand: [],
+      // 组件绑定的属性组
+      checkedAttributeGroup: [],
+      // 组件绑定的属性
+      checkedAttribute: [],
      // 遮罩层
      loading: true,
      // 显示搜索条件
@ -271,8 +280,11 @@ export default {
        createTime: null,
        updateBy: null,
        updateTime: null,
+        checkedAttributeList: [],
        checkedAttributeIds: [],
        checkedAttributeGroupList: [],
+        checkedAttributeGroupIds: [],
+        checkedBrandIds: [],
        checkedBrandList: []
      };
      this.resetForm("form");