list.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143
  1. <template>
  2. <a-card size="small" :bordered="false" class="exportCheckList-wrap">
  3. <a-spin :spinning="spinning" tip="Loading...">
  4. <!-- 搜索条件 -->
  5. <div ref="tableSearch" class="table-page-search-wrapper">
  6. <a-form-model
  7. id="exportCheckList-form"
  8. ref="ruleForm"
  9. class="form-model-con"
  10. layout="inline"
  11. :model="queryParam"
  12. :rules="rules"
  13. :labelCol="labelCol"
  14. :wrapperCol="wrapperCol"
  15. @keyup.enter.native="handleSearch" >
  16. <a-row :gutter="15">
  17. <a-col :md="10" :sm="24">
  18. <a-form-model-item label="选择时间范围" prop="dateArr">
  19. <a-select id="exportCheckList-print" v-model="queryParam.dateArr" placeholder="请选择时间范围" allowClear>
  20. <a-select-option v-for="item in checkList" :value="item" :key="item">
  21. <span>{{ item }}</span>
  22. </a-select-option>
  23. </a-select>
  24. </a-form-model-item>
  25. </a-col>
  26. <a-col :md="6" :sm="24">
  27. <a-button
  28. type="primary"
  29. class="button-warning"
  30. @click="handleExport"
  31. :disabled="disabled"
  32. :loading="exportLoading"
  33. id="exportCheckList-export">导出</a-button>
  34. </a-col>
  35. </a-row>
  36. </a-form-model>
  37. </div>
  38. </a-spin>
  39. </a-card>
  40. </template>
  41. <script>
  42. import { STable, VSelect } from '@/components'
  43. import { checkWarehouseExcelList } from '@/api/checkWarehouse'
  44. import { exportSalesOutProduct } from '@/api/stockOut.js'
  45. import { hdExportExcel } from '@/libs/exportExcel'
  46. export default {
  47. components: { STable, VSelect },
  48. data () {
  49. return {
  50. spinning: false,
  51. tableHeight: 0,
  52. labelCol: { span: 8 },
  53. wrapperCol: { span: 16 },
  54. queryParam: { // 查询条件
  55. dateArr: undefined
  56. },
  57. rules: {
  58. 'dateArr': [{ required: true, message: '请选择时间范围', trigger: 'change' }]
  59. },
  60. disabled: false, // 查询、重置按钮是否可操作
  61. exportLoading: false,
  62. checkList: []
  63. }
  64. },
  65. methods: {
  66. getList () {
  67. checkWarehouseExcelList().then(res => {
  68. if (res.status == 200) {
  69. const arr = res.data.reverse()
  70. for (let i = arr.length - 1; i > 0; i--) {
  71. this.checkList.push([arr[i - 1].financeAuditTime, arr[i].financeAuditTime].join(' 至 '))
  72. }
  73. } else {
  74. this.checkList = []
  75. }
  76. })
  77. },
  78. // 导出
  79. handleExport () {
  80. const _this = this
  81. this.$refs.ruleForm.validate(valid => {
  82. if (valid) {
  83. const params = _this.queryParam.dateArr.split(' 至 ')
  84. _this.exportLoading = true
  85. _this.spinning = true
  86. hdExportExcel(exportSalesOutProduct, { 'beginDate': params[0], 'endDate': params[1] }, '导出销售', function () {
  87. _this.exportLoading = false
  88. _this.spinning = false
  89. })
  90. } else {
  91. console.log('error submit!!')
  92. return false
  93. }
  94. })
  95. },
  96. pageInit () {
  97. const _this = this
  98. this.$nextTick(() => { // 页面渲染完成后的回调
  99. _this.setTableH()
  100. })
  101. this.queryParam.dateArr = undefined
  102. this.$refs.ruleForm.resetFields()
  103. this.getList()
  104. },
  105. setTableH () {
  106. const tableSearchH = this.$refs.tableSearch.offsetHeight
  107. this.tableHeight = window.innerHeight - tableSearchH - 238
  108. }
  109. },
  110. watch: {
  111. '$store.state.app.winHeight' (newValue, oldValue) { // 窗口变更时,需同时更改表格高度
  112. this.setTableH()
  113. }
  114. },
  115. mounted () {
  116. if (!this.$store.state.app.isNewTab) { // 页签刷新时调用
  117. this.pageInit()
  118. }
  119. },
  120. activated () {
  121. // 如果是新页签打开,则重置当前页面
  122. if (this.$store.state.app.isNewTab) {
  123. this.pageInit()
  124. }
  125. // 仅刷新列表,不重置页面
  126. if (this.$store.state.app.updateList) {
  127. this.pageInit()
  128. }
  129. },
  130. beforeRouteEnter (to, from, next) {
  131. next(vm => {})
  132. }
  133. }
  134. </script>
  135. <style lang="less">
  136. .exportCheckList-wrap{
  137. height: 99%;
  138. .form-model-con{
  139. margin-top: 50px;
  140. }
  141. }
  142. </style>