完成菜品修改
This commit is contained in:
huangdeliang
@ -0,0 +1,321 @@
|
||||
<template>
|
||||
<div class="recipes_com_wrapper">
|
||||
<el-table
|
||||
:data="mData"
|
||||
border
|
||||
:span-method="spanMethod"
|
||||
:cell-style="{ padding: '2px 0' }"
|
||||
:header-cell-style="{ padding: '4px 0', height: 'unset' }"
|
||||
size="mini"
|
||||
:style="`outline: ${
|
||||
currentDay + 1 === num ? '1px solid #d96969' : 'none'
|
||||
}`"
|
||||
>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:formatter="typeFormatter"
|
||||
:width="100"
|
||||
align="center"
|
||||
>
|
||||
<template slot="header">
|
||||
<span class="num_day" @click="handleOnOneDayAnalysis">{{
|
||||
`${name}第${num}天`
|
||||
}}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="菜品" prop="name" align="center">
|
||||
<template slot="header">
|
||||
<el-popover placement="top" trigger="hover">
|
||||
<el-button
|
||||
type="primary"
|
||||
size="mini"
|
||||
icon="el-icon-edit"
|
||||
class="fun_button"
|
||||
@click="handleOnAdd"
|
||||
>添加</el-button
|
||||
>
|
||||
<span class="num_day" slot="reference">菜品</span>
|
||||
</el-popover>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-popover placement="right" trigger="hover">
|
||||
<div>
|
||||
<el-button
|
||||
type="danger"
|
||||
size="mini"
|
||||
icon="el-icon-delete"
|
||||
class="fun_button"
|
||||
@click="handleOnDelete(scope.row)"
|
||||
>删除</el-button
|
||||
>
|
||||
</div>
|
||||
<span class="num_day" slot="reference">{{ scope.row.name }}</span>
|
||||
</el-popover>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="食材" prop="igdName" align="center" />
|
||||
<el-table-column label="分量估算" :width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<EditableUnit
|
||||
:weight="scope.row.cusWeight"
|
||||
:unit="scope.row.cusUnit"
|
||||
@onChange="(val) => handleOnCustomUnitChange(scope.row, val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="质量(g)" prop="weight" :width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<EditableText
|
||||
:value="scope.row.weight"
|
||||
@onChange="(val) => handleOnWeightChange(scope.row, val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
label="蛋白质/100g"
|
||||
prop="proteinRatio"
|
||||
:width="100"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="脂肪/100g"
|
||||
prop="fatRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="碳水/100g"
|
||||
prop="carbonRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column
|
||||
label="蛋白质含量"
|
||||
prop="proteinRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
:formatter="nutriFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="脂肪含量"
|
||||
prop="fatRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
:formatter="nutriFormatter"
|
||||
/>
|
||||
<el-table-column
|
||||
label="碳水含量"
|
||||
prop="carbonRatio"
|
||||
:width="90"
|
||||
align="center"
|
||||
:formatter="nutriFormatter"
|
||||
/>
|
||||
<el-table-column label="做法" prop="methods" />
|
||||
</el-table>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const {
|
||||
mapActions,
|
||||
mapGetters,
|
||||
mapState,
|
||||
mapMutations,
|
||||
} = createNamespacedHelpers("recipes");
|
||||
|
||||
import EditableText from "./EditableText";
|
||||
import EditableUnit from "./EditableUnit";
|
||||
|
||||
export default {
|
||||
name: "RecipesCom",
|
||||
props: {
|
||||
data: {
|
||||
type: Object,
|
||||
default: [],
|
||||
required: true,
|
||||
},
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
num: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
},
|
||||
components: {
|
||||
EditableText,
|
||||
EditableUnit,
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.data);
|
||||
},
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
computed: {
|
||||
mData() {
|
||||
if (!this.data.dishes) {
|
||||
return [];
|
||||
}
|
||||
const mData = this.data.dishes
|
||||
.sort((a, b) => a.type - b.type)
|
||||
.reduce((arr, cur, idx) => {
|
||||
if (cur.id > 0 && cur.type !== "0") {
|
||||
cur.igdList.forEach((igd) => {
|
||||
let lastTypeHit = false,
|
||||
lastNameHit = false;
|
||||
if (arr.length > 0) {
|
||||
// 倒推，找到第一个出现的位置
|
||||
lastTypeHit = arr[arr.length - 1].type === cur.type;
|
||||
if (lastTypeHit) {
|
||||
let typePos = arr.length - 1;
|
||||
for (let i = typePos; i >= 0; i--) {
|
||||
if (arr[i].type !== cur.type) {
|
||||
break;
|
||||
}
|
||||
typePos = i;
|
||||
}
|
||||
arr[typePos].typeSpan.rowspan += 1;
|
||||
}
|
||||
lastNameHit = arr[arr.length - 1].name === cur.name;
|
||||
if (lastNameHit) {
|
||||
let namePos = arr.length - 1;
|
||||
for (let i = namePos; i >= 0; i--) {
|
||||
if (arr[i].name !== cur.name) {
|
||||
break;
|
||||
}
|
||||
namePos = i;
|
||||
}
|
||||
arr[namePos].nameSpan.rowspan += 1;
|
||||
arr[namePos].methodsSpan.rowspan += 1;
|
||||
}
|
||||
}
|
||||
|
||||
arr.push({
|
||||
id: cur.id,
|
||||
name: cur.name,
|
||||
type: cur.type,
|
||||
isMain: cur.isMain,
|
||||
methods: cur.methods,
|
||||
igdId: igd.id,
|
||||
igdName: igd.name,
|
||||
proteinRatio: igd.proteinRatio,
|
||||
fatRatio: igd.fatRatio,
|
||||
carbonRatio: igd.carbonRatio,
|
||||
rec: igd.rec,
|
||||
notRec: igd.notRec,
|
||||
weight: igd.weight,
|
||||
cusWeight: igd.cusWeight,
|
||||
cusUnit: igd.cusUnit,
|
||||
typeSpan: lastTypeHit
|
||||
? {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
: {
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
},
|
||||
nameSpan: lastNameHit
|
||||
? {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
: {
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
},
|
||||
methodsSpan: lastNameHit
|
||||
? {
|
||||
rowspan: 0,
|
||||
colspan: 0,
|
||||
}
|
||||
: {
|
||||
rowspan: 1,
|
||||
colspan: 1,
|
||||
},
|
||||
});
|
||||
});
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
// console.log(mData);
|
||||
return mData;
|
||||
},
|
||||
...mapGetters(["typeDict"]),
|
||||
...mapState(["currentDay"]),
|
||||
},
|
||||
methods: {
|
||||
spanMethod({ row, column, rowIndex, columnIndex }) {
|
||||
if (columnIndex === 0) {
|
||||
return row.typeSpan;
|
||||
} else if (columnIndex === 1) {
|
||||
return row.nameSpan;
|
||||
} else if (columnIndex === 11) {
|
||||
return row.methodsSpan;
|
||||
}
|
||||
},
|
||||
typeFormatter(row) {
|
||||
return this.typeDict[row.type];
|
||||
},
|
||||
nutriFormatter(row, col) {
|
||||
return ((row.weight / 100) * row[col.property]).toFixed(1);
|
||||
},
|
||||
handleOnOneDayAnalysis(e) {
|
||||
// 校验某天
|
||||
this.setCurrentDay({ currentDay: this.num - 1 });
|
||||
},
|
||||
handleOnAdd() {
|
||||
console.log(this.num);
|
||||
},
|
||||
handleOnEdit(data) {
|
||||
console.log(data);
|
||||
},
|
||||
handleOnDelete(data) {
|
||||
// console.log(data);
|
||||
this.deleteSomeDayDishes({ num: this.num - 1, dishesId: data.id });
|
||||
},
|
||||
handleOnWeightChange(data, weight) {
|
||||
// console.log({ data, weight });
|
||||
this.updateRecipesDishesWeight({
|
||||
num: this.num - 1,
|
||||
dishesId: data.id,
|
||||
igdId: data.igdId,
|
||||
weight,
|
||||
});
|
||||
},
|
||||
handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
|
||||
this.updateRecipesDishesCustomWeight({
|
||||
num: this.num - 1,
|
||||
dishesId: data.id,
|
||||
igdId: data.igdId,
|
||||
cusWeight,
|
||||
cusUnit,
|
||||
});
|
||||
},
|
||||
...mapMutations([
|
||||
"setCurrentDay",
|
||||
"deleteSomeDayDishes",
|
||||
"updateRecipesDishesWeight",
|
||||
"updateRecipesDishesCustomWeight",
|
||||
]),
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.recipes_com_wrapper {
|
||||
margin-bottom: 24px;
|
||||
padding: 1px;
|
||||
|
||||
.num_day {
|
||||
cursor: pointer;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.fun_button {
|
||||
font-size: 12px;
|
||||
padding: 4px 8px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user