修改界面

This commit is contained in:
huangdeliang 2021-01-15 23:15:09 +08:00
parent 0dffa51796
commit a9a6aeeaa1
5 changed files with 288 additions and 273 deletions

View File

@ -82,7 +82,7 @@ spring:
druid: druid:
# 主库数据源 # 主库数据源
master: master:
url: jdbc:mysql://47.115.23.82:3306/stdiet_test?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8 url: jdbc:mysql://47.115.23.82:3306/stdiet?useUnicode=true&characterEncoding=utf8&zeroDateTimeBehavior=convertToNull&useSSL=true&serverTimezone=GMT%2B8
password: gzDxPaZcSiXJpi2N password: gzDxPaZcSiXJpi2N
username: root username: root
slave: slave:

View File

@ -44,7 +44,7 @@
<sql id="selectSysIngreditentsByIdVo"> <sql id="selectSysIngreditentsByIdVo">
SELECT * FROM( SELECT * FROM(
SELECT ingredient_id AS id, ingredient_weight AS weight, cus_weight, cus_unit SELECT ingredient_id AS id, ingredient_weight AS weight, cus_weight, cus_unit, remark
FROM sys_dishes_ingredient FROM sys_dishes_ingredient
WHERE dishes_id = #{id} WHERE dishes_id = #{id}
) dishes ) dishes

View File

@ -3,7 +3,7 @@
<div v-for="item in mData" :key="item"> <div v-for="item in mData" :key="item">
{{ item }} {{ item }}
</div> </div>
<div v-if="showMore"> <div v-if="data.length > 3">
<div>...</div> <div>...</div>
<el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover"> <el-popover placement="top-start" width="200" popper-class="autohideinfo_detial" trigger="hover">
<div v-for="item in data" :key="item">{{ item }}</div> <div v-for="item in data" :key="item">{{ item }}</div>
@ -14,30 +14,28 @@
</template> </template>
<script> <script>
export default { export default {
name: "AutoHideInfo", name: "AutoHideInfo",
data() { data() {
return { return {
mData: [], };
showMore: false,
};
},
props: {
data: {
type: Array,
default: [],
required: true,
}, },
}, props: {
watch: { data: {
data: function (val, oldVal) { type: Array,
if (val) { default: '',
this.showMore = val.length > 3; // required: true,
this.mData = val.slice(0, 3); },
}
}, },
}, computed: {
}; mData: function () {
if (this.data instanceof Array) {
return this.data.slice(0, 3);
}
return [];
},
},
};
</script> </script>
<style> <style>

View File

@ -51,8 +51,16 @@
</el-row> </el-row>
<el-table v-loading="loading" :data="dishesList" @selection-change="handleSelectionChange"> <el-table v-loading="loading" :data="dishesList" @selection-change="handleSelectionChange">
<!-- <el-table-column type="selection" width="55" align="center" />--> <el-table-column label="审核状态" align="center" width="80">
<!-- <el-table-column label="id" align="center" prop="id" />--> <template slot-scope="scope">
<el-tag
:type="scope.row.reviewStatus === 'yes' ? 'success' : 'danger'"
disable-transitions
>
{{ scope.row.reviewStatus === "yes" ? "已审核" : "未审核" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="菜品名称" align="center" prop="name"/> <el-table-column label="菜品名称" align="center" prop="name"/>
<el-table-column label="菜品类型" align="center" prop="type" :formatter="typeFormat"/> <el-table-column label="菜品类型" align="center" prop="type" :formatter="typeFormat"/>
<el-table-column label="包含食材" align="center"> <el-table-column label="包含食材" align="center">
@ -65,18 +73,12 @@
</el-table-column> </el-table-column>
<el-table-column label="推荐人群" align="center"> <el-table-column label="推荐人群" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-for="tag in scope.row.recTags" <autohideinfo :data="scope.row.recTags"/>
:key="tag">
{{tag}}
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="忌口人群" align="center"> <el-table-column label="忌口人群" align="center">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-for="tag in scope.row.notRecTags" <autohideinfo :data="scope.row.notRecTags"/>
:key="tag">
{{tag}}
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="做法" align="center" prop="methods"/> <el-table-column label="做法" align="center" prop="methods"/>
@ -219,6 +221,10 @@
prop="carbonRatio" prop="carbonRatio"
label="C/100g"> label="C/100g">
</el-table-column> </el-table-column>
<el-table-column
prop="remark"
label="备注">
</el-table-column>
</el-table> </el-table>
</el-form-item> </el-form-item>
<el-form-item label="推荐人群"> <el-form-item label="推荐人群">
@ -255,9 +261,13 @@
<script> <script>
import {addDishes, delDishes, exportDishes, getDishes, listDishes, updateDishes} from "@/api/custom/dishes"; import {addDishes, delDishes, exportDishes, getDishes, listDishes, updateDishes} from "@/api/custom/dishes";
import {listAllIngredient} from "@/api/custom/ingredient"; import {listAllIngredient} from "@/api/custom/ingredient";
import AutoHideInfo from "@/components/AutoHideInfo";
export default { export default {
name: "Dishes", name: "Dishes",
components: {
autohideinfo: AutoHideInfo,
},
data() { data() {
return { return {
// //
@ -578,6 +588,10 @@
const {columns, data} = param; const {columns, data} = param;
return columns.reduce((arr, cur, idx) => { return columns.reduce((arr, cur, idx) => {
if (idx > 1) { if (idx > 1) {
if(idx === 6) {
//
return arr;
}
arr[idx] = data.reduce((acc, dAcc) => { arr[idx] = data.reduce((acc, dAcc) => {
if (idx === 2) { if (idx === 2) {
return acc + parseFloat(dAcc.weight); return acc + parseFloat(dAcc.weight);

View File

@ -96,10 +96,12 @@
icon="el-icon-search" icon="el-icon-search"
size="mini" size="mini"
@click="handleQuery" @click="handleQuery"
>搜索</el-button >搜索
</el-button
> >
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery" <el-button icon="el-icon-refresh" size="mini" @click="resetQuery"
>重置</el-button >重置
</el-button
> >
</el-form-item> </el-form-item>
</el-form> </el-form>
@ -112,7 +114,7 @@
size="mini" size="mini"
@click="handleAdd" @click="handleAdd"
v-hasPermi="['custom:ingredient:add']" v-hasPermi="['custom:ingredient:add']"
>新增 >新增
</el-button> </el-button>
</el-col> </el-col>
<el-col :span="1.5"> <el-col :span="1.5">
@ -122,7 +124,7 @@
size="mini" size="mini"
@click="handleExport" @click="handleExport"
v-hasPermi="['custom:ingredient:export']" v-hasPermi="['custom:ingredient:export']"
>导出 >导出
</el-button> </el-button>
</el-col> </el-col>
<right-toolbar <right-toolbar
@ -190,19 +192,15 @@
width="120" width="120"
> >
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.notRec"> <autohideinfo :data="string2Arr(scope.row.notRec)"/>
<autohideinfo :data="scope.row.notRec.split(',')" />
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="推荐人群" align="center" prop="rec" width="120"> <el-table-column label="推荐人群" align="center" prop="rec" width="120">
<template slot-scope="scope"> <template slot-scope="scope">
<div v-if="scope.row.rec"> <autohideinfo :data="string2Arr(scope.row.rec)"/>
<autohideinfo :data="scope.row.rec.split(',')" />
</div>
</template> </template>
</el-table-column> </el-table-column>
<el-table-column label="备注" align="center" prop="remark" /> <el-table-column label="备注" align="center" prop="remark"/>
<el-table-column <el-table-column
label="操作" label="操作"
align="center" align="center"
@ -215,7 +213,7 @@
icon="el-icon-edit" icon="el-icon-edit"
@click="handleUpdate(scope.row)" @click="handleUpdate(scope.row)"
v-hasPermi="['custom:ingredient:edit']" v-hasPermi="['custom:ingredient:edit']"
>修改 >修改
</el-button> </el-button>
<el-button <el-button
size="mini" size="mini"
@ -223,7 +221,7 @@
icon="el-icon-delete" icon="el-icon-delete"
@click="handleDelete(scope.row)" @click="handleDelete(scope.row)"
v-hasPermi="['custom:ingredient:remove']" v-hasPermi="['custom:ingredient:remove']"
>删除 >删除
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
@ -243,7 +241,7 @@
<el-form ref="form" :model="form" :rules="rules" label-width="80px"> <el-form ref="form" :model="form" :rules="rules" label-width="80px">
<el-col :span="12"> <el-col :span="12">
<el-form-item label="食材名称" prop="name" label-width="90px"> <el-form-item label="食材名称" prop="name" label-width="90px">
<el-input v-model="form.name" placeholder="请输入食材名称" /> <el-input v-model="form.name" placeholder="请输入食材名称"/>
</el-form-item> </el-form-item>
</el-col> </el-col>
<el-col :span="12"> <el-col :span="12">
@ -378,239 +376,244 @@
</template> </template>
<script> <script>
import { import {
addIngredient, addIngredient,
delIngredient, delIngredient,
exportIngredient, exportIngredient,
getIngredient, getIngredient,
listIngredient, listIngredient,
updateIngredient, updateIngredient,
} from "@/api/custom/ingredient"; } from "@/api/custom/ingredient";
import AutoHideInfo from "@/components/AutoHideInfo"; import AutoHideInfo from "@/components/AutoHideInfo";
import { listPhysicalSigns } from "@/api/custom/physicalSigns"; import {listPhysicalSigns} from "@/api/custom/physicalSigns";
export default { export default {
name: "Ingredient", name: "Ingredient",
components: { components: {
autohideinfo: AutoHideInfo, autohideinfo: AutoHideInfo,
},
data() {
return {
//
loading: true,
//
ids: [],
//
single: true,
//
multiple: true,
//
showSearch: true,
//
total: 0,
//
ingredientList: [],
//
reviewStatusOptions: [],
//
title: "",
//
open: false,
//
typeOptions: [],
//
areaOptions: [],
//
physicalSignsOptions: [],
//
queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
type: null,
area: null,
notRecIds: null,
recIds: null,
reviewStatus: null,
},
//
form: {},
//
rules: {},
};
},
created() {
this.getList();
this.getDicts("cus_ing_type").then((response) => {
this.typeOptions = response.data;
});
this.getDicts("cus_area").then((response) => {
this.areaOptions = response.data;
});
this.getDicts("cus_review_status").then((response) => {
this.reviewStatusOptions = response.data;
});
listPhysicalSigns().then((response) => {
this.physicalSignsOptions = response.rows.map((obj) => ({
dictLabel: obj.name,
dictValue: obj.id,
}));
});
},
methods: {
/** 查询食材列表 */
getList() {
this.loading = true;
listIngredient(this.queryParams).then((response) => {
this.ingredientList = response.rows;
this.total = response.total;
this.loading = false;
});
}, },
// data() {
typeFormat(row, column) { return {
return this.selectDictLabel(this.typeOptions, row.type); //
}, loading: true,
// //
areaFormat(row, column) { ids: [],
return this.selectDictLabel(this.areaOptions, row.area); //
}, single: true,
// //
cancel() { multiple: true,
this.open = false; //
this.reset(); showSearch: true,
}, //
// total: 0,
reset() { //
this.form = { ingredientList: [],
id: null, //
name: null, reviewStatusOptions: [],
type: null, //
proteinRatio: null, title: "",
fatRatio: null, //
carbonRatio: null, open: false,
area: null, //
notRecIds: [], typeOptions: [],
recIds: [], //
remark: null, areaOptions: [],
createBy: null, //
createTime: null, physicalSignsOptions: [],
updateBy: null, //
updateTime: null, queryParams: {
pageNum: 1,
pageSize: 10,
name: null,
type: null,
area: null,
notRecIds: null,
recIds: null,
reviewStatus: null,
},
//
form: {},
//
rules: {},
}; };
this.resetForm("form");
}, },
/** 搜索按钮操作 */ created() {
handleQuery() {
this.queryParams.pageNum = 1;
this.getList(); this.getList();
this.getDicts("cus_ing_type").then((response) => {
this.typeOptions = response.data;
});
this.getDicts("cus_area").then((response) => {
this.areaOptions = response.data;
});
this.getDicts("cus_review_status").then((response) => {
this.reviewStatusOptions = response.data;
});
listPhysicalSigns().then((response) => {
this.physicalSignsOptions = response.rows.map((obj) => ({
dictLabel: obj.name,
dictValue: obj.id,
}));
});
}, },
/** 重置按钮操作 */ methods: {
resetQuery() { /** 查询食材列表 */
this.resetForm("queryForm"); getList() {
this.handleQuery(); this.loading = true;
}, listIngredient(this.queryParams).then((response) => {
// this.ingredientList = response.rows;
handleSelectionChange(selection) { this.total = response.total;
this.ids = selection.map((item) => item.id); this.loading = false;
this.single = selection.length !== 1; });
this.multiple = !selection.length; },
}, //
/** 新增按钮操作 */ typeFormat(row, column) {
handleAdd() { return this.selectDictLabel(this.typeOptions, row.type);
this.reset(); },
this.open = true; //
this.title = "添加食材"; areaFormat(row, column) {
}, return this.selectDictLabel(this.areaOptions, row.area);
/** 修改按钮操作 */ },
handleUpdate(row) { //
this.reset(); cancel() {
const id = row.id || this.ids; this.open = false;
getIngredient(id).then((response) => { this.reset();
this.form = response.data; },
this.form.notRecIds = this.form.rec //
? this.form.rec reset() {
.split(",") this.form = {
.map( id: null,
(label) => name: null,
this.physicalSignsOptions.find( type: null,
(pObj) => pObj.dictLabel === label proteinRatio: null,
).dictValue fatRatio: null,
) carbonRatio: null,
: []; area: null,
this.form.recIds = this.form.notRec notRecIds: [],
? this.form.notRec recIds: [],
.split(",") remark: null,
.map( createBy: null,
(label) => createTime: null,
this.physicalSignsOptions.find( updateBy: null,
(pObj) => pObj.dictLabel === label updateTime: null,
).dictValue };
) this.resetForm("form");
: []; },
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.resetForm("queryForm");
this.handleQuery();
},
//
handleSelectionChange(selection) {
this.ids = selection.map((item) => item.id);
this.single = selection.length !== 1;
this.multiple = !selection.length;
},
/** 新增按钮操作 */
handleAdd() {
this.reset();
this.open = true; this.open = true;
this.title = "修改食材"; this.title = "添加食材";
}); },
}, /** 修改按钮操作 */
/** 提交按钮 */ handleUpdate(row) {
submitForm() { this.reset();
this.$refs["form"].validate((valid) => { const id = row.id || this.ids;
if (valid) { getIngredient(id).then((response) => {
if (this.form.id != null) { this.form = response.data;
updateIngredient(this.form).then((response) => { this.form.notRecIds = this.form.rec
if (response.code === 200) { ? this.form.rec
this.msgSuccess("修改成功"); .split(",")
this.open = false; .map(
this.getList(); (label) =>
} this.physicalSignsOptions.find(
}); (pObj) => pObj.dictLabel === label
} else { ).dictValue
addIngredient(this.form).then((response) => { )
if (response.code === 200) { : [];
this.msgSuccess("新增成功"); this.form.recIds = this.form.notRec
this.open = false; ? this.form.notRec
this.getList(); .split(",")
} .map(
}); (label) =>
this.physicalSignsOptions.find(
(pObj) => pObj.dictLabel === label
).dictValue
)
: [];
this.open = true;
this.title = "修改食材";
});
},
/** 提交按钮 */
submitForm() {
this.$refs["form"].validate((valid) => {
if (valid) {
if (this.form.id != null) {
updateIngredient(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("修改成功");
this.open = false;
this.getList();
}
});
} else {
addIngredient(this.form).then((response) => {
if (response.code === 200) {
this.msgSuccess("新增成功");
this.open = false;
this.getList();
}
});
}
} }
} });
}); },
/** 删除按钮操作 */
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除食材编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return delIngredient(ids);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
})
.catch(function () {
});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有食材数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return exportIngredient(queryParams);
})
.then((response) => {
this.download(response.msg);
})
.catch(function () {
});
},
string2Arr(str) {
return str ? str.split(',') : []
}
}, },
/** 删除按钮操作 */ };
handleDelete(row) {
const ids = row.id || this.ids;
this.$confirm('是否确认删除食材编号为"' + ids + '"的数据项?', "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return delIngredient(ids);
})
.then(() => {
this.getList();
this.msgSuccess("删除成功");
})
.catch(function () {});
},
/** 导出按钮操作 */
handleExport() {
const queryParams = this.queryParams;
this.$confirm("是否确认导出所有食材数据项?", "警告", {
confirmButtonText: "确定",
cancelButtonText: "取消",
type: "warning",
})
.then(function () {
return exportIngredient(queryParams);
})
.then((response) => {
this.download(response.msg);
})
.catch(function () {});
},
},
};
</script> </script>