loan_list.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258
  1. <template>
  2. <div class="app-container">
  3. <div v-if="showReconciliation">
  4. <!-- 筛选条件 -->
  5. <div>
  6. <el-form ref="searchForm" :model="searchForm" label-width="100px" size="mini" label-position="left">
  7. <el-row :gutter="20">
  8. <el-col :xs="24" :sm="12" :lg="6">
  9. <el-form-item label="钱包类型" prop="type">
  10. <el-select v-model="searchForm.type" class="selectStyle" placeholder="请选择" filterable clearable>
  11. <el-option v-for="(v, i) in walletType" :key="i" :label="v.label" :value="v.value" />
  12. </el-select>
  13. </el-form-item>
  14. </el-col>
  15. <el-col :xs="24" :sm="12" :lg="6">
  16. <el-form-item label="月份" prop="month">
  17. <el-date-picker
  18. v-model="searchForm.month"
  19. style="width: 100%"
  20. type="month"
  21. placeholder="选择月"
  22. />
  23. </el-form-item>
  24. </el-col>
  25. <el-col :xs="24" :sm="12" :lg="6">
  26. <el-form-item label="对账状态" prop="isReconciliation">
  27. <el-select v-model="searchForm.isReconciliation" class="selectStyle" placeholder="请选择对账状态" filterable clearable>
  28. <el-option v-for="(v, i) in statusList" :key="i" :label="v.label" :value="v.value" />
  29. </el-select>
  30. </el-form-item>
  31. </el-col>
  32. <el-col :xs="24" :sm="12" :lg="6">
  33. <el-form-item label="" class="fr">
  34. <el-button size="mini" @click="clearFn">清空</el-button>
  35. <el-button size="mini" type="primary" @click="searchFn">搜索</el-button>
  36. </el-form-item>
  37. </el-col>
  38. </el-row>
  39. </el-form>
  40. </div>
  41. <!-- 按钮 -->
  42. <div class="btn-group clearfix">
  43. <div class="fl">
  44. <el-button :disabled="dataList.length == 0" type="primary" size="mini" @click="reconciliationFn">一键对账</el-button>
  45. <!-- <el-button type="primary" size="mini" @click="recordFn">记录</el-button>-->
  46. </div>
  47. <!-- <div class="fr">-->
  48. <!-- <ExportButton :ex-url="'/finance/standing/book/export'" :ex-params="exParams" />-->
  49. <!-- </div>-->
  50. </div>
  51. <!-- 列表 -->
  52. <div class="mymain-container">
  53. <div class="table">
  54. <el-table v-loading="listLoading" :data="dataList" element-loading-text="Loading" border fit highlight-current-row stripe show-summary :summary-method="$getSummaries">
  55. <!-- <el-table-column align="left" label="序号" type="index" width="80" show-overflow-tooltip />-->
  56. <el-table-column align="left" label="月份" prop="month" min-width="100" show-overflow-tooltip />
  57. <el-table-column align="left" label="对账状态" prop="isReconciliation" min-width="100" show-overflow-tooltip>
  58. <template slot-scope="scope">
  59. <el-tag v-if="scope.row.isReconciliation == false" size="mini" type="danger">未对账</el-tag>
  60. </template>
  61. </el-table-column>
  62. <el-table-column align="left" label="经销商编码" prop="customerCode" min-width="100" show-overflow-tooltip>
  63. <template slot-scope="scope">
  64. <CopyButton :copy-text="scope.row.customerCode" />
  65. <span>{{ scope.row.customerCode }}</span>
  66. </template>
  67. </el-table-column>
  68. <el-table-column align="left" label="经销商名称" prop="customerName" min-width="260" show-overflow-tooltip>
  69. <template slot-scope="scope">
  70. <CopyButton :copy-text="scope.row.customerName" />
  71. <span>{{ scope.row.customerName }}</span>
  72. </template>
  73. </el-table-column>
  74. <el-table-column align="left" label="预付货款" prop="preFee" min-width="160" show-overflow-tooltip />
  75. <el-table-column align="left" label="订单占款" prop="orderFee" min-width="160" show-overflow-tooltip />
  76. <el-table-column align="left" label="支付货款" prop="payFee" min-width="160" show-overflow-tooltip>
  77. <template slot-scope="scope">
  78. {{ scope.row.billNo }}
  79. </template>
  80. </el-table-column>
  81. <el-table-column align="left" label="押金" prop="depositFee" min-width="160" show-overflow-tooltip />
  82. <el-table-column align="left" label="工程押金" prop="projectFee" min-width="160" show-overflow-tooltip />
  83. </el-table>
  84. </div>
  85. <!-- 分页 -->
  86. <div class="fr">
  87. <el-pagination :current-page="currentPage" :page-sizes="[10, 20, 30, 50]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="listTotal" @size-change="handleSizeChange" @current-change="handleCurrentChange" />
  88. </div>
  89. </div>
  90. </div>
  91. <AccountListDetail v-else />
  92. </div>
  93. </template>
  94. <script>
  95. import {
  96. getCustomerList,
  97. getFeconciliateList,
  98. getFinanceStandingBookCheck,
  99. getWalletCustomerList
  100. } from '@/api/finance/account_list'
  101. import AccountListDetail from '../components/account_list-detail'
  102. export default {
  103. components: {
  104. AccountListDetail
  105. },
  106. data() {
  107. return {
  108. currentPage: 1, // 当前页码
  109. pageSize: 10, // 每页数量
  110. listTotal: 0, // 列表总数
  111. dataList: [], // 列表数据
  112. searchForm: {
  113. customerId: '',
  114. customerWalletId: '',
  115. billNo: '',
  116. startTime: '',
  117. endTime: '',
  118. type: null,
  119. month: '',
  120. isReconciliation: null
  121. }, // 搜索表单
  122. listLoading: false, // 列表加载loading
  123. showReconciliation: true,
  124. statusList: [
  125. {
  126. value: true,
  127. label: '是'
  128. },
  129. {
  130. value: false,
  131. label: '否'
  132. }
  133. ],
  134. walletType: [
  135. {
  136. value: 'COMMONLY',
  137. label: '普通钱包'
  138. },
  139. {
  140. value: 'REBATE',
  141. label: '返利钱包'
  142. }
  143. ]
  144. }
  145. },
  146. computed: {
  147. exParams() {
  148. return {
  149. ...this.searchForm,
  150. pageSize: this.pageSize,
  151. pageNum: this.currentPage,
  152. isReconciliation: false
  153. }
  154. }
  155. },
  156. created() {
  157. this.getDataList({
  158. pageSize: this.pageSize,
  159. pageNum: this.currentPage,
  160. ...this.searchForm
  161. })
  162. this.getCustomerDataList({
  163. pageSize: -1,
  164. pageNum: 1
  165. })
  166. },
  167. methods: {
  168. // 清空
  169. clearFn() {
  170. this.$refs.searchForm.resetFields()
  171. this.currentPage = 1
  172. this.getDataList({
  173. ...this.searchForm,
  174. pageSize: this.pageSize,
  175. pageNum: this.currentPage
  176. })
  177. },
  178. // 搜索
  179. searchFn() {
  180. this.getDataList({
  181. ...this.searchForm,
  182. pageSize: this.pageSize,
  183. pageNum: this.currentPage
  184. })
  185. },
  186. // 改变经销商
  187. async changeFn(v) {
  188. this.searchForm.customerWalletId = ''
  189. const res = await getWalletCustomerList({ customerId: v })
  190. this.walletList = res.data
  191. },
  192. // 获取经销商数据
  193. async getCustomerDataList(data) {
  194. const res = await getCustomerList(data)
  195. this.customerList = res.data.records
  196. },
  197. // 记录
  198. recordFn() {
  199. this.showReconciliation = false
  200. },
  201. // 更改每页数量
  202. handleSizeChange(val) {
  203. this.pageSize = val
  204. this.currentPage = 1
  205. this.getDataList({
  206. pageNum: this.currentPage,
  207. pageSize: this.pageSize,
  208. isReconciliation: false
  209. })
  210. },
  211. // 更改当前页
  212. handleCurrentChange(val) {
  213. this.currentPage = val
  214. this.getDataList({
  215. pageNum: this.currentPage,
  216. pageSize: this.pageSize,
  217. isReconciliation: false
  218. })
  219. },
  220. // 获取列表
  221. async getDataList(data) {
  222. const res = await getFeconciliateList(data)
  223. res.data.records.forEach((item) => {
  224. item.sums1 = []
  225. item.sums2 = ['amount']
  226. })
  227. this.dataList = res.data.records
  228. this.listTotal = res.data.total
  229. },
  230. // 一键对账
  231. async reconciliationFn() {
  232. const res = await getFeconciliateList({
  233. pageSize: -1,
  234. pageNum: 1
  235. })
  236. const arr = res.data.records
  237. const ids = arr.map((v) => v.id)
  238. console.log(ids)
  239. await getFinanceStandingBookCheck({ ids: ids.toString() })
  240. this.$message.success('对账成功')
  241. },
  242. seeFN() {
  243. this.showDetail = false
  244. }
  245. }
  246. }
  247. </script>
  248. <style lang="scss" scoped>
  249. .selectStyle {
  250. width: 100%;
  251. }
  252. </style>