add: project category upload logo

app/assets/javascripts/admin.js

@@ -99,3 +99,38 @@ $(document).on("turbolinks:before-cache", function () {
 
 $(function () {
 });
+
+$(document).on('turbolinks:load', function() {
+  
+  $('.logo-item-left').on("change", 'input[type="file"]', function () {
+    var $fileInput = $(this);
+    var file = this.files[0];
+    var imageType = /image.*/;
+    if (file && file.type.match(imageType)) {
+      var reader = new FileReader();
+      reader.onload = function () {
+        var $box = $fileInput.parent();
+        $box.find('img').attr('src', reader.result).css('display', 'block');
+        $box.addClass('has-img');
+      };
+      reader.readAsDataURL(file);
+    } else {
+    }
+  });
+
+  $('.attachment-item-left').on("change", 'input[type="file"]', function () {
+    var $fileInput = $(this);
+    var file = this.files[0];
+    var imageType = /image.*/;
+    if (file && file.type.match(imageType)) {
+      var reader = new FileReader();
+      reader.onload = function () {
+        var $box = $fileInput.parent();
+        $box.find('img').attr('src', reader.result).css('display', 'block');
+        $box.addClass('has-img');
+      };
+      reader.readAsDataURL(file);
+    } else {
+    }
+  });
+})

app/assets/stylesheets/admin.scss

@@ -58,3 +58,149 @@ input.form-control {
   position: absolute;
 }
 
+.logo-item {
+  display: flex;
+
+  &-img {
+    display: block;
+    width: 80px;
+    height: 80px;
+    background: #e9ecef;
+  }
+
+  &-upload {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    width: 80px;
+    height: 80px;
+    background: #e9ecef;
+    border: 1px solid #ced4da;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 27px;
+      left: 39px;
+      width: 2px;
+      height: 26px;
+      background: #495057;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 39px;
+      left: 27px;
+      width: 26px;
+      height: 2px;
+      background: #495057;
+    }
+  }
+
+  &-left {
+    position: relative;
+    width: 80px;
+    height: 80px;
+
+    &.has-img {
+      .logo-item-upload {
+        display: none;
+      }
+
+      &:hover {
+        .logo-item-upload {
+          display: block;
+          background: rgba(145, 145, 145, 0.8);
+        }
+      }
+    }
+  }
+
+  &-right {
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #777777;
+    font-size: 0.8rem;
+  }
+
+  &-title {
+    color: #23272B;
+    font-size: 1rem;
+  }
+}
+
+.attachment-item {
+  display: flex;
+
+  &-img {
+    display: block;
+    width: 160px;
+    height: 160px;
+    background: #e9ecef;
+  }
+
+  &-upload {
+    cursor: pointer;
+    position: absolute;
+    top: 0;
+    width: 160px;
+    height: 160px;
+    background: #e9ecef;
+    border: 1px solid #ced4da;
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 54px;
+      left: 78px;
+      width: 2px;
+      height: 52px;
+      background: #495057;
+    }
+
+    &::after {
+      content: '';
+      position: absolute;
+      top: 78px;
+      left: 54px;
+      width: 52px;
+      height: 2px;
+      background: #495057;
+    }
+  }
+
+  &-left {
+    position: relative;
+    width: 160px;
+    height: 160px;
+
+    &.has-img {
+      .attachment-item-upload {
+        display: none;
+      }
+
+      &:hover {
+        .attachment-item-upload {
+          display: block;
+          background: rgba(145, 145, 145, 0.8);
+        }
+      }
+    }
+  }
+
+  &-right {
+    padding-top: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    color: #777777;
+    font-size: 0.8rem;
+  }
+
+  &-title {
+    color: #23272B;
+    font-size: 1rem;
+  }
+}

app/controllers/admins/project_categories_controller.rb

@@ -33,7 +33,7 @@ class Admins::ProjectCategoriesController < Admins::BaseController
   end
 
   def update 
-    if @project_category.update_attributes({name: @name, pinned_index: params[:project_category][:pinned_index].to_i})
+    if @project_category.update_attributes({name: @name, pinned_index: params[:project_category][:pinned_index].to_i}) && save_image_file(params[:logo], 'logo')
       redirect_to admins_project_categories_path
       flash[:success] = '更新成功'
     else 
@@ -80,4 +80,12 @@ class Admins::ProjectCategoriesController < Admins::BaseController
       flash[:danger] = '分类已存在'
     end
   end
+
+  def save_image_file(file, type)
+    return unless file.present? && file.is_a?(ActionDispatch::Http::UploadedFile)
+
+    file_path = Util::FileManage.source_disk_filename(@project_category, type)
+    File.delete(file_path) if File.exist?(file_path) # 删除之前的文件
+    Util.write_file(file, file_path)
+  end
 end

app/models/project_category.rb

@@ -21,6 +21,14 @@ class ProjectCategory < ApplicationRecord
   has_ancestry
 
   def logo_url
-    ""
+    image_url('logo')
   end
+
+  private
+
+  def image_url(type)
+    return nil unless Util::FileManage.exists?(self, type)
+    Util::FileManage.source_disk_file_url(self, type)
+  end
+
 end

app/views/admins/project_categories/_form_modal.html.erb

@@ -7,7 +7,7 @@
           <span aria-hidden="true">&times;</span>
         </button>
       </div>
-       <%= form_for @project_category, url: {controller: "project_categories", action: "#{type}"} do |p| %>
+       <%= form_for @project_category, url: {controller: "project_categories", action: "#{type}"}, html: { enctype: 'multipart/form-data' } do |p| %>
         <div class="modal-body">
           <div class="form-group">
             <label>
@@ -17,9 +17,22 @@
           </div>
           <div class="form-group">
             <label>
-              精选级别
+              精选等级
             </label>
-            <%= p.number_field :pinned_index,class: "form-control input-lg",placeholder: "精选级别",required: true%>
+            <%= p.number_field :pinned_index,class: "form-control input-lg",placeholder: "精选等级",required: true%>
+          </div>
+          <div class="logo-item">
+            <% logo_img = @project_category.logo_url %>
+            <div class="logo-item-left mr-3 <%= logo_img ? 'has-img' : '' %>">
+              <img class="logo-item-img nav-logo-img" src="<%= logo_img %>" style="<%= logo_img.present? ? '' : 'display: none' %>"/>
+              <%= file_field_tag(:logo, accept: 'image/png,image/jpg,image/jpeg',style: "display: none", value: params[:logo]) %>
+              <label for="logo" class="logo-item-upload" data-toggle="tooltip" data-title="选择图片"></label>
+            </div>
+            <div class="logo-item-right">
+              <div class="logo-item-title flex-1">网站导航logo</div>
+              <div>格式：PNG、JPG</div>
+              <div>尺寸：高度38px以内，宽等比例缩放</div>
+            </div>
           </div>
         </div>
         <div class="modal-footer">

app/views/admins/project_categories/edit.js.erb

@@ -1,2 +1,19 @@
 $("#project-category-modals").html("<%= j render(partial: 'admins/project_categories/form_modal', locals: {type: 'update'}) %>")
-$(".project-category-change-modal").modal('show');
+$(".project-category-change-modal").modal('show');
+
+
+$('.logo-item-left').on("change", 'input[type="file"]', function () {
+  var $fileInput = $(this);
+  var file = this.files[0];
+  var imageType = /image.*/;
+  if (file && file.type.match(imageType)) {
+    var reader = new FileReader();
+    reader.onload = function () {
+      var $box = $fileInput.parent();
+      $box.find('img').attr('src', reader.result).css('display', 'block');
+      $box.addClass('has-img');
+    };
+    reader.readAsDataURL(file);
+  } else {
+  }
+});

app/views/admins/projects/shared/_form_modal.html.erb

@@ -13,7 +13,7 @@
             <label>
               推荐等级 
             </label>
-            <%= p.number_field :recommend_index,class: "form-control input-lg"%>
+            <%= p.number_field :recommend_index,class: "form-control input-lg",required: true%>
           </div>
         </div>
         <div class="modal-footer">