From d412d3a9978418d6823a68e237c3fcec61fa1fc2 Mon Sep 17 00:00:00 2001
From: skjia <106962133@qq.com>
Date: Mon, 26 May 2025 08:45:20 +0800
Subject: [PATCH] =?UTF-8?q?jsk=20=E4=BB=93=E5=BA=93=E7=AE=A1=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/stockManage/depotManage/index.vue | 435 ++++++++++++++++++++
 1 file changed, 435 insertions(+)

diff --git a/src/views/stockManage/depotManage/index.vue b/src/views/stockManage/depotManage/index.vue
index e69de29b..37882659 100644
--- a/src/views/stockManage/depotManage/index.vue
+++ b/src/views/stockManage/depotManage/index.vue
@@ -0,0 +1,435 @@
+<template>
+    <div class="app-container">
+      <div class="depotleft">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+            <el-form-item label="" prop="areaId">
+              <el-cascader v-model="queryParams.areaId" placeholder="所属区域"
+                :options="treeAreaOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
+                :props="{
+                  emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
+                  checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
+                  value:'id',label:'label'
+                }" clearable @change="handleAreaChange">
+              </el-cascader>
+            </el-form-item>
+            <el-form-item label="">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入仓库类别" maxlength="20" clearable style="width: 140px;float: left;"/>
+                <el-col :span="1.5">
+                    <el-button
+                    type="primary"
+                    plain
+                    icon="el-icon-plus"
+                    size="mini"
+                    @click="handleAddAll"
+                    >新增</el-button>
+                </el-col>
+            </el-form-item>
+            <div class="master-depot-main">
+              <div class="master-depot-item"
+                v-for="child in allDepots"
+              >
+                <p >{{child.name}}</p>
+                <div class="button-wrap">
+                  <el-button style="padding: 5px 5px;"
+                  type="primary"
+                  plain
+                  icon="el-icon-edit"
+                  size="mini"
+                  @click="handleAddAll"
+                  ></el-button>
+                  <el-button style="padding: 5px 5px;"
+                  type="primary"
+                  plain
+                  icon="el-icon-delete"
+                  size="mini"
+                  @click="handleAddAll"
+                  ></el-button>
+                </div>
+              </div>
+            </div>
+        </el-form>
+      </div>
+      <div class="depotright">
+        <el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
+            <el-form-item label="所属区域" prop="areaId">
+              <el-cascader v-model="queryParams.areaId"
+                :options="treeAreaOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
+                :props="{
+                  emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
+                  checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
+                  value:'id',label:'label'
+                }" clearable @change="handleAreaChange">
+              </el-cascader>
+            </el-form-item>
+            <el-form-item label="仓库类别">
+                <el-input v-model="queryParams.categoryName" placeholder="请输入仓库类别" maxlength="20" clearable style="width: 220px"/>
+            </el-form-item>
+            <el-form-item>
+                <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
+                <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
+            </el-form-item>
+        </el-form>
+
+        <el-row :gutter="10" class="mb8">
+            <el-col :span="1.5">
+                <el-button
+                type="primary"
+                plain
+                icon="el-icon-plus"
+                size="mini"
+                @click="handleAdd"
+                >新增</el-button>
+            </el-col>
+            <right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
+        </el-row>
+
+        <el-table v-loading="loading" :data="tableListData" height="800" ref="multipleTable">
+            <el-table-column label="序号" align="center" width="80" type="index" fixed="left">
+                    <template slot-scope="scope">
+                        <span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
+                    </template>
+            </el-table-column>
+            <el-table-column label="仓库类别名称" align="center" prop="categoryName" :show-overflow-tooltip="true" >
+            </el-table-column>
+            <el-table-column label="所属区域" align="center" prop="areaName" :show-overflow-tooltip="true" >
+            </el-table-column>
+            <!-- <el-table-column label="创建人" align="center" prop="createBy" :show-overflow-tooltip="true" >
+            </el-table-column>  -->
+            <el-table-column label="创建时间" align="center" prop="createTime" :show-overflow-tooltip="true" >
+            </el-table-column>
+            <el-table-column label="操作" align="center" width="200" class-name="small-padding fixed-width" fixed="right">
+                <template slot-scope="scope">
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-edit"
+                        @click="handleUpdate(scope.row)"
+                    >修改</el-button>
+                    <el-button
+                        size="mini"
+                        type="text"
+                        icon="el-icon-delete"
+                        @click="handleDelete(scope.row)"
+                    >删除</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <pagination
+        v-show="total>0"
+        :total="total"
+        :page.sync="queryParams.pageNum"
+        :limit.sync="queryParams.pageSize"
+        @pagination="getList"
+        />
+        <!-- 对话框 -->
+        <el-dialog :title="title" :visible.sync="open" width="680px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="所属区域" prop="areaId">
+                            <el-cascader v-model="form.areaId"
+                            :options="treeAreaOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
+                            :props="{
+                                emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
+                                checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
+                                value:'id',label:'label'
+                            }" clearable>
+                            </el-cascader>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="仓库类别名称" prop="categoryName">
+                            <el-input v-model="form.categoryName" placeholder="请输入仓库类别名称" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog :title="titleAll" :visible.sync="openAll" width="680px" append-to-body>
+            <el-form ref="form" :model="form" :rules="rules" label-width="120px">
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="所属区域" prop="areaId">
+                            <el-cascader v-model="form.areaId"
+                            :options="treeAreaOptions" :filterable="true" style="width: 100%;" :show-all-levels="false"
+                            :props="{
+                                emitPath: false,// 若设置 false，则只返回该节点的值，只返回最后选择的id
+                                checkStrictly: false,//来设置父子节点取消选中关联，从而达到选择任意一级选项的目的
+                                value:'id',label:'label'
+                            }" clearable>
+                            </el-cascader>
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+                <div>
+                  <div>
+                    <table>
+                      <tr>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                      </tr>
+                      <tr>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                        <td></td>
+                      </tr>
+                    </table>
+                  </div>
+                </div>
+                <el-row>
+                    <el-col :span="24">
+                        <el-form-item label="仓库类别名称" prop="categoryName">
+                            <el-input v-model="form.categoryName" placeholder="请输入仓库类别名称" />
+                        </el-form-item>
+                    </el-col>
+                </el-row>
+            </el-form>
+            <div slot="footer" class="dialog-footer">
+                <el-button type="primary" @click="submitForm">确 定</el-button>
+                <el-button @click="cancel">取 消</el-button>
+            </div>
+        </el-dialog>
+        <el-dialog :visible.sync="dialogVisible">
+            <img width="100%" :src="dialogImageUrl" alt="">
+        </el-dialog>
+      </div>
+
+    </div>
+</template>
+
+<script>
+import { systemAreaTreeApi } from "@/api/base/stall";
+import { getWareHouseCategoryPageApi,addWareHouseCategoryApi,editWareHouseCategoryApi,delWareHouseCategoryApi } from "@/api/stockManage/index";
+export default {
+    name: "",
+    dicts: [],
+    data() {
+        return {
+            // 遮罩层
+            loading: true,
+            // 选中数组
+            ids: [],
+            // 非单个禁用
+            single: true,
+            // 非多个禁用
+            multiple: true,
+            // 显示搜索条件
+            showSearch: true,
+            // 总条数
+            total: 0,
+            //表格数据
+            tableListData: [],
+            title:"",
+            // 是否显示弹出层
+            open: false,
+            titleAll:"",
+            // 是否显示弹出层
+            openAll: false,
+            allDepots:[{"id":"111","name":"总仓库一"},{"id":"222","name":"总仓库二"},{"id":"333","name":"总仓库三"}],
+            chronicOptions:[],
+            treeAreaOptions:[],
+            // 查询参数
+            queryParams: {
+                pageNum: 1,
+                pageSize: 10,
+                categoryName: null,
+                areaId: null,
+            },
+            form: {
+                areaId:null,
+                categoryName:null,
+            },//详情
+            rules: {
+                areaId: [
+                    { required: true, message: "所属区域不能为空", trigger: "blur" }
+                ],
+                categoryName: [
+                    { required: true, message: "仓库类别名称不能为空", trigger: "blur" }
+                ]
+            }
+        };
+    },
+    created() {
+        this.getList()
+        this.getAreaTreeData();
+    },
+    methods: {
+        //区域树
+        getAreaTreeData() {
+            systemAreaTreeApi({}).then((response) => {
+                this.treeAreaOptions = response.data;
+            });
+        },
+        /** 搜索按钮操作 */
+        handleQuery() {
+            this.queryParams.pageNum = 1;
+            this.getList();
+        },
+        /** 重置按钮操作 */
+        resetQuery() {
+            this.queryParams = {
+                pageNum: 1,
+                pageSize: 10,
+                areaId:null,
+                categoryName: null
+            }
+            this.resetForm("queryForm");
+            this.handleQuery();
+        },
+        /** 查询列表 */
+        getList() {
+            this.loading = true;
+            let param = {
+                ...this.queryParams
+            }
+            getWareHouseCategoryPageApi(param).then(response => {
+                this.tableListData = response.rows;
+                this.total = Number(response.total);
+                this.loading = false;
+            });
+        },
+        // 取消按钮
+        cancel() {
+            this.open = false;
+            this.reset();
+        },
+        // 表单重置
+        reset() {
+            this.form = {
+                areaId:null,
+                categoryName:null,
+            };
+            this.resetForm("form");
+        },
+        resetAll() {
+            this.form = {
+                areaIdAll:null,
+                categoryNameAll:null,
+            };
+            this.resetForm("form");
+        },
+        handleAddAll() {
+            this.resetAll();
+            this.openAll = true;
+            this.titleAll = "新增总仓";
+        },
+        /** 新增按钮操作 */
+        handleAdd() {
+            this.reset();
+            this.open = true;
+            this.title = "新增";
+        },
+        handleUpdate(row) {
+            this.form = Object.assign({}, row);
+            this.open = true;
+            this.title = "修改";
+        },
+        /** 提交按钮 */
+        submitForm: function() {
+            this.$refs["form"].validate(valid => {
+                if (valid) {
+                    if (this.form.categoryId != undefined) {
+                        editWareHouseCategoryApi(this.form).then(response => {
+                            this.$modal.msgSuccess("修改成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    } else {
+                        addWareHouseCategoryApi(this.form).then(response => {
+                            this.$modal.msgSuccess("新增成功");
+                            this.open = false;
+                            this.getList();
+                        });
+                    }
+                }
+            });
+        },
+        handleDelete(row) {
+            this.$modal.confirm('是否确认删除数据项？').then(function() {
+                return delWareHouseCategoryApi({categoryId:row.categoryId});
+            }).then(() => {
+                this.getList();
+                this.$modal.msgSuccess("删除成功");
+            }).catch(() => {});
+        }
+    }
+};
+</script>
+<style lang="scss" scoped>
+    .app-container {
+        height: calc(100vh - 84px);
+        padding: 20px;
+        -webkit-box-sizing: border-box;
+        box-sizing: border-box;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-orient: vertical;
+        -webkit-box-direction: normal;
+        -ms-flex-direction: column;
+        flex-direction: row;
+        overflow-x: auto;
+    }
+    .depotleft{
+      float: left;
+      width: 16%;
+    }
+    .depotright{
+      float: left;
+      width: 82%;
+    }
+    .master-depot-main {
+        padding: 15px 0;
+        height: calc(100% - 100px);
+        overflow-y: auto;
+    }
+    .master-depot-main .master-depot-item {
+        padding: 0 5px 0 15px;
+        cursor: pointer;
+        line-height: 40px;
+        display: -webkit-box;
+        display: -ms-flexbox;
+        display: flex;
+        -webkit-box-align: center;
+        -ms-flex-align: center;
+        align-items: center;
+        -webkit-box-pack: justify;
+        -ms-flex-pack: justify;
+        justify-content: space-between;
+        border-bottom: 1px solid #f5f7fa;
+    }
+    .remind-question{
+        width: 100%;
+        height: 50px;
+        font-size: 22px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .remind-title{
+        width: 100%;
+        height: 40px;
+        font-size: 16px;
+        font-weight: bold;
+        color: #000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    //隐藏图片上传框的css
+    ::v-deep.disabled {
+        .el-upload--picture-card {
+            display: none;
+        }
+    }
+</style>