chenrui 4 rokov pred
rodič
commit
e0ac715e45

+ 61 - 0
src/api/coupons.js

@@ -0,0 +1,61 @@
+import { axios } from '@/utils/request'
+
+// 创建优惠券
+export const couponCreate = params => {
+  return axios({
+    url: 'coupon/create',
+    data: params,
+    method: 'post'
+  })
+}
+// 创建优惠券
+export const couponUpdate = params => {
+  return axios({
+    url: 'coupon/update',
+    data: params,
+    method: 'post'
+  })
+}
+// 优惠券列表
+export const couponQuery = (params) => {
+  const url = `coupon/query/${params.pageNo}/${params.pageSize}`
+  delete params.pageNo
+  delete params.pageSize
+  return axios({
+    url: url,
+    data: params,
+    method: 'post'
+  })
+}
+// 优惠券启禁用
+export const couponEnableStatus = params => {
+  const url = `coupon/enable/${params.id}/${params.flag}`
+  return axios.request({
+    url: url,
+    method: 'get'
+  })
+}
+// 优惠券删除
+export const couponDel = params => {
+  return axios.request({
+    url: `coupon/delete/${params.id}`,
+    method: 'get',
+    data: {}
+  })
+}
+// 优惠券详情(查看页)
+export const couponFind = params => {
+  return axios.request({
+    url: `coupon/find/${params.id}`,
+    method: 'get',
+    data: {}
+  })
+}
+// 优惠券详情(编辑页)
+export const couponToUpdate = params => {
+  return axios.request({
+    url: `coupon/toUpdate/${params.id}`,
+    method: 'get',
+    data: {}
+  })
+}

+ 500 - 227
src/views/CouponCenter/AddCouponModal.vue

@@ -1,7 +1,14 @@
 <template>
-  <a-modal class="CouponModal" :title="mtitle" :width="1020" :footer="null" :destroyOnClose="true" @cancel="isShow=false" v-model="isShow">
+  <a-modal
+    class="CouponModal"
+    :title="pageType == 'add' ? '新增' : pageType == 'edit' ? '编辑' : ''"
+    :width="1030"
+    :footer="null"
+    :destroyOnClose="true"
+    @cancel="isShow = false"
+    v-model="isShow">
     <!-- 表单 -->
-    <a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="{ span: 8 }" :wrapper-col="{ span: 16 }">
+    <a-form-model ref="ruleForms" :model="form" :rules="rules" :label-col="{ span: 6 }" :wrapper-col="{ span: 18 }">
       <a-row>
         <a-col :span="24">
           <div class="c-title">
@@ -10,49 +17,92 @@
           </div>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="优惠券名称" prop="name">
-            <a-input v-model="form.name" :maxLength="20" placeholder="请输入优惠券名称,20个字以内" />
-          </a-form-model-item>
+          <a-form-model-item label="优惠券名称" prop="title"><a-input v-model="form.title" :maxLength="20" placeholder="请输入优惠券名称,20个字以内" /></a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="发放总量" prop="name">
+          <!-- 优惠券类型分为:FULLSUB 满减券、DISCOUNT 折扣券、VOUCHER 代金券和 SUB 实价券 -->
+          <a-form-model-item label="优惠券类型" prop="couponType">
+            <v-select
+              ref="couponType"
+              v-model="form.couponType"
+              @change="selectChange('couponType')"
+              showArrow
+              placeholder="请选择优惠券类型"
+              code="COUPON_TYPE"></v-select>
+          </a-form-model-item>
+        </a-col>
+      </a-row>
+      <a-row>
+        <a-col :span="12" v-if="form.couponType == 'VOUCHER'">
+          <a-form-model-item label="优惠券面额" prop="price">
+            <a-input-number v-model="form.price" :min="0" :max="999999" placeholder="请输入优惠券面额" class="input-number-s" />
+            <span class="unit">元</span>
+          </a-form-model-item>
+        </a-col>
+        <a-col :span="12" v-if="form.couponType == 'VOUCHER'">
+          <a-form-model-item label="是否限额使用" class="default-form-item form-item-required">
             <a-row :gutter="20">
-              <a-col :span="7">
-                <a-select v-model="form.isQuota" placeholder="请选择">
-                  <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.code == '0' ? '不限' : '限制'}}</a-select-option>
-                </a-select>
+              <a-col :span="9">
+                <a-form-model-item prop="isLimit">
+                  <v-select
+                    ref="flag"
+                    v-model="isLimit"
+                    @change="selectChange('isLimitE')"
+                    showArrow
+                    placeholder="请选择"
+                    code="FLAG"></v-select>
+                </a-form-model-item>
               </a-col>
-              <a-col :span="17" v-show="form.isQuota == '1'">
-                <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限制发放份数, 0-999999" class="input-number-s" />
-                <span class="unit">份</span>
+              <a-col :span="15" v-if="isLimit == '1'">
+                <a-form-model-item prop="limitAmount">
+                  满<a-input-number v-model="form.limitAmount" :min="0" :max="999999" placeholder="限额数值" class="input-number-ms" />元使用
+                </a-form-model-item>
               </a-col>
             </a-row>
           </a-form-model-item>
         </a-col>
-        <a-col :span="12">
-          <a-form-model-item label="优惠券类型" prop="couponType">
-            <!-- <v-select ref="couponType" v-model="form.couponType" showArrow placeholder="请选择优惠券类型" code="CHECK_ENABLE_STATE"></v-select> -->
-            <a-select v-model="form.couponType" placeholder="请选择">
-              <a-select-option :value="item.code" v-for="(item, index) in couponTypeList" :key="index">{{item.dispName}}</a-select-option>
-            </a-select>
+      </a-row>
+      <a-row>
+        <a-col :span="12" v-if="form.couponType == 'FULLSUB'">
+          <a-form-model-item label="满" class="default-form-item form-item-required">
+            <a-row>
+              <a-col :span="12">
+                <a-form-model-item prop="limitAmount">
+                  <a-input-number v-model="form.limitAmount" :min="0" :max="999999" placeholder="限额数值" class="input-number-ls" />
+                  <span class="unit">减</span>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="12">
+                <a-form-model-item prop="subAmount">
+                  <a-input-number v-model="form.subAmount" :min="0" :max="999999" placeholder="减免金额" class="input-number-ls" />
+                  <span class="unit">元</span>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
           </a-form-model-item>
         </a-col>
+      </a-row>
+      <a-row>
         <a-col :span="12">
-          <a-form-model-item label="优惠券面额" prop="name">
-            <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入优惠券面额, 0-999999" class="input-number-s" />
-            <span class="unit">元</span>
+          <a-form-model-item label="发放总量" class="default-form-item form-item-required">
+            <a-row :gutter="20">
+              <a-col :span="9">
+                <a-form-model-item label="" prop="quotaLimit">
+                  <v-select ref="limitFlag" v-model="form.quotaLimit" showArrow placeholder="请选择" code="LIMIT_FLAG"></v-select>
+                </a-form-model-item>
+              </a-col>
+              <a-col :span="15" v-if="form.quotaLimit == '1'">
+                <a-form-model-item label="" prop="quota">
+                  <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限制发放总量" class="input-number-s" />
+                  <span class="unit">份</span>
+                </a-form-model-item>
+              </a-col>
+            </a-row>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="是否限额使用" prop="name">
-            <a-select v-model="form.isQuota" placeholder="请选择">
-              <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.dispName}}</a-select-option>
-            </a-select>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="24">
-          <a-form-model-item label="优惠券说明" prop="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
-            <a-textarea v-model="form.name" :maxLength="256" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入优惠券说明,256个字以内" />
+          <a-form-model-item label="优惠券说明" prop="ruleDesc">
+            <a-textarea v-model="form.ruleDesc" :maxLength="256" :auto-size="{ minRows: 3, maxRows: 5 }" placeholder="请输入优惠券说明,256个字以内" />
           </a-form-model-item>
         </a-col>
         <a-col :span="24">
@@ -61,52 +111,68 @@
             <a-divider type="vertical" class="bold-divider" />
           </div>
         </a-col>
-        <a-col :span="24">
-          <a-form-model-item label="持卡会员" prop="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+        <a-col :span="12">
+          <a-form-model-item label="持卡会员" class="default-form-item form-item-required">
             <a-row :gutter="20">
-              <a-col :span="6">
-                <a-select v-model="form.isQuota" placeholder="请选择">
-                  <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.code == '0' ? '不限领' : '限领'}}</a-select-option>
-                </a-select>
+              <a-col :span="9">
+                <a-form-model-item prop="cardholderCouponLimit.isLimit">
+                  <v-select
+                    ref="limitFlag"
+                    v-model="form.cardholderCouponLimit.isLimit"
+                    @change="selectChange('isLimitC')"
+                    showArrow
+                    placeholder="请选择"
+                    code="LIMIT_FLAG"></v-select>
+                </a-form-model-item>
               </a-col>
-              <a-col :span="16">
+              <a-col :span="15" v-if="form.cardholderCouponLimit.isLimit == '1'">
                 <a-row>
-                  <a-col :span="10">
-                    <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限领份数, 0-999999" class="input-number-s" />
-                  </a-col>
-                  <a-col :span="3">
-                    份/每
+                  <a-col :span="11">
+                    <a-form-model-item prop="cardholderCouponLimit.limitCount">
+                      <a-input-number v-model="form.cardholderCouponLimit.limitCount" :min="0" :max="999999" placeholder="限领份数" class="input-number-s" />
+                    </a-form-model-item>
                   </a-col>
-                  <a-col :span="6">
-                    <a-select v-model="form.restrictedUnit" placeholder="请选择">
-                      <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{item.dispName}}</a-select-option>
-                    </a-select>
+                  <a-col :span="4">份/每</a-col>
+                  <a-col :span="9">
+                    <a-form-model-item prop="cardholderCouponLimit.limitCondition">
+                      <a-select v-model="form.cardholderCouponLimit.limitCondition" placeholder="请选择">
+                        <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{ item.dispName }}</a-select-option>
+                      </a-select>
+                    </a-form-model-item>
                   </a-col>
                 </a-row>
               </a-col>
             </a-row>
           </a-form-model-item>
         </a-col>
-        <a-col :span="24">
-          <a-form-model-item label="未持卡会员" prop="name" :label-col="{ span: 4 }" :wrapper-col="{ span: 20 }">
+        <a-col :span="12">
+          <a-form-model-item label="未持卡会员" class="default-form-item form-item-required">
             <a-row :gutter="20">
-              <a-col :span="6">
-                <a-select v-model="form.isQuota" placeholder="请选择">
-                  <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.code == '0' ? '不限领' : '限领'}}</a-select-option>
-                </a-select>
+              <a-col :span="9">
+                <a-form-model-item prop="normalCouponLimit.isLimit">
+                  <v-select
+                    ref="limitFlag"
+                    v-model="form.normalCouponLimit.isLimit"
+                    @change="selectChange('isLimitN')"
+                    showArrow
+                    placeholder="请选择"
+                    code="LIMIT_FLAG"></v-select>
+                </a-form-model-item>
               </a-col>
-              <a-col :span="16">
+              <a-col :span="15" v-if="form.normalCouponLimit.isLimit == '1'">
                 <a-row>
-                  <a-col :span="10">
-                    <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入限领份数, 0-999999" class="input-number-s" />
-                  </a-col>
-                  <a-col :span="3">
-                    份/每
+                  <a-col :span="11">
+                    <a-form-model-item prop="normalCouponLimit.limitCount">
+                      <a-input-number v-model="form.normalCouponLimit.limitCount" :min="0" :max="999999" placeholder="限领份数" class="input-number-s" />
+                    </a-form-model-item>
                   </a-col>
-                  <a-col :span="6">
-                    <a-select v-model="form.restrictedUnit" placeholder="请选择">
-                      <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{item.dispName}}</a-select-option>
-                    </a-select>
+                  <a-col :span="4">份/每</a-col>
+                  <a-col :span="9">
+                    <a-form-model-item prop="normalCouponLimit.limitCondition">
+                      <a-select v-model="form.normalCouponLimit.limitCondition" placeholder="请选择">
+                        <a-select-option :value="item.code" v-for="(item, index) in isUnitList" :key="index">{{ item.dispName }}</a-select-option>
+                      </a-select>
+                    </a-form-model-item>
                   </a-col>
                 </a-row>
               </a-col>
@@ -114,20 +180,26 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="有效期" prop="name">
+          <a-form-model-item label="有效期" class="default-form-item form-item-required">
             <a-row :gutter="20">
               <a-col :span="9">
-                <a-select v-model="form.validType" placeholder="请选择">
-                  <a-select-option :value="item.code" v-for="(item, index) in couponValidityList" :key="index">{{item.dispName}}</a-select-option>
-                </a-select>
+                <a-form-model-item prop="validType">
+                  <a-select v-model="form.validType" @change="selectChange('validType')" placeholder="请选择">
+                    <a-select-option :value="item.code" v-for="(item, index) in couponValidityList" :key="index">{{ item.dispName }}</a-select-option>
+                  </a-select>
+                </a-form-model-item>
               </a-col>
-              <a-col :span="15" v-show="form.validType == 'ABSOLUTE'">
-                <a-range-picker @change="validDateChange" :disabled-date="disabledDate" format="YYYY-MM-DD" />
+              <a-col :span="15" v-if="form.validType == 'ABSOLUTE'">
+                <a-form-model-item prop="timeRange">
+                  <a-range-picker v-model="form.timeRange" @change="validDateChange" :disabled-date="disabledDate" format="YYYY-MM-DD" />
+                </a-form-model-item>
               </a-col>
-              <a-col :span="15" v-show="form.validType == 'RELATIVE'">
+              <a-col :span="15" v-if="form.validType == 'RELATIVE'">
                 <a-row>
                   <a-col :span="16">
-                    <a-input-number v-model="form.quota" :min="0" :max="999999" placeholder="请输入" class="input-number-s" />
+                    <a-form-model-item prop="validDate">
+                      <a-input-number v-model="form.validDate" :min="0" :max="999999" placeholder="请输入" class="input-number-s" />
+                    </a-form-model-item>
                   </a-col>
                   <a-col :span="8">天内有效</a-col>
                 </a-row>
@@ -136,201 +208,402 @@
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="是否允许优惠叠加" prop="name">
-            <a-select v-model="form.isQuota" placeholder="请选择">
-              <a-select-option :value="item.code" v-for="(item, index) in isFlagList" :key="index">{{item.dispName}}</a-select-option>
+          <a-form-model-item label="适用洗车类型" prop="couponScopeList">
+            <a-select v-model="form.couponScopeList" placeholder="请选择适用洗车类型" showArrow mode="multiple">
+              <a-select-option v-for="item in itemQueryList" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
             </a-select>
           </a-form-model-item>
         </a-col>
         <a-col :span="12">
-          <a-form-model-item label="适用洗车类型" prop="name">
-            <v-select ref="serviceType" v-model="form.isQuota" showArrow mode="multiple" placeholder="请选择适用洗车类型" code="CHECK_ENABLE_STATE"></v-select>
-          </a-form-model-item>
-        </a-col>
-        <a-col :span="12">
-          <a-form-model-item label="适用洗车网点" prop="isOutletsLimit">
+          <a-form-model-item class="default-form-item form-item-required">
+            <div slot="label" class="form-item-label">
+              <a-tooltip
+                placement="right"
+                arrow-point-at-center
+                title="已设置的适用洗车网点再次修改(尤其是减少使用网点)后,在【优惠券统计】中会保留原适用洗车网点的统计数据。"
+              >
+                适用洗车网点
+                <a-icon :style="{ fontSize: '17px', color: '#1890ff', verticalAlign: 'sub' }" type="question-circle" />
+              </a-tooltip>
+            </div>
             <a-row :gutter="20">
-              <a-col :span="12">
-                <a-select v-model="form.isOutletsLimit" placeholder="请选择">
-                  <a-select-option :value="item.code" v-for="(item, index) in isAllList" :key="index">{{item.dispName}}</a-select-option>
-                </a-select>
+              <a-col :span="9">
+                <a-form-model-item prop="isStoreLimit">
+                  <a-select v-model="form.isStoreLimit" @change="selectChange('isStoreLimit')" placeholder="请选择">
+                    <a-select-option :value="item.code" v-for="(item, index) in isAllList" :key="index">{{ item.dispName }}</a-select-option>
+                  </a-select>
+                </a-form-model-item>
               </a-col>
-              <a-col :span="12" v-show="form.isOutletsLimit == 1">
-                <a-row :gutter="20">
-                  <a-col :span="12">
-                    已选 <strong>4</strong> 个
-                  </a-col>
-                  <a-col :span="12">
-                    <a-button type="primary" size="small" class="small-btn" @click="openOutletsModal=true">选择</a-button>
-                  </a-col>
-                </a-row>
+              <a-col :span="15" v-if="form.isStoreLimit == '1'">
+                <a-form-model-item prop="couponStoreList">
+                  <a-row :gutter="20">
+                    <a-col :span="15">
+                      已选
+                      <strong>{{ form.couponStoreList.length }}</strong>
+                      个
+                    </a-col>
+                    <a-col :span="9"><a-button type="primary" size="small" class="small-btn" @click="openOutletsModal = true">选择</a-button></a-col>
+                  </a-row>
+                </a-form-model-item>
               </a-col>
             </a-row>
           </a-form-model-item>
         </a-col>
         <a-col :span="24">
           <a-form-model-item :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }" class="btn-cont">
-            <a-button type="primary" @click="onSubmit('ruleForm')">保存</a-button>
-            <a-button class="resetForm" @click="resetForm">取消</a-button>
+            <a-button type="primary" @click="onSubmit">保存</a-button>
+            <a-button class="resetForm" @click="onCancel">取消</a-button>
           </a-form-model-item>
         </a-col>
       </a-row>
     </a-form-model>
-    
+
     <!-- 选择网点 -->
-    <choose-outlets
-      :openOutletsModal="openOutletsModal"
-      @close="closeChooseOutlets"
-    />
-    
+    <choose-outlets :openOutletsModal="openOutletsModal" :storeList="form.couponStoreList" @choose="outletsChange" @close="closeChooseOutlets" />
   </a-modal>
 </template>
 
 <script>
-  import { VSelect } from '@/components'
-  import moment from 'moment'
-  import ChooseOutlets from './ChooseOutlets.vue'
-  export default{
-    name: 'AddCouponModal',
-    components: { VSelect, ChooseOutlets },
-    props: {
-      openModal: {  //  弹框是否展示
-        type: Boolean,
-        default: false
-      },
-      mtitle: {  //  弹框标题
-        type: String,
-        default: ''
-      }
+import { VSelect } from '@/components'
+import moment from 'moment'
+import ChooseOutlets from './ChooseOutlets.vue'
+import { itemQuery } from '@/api/car-wash'
+import { couponCreate, couponToUpdate, couponUpdate } from '@/api/coupons'
+export default {
+  name: 'AddCouponModal',
+  components: { VSelect, ChooseOutlets },
+  props: {
+    openModal: {
+      //  弹框是否展示
+      type: Boolean,
+      default: false
     },
-    data(){
-      return{
-        isShow: this.openModal,  //  弹框是否展示
-        form: {
-          name: '',  //  优惠券名称
-          isQuota: '0',  //  发放总量  不限,限制
-          quota: '',  //  发放总量  份数
-          couponType: 'VOUCHER',  //  优惠券类型
-          restrictedUnit: '0',  //  限领单位     自然月
-          validType: 'NONE', //  有效期类型:ABSOLUTE绝对时效(时间区间)/RELATIVE相对时效(领取后多少天内有效)/NONE不限制
-          startTime: '', //  有效期 开始
-          endTime: '', //  有效期 结束
-          validDate: '', //  有效期有效时长  (领取后多少天内有效)
-          isOutletsLimit: '0',  //  适用洗车网点限制   0全部(不限)  1部分(限制)
+    pageType: {
+      //  页面类型  add 新增 / edit 编辑
+      type: String,
+      default: ''
+    },
+    couponId: { //  优惠券id
+      type: String,
+      default: ''
+    }
+  },
+  data () {
+    return {
+      isShow: this.openModal, //  弹框是否展示
+      form: {
+        title: '', //  优惠券名称
+        quotaLimit: '0', //  是否限制发放数量(0否 1是)
+        quota: '', //  发放数量
+        couponType: 'VOUCHER', //  优惠券类型:FULLSUB满减/SUB立减/DISCOUNT折扣券/VOUCHER代金券/PROMOCODE优惠码
+        price: '', //  优惠券金额: 代金券时有效,其它为0
+        limitAmount: '', //  限定金额
+        subAmount: '', //  减免
+        ruleDesc: '', //  规则说明
+        normalCouponLimit: { //  非持卡会员
+          isLimit: '0', //  是否限制0否1是
+          limitCount: '', //  限制数量
+          limitCondition: 'monthly', //  限制条件:none无条件;monthly每月;daily每日
+          userType: 'normal' //  用户类型:normal普通用户;cardholder持卡用户;all所有用户
         },
-        rules: {
-          name: [
-            { required: true, message: '请输入优惠券名称', trigger: 'blur' }
-          ]
+        cardholderCouponLimit: { //  持卡会员
+          isLimit: '0', //  是否限制0否1是
+          limitCount: '', //  限制数量
+          limitCondition: 'monthly', //  限制条件:none无条件;monthly每月;daily每日
+          userType: 'cardholder' //  用户类型:normal普通用户;cardholder持卡用户;all所有用户
         },
-        isFlagList: [ //  是否  下拉数据列表
-          {dispName: '是', code: '1'},
-          {dispName: '否', code: '0'}
-        ],
-        couponTypeList: [ //  优惠券类型数据列表
-          {dispName: '满减券', code: 'FULLSUB'},
-          {dispName: '代金券', code: 'VOUCHER'}
-        ],
-        isUnitList: [  //  限领份数单位  下拉数据列表
-          {dispName: '自然月', code: '0'},
-        ],
-        couponValidityList: [ //  有效期  下拉数据列表
-          {dispName: '不限', code: 'NONE'},
-          {dispName: '固定日期', code: 'ABSOLUTE'},
-          {dispName: '领取后', code: 'RELATIVE'}
-        ],
-        isAllList: [ //  适用洗车网点  全部 部分 下拉数据列表
-          {dispName: '全部', code: '0'},
-          {dispName: '部分', code: '1'}
-        ],
-        openOutletsModal: false  ,//  选择网点  弹框展示状态
-      }
-    },
-    methods: {
-      moment,
-      range(start, end) {
-        const result = []
-        for (let i = start; i < end; i++) {
-          result.push(i)
-        }
-        return result
+        validType: 'NONE', //  有效期类型:ABSOLUTE绝对时效(时间区间)/RELATIVE相对时效(领取后多少天内有效)/NONE不限制
+        timeRange: [], //  有效期  时间范围(为解决表单校验)
+        startTime: '', //  开始时间
+        endTime: '', //  结束时间
+        validDate: '', //  有效时长
+        isOverlay: '0', //  是否可叠加使用(0否,1是)
+        scopeType: 'ITEM', //  适用范围类型:ITEM 部分服务/ITEM_ALL 全部服务/BUNDLE 部分套餐/BUNDLE_ALL 全部套餐
+        couponScopeList: [], //  优惠券适用范围设置
+        isStoreLimit: '0', //  是否有门店限制  (0否,1是)
+        couponStoreList: [] //  优惠券使用范围设置
       },
-      //  有效期  固定日期  禁用范围
-      disabledDate(current) {
-        // 不能选择今天之前的日期
-        return current && current < moment().subtract(1, 'days')
+      rules: {
+        title: [{ required: true, message: '请输入优惠券名称', trigger: 'blur' }],
+        quota: [{ required: true, message: '请输入限制发放总量', trigger: 'blur' }],
+        couponType: [{ required: true, message: '请选择优惠券类型', trigger: 'blur' }],
+        price: [{ required: true, message: '请输入优惠券面额', trigger: 'blur' }],
+        limitAmount: [{ required: true, message: '请输入限额数值', trigger: 'blur' }],
+        subAmount: [{ required: true, message: '请输入减免金额', trigger: 'blur' }],
+        'normalCouponLimit.limitCount': [{ required: true, message: '请输入限领份数', trigger: 'blur' }],
+        'cardholderCouponLimit.limitCount': [{ required: true, message: '请输入限领份数', trigger: 'blur' }],
+        timeRange: [{ required: true, message: '请选择日期范围', trigger: 'blur' }],
+        validDate: [{ required: true, message: '请输入有效时长', trigger: 'blur' }],
+        couponScopeList: [{ required: true, message: '请选择适用洗车类型', trigger: 'blur' }],
+        couponStoreList: [{ required: true, message: '请选择适用洗车网点', trigger: 'blur' }]
       },
-      //  有效期  固定日期  change
-      validDateChange(date, dateString){
-        console.log(date, dateString)
-      },
-      //  保存
-      onSubmit(formName){
-        console.log(this.form, '表单数据')
-        this.$refs[formName].validate(valid => {
-          if (valid) {
-            let formData = JSON.parse(JSON.stringify(this.form))
-            
-            //  提交前时间格式还需转换
-            console.log(formData,'-----提交的表单数据')
-          } else {
-            return false
+      isLimit: '0', //  代金券  是否限额使用(0否,1是)
+      isUnitList: [
+        //  限领份数单位  下拉数据列表
+        { dispName: '自然月', code: 'monthly' }
+      ],
+      couponValidityList: [
+        //  有效期  下拉数据列表
+        { dispName: '不限', code: 'NONE' },
+        { dispName: '固定日期', code: 'ABSOLUTE' },
+        { dispName: '领取后', code: 'RELATIVE' }
+      ],
+      isAllList: [
+        //  适用洗车网点  全部 部分 下拉数据列表
+        { dispName: '全部', code: '0' },
+        { dispName: '部分', code: '1' }
+      ],
+      itemQueryList: [], //  适用洗车类型
+      openOutletsModal: false //  选择网点  弹框展示状态
+    }
+  },
+  methods: {
+    moment,
+    range (start, end) {
+      const result = []
+      for (let i = start; i < end; i++) {
+        result.push(i)
+      }
+      return result
+    },
+    //  有效期  固定日期  禁用范围
+    disabledDate (current) {
+      // 不能选择今天之前的日期
+      return current && current < moment().subtract(1, 'days')
+    },
+    //  有效期  固定日期  change
+    validDateChange (date, dateString) {
+      console.log(date, dateString, this.form.timeRange)
+      this.form.startTime = dateString[0]
+      this.form.endTime = dateString[1]
+    },
+    //  保存
+    onSubmit () {
+      console.log(this.form, '表单数据')
+      this.$refs.ruleForms.validate(valid => {
+        if (valid) {
+          const formData = JSON.parse(JSON.stringify(this.form))
+          delete formData.timeRange
+          // 适用洗车类型
+          const couponScopeArr = []
+          formData.couponScopeList.map(item => { couponScopeArr.push({ scopeType: 'ITEM', scopeValue: item }) })
+          formData.couponScopeList = couponScopeArr
+          if (this.pageType == 'add') { //  新增
+            formData.id = null
+            this.couponCreate(formData)
+          } else if (this.pageType == 'edit') { //  编辑
+            formData.id = String(this.couponId)
+            this.couponUpdate(formData)
           }
+        } else {
+          return false
+        }
+      })
+    },
+    // 创建优惠券
+    couponCreate (formData) {
+      couponCreate(formData).then(res => {
+        if (res.status == 200) {
+          this.$message.success(res.message)
+          this.$emit('success')
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    // 编辑优惠券
+    couponUpdate (formData) {
+      couponUpdate(formData).then(res => {
+        if (res.status == 200) {
+          this.$message.success(res.message)
+          this.$emit('success')
+        } else {
+          this.$message.error(res.message)
+        }
+      })
+    },
+    // 取消
+    onCancel () {
+      this.resetForm()
+      this.isShow = false
+    },
+    //  选择网点
+    closeChooseOutlets (val) {
+      this.form.couponStoreList = []
+      if (val) {
+        val.map(item => {
+          this.form.couponStoreList.push({ storeId: item })
         })
-      },
-      // 取消
-      resetForm(){
-        this.$refs.ruleForm.resetFields()
-        this.isShow = false
-      },
-      //  选择网点
-      closeChooseOutlets(val, name){
-        // if(val){
-        //   this.form.equipment = val
-        //   this.equipmentName = name
-        // }
-        this.openOutletsModal = false
-      },
+      }
+      this.openOutletsModal = false
     },
-    watch: {
-      //  父页面传过来的弹框状态
-      openModal (newValue, oldValue) {
-        this.isShow = newValue
-      },
-      //  重定义的弹框状态
-      isShow (val){
-        if (!val){
-          this.$emit('close')
+    // 获取优惠券详情
+    getCouponInfo (id) {
+      couponToUpdate({ id: id }).then(res => {
+        if (res.status == 200) {
+          this.setVal(res.data)
         }
+      })
+    },
+    // 表单赋值
+    setVal (data) {
+      const arr = [ 'title', 'couponType', 'quotaLimit', 'quota', 'ruleDesc', 'validType', 'isStoreLimit' ]
+      arr.map(k => { this.form[k] = data[k] })
+      if (data.couponType === 'FULLSUB') { //  满减券
+        this.form.limitAmount = data.limitAmount
+        this.form.subAmount = data.subAmount
+      } else if (data.couponType === 'VOUCHER') { //  代金券
+        this.form.price = data.price
+        this.isLimit = data.isLimit
+        this.form.limitAmount = data.limitAmount
+      }
+      // 持卡与非持卡会员
+      this.form.cardholderCouponLimit = { isLimit: data.cardholderCouponLimit.isLimit, limitCount: data.cardholderCouponLimit.limitCount, limitCondition: data.cardholderCouponLimit.limitCondition, userType: data.cardholderCouponLimit.userType }
+      this.form.normalCouponLimit = { isLimit: data.normalCouponLimit.isLimit, limitCount: data.normalCouponLimit.limitCount, limitCondition: data.normalCouponLimit.limitCondition, userType: data.normalCouponLimit.userType }
+      if (data.validType === 'ABSOLUTE') { //  绝对时效(时间区间)
+        this.form.timeRange = [moment(data.startTimeGmt8Ymd, 'YYYY-MM-DD'), moment(data.endTimeGmt8Ymd, 'YYYY-MM-DD')]
+        this.form.startTime = data.startTimeGmt8Ymd
+        this.form.endTime = data.endTimeGmt8Ymd
+      } else if (data.validType === 'RELATIVE') { //  RELATIVE相对时效(领取后多少天内有效)
+        this.form.validDate = data.validDate
+      }
+      this.form.couponScopeList = data.scopeValueList //  适用洗车类型
+      this.form.couponStoreList = data.couponStoreList //  适用洗车网点
+      console.log('------赋值后的表单', this.form)
+    },
+    // 选择网点  change
+    outletsChange (val) {
+      console.log(val)
+    },
+    // 获取适用洗车类型列表
+    getItemQuery () {
+      itemQuery({
+        pageNo: 1,
+        pageSize: 1000
+      }).then(res => {
+        if (res.status == 200) {
+          this.itemQueryList = res.data.list || []
+        } else {
+          this.itemQueryList = []
+        }
+      })
+    },
+    //  select  change 关联数据清空处理
+    selectChange (type) {
+      if (type == 'couponType') { //  优惠券类型
+        this.form.subAmount = ''
+        this.form.limitAmount = ''
+        this.form.price = ''
+        this.isLimit = '0' //  代金券  是否限额使用(0否,1是)
+      } else if (type === 'isLimitE') { //  是否限额使用
+        this.form.limitAmount = ''
+      } else if (type === 'isLimitC') { //  持卡会员  是否限领
+        this.form.cardholderCouponLimit.limitCount = ''
+      } else if (type === 'isLimitN') { //  非持卡会员  是否限领
+        this.form.normalCouponLimit.limitCount = ''
+      } else if (type === 'validType') { //  有效期
+        this.form.timeRange = []
+        this.form.startTime = ''
+        this.form.endTime = ''
+        this.form.validDate = ''
+      } else if (type === 'isStoreLimit') { //  适用洗车网点
+        this.form.couponStoreList = []
+      }
+    },
+    // 重置表单数据
+    resetForm () {
+      const emptyArr = [ 'title', 'quota', 'price', 'limitAmount', 'subAmount', 'ruleDesc', 'startTime', 'endTime', 'validDate' ]
+      const zeroArr = [ 'quotaLimit', 'isOverlay', 'isStoreLimit' ]
+      const array = [ 'timeRange', 'couponScopeList', 'couponStoreList' ]
+      emptyArr.map(item => { this.form[item] = '' })
+      zeroArr.map(item => { this.form[item] = '0' })
+      array.map(item => { this.form[item] = [] })
+      this.form.couponType = 'VOUCHER'
+      this.form.cardholderCouponLimit = { isLimit: '0', limitCount: '', limitCondition: 'monthly', userType: 'cardholder' }
+      this.form.normalCouponLimit = { isLimit: '0', limitCount: '', limitCondition: 'monthly', userType: 'normal' }
+      this.form.validType = 'NONE'
+      this.form.scopeType = 'ITEM'
+      this.isLimit = '0'
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      } else {
+        this.resetForm() //  重置表单数据
+        this.getItemQuery() //  获取适用洗车类型列表
+      }
+    },
+    couponId (newValue, oldValue) {
+      if (newValue && this.isShow) {
+        this.getCouponInfo(newValue)
       }
     }
   }
+}
 </script>
 
 <style lang="less">
-  .CouponModal{
-    .c-title{
-      padding: 0 0 10px;
-      margin-bottom: 20px;
-      border-bottom: 1px solid #e8e8e8;
-      .bold-divider{
-        width: 3px;
-        background-color: #1890ff;
-      }
-    }
-    .input-number-s{
-      width: 90%;
+.CouponModal {
+  .c-title {
+    padding: 0 0 10px;
+    margin-bottom: 20px;
+    border-bottom: 1px solid #e8e8e8;
+    .bold-divider {
+      width: 3px;
+      background-color: #1890ff;
     }
-    .unit{
-      display: inline-block;
-      width: 10%;
-      text-align: right;
+  }
+  .input-number-s {
+    width: 90%;
+  }
+  .input-number-ms{
+    width: 66%;
+    margin: 0 5px;
+  }
+  .input-number-ls{
+    width: 80%;
+    margin-right: 8px;
+  }
+  .input-number-mj{
+    width: 40%;
+  }
+  .unit {
+    display: inline-block;
+    width: 10%;
+    text-align: center;
+  }
+  .btn-cont {
+    text-align: center;
+    .resetForm {
+      margin-left: 10px;
     }
-    .btn-cont{
-      text-align: center;
-      .resetForm{
-        margin-left: 10px;
+  }
+  .default-form-item {
+    margin-bottom: 0;
+  }
+  .form-item-label {
+  	display: inline-block;
+  	cursor: pointer;
+  }
+  .form-item-required {
+    .ant-form-item-label {
+      label:before {
+        display: inline-block;
+        margin-right: 4px;
+        color: #f5222d;
+        font-size: 14px;
+        font-family: SimSun, sans-serif;
+        line-height: 1;
+        content: '*';
       }
     }
   }
+}
 </style>

+ 152 - 57
src/views/CouponCenter/ChooseOutlets.vue

@@ -1,81 +1,176 @@
 <template>
-  <a-modal class="CouponOutletsModal" title="选择网点" :width="600" :footer="null" :destroyOnClose="true" @cancel="modalIsShow=false" v-model="modalIsShow">
+  <a-modal
+    class="CouponOutletsModal"
+    title="选择网点"
+    :width="600"
+    :footer="null"
+    :destroyOnClose="true"
+    @cancel="modalIsShow = false"
+    v-model="modalIsShow">
+    <!-- 查询条件 -->
     <a-input-search placeholder="请输入网点名称" enter-button="查询" @search="onSearch" class="input-search" />
-    <a-checkbox-group @change="onChange" class="checkbox-group">
-      <a-checkbox value="A" class="checkbox-item">A</a-checkbox>
-      <a-checkbox value="B" class="checkbox-item">B</a-checkbox>
-      <a-checkbox value="C" class="checkbox-item">C</a-checkbox>
-      <a-checkbox value="D" class="checkbox-item">D</a-checkbox>
+    <!-- 全选 -->
+    <a-checkbox :checked="checkAll" @change="onCheckAllChange" class="checkAll">全选</a-checkbox>
+    <!-- 多选框 -->
+    <a-checkbox-group @change="onChange" v-model="checkedList" class="checkbox-group">
+      <a-checkbox v-for="(item, index) in outletsDataList" :key="index" :value="item.id" class="checkbox-item">
+        <p class="checkbox-name">{{ item.name }}</p>
+        <span :class="['checkbox-btn', checkedList.indexOf(item.id) !== -1 ? 'checked' : '']">{{ checkedList.indexOf(item.id) !== -1 ? '已选择' : '选择' }}</span>
+      </a-checkbox>
+      <p class="noData" v-show="outletsDataList.length == 0">暂无数据</p>
     </a-checkbox-group>
   </a-modal>
 </template>
 
 <script>
-  export default{
-    name: 'ChooseOutlets',
-    props: {
-      openOutletsModal: {  //  弹框是否展示
-        type: Boolean,
-        default: false
-      },
+import { storeQuery } from '@/api/car-wash'
+export default {
+  name: 'ChooseOutlets',
+  props: {
+    openOutletsModal: {
+      //  弹框是否展示
+      type: Boolean,
+      default: false
     },
-    data(){
-      return{
-        modalIsShow: this.openEquipmentModal,  //  弹框是否展示
-        checkedList: [],  //  选中的网点
-        outletsDataList: [  //  网点列表数据
-          { name: '网点1', value: '1' },
-          { name: '网点2', value: '2' },
-          { name: '网点3', value: '3' },
-          { name: '网点4', value: '4' },
-          { name: '网点5', value: '5' },
-          { name: '网点6', value: '6' },
-        ]
+    storeList: { //  已选网点
+      type: Array,
+      default: () => {
+        return []
+      }
+    }
+  },
+  data () {
+    return {
+      modalIsShow: this.openEquipmentModal, //  弹框是否展示
+      checkedList: [], //  选中的网点
+      outletsDataList: [], //  网点列表数据
+      checkAll: false //  是否全选
+    }
+  },
+  methods: {
+    //  查询
+    onSearch (value) {
+      console.log(value)
+      if (value) {
+        this.getStoreQuery(value)
+      } else {
+        this.getStoreQuery()
       }
     },
-    methods: {
-      //  查询
-      onSearch(value) {
-        console.log(value)
-      },
-      //  多选框 change
-      onChange(e){
-        console.log(e)
-        this.checkedList = e
-      },
+    //  多选框 change
+    onChange (checkedList) {
+      this.checkAll = checkedList.length === this.outletsDataList.length
     },
-    watch: {
-      //  父页面传过来的弹框状态
-      openOutletsModal (newValue, oldValue) {
-        this.modalIsShow = newValue
-      },
-      //  重定义的弹框状态
-      modalIsShow (val){
-        if (!val){
-          this.$emit('close')
+    // 全选
+    onCheckAllChange (e) {
+      const allId = []
+      this.outletsDataList.map(item => {
+        allId.push(item.id)
+      })
+      Object.assign(this, {
+        checkedList: e.target.checked ? allId : [],
+        checkAll: e.target.checked
+      })
+    },
+    //  获取网点列表
+    getStoreQuery (val) {
+      storeQuery({
+        pageNo: 1,
+        pageSize: 1000,
+        name: val || ''
+      }).then(res => {
+        if (res.status == 200) {
+          this.outletsDataList = res.data.list
+          this.checkAll = this.checkedList.length === this.outletsDataList.length //  检查是否全选
+        } else {
+          this.outletsDataList = []
         }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openOutletsModal (newValue, oldValue) {
+      this.modalIsShow = newValue
+    },
+    //  重定义的弹框状态
+    modalIsShow (val) {
+      if (!val) {
+        this.$emit('close', this.checkedList)
+      } else {
+        this.getStoreQuery() //  获取网点列表
       }
+    },
+    storeList: {
+      handler (newValue, oldValue) {
+        this.checkedList = []
+        newValue.map(item => {
+          this.checkedList.push(item.storeId)
+        })
+      },
+      deep: true
     }
   }
+}
 </script>
 
 <style lang="less">
-  .CouponOutletsModal{
-    .input-search{
-      margin-bottom: 15px;
-    }
-    .checkbox-group{
+.CouponOutletsModal {
+  // 搜索
+  .input-search {
+    margin-bottom: 15px;
+  }
+  // 全选
+  .checkAll{
+    margin: 5px 0 20px;
+    border: 1px dashed #52c41a;
+    padding: 4px 10px 4px 15px;
+    border-radius: 6px;
+  }
+  // 多选
+  .checkbox-group {
+    display: block;
+    max-height: 400px;
+    overflow-y: scroll;
+    padding: 0 15px 15px;
+    border: 1px dashed #e4e4e4;
+    border-radius: 6px;
+    .checkbox-item {
       display: block;
-      .checkbox-item{
-        display: block;
-        margin: 15px 0 0;
-        padding: 10px 15px;
-        border: 1px solid rgb(228, 228, 228);
-        border-radius: 6px;
-        .ant-checkbox{
-          display: none;
+      margin: 15px 0 0;
+      padding: 10px 15px;
+      border: 1px solid rgb(228, 228, 228);
+      border-radius: 6px;
+      .ant-checkbox {
+        display: none;
+      }
+      span:nth-child(2) {
+        display: flex;
+        justify-content: space-between;
+        align-items: center;
+        padding: 0;
+        .checkbox-name {
+          margin: 0;
+        }
+        .checkbox-btn {
+          display: block;
+          font-size: 12px;
+          width: 70px;
+          text-align: center;
+          padding: 5px 15px;
+          border-radius: 28px;
+          background-color: #2db7f5;
+          color: #fff;
+        }
+        .checkbox-btn.checked {
+          background-color: #19be6b;
         }
       }
     }
   }
+  .noData{
+    text-align: center;
+    margin: 34px 0 20px;
+  }
+}
 </style>

+ 121 - 87
src/views/CouponCenter/CreateCoupons.vue

@@ -5,13 +5,11 @@
       <a-form layout="inline">
         <a-row :gutter="48">
           <a-col :span="6">
-            <a-form-item class="search-item" label="优惠券名称">
-              <a-input v-model.trim="queryParam.name" placeholder="请输入优惠券名称" allowClear/>
-            </a-form-item>
+            <a-form-item class="search-item" label="优惠券名称"><a-input v-model.trim="queryParam.title" placeholder="请输入优惠券名称" allowClear @pressEnter="$refs.table.refresh(true)" /></a-form-item>
           </a-col>
           <a-col :span="6">
             <a-form-item class="search-item" label="优惠券类型">
-              <v-select ref="yyzt" allowClear placeholder="请选择优惠券类型" v-model="queryParam.type" code="CHECK_ENABLE_STATE"></v-select>
+              <v-select ref="couponType" allowClear placeholder="请选择优惠券类型" v-model="queryParam.couponType" code="COUPON_TYPE"></v-select>
             </a-form-item>
           </a-col>
           <a-col :span="6">
@@ -22,110 +20,146 @@
       </a-form>
     </div>
     <!-- 新建 -->
-    <div class="table-operator">
-      <a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button>
-    </div>
+    <div class="table-operator"><a-button type="primary" icon="plus" @click="modalHandle('add')">新建</a-button></div>
     <!-- 表格列表 -->
-    <s-table ref="table" size="default" rowKey="id" :columns="columns" :data="loadData" bordered >
+    <s-table
+      ref="table"
+      size="default"
+      rowKey="id"
+      :columns="columns"
+      :data="loadData"
+      bordered>
+      <!-- 类型 -->
+      <template slot="couponType" slot-scope="text, record">{{ $refs.couponType.getNameByCode(record.couponType) }}</template>
+      <!-- 状态 -->
+      <template slot="status" slot-scope="text, record">
+        <a-switch :defaultChecked="record.status == 1" checked-children="已启用" un-checked-children="已停用" @change="changeStatus(record, record.status == 0 ? 1 : record.status == 1 ? 0 : '')" />
+      </template>
       <!-- 操作 -->
       <template slot="action" slot-scope="text, record">
-        <a-icon type="edit" title="编辑" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
-        <a-icon type="eye" title="查看详情" @click="openDetailsModal=true" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
-        <a-icon type="delete" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
+        <a-icon type="edit" v-if="record.status == 0" title="编辑" @click="modalHandle('edit', record)" :style="{ fontSize: '20px', color: '#1890FF', padding: '0 10px' }" />
+        <a-icon type="eye" title="查看详情" @click="openDetailsModal = true" :style="{ fontSize: '20px', color: '#e29e14', padding: '0 10px' }" />
+        <a-icon type="delete" v-if="record.status == 0" title="删除" @click="del(record)" :style="{ fontSize: '20px', color: 'red', padding: '0 10px' }" />
       </template>
     </s-table>
-    
+
     <!-- 新增/编辑 优惠券 -->
-    <add-coupon-modal
-      :openModal="openModal"
-      :mtitle="mtitle"
-      @close="openModal=false"
-    />
-    
+    <add-coupon-modal :openModal="openModal" :pageType="pageType" :couponId="couponId" @close="closeModal" @success="couponSubmit" />
   </a-card>
 </template>
 
 <script>
-  import { STable, VSelect } from '@/components'
-  import AddCouponModal from './AddCouponModal.vue'
-  export default{
-    name: 'CreateCoupons',
-    components: { STable, VSelect, AddCouponModal },
-    data(){
-      return{
-        queryParam: {
-          name: '',  //  优惠券名称
-          type: '',  //  优惠券类型
-        },
-        columns: [
-          { title: '序号', dataIndex: 'index', width: '100', align: 'center' },
-          { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
-          { title: '优惠券名称', dataIndex: 'name', width: '100', align: 'center' },
-          { title: '到期时间', dataIndex: 'endDate', width: '100', align: 'center' },
-          { title: '类型', dataIndex: 'couponType', width: '100', align: 'center' },
-          { title: '状态', dataIndex: 'status', width: '100', align: 'center' },
-          { title: '操作', scopedSlots: {customRender: 'action'}, width: '200', align: 'center' }
-        ],
-        // 加载数据方法 必须为 Promise 对象
-        loadData: parameter => {
-          // return activeList(Object.assign(parameter, this.queryParam)).then(res => {
-          //   const no = (res.data.pageNo - 1) * res.data.pageSize
-          //   for (let i = 0; i < res.data.list.length; i++) {
-          //     const _item = res.data.list[i]
-          //     _item.no = no + i + 1
-          //     _item.releaseStatus = _item.releaseStatus + '' === 'FB'
-          //   }
-          //   return res.data
-          // })
-          // let data = [
-          //   { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
-          //   { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
-          //   { createDate: '2020-07-31 15:09', equipment: 'ID585787887', name: '网点A', addrProvince: '陕西省', addrCity: '西安市', addrDetail: '华帝金座', businessHours: '8:30 - 22:00', equipmentStatus: '在线', businessStatus: '正常营业', wechatCode: '' },
-          // ]
-          // return new Promise((resolve, reject) => {
-          //   resolve(data)
-          // }).catch(() => console.log('Oops errors!'))
-        },
-        openModal: false,  //  新增/编辑 优惠券  弹框展示状态
-        mtitle: '',  //  新增/编辑 优惠券  弹框标题
-        openDetailsModal: false,  //  查看详情 优惠券  弹框展示状态
-      }
-    },
-    methods: {
-      //  新建
-      modalHandle(type){
-        this.mtitle = type == 'add' ? '新增' : '编辑'
-        this.openModal = true
+import { STable, VSelect } from '@/components'
+import AddCouponModal from './AddCouponModal.vue'
+import { couponQuery, couponEnableStatus, couponDel } from '@/api/coupons'
+export default {
+  name: 'CreateCoupons',
+  components: { STable, VSelect, AddCouponModal },
+  data () {
+    return {
+      queryParam: {
+        title: '', //  优惠券名称
+        couponType: '' //  优惠券类型
       },
-      // 删除
-      del(item){
-        console.log(item)
-        this.$confirm({
-          title: '提示',
-          content: '确定要删除吗?',
-          onOk () {
-            
+      columns: [
+        { title: '序号', dataIndex: 'no', width: '100', align: 'center' },
+        { title: '创建时间', dataIndex: 'createDate', width: '100', align: 'center' },
+        { title: '优惠券名称', dataIndex: 'title', width: '100', align: 'center' },
+        { title: '到期时间', dataIndex: 'validDateStr', width: '100', align: 'center' },
+        { title: '类型', scopedSlots: { customRender: 'couponType' }, width: '100', align: 'center' },
+        { title: '状态', scopedSlots: { customRender: 'status' }, width: '100', align: 'center' },
+        { title: '操作', scopedSlots: { customRender: 'action' }, width: '200', align: 'center' }
+      ],
+      // 加载数据方法 必须为 Promise 对象
+      loadData: parameter => {
+        return couponQuery(Object.assign(parameter, this.queryParam)).then(res => {
+          const no = (res.data.pageNo - 1) * res.data.pageSize
+          for (let i = 0; i < res.data.list.length; i++) {
+            const _item = res.data.list[i]
+            _item.no = no + i + 1
           }
+          return res.data
         })
       },
-      //  重置
-      reset(){
-        this.queryParam = {
-          name: '',  //  优惠券名称
-          type: '',  //  优惠券类型
+      openModal: false, //  新增/编辑 优惠券  弹框展示状态
+      pageType: '', //  页面类型  add 新增/edit 编辑 优惠券
+      openDetailsModal: false, //  查看详情 优惠券  弹框展示状态
+      couponId: '' //  优惠券id
+    }
+  },
+  methods: {
+    //  新建
+    modalHandle (type, row) {
+      this.pageType = type
+      this.couponId = type === 'add' ? '' : type === 'edit' ? String(row.id) : ''
+      console.log(type, row, this.couponId)
+      this.openModal = true
+    },
+    // 优惠券创建
+    couponSubmit () {
+      this.$refs.table.refresh(true)
+      this.openModal = false
+    },
+    // 新增、编辑 弹框关闭
+    closeModal () {
+      this.couponId = ''
+      this.openModal = false
+    },
+    //  删除
+    del (row) {
+      const _this = this
+      if (row.takeCount == 0) {
+        this.$confirm({
+          title: '数据删除后无法恢复, 确认删除吗?',
+          onOk: () => {
+            couponDel({ 'id': row.id }).then(res => {
+              if (res.status == 200) {
+                _this.$refs.table.refresh()
+                _this.$message.success(res.message)
+              } else {
+                _this.$message.error(res.message)
+              }
+            })
+          },
+          onCancel: () => {
+            this.$message.info('取消删除')
+          }
+        })
+      } else if (row.takeCount > 0) {
+        // 废除优惠卷
+        this.changeStatus(row, -1)
+      }
+    },
+    // 启用停用
+    changeStatus (row, flag) {
+      couponEnableStatus({ id: row.id, flag: flag }).then(res => {
+        if (res.status + '' === '200') {
+          this.$message.success(res.message)
+          this.$refs.table.refresh()
+        } else {
+          this.$message.error('修改失败, 请稍后再试')
+          row.status = !row.status
         }
-        this.$refs.table.refresh(true)
+      })
+    },
+    //  重置
+    reset () {
+      this.queryParam = {
+        title: '', //  优惠券名称
+        couponType: '' //  优惠券类型
       }
+      this.$refs.table.refresh(true)
     }
   }
+}
 </script>
 
 <style lang="less">
-  .CreateCoupons{
-    .table-page-search-wrapper{
-      .search-btn{
-        margin-right: 10px;
-      }
+.CreateCoupons {
+  .table-page-search-wrapper {
+    .search-btn {
+      margin-right: 10px;
     }
   }
+}
 </style>