cfc/cfc-web/src/views/admin/SeasonalFoods.vue

<template>
  <div class="seasonal-foods admin-page">
    <el-card>
      <div slot="header" class="admin-page-header">
        <span class="admin-page-title">应季食材配置</span>
        <div class="flex items-center gap-sm">
          <el-select
            v-model="monthFilter"
            placeholder="选择月份"
            size="mini"
            @change="loadList"
          >
            <el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
          </el-select>
          <el-input v-model="keyword" placeholder="搜索..." prefix-icon="el-icon-search" clearable @keyup.enter.native="handleSearch" @clear="handleSearch" />
          <el-button type="primary" size="mini" @click="openCreate">新增应季映射</el-button>
        </div>
      </div>
      <div class="table-scroll-wrap">
      <el-table :data="list" v-loading="loading" border stripe>
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="foodId" label="食材ID" width="80" />
        <el-table-column label="月份" width="80">
          <template slot-scope="{ row }">{{ row.month }}月</template>
        </el-table-column>
        <el-table-column label="推荐等级" width="100">
          <template slot-scope="{ row }">
            <el-tag :type="row.peak >= 3 ? 'danger' : row.peak >= 2 ? 'warning' : 'info'" size="mini">
              {{ row.peak }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="200" fixed="right">
          <template slot-scope="{ row }">
            <el-dropdown trigger="hover" @command="(cmd) => handleActionCmd(row, cmd)">
              <el-button size="mini">
                更多<i class="el-icon-arrow-down el-icon--right"></i>
              </el-button>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="delete" icon="el-icon-delete">删除</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </template>
        </el-table-column>
      </el-table></div>
    </el-card>

    <el-dialog title="新增应季映射" :visible.sync="dialogVisible" width="400px">
      <el-form label-width="100px">
        <el-form-item label="食材ID">
          <el-input-number v-model="form.foodId" :min="1" style="width:100%" />
        </el-form-item>
        <el-form-item label="月份">
          <el-select v-model="form.month" style="width:100%">
            <el-option v-for="m in 12" :key="m" :label="m + '月'" :value="m" />
          </el-select>
        </el-form-item>
        <el-form-item label="推荐等级">
          <el-select v-model="form.peak" style="width:100%">
            <el-option label="1-普通" :value="1" />
            <el-option label="2-推荐" :value="2" />
            <el-option label="3-强烈推荐" :value="3" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false">取消</el-button>
        <el-button type="primary" @click="saveItem">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'SeasonalFoods',
  data() {
    const now = new Date()
    return {
      loading: false,
      list: [],
      dialogVisible: false,
      keyword: '',
      monthFilter: now.getMonth() + 1,
      form: {
        foodId: null,
        month: now.getMonth() + 1,
        peak: 1
      }
    }
  },
  created() {
    this.loadList()
  },
  methods: {
    async loadList() {
      this.loading = true
      try {
        const baseURL = process.env.VUE_APP_BASE_API || ''
        const token = localStorage.getItem('token')
        const axios = this.$axios || (await import('axios')).default
        const res = await axios.post(baseURL + '/api/admin/seasonal/list', { month: this.monthFilter, keyword: this.keyword }, {
          headers: { Authorization: 'Bearer ' + token }
        })
        this.list = res.data && res.data.data || []
      } catch (e) {
        this.$message && this.$message.error && this.$message.error('加载失败')
      } finally {
        this.loading = false
      }
    },
    handleSearch() {
      this.loadList()
    },
    openCreate() {
      this.form = { foodId: null, month: new Date().getMonth() + 1, peak: 1 }
      this.dialogVisible = true
    },
    async saveItem() {
      if (!this.form.foodId) {
        this.$message && this.$message.warning && this.$message.warning('请输入食材ID')
        return
      }
      try {
        const baseURL = process.env.VUE_APP_BASE_API || ''
        const token = localStorage.getItem('token')
        const axios = this.$axios || (await import('axios')).default
        await axios.post(baseURL + '/api/admin/seasonal/create', this.form, {
          headers: { Authorization: 'Bearer ' + token }
        })
        this.$message && this.$message.success && this.$message.success('创建成功')
        this.dialogVisible = false
        this.loadList()
      } catch (e) {
        this.$message && this.$message.error && this.$message.error('保存失败')
      }
    },
    async deleteItem(row) {
      this.$confirm('确定删除该应季映射吗？', '提示', { type: 'warning' }).then(async () => {
        try {
          const baseURL = process.env.VUE_APP_BASE_API || ''
          const token = localStorage.getItem('token')
          const axios = this.$axios || (await import('axios')).default
          await axios.post(baseURL + '/api/admin/seasonal/delete', { id: row.id }, {
            headers: { Authorization: 'Bearer ' + token }
          })
          this.$message && this.$message.success && this.$message.success('删除成功')
          this.loadList()
        } catch (e) {
          this.$message && this.$message.error && this.$message.error('删除失败')
        }
      }).catch(() => {})
    },
    handleActionCmd(row, cmd) {
      switch (cmd) {
        case 'delete':
          this.deleteItem(row)
          break
      }
    }
  }
}
</script>