优化交互功能,嵌入多选器显示菜单,并可以直接编辑保存

This commit is contained in:
28353131@qq.com 2020-11-28 18:06:38 +08:00
parent e3c0bc3c5c
commit b3a0332835

View File

@ -11,7 +11,7 @@
:disabled="single"
@click="handleUpdate"
v-hasPermi="['fantang:weekMenu:edit']"
>修改
>保存
</el-button>
</el-col>
<el-col :span="1.5">
@ -36,9 +36,28 @@
<el-table-column label="id" align="center" prop="id" v-if="false"/>
<el-table-column label="星期几" align="center" prop="weekday"/>
<el-table-column label="用餐类型" align="center" prop="dinnerType"/>
<el-table-column label="菜品列表" align="center" prop="foods"/>
<el-table-column label="菜品列表" align="center" prop="foods">
<template slot-scope="scope">
<el-select v-model="scope.row.foods" multiple>
<el-option
v-for="item in foodList"
:key="item.foodId"
:label="item.name"
:value="item.foodId">
</el-option>
</el-select>
</template>
</el-table-column>
<el-table-column label="总价格" align="center" prop="price"/>
<el-table-column label="启用标志" align="center" prop="flag" :formatter="formatStartFlag"/>
<el-table-column label="启用标志" align="center" prop="flag" :formatter="formatStartFlag">
<template slot-scope="scope">
<el-switch
v-model="scope.row.flag"
active-text="启用"
inactive-text="禁用">
</el-switch>
</template>
</el-table-column>
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button
@ -47,7 +66,7 @@
icon="el-icon-edit"
@click="handleUpdate(scope.row)"
v-hasPermi="['fantang:weekMenu:edit']"
>修改
>保存
</el-button>
</template>
</el-table-column>
@ -245,6 +264,13 @@
listWeekMenu(this.queryParams).then(response => {
this.weekMenuList = response.rows;
this.total = response.total;
console.log("before-->", this.weekMenuList);
for (let i = 0; i < this.weekMenuList.length; i++) {
if (this.weekMenuList[i].foods !== null)
this.weekMenuList[i].foods = this.weekMenuList[i].foods.split(',').map(Number);
}
console.log("after-->", this.weekMenuList);
this.loading = false;
});
listFood(this.queryParams).then(response => {
@ -289,13 +315,19 @@
},
/** 修改按钮操作 */
handleUpdate(row) {
this.reset();
const id = row.id || this.ids
getWeekMenu(id).then(response => {
this.form = response.data;
this.open = true;
this.title = "修改每周菜单";
row.foods = row.foods.toLocaleString();
updateWeekMenu(row).then(response => {
this.msgSuccess("修改成功");
row.foods = row.foods.split(',').map(Number);
});
// this.reset();
// const id = row.id || this.ids
// getWeekMenu(id).then(response => {
// this.form = response.data;
// this.open = true;
// this.title = "";
// });
},
/** 提交按钮 */
submitForm() {