OrderCenter.vue 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="orderCenter-searchForm">
  5. <a-form ref="searchForm">
  6. <a-row :gutter="48">
  7. <a-col :span="8">
  8. <a-form-item label="下单时间" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  9. <a-range-picker v-model="time" :format="dateFormat" :placeholder="['开始时间','结束时间']" @change="onChange" />
  10. </a-form-item>
  11. </a-col>
  12. <a-col :span="6">
  13. <a-form-item label="网点名称" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  14. <a-select placeholder="请选择" allowClear v-model="storeId" mode="multiple">
  15. <a-select-option v-for="item in storeOptionData" :key="item.id" :value="item.id">{{ item.name }}</a-select-option>
  16. </a-select>
  17. </a-form-item>
  18. </a-col>
  19. <a-col :span="6">
  20. <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  21. <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear />
  22. </a-form-item>
  23. </a-col>
  24. <a-col :span="4">
  25. <a-button style="margin-right: 10px;" type="primary" @click="handleSearch">查询</a-button>
  26. <a-button type="" @click="handleRest">重置</a-button>
  27. </a-col>
  28. </a-row>
  29. <a-row :gutter="48">
  30. <a-col :span="8">
  31. <a-form-item label="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  32. <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
  33. <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.itemName }}</a-select-option>
  34. </a-select>
  35. </a-form-item>
  36. </a-col>
  37. <a-col :span="6">
  38. <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  39. <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear :maxLength="11" />
  40. </a-form-item>
  41. </a-col>
  42. <a-col :span="6">
  43. <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  44. <v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear></v-select>
  45. </a-form-item>
  46. </a-col>
  47. </a-row>
  48. </a-form>
  49. </div>
  50. <!-- 合计 -->
  51. <div class="total">
  52. <a-icon type="info-circle" class="iconImg" />
  53. <strong>合计:</strong><span v-model="orderTotal">{{ orderTotal || 0 }} 单</span><strong style="margin-left: 15px;">实收:</strong><span
  54. v-model="paymentAmountTotal">{{ paymentAmountTotal || 0 }} 元</span>
  55. </div>
  56. <!-- 列表 -->
  57. <s-table
  58. ref="table"
  59. size="default"
  60. :rowKey="(record) => record.id"
  61. :columns="columns"
  62. :data="loadData"
  63. bordered>
  64. <!-- 状态 -->
  65. <span slot="orderStatus" slot-scope="text">
  66. {{ $refs.orderStatus.getNameByCode(text) }}
  67. </span>
  68. <!-- 实收金额 -->
  69. <span slot="paymentAmount" slot-scope="text, record">
  70. <template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
  71. <template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
  72. </span>
  73. <!-- 优惠 -->
  74. <span slot="couponAmount" slot-scope="text, record">
  75. <template v-if=" record.orderStatus != 'CANCELED' ">{{ record.couponAmount }}</template>
  76. <template v-else-if=" record.orderStatus == 'CANCELED' ">{{ 0 }}</template>
  77. </span>
  78. <!-- 操作 -->
  79. <span slot="action" slot-scope="text, record">
  80. <a-button type="primary" @click="seeDetail(record)">查看</a-button>
  81. <!-- 本期暂不做 -->
  82. <!-- <a-button type="danger" @click="refund(record)">退款</a-button> -->
  83. </span>
  84. </s-table>
  85. <!-- 查看详情弹窗 -->
  86. <order-detail-modal :openModal="openDetailModal" :nowId="detailId" @close="openDetailModal=false" />
  87. </a-card>
  88. </template>
  89. <script>
  90. import {
  91. STable,
  92. VSelect
  93. } from '@/components'
  94. import getDate from '../../libs/getDate.js'
  95. import {
  96. orderCenterList,
  97. itemList,
  98. storeList,
  99. orderTotal
  100. } from '../../api/order.js'
  101. import OrderDetailModal from './OrderDetailModal.vue'
  102. import moment from 'moment'
  103. export default {
  104. name: 'OrderCenter',
  105. components: {
  106. STable,
  107. VSelect,
  108. OrderDetailModal
  109. },
  110. data () {
  111. return {
  112. storeId: [], // 网点名称
  113. // 查询参数
  114. searchForm: {
  115. beginDate: null, // 创建的开始时间
  116. endDate: null, // 创建的结束时间
  117. storeIdList: [], // 网点名称
  118. orderNo: '', // 单号
  119. itemId: undefined, // 服务项目
  120. customerMobile: '', // 手机号码
  121. orderStatus: '' // 状态
  122. },
  123. orderTotal: '', // 合计开单数量
  124. paymentAmountTotal: '', // 合计实收金额
  125. itemOptionData: [], // 服务项目数据
  126. storeOptionData: [], // 网点名称数据
  127. openDetailModal: false, // 查看详情弹窗 默认关闭
  128. detailId: null, // 初始化id
  129. // 将默认当天时间日期回显在时间选择框中
  130. time: [
  131. moment(getDate.getToday().starttime, this.dateFormat),
  132. moment(getDate.getToday().endtime, this.dateFormat)
  133. ],
  134. dateFormat: 'YYYY-MM-DD',
  135. columns: [{
  136. title: '下单时间',
  137. dataIndex: 'orderTime',
  138. minWidth: '40',
  139. align: 'center'
  140. },
  141. {
  142. title: '单号',
  143. dataIndex: 'orderNo',
  144. minWidth: '40',
  145. align: 'center'
  146. },
  147. {
  148. title: '网点名称',
  149. dataIndex: 'storeName',
  150. minWidth: '40',
  151. align: 'center'
  152. },
  153. {
  154. title: '服务项目',
  155. dataIndex: 'itemName',
  156. minWidth: '40',
  157. align: 'center'
  158. },
  159. {
  160. title: '手机号码',
  161. dataIndex: 'customerMobile',
  162. minWidth: '40',
  163. align: 'center'
  164. },
  165. {
  166. title: '应收(¥)',
  167. dataIndex: 'payableAmount',
  168. minWidth: '40',
  169. align: 'center'
  170. },
  171. {
  172. title: '优惠(¥)',
  173. dataIndex: 'couponAmount',
  174. minWidth: '40',
  175. align: 'center',
  176. scopedSlots: {
  177. customRender: 'couponAmount'
  178. }
  179. },
  180. {
  181. title: '实收(¥)',
  182. dataIndex: 'paymentAmount',
  183. minWidth: '40',
  184. align: 'center',
  185. scopedSlots: {
  186. customRender: 'paymentAmount'
  187. }
  188. },
  189. {
  190. title: '状态',
  191. dataIndex: 'orderStatus',
  192. minWidth: '40',
  193. align: 'center',
  194. scopedSlots: {
  195. customRender: 'orderStatus'
  196. }
  197. },
  198. {
  199. title: '操作',
  200. dataIndex: 'action',
  201. minWidth: '40',
  202. align: 'center',
  203. scopedSlots: {
  204. customRender: 'action'
  205. }
  206. }
  207. ],
  208. // 加载数据方法 必须为 Promise 对象
  209. loadData: parameter => {
  210. this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
  211. this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
  212. this.searchForm.storeIdList = this.storeId
  213. return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
  214. // console.log(res,'0000000000000000000')
  215. if (res.status == 200) {
  216. return res.data
  217. this.getTotal()
  218. }
  219. })
  220. }
  221. }
  222. },
  223. methods: {
  224. moment,
  225. // 创建时间change
  226. onChange (dates, dateStrings) {
  227. if ((dates, dateStrings)) {
  228. this.searchForm.beginDate = dateStrings[0]
  229. this.searchForm.endDate = dateStrings[1]
  230. }
  231. console.log(this.searchForm.beginDate, this.searchForm.endDate)
  232. },
  233. // 获取服务项目数据
  234. getItemListData () {
  235. itemList({
  236. pageNo: 1,
  237. pageSize: 1000
  238. }).then(res => {
  239. // console.log(res, '-----------')
  240. if (res.status == 200) {
  241. this.itemOptionData = res.data.list || []
  242. } else {
  243. this.itemOptionData = []
  244. }
  245. })
  246. },
  247. // 获取网点名称数据
  248. getStoreListData () {
  249. storeList({
  250. pageNo: 1,
  251. pageSize: 1000
  252. }).then(res => {
  253. // console.log(res, '-----------')
  254. if (res.status == 200) {
  255. this.storeOptionData = res.data.list || []
  256. } else {
  257. this.storeOptionData = []
  258. }
  259. })
  260. },
  261. // 合计
  262. getTotal () {
  263. const params = {
  264. beginDate: this.searchForm.beginDate,
  265. endDate: this.searchForm.endDate,
  266. storeIdList: this.searchForm.storeIdList,
  267. orderNo: this.searchForm.orderNo,
  268. itemId: this.searchForm.itemId,
  269. customerMobile: this.searchForm.customerMobile,
  270. orderStatus: this.searchForm.orderStatus
  271. }
  272. params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
  273. params.endDate == null ? params.endDate = getDate.getToday().endtime : null
  274. params.storeIdList = this.storeId
  275. orderTotal(params).then(res => {
  276. console.log(res, '--------')
  277. if (res.status == 200) {
  278. this.orderTotal = res.data.orderNum || 0
  279. this.paymentAmountTotal = res.data.paymentAmount || 0
  280. }
  281. })
  282. },
  283. // 查看详情--跳转到对应的详情页
  284. seeDetail (record) {
  285. // 将当前行的id传递给详情页
  286. this.openDetailModal = true
  287. this.detailId = record.id
  288. },
  289. // 退款---暂不做
  290. // refund(row) {
  291. // const _this = this
  292. // this.$confirm({
  293. // title: '警告',
  294. // content: '确认退款后 款项将通过原渠道退回 且不可撤回,确认退款?',
  295. // okText: '确定',
  296. // cancelText: '取消',
  297. // // onOk() {
  298. //
  299. // // }
  300. // })
  301. // },
  302. // 查询
  303. handleSearch () {
  304. this.$refs.table.refresh()
  305. this.getTotal()
  306. },
  307. // 重置
  308. handleRest () {
  309. this.searchForm.beginDate = getDate.getToday().starttime
  310. this.searchForm.endDate = getDate.getToday().endtime
  311. this.time = [
  312. moment(getDate.getToday().starttime, this.dateFormat),
  313. moment(getDate.getToday().endtime, this.dateFormat)
  314. ]
  315. this.storeId = []
  316. this.searchForm.orderNo = ''
  317. this.searchForm.itemId = undefined
  318. this.searchForm.customerMobile = ''
  319. this.searchForm.orderStatus = ''
  320. // this.$refs.searchForm.resetFields()
  321. this.$refs.table.refresh()
  322. this.getTotal()
  323. }
  324. },
  325. beforeRouteEnter (to, from, next) {
  326. next(vm => {
  327. vm.getItemListData()
  328. vm.handleRest()
  329. vm.getStoreListData()
  330. })
  331. }
  332. }
  333. </script>
  334. <style lang="less">
  335. .orderCenter-searchForm {
  336. // 搜索框的下间距
  337. .ant-form-item {
  338. margin-bottom: 10px;
  339. }
  340. }
  341. // 合计
  342. .total {
  343. margin: 15px 0 25px;
  344. width: 100%;
  345. background-color: #e6f7ff;
  346. border: 1px solid #91d5ff;
  347. padding: 8px 15px 8px 27px;
  348. border-radius: 4px;
  349. .iconImg {
  350. color: #1890FF;
  351. margin-right: 10px;
  352. }
  353. }
  354. </style>