PurchasedServiceList.vue 15 KB

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