frontent/src/views/foodModifier/index.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      <el-button
        class="filter-item"
        style="margin: 0 10px 20px 0; float: right;"
        type="success"
        icon="el-icon-circle-plus-outline"
        @click="handleCreate"
      >
        新建
      </el-button>
    </div>

    <el-table
      :key="0"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%;"
      @row-click="showDialog"
    >
      <el-table-column type="index" label="序号" align="center" fixed width="60px" />
      <el-table-column label="规格名称" fixed align="center">
        <template slot-scope="{row}">
          <span>{{ row.name }}</span>
        </template>
      </el-table-column>
      <el-table-column label="转换关系" align="center">
        <template slot-scope="{row}">
          <span v-if="row.quantity">{{ row.quantity + row.unit }}</span>
          <span v-else>无</span>
        </template>
      </el-table-column>
      <el-table-column label="推荐摄入量" align="center">
        <template slot-scope="{row}">
          <span>{{ row.inInit + row.inInitUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最小刻度" align="center" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.minScale }}</span>
        </template>
      </el-table-column>
      <el-table-column label="最大刻度" align="center" width="80px">
        <template slot-scope="{row}">
          <span>{{ row.maxScale }}</span>
        </template>
      </el-table-column>
      <el-table-column label="卡尺每格刻度" align="center" width="120px">
        <template slot-scope="{row}">
          <span>{{ row.stepScale }}</span>
        </template>
      </el-table-column>
      <el-table-column label="创建时间" width="180px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.createTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="更新时间" width="180px" align="center">
        <template slot-scope="{row}">
          <span>{{ row.updateTime }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding" fixed="right" width="320">
        <template slot-scope="{row}">
          <el-button type="primary" size="mini" @click="handleUpdate(row)">
            更新
          </el-button>
          <el-button type="primary" size="mini" @click="updateSort(row, 0)">
            上移
          </el-button>
          <el-button type="primary" size="mini" @click="updateSort(row, 1)">
            下移
          </el-button>
          <el-button size="mini" type="danger" @click="handleDelete(row)">
            删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <el-dialog title="营养素计算" :visible.sync="dialogFormVisible">
      <span v-html="dialogHtml" />
    </el-dialog>
  </div>
</template>

<script>
import { getFoodModifiers, removeFoodModifier, updateFoodModifierSort, convertFoodUnit, getNutrientList,
  getDetail, calculateNutrientsContent } from '@/api/food'
import { convertUnits } from '@/api/unit'

export default {
  name: 'FoodModifierIndex',
  data() {
    return {
      listLoading: false,
      list: [],
      food: {},
      foodId: '',
      dialogHtml: '',
      dialogFormVisible: false
    }
  },
  created() {
    this.foodId = this.$route.params && this.$route.params.id
    this.fetchData()
    this.fetchFood()
  },
  methods: {
    handleCreate() {
      this.$router.push({ path: `/food/${this.foodId}/modifier/create` })
    },
    handleUpdate(row) {
      this.$router.push({ path: `/food/${this.foodId}/modifier/${row.id}/edit` })
    },
    handleDelete(row) {
      removeFoodModifier(this.foodId, row.id).then(res => {
        this.$notify.success('提交成功')
        this.fetchData()
      }).catch(res => {
        this.$message.error(res.data.message)
        this.fetchData()
      })
    },
    fetchFood() {
      getDetail(this.foodId).then(res => {
        this.food = res.data
      })
    },
    fetchData() {
      this.listLoading = true
      getFoodModifiers(this.foodId).then(res => {
        this.list = res.data.list
        this.listLoading = false
      }).catch(res => {
        this.$message.error('获取数据失败')
        this.listLoading = false
      })
    },
    updateSort(row, type) {
      updateFoodModifierSort(this.foodId, row.id, { type }).then(res => {
        this.$notify.success('提交成功')
        this.fetchData()
      }).catch(res => {
        this.$message.error(res.data.message)
      })
    },
    async showDialog(row, column, event) {
      calculateNutrientsContent(row.foodId, { unit: row.inInitUnit, quantity: row.inInit }).then(res => {
        this.dialogFormVisible = true
        this.dialogHtml = res.data
      }).catch(res => {
        this.$message.error(res.data.message)
      })
    }
  }
}
</script>

<style scoped>

</style>