You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
canteen/Inventory.vue

48 lines
1.4 KiB

<template>
<div id="inventoryContainer">
<h2>食品管理表</h2>
<el-table :data="inventoryStore.inventoryListGetter" border style="width: 100%; height: 100%;">
<el-table-column prop="id" label="序号" width="200" />
<el-table-column prop="dishName" label="食品名称" width="300" />
<el-table-column prop="price" label="价格">
<template #default="scope">
<el-input v-model="scope.row.price" style="width: 80px;"></el-input> 元
</template>
</el-table-column>
<el-table-column prop="quantity" label="库存">
<template #default="scope">
剩余 <el-input v-model="scope.row.quantity" style="width: 80px;"></el-input>
</template>
</el-table-column>
<el-table-column prop="quantity" label="确认修改" width="120">
<template #default="scope">
<el-button type="primary" @click="inventoryStore.updateInventoryList(scope.row)"></el-button>
</template>
</el-table-column>
</el-table>
</div>
</template>
<script lang="ts" setup>
import { onBeforeMount, } from "vue"
import { useInventoryStore } from "../store/inventoryStore"
const inventoryStore = useInventoryStore()
onBeforeMount(async () => {
await inventoryStore.getInventoryList()
})
</script>
<style scoped>
#inventoryContainer {
display: flex;
flex-direction: column;
align-items: start;
width: 90vw;
}
</style>