zhangdan 4 лет назад
Родитель
Сommit
bd7fdaf1ed
2 измененных файлов с 505 добавлено и 540 удалено
  1. 371 383
      src/views/SetmealSales/SetmealDetailModal.vue
  2. 134 157
      src/views/SetmealSales/allDelayModal.vue

+ 371 - 383
src/views/SetmealSales/SetmealDetailModal.vue

@@ -1,392 +1,380 @@
 <template>
-  <div class="DetailsSetmeal">
-    <v-select v-show="false" ref="payType" code="PAY_PROCUCT_TYPE" placeholder="支付方式"></v-select>
-    <a-modal
-      class="DetailsSetmealModal"
-      title="套餐购买详情"
-      width="80%"
-      centered
-      :footer="null"
-      :maskClosable="false"
-      :destroyOnClose="true"
-      @cancel="isShow = false"
-      v-model="isShow">
-      <a-row :gutter="20" v-if="detailsData">
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">购买日期:</p>
-          <p class="item-main">{{ detailsData.orderDate || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">订单号:</p>
-          <p class="item-main">{{ detailsData.orderBundle.number || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">客户名称:</p>
-          <p class="item-main">{{ detailsData.orderBundle.custName || '--' }}</p>
-        </a-col>
-      </a-row>
-      <a-row :gutter="20" v-if="detailsData">
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">手机号:</p>
-          <p class="item-main">{{ detailsData.orderBundle.custMobile || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">销售合作商:</p>
-          <p class="item-main">{{ detailsData.dataSourceName || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">套餐名称:</p>
-          <p class="item-main">{{ detailsData.orderBundle.bundleName || '--' }}</p>
-        </a-col>
-      </a-row>
-      <a-row :gutter="20" v-if="detailsData">
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">套餐价格:</p>
-          <p class="item-main">{{ detailsData.orderBundle.totalAmount ? detailsData.orderBundle.totalAmount + '元' : 0 }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">销售人员:</p>
-          <p class="item-main">{{ detailsData.sellerName || '--' }}</p>
-        </a-col>
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">收款金额:</p>
-          <p class="item-main">{{ detailsData.orderBundle.payedAmount ? detailsData.orderBundle.payedAmount + '元' : 0 }}</p>
-        </a-col>
-      </a-row>
-      <a-row :gutter="20" v-if="detailsData">
-        <a-col :span="8" class="item-cont">
-          <p class="item-label">支付方式:</p>
-          <p class="item-main">{{ $refs.payType.getNameByCode(detailsData.paymentDetailList[0].payType) }}</p>
-        </a-col>
-      </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"
-            size="middle"
-            :rowKey="record => record.id"
-            :columns="setMealColumns"
-            :dataSource="setMealData"
-            :row-selection="rowSelection"
-            :pagination="false"
-            :loading="loading"
-            bordered>
-            <!-- 到期时间 -->
-            <span slot="expiryDate" slot-scope="text, record">
-              <span v-if="record.cycleFlag==0">{{ record.expiryDate }}</span>
-              <span v-else>--</span>
-            </span>
-            <!-- 操作 -->
-            <span slot="action" slot-scope="text, record">
-              <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>
+	<div class="DetailsSetmeal">
+		<v-select v-show="false" ref="payType" code="PAY_PROCUCT_TYPE" placeholder="支付方式"></v-select>
+		<a-modal class="DetailsSetmealModal" title="套餐购买详情" width="80%" centered :footer="null" :maskClosable="false"
+		 :destroyOnClose="true" @cancel="isShow = false" v-model="isShow">
+			<a-row :gutter="20" v-if="detailsData">
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">购买日期:</p>
+					<p class="item-main">{{ detailsData.orderDate || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">订单号:</p>
+					<p class="item-main">{{ detailsData.orderBundle.number || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">客户名称:</p>
+					<p class="item-main">{{ detailsData.orderBundle.custName || '--' }}</p>
+				</a-col>
+			</a-row>
+			<a-row :gutter="20" v-if="detailsData">
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">手机号:</p>
+					<p class="item-main">{{ detailsData.orderBundle.custMobile || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">销售合作商:</p>
+					<p class="item-main">{{ detailsData.dataSourceName || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">套餐名称:</p>
+					<p class="item-main">{{ detailsData.orderBundle.bundleName || '--' }}</p>
+				</a-col>
+			</a-row>
+			<a-row :gutter="20" v-if="detailsData">
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">套餐价格:</p>
+					<p class="item-main">{{ detailsData.orderBundle.totalAmount ? detailsData.orderBundle.totalAmount + '元' : 0 }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">销售人员:</p>
+					<p class="item-main">{{ detailsData.sellerName || '--' }}</p>
+				</a-col>
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">收款金额:</p>
+					<p class="item-main">{{ detailsData.orderBundle.payedAmount ? detailsData.orderBundle.payedAmount + '元' : 0 }}</p>
+				</a-col>
+			</a-row>
+			<a-row :gutter="20" v-if="detailsData">
+				<a-col :span="8" class="item-cont">
+					<p class="item-label">支付方式:</p>
+					<p class="item-main">{{ $refs.payType.getNameByCode(detailsData.paymentDetailList[0].payType) }}</p>
+				</a-col>
+			</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" size="middle" :rowKey="record => record.id" :columns="setMealColumns" :dataSource="setMealData"
+					 :row-selection="rowSelection" :pagination="false" :loading="loading" bordered>
+						<!-- 到期时间 -->
+						<span slot="expiryDate" slot-scope="text, record">
+							<span v-if="record.cycleFlag==0">{{ record.expiryDate }}</span>
+							<span v-else>--</span>
+						</span>
+						<!-- 操作 -->
+						<span slot="action" slot-scope="text, record">
+							<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>
-        <a-tab-pane key="2" tab="使用记录">
-          <!-- 使用记录列表 -->
-          <a-table
-            ref="recordTable"
-            size="middle"
-            :rowKey="record => record.id"
-            :columns="recordColumns"
-            :dataSource="recordData"
-            :pagination="false"
-            bordered>
-            <!-- 服务门店 -->
-            <span slot="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span>
-          </a-table>
-        </a-tab-pane>
-      </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>
-      </div>
-    </a-modal>
-    <!-- 延期 -->
-    <delay-modal :openModal="setDelay" :serverData="serverData" @close="closeSetDelay" />
-    <!-- 批量延期 -->
-    <allDelay-modal :openAllDelayModal="isOpenModal" :selectedRows="selectedRowsData" @close="closeOpenModal"></allDelay-modal>
-  </div>
+						</span>
+					</a-table>
+				</a-tab-pane>
+				<a-tab-pane key="2" tab="使用记录">
+					<!-- 使用记录列表 -->
+					<a-table ref="recordTable" size="middle" :rowKey="record => record.id" :columns="recordColumns" :dataSource="recordData"
+					 :pagination="false" bordered>
+						<!-- 服务门店 -->
+						<span slot="usedStoreName" slot-scope="text, record">{{ record.usedStoreName || '--' }}</span>
+					</a-table>
+				</a-tab-pane>
+			</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>
+			</div>
+		</a-modal>
+		<!-- 延期 -->
+		<delay-modal :openModal="setDelay" :serverData="serverData" @close="closeSetDelay" />
+		<!-- 批量延期 -->
+		<allDelay-modal :openAllDelayModal="isOpenModal" :selectedRows="selectedRowsData" @resetSelected="resetSelected"
+		 @close="closeOpenModal"></allDelay-modal>
+	</div>
 </template>
 
 <script>
-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,
-    allDelayModal
-  },
-  props: {
-    openModal: {
-      //  弹框是否展示
-      type: Boolean,
-      default: false
-    },
-    setmealId: {
-      //  套餐id
-      type: String,
-      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'
-      }
-      ],
-      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,
-      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: {
-    // 套餐详情
-    getSetmealInfo () {
-      this.loading = true
-      //  套餐详情
-      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 ==
+	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,
+			allDelayModal
+		},
+		props: {
+			openModal: {
+				//  弹框是否展示
+				type: Boolean,
+				default: false
+			},
+			setmealId: {
+				//  套餐id
+				type: String,
+				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'
+					}
+				],
+				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,
+				isOpenModal: false, // 批量延期弹窗初始状态
+				selectedRowsData: [], // 批量选择所有套餐数据集合
+				selectedRowsDataList: []
+			}
+		},
+		computed: {
+			rowSelection() {
+				return {
+					selectedRowKeys: this.selectedRowKeys, // 指定选中项的 key 数组
+					onChange: (selectedRowKeys, selectedRows) => {
+						this.selectedRowsDataList = selectedRows
+					},
+					getCheckboxProps: record => ({
+						props: {
+							disabled: (record.remainTimes == 0 && record.expiryTimes == 0) || (record.expiryDate.substr(0, 10) ==
+								'2099-01-01') || (record.cycleFlag == 1)
+						}
+					})
+				}
+			},
+			// 已选择的复选框
+			selectedRowKeys() {
+				const arr = []
+				this.selectedRowsDataList.map(item => {
+					arr.push(item.id)
+				})
+				return arr
+			},
+		},
+		methods: {
+			// 套餐详情
+			getSetmealInfo() {
+				this.loading = true
+				//  套餐详情
+				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)
-            })
-            this.setMealData = res.data.customerBundleItemList
-          } else {
-            this.setMealData = []
-          }
-        } else {
-          this.detailsData = null
-          this.setMealData = []
-        }
-        this.loading = false
-      })
-      //  使用记录
-      customerBundleUseHistory({
-        id: this.setmealId
-      }).then(res => {
-        if (res.status == 200) {
-          if (res.data && res.data.length > 0) {
-            res.data.map((item, index) => {
-              item.no = index + 1
-            })
-            this.recordData = res.data
-          } else {
-            this.recordData = []
-          }
-        } else {
-          this.recordData = []
-        }
-      })
-    },
-    // 批量延期
-    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
-      this.$confirm({
-        title: '取消购买',
-        content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
-        onOk: () => {
-          orderCancel({
-            id: _this.setmealId
-          }).then(res => {
-            if (res.status == 200) {
-              _this.$emit('refrresh')
-            }
-          })
-        },
-        onCancel () {}
-      })
-    },
-    //  延期
-    openSetDelay (row) {
-      this.serverData = row
-      this.setDelay = true
-    },
-    //  关闭延期
-    closeSetDelay () {
-      this.getSetmealInfo()
-      this.serverData = null
-      this.setDelay = false
-    }
-  },
-  watch: {
-    //  父页面传过来的弹框状态
-    openModal (newValue, oldValue) {
-      this.isShow = newValue
-    },
-    //  重定义的弹框状态
-    isShow (val) {
-      if (!val) {
-        this.$emit('close')
-        this.setMealData = []
-        this.recordData = []
-        this.detailsData = null
-      }
-    },
-    setmealId (newValue, oldValue) {
-      if (newValue && this.isShow) {
-        this.getSetmealInfo()
-      }
-    }
-  }
-}
+							})
+							this.setMealData = res.data.customerBundleItemList
+						} else {
+							this.setMealData = []
+						}
+					} else {
+						this.detailsData = null
+						this.setMealData = []
+					}
+					this.loading = false
+				})
+				//  使用记录
+				customerBundleUseHistory({
+					id: this.setmealId
+				}).then(res => {
+					if (res.status == 200) {
+						if (res.data && res.data.length > 0) {
+							res.data.map((item, index) => {
+								item.no = index + 1
+							})
+							this.recordData = res.data
+						} else {
+							this.recordData = []
+						}
+					} else {
+						this.recordData = []
+					}
+				})
+			},
+			// 批量延期
+			allDelay() {
+				if (this.selectedRowsDataList && this.selectedRowsDataList.length) {
+					this.isOpenModal = true
+					this.selectedRowsData = this.selectedRowsDataList
+					console.log(this.selectedRowsData, '-----------选中数据')
+				} else {
+					this.$message.error('请先选择服务项目')
+				}
+			},
+			// 重置复选框选中项
+			resetSelected() {
+				this.selectedRowsDataList = []
+			},
+			// 关闭批量延期弹窗
+			closeOpenModal() {
+				this.getSetmealInfo()
+				this.selectedRowsData = []
+				this.isOpenModal = false
+			},
+			//  取消购买
+			cancelBuy() {
+				const _this = this
+				this.$confirm({
+					title: '取消购买',
+					content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
+					onOk: () => {
+						orderCancel({
+							id: _this.setmealId
+						}).then(res => {
+							if (res.status == 200) {
+								_this.$emit('refrresh')
+							}
+						})
+					},
+					onCancel() {}
+				})
+			},
+			//  延期
+			openSetDelay(row) {
+				this.serverData = row
+				this.setDelay = true
+			},
+			//  关闭延期
+			closeSetDelay() {
+				this.getSetmealInfo()
+				this.serverData = null
+				this.setDelay = false
+			}
+		},
+		watch: {
+			//  父页面传过来的弹框状态
+			openModal(newValue, oldValue) {
+				this.isShow = newValue
+			},
+			//  重定义的弹框状态
+			isShow(val) {
+				if (!val) {
+					this.$emit('close')
+					this.setMealData = []
+					this.recordData = []
+					this.detailsData = null
+					this.selectedRowsDataList = []
+				}
+			},
+			setmealId(newValue, oldValue) {
+				if (newValue && this.isShow) {
+					this.getSetmealInfo()
+				}
+			}
+		}
+	}
 </script>
 
 <style lang="less">

+ 134 - 157
src/views/SetmealSales/allDelayModal.vue

@@ -1,165 +1,142 @@
 <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>
+	<a-modal class="delayModal" title="套餐服务延期" width="60%" centered :footer="null" :maskClosable="false" :destroyOnClose="true"
+	 @cancel="cancel" 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, '--------服务名称')
-      }
-    }
-  }
-}
+	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) {
+						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')
+						})
+						this.$confirm({
+							title: '确定延期',
+							content: '所选服务将全部延期,返还次数为过期次数,确定延期吗?',
+							onOk: () => {
+								allCustomerBundleItemDelay(listData).then(res => {
+									if (res.status == 200) {
+										this.$emit('resetSelected')
+										this.cancel()
+									}
+								})
+							},
+							onCancel() {}
+						})
+					} else {
+						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
+				}
+			}
+		}
+	}
 </script>
 
 <style lang="less">
-  .delayModal{
-    .btn-cont {
-    	text-align: center;
-    	margin: 50px 0 10px;
-      button{
-        margin: 0 20px;
-      }
-    }
-  }
+	.delayModal {
+		.btn-cont {
+			text-align: center;
+			margin: 50px 0 10px;
+
+			button {
+				margin: 0 20px;
+			}
+		}
+	}
 </style>