图片上传

@@ -50,6 +50,8 @@
         var index = getQueryString('tab');
 
         $("#tab").Huitab({index: index});
+
+        uploadList();
     </script>
 </body>
 </html>

@@ -8,10 +8,10 @@
                 <span class="form-control select-box">
                     <select class="select uploader" size="1" name="sourceType" id="upload">
                         <?php foreach ($this->session->sourceBaseType as $k=>$v):?>
-                            <option value="<?=$v->code?>"><?=$v->desc?></option>
+                            <option value="<?=$v->code?>" data-name="<?=$v->desc?>"><?=$v->desc?></option>
                             <?php if($v->children && !empty($v->children)):?>
                                 <?php foreach ($this->session->sourceBaseType as $kk=>$vv):?>
-                                    <option value="<?=$vv->code?>">&nbsp;&nbsp;--<?=$vv->desc?></option>
+                                    <option value="<?=$vv->code?>" data-name="<?=$v->desc .'-'.$vv->desc?>">&nbsp;&nbsp;--<?=$vv->desc?></option>
                                 <?php endforeach;?>
                             <?php endif;?>
                         <?php endforeach;?>
@@ -34,28 +34,8 @@
                             <th>类型</th>
                             <th>支持相同类型图片上传多张, 格式: png/jpg 单张限制5M</th>
                         </tr>
-                    </tbody>
+                    </thead>
                     <tbody>
-                        <tr data-id="1">
-                            <td class="text-c">浙江法院公开网</td>
-                            <td>
-                                <div class="filelist"></div>
-                            </td>
-                        </tr>
-                        <tr data-id="2">
-                            <td class="text-c">全国被执行网</td>
-                            <td>
-                                <div class="filelist">
-                                    <div id="WU_FILE_X_1" class="file-item thumbnail">
-                                        <img src="holder.js/100x100">
-                                        <div class="info">Snipaste_2018-01-18_00-10-20.png</div>
-                                        <div class="file-panel">
-                                            <span class="cancel">删除</span>
-                                        </div>
-                                    </div>
-                                </div>
-                            </td>
-                        </tr>
                     </tbody>
                 </table>
             </div>

@@ -28,7 +28,22 @@ jQuery(function() {
 
   // 当有文件添加进来的时候
   uploader.on('fileQueued', function(file) {
-    var $id = $('select.uploader').val(), $list = $('tr[data-id='+$id+'] .filelist');
+    // var $id = $('select.uploader').val();
+    var $id = $('select.uploader').val();
+    var $tr = $('tr[data-id='+$id+']');
+
+    if(!$tr.length) {
+      var name = $('select.uploader option:selected').data('name');
+      var tr = '<tr data-id="'+$id+'">\
+            <td class="text-c">'+name+'</td>\
+            <td>\
+                <div class="filelist"></div>\
+            </td>\
+        </tr>'
+      $('tbody').append(tr);
+    }
+
+    var $list = $('tr[data-id='+$id+'] .filelist');
     var $li = $( '<div id="' + file.id + '" class="file-item thumbnail">' + '<img>' +
         '<div class="info">' + file.name + '</div>' + '</div>'),
       $btns = $('<div class="file-panel">' + '<span class="cancel">删除</span>').appendTo( $li ),
@@ -87,8 +102,10 @@ jQuery(function() {
   });
 
   // 文件上传成功，给item添加成功class, 用样式标记上传成功。
-  uploader.on('uploadSuccess', function(file) {
-    $('#' + file.id).addClass('upload-state-done');
+  uploader.on('uploadSuccess', function(file, response) {
+    var img = $('#' + file.id);
+    img.data('id', response.data.id);
+    img.addClass('upload-state-done');
   });
 
   // 文件上传失败，现实上传出错。
@@ -109,6 +126,41 @@ jQuery(function() {
     $('#' + file.id).find('.progress').remove();
   });
 
+
+});
+
+window.uploadList = function () {
+  var targetUrl = 'order/ordersource/base/' + $('#orderId').val();
+
+  $.ajax({
+    type: 'get',
+    url: apiBaseUrl + targetUrl,
+    cache: false,
+    dataType: 'json',
+    contentType: "application/json; charset=UTF-8",
+    success: function (data) {
+      var html = '';
+
+      for (var s in data.data) {
+        var sid = data.data[s][0].sourceType;
+
+        html += '<tr data-id="'+sid+'"><td class="text-c">'+s+'</td><td><div class="filelist">';
+
+        data.data[s].forEach(function (item) {
+          html += '<div id="WU_FILE_X_'+item.id+'" class="file-item thumbnail" data-id="'+item.id+'">\
+                      <img src="'+item.url+'" width="100" hegiht="100px">\
+                      <div class="info">'+item.fileName+'</div>\
+                      <div class="file-panel">\
+                          <span class="cancel">删除</span>\
+                      </div>\
+                  </div>'
+        });
+
+        html += '</div></td></tr>';
+      }
+
+      $('tbody').append(html);
+
       $('.file-item').on('mouseenter', function () {
         $(this).find('.file-panel').stop().animate({height: 30});
       });
@@ -121,10 +173,43 @@ jQuery(function() {
         var id = $(this).parents('.file-item.thumbnail').attr('id'), file = {id, id};
         removeFile(file);
       });
+    },
+    error: function () {
+      layer.alert("图片获取失败");
+    }
+  })
+}
 
   function removeFile( file ) {
     var $li = $('#'+file.id);
+    var id = $('#'+file.id).data('id');
+
+    var targetUrl = 'order/ordersource/delete/' + id;
+
+    $.ajax({
+        type: 'delete',
+        url: apiBaseUrl + targetUrl,
+        cache: false,
+        dataType: 'json',
+        contentType: "application/json; charset=UTF-8",
+        success: function (data) {
+            if (data.msg) {
+              layer.alert(data.msg);
+            } else if (data.code != 0) {
+              layer.alert('操作失败');
+            } else {
+              layer.alert('操作成功');
               $li.off().find('.file-panel').off().end().remove();
-    alert('删除成功');
             }
-});
+            setTimeout(function () {
+                if(!data.code) {
+                    table.fnDraw();
+                    layer_close();
+                }
+            },500);
+        },
+        error: function () {
+            layer.alert("操作失败")
+        }
+    })
+  }