Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pelaporan kerugian pengurusan gudang

Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan kerugian pengurusan gudang

Dalam sistem pengurusan gudang, pengurusan kerugian adalah fungsi penting, yang boleh membantu syarikat menemui dan mengendalikan kehilangan barang dalam situasi gudang tepat pada masanya , mengurangkan kerugian dan meningkatkan kecekapan. Dalam artikel ini, kami akan memperkenalkan cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pelaporan kerugian dalam sistem pengurusan gudang, dan menyediakan contoh kod khusus untuk membantu pembaca memahami dan menggunakan dengan lebih baik.

Pertama, kita perlu menyediakan persekitaran asas untuk menjalankan kod kita. Kami akan menggunakan PHP sebagai bahasa back-end, Vue sebagai rangka kerja front-end, dan MySQL sebagai pangkalan data untuk merealisasikan pelbagai fungsi pengurusan laporan kerugian. Sila pastikan anda telah memasang PHP, Vue dan MySQL, dan mengkonfigurasi persekitaran yang berkaitan.

Pertama, kita perlu mencipta jadual pangkalan data untuk menyimpan maklumat laporan kehilangan. Kami mencipta jadual bernama "kerosakan", yang mengandungi medan berikut:

• id: pengecam unik rekod kerosakan
• product_id: ID produk yang rosak
• kuantiti: kuantiti kerosakan yang dilaporkan
• tarikh : Tarikh laporan kerugian
• sebab: Sebab laporan kerugian

Anda boleh menggunakan pernyataan SQL berikut untuk mencipta jadual ini:

CREATE TABLE damage (
  id INT(11) AUTO_INCREMENT PRIMARY KEY,
  product_id INT(11) NOT NULL,
  quantity INT(11) NOT NULL,
  date DATE NOT NULL,
  reason TEXT
);

Seterusnya, kita perlu mencipta fail PHP untuk mengendalikan penambahan, pertanyaan, pengubahsuaian dan pemadaman kehilangan maklumat laporan. Kami akan mencipta fail bernama "damage.php" dan melaksanakan fungsi berikut dalam fail ini:

1. Soal semua laporan kerosakan:

<?php
  header('Content-Type: application/json');

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

  // 查询所有报损记录
  $result = $conn->query("SELECT * FROM damage");

  // 将结果转换为JSON格式并返回
  echo json_encode($result->fetch_all(MYSQLI_ASSOC));

  // 关闭数据库连接
  $conn->close();
?>

2. Tambah laporan kerosakan:

<?php
  header('Content-Type: application/json');

  // 获取POST请求的参数
  $product_id = $_POST['product_id'];
  $quantity = $_POST['quantity'];
  $date = $_POST['date'];
  $reason = $_POST['reason'];

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

  // 插入报损记录
  $conn->query("INSERT INTO damage (product_id, quantity, date, reason) VALUES ('$product_id', '$quantity', '$date', '$reason')");

  // 返回成功的响应
  echo json_encode(['status' => 'success']);

  // 关闭数据库连接
  $conn->close();
?>

3. Ubah suai satu rekod laporan Kerugian:

<?php
  header('Content-Type: application/json');

  // 获取POST请求的参数
  $id = $_POST['id'];
  $quantity = $_POST['quantity'];
  $reason = $_POST['reason'];

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

  // 更新报损记录
  $conn->query("UPDATE damage SET quantity='$quantity', reason='$reason' WHERE id='$id'");

  // 返回成功的响应
  echo json_encode(['status' => 'success']);

  // 关闭数据库连接
  $conn->close();
?>

Padam rekod laporan kehilangan:

<?php
  header('Content-Type: application/json');

  // 获取POST请求的参数
  $id = $_POST['id'];

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

  // 删除报损记录
  $conn->query("DELETE FROM damage WHERE id='$id'");

  // 返回成功的响应
  echo json_encode(['status' => 'success']);

  // 关闭数据库连接
  $conn->close();
?>

Seterusnya, kita perlu menggunakan Vue untuk mencipta antara muka hadapan untuk memaparkan rekod laporan kehilangan dan menyediakan fungsi menambah, mengedit dan memadam. Kami akan menggunakan pembangunan komponen Vue untuk mencipta komponen bernama "DamageManagement.vue", yang mengandungi fungsi berikut:

Paparkan senarai semua laporan kerugian
Sediakan borang untuk menambah laporan kerugian
Sediakan penyuntingan Bentuk kerugian report
menyediakan fungsi memadam laporan kerugian

Berikut adalah contoh kod mudah:

<template>
  <div>
    <table>
      <thead>
        <tr>
          <th>ID</th>
          <th>商品ID</th>
          <th>报损数量</th>
          <th>报损日期</th>
          <th>报损原因</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="record in records" :key="record.id">
          <td>{{ record.id }}</td>
          <td>{{ record.product_id }}</td>
          <td>{{ record.quantity }}</td>
          <td>{{ record.date }}</td>
          <td>{{ record.reason }}</td>
          <td>
            <button @click="edit(record)">编辑</button>
            <button @click="delete(record.id)">删除</button>
          </td>
        </tr>
      </tbody>
    </table>

    <form v-if="mode === 'add' || mode === 'edit'" @submit.prevent="submit">
      <div>
        <label>商品ID</label>
        <input type="text" v-model="product_id" required>
      </div>
      <div>
        <label>报损数量</label>
        <input type="number" v-model="quantity" required>
      </div>
      <div>
        <label>报损日期</label>
        <input type="date" v-model="date" required>
      </div>
      <div>
        <label>报损原因</label>
        <textarea v-model="reason" required></textarea>
      </div>
      <button type="submit">{{ mode === 'edit' ? '保存' : '添加' }}</button>
    </form>
  </div>
</template>

<script>
export default {
  data() {
    return {
      records: [],
      mode: "view",
      product_id: "",
      quantity: "",
      date: "",
      reason: "",
      selectedRecord: null,
    };
  },
  created() {
    this.fetchRecords();
  },
  methods: {
    fetchRecords() {
      // 发起请求获取所有的报损记录
      // ...

      // 将结果存储到records中
      // this.records = ...
    },
    add() {
      // 切换到添加模式
      this.mode = "add";
    },
    edit(record) {
      // 切换到编辑模式，并将选中的记录赋值给selectedRecord
      this.mode = "edit";
      this.selectedRecord = record;
      this.product_id = record.product_id;
      this.quantity = record.quantity;
      this.date = record.date;
      this.reason = record.reason;
    },
    delete(id) {
      // 发起请求删除指定ID的报损记录
      // ...
    },
    submit() {
      if (this.mode === "add") {
        // 发起请求添加报损记录
        // ...
      } else if (this.mode === "edit") {
        // 发起请求更新指定ID的报损记录
        // ...
      }

      // 切换回查看模式，并重置表单数据
      this.mode = "view";
      this.selectedRecord = null;
      this.product_id = "";
      this.quantity = "";
      this.date = "";
      this.reason = "";
    },
  },
};
</script>

Saya harap melalui contoh ini, pembaca dapat lebih memahami dan mengaplikasikan PHP dan Vue untuk melaksanakan fungsi pengurusan laporan kehilangan sistem pengurusan gudang. Sudah tentu, dalam aplikasi sebenar, pengubahsuaian dan pelarasan yang sesuai perlu dibuat mengikut keperluan perniagaan tertentu. Pelaksanaan beberapa fungsi dalam contoh kod hanyalah contoh mudah, dan beberapa faktor lain perlu dipertimbangkan semasa proses pembangunan sebenar, seperti pengesahan data, kawalan kebenaran, dsb. Saya harap artikel ini dapat membantu pembaca, terima kasih kerana membaca!

Atas ialah kandungan terperinci Cara menggunakan PHP dan Vue untuk melaksanakan fungsi pengurusan pelaporan kerugian pengurusan gudang. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!