仓库管理

src/views/comprehensiveGuarantee/MaterialReserveManagement/GodownManagement.vue

@@ -1,5 +1,160 @@
+<!--仓库信息管理-->
 <template>
-  <!--仓库管理-->
+  <div>
+    <div v-show="!addGodownState.show && !outboundDetailsState.show" class="app-container">
+      <div>
+        <transition name="fade">
+          <el-row :gutter="30" style="height: 50px">
+            <el-col :span="10">
+              <el-button type="primary" @click="handleAdd">新增</el-button>
+              <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="warehouse_name" width="80" show-overflow-tooltip/>
+          <el-table-column label="状态" align="center" prop="status" width="80" show-overflow-tooltip/>
+          <el-table-column label="联系人" align="center" prop="contact_person" width="80" show-overflow-tooltip/>
+          <el-table-column label="联系电话" align="center" prop="contact_phone" width="80" show-overflow-tooltip/>
+          <el-table-column label="联系地址" align="center" prop="contact_address" width="120" show-overflow-tooltip/>
+          <el-table-column label="备注" align="center" prop="remarks" width="120" show-overflow-tooltip/>
+          <el-table-column label="创建时间" align="center" prop="creation_time" width="120" show-overflow-tooltip/>
+          <el-table-column label="更新时间" align="center" prop="update_time" width="120" show-overflow-tooltip/>
+          <el-table-column label="创建人" align="center" prop="creator" width="120" show-overflow-tooltip/>
+          <el-table-column label="创建人账号" align="center" prop="creator_account" width="120" show-overflow-tooltip/>
+          <el-table-column label="更新人" align="center" prop="updater" width="120" show-overflow-tooltip/>
+          <el-table-column label="类型" align="center" prop="type" width="120" show-overflow-tooltip/>
+          <el-table-column label="等级" align="center" prop="grade" width="120" show-overflow-tooltip/>
+          <el-table-column label="物资保管部门编号" align="center" prop="material_department_id" width="120" show-overflow-tooltip/>
+          <el-table-column label="物资保管部门名称" align="center" prop="material_department_name" width="120" show-overflow-tooltip/>
+          <el-table-column label="地区" align="center" prop="region" width="120" show-overflow-tooltip/>
+          <el-table-column label="经度" align="center" prop="longitude" width="120" show-overflow-tooltip/>
+          <el-table-column label="纬度" align="center" prop="latitude" width="120" show-overflow-tooltip/>
+          <el-table-column label="占地面积(平方米)" align="center" prop="area_square_meters" 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 type="text" class="common-btn-text-primary" @click="handleWrite">查看</el-button>
+              <el-button type="text" class="common-btn-text-primary" @click="handleView">明细</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>
+    <addGodownManagement v-if="addGodownState.show" @close="handleCancel" />
+    <outboundDetails v-if="outboundDetailsState.show" @close="handleCancel" />
+  </div>
 </template>
-<script lang="ts"></script>
+<script setup lang="ts">
+import addGodownManagement from "./addGodownManagement.vue";
+import outboundDetails from "./outboundDetails.vue";
+import { ref,reactive, onMounted, onBeforeUnmount } 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: 'KD001',
+    warehouse_name: '一号仓库',
+    status: '已出库',
+    contact_person: '张三',
+    contact_phone: '13800138000',
+    contact_address: '北京市朝阳区XXX街道XXX号',
+    remarks: '无',
+    creation_time: '2023-10-01 10:00:00',
+    update_time: '2023-10-01 10:15:00',
+    creator: '李四',
+    creator_account: 'li4@example.com',
+    updater: '王五',
+    type: '普通',
+    grade: '一级',
+    material_department_id: 'MD001',
+    material_department_name: '物资保管一部',
+    region: '华北',
+    longitude: '116.404',
+    latitude: '39.915',
+    area_square_meters: '500',
+  },
+  {
+    table_id: 'KD002',
+    warehouse_name: '二号仓库',
+    status: '处理中',
+    contact_person: '李四',
+    contact_phone: '13800138001',
+    contact_address: '上海市徐汇区XXX街道XXX号',
+    remarks: '急需',
+    creation_time: '2023-10-02 12:00:00',
+    update_time: '2023-10-02 12:30:00',
+    creator: '赵六',
+    creator_account: 'zhao6@example.com',
+    updater: '孙七',
+    type: '特殊',
+    grade: '二级',
+    material_department_id: 'MD002',
+    material_department_name: '物资保管二部',
+    region: '华东',
+    longitude: '121.474',
+    latitude: '31.231',
+    area_square_meters: '800',
+  },
+];
+
+const addGodownState = reactive({
+  show: false, // 初始化show为false
+});
+const outboundDetailsState = reactive({
+  show: false, // 初始化show为false
+});
+
+const handleAdd = () => {
+  addGodownState.show = true;
+};
+
+const upload = () => {
+  // 这里可能需要实现上传逻辑，暂时只是显示WriteForm作为示例
+  addGodownState.show = true;
+};
+
+const handleCancel = () => {
+  addGodownState.show = false;
+};
+
+const handleWrite = () => {
+  outboundDetailsState.show=true;
+};
+
+const handleView = () => {
+  outboundDetailsState.show=true;
+};
+
+const handlePaginationChange = (page: number) => {
+  queryParams.page = page;
+  // fetchTableData(); //
+};
+
+onMounted(() => {
+  window.addEventListener('resize', handleResize);
+});
+
+// 在组件卸载前移除窗口大小变化监听器
+onBeforeUnmount(() => {
+  window.removeEventListener('resize', handleResize);
+});
+</script>
 <style lang="scss" scoped></style>

src/views/comprehensiveGuarantee/MaterialReserveManagement/addGodownManagement.vue

@@ -0,0 +1,168 @@
+<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="120px">
+          <el-form-item label="仓库名称：" prop="warehouse_name">
+            <el-input v-model="form.warehouse_name" placeholder="请输入仓库名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="状态：" prop="status">
+            <el-input v-model="form.status" placeholder="请输入状态" style="width: 468px !important" />
+            <!-- 注意：如果状态是固定选项（如启用/禁用），则可以使用el-select -->
+          </el-form-item>
+
+          <el-form-item label="联系人：" prop="contact_person">
+            <el-input v-model="form.contact_person" placeholder="请输入联系人" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="联系电话：" prop="contact_phone">
+            <el-input v-model="form.contact_phone" placeholder="请输入联系电话" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="联系地址：" prop="contact_address">
+            <el-input v-model="form.contact_address" placeholder="请输入联系地址" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="备注：" prop="remarks">
+            <el-input v-model="form.remarks" placeholder="请输入备注" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="创建时间：" prop="creation_time">
+            <el-date-picker
+              v-model="form.creation_time"
+              type="datetime"
+              placeholder="请选择创建时间"
+              style="width: 468px !important"
+            />
+            <!-- 注意：这里使用了el-date-picker来处理日期时间，如果需要其他格式请调整type属性 -->
+          </el-form-item>
+
+          <el-form-item label="更新时间：" prop="update_time">
+            <el-date-picker
+              v-model="form.update_time"
+              type="datetime"
+              placeholder="请选择更新时间"
+              style="width: 468px !important"
+            />
+          </el-form-item>
+
+          <el-form-item label="创建人：" prop="creator">
+            <el-input v-model="form.creator" placeholder="请输入创建人" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="创建人账号：" prop="creator_account">
+            <el-input v-model="form.creator_account" placeholder="请输入创建人账号" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="更新人：" prop="updater">
+            <el-input v-model="form.updater" placeholder="请输入更新人" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="类型：" prop="type">
+            <el-input v-model="form.type" placeholder="请输入类型" style="width: 468px !important" />
+            <!-- 注意：如果类型是固定选项，则可以使用el-select -->
+          </el-form-item>
+
+          <el-form-item label="等级：" prop="grade">
+            <el-input v-model="form.grade" placeholder="请输入等级" style="width: 468px !important" />
+            <!-- 注意：如果等级是固定选项（如A/B/C），则可以使用el-select -->
+          </el-form-item>
+
+          <el-form-item label="物资保管部门编号：" prop="material_department_id">
+            <el-input v-model="form.material_department_id" placeholder="请输入物资保管部门编号" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="物资保管部门名称：" prop="material_department_name">
+            <el-input v-model="form.material_department_name" placeholder="请输入物资保管部门名称" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="地区：" prop="region">
+            <el-input v-model="form.region" placeholder="请输入地区" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="经度：" prop="longitude">
+            <el-input v-model="form.longitude" placeholder="请输入经度" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="纬度：" prop="latitude">
+            <el-input v-model="form.latitude" placeholder="请输入纬度" style="width: 468px !important" />
+          </el-form-item>
+
+          <el-form-item label="占地面积(平方米)：" prop="area_square_meters">
+            <el-input v-model="form.area_square_meters" 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 = {
+  warehouse_name: '',
+  status: '',
+  contact_person: '',
+  contact_phone: '',
+  contact_address: '',
+  remarks: '',
+  creation_time: '',
+  update_time: '',
+  creator: '',
+  creator_account: '',
+  updater: '',
+  type: '',
+  grade: '',
+  material_department_id: '',
+  material_department_name: '',
+  region: '',
+  longitude: '',
+  latitude: '',
+  area_square_meters: ''
+};
+
+// 表单数据
+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>