156 lines
3.3 KiB
Vue
156 lines
3.3 KiB
Vue
<template>
|
|
<el-drawer
|
|
:visible.sync="visible"
|
|
:with-header="false"
|
|
direction="ltr"
|
|
size="60%"
|
|
class="plan_drawer_wrapper"
|
|
>
|
|
<div class="header">
|
|
<span>食谱列表</span>
|
|
</div>
|
|
<div class="content">
|
|
<el-collapse v-model="curPlanId" accordion>
|
|
<el-collapse-item
|
|
v-for="plan in data"
|
|
:key="plan.id"
|
|
:name="plan.id"
|
|
:class="plan.id === hitPlanId ? 'collapse_item_hit' : ''"
|
|
>
|
|
<template slot="title">
|
|
<div class="title_style">
|
|
<span>{{ plan.label }}</span>
|
|
<em
|
|
v-show="false"
|
|
class="el-icon-shopping-cart-full icon_style"
|
|
@click="(e) => handleOnShoppingPlanClick(e, plan)"
|
|
/>
|
|
</div>
|
|
</template>
|
|
<div
|
|
v-for="menu in plan.menus"
|
|
:class="`item ${menu.id === curMenuId ? 'sel_item' : ''}`"
|
|
:key="menu.id"
|
|
@click="handleOnCurrentChange(plan.id, menu)"
|
|
>
|
|
<div class="item_content">
|
|
{{ menu.date }}
|
|
<em class="el-icon-arrow-right" style="font-weight: bold" />
|
|
</div>
|
|
</div>
|
|
</el-collapse-item>
|
|
</el-collapse>
|
|
</div>
|
|
|
|
<plan-time-dialog ref="planRef" @onConfirm="handleOnTimeConfirm" />
|
|
</el-drawer>
|
|
</template>
|
|
<script>
|
|
import PlanTimeDialog from "./PlanTimeDialog";
|
|
export default {
|
|
name: "planDrawer",
|
|
data() {
|
|
return {
|
|
visible: false,
|
|
curPlanId: 0,
|
|
curMenuId: 0,
|
|
hitPlanId: 0,
|
|
};
|
|
},
|
|
components: {
|
|
PlanTimeDialog,
|
|
},
|
|
props: ["data", "planId", "menuId"],
|
|
methods: {
|
|
showDrawer() {
|
|
this.visible = true;
|
|
},
|
|
handleOnCurrentChange(planId, menu) {
|
|
// console.log({ planId, menuId });
|
|
this.hitPlanId = planId;
|
|
this.visible = false;
|
|
this.curMenuId = menu.id;
|
|
this.curPlanId = planId;
|
|
|
|
this.$emit("plan-change", menu);
|
|
},
|
|
handleOnShoppingPlanClick(e, data) {
|
|
e.stopPropagation();
|
|
this.$refs.planRef.showDialog(data.id);
|
|
this.visible = false;
|
|
},
|
|
handleOnTimeConfirm(val) {
|
|
console.log(val);
|
|
},
|
|
},
|
|
computed: {},
|
|
watch: {
|
|
planId(val) {
|
|
this.curPlanId = val;
|
|
this.hitPlanId = val;
|
|
},
|
|
menuId(val) {
|
|
this.curMenuId = val;
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
<style lang="scss" scoped>
|
|
.plan_drawer_wrapper {
|
|
.header {
|
|
padding: 2px 6px;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 44px;
|
|
}
|
|
|
|
.content {
|
|
height: calc(100vh - 44px);
|
|
padding: 12px;
|
|
overflow: auto;
|
|
|
|
.item {
|
|
font-size: 14px;
|
|
height: 36px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.item_content {
|
|
display: flex;
|
|
padding: 2px 8px 2px 24px;
|
|
align-items: center;
|
|
height: 100%;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.sel_item {
|
|
background: #409eff;
|
|
color: white;
|
|
}
|
|
|
|
.title_style {
|
|
display: flex;
|
|
width: 100%;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.icon_style {
|
|
margin-right: 16px;
|
|
font-size: 16px;
|
|
padding: 4px 8px;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|
|
<style lang="scss">
|
|
.collapse_item_hit .el-collapse-item__header {
|
|
color: #409eff;
|
|
}
|
|
.el-collapse-item__header.focusing {
|
|
color: unset !important;
|
|
}
|
|
</style>
|