class Inquiry::MsdsController < Admin::BaseController before_action :set_inquiry def index @msds = Msds.new(@inquiry) @msds_details = @inquiry.msds_details if @msds_details.present? @msds_name = @msds_details.where(title:"") @msds_details = @msds_details.order(:index_id) @index = @msds_details.size.times.to_a @ids = @msds_details.ids @title = @msds_details.pluck(:title) @message = @msds_details.pluck(:message) else @msds_details = @msds.request_modify_msds @index = *(0..15) @ids = ("0"*16).split("") @title = ["name","Hazards identification","First aid measures","Accidental release measures","Purity","Accidental release measures","Handling and storage","Exposure Controls / PPE","Physical and chemical properties","Stability and reactivity","Toxicological information","Ecological information","Disposal consideration","Transportation information","Regulatory information","Other information"] @message = @msds_details end end def save_msds @ids = params[:ids] @indexs = @ids.size.times.to_a @msds_ids = @inquiry.msds_details.ids.join(",").split(",") @titles = params[:title] @messages = params[:message] MsdsDetail.transaction do @indexs.each do |index| id = @ids[index] if id.to_i == 0 msds_detail = MsdsDetail.new else msds_detail = MsdsDetail.find id end msds_detail.title = @titles[index] msds_detail.message = @messages[index] msds_detail.index_id = index msds_detail.inquiry_id = @inquiry.id msds_detail.save end (@msds_ids - @ids).each do |delete_id| msds_detail = MsdsDetail.find delete_id msds_detail.delete end @inquiry.save_audits(operator_type: 'User', operator_id: current_user.id, note: "save_msds") end end end
<h2 class="ui dividing header">Msds List</h2> <div class="content"> <%= javascript_include_tag 'jquery-ui-sortable.min.js' %> <style> .J_sortable .field.placeholder { position: relative; } .J_sortable .field.placeholder:before { position: absolute; } .J_sortable, .J_sortable2 { min-height: 200px; border: 1px solid #ddd; border-radius: 4px; } </style> <div class="pusher"> <div class="ui fluid container"> <div class="ui two column grid"> <div class="sixteen wide column "> <div class="ui form" style="margin: 20px;"> <div class="ui very relaxed grid "> <div class="eight wide column"> <div class="ui grid J_sortable connectedSortable"> <div class="sixteen wide column J_append_relaxed"> <label></label> <i class="edit icon J_change_label"></i> <div class="ui mini action input" style='display: none; margin-bottom: 4px;'> <input type="text"> <button class="ui button J_change_label_btn">Edit</button> </div> <%= text_area "0", :message, :rows =>"6", :value=>"",'data-id'=>"0",'data-title'=>"" %> </div> </div> </div> <div class="ui vertical divider" style='left:50%'>Drag add</div> <div class="eight wide column"> <div class="ui grid J_sortable2 connectedSortable" id="messages"> <% @index.each do |index|%> <div class="sixteen wide column"> <label><%= @title[index] %>:</label> <%= text_area "#{index}", :message, :rows =>"6", :value=>@message[index],'data-id'=>@ids[index],'data-title'=>@title[index] %> </div> <% end %> </div> <div class="actions" style="margin-top: 20px;"> <div class="ui button cancel">cancel</div> <div class="ui blue button msds_submit">Submit</div> </div> </div> </div> </div> </div> </div> </div> </div> <script type="text/javascript"> $(function() { // 保存复制节点html var J_append_relaxed_html = $('.J_append_relaxed').prop('outerHTML'); // 拖拽 $(".J_sortable").sortable({ connectWith: ".connectedSortable", // items: "li:not(.ui-state-disabled)", dropOnEmpty: false, change: function(event, ui) { // console.log(this) }, //在移动结束前促发事件 beforeStop: function(event, ui) { var $self = $(this); if ($self.find('.J_append_relaxed').length < 1) { //只有当追加节点拖拽之后才创建一个新节点 $self.append(J_append_relaxed_html); } } }); $(".J_sortable2").sortable({ connectWith: ".connectedSortable", // dropOnEmpty: false }); //修改label $(document).on('click', '.J_change_label', function(event) { event.preventDefault(); $(this).parent('.column').find('.action').show(); }); // 提交修改 $(document).on('click', '.J_change_label_btn', function(event) { var self = $(this), self_parent_action = self.parent('.action'), self_parent_column = self_parent_action.parent('.column'); self_parent_action.hide(); var self_parent_action_val = self_parent_action.find('input').val(); if (self_parent_action_val.length > 0) { self_parent_column.find('label').html(self_parent_action_val); self_parent_column.find('textarea').attr("data-title",self_parent_action_val); } }); // 提交msds $(".msds_submit").click(function(){ var ids = [] var title = [] var message = [] JSON.stringify( $("#messages textarea").each(function(){ ids.push($(this).attr("data-id")); title.push($(this).attr("data-title")); message.push($(this).val()) }) ) $.ajax({ url : '<%= save_msds_inquiry_msds_path %>?inquiry_id=<%= @inquiry.id %>', type : 'post', data : {ids: ids,title: title,message: message}, dataType : "json", beforeSend: function(request) { request.setRequestHeader("X-CSRF-Token", $('meta[name="csrf-token"]').attr('content')); }, success: function(result){ window.location.reload() } }); }); }); </script> </div>