feat: 合同附件支持拖拽上传
drop_zone: 虚线边框拖放区域, 点击选择文件 Form: 隐藏字段 folderid+fiid + file input Script: dragover/drop 事件处理, 拖入文件自动上传
This commit is contained in:
parent
fcec9422ab
commit
3df4e237fc
@ -30,35 +30,74 @@
|
|||||||
},
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "Filler"
|
"widgettype": "Filler"
|
||||||
},
|
|
||||||
{
|
|
||||||
"widgettype": "Button",
|
|
||||||
"options": {
|
|
||||||
"label": "上传附件",
|
|
||||||
"css": "primary",
|
|
||||||
"borderRadius": "6px",
|
|
||||||
"padding": "4px 12px"
|
|
||||||
},
|
|
||||||
"binds": [{
|
|
||||||
"wid": "self",
|
|
||||||
"event": "click",
|
|
||||||
"actiontype": "urlwidget",
|
|
||||||
"target": "PopupWindow",
|
|
||||||
"popup_options": {
|
|
||||||
"title": "上传附件",
|
|
||||||
"width": "450px",
|
|
||||||
"height": "200px",
|
|
||||||
"dismiss_events": ["cancel"]
|
|
||||||
},
|
|
||||||
"options": {
|
|
||||||
"url": "{{entire_url('/filemgr/upload_file.ui')}}?id={{folder}}&fiid={{fiid}}"
|
|
||||||
}
|
|
||||||
}]
|
|
||||||
}
|
}
|
||||||
]
|
]
|
||||||
},
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "VBox",
|
||||||
|
"id": "drop_zone",
|
||||||
|
"options": {
|
||||||
|
"css": "card",
|
||||||
|
"width": "100%",
|
||||||
|
"height": "80px",
|
||||||
|
"padding": "16px",
|
||||||
|
"bgcolor": "#1E293B",
|
||||||
|
"border": "2px dashed #475569",
|
||||||
|
"borderRadius": "8px",
|
||||||
|
"alignItems": "center",
|
||||||
|
"justifyContent": "center",
|
||||||
|
"marginBottom": "12px"
|
||||||
|
},
|
||||||
|
"subwidgets": [
|
||||||
|
{
|
||||||
|
"widgettype": "Text",
|
||||||
|
"options": {
|
||||||
|
"otext": "拖拽文件到此处上传,或点击选择文件",
|
||||||
|
"i18n": true,
|
||||||
|
"color": "#94A3B8",
|
||||||
|
"fontSize": "13px"
|
||||||
|
}
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Form",
|
||||||
|
"id": "upload_form",
|
||||||
|
"options": {
|
||||||
|
"fields": [
|
||||||
|
{"name": "folderid", "uitype": "hide", "value": "{{folder}}"},
|
||||||
|
{"name": "fiid", "uitype": "hide", "value": "{{fiid}}"},
|
||||||
|
{"name": "upfile", "uitype": "file", "label": ""}
|
||||||
|
]
|
||||||
|
},
|
||||||
|
"binds": [{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "submited",
|
||||||
|
"actiontype": "urlwidget",
|
||||||
|
"target": "self",
|
||||||
|
"options": {
|
||||||
|
"url": "{{entire_url('/filemgr/upload_file.dspy')}}"
|
||||||
|
}
|
||||||
|
}]
|
||||||
|
}
|
||||||
|
],
|
||||||
|
"binds": [{
|
||||||
|
"wid": "self",
|
||||||
|
"event": "click",
|
||||||
|
"actiontype": "method",
|
||||||
|
"target": "upload_form",
|
||||||
|
"method": "select_file"
|
||||||
|
}]
|
||||||
|
},
|
||||||
|
{
|
||||||
|
"widgettype": "Script",
|
||||||
|
"id": "drop_handler",
|
||||||
|
"options": {
|
||||||
|
"script": "var dz=document.querySelector('#drop_zone'); if(dz){dz.addEventListener('dragover',function(e){e.preventDefault();e.stopPropagation();this.style.borderColor='#3B82F6';});dz.addEventListener('dragleave',function(e){e.preventDefault();e.stopPropagation();this.style.borderColor='#475569';});dz.addEventListener('drop',function(e){e.preventDefault();e.stopPropagation();this.style.borderColor='#475569';var dt=e.dataTransfer;if(!dt.files.length)return;var fi=bricks.app.getWidgetById('upload_form');if(fi&&fi.widgets&&fi.widgets[2]){fi.widgets[2].files=dt.files;fi.widgets[2]._onchange();}});}"
|
||||||
|
},
|
||||||
|
"binds": []
|
||||||
|
},
|
||||||
{
|
{
|
||||||
"widgettype": "Tabular",
|
"widgettype": "Tabular",
|
||||||
|
"id": "attach_tbl",
|
||||||
"options": {
|
"options": {
|
||||||
"css": "card",
|
"css": "card",
|
||||||
"width": "100%",
|
"width": "100%",
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user