attachmentSimple组件上传附件列表展现

                          <div component="$UI/system/components/justep/attachment/attachmentSimple"
                            actionUrl="$UI/system/service/doc/common/simpleFileStore.j"
                            xid="attachmentSimple4" bind-ref="$model.mainData.ref(&quot;fFJ&quot;)"> 
                            <div class="x-attachment" xid="div48"> 
                              <div class="x-attachment-content x-card-border"
                                xid="div49"> 
                                <div class="x-doc-process" xid="div50"> 
                                  <div class="progress-bar x-doc-process-bar"
                                    role="progressbar" style="width:0%;" xid="progressBar4"/> 
                                </div>  
                                <table> 
                                  <tr> 
                                    <td style="padding:8px;">附件</td>  
                                    <td> 
                                      <div class="x-attachment-cell" data-bind="visible:$state.get() == 'upload'"
                                        xid="div54"> 
                                        <div class="x-attachment-item x-item-upload"
                                          data-bind="visible:$state.get() == 'upload'"
                                          xid="div55"/> 
                                      </div> 
                                    </td> 
                                  </tr> 
                                </table>  
                                <table class="x-attachment-list"> 
                                  <tbody data-bind="foreach:$attachmentItems"> 
                                    <tr> 
                                      <td style="width:50px;padding:5px;"> 
                                        <div style="width:30px;height:30px;background-size:32px;"
                                          data-bind="style:{backgroundImage:($model.previewPicture.bind($model,$object))()}"/> 
                                      </td>  
                                      <td style="vertical-align:middle;padding:5px;"> 
                                        <span data-bind="click:$model.getModel().attPreview.bind($model.getModel(),$model,$object),text:$object.realFileName.get()"/> 
                                      </td>  
                                      <td style="width:50px;padding:5px;"> 
                                        <span class="glyphicon glyphicon-remove"
                                          data-bind="click:$model.deleteFile.bind($model)"/> 
                                      </td>  
                                      <td style="width:50px;padding:5px;"> 
                                        <span class="glyphicon glyphicon-arrow-down"
                                          data-bind="click:$model.getModel().attDownload.bind($model.getModel(),$model,$object)"/> 
                                      </td> 
                                    </tr> 
                                  </tbody> 
                                </table> 
                              </div> 
                            </div> 
                          </div> 

需要注意点文件名预览调用的attPreview方法和点下载按钮下载调用的attDownload方法是需要在自己的js中定义的，如下：

	Model.prototype.attPreview = function(object, event) {
		var realFileName = event.realFileName.get();
		var storeFileName = event.storeFileName.get();
		var ownerID = object.getOwnerID();
		var url = object.getFileUrl(realFileName,storeFileName,ownerID,"browse");
        fileApi.browse(url);
	};
	Model.prototype.attDownload = function(object, event) {
		var realFileName = event.realFileName.get();
		var storeFileName = event.storeFileName.get();
		var ownerID = object.getOwnerID();
		var url = object.getFileUrl(realFileName,storeFileName,ownerID,"download");
        fileApi.browse(url);
	};

注意需要添加fileApi的引用,如下：

var fileApi = require("$UI/system/components/justep/docCommon/fileApi");

显示效果如下：