|
@@ -1,4 +1,204 @@
|
|
|
<!--出库管理-->
|
|
|
<template>
|
|
|
-
|
|
|
+ <div>
|
|
|
+ <div v-show="!addOutboundState.show" class="app-container">
|
|
|
+ <div>
|
|
|
+ <transition name="fade">
|
|
|
+ <el-row :gutter="30">
|
|
|
+ <el-col :span="10">
|
|
|
+ <el-button type="primary" @click="handleAdd">新增出库</el-button>
|
|
|
+ </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-column label="操作" align="center" fixed="right" width="88" class-name="small-padding fixed-width">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-button v-if="scope.row.status === '待填报'" 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>
|
|
|
+ <pagination
|
|
|
+ v-show="total > 0"
|
|
|
+ v-model:page="queryParams.page"
|
|
|
+ v-model:limit="queryParams.pageSize"
|
|
|
+ :total="total"
|
|
|
+ @change-page="handlePaginationChange"
|
|
|
+ />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <addOutbound v-if="addOutboundState.show" @close="handleCancel" />
|
|
|
+ </div>
|
|
|
</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import addOutbound from "./addOutbound.vue";
|
|
|
+import { ref,reactive, onMounted, onBeforeUnmount, watch } from "vue";
|
|
|
+// 定义响应式变量
|
|
|
+const loading = ref(false);
|
|
|
+const maxHeight = ref(window.innerHeight * 0.8);
|
|
|
+const total = ref();
|
|
|
+// 处理窗口大小变化
|
|
|
+const handleResize = () => {
|
|
|
+ maxHeight.value = window.innerHeight * 0.8;
|
|
|
+};
|
|
|
+const queryParams = reactive({
|
|
|
+ page: '1',
|
|
|
+ pageSize: '10',
|
|
|
+});
|
|
|
+
|
|
|
+const tableData = [
|
|
|
+ {
|
|
|
+ table_id: 1,
|
|
|
+ table_name: '测试表单',
|
|
|
+ run_time: '2024-10-15',
|
|
|
+ filling_time: '2024-10-15 18:00:00',
|
|
|
+ status: '待填报'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ table_id: 2,
|
|
|
+ table_name: '应急工单数据表',
|
|
|
+ run_time: '2024-06-24',
|
|
|
+ filling_time: '2025-06-24 18:00:00',
|
|
|
+ status: '待填报'
|
|
|
+ },
|
|
|
+ {
|
|
|
+ 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({
|
|
|
+ show: false, // 初始化show为false
|
|
|
+});
|
|
|
+
|
|
|
+const handleAdd = () => {
|
|
|
+ addOutboundState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+const upload = () => {
|
|
|
+ // 这里可能需要实现上传逻辑,暂时只是显示WriteForm作为示例
|
|
|
+ addOutboundState.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+const handleCancel = () => {
|
|
|
+ addOutboundState.show = false;
|
|
|
+};
|
|
|
+
|
|
|
+const handleWrite = (row) => {
|
|
|
+ // 实现查看逻辑
|
|
|
+};
|
|
|
+
|
|
|
+const handleView = (row) => {
|
|
|
+ // 实现明细逻辑
|
|
|
+};
|
|
|
+
|
|
|
+const handlePaginationChange = (page: number) => {
|
|
|
+ queryParams.page = page;
|
|
|
+ // 调用获取数据的函数,这里假设您有一个函数来根据queryParams获取tableData
|
|
|
+ // fetchTableData(); // 这个函数需要您自己实现
|
|
|
+};
|
|
|
+
|
|
|
+// 假设您有一个函数来获取数据
|
|
|
+// const fetchTableData = async () => {
|
|
|
+// loading.value = true;
|
|
|
+// try {
|
|
|
+// const response = await apiCallToGetData(queryParams);
|
|
|
+// tableData.value = response.data;
|
|
|
+// total = response.total; // 假设响应中包含总记录数
|
|
|
+// } catch (error) {
|
|
|
+// console.error("Failed to fetch table data:", error);
|
|
|
+// } finally {
|
|
|
+// loading.value = false;
|
|
|
+// }
|
|
|
+// };
|
|
|
+
|
|
|
+// 可以在组件挂载时调用fetchTableData来获取初始数据
|
|
|
+// onMounted(() => {
|
|
|
+// fetchTableData();
|
|
|
+// });
|
|
|
+// 在组件挂载时添加窗口大小变化监听器
|
|
|
+onMounted(() => {
|
|
|
+ window.addEventListener('resize', handleResize);
|
|
|
+});
|
|
|
+
|
|
|
+// 在组件卸载前移除窗口大小变化监听器
|
|
|
+onBeforeUnmount(() => {
|
|
|
+ window.removeEventListener('resize', handleResize);
|
|
|
+});
|
|
|
+</script>
|