品牌管理主体

src/views/ecw/productBrank/BrandForm/index.vue

+<template>
+  <el-form ref="form" :model="form" label-width="80px">
+    <el-card class="box-card">
+      <div slot="header" class="clearfix">
+        <span>卡片名称</span>
+        <el-button style="float: right; padding: 3px 0" type="text">操作按钮</el-button>
+      </div>
+      <el-form-item :label="'商标' + (index + 1)">
+        <el-input v-model="form.brandName" placeholder="商标"></el-input>
+      </el-form-item>
+      <el-form-item :label="`商标${index + 1}分类`">
+        <el-select v-model="form.productTypeId" placeholder="placeholder" @change="form.productIds = [], updateValue()">
+          <el-option
+            v-for="item in productTypeList"
+            :key="item.id"
+            :label="item.titleZh"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item :label="`商标${index + 1}商品`">
+        <el-select v-model="form.productIds" placeholder="placeholder" multiple filterable @change="updateValue">
+          <el-option
+            v-for="item in getProductListByTypeId(form.productTypeId)"
+            :key="item.id"
+            :label="item.titleZh"
+            :value="item.id"
+          >
+          </el-option>
+        </el-select>
+      </el-form-item>
+    </el-card>
+  </el-form>
+</template>
+
+<script>
+export default {
+  name: "index",
+  props: {
+    productTypeList: {
+      type: Array,
+      default: []
+    },
+    productList: {
+      type: Array,
+      default: []
+    },
+    value: {
+      type: Object,
+      default: {
+        "brandName": "",
+        "trademarkCategoryRelList": []
+      }
+    },
+    index: {
+      type: Number,
+      default: 0
+    }
+  },
+  data () {
+    return {
+      form :{
+        id: undefined,
+        productBrandId: undefined,
+        brandName: '',
+        productTypeId: 0,
+        productIds: []
+      }
+    }
+  },
+  methods: {
+    getProductListByTypeId(typeId) {
+      return typeId === 0 ? [] : this.productList.filter((p) => p.typeId === typeId)
+    },
+    updateValue() {
+      const trademarkCategoryRelList = []
+      this.form.productIds.forEach(productId => {
+        trademarkCategoryRelList.push({
+          productCategoryId: this.form.productTypeId,
+          productId,
+        })
+      })
+      this.$emit('input', {
+        brandName: this.form.brandName,
+        id: this.form.id,
+        productBrandId: this.form.productBrandId,
+        trademarkCategoryRelList
+      })
+    }
+  },
+  watch: {
+    value(e) {
+      if (!!e){
+        this.form.brandName = e.brandName
+        this.form.id = e.id
+        this.form.productBrandId = e.productBrandId
+        if (e.trademarkCategoryRelList && e.trademarkCategoryRelList.length > 0) {
+          this.form.productTypeId = e.trademarkCategoryRelList[0].productCategoryId
+          this.form.productIds = []
+          e.trademarkCategoryRelList.forEach(f => {
+            this.form.productIds.push(f.productId)
+          })
+        }
+      }
+    }
+  }
+}
+</script>
+
+<style scoped>
+
+</style>

src/views/ecw/productBrank/index.vue

@@ -79,7 +79,7 @@
                 @pagination="getList"/>
 
     <!-- 对话框(添加 / 修改) -->
-    <el-dialog :title="title" :visible.sync="open" width="500px" append-to-body :close-on-click-modal="false">
+    <el-dialog :title="title" :visible.sync="open" width="900px" append-to-body :close-on-click-modal="false">
       <el-form ref="form" :model="form" :rules="rules" label-width="120px">
         <el-form-item label="品牌中文标题" prop="titleZh">
           <el-input v-model="form.titleZh" placeholder="请输入品牌中文标题" />
@@ -107,22 +107,12 @@
 
       <h3>包含商标列表</h3>
 
-      <el-form ref="form" :model="brand" label-width="80px" v-for="(brand, index) in brands" :key="index">
-        <el-form-item label="商标">
-          <el-input v-model="brand.name" placeholder="商标"></el-input>
-        </el-form-item>
-        <el-form-item label="商标分类">
-          <el-select v-model="brand.type" placeholder="placeholder">
-            <el-option
-              v-for="item in []"
-              :key="item.value"
-              :label="item.label"
-              :value="item.value"
-            >
-            </el-option>
-          </el-select>
-        </el-form-item>
-      </el-form>
+      <brand-form
+        v-for="(item, index) in form.trademarkList"
+        v-model="form.trademarkList[index]"
+        :index="index"
+        :product-type-list="productTypeList"
+        :product-list="productList"></brand-form>
 
       <div slot="footer" class="dialog-footer">
         <el-button type="primary" @click="submitForm">确 定</el-button>
@@ -136,11 +126,15 @@
 import { createProductBrank, updateProductBrank, deleteProductBrank, getProductBrank, getProductBrankPage, exportProductBrankExcel } from "@/api/ecw/productBrank";
 import { CommonStatusEnum } from '@/utils/constants';
 import {DICT_TYPE, getDictDatas} from "@/utils/dict";
+import {getProductTypeList} from "@/api/ecw/productType"
+import {getProductList} from "@/api/ecw/product"
+import BrandForm from "@/views/ecw/productBrank/BrandForm"
 
 
 export default {
   name: "ProductBrank",
   components: {
+    BrandForm
   },
   data() {
     return {
@@ -176,11 +170,19 @@ export default {
       rules: {
       },
       recordStatus: getDictDatas(DICT_TYPE.BRAND_REG_TYPE),
-      brands: [{name: '', type: ''}]
+
+      productTypeList: [],
+      productList: [],
     };
   },
   created() {
     this.getList();
+    getProductTypeList().then(r => {
+      this.productTypeList = r.data
+    })
+    getProductList().then(r => {
+      this.productList = r.data
+    })
   },
   methods: {
     /** 查询列表 */
@@ -212,6 +214,17 @@ export default {
         titleEn: undefined,
         aorder: undefined,
         filing: undefined,
+        "trademarkList": [
+          {
+            "brandName": "",
+            "trademarkCategoryRelList": [
+              {
+                "productCategoryId": 0,
+                "productId": 0
+              }
+            ]
+          }
+        ]
       };
       this.resetForm("form");
     },