From 42ea639bb46b91f64a63c2e5abcdab2d3b6252c6 Mon Sep 17 00:00:00 2001
From: lynn <lynnlinyong@qq.com>
Date: Mon, 28 Apr 2025 16:22:48 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E5=BA=93=E6=88=BF=E7=AE=A1?=
 =?UTF-8?q?=E7=90=86=E7=95=8C=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/system/warehouse.js                   |  30 +++
 .../storages/components/addWarehouse.vue      | 171 +++++++++++++
 src/views/storages/warehouse.vue              | 225 ++++++++++++++++++
 3 files changed, 426 insertions(+)
 create mode 100644 src/api/system/warehouse.js
 create mode 100644 src/views/storages/components/addWarehouse.vue
 create mode 100644 src/views/storages/warehouse.vue

diff --git a/src/api/system/warehouse.js b/src/api/system/warehouse.js
new file mode 100644
index 0000000..ac76112
--- /dev/null
+++ b/src/api/system/warehouse.js
@@ -0,0 +1,30 @@
+import request from '@/utils/request'
+
+// 获取库房列表
+export function getWarehouseTypeList(data) {
+  return request({
+    url: '/api/admin/warehouse/index',
+    method: 'post',
+    data,
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+}
+
+// 删除库房
+export function destroyWarehouseType(id) {
+  return request({
+    url: '/api/admin/warehouse/destroy?id=' + id,
+    method: 'get'
+  })
+} 
+
+// 新增或更新库房
+export function saveWarehouseType(data) {
+  return request({
+    url: '/api/admin/warehouse/save',
+    method: 'post',
+    data
+  })
+} 
\ No newline at end of file
diff --git a/src/views/storages/components/addWarehouse.vue b/src/views/storages/components/addWarehouse.vue
new file mode 100644
index 0000000..85bc663
--- /dev/null
+++ b/src/views/storages/components/addWarehouse.vue
@@ -0,0 +1,171 @@
+<template>
+  <div>
+    <xy-dialog ref="dialog" :width='800' :is-show.sync="isShow" type="form" :title="type==='add'?'新增库房':'编辑库房'"
+      :form="form" :rules="rules" @submit="submit">
+      <template v-slot:type_id>
+        <div class="xy-table-item type-dialog-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库类型：
+          </div>
+          <div class="xy-table-item-content">
+            <Select v-model="form.type_id" style="width:500px;" placeholder="请选择仓库类型">
+              <Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
+            </Select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:warehouse_id>
+        <div class="xy-table-item type-dialog-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>仓库名称：
+          </div>
+          <div class="xy-table-item-content">
+            <Select v-model="form.warehouse_id" style="width:500px;" placeholder="请选择仓库名称">
+              <Option v-for="item in warehouseList" :key="item.id" :value="item.id">{{ item.name }}</Option>
+            </Select>
+          </div>
+        </div>
+      </template>
+      <template v-slot:name>
+        <div class="xy-table-item type-dialog-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;">*</span>库房名称：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input style="width:500px; font-size:18px;" v-model="form.name" placeholder="请输入库房名称"></el-input>
+          </div>
+        </div>
+      </template>
+      <template v-slot:beizhu>
+        <div class="xy-table-item type-dialog-item">
+          <div class="xy-table-item-label">
+            <span style="color: red;font-weight: 600;padding-right: 4px;"></span>备注：
+          </div>
+          <div class="xy-table-item-content">
+            <el-input style="width:500px; font-size:18px;" v-model="form.beizhu" placeholder="请输入备注"></el-input>
+          </div>
+        </div>
+      </template>
+    </xy-dialog>
+  </div>
+</template>
+
+<script>
+import { saveWarehouseType } from '@/api/system/warehouse'
+import { getStorehouseTypeList } from '@/api/system/storehouseType'
+import { Message } from 'element-ui'
+export default {
+  props: {
+    warehouseList: {
+      type: Array,
+      default: () => []
+    }
+  },
+  data() {
+    return {
+      isShow: false,
+      type: 'add',
+      id: '',
+      typeList: [],
+      form: {
+        type_id: '',
+        warehouse_id: '',
+        name: '',
+        beizhu: ''
+      },
+      rules: {
+        type_id: [{ required: true, message: '请选择仓库类型' }],
+        warehouse_id: [{ required: true, message: '请选择仓库名称' }],
+        name: [{ required: true, message: '请填写库房名称' }]
+      }
+    }
+  },
+  created() {
+    this.getTypeList();
+  },
+  methods: {
+    async getTypeList() {
+      try {
+        const formData = new FormData();
+        formData.append('page', 1);
+        formData.append('page_size', 1000);
+        const res = await getStorehouseTypeList(formData);
+        this.typeList = res.data;
+      } catch (e) {
+        Message.error('获取仓库类型列表失败');
+      }
+    },
+    open(type = 'add', row = null) {
+      this.type = type;
+      this.isShow = true;
+      this.$nextTick(() => {
+        if (this.$refs.dialog && this.$refs.dialog.$refs.form) {
+          this.$refs.dialog.$refs.form.resetFields();
+        }
+      });
+      if (type === 'editor' && row) {
+        this.id = row.id;
+        Object.assign(this.form, {
+          type_id: row.type_id || '',
+          warehouse_id: row.warehouse_id || '',
+          name: row.name || '',
+          beizhu: row.remark || ''
+        });
+      } else {
+        this.id = '';
+        Object.assign(this.form, {
+          type_id: '',
+          warehouse_id: '',
+          name: '',
+          beizhu: ''
+        });
+      }
+    },
+    submit() {
+      const params = {
+        type_id: this.form.type_id,
+        warehouse_id: this.form.warehouse_id,
+        name: this.form.name,
+        remark: this.form.beizhu
+      };
+      if (this.type === 'editor') {
+        params.id = this.id;
+      }
+      saveWarehouseType(params).then(res => {
+        Message({
+          type: 'success',
+          message: this.type === 'add' ? '新增成功' : '编辑成功'
+        })
+        this.$emit('refresh')
+        this.isShow = false
+      })
+    }
+  }
+}
+</script>
+
+<style scoped lang="scss">
+  ::v-deep .xy-table-item-label {
+    min-width: 120px !important;
+    font-size: 16px;
+    text-align: right;
+  }
+  .type-dialog-item {
+    margin-bottom: 28px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+  .xy-table-item-content {
+    display: flex;
+    align-items: center;
+  }
+  ::v-deep .el-dialog {
+    border-radius: 12px;
+  }
+  ::v-deep .el-button--primary {
+    border-radius: 6px;
+    font-size: 15px;
+    padding: 8px 24px;
+  }
+</style> 
\ No newline at end of file
diff --git a/src/views/storages/warehouse.vue b/src/views/storages/warehouse.vue
new file mode 100644
index 0000000..56802b3
--- /dev/null
+++ b/src/views/storages/warehouse.vue
@@ -0,0 +1,225 @@
+<template>
+  <div class="table-page-container">
+    <div ref="lxHeader">
+      <lx-header icon="md-apps" text="库房管理" style="margin-bottom: 10px; border: 0px; margin-top: 15px">
+        <slot>
+          <div style="display: flex;justify-content: flex-start;flex-wrap: wrap;">
+            <Input v-model="select.keyword" style="width: 200px;margin-right: 10px;" placeholder="库房名称" />
+            <Select v-model="select.type" style="width: 200px;margin-right: 10px;" placeholder="仓库类型">
+              <Option v-for="item in typeList" :key="item.id" :value="item.id">{{ item.name }}</Option>
+            </Select>
+            <Select v-model="select.name" style="width: 200px;margin-right: 10px;" placeholder="仓库名称">
+              <Option v-for="item in nameList" :key="item.id" :value="item.id">{{ item.name }}</Option>
+            </Select>
+            <Button type="primary" @click="getWarehouseList">查询</Button>
+            <Button type="primary" style="margin-left: 10px;" @click="$refs.addWarehouse.open('add')">添加</Button>
+            <!-- <Button icon="ios-add" type="primary" style="margin-left: 10px;"
+              @click="$refs['imports'].show()">导入</Button> -->
+          </div>
+        </slot>
+      </lx-header>
+    </div>
+
+    <div class="table-flex-content">
+      <xy-table :list="list" :total="total" @pageSizeChange="pageSizeChange" @pageIndexChange="pageChange"
+        :table-item="table" size="medium" :height="tableHeight" style="border-radius: 10px; overflow: hidden; box-shadow: 0 2px 12px 0 rgba(0,0,0,0.08); width: 100%;">
+        <template v-slot:btns>
+          <el-table-column label="操作" align="center" min-width="140" header-align="center" class-name="table-col-action">
+            <template slot-scope="scope">
+              <div style="display: flex; gap: 8px; justify-content: center;">
+                <Button type="primary" size="small" style="border-radius: 6px;" @click="$refs.addWarehouse.open('editor', scope.row)">编辑</Button>
+                <Button type="primary" style="margin-left: 0; border-radius: 6px;" size="small" ghost @click="delRow(scope.row.id)">删除</Button>
+              </div>
+            </template>
+          </el-table-column>
+        </template>
+      </xy-table>
+      <AddWarehouse ref="addWarehouse" :warehouseList="list" @refresh="getWarehouseList"></AddWarehouse>
+    </div>
+  </div>
+</template>
+
+<script>
+  import {
+    destroy
+  } from "@/api/system/baseForm.js"
+  import { getWarehouseTypeList, destroyWarehouseType } from '@/api/system/warehouse'
+  import { getStorehouseTypeList } from '@/api/system/storehouseType'
+  import AddWarehouse from './components/addWarehouse.vue'
+  import {
+    getparameteritem
+  } from "@/api/system/dictionary.js"
+  export default {
+    components: {
+      AddWarehouse,
+    },
+    data() {
+      return {
+        select: {
+          page: 1,
+          page_size: 10,
+          keyword: '',
+          type: '',
+          name: '',
+          table_name: 'materialstorages',
+          area:''
+        },
+        typeList: [],
+        nameList: [],
+        areaList:[],
+        total: 0,
+        list: [],
+        table: [{
+          label: '序号',
+          type: 'index',
+          width: 60,
+        }, {
+          label: '仓库类型',
+          prop: 'type_name',
+          minWidth: 120
+        }, {
+          label: '仓库名称',
+          prop: 'warehouse_name',
+          minWidth: 120
+        }, {
+          label: '库房名称',
+          prop: 'name',
+          minWidth: 120
+        }, {
+          label: '备注',
+          prop: 'remark',
+          minWidth: 200,
+        }, {
+          label: '创建日期',
+          prop: 'created_at',
+          minWidth: 120,
+          formatter: (cell, data, value) => {
+            return value ? value.substring(0, 10) : ''
+          }
+        }],
+        tableHeight: 550 // 默认高度
+      }
+    },
+    created() {
+      this.getWarehouseList()
+      this.getTypeList()
+    },
+    mounted() {
+      this.calcTableHeight();
+      window.addEventListener('resize', this.calcTableHeight);
+    },
+    beforeDestroy() {
+      window.removeEventListener('resize', this.calcTableHeight);
+    },
+    methods: {
+      async getTypeList() {
+        try {
+          const formData = new FormData();
+          formData.append('page', 1);
+          formData.append('page_size', 1000);
+          const res = await getStorehouseTypeList(formData);
+          this.typeList = res.data;
+        } catch (e) {
+          this.$message.error('获取仓库类型列表失败');
+        }
+      },
+      async getWarehouseList() {
+        try {
+          const formData = new FormData();
+          formData.append('page', this.select.page);
+          formData.append('page_size', this.select.page_size);
+          
+          // 添加筛选条件
+          if (this.select.keyword) {
+            formData.append('filter[0][key]', 'name');
+            formData.append('filter[0][op]', 'like');
+            formData.append('filter[0][value]', this.select.keyword);
+          }
+          if (this.select.type) {
+            formData.append('filter[1][key]', 'type_id');
+            formData.append('filter[1][op]', 'eq');
+            formData.append('filter[1][value]', this.select.type);
+          }
+          if (this.select.name) {
+            formData.append('filter[2][key]', 'warehouse_id');
+            formData.append('filter[2][op]', 'eq');
+            formData.append('filter[2][value]', this.select.name);
+          }
+
+          const res = await getWarehouseTypeList(formData);
+          this.list = res.data;
+          this.total = res.total;
+        } catch (e) {
+          this.$message.error('获取库房列表失败');
+        }
+      },
+      pageChange(e) {
+        this.select.page = e
+        this.getWarehouseList()
+      },
+      pageSizeChange(e){
+        this.select.page_size = e
+        this.getWarehouseList()
+      },
+      delRow(id) {
+        if (id) {
+          this.$confirm('确认要删除该库房吗？', '提示', {
+            confirmButtonText: '确定',
+            cancelButtonText: '取消',
+            type: 'warning'
+          }).then(async () => {
+            try {
+              await destroyWarehouseType(id);
+              this.$message.success('删除成功');
+              this.getWarehouseList();
+            } catch (e) {
+              this.$message.error('删除失败');
+            }
+          });
+        }
+      },
+      calcTableHeight() {
+        const header = this.$refs.lxHeader ? this.$refs.lxHeader.offsetHeight : 0;
+        const windowHeight = window.innerHeight;
+        const minTableHeight = 600; // 至少能展示一页数据
+        this.tableHeight = Math.max(windowHeight - header - 100, minTableHeight);
+      },
+    }
+  }
+</script>
+
+<style>
+.table-page-container {
+  display: flex;
+  flex-direction: column;
+  height: 100vh;
+  box-sizing: border-box;
+  background: #f5f7fa;
+}
+.table-flex-content {
+  flex: 1 1 0;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+}
+.el-table th {
+  background: #f5f7fa !important;
+  color: #333;
+  font-weight: bold;
+  font-size: 15px;
+}
+.el-table td {
+  font-size: 14px;
+  height: 48px;
+}
+.el-table {
+  border-radius: 10px;
+  overflow: hidden;
+  width: 100%;
+  height: 100%;
+}
+/* 让操作列自动填充剩余空间 */
+.table-col-action {
+  flex: 1 !important;
+}
+</style>