p96170835
/
amis
1
0
Fork 1
Code Issues Pull Requests Releases Wiki Activity

优化 form 底下的 schemaApi 更新值的逻辑

This commit is contained in:
2betop 2020-08-20 12:04:14 +08:00
parent 794ac5f6bc
commit 828de7e132
6 changed files with 82 additions and 61 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
examples/components/DocSearch.jsx
View File

@ -31,14 +31,14 @@ const FormComponent = makeSchemaRenderer({
export default class DocSearch extends React.Component {
componentDidMount() {
const inputSelector = 'input[name="docsearch"]';
docsearch({
appId: 'S08MJHBHFJ',
apiKey: '5fba814bb773d08b5d2a3f6074f926a5',
indexName: 'gh_pages',
inputSelector,
debug: false
});
// const inputSelector = 'input[name="docsearch"]';
// docsearch({
// appId: 'S08MJHBHFJ',
// apiKey: '5fba814bb773d08b5d2a3f6074f926a5',
// indexName: 'gh_pages',
// inputSelector,
// debug: false
// });
}
render() {

5
examples/index.html
View File

@ -18,10 +18,6 @@
<link rel="stylesheet" href="bootstrap/dist/css/bootstrap.css" />
<link rel="stylesheet" href="animate.css/animate.css" />
<link rel="stylesheet" href="prismjs/themes/prism.css" />
<link
rel="stylesheet"
href="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.css"
/>
<!--DEPENDENCIES_INJECT_PLACEHOLDER-->
<link rel="stylesheet" href="./doc.css" />
<link rel="stylesheet" title="default" href="../scss/themes/default.scss" />
@ -50,7 +46,6 @@
<body>
<div id="root" class="app-wrapper"></div>
<script src="./mod.js"></script>
<script src="https://cdn.jsdelivr.net/npm/docsearch.js@2/dist/cdn/docsearch.min.js"></script>
<script type="text/javascript">
var _hmt = _hmt || [];

84
mock/service/form.js
View File

@ -1,49 +1,49 @@
const predefined = {
tpl1: {
controls: [
{
type: 'text',
label: '动态字段1',
name: 'dy_1',
required: true
},
{
type: 'text',
label: '动态字段2',
name: 'dy_2'
}
]
tpl1: {
data: {
dy_1: '还可以更新值'
},
controls: [
{
type: 'text',
label: '动态字段1',
name: 'dy_1',
required: true
},
tpl2: {
type: 'panel',
title: '不是非得是 controls',
body: '也可以是其他渲染器'
},
{
type: 'text',
label: '动态字段2',
name: 'dy_2'
}
]
},
tpl3: {
type: 'tpl',
tpl: '简单点好。'
},
tpl2: {
type: 'panel',
title: '不是非得是 controls',
body: '也可以是其他渲染器'
},
tpl3: {
type: 'tpl',
tpl: '简单点好。'
}
};
module.exports = function(req, res) {
const tpl = req.query.tpl;
module.exports = function (req, res) {
const tpl = req.query.tpl;
if (predefined[tpl]) {
return res.json({
status: 0,
msg: '',
data: predefined[tpl]
});
}
else {
return res.json({
status: 404,
msg: 'Not Found'
});
}
}
if (predefined[tpl]) {
return res.json({
status: 0,
msg: '',
data: predefined[tpl]
});
} else {
return res.json({
status: 404,
msg: 'Not Found'
});
}
};

18
src/renderers/Form/Service.tsx
View File

@ -71,6 +71,24 @@ export class ServiceRenderer extends BasicService {
return super.afterDataFetch(payload);
}
// schema 接口可能会返回数据，需要把它同步到表单上，否则会没用。
afterSchemaFetch(schema: any) {
const formStore: IFormStore = this.props.formStore;
const onChange = this.props.onChange;
// 有可能有很多层 serivce，这里需要注意。
if (formStore && this.isFormMode()) {
const keys = isObject(schema?.data) ? Object.keys(schema.data) : [];
if (keys.length) {
formStore.setValues(schema.data);
onChange(schema.data[keys[0]], keys[0]);
}
}
return super.afterSchemaFetch(schema);
}
isFormMode() {
const {
store,

19
src/renderers/Service.tsx
View File

@ -48,6 +48,7 @@ export default class Service extends React.Component<ServiceProps> {
this.silentReload = this.silentReload.bind(this);
this.initInterval = this.initInterval.bind(this);
this.afterDataFetch = this.afterDataFetch.bind(this);
this.afterSchemaFetch = this.afterSchemaFetch.bind(this);
}
componentDidMount() {
@ -82,7 +83,7 @@ export default class Service extends React.Component<ServiceProps> {
successMessage: fetchSuccess,
errorMessage: fetchFailed
})
.then(this.initInterval);
.then(this.afterSchemaFetch);
}
componentWillUnmount() {
@ -103,10 +104,12 @@ export default class Service extends React.Component<ServiceProps> {
} = this.props;
if (isEffectiveApi(schemaApi, store.data, initFetchSchema)) {
store.fetchSchema(schemaApi, store.data, {
successMessage: fetchSuccess,
errorMessage: fetchFailed
});
store
.fetchSchema(schemaApi, store.data, {
successMessage: fetchSuccess,
errorMessage: fetchFailed
})
.then(this.afterSchemaFetch);
}
if (isEffectiveApi(api, store.data, initFetch, initFetchOn)) {
@ -123,6 +126,10 @@ export default class Service extends React.Component<ServiceProps> {
this.initInterval(data);
}
afterSchemaFetch(schema: any) {
this.initInterval(schema);
}
initInterval(value: any) {
const {interval, silentPolling, stopAutoRefreshWhen, data} = this.props;
@ -161,7 +168,7 @@ export default class Service extends React.Component<ServiceProps> {
successMessage: fetchSuccess,
errorMessage: fetchFailed
})
.then(this.initInterval);
.then(this.afterSchemaFetch);
}
if (isEffectiveApi(api, store.data)) {

1
src/store/service.ts
View File

@ -407,6 +407,7 @@ export const ServiceStore = iRendererStore
}
self.initializing = false;
return json.data;
} catch (e) {
const root = getRoot(self) as IRendererStore;
if (!isAlive(root) || root.storeType !== 'RendererStore') {