From 8124005e7e8fb776153d219aabafff847c707ec1 Mon Sep 17 00:00:00 2001
From: huangdeliang <huangdeliang@skieer.com>
Date: Wed, 17 Mar 2021 13:45:54 +0800
Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E8=A1=A8=E5=90=8D=E7=A7=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../custom/domain/SysIngredentFile.java       |  4 +-
 .../impl/SysIngredientServiceImpl.java        |  2 +-
 .../mapper/custom/SysIngredientMapper.xml     | 10 +-
 .../src/views/custom/ingredient/index.vue     | 96 +++++++++++--------
 4 files changed, 64 insertions(+), 48 deletions(-)

diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java
index fa7eef4a4..88effbaf9 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/domain/SysIngredentFile.java
@@ -11,9 +11,9 @@ public class SysIngredentFile {
 
     Long igdId;
 
-    String fileUrl;
+    String url;
 
-    String fileName;
+    String name;
 
     Integer delFlag;
 
diff --git a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java b/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java
index fbfa31886..2db78fd55 100644
--- a/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java
+++ b/stdiet-custom/src/main/java/com/stdiet/custom/service/impl/SysIngredientServiceImpl.java
@@ -66,7 +66,7 @@ public class SysIngredientServiceImpl implements ISysIngredientService {
         if (StringUtils.isNotNull(sysIngredient.getImgList())) {
             List<SysIngredentFile> fileList = sysIngredient.getImgList();
             for (SysIngredentFile file : fileList) {
-                file.setId(sysIngredient.getId());
+                file.setIgdId(sysIngredient.getId());
                 file.setCreateBy(SecurityUtils.getUsername());
                 file.setCreateTime(DateUtils.getNowDate());
             }
diff --git a/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml b/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml
index 4e6ad6777..261bfbe58 100644
--- a/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml
+++ b/stdiet-custom/src/main/resources/mapper/custom/SysIngredientMapper.xml
@@ -220,22 +220,22 @@
 
     <!--    添加食材图片-->
     <insert id="batchInsertIngredientImage">
-        insert into sys_ingredient_file(igd_id, file_url, file_name, create_by, create_time, update_by, update_time )
+        insert into sys_ingredient_file(igd_id, url, name, create_by, create_time, update_by, update_time )
         values
         <foreach collection="list" separator="," item="item" index="index">
-            (#{item.ingredientId},#{item.fileUrl},#{item.fileName},#{item.createBy},#{item.createTime},#{item.updateBy},#{item.updateTime})
+            (#{item.igdId},#{item.url},#{item.name},#{item.createBy},#{item.createTime},#{item.updateBy},#{item.updateTime})
         </foreach>
     </insert>
 
     <resultMap id="SysIngredentFileResult" type="SysIngredentFile">
         <result property="id" column="id"/>
-        <result property="fileName" column="file_name"/>
-        <result property="fileUrl" column="file_url"/>
+        <result property="name" column="name"/>
+        <result property="url" column="url"/>
     </resultMap>
 
     <!--    查找图片-->
     <select id="selectIngredentFileById" parameterType="Long" resultMap="SysIngredentFileResult">
-        select id, file_url, file_name from sys_ingredent_file where igd_id = #{id} and del_flag = 0
+        select id, url, name from sys_ingredient_file where igd_id = #{id} and del_flag = 0
     </select>
 
     <!--    删除图片记录-->
diff --git a/stdiet-ui/src/views/custom/ingredient/index.vue b/stdiet-ui/src/views/custom/ingredient/index.vue
index 4c58c211a..8e1b1c590 100644
--- a/stdiet-ui/src/views/custom/ingredient/index.vue
+++ b/stdiet-ui/src/views/custom/ingredient/index.vue
@@ -246,7 +246,7 @@
 
     <!-- 添加或修改食材对话框 -->
     <el-dialog :title="title" :visible.sync="open" width="720px" append-to-body>
-      <el-row :gutter="8">
+      <el-row :gutter="8" style="height: 620px; overflow: auto">
         <el-form ref="form" :model="form" :rules="rules" label-width="80px">
           <el-col :span="8">
             <el-form-item label="食材名称" prop="name" label-width="90px">
@@ -338,15 +338,32 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col
-            :span="12"
-            style="position: absolute; left: 100px; top: -70px"
-          >
-            <el-form-item
-              label="审核状态"
-              prop="reviewStatus"
-              label-width="76px"
-            >
+          <el-col :span="16">
+            <el-form-item label="食材图片" prop="imgList">
+              <el-upload
+                drag
+                :auto-upload="true"
+                :headers="{ Authorization: 'Bearer ' + token }"
+                :limit="5"
+                :multiple="true"
+                :file-list="form.imgList"
+                :action="actionUrl"
+                accept="image/jpeg,image/png"
+                :on-success="handleOnUploadSuccess"
+                :on-exceed="handleOnUploadExceed"
+                :on-remove="handleOnUploadRemove"
+                list-type="picture"
+              >
+                <em class="el-icon-upload" />
+                <div class="el-upload__text">
+                  将文件拖到此处，或<em>点击上传</em>
+                  <div style="font-size: 12px; color: #8c8c8c">最多可上传5个文件，且每个文件不超过10M</div>
+                </div>
+              </el-upload>
+            </el-form-item>
+          </el-col>
+          <el-col :span="8">
+            <el-form-item label="审核状态" prop="reviewStatus">
               <el-select
                 style="position: absolute"
                 v-model="form.reviewStatus"
@@ -362,31 +379,8 @@
               </el-select>
             </el-form-item>
           </el-col>
-          <el-col :span="20">
-            <el-form-item label="食材图片" prop="imgList">
-              <el-upload
-                drag
-                :auto-upload="true"
-                :headers="{ Authorization: 'Bearer ' + token }"
-                :limit="5"
-                :multiple="true"
-                :file-list="form.imgList"
-                :action="actionUrl"
-                :on-success="handleOnUploadSuccess"
-                :on-remove="handleOnUploadRemove"
-              >
-                <em class="el-icon-upload" />
-                <div class="el-upload__text">
-                  将文件拖到此处，或<em>点击上传</em>
-                </div>
-                <div class="el-upload__tip" slot="tip">
-                  最多可上传5个文件，且每个文件不超过10M
-                </div>
-              </el-upload>
-            </el-form-item>
-          </el-col>
           <el-col :span="24">
-            <el-form-item label="介绍" prop="info" label-width="90px">
+            <el-form-item label="介绍" prop="info">
               <el-input
                 :rows="5"
                 v-model="form.info"
@@ -396,7 +390,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="24">
-            <el-form-item label="备注" prop="remark" label-width="90px">
+            <el-form-item label="备注" prop="remark">
               <el-input
                 :rows="3"
                 v-model="form.remark"
@@ -660,12 +654,34 @@ export default {
     string2Arr(str) {
       return str ? str.split(",") : [];
     },
-    handleOnUploadSuccess() {
-
+    handleOnUploadSuccess(res, file, fileList) {
+      this.form.imgList = fileList.map((data) => {
+        const { name, url, response } = data;
+        if (response) {
+          return { url: response.fileUrl, name: response.fileName };
+        }
+        return { url, name };
+      });
+      // console.log({
+      //   res,
+      //   file,
+      //   fileList,
+      //   form: this.form,
+      // });
+    },
+    handleOnUploadRemove(file, fileList) {
+      this.form.imgList = fileList.map(({ url, name }) => ({
+        url,
+        name,
+      }));
+      // console.log({ file, fileList, form: this.form });
+    },
+    handleOnUploadExceed(files, fileList) {
+      this.$message({
+        message: "最多可上传5张图片",
+        type: "warning",
+      });
     },
-    handleOnUploadRemove() {
-
-    }
   },
 };
 </script>