mirror of
https://github.com/smartxworks/sunmao-ui.git
synced 2025-02-11 17:37:40 +08:00
add dialog in table
This commit is contained in:
Bowen Tan
parent
4a8ae01ab5
commit
6f10569d92
@ -246,7 +246,7 @@
|
||||
name: 'openDialog',
|
||||
parameters: {
|
||||
title: '编辑信息',
|
||||
}
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -306,7 +306,7 @@
|
||||
name: 'openDialog',
|
||||
parameters: {
|
||||
title: '删除信息',
|
||||
}
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -319,12 +319,13 @@
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'deleteContent',
|
||||
value: '是否确认删除『{{ $listItem.name }}: {{ $listItem.email }}』',
|
||||
value:
|
||||
'是否确认删除『{{ $listItem.name }}: {{ $listItem.email }}』',
|
||||
},
|
||||
},
|
||||
wait: {
|
||||
type: 'delay',
|
||||
time: 1
|
||||
time: 1,
|
||||
},
|
||||
disabled: 'false',
|
||||
},
|
||||
@ -364,11 +365,11 @@
|
||||
title: 'This is a dialog',
|
||||
confirmButton: {
|
||||
text: 'save',
|
||||
colorScheme: 'purple'
|
||||
colorScheme: 'purple',
|
||||
},
|
||||
cancelButton: {
|
||||
text: 'cancel'
|
||||
}
|
||||
text: 'cancel',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -394,7 +395,7 @@
|
||||
event: 'confirmDialog',
|
||||
componentId: 'editDialog',
|
||||
method: {
|
||||
name: 'confirmDialog'
|
||||
name: 'confirmDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -434,7 +435,7 @@
|
||||
parameters: {
|
||||
key: 'nameInputInitialValue',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -447,7 +448,7 @@
|
||||
parameters: {
|
||||
key: 'emailInputInitialValue',
|
||||
value: '',
|
||||
}
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -457,13 +458,13 @@
|
||||
event: 'cancelDialog',
|
||||
componentId: 'editDialog',
|
||||
method: {
|
||||
name: 'cancelDialog'
|
||||
name: 'cancelDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -476,7 +477,7 @@
|
||||
type: 'addon',
|
||||
children: '姓名',
|
||||
},
|
||||
initialValue: '{{ root.nameInputInitialValue }}'
|
||||
initialValue: '{{ root.nameInputInitialValue }}',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -499,7 +500,7 @@
|
||||
type: 'addon',
|
||||
children: '邮箱',
|
||||
},
|
||||
initialValue: '{{ root.emailInputInitialValue }}'
|
||||
initialValue: '{{ root.emailInputInitialValue }}',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -520,11 +521,11 @@
|
||||
properties: {
|
||||
title: 'This is a dialog',
|
||||
confirmButton: {
|
||||
text: '确定'
|
||||
text: '确定',
|
||||
},
|
||||
cancelButton: {
|
||||
text: '取消'
|
||||
}
|
||||
text: '取消',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -557,7 +558,7 @@
|
||||
event: 'confirmDialog',
|
||||
componentId: 'deleteDialog',
|
||||
method: {
|
||||
name: 'confirmDialog'
|
||||
name: 'confirmDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -581,14 +582,14 @@
|
||||
event: 'cancelDialog',
|
||||
componentId: 'deleteDialog',
|
||||
method: {
|
||||
name: 'cancelDialog'
|
||||
name: 'cancelDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
]
|
||||
}
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
// delete content component
|
||||
@ -638,6 +639,9 @@
|
||||
componentId: 'createDialog',
|
||||
method: {
|
||||
name: 'openDialog',
|
||||
parameters: {
|
||||
title: '编辑信息',
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -664,11 +668,11 @@
|
||||
title: 'This is a dialog',
|
||||
confirmButton: {
|
||||
text: 'save',
|
||||
colorScheme: 'purple'
|
||||
colorScheme: 'purple',
|
||||
},
|
||||
cancelButton: {
|
||||
text: 'cancel'
|
||||
}
|
||||
text: 'cancel',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -694,7 +698,7 @@
|
||||
event: 'confirmDialog',
|
||||
componentId: 'createDialog',
|
||||
method: {
|
||||
name: 'confirmDialog'
|
||||
name: 'confirmDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -729,13 +733,13 @@
|
||||
event: 'cancelDialog',
|
||||
componentId: 'createDialog',
|
||||
method: {
|
||||
name: 'cancelDialog'
|
||||
name: 'cancelDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
]
|
||||
}
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
@ -748,7 +752,7 @@
|
||||
type: 'addon',
|
||||
children: '姓名',
|
||||
},
|
||||
initialValue: ''
|
||||
initialValue: '',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
@ -771,7 +775,7 @@
|
||||
type: 'addon',
|
||||
children: '邮箱',
|
||||
},
|
||||
initialValue: ''
|
||||
initialValue: '',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
|
||||
@ -9,34 +9,31 @@
|
||||
<div id="root"></div>
|
||||
<script type="module">
|
||||
import renderApp from '../../src/main.tsx';
|
||||
|
||||
const refresh = [
|
||||
const listdata = [
|
||||
{
|
||||
componentId: 'nameInput',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
parameters: {
|
||||
value: ``,
|
||||
},
|
||||
},
|
||||
id: 1,
|
||||
name: '马云',
|
||||
email: 'jack.ma@deck.com',
|
||||
},
|
||||
{
|
||||
componentId: 'emailInput',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
parameters: {
|
||||
value: ``,
|
||||
},
|
||||
},
|
||||
id: 2,
|
||||
name: '马化腾',
|
||||
email: 'pony.ma@conversation.com',
|
||||
},
|
||||
{
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'triggerFetch',
|
||||
parameters: 'getCustomersQuery',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
id: 3,
|
||||
name: '李彦宏',
|
||||
email: 'robin.li@response.com',
|
||||
},
|
||||
{
|
||||
id: 4,
|
||||
name: '张一鸣',
|
||||
email: 'yiming.zhang@example.com',
|
||||
},
|
||||
{
|
||||
id: 5,
|
||||
name: '王兴',
|
||||
email: 'xing.wang@widget.org',
|
||||
},
|
||||
];
|
||||
|
||||
@ -64,16 +61,7 @@
|
||||
type: 'core/v1/arrayState',
|
||||
properties: {
|
||||
key: 'listData',
|
||||
initialValue: [],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/fetch',
|
||||
properties: {
|
||||
name: 'getCustomersQuery',
|
||||
url: 'https://61373521eac1410017c18209.mockapi.io/customers',
|
||||
method: 'get',
|
||||
headers: [],
|
||||
initialValue: listdata,
|
||||
},
|
||||
},
|
||||
],
|
||||
@ -103,8 +91,7 @@
|
||||
id: 'list',
|
||||
type: 'chakra_ui/v1/list',
|
||||
properties: {
|
||||
listData:
|
||||
'{{ root.getCustomersQuery ? root.getCustomersQuery.data : [] }}',
|
||||
listData: '{{ root.listData }}',
|
||||
template: [
|
||||
{
|
||||
id: 'listItemTemplate-{{$listItem.id}}',
|
||||
@ -235,16 +222,6 @@
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/fetch',
|
||||
properties: {
|
||||
name: 'deleteUserQuery',
|
||||
url: 'https://61373521eac1410017c18209.mockapi.io/customers/{{ $listItem.id }}',
|
||||
method: 'delete',
|
||||
lazy: true,
|
||||
onComplete: refresh,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
parsedType: {
|
||||
@ -255,10 +232,14 @@
|
||||
events: [
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'listItemDelete-{{$listItem.id}}',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'triggerFetch',
|
||||
parameters: 'deleteUserQuery',
|
||||
name: 'deleteItemById',
|
||||
parameters: {
|
||||
key: 'listData',
|
||||
itemIdKey: 'id',
|
||||
itemId: '{{ $listItem.id }}',
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -343,23 +324,6 @@
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/fetch',
|
||||
properties: {
|
||||
name: 'createUserQuery',
|
||||
url: 'https://61373521eac1410017c18209.mockapi.io/customers',
|
||||
method: 'post',
|
||||
headers: [
|
||||
{ key: 'Content-Type', value: 'application/json' },
|
||||
],
|
||||
body: {
|
||||
name: '{{ nameInput.value }}',
|
||||
email: '{{ emailInput.value }}',
|
||||
},
|
||||
lazy: true,
|
||||
onComplete: refresh,
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
parsedType: {
|
||||
@ -370,10 +334,22 @@
|
||||
events: [
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'addButton',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'triggerFetch',
|
||||
parameters: 'createUserQuery',
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'listData',
|
||||
value: `{{
|
||||
(function() {
|
||||
let list = root.listData || []
|
||||
return list.concat({
|
||||
id: Date.now(),
|
||||
name: nameInput.value,
|
||||
email: emailInput.value
|
||||
})
|
||||
})()
|
||||
}}`,
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
@ -409,35 +385,6 @@
|
||||
initialValue: '',
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/fetch',
|
||||
properties: {
|
||||
name: 'updateUserQuery',
|
||||
url: 'https://61373521eac1410017c18209.mockapi.io/customers/{{saveButton.editingId}}',
|
||||
method: 'put',
|
||||
headers: [
|
||||
{ key: 'Content-Type', value: 'application/json' },
|
||||
],
|
||||
body: {
|
||||
name: '{{ nameInput.value }}',
|
||||
email: '{{ emailInput.value }}',
|
||||
},
|
||||
lazy: true,
|
||||
onComplete: [
|
||||
...refresh,
|
||||
{
|
||||
componentId: 'saveButton',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'editingId',
|
||||
value: '-1',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
parsedType: {
|
||||
@ -446,12 +393,63 @@
|
||||
},
|
||||
properties: {
|
||||
events: [
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'listData',
|
||||
value: `{{
|
||||
(function() {
|
||||
const list = [...root.listData || []]
|
||||
let index = list.findIndex((item) => item.id == saveButton.editingId)
|
||||
list[index] = {
|
||||
...list[index],
|
||||
name: nameInput.value,
|
||||
email: emailInput.value
|
||||
}
|
||||
return list
|
||||
})()
|
||||
}}`,
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'saveButton',
|
||||
method: {
|
||||
name: 'triggerFetch',
|
||||
parameters: 'updateUserQuery',
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'editingId',
|
||||
value: '-1',
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'nameInput',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
parameters: {
|
||||
value: ``,
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
event: 'click',
|
||||
componentId: 'emailInput',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
parameters: {
|
||||
value: ``,
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
|
||||
@ -87,6 +87,26 @@
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'nameInputInitialValue',
|
||||
value: '',
|
||||
},
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
{
|
||||
componentId: 'editDialog',
|
||||
method: {
|
||||
name: 'cancelDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
@ -96,7 +116,15 @@
|
||||
id: 'root',
|
||||
type: 'chakra_ui/v1/root',
|
||||
properties: {},
|
||||
traits: [],
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/state',
|
||||
properties: {
|
||||
key: 'nameInputInitialValue',
|
||||
initialValue: '',
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'table',
|
||||
@ -164,10 +192,20 @@
|
||||
text: 'Edit',
|
||||
events: [
|
||||
{
|
||||
componentId: 'nameInput',
|
||||
componentId: 'editDialog',
|
||||
method: {
|
||||
name: 'setInputValue',
|
||||
name: 'openDialog',
|
||||
parameters: {
|
||||
title: '编辑信息',
|
||||
},
|
||||
},
|
||||
},
|
||||
{
|
||||
componentId: 'root',
|
||||
method: {
|
||||
name: 'setValue',
|
||||
parameters: {
|
||||
key: 'nameInputInitialValue',
|
||||
value: '{{table.selectedItem.name}}',
|
||||
},
|
||||
},
|
||||
@ -189,28 +227,6 @@
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'nameInput',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
left: {
|
||||
type: 'addon',
|
||||
children: '姓名',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
|
||||
{
|
||||
id: 'selectedText',
|
||||
type: 'core/v1/text',
|
||||
@ -233,21 +249,39 @@
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'saveButton',
|
||||
type: 'chakra_ui/v1/button',
|
||||
id: 'editDialog',
|
||||
type: 'chakra_ui/v1/dialog',
|
||||
properties: {
|
||||
text: {
|
||||
raw: '保存',
|
||||
format: 'plain',
|
||||
title: 'This is a dialog',
|
||||
confirmButton: {
|
||||
text: 'save',
|
||||
colorScheme: 'purple',
|
||||
},
|
||||
cancelButton: {
|
||||
text: 'cancel',
|
||||
},
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
},
|
||||
},
|
||||
},
|
||||
// dialog events
|
||||
{
|
||||
type: 'core/v1/event',
|
||||
parsedType: {
|
||||
version: 'core/v1',
|
||||
name: 'event',
|
||||
},
|
||||
properties: {
|
||||
events: [
|
||||
{
|
||||
event: 'click',
|
||||
event: 'confirmDialog',
|
||||
componentId: 'updateUser',
|
||||
method: {
|
||||
name: 'triggerFetch',
|
||||
@ -256,15 +290,38 @@
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
// when cancel dialog
|
||||
{
|
||||
event: 'cancelDialog',
|
||||
componentId: 'editDialog',
|
||||
method: {
|
||||
name: 'cancelDialog',
|
||||
},
|
||||
wait: {},
|
||||
disabled: 'false',
|
||||
},
|
||||
],
|
||||
},
|
||||
},
|
||||
],
|
||||
},
|
||||
{
|
||||
id: 'nameInput',
|
||||
type: 'chakra_ui/v1/input',
|
||||
properties: {
|
||||
left: {
|
||||
type: 'addon',
|
||||
children: '姓名',
|
||||
},
|
||||
initialValue: '{{ root.nameInputInitialValue }}',
|
||||
},
|
||||
traits: [
|
||||
{
|
||||
type: 'core/v1/slot',
|
||||
properties: {
|
||||
container: {
|
||||
id: 'root',
|
||||
slot: 'root',
|
||||
id: 'editDialog',
|
||||
slot: 'content',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
||||
@ -9,10 +9,10 @@ import {
|
||||
AlertDialogHeader,
|
||||
AlertDialogOverlay,
|
||||
Button,
|
||||
} from "@chakra-ui/react";
|
||||
import { Static, Type } from "@sinclair/typebox";
|
||||
import Slot from "../_internal/Slot";
|
||||
import { ColorSchemePropertySchema } from "./Types/ColorScheme";
|
||||
} from '@chakra-ui/react';
|
||||
import { Static, Type } from '@sinclair/typebox';
|
||||
import Slot from '../_internal/Slot';
|
||||
import { ColorSchemePropertySchema } from './Types/ColorScheme';
|
||||
|
||||
const TitlePropertySchema = Type.Optional(Type.String());
|
||||
|
||||
|
||||
@ -81,10 +81,9 @@ export const TableImpl: ComponentImplementation<{
|
||||
}
|
||||
setSelectedItems(newSelectedItems);
|
||||
mergeState({ selectedItems: newSelectedItems });
|
||||
} else {
|
||||
setSelectedItem(item);
|
||||
mergeState({ selectedItem: item });
|
||||
}
|
||||
setSelectedItem(item);
|
||||
mergeState({ selectedItem: item });
|
||||
}
|
||||
|
||||
return (
|
||||
|
||||
Loading…
Reference in New Issue
Block a user