完成营养素相关页面

debug.log

@@ -0,0 +1 @@
+[1112/101933.651:ERROR:directory_reader_win.cc(43)] FindFirstFile: 系统找不到指定的路径。 (0x3)

src/api/nutrient.js

@@ -34,3 +34,12 @@ export function remove(id) {
     method: 'delete'
   })
 }
+
+// 上移下移
+export function updateSortOrder(id, data) {
+  return request({
+    url: `/api/nutrients/${id}/sort`,
+    method: 'post',
+    data
+  })
+}

src/components/Upload/SingleImage.vue

@@ -9,6 +9,7 @@
       class="image-uploader"
       drag
       :action="uploadHost"
+      :style="{ width: uploaderWidth}"
       v-if="imageUrl.length <= 0"
     >
       <i class="el-icon-upload" />
@@ -40,6 +41,10 @@
       showPreview: {
         type: Boolean,
         default: true
+      },
+      uploaderWidth: {
+        type: String,
+        default: '100%'
       }
     },
     data() {

src/views/nutrient/index.vue

@@ -16,7 +16,7 @@
         style="margin: 0 10px 20px 0; float: right;"
         type="success"
         icon="el-icon-circle-plus-outline"
-        @click="handleCreate">
+        @click="handleCreateOrUpdate('create')">
         新建
       </el-button>
     </div>
@@ -28,7 +28,7 @@
       border
       fit
       highlight-current-row
-      style="width: 100%;"
+      ref="table"
     >
       <el-table-column type="index" label="序号" align="center" width="60" />
       <el-table-column label="图片" align="center" width="180">
@@ -41,12 +41,12 @@
           <span>{{ row.id }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center">
+      <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">
+      <el-table-column label="英文名称" align="center" width="150">
         <template slot-scope="{row}">
           <span>{{ row.enName }}</span>
         </template>
@@ -76,21 +76,30 @@
           <span>{{ row.recommendEnd }}</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-width">
+      <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" width="350">
         <template slot-scope="{row,$index}">
-          <el-button type="primary" size="mini" @click="handleUpdate(row)">
+          <el-button type="primary" size="mini" @click="handleCreateOrUpdate('update', 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 type="primary" size="mini" @click="updateSort(row, 2)">
+            置顶
+          </el-button>
           <el-button size="mini" type="danger" @click="handleDelete(row, $index)">
             删除
           </el-button>
@@ -101,7 +110,7 @@
     <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="70px" style="width: 400px; margin-left:50px;">
+      <el-form ref="dataForm" :rules="rules" :model="params" label-position="left" label-width="200px" style="width: 400px; margin-left:50px;">
         <el-form-item label="ID" prop="id">
           <el-input v-model="params.id" placeholder="请输入ID" />
         </el-form-item>
@@ -111,8 +120,49 @@
         <el-form-item label="英文名称" prop="enName">
           <el-input v-model="params.enName" placeholder="请输入英文名称" />
         </el-form-item>
-        <el-form-item label="缩写" prop="abbreviation">
-          <el-input v-model="params.abbreviation" placeholder="请输入缩写" />
+        <el-form-item label="编码" prop="code">
+          <el-input v-model="params.code" placeholder="编码" />
+        </el-form-item>
+        <el-form-item label="推荐用量类型" prop="recommendType">
+          <el-radio v-model="params.recommendType" :label="0">值</el-radio>
+          <el-radio v-model="params.recommendType" :label="1">范围</el-radio>
+          <el-radio v-model="params.recommendType" :label="2">无</el-radio>
+        </el-form-item>
+        <el-form-item label="推荐量单位" prop="recommendUnit" v-if="params.recommendType!==2">
+          <el-select
+            v-model="params.recommendUnit"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请选择推荐量单位"
+            :remote-method="queryUnits"
+            :loading="loading">
+            <el-option v-for="item in units" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="每日推荐摄入量" v-if="params.recommendType===0" prop="recommend">
+          <el-input v-model="params.recommend" placeholder="每日推荐摄入量" />
+        </el-form-item>
+        <el-form-item label="每日推荐摄入量范围-开始值" v-if="params.recommendType===1" prop="recommendBegin">
+          <el-input v-model="params.recommendBegin" placeholder="每日推荐摄入量范围-开始值" />
+        </el-form-item>
+        <el-form-item label="每日推荐摄入量范围-截止值" v-if="params.recommendType===1" prop="recommendEnd">
+          <el-input v-model="params.recommendEnd" placeholder="每日推荐摄入量范围-截止值" />
+        </el-form-item>
+        <el-form-item label="上级营养素" prop="parentId">
+          <el-select
+            v-model="params.parentId"
+            filterable
+            remote
+            reserve-keyword
+            placeholder="请选择上级营养素"
+            :remote-method="queryNutrients"
+            :loading="loading">
+            <el-option v-for="item in parentNutrients" :key="item.id" :label="item.name" :value="item.id" />
+          </el-select>
+        </el-form-item>
+        <el-form-item label="营养素图片" prop="coverPic">
+          <single-image :value="params.coverPic" :show-preview="true" @success="updateFile" style="width: 100%" />
         </el-form-item>
       </el-form>
       <div slot="footer" class="dialog-footer">
@@ -129,13 +179,15 @@
 
 <script>
 import Pagination from '@/components/Pagination'
-import { getList, update, remove, create } from '@/api/nutrient'
+import SingleImage from '@/components/Upload/SingleImage'
+import { getList, update, remove, create, updateSortOrder } from '@/api/nutrient'
+import { getList as getUnits } from '@/api/unit'
 
-  const recommendTypes = { 0: '值', 1: '范围', 2: '无'}
+const recommendTypes = { 0: '值', 1: '范围', 2: '无'}
 
 export default {
   name: 'NutrientList',
-  components: { Pagination },
+  components: { Pagination, SingleImage },
   filters: {
     recommendTypeFilter(value) {
       return recommendTypes[value]
@@ -159,9 +211,13 @@ export default {
         create: '新建'
       },
       rules: {
-        id: [{ required: true, message: 'ID不允许为空', trigger: 'blur' }]
+        id: [{ required: true, message: 'ID不允许为空', trigger: 'blur' }],
+        name: [{ required: true, message: '名称不允许为空', trigger: 'blur' }]
       },
-      params: {}
+      params: { recommendType: 2 },
+      units: [],
+      loading: false,
+      parentNutrients: []
     }
   },
   created() {
@@ -174,19 +230,16 @@ export default {
         this.list = response.data.list
         this.total = response.data.count
         this.listLoading = false
+        this.$nextTick(()=>{
+          this.$refs.table.doLayout()
+        })
       })
     },
-    handleCreate() {
-      this.params = {}
-      this.dialogStatus = 'create'
-      this.dialogFormVisible = true
-      this.$nextTick(() => {
-        this.$refs['dataForm'].clearValidate()
-      })
-    },
-    handleUpdate(row) {
-      this.params = Object.assign({}, row) // copy obj
-      this.dialogStatus = 'update'
+    handleCreateOrUpdate(dialogStatus, row) {
+      this.queryUnits()
+      this.queryNutrients()
+      this.params = dialogStatus === 'create' ? { recommendType: 2 } : Object.assign({}, row) // copy obj
+      this.dialogStatus = dialogStatus
       this.dialogFormVisible = true
       this.$nextTick(() => {
         this.$refs['dataForm'].clearValidate()
@@ -196,6 +249,8 @@ export default {
       remove(row.id).then(res => {
         this.$notify({ title: '成功', message: '删除成功', type: 'success', duration: 2000 })
         this.list.splice(index, 1)
+      }).catch(res => {
+        this.$message.error(res.data.message)
       })
     },
     createData() {
@@ -221,11 +276,42 @@ export default {
           this.fetchData()
         })
       }
+    },
+    queryUnits(query) {
+      this.loading = true
+      getUnits({ query }).then(res => {
+        this.units = res.data.list
+        this.loading = false
+      }).catch(res => {
+        this.units = []
+        this.loading = false
+      })
+    },
+    queryNutrients(query) {
+      this.loading = true
+      getList({ query }).then(res => {
+        this.parentNutrients = res.data.list
+        this.loading = false
+      }).catch(res => {
+        this.parentNutrients = []
+        this.loading = false
+      })
+    },
+    updateFile(value) {
+      this.$set(this.params, 'coverPic', value)
+    },
+    updateSort(row, type) {
+      updateSortOrder(row.id, { type }).then(res => {
+        this.$message.success("提交成功")
+        this.fetchData()
+      }).catch(res => {
+        this.$message.error(res.data.message)
+        this.fetchData()
+      })
     }
   }
 }
 </script>
 
-<style scoped>
-
+<style scoped lang="scss">
 </style>