PurchasedServiceList.vue 14 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441
  1. <template>
  2. <a-card :bordered="false">
  3. <v-select v-show="false" ref="orderFlag" code="PAY_STATUS" placeholder="请选择订单状态" allowClear></v-select>
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" :form="form" @keyup.enter.native="refresh">
  6. <a-row :gutter="48">
  7. <a-col :lg="6" :sm="12">
  8. <a-form-item label="订单编号:" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  9. <a-input class="full-width" id="PurchasedServiceList-number" v-model.trim="queryParam.number" placeholder="订单编号" allowClear />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :lg="6" :sm="12">
  13. <a-form-item label="下单时间:" :label-col="{ span: 7 }" :wrapper-col="{ span: 17}">
  14. <a-range-picker
  15. style="width:100%"
  16. id="PurchasedServiceList-queryOrderDate"
  17. :disabledDate="disabledDate"
  18. v-model="queryOrderDate"
  19. :format="dateFormat"
  20. :placeholder="['开始时间', '结束时间']" />
  21. </a-form-item>
  22. </a-col>
  23. <a-col :lg="6" :sm="12">
  24. <a-form-item label="结算状态:" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  25. <v-select
  26. code="SETTLE_STATUS_ALL"
  27. id="PurchasedServiceList-salesChannelSettleStatus"
  28. ref="salesChannelSettleStatus"
  29. v-model="queryParam.salesChannelSettleStatus"
  30. allowClear></v-select>
  31. </a-form-item>
  32. </a-col>
  33. <a-col :lg="6" :sm="12">
  34. <a-form-item label="销售合作商" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  35. <a-select
  36. id="PurchasedServiceList-dataSourceNo"
  37. allowClear
  38. option-filter-prop="children"
  39. placeholder="请选择销售合作商"
  40. v-model="queryParam.dataSourceNo">
  41. <a-select-option v-for="(item,index) in dataSourceNoList" :key="index" :value="item.salesChannelNo">{{ item.salesChannelName }}</a-select-option>
  42. </a-select>
  43. </a-form-item>
  44. </a-col>
  45. </a-row>
  46. <a-row :gutter="48">
  47. <a-col :lg="6" :sm="12">
  48. <a-form-item label="客户信息" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  49. <a-input
  50. class="full-width"
  51. id="PurchasedServiceList-custMobile"
  52. v-model.trim="queryParam.custMobile"
  53. :maxLength="11"
  54. placeholder="客户信息"
  55. allowClear />
  56. </a-form-item>
  57. </a-col>
  58. <a-col :lg="6" :sm="12">
  59. <a-form-item label="服务名称" :label-col="{ span:7 }" :wrapper-col="{ span:17}">
  60. <a-input class="full-width" id="PurchasedServiceList-bundleName" v-model.trim="queryParam.bundleName" placeholder="服务名称" allowClear />
  61. </a-form-item>
  62. </a-col>
  63. <a-col :lg="6" :sm="12">
  64. <a-button type="primary" @click="refresh" :disabled="disabled" id="PurchasedServiceList-search">查询</a-button>
  65. <a-button style="margin-left: 8px" :disabled="disabled" @click="resetSearchForm" id="PurchasedServiceList-resetSearchForm">重置</a-button>
  66. <a-button style="margin-left: 8px" class="export-btn" @click="handleExport" id="PurchasedServiceList-handleExport">导出</a-button>
  67. </a-col>
  68. </a-row>
  69. </a-form>
  70. </div>
  71. <!-- 合计 -->
  72. <a-alert type="info" showIcon style="margin-bottom:15px">
  73. <div class="ftext" slot="message">共<span>{{ orderTotal || 0 }}</span>单,收款金额<span>¥{{ totalAmounts || 0 }}</span>元</div>
  74. </a-alert>
  75. <div class="card-container">
  76. <s-table
  77. ref="table"
  78. size="default"
  79. rowKey="id"
  80. bordered
  81. :columns="columns"
  82. :data="loadData">
  83. <span slot="orderFlag" slot-scope="text, record">{{ $refs.orderFlag.getNameByCode(record.orderFlag) }}</span>
  84. <!-- 结算状态 -->
  85. <span slot="salesChannelSettleStatus" slot-scope="text, record">{{ $refs.salesChannelSettleStatus.getNameByCode(record.salesChannelSettleStatus) }}</span>
  86. <!-- 操作 -->
  87. <span slot="action" slot-scope="text, record">
  88. <a-button type="primary" style="margin: 5px;" @click="handleDetail(record)" id="PurchasedServiceList-handleDetail">详情</a-button>
  89. </a-button>
  90. </span>
  91. <template slot="userInfo" slot-scope="text, record">
  92. <p>{{ text }}<br>{{ record.vehicleNumber ? record.vehicleNumber : '--' }}</p>
  93. </template>
  94. </s-table>
  95. </div>
  96. </a-card>
  97. </template>
  98. <script>
  99. import moment from 'moment'
  100. import getDate from '@/libs/getDate.js'
  101. import {
  102. STable,
  103. VSelect
  104. } from '@/components'
  105. import {
  106. salesChannelList
  107. } from '@/api/FinancialManagement'
  108. import {
  109. listCustomerBundle,
  110. queryBankPayStatus,
  111. countListBundle,
  112. exportBundle
  113. } from '@/api/customerBundle'
  114. export default {
  115. name: 'OrderList',
  116. components: {
  117. VSelect,
  118. STable
  119. },
  120. data () {
  121. return {
  122. disabled: false,
  123. loadData: parameter => {
  124. const searchData = Object.assign(parameter, this.queryParam, {
  125. freeChoiceFlag: 1
  126. })
  127. console.log(this.queryOrderDate, 'this.queryOrderDate')
  128. if (this.queryOrderDate && this.queryOrderDate.length) {
  129. searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  130. searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  131. } else {
  132. searchData.beginDate = ''
  133. searchData.endDate = ''
  134. }
  135. this.disabled = true
  136. return listCustomerBundle(searchData).then(res => {
  137. const no = (res.data.pageNo - 1) * res.data.pageSize
  138. for (let i = 0; i < res.data.list.length; i++) {
  139. const _item = res.data.list[i]
  140. _item.no = no + i + 1
  141. }
  142. this.disabled = false
  143. return res.data
  144. })
  145. },
  146. form: this.$form.createForm(this, {
  147. name: 'CustomerBundleList'
  148. }),
  149. // 将默认时间日期回显在时间选择框中
  150. queryOrderDate: [
  151. moment(getDate.getRecentday().starttime, this.dateFormat),
  152. moment(getDate.getRecentday().endtime, this.dateFormat)
  153. ],
  154. dateFormat: 'YYYY-MM-DD',
  155. queryParam: {
  156. number: '', // 订单编号
  157. bundleName: '', // 服务名称
  158. beginDate: null,
  159. endDate: null,
  160. custMobile: '', // 用户信息
  161. dataSourceNo: undefined, // 合作商
  162. salesChannelSettleStatus: '' // 结算状态
  163. },
  164. dataSourceNoList: [],
  165. orderTotal: '', // 订单总数
  166. totalAmounts: '',
  167. columns: [{
  168. title: '序号',
  169. dataIndex: 'no',
  170. width: 60,
  171. align: 'center'
  172. },
  173. {
  174. title: '订单编号',
  175. dataIndex: 'number',
  176. width: 150,
  177. align: 'center'
  178. },
  179. {
  180. title: '销售合作商',
  181. dataIndex: 'salesChannelName',
  182. width: 150,
  183. align: 'center',
  184. customRender: function (text) {
  185. return (text || '--')
  186. }
  187. },
  188. {
  189. title: '下单时间',
  190. dataIndex: 'orderDate',
  191. width: 150,
  192. align: 'center'
  193. },
  194. {
  195. title: '客户信息',
  196. dataIndex: 'custMobile',
  197. width: 150,
  198. align: 'center',
  199. scopedSlots: {
  200. customRender: 'userInfo'
  201. }
  202. },
  203. {
  204. title: '服务名称',
  205. dataIndex: 'bundleName',
  206. align: 'center',
  207. width: 100,
  208. customRender: function (text) {
  209. return (text || '--')
  210. }
  211. },
  212. {
  213. title: '购买数量',
  214. dataIndex: 'cnt',
  215. align: 'center',
  216. width: 100,
  217. customRender: function (text) {
  218. return (text || '--')
  219. }
  220. },
  221. {
  222. title: '收款金额',
  223. dataIndex: 'payedAmount',
  224. width: 100,
  225. align: 'center'
  226. },
  227. {
  228. title: '订单状态',
  229. dataIndex: 'orderFlag',
  230. width: 100,
  231. align: 'center',
  232. scopedSlots: {
  233. customRender: 'orderFlag'
  234. }
  235. },
  236. {
  237. title: '结算状态',
  238. dataIndex: '',
  239. width: 100,
  240. align: 'center',
  241. scopedSlots: {
  242. customRender: 'salesChannelSettleStatus'
  243. }
  244. },
  245. {
  246. title: '操作',
  247. width: 100,
  248. align: 'center',
  249. scopedSlots: {
  250. customRender: 'action'
  251. }
  252. }
  253. ]
  254. }
  255. },
  256. methods: {
  257. // 禁止不可选日期
  258. disabledDate (current) {
  259. return current && current > moment().endOf('day')
  260. },
  261. // 创建时间change
  262. onChange (dates, dateStrings) {
  263. if ((dates, dateStrings)) {
  264. this.queryParam.beginDate = dateStrings[0]
  265. this.queryParam.endDate = dateStrings[1]
  266. }
  267. },
  268. // 获取渠道商下的合作商信息
  269. getSalesChannel () {
  270. salesChannelList().then(res => {
  271. if (res.status == 200) {
  272. this.dataSourceNoList = res.data
  273. } else {
  274. this.dataSourceNoList = []
  275. }
  276. })
  277. },
  278. handleChange (value) {
  279. console.log(`selected ${value}`)
  280. },
  281. filterOption (input, option) {
  282. return (
  283. option.componentOptions.children[0].text.toLowerCase().indexOf(input.toLowerCase()) >= 0
  284. )
  285. },
  286. // 合计
  287. getTotal () {
  288. const params = {
  289. beginDate: this.queryParam.beginDate,
  290. endDate: this.queryParam.endDate,
  291. bundleName: this.queryParam.bundleName,
  292. number: this.queryParam.number,
  293. custMobile: this.queryParam.custMobile,
  294. dataSourceNo: this.queryParam.dataSourceNo,
  295. salesChannelSettleStatus: this.queryParam.salesChannelSettleStatus,
  296. freeChoiceFlag: 1
  297. }
  298. params.beginDate == null ? params.beginDate = getDate.getRecentday().starttime : null
  299. params.endDate == null ? params.endDate = getDate.getRecentday().endtime : null
  300. countListBundle(params).then(res => {
  301. if (res.status == 200) {
  302. if (res.data) {
  303. this.orderTotal = res.data.cnt || 0
  304. this.totalAmounts = res.data.payedAmount || 0
  305. } else {
  306. this.orderTotal = 0
  307. this.totalAmounts = 0
  308. }
  309. } else {
  310. this.orderTotal = 0
  311. this.totalAmounts = 0
  312. }
  313. })
  314. },
  315. // 查看详情、
  316. handleDetail (row) {
  317. this.$router.push({
  318. path: `/Service/PurchasedService/detail/${row.id}`
  319. })
  320. },
  321. reloadRow (row) {
  322. queryBankPayStatus({
  323. tradeNo: row.tradeNo
  324. }).then(res => {
  325. console.log(res)
  326. if (res.status == 200) {
  327. this.$refs.table.refresh(true)
  328. }
  329. })
  330. },
  331. // 查询
  332. refresh () {
  333. this.$refs.table.refresh(true)
  334. this.getTotal()
  335. },
  336. // 重置
  337. resetSearchForm () {
  338. this.queryParam.beginDate = getDate.getRecentday().starttime
  339. this.queryParam.endDate = getDate.getRecentday().endtime
  340. this.queryOrderDate = [
  341. moment(getDate.getRecentday().starttime, this.dateFormat),
  342. moment(getDate.getRecentday().endtime, this.dateFormat)
  343. ]
  344. this.queryParam = {
  345. dataSourceNo: '',
  346. custMobile: '',
  347. bundleName: '',
  348. dataSourceNo: undefined,
  349. salesChannelSettleStatus: '',
  350. freeChoiceFlag: 1
  351. }
  352. this.refresh()
  353. },
  354. // 导出
  355. handleExport () {
  356. const params = {
  357. bundleName: this.queryParam.bundleName,
  358. number: this.queryParam.number,
  359. custMobile: this.queryParam.custMobile,
  360. dataSourceNo: this.queryParam.dataSourceNo,
  361. salesChannelSettleStatus: this.queryParam.salesChannelSettleStatus,
  362. freeChoiceFlag: 1
  363. }
  364. if (this.queryOrderDate && this.queryOrderDate.length) {
  365. params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  366. params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  367. } else {
  368. params.beginDate = ''
  369. params.endDate = ''
  370. }
  371. if (!params.beginDate && !params.endDate) {
  372. this.$message.error('请先选择需要导出的下单时间区间再进行导出!')
  373. return
  374. }
  375. // 判断两个时间段是否相差1个月 第二个参数指相差单位,第三个参数指是否返回浮点形式(小数)
  376. if (moment(params.endDate).diff(moment(params.beginDate), 'months', true) > 1) {
  377. this.$message.error('单次最多只能导出1个月的数据,请缩小查询区间后再进行导出!')
  378. return
  379. }
  380. this.loading = true
  381. exportBundle(params).then(res => {
  382. this.loading = false
  383. this.download(res)
  384. })
  385. },
  386. download (data) {
  387. if (!data) {
  388. return
  389. }
  390. const url = window.URL.createObjectURL(new Blob([data]))
  391. const link = document.createElement('a')
  392. link.style.display = 'none'
  393. link.href = url
  394. const a = moment().format('YYYYMMDDhhmmss')
  395. const fname = '已购服务记录-' + a
  396. link.setAttribute('download', fname + '.xlsx')
  397. document.body.appendChild(link)
  398. link.click()
  399. }
  400. },
  401. mounted () {
  402. this.getSalesChannel()
  403. this.getTotal()
  404. },
  405. beforeRouteEnter (to, from, next) {
  406. next(vm => {
  407. vm.queryParam.beginDate = getDate.getRecentday().starttime
  408. vm.queryParam.endDate = getDate.getRecentday().endtime
  409. vm.queryOrderDate = [
  410. moment(getDate.getRecentday().starttime, this.dateFormat),
  411. moment(getDate.getRecentday().endtime, this.dateFormat)
  412. ]
  413. vm.queryParam = {
  414. dataSourceNo: '',
  415. custMobile: '',
  416. bundleName: '',
  417. dataSourceNo: undefined,
  418. salesChannelSettleStatus: '',
  419. freeChoiceFlag: 1
  420. }
  421. })
  422. }
  423. }
  424. </script>
  425. <style lang="less">
  426. .table-page-search-wrapper {
  427. .export-btn {
  428. background-color: #ff9900;
  429. border-color: #ff9900;
  430. color: #fff;
  431. margin-left: 10px;
  432. }
  433. .export-btn.ant-btn:focus:not(.ant-btn-primary):not(.ant-btn-danger),
  434. .export-btn.ant-btn:hover:not(.ant-btn-primary):not(.ant-btn-danger) {
  435. color: #fff;
  436. border-color: #ff9900;
  437. }
  438. }
  439. </style>