表单有 modified 属性吗？能否直接获知表单内容是否被修改过。
Opened this issue · 1 comments
zbl400 commented
实现场景：
CRUD 场景下，我想在用户点击 新增/修改弹窗 的取消按钮时，判断用户是否改动过表单内容，如果有改动，则需要用户确认下是否放弃修改内容。
存在的问题：
文档中没有发现有现成的 属性，类似 form.modified 就能判断是否表单内容有变化。
所有询问下，是否有类似属性， 或者怎么样做才是完成这个功能的最佳做法。
"promptPageLeave": true 这个属性好像没有起效。
{
"type": "page",
"title": "增删改查示例",
"remark": "bla bla bla",
"toolbar": [
{
"type": "button",
"actionType": "dialog",
"label": "新增",
"icon": "fa fa-plus pull-left",
"primary": true,
"dialog": {
"title": "新增",
"body": {
"type": "form",
"name": "sample-edit-form",
"api": "post:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample",
"body": [
{
"type": "input-text",
"name": "engine",
"label": "Engine",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "platform",
"label": "Platform(s)",
"required": true
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "input-text",
"name": "grade",
"label": "CSS grade"
}
]
}
},
"id": "u:072df712e961"
}
],
"body": [
{
"type": "crud",
"draggable": true,
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample?waitSeconds=1",
"perPage": 15,
"keepItemSelectionOnPageChange": true,
"maxKeepItemSelectionLength": 11,
"labelTpl": "${id} ${engine}",
"orderBy": "id",
"orderDir": "asc",
"filter": {
"title": "条件搜索",
"submitText": "",
"body": [
{
"type": "input-text",
"name": "keywords",
"placeholder": "通过关键字搜索",
"addOn": {
"label": "搜索",
"type": "submit",
"id": "u:d45649417caf"
},
"id": "u:0c4097ea76c5"
},
{
"type": "plain",
"text": "这里的表单项可以配置多个",
"id": "u:864bbaffcd6a"
}
],
"id": "u:2c5d4d82c668",
"actions": [
{
"type": "submit",
"label": "提交",
"primary": true,
"id": "u:ee03f21c5411"
}
],
"feat": "Insert"
},
"bulkActions": [
{
"label": "批量删除",
"actionType": "ajax",
"api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/${ids|raw}",
"confirmText": "确定要批量删除?",
"id": "u:66479faba0e5"
},
{
"label": "批量修改",
"actionType": "dialog",
"dialog": {
"title": "批量编辑",
"name": "sample-bulk-edit",
"body": {
"type": "form",
"api": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate2",
"body": [
{
"type": "hidden",
"name": "ids"
},
{
"type": "input-text",
"name": "engine",
"label": "Engine"
}
]
}
},
"id": "u:f45df34d99b5"
}
],
"quickSaveApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/bulkUpdate",
"quickSaveItemApi": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
"filterTogglable": true,
"headerToolbar": [
"filter-toggler",
"bulkActions",
{
"type": "tpl",
"tpl": "定制内容示例：当前有 ${count} 条数据。",
"className": "v-middle",
"id": "u:ce39ee970539"
},
{
"type": "link",
"href": "https://www.baidu.com",
"body": "百度一下",
"htmlTarget": "_parent",
"className": "v-middle",
"id": "u:064a9e955381"
},
{
"type": "columns-toggler",
"align": "right"
},
{
"type": "drag-toggler",
"align": "right"
},
{
"type": "pagination",
"align": "right"
}
],
"footerToolbar": [
"statistics",
"switch-per-page",
"pagination"
],
"columns": [
{
"name": "id",
"label": "ID",
"sortable": true,
"type": "text",
"toggled": true,
"remark": "Bla bla Bla",
"id": "u:c35215fd6b55"
},
{
"name": "engine",
"label": "Rendering engine",
"sortable": true,
"searchable": true,
"popOver": {
"body": "Popover 内容：${platform}",
"trigger": "hover"
},
"popOverEnableOn": "this.id === 1",
"type": "text",
"toggled": true,
"id": "u:a1ef7351f5d1"
},
{
"name": "browser",
"label": "Browser",
"sortable": true,
"type": "text",
"toggled": false,
"id": "u:f999944d12ce"
},
{
"name": "platform",
"label": "Platform(s)",
"popOver": {
"body": "Popover 内容：${platform}"
},
"sortable": true,
"type": "text",
"toggled": true,
"id": "u:d714b210e801"
},
{
"name": "version",
"label": "Engine version",
"quickEdit": true,
"type": "text",
"toggled": true,
"filterable": {
"options": [
{
"label": "4",
"value": "4"
},
{
"label": "5",
"value": "5"
},
{
"label": "6",
"value": "6"
}
]
},
"classNameExpr": "<%= data.version < 5 ? 'bg-danger' : '' %>",
"id": "u:59111e6b4392"
},
{
"type": "text",
"name": "grade",
"label": "CSS grade",
"quickEdit": {
"saveImmediately": true,
"mode": "inline",
"type": "select",
"options": [
"A",
"B",
"C",
"D",
"X"
],
"id": "u:49e5f38d7a5c"
},
"id": "u:1cd326743e28"
},
{
"type": "operation",
"label": "操作",
"width": 100,
"buttons": [
{
"type": "button",
"icon": "fa fa-eye",
"actionType": "dialog",
"tooltip": "查看",
"dialog": {
"title": "查看",
"body": {
"type": "form",
"body": [
{
"type": "static",
"name": "engine",
"label": "Engine"
},
{
"type": "divider"
},
{
"type": "static",
"name": "browser",
"label": "Browser"
},
{
"type": "divider"
},
{
"type": "static",
"name": "platform",
"label": "Platform(s)"
},
{
"type": "divider"
},
{
"type": "static",
"name": "version",
"label": "Engine version"
},
{
"type": "divider"
},
{
"type": "static",
"name": "grade",
"label": "CSS grade"
},
{
"type": "divider"
},
{
"type": "html",
"html": "<p>添加其他 <span>Html 片段</span> 需要支持变量替换（todo）.</p>"
}
]
}
},
"id": "u:63dc19311106"
},
{
"type": "button",
"icon": "fa fa-pencil",
"tooltip": "编辑",
"actionType": "drawer",
"drawer": {
"position": "left",
"size": "lg",
"title": "编辑",
"body": [
{
"type": "form",
"name": "sample-edit-form",
"data": {
"env": "test"
},
"api": {
"method": "post",
"url": "https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
"messages": {
"success": "成功了-${env}"
}
},
"body": [
{
"type": "input-text",
"name": "engine",
"label": "Engine",
"required": true,
"id": "u:5d17ecd5a270"
},
{
"type": "divider",
"id": "u:33d231d93965"
},
{
"type": "input-text",
"name": "browser",
"label": "Browser",
"required": true,
"id": "u:5b0b33fb6fed"
},
{
"type": "divider",
"id": "u:e1c37f690a2e"
},
{
"type": "input-text",
"name": "platform",
"label": "Platform(s)",
"required": true,
"id": "u:2b6241b76244"
},
{
"type": "divider",
"id": "u:7487e835f8df"
},
{
"type": "input-text",
"name": "version",
"label": "Engine version",
"id": "u:b1ad5c1c6926"
},
{
"type": "divider",
"id": "u:2611e34c0f9f"
},
{
"type": "select",
"name": "grade",
"label": "CSS grade",
"options": [
"A",
"B",
"C",
"D",
"X"
],
"id": "u:6a53e2b376d0"
}
],
"id": "u:1263b2782b1b",
"actions": [
{
"type": "submit",
"label": "提交",
"primary": true
}
],
"feat": "Insert",
"promptPageLeave": true
}
],
"id": "u:50b64023ba8d",
"promptPageLeave": true
},
"id": "u:16ecc3b5a020"
},
{
"type": "button",
"icon": "fa fa-times text-danger",
"actionType": "ajax",
"tooltip": "删除",
"confirmText": "您确认要删除?",
"api": "delete:https://3xsw4ap8wah59.cfc-execute.bj.baidubce.com/api/amis-mock/sample/$id",
"id": "u:bca3a7edbafe"
}
],
"toggled": true,
"id": "u:3a7fb97aee38"
}
],
"id": "u:90257cc3f531"
}
],
"id": "u:ed7b441ef1dd"
}
github-actions commented
👍 Thanks for this!
🏷 I have applied any labels matching special text in your issue.
Please review the labels and make any necessary changes.