LedgerRecords.vue 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270
  1. <template>
  2. <a-card :bordered="false">
  3. <!-- 搜索条件 -->
  4. <div class="table-page-search-wrapper">
  5. <a-form layout="inline" @keyup.enter.native="refresh">
  6. <a-row :gutter="48">
  7. <a-col :lg="8" :sm="12">
  8. <a-form-item label="分账时间" :label-col="{ span:4 }" :wrapper-col="{ span:16}">
  9. <a-range-picker
  10. id="PaySettlementRecords-queryOrderDate"
  11. :disabledDate="disabledDate"
  12. style="width: 100%;"
  13. v-model="queryOrderDate"
  14. :show-time="{ format: 'HH:mm' }"
  15. format="YYYY-MM-DD HH:mm"
  16. :placeholder="['开始时间', '结束时间']" />
  17. </a-form-item>
  18. </a-col>
  19. <a-col :lg="8" :sm="12">
  20. <a-form-item label="客户名称" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  21. <a-select
  22. show-search
  23. allowClear
  24. placeholder="请输入客户名称"
  25. option-filter-prop="children"
  26. v-model="queryParam.storeName"
  27. >
  28. <a-select-option v-for="item in storeList" :key="item.id" :value="item.id">
  29. {{ item.name }}
  30. </a-select-option>
  31. </a-select>
  32. </a-form-item>
  33. </a-col>
  34. <a-col :lg="8" :sm="12">
  35. <a-form-item label="配件名称" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  36. <a-input class="full-width" v-model="queryParam.partName" placeholder="请输入配件名称" allowClear id="PaySettlementRecords-queryOrderDate"/>
  37. </a-form-item>
  38. </a-col>
  39. <a-col :lg="8" :sm="12">
  40. <a-form-item label="配件编码" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  41. <a-input class="full-width" v-model="queryParam.settleNo" placeholder="请输入配件编码" allowClear id="PaySettlementRecords-queryOrderDate"/>
  42. </a-form-item>
  43. </a-col>
  44. <a-col :lg="6" :sm="12">
  45. <a-form-item label="分账状态" :label-col="{ span:4 }" :wrapper-col="{ span:12}">
  46. <v-select
  47. v-model="queryParam.status"
  48. ref="ledgerStatus"
  49. id="purchasedSetmeal-status"
  50. code="SETTLE_STATUS_ALL"
  51. placeholder="请选择分账状态"
  52. allowClear></v-select>
  53. </a-form-item>
  54. </a-col>
  55. <a-col :lg="6" :sm="12">
  56. <a-button type="primary" @click="refresh" id="PaySettlementRecords-refresh">查询</a-button>
  57. <a-button style="margin-left: 8px" @click="resetSearchForm" id="PaySettlementRecords-resetSearchForm">重置</a-button>
  58. </a-col>
  59. </a-row>
  60. </a-form>
  61. </div>
  62. <!-- 合计 -->
  63. <a-alert type="info" showIcon style="margin-bottom:15px">
  64. <div class="ftext" slot="message">总计:<span>{{ orderTotal }}</span>条,分账金额<span>¥{{ amountTotal }}</span>元</div>
  65. </a-alert>
  66. <!-- 列表 -->
  67. <div>
  68. <s-table
  69. ref="table"
  70. size="default"
  71. rowKey="id"
  72. bordered
  73. :columns="columns"
  74. :data="loadData">
  75. </s-table>
  76. </div>
  77. </a-card>
  78. </template>
  79. <script>
  80. import moment from 'moment'
  81. import {
  82. STable,
  83. VSelect
  84. } from '@/components'
  85. import {
  86. settlementRecordsList,
  87. settlementRecordsListTotal
  88. } from '@/api/FinancialManagement'
  89. export default {
  90. name: 'LedgerRecords',
  91. components: {
  92. VSelect,
  93. STable
  94. },
  95. data () {
  96. return {
  97. queryOrderDate: undefined,
  98. storeList: [
  99. { id: 11, name: '常青二路店' },
  100. { id: 112, name: '西部大道店' },
  101. { id: 114, name: '渭滨路店' },
  102. { id: 115, name: '未央店' },
  103. { id: 116, name: '凤城八路店' }
  104. ],
  105. queryParam: {
  106. storeName: '', // 客户名称
  107. partName: '', // 配件名称
  108. status: '', // 分账状态
  109. settleNo: '',
  110. beginDate: '',
  111. endDate: ''
  112. },
  113. orderTotal: 0, // 订单数量
  114. amountTotal: 0, // 实收总金额
  115. itemId: '', // 每条数据id
  116. settleId: '',
  117. columns: [{
  118. title: '序号',
  119. dataIndex: 'no',
  120. width: 60,
  121. align: 'center'
  122. },
  123. {
  124. title: '分账时间',
  125. dataIndex: 'settleDate',
  126. width: 200,
  127. align: 'center'
  128. },
  129. {
  130. title: '客户名称',
  131. dataIndex: 'settleNo',
  132. width: 150,
  133. align: 'center'
  134. },
  135. {
  136. title: '关联工单号',
  137. dataIndex: 'orderNum',
  138. width: 150,
  139. align: 'center',
  140. scopedSlots: {
  141. customRender: 'userInfo'
  142. }
  143. },
  144. {
  145. title: '配件名称',
  146. dataIndex: 'realAmount',
  147. align: 'center',
  148. width: 150
  149. },
  150. {
  151. title: '配件编码',
  152. dataIndex: 'code',
  153. align: 'center',
  154. width: 150
  155. },
  156. {
  157. title: '分账类型',
  158. dataIndex: 'type',
  159. align: 'center',
  160. width: 150
  161. },
  162. {
  163. title: '分账金额(¥)',
  164. dataIndex: 'money',
  165. align: 'center',
  166. width: 150
  167. },
  168. {
  169. title: '分账状态',
  170. dataIndex: 'status',
  171. align: 'center',
  172. width: 150
  173. },
  174. {
  175. title: '备注',
  176. dataIndex: 'remarks',
  177. width: 100,
  178. align: 'center',
  179. customRender: (text) => {
  180. return text || '--'
  181. }
  182. }
  183. ],
  184. loadData: parameter => {
  185. const searchData = Object.assign(parameter, this.queryParam)
  186. console.log(this.queryOrderDate, 'this.queryOrderDate')
  187. if (this.queryOrderDate && this.queryOrderDate.length) {
  188. searchData.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  189. searchData.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  190. } else {
  191. searchData.beginDate = ''
  192. searchData.endDate = ''
  193. }
  194. return settlementRecordsList(searchData).then(res => {
  195. const no = (res.data.pageNo - 1) * res.data.pageSize
  196. for (let i = 0; i < res.data.list.length; i++) {
  197. const _item = res.data.list[i]
  198. _item.no = no + i + 1
  199. }
  200. return res.data
  201. })
  202. }
  203. }
  204. },
  205. methods: {
  206. // 禁止不可选日期
  207. disabledDate (current) {
  208. return current && current > moment().endOf('day')
  209. },
  210. // 查询
  211. refresh () {
  212. this.$refs.table.refresh(true)
  213. this.getListTotal()
  214. },
  215. // 重置
  216. resetSearchForm () {
  217. this.queryOrderDate = undefined
  218. this.queryParam = {
  219. settleNo: '',
  220. beginDate: '',
  221. endDate: ''
  222. }
  223. this.$refs.table.refresh(true)
  224. this.getListTotal()
  225. },
  226. // 合计
  227. getListTotal () {
  228. const params = {
  229. settleNo: this.queryParam.settleNo,
  230. beginDate: this.queryParam.beginDate,
  231. endDate: this.queryParam.endDate
  232. }
  233. if (this.queryOrderDate && this.queryOrderDate.length) {
  234. params.beginDate = moment(this.queryOrderDate[0]).format('YYYY-MM-DD')
  235. params.endDate = moment(this.queryOrderDate[1]).format('YYYY-MM-DD')
  236. } else {
  237. params.beginDate = ''
  238. params.endDate = ''
  239. }
  240. // params.beginDate == null ? params.beginDate = getDate.getToday().starttime : null
  241. // params.endDate == null ? params.endDate = getDate.getToday().endtime : null
  242. settlementRecordsListTotal(params).then(res => {
  243. if (res.status == 200) {
  244. if (res.data) {
  245. this.orderTotal = res.data.orderNum || 0
  246. this.amountTotal = res.data.amount || 0
  247. } else {
  248. this.orderTotal = 0
  249. this.amountTotal = 0
  250. }
  251. }
  252. })
  253. }
  254. },
  255. beforeRouteEnter (to, from, next) {
  256. next(vm => {
  257. vm.resetSearchForm()
  258. })
  259. }
  260. }
  261. </script>
  262. <style scoped>
  263. .ftext span {
  264. color: #fa8c16;
  265. font-weight: bold;
  266. }
  267. </style>