多小程序增加商品种类单选配置，商品列表增加多选商品种类配置

src/views/store/storeProduct/index.vue

@@ -38,7 +38,7 @@
         </el-select>
       </el-form-item>
       <el-form-item label="商品种类" prop="productKind">
-        <el-select   v-model="queryParams.productKind" placeholder="请选择商品种类" clearable size="small" >
+        <el-select   v-model="queryParams.productKind" placeholder="请选择商品种类" clearable multiple size="small" >
           <el-option
             v-for="item in productKindOptions"
             :key="item.dictValue"
@@ -183,7 +183,7 @@
       </el-table-column>
       <el-table-column label="种类" align="center" prop="productKind" >
         <template slot-scope="scope">
-          <el-tag prop="productKind" v-for="(item, index) in productKindOptions"    v-if="scope.row.productKind==item.dictValue">{{item.dictLabel}}</el-tag>
+          <el-tag v-for="(kind, idx) in getProductKindArr(scope.row.productKind)" :key="idx" style="margin: 2px;">{{ getProductKindLabel(kind) }}</el-tag>
         </template>
       </el-table-column>
       <el-table-column label="状态" align="center" prop="isShow" >
@@ -551,7 +551,7 @@
             </el-select>
         </el-form-item>
         <el-form-item label="商品种类" prop="productKind">
-          <el-select style="width: 240px" v-model="form.productKind" placeholder="请选择商品种类" clearable size="small" >
+          <el-select style="width: 240px" v-model="form.productKind" placeholder="请选择商品种类" clearable multiple size="small" >
             <el-option
               v-for="item in productKindOptions"
               :key="item.dictValue"
@@ -736,7 +736,7 @@ export default {
         productType: null,
         isShow: "1",
         barCode:null,
-        productKind:null,
+        productKind:[],
 
       },
       // 表单参数
@@ -1013,7 +1013,13 @@ export default {
     /** 查询商品列表 */
     getList() {
       this.loading = true;
-      listStoreProduct(this.queryParams).then(response => {
+      const params = {
+        ...this.queryParams,
+        productKind: Array.isArray(this.queryParams.productKind) && this.queryParams.productKind.length > 0
+          ? this.queryParams.productKind.join(',')
+          : null
+      };
+      listStoreProduct(params).then(response => {
         this.storeProductList = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -1034,7 +1040,7 @@ export default {
         productInfo: null,
         keyword: null,
         barCode: null,
-        productKind: "1",
+        productKind: [],
         cateId: null,
         price: null,
         vipPrice: null,
@@ -1137,7 +1143,9 @@ export default {
         this.form.productType = response.data.productType.toString();
         this.form.isDisplay = response.data.isDisplay.toString();
         this.form.specialProducts = response.data.specialProducts || 0;
-        this.form.productKind = response.data.productKind.toString();
+        this.form.productKind = response.data.productKind
+          ? response.data.productKind.toString().split(',').filter(item => item !== '')
+          : [];
 
         this.warehouseModel = response.data.warehouseId
 
@@ -1209,7 +1217,13 @@ export default {
           if(this.form.specType === 1 && this.manyFormValidate.length===0){
             return this.$message.warning('请点击生成规格！');
           }
-          addOrEdit(this.form).then(response => {
+          const submitData = {
+            ...this.form,
+            productKind: Array.isArray(this.form.productKind) && this.form.productKind.length > 0
+              ? this.form.productKind.join(',')
+              : null
+          };
+          addOrEdit(submitData).then(response => {
             if (response.code === 200) {
               this.msgSuccess("修改成功");
               this.open = false;
@@ -1278,6 +1292,14 @@ export default {
         }).then(response => {
           this.download(response.msg);
         }).catch(function() {});
+    },
+    getProductKindArr(kind) {
+      if (!kind) return [];
+      return kind.toString().split(',').filter(item => item !== '');
+    },
+    getProductKindLabel(kind) {
+      const item = this.productKindOptions.find(opt => opt.dictValue === kind);
+      return item ? item.dictLabel : kind;
     }
   }
 };

src/views/system/coursePlaySourceConfig/index.vue

@@ -45,6 +45,22 @@
           <el-option label="否" :value="0" />
         </el-select>
       </el-form-item>
+      <el-form-item label="种类" prop="productKind">
+        <el-select
+          v-model="queryParams.productKind"
+          placeholder="请选择种类"
+          clearable
+          multiple
+          size="small"
+        >
+          <el-option
+            v-for="item in productKindOptions"
+            :key="item.dictValue"
+            :label="item.dictLabel"
+            :value="item.dictValue"
+          />
+        </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>
@@ -106,6 +122,11 @@
       <el-table-column label="token" align="center" prop="token" />
       <el-table-column label="aesKey" align="center" prop="aesKey" />
       <el-table-column label="msgDataFormat" align="center" prop="msgDataFormat" />
+      <el-table-column label="种类" align="center" prop="productKind" width="100px">
+        <template slot-scope="scope">
+          {{ getProductKindLabel(scope.row.productKind) }}
+        </template>
+      </el-table-column>
             <el-table-column label="状态" align="center" prop="status" width="100px">
         <template slot-scope="scope">
           <el-tag
@@ -150,6 +171,22 @@
       <el-form ref="form" :model="form" :rules="rules" label-width="130px">
         <el-form-item label="名称" prop="name">
           <el-input v-model="form.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="种类" prop="productKind">
+          <el-select
+            v-model="form.productKind"
+            placeholder="未配置时可能加载不出商品"
+            style="width: 220px"
+            clearable
+            size="small"
+          >
+            <el-option
+              v-for="item in productKindOptions"
+              :key="item.dictValue"
+              :label="item.dictLabel"
+              :value="item.dictValue"
+            />
+          </el-select>
         </el-form-item>
                 <el-form-item label="状态" prop="status">
           <el-select
@@ -219,13 +256,15 @@ export default {
       companySearchLoading: false,
       companyOptions: [],
       formatterCompanyOptions: [],
+      productKindOptions: [],
       queryParams: {
         pageNum: 1,
         pageSize: 10,
         name: null,
         appid: null,
         status: null,
-        specialMini: null
+        specialMini: null,
+        productKind: []
       },
       showSearch: true,
       single: true,
@@ -303,6 +342,10 @@ export default {
         listClass: 'primary'}
       })
     });
+
+    this.getDicts("product_kind").then((response) => {
+      this.productKindOptions = response.data;
+    });
     //初始化formatterCompanyOptions
     // allList().then(e => {
     //   this.formatterCompanyOptions = e.rows;
@@ -336,7 +379,13 @@ export default {
 
     getList() {
       this.loading = true;
-      list(this.queryParams).then(response => {
+      const params = {
+        ...this.queryParams,
+        productKind: Array.isArray(this.queryParams.productKind) && this.queryParams.productKind.length > 0
+          ? this.queryParams.productKind.join(',')
+          : null
+      };
+      list(params).then(response => {
         this.list = response.rows;
         this.total = response.total;
         this.loading = false;
@@ -450,6 +499,10 @@ export default {
         2: '封禁'
       };
       return statusMap[status] || '未知';
+    },
+    getProductKindLabel(kind) {
+      const item = this.productKindOptions.find(opt => opt.dictValue === kind);
+      return item ? item.dictLabel : (kind || '');
     }
   },
 }