食谱编辑交互
This commit is contained in:
huangdeliang
parent
e404c3be1a
commit
854171897d
stdiet-ui/src
components
store/modules
utils
views/custom
dishes
recipesBuild/RecipesView/RecipesCom
@ -3,9 +3,14 @@
|
||||
<div v-for="item in mData" :key="item">
|
||||
{{ item }}
|
||||
</div>
|
||||
<div v-if="data.length > 3">
|
||||
<div>...</div>
|
||||
<el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover">
|
||||
<div v-if="data.length > line">
|
||||
<div v-if="line > 0">...</div>
|
||||
<el-popover
|
||||
placement="top-start"
|
||||
width="200"
|
||||
popper-class="autohideinfo_detial"
|
||||
trigger="hover"
|
||||
>
|
||||
<div v-for="item in data" :key="item">{{ item }}</div>
|
||||
<el-button type="text" slot="reference">详情</el-button>
|
||||
</el-popover>
|
||||
@ -14,37 +19,39 @@
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "AutoHideInfo",
|
||||
data() {
|
||||
return {
|
||||
};
|
||||
export default {
|
||||
name: "AutoHideInfo",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: "",
|
||||
// required: true,
|
||||
},
|
||||
props: {
|
||||
data: {
|
||||
type: Array,
|
||||
default: '',
|
||||
// required: true,
|
||||
},
|
||||
line: {
|
||||
type: Number,
|
||||
default: 3,
|
||||
},
|
||||
computed: {
|
||||
mData: function () {
|
||||
if (this.data instanceof Array) {
|
||||
return this.data.slice(0, 3);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
},
|
||||
computed: {
|
||||
mData: function () {
|
||||
if (this.data instanceof Array) {
|
||||
return this.data.slice(0, this.line);
|
||||
}
|
||||
return [];
|
||||
},
|
||||
};
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.autohideinfo_wrapper {
|
||||
.autohideinfo_wrapper {
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
.autohideinfo_detial {
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
}
|
||||
.autohideinfo_detial {
|
||||
max-height: 240px;
|
||||
overflow: auto;
|
||||
}
|
||||
</style>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
:title="title"
|
||||
:close-on-press-escape="false"
|
||||
:visible.sync="visible"
|
||||
:wrapperClosable="false"
|
||||
@closed="handleOnClosed"
|
||||
size="40%"
|
||||
>
|
||||
@ -22,22 +23,48 @@
|
||||
</el-row>
|
||||
|
||||
<el-table :data="contractList">
|
||||
<el-table-column label="合同编号" align="center" prop="id" width="150"/>
|
||||
<el-table-column label="合同状态" align="center" prop="status" width="80" >
|
||||
<el-table-column
|
||||
label="合同编号"
|
||||
align="center"
|
||||
prop="id"
|
||||
width="150"
|
||||
/>
|
||||
<el-table-column
|
||||
label="合同状态"
|
||||
align="center"
|
||||
prop="status"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-tag
|
||||
:type="scope.row.status === 'yes' ? 'success' : 'danger'"
|
||||
disable-transitions>
|
||||
{{scope.row.status === 'yes' ? '已签订':'未签订'}}
|
||||
disable-transitions
|
||||
>
|
||||
{{ scope.row.status === "yes" ? "已签订" : "未签订" }}
|
||||
</el-tag>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="客户姓名" align="center" prop="name" width="200"/>
|
||||
<el-table-column
|
||||
label="客户姓名"
|
||||
align="center"
|
||||
prop="name"
|
||||
width="200"
|
||||
/>
|
||||
|
||||
<el-table-column label="合同地址" align="center" prop="path" width="80">
|
||||
<el-table-column
|
||||
label="合同地址"
|
||||
align="center"
|
||||
prop="path"
|
||||
width="80"
|
||||
>
|
||||
<template slot-scope="scope">
|
||||
<el-button type="text" icon="el-icon-copy-document" @click="handleCopy(scope.row.path)" class="copyBtn"
|
||||
:data-clipboard-text="copyValue">复制
|
||||
<el-button
|
||||
type="text"
|
||||
icon="el-icon-copy-document"
|
||||
@click="handleCopy(scope.row.path)"
|
||||
class="copyBtn"
|
||||
:data-clipboard-text="copyValue"
|
||||
>复制
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -48,15 +75,15 @@
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleOnDetailClick(scope.row)"
|
||||
>详情
|
||||
>详情
|
||||
</el-button>
|
||||
<el-button
|
||||
v-if="scope.row.status==='yes'"
|
||||
v-if="scope.row.status === 'yes'"
|
||||
size="mini"
|
||||
type="text"
|
||||
icon="el-icon-view"
|
||||
@click="handleLook(scope.row.path)"
|
||||
>查看
|
||||
>查看
|
||||
</el-button>
|
||||
<el-button
|
||||
size="mini"
|
||||
@ -64,7 +91,7 @@
|
||||
icon="el-icon-delete"
|
||||
@click="handleOnDeleteClick(scope.row)"
|
||||
v-hasPermi="['custom:contract:remove']"
|
||||
>删除
|
||||
>删除
|
||||
</el-button>
|
||||
</template>
|
||||
</el-table-column>
|
||||
@ -78,23 +105,23 @@
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import {delContract, listContract} from "@/api/custom/contract";
|
||||
import ContractDetail from "@/components/ContractDetail";
|
||||
import Clipboard from 'clipboard';
|
||||
import ContractAdd from "@/components/ContractAdd";
|
||||
import { delContract, listContract } from "@/api/custom/contract";
|
||||
import ContractDetail from "@/components/ContractDetail";
|
||||
import Clipboard from "clipboard";
|
||||
import ContractAdd from "@/components/ContractAdd";
|
||||
|
||||
export default {
|
||||
name: "CustomerContractDrawer",
|
||||
components: {
|
||||
'contract-detail': ContractDetail,
|
||||
'add-contract':ContractAdd
|
||||
"contract-detail": ContractDetail,
|
||||
"add-contract": ContractAdd,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
title: "",
|
||||
data: undefined,
|
||||
copyValue:"",
|
||||
copyValue: "",
|
||||
contractList: [],
|
||||
};
|
||||
},
|
||||
@ -108,7 +135,7 @@ export default {
|
||||
this.fetchContractList(data.id);
|
||||
},
|
||||
fetchContractList(cusId) {
|
||||
listContract({"customerId": cusId }).then((res) => {
|
||||
listContract({ customerId: cusId }).then((res) => {
|
||||
this.contractList = res.rows;
|
||||
this.visible = true;
|
||||
});
|
||||
@ -118,7 +145,7 @@ export default {
|
||||
{
|
||||
customer: this.data.name,
|
||||
customerId: this.data.id,
|
||||
nutritionistId: this.data.mainDietitian
|
||||
nutritionistId: this.data.mainDietitian,
|
||||
},
|
||||
() => {
|
||||
this.fetchContractList(this.data.id);
|
||||
@ -131,9 +158,7 @@ export default {
|
||||
handleOnDetailClick(data) {
|
||||
this.$refs.contractDetailRef.showDialog(data.id);
|
||||
},
|
||||
handleOnEditClick(data) {
|
||||
|
||||
},
|
||||
handleOnEditClick(data) {},
|
||||
handleOnDeleteClick(data) {
|
||||
const contractIds = data.id;
|
||||
this.$confirm(
|
||||
@ -155,18 +180,18 @@ export default {
|
||||
.catch(function () {});
|
||||
},
|
||||
handleCopy(path) {
|
||||
this.copyValue = window.location.origin.replace('manage', 'sign') + path;
|
||||
const btnCopy = new Clipboard('.copyBtn');
|
||||
this.copyValue = window.location.origin.replace("manage", "sign") + path;
|
||||
const btnCopy = new Clipboard(".copyBtn");
|
||||
this.$message({
|
||||
message: '拷贝成功',
|
||||
type: 'success'
|
||||
message: "拷贝成功",
|
||||
type: "success",
|
||||
});
|
||||
},
|
||||
handleLook(path) {
|
||||
const url = window.location.origin.replace('manage', 'sign') + path;
|
||||
const url = window.location.origin.replace("manage", "sign") + path;
|
||||
// const url = "http://stsign.busyinn.com" + path;
|
||||
window.open(url, '_blank');
|
||||
}
|
||||
window.open(url, "_blank");
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
@ -4,6 +4,7 @@
|
||||
:title="title"
|
||||
:close-on-press-escape="false"
|
||||
:visible.sync="visible"
|
||||
:wrapperClosable="false"
|
||||
@closed="handleOnClosed"
|
||||
size="40%"
|
||||
>
|
||||
|
||||
@ -12,6 +12,7 @@ const oriState = {
|
||||
recipesData: [],
|
||||
cusUnitOptions: [],
|
||||
cusWeightOptions: [],
|
||||
dishesTypeOptions: [],
|
||||
typeOptions: [],
|
||||
currentDay: -1
|
||||
};
|
||||
@ -23,36 +24,29 @@ const mutations = {
|
||||
},
|
||||
setRecipesData(state, payload) {
|
||||
state.recipesData = payload.recipesData;
|
||||
console.log(payload.recipesData);
|
||||
// console.log(payload.recipesData);
|
||||
},
|
||||
updateRecipesDishesWeight(state, payload) {
|
||||
updateRecipesDishesDetail(state, payload) {
|
||||
const tarDishes = state.recipesData[payload.num].dishes.find(
|
||||
obj => obj.id === payload.dishesId
|
||||
);
|
||||
if (tarDishes) {
|
||||
const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
|
||||
if (tarIgd) {
|
||||
tarIgd.weight = payload.weight;
|
||||
payload.weight && (tarIgd.weight = payload.weight);
|
||||
payload.cusWeight && (tarIgd.cusWeight = payload.cusWeight);
|
||||
payload.cusUnit && (tarIgd.cusUnit = payload.cusUnit);
|
||||
}
|
||||
}
|
||||
},
|
||||
updateRecipesDishesCustomWeight(state, payload) {
|
||||
const tarDishes = state.recipesData[payload.num].dishes.find(
|
||||
obj => obj.id === payload.dishesId
|
||||
);
|
||||
if (tarDishes) {
|
||||
const tarIgd = tarDishes.igdList.find(obj => obj.id === payload.igdId);
|
||||
if (tarIgd) {
|
||||
tarIgd.cusWeight = payload.cusWeight;
|
||||
tarIgd.cusUnit = payload.cusUnit;
|
||||
}
|
||||
}
|
||||
addRecipesDishes(state, payload) {
|
||||
|
||||
state.recipesData[payload.num].dishes.push(payload.data);
|
||||
},
|
||||
updateOptions(state, payload) {
|
||||
payload.cusUnitOptions && (state.cusUnitOptions = payload.cusUnitOptions);
|
||||
payload.cusWeightOptions &&
|
||||
(state.cusWeightOptions = payload.cusWeightOptions);
|
||||
payload.typeOptions && (state.typeOptions = payload.typeOptions);
|
||||
Object.keys(payload).forEach(key => {
|
||||
state[key] = payload[key];
|
||||
});
|
||||
},
|
||||
setCurrentDay(state, payload) {
|
||||
state.currentDay =
|
||||
@ -88,6 +82,9 @@ const actions = {
|
||||
getDicts("cus_dishes_type").then(response => {
|
||||
commit("updateOptions", { typeOptions: response.data });
|
||||
});
|
||||
getDicts("cus_dishes_type").then(response => {
|
||||
commit("updateOptions", { dishesTypeOptions: response.data });
|
||||
});
|
||||
|
||||
// 健康数据
|
||||
const healthyDataResult = await getCustomerPhysicalSignsByCusId(
|
||||
|
||||
@ -384,7 +384,8 @@ export const yesNoName = [
|
||||
"longEatDrugFlag",
|
||||
"allergyFlag",
|
||||
"smokeFlag",
|
||||
"secondSmoke"
|
||||
"secondSmoke",
|
||||
"sleepDrugFlag"
|
||||
];
|
||||
|
||||
export const dictName = [
|
||||
@ -550,7 +551,7 @@ export function dealHealthy(customerHealthy) {
|
||||
customerHealthy.getupTime += "点";
|
||||
}
|
||||
if (customerHealthy.hasOwnProperty("signList")) {
|
||||
customerHealthy.signStr = customerHealthy.signList
|
||||
customerHealthy.signStr = (customerHealthy.signList || [])
|
||||
.map(obj => obj.name)
|
||||
.join("，");
|
||||
}
|
||||
|
||||
@ -162,9 +162,9 @@
|
||||
<el-drawer
|
||||
:title="title"
|
||||
:visible.sync="open"
|
||||
:wrapperClosable="false"
|
||||
size="50%"
|
||||
:close-on-press-escape="false"
|
||||
:close-on-click-modal="false"
|
||||
>
|
||||
<div class="drawer_content">
|
||||
<el-row class="content_detail">
|
||||
|
||||
165
stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
Normal file
165
stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/ConfigDishes.vue
Normal file
@ -0,0 +1,165 @@
|
||||
<template>
|
||||
<el-form>
|
||||
<el-form-item label="菜品名">
|
||||
<span style="color: #262626; font-size: 16px; font-weight: bold">{{
|
||||
name
|
||||
}}</span>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜品类型">
|
||||
<el-radio-group v-model="type" @change="handleOnTypeChange">
|
||||
<el-radio
|
||||
v-for="item in typeOptions"
|
||||
:key="item.dictValue"
|
||||
:label="item.dictValue"
|
||||
>{{ item.dictLabel }}</el-radio
|
||||
>
|
||||
</el-radio-group>
|
||||
</el-form-item>
|
||||
<el-form-item label="食材分量">
|
||||
<el-table
|
||||
:data="igdList"
|
||||
border
|
||||
show-summary
|
||||
size="mini"
|
||||
:summary-method="getSummaries"
|
||||
>
|
||||
<el-table-column prop="name" label="食材" align="center" />
|
||||
<el-table-column label="分量估算" 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 prop="weight" label="重量(g)" align="center">
|
||||
<template slot-scope="scope">
|
||||
<EditableText
|
||||
:value="scope.row.weight"
|
||||
@onChange="(val) => handleOnWeightChange(scope.row, val)"
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column
|
||||
prop="proteinRatio"
|
||||
label="蛋白质/100g"
|
||||
align="center"
|
||||
/>
|
||||
<el-table-column prop="fatRatio" label="脂肪/100g" align="center" />
|
||||
<el-table-column prop="carbonRatio" label="碳水/100g" align="center" />
|
||||
</el-table>
|
||||
</el-form-item>
|
||||
<el-form-item label="推荐人群">
|
||||
<el-tag
|
||||
style="margin-right: 4px"
|
||||
v-for="rec in recTags"
|
||||
:key="rec"
|
||||
type="success"
|
||||
>
|
||||
{{ rec }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
<el-form-item label="忌口人群">
|
||||
<el-tag
|
||||
style="margin-right: 4px"
|
||||
v-for="notRec in notRecTags"
|
||||
:key="notRec"
|
||||
type="danger"
|
||||
>
|
||||
{{ notRec }}
|
||||
</el-tag>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
</template>
|
||||
<script>
|
||||
import produce from "immer";
|
||||
import EditableText from "../EditableText";
|
||||
import EditableUnit from "../EditableUnit";
|
||||
export default {
|
||||
name: "ConfigDishes",
|
||||
data() {
|
||||
return {
|
||||
nType: this.type,
|
||||
};
|
||||
},
|
||||
props: {
|
||||
name: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
type: {
|
||||
type: String,
|
||||
default: "",
|
||||
},
|
||||
igdList: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
typeOptions: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
notRecTags: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
recTags: {
|
||||
type: Array,
|
||||
default: [],
|
||||
},
|
||||
},
|
||||
components: {
|
||||
EditableText,
|
||||
EditableUnit,
|
||||
},
|
||||
computed: {},
|
||||
methods: {
|
||||
handleOnTypeChange(type) {
|
||||
this.$emit("onChane", { type });
|
||||
},
|
||||
handleOnWeightChange(data, val) {
|
||||
// console.log({ data, val });
|
||||
this.$emit("onChane", {
|
||||
igdList: produce(this.igdList, (draftState) => {
|
||||
const tarIgd = draftState.find((obj) => obj.id === data.id);
|
||||
if (tarIgd) {
|
||||
tarIgd.weight = val;
|
||||
}
|
||||
}),
|
||||
});
|
||||
},
|
||||
handleOnCustomUnitChange(data, val) {
|
||||
// console.log({ data, val });
|
||||
this.$emit("onChane", {
|
||||
igdList: produce(this.igdList, (draftState) => {
|
||||
const tarIgd = draftState.find((obj) => obj.id === data.id);
|
||||
if (tarIgd) {
|
||||
tarIgd.cusWeight = val.cusWeight;
|
||||
tarIgd.cusUnit = val.cusUnit;
|
||||
}
|
||||
}),
|
||||
});
|
||||
},
|
||||
getSummaries(param) {
|
||||
const { columns, data } = param;
|
||||
return columns.reduce(
|
||||
(arr, cur, idx) => {
|
||||
if (idx > 1) {
|
||||
arr[idx] = data.reduce((acc, dAcc) => {
|
||||
if (idx === 2) {
|
||||
return acc + parseFloat(dAcc.weight);
|
||||
}
|
||||
return parseFloat(
|
||||
(acc + (dAcc[cur.property] * dAcc.weight) / 100).toFixed(1)
|
||||
);
|
||||
}, 0);
|
||||
}
|
||||
return arr;
|
||||
},
|
||||
["合计"]
|
||||
);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
172
stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
Normal file
172
stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/SelectDishes.vue
Normal file
@ -0,0 +1,172 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-form
|
||||
:model="queryParams"
|
||||
ref="queryForm"
|
||||
:inline="true"
|
||||
label-width="68px"
|
||||
>
|
||||
<el-form-item label="菜品名称" prop="name">
|
||||
<el-input
|
||||
v-model="queryParams.name"
|
||||
placeholder="请输入菜品名称"
|
||||
clearable
|
||||
size="mini"
|
||||
@keyup.enter.native="handleQuery"
|
||||
/>
|
||||
</el-form-item>
|
||||
<el-form-item label="菜品类型" prop="type">
|
||||
<el-select
|
||||
v-model="queryParams.type"
|
||||
placeholder="请选择菜品类型"
|
||||
clearable
|
||||
size="mini"
|
||||
>
|
||||
<el-option
|
||||
v-for="dict in typeOptions"
|
||||
:key="dict.dictValue"
|
||||
:label="dict.dictLabel"
|
||||
:value="dict.dictValue"
|
||||
/>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button
|
||||
type="cyan"
|
||||
icon="el-icon-search"
|
||||
size="mini"
|
||||
@click="handleQuery"
|
||||
>搜索
|
||||
</el-button>
|
||||
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
|
||||
>重置
|
||||
</el-button>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<el-table
|
||||
v-loading="loading"
|
||||
size="mini"
|
||||
:data="dishesList"
|
||||
height="600"
|
||||
highlight-current-row
|
||||
@current-change="handleCurrentChange"
|
||||
>
|
||||
<el-table-column label="菜品名称" align="center" prop="name" />
|
||||
<el-table-column label="菜品类型" align="center" prop="type">
|
||||
<template slot-scope="scope">
|
||||
<AutoHideInfo :data="typeFormat(scope.row)" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="包含食材" align="center">
|
||||
<template slot-scope="scope">
|
||||
<div v-for="igd in scope.row.igdList" :key="igd.id">
|
||||
{{ igd.name }}
|
||||
</div>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="推荐人群" align="center">
|
||||
<template slot-scope="scope">
|
||||
<AutoHideInfo :data="scope.row.recTags" :line="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="忌口人群" align="center">
|
||||
<template slot-scope="scope">
|
||||
<AutoHideInfo :data="scope.row.notRecTags" :line="0" />
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
|
||||
<pagination
|
||||
v-show="total > 0"
|
||||
:total="total"
|
||||
:page.sync="queryParams.pageNum"
|
||||
:limit.sync="queryParams.pageSize"
|
||||
layout="total, prev, pager, next"
|
||||
@pagination="getList"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
import AutoHideInfo from "@/components/AutoHideInfo";
|
||||
import { listDishes } from "@/api/custom/dishes";
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const { mapState } = createNamespacedHelpers("recipes");
|
||||
export default {
|
||||
name: "SelectDishes",
|
||||
props: [],
|
||||
data() {
|
||||
return {
|
||||
loading: false,
|
||||
total: 0,
|
||||
dishesList: [],
|
||||
queryParams: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
name: null,
|
||||
type: null,
|
||||
reviewStatus: "yes",
|
||||
},
|
||||
};
|
||||
},
|
||||
components: {
|
||||
AutoHideInfo,
|
||||
},
|
||||
computed: {
|
||||
...mapState(["typeOptions"]),
|
||||
},
|
||||
methods: {
|
||||
getList() {
|
||||
// console.log('getList')
|
||||
this.loading = true;
|
||||
listDishes(this.queryParams).then((result) => {
|
||||
this.dishesList = result.rows.map((d) => {
|
||||
const recTags = [],
|
||||
notRecTags = [];
|
||||
d.igdList.forEach((igd) => {
|
||||
if (igd.rec) {
|
||||
igd.rec.split(",").forEach((rec) => {
|
||||
if (!recTags.includes(rec)) {
|
||||
recTags.push(rec);
|
||||
}
|
||||
});
|
||||
}
|
||||
if (igd.notRec) {
|
||||
igd.notRec.split(",").forEach((notRec) => {
|
||||
if (!notRecTags.includes(notRec)) {
|
||||
notRecTags.push(notRec);
|
||||
}
|
||||
});
|
||||
}
|
||||
});
|
||||
return {
|
||||
...d,
|
||||
recTags,
|
||||
notRecTags,
|
||||
};
|
||||
});
|
||||
this.total = result.total;
|
||||
this.loading = false;
|
||||
});
|
||||
},
|
||||
handleCurrentChange(data) {
|
||||
this.$emit("onChange", data);
|
||||
},
|
||||
handleQuery() {
|
||||
this.queryParams.pageNum = 1;
|
||||
this.getList();
|
||||
},
|
||||
resetQuery() {
|
||||
this.resetForm("queryForm");
|
||||
this.handleQuery();
|
||||
},
|
||||
typeFormat(row, column) {
|
||||
return !row.type
|
||||
? ""
|
||||
: row.type
|
||||
.split(",")
|
||||
.map((type) => this.selectDictLabel(this.typeOptions, type));
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
166
stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
Normal file
166
stdiet-ui/src/views/custom/recipesBuild/RecipesView/RecipesCom/AddDishesDrawer/index.vue
Normal file
@ -0,0 +1,166 @@
|
||||
<template>
|
||||
<el-drawer
|
||||
title="添加菜品"
|
||||
:visible.sync="visible"
|
||||
:close-on-press-escape="false"
|
||||
:before-close="handleOnClosed"
|
||||
:wrapperClosable="false"
|
||||
class="add_dishes_drawer_wrapper"
|
||||
direction="ltr"
|
||||
size="40%"
|
||||
>
|
||||
<div class="content_wrapper">
|
||||
<div class="content_detail">
|
||||
<el-steps :active="active" style="margin-bottom: 20px">
|
||||
<el-step title="选择菜品" />
|
||||
<el-step title="配置菜品" />
|
||||
</el-steps>
|
||||
|
||||
<SelectDishes
|
||||
ref="dishesRef"
|
||||
v-show="active === 0"
|
||||
@onChange="handleCurrentChange"
|
||||
/>
|
||||
<ConfigDishes
|
||||
v-show="active === 1"
|
||||
v-bind="selDishes"
|
||||
:typeOptions="typeOptions"
|
||||
@onChange="handleOnConfigChange"
|
||||
/>
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button
|
||||
size="small"
|
||||
v-show="active === 1"
|
||||
type="info"
|
||||
@click="handleOnLastStepClick"
|
||||
>上一步</el-button
|
||||
>
|
||||
<el-button
|
||||
size="small"
|
||||
v-show="active === 1"
|
||||
type="primary"
|
||||
@click="handleOnConfirmClick"
|
||||
>确 定</el-button
|
||||
>
|
||||
<el-button size="small" @click="handleOnCancelClick">取 消</el-button>
|
||||
</div>
|
||||
</div>
|
||||
</el-drawer>
|
||||
</template>
|
||||
<script>
|
||||
import { createNamespacedHelpers } from "vuex";
|
||||
const { mapState } = createNamespacedHelpers("recipes");
|
||||
|
||||
import SelectDishes from "./SelectDishes";
|
||||
import ConfigDishes from "./ConfigDishes";
|
||||
|
||||
export default {
|
||||
name: "AddDishesDrawer",
|
||||
components: {
|
||||
SelectDishes,
|
||||
ConfigDishes,
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
active: 0,
|
||||
typeOptions: [],
|
||||
selDishes: {
|
||||
name: "",
|
||||
type: "",
|
||||
igdList: [],
|
||||
recTags:[],
|
||||
notRecTags: []
|
||||
},
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
...mapState(["dishesTypeOptions"]),
|
||||
},
|
||||
methods: {
|
||||
showDrawer() {
|
||||
this.visible = true;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.dishesRef.getList();
|
||||
});
|
||||
},
|
||||
handleOnClosed(done) {
|
||||
done();
|
||||
},
|
||||
handleCurrentChange(data) {
|
||||
if (!data) {
|
||||
return;
|
||||
}
|
||||
console.log(data);
|
||||
this.selDishes = data;
|
||||
this.active = 1;
|
||||
this.typeOptions = data.type.split(",").reduce((arr, cur, idx) => {
|
||||
if (idx === 0) {
|
||||
this.selDishes.type = cur;
|
||||
}
|
||||
const tarOpt = this.dishesTypeOptions.find(
|
||||
(obj) => obj.dictValue === cur
|
||||
);
|
||||
if (tarOpt) {
|
||||
arr.push(tarOpt);
|
||||
}
|
||||
return arr;
|
||||
}, []);
|
||||
},
|
||||
handleOnConfigChange(val) {
|
||||
Object.keys(val).forEach((key) => {
|
||||
this.selDishes[key] = val[key];
|
||||
});
|
||||
},
|
||||
handleOnCancelClick() {
|
||||
this.visible = false;
|
||||
this.active = 0;
|
||||
},
|
||||
handleOnLastStepClick() {
|
||||
this.active = 0;
|
||||
},
|
||||
handleOnConfirmClick() {
|
||||
this.visible = false;
|
||||
this.active = 0;
|
||||
this.$emit("onConfirm", this.selDishes);
|
||||
// console.log(this.selDishes);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
/deep/ :focus {
|
||||
outline: 0;
|
||||
}
|
||||
.add_dishes_drawer_wrapper {
|
||||
.content_wrapper {
|
||||
padding: 16px 20px;
|
||||
height: 100%;
|
||||
overflow: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.content_detail {
|
||||
flex: 1 1 0;
|
||||
padding: 12px;
|
||||
overflow: auto;
|
||||
}
|
||||
|
||||
.dialog-footer {
|
||||
flex: 0 0 45px;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
padding: 0 12px;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<style lang="scss">
|
||||
.add_dishes_drawer_wrapper {
|
||||
#el-drawer__title {
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@ -11,31 +11,26 @@
|
||||
currentDay + 1 === num ? '1px solid #d96969' : 'none'
|
||||
}`"
|
||||
>
|
||||
<el-table-column
|
||||
prop="type"
|
||||
:formatter="typeFormatter"
|
||||
:width="100"
|
||||
align="center"
|
||||
>
|
||||
<el-table-column prop="type" :width="100" align="center">
|
||||
<template slot="header">
|
||||
<span class="num_day" @click="handleOnOneDayAnalysis">{{
|
||||
`${name}第${num}天`
|
||||
}}</span>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<span style="font-weight: bold; font-size: 14px">{{ typeFormatter(scope.row) }}</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>
|
||||
<el-tooltip
|
||||
class="item"
|
||||
effect="dark"
|
||||
content="点击添加菜品"
|
||||
placement="top"
|
||||
>
|
||||
<span class="num_day" @click="handleOnAdd">菜品</span>
|
||||
</el-tooltip>
|
||||
</template>
|
||||
<template slot-scope="scope">
|
||||
<el-popover placement="right" trigger="hover">
|
||||
@ -63,7 +58,7 @@
|
||||
/>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="质量(g)" prop="weight" :width="80" align="center">
|
||||
<el-table-column label="重量(g)" prop="weight" :width="80" align="center">
|
||||
<template slot-scope="scope">
|
||||
<EditableText
|
||||
:value="scope.row.weight"
|
||||
@ -112,6 +107,7 @@
|
||||
/>
|
||||
<el-table-column label="做法" prop="methods" />
|
||||
</el-table>
|
||||
<AddDishesDrawer ref="drawerRef" @onConfirm="handleOnDishesConfirm" />
|
||||
</div>
|
||||
</template>
|
||||
<script>
|
||||
@ -125,6 +121,7 @@ const {
|
||||
|
||||
import EditableText from "./EditableText";
|
||||
import EditableUnit from "./EditableUnit";
|
||||
import AddDishesDrawer from "./AddDishesDrawer";
|
||||
|
||||
export default {
|
||||
name: "RecipesCom",
|
||||
@ -146,6 +143,7 @@ export default {
|
||||
components: {
|
||||
EditableText,
|
||||
EditableUnit,
|
||||
AddDishesDrawer,
|
||||
},
|
||||
mounted() {
|
||||
// console.log(this.data);
|
||||
@ -267,10 +265,8 @@ export default {
|
||||
this.setCurrentDay({ currentDay: this.num - 1 });
|
||||
},
|
||||
handleOnAdd() {
|
||||
console.log(this.num);
|
||||
},
|
||||
handleOnEdit(data) {
|
||||
console.log(data);
|
||||
// console.log(this.num);
|
||||
this.$refs.drawerRef.showDrawer();
|
||||
},
|
||||
handleOnDelete(data) {
|
||||
// console.log(data);
|
||||
@ -278,7 +274,7 @@ export default {
|
||||
},
|
||||
handleOnWeightChange(data, weight) {
|
||||
// console.log({ data, weight });
|
||||
this.updateRecipesDishesWeight({
|
||||
this.updateRecipesDishesDetail({
|
||||
num: this.num - 1,
|
||||
dishesId: data.id,
|
||||
igdId: data.igdId,
|
||||
@ -286,7 +282,7 @@ export default {
|
||||
});
|
||||
},
|
||||
handleOnCustomUnitChange(data, { cusWeight, cusUnit }) {
|
||||
this.updateRecipesDishesCustomWeight({
|
||||
this.updateRecipesDishesDetail({
|
||||
num: this.num - 1,
|
||||
dishesId: data.id,
|
||||
igdId: data.igdId,
|
||||
@ -294,11 +290,17 @@ export default {
|
||||
cusUnit,
|
||||
});
|
||||
},
|
||||
handleOnDishesConfirm(data) {
|
||||
this.addRecipesDishes({
|
||||
num: this.num - 1,
|
||||
data,
|
||||
});
|
||||
},
|
||||
...mapMutations([
|
||||
"setCurrentDay",
|
||||
"deleteSomeDayDishes",
|
||||
"updateRecipesDishesWeight",
|
||||
"updateRecipesDishesCustomWeight",
|
||||
"updateRecipesDishesDetail",
|
||||
"addRecipesDishes",
|
||||
]),
|
||||
},
|
||||
};
|
||||
@ -310,6 +312,7 @@ export default {
|
||||
|
||||
.num_day {
|
||||
cursor: pointer;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user