hzd/h5
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

每周食谱对接菜单新增修改

Browse Source
This commit is contained in:
xiayuping666
2024-02-02 17:51:49 +08:00
parent ad52fa5c78
commit e1681bb58a
4 changed files with 548 additions and 206 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/utils/request.js
+23 -7
View File
@@ -3,7 +3,12 @@ import router, { resetRouter } from '@/router/index';
import axios from 'axios';
import { Message, MessageBox } from 'element-ui';
import { Session } from '@/utils/storage';
const errorCode = {
'401': '登录状态已过期,即将返回首页重新登录。',
'403': '当前操作没有权限',
'404': '访问资源不存在',
'default': '系统未知错误，请反馈给管理员'
}
// 创建 axios 实例
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
@@ -28,11 +33,12 @@ service.interceptors.request.use(
// 添加响应拦截器
service.interceptors.response.use(
(response) => {
(res) => {
// 对响应数据做点什么
const res = response.data;
if (res.code && res.code !== 0) {
// `token` 过期或者账号已在别处登录
const response = res.data;
const code = res.data.code || 200;
const message = errorCode[code] || res.data.msg || errorCode['default']
if (code === 401) {
if (res.code === 401 || res.code === 4001) {
// 清除浏览器全部临时缓存
Session.clear();
@@ -43,9 +49,19 @@ service.interceptors.response.use(
.then(() => {})
.catch(() => {});
}
return Promise.reject(service.interceptors.response.error);
} else if (code === 500) {
// Message({ message: msg, type: 'error' })
Message.error(message);
return Promise.reject(new Error(msg))
} else if (code === 601) {
// Message({ message: msg, type: 'warning' })
Message.error(message);
return Promise.reject('error')
} else if (code != 200) {
Message.error(message);
return Promise.reject('error')
} else {
return response.data;
return response
}
},
(error) => {
src/views/recipe/api.js
+55 -22
View File
@@ -1,32 +1,65 @@
import request from '@/utils/request';
// 获取设备数据列表
export const rqGetDeviceList = (current,size) => request({
url: `/attendance/equipment/device?current=${current}&size=${size}`,
// 查询学校学期食谱标题列表
export function getSemester (data) {
return request({
url: '/semester/recipe/list',
method: 'get',
})
// 添加或者修改
export const rqAddOrModifyDevice = (data) => {
if(data.deviceId){
return request({
url: '/attendance/equipment/device',
method: 'put',
data
})
}else{
}
// 通过学期食谱标题id获取这学期的每周食谱
export function getWeek (rId) {
return request({
url: '/attendance/equipment/device',
url: '/week/recipe/list',
method: 'get',
params: {
rId
}
})
}
// 通过每周id获取食谱列表
export function getRecipe (wId) {
return request({
url: '/recipe/menu/list',
method: 'get',
params: {
wId
}
})
}
// 新增食谱大标题
export function postSemester (data) {
return request({
url: '/semester/recipe',
method: 'post',
data
})
}
// 通过学期食谱标题id添加这学期的每周食谱
export function postWeek (data) {
return request({
url: '/week/recipe',
method: 'post',
data
})
}
// 添加这周每日食谱
export function postMeal (data) {
return request({
url: '/recipe/menu',
method: 'post',
data
})
}
}
// 删除
export const rqDeleteDevice = (id) => request({
url: `/attendance/equipment/device/${id}`,
method: 'delete',
})
// 修改这周每日食谱
export function putMeal (data) {
return request({
url: '/recipe/menu',
method: 'put',
data
})
}
src/views/recipe/components/CommonHead.vue
+65
View File
@@ -0,0 +1,65 @@
<template>
<div>
<el-button @click="newlyClick" type="primary" size="mini" icon="el-icon-plus"
>新增食谱</el-button
>
<el-button @click="updateClick" icon="el-icon-edit" size="mini" >修改食谱</el-button>
<el-button @click="newlyTwoClick" type="success" size="mini" icon="el-icon-plus"
>新增周次</el-button
>
<el-button @click="updateTwoClick" icon="el-icon-edit" size="mini" >修改周次</el-button>
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
>重置</el-button
>
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
>搜索</el-button
>
<el-input
v-if="false"
v-model="searchData"
size="mini"
style="width: 20%"
placeholder="请输入搜索的关键字"
>
</el-input>
</div>
</template>
<script>
export default {
name: "CommonHead",
data() {
return {
searchData: "",
};
},
methods: {
newlyClick() {
// 在此处调用父组件传入的方法叫父组件做事情
this.$emit("newly-data");
},
updateClick() {
// 在此处调用父组件传入的方法叫父组件做事情
this.$emit("update-data");
},
newlyTwoClick() {
// 在此处调用父组件传入的方法叫父组件做事情
this.$emit("newly-two-data");
},
updateTwoClick() {
// 在此处调用父组件传入的方法叫父组件做事情
this.$emit("update-two-data");
},
resetClick() {
this.$emit("reset-data");
},
searchClick() {
this.$emit("search-data", this.searchData);
},
},
};
</script>
<style lang="scss" scoped></style>
src/views/recipe/index.vue
+376 -148
View File
@@ -6,56 +6,87 @@
@search-data="searchForm"
@reset-data="reset"
@newly-data="add"
@newly-two-data="addWeek"
@update-data="updateClick"
@update-two-data="updateTwoClick"
></CommonHead>
<!-- newly-data删除所选事件 -->
<!-- reset-data重置表单内容 -->
<!-- search-data搜索事件，接收被搜索的内容 -->
</el-card>
<el-card shadow="hover">
<el-select v-model="value" placeholder="请选择学期">
<el-card shadow="hover" style=" margin-top: 20px;" >
<el-select @change="onChangeTerm" v-model="query.rId" placeholder="请选择学期" clearable style="margin-right: 20px;">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
</el-option>
</el-select>
<el-select v-model="value" placeholder="请选择周次">
<el-option
v-for="item in options"
:key="item.value"
:label="item.label"
:value="item.value">
v-for="item in termArr"
:key="item.id"
:label="item.sName"
:value="item.id">
</el-option>
</el-select>
<el-select @change="onChangeWeek" v-model="query.wId" clearable placeholder="请选择周次" >
<el-option
v-for="item in weekArr"
:key="item.id"
:label="item.wName"
:value="item.id">
</el-option>
</el-select>
<div v-for="item in allClass" style="width: 100%; margin-top: 20px;">
<h4 style="line-height: 50px;">{{ item.tName }}</h4>
<el-table
:data="tableData1"
style="width: 100%"
row-key="id"
@cell-click="onClickCell"
:data="item.tableData"
:row-style="{ height: '50px' }"
:key="item.id"
border
lazy
:load="load"
:tree-props="{children: 'children', hasChildren: 'hasChildren'}">
<el-table-column
prop="date"
label="日期"
width="180">
>
<el-table-column label="周次">
<template slot-scope="scope">
{{ weekEnum[scope.row.name ]}}
</template>
</el-table-column>
<el-table-column
prop="name"
label="姓名"
width="180">
prop="brekker"
label="早餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.brekker" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="address"
label="地址">
prop="brekkerDessert"
label="早点">
<template slot-scope="scope">
<span v-for=" item in scope.row.brekkerDessert" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="lunch"
label="午餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.lunch" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="lunchDessert"
label="午点">
<template slot-scope="scope">
<span v-for=" item in scope.row.lunchDessert" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
<el-table-column
prop="supper"
label="晚餐">
<template slot-scope="scope">
<span v-for=" item in scope.row.supper" style="margin-right: 20px;">{{ item.name+ ' ' + item.num }}</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<Pagination
:total="total"
:pageNum="query.pageNum"
@@ -64,13 +95,83 @@
@clickSize="onClickSize"
/>
</div>
<el-dialog title="新增食谱标题" :visible.sync="isRecipeModel">
<el-form ref="form" width="30%"
:before-close="handleClose" label-width="80px" >
<el-form-item label="食谱标题">
<el-input v-model="form.sName" placeholder="请输入食谱标题:例如2024年春期食谱" :disabled="form.rId ? true : false"></el-input>
</el-form-item>
<el-form-item v-if="form.rId" label="周次">
<el-input v-model="form.wName" type="number" placeholder="请输入周次:例如1"></el-input>
</el-form-item>
<el-form-item>
<el-button @click="onClickCreate()" type="primary" >立即创建</el-button>
<el-button @click="isRecipeModel = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<el-dialog :title="mealTitle" :visible.sync="isMealModel">
<el-form ref="form" width="30%" :before-close="handleClose" label-width="80px" >
<div style="height: 40px;">
<span style="margin-right: 20px; font-size: 18px;">{{cellInfo.sName}}</span>
<span style="margin-right: 20px;font-size: 18px;">{{ '第' + cellInfo.weekTimeName}}周</span>
<span style="margin-right: 20px;font-size: 18px;">{{ weekEnum[cellInfo.weekName] }}</span>
<span style="margin-right: 20px;font-size: 18px;">{{cellInfo.mealName}}</span>
</div>
<div class="material-list" v-for="(item, index) in cellInfo.mealArr" :key="index">
<div class="top-box">
<el-form-item label="食物名称" >
<el-input v-model="item.name"/>
</el-form-item>
<el-form-item label="食物数量" >
<el-input v-model="item.num"/>
</el-form-item>
<div @click="onClickRemove(index)" class="delete-box">
<i class="el-icon-delete"></i>
</div>
</div>
</div>
<div style="width: 100%; display: flex; justify-content: flex-end;">
<el-button @click="onClickAddMeal()" round><i class="el-icon-plus"></i>新增食物</el-button>
</div>
<el-form-item>
<el-button @click="onClickSubmit()" type="primary" >提交</el-button>
<el-button @click="isRecipeModel = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
<!-- 修改食谱 -->
<el-dialog title="修改" width="25%" :visible.sync="isUpdateModel">
<div class="content" style=" height: 400px; overflow: scroll;">
<div v-for=" (item, index) in termArr" :key="index" style="display: flex; height: 30px; align-items: center;">
<div v-if="!item.isEdit" style="font-size: 14px; flex: 1;">{{ item.sName }} </div>
<el-input v-if="item.isEdit" v-model="item.sName" style="font-size: 14px; flex: 1;"></el-input>
<i @click="onClickUpdateTerm(index)" class="el-icon-edit" style="cursor: pointer;margin-right: 20px;">{{ item.isEdit ? '修改' : '保存' }}</i>
<i @click="onClickRemoveTerm(index)" class="el-icon-delete" style="cursor: pointer;">删除</i>
</div>
</div>
<el-form ref="form" width="30%" :before-close="handleClose" label-width="80px" >
<el-form-item>
<el-button @click="onClickSubmitTerm()" type="primary" >提交</el-button>
<el-button @click="isUpdateModel = false">取消</el-button>
</el-form-item>
</el-form>
</el-dialog>
</div>
</template>
<script>
import columns from "./columns";
import { rqGetDeviceList, rqAddOrModifyDevice, rqDeleteDevice } from "./api";
import { getSemester, getWeek, getRecipe, postSemester, postWeek, postMeal, putMeal } from "./api";
import { formatDate } from "@/com/index";
import CommonHead from './components/CommonHead.vue'
export default {
name: "deviceManagement",
@@ -81,42 +182,17 @@ export default {
query: {
pageNum: 1,
pageSize: 10,
rId: '',
wId: '',
},
loading: false,
equipmentList: [],
dialogVisible: false,
from: {
// 设备名称
deviceName: "",
// 设备标签
deviceLabel: "",
// 设备地址
deviceUrl: "",
// 设备物理地址
macAddress: "",
// 设备账号
username: "",
// 设备密码
password: "",
form: {
sName: "",
wName: '',
rId: '',
},
options: [{
value: '选项1',
label: '黄金糕'
}, {
value: '选项2',
label: '双皮奶'
}, {
value: '选项3',
label: '蚵仔煎'
}, {
value: '选项4',
label: '龙须面'
}, {
value: '选项5',
label: '北京烤鸭'
}],
value: '',
tableData1: [{
id: 1,
date: '2016-05-02',
@@ -139,6 +215,24 @@ export default {
name: '王小虎',
address: '上海市普陀区金沙江路 1516 弄'
}],
tableData: [],
termArr: [], // 学期数组
weekArr: [], // 周次数组
isRecipeModel: false,
isMealModel: false,
isUpdateModel: false,
cellForm: {}, // 单元格数据
cellInfo: {
sName: '',
weekTimeName: '',
weekName: '',
mealName: '',
meal: '',
mealArr: [],
}, // 单元格信息
allClass: {}, // 所有班级
defaultTable: [], // 默认表格
mealTitle: '新增食物',
// 对话框表单验证
rules: {
deviceName: [{ required: true, message: "请输入设备名称", trigger: "change" }],
@@ -148,56 +242,188 @@ export default {
username: [{ required: true, message: "请输入设备账号名称", trigger: "change" }],
password: [{ required: true, message: "请输入设备密码", trigger: "change" }],
},
weekEnum: {
Monday: '周一',
Tuesday:'周二',
Wednesday: '周三',
Thursday: '周四',
Friday: '周五',
Saturday: '周六',
Sunday: '周天'
}
};
},
components: {
CommonHead,
},
created() {
// this.getAttendanceFormData();
this.semesterList()
this.defaultTable = []
for( let key in this.weekEnum){
let obj = {
name: key,
brekker: [], // 早餐
brekkerDessert: [], // 早点
lunch: [], // 午餐
lunchDessert: [], // 午点
supper: [], // 晚餐
}
this.defaultTable.push(obj)
}
this.tableData = this.defaultTable
},
methods: {
load(tree, treeNode, resolve) {
console.log(tree)
console.log(treeNode)
console.log(resolve)
if(tree.id == 32){
setTimeout(() => {
// 点击
onClickSubmitTerm() {
resolve([
{
id: 34,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 39,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
},
onClickUpdateTerm(index) {
this.termArr[index].isEdit = true
},
onClickRemoveTerm(index) {
this.termArr.splice(index, 1)
},
// 点击修改食谱
updateClick() {
this.isUpdateModel = true
},
// 点击修改周
updateTwoClick() {
this.isUpdateModel = true
},
// 点击提交新增食物
onClickSubmit () {
let arr = []
this.allClass.map(item =>{
if(item.id == this.cellInfo.id){ // 筛选选择的办
item.tableData.map( it =>{
if(it.name == this.cellInfo.weekName ){
it[this.cellInfo.label] = this.cellInfo.mealArr
}
])
}, 500)
arr.push(it)
})
}
})
console.log(arr)
if(this.mealTitle == '修改食物'){
let obj = { id: this.cellInfo.id, tName: this.cellInfo.tName, contents: JSON.stringify(arr) }
putMeal(obj).then(res =>{
this.isMealModel = false
this.$message({ message: "修改成功", type: "success", });
this.recipeList()
})
}else if(this.mealTitle == '新增食物'){
let obj = { wId: this.cellInfo.wId, tName: this.cellInfo.tName, contents: JSON.stringify(arr) }
postMeal(obj).then(res =>{
this.isMealModel = false
this.$message({ message: "添加成功", type: "success", });
})
}
},
// 点击新增食物
onClickAddMeal() {
let obj = {name: '', num: ''}
this.cellInfo.mealArr.push(obj)
},
onClickRemove(index) {
this.cellInfo.mealArr.splice(index,1)
},
// 点击单元格
onClickCell(row, column, cell, event) {
console.log(row)
console.log(column)
this.isMealModel = true
this.cellInfo = {
sName: '',
weekTimeName: '',
weekName: '',
mealName: '',
label: '',
mealArr: [],
}
this.cellInfo.sName = this.termArr.find(item => item.id == this.query.rId).sName;
this.cellInfo.weekTimeName = this.weekArr.find(item => item.id == this.query.wId).wName;
this.cellInfo.weekName = row.name
this.cellInfo.mealName = column.label
this.cellInfo.label = column.property
this.cellInfo.tName = row.tName
row.id ? this.cellInfo.id = row.id : this.cellInfo.id = null
this.cellInfo.wId = row.wId
row[column.property] ? this.cellInfo.mealArr = JSON.parse(JSON.stringify(row[column.property] )) : this.cellInfo.mealArr = []
this.cellInfo.id ? this.mealTitle = '修改食物' : this.mealTitle = '新增食物'
console.log(this.cellInfo)
},
// 点击创建食谱标题
onClickCreate() {
if(this.form.rId){ // 新增周次
postWeek(this.form).then(res =>{
this.isRecipeModel = false
this.$message({ message: '新增成功',type: 'success', });
this.semesterList()
this.weekList()
this.reset()
})
}else { // 新增学期
postSemester(this.form).then(res =>{
this.isRecipeModel = false
this.$message({ message: '新增成功',type: 'success', });
this.semesterList()
this.reset()
})
}
},
// 获取学期列表
semesterList() {
getSemester().then( res =>{
console.log(res.rows)
this.termArr = res.rows.map(item =>{
item.isEdit = false
return item
})
})
},
weekList() {
console.log()
getWeek(this.query.rId).then(res =>{
this.weekArr = res.data
})
},
// 班级列表
recipeList(){
getRecipe(this.query.wId).then(res =>{
this.allClass = res.data.map( item =>{
if(item.contents){
let arr = JSON.parse(item.contents)
item.tableData = arr.map(it =>{ it.id = item.id; it.wId = item.wId; it.tName = item.tName; return it})
}else {
setTimeout(() => {
resolve([
{
id: 31,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄'
}, {
id: 32,
date: '2016-05-01',
name: '王小虎',
address: '上海市普陀区金沙江路 1519 弄',
hasChildren: true
}
])
}, 500)
item.tableData = this.defaultTable.map(it =>{ it.id = item.id; it.wId = item.wId; it.tName = item.tName ; return it})
}
return item
})
console.log(this.allClass)
})
},
// 点击选择学期
onChangeTerm(value) {
console.log(value)
this.weekArr = []
this.query.rId = value
this.query.wId = ''
this.allClass = []
this.weekList()
},
onChangeWeek(value) {
console.log(value)
this.query.wId = value
this.allClass = []
this.recipeList(this.query.wId)
},
// 搜索按钮
searchForm() {
@@ -205,30 +431,32 @@ export default {
},
// 重置按钮
reset() {
this.bus.$emit("onCurrentContextmenuClick", {
id: 0,
path: this.$route.path,
});
this.form = {
sName: "",
wName: '',
rId: '',
}
},
// 添加
// 添加食谱
add() {
console.log(888);
this.dialogVisible = true;
// 清除数据
this.from = {
// 设备名称
deviceName: "",
// 设备标签
deviceLabel: "",
// 设备地址
deviceUrl: "",
// 设备物理地址
macAddress: "",
// 设备账号
username: "",
// 设备密码
password: "",
};
this.reset()
this.isRecipeModel = true
},
// 添加周次
addWeek() {
console.log(this.form)
if( this.query.rId) {
this.form.sName = this.termArr.find(item => item.id == this.query.rId).sName;
this.form.rId = this.query.rId
}
if( this.form.rId){
this.isRecipeModel = true
}else{
this.$message({
message: "请选择学期",
type: "error",
});
}
},
// 删除
async deleteData(row) {
@@ -294,31 +522,31 @@ export default {
this.$message.error("网络错误");
}
},
// 确认新增或者修改按钮
confirmSettingRules() {
this.$refs.ruleForm.validate(async (success) => {
if (success) {
this.dialogVisible = false;
delete this.from.createTime;
delete this.from.updateTime;
let result = await rqAddOrModifyDevice(this.from);
if (result.code == 200) {
this.$message({
message: this.from.deviceId ? "修改成功" : "添加成功",
type: "success",
});
this.getAttendanceFormData();
this.from = {};
} else {
this.$message.error("添加失败");
}
} else {
return false;
}
});
},
},
};
</script>
<style lang="scss" scoped></style>
<style lang="scss" scoped>
.material-list{
width: 100%;
.top-box{
display: flex;
}
.label{
display: flex; flex: 1; align-items: center;
height: 36px;
}
.delete-box{
width: 30px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
}
.content::-webkit-scrollbar {
width: 0; /* 设置滚动条的宽度 */
}
</style>