chooseBillModal.vue 7.7 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219
  1. <template>
  2. <a-modal
  3. centered
  4. class="chooseBillModal-modal"
  5. :footer="null"
  6. :maskClosable="false"
  7. title="全部单据"
  8. v-model="isShow"
  9. @cancel="isShow=false"
  10. width="70%">
  11. <a-spin :spinning="spinning" tip="Loading...">
  12. <!-- 搜索条件 -->
  13. <div class="table-page-search-wrapper">
  14. <a-form layout="inline" @keyup.enter.native="$refs.table.refresh(true)">
  15. <a-row :gutter="15">
  16. <a-col :md="7" :sm="24">
  17. <a-form-item label="单据号">
  18. <a-input id="chooseBillModal-bizNo" v-model.trim="queryParam.bizNo" allowClear placeholder="请输入单据号"/>
  19. </a-form-item>
  20. </a-col>
  21. <a-col :md="7" :sm="24">
  22. <a-form-item label="单据类型">
  23. <v-select
  24. v-model="queryParam.bizType"
  25. ref="bizType"
  26. id="chooseBillModal-bizType"
  27. code="SETTLE_BIZ_TYPE"
  28. placeholder="请选择单据类型"
  29. allowClear></v-select>
  30. </a-form-item>
  31. </a-col>
  32. <a-col :md="10" :sm="24">
  33. <a-form-item label="关联单据创建时间">
  34. <rangeDate id="chooseBillModal-createDate" ref="createDate" @change="createDateChange" />
  35. </a-form-item>
  36. </a-col>
  37. <a-col :md="7" :sm="24">
  38. <a-form-item label="审核时间">
  39. <rangeDate id="chooseBillModal-auditTime" ref="rangeDate" @change="dateChange" />
  40. </a-form-item>
  41. </a-col>
  42. <a-col :md="5" :sm="24">
  43. <a-button style="margin-bottom: 18px;" type="primary" @click="$refs.table.refresh(true)" :disabled="disabled" id="chooseBillModal-refresh">查询</a-button>
  44. <a-button style="margin: 0 0 18px 8px" @click="resetSearchForm" :disabled="disabled" id="chooseBillModal-reset">重置</a-button>
  45. </a-col>
  46. </a-row>
  47. </a-form>
  48. </div>
  49. <!-- 列表 -->
  50. <s-table
  51. class="sTable"
  52. ref="table"
  53. size="small"
  54. :rowKey="(record) => record.id"
  55. :row-selection="{ columnWidth: 40 }"
  56. @rowSelection="rowSelectionFun"
  57. :columns="columns"
  58. :data="loadData"
  59. :showPagination="false"
  60. :scroll="{ y: 400 }"
  61. :defaultLoadData="false"
  62. bordered>
  63. </s-table>
  64. <div class="btn-cont">
  65. <a-button type="primary" id="chooseBillModal-modal-save" @click="handleSave">确定</a-button>
  66. <a-button id="chooseBillModal-modal-back" @click="isShow = false" style="margin-left: 15px;">取消</a-button>
  67. </div>
  68. </a-spin>
  69. </a-modal>
  70. </template>
  71. <script>
  72. import { commonMixin } from '@/utils/mixin'
  73. import { STable, VSelect } from '@/components'
  74. import rangeDate from '@/views/common/rangeDate.vue'
  75. import { settleInfoAllList } from '@/api/settle'
  76. export default {
  77. name: 'ChooseBillModal',
  78. components: { STable, VSelect, rangeDate },
  79. mixins: [commonMixin],
  80. props: {
  81. openModal: { // 弹框显示状态
  82. type: Boolean,
  83. default: false
  84. },
  85. nowChoose: { // 已选数据
  86. type: Array,
  87. default: () => {
  88. return []
  89. }
  90. },
  91. settleClientSn: { // 结算客户sn
  92. type: String,
  93. default: ''
  94. },
  95. settleClientType: { // 结算客户类型
  96. type: String,
  97. default: ''
  98. }
  99. },
  100. data () {
  101. const _this = this
  102. return {
  103. spinning: false,
  104. isShow: this.openModal, // 是否打开弹框
  105. disabled: false,
  106. queryParam: {
  107. auditBeginDate: '', // 审核时间开始
  108. auditEndDate: '', // 审核时间结束
  109. bizNo: '', // 单据号
  110. bizType: undefined, // 单据类型
  111. bizCreateBeginDate: undefined, // 创建时间开始
  112. bizCreateEndDate: undefined // 创建时间结束
  113. },
  114. allData: [],
  115. // 表头
  116. columns: [
  117. { title: '序号', dataIndex: 'no', width: '6%', align: 'center' },
  118. { title: '单据号', dataIndex: 'bizNo', width: '20%', align: 'center', customRender: function (text) { return text || '--' } },
  119. { title: '单据类型', dataIndex: 'bizTypeDictValue', width: '12%', align: 'center', customRender: function (text) { return text || '--' } },
  120. { title: '关联单据创建时间', dataIndex: 'bizCreateDate', width: '25%', align: 'center', customRender: function (text) { return text || '--' } },
  121. { title: '审核时间', dataIndex: 'auditTime', width: '18%', align: 'center', customRender: function (text) { return text || '--' } },
  122. { title: '金额', dataIndex: 'totalAmount', width: '12%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } },
  123. { title: '余额', dataIndex: 'unsettleAmount', width: '12%', align: 'right', customRender: function (text) { return ((text || text == 0) ? _this.toThousands(text) : '--') } }
  124. ],
  125. // 加载数据方法 必须为 Promise 对象
  126. loadData: parameter => {
  127. this.disabled = true
  128. this.spinning = true
  129. return settleInfoAllList(Object.assign(this.queryParam, { settleClientType: this.settleClientType, settleClientSn: this.settleClientSn, notEqZero: 1 })).then(res => {
  130. let data
  131. if (res.status == 200) {
  132. data = res.data
  133. const selectedRowKeys = []
  134. const selectedRows = []
  135. for (var i = 0; i < data.length; i++) {
  136. data[i].no = i + 1
  137. data[i].settleAmount = data[i].unsettleAmount
  138. // 格式化已选数据
  139. const ind = this.nowChoose.findIndex(item => item.id == data[i].id)
  140. if (ind != -1) {
  141. selectedRowKeys.push(data[i].id)
  142. selectedRows.push(data[i])
  143. }
  144. }
  145. // 设置表格已选中项
  146. this.$refs.table.setTableSelected(selectedRowKeys, selectedRows)
  147. this.disabled = false
  148. }
  149. this.spinning = false
  150. return data
  151. })
  152. },
  153. rowSelectionInfo: null // 选择的数据
  154. }
  155. },
  156. methods: {
  157. // 表格选中项
  158. rowSelectionFun (obj) {
  159. this.rowSelectionInfo = obj || null
  160. },
  161. // 关联单据创建时间
  162. createDateChange (date) {
  163. this.queryParam.bizCreateBeginDate = date[0]
  164. this.queryParam.bizCreateEndDate = date[1]
  165. },
  166. // 审核时间 change
  167. dateChange (date) {
  168. this.queryParam.auditBeginDate = date[0]
  169. this.queryParam.auditEndDate = date[1]
  170. },
  171. // 确定
  172. handleSave () {
  173. this.$emit('ok', this.rowSelectionInfo && this.rowSelectionInfo.selectedRows)
  174. this.isShow = false
  175. },
  176. // 重置
  177. resetSearchForm () {
  178. this.$refs.rangeDate.resetDate()
  179. this.$refs.createDate.resetDate()
  180. this.queryParam.auditBeginDate = ''
  181. this.queryParam.auditEndDate = ''
  182. this.queryParam.bizCreateBeginDate = ''
  183. this.queryParam.bizCreateEndDate = ''
  184. this.queryParam.bizNo = ''
  185. this.queryParam.bizType = undefined
  186. this.$refs.table.refresh(true)
  187. }
  188. },
  189. watch: {
  190. // 父页面传过来的弹框状态
  191. openModal (newValue, oldValue) {
  192. this.isShow = newValue
  193. },
  194. // 重定义的弹框状态
  195. isShow (newValue, oldValue) {
  196. const _this = this
  197. if (!newValue) {
  198. _this.$emit('close')
  199. _this.$refs.table.clearSelected() // 清空表格选中项
  200. _this.resetSearchForm()
  201. } else {
  202. setTimeout(() => {
  203. _this.$refs.table.refresh(true)
  204. }, 200)
  205. }
  206. }
  207. }
  208. }
  209. </script>
  210. <style lang="less">
  211. .chooseBillModal-modal{
  212. .btn-cont {
  213. text-align: center;
  214. margin: 35px 0 10px;
  215. }
  216. }
  217. </style>