1.商家端渠道券管理新增指定店铺功能业务开发 2.商家端渠道券管理渠道券新增商品选择添加商品搜索业务功能

src/views/marketing/channelManage/add.vue

@@ -79,6 +79,23 @@
               {{ idList.length }}
             </i>
           </span>
+          <el-radio
+            v-model="addForm.applyType"
+            :label="4"
+            @change="chooseShop(type = 4)"
+          >指定店铺可用</el-radio>
+          <span v-if="!visitDetail" class="selectBtn" @click="chooseShop(type = 4)">
+            {{$t('common.choose')}}
+            <i v-if="addForm.applyType === 4 && idList.length !== 0" class="selectNum">
+              {{ idList.length }}
+            </i>
+          </span>
+          <span v-if="visitDetail && addForm.applyType === 4" class="selectBtn" @click="chooseShop(type = 4)">
+            查看店铺
+            <i v-if="addForm.applyType === 4 && idList.length !== 0" class="selectNum">
+              {{ idList.length }}
+            </i>
+          </span>
         </el-form-item>
         <el-form-item
           class="inputW"
@@ -262,6 +279,12 @@
     >
       <!-- 表格 -->
       <div class="tableBox">
+
+        <div style="margin-bottom: 15px">
+          <el-input v-model="prodSearch" :placeholder="$t('product.productname_hint')" style="width: 360px" clearable/>
+          <el-button type="primary" style="margin-left: 8px" @click="searchProd">{{$t('common.query')}}</el-button>
+        </div>
+
         <el-table
           ref="multipleTable"
           :data="tableData"
@@ -298,11 +321,11 @@
             label="产品名称"
             width="220"
           />
-          <el-table-column
+<!--          <el-table-column
             prop="productId"
             label="产品id"
             show-overflow-tooltip
-          />
+          />-->
           <!--          <el-table-column prop="discountPrice" label="售价（元）" show-overflow-tooltip />-->
           <el-table-column
             prop="originalPrice"
@@ -314,6 +337,7 @@
             label="库存（件）"
             show-overflow-tooltip
           />
+          <el-table-column prop="shopName" label="所属店铺" show-overflow-tooltip />
           <!--          <el-table-column prop="volume" label="销量" show-overflow-tooltip />-->
         </el-table>
         <div class="fenye">
@@ -335,15 +359,79 @@
         </div>
       </div>
     </el-dialog>
+
+    <el-dialog
+      :title="visitDetail ? '查看店铺' : '选择店铺'"
+      :visible.sync="isShopVisible"
+      width="70%"
+      top="50px"
+      class="group-dialog"
+      :close-on-click-modal="false"
+      :modal-append-to-body="false"
+      :modal="false"
+    >
+      <!-- 表格 -->
+      <div class="tableBox">
+        <el-table
+          ref="shopMultipleTable"
+          :data="shopTableData"
+          border
+          :header-cell-style="{ background: '#EEF3FF', color: '#333333' }"
+          tooltip-effect="dark"
+          style="width: 100%"
+          :row-key="getShopRowKeys"
+          max-height="600"
+          @selection-change="handleShopSelectionChange"
+        >
+          <el-table-column
+            v-if="!visitDetail"
+            type="selection"
+            :reserve-selection="true"
+            width="55"
+          />
+          <el-table-column label="店铺Logo" width="220" align="center">
+            <template slot-scope="scope">
+              <img height="80" width="80" :src="scope.row.shopLogo" alt srcset>
+            </template>
+          </el-table-column>
+          <el-table-column prop="shopName" label="店铺名称" width="220" />
+          <el-table-column prop="chargePersonName" label="店铺负责人" show-overflow-tooltip />
+          <el-table-column label="店铺类型" align="center">
+            <template slot-scope="scope">
+              <span v-if="scope.row.shopType === 1">国内贸易</span>
+              <span v-else-if="scope.row.shopType === 2">跨境保税</span>
+              <span v-else>海外直邮</span>
+            </template>
+          </el-table-column>
+        </el-table>
+        <div class="fenye">
+          <el-pagination
+            :current-page="shopOption.page"
+            :page-sizes="[10, 20, 50, 100]"
+            :page-size="shopOption.pageSize"
+            layout="total, sizes, prev, pager, next, jumper"
+            :total="shopTotal"
+            @size-change="handleShopSizeChange"
+            @current-change="handleShopCurrentChange"
+          />
+        </div>
+        <div class="footBtnBox">
+          <span slot="footer">
+            <el-button v-if="!visitDetail" type="primary" @click="saveShopIdList">{{ $t('common.sure') }}</el-button>
+            <el-button @click="closeShopSelect">{{ $t('common.cancel') }}</el-button>
+          </span>
+        </div>
+      </div>
+    </el-dialog>
   </div>
 </template>
 
 <script>
-import { addCoupon, getProducts, couponDetail, updateCoupon } from '@/api/marketing'
+import {addCoupon, getProducts, couponDetail, updateCoupon, getShops} from '@/api/marketing'
 
 function InitCouponForm() {
   this.type = 2 // 1普通券2渠道券
-  this.applyType = 1 //  适用商品 1-全部商品 2-指定商品可用 3-指定商品不可用
+  this.applyType = 1 //  适用商品 1-全部商品 2-指定商品可用 3-指定商品不可用 4-指定店铺可用
   this.couponContent = null // 优惠内容减多少元
   this.couponName = '' //  优惠券名称
   this.couponType = 1 //  优惠券类型 1-满减券 2-折扣券
@@ -402,6 +490,10 @@ export default {
       getRowKeys(row) {
         return row.productId
       },
+      getShopRowKeys(row) {
+        return row.shopId
+      },
+
       addForm: new InitCouponForm(),
       proOption: {
         page: 1,
@@ -431,7 +523,16 @@ export default {
       },
       multipleSelection: [],
       roleList: [],
-      isVisible: false // 选择商品弹窗
+      isVisible: false, // 选择商品弹窗
+      isShopVisible: false, // 选择店铺弹窗，
+      shopTableData: [],
+      shopTotal: 0,
+      shopOption: {
+        page: 1,
+        pageSize: 10
+      },
+      shopMultipleSelection: [],
+      prodSearch: undefined
     }
   },
   computed: {
@@ -491,6 +592,11 @@ export default {
         this.$refs.multipleTable.clearSelection()
         this.idList = []
       }
+
+      if (this.$refs.shopMultipleTable) {
+        this.$refs.shopMultipleTable.clearSelection()
+        this.idList = []
+      }
     },
     proving1(e) {
       var keynum = window.event ? e.keyCode : e.which // 获取键盘码
@@ -541,6 +647,24 @@ export default {
               return false
             }
           }
+          if ([2, 3].includes(parseInt(this.addForm.applyType))) {
+            if (!this.addForm.ids || !this.addForm.ids.length || this.addForm.ids.length === 0) {
+              this.$message({
+                message: '请选择指定商品',
+                type: 'warning'
+              })
+              return false
+            }
+          }
+          if (this.addForm.applyType === 4) {
+            if (!this.addForm.ids || !this.addForm.ids.length || this.addForm.ids.length === 0) {
+              this.$message({
+                message: '请选择指定店铺',
+                type: 'warning'
+              })
+              return false
+            }
+          }
           if (this.shopCouponId) {
             updateCoupon(this.addForm).then(res => {
               if (res.code === '') {
@@ -576,6 +700,16 @@ export default {
       this.proOption.page = val
       this.getProList()
     },
+
+    handleShopSizeChange(val) {
+      this.shopOption.pageSize = val
+      this.getShopList()
+    },
+    handleShopCurrentChange(val) {
+      this.shopOption.page = val
+      this.getShopList()
+    },
+
     // 选择商品
     chooseProduct(type) {
       this.isVisible = true
@@ -595,6 +729,27 @@ export default {
       }
       this.getProList()
     },
+
+    // 选择店铺
+    chooseShop(type) {
+      this.isShopVisible = true
+      if (this.currentType !== type) {
+        this.idList = []
+        if (this.shopMultipleSelection.length !== 0) {
+          this.$refs.shopMultipleSelection.clearSelection()
+        }
+      }
+      this.currentType = type
+      if (this.visitDetail) {
+        this.shopOption.activityId = this.shopCouponId
+        this.shopOption.queryType = this.addForm.applyType
+      } else {
+        this.shopOption.activityId = null
+        this.shopOption.queryType = null
+      }
+      this.getShopList()
+    },
+
     getProList() {
       getProducts(this.proOption).then(res => {
         if (res.code === '') {
@@ -615,10 +770,34 @@ export default {
         }
       })
     },
+
+    getShopList() {
+      getShops(this.shopOption).then(res => {
+        if (res.code === '') {
+          this.shopTableData = res.data.list
+          this.shopTotal = res.data.total
+          // 点击编辑时回显表格勾选
+          if (this.shopCouponId) {
+            for (let i = 0; i < this.shopTableData.length; i++) {
+              if (this.idList.includes(this.shopTableData[i].shopId)) {
+                this.$refs.shopMultipleTable.toggleRowSelection(this.shopTableData[i])
+              }
+            }
+          }
+        }
+      })
+    },
+
     // 选中商品
     handleSelectionChange(val) {
       this.multipleSelection = val
     },
+
+    // 选中店铺
+    handleShopSelectionChange(val) {
+      this.shopMultipleSelection = val
+    },
+
     // 保存选择商品ID
     saveIdList() {
       const idList = []
@@ -633,7 +812,27 @@ export default {
     // 取消选择
     closeSelect() {
       this.isVisible = false
+      this.prodSearch = undefined
+      this.proOption.searchContent = undefined
     },
+
+    // 保存选择店铺ID
+    saveShopIdList() {
+      const idList = []
+      this.shopMultipleSelection.forEach(i => {
+        idList.push(i.shopId)
+      })
+      this.idList = idList
+      // console.log('idList.length', idList.length)
+      this.addForm.ids = idList
+      this.addForm.applyType = this.currentType
+      this.isShopVisible = false
+    },
+    // 取消选择
+    closeShopSelect() {
+      this.isShopVisible = false
+    },
+
     // 跳转优惠券列表
     goToCoupon() {
       this.$emit('reset')
@@ -660,9 +859,23 @@ export default {
       this.addForm.timeType = res.data.timeType.toString()
       */
       this.dateInfo = [this.addForm.effectiveStart, this.addForm.effectiveEnd]
-      this.addForm.products.forEach(item => {
+    /*  this.addForm.products.forEach(item => {
         this.idList.push(item.productId)
-      })
+      })*/
+
+      if (this.addForm.applyType === 2 || this.addForm.applyType === 3) {
+        this.addForm.products.forEach(item => {
+          this.idList.push(item.productId)
+        })
+      } else if (this.addForm.applyType === 4) {
+        this.idList = res.data.ids
+        /*this.addForm.products.forEach(item => {
+          this.idList.push(item.productId)
+        })*/
+      } else {
+        this.idList = []
+      }
+
       this.currentType = res.data.applyType
     },
     changeThreshold(val) { // 输入框值改变
@@ -670,6 +883,13 @@ export default {
         this.addForm.threshold = 0
       }
     },
+
+    searchProd() {
+      this.proOption.page = 1
+      this.proOption.pageSize = 10
+      this.proOption.searchContent = this.prodSearch
+      this.getProList()
+    }
   }
 }
 </script>

src/views/marketing/coupon/add.vue

@@ -135,7 +135,7 @@
     >
       <!-- 表格 -->
       <div style="margin-bottom: 15px">
-        <el-input v-model="prodSearch" :placeholder="$t('product.productname_hint')" style="width: 360px"/>
+        <el-input v-model="prodSearch" :placeholder="$t('product.productname_hint')" style="width: 360px" clearable/>
         <el-button type="primary" style="margin-left: 8px" @click="searchProd">{{$t('common.query')}}</el-button>
       </div>
       <div class="tableBox">