207 lines
7.1 KiB
Vue
207 lines
7.1 KiB
Vue
<template>
|
|
<ATablePage
|
|
ref="tablePage"
|
|
v-bind="tablePageProps">
|
|
<template #highFormItem="formData">
|
|
<ElFormItem label="站点">
|
|
<ElInput v-model="formData.stationId" placeholder="站点"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="订单编号">
|
|
<ElInput v-model="formData.sn" placeholder="订单编号"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="项目名称">
|
|
<ElInput v-model="formData.projectName" placeholder="项目名称"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="客户姓名">
|
|
<ElInput v-model="formData.contacts" placeholder="客户姓名"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="联系方式">
|
|
<ElInput v-model="formData.phone" placeholder="联系方式"/>
|
|
</ElFormItem>
|
|
|
|
<ElFormItem label="订单类型">
|
|
<ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
|
|
</ElFormItem>
|
|
<!-- <ElFormItem label="订单状态">
|
|
<ElInput v-model="formData.orderStatus" placeholder="订单状态"/>
|
|
</ElFormItem> -->
|
|
<ElFormItem label="运输企业">
|
|
<ElInput v-model="formData.transOrgName" placeholder="运输企业"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="下单时间">
|
|
<ADtPicker v-model="formData.orderTimes" :change-handler="research"/>
|
|
</ElFormItem>
|
|
<ElFormItem label="完结时间">
|
|
<ADtPicker v-model="formData.finishTimes" :change-handler="research"/>
|
|
</ElFormItem>
|
|
</template>
|
|
<template #simpleFormItem="formData">
|
|
<ElFormItem>
|
|
<ElInput v-model="formData.sn" placeholder="订单编号"/>
|
|
</ElFormItem>
|
|
<ElFormItem>
|
|
<ElInput v-model="formData.orderCategory" placeholder="订单类型"/>
|
|
</ElFormItem>
|
|
</template>
|
|
<template #columns>
|
|
<ElTableColumn fixed="left" label="订单编号" prop="sn" width="140"/>
|
|
<!-- <ElTableColumn label="下单时间" prop="orderTime"/> -->
|
|
<ElTableColumn label="客户姓名" prop="contacts" width="100"/>
|
|
<!-- <ElTableColumn label="联系方式" prop="phone"/> -->
|
|
<ElTableColumn label="货品名称" prop="goodsName" width="120"/>
|
|
|
|
<ElTableColumn label="项目名称" show-overflow-tooltip width="100">
|
|
<template #default="{row}">
|
|
{{ row.projectName ?? '-' }}
|
|
</template>
|
|
</ElTableColumn>
|
|
<ElTableColumn label="站点名称" prop="stationName" width="120"/>
|
|
<ElTableColumn label="运输单位" prop="transOrgName" show-overflow-tooltip width="120"/>
|
|
<!-- <ElTableColumn label="运距（米）" prop="transDistance"/> -->
|
|
|
|
<ElTableColumn label="车次" prop="trainNum" width="70"/>
|
|
<ElTableColumn label="车牌号" prop="truckLicensePlate" width="120"/>
|
|
<!-- <ElTableColumn label="司机姓名" prop="driverName"/> -->
|
|
<!-- <ElTableColumn label="司机电话" prop="driverPhone"/> -->
|
|
|
|
<ElTableColumn label="净重（吨）" prop="settleWeight" width="100"/>
|
|
<!-- <ElTableColumn label="毛重（吨）" prop="roughWeight"/> -->
|
|
<!-- <ElTableColumn label="皮重（吨）" prop="tareWeight"/> -->
|
|
<ElTableColumn label="进场时间" prop="inTime" width="130"/>
|
|
<!-- <ElTableColumn label="开始运输时间" prop="transTime"/> -->
|
|
<ElTableColumn label="出场时间" prop="outTime" width="130"/>
|
|
<!-- <ElTableColumn label="完结时间" prop="finishTime"/> -->
|
|
<ElTableColumn fixed="right" label="支付状态" prop="paymentStatusTxt" width="90"/>
|
|
|
|
<ElTableColumn fixed="right" label="订单状态" prop="transStatusTxt" width="90"/>
|
|
<ElTableColumn fixed="right" label="勘料状态" prop="checkStatusTxt" width="90"/>
|
|
|
|
|
|
<!-- <ElTableColumn label="客户备注" prop="customerMemo"/> -->
|
|
</template>
|
|
<OrderForm ref="orderForm" :research="research"/>
|
|
<BookDetail ref="bookDetail"/>
|
|
</ATablePage>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import OrderForm from '@/pages/order/book/BookForm.vue'
|
|
import ADtPicker from '@/components/a-dt-picker/ADtPicker.vue'
|
|
import ATablePage, {
|
|
type ATablePageInstance,
|
|
buildTablePageProps,
|
|
} from '@/components/a-page/a-table-page/ATablePage.tsx'
|
|
import BookDetail from '@/pages/order/book/BookDetail.vue'
|
|
import { orderCategory } from '@/pages/order/constants.ts'
|
|
import type { R } from '@/common/utils/http-util.ts'
|
|
|
|
const props = defineProps<{
|
|
defaultOrderCategory: typeof orderCategory[number]['val']
|
|
}>()
|
|
const tablePageIns = useTemplateRef<ATablePageInstance>('tablePage')
|
|
const bookDetailIns = useTemplateRef<InstanceType<typeof BookDetail>>('bookDetail')
|
|
|
|
|
|
function research() {
|
|
tablePageIns.value?.doSearch()
|
|
}
|
|
|
|
const tablePageProps = buildTablePageProps<OrderTypes.SearchOrderParam, OrderTypes.TableData>({
|
|
pageLayout: {
|
|
dataListHeight: 3,
|
|
},
|
|
searchForm: {
|
|
defaultData: {
|
|
orderCategory: props.defaultOrderCategory,
|
|
},
|
|
highForm: {
|
|
contentWidth: 342,
|
|
},
|
|
/* paging(param: OrderTypes.SearchOrderParam) {
|
|
return OrderApi.paging(param)
|
|
.then(res => {
|
|
const records = res.data.records
|
|
const dataList: OrderTypes.TableData[] = []
|
|
res.data.records = dataList
|
|
for (const record of records) {
|
|
const transRecodes = record.transRecodes ?? []
|
|
record.transRecodes = undefined
|
|
for (let i = 0; i < transRecodes.length; i++) {
|
|
const it = transRecodes[i]
|
|
dataList.push({
|
|
...record,
|
|
...it,
|
|
rowCount: i === 0 ? transRecodes.length : 0,
|
|
} as OrderTypes.TableData)
|
|
}
|
|
}
|
|
return res as R<G.PageResult<OrderTypes.TableData>>
|
|
})
|
|
}, */
|
|
paging(param: OrderTypes.SearchOrderParam) {
|
|
return Promise.resolve({
|
|
code: 200,
|
|
data: {
|
|
current: param.current,
|
|
size: param.size,
|
|
total: 100,
|
|
records: [
|
|
{
|
|
rowCount: 1,
|
|
id: '123',
|
|
sn: '202308240001',
|
|
orderTime: '2023-08-24 10:00:00',
|
|
contacts: '张三',
|
|
phone: '13800000000',
|
|
projectName: '项目A',
|
|
stationName: '站点B',
|
|
goodsName: '商品X',
|
|
unit: '吨',
|
|
customerMemo: '客户备注',
|
|
estimatedQuantity: 100,
|
|
estimatedTrainNum: 2,
|
|
transDistance: 500,
|
|
orderCategoryTxt: '订单类型A',
|
|
transStatusTxt: '运输中',
|
|
transStatus: 'DaiPaiDan',
|
|
checkStatusTxt: '未勘料',
|
|
paymentStatusTxt: '未支付',
|
|
},
|
|
] as OrderTypes.TableData[],
|
|
},
|
|
} as R<G.PageResult<OrderTypes.TableData>>)
|
|
},
|
|
},
|
|
table: {
|
|
actionColumn: {
|
|
tableActions: [
|
|
{
|
|
tooltip: '详情',
|
|
icon: 'Postcard',
|
|
type: 'primary',
|
|
action({row}) {
|
|
bookDetailIns.value?.open(row)
|
|
},
|
|
},
|
|
{
|
|
tooltip: '三联单',
|
|
type: 'info',
|
|
icon: 'liandan',
|
|
action({row}) {
|
|
bookDetailIns.value?.open(row)
|
|
},
|
|
},
|
|
/* {
|
|
tooltip: '历史轨迹',
|
|
type: 'info',
|
|
icon: 'liandan',
|
|
action({row}) {
|
|
bookDetailIns.value?.open(row)
|
|
},
|
|
}, */
|
|
],
|
|
},
|
|
},
|
|
})
|
|
</script>
|