51 lines
1.4 KiB
Vue
51 lines
1.4 KiB
Vue
<template>
|
|
<div class="food-material-form">
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="addClick">新增</el-button>
|
|
</div>
|
|
<el-table :data="foodStore.currentRecipe.materialList"
|
|
border stripe @row-click="handleRowClick" class="material-table">
|
|
<el-table-column type="index" align="center" width="40" />
|
|
<el-table-column prop="type" label="类型" align="center" min-width="10%"/>
|
|
<el-table-column prop="name" label="名称" align="center" min-width="20%"/>
|
|
<el-table-column prop="amount" label="分量" align="center" min-width="20%"/>
|
|
</el-table>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFoodStore } from '@/store/food'
|
|
import type { IMaterial } from '@/types/food'
|
|
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
const addClick = () => {
|
|
foodStore.materialApiType = 'ADD'
|
|
foodStore.materialDialog = {
|
|
title: '新增食材',
|
|
visible: true,
|
|
data: foodStore.getEmptyMaterial()
|
|
}
|
|
}
|
|
|
|
const handleRowClick = (row: IMaterial) => {
|
|
foodStore.editMaterialIndex = foodStore.currentRecipe.materialList.indexOf(row)
|
|
foodStore.materialApiType = 'UPDATE'
|
|
foodStore.materialDialog = {
|
|
title: '编辑食材',
|
|
visible: true,
|
|
data: deepCopyObject(row)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.food-material-form {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
}
|
|
</style>
|