123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151 |
- <template>
- <a-card>
- <a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
- <a-row :gutter="24">
- <a-col :span="6">
- <a-form-item label="日期" name="times">
- <a-range-picker v-model:value="searchFormState.times" value-format="YYYY-MM-DD" />
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item label="单位名称" name="companyName">
- <a-input v-model:value="searchFormState.companyName" placeholder="请输入单位名称" />
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-form-item label="货品" name="goodsName">
- <a-input v-model:value="searchFormState.goodsName" placeholder="请输入货品" />
- </a-form-item>
- </a-col>
- <a-col :span="6" v-if="advanced">
- <a-form-item label="车牌号" name="licensePlate">
- <a-input v-model:value="searchFormState.licensePlate" placeholder="请输入车牌号" />
- </a-form-item>
- </a-col>
- <a-col :span="6">
- <a-button type="primary" @click="query()">查询</a-button>
- <a-button style="margin: 0 8px" @click="reset">重置</a-button>
- <a-button type="dashed" class="snowy-buttom-left" @click="exportData()"><export-outlined />导出</a-button>
- <a @click="toggleAdvanced" style="margin-left: 8px">
- {{ advanced ? '收起' : '展开' }}
- <component :is="advanced ? 'up-outlined' : 'down-outlined'" />
- </a>
- </a-col>
- </a-row>
- </a-form>
- </a-card>
- <a-card style="margin-top: 5px">
- <a-table
- ref="tableRef"
- :columns="columns"
- :data-source="companyData"
- bordered
- :row-key="(record) => record.id"
- :pagination="false"
- >
- <template #bodyCell="{ column, record, index }">
- <template v-if="column.dataIndex === 'serial'">
- {{ index + 1 }}
- </template>
- <template v-if="column.dataIndex === 'totalNetWeight'">
- {{ record.totalNetWeight + ' t' }}
- </template>
- <template v-if="column.dataIndex === 'totalGrossWeight'">
- {{ record.totalGrossWeight + ' t' }}
- </template>
- <template v-if="column.dataIndex === 'totalTareWeight'">
- {{ record.totalTareWeight + ' t' }}
- </template>
- </template>
- </a-table>
- </a-card>
- </template>
- <script setup name="receiptcount">
- import { Modal } from 'ant-design-vue'
- import { ref, onMounted } from 'vue'
- import { cloneDeep } from 'lodash-es'
- import bizRecordApi from '@/api/biz/bizRecordApi'
- import downloadUtil from '@/utils/downloadUtil'
- const searchFormRef = ref()
- const searchFormState = ref({
- times: [],
- licensePlate: '',
- goodsName: '',
- receiptCompany: ''
- })
- onMounted(() => {
- loadData()
- })
- // 查询区域显示更多控制
- const advanced = ref(false)
- const toggleAdvanced = () => {
- advanced.value = !advanced.value
- }
- // 重置
- const reset = () => {
- searchFormState.value.startDay = null
- searchFormState.value.endDay = null
- searchFormRef.value.resetFields()
- }
- //表格相关
- const columns = [
- {
- title: '序号',
- width: 80,
- dataIndex: 'serial'
- },
- {
- title: '单位名称',
- dataIndex: 'companyName'
- },
- {
- title: '总车次',
- dataIndex: 'totalCarNum'
- },
- {
- title: '总净重',
- dataIndex: 'totalNetWeight'
- },
- {
- title: '总毛重',
- dataIndex: 'totalGrossWeight'
- },
- {
- title: '总皮重',
- dataIndex: 'totalTareWeight'
- }
- ]
- const companyData = ref([])
- const loadData = () => {
- const searchFormParam = cloneDeep(searchFormState.value)
- // times范围查询条件重载
- if (searchFormParam.times) {
- searchFormParam.startDay = searchFormParam.times[0]
- searchFormParam.endDay = searchFormParam.times[1]
- delete searchFormParam.times
- }
- bizRecordApi.receiptCompanyList(searchFormParam).then((data) => {
- companyData.value = data
- })
- }
- const query = () => {
- loadData()
- }
- // 导出
- const exportData = () => {
- const searchFormParam = cloneDeep(searchFormState.value)
- Modal.confirm({
- title: '提示',
- content: '确定要导出收货单位统计记录吗?',
- maskClosable: true,
- onOk: () => {
- bizRecordApi.receiptCompanyExport(searchFormParam).then((res) => {
- downloadUtil.resultDownload(res)
- })
- }
- })
- }
- </script>
|