调整食物首页及单位管理页面

src/views/food/components/FoodDetail.vue

@@ -2,8 +2,8 @@
   <div class="createPost-container">
     <el-form ref="postForm" :model="postForm" :rules="rules" label-position="right" label-width="90px" class="form-container">
       <div class="createPost-main-container">
-        <el-form-item label="自定义ID：" style="margin-bottom: 40px;width: 60%" prop="id">
-          <el-input v-model="postForm.id2" placeholder="请输入ID" />
+        <el-form-item label="自定义ID：" style="margin-bottom: 40px;width: 60%" prop="id2">
+          <el-input v-model="postForm.id2" placeholder="请输入自定义ID" />
         </el-form-item>
         <el-form-item label="名称：" prop="name" style="margin-bottom: 40px;width: 60%" required>
           <el-input v-model="postForm.name" placeholder="请输入名称" />
@@ -18,32 +18,9 @@
         <el-form-item label="ep：" prop="ep" style="margin-bottom: 40px;width: 60%">
           <el-input v-model="postForm.ep" placeholder="请输入ep" style="width: 40%" />
         </el-form-item>
-        <el-form-item label="NV_spec：" prop="nvSpec" style="margin-bottom: 40px;width: 60%">
-          <el-row :gutter="10">
-            <el-col :span="8">
-              <el-input v-model="postForm.nvSpec" placeholder="请输入nvSpec" />
-            </el-col>
-            <el-col :span="6">
-              <el-autocomplete
-                v-model="postForm.nvSpecUnitName"
-                :fetch-suggestions="querySearchAsync"
-                placeholder="请输入内容"
-              ></el-autocomplete>
-            </el-col>
-          </el-row>
-        </el-form-item>
-        <el-form-item label="最小刻度：" prop="minScale" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.minScale" placeholder="请输入最小刻度" />
-        </el-form-item>
-        <el-form-item label="最大刻度：" prop="maxScale" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.maxScale" placeholder="请输入最大刻度" />
-        </el-form-item>
-        <el-form-item label="卡尺每格刻度：" prop="stepScale" style="margin-bottom: 40px;width: 60%">
-          <el-input v-model="postForm.stepScale" placeholder="请输入卡尺每格刻度" />
-        </el-form-item>
         <el-form-item label="图片列表：" prop="images" style="margin-bottom: 30px;width: 60%">
           <dropzone
-            :id="mainImgDropzone"
+            id="foodImageDropzone"
             :default-img="postForm.images"
             @dropzone-removedFile="removeFile"
             @dropzone-success="addFile"
@@ -104,15 +81,12 @@ export default {
   },
   data() {
     return {
-      mainImgDropzone: 'mainImgDropzone',
-      nutrientImgDropzone: 'nutrientImgDropzone',
       postForm: { id2: '', name: '', img: '', description: ''},
       loading: false,
       rules: {
         name: [{ required: true, message: '名称不能为空', trigger: 'blur' }]
       },
       foodId: '',
-      unitLoading: false,
       dialogFormVisible: false,
       templateLoading:false,
       templates: [],
@@ -135,37 +109,21 @@ export default {
       this.loading = true
       this.$refs['postForm'].validate((valid) => {
         if (valid) {
-          if (this.isEdit) {
-            this.updateData()
-          } else {
-            this.createData()
-          }
+          const resultPromise = this.isEdit ? update(this.foodId, this.postForm) : create(this.postForm)
+          resultPromise.then(() => {
+            this.$message.success('提交成功')
+            this.loading = false
+            this.$router.push({ path: '/food' })
+          }).catch(res => {
+            this.$message.error(res.data.message)
+            this.loading = false
+          })
         } else {
-          this.$notify({ title: '失败', message: '必填字段为空', type: 'error', duration: 2000 })
+          this.$message.error('必填字段为空')
           this.loading = false
         }
       })
     },
-    createData() {
-      create(this.postForm).then(res => {
-        this.$message.success('创建成功')
-        this.loading = false
-        this.$router.push({ path: '/food' })
-      }).catch(error => {
-        this.$message.error(res.data.message)
-        this.loading = false
-      })
-    },
-    updateData() {
-      update(this.foodId, this.postForm).then(res => {
-        this.$message.success('更新成功')
-        this.loading = false
-        this.$router.push({ path: '/food' })
-      }).catch(error => {
-        this.$message.error(res.data.message)
-        this.loading = false
-      })
-    },
     removeFile(file) {
       let imgs = this.postForm.images
       let imgIndex = -1
@@ -178,12 +136,10 @@ export default {
       imgs.splice(imgIndex, 1)
     },
     addFile(file) {
-      if (file.dropzoneId === this.mainImgDropzone) {
-        if (this.postForm.images) {
-          this.postForm.images.push(file.fileUrl)
-        } else {
-          this.postForm.images = [file.fileUrl]
-        }
+      if (this.postForm.images) {
+        this.postForm.images.push(file.fileUrl)
+      } else {
+        this.postForm.images = [file.fileUrl]
       }
     },
     queryTemplates(query) {
@@ -195,18 +151,12 @@ export default {
     },
     handleDialog() {
       this.templateId = ''
+      this.queryTemplates()
       this.dialogFormVisible = true
     },
     submitFromTemplate() {
       this.postForm.templateId = this.templateId
       this.submitForm()
-    },
-    querySearchAsync(query, cb) {
-      getUnits({ query }).then(res => {
-        cb(res.data.list.map(item => { return { value: item.name } }))
-      }).catch(() => {
-        cb([])
-      })
     }
   }
 }

src/views/food/index.vue

@@ -35,12 +35,22 @@
       style="width: 100%;"
     >
       <el-table-column type="index" label="序号" align="center" width="60px" />
-      <el-table-column label="自定义ID" align="center" width="70px">
+      <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: 180px"
+            :src="row.images[0]"
+            fit="contain"
+          />
+        </template>
+      </el-table-column>
+      <el-table-column label="自定义ID" align="center" width="100px">
         <template slot-scope="{row}">
           <span>{{ row.id2 }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="名称" align="center" width="100px">
+      <el-table-column label="名称" align="center" width="200px">
         <template slot-scope="{row}">
           <span>{{ row.name }}</span>
         </template>
@@ -60,26 +70,6 @@
           <span>{{ row.ep }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="NV_spec" align="center" width="70px">
-        <template slot-scope="{row}">
-          <span>{{ row.nvSpec ? row.nvSpec + row.nvSpecUnitName : '' }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="最小刻度" align="center" width="70px">
-        <template slot-scope="{row}">
-          <span>{{ row.minScale }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="最大刻度" align="center" width="70px">
-        <template slot-scope="{row}">
-          <span>{{ row.maxScale }}</span>
-        </template>
-      </el-table-column>
-      <el-table-column label="卡尺每格刻度" align="center" width="70px">
-        <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>
@@ -90,7 +80,7 @@
           <span>{{ row.updateTime }}</span>
         </template>
       </el-table-column>
-      <el-table-column label="操作" align="center" class-name="small-padding" width="500">
+      <el-table-column label="操作" align="center" class-name="small-padding">
         <template slot-scope="{row,$index}">
           <el-button type="primary" size="mini" @click="handleUpdate(row)">
             更新
@@ -111,7 +101,13 @@
       </el-table-column>
     </el-table>
 
-    <pagination v-show="total>0" :total="total" :page.sync="listQuery.pageNum" :limit.sync="listQuery.pageSize" @pagination="fetchData" />
+    <pagination
+      v-show="total>0"
+      :total="total"
+      :page.sync="listQuery.pageNum"
+      :limit.sync="listQuery.pageSize"
+      @pagination="fetchData"
+    />
   </div>
 </template>
 
@@ -136,7 +132,7 @@ export default {
       dialogStatus: '',
       dialogFormVisible: false,
       sortOptions: [{ key: 0, label: '按创建时间倒序排列' }, { key: 1, label: '按ID顺序排列' }],
-      list: [{}],
+      list: [],
       listLoading: true,
       listQuery: {
         query: '',
@@ -177,6 +173,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)
       })
     }
   }

src/views/food/unit.vue

@@ -14,7 +14,7 @@
           v-for="item in units"
           :key="item.id"
           :label="item.name"
-          :value="item.id"
+          :value="item.name"
         />
       </el-select>
       To单位：
@@ -30,7 +30,7 @@
           v-for="item in units"
           :key="item.id"
           :label="item.name"
-          :value="item.id"
+          :value="item.name"
         />
       </el-select>
       转换率:
@@ -56,12 +56,12 @@
       <el-table-column type="index" label="序号" align="center" width="60px" />
       <el-table-column label="From单位" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.fromUnitName }}</span>
+          <span>{{ row.fromUnit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="To单位" align="center">
         <template slot-scope="{row}">
-          <span>{{ row.toUnitName }}</span>
+          <span>{{ row.toUnit }}</span>
         </template>
       </el-table-column>
       <el-table-column label="转换率" align="center">
@@ -69,6 +69,11 @@
           <span>{{ row.ratio }}</span>
         </template>
       </el-table-column>
+      <el-table-column label="备注" align="center">
+        <template slot-scope="{row}">
+          <span>{{ row.note }}</span>
+        </template>
+      </el-table-column>
       <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="100">
         <template slot-scope="{row}">
           <el-button size="mini" type="danger" @click="removeFoodUnit(row)">