出库单管理

src/views/comprehensiveGuarantee/MaterialReserveManagement/OutboundManagement.vue

@@ -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>

src/views/comprehensiveGuarantee/MaterialReserveManagement/addOutbound.vue

@@ -0,0 +1,139 @@
+<template>
+  <div  class="common-dialog">
+    <div class="common-dialog-content">
+      <div class="common-dialog-title-box">
+        <i class="common-dialog-title-icon" />
+        <div>新增出库单</div>
+      </div>
+      <div class="common-dialog-box">
+        <el-form ref="eventFormRef" :model="form" :rules="rules" label-width="80px">
+          <el-form-item label="出库单号：" prop="event_title">
+            <el-input v-model="form.event_title" placeholder="请输入出库单号" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="仓库名称：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入仓库名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="出库单商品总体积(cm³)：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入出库单商品总体积" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="出库单商品总重量(kg)：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入出库单商品总重量" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="出库单发货总体积(cm³)：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入出库单发货总体积" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="出库单发货总重量(kg)：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入出库单发货总重量" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="出库单商品总数量：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入出库单商品总数量" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="出库单发货时间：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入出库单发货时间" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="灾种名称：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入灾种名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="调运机构名称：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入调运机构名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="发货人姓名：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入发货人姓名" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="发货人手机：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入发货人手机" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="发货人地址：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入发货人地址" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="发货方备注：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入发货方备注" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="收货人姓名：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入收货人姓名" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="收货人手机：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入收货人手机" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="收货人地址：" prop="event_source">
+            <el-input v-model="form.event_source" placeholder="请输入收货人地址" style="width: 468px !important" />
+          </el-form-item>
+        </el-form>
+        <div class="common-dialog-footer">
+          <el-button @click="closeDialog">取消</el-button>
+          <el-button :loading="buttonLoading" type="primary" @click="submitForm">确定</el-button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, reactive, toRefs } from 'vue';
+const emits = defineEmits(['close']);
+const buttonLoading = ref(false);
+// 表单初始数据
+const initFormData = {
+  event_title: '', // 事件标题
+  event_type: '', // 事件类型
+  event_level: '', // 事件等级
+  event_status: '0', // 事件状态
+  address: '', // 事件地点
+  longitude: '', // 经度
+  latitude: '', // 纬度
+  event_time: '', // 事发时间
+  report_time: '', // 上报时间
+  event_source: '', // 事件来源
+  event_description: '', // 事件描述
+  contact: '' // 联系方式
+};
+
+// 表单数据
+const data = reactive({
+  form: { ...initFormData },
+  rules: {
+    event_title: [{ required: true, message: '事件标题不能为空', trigger: 'blur' }],
+    event_type: [{ required: true, message: '事件类型不能为空', trigger: 'blur' }],
+    event_level: [{ required: true, message: '事件等级不能为空', trigger: 'blur' }],
+    event_status: [{ required: true, message: '事件状态不能为空', trigger: 'blur' }],
+    address: [{ required: true, message: '事件地点不能为空', trigger: 'blur' }],
+    event_time: [{ required: true, message: '事发时间不能为空', trigger: 'blur' }],
+    report_time: [{ required: true, message: '上报时间不能为空', trigger: 'blur' }],
+    event_source: [{ required: true, message: '事件来源不能为空', trigger: 'blur' }],
+    event_description: [{ required: true, message: '事件描述不能为空', trigger: 'blur' }],
+    contact: [{ required: true, message: '联系方式不能为空', trigger: 'blur' }]
+  }
+});
+
+const { form, rules } = toRefs(data);
+
+const closeDialog = () => {
+  emits('close');
+};
+const submitForm = () => {
+}
+</script>
+
+<style lang="scss" scoped>
+.flex {
+  display: flex;
+  span {
+    white-space: nowrap;
+  }
+}
+</style>