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: left;"
        type="success"
        icon="el-icon-circle-plus-outline"
        @click="handleCreate"
      >
        新建
      </el-button>
    </div>

    <floating-window :able-hide="false" :class="{'is_fixed': isFixed}" >
      <el-dropdown @command="handleCommand">
        <img width="50px" height="50px" src="@/assets/navigation.png" alt="导航.png" />
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item command="detail">食物更新</el-dropdown-item>
          <el-dropdown-item command="nutrient">营养素关联</el-dropdown-item>
          <el-dropdown-item command="unit">单位管理</el-dropdown-item>
          <el-dropdown-item command="list">食物列表</el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </floating-window>

    <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" width="180">
        <template slot-scope="{row}">
          <el-image
            v-if="row.images && row.images.length > 0"
            style="width: 150px; height: 100px"
            :src="row.images[0]"
            fit="contain"
          />
        </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 FloatingWindow from '@/components/FloatingWindow'

export default {
  name: 'FoodModifierIndex',
  components: { FloatingWindow },
  data() {
    return {
      listLoading: false,
      list: [],
      food: {},
      foodId: '',
      dialogHtml: '',
      dialogFormVisible: false,
      isFixed: false,
      offsetTop: 0
    }
  },
  mounted() {
    window.addEventListener('scroll', this.initHeight);
  },
  //回调中移除监听
  destroyed() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  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)
      })
    },
    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)
      })
    },
    initHeight() {
      // 设置或获取位于对象最顶端和窗口中可见内容的最顶端之间的距离 (被卷曲的高度)
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
      //如果被卷曲的高度大于吸顶元素到顶端位置 的距离
      this.isFixed = scrollTop > this.offsetTop;
    },
    handleCommand(value) {
      let path = ''
      if (value === 'detail') {
        path = `/food/edit/${this.foodId}`
      } else if (value === 'unit') {
        path = `/food/${this.foodId}/unit`
      } else if (value === 'nutrient') {
        path = `/food/${this.foodId}/nutrient`
      } else if (value === 'modifier') {
        path = `/food/${this.foodId}/modifier`
      } else if (value === 'list') {
        path = `/food`
      }
      if (path) {
        this.$router.push({ path: path })
      }
    }
  }
}
</script>

<style scoped>

</style>