receiptindex.vue 4.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151
  1. <template>
  2. <a-card>
  3. <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
  4. <a-row :gutter="24">
  5. <a-col :span="6">
  6. <a-form-item label="日期" name="times">
  7. <a-range-picker v-model:value="searchFormState.times" value-format="YYYY-MM-DD" />
  8. </a-form-item>
  9. </a-col>
  10. <a-col :span="6">
  11. <a-form-item label="单位名称" name="companyName">
  12. <a-input v-model:value="searchFormState.companyName" placeholder="请输入单位名称" />
  13. </a-form-item>
  14. </a-col>
  15. <a-col :span="6">
  16. <a-form-item label="货品" name="goodsName">
  17. <a-input v-model:value="searchFormState.goodsName" placeholder="请输入货品" />
  18. </a-form-item>
  19. </a-col>
  20. <a-col :span="6" v-if="advanced">
  21. <a-form-item label="车牌号" name="licensePlate">
  22. <a-input v-model:value="searchFormState.licensePlate" placeholder="请输入车牌号" />
  23. </a-form-item>
  24. </a-col>
  25. <a-col :span="6">
  26. <a-button type="primary" @click="query()">查询</a-button>
  27. <a-button style="margin: 0 8px" @click="reset">重置</a-button>
  28. <a-button type="dashed" class="snowy-buttom-left" @click="exportData()"><export-outlined />导出</a-button>
  29. <a @click="toggleAdvanced" style="margin-left: 8px">
  30. {{ advanced ? '收起' : '展开' }}
  31. <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
  32. </a>
  33. </a-col>
  34. </a-row>
  35. </a-form>
  36. </a-card>
  37. <a-card style="margin-top: 5px">
  38. <a-table
  39. ref="tableRef"
  40. :columns="columns"
  41. :data-source="companyData"
  42. bordered
  43. :row-key="(record) => record.id"
  44. :pagination="false"
  45. >
  46. <template #bodyCell="{ column, record, index }">
  47. <template v-if="column.dataIndex === 'serial'">
  48. {{ index + 1 }}
  49. </template>
  50. <template v-if="column.dataIndex === 'totalNetWeight'">
  51. {{ record.totalNetWeight + ' t' }}
  52. </template>
  53. <template v-if="column.dataIndex === 'totalGrossWeight'">
  54. {{ record.totalGrossWeight + ' t' }}
  55. </template>
  56. <template v-if="column.dataIndex === 'totalTareWeight'">
  57. {{ record.totalTareWeight + ' t' }}
  58. </template>
  59. </template>
  60. </a-table>
  61. </a-card>
  62. </template>
  63. <script setup name="receiptcount">
  64. import { Modal } from 'ant-design-vue'
  65. import { ref, onMounted } from 'vue'
  66. import { cloneDeep } from 'lodash-es'
  67. import bizRecordApi from '@/api/biz/bizRecordApi'
  68. import downloadUtil from '@/utils/downloadUtil'
  69. const searchFormRef = ref()
  70. const searchFormState = ref({
  71. times: [],
  72. licensePlate: '',
  73. goodsName: '',
  74. receiptCompany: ''
  75. })
  76. onMounted(() => {
  77. loadData()
  78. })
  79. // 查询区域显示更多控制
  80. const advanced = ref(false)
  81. const toggleAdvanced = () => {
  82. advanced.value = !advanced.value
  83. }
  84. // 重置
  85. const reset = () => {
  86. searchFormState.value.startDay = null
  87. searchFormState.value.endDay = null
  88. searchFormRef.value.resetFields()
  89. }
  90. //表格相关
  91. const columns = [
  92. {
  93. title: '序号',
  94. width: 80,
  95. dataIndex: 'serial'
  96. },
  97. {
  98. title: '单位名称',
  99. dataIndex: 'companyName'
  100. },
  101. {
  102. title: '总车次',
  103. dataIndex: 'totalCarNum'
  104. },
  105. {
  106. title: '总净重',
  107. dataIndex: 'totalNetWeight'
  108. },
  109. {
  110. title: '总毛重',
  111. dataIndex: 'totalGrossWeight'
  112. },
  113. {
  114. title: '总皮重',
  115. dataIndex: 'totalTareWeight'
  116. }
  117. ]
  118. const companyData = ref([])
  119. const loadData = () => {
  120. const searchFormParam = cloneDeep(searchFormState.value)
  121. // times范围查询条件重载
  122. if (searchFormParam.times) {
  123. searchFormParam.startDay = searchFormParam.times[0]
  124. searchFormParam.endDay = searchFormParam.times[1]
  125. delete searchFormParam.times
  126. }
  127. bizRecordApi.receiptCompanyList(searchFormParam).then((data) => {
  128. companyData.value = data
  129. })
  130. }
  131. const query = () => {
  132. loadData()
  133. }
  134. // 导出
  135. const exportData = () => {
  136. const searchFormParam = cloneDeep(searchFormState.value)
  137. Modal.confirm({
  138. title: '提示',
  139. content: '确定要导出收货单位统计记录吗?',
  140. maskClosable: true,
  141. onOk: () => {
  142. bizRecordApi.receiptCompanyExport(searchFormParam).then((res) => {
  143. downloadUtil.resultDownload(res)
  144. })
  145. }
  146. })
  147. }
  148. </script>