chenrui před 9 měsíci
rodič
revize
d04033891d

+ 25 - 0
src/config/router.config.js

@@ -3589,6 +3589,31 @@ export const asyncRouterMap = [
               }
             ]
           },
+          {
+            path: '/easyPassManagement/promotionalActivities',
+            redirect: '/easyPassManagement/promotionalActivities/list',
+            name: 'promotionalActivities',
+            component: BlankLayout,
+            meta: {
+              title: '促销活动',
+              icon: 'file-ppt'
+              // permission: 'M_promotionalActivities'
+            },
+            hideChildrenInMenu: true,
+            children: [
+              {
+                path: 'list',
+                name: 'activityList',
+                component: () => import(/* webpackChunkName: "easyPassManagement" */ '@/views/easyPassManagement/promotionalActivities/list.vue'),
+                meta: {
+                  title: '促销活动列表',
+                  icon: 'file-ppt',
+                  hidden: true
+                  // permission: 'M_promotionalActivitiesList'
+                }
+              }
+            ]
+          },
           {
             path: '/promotionRulesManagement/promotionManagement',
             redirect: '/promotionRulesManagement/promotionManagement/list',

+ 358 - 0
src/views/easyPassManagement/promotionalActivities/detailModal.vue

@@ -0,0 +1,358 @@
+<template>
+  <a-modal
+    centered
+    class="promotion-basicInfo-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="详情"
+    v-model="isShow"
+    @cancel="isShow=false"
+    width="70%">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <div class="detailModal-con">
+        <a-form-model
+          id="promotion-basicInfo-form"
+          ref="ruleForm"
+          :model="form"
+          :rules="rules"
+          :label-col="formItemLayout.labelCol"
+          :wrapper-col="formItemLayout.wrapperCol" >
+          <a-row>
+             <a-col :xs="12" :sm="24">
+               <a-form-model-item label="促销名称" prop="title">
+                 {{ form.title }}
+               </a-form-model-item>
+             </a-col>
+              <a-col :xs="12" :sm="24">
+                <a-form-model-item label="促销时间" prop="sort">
+                  {{ form.sort }}
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="12" :sm="24">
+                <a-form-model-item label="排序" prop="sort">
+                  {{ form.sort }}
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24">
+                <a-form-model-item label="封面图片" prop="imageSet">
+                  <img
+                    :src="con"
+                    alt="图片走丢了"
+                    width="80"
+                    height="80"
+                    v-for="(con,i) in imageSet"
+                    style="margin-right:10px;object-fit: cover;"
+                    :key="i"/>
+                  <div class="upload-desc">说明:单张大小小于10Mb;建议尺寸:宽(420px)*高(230px)</div>
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24">
+                <a-form-model-item label="参与经销商" prop="sort">
+                  {{ form.sort }}
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24">
+                <a-form-model-item label="促销描述" prop="ruleExplain" >
+                  {{ form.promoRule&&form.promoRule.ruleExplain?form.promoRule.ruleExplain:'--' }}
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24">
+                <a-form-model-item label="加盟商编辑" prop="dealerEditFlag" >
+                  {{ form.dealerEditFlag?form.dealerEditFlag==='1'?'是':'否':'--' }}
+                </a-form-model-item>
+              </a-col>
+              <a-col :xs="24" :sm="24">
+                 <a-form-model-item label="返券产品" prop="publishFlag" >
+                   <div class="productTable">
+                     <s-table
+                       class="sTable"
+                       ref="table"
+                       size="small"
+                       :rowKey="(record) => record.id"
+                       :columns="columns"
+                       :data="loadData"
+                       :defaultLoadData="false"
+                       :style="{ maxHeight: 300+'px' }"
+                       :scroll="{ y:230 }"
+                       bordered>
+                     </s-table>
+                   </div>
+                 </a-form-model-item>        
+              </a-col>
+          </a-row>
+        </a-form-model>
+        <div class="btn-cont">
+          <a-button id="promotion-basicInfo-modal-close" @click="isShow = false">关闭</a-button>
+        </div>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+// 组件
+import { STable } from '@/components'
+// 接口
+import { productTypeQuery } from '@/api/productType'
+import { promoActiveDetail, promoRuleProductList } from '@/api/promoActive'
+
+export default {
+  name: 'DetailModal',
+  mixins: [commonMixin],
+  components: { STable },
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    },
+    itemSn: {// 活动sn
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  是否打开弹框
+      spinning: false,
+      // form表单label布局
+      formItemLayout: {
+        labelCol: { span: 4 },
+        wrapperCol: { span: 18 }
+      },
+      productTypeList: [], // 产品范围数据
+      productRangeList: [], // 已选产品范围
+      form: {
+        promoActiveSn: undefined, // 促销活动sn
+        title: '', // 标题
+        imageSet: '', // 图片
+        contentType: 'IMAGE_CONTENT', // 内容类型
+        content: '', // 内容
+        contentLink: '', // 链接内容
+        sort: undefined, // 排序
+        ruleEnableFlag: '1', // 参数配置 1勾选配置  0不能配置
+        publishFlag: '0', // 是否发布 0 否 1是
+        dealerEditFlag: '0', // 加盟商编辑 1是 0否
+        promoRule: {
+          ruleType: 'ticket', // 基本规则类型
+          productRangeFlag: '', // 产品范围标记 0无  1有产品范围
+          productRangeList: [], // 产品范围列表
+          ruleName: '', // 券名称
+          ruleTitle: '', // 副标题
+          ruleBaseType: 'category', // 券生成方式
+          ruleExplain: '', // 使用说明
+          validType: undefined, // 券有效期类型
+          validStartDate: undefined, // 券生效时间
+          validEndDate: undefined, // 券失效时间
+          validDays: undefined, // 券有效期天数
+          range: '1'
+        }
+      },
+      imageSet: [], // 封面图
+      columns: [// 表头
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '产品编码', dataIndex: 'productCode', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '产品名称', dataIndex: 'productName', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '原厂编码', dataIndex: 'origCode', width: '20%', align: 'left', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '活动价', dataIndex: 'price', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
+        { title: '返券金额', dataIndex: 'ruleValue', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } },
+        { title: '参考终端价', dataIndex: 'terminalPrice', width: '10%', align: 'right', customRender: text => { return ((text || text == 0) ? this.toThousands(text) : '--') } }
+      ],
+      // 表单验证规则
+      rules: {
+        title: [{ required: true, message: '请输入标题名称', trigger: 'blur' }],
+        imageSet: [{ required: true, message: '请选择要上传的封面图片', trigger: 'change' }],
+        sort: [{ required: true, message: '请输入排序数字', trigger: 'blur' }],
+        contentType: [{ required: true, message: '请选择内容类型', trigger: 'change' }],
+        content: [{ required: true, message: '请输入对应内容', trigger: ['blur', 'change'] }],
+        contentLink: [{ required: true, message: '请输入对应内容', trigger: 'blur' }],
+        publishFlag: [{ required: true, message: '请选择是否发布', trigger: 'change' }],
+        range: [{ required: true, message: '请选择券适用范围', trigger: 'change' }],
+        ruleType: [{ required: true, message: '请选择基本规则', trigger: 'change' }],
+        ruleName: [{ required: true, message: '请输入券名称', trigger: ['change', 'blur'] }],
+        ruleBaseType: [{ required: true, message: '请选择生成方式', trigger: 'change' }],
+        validType: [{ required: true, message: '请选择券有效期类型', trigger: 'change' }],
+        ruleDetailList: [{ type: 'array', required: true, message: '请选择券内容', trigger: 'blur' }]
+      },
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        const params = Object.assign(parameter, this.queryParam)
+        params.promoActiveSn = this.itemSn
+        // 获取详情  已选参与活动产品数据
+        return promoRuleProductList(params).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            // 计算表格序号
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      }
+    }
+  },
+  methods: {
+    // 重置
+    resetSearchForm () {
+      this.form = {
+        promoActiveSn: undefined, // 促销活动sn
+        title: '', // 标题
+        imageSet: '', // 图片
+        contentType: 'IMAGE_CONTENT', // 内容类型
+        content: '', // 内容
+        contentLink: '', // 链接内容
+        sort: undefined, // 排序
+        ruleEnableFlag: '1', // 参数配置 1勾选配置  0不能配置
+        publishFlag: '0',
+        dealerEditFlag: '0', // 加盟商编辑 1是 0否
+        promoRule: {
+          ruleType: 'ticket', // 基本规则类型
+          productRangeFlag: '', // 产品范围标记 0无  1有产品范围
+          productRangeList: [], // 产品范围列表
+          ruleName: '', // 券名称
+          ruleTitle: '', // 副标题
+          ruleBaseType: 'category', // 券生成方式
+          ruleExplain: '', // 使用说明
+          validType: undefined, // 券有效期类型
+          validStartDate: undefined, // 券生效时间
+          validEndDate: undefined, // 券失效时间
+          validDays: undefined, // 券有效期天数
+          range: '1'
+        }
+      }
+      this.imageSet = []
+    },
+    // 获取列表详情
+    getDetail () {
+      promoActiveDetail({ sn: this.itemSn }).then(res => {
+        if (res.status == 200) {
+          if (res.data.contentType === 'LINK') {
+            console.log('加载产品范围')
+            this.$nextTick(() => {
+              this.getTreeData()
+            })
+            if (res.data.promoRule && res.data.promoRule.productRangeList && res.data.promoRule.productRangeList.length > 0) {
+              this.productRangeList = res.data.promoRule.productRangeList.map(item => { return item.productTypeSn })
+            } else {
+              this.productRangeList = []
+            }
+          }
+          if (res.data.imageSet) {
+            this.form.imageSet = res.data.imageSet.join(',')
+            this.imageSet = res.data.imageSet
+          }
+          this.form = res.data
+        }
+      })
+    },
+    // 获取产品范围数据
+    getTreeData () {
+      productTypeQuery({}).then(res => {
+        if (res.status == 200) {
+          this.productTypeList = res.data
+        } else {
+          this.productTypeList = []
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.resetSearchForm()
+      } else {
+        this.getDetail()
+        this.$nextTick(() => {
+          this.$refs.table.refresh(true)
+        })
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+  .promotion-basicInfo-modal{
+    .detailModal-con{
+      max-height: 600px;
+      overflow-y: scroll;
+    }
+    .timeBox{
+      color:#ed1c24;
+      opacity: .7;
+    }
+    .ant-modal-body {
+      padding: 40px 40px 24px;
+    }
+    .promotion-basicInfo-con{
+      margin-top:10px;
+    }
+    .ant-form-item{
+      margin-bottom:0 !important;
+    }
+    .buyerBox{
+      border:1px solid #d9d9d9;margin-top:10px;border-radius:4px;padding:4px 10px;background:#f2f2f2;max-height:130px;overflow-y:scroll;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 35px 0 10px;
+    }
+    //处理滚动条不显示
+    .tabBox{
+       max-height:100px;
+       overflow-y:scroll;
+    }
+   .tabBox::-webkit-scrollbar {
+       width: 0px;
+    }
+    .tabBox::-webkit-scrollbar-track {
+      background: transparent;
+    }
+
+    .tabBox::-webkit-scrollbar-thumb {
+      background: transparent;
+    }
+
+    .tabBox::-webkit-scrollbar-button {
+      display: none;
+    }
+    // 设置input  禁用颜色
+    .ant-form-item-control .ant-input[disabled]{
+      color:#333333;
+      background:#ffffff;
+    }
+   .ant-radio-button-wrapper-disabled{
+     color:#333333;
+     padding:0 16px;
+   }
+   .ant-radio-button-wrapper-disabled.ant-radio-button-wrapper-checked{
+       background-color: #ed1c24 !important;
+       color:#ffffff;
+       padding:0 16px;
+   }
+   /deep/.ant-select-disabled .ant-select-selection, .ant-cascader-picker-disabled{
+      color:#333 !important;
+      background:#fff;
+   }
+   .productTable{
+     width:100%;
+   }
+   /deep/.ant-select-disabled .ant-select-selection--multiple .ant-select-selection__choice{
+     color:#333;
+   }
+  }
+
+</style>

+ 371 - 0
src/views/easyPassManagement/promotionalActivities/list.vue

@@ -0,0 +1,371 @@
+<template>
+  <div>
+    <a-card size="small" :bordered="false" class="promotion-wrap searchBoxNormal">
+      <!-- 搜索条件 -->
+      <div ref="tableSearch" class="table-page-search-wrapper">
+        <a-form layout="inline" id="promotion-form" @keyup.enter.native="$refs.table.refresh(true)">
+          <a-row :gutter="15">
+            <a-col :md="5" :sm="24">
+              <a-form-item label="创建时间">
+                <rangeDate id="promotion-createDate" ref="rangeCreateDate" :value="createDate" @change="dateCreateChange" />
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="促销名称">
+                <a-input id="promotion-promotionName" v-model.trim="queryParam.name" allowClear placeholder="请输入促销名称"/>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="促销类型">
+                <v-select
+                  v-model="queryParam.publishState"
+                  ref="publishState"
+                  id="promotion-publishState"
+                  code="PROMO_STATE"
+                  placeholder="请选择促销类型"
+                  allowClear></v-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="5" :sm="24">
+              <a-form-item label="促销状态">
+                <v-select
+                  v-model="queryParam.publishState"
+                  ref="publishState"
+                  id="promotion-publishState"
+                  code="PROMO_STATE"
+                  placeholder="请选择促销状态"
+                  allowClear></v-select>
+              </a-form-item>
+            </a-col>
+            <a-col :md="4" :sm="24">
+              <div class="table-page-search-submitButtons">
+                <a-button type="primary" :disabled="disabled" id="promotion-refresh" @click="$refs.table.refresh(true)">查询</a-button>
+                <a-button style="margin-left: 8px" :disabled="disabled" id="promotion-reset" @click="resetSearchForm()">重置</a-button>
+              </div>
+            </a-col>
+          </a-row>
+        </a-form>
+      </div>
+    </a-card>
+    <!-- 列表 -->
+    <a-card size="small" :bordered="false">
+      <a-spin :spinning="spinning" tip="Loading...">
+        <!-- 操作按钮 -->
+        <div class="table-operator" v-if="$hasPermissions('B_promotionManagementAdd')">
+          <a-button type="primary" class="button-info" id="promotion-add-btn" @click="openAddModal = true">买产品送产品</a-button>
+          <a-button type="primary" class="button-info" id="promotion-add-btn" @click="openAddModal = true">特价产品</a-button>
+          <a-button type="primary" class="button-info" id="promotion-add-btn" @click="openAddModal = true">买产品返代金券</a-button>
+        </div>
+        <s-table
+          class="sTable fixPagination"
+          ref="table"
+          :style="{ height: tableHeight+70+'px' }"
+          size="small"
+          :rowKey="(record) => record.id"
+          :columns="columns"
+          :data="loadData"
+          :scroll="{ y: tableHeight }"
+          :defaultLoadData="false"
+          bordered>
+          <!-- 促销名称 -->
+          <!-- v-if="$hasPermissions('B_dealerPromotionDetail')" -->
+          <template slot="promotionName" slot-scope="text, record">
+            <div :id="'promotion-info-'+record.id" class="link-bule nameBox text-overflows2" @click="handleDetail(record)">{{ record.title }}</div>
+            <!-- <div v-else class="nameBox text-overflows2">{{ record.title }}</div> -->
+          </template>
+          <!-- 促销状态 -->
+          <template slot="stateVal" slot-scope="text, record">
+            <span>{{ record.publishState==='UNPUBLISH'?'未发布':record.publishState==='PUBLISH'?'已发布':record.publishState==='CLOSE'?'已关闭':'已结束' }}</span>
+          </template>
+          <!-- 促销时间 -->
+          <template slot="promotionTime" slot-scope="text, record">
+            <span>{{ record.activeDateStart }}至{{ record.activeDateEnd }}</span>
+          </template>
+          <!-- 参与客户 -->
+          <template slot="joinCustomers" slot-scope="text, record">
+            <span @click="handleCustomers(record)" :id="'promotion-seeDealerInfo-'+record.id" v-if="record.dealerSnList&&record.dealerSnList.length>0">共有<span class="link-bule">{{ record.dealerSnList.length }}</span>个客户</span>
+            <span v-else>共有0个客户</span>
+          </template>
+          <!-- 促销描述 -->
+          <template slot="salesDesc" slot-scope="text, record">
+            <a-tooltip placement="rightBottom" v-if="record.description&&record.description.length>14">
+              <template slot="title">
+                <span>{{ record.description }}</span>
+              </template>
+              <div @click="promotionDesc(record)" :id="'promotion-description-'+record.id" class="link-bule">{{ record.description }}</div>
+            </a-tooltip>
+            <div v-else-if="!record.description" class="desc">--</div>
+            <div v-else @click="promotionDesc(record)" :id="'promotion-description-'+record.id" class="link-bule">{{ record.description }}</div>
+          </template>
+          <!-- 促销展示 -->
+          <template slot="salesShow" slot-scope="text, record">
+            <div @click="handleSaleShow(record)" :id="'promotion-seeImgInfo-'+record.id" v-if="record.contentType!='LINK'&&record.imageSet && record.imageSet.length>0">
+              <img :src="record.imageSet[0]" alt="图片走丢啦" width="60" />
+            </div>
+            <div v-else-if="record.contentType=='LINK'&&record.imageSet && record.imageSet.length>0">
+              <img :src="record.imageSet[0]" alt="图片走丢啦" width="60" />
+            </div>
+            <span v-else>--</span>
+          </template>
+          <!-- 操作 -->
+          <!-- state状态 END已结束    CLOSE已关闭    PUBLISH  已发布    UNPUBLISH  未发布 -->
+          <template slot="action" slot-scope="text, record">
+            <div>
+              <a-button
+                size="small"
+                type="link"
+                class="button-warning"
+                :id="'promotion-edit-btn-'+record.id"
+                @click="promotionEdit(record)"
+                v-if="(record.publishState=='UNPUBLISH' || record.publishState=='CLOSE') && $hasPermissions('B_promotionManagementEdit')">编辑</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-warning"
+                :id="'promotion-modify-btn-'+record.id"
+                @click="handleRelease(record,'edit')">废弃</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-warning"
+                :id="'promotion-modify-btn-'+record.id"
+                @click="handleRelease(record,'edit')">轮播图</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-info"
+                @click="handleRelease(record,'add')"
+                v-if="record.publishState=='UNPUBLISH'&&$hasPermissions('B_promotionManagementContent')"
+                :id="'promotion-release-btn-'+record.id">发布</a-button>
+              <a-button
+                size="small"
+                type="link"
+                class="button-error"
+                v-if="record.publishState=='UNPUBLISH'&&$hasPermissions('B_promotionManagementDel')"
+                @click="handleDel(record)"
+                :id="'promotion-del-btn-'+record.id">删除</a-button>
+            </div>
+          </template>
+        </s-table>
+      </a-spin>
+      <!-- 参与客户 -->
+      <lookUp-customers-modal ref="lookUpCustomers" :openModal="openCustomerModal" @close="openCustomerModal = false"></lookUp-customers-modal>
+      <!-- 促销描述 -->
+      <promotion-desc-modal :openModal="openDescModal" :con="descCon" @close="openDescModal = false;descCon=''"></promotion-desc-modal>
+      <!-- 促销展示 -->
+      <promotion-show-modal ref="showModal" :openModal="openShowModal" @close="openShowModal = false"></promotion-show-modal>
+      <!-- 新增 -->
+      <addModal :openModal="openAddModal" :itemId="itemId" @close="closeAddModal" @ok="$refs.table.refresh()"></addModal>
+      <!-- 查看 -->
+      <detail-Modal :openModal="openDetailModal" :itemSn="itemId" @close="closeDetailModal" @ok="$refs.table.refresh()" />
+    </a-card>
+  </div>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+// 组件
+import { STable, VSelect } from '@/components'
+import rangeDate from '@/views/common/rangeDate.vue'
+import lookUpCustomersModal from './lookUpCustomersModal'
+import detailModal from './detailModal'
+// 接口
+import { promoActiveList, promoActiveDel } from '@/api/promoActive'
+export default {
+  name: 'PromotionalActivitiesList',
+  mixins: [commonMixin],
+  components: { STable, VSelect, rangeDate, lookUpCustomersModal, detailModal },
+  data () {
+    return {
+      spinning: false,
+      tableHeight: 0, // 表格高度
+      disabled: false, //  查询、重置按钮是否可操作
+      openCustomerModal: false, // 打开参与客户弹窗
+      openDescModal: false, // 打开促销描述弹窗
+      openShowModal: false, // 打开促销展示弹窗
+      openAddModal: false, // 打开新增弹窗
+      openDetailModal: false, // 打开详情弹窗
+      createDate: [], //  创建时间
+      itemId: '', // 当前活动sn
+      descCon: '', // 描述内容
+      pageType: '', // 发布类型  add  促销发布  edit 发布修改
+      dealerSn: [], // 经销商sn
+      // 查询参数
+      queryParam: {
+        beginDate: undefined, // 促销开始时间
+        endDate: undefined, // 促销结束时间
+        name: '', // 促销名称
+        publishState: undefined// 是否发布
+      },
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        const params = Object.assign(parameter, this.queryParam)
+        return promoActiveList(params).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      columns: [// 表头
+        { title: '序号', dataIndex: 'no', width: '4%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '创建时间', dataIndex: 'createDate', width: '8%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '促销名称', scopedSlots: { customRender: 'promotionName' }, width: '15%', align: 'left' },
+        { title: '促销时间', scopedSlots: { customRender: 'promotionTime' }, width: '15%', align: 'center' },
+        { title: '参与经销商', scopedSlots: { customRender: 'joinCustomers' }, width: '10%', align: 'center' },
+        { title: '促销类型', dataIndex: 'promotionRuleTypeDictValue', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '加盟商编辑', dataIndex: 'name1', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '首页轮播图', dataIndex: 'name2', width: '6%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '促销状态', scopedSlots: { customRender: 'stateVal' }, width: '6%', align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '15%', align: 'center' }
+      ]
+    }
+  },
+  methods: {
+    // 关闭添加促销活动弹窗
+    closeAddModal () {
+      this.openAddModal = false; this.itemId = ''
+    },
+    // 参与经销商
+    handleCustomers (row) {
+      this.openCustomerModal = true
+      this.$nextTick(() => {
+        this.$refs.lookUpCustomers.pageInit({ dealerSnList: row.dealerSnList ? row.dealerSnList : undefined, promoActiveSn: row.promoActiveSn })
+      })
+    },
+    //  创建时间  change
+    dateCreateChange (date) {
+      this.queryParam.beginDate = date[0]
+      this.queryParam.endDate = date[1]
+    },
+    // 促销展示
+    handleSaleShow (record) {
+      this.openShowModal = true
+      this.$nextTick(() => {
+        this.$refs.showModal.pageInit({ type: record.contentType, con: record.content })
+      })
+    },
+    // 促销编辑
+    promotionEdit (item) {
+      this.itemId = item.promoActiveSn
+      this.$nextTick(() => {
+        this.openAddModal = true
+      })
+    },
+    // 促销描述
+    promotionDesc (row) {
+      this.descCon = row.description
+      this.$nextTick(() => {
+        this.openDescModal = true
+      })
+    },
+    // 删除促销活动
+    handleDel (row) {
+      const _this = this
+      this.$confirm({
+        title: '提示',
+        content: '点击确定,该内容将会被删除,不可再恢复!',
+        centered: true,
+        onOk () {
+          _this.spinning = true
+          promoActiveDel({ sn: row.promoActiveSn }).then(res => {
+            if (res.status == 200) {
+              _this.$message.success(res.message)
+              _this.$refs.table.refresh()
+              _this.spinning = false
+            } else {
+              _this.spinning = false
+            }
+          })
+        }
+      })
+    },
+    // 重置
+    resetSearchForm () {
+      this.$refs.rangeCreateDate.resetDate(this.createDate)
+      this.queryParam.beginDate = undefined
+      this.queryParam.endDate = undefined
+      this.queryParam.name = ''
+      this.queryParam.publishState = undefined
+      this.$refs.table.refresh(true)
+    },
+    // 促销发布
+    handleRelease (row, type) {
+      const newType = row.imageSet && row.imageSet.length > 0 ? 'edit' : type
+      this.$router.push({ name: 'promotionManagementAdd', params: { sn: row.promoActiveSn, pageType: newType } })
+    },
+    // 打开详情
+    handleDetail (row) {
+      this.openDetailModal = true
+      this.itemId = row.promoActiveSn
+    },
+    // 关闭详情
+    closeDetailModal () {
+      this.openDetailModal = false
+      this.itemId = ''
+    },
+    // 初始化
+    pageInit () {
+      const _this = this
+      this.$nextTick(() => { // 页面渲染完成后的回调
+        _this.setTableH()
+      })
+    },
+    // 计算表格高度
+    setTableH () {
+      const tableSearchH = this.$refs.tableSearch.offsetHeight
+      this.tableHeight = window.innerHeight - tableSearchH - 240
+    }
+  },
+  watch: {
+    '$store.state.app.winHeight' (newValue, oldValue) { //  窗口变更时,需同时更改表格高度
+      this.setTableH()
+    }
+  },
+  mounted () {
+    if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
+      this.pageInit()
+      this.resetSearchForm()
+    }
+  },
+  activated () {
+    // 如果是新页签打开,则重置当前页面
+    if (this.$store.state.app.isNewTab) {
+      this.pageInit()
+      this.resetSearchForm()
+    }
+    // 仅刷新列表,不重置页面
+    if (this.$store.state.app.updateList) {
+      this.pageInit()
+      this.$refs.table.refresh()
+    }
+  },
+  beforeRouteEnter (to, from, next) {
+    next(vm => {})
+  }
+}
+</script>
+<style lang="less" scoped>
+  .font1{
+   color:#39f;
+  }
+  .desc{
+    width: 100%;
+    padding:0 10px;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-box;
+    box-sizing: border-box;
+    -webkit-line-clamp: 3;
+    -webkit-box-orient: vertical;
+  }
+</style>

+ 235 - 0
src/views/easyPassManagement/promotionalActivities/lookUpCustomersModal.vue

@@ -0,0 +1,235 @@
+<template>
+  <a-modal
+    centered
+    class="lookUpCustomers-modal"
+    :footer="null"
+    :maskClosable="false"
+    title="参与客户"
+    v-model="isShow"
+    @cancel="isShow = false"
+    width="60%">
+    <a-spin :spinning="spinning" tip="Loading...">
+      <a-card size="small" :bordered="false">
+        <!-- 筛选条件 -->
+        <div class="table-page-search-wrapper">
+          <a-form layout="inline" id="lookUpCustomers-form" @keyup.enter.native="$refs.table.refresh(true)">
+            <a-row :gutter="15">
+              <a-col :md="6" :sm="24">
+                <a-form-model-item label="地区">
+                  <AreaList id="lookUpCustomers-areaList" changeOnSelect ref="areaList" @change="areaChange" defValKey="id"></AreaList>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-model-item label="区域/分区">
+                  <subarea ref="subarea" id="lookUpCustomers-subarea" @change="subareaChange"></subarea>
+                </a-form-model-item>
+              </a-col>
+              <a-col :md="6" :sm="24">
+                <a-form-item label="经销商名称">
+                  <a-input id="lookUpCustomers-purchaseBillNo" v-model.trim="queryParam.dealerName" allowClear placeholder="请输入经销商名称"/>
+                </a-form-item>
+              </a-col>
+              <a-col :md="6" :sm="24" style="margin-bottom: 10px;">
+                <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="lookUpCustomers-refresh">查询</a-button>
+                <a-button style="margin-left: 5px" @click="resetSearchForm" :disabled="disabled" id="lookUpCustomers-reset">重置</a-button>
+                <a-button
+                  type="primary"
+                  style="margin-left: 10px"
+                  id="lookUpCustomers-export"
+                  class="button-warning"
+                  @click="handleExport"
+                  :disabled="disabled"
+                  :loading="exportLoading">导出</a-button>
+              </a-col>
+            </a-row>
+          </a-form>
+        </div>
+        <!-- 列表 -->
+        <s-table
+          class="sTable"
+          ref="table"
+          size="small"
+          :rowKey="(record) => record.id"
+          :columns="columns"
+          :data="loadData"
+          :defaultLoadData="false"
+          :scroll="{ y: 450 }"
+          :rowClassName="(record, index) => record.checkProfitLossQty < 0 ? 'redBg-row':''"
+          bordered>
+          <!-- 地区 -->
+          <template slot="address" slot-scope="text, record">
+            {{ record.provinceName }}/{{ record.cityName }}/{{ record.districtName }}
+          </template>
+        </s-table>
+      </a-card>
+      <div class="btn-cont">
+        <a-button id="lookUpCustomers-modal-close" @click="isShow = false">关闭</a-button>
+      </div>
+    </a-spin>
+  </a-modal>
+</template>
+
+<script>
+import { commonMixin } from '@/utils/mixin'
+import { hdExportExcel } from '@/libs/exportExcel'
+// 组件
+import { STable } from '@/components'
+import ProductType from '@/views/common/productType.js'
+import subarea from '@/views/common/subarea.js'
+import AreaList from '@/views/common/areaList.js'
+// 接口
+import { dealerExport } from '@/api/promoTerminal'
+import { dealerQueryList } from '@/api/dealer'
+export default {
+  name: 'LookUpCustomersModal',
+  components: { STable, ProductType, subarea, AreaList },
+  mixins: [commonMixin],
+  props: {
+    openModal: { //  弹框显示状态
+      type: Boolean,
+      default: false
+    }
+  },
+  data () {
+    return {
+      spinning: false,
+      isShow: this.openModal, // 是否打开弹框
+      disabled: false, // 查询、重置按钮是否可操作
+      advanced: false, // 高级搜索 展开/关闭
+      exportShow: false, // 导出弹窗显示
+      exportLoading: false, // 导出按钮加载状态
+      // 查询条件
+      queryParam: {
+        // 区域分区
+        subareaArea: {
+          subareaSn: undefined, // 区域
+          subareaAreaSn: undefined// 分区
+        },
+        provinceSn: undefined, // 省sn
+        citySn: undefined, // 市sn
+        districtSn: undefined, // 区sn
+        dealerName: undefined// 经销商名称
+      },
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        this.disabled = true
+        this.spinning = true
+        const params = Object.assign(parameter, this.queryParam)
+        return dealerQueryList(params).then(res => {
+          let data
+          if (res.status == 200) {
+            data = res.data
+            const no = (data.pageNo - 1) * data.pageSize
+            for (var i = 0; i < data.list.length; i++) {
+              data.list[i].no = no + i + 1
+            }
+            this.disabled = false
+          }
+          this.spinning = false
+          return data
+        })
+      },
+      snObj: undefined, // 经销商列表
+      columns: [// 表头
+        { title: '序号', dataIndex: 'no', width: '8%', align: 'center' },
+        { title: '地区', scopedSlots: { customRender: 'address' }, width: '20%', align: 'center', ellipsis: true },
+        { title: '区域', dataIndex: 'subareaArea.subareaName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '分区', dataIndex: 'subareaArea.subareaAreaName', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '经销商名称', dataIndex: 'dealerName', width: '20%', align: 'center', customRender: function (text) { return text || '--' }, ellipsis: true },
+        { title: '商户类型', dataIndex: 'dealerLevelDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } },
+        { title: '商户级别', dataIndex: 'dealerTypeDictValue', width: '15%', align: 'center', customRender: function (text) { return text || '--' } }
+      ]
+    }
+  },
+  methods: {
+    // 地区
+    areaChange (val) {
+      this.queryParam.provinceSn = val[0] ? val[0] : ''
+      this.queryParam.citySn = val[1] ? val[1] : ''
+      this.queryParam.districtSn = val[2] ? val[2] : ''
+    },
+    // 区域分区
+    subareaChange (val) {
+      this.queryParam.subareaArea.subareaSn = val[0] ? val[0] : undefined
+      this.queryParam.subareaArea.subareaAreaSn = val[1] ? val[1] : undefined
+    },
+    // 初始化
+    pageInit (data) {
+      this.snObj = data
+      this.queryParam = Object.assign(this.queryParam, data)
+      this.$refs.table.refresh(true)
+    },
+    //  重置
+    resetSearchForm () {
+      this.queryParam = Object.assign({
+        provinceSn: undefined,
+        citySn: undefined,
+        districtSn: undefined,
+        subareaArea: {
+          subareaSn: undefined,
+          subareaAreaSn: undefined
+        }
+      }, this.snObj)
+      this.queryParam.dealerName = undefined
+      this.$refs.areaList.clearData()
+      this.$refs.subarea.clearData()
+      this.$refs.table.refresh(true)
+    },
+    //  导出
+    handleExport () {
+      const _this = this
+      _this.exportLoading = true
+      _this.spinning = true
+      hdExportExcel(dealerExport, _this.queryParam, '促销经销商列表导出', function () {
+        _this.exportLoading = false
+        _this.spinning = false
+        _this.showExport = true
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (newValue, oldValue) {
+      if (!newValue) {
+        this.$emit('close')
+        this.resetSearchForm()
+      }
+    }
+  }
+}
+</script>
+<style lang="less" scoped>
+  .lookUpCustomers-modal{
+    .ant-modal-body{
+      padding: 0 24px 24px;
+    }
+    .redBg-row{
+      background-color: #f5cdc8;
+    }
+    .btn-cont {
+      text-align: center;
+      margin: 5px 0 10px;
+    }
+    .table-page-search-wrapper{
+      margin-bottom:6px;
+      /deep/.ant-select-selection{
+        border:0 !important;
+        box-shadow: none !important;
+      }
+      .ant-form.ant-form-inline .ant-form-item{
+        border:1px solid #dadada;
+        border-radius: 3px;
+        overflow: hidden;
+        margin-bottom: 10px!important;
+        /deep/.ant-form-item-label{
+          padding-left: 11px !important;
+          padding-right: 0!important;
+        }
+      }
+    }
+  }
+</style>