线下门店优惠券，使用范围增加指定多个门店、所有门店

src/views/business/coupon/add.vue

@@ -56,6 +56,8 @@
           <el-form-item v-if="addData.type === 2" label="使用范围:" prop="useArea">
             <el-radio-group v-model="addData.useArea" :disabled="readonly">
               <el-radio :label="2">进票门店</el-radio>
+              <el-radio :label="1">指定门店</el-radio>
+              <el-radio :label="0">所有门店</el-radio>
             </el-radio-group>
           </el-form-item>
           <el-form-item v-else label="使用范围:" prop="useArea">
@@ -71,7 +73,7 @@
     </el-row>
     <el-row :gutter="18">
      <el-col :span="18" :offset="2">
-       <div v-if="addData.useArea === 1" style="padding: 0 20px">
+       <div v-if="addData.useArea === 1 && addData.type === 1" style="padding: 0 20px">
          <el-table :data="addData.ticketBoxList" height="300px">
            <el-table-column label="盲票ID" prop="boxId" min-width="90" />
            <el-table-column label="盲票图片" prop="picUrl" align="center">
@@ -88,12 +90,12 @@
            </el-table-column>
            <el-table-column label="盲票类型" prop="type">
              <template slot-scope="{row}">
-               {{ JSON.parse(row.type).desc }}
+               {{ row.type && JSON.parse(row.type).desc }}
              </template>
            </el-table-column>
            <el-table-column label="盲票状态" prop="status">
              <template slot-scope="{row}">
-               <el-tag :type="JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ JSON.parse(row.status).desc }}</el-tag>
+               <el-tag :type="row.status && JSON.parse(row.status).value === 'on' ? 'success' : 'info'">{{ row.status && JSON.parse(row.status).desc }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column v-if="!readonly" prop="date" label="操作">
@@ -105,6 +107,27 @@
          <br>
          <el-button v-if="!readonly" type="primary" size="small" plain @click="funSelectShow">选择盲票</el-button> <span style="margin-left: 10px">已选盲票（{{ addData.ticketBoxList.length }}）</span>
        </div>
+<!--        =========================================================================-->
+       <div v-if="addData.useArea === 1 && addData.type === 2" style="padding: 0 20px">
+         <el-table :data="channelList" height="300px">
+           <el-table-column label="门店编号" prop="channelId" min-width="90" />
+           <el-table-column label="门店名称" prop="name" />
+           <el-table-column label="手机号码" prop="mobile" />
+           <el-table-column label="上级渠道" prop="parentsName"/>
+           <el-table-column label="认证状态" prop="status">
+             <template slot-scope="{row}">
+               <el-tag :type="row.certifyStatus && JSON.parse(row.certifyStatus).value === 'y' ? 'success' : 'info'">{{ row.certifyStatus && JSON.parse(row.certifyStatus).desc }}</el-tag>
+             </template>
+           </el-table-column>
+           <el-table-column v-if="!readonly" prop="date" label="操作">
+             <template slot-scope="{ $index }">
+               <el-button type="text" class="del" @click="channelList.splice($index, 1)">删除</el-button>
+             </template>
+           </el-table-column>
+         </el-table>
+         <br>
+         <el-button v-if="!readonly" type="primary" size="small" plain @click="funChannelShow">选择门店</el-button> <span style="margin-left: 10px">已选门店（{{ channelList.length }}）</span>
+       </div>
      </el-col>
     </el-row>
 
@@ -117,11 +140,14 @@
 
     <!-- 弹出层 -->
     <SelectTicket :select-show="selectShow" :value="addData.ticketBoxList" :excludeBoxIds="excludeBoxIds" @close="selectShow = false" @selectTicket="selectTicket"   v-if="selectShow"/>
+    <!-- 弹出层 -->
+    <ChannelTicket :channel-show="channelShow" :value="channelList" :excludeChannelIds="excludeChannelIds" @close="channelShow = false" @channelTicket="channelTicket"   v-if="channelShow"/>
   </div>
 </template>
 <script>
 import Upload from '@/components/ImageUpload'
 import SelectTicket from './components/selectTicket'
+import ChannelTicket from './components/channelTicket'
 import { publicFileGetUrl } from '@/api/common'
 import { getCouponDetail, addCoupon } from '@/api/business/coupon'
 import { accDiv, accMul } from '@/utils/util'
@@ -130,13 +156,15 @@ export default {
   name: 'CouponAdd',
   components: {
     Upload,
-    SelectTicket
+    SelectTicket,
+    ChannelTicket
   },
   data() {
     return {
       IMG_URL: publicFileGetUrl,
       id: this.$route.query.id,
       readonly: this.$route.name === 'CouponQuery',
+      channelList: [],
       addData: {
         ticketBoxList:[],
         useArea: 5,
@@ -147,7 +175,9 @@ export default {
       },
       addIng: false,
       excludeBoxIds: [],
+      excludeChannelIds: [],
       selectShow: false,
+      channelShow: false,
       rules: {
         title: [{ required: true, message: '请输入券名称', trigger: 'blur' }],
         type: [{ required: true, message: '请输入券类型', trigger: 'blur' }],
@@ -179,7 +209,7 @@ export default {
   created() {
     if (this.id) {
       getCouponDetail(this.id).then(res => {
-        const { couponId, title, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description, ticketBoxList } = res.data
+        const { couponId, title, quantity, discount, channelSharedRate, minOrderAmt, dueDays, description, ticketBoxList, channelList } = res.data
         this.addData = {
           type: JSON.parse(res.data.type).value,
           useArea: JSON.parse(res.data.useArea).value,
@@ -187,6 +217,7 @@ export default {
           minOrderAmt: accDiv(minOrderAmt, 100),
           couponId, title, quantity, channelSharedRate, dueDays, description, ticketBoxList
         }
+        this.channelList = channelList
       })
     }
   },
@@ -195,9 +226,16 @@ export default {
       this.excludeBoxIds = this.addData.ticketBoxList.map(item => { return item.boxId })
       this.selectShow = true
     },
+    funChannelShow(){
+      this.excludeChannelIds = this.channelList.map(item => { return item.channelId })
+      this.channelShow = true
+    },
     selectTicket(select) {
       this.addData.ticketBoxList = this.addData.ticketBoxList.concat(select)
     },
+    channelTicket(select) {
+      this.channelList = this.channelList.concat(select)
+    },
     update() {
       if (this.addData.type == 1) {
         if(this.addData.useArea !== 0 && this.addData.useArea !== 1 && this.addData.useArea !== 3 && this.addData.useArea !== 4) {
@@ -208,7 +246,7 @@ export default {
           return
         }
       } else if (this.addData.type == 2) {
-        if(this.addData.useArea !== 2) {
+        if(this.addData.useArea !== 2 && this.addData.useArea !== 0 && this.addData.useArea !== 1 ) {
           this.$message({
             message: '请选择使用范围！',
             type: 'warning'
@@ -219,9 +257,16 @@ export default {
       this.$refs.addItem.validate((valid, items) => {
         if (valid) {
           this.addIng = true
-          if(this.addData.useArea === 1) {
+          if(this.addData.useArea === 1 && this.addData.type === 1) {
             this.addData.boxIds = this.addData.ticketBoxList.map(item => { return item.boxId }).toString()
           }
+          if(this.addData.useArea === 1 && this.addData.type === 2) {
+            let arr = []
+            for (let i = 0; i < this.channelList.length; i++) {
+              arr.push(this.channelList[i].channelId)
+            }
+            this.addData.channelIdList = arr
+          }
           const { discount, minOrderAmt, ...rest } = this.addData
           addCoupon({...rest, ...{ discount: accMul(discount, 100), minOrderAmt: accMul(minOrderAmt, 100),}}).then(res => {
             this.addIng = false

src/views/business/coupon/components/channelTicket.vue

@@ -0,0 +1,175 @@
+<template>
+  <el-dialog title="选择门店" :visible.sync="channelShow" min-width="800px" :before-close="close">
+    <el-form :model="queryParams" ref="queryForm" label-width="80px" size="small">
+      <el-row :gutter="10">
+        <el-col :span="7">
+          <el-form-item label="上级渠道" prop="parentId">
+            <el-select
+              v-model="queryParams.parentId"
+              placeholder="请选择上级渠道"
+              style="width: 100%;"
+              filterable
+              clearable
+              :filter-method="dataFilter"
+              @change="handleQuery"
+            >
+              <el-option
+                v-for="(item, index) in channelList"
+                :key="item.channelId"
+                :label="item.name"
+                :value="item.channelId">
+                <div>
+                  <span style="float: left;">{{item.name}} </span>
+                  <span style="float: right;">{{item.mobile}}</span>
+                </div>
+              </el-option>
+            </el-select>
+          </el-form-item>
+        </el-col>
+        <el-col :span="7">
+          <el-form-item label="门店名称">
+            <el-input
+              v-model="queryParams.name"
+              placeholder="请输入门店名称"
+              clearable
+              @change="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="7">
+          <el-form-item label="手机号码">
+            <el-input
+              v-model="queryParams.mobile"
+              placeholder="请输入手机号码"
+              clearable
+              @change="handleQuery"
+            />
+          </el-form-item>
+        </el-col>
+        <el-col :span="3">
+          <el-form-item label-width="0">
+            <el-button type="primary" icon="el-icon-search" @click="handleQuery" >搜索</el-button>
+          </el-form-item>
+        </el-col>
+      </el-row>
+    </el-form>
+    <el-table v-loading="loading" :data="tableData" row-key="channelId" @selection-change="handleSelectionChange">
+      <el-table-column type="selection" width="55" :reserve-selection="true" />
+      <el-table-column label="门店编号" prop="channelId" min-width="90" />
+      <el-table-column label="门店名称" prop="name" />
+      <el-table-column label="手机号码" prop="mobile" />
+      <el-table-column label="上级渠道" prop="parentsName"/>
+      <el-table-column label="认证状态" prop="status">
+        <template slot-scope="{row}">
+          <el-tag :type="row.certifyStatus && JSON.parse(row.certifyStatus).value === 'y' ? 'success' : 'info'">{{ row.certifyStatus && JSON.parse(row.certifyStatus).desc }}</el-tag>
+        </template>
+      </el-table-column>
+    </el-table>
+    <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList()" />
+    <span slot="footer">
+      <el-button type="info" plain @click="close">取消</el-button>
+      <el-button type="primary" @click="update">确定</el-button>
+    </span>
+  </el-dialog>
+</template>
+<script>
+import { listSaleSite  } from "@/api/admin/salesite";
+import { publicFileGetUrl } from "@/api/common"
+import { listAllChannel} from "@/api/admin/channel"
+export default {
+  name: "ChannelTicket",
+  props: {
+    value: {
+      type: Array,
+      default: []
+    },
+    channelShow: {
+      type: Boolean,
+      default: false,
+    },
+    excludeChannelIds:{
+      type: Array,
+      default: []
+    },
+  },
+  data() {
+    return {
+      IMG_URL: publicFileGetUrl,
+      loading: false,
+      tableData: [],
+      queryParams: {},
+      total: 0,
+      selection: [],
+      // 上级渠道列表
+      channelList:[],
+    }
+  },
+  created() {
+    this.getChannelList()
+    this.listSaleSite();
+  },
+  methods: {
+    /** 搜索按钮操作 */
+    handleQuery() {
+      this.channelList = this.channelCopyList;
+      this.queryParams.pageNum = 1;
+      this.getList();
+    },
+    listSaleSite() {
+      this.getList(true)
+      this.selection = this.value
+      // this.$refs.table.toggleRowSelection(this.selection)
+    },
+    getList(reset) {
+      if (this.loading) {
+        return
+      }
+      this.loading = true
+      if (reset) {
+        this.queryParams = { pageNum: 1, pageSize: 10 }
+      }
+      if(this.excludeChannelIds){
+        this.queryParams.excludeChannelIds = this.excludeChannelIds
+      }
+      listSaleSite('pageNum='+this.queryParams.pageNum + '&pageSize='+this.queryParams.pageSize+'&', this.queryParams).then(res => {
+        this.loading = false
+        if (res.code === 0) {
+          this.tableData = res.rows
+          this.total = res.total
+        }
+      }).catch(() => {
+        this.loading = false
+      })
+    },
+    handleSelectionChange(val) {
+      this.selection = val
+    },
+    update() {
+      this.$emit('channelTicket', this.selection);
+      this.close()
+    },
+    close() {
+      this.$emit("close");
+    },
+    dataFilter(val) {
+      if (val) { //val存在
+        this.channelList = this.channelCopyList.filter((item) => {
+          if (!!~item.mobile.indexOf(val) || !!~item.mobile.toUpperCase().indexOf(val.toUpperCase())
+            || !!~item.name.indexOf(val) || !!~item.name.indexOf(val)) {
+            return true
+          }
+        })
+      } else { //val为空时，还原数组
+        this.channelList = this.channelCopyList;
+      }
+    },
+    // 获取上级渠道下拉列表
+    getChannelList(){
+      listAllChannel().then(response => {
+        this.channelList = response.data || [];
+        this.channelCopyList = response.data || [];
+      });
+    },
+  }
+}
+</script>