lowcode-engine
lowcode-engine copied to clipboard
alibaba
表达式输入框，修改值变成了属性的mock值，并且没有生效
ExpressionSetter，表达式输入框值修改后不生效
表达式输入框的值目前测试发现只在初次切换至该输入框时输入的值有效，二次修改无效，必须重新切换setter
Steps to reproduce the behavior: / 详细复现步骤： 打开代码demo https://lowcode-engine.cn/demo/index.html
- 在state 里面设置两个集合: options1, options2
state: {
"options1": [{label: 'a1', value: 'a1'}, {label: 'a2', value: 'a2'}],
"options2": [{ label: 'b1', value: 'b1' }, { label: 'b2', value: 'b2' }]
}
-
拖一个选择器组件，将选项setter改为表达式输入，先输入
this.state.options1预览，效果正常
-
将选项参数改为 this.state.options2 保存预览，发现效果没有变化
-
刷新编辑器，发现选项值还是 this.state.options1
-
打开Schema页面发现，组件的dataSource属性变成了，options2变到了mock里面
"dataSource": {
"type": "JSExpression",
"value": "this.state.options1",
"mock": {
"type": "JSExpression",
"value": "this.state.options2"
}
}
- 当前解决方案，目前探索到的解决方案就是先切换到 ArraySetter 然后再切换成表达式输入，在重新输入新的表达式，才可以生效
完整Schema
{
"componentName": "Page",
"id": "node_dockcviv8fo1",
"props": {
"ref": "outerView",
"style": {
"height": "100%"
}
},
"fileName": "/",
"dataSource": {
"list": [
{
"type": "fetch",
"isInit": true,
"options": {
"params": {},
"method": "GET",
"isCors": true,
"timeout": 5000,
"headers": {},
"uri": "mock/info.json"
},
"id": "info",
"shouldFetch": {
"type": "JSFunction",
"value": "function() { \n console.log('should fetch.....');\n return true; \n}"
}
}
]
},
"state": {
"text": {
"type": "JSExpression",
"value": "\"outer\""
},
"isShowDialog": {
"type": "JSExpression",
"value": "false"
},
"options1": {
"type": "JSExpression",
"value": "[{\n label: 'a1',\n value: 'a1'\n}, {\n label: 'a2',\n value: 'a2'\n}]"
},
"options2": {
"type": "JSExpression",
"value": "[{\n label: 'b1',\n value: 'b1'\n}, {\n label: 'b2',\n value: 'b2'\n}]"
}
},
"css": "body {\n font-size: 12px;\n}\n\n.button {\n width: 100px;\n color: #ff00ff\n}",
"lifeCycles": {
"componentDidMount": {
"type": "JSFunction",
"value": "function componentDidMount() {\n console.log('did mount');\n}"
},
"componentWillUnmount": {
"type": "JSFunction",
"value": "function componentWillUnmount() {\n console.log('will unmount');\n}"
}
},
"methods": {
"testFunc": {
"type": "JSFunction",
"value": "function testFunc() {\n console.log('test func');\n}"
},
"onClick": {
"type": "JSFunction",
"value": "function onClick() {\n this.setState({\n isShowDialog: true\n });\n}"
},
"closeDialog": {
"type": "JSFunction",
"value": "function closeDialog() {\n this.setState({\n isShowDialog: false\n });\n}"
}
},
"originCode": "class LowcodeComponent extends Component {\n state = {\n \"text\": \"outer\",\n \"isShowDialog\": false,\n \"options1\": [{label: 'a1', value: 'a1'}, {label: 'a2', value: 'a2'}],\n \"options2\": [{ label: 'b1', value: 'b1' }, { label: 'b2', value: 'b2' }],\n }\n componentDidMount() {\n console.log('did mount');\n }\n componentWillUnmount() {\n console.log('will unmount');\n }\n testFunc() {\n console.log('test func');\n }\n onClick() {\n this.setState({\n isShowDialog: true\n })\n }\n closeDialog() {\n this.setState({\n isShowDialog: false\n })\n }\n}",
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextPage",
"id": "node_ockzs2vw431",
"props": {
"headerDivider": true,
"minHeight": "100vh",
"presetNav": true,
"presetAside": true,
"footer": false,
"nav": false,
"aside": false,
"placeholderStyle": {
"gridRowEnd": "span 1",
"gridColumnEnd": "span 12"
},
"headerProps": {
"background": "surface"
},
"header": {
"type": "JSSlot",
"value": [
{
"componentName": "NextPageHeader",
"id": "node_ockzs2vw433",
"props": {
"style": {
"background": "#ffffff",
"padding": ""
}
},
"title": "页面头部",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextRowColContainer",
"id": "node_ockzs2vw434",
"props": {
"rowGap": 20,
"colGap": 20
},
"title": "行列容器",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextRow",
"id": "node_ockzs2vw435",
"props": {},
"title": "行",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextCol",
"id": "node_ockzs2vw436",
"props": {
"colSpan": 1
},
"title": "列",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextP",
"id": "node_ockzvfoetv17",
"props": {
"wrap": false,
"type": "body2",
"verAlign": "middle",
"textSpacing": true,
"align": "left"
},
"docId": "dockzvfoetv",
"title": "段落",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "NextText",
"id": "node_ockzvfoetv18",
"props": {
"type": "h5",
"children": {
"type": "JSExpression",
"value": "this.state.info?.info",
"mock": "标题标题"
},
"mark": false,
"code": false,
"delete": false,
"underline": false,
"strong": false
},
"docId": "dockzvfoetv",
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
}
]
}
]
}
]
}
]
}
],
"title": "header"
},
"isTab": false,
"contentAlignCenter": false,
"contentProps": {
"style": {
"background": "rgba(255,255,255,0)"
}
}
},
"title": "页面",
"isLocked": false,
"condition": true,
"conditionGroup": "",
"children": [
{
"componentName": "Select",
"id": "node_ocl76worgpf",
"props": {
"mode": "single",
"hasArrow": true,
"cacheValue": true,
"placeholder": "",
"defaultValue": "",
"hasClear": false,
"showSearch": false,
"dataSource": {
"type": "JSExpression",
"value": "this.state.options1",
"mock": {
"type": "JSExpression",
"value": "this.state.options2"
}
}
},
"docId": "docl76wonu3",
"title": "",
"isLocked": false,
"condition": true,
"conditionGroup": ""
}
]
}
]
}
