How to use PHP and Vue to develop the outbound management function of warehouse management

How to use PHP and Vue to develop the outbound management function of warehouse management

With the rapid development of e-commerce business, warehouse management systems have become indispensable in the daily operations of many enterprises. A missing part. Among them, the outbound management function is one of the important links in warehouse management. This article will introduce how to use PHP and Vue to develop a simple and practical outbound management function, and provide specific code examples.

1. Analysis of requirements for the outbound management function

Before starting development, we need to clarify the requirements for the outbound management function. Generally speaking, the outbound management function should include the following aspects:

1. Outbound order management: including the creation, query, editing, deletion and other functions of outbound orders.
2. Manage outbound items: including functions such as selecting outbound items, setting outbound quantities, and viewing details of outbound items.
3. Outbound record management: Record relevant information for each outbound shipment, including item information, quantity, time, etc.

2. Technology Selection

In order to realize the outbound management function, we chose to use PHP as the back-end development language and Vue as the front-end development framework.

PHP is a scripting language that is easy to learn and use and has a wide range of applications. Vue is a lightweight JavaScript framework that can help us build interactive user interfaces.

3. Database design

Before we start writing code, we need to design a database table to store information related to the outbound database. The following is a simple example:

1. Outbound order table (stock_out)

   • id: outbound order ID
   • out_date: out Stock date
   • operator: Operator

2. Outbound item table (stock_out_items)

   • id: Outbound item ID
   • out_id: Outbound order ID
   • item_name: Item name
   • item_qty: Outbound quantity

IV. End code implementation

First, we create a file named "stock_out.php", which will handle the back-end logic related to out-of-stock management.

<?php

// 连接数据库
$conn = new mysqli("localhost", "username", "password", "database");

// 检查连接是否成功
if ($conn->connect_error) {
  die("数据库连接失败: " . $conn->connect_error);
}

// 获取出库单列表
function getStockOutList() {
  global $conn;
  $sql = "SELECT * FROM stock_out";
  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
    $output = array();
    while($row = $result->fetch_assoc()) {
      $output[] = $row;
    }
    return $output;
  } else {
    return array();
  }
}

// 创建出库单
function createStockOut($out_date, $operator) {
  global $conn;
  $sql = "INSERT INTO stock_out (out_date, operator) VALUES ('$out_date', '$operator')";

  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

// 删除出库单
function deleteStockOut($id) {
  global $conn;
  $sql = "DELETE FROM stock_out WHERE id = '$id'";

  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

// 获取出库物品列表
function getStockOutItems($out_id) {
  global $conn;
  $sql = "SELECT * FROM stock_out_items WHERE out_id = '$out_id'";
  $result = $conn->query($sql);

  if ($result->num_rows > 0) {
    $output = array();
    while($row = $result->fetch_assoc()) {
      $output[] = $row;
    }
    return $output;
  } else {
    return array();
  }
}

// 创建出库物品
function createStockOutItem($out_id, $item_name, $item_qty) {
  global $conn;
  $sql = "INSERT INTO stock_out_items (out_id, item_name, item_qty) VALUES ('$out_id', '$item_name', '$item_qty')";

  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

// 删除出库物品
function deleteStockOutItem($id) {
  global $conn;
  $sql = "DELETE FROM stock_out_items WHERE id = '$id'";

  if ($conn->query($sql) === TRUE) {
    return true;
  } else {
    return false;
  }
}

5. Front-end code implementation

In the front-end code, we use the Vue framework to handle the interaction logic of the outbound management function. The following is a simple example:

<div id="app">
  <h2 id="出库单管理">出库单管理</h2>

  <div v-for="stockOut in stockOutList">
    <p>出库单ID: {{ stockOut.id }}</p>
    <p>出库日期: {{ stockOut.out_date }}</p>
    <p>操作人员: {{ stockOut.operator }}</p>

    <button @click="deleteStockOut(stockOut.id)">删除</button>
  </div>

  <h2 id="出库物品管理">出库物品管理</h2>

  <div>
    <input type="text" v-model="item.name" placeholder="物品名称">
    <input type="number" v-model="item.qty" placeholder="出库数量">
    <button @click="createStockOutItem">添加</button>
  </div>

  <div v-for="item in stockOutItems">
    <p>物品名称: {{ item.item_name }}</p>
    <p>出库数量: {{ item.item_qty }}</p>

    <button @click="deleteStockOutItem(item.id)">删除</button>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      stockOutList: [],
      stockOutItems: [],
      item: {
        name: "",
        qty: 0
      }
    },
    mounted() {
      // 获取出库单列表
      this.getStockOutList();
    },
    methods: {
      // 获取出库单列表
      getStockOutList() {
        axios.get("stock_out.php?action=getStockOutList")
          .then(response => {
            this.stockOutList = response.data;
          })
          .catch(error => {
            console.error(error);
          });
      },

      // 删除出库单
      deleteStockOut(id) {
        axios.get(`stock_out.php?action=deleteStockOut&id=${id}`)
          .then(response => {
            if (response.data === true) {
              this.getStockOutList();
              alert("删除成功");
            } else {
              alert("删除失败");
            }
          })
          .catch(error => {
            console.error(error);
          });
      },

      // 添加出库物品
      createStockOutItem() {
        axios.post("stock_out.php?action=createStockOutItem", this.item)
          .then(response => {
            if (response.data === true) {
              this.getStockOutItems();
              alert("添加成功");
            } else {
              alert("添加失败");
            }
          })
          .catch(error => {
            console.error(error);
          });
      },

      // 删除出库物品
      deleteStockOutItem(id) {
        axios.get(`stock_out.php?action=deleteStockOutItem&id=${id}`)
          .then(response => {
            if (response.data === true) {
              this.getStockOutItems();
              alert("删除成功");
            } else {
              alert("删除成功");
            }
          })
          .catch(error => {
            console.error(error);
          });
      }
    }
  });
</script>

6. Summary

The above are the detailed steps and specific code examples for developing the outbound management function of warehouse management using PHP and Vue. In this way, we can easily manage outbound orders and outbound items, improving the efficiency and accuracy of warehouse management. Hope this article is helpful to you.

The above is the detailed content of How to use PHP and Vue to develop the outbound management function of warehouse management. For more information, please follow other related articles on the PHP Chinese website!