From 144e3550aacefc225ac927282f8cb9107bc18960 Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Fri, 19 Mar 2021 17:08:21 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B7=9F=E6=8D=A2=E8=8F=9C=E5=93=81=E6=8E=A7?=
=?UTF-8?q?=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
.../IngredientListView/index.vue | 131 ++++
.../custom/dishes/EditDishesDrawer/index.vue | 507 +++++++++++++++
stdiet-ui/src/views/custom/dishes/index.vue | 581 +-----------------
.../src/views/custom/ingredient/index.vue | 10 +
4 files changed, 668 insertions(+), 561 deletions(-)
create mode 100644 stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
create mode 100644 stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
diff --git a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
new file mode 100644
index 000000000..60cff0173
--- /dev/null
+++ b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/IngredientListView/index.vue
@@ -0,0 +1,131 @@
+<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"
+ border
+ :data="ingredientList"
+ :cell-style="{ padding: 0 }"
+ :header-cell-style="{ padding: 0, height: 'unset' }"
+ @current-change="handleCurrentChange"
+ >
+ <el-table-column label="食材名称" align="center" prop="name" />
+ <el-table-column
+ label="食材类别"
+ align="center"
+ prop="type"
+ :formatter="typeFormat"
+ />
+ <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>
+
+ <pagination
+ v-show="total > 0"
+ :background="false"
+ :total="total"
+ :page.sync="queryParams.pageNum"
+ :limit.sync="queryParams.pageSize"
+ @pagination="getList"
+ layout="total, prev, pager, next"
+ />
+ </div>
+</template>
+<script>
+import { listIngredient } from "@/api/custom/ingredient";
+export default {
+ name: "IngredientListView",
+ data() {
+ return {
+ loading: false,
+ total: 0,
+ ingredientList: [],
+ queryParams: {
+ pageNum: 1,
+ pageSize: 10,
+ name: null,
+ type: null,
+ area: null,
+ reviewStatus: "yes",
+ },
+ };
+ },
+ props: ["typeOptions", "visible"],
+ watch: {},
+ methods: {
+ getList() {
+ this.loading = true;
+ listIngredient(this.queryParams).then((response) => {
+ this.ingredientList = response.rows;
+ this.total = response.total;
+ this.loading = false;
+ });
+ },
+ reset() {
+ this.resetForm("queryForm");
+ },
+ // 食材类别字典翻译
+ typeFormat(row, column) {
+ return this.selectDictLabel(this.typeOptions, row.type);
+ },
+ /** 搜索按钮操作 */
+ handleQuery() {
+ this.queryParams.pageNum = 1;
+ this.getList();
+ },
+ /** 重置按钮操作 */
+ resetQuery() {
+ this.resetForm("queryForm");
+ this.handleQuery();
+ },
+ handleCurrentChange(data) {
+ this.$emit("onSelect", data);
+ },
+ },
+};
+</script>
diff --git a/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
new file mode 100644
index 000000000..7ee9b0666
--- /dev/null
+++ b/stdiet-ui/src/views/custom/dishes/EditDishesDrawer/index.vue
@@ -0,0 +1,507 @@
+<template>
+ <el-drawer
+ :title="title"
+ :visible.sync="open"
+ :wrapperClosable="false"
+ :before-close="handleClose"
+ size="50%"
+ :close-on-press-escape="false"
+ >
+ <div class="edit_dishes_drawer_wrapper">
+ <el-row class="content_detail" v-loading="entireLoading">
+ <el-form ref="form" :model="form" :rules="rules" label-width="80px">
+ <el-col :span="12">
+ <el-form-item label="菜品名称" prop="name">
+ <el-input v-model="form.name" placeholder="请输入菜品名称" />
+ </el-form-item>
+ </el-col>
+ <el-col :span="12">
+ <el-form-item label="审核状态" prop="reviewStatus">
+ <el-select
+ v-model="form.reviewStatus"
+ placeholder="请选择审核状态"
+ clearable
+ >
+ <el-option
+ v-for="dict in reviewStatusOptions"
+ :key="dict.dictValue"
+ :label="dict.dictLabel"
+ :value="dict.dictValue"
+ />
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="菜品种类" prop="dishClass">
+ <el-cascader
+ filterable
+ v-model="form.dishClass"
+ :options="dishClassOptions"
+ :props="{ expandTrigger: 'hover' }"
+ placeholder="请选择菜品种类"
+ ></el-cascader>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="菜品类型" prop="type">
+ <el-select
+ v-model="form.type"
+ placeholder="请选择菜品类型"
+ multiple
+ >
+ <el-option
+ v-for="dict in typeOptions"
+ :key="dict.dictValue"
+ :label="dict.dictLabel"
+ :value="dict.dictValue"
+ ></el-option>
+ </el-select>
+ </el-form-item>
+ </el-col>
+ <el-col :span="8">
+ <el-form-item label="是否主食" prop="isMain">
+ <el-radio-group v-model="form.isMain">
+ <el-radio :label="0">是</el-radio>
+ <el-radio :label="1">否</el-radio>
+ </el-radio-group>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="待选食材">
+ <IngredientListView
+ ref="igdRef"
+ :typeOptions="ingTypeOptions"
+ @onSelect="handleOnIgdSelect"
+ />
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="已选食材" prop="igdList">
+ <el-table
+ :data="form.igdList"
+ border
+ show-summary
+ :cell-style="{ padding: 0 }"
+ :header-cell-style="{ padding: 0, height: 'unset' }"
+ :summary-method="getSummaries"
+ >
+ <el-table-column prop="name" label="食材" align="center" />
+ <el-table-column label="通俗计量" align="center">
+ <template slot-scope="scope">
+ <span class="cus-unit">
+ <el-select size="mini" v-model="scope.row.cusWeight">
+ <el-option
+ v-for="dict in cusWeightOptions"
+ :key="dict.dictValue"
+ :label="dict.dictLabel"
+ :value="parseInt(dict.dictValue)"
+ />
+ </el-select>
+ <el-select size="mini" v-model="scope.row.cusUnit">
+ <el-option
+ v-for="dict in cusUnitOptions"
+ :key="dict.dictValue"
+ :label="dict.dictLabel"
+ :value="parseInt(dict.dictValue)"
+ />
+ </el-select>
+ </span>
+ </template>
+ </el-table-column>
+ <el-table-column prop="weight" label="重量(g)" align="center">
+ <template slot-scope="scope">
+ <el-input-number
+ class="weight"
+ v-model="scope.row.weight"
+ size="mini"
+ controls-position="right"
+ :min="0"
+ :step="5"
+ />
+ </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-column label="热量(kcal)" align="center">
+ <template slot-scope="scope">
+ {{
+ `${(
+ ((scope.row.proteinRatio * scope.row.weight) / 100) *
+ 4 +
+ ((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
+ ((scope.row.carbonRatio * scope.row.weight) / 100) * 4
+ ).toFixed(1)}`
+ }}
+ </template>
+ </el-table-column>
+ <el-table-column label="操作" align="center">
+ <template slot-scope="scope">
+ <el-button type="text" @click="handleOnDelete(scope.row)"
+ >删除</el-button
+ >
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="推荐人群" v-if="!!selRec.length">
+ <el-tag
+ style="margin-right: 4px"
+ v-for="rec in selRec"
+ :key="rec"
+ type="success"
+ >
+ {{ rec }}
+ </el-tag>
+ </el-form-item>
+ </el-col>
+ <el-col :span="24">
+ <el-form-item label="忌口人群" v-if="!!selNotRec.length">
+ <el-tag
+ style="margin-right: 4px"
+ v-for="notRec in selNotRec"
+ :key="notRec"
+ type="danger"
+ >
+ {{ notRec }}
+ </el-tag>
+ </el-form-item>
+ </el-col>
+
+ <el-col :span="24">
+ <el-form-item label="做法" prop="methods">
+ <el-input
+ v-model="form.methods"
+ type="textarea"
+ placeholder="请输入内容"
+ rows="4"
+ />
+ </el-form-item>
+ </el-col>
+ </el-form>
+ </el-row>
+
+ <div slot="footer" class="dialog-footer">
+ <el-button type="primary" @click="submitForm">确 定</el-button>
+ <el-button @click="cancel">取 消</el-button>
+ </div>
+ </div>
+ </el-drawer>
+</template>
+<script>
+import { addDishes, updateDishes, getDishes } from "@/api/custom/dishes";
+import IngredientListView from "./IngredientListView";
+
+export default {
+ name: "EditDishesDrawer",
+ components: {
+ IngredientListView,
+ },
+ created() {
+ this.getDicts("cus_ing_type").then((response) => {
+ this.ingTypeOptions = response.data;
+ });
+ this.getDicts("cus_cus_unit").then((response) => {
+ this.cusUnitOptions = response.data;
+ });
+ this.getDicts("cus_cus_weight").then((response) => {
+ this.cusWeightOptions = response.data;
+ });
+ },
+ data() {
+ return {
+ // 弹出层标题
+ title: "",
+ // 是否显示弹出层
+ open: false,
+ // 通俗单位
+ cusUnitOptions: [],
+ //
+ cusWeightOptions: [],
+ // 食材类别字典
+ ingTypeOptions: [],
+ // 表单参数
+ form: {},
+ // 表单校验
+ rules: {
+ name: [
+ { required: true, message: "菜品名称不能为空", trigger: "blur" },
+ ],
+ type: [
+ { required: true, message: "菜品类型不能为空", trigger: "blur" },
+ ],
+ igdList: [{ required: true, message: "食材不能为空", trigger: "blur" }],
+ },
+ //
+ entireLoading: false,
+ // 选中的食材分量列表
+ //
+ selRec: [],
+ selNotRec: [],
+ };
+ },
+ props: [
+ "typeOptions",
+ "reviewStatusOptions",
+ "dishClassBigOptions",
+ "dishClassOptions",
+ "dishClassSmallOptions",
+ ],
+ watch: {
+ "form.igdList": function (val) {
+ const selRec = [];
+ const selNotRec = [];
+ val.forEach((obj) => {
+ if (obj.rec) {
+ obj.rec.split(",").forEach((rec) => {
+ if (!selRec.includes(rec)) {
+ selRec.push(rec);
+ }
+ });
+ }
+ if (obj.notRec) {
+ obj.notRec.split(",").forEach((notRec) => {
+ if (!selNotRec.includes(notRec)) {
+ selNotRec.push(notRec);
+ }
+ });
+ }
+ });
+ this.selRec = selRec;
+ this.selNotRec = selNotRec;
+ },
+
+ showNotRec() {
+ return !!this.selNotRec.length;
+ },
+ },
+ methods: {
+ showDrawer(id) {
+ this.open = true;
+ this.title = id ? "修改菜品" : "新建菜品";
+ this.reset();
+ if (id) {
+ this.fetchDishesDetail(id);
+ }
+ this.$nextTick(() => {
+ this.$refs.igdRef.getList();
+ });
+ },
+ fetchDishesDetail(id) {
+ getDishes(id).then((response) => {
+ this.form = response.data;
+ this.form.dishClass = [this.form.bigClass, this.form.smallClass];
+ this.form.type = this.form.type ? this.form.type.split(",") : [];
+ });
+ },
+ handleOnIgdSelect(data) {
+ if (this.form.igdList.some((obj) => obj.id === data.id)) {
+ this.$message.error(`已存在食材${data.name}`);
+ return;
+ }
+ this.form.igdList.push({
+ ...data,
+ weight: 100,
+ cusUnit: 1,
+ cusWeight: 1,
+ });
+ },
+ handleOnDelete(data) {
+ this.form.igdList = this.form.igdList.filter((obj) => obj.id !== data.id);
+ },
+ cusUnitFormat(row, column) {
+ return this.selectDictLabel(this.cusUnitOptions, row.type);
+ },
+ cusWeightFormat(row, column) {
+ return this.selectDictLabel(this.cusWeightOptions, row.cusWeight);
+ },
+ // 取消按钮
+ cancel() {
+ this.open = false;
+ },
+ // 表单重置
+ reset() {
+ this.form = {
+ id: null,
+ name: null,
+ type: [],
+ dishClass: [],
+ methods: null,
+ createBy: null,
+ createTime: null,
+ updateBy: null,
+ updateTime: null,
+ igdList: [],
+ isMain: 1,
+ };
+ this.selRec = [];
+ this.selNotRec = [];
+ this.resetForm("form");
+ this.$nextTick(() => {
+ this.$refs.igdRef.reset();
+ });
+ },
+ /** 提交按钮 */
+ submitForm() {
+ this.$refs["form"].validate((valid) => {
+ if (valid) {
+ const data = JSON.parse(JSON.stringify(this.form));
+ // console.log({ data });
+ data.type = data.type.join(",");
+ if (data.id != null) {
+ updateDishes(data).then((response) => {
+ if (response.code === 200) {
+ this.msgSuccess("修改成功");
+ this.open = false;
+ this.$emit("onSuccess");
+ }
+ });
+ } else {
+ addDishes(data).then((response) => {
+ if (response.code === 200) {
+ this.msgSuccess("新增成功");
+ this.open = false;
+ this.$emit("onSuccess");
+ }
+ });
+ }
+ }
+ });
+ },
+
+ getSummaries(param) {
+ const { columns, data } = param;
+ // console.log(data);
+ return columns.reduce(
+ (arr, cur, idx) => {
+ if (idx > 1 && idx !== 7) {
+ if (idx === 6) {
+ arr[6] = (arr[3] * 4 + arr[4] * 9 + arr[5] * 4).toFixed(1);
+ } else {
+ arr[idx] = data.reduce((acc, dAcc) => {
+ if (idx === 2) {
+ return acc + parseFloat(dAcc.weight);
+ }
+ return parseFloat(
+ (
+ acc +
+ (dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
+ ).toFixed(1)
+ );
+ }, 0);
+ }
+ }
+ return arr;
+ },
+ ["合计"]
+ );
+ },
+ handleClose(done) {
+ this.reset();
+ done();
+ },
+ },
+};
+</script>
+<style lang="scss" scoped>
+.edit_dishes_drawer_wrapper {
+ height: 100%;
+ 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">
+#el-drawer__title {
+ & > span:focus {
+ outline: 0;
+ }
+}
+
+.el-transfer-panel__filter {
+ margin: 2px;
+}
+
+.el-transfer-panel__list.is-filterable {
+ padding-bottom: 28px;
+}
+
+.cus-unit {
+ display: inline-flex;
+ .el-input-number--mini {
+ width: 38px;
+ }
+
+ .el-input-number {
+ .el-input-number__decrease {
+ display: none;
+ }
+ .el-input-number__increase {
+ display: none;
+ }
+
+ .el-input {
+ width: 38px;
+ }
+
+ .el-input .el-input__inner {
+ padding: 0;
+ border-radius: 0;
+ border: unset;
+ border-bottom: 1px solid #dcdfe6;
+ }
+ }
+
+ .el-select {
+ .el-input__suffix {
+ display: none;
+ }
+
+ .el-input__inner {
+ padding: 0 4px;
+ /* border: unset; */
+ text-align: center;
+ }
+ }
+}
+
+.weight {
+ width: 70px;
+
+ .el-input .el-input__inner {
+ padding: 0 32px 0 4px;
+ }
+}
+
+.pagination-container {
+ margin-top: 0;
+}
+</style>
diff --git a/stdiet-ui/src/views/custom/dishes/index.vue b/stdiet-ui/src/views/custom/dishes/index.vue
index b01a02a5b..532a79f82 100644
--- a/stdiet-ui/src/views/custom/dishes/index.vue
+++ b/stdiet-ui/src/views/custom/dishes/index.vue
@@ -97,11 +97,7 @@
@queryTable="getList"
></right-toolbar>
</el-row>
- <el-table
- v-loading="loading"
- :data="dishesList"
- @selection-change="handleSelectionChange"
- >
+ <el-table v-loading="loading" :data="dishesList">
<el-table-column label="审核状态" align="center" width="80">
<template slot-scope="scope">
<el-tag
@@ -177,247 +173,28 @@
/>
<!-- 添加或修改菜品对话框 -->
- <el-drawer
- :title="title"
- :visible.sync="open"
- :wrapperClosable="false"
- size="50%"
- :close-on-press-escape="false"
- >
- <div class="drawer_content">
- <el-row class="content_detail">
- <el-form ref="form" :model="form" :rules="rules" label-width="80px">
- <el-col :span="24">
- <el-form-item label="菜品名称" prop="name">
- <el-input v-model="form.name" placeholder="请输入菜品名称" />
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="菜品种类" prop="dishClass">
- <el-cascader
- filterable
- v-model="form.dishClass"
- :options="dishClassOptions"
- :props="{ expandTrigger: 'hover' }"
- placeholder="请选择菜品种类"
- ></el-cascader>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="菜品类型" prop="type">
- <el-select
- v-model="form.type"
- placeholder="请选择菜品类型"
- multiple
- >
- <el-option
- v-for="dict in typeOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- ></el-option>
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="8">
- <el-form-item label="是否主食" prop="isMain">
- <el-radio-group v-model="form.isMain">
- <el-radio :label="0">是</el-radio>
- <el-radio :label="1">否</el-radio>
- </el-radio-group>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="食材" prop="ingIds">
- <el-transfer
- style="text-align: left; display: inline-block"
- v-model="selIngIds"
- size="mini"
- filterable
- :titles="['备选', '已选']"
- :button-texts="['', '']"
- :format="{
- noChecked: '${total}',
- hasChecked: '${checked}/${total}',
- }"
- @change="handleChange"
- :data="ingDataList"
- >
- <el-select
- class="transfer-footer"
- slot="left-footer"
- size="small"
- filterable
- v-model="ingType"
- @change="handleOnTypeChange"
- >
- <el-option
- v-for="dict in ingTypeOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- <div
- class="transfer-footer"
- slot="right-footer"
- size="small"
- />
- </el-transfer>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="分量" prop="weight">
- <el-table
- :data="selTableData"
- border
- show-summary
- size="mini"
- :summary-method="getSummaries"
- style="width: 100%"
- >
- <el-table-column prop="name" label="食材" align="center" />
- <el-table-column label="通俗计量" align="center">
- <template slot-scope="scope">
- <span class="cus-unit">
- <el-select size="mini" v-model="scope.row.cusWeight">
- <el-option
- v-for="dict in cusWeightOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="parseInt(dict.dictValue)"
- />
- </el-select>
- <el-select size="mini" v-model="scope.row.cusUnit">
- <el-option
- v-for="dict in cusUnitOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="parseInt(dict.dictValue)"
- />
- </el-select>
- </span>
- </template>
- </el-table-column>
- <el-table-column prop="weight" label="重量(g)" align="center">
- <template slot-scope="scope">
- <el-input-number
- class="weight"
- v-model="scope.row.weight"
- size="mini"
- controls-position="right"
- :min="0"
- :step="5"
- />
- </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-column label="热量" align="center">
- <template slot-scope="scope">
- {{
- `${(
- ((scope.row.proteinRatio * scope.row.weight) / 100) *
- 4 +
- ((scope.row.fatRatio * scope.row.weight) / 100) * 9 +
- ((scope.row.carbonRatio * scope.row.weight) / 100) * 4
- ).toFixed(1)} kcal`
- }}
- </template>
- </el-table-column>
- </el-table>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="推荐人群">
- <el-tag
- style="margin-right: 4px"
- v-for="rec in selRec"
- :key="rec"
- type="success"
- >
- {{ rec }}
- </el-tag>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="忌口人群">
- <el-tag
- style="margin-right: 4px"
- v-for="notRec in selNotRec"
- :key="notRec"
- type="danger"
- >
- {{ notRec }}
- </el-tag>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="审核状态" prop="reviewStatus">
- <el-select
- v-model="form.reviewStatus"
- placeholder="请选择审核状态"
- clearable
- >
- <el-option
- v-for="dict in reviewStatusOptions"
- :key="dict.dictValue"
- :label="dict.dictLabel"
- :value="dict.dictValue"
- />
- </el-select>
- </el-form-item>
- </el-col>
- <el-col :span="24">
- <el-form-item label="做法" prop="methods">
- <el-input
- v-model="form.methods"
- type="textarea"
- placeholder="请输入内容"
- rows="4"
- />
- </el-form-item>
- </el-col>
- </el-form>
- </el-row>
- <div slot="footer" class="dialog-footer">
- <el-button type="primary" @click="submitForm">确 定</el-button>
- <el-button @click="cancel">取 消</el-button>
- </div>
- </div>
- </el-drawer>
+ <EditDishesDrawer
+ ref="dishesDrawerRef"
+ :typeOptions="typeOptions"
+ :reviewStatusOptions="reviewStatusOptions"
+ :dishClassBigOptions="dishClassBigOptions"
+ :dishClassSmallOptions="dishClassSmallOptions"
+ :dishClassOptions="dishClassOptions"
+ @onSuccess="getList"
+ />
</div>
</template>
<script>
-import {
- addDishes,
- delDishes,
- exportDishes,
- getDishes,
- listDishes,
- updateDishes,
-} from "@/api/custom/dishes";
-import { listAllIngredient } from "@/api/custom/ingredient";
+import { delDishes, exportDishes, listDishes } from "@/api/custom/dishes";
import AutoHideInfo from "@/components/AutoHideInfo";
+import EditDishesDrawer from "./EditDishesDrawer";
export default {
name: "Dishes",
components: {
autohideinfo: AutoHideInfo,
+ EditDishesDrawer,
},
data() {
return {
@@ -425,10 +202,6 @@ export default {
loading: true,
// 选中数组
ids: [],
- // 非单个禁用
- single: true,
- // 非多个禁用
- multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
@@ -437,13 +210,7 @@ export default {
dishesList: [],
// 审核状态
reviewStatusOptions: [],
- // 弹出层标题
- title: "",
- // 是否显示弹出层
- open: false,
- ingType: "1",
- // 食材类别字典
- ingTypeOptions: [],
+
// 远程数据缓存，预防新增的食材找不到
oriDataList: [],
// 备选食材列表
@@ -456,14 +223,10 @@ export default {
selNotRec: [],
// 选中的食材id
selIngIds: [],
- // 选中的食材分量列表
- selTableData: [],
+
// 菜品类别字典
typeOptions: [],
- // 通俗单位
- cusUnitOptions: [],
- //
- cusWeightOptions: [],
+
dishClassOptions: [],
dishClassBigOptions: [],
dishClassSmallOptions: [],
@@ -476,10 +239,6 @@ export default {
bigClass: null,
smallClass: null,
},
- // 表单参数
- form: {},
- // 表单校验
- rules: {},
//菜品种类查询种类
dishClassQueryParam: [],
};
@@ -489,15 +248,7 @@ export default {
this.getDicts("cus_dishes_type").then((response) => {
this.typeOptions = response.data;
});
- this.getDicts("cus_ing_type").then((response) => {
- this.ingTypeOptions = response.data;
- });
- this.getDicts("cus_cus_unit").then((response) => {
- this.cusUnitOptions = response.data;
- });
- this.getDicts("cus_cus_weight").then((response) => {
- this.cusWeightOptions = response.data;
- });
+
this.getDicts("cus_review_status").then((response) => {
this.reviewStatusOptions = response.data;
});
@@ -582,12 +333,7 @@ export default {
.split(",")
.map((type) => this.selectDictLabel(this.typeOptions, type));
},
- cusUnitFormat(row, column) {
- return this.selectDictLabel(this.cusUnitOptions, row.type);
- },
- cusWeightFormat(row, column) {
- return this.selectDictLabel(this.cusWeightOptions, row.cusWeight);
- },
+
// 地域字典翻译
reviewStatusFormat(row, column) {
return this.selectDictLabel(this.reviewStatusOptions, row.area);
@@ -607,35 +353,6 @@ export default {
}
return "";
},
- // 取消按钮
- cancel() {
- this.open = false;
- this.reset();
- },
- // 表单重置
- reset() {
- this.form = {
- id: null,
- name: null,
- type: [],
- dishClass: [],
- methods: null,
- createBy: null,
- createTime: null,
- updateBy: null,
- updateTime: null,
- igdList: [],
- isMain: 1,
- };
- this.selIngIds = [];
- this.selIngList = [];
- this.selTableData = [];
- this.oriDataList = [];
- this.selRec = [];
- this.selNotRec = [];
- this.ingType = "1";
- this.resetForm("form");
- },
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
@@ -647,101 +364,13 @@ export default {
this.dishClassQueryParam = [];
this.handleQuery();
},
- // 多选框选中数据
- handleSelectionChange(selection) {
- this.ids = selection.map((item) => item.id);
- this.single = selection.length !== 1;
- this.multiple = !selection.length;
- },
/** 新增按钮操作 */
handleAdd() {
- this.reset();
- listAllIngredient({ type: this.ingType }).then((response) => {
- this.open = true;
- this.title = "添加菜品";
- this.oriDataList = response.rows;
- this.ingDataList = this.oriDataList.map((obj) => ({
- key: obj.id,
- label: obj.name,
- }));
- });
+ this.$refs.dishesDrawerRef.showDrawer();
},
/** 修改按钮操作 */
handleUpdate(row) {
- this.reset();
- const id = row.id || this.ids;
- getDishes(id).then((response) => {
- this.form = response.data;
- this.form.dishClass = [this.form.bigClass, this.form.smallClass];
- this.form.type = this.form.type ? this.form.type.split(",") : null;
- this.form.igdList.forEach((obj) => {
- this.selIngIds.push(obj.id);
- this.selIngList.push({
- key: obj.id,
- label: obj.name,
- });
- this.selTableData.push(obj);
- if (obj.rec) {
- obj.rec.split(",").forEach((rec) => {
- if (!this.selRec.includes(rec)) {
- this.selRec.push(rec);
- }
- });
- }
- if (obj.notRec) {
- obj.notRec.split(",").forEach((notRec) => {
- if (!this.selNotRec.includes(notRec)) {
- this.selNotRec.push(notRec);
- }
- });
- }
- });
- listAllIngredient({ type: this.ingType }).then((res) => {
- this.open = true;
- this.title = "修改菜品";
- this.oriDataList = res.rows.concat(this.form.igdList);
- this.ingDataList = this.oriDataList.reduce((arr, cur) => {
- if (!arr.some(({ key }) => key === cur.id)) {
- arr.push({
- key: cur.id,
- label: cur.name,
- });
- }
- return arr;
- }, []);
- });
- });
- },
- /** 提交按钮 */
- submitForm() {
- this.$refs["form"].validate((valid) => {
- if (valid) {
- if (!this.selTableData.length) {
- this.$message.error("食材不能为空");
- return;
- }
- const data = JSON.parse(JSON.stringify(this.form));
- data.igdList = this.selTableData;
- data.type = data.type.join(",");
- if (data.id != null) {
- updateDishes(data).then((response) => {
- if (response.code === 200) {
- this.msgSuccess("修改成功");
- this.open = false;
- this.getList();
- }
- });
- } else {
- addDishes(data).then((response) => {
- if (response.code === 200) {
- this.msgSuccess("新增成功");
- this.open = false;
- this.getList();
- }
- });
- }
- }
- });
+ this.$refs.dishesDrawerRef.showDrawer(row.id);
},
/** 删除按钮操作 */
handleDelete(row) {
@@ -776,178 +405,8 @@ export default {
})
.catch(function () {});
},
- handleChange(value, direction, movedKeys) {
- // console.log({
- // oriIgdList: this.oriDataList,
- // selIgdList: this.form.igdList,
- // ingDataList: this.ingDataList,
- // value,
- // ingType: this.ingType,
- // });
- const newTableData = [];
- this.selRec = [];
- this.selNotRec = [];
- this.selIngList = value.map((id) => {
- // 搜索table中的数据
- let tmpTableObj = this.selTableData.find((obj) => obj.id === id);
- if (tmpTableObj) {
- newTableData.push(tmpTableObj);
- } else {
- // 搜索请求的缓存数据
- tmpTableObj = this.oriDataList.find((obj) => obj.id === id);
- if (tmpTableObj) {
- newTableData.push({
- ...tmpTableObj,
- weight: 100,
- cusWeight: 1,
- cusUnit: 1,
- });
- }
- }
- if (tmpTableObj) {
- if (tmpTableObj.rec) {
- tmpTableObj.rec.split(",").forEach((rec) => {
- if (!this.selRec.includes(rec)) {
- this.selRec.push(rec);
- }
- });
- }
- if (tmpTableObj.notRec) {
- tmpTableObj.notRec.split(",").forEach((notRec) => {
- if (!this.selNotRec.includes(notRec)) {
- this.selNotRec.push(notRec);
- }
- });
- }
- }
- const tarObj = this.ingDataList.find(({ key }) => key === id);
- return tarObj;
- });
- this.selTableData = newTableData;
- },
- handleOnTypeChange(value) {
- listAllIngredient({ type: value }).then((res) => {
- this.oriDataList = res.rows.concat(this.form.igdList);
- this.ingDataList = this.oriDataList.reduce((arr, cur) => {
- if (!arr.some(({ key }) => key === cur.id)) {
- arr.push({
- key: cur.id,
- label: cur.name,
- });
- }
- return arr;
- }, []);
- });
- },
- getSummaries(param) {
- const { columns, data } = param;
- // console.log(data);
- return columns.reduce(
- (arr, cur, idx) => {
- if (idx > 1) {
- if (idx === 6) {
- arr[6] = arr[3] * 4 + arr[4] * 9 + arr[5] * 4 + " kcal";
- } else {
- arr[idx] = data.reduce((acc, dAcc) => {
- if (idx === 2) {
- return acc + parseFloat(dAcc.weight);
- }
- return parseFloat(
- (
- acc +
- (dAcc[cur.property] * parseFloat(dAcc.weight)) / 100
- ).toFixed(1)
- );
- }, 0);
- }
- }
- return arr;
- },
- ["合计"]
- );
- },
},
};
</script>
<style rel="stylesheet/scss" lang="scss">
-#el-drawer__title {
- & > span:focus {
- outline: 0;
- }
-}
-
-.el-transfer-panel__filter {
- margin: 2px;
-}
-
-.el-transfer-panel__list.is-filterable {
- padding-bottom: 28px;
-}
-
-.cus-unit {
- display: inline-flex;
- .el-input-number--mini {
- width: 38px;
- }
-
- .el-input-number {
- .el-input-number__decrease {
- display: none;
- }
- .el-input-number__increase {
- display: none;
- }
-
- .el-input {
- width: 38px;
- }
-
- .el-input .el-input__inner {
- padding: 0;
- border-radius: 0;
- border: unset;
- border-bottom: 1px solid #dcdfe6;
- }
- }
-
- .el-select {
- .el-input__suffix {
- display: none;
- }
-
- .el-input__inner {
- padding: 0 4px;
- /* border: unset; */
- text-align: center;
- }
- }
-}
-
-.weight {
- width: 70px;
-
- .el-input .el-input__inner {
- padding: 0 32px 0 4px;
- }
-}
-
-.drawer_content {
- height: 100%;
- 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>
diff --git a/stdiet-ui/src/views/custom/ingredient/index.vue b/stdiet-ui/src/views/custom/ingredient/index.vue
index 8bac238f2..038315fdb 100644
--- a/stdiet-ui/src/views/custom/ingredient/index.vue
+++ b/stdiet-ui/src/views/custom/ingredient/index.vue
@@ -146,6 +146,16 @@
</el-tag>
</template>
</el-table-column>
+ <el-table-column label="图片" align="center" width="100">
+ <template slot-scope="scope">
+ <img
+ width="100"
+ height="auto"
+ :src="scope.row.imgList[0] ? scope.row.imgList[0].previewUrl : ''"
+ :alt="scope.row.imgList[0] ? scope.row.imgList[0].name : ''"
+ />
+ </template>
+ </el-table-column>
<el-table-column
label="食材名称"
align="center"