VerificationRecords.vue 10 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="orderCenter-searchForm">
  5. <a-form ref="searchForm" @keyup.enter.native="handleSearch">
  6. <a-row :gutter="48">
  7. <a-col :span="6">
  8. <a-form-item label="核销时间" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  9. <a-range-picker
  10. v-model="time"
  11. id="VerificationRecords-time"
  12. :format="dateFormat"
  13. :placeholder="['开始时间','结束时间']"
  14. :disabledDate="disabledDate"
  15. @change="onChange" />
  16. </a-form-item>
  17. </a-col>
  18. <a-col :span="6">
  19. <a-form-item label="核销门店" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  20. <a-select placeholder="请选择" allowClear v-model="searchForm.usedStoreId" id="VerificationRecords-usedStoreId">
  21. <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  22. </a-select>
  23. </a-form-item>
  24. </a-col>
  25. <a-col :span="6">
  26. <a-form-item label="客户信息" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  27. <a-input v-model.trim="searchForm.queryWord" placeholder="请输入手机号" allowClear id="VerificationRecords-queryWord"/>
  28. </a-form-item>
  29. </a-col>
  30. <a-col :span="6">
  31. <a-form-item label="套餐名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  32. <a-input v-model.trim="searchForm.bundName" placeholder="请输入" allowClear id="VerificationRecords-bundName"/>
  33. </a-form-item>
  34. </a-col>
  35. </a-row>
  36. <a-row :gutter="48">
  37. <a-col :span="6">
  38. <a-form-item label="关联订单号" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  39. <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear id="VerificationRecords-orderNo"/>
  40. </a-form-item>
  41. </a-col>
  42. <a-col :span="18">
  43. <a-button style="margin-right: 10px;" type="primary" @click="handleSearch" id="VerificationRecords-handleSearch">查询</a-button>
  44. <a-button type="" @click="handleRest" id="VerificationRecords-handleRest">重置</a-button>
  45. <a-button type="" :loading="loading" class="export-btn" @click="handleExport" id="VerificationRecords-handleExport">导出</a-button>
  46. </a-col>
  47. </a-row>
  48. </a-form>
  49. </div>
  50. <!-- 合计 -->
  51. <a-alert type="info" showIcon style="margin-bottom:15px">
  52. <div class="ftext" slot="message">总计:<span>{{ orderTotal || 0 }}</span>单,结算金额:<span>¥{{ paymentAmountTotal || 0 }}</span>元</div>
  53. </a-alert>
  54. <!-- 列表 -->
  55. <s-table
  56. ref="table"
  57. size="default"
  58. :rowKey="(record) => record.id"
  59. :columns="columns"
  60. :data="loadData"
  61. bordered>
  62. <!-- 订单编号 -->
  63. <template slot="num" slot-scope="text, record">
  64. <p>{{ record.bizNum }}</p>
  65. <p>{{ record.orderNo }}</p>
  66. </template>
  67. <!-- 客户信息 -->
  68. <template slot="userInfo" slot-scope="text, record">
  69. <!-- <p>{{ text }}<br>{{ record.vehicleNumber ? record.vehicleNumber : '--' }}</p> -->
  70. <div>
  71. <span v-if="record.custMobile">{{ record.custMobile }}</span>
  72. <span v-if="record.vehicleNum">{{ record.vehicleNum }}</span>
  73. </div>
  74. <span v-if="!record.custMobile && !record.vehicleNum">--</span>
  75. </template>
  76. </s-table>
  77. </a-card>
  78. </template>
  79. <script>
  80. import {
  81. STable,
  82. VSelect
  83. } from '@/components'
  84. import getDate from '@/libs/getDate.js'
  85. import { completeDate } from '@/libs/tools.js'
  86. import {
  87. getVerificationRecordsList, getVerificationRecordsListTotal, settlementRecordsExport, getStoreList
  88. } from '@/api/SetmealSales.js'
  89. import moment from 'moment'
  90. export default {
  91. name: 'OrderCenter',
  92. components: {
  93. STable,
  94. VSelect
  95. },
  96. data () {
  97. return {
  98. // 查询参数
  99. searchForm: {
  100. beginDate: null, // 创建的开始时间
  101. endDate: null, // 创建的结束时间
  102. usedStoreId: undefined, // 核销门店
  103. orderNo: '', // 单号
  104. queryWord: '', // 客户信息
  105. bundName: '' // 套餐名称
  106. },
  107. loading: false, // 导出loading
  108. orderTotal: '', // 合计开单数量
  109. paymentAmountTotal: '', // 合计实收金额
  110. storeOptionData: [], // 门店数据
  111. // 将默认当天时间日期回显在时间选择框中
  112. time: [
  113. moment(getDate.getToday().starttime, this.dateFormat),
  114. moment(getDate.getToday().endtime, this.dateFormat)
  115. ],
  116. dateFormat: 'YYYY-MM-DD',
  117. nowBeginDate: '',
  118. columns: [{
  119. title: '序号',
  120. dataIndex: 'no',
  121. width: 60,
  122. align: 'center'
  123. },
  124. {
  125. title: '核销时间',
  126. dataIndex: 'usedTime',
  127. width: 100,
  128. align: 'center'
  129. },
  130. {
  131. title: '核销单号/关联订单号',
  132. scopedSlots: { customRender: 'num' },
  133. width: 150,
  134. align: 'center'
  135. },
  136. {
  137. title: '核销服务名称',
  138. dataIndex: 'bundItemName',
  139. width: 150,
  140. align: 'center'
  141. },
  142. {
  143. title: '客户信息',
  144. scopedSlots: { customRender: 'userInfo' },
  145. width: 150,
  146. align: 'center'
  147. },
  148. {
  149. title: '套餐名称',
  150. dataIndex: 'bundName',
  151. width: 150,
  152. align: 'center'
  153. },
  154. {
  155. title: '结算金额(¥)',
  156. dataIndex: 'salesChannelSettleAmount',
  157. width: 100,
  158. align: 'center',
  159. customRender: function (text) {
  160. return (text || 0) + '元'
  161. }
  162. }
  163. ],
  164. // 加载数据方法 必须为 Promise 对象
  165. loadData: parameter => {
  166. const _this = this
  167. _this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
  168. _this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
  169. return getVerificationRecordsList(Object.assign(parameter, _this.searchForm)).then(res => {
  170. if (res.status == 200) {
  171. _this.orderTotal = res.data.count
  172. const no = (res.data.pageNo - 1) * res.data.pageSize
  173. for (let i = 0; i < res.data.list.length; i++) {
  174. const _item = res.data.list[i]
  175. _item.no = no + i + 1
  176. }
  177. return res.data
  178. }
  179. })
  180. }
  181. }
  182. },
  183. methods: {
  184. moment,
  185. // 不可选日期
  186. disabledDate (date, dateStrings) {
  187. return date && date.valueOf() > Date.now()
  188. },
  189. // 创建时间change
  190. onChange (dates, dateStrings) {
  191. if ((dates, dateStrings)) {
  192. this.searchForm.beginDate = dateStrings[0]
  193. this.searchForm.endDate = dateStrings[1]
  194. }
  195. },
  196. // 获取门店数据
  197. getStoreListData () {
  198. getStoreList({
  199. pageNo: 1,
  200. pageSize: 1000
  201. }).then(res => {
  202. if (res.status == 200) {
  203. this.storeOptionData = res.data.list || []
  204. }
  205. })
  206. },
  207. // 合计
  208. getTotal () {
  209. const params = {
  210. beginDate: this.searchForm.beginDate,
  211. endDate: this.searchForm.endDate,
  212. usedStoreId: this.searchForm.usedStoreId,
  213. orderNo: this.searchForm.orderNo,
  214. queryWord: this.searchForm.queryWord,
  215. bundName: this.searchForm.bundName
  216. }
  217. params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
  218. params.endDate == null ? params.endDate = getDate.getToday().endtime : null
  219. getVerificationRecordsListTotal(params).then(res => {
  220. console.log(res, '--------')
  221. if (res.status == 200) {
  222. this.paymentAmountTotal = res.data || 0
  223. }
  224. })
  225. },
  226. // 查询
  227. handleSearch () {
  228. this.$refs.table.refresh(true)
  229. this.getTotal()
  230. },
  231. // 重置
  232. handleRest () {
  233. this.nowBeginDate = getDate.getToday().starttime
  234. this.searchForm.beginDate = getDate.getToday().starttime
  235. this.searchForm.endDate = getDate.getToday().endtime
  236. this.time = [
  237. moment(getDate.getToday().starttime, this.dateFormat),
  238. moment(getDate.getToday().endtime, this.dateFormat)
  239. ]
  240. this.searchForm.usedStoreId = undefined
  241. this.searchForm.orderNo = ''
  242. this.$refs.table.refresh()
  243. this.getTotal()
  244. },
  245. // 导出
  246. handleExport () {
  247. const params = {
  248. beginDate: this.searchForm.beginDate == null ? getDate.getToday().starttime : this.searchForm.beginDate,
  249. endDate: this.searchForm.endDate == null ? getDate.getToday().endtime : this.searchForm.endDate,
  250. usedStoreId: this.searchForm.usedStoreId,
  251. orderNo: this.searchForm.orderNo,
  252. queryWord: this.searchForm.queryWord,
  253. bundName: this.searchForm.bundName
  254. }
  255. if (!params.beginDate && !params.endDate) {
  256. this.$message.error('请先选择需要导出的核销时间段再进行导出!')
  257. return
  258. }
  259. if (!completeDate(params.beginDate, params.endDate, 3)) {
  260. this.$message.error('单次最多只能导出3个月的数据,请缩小查询区间后再进行导出!')
  261. return
  262. }
  263. this.loading = true
  264. settlementRecordsExport(params).then(res => {
  265. this.loading = false
  266. this.download(res)
  267. })
  268. },
  269. download (data) {
  270. if (!data) { return }
  271. const url = window.URL.createObjectURL(new Blob([data]))
  272. const link = document.createElement('a')
  273. link.style.display = 'none'
  274. link.href = url
  275. const a = moment().format('YYYYMMDDhhmmss')
  276. const fname = '核销记录-' + a
  277. console.log(fname, '111111')
  278. link.setAttribute('download', fname + '.xlsx')
  279. document.body.appendChild(link)
  280. link.click()
  281. }
  282. },
  283. beforeRouteEnter (to, from, next) {
  284. next(vm => {
  285. vm.handleRest()
  286. vm.getStoreListData()
  287. })
  288. }
  289. }
  290. </script>
  291. <style lang="less">
  292. .orderCenter-searchForm {
  293. // 搜索框的下间距
  294. .ant-form-item {
  295. margin-bottom: 10px;
  296. }
  297. }
  298. .export-btn{
  299. background-color: #ff9900;
  300. border-color: #ff9900;
  301. color: #fff;
  302. margin-left: 10px;
  303. }
  304. // 合计
  305. .ftext span {
  306. color: #fa8c16;
  307. font-weight: bold;
  308. }
  309. </style>