frontent/src/views/food/nutrient.vue

<template>
  <div class="app-container">
    <div class="filter-container">
      营养素:
      <el-select
        ref="nutrientSelect"
        v-model="params.nutrientId"
        filterable
        remote
        reserve-keyword
        :default-first-option="true"
        style="width: 200px;margin-left: 10px;"
        placeholder="请输入营养素关键词"
        :remote-method="queryNutrients"
        :loading="loading"
      >
        <el-option v-for="item in nutrients" :key="item.id" :label="item.name" :value="item.id" />
      </el-select>
      营养素计量:
      <el-input
        v-model="params.quantity"
        style="width: 80px;"
        class="filter-item"
      />
      <el-autocomplete
        class="inline-input"
        v-model="params.unit"
        :fetch-suggestions="queryUnits"
        placeholder="单位关键词"
      />
      Nv_Spec计量:
      <el-input
        v-model="params.nvSpec"
        style="width: 80px;"
        class="filter-item"
      />
      <el-autocomplete
        class="inline-input"
        v-model="params.nvSpecUnit"
        :fetch-suggestions="queryUnits"
        placeholder="单位关键词"
      />
      <el-button
        class="filter-item"
        style="margin-left: 10px;"
        type="primary"
        @click="addNutrient">
        添加
      </el-button>
    </div>

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 60%;margin-top: 10px"
    >
      <el-table-column type="index" label="序号" align="center" width="60px" />
      <el-table-column label="营养素名称" align="center">
        <template slot-scope="{row}">
          <span>{{ row.nutrientName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="营养素计量" align="center" width="80">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input v-model="row.quantity" class="filter-item" />
          </template>
          <span v-else>{{ row.quantity }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计量单位" align="center" width="150">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-autocomplete v-model="row.unit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
          </template>
          <span v-else>{{ row.unit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="Nv_Spec" align="center" width="80">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-input v-model="row.nvSpec" class="filter-item" />
          </template>
          <span v-else>{{ row.nvSpec }}</span>
        </template>
      </el-table-column>
      <el-table-column label="计量单位" align="center" width="150">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-autocomplete v-model="row.nvSpecUnit" :fetch-suggestions="queryUnits" placeholder="单位关键词" />
          </template>
          <span v-else>{{ row.nvSpecUnit }}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="320" fixed="right">
        <template slot-scope="{row}">
          <template v-if="row.edit">
            <el-button
              type="success"
              size="mini"
              @click="confirmEdit(row)"
            >
              提交
            </el-button>
            <el-button
              type="danger"
              size="mini"
              @click="fetchData"
            >
              取消
            </el-button>
          </template>
          <template v-else>
            <el-button size="mini" type="primary" @click="row.edit=true">编辑</el-button>
            <el-button size="mini" type="primary" @click="updateSort(row, 0)">上移</el-button>
            <el-button size="mini" type="primary" @click="updateSort(row, 1)">下移</el-button>
            <el-button size="mini" type="danger" @click="removeNutrient(row)">
              删除
            </el-button>
          </template>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
import { getNutrientList, addFoodNutrient, updateFoodNutrient, removeFoodNutrient,
  updateFoodNutrientSort } from '@/api/food'
import { getList } from '@/api/nutrient'
import { getList as getUnits } from '@/api/unit'

export default {
  name: 'AddNutrient',
  created() {
    this.foodId = this.$route.params && this.$route.params.id
    this.fetchData()
    this.queryNutrients()
  },
  mounted() {
    this.$nextTick(() => {
      this.$refs.nutrientSelect.focus()
    })
  },
  data() {
    return {
      tableKey: 0,
      listLoading: false,
      units: [],
      foodId: '',
      list: [],
      nutrients: [],
      params: {},
      loading: false,
      unitLoading: false
    }
  },
  methods: {
    fetchData() {
      this.listLoading = true
      getNutrientList(this.foodId).then(res => {
        this.list = res.data
        this.listLoading = false
        if (this.list.length > 0) {
          this.$set(this.params, "nvSpec", this.list[0].nvSpec)
          this.$set(this.params, "nvSpecUnit", this.list[0].nvSpecUnit)
        } else {
          this.$set(this.params, 'nvSpec', null)
          this.$set(this.params, 'nvSpecUnit', null)
        }
      })
    },
    addNutrient() {
      this.params.foodId = this.foodId
      addFoodNutrient(this.foodId, this.params).then(res => {
        this.params = {}
        this.fetchData()
        this.$notify.success('添加营养素成功')
        this.$refs.nutrientSelect.focus()
      }).catch(res => {
        this.$message.error(res.data.message)
      })
    },
    confirmEdit(row) {
      updateFoodNutrient(this.foodId, row.nutrientId, row).then(res => {
        this.fetchData()
        this.$notify.success('提交成功')
      }).catch(res => {
        this.$message.error(res.data.message)
      })
    },
    removeNutrient(row) {
      removeFoodNutrient(row.foodId, row.nutrientId).then(res => {
        this.fetchData()
        this.$notify.success('删除营养素成功')
        this.$refs.nutrientSelect.focus()
      }).catch(res => {
        this.$message.error(res.data.message)
      })
    },
    queryNutrients(query) {
      getList({ query }).then(res => {
        this.nutrients = res.data.list
      }).catch(() => {
        this.nutrients = []
      })
    },
    queryUnits(query, cb) {
      let units = []
      getUnits({ query }).then(res => {
        res.data.list.forEach(item => units.push({ value: item.name }))
        cb(units)
      })
    },
    updateSort(row, type) {
      updateFoodNutrientSort(this.foodId, row.nutrientId, { type }).then(res => {
        this.$notify.success('提交成功')
        this.fetchData()
      }).catch(res => {
        this.$message.error(res.data.message)
      })
    }
  }
}
</script>

<style scoped>

</style>