zhangdan 4 years ago
parent
commit
054c96f103
2 changed files with 723 additions and 723 deletions
  1. 339 326
      src/views/Service/PurchasedServiceDetail.vue
  2. 384 397
      src/views/Service/PurchasedServiceList.vue

+ 339 - 326
src/views/Service/PurchasedServiceDetail.vue

@@ -1,341 +1,354 @@
 <template>
 <template>
-  <a-card >
-    <a-card class="detail-card" :bordered="false" title="基本信息">
-      <detail-list >
-        <detail-list-item term="订单编号">{{ orderBundle.number ? orderBundle.number : '--' }}</detail-list-item>
-        <detail-list-item term="订单来源">{{ dataSourceName ? dataSourceName : '--' }}</detail-list-item>
-        <detail-list-item term="下单时间">{{ orderBundle.orderDate ? orderBundle.orderDate : '--' }}</detail-list-item>
-        <detail-list-item term="订单状态">{{ palyStatus ? palyStatus :'--' }}</detail-list-item>
-        <detail-list-item term="客户信息">{{ custInfo ? custInfo : '--' }}</detail-list-item>
-        <detail-list-item term="应付金额">{{ orderBundle.totalAmount ? orderBundle.totalAmount :'--' }}</detail-list-item>
-        <detail-list-item term="支付时间" v-if="isPay">{{ payDate ? payDate : '--' }}</detail-list-item>
-        <detail-list-item term="支付金额" v-if="isPay">¥{{ orderBundle.payedAmount ? orderBundle.payedAmount : '--' }}</detail-list-item>
-      </detail-list>
-    </a-card>
-	<a-card class="detail-card" :bordered="false" title="服务内容" >
-      <a-table :columns="columns" rowKey="id" :dataSource="customerBundleItemList" bordered :pagination="false">
-        <span slot="no" slot-scope="text, record, index">
-          <template>
-            {{ index + 1 }}
-          </template>
-        </span>
-        <span slot="hexiao" slot-scope="text, record, index">
-          <template>
-			<a-button  type="primary" v-if="record.isDelay" @click="yanQi(record)">延期</a-button>
-			<span v-else>--</span>
-          </template>
-        </span>
-      </a-table>
-    </a-card>
-	<!-- 使用记录 -->
-    <a-card class="detail-card" :bordered="false" title="使用记录">
-      <a-table :columns="usedColumns" rowKey="id" :dataSource="verificationList" bordered v-if="verificationList && verificationList.length > 0" :pagination="false">
-        <span slot="no" slot-scope="text, record, index">
-          <template>
-            {{ index + 1 }}
-          </template>
-        </span>
-      </a-table>
-      <div class="detail-card-info" v-else>
-        此订单没有使用记录
-      </div>
-    </a-card>
-	<!-- 取消购买 -->
-	<a-card class="detail-card" :bordered="false" style="text-align: center;" >
-		<a-button :disabled="verificationList && verificationList.length > 0" type="primary" @click="canselBuy">取消购买</a-button>
+	<a-card>
+		<a-card class="detail-card" :bordered="false" title="基本信息">
+			<detail-list>
+				<detail-list-item term="订单编号">{{ orderBundle.number ? orderBundle.number : '--' }}</detail-list-item>
+				<detail-list-item term="订单来源">{{ dataSourceName ? dataSourceName : '--' }}</detail-list-item>
+				<detail-list-item term="下单时间">{{ orderBundle.orderDate ? orderBundle.orderDate : '--' }}</detail-list-item>
+				<detail-list-item term="订单状态">{{ palyStatus ? palyStatus :'--' }}</detail-list-item>
+				<detail-list-item term="客户信息">{{ custInfo ? custInfo : '--' }}</detail-list-item>
+				<detail-list-item term="应付金额">{{ orderBundle.totalAmount ? orderBundle.totalAmount :'--' }}</detail-list-item>
+				<detail-list-item term="支付时间" v-if="isPay">{{ payDate ? payDate : '--' }}</detail-list-item>
+				<detail-list-item term="支付金额" v-if="isPay">¥{{ orderBundle.payedAmount ? orderBundle.payedAmount : '--' }}</detail-list-item>
+			</detail-list>
+		</a-card>
+		<a-card class="detail-card" :bordered="false" title="服务内容">
+			<a-table :columns="columns" rowKey="id" :dataSource="customerBundleItemList" bordered :pagination="false">
+				<span slot="no" slot-scope="text, record, index">
+					<template>
+						{{ index + 1 }}
+					</template>
+				</span>
+				<span slot="hexiao" slot-scope="text, record, index">
+					<template>
+						<a-button type="primary" v-if="record.isDelay" @click="yanQi(record)">延期</a-button>
+						<span v-else>--</span>
+					</template>
+				</span>
+			</a-table>
+		</a-card>
+		<!-- 使用记录 -->
+		<a-card class="detail-card" :bordered="false" title="使用记录">
+			<a-table :columns="usedColumns" rowKey="id" :dataSource="verificationList" bordered v-if="verificationList && verificationList.length > 0"
+			 :pagination="false">
+				<span slot="no" slot-scope="text, record, index">
+					<template>
+						{{ index + 1 }}
+					</template>
+				</span>
+			</a-table>
+			<div class="detail-card-info" v-else>
+				此订单没有使用记录
+			</div>
+		</a-card>
+		<!-- 取消购买 -->
+		<a-card class="detail-card" :bordered="false" style="text-align: center;">
+			<a-button :disabled="verificationList && verificationList.length > 0" type="primary" @click="canselBuy">取消购买</a-button>
+		</a-card>
+		<!-- 延期弹窗 -->
+		<yanQi-modal :yanQiData="yanQiData" :yanqiModal="yanqiModal" @close="canselYq"></yanQi-modal>
 	</a-card>
 	</a-card>
-	<!-- 延期弹窗 -->
-	<yanQi-modal :yanQiData="yanQiData" :yanqiModal="yanqiModal" @close="canselYq"></yanQi-modal>
-  </a-card>
 </template>
 </template>
 
 
 <script>
 <script>
-import { customerBundleDetail, verificationHexiao,orderCancel } from '@/api/customerBundle'
-import { getLookUpDataBy } from '@/api/data'
-import { PageView } from '@/layouts'
-import { STable } from '@/components'
-import yanQiModal from './yanQiModal.vue'
-import DetailList from '@/components/tools/DetailList'
-import _ from 'lodash'
-import moment from 'moment';
-const DetailListItem = DetailList.Item
-export default {
-  name: 'OrderAdd',
-  components: {
-    PageView,
-    DetailList,
-    DetailListItem,
-    STable,
-	yanQiModal
-  },
-  computed: {
-    palyStatus () {
-      const _playStatus = _.find(this.palyStatusList, ['code', this.orderBundle.orderFlag])
-      if (_playStatus) {
-        if (_playStatus.code === 'CAEL' || _playStatus.code === 'SYCA') {
-          return '已取消'
-        }
-        return _playStatus.dispName
-      }
-      return ''
-    },
-    palyStatusStr () {
-      const _playStatus = _.find(this.palyStatusList, ['code', this.orderBundle.orderFlag])
-      if (_playStatus) {
-        if (_playStatus.code === 'SYCA') {
-          return '超时未支付自动取消'
-        }
-        return _playStatus.dispName
-      }
-      return ''
-    },
-    isPay () {
-      return this.orderBundle.orderFlag === 'PAED'
-    },
-    isCancel () {
-      return this.orderBundle.orderFlag === 'CAEL' || this.orderBundle.orderFlag === 'SYCA'
-    },
-    payDate () {
-      return _.get(this, 'paymentDetailList.payDate')
-    },
-    custInfo () {
-      let info = null
-      if (this.customer) {
-        info = this.customer.name
-        if (info) {
-          info = info + '-' + this.customer.mobile
-        } else {
-          info = this.customer.mobile
-        }
-      } else {
-        info = this.orderBundle.custMobile
-        if (this.orderBundle.vehicleNumber) {
-          info += '(' + this.orderBundle.vehicleNumber + ')'
-        }
-      }
-      return info
-    }
-
-  },
-  data () {
-    return {
-	form: this.$form.createForm(this),
-      loading: false,
-	  // showBackNum:true,
-      customerCoupon: {},
-      palyStatusList: [],
-	  yanqiModal:false,
-      hexiaoModal: false,
-	  buyModal:false,
-	  orderBundleId:"",
-	  yanQiData:null,
-      hxCustomerBundleItemId: '',
-	  dataSourceName: '',
-      customer: null,
-	  
-      orderBundle: {},
-      payDetail: {},
-      verificationList: [],
-
-      customerBundleItemList: [],
-      coupon: {},
-      columns: [
-        {
-          title: '序号',
-          scopedSlots: { customRender: 'no' },
-		  width: 60,
-		  align:'center'
-        },
-        {
-          title: '到期时间',
-          dataIndex: 'expiryDate',
-		  width: 100,
-		  align:'center',
-		  // customRender: function (text) {
-		  //   return (text || '永久有效')
-		  // }
-        },
-		{
-		  title: '购买数量',
-		  dataIndex: 'times',
-		  width: 100,
-		  align:'center'
+	import {
+		customerBundleDetail,
+		orderCancel
+	} from '@/api/customerBundle'
+	import {
+		getLookUpDataBy
+	} from '@/api/data'
+	import {
+		PageView
+	} from '@/layouts'
+	import {
+		STable
+	} from '@/components'
+	import yanQiModal from './yanQiModal.vue'
+	import DetailList from '@/components/tools/DetailList'
+	import _ from 'lodash'
+	import moment from 'moment';
+	const DetailListItem = DetailList.Item
+	export default {
+		name: 'OrderAdd',
+		components: {
+			PageView,
+			DetailList,
+			DetailListItem,
+			STable,
+			yanQiModal
 		},
 		},
-		{
-		  title: '剩余次数',
-		  dataIndex: 'remainTimes',
-		  width: 100,
-		  align:'center'
+		computed: {
+			palyStatus() {
+				const _playStatus = _.find(this.palyStatusList, ['code', this.orderBundle.orderFlag])
+				if (_playStatus) {
+					if (_playStatus.code === 'CAEL' || _playStatus.code === 'SYCA') {
+						return '已取消'
+					}
+					return _playStatus.dispName
+				}
+				return ''
+			},
+			palyStatusStr() {
+				const _playStatus = _.find(this.palyStatusList, ['code', this.orderBundle.orderFlag])
+				if (_playStatus) {
+					if (_playStatus.code === 'SYCA') {
+						return '超时未支付自动取消'
+					}
+					return _playStatus.dispName
+				}
+				return ''
+			},
+			isPay() {
+				return this.orderBundle.orderFlag === 'PAED'
+			},
+			isCancel() {
+				return this.orderBundle.orderFlag === 'CAEL' || this.orderBundle.orderFlag === 'SYCA'
+			},
+			payDate() {
+				return _.get(this, 'paymentDetailList.payDate')
+			},
+			custInfo() {
+				let info = null
+				if (this.customer) {
+					info = this.customer.name
+					if (info) {
+						info = info + '-' + this.customer.mobile
+					} else {
+						info = this.customer.mobile
+					}
+				} else {
+					info = this.orderBundle.custMobile
+					if (this.orderBundle.vehicleNumber) {
+						info += '(' + this.orderBundle.vehicleNumber + ')'
+					}
+				}
+				return info
+			}
+
 		},
 		},
-        {
-          title: '已用次数',
-          dataIndex: 'usedTimes',
-		  width: 100,
-		  align:'center'
-        },
-		{
-		  title: '过期次数',
-		  dataIndex: 'expiryTimes',
-		  width: 100,
-		  align:'center'
+		data() {
+			return {
+				form: this.$form.createForm(this),
+				loading: false,
+				// showBackNum:true,
+				customerCoupon: {},
+				palyStatusList: [],
+				yanqiModal: false,
+				hexiaoModal: false,
+				buyModal: false,
+				orderBundleId: "",
+				yanQiData: null,
+				hxCustomerBundleItemId: '',
+				dataSourceName: '',
+				customer: null,
+				orderBundle: {},
+				payDetail: {},
+				verificationList: [],
+				customerBundleItemList: [],
+				coupon: {},
+				columns: [
+					{
+						title: '服务名称',
+						dataIndex: 'itemName',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '到期时间',
+						dataIndex: '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: '核销操作',
+						width: 100,
+						align: 'center',
+						scopedSlots: {
+							customRender: 'hexiao'
+						}
+					}
+				],
+				usedColumns: [{
+						title: '序号',
+						scopedSlots: {
+							customRender: 'no'
+						},
+						width: 60,
+						align: 'center'
+					},
+					{
+						title: '服务名称',
+						dataIndex: 'bundItemName',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '使用时间',
+						dataIndex: 'usedTime',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '使用门店',
+						dataIndex: 'usedStoreName',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '核销单号',
+						dataIndex: '',
+						width: 200,
+						align: 'center'
+					},
+					{
+						title: '门店结算金额',
+						dataIndex: '',
+						width: 100,
+						align: 'center'
+					}
+				]
+
+			}
 		},
 		},
-		{
-		  title: '退款次数',
-		  dataIndex: 'refundTimes',
-		  width: 100,
-		  align:'center'
+		created() {
+			this.initPage()
 		},
 		},
-        {
-          title: '核销操作',
-          width: 100,
-		  align:'center',
-          scopedSlots: { customRender: 'hexiao' }
-        }
-      ],
-      usedColumns: [
-        {
-          title: '序号',
-          scopedSlots: { customRender: 'no' },
-		  width: 60,
-		  align:'center'
-        },
-        {
-          title: '服务名称',
-          dataIndex: 'bundItemName',
-		  width: 100,
-		  align:'center'
-        },
-        {
-          title: '使用时间',
-          dataIndex: 'usedTime',
-		  width: 100,
-		  align:'center'
-        },
-        {
-          title: '使用门店',
-          dataIndex: 'usedStoreName',
-		  width: 100,
-		  align:'center'
-        },
-		{
-		  title: '核销单号',
-		  dataIndex: '',
-		  width: 200,
-		  align:'center'
+		beforeRouteEnter(to, from, next) {
+			next(vm => {
+				console.log(vm.$route.params.id)
+				// vm.clear()
+				if (to.query.id) {
+					vm.initPage()
+				}
+			})
 		},
 		},
-		{
-		  title: '门店结算金额',
-		  dataIndex: '',
-		  width: 100,
-		  align:'center'
+		methods: {
+			moment,
+			// 不可选日期
+			disabledDate(current) {
+				return current && current < moment().subtract(1, "days");
+			},
+			initPage() {
+				const _this = this
+				getLookUpDataBy({
+					type: 'PAY_STATUS'
+				}).then(res => {
+					if (res.status === '200') {
+						_this.palyStatusList = res.data
+					}
+					return customerBundleDetail({
+						id: _this.$route.params.id
+					})
+				}).then(res => {
+					if (res.status + '' === '200') {
+						const _data = res.data
+						_this.orderBundleId = _data.orderBundleId
+						console.log(_data, _this.orderBundleId)
+						_this.customer = _data.customer
+						_this.dataSourceName = _data.dataSourceName
+						_this.orderBundle = _data.orderBundle
+						if (_data.paymentDetailList && _data.paymentDetailList.length) {
+							_this.paymentDetailList = _data.paymentDetailList[0]
+						}
+						_this.coupon = _data.coupon
+						if (_data.customerCoupon) {
+							_this.customerCoupon = _data.customerCoupon
+						}
+						_this.customerBundleItemList = _data.customerBundleItemList
+						_this.customerBundleItemList.map((item, index) => {
+							// item.no = index + 1
+							item.isDelay = item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false
+						})
+						_this.verificationList = _data.verificationList
+					}
+				})
+			},
+			// 延期
+			yanQi(row) {
+				this.yanQiData = row
+				this.yanqiModal = true
+				console.log(this.yanQiData, '-----------延期')
+			},
+			// 关闭延期弹窗
+			canselYq() {
+				this.initPage()
+				this.yanQiData = null
+				this.yanqiModal = false
+			},
+			// 取消购买
+			canselBuy() {
+				this.$confirm({
+					title: '取消购买',
+					content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
+					onOk: () => {
+						orderCancel({
+							id: this.$route.params.id
+						}).then(res => {
+							if (res.status == 200) {
+								this.$message.info(res.message)
+								// this.isShow = false
+							}
+						})
+					},
+					onCancel() {}
+				})
+			},
+			// quxiao
+			canselGM() {
+				this.buyModal = false
+				this.hxCustomerBundleItemId = ''
+			},
 		}
 		}
-      ]
-
-    }
-  },
-  created () {
-    this.initPage()
-  },
-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-		console.log(vm.$route.params.id)
-      // vm.clear()
-      if (to.query.id) {
-        vm.initPage()
-      }
-    })
-  },
-  methods: {
-	  moment,
-	  // 不可选日期
-	 disabledDate(current){
-	 	return current && current < moment().subtract(1, "days");
-	 },
-    initPage () {
-      const _this = this
-      getLookUpDataBy({
-        type: 'PAY_STATUS'
-      }).then(res => {
-        if (res.status === '200') {
-          _this.palyStatusList = res.data
-        }
-        return customerBundleDetail({
-          id: _this.$route.params.id
-        })
-      }).then(res => {
-        if (res.status + '' === '200') {
-          const _data = res.data
-		  _this.orderBundleId=_data.orderBundleId
-          console.log(_data,_this.orderBundleId)
-          _this.customer = _data.customer
-		  _this.dataSourceName = _data.dataSourceName
-          _this.orderBundle = _data.orderBundle
-          if (_data.paymentDetailList && _data.paymentDetailList.length) {
-            _this.paymentDetailList = _data.paymentDetailList[0]
-          }
-          _this.coupon = _data.coupon
-          if (_data.customerCoupon) {
-            _this.customerCoupon = _data.customerCoupon
-          }
-          _this.customerBundleItemList = _data.customerBundleItemList
-		  _this.customerBundleItemList.map((item, index) => {
-		    // item.no = index + 1
-		    item.isDelay =item.expiryDate ? item.expiryDate.substr(0, 10) != '2099-01-01' : false
-		  })
-          _this.verificationList = _data.verificationList
-        }
-      })
-    },
-    // 延期
-    yanQi(row) {
-		this.yanQiData=row
-		this.yanqiModal = true
-		console.log(this.yanQiData,'-----------延期')
-    },
-	// 关闭延期弹窗
-	canselYq(){
-		this.initPage()
-		this.yanQiData=null
-		this.yanqiModal = false
-	},
-	// 取消购买
-	canselBuy(){
-		this.$confirm({
-		  title: '取消购买',
-		  content: '取消购买后,套餐内所有服务的剩余次数变为0,用户无法再使用套餐。确认取消购买吗?',
-		  onOk: () => {
-		    orderCancel({ id: this.$route.params.id }).then(res => {
-		      if (res.status == 200) {
-				this.$message.info(res.message)
-		        // this.isShow = false
-		      }
-		    })
-		  },
-		  onCancel () {}
-		})
-	},
-	// quxiao
-	canselGM(){
-		this.buyModal=false
-		this.hxCustomerBundleItemId=''
-	},
-  }
-}
+	}
 </script>
 </script>
 
 
 <style scoped>
 <style scoped>
-  .detail-card + .detail-card {
-    margin-top: 10px;
-  }
-  .detail-card-info {
-    text-align: center;
-    font-size: 1.1em;
-  }
-  .button-row{
-    padding-top: 20px;
-    text-align: center;
-  }
-  .button-row .ant-btn{
-    margin-left: 20px;
-  }
+	.detail-card+.detail-card {
+		margin-top: 10px;
+	}
+
+	.detail-card-info {
+		text-align: center;
+		font-size: 1.1em;
+	}
+
+	.button-row {
+		padding-top: 20px;
+		text-align: center;
+	}
+
+	.button-row .ant-btn {
+		margin-left: 20px;
+	}
 </style>
 </style>

+ 384 - 397
src/views/Service/PurchasedServiceList.vue

@@ -1,409 +1,396 @@
 <template>
 <template>
-  <a-card :bordered="false">
-	  <v-select
-	    v-show="false"
-	    ref="orderFlag"
-	    code="PAY_STATUS"
-	    placeholder="请选择订单状态"
-	    allowClear></v-select>
-    <div class="table-page-search-wrapper">
-      <a-form layout="inline" :form="form" @keyup.enter.native="$refs.table.refresh(true)">
-        <a-row :gutter="48">
-          <a-col :lg="6" :sm="12">
-            <a-form-item label="订单编号:" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-input class="full-width" v-model.trim="queryParam.number" placeholder="订单编号" allowClear />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :sm="12">
-			<a-form-item label="下单时间:" :label-col="{ span: 7 }" :wrapper-col="{ span: 17}">
-			  <a-range-picker
-			    style="width:100%"
-			    id="releaseRecordList-queryOrderDate"
-			    :disabledDate="disabledDate"
-			    v-model="queryOrderDate"
-			    :format="dateFormat"
-			    :placeholder="['开始时间', '结束时间']" />
-			</a-form-item>
-          </a-col>
-          <a-col :lg="6" :sm="12">
-            <a-form-item label="结算状态:" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <v-select code="SETTLE_STATUS_ALL" ref="salesChannelSettleStatus" v-model="queryParam.salesChannelSettleStatus" allowClear></v-select>
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :sm="12">
-            <a-form-item label="销售合作商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-				<a-select
-				  id="purchasedSetmeal-dataSourceNo"
-				  allowClear
-				  option-filter-prop="children"
-				  placeholder="请选择销售合作商"
-				  v-model="queryParam.dataSourceNo">
-				  <a-select-option v-for="(item,index) in dataSourceNoList" :key="index" :value="item.salesChannelNo">{{ item.salesChannelName }}</a-select-option>
-				</a-select>
-            </a-form-item>
-          </a-col>
-        </a-row>
-
-        <a-row :gutter="48">
-          <a-col :lg="6" :sm="12">
-            <a-form-item label="客户信息" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-input class="full-width" v-model.trim="queryParam.custMobile" :maxLength="11" placeholder="客户信息" allowClear />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :sm="12">
-            <a-form-item label="服务名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
-              <a-input class="full-width" v-model.trim="queryParam.bundleName" placeholder="服务名称" allowClear />
-            </a-form-item>
-          </a-col>
-          <a-col :lg="6" :sm="12">
-            <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
-            <a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
-			<a-button style="margin-left: 8px" class="export-btn" @click="handleExport">导出</a-button>
-          </a-col>
-        </a-row>
-      </a-form>
-    </div>
-	<!-- 合计 -->
-	<a-alert type="info" showIcon style="margin-bottom:15px">
-	  <div class="ftext" slot="message">共<span>{{ orderTotal || 0 }}</span>单,收款金额<span>¥{{ totalAmounts || 0 }}</span>元</div>
-	</a-alert>
-    <div class="card-container">
-      <s-table ref="table" size="default" rowKey="id" bordered :columns="columns" :data="loadData">
-		  <span slot="orderFlag" slot-scope="text, record">{{ $refs.orderFlag.getNameByCode(record.orderFlag) }}</span>
-		  <!-- 结算状态 -->
-		  <span slot="salesChannelSettleStatus" slot-scope="text, record">{{ $refs.salesChannelSettleStatus.getNameByCode(record.salesChannelSettleStatus) }}</span>
-		  <!-- 操作 -->
-        <span slot="action" slot-scope="text, record">
-            <a-button type="primary"  style="margin: 5px;" @click="handleDetail(record)">详情</a-button>
-            <!-- <span v-if="!$hasPermissions('CustomerBundleDetail_1')">--</span> -->
-            </a-button>
-        </span>
-        <template slot="userInfo" slot-scope="text, record">
-          <p>{{ text }}<br>{{ record.vehicleNumber ? record.vehicleNumber : '--' }}</p>
-        </template>
-      </s-table>
-    </div>
-  </a-card>
+	<a-card :bordered="false">
+		<v-select v-show="false" ref="orderFlag" code="PAY_STATUS" placeholder="请选择订单状态" allowClear></v-select>
+		<div class="table-page-search-wrapper">
+			<a-form layout="inline" :form="form" @keyup.enter.native="$refs.table.refresh(true)">
+				<a-row :gutter="48">
+					<a-col :lg="6" :sm="12">
+						<a-form-item label="订单编号:" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+							<a-input class="full-width" v-model.trim="queryParam.number" placeholder="订单编号" allowClear />
+						</a-form-item>
+					</a-col>
+					<a-col :lg="6" :sm="12">
+						<a-form-item label="下单时间:" :label-col="{ span: 7 }" :wrapper-col="{ span: 17}">
+							<a-range-picker style="width:100%" id="releaseRecordList-queryOrderDate" :disabledDate="disabledDate" v-model="queryOrderDate"
+							 :format="dateFormat" :placeholder="['开始时间', '结束时间']" />
+						</a-form-item>
+					</a-col>
+					<a-col :lg="6" :sm="12">
+						<a-form-item label="结算状态:" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+							<v-select code="SETTLE_STATUS_ALL" ref="salesChannelSettleStatus" v-model="queryParam.salesChannelSettleStatus"
+							 allowClear></v-select>
+						</a-form-item>
+					</a-col>
+					<a-col :lg="6" :sm="12">
+						<a-form-item label="销售合作商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+							<a-select id="purchasedSetmeal-dataSourceNo" allowClear option-filter-prop="children" placeholder="请选择销售合作商"
+							 v-model="queryParam.dataSourceNo">
+								<a-select-option v-for="(item,index) in dataSourceNoList" :key="index" :value="item.salesChannelNo">{{ item.salesChannelName }}</a-select-option>
+							</a-select>
+						</a-form-item>
+					</a-col>
+				</a-row>
+				<a-row :gutter="48">
+					<a-col :lg="6" :sm="12">
+						<a-form-item label="客户信息" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+							<a-input class="full-width" v-model.trim="queryParam.custMobile" :maxLength="11" placeholder="客户信息" allowClear />
+						</a-form-item>
+					</a-col>
+					<a-col :lg="6" :sm="12">
+						<a-form-item label="服务名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
+							<a-input class="full-width" v-model.trim="queryParam.bundleName" placeholder="服务名称" allowClear />
+						</a-form-item>
+					</a-col>
+					<a-col :lg="6" :sm="12">
+						<a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
+						<a-button style="margin-left: 8px" @click="resetSearchForm">重置</a-button>
+						<a-button style="margin-left: 8px" class="export-btn" @click="handleExport">导出</a-button>
+					</a-col>
+				</a-row>
+			</a-form>
+		</div>
+		<!-- 合计 -->
+		<a-alert type="info" showIcon style="margin-bottom:15px">
+			<div class="ftext" slot="message">共<span>{{ orderTotal || 0 }}</span>单,收款金额<span>¥{{ totalAmounts || 0 }}</span>元</div>
+		</a-alert>
+		<div class="card-container">
+			<s-table ref="table" size="default" rowKey="id" bordered :columns="columns" :data="loadData">
+				<span slot="orderFlag" slot-scope="text, record">{{ $refs.orderFlag.getNameByCode(record.orderFlag) }}</span>
+				<!-- 结算状态 -->
+				<span slot="salesChannelSettleStatus" slot-scope="text, record">{{ $refs.salesChannelSettleStatus.getNameByCode(record.salesChannelSettleStatus) }}</span>
+				<!-- 操作 -->
+				<span slot="action" slot-scope="text, record">
+					<a-button type="primary" style="margin: 5px;" @click="handleDetail(record)">详情</a-button>
+					</a-button>
+				</span>
+				<template slot="userInfo" slot-scope="text, record">
+					<p>{{ text }}<br>{{ record.vehicleNumber ? record.vehicleNumber : '--' }}</p>
+				</template>
+			</s-table>
+		</div>
+	</a-card>
 </template>
 </template>
 <script>
 <script>
-import moment from 'moment'
-import getDate from '@/libs/getDate.js'
-import { completeDate } from '@/libs/tools.js'
-import {
-  STable,
-  VSelect
-} from '@/components'
-import { salesChannelList } from '@/api/FinancialManagement'
-import {listCustomerBundle,queryBankPayStatus,countListBundle,exportBundle} from '@/api/customerBundle'
-// import salesSearch from '@/components/salesQuery/salesSearch'
-export default {
-  name: 'OrderList',
-  components: {
-    VSelect,
-    STable
-  },
-  data () {
-    return {
-      loadData: parameter => {
-        const searchData = Object.assign(parameter, this.queryParam,{freeChoiceFlag:1})
-        console.log(this.queryOrderDate, 'this.queryOrderDate')
-        if (this.queryOrderDate && this.queryOrderDate.length) {
-          searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
-          searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
-        } else {
-          searchData.beginDate = ''
-          searchData.endDate = ''
-        }
-        return listCustomerBundle(searchData).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
-        })
-      },
-      form: this.$form.createForm(this, {
-        name: 'CustomerBundleList'
-      }),
-      // 将默认时间日期回显在时间选择框中
-      queryOrderDate: [
-        moment(getDate.getRecentday().starttime, this.dateFormat),
-        moment(getDate.getRecentday().endtime, this.dateFormat)
-      ],
-      dateFormat: 'YYYY-MM-DD',
-      queryParam: {
-		number:'', // 订单编号
-        bundleName: '', // 服务名称
-        beginDate: null,
-        endDate: null,
-        custMobile: '', // 用户信息
-        bundleName: '', // 套餐名称
-        dataSourceNo: undefined, // 合作商
-		salesChannelSettleStatus:"" // 结算状态
-      },
-      dataSourceNoList: [],
-	  orderTotal:'', // 订单总数
-	  totalAmounts:'',
-      columns: [{
-        title: '序号',
-        dataIndex: 'no',
-        width: 60,
-        align: 'center'
-      },
-      {
-        title: '订单编号',
-        dataIndex: 'number',
-        width: 150,
-        align: 'center'
-      },
-      {
-        title: '销售合作商',
-        dataIndex: 'salesChannelName',
-        width: 150,
-        align: 'center',
-        customRender: function (text) {
-          return (text || '--')
-        }
-      },
-      {
-        title: '下单时间',
-        dataIndex: 'orderDate',
-        width: 150,
-        align: 'center'
-      },
-      {
-        title: '客户信息',
-        dataIndex: 'custMobile',
-        width: 150,
-        align: 'center',
-        scopedSlots: {
-          customRender: 'userInfo'
-        }
-      },
-      {
-        title: '服务名称',
-        dataIndex: 'bundleName',
-        align: 'center',
-        width: 100,
-      	customRender: function (text) {
-      	  return (text || '--')
-      	}
-      },
-	  {
-	    title: '购买数量',
-	    dataIndex: 'cnt',
-	    align: 'center',
-	    width: 100,
-		customRender: function (text) {
-		  return (text || '--')
-		}
-	  },
-      {
-        title: '收款金额',
-        dataIndex: 'totalAmount',
-        width: 100,
-        align: 'center'
-      },
-      {
-        title: '订单状态',
-        dataIndex: 'orderFlag',
-        width: 100,
-        align: 'center',
-       scopedSlots: {
-         customRender: 'orderFlag'
-       }
-      },
-	  {
-	    title: '结算状态',
-	    dataIndex: '',
-	    width: 100,
-	    align: 'center',
-		scopedSlots: {
-		  customRender: 'salesChannelSettleStatus'
+	import moment from 'moment'
+	import getDate from '@/libs/getDate.js'
+	import {
+		completeDate
+	} from '@/libs/tools.js'
+	import {
+		STable,
+		VSelect
+	} from '@/components'
+	import {
+		salesChannelList
+	} from '@/api/FinancialManagement'
+	import {
+		listCustomerBundle,
+		queryBankPayStatus,
+		countListBundle,
+		exportBundle
+	} from '@/api/customerBundle'
+	export default {
+		name: 'OrderList',
+		components: {
+			VSelect,
+			STable
+		},
+		data() {
+			return {
+				loadData: parameter => {
+					const searchData = Object.assign(parameter, this.queryParam, {
+						freeChoiceFlag: 1
+					})
+					console.log(this.queryOrderDate, 'this.queryOrderDate')
+					if (this.queryOrderDate && this.queryOrderDate.length) {
+						searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
+						searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
+					} else {
+						searchData.beginDate = ''
+						searchData.endDate = ''
+					}
+					return listCustomerBundle(searchData).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
+					})
+				},
+				form: this.$form.createForm(this, {
+					name: 'CustomerBundleList'
+				}),
+				// 将默认时间日期回显在时间选择框中
+				queryOrderDate: [
+					moment(getDate.getRecentday().starttime, this.dateFormat),
+					moment(getDate.getRecentday().endtime, this.dateFormat)
+				],
+				dateFormat: 'YYYY-MM-DD',
+				queryParam: {
+					number: '', // 订单编号
+					bundleName: '', // 服务名称
+					beginDate: null,
+					endDate: null,
+					custMobile: '', // 用户信息
+					bundleName: '', // 套餐名称
+					dataSourceNo: undefined, // 合作商
+					salesChannelSettleStatus: "" // 结算状态
+				},
+				dataSourceNoList: [],
+				orderTotal: '', // 订单总数
+				totalAmounts: '',
+				columns: [{
+						title: '序号',
+						dataIndex: 'no',
+						width: 60,
+						align: 'center'
+					},
+					{
+						title: '订单编号',
+						dataIndex: 'number',
+						width: 150,
+						align: 'center'
+					},
+					{
+						title: '销售合作商',
+						dataIndex: 'salesChannelName',
+						width: 150,
+						align: 'center',
+						customRender: function(text) {
+							return (text || '--')
+						}
+					},
+					{
+						title: '下单时间',
+						dataIndex: 'orderDate',
+						width: 150,
+						align: 'center'
+					},
+					{
+						title: '客户信息',
+						dataIndex: 'custMobile',
+						width: 150,
+						align: 'center',
+						scopedSlots: {
+							customRender: 'userInfo'
+						}
+					},
+					{
+						title: '服务名称',
+						dataIndex: 'bundleName',
+						align: 'center',
+						width: 100,
+						customRender: function(text) {
+							return (text || '--')
+						}
+					},
+					{
+						title: '购买数量',
+						dataIndex: 'cnt',
+						align: 'center',
+						width: 100,
+						customRender: function(text) {
+							return (text || '--')
+						}
+					},
+					{
+						title: '收款金额',
+						dataIndex: 'totalAmount',
+						width: 100,
+						align: 'center'
+					},
+					{
+						title: '订单状态',
+						dataIndex: 'orderFlag',
+						width: 100,
+						align: 'center',
+						scopedSlots: {
+							customRender: 'orderFlag'
+						}
+					},
+					{
+						title: '结算状态',
+						dataIndex: '',
+						width: 100,
+						align: 'center',
+						scopedSlots: {
+							customRender: 'salesChannelSettleStatus'
+						}
+					},
+					{
+						title: '操作',
+						width: 100,
+						align: 'center',
+						scopedSlots: {
+							customRender: 'action'
+						}
+					}
+				]
+			}
+		},
+		mounted() {
+			this.getSalesChannel()
+		},
+		methods: {
+			// 禁止不可选日期
+			disabledDate(current) {
+				return current && current > moment().endOf('day')
+			},
+			// 创建时间change
+			onChange(dates, dateStrings) {
+				if ((dates, dateStrings)) {
+					this.queryParam.beginDate = dateStrings[0]
+					this.queryParam.endDate = dateStrings[1]
+				}
+			},
+			//  获取渠道商下的合作商信息
+			getSalesChannel() {
+				salesChannelList().then(res => {
+					if (res.status == 200) {
+						this.dataSourceNoList = res.data
+					} else {
+						this.dataSourceNoList = []
+					}
+				})
+			},
+			handleChange(value) {
+				console.log(`selected ${value}`)
+			},
+			filterOption(input, option) {
+				return (
+					option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
+				)
+			},
+			// 合计
+			getTotal() {
+				const params = {
+					beginDate: this.queryParam.beginDate,
+					endDate: this.queryParam.endDate,
+					bundleName: this.queryParam.bundleName,
+					number: this.queryParam.number,
+					custMobile: this.queryParam.custMobile,
+					dataSourceNo: this.queryParam.dataSourceNo,
+					salesChannelSettleStatus: this.queryParam.salesChannelSettleStatus,
+					freeChoiceFlag: 1
+				}
+				params.beginDate == null ? params.beginDate = getDate.getRecentday().starttime : null
+				params.endDate == null ? params.endDate = getDate.getRecentday().endtime : null
+				countListBundle(params).then(res => {
+					if (res.status == 200) {
+						if (res.data) {
+							this.orderTotal = res.data.cnt || 0
+							this.totalAmounts = res.data.totalAmounts || 0
+						} else {
+							this.orderTotal = 0
+							this.totalAmounts = 0
+						}
+					} else {
+						this.orderTotal = 0
+						this.totalAmounts = 0
+					}
+				})
+			},
+			// 查看详情、
+			handleDetail(row) {
+				this.$router.push({
+					path: `/Service/PurchasedService/detail/${row.id}`
+				})
+			},
+			reloadRow(row) {
+				queryBankPayStatus({
+					tradeNo: row.tradeNo
+				}).then(res => {
+					console.log(res)
+					if (res.status == 200) {
+						this.$refs.table.refresh(true)
+					}
+				})
+			},
+			// 重置
+			resetSearchForm() {
+				this.queryParam.beginDate = getDate.getRecentday().starttime
+				this.queryParam.endDate = getDate.getRecentday().endtime
+				this.queryOrderDate = [
+					moment(getDate.getRecentday().starttime, this.dateFormat),
+					moment(getDate.getRecentday().endtime, this.dateFormat)
+				]
+				this.queryParam = {
+					dataSourceNo: '',
+					custMobile: '',
+					bundleName: '',
+					dataSourceNo: undefined,
+					salesChannelSettleStatus: '',
+					freeChoiceFlag: 1
+				}
+				this.$refs.table.refresh(true)
+			},
+			// 导出
+			handleExport() {
+				const params = {
+					beginDate: this.queryParam.beginDate == null ? getDate.getRecentday().starttime : this.queryParam.beginDate,
+					endDate: this.queryParam.endDate == null ? getDate.getRecentday().endtime : this.queryParam.endDate,
+					bundleName: this.queryParam.bundleName,
+					number: this.queryParam.number,
+					custMobile: this.queryParam.custMobile,
+					dataSourceNo: this.queryParam.dataSourceNo,
+					salesChannelSettleStatus: this.queryParam.salesChannelSettleStatus,
+					freeChoiceFlag: 1
+				}
+				console.log(params)
+				if (!params.beginDate && !params.endDate) {
+					this.$message.error('请先选择需要导出的下单时间区间再进行导出!')
+					return
+				}
+				// 判断两个时间段是否相差m个月
+				if (!completeDate(params.beginDate, params.endDate, 3)) {
+					this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
+					return
+				}
+				this.loading = true
+				exportBundle(params).then(res => {
+					this.loading = false
+					this.download(res)
+				})
+			},
+			download(data) {
+				if (!data) {
+					return
+				}
+				const url = window.URL.createObjectURL(new Blob([data]))
+				const link = document.createElement('a')
+				link.style.display = 'none'
+				link.href = url
+				const a = moment().format('YYYYMMDDhhmmss')
+				const fname = '已购服务记录-' + a
+				link.setAttribute('download', fname + '.xlsx')
+				document.body.appendChild(link)
+				link.click()
+			}
+		},
+		beforeRouteEnter(to, from, next) {
+			next(vm => {
+				vm.resetSearchForm()
+				vm.getSalesChannel()
+				vm.getTotal()
+			})
 		}
 		}
-	  },
-      {
-        title: '操作',
-        width: 100,
-        align: 'center',
-        scopedSlots: {
-          customRender: 'action'
-        }
-      }
-      ]
-    }
-  },
-  mounted () {
-    this.getSalesChannel()
-  },
-  methods: {
-    // 禁止不可选日期
-    disabledDate (current) {
-      return current && current > moment().endOf('day')
-    },
-	// 创建时间change
-	onChange (dates, dateStrings) {
-	  if ((dates, dateStrings)) {
-	    this.queryParam.beginDate = dateStrings[0]
-	    this.queryParam.endDate = dateStrings[1]
-	  }
-	},
-	//  获取渠道商下的合作商信息
-	getSalesChannel () {
-	  salesChannelList().then(res => {
-	    if (res.status == 200) {
-			console.log(res,'-=--销售商')
-	      this.dataSourceNoList = res.data
-	    } else {
-	      this.dataSourceNoList = []
-	    }
-	  })
-	},
-    handleChange (value) {
-      console.log(`selected ${value}`)
-    },
-    // handleBlur () {
-    //   console.log('blur')
-    // },
-    // handleFocus () {
-    //   console.log('focus')
-    // },
-    filterOption (input, option) {
-	  return (
-        option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
-	  )
-    },
-	// 合计
-	getTotal () {
-	  const params = {
-		beginDate: this.queryParam.beginDate,
-		endDate: this.queryParam.endDate,
-		bundleName: this.queryParam.bundleName,
-		number: this.queryParam.number,
-		custMobile: this.queryParam.custMobile,
-		dataSourceNo: this.queryParam.dataSourceNo,
-		salesChannelSettleStatus: this.queryParam.salesChannelSettleStatus,
-		freeChoiceFlag: 1
-	  }
-	  params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
-	  params.endDate == null ? params.endDate = getDate.getToday().endtime : null
-	  countListBundle(params).then(res => {
-		if (res.status == 200) {
-		  if (res.data) {
-			this.orderTotal = res.data.cnt || 0
-			this.totalAmounts = res.data.totalAmounts || 0
-		  } else {
-			this.orderTotal = 0
-			this.totalAmounts = 0
-		  }
-		} else {
-		  this.orderTotal = 0
-		  this.totalAmounts = 0
-		}
-	  })
-	},
-	// 查看详情、
-	handleDetail(row){
-		this.$router.push({
-		  path: `/Service/PurchasedService/detail/${row.id}`
-		})
-	},
-    reloadRow (row) {
-      queryBankPayStatus({
-        tradeNo: row.tradeNo
-      }).then(res => {
-        console.log(res)
-        if (res.status == 200) {
-          this.$refs.table.refresh(true)
-        }
-      })
-    },
-	// 重置
-    resetSearchForm () {
-      this.queryOrderDate = undefined
-	  this.queryOrderDate = [
-	    moment(getDate.getRecentday().starttime, this.dateFormat),
-	    moment(getDate.getRecentday().endtime, this.dateFormat)
-	  ]
-      this.queryParam = {
-        beginDate: '',
-        endDate: '',
-        dataSourceNo: '',
-        custMobile: '',
-        bundleName: '',
-        dataSourceNo: undefined,
-		salesChannelSettleStatus: ''
-      }
-      // this.$refs.salesSearch.setVal(undefined)
-      this.$refs.table.refresh(true)
-    },
-    // // 来源change
-    // salesChange (data) {
-    //   this.queryParam.dataSourceNo = data ? data.salesChannelNo : ''
-    // },
-	// 导出
-	handleExport () {
-	  const params = {
-	    beginDate: this.queryParam.beginDate == null ? getDate.getToday().starttime : this.queryParam.beginDate,
-	    endDate: this.queryParam.endDate == null ? getDate.getToday().endtime : this.queryParam.endDate,
-	    bundleName: this.queryParam.bundleName,
-	    number: this.queryParam.number,
-	    custMobile: this.queryParam.custMobile,
-	    dataSourceNo: this.queryParam.dataSourceNo,
-		salesChannelSettleStatus: this.queryParam.salesChannelSettleStatus,
-		freeChoiceFlag: 1
-	  }
-	  if (!params.beginDate && !params.endDate) {
-	    this.$message.error('请先选择需要导出的下单时间区间再进行导出!')
-	    return
-	  }
-	  // 判断两个时间段是否相差m个月
-	  if (!completeDate(params.beginDate, params.endDate, 3)) {
-	    this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
-	    return
-	  }
-	  this.loading = true
-	  exportBundle(params).then(res => {
-	    this.loading = false
-	    this.download(res)
-	  })
-	},
-	download (data) {
-	  if (!data) { return }
-	  const url = window.URL.createObjectURL(new Blob([data]))
-	  const link = document.createElement('a')
-	  link.style.display = 'none'
-	  link.href = url
-	  const a = moment().format('YYYYMMDDhhmmss')
-	  const fname = '已购服务记录-' + a
-	  link.setAttribute('download', fname + '.xlsx')
-	  document.body.appendChild(link)
-	  link.click()
 	}
 	}
-  },
-  beforeRouteEnter (to, from, next) {
-    next(vm => {
-      vm.resetSearchForm()
-      vm.getSalesChannel()
-	  vm.getTotal()
-    })
-  }
-}
 </script>
 </script>
 
 
 <style lang="less">
 <style lang="less">
-	.table-page-search-wrapper{
-		.export-btn{
-		  background-color: #ff9900;
-		  border-color: #ff9900;
-		  color: #fff;
-		  margin-left: 10px;
+	.table-page-search-wrapper {
+		.export-btn {
+			background-color: #ff9900;
+			border-color: #ff9900;
+			color: #fff;
+			margin-left: 10px;
 		}
 		}
-		.export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger), .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger){
-		  color: #fff;
-		  border-color: #ff9900;
+
+		.export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
+		.export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
+			color: #fff;
+			border-color: #ff9900;
 		}
 		}
 	}
 	}
-	
 </style>
 </style>