食堂菜单大屏

src/api/canteen/basic.js

@@ -0,0 +1,34 @@
+import request from '@/utils/request'
+
+// 餐厅菜单新增
+export function addMenu(data) {
+  return request({
+    url: `/dh/menu/add`,
+    method: 'post',
+    data: data
+  })
+}
+// 餐厅菜单列表
+export function menuList(params) {
+  return request({
+    url: `/dh/menu/list`,
+    method: 'get',
+    params: params
+  })
+}
+// 餐厅食材新增
+export function addFood(data) {
+  return request({
+    url: `/dh/record/add`,
+    method: 'post',
+    data: data
+  })
+}
+// 餐厅食材列表
+export function foodList(params) {
+  return request({
+    url: `/dh/record/listRecord`,
+    method: 'get',
+    params: params
+  })
+}

src/layout/components/Navbar.vue

@@ -25,7 +25,7 @@
 
       </template>
 
-      <!-- <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
+      <el-dropdown class="avatar-container right-menu-item hover-effect" trigger="click">
         <div class="avatar-wrapper">
           <img :src="avatar" class="user-avatar">
           <i class="el-icon-caret-bottom" />
@@ -41,7 +41,7 @@
             <span>退出登录</span>
           </el-dropdown-item>
         </el-dropdown-menu>
-      </el-dropdown> -->
+      </el-dropdown>
     </div>
   </div>
 </template>

src/permission.js

@@ -8,7 +8,7 @@ import { isRelogin } from '@/utils/request'
 
 NProgress.configure({ showSpinner: false })
 
-const whiteList = ['/login', '/register', '/test01']
+const whiteList = ['/login', '/register', '/test01', '/canteenAddFood', '/canteenAddMenu', '/menuScreen', '/foodScreen']
 
 router.beforeEach((to, from, next) => {
   NProgress.start()

src/router/index.js

@@ -57,6 +57,26 @@ export const constantRoutes = [
     hidden: true
   },
   {
+    path: '/canteenAddFood',
+    component: () => import('@/views/canteen/addFood'),
+    hidden: true
+  },
+  {
+    path: '/canteenAddMenu',
+    component: () => import('@/views/canteen/addMenu'),
+    hidden: true
+  },
+  {
+    path: '/menuScreen',
+    component: () => import('@/views/canteen/menuScreen'),
+    hidden: true
+  },
+  {
+    path: '/foodScreen',
+    component: () => import('@/views/canteen/foodScreen'),
+    hidden: true
+  },
+  {
     path: '/404',
     component: () => import('@/views/error/404'),
     hidden: true

src/views/canteen/addFood.vue

@@ -0,0 +1,150 @@
+<template>
+  <div id="canteenMenu">
+    <span>购买过程新增</span>
+    <el-form :model="menu" :rules="menuRules" ref="menuForm" label-width="100px" class="demo-ruleForm">
+      <el-form-item label="地址" prop="address">
+        <el-input style="width: 200px;" v-model="menu.address" placeholder="请输入地址"></el-input>
+      </el-form-item>
+      <el-form-item label="日期" prop="billDate">
+        <el-date-picker
+         style="width: 200px;"
+          v-model="menu.billDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-table
+        :data="menu.items"
+        style="width: 40%"
+        >
+          <el-table-column
+            prop="product"
+            label="食材"
+            align="left"
+            width="200"
+            >
+            <template slot-scope="scope">
+              <el-input v-model="scope.row.product"></el-input>
+            </template>
+          </el-table-column>
+
+          <el-table-column
+            label="操作"
+            align="left"
+            >
+            <template slot-scope="scope">
+              <el-button
+                @click.native.prevent="deleteRow(scope.row)"
+                type="text"
+                size="small">
+                删除
+              </el-button>
+            </template>
+          </el-table-column>
+
+          <el-table-column align="center">
+          <template slot="header" slot-scope="scope">
+            <el-button
+              @click.native.prevent="addRow"
+              type="text"
+              size="small">
+              增行
+            </el-button>
+          </template>
+          </el-table-column>
+        </el-table>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="small" type="primary" @click="submit">提交</el-button>
+        <el-button size="small" @click="reset('menuForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <span>食材列表</span>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        prop="billDate"
+        label="日期"
+        align="center"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label="地址"
+        align="center"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="product"
+        align="center"
+        label="食材">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {addFood, foodList} from '@/api/canteen/basic.js'
+export default {
+  data() {
+    return {
+      menu: {
+        address: '',
+        billDate: '',
+        items: [{product: '猪肉'}]
+      },
+      menuRules: {
+        address: [{ required: true, message: '请输入购买地址', trigger: 'blur' }],
+        billDate: [{ required: true, message: '请选择时段', trigger: 'change' }],
+      },
+      tableData: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    submit() {
+      this.$refs['menuForm'].validate((valid) => {
+        if (valid) {
+          addFood(this.menu).then(res => {
+            if (res.code === 200 ) {
+              this.$modal.msgSuccess("操作成功");
+              this.getList()
+              this.reset('menuForm')
+            }
+          })
+       }
+      })
+    },
+    reset(formName) {
+      this.$refs[formName].resetFields();
+    },
+    addRow() {
+      this.menu.items.push({product: ''})
+    },
+    deleteRow(rows) {
+      this.menu.items = this.menu.items.filter(item => {
+        return item.product !== rows.product
+      })
+    },
+    getList() {
+      foodList().then(res => {
+        if (res.code === 200 ) {
+          this.tableData = res.rows
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ #canteenMenu {
+  padding: 10px;
+ }
+</style>

src/views/canteen/addMenu.vue

@@ -0,0 +1,126 @@
+<template>
+  <div id="canteenMenu">
+    <span>菜单新增</span>
+    <el-form :model="menu" :rules="menuRules" ref="menuForm" label-width="100px" class="demo-ruleForm">
+      <el-form-item label="时段" prop="timeFrame">
+        <el-select style="width: 200px;" v-model="menu.timeFrame" placeholder="请选择">
+          <el-option
+            v-for="item in options"
+            :key="item.value"
+            :label="item.label"
+            :value="item.value">
+          </el-option>
+        </el-select>
+      </el-form-item>
+      <el-form-item label="菜名" prop="name">
+        <el-input style="width: 200px;" v-model="menu.name" placeholder="请输入菜名"></el-input>
+      </el-form-item>
+      <el-form-item label="价格" prop="price">
+        <el-input-number :min="0" style="width: 200px;" v-model="menu.price" placeholder="请输入价格"></el-input-number>
+      </el-form-item>
+      <el-form-item label="日期" prop="billDate">
+        <el-date-picker
+         style="width: 200px;"
+          v-model="menu.billDate"
+          type="date"
+          value-format="yyyy-MM-dd"
+          placeholder="选择日期">
+        </el-date-picker>
+      </el-form-item>
+      <el-form-item>
+        <el-button size="small" type="primary" @click="submit">提交</el-button>
+        <el-button size="small" @click="reset('menuForm')">重置</el-button>
+      </el-form-item>
+    </el-form>
+
+    <span>菜单列表</span>
+    <el-table
+      :data="tableData"
+      style="width: 100%">
+      <el-table-column
+        prop="billDate"
+        label="日期"
+        align="center"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="name"
+        label="菜名"
+        align="center"
+        width="180">
+      </el-table-column>
+      <el-table-column
+        prop="price"
+        align="center"
+        label="价格">
+      </el-table-column>
+      <el-table-column
+        prop="timeFrame"
+        align="center"
+        label="时段">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+
+<script>
+import {addMenu, menuList} from '@/api/canteen/basic.js'
+export default {
+  data() {
+    return {
+      menu: {
+        timeFrame: '',
+        name: '',
+        price: '',
+        billDate: ''
+      },
+      options: [
+        {value: '1', label: '早餐'},
+        {value: '2', label: '午餐'},
+        {value: '3', label: '晚餐'}
+      ],
+      menuRules: {
+        timeFrame: [{ required: true, message: '请选择时段', trigger: 'change' }],
+        name: [{ required: true, message: '请输入菜名', trigger: 'blur' }],
+        price: [{ required: true, message: '请输入价格', trigger: 'blur' }],
+        billDate: [{ required: true, message: '请选择时段', trigger: 'change' }],
+      },
+      tableData: []
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    submit() {
+      this.$refs['menuForm'].validate((valid) => {
+        if (valid) {
+          addMenu(this.menu).then(res => {
+            if (res.code === 200 ) {
+              this.$modal.msgSuccess("操作成功");
+              this.getList()
+              this.reset('menuForm')
+            }
+          })
+       }
+      })
+    },
+    reset(formName) {
+      this.$refs[formName].resetFields();
+    },
+    getList() {
+      menuList().then(res => {
+        if (res.code === 200 ) {
+          this.tableData = res.rows
+        }
+      })
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+ #canteenMenu {
+  padding: 10px;
+ }
+</style>

src/views/canteen/foodScreen.vue

@@ -0,0 +1,140 @@
+<template>
+  <div id="menuScreen">
+    <div class="title">今日食材</div>
+    <div class="title2" style="width: 80%;color: #FFF;margin:1% auto;display: flex;justify-content: space-around;">
+        <span>食材</span>
+        <span>地址</span>
+        <span>日期</span>
+    </div>
+
+    <div class="tables">
+    <div class="gun">
+      <el-table
+      :cell-style="{ color: '#fff' }"
+      :header-cell-style="{ color: '#fff' }"
+      :data="tableData"
+      style="width: 100%;height:100%;font-size: 2.5vh;">
+      <el-table-column
+        prop="product"
+        align="center"
+        label="">
+      </el-table-column>
+      <el-table-column
+        prop="address"
+        label=""
+        align="center">
+      </el-table-column>
+      <el-table-column
+        prop="billDate"
+        label=""
+        align="center">
+      </el-table-column>
+      </el-table>
+    </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {foodList} from '@/api/canteen/basic.js'
+export default {
+  data() {
+    return{
+      tableData: [],
+      nowDate: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  methods: {
+    getList() {
+      this.getNow()
+      // {billDate: this.nowDate}
+      foodList().then(res => {
+        if (res.code === 200 ) {
+          this.tableData = res.rows
+        }
+      })
+    },
+    getNow() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      if (month < 10) {
+          month = "0" + month;
+      }
+      if (day < 10) {
+          day = "0" + day;
+      }
+      const nowDate = year + "-" + month + "-" + day;
+      this.nowDate = nowDate
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+#menuScreen {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/images/menu_bg.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.title {
+  text-align: center;
+  font-size: 8vh;
+  color: #fff;
+  text-shadow: 0 0 5px #fff,
+  0 0 10px #fff,
+  0 0 15px #fff,
+  0 0 20px #00a67c,
+  0 0 35px #00a67c,
+  0 0 40px #00a67c,
+  0 0 50px #00a67c,
+  0 0 75px #00a67c;
+}
+.title2 {
+  text-align: center;
+  font-size: 3vh;
+  color: #fff;
+  text-shadow: 0 0 5px #fff,
+  0 0 10px #fff,
+  0 0 15px #fff,
+  0 0 20px #00a67c,
+  0 0 35px #00a67c,
+  0 0 40px #00a67c,
+  0 0 50px #00a67c,
+  0 0 75px #00a67c;
+}
+.gun {
+  animation: tables 12s linear infinite;
+}
+.tables {
+  width: 80%;
+  height: 680px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+@keyframes tables {
+        0%{
+            transform:translateY(0px)
+        }
+        100%{
+            transform: translateY(calc(-100% + 680px));
+        }
+    }
+/*最外层透明*/
+::v-deep .el-table,
+::v-deep .el-table__expanded-cell {
+  background-color: transparent !important;
+}
+/* 表格内背景颜色 */
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+  background-color: transparent !important;
+}
+</style>

src/views/canteen/menuScreen.vue

@@ -0,0 +1,159 @@
+<template>
+  <div id="menuScreen">
+    <div class="title">德荣食堂</div>
+    <div class="title2" style="width: 80%;color: #FFF;margin:1% auto;display: flex;justify-content: space-around;">
+        <span>时段</span>
+        <span>菜名</span>
+        <span>价格</span>
+        <span>日期</span>
+    </div>
+    <div class="tables">
+      <div class="gun">
+        <el-table
+        :cell-style="{ color: '#fff' }"
+        :header-cell-style="{ color: '#fff' }"
+        :data="tableData"
+        style="width: 100%;height:100%;font-size: 2.5vh;"
+        ref="tableBox">
+          <el-table-column
+            prop="timeFrame"
+            align="center"
+            label="">
+            <template slot-scope="scope">
+              <span>{{ scope.row.timeFrame == '1' ? '早餐' :  scope.row.timeFrame == '2' ? '午餐' : '晚餐'}}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="name"
+            label=""
+            align="center"
+            >
+          </el-table-column>
+          <el-table-column
+            prop="price"
+            align="center"
+            label="">
+            <template slot-scope="scope">
+              <span>￥{{ scope.row.price }}</span>
+            </template>
+          </el-table-column>
+          <el-table-column
+            prop="billDate"
+            label=""
+            align="center"
+            >
+          </el-table-column>
+        </el-table>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import {menuList} from '@/api/canteen/basic.js'
+export default {
+  data() {
+    return{
+      tableData: [],
+      nowDate: ''
+    }
+  },
+  created() {
+    this.getList()
+  },
+  mounted () {
+
+  },
+  methods: {
+    getList() {
+      this.getNow()
+      // {billDate: this.nowDate}
+      menuList({pageSize: 50}).then(res => {
+        if (res.code === 200 ) {
+          this.tableData = res.rows
+        }
+      })
+    },
+    getNow() {
+      var date = new Date();
+      var year = date.getFullYear();
+      var month = date.getMonth() + 1;
+      var day = date.getDate();
+      if (month < 10) {
+          month = "0" + month;
+      }
+      if (day < 10) {
+          day = "0" + day;
+      }
+      const nowDate = year + "-" + month + "-" + day;
+      this.nowDate = nowDate
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+#menuScreen {
+  width: 100%;
+  height: 100%;
+  background-image: url('../../assets/images/menu_bg.jpg');
+  background-repeat: no-repeat;
+  background-size: cover;
+}
+.title {
+  text-align: center;
+  font-size: 8vh;
+  color: #fff;
+  text-shadow: 0 0 5px #fff,
+  0 0 10px #fff,
+  0 0 15px #fff,
+  0 0 20px #00a67c,
+  0 0 35px #00a67c,
+  0 0 40px #00a67c,
+  0 0 50px #00a67c,
+  0 0 75px #00a67c;
+}
+.title2 {
+  text-align: center;
+  font-size: 3vh;
+  color: #fff;
+  text-shadow: 0 0 5px #fff,
+  0 0 10px #fff,
+  0 0 15px #fff,
+  0 0 20px #00a67c,
+  0 0 35px #00a67c,
+  0 0 40px #00a67c,
+  0 0 50px #00a67c,
+  0 0 75px #00a67c;
+}
+.gun {
+  animation: tables 12s linear infinite;
+}
+.tables {
+  width: 80%;
+  height: 680px;
+  margin: 0 auto;
+  overflow: hidden;
+}
+@keyframes tables {
+        0%{
+            transform:translateY(0px)
+        }
+        100%{
+            transform: translateY(calc(-100% + 680px));
+        }
+    }
+/*最外层透明*/
+::v-deep .el-table,
+::v-deep .el-table__expanded-cell {
+  background-color: transparent !important;
+}
+/* 表格内背景颜色 */
+::v-deep .el-table th,
+::v-deep .el-table tr,
+::v-deep .el-table td {
+  background-color: transparent !important;
+}
+
+
+</style>