完成营养素模板

.env.production

@@ -3,4 +3,4 @@ ENV = 'production'
 PORT = '9531'
 
 # base api
-VUE_APP_BASE_API = '//47.93.201.9:8084'
+VUE_APP_BASE_API = '//59.110.65.177:8008'

src/api/nutrientTemplate.js

@@ -0,0 +1,78 @@
+import request from '@/utils/request'
+
+// 获取模板列表
+export function getNutrientTemplates(params) {
+  return request({
+    url: '/api/nutrient-templates',
+    method: 'get',
+    params
+  })
+}
+
+// 获取模板详情
+export function getNutrientTemplate(id) {
+  return request({
+    url: `/api/nutrient-templates/${id}`,
+    method: 'get'
+  })
+}
+
+// 创建模板
+export function createTemplate(data) {
+  return request({
+    url: '/api/nutrient-templates',
+    method: 'post',
+    data
+  })
+}
+
+// 更新模板
+export function updateTemplate(id, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}`,
+    method: 'post',
+    data
+  })
+}
+
+// 获取模板关联的营养素
+export function getNutrients(id) {
+  return request({
+    url: `/api/nutrient-templates/${id}/nutrients`,
+    method: 'get'
+  })
+}
+
+// 增加模板关联的营养素
+export function addTemplateNutrient(id, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}/nutrients`,
+    method: 'post',
+    data
+  })
+}
+
+// 上移下移
+export function updateSort(id, data) {
+  return request({
+    url: `/api/nutrient-templates/${id}/sort`,
+    method: 'post',
+    data
+  })
+}
+
+// 删除关联营养素
+export function removeNutrient(templateId, nutrientId) {
+  return request({
+    url: `/api/nutrient-templates/${templateId}/nutrients/${nutrientId}`,
+    method: 'delete'
+  })
+}
+
+// 删除
+export function removeTemplate(templateId) {
+  return request({
+    url: `/api/nutrient-templates/${templateId}`,
+    method: 'delete'
+  })
+}

src/router/config.js

@@ -89,6 +89,26 @@ export const asyncRouterMap = [
     ]
   },
 
+  {
+    path: '/nutrient-template',
+    component: Layout,
+    children: [
+      {
+        path: '',
+        name: '营养素模板列表',
+        component: () => import('@/views/nutrientTemplate/index'),
+        meta: { title: '营养素模板列表', icon: 'dashboard' }
+      },
+      {
+        path: ':id/detail',
+        name: '模板营养素管理',
+        component: () => import('@/views/nutrientTemplate/detail'),
+        meta: { title: '模板营养素管理' },
+        hidden: true
+      }
+    ]
+  },
+
   // 404 page must be placed at the end !!!
   { path: '*', redirect: '/404', hidden: true }
 ]

src/store/modules/user.js

@@ -69,13 +69,13 @@ const actions = {
           return reject('Token 无效，请重新登录。')
         }
 
-        const { userId, name, nickName, profilePic, isAdmin, isFrozen } = data
+        const { id, name, nickName, profilePic, isAdmin, isFrozen } = data
 
         if (isFrozen) {
           return reject('用户账号冻结，请与管理员联系')
         }
 
-        commit('SET_USER_ID', userId)
+        commit('SET_USER_ID', id)
         commit('SET_NAME', nickName ? nickName : name)
         commit('SET_AVATAR', profilePic)
         commit('SET_IS_ADMIN', isAdmin)

src/views/nutrient/index.vue

@@ -63,17 +63,17 @@
       </el-table-column>
       <el-table-column label="每日推荐量值" align="center" width="70">
         <template slot-scope="{row}">
-          <span>{{ row.recommend }}</span>
+          <span>{{ row.recommend ? `${row.recommend} ${row.recommendUnitName}` : '' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="每日推荐量范围起始值" align="center" width="80">
         <template slot-scope="{row}">
-          <span>{{ row.recommendBegin }}</span>
+          <span>{{ row.recommendBegin ? `${row.recommendBegin} ${row.recommendUnitName}` : '' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="每日推荐量范围截止值" align="center" width="80">
         <template slot-scope="{row}">
-          <span>{{ row.recommendEnd }}</span>
+          <span>{{ row.recommendEnd ? `${row.recommendEnd} ${row.recommendUnitName}` : '' }}</span>
         </template>
       </el-table-column>
       <el-table-column label="创建时间" width="180px" align="center">
@@ -271,8 +271,8 @@ export default {
           this.$notify({ title: '成功', message: '提交成功', type: 'success', duration: 2000 })
           this.fetchData()
           this.dialogFormVisible = false
-        }).catch(error => {
-          this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+        }).catch(res => {
+          this.$notify({ title: '失败', message: res.data.message, type: 'error', duration: 2000 })
           this.fetchData()
         })
       }

src/views/nutrientTemplate/detail.vue

@@ -0,0 +1,176 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      营养素：
+      <el-select
+        v-model="params.nutrientId"
+        filterable
+        remote
+        reserve-keyword
+        style="width: 200px;margin-left: 10px;"
+        placeholder="请输入营养素关键词"
+        :remote-method="queryNutrients"
+        :loading="loading"
+        ref="nutrientSelect"
+      >
+        <el-option
+          v-for="item in nutrients"
+          :key="item.id"
+          :label="item.name"
+          :value="item.id">
+        </el-option>
+      </el-select>
+      营养素计量：
+      <el-input
+        v-model="params.quantity"
+        style="width: 80px;"
+        class="filter-item"
+      />
+      <el-select
+        v-model="params.unit"
+        style="width: 300px;margin-left: 10px;"
+        class="filter-item"
+        filterable
+        remote
+        reserve-keyword
+        placeholder="请输入单位关键词"
+        :loading="unitLoading"
+        :remote-method="queryUnits"
+      >
+        <el-option v-for="item in units" :key="`nutrient${item.id}`" :label="item.name" :value="item.id" />
+      </el-select>
+      <el-button
+        class="filter-item"
+        style="margin-left: 10px;"
+        type="primary"
+        @click="addNutrient">
+        添加
+      </el-button>
+
+      <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="80px">
+          <template slot-scope="{row}">
+            <span>{{ row.quantity }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="单位" align="center" width="300px">
+          <template slot-scope="{row}">
+            <span>{{ row.unitName }}</span>
+          </template>
+        </el-table-column>
+        <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100px">
+          <template slot-scope="{row,$index}">
+            <el-button size="mini" type="danger" @click="removeNutrient(row)">
+              删除
+            </el-button>
+          </template>
+        </el-table-column>
+      </el-table>
+    </div>
+  </div>
+</template>
+
+<script>
+  import { getList } from '@/api/nutrient'
+  import { getList as getUnits } from '@/api/unit'
+  import { getNutrients, addTemplateNutrient, removeNutrient } from '@/api/nutrientTemplate'
+
+  export default {
+    name: 'Detail',
+    components: {},
+    created() {
+      this.templateId = this.$route.params.id
+      if (!this.templateId) {
+        this.$message.error("未获取到模板")
+        this.$router.push({ path: '/nutrient-template' })
+      }
+      this.fetchNutrients()
+      this.$nextTick(() => {
+        this.$refs['nutrientSelect'].focus()
+      })
+    },
+    data() {
+      return {
+        templateId: '',
+        tableKey: 0,
+        listLoading: false,
+        list: [],
+        units: [],
+        nutrients: [],
+        params: {},
+        loading: false,
+        unitLoading: false
+      }
+    },
+    methods: {
+      addNutrient() {
+        if (this.params.nutrientId) {
+          addTemplateNutrient(this.templateId, this.params).then(res => {
+            this.fetchNutrients()
+            this.$message.success("添加成功")
+            this.params = {}
+            this.$nextTick(() => {
+              this.$refs['nutrientSelect'].focus()
+            })
+          }).catch(res => {
+            this.$message.error(res.data.message)
+          })
+        } else {
+          this.$message.error("未选择营养素")
+        }
+      },
+      queryNutrients(query) {
+        getList({ query }).then(res => {
+          this.nutrients = res.data.list
+        }).catch(() => {
+          this.nutrients = []
+        })
+      },
+      queryUnits(query) {
+        getUnits({ query }).then(res => {
+          this.units = res.data.list
+        }).catch(() => {
+          this.units = []
+        })
+      },
+      fetchNutrients() {
+        this.listLoading = true
+        getNutrients(this.templateId).then(res => {
+          this.list = res.data
+          this.listLoading = false
+        }).catch(() => {
+          this.$message.error("获取数据失败")
+          this.listLoading = false
+          this.$router.push({ path: '/nutrient-template' })
+        })
+      },
+      removeNutrient(row) {
+        removeNutrient(this.templateId, row.nutrientId).then(res => {
+          this.fetchNutrients()
+          this.$message.success("提交成功")
+        }).catch(res => {
+          this.fetchNutrients()
+          this.$message.error(res.data.message)
+        })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>

src/views/nutrientTemplate/index.vue

@@ -0,0 +1,210 @@
+<template>
+  <div class="app-container">
+    <div class="filter-container">
+      <el-input
+        v-model="listQuery.query"
+        placeholder="请输入检索词"
+        style="width: 60%;"
+        class="filter-item"
+        @keyup.enter.native="fetchData()"
+      />
+      <el-button class="filter-item" style="margin-left: 10px;" type="primary" icon="el-icon-search" @click="fetchData">
+        检索
+      </el-button>
+      <el-button
+        class="filter-item"
+        style="margin: 0 10px 20px 0; float: right;"
+        type="success"
+        icon="el-icon-circle-plus-outline"
+        @click="handleCreateOrUpdate('create')">
+        新建
+      </el-button>
+    </div>
+
+    <el-table
+      :key="tableKey"
+      v-loading="listLoading"
+      :data="list"
+      border
+      fit
+      highlight-current-row
+      ref="table"
+    >
+      <el-table-column type="index" label="序号" align="center" width="60" />
+      <el-table-column label="名称" align="center" width="150">
+        <template slot-scope="{row}">
+          <span>{{ row.name }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="描述" align="center" width="300">
+        <template slot-scope="{row}">
+          <span>{{ row.description }}</span>
+        </template>
+      </el-table-column>
+      <el-table-column label="创建人" align="center" width="150">
+        <template slot-scope="{row}">
+          <span>{{ row.userName }}</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">
+        <template slot-scope="{row,$index}">
+          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('update', row)" :disabled="!canUpdate(row.userId)">
+            更新
+          </el-button>
+          <el-button type="primary" size="mini" @click="manageNutrients(row)" :disabled="!canUpdate(row.userId)">
+            管理营养素
+          </el-button>
+          <el-button type="primary" size="mini" @click="updateSort(row, 0)" :disabled="!canUpdate(row.userId)">
+            上移
+          </el-button>
+          <el-button type="primary" size="mini" @click="updateSort(row, 1)" :disabled="!canUpdate(row.userId)">
+            下移
+          </el-button>
+          <el-button type="primary" size="mini" @click="updateSort(row, 2)" :disabled="!canUpdate(row.userId)">
+            置顶
+          </el-button>
+          <el-button size="mini" type="danger" @click="handleDelete(row, $index)" :disabled="!canUpdate(row.userId)">
+            删除
+          </el-button>
+        </template>
+      </el-table-column>
+    </el-table>
+
+    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
+
+    <el-dialog :title="textMap[dialogStatus]" :visible.sync="dialogFormVisible">
+      <el-form ref="dataForm" :rules="rules" :model="params" label-position="left" label-width="200px" style="width: 400px; margin-left:50px;">
+        <el-form-item label="名称" prop="name">
+          <el-input v-model="params.name" placeholder="请输入名称" />
+        </el-form-item>
+        <el-form-item label="描述" prop="description">
+          <el-input v-model="params.description" placeholder="请输入描述" type="textarea" :rows="2" />
+        </el-form-item>
+      </el-form>
+      <div slot="footer" class="dialog-footer">
+        <el-button @click="dialogFormVisible = false">
+          取消
+        </el-button>
+        <el-button type="primary" @click="dialogStatus==='create'?createData():updateData()">
+          提交
+        </el-button>
+      </div>
+    </el-dialog>
+  </div>
+</template>
+
+<script>
+  import store from '@/store'
+  import Pagination from '@/components/Pagination'
+  import { getNutrientTemplates, createTemplate, updateSort, updateTemplate, removeTemplate } from '@/api/nutrientTemplate'
+  import {create} from "@/api/nutrient";
+
+  export default {
+    name: 'NutrientTemplateList',
+    components: { Pagination },
+    created() {
+      this.fetchData()
+    },
+    data() {
+      return {
+        tableKey: 0,
+        listQuery: {
+          query: '',
+          pageNum: 1,
+          pageSize: 20
+        },
+        listLoading: false,
+        list: [],
+        total: 0,
+        textMap: {
+          update: '更新',
+          create: '新建'
+        },
+        dialogStatus: '',
+        dialogFormVisible: false,
+        rules: {},
+        params: {}
+      }
+    },
+    methods: {
+      fetchData() {
+        this.listLoading = true
+        getNutrientTemplates(this.listQuery).then(res => {
+          this.list = res.data.list
+          this.total = res.data.count
+          this.listLoading = false
+        }).catch(res => {
+          this.$message.error("获取数据失败")
+          this.listLoading = false
+        })
+      },
+      handleCreateOrUpdate(type, row) {
+        this.dialogStatus = type
+        this.params = type === 'create' ? {} : row
+        this.dialogFormVisible = true
+      },
+      updateSort(row, type) {
+        updateSort(row.id, { type }).then(res => {
+          this.fetchData()
+          this.$message.success("提交成功")
+        }).catch(res => {
+          this.fetchData()
+          this.$message.error(res.data.message)
+        })
+      },
+      handleDelete(row, index) {
+        removeTemplate(row.id).then(res => {
+          this.fetchData()
+          this.$message.success("提交成功")
+        }).catch(res => {
+          this.fetchData()
+          this.$message.error(res.data.message)
+        })
+      },
+      createData() {
+        if (this.params) {
+          createTemplate(this.params).then(res => {
+            this.$notify({ title: '成功', message: '提交成功', type: 'success', duration: 2000 })
+            this.fetchData()
+            this.dialogFormVisible = false
+          }).catch(error => {
+            this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+            this.fetchData()
+          })
+        }
+      },
+      updateData() {
+        if (this.params) {
+          updateTemplate(this.params.id, this.params).then(res => {
+            this.$notify({ title: '成功', message: '提交成功', type: 'success', duration: 2000 })
+            this.fetchData()
+            this.dialogFormVisible = false
+          }).catch(error => {
+            this.$notify({ title: '失败', message: error.response.data.message, type: 'error', duration: 2000 })
+            this.fetchData()
+          })
+        }
+      },
+      canUpdate(userId) {
+        return store.getters.isAdmin || store.getters.userId === userId
+      },
+      manageNutrients(row) {
+        this.$router.push({ path: `nutrient-template/${row.id}/detail` })
+      }
+    }
+  }
+</script>
+
+<style scoped>
+
+</style>