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 { export default class DocSearch extends React.Component {
componentDidMount() { componentDidMount() {
const inputSelector = 'input[name="docsearch"]'; // const inputSelector = 'input[name="docsearch"]';
docsearch({ // docsearch({
appId: 'S08MJHBHFJ', // appId: 'S08MJHBHFJ',
apiKey: '5fba814bb773d08b5d2a3f6074f926a5', // apiKey: '5fba814bb773d08b5d2a3f6074f926a5',
indexName: 'gh_pages', // indexName: 'gh_pages',
inputSelector, // inputSelector,
debug: false // debug: false
}); // });
} }
render() { render() {

5
examples/index.html
View File

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

12
mock/service/form.js
View File

@ -1,6 +1,8 @@
const predefined = { const predefined = {
tpl1: { tpl1: {
data: {
dy_1: '还可以更新值'
},
controls: [ controls: [
{ {
type: 'text', type: 'text',
@ -26,7 +28,7 @@ const predefined = {
tpl3: { tpl3: {
type: 'tpl', type: 'tpl',
tpl: '简单点好。' tpl: '简单点好。'
}, }
}; };
module.exports = function (req, res) { module.exports = function (req, res) {
@ -38,12 +40,10 @@ module.exports = function(req, res) {
msg: '', msg: '',
data: predefined[tpl] data: predefined[tpl]
}); });
} } else {
else {
return res.json({ return res.json({
status: 404, status: 404,
msg: 'Not Found' msg: 'Not Found'
}); });
} }
} };

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

@ -71,6 +71,24 @@ export class ServiceRenderer extends BasicService {
return super.afterDataFetch(payload); 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() { isFormMode() {
const { const {
store, store,

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

1
src/store/service.ts
View File

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