drp-ui/src/views/canteen/addFood.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="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>
    <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="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, delFood} 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: [],
      nowDate: '',
      ids: ''
    }
  },
  created() {
    this.getNow()
    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();
    },
    delitems() {
      if (this.ids) {
        delFood(this.ids).then(res => {
          if (res.code === 200) {
            this.$modal.msgSuccess("操作成功");
            this.getList()
          }
        })
      } else {
        this.$modal.alertWarning("请选择至少一条数据");
      }
    },
    addRow() {
      this.menu.items.push({product: ''})
    },
    deleteRow(rows) {
      this.menu.items = this.menu.items.filter(item => {
        return item.product !== rows.product
      })
    },
    getList() {
      this.getNow()
      foodList({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.productId)
      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>