drp-ui/src/views/canteen/addMenu.vue

<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>
    <div style="text-align: right;">
      <el-button size="small" type="primary" @click="delitems">批量删除</el-button>
    </div>
    <el-table
      :data="tableData"
      @selection-change="handleSelectionChange"
      max-height="500"
      style="width: 100%">
      <el-table-column
      type="selection"
      width="55">
    </el-table-column>
      <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="价格">
        <template slot-scope="scope">
            <span>￥{{ scope.row.price }}</span>
          </template>
      </el-table-column>
      <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>
  </div>
</template>

<script>
import {addMenu, menuList, delMenu} 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: [],
      nowDate: '',
      ids: ''
    }
  },
  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();
    },
    delitems() {
      if (this.ids) {
        delMenu(this.ids).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("操作成功");
            this.getList()
          }
        })
      } else {
        this.$modal.alertWarning("请选择至少一条数据");
      }
    },
    getList() {
      this.getNow()
      menuList({pageSize: 100, billDate: this.nowDate}).then(res => {
        if (res.code === 200 ) {
          this.tableData = res.rows
        }
      })
    },
    handleSelectionChange(selection) {
      console.log('选中数据', selection)
      let id = []
      id = selection.map(item => item.id)
      console.log('id',id.join())
      this.ids = id.join()
    },
    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
      this.menu.billDate = nowDate
    }
  }
}
</script>

<style lang="scss" scoped>
 #canteenMenu {
  padding: 10px;
 }
</style>