list.vue 8.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216
  1. <template>
  2. <a-card size="small" :bordered="false" class="companyReceivablePayableList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  7. <a-row :gutter="15">
  8. <a-col :md="6" :sm="24">
  9. <a-form-item label="客户名称">
  10. <a-input id="companyReceivablePayableList-settleClientName" v-model.trim="queryParam.settleClientNameCurrent" allowClear placeholder="请输入客户名称"/>
  11. </a-form-item>
  12. </a-col>
  13. <a-col :md="6" :sm="24">
  14. <a-form-item label="单位类型">
  15. <v-select
  16. v-model="queryParam.settleClientType"
  17. ref="settleClientType"
  18. id="companyReceivablePayableList-settleClientType"
  19. code="SETTLE_CLIENT_TYPE"
  20. placeholder="请选择单位类型"
  21. allowClear></v-select>
  22. </a-form-item>
  23. </a-col>
  24. <a-col :md="6" :sm="24">
  25. <span class="table-page-search-submitButtons">
  26. <a-button type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="companyReceivablePayableList-refresh">查询</a-button>
  27. <a-button style="margin-left: 8px" @click="resetSearchForm()" :disabled="disabled" id="companyReceivablePayableList-reset">重置</a-button>
  28. </span>
  29. </a-col>
  30. </a-row>
  31. </a-form>
  32. </div>
  33. <!-- alert -->
  34. <a-alert type="info" style="margin-bottom:10px">
  35. <div slot="message">
  36. 共 <strong>{{ total }}</strong> 条记录,
  37. 应收金额合计 <strong>{{ (productTotal&&(productTotal.receipt || productTotal.receipt==0)) ? toThousands(productTotal.receipt) : '--' }}</strong> ,
  38. 应付金额合计 <strong>{{ (productTotal&&productTotal.pay) ? toThousands(productTotal.pay) : 0 }}</strong>
  39. </div>
  40. </a-alert>
  41. <!-- 列表 -->
  42. <s-table
  43. class="sTable fixPagination"
  44. ref="table"
  45. :style="{ height: tableHeight+84.5+'px' }"
  46. size="small"
  47. :rowKey="(record) => record.settleClientSn"
  48. rowKeyName="settleClientSn"
  49. :columns="columns"
  50. :data="loadData"
  51. :scroll="{ y: tableHeight }"
  52. :defaultLoadData="false"
  53. bordered>
  54. <!-- 客户名称 -->
  55. <template slot="customerName" slot-scope="text, record">
  56. <span v-if="record.settleClientType&&record.settleClientType=='CUSTOMER'">{{ record.settleClientNameCurrent||'--' }}</span>
  57. <span v-else>{{ record.settleClientName||'--' }}</span>
  58. </template>
  59. <!-- 操作 -->
  60. <template slot="action" slot-scope="text, record">
  61. <a-button
  62. v-if="$hasPermissions('M_collectionPayment')"
  63. size="small"
  64. type="link"
  65. class="button-primary"
  66. @click="handleCollectionPayment(record)"
  67. :id="'companyReceivablePayableList-collectionPayment-'+record.id">收付款</a-button>
  68. <a-button
  69. v-if="$hasPermissions('M_companyReceivablePayable_detail')"
  70. size="small"
  71. type="link"
  72. class="button-success"
  73. @click="handleDetail(record)"
  74. :id="'companyReceivablePayableList-detail-'+record.id">详情</a-button>
  75. <span v-if="!$hasPermissions('M_collectionPayment') && !$hasPermissions('M_companyReceivablePayable_detail')">--</span>
  76. </template>
  77. </s-table>
  78. </a-spin>
  79. </a-card>
  80. </template>
  81. <script>
  82. import { commonMixin } from '@/utils/mixin'
  83. import { STable, VSelect } from '@/components'
  84. import { settleUnitClientList, settleInfoQuerySum } from '@/api/settle'
  85. export default {
  86. name: 'CollectionPaymentList',
  87. components: { STable, VSelect },
  88. mixins: [commonMixin],
  89. data () {
  90. const _this = this
  91. return {
  92. spinning: false,
  93. disabled: false, // 查询、重置按钮是否可操作
  94. tableHeight: 0,
  95. // 查询参数
  96. queryParam: {
  97. settleClientNameCurrent: '', // 客户名称
  98. settleClientType: undefined // 单位类型
  99. },
  100. // 表头
  101. columns: [
  102. { title: '序号', dataIndex: 'no', width: '5%', align: 'center' },
  103. { title: '客户名称', width: '20%', align: 'center', scopedSlots: { customRender: 'customerName' } },
  104. { title: '单位类型', dataIndex: 'settleClientTypeDictValue', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  105. { title: '应收金额', dataIndex: 'unSettleAmountReceipt', width: '20%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  106. { title: '应付金额', dataIndex: 'unSettleAmountPay', width: '20%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  107. { title: '操作', scopedSlots: { customRender: 'action' }, width: '15%', align: 'center' }
  108. ],
  109. // 加载数据方法 必须为 Promise 对象
  110. loadData: parameter => {
  111. this.disabled = true
  112. this.spinning = true
  113. return settleUnitClientList(Object.assign(parameter, this.queryParam)).then(res => {
  114. let data
  115. if (res.status == 200) {
  116. data = res.data
  117. this.getTotal(Object.assign(parameter, this.queryParam))
  118. const no = (data.pageNo - 1) * data.pageSize
  119. for (var i = 0; i < data.list.length; i++) {
  120. data.list[i].no = no + i + 1
  121. // 应付金额 值为负,应显示为正
  122. data.list[i].unSettleAmountPay = Math.abs(data.list[i].unSettleAmountPay) || 0
  123. }
  124. this.disabled = false
  125. this.total = data.count || 0
  126. }
  127. this.spinning = false
  128. return data
  129. })
  130. },
  131. total: 0, // 总条数
  132. productTotal: null // 金额合计数据
  133. }
  134. },
  135. methods: {
  136. // 详情
  137. handleDetail (row) {
  138. if (row.settleClientType == 'CUSTOMER') {
  139. this.$router.push({ path: `/financialManagement/companyReceivablePayable/detail/${row.settleClientSn}/${row.settleClientNameCurrent}/${row.settleClientType}` })
  140. } else {
  141. this.$router.push({ path: `/financialManagement/companyReceivablePayable/detail/${row.settleClientSn}/${row.settleClientName}/${row.settleClientType}` })
  142. }
  143. },
  144. // 合计
  145. getTotal (param) {
  146. settleInfoQuerySum(param).then(res => {
  147. if (res.status == 200 && res.data) {
  148. this.productTotal = res.data
  149. } else {
  150. this.productTotal = null
  151. }
  152. })
  153. },
  154. // 收付款
  155. handleCollectionPayment (row) {
  156. if (row.settleClientType == 'CUSTOMER') {
  157. this.$router.push({ path: `/financialManagement/companyReceivablePayable/collectionPayment/${row.settleClientSn}/${row.settleClientNameCurrent}/${row.settleClientType}` })
  158. } else {
  159. this.$router.push({ path: `/financialManagement/companyReceivablePayable/collectionPayment/${row.settleClientSn}/${row.settleClientName}/${row.settleClientType}` })
  160. }
  161. },
  162. // 重置
  163. resetSearchForm () {
  164. this.queryParam.settleClientNameCurrent = ''
  165. this.queryParam.settleClientType = undefined
  166. this.$refs.table.refresh(true)
  167. },
  168. // 页面初始化
  169. pageInit () {
  170. const _this = this
  171. this.$nextTick(() => { // 页面渲染完成后的回调
  172. _this.setTableH()
  173. })
  174. },
  175. // 计算表格高度
  176. setTableH () {
  177. const tableSearchH = this.$refs.tableSearch.offsetHeight
  178. this.tableHeight = window.innerHeight - tableSearchH - 236
  179. }
  180. },
  181. watch: {
  182. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  183. this.setTableH()
  184. }
  185. },
  186. mounted () {
  187. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  188. this.pageInit()
  189. this.resetSearchForm()
  190. }
  191. },
  192. activated () {
  193. // 如果是新页签打开,则重置当前页面
  194. if (this.$store.state.app.isNewTab) {
  195. this.pageInit()
  196. this.resetSearchForm()
  197. }
  198. // 仅刷新列表,不重置页面
  199. if (this.$store.state.app.updateList) {
  200. this.pageInit()
  201. this.$refs.table.refresh()
  202. }
  203. },
  204. beforeRouteEnter (to, from, next) {
  205. next(vm => {})
  206. }
  207. }
  208. </script>
  209. <style lang="less">
  210. .companyReceivablePayableList-wrap{
  211. .sTable{
  212. margin-top: 10px;
  213. }
  214. }
  215. </style>