|
@@ -10,28 +10,138 @@
|
|
|
</el-col>
|
|
|
</el-row>
|
|
|
</transition>
|
|
|
- <el-table ref="multipleTable" v-loading="loading" :data="tableData" border :max-height="maxHeight" style="width: 96%">
|
|
|
- <el-table-column label="出库单号" align="center" prop="table_id" width="150" fixed show-overflow-tooltip/>
|
|
|
- <el-table-column label="仓库名称" align="center" prop="table_name" width="80" show-overflow-tooltip/>
|
|
|
- <el-table-column label="出库单商品总体积(cm³)" align="center" prop="run_time" width="80" show-overflow-tooltip/>
|
|
|
- <el-table-column label="出库单商品总重量(kg)" align="center" prop="filling_time" width="80" show-overflow-tooltip/>
|
|
|
- <el-table-column label="出库单发货总体积(cm³)" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="出库单发货总重量(kg)" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="出库单商品总数量" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="出库单发货时间" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="灾种名称" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="调运机构名称" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="发货人姓名" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="发货人手机" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="发货人地址" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="发货方备注" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="收货人姓名" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="收货人手机" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
- <el-table-column label="收货人地址" align="center" prop="status" width="120" show-overflow-tooltip/>
|
|
|
+ <el-table
|
|
|
+ ref="multipleTable"
|
|
|
+ v-loading="loading"
|
|
|
+ :data="tableData"
|
|
|
+ border
|
|
|
+ :max-height="maxHeight"
|
|
|
+ style="width: 96%"
|
|
|
+ >
|
|
|
+ <el-table-column
|
|
|
+ label="出库单号"
|
|
|
+ align="center"
|
|
|
+ prop="outboundOrderId"
|
|
|
+ width="150"
|
|
|
+ fixed
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="仓库名称"
|
|
|
+ align="center"
|
|
|
+ prop="warehouseName"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="出库单商品总体积(cm³)"
|
|
|
+ align="center"
|
|
|
+ prop="totalVolume"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="出库单商品总重量(kg)"
|
|
|
+ align="center"
|
|
|
+ prop="totalWeight"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="出库单发货总体积(cm³)"
|
|
|
+ align="center"
|
|
|
+ prop="shippedTotalVolume"
|
|
|
+ width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="出库单发货总重量(kg)"
|
|
|
+ align="center"
|
|
|
+ prop="shippedTotalWeight"
|
|
|
+ width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="出库单商品总数量"
|
|
|
+ align="center"
|
|
|
+ prop="totalQuantity"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="出库单发货时间"
|
|
|
+ align="center"
|
|
|
+ prop="shippedTime"
|
|
|
+ width="180"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="灾种名称"
|
|
|
+ align="center"
|
|
|
+ prop="disasterType"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="调运机构名称"
|
|
|
+ align="center"
|
|
|
+ prop="transportationOrgName"
|
|
|
+ width="150"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="发货人姓名"
|
|
|
+ align="center"
|
|
|
+ prop="shipperName"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="发货人手机"
|
|
|
+ align="center"
|
|
|
+ prop="shipperPhone"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="发货人地址"
|
|
|
+ align="center"
|
|
|
+ prop="shipperAddress"
|
|
|
+ width="200"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="发货方备注"
|
|
|
+ align="center"
|
|
|
+ prop="shipperRemarks"
|
|
|
+ width="180"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="收货人姓名"
|
|
|
+ align="center"
|
|
|
+ prop="recipientName"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="收货人手机"
|
|
|
+ align="center"
|
|
|
+ prop="recipientPhone"
|
|
|
+ width="120"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
+ <el-table-column
|
|
|
+ label="收货人地址"
|
|
|
+ align="center"
|
|
|
+ prop="recipientAddress"
|
|
|
+ width="200"
|
|
|
+ show-overflow-tooltip
|
|
|
+ />
|
|
|
<el-table-column label="操作" align="center" fixed="right" width="88" class-name="small-padding fixed-width">
|
|
|
<template #default="scope">
|
|
|
- <el-button type="text" class="common-btn-text-primary" @click="handleWrite">查看</el-button>
|
|
|
- <el-button type="text" class="common-btn-text-primary" @click="handleView">明细</el-button>
|
|
|
+ <el-button type="text" class="common-btn-text-primary" @click="handleWrite(scope.row)">查看</el-button>
|
|
|
+ <el-button type="text" class="common-btn-text-primary" @click="handleView(scope.row)">明细</el-button>
|
|
|
</template>
|
|
|
</el-table-column>
|
|
|
</el-table>
|
|
@@ -44,8 +154,8 @@
|
|
|
/>
|
|
|
</div>
|
|
|
</div>
|
|
|
- <addOutbound v-if="addOutboundState.show" @close="handleCancel" />
|
|
|
- <outboundDetails v-if="outboundDetailsState.show" @close="handleCancel" />
|
|
|
+ <addOutbound v-if="addOutboundState.show" :event-id="addOutboundState.eventId" @close="handleCancel" />
|
|
|
+ <outboundDetails v-if="outboundDetailsState.show" :event-id="outboundDetailsState.eventId" @close="handleCancel" />
|
|
|
</div>
|
|
|
</template>
|
|
|
<script setup lang="ts">
|
|
@@ -67,89 +177,53 @@ const queryParams = reactive({
|
|
|
|
|
|
const tableData = [
|
|
|
{
|
|
|
- table_id: 1,
|
|
|
- table_name: '测试表单',
|
|
|
- run_time: '2024-10-15',
|
|
|
- filling_time: '2024-10-15 18:00:00',
|
|
|
- status: '待填报'
|
|
|
+ outboundOrderId: 'ORD001',
|
|
|
+ warehouseName: '仓库A',
|
|
|
+ totalVolume: '12345',
|
|
|
+ totalWeight: '50.0',
|
|
|
+ shippedTotalVolume: '11000',
|
|
|
+ shippedTotalWeight: '48.5',
|
|
|
+ totalQuantity: '100',
|
|
|
+ shippedTime: '2023-10-01 10:00:00',
|
|
|
+ disasterType: '洪水',
|
|
|
+ transportationOrgName: '物流公司X',
|
|
|
+ shipperName: '张三',
|
|
|
+ shipperPhone: '13800000001',
|
|
|
+ shipperAddress: '北京市海淀区某街道123号',
|
|
|
+ shipperRemarks: '请小心搬运',
|
|
|
+ recipientName: '李四',
|
|
|
+ recipientPhone: '13800000002',
|
|
|
+ recipientAddress: '上海市黄浦区某小区456号'
|
|
|
},
|
|
|
{
|
|
|
- table_id: 2,
|
|
|
- table_name: '应急工单数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '待填报'
|
|
|
+ outboundOrderId: 'ORD002',
|
|
|
+ warehouseName: '仓库B',
|
|
|
+ totalVolume: '23456',
|
|
|
+ totalWeight: '75.0',
|
|
|
+ shippedTotalVolume: '22000',
|
|
|
+ shippedTotalWeight: '73.0',
|
|
|
+ totalQuantity: '150',
|
|
|
+ shippedTime: '2023-10-02 14:30:00',
|
|
|
+ disasterType: '地震',
|
|
|
+ transportationOrgName: '物流公司Y',
|
|
|
+ shipperName: '王五',
|
|
|
+ shipperPhone: '13800000003',
|
|
|
+ shipperAddress: '广州市天河区某路789号',
|
|
|
+ shipperRemarks: '无特殊要求',
|
|
|
+ recipientName: '赵六',
|
|
|
+ recipientPhone: '13800000004',
|
|
|
+ recipientAddress: '成都市武侯区某小区101号'
|
|
|
},
|
|
|
- {
|
|
|
- table_id: 3,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 4,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 5,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 6,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 7,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 8,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 9,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 10,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- },
|
|
|
- {
|
|
|
- table_id: 11,
|
|
|
- table_name: '安全风险通告数据表',
|
|
|
- run_time: '2024-06-24',
|
|
|
- filling_time: '2025-06-24 18:00:00',
|
|
|
- status: '已上报'
|
|
|
- }
|
|
|
+ // 可以根据需要添加更多数据
|
|
|
];
|
|
|
|
|
|
-const addOutboundState = reactive({
|
|
|
+let addOutboundState = reactive({
|
|
|
show: false, // 初始化show为false
|
|
|
+ eventId: ''
|
|
|
});
|
|
|
const outboundDetailsState = reactive({
|
|
|
show: false, // 初始化show为false
|
|
|
+ eventId: ''
|
|
|
});
|
|
|
|
|
|
const handleAdd = () => {
|
|
@@ -165,7 +239,8 @@ const handleCancel = () => {
|
|
|
addOutboundState.show = false;
|
|
|
};
|
|
|
|
|
|
-const handleWrite = () => {
|
|
|
+const handleWrite = (row) => {
|
|
|
+ outboundDetailsState.eventId = row.outboundOrderId + "";
|
|
|
outboundDetailsState.show=true;
|
|
|
};
|
|
|
|