68 lines
1.7 KiB
Vue
68 lines
1.7 KiB
Vue
<template>
|
|
<div class="food-step-form">
|
|
<div class="button-container">
|
|
<el-button type="primary" @click="addClick">新增</el-button>
|
|
</div>
|
|
|
|
<el-table :data="foodStore.currentRecipe.stepList"
|
|
border stripe @row-click="handleRowClick" class="food-step-table">
|
|
<el-table-column type="index" align="center" width="40" />
|
|
<el-table-column prop="content" label="内容" align="center" min-width="20%" />
|
|
<el-table-column prop="imageUrl" label="图片" align="center" min-width="20%">
|
|
<template #default="scope">
|
|
<el-image v-if="scope.row.imageUrl" :src="serviceFileRootPath + scope.row.imageUrl" />
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
</div>
|
|
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useFoodStore } from '@/store/food'
|
|
import type { IStep } from '@/types/food'
|
|
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
|
|
import { serviceFileRootPath } from '@/utils'
|
|
|
|
const foodStore = useFoodStore()
|
|
|
|
const addClick = () => {
|
|
foodStore.stepApiType = 'ADD'
|
|
// foodStore.foodStepImageList = []
|
|
foodStore.stepDialog = {
|
|
title: '新增步骤',
|
|
visible: true,
|
|
data: foodStore.getEmptyStep()
|
|
}
|
|
}
|
|
|
|
const handleRowClick = (row: IStep) => {
|
|
foodStore.editStepIndex = foodStore.currentRecipe.stepList.indexOf(row)
|
|
foodStore.stepApiType = 'UPDATE'
|
|
foodStore.stepDialog = {
|
|
title: '编辑步骤',
|
|
visible: true,
|
|
data: deepCopyObject(row)
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.food-step-form {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 5px;
|
|
|
|
.food-step-table {
|
|
.el-image {
|
|
width: 100%;
|
|
height: 100%;
|
|
|
|
max-height: 200px;
|
|
max-width: 200px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|