Kaynağa Gözat

批量延期功能

zhangdan 4 yıl önce
ebeveyn
işleme
dbac570ca2

+ 10 - 0
src/api/customerBundle.js

@@ -105,6 +105,16 @@ export const customerBundleItemDelay = params => {
     method: 'post'
   }).then(res => res)
 }
+
+// 批量延期
+export const allCustomerBundleItemDelay = params => {
+  return axios.request({
+    url: `customerBundleItem/batchDelay`,
+    data: params,
+    method: 'post'
+  }).then(res => res)
+}
+
 //  已购套餐 取消购买
 export const orderCancel = params => {
   return axios.request({

+ 231 - 77
src/views/SetmealSales/SetmealDetailModal.vue

@@ -10,8 +10,7 @@
       :maskClosable="false"
       :destroyOnClose="true"
       @cancel="isShow = false"
-      v-model="isShow"
-    >
+      v-model="isShow">
       <a-row :gutter="20" v-if="detailsData">
         <a-col :span="8" class="item-cont">
           <p class="item-label">购买日期:</p>
@@ -62,6 +61,8 @@
       </a-row>
       <a-tabs type="card">
         <a-tab-pane key="1" tab="套餐内容">
+          <!-- 批量延期 -->
+          <a-button type="primary" style="margin-bottom:15px" @click="allDelay">批量延期</a-button>
           <!-- 套餐内容列表 -->
           <a-table
             ref="tcTable"
@@ -69,6 +70,7 @@
             :rowKey="record => record.id"
             :columns="setMealColumns"
             :dataSource="setMealData"
+            :row-selection="rowSelection"
             :pagination="false"
             :loading="loading"
             bordered>
@@ -79,8 +81,9 @@
             </span>
             <!-- 操作 -->
             <span slot="action" slot-scope="text, record">
-              <a-button v-if="record.isDelay" type="link" @click="openSetDelay(record)">延期</a-button>
-              <span v-else>--</span>
+              <span v-if="(record.remainTimes == 0 && record.expiryTimes == 0) || (record.expiryDate.substr(0, 10) == '2099-01-01') || (record.cycleFlag == 1)">--</span>
+              <a-button v-else type="link" @click="openSetDelay(record)">延期</a-button>
+
             </span>
           </a-table>
         </a-tab-pane>
@@ -101,21 +104,40 @@
       </a-tabs>
       <div class="btn-cont" v-if="detailsData">
         <a-button id="detailsSetmealModal-back" @click="isShow = false">返回列表</a-button>
-        <a-button v-if="detailsData.orderBundle.orderFlag=='PAED'&&detailsData.salesChannelSettleStatus=='NOT_SETTLE'&&recordData.length==0" id="detailsSetmealModal-cancel" type="primary" @click="cancelBuy">取消购买</a-button>
+        <a-button
+          v-if="detailsData.orderBundle.orderFlag=='PAED'&&detailsData.salesChannelSettleStatus=='NOT_SETTLE'&&recordData.length==0"
+          id="detailsSetmealModal-cancel"
+          type="primary"
+          @click="cancelBuy">取消购买</a-button>
       </div>
     </a-modal>
     <!-- 延期 -->
     <delay-modal :openModal="setDelay" :serverData="serverData" @close="closeSetDelay" />
+    <!-- 批量延期 -->
+    <allDelay-modal :openAllDelayModal="isOpenModal" :selectedRows="selectedRowsData" @close="closeOpenModal"></allDelay-modal>
   </div>
 </template>
 
 <script>
-import { STable, VSelect } from '@/components'
-import { customerBundleDetail, customerBundleUseHistory, orderCancel } from '@/api/customerBundle.js'
+import {
+  STable,
+  VSelect
+} from '@/components'
+import {
+  customerBundleDetail,
+  customerBundleUseHistory,
+  orderCancel
+} from '@/api/customerBundle.js'
 import DelayModal from './delayModal.vue'
+import allDelayModal from './allDelayModal.vue'
 export default {
   name: 'SetmealDetailModal',
-  components: { STable, VSelect, DelayModal },
+  components: {
+    STable,
+    VSelect,
+    DelayModal,
+    allDelayModal
+  },
   props: {
     openModal: {
       //  弹框是否展示
@@ -131,30 +153,126 @@ export default {
   data () {
     return {
       isShow: this.openModal, //  弹框是否展示
-      setMealColumns: [
-        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
-        { title: '服务名称', dataIndex: 'itemName', width: 200, align: 'center' },
-        { title: '到期时间', scopedSlots: { customRender: 'expiryDate' }, width: 100, align: 'center' },
-        { title: '总次数', dataIndex: 'times', width: 100, align: 'center' },
-        { title: '剩余次数', dataIndex: 'remainTimes', width: 100, align: 'center' },
-        { title: '已用次数', dataIndex: 'usedTimes', width: 100, align: 'center' },
-        { title: '过期次数', dataIndex: 'expiryTimes', width: 100, align: 'center' },
-        { title: '退款次数', dataIndex: 'refundTimes', width: 100, align: 'center' },
-        { title: '操作', scopedSlots: { customRender: 'action' }, width: 100, align: 'center' }
+      setMealColumns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '服务名称',
+        dataIndex: 'itemName',
+        width: 200,
+        align: 'center'
+      },
+      {
+        title: '到期时间',
+        scopedSlots: {
+          customRender: 'expiryDate'
+        },
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '总次数',
+        dataIndex: 'times',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '剩余次数',
+        dataIndex: 'remainTimes',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '已用次数',
+        dataIndex: 'usedTimes',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '过期次数',
+        dataIndex: 'expiryTimes',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '退款次数',
+        dataIndex: 'refundTimes',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '操作',
+        scopedSlots: {
+          customRender: 'action'
+        },
+        width: 100,
+        align: 'center'
+      }
       ],
-      recordColumns: [
-        { title: '序号', dataIndex: 'no', width: 60, align: 'center' },
-        { title: '使用时间', dataIndex: 'usedTime', width: 100, align: 'center' },
-        { title: '服务内容', dataIndex: 'itemName', width: 100, align: 'center', customRender: function (text) { return (text || '--') } },
-        { title: '服务门店', scopedSlots: { customRender: 'usedStoreName' }, width: 100, align: 'center' },
-        { title: '核销单号', dataIndex: 'bizNum', width: 100, align: 'center' }
+      recordColumns: [{
+        title: '序号',
+        dataIndex: 'no',
+        width: 60,
+        align: 'center'
+      },
+      {
+        title: '使用时间',
+        dataIndex: 'usedTime',
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '服务内容',
+        dataIndex: 'itemName',
+        width: 100,
+        align: 'center',
+        customRender: function (text) {
+          return (text || '--')
+        }
+      },
+      {
+        title: '服务门店',
+        scopedSlots: {
+          customRender: 'usedStoreName'
+        },
+        width: 100,
+        align: 'center'
+      },
+      {
+        title: '核销单号',
+        dataIndex: 'bizNum',
+        width: 100,
+        align: 'center'
+      }
       ],
       setMealData: [], //  套餐内容
       recordData: [], //  使用记录
       detailsData: null, //  套餐数据
       setDelay: false, //  延期设置
       serverData: null, //  套餐包含服务 数据
-      loading: false
+      loading: false,
+      selectedRowKeys: [],
+      isOpenModal: false, // 批量延期弹窗初始状态
+	  selectedRowsData: [], // 批量选择所有套餐数据集合
+	  selectedRowsDataList: []
+    }
+  },
+  computed: {
+    rowSelection () {
+      return {
+        onChange: (selectedRowKeys, selectedRows) => {
+          this.selectedRowsDataList = selectedRows
+          console.log(this.selectedRowsDataList, '-----------选中数据')
+        },
+        getCheckboxProps: record => ({
+          props: {
+			  disabled: (record.remainTimes == 0 && record.expiryTimes == 0) || (record.expiryDate.substr(0, 10) == '2099-01-01') || (record.cycleFlag == 1)
+          }
+        })
+      }
     }
   },
   methods: {
@@ -162,13 +280,16 @@ export default {
     getSetmealInfo () {
       this.loading = true
       //  套餐详情
-      customerBundleDetail({ id: this.setmealId }).then(res => {
+      customerBundleDetail({
+        id: this.setmealId
+      }).then(res => {
         if (res.status == 200) {
           this.detailsData = res.data
           if (res.data && res.data.customerBundleItemList && res.data.customerBundleItemList.length > 0) {
             res.data.customerBundleItemList.map((item, index) => {
               item.no = index + 1
-              item.isDelay = (item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false) && (item.cycleFlag == 0)
+              item.isDelay = (item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false) && (item.cycleFlag ==
+									0)
             })
             this.setMealData = res.data.customerBundleItemList
           } else {
@@ -181,7 +302,9 @@ export default {
         this.loading = false
       })
       //  使用记录
-      customerBundleUseHistory({ id: this.setmealId }).then(res => {
+      customerBundleUseHistory({
+        id: this.setmealId
+      }).then(res => {
         if (res.status == 200) {
           if (res.data && res.data.length > 0) {
             res.data.map((item, index) => {
@@ -196,6 +319,23 @@ export default {
         }
       })
     },
+    // 批量延期
+    allDelay () {
+      if (this.selectedRowsDataList && this.selectedRowsDataList.length) {
+        this.isOpenModal = true
+        this.selectedRowsData = this.selectedRowsDataList
+        console.log(this.selectedRowsData, '-----------选中数据')
+      } else {
+        this.$message.error('请先选择服务项目')
+      }
+    },
+    // 关闭批量延期弹窗
+    closeOpenModal () {
+      this.getSetmealInfo()
+      this.selectedRowsData = []
+      this.isOpenModal = false
+    },
+
     //  取消购买
     cancelBuy () {
       const _this = this
@@ -203,7 +343,9 @@ export default {
         title: '取消购买',
         content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
         onOk: () => {
-          orderCancel({ id: _this.setmealId }).then(res => {
+          orderCancel({
+            id: _this.setmealId
+          }).then(res => {
             if (res.status == 200) {
               _this.$emit('refrresh')
             }
@@ -248,60 +390,72 @@ export default {
 </script>
 
 <style lang="less">
-.DetailsSetmealModal {
-	.ant-modal-body {
-		padding: 24px 40px;
-	}
-	.item-cont {
-		margin-bottom: 15px;
-		display: flex;
-		.item-label {
-			width: 115px;
-			font-size: 14px;
-			color: rgba(0, 0, 0, 0.85);
-			flex-shrink: 0;
+	.DetailsSetmealModal {
+		.ant-modal-body {
+			padding: 24px 40px;
 		}
-		.item-main {
-			flex-grow: 1;
-			.wd-icon {
-				display: block;
+
+		.item-cont {
+			margin-bottom: 15px;
+			display: flex;
+
+			.item-label {
+				width: 115px;
+				font-size: 14px;
+				color: rgba(0, 0, 0, 0.85);
+				flex-shrink: 0;
 			}
-		}
-		.guidance-con {
-			border: 1px dashed #e8e8e8;
-			border-radius: 6px;
-			padding: 20px;
-			img {
-				max-width: 100%;
+
+			.item-main {
+				flex-grow: 1;
+
+				.wd-icon {
+					display: block;
+				}
+			}
+
+			.guidance-con {
+				border: 1px dashed #e8e8e8;
+				border-radius: 6px;
+				padding: 20px;
+
+				img {
+					max-width: 100%;
+				}
+			}
+
+			.period-price-con {
+				border-bottom: 1px solid #e8e8e8;
+			}
+
+			.item-period {
+				display: flex;
+				align-items: center;
+				justify-content: space-evenly;
+				flex-grow: 1;
+				border: 1px solid #e8e8e8;
+				border-width: 1px 1px 0;
+				text-align: center;
+
+				.period,
+				.period-price {
+					padding: 5px 0;
+					border-right: 1px solid #e8e8e8;
+				}
+
+				.period-price:last-child {
+					border-right: none;
+				}
 			}
 		}
-		.period-price-con {
-			border-bottom: 1px solid #e8e8e8;
-		}
-		.item-period {
-			display: flex;
-			align-items: center;
-			justify-content: space-evenly;
-			flex-grow: 1;
-			border: 1px solid #e8e8e8;
-			border-width: 1px 1px 0;
+
+		.btn-cont {
 			text-align: center;
-			.period,
-			.period-price {
-				padding: 5px 0;
-				border-right: 1px solid #e8e8e8;
-			}
-			.period-price:last-child {
-				border-right: none;
+			margin: 50px 0 10px;
+
+			button {
+				margin: 0 20px;
 			}
 		}
 	}
-	.btn-cont {
-		text-align: center;
-		margin: 50px 0 10px;
-    button{
-      margin: 0 20px;
-    }
-	}
-}
 </style>

+ 165 - 0
src/views/SetmealSales/allDelayModal.vue

@@ -0,0 +1,165 @@
+<template>
+  <a-modal
+    class="delayModal"
+    title="套餐服务延期"
+    width="60%"
+    centered
+    :footer="null"
+    :maskClosable="false"
+    :destroyOnClose="true"
+    @cancel="isShow = false"
+    v-model="isShow">
+    <!-- 表单 -->
+    <a-form-model
+      ref="ruleForm"
+      :model="form"
+      :rules="rules"
+      :label-col="{ span: 6 }"
+      :wrapper-col="{ span: 18 }"
+    >
+      <!-- 服务名称 -->
+      <a-form-model-item label="服务名称" class="item-con"><span class="item-main" style="margin-right: 8px;" v-for="item in listNameData" :key="item.index">{{ '【' +item.itemName +'】' }}</span></a-form-model-item>
+      <!-- 新的到期时间 -->
+      <a-form-model-item label="新的到期时间" prop="expiryDate">
+        <a-date-picker
+          type="date"
+          v-model="form.expiryDate"
+          id="delay-expiryDate"
+          placeholder="请选择到期时间,超过该时间,用户将无法再使用套餐"
+          :disabled-date="disabledDate"
+          style="width: 80%;" />
+      </a-form-model-item>
+      <a-form-model-item label="" class="btn-cont" :label-col="{ span: 0 }" :wrapper-col="{ span: 24 }">
+        <a-button id="delay-cancel" class="delay-cancel" @click="cancel">取消</a-button>
+        <a-button type="primary" id="delay-submit" @click="onSubmit">提交</a-button>
+      </a-form-model-item>
+    </a-form-model>
+  </a-modal>
+</template>
+
+<script>
+import moment from 'moment'
+import { allCustomerBundleItemDelay } from '@/api/customerBundle.js'
+export default {
+  name: 'AllDelayModal',
+  props: {
+    openAllDelayModal: {
+      //  弹框是否展示
+      type: Boolean,
+      default: false
+    },
+    selectedRows: {
+      //  服务数据
+      type: Array,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data () {
+    return {
+      isShow: this.openAllDelayModal, //  弹框是否展示
+	  listNameData: [], // 服务名称
+      form: {
+        expiryDate: null //  新的到期时间
+      },
+      rules: {
+        expiryDate: [{ required: true, message: '请选择新的到期时间', trigger: 'change' }]
+      }
+    }
+  },
+  methods: {
+    disabledDate (current) {
+      //  到期时间范围为:当前日期 <= date < 2038-01-01
+      const minDate = current.valueOf() < moment().subtract(1, 'days').valueOf() //  包含当天
+      const maxDate = current.valueOf() > moment('2038-01-01').valueOf()
+      return minDate || maxDate
+    },
+    //  取消
+    cancel () {
+      this.resetForm() //  重置表单数据
+      this.isShow = false
+    },
+    // 重置表单
+    resetForm () {
+      this.form.expiryDate = null
+    },
+
+    //  提交
+    onSubmit () {
+      this.$refs.ruleForm.validate(valid => {
+        if (valid) {
+          console.log('---------------提交')
+		  var listData = []
+		  this.selectedRows.map(item => {
+			 var a = { id: item.id, returnTimes: item.expiryTimes }
+			 listData.push(a)
+		  })
+		  listData.map(item => {
+			  item.expiryDate = moment(this.form.expiryDate).format('YYYY-MM-DD')
+		  })
+		  console.log(listData, '------------')
+		  allCustomerBundleItemDelay(listData).then(res => {
+		        if (res.status == 200) {
+		          this.cancel()
+		        }
+		      })
+		  // this.$confirm({
+		  //   title: '提示',
+		  //   content: h('div', {
+		  //     style: {
+		  //       textAlign: 'center'
+		  //     }
+		  //   }, [
+		  //     h('div', '所选服务将全部延期,返还次数为过期次数,确认延期吗?')
+		  //   ]),
+		  //   onOk () {
+          //           return
+		  //     customerBundleItemDelay(listData).then(res => {
+		  //       if (res.status == 200) {
+		  //         this.cancel()
+		  //       }
+		  //     })
+		  //   }
+		  // })
+        } else {
+          console.log('error submit!!')
+          return false
+        }
+      })
+    }
+  },
+  watch: {
+    //  父页面传过来的弹框状态
+    openAllDelayModal (newValue, oldValue) {
+      this.isShow = newValue
+    },
+    //  重定义的弹框状态
+    isShow (val) {
+      if (!val) {
+        this.$emit('close')
+      } else {
+        this.resetForm() //  重置表单数据
+      }
+    },
+    selectedRows (val) {
+      if (val) {
+        this.listNameData = val
+        console.log(this.listNameData, '--------服务名称')
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .delayModal{
+    .btn-cont {
+    	text-align: center;
+    	margin: 50px 0 10px;
+      button{
+        margin: 0 20px;
+      }
+    }
+  }
+</style>

+ 2 - 2
vue.config.js

@@ -108,8 +108,8 @@ const vueConfig = {
     // If you want to turn on the proxy, please remove the mockjs /src/main.jsL11
     proxy: {
       '/api': {
-        target: 'https://channel.test.zyucgj.com/zyyc-channel/',
-        // target: 'http://192.168.16.103:7103/zyyc-channel/',
+        // target: 'https://channel.test.zyucgj.com/zyyc-channel/',
+        target: 'http://192.168.16.103:7103/zyyc-channel/',
         // target: 'https://channel.qiubcar.com/zyyc-channel/',
         ws: false,
         changeOrigin: true,