vue 关于仓库出入库制作清单

对于仓库出入库制作清单，你可以使用 Vue 进行开发。你需要创建一个表单，其中包含出入库类型、物品名称、数量、单价等字段，然后将表单数据存储到数据库中。

以下是一个简单的示例代码，可以帮助你快速入门：

1. 创建 Vue 实例

new Vue({
  el: '#app',
  data: {
    inventoryList: [], // 仓库清单列表
    newItem: {
      type: '',
      name: '',
      quantity: 0,
      price: 0
    } // 新物品
  },
  methods: {
    // 添加新物品到清单列表
    addItem: function() {
      this.inventoryList.push(this.newItem);
      this.newItem = {
        type: '',
        name: '',
        quantity: 0,
        price: 0
      };
    },
    // 移除指定索引的物品
    removeItem: function(index) {
      this.inventoryList.splice(index, 1);
    },
    // 计算总金额
    getTotal: function() {
      let total = 0;
      for (let i = 0; i < this.inventoryList.length; i++) {
        total += this.inventoryList[i].quantity * this.inventoryList[i].price;
      }
      return total;
    }
  }
});

2. 创建 HTML 模板

<div id="app">
  <h1>仓库清单</h1>
  <form>
    <label for="type">出入库类型：</label>
    <select id="type" v-model="newItem.type">
      <option value="in">入库</option>
      <option value="out">出库</option>
    </select>
    <br>
    <label for="name">物品名称：</label>
    <input type="text" id="name" v-model="newItem.name">
    <br>
    <label for="quantity">数量：</label>
    <input type="number" id="quantity" v-model.number="newItem.quantity">
    <br>
    <label for="price">单价：</label>
    <input type="number" id="price" v-model.number="newItem.price">
    <br>
    <button type="button" @click="addItem()">添加</button>
  </form>
  <ul>
    <li v-for="(item, index) in inventoryList">
      {{ item.type }} - {{ item.name }} - {{ item.quantity }} - {{ item.price }} - {{ item.quantity * item.price }}
      <button type="button" @click="removeItem(index)">移除</button>
    </li>
  </ul>
  <p>总金额：{{ getTotal() }}</p>
</div>

3. 添加样式

ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

li {
  margin-bottom: 10px;
}

button {
  margin-left: 10px;
}

以上代码将创建一个简单的仓库清单应用程序，你可以根据自己的需求进行修改和扩展。同时，你还需要根据实际情况，将表单数据存储到数据库中，并根据需要进行数据展示和导出。