OrderCenter.vue 9.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278
  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. <v-select v-model="searchForm.storeId" mode="multiple" placeholder="请选择" allowClear></v-select>
  15. </a-form-item>
  16. </a-col>
  17. <a-col :span="6">
  18. <a-form-item label="单号" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  19. <a-input v-model.trim="searchForm.orderNo" placeholder="请输入" allowClear/>
  20. </a-form-item>
  21. </a-col>
  22. <a-col :span="4">
  23. <a-button style="margin-right: 10px;" type="primary" @click="$refs.table.refresh(true)">查询</a-button>
  24. <a-button type="" @click="resetForm">重置</a-button>
  25. </a-col>
  26. </a-row>
  27. <a-row :gutter="48">
  28. <a-col :span="8">
  29. <a-form-item label="服务项目" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  30. <a-select placeholder="请选择" allowClear v-model="searchForm.itemId">
  31. <a-select-option v-for="item in itemOptionData" :key="item.id" :value="item.id">{{ item.title }}</a-select-option>
  32. </a-select>
  33. <!-- <v-select v-model="searchForm.itemId" placeholder="请选择" allowClear></v-select> -->
  34. </a-form-item>
  35. </a-col>
  36. <a-col :span="6">
  37. <a-form-item label="手机号码" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  38. <a-input v-model.trim="searchForm.customerMobile" placeholder="请输入" allowClear maxLength="11" />
  39. </a-form-item>
  40. </a-col>
  41. <a-col :span="6">
  42. <a-form-item label="状态" :label-col="{ span:6 }" :wrapper-col="{ span:12}">
  43. <v-select v-model="searchForm.orderStatus" ref="orderStatus" code="ORDER_STATUS" placeholder="请选择" allowClear></v-select>
  44. </a-form-item>
  45. </a-col>
  46. </a-row>
  47. </a-form>
  48. </div>
  49. <!-- 合计 -->
  50. <div class="total" >
  51. <a-icon type="info-circle" class="iconImg"/>
  52. <strong>合计:</strong><span v-model="countHJ">{{countHJ}} 单</span><strong style="margin-left: 15px;">实收:</strong><span v-model="incomeHJ">{{incomeHJ}} 元</span>
  53. </div>
  54. <!-- 列表 -->
  55. <s-table ref="table" size="default" :showPagination="false" :rowKey="(record) => record.id" :columns="columns" :data="loadData" bordered>
  56. <!-- 状态 -->
  57. <span slot="orderStatus" slot-scope="text, record">
  58. {{ $refs.orderStatus.getNameByCode(text) }}
  59. </span>
  60. <!-- 实收金额 -->
  61. <span slot="paymentAmount" slot-scope="text, record">
  62. <template v-if=" record.payStatus == 'PAID' ">{{ record.paymentAmount }}</template>
  63. <template v-else-if=" record.payStatus != 'PAID' ">{{ 0 }}</template>
  64. </span>
  65. <!-- 操作 -->
  66. <span slot="action" slot-scope="text, record">
  67. <a-button type="primary" @click="seeDetail(record)">查看</a-button>
  68. <a-button type="danger" @click="refund(record)">退款</a-button>
  69. </span>
  70. </s-table>
  71. </a-card>
  72. </template>
  73. <script>
  74. import { STable, VSelect } from '@/components'
  75. import getDate from '../../libs/getDate.js'
  76. import { orderCenterList } from '../../api/order.js'
  77. import moment from 'moment'
  78. export default {
  79. components: {
  80. STable,
  81. VSelect
  82. },
  83. data() {
  84. return {
  85. // 查询参数
  86. searchForm: {
  87. beginDate: null, // 创建的开始时间
  88. endDate: null, // 创建的结束时间
  89. storeId: '', // 网点名称
  90. orderNo: '', // 单号
  91. itemId:'', // 服务项目
  92. customerMobile:'', // 手机号码
  93. orderStatus:'' // 状态
  94. },
  95. pageNo:1,
  96. pageSize:10,
  97. countHJ:'40',
  98. incomeHJ:'2000',
  99. itemOptionData:[], // 服务项目数据
  100. time: [
  101. moment(getDate.getToday().starttime, this.dateFormat),
  102. moment(getDate.getToday().endtime, this.dateFormat)
  103. ],
  104. dateFormat: 'YYYY-MM-DD',
  105. columns: [{
  106. title: '下单时间',
  107. dataIndex: 'orderTime',
  108. minWidth: '40',
  109. align: 'center'
  110. },
  111. {
  112. title: '单号',
  113. dataIndex: 'orderNo',
  114. minWidth: '40',
  115. align: 'center'
  116. },
  117. {
  118. title: '网点名称',
  119. dataIndex: 'storeName',
  120. minWidth: '40',
  121. align: 'center'
  122. },
  123. {
  124. title: '服务项目',
  125. dataIndex: 'itemName',
  126. minWidth: '40',
  127. align: 'center'
  128. },
  129. {
  130. title: '手机号码',
  131. dataIndex: 'customerMobile',
  132. minWidth: '40',
  133. align: 'center'
  134. },
  135. {
  136. title: '应收(¥)',
  137. dataIndex: 'payableAmount',
  138. minWidth: '40',
  139. align: 'center'
  140. },
  141. {
  142. title: '实收(¥)',
  143. dataIndex: 'paymentAmount',
  144. minWidth: '40',
  145. align: 'center',
  146. scopedSlots: {
  147. customRender: 'paymentAmount'
  148. }
  149. },
  150. {
  151. title: '优惠(¥)',
  152. dataIndex: 'couponAmount',
  153. minWidth: '40',
  154. align: 'center'
  155. },
  156. {
  157. title: '状态',
  158. dataIndex: 'orderStatus',
  159. minWidth: '40',
  160. align: 'center',
  161. scopedSlots: {
  162. customRender: 'orderStatus'
  163. }
  164. },
  165. {
  166. title: '操作',
  167. dataIndex: 'action',
  168. minWidth: '40',
  169. align: 'center',
  170. scopedSlots: {
  171. customRender: 'action'
  172. }
  173. }
  174. ],
  175. // 加载数据方法 必须为 Promise 对象
  176. loadData: parameter => {
  177. return orderCenterList({
  178. pageNo:this.pageNo,
  179. pageSize:this.pageSize}).then(res=>{
  180. console.log(res,'--------------')
  181. if(res.status == 200){
  182. // for (let i = 0; i < res.data.list.length; i++) {
  183. // const _item = res.data.list[i]
  184. // // _item.status = _item.status + '' === '1'
  185. // }
  186. return res.data.list
  187. }
  188. })
  189. // this.searchForm.beginDate == null ? this.searchForm.beginDate = getDate.getToday().starttime : null
  190. // this.searchForm.endDate == null ? this.searchForm.endDate = getDate.getToday().endtime : null
  191. // return orderCenterList(Object.assign(parameter, this.searchForm)).then(res => {
  192. // console.log(res,'0000000000000000000')
  193. // if (res.status == 200) {
  194. // // const no = (res.data.pageNo - 1) * res.data.pageSize
  195. // // for (let i = 0; i < res.data.list.length; i++) {
  196. // // const _item = res.data.list[i]
  197. // // _item.no = no + i + 1
  198. // // _item.status = _item.status + '' === '1'
  199. // // }
  200. // return res.data.list
  201. // }
  202. // })
  203. }
  204. }
  205. },
  206. methods: {
  207. moment,
  208. // 创建时间change
  209. onChange(dates, dateStrings) {
  210. if ((dates, dateStrings)) {
  211. this.searchForm.beginDate = dateStrings[0]
  212. this.searchForm.endDate = dateStrings[1]
  213. }
  214. console.log(this.searchForm.beginDate, this.searchForm.endDate)
  215. },
  216. // 合计
  217. getTotal(){},
  218. // 查看详情--跳转到对应的详情页
  219. seeDetail(row) {
  220. this.$router.push({name: 'OrderDetail',query: {id: row.id}
  221. })
  222. },
  223. // 退款
  224. refund(row) {
  225. const _this = this
  226. this.$confirm({
  227. title: '警告',
  228. content: '确认退款后 款项将通过原渠道退回 且不可撤回,确认退款?',
  229. okText: '确定',
  230. cancelText: '取消',
  231. // onOk() {
  232. // deleteItem({
  233. // id: row.id
  234. // }).then(res => {
  235. // if (res.status == 200) {
  236. // _this.$message.success('退款成功')
  237. // _this.$refs.table.refresh()
  238. // }
  239. // })
  240. // }
  241. })
  242. },
  243. // 重置
  244. resetForm() {
  245. this.$refs.searchForm.resetFields()
  246. this.$refs.table.refresh()
  247. }
  248. }
  249. }
  250. </script>
  251. <style lang="less">
  252. .orderCenter-searchForm,
  253. .addButton {
  254. margin-bottom: 0;
  255. }
  256. .orderCenter-searchForm .ant-form-inline .ant-form-item {
  257. margin-bottom: 15px;
  258. }
  259. .total {
  260. margin-bottom: 24px;
  261. width:100%;
  262. background-color: #e6f7ff;
  263. border: 1px solid #91d5ff;
  264. padding: 8px 15px 8px 27px;
  265. border-radius: 4px;
  266. .iconImg{
  267. color: #1890FF;
  268. margin-right: 10px;
  269. }
  270. }
  271. </style>