Skip to content

W
WebPublic
提交 25ab75e7 authored 作者: 钟是志's avatar 钟是志
浏览文件
操作

echart 组件支持 直接赋值option

上级 5f296890
隐藏空白字符变更
内嵌 并排
正在显示 包含 135 行增加 和 115 行删除
one_stop_public/tableCompon/Split_Index/EchartsDiy/index.js 0 → 100644
浏览文件 @ 25ab75e7
import React, { useMemo } from 'react';
import ReactEcharts from 'echarts-for-react';
export default function EchartsDiy(props){
const { json, uuid, option, value } = props;
const opt = useMemo(() => {
return (value && typeof value === 'object' && Object.keys(value).length) ? value : option;
}, [value, option]);
// console.log(opt);
if(!opt){
return null;
}
return (
<ReactEcharts
style={{ height: json.height || 500 }}
key={uuid}
option={opt}
notMerge={true}
lazyUpdate={true}
theme={'theme_name'}
onEvents={{}}
/>
)
}
one_stop_public/tableCompon/index.jsx
浏览文件 @ 25ab75e7
......@@ -83,6 +83,7 @@ import ButtonDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/Butto
import giveVarcharRules from '@/webPublic/one_stop_public/tableCompon/Split_Index/giveVarcharLength';
import getPopupContainer from '@/webPublic/one_stop_public/tableCompon/Split_Index/getPopupContainer';
import StepDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/StepDiy';
import EchartsDiy from '@/webPublic/one_stop_public/tableCompon/Split_Index/EchartsDiy';
/**
* 日期组件antd3.x有bug 详情见禅道 27152 毕业跟踪调查管理 毕业时间改为年级筛选
......@@ -162,22 +163,24 @@ export default class TableCom extends Component {
const { dispatch } = this.props;
const x = this.props.DataColumn.isShowModal;
x[fk] = true;
this.setState({
modalInit: data,
}, () => {
dispatch({
type: 'DataColumn/showModal',
payload: { isShowModal: x },
callback: () => {
this.setState({
modalTitle: title,
modalCode: fk,
modalProps: modalProps,
});
},
});
})
this.setState(
{
modalInit: data,
},
() => {
dispatch({
type: 'DataColumn/showModal',
payload: { isShowModal: x },
callback: () => {
this.setState({
modalTitle: title,
modalCode: fk,
modalProps: modalProps,
});
},
});
},
);
};
/**
......@@ -312,7 +315,7 @@ export default class TableCom extends Component {
return;
}
if (
!(this.dataFilter.includes(json.comName) || json.comName == 'TableSelect') &&
!(this.dataFilter.includes(json.comName) || json.comName === 'TableSelect') &&
json.isFormulaOnce
) {
return;
......@@ -320,7 +323,7 @@ export default class TableCom extends Component {
if (
!(
this.dataFilter.includes(json.comName) ||
json.comName == 'TableSelect' ||
json.comName === 'TableSelect' ||
(json.formula != null && json.formula != '')
)
) {
......@@ -404,7 +407,7 @@ export default class TableCom extends Component {
}
}
if (this.dataFilter.includes(json.comName) || json.comName == 'TableSelect') {
if (this.dataFilter.includes(json.comName) || json.comName === 'TableSelect') {
const obj2 = {
...obj,
...props.form.getFieldsValue(),
......@@ -713,7 +716,7 @@ export default class TableCom extends Component {
if (callback) {
const data = reqUrls[url].data;
if (json.optionType && json.optionType == 'func') {
if (json.optionType && json.optionType === 'func') {
const res = callback(data);
if (res != null && !(typeof res === 'function')) {
......@@ -727,7 +730,7 @@ export default class TableCom extends Component {
},
);
}
} else if (json.comName == 'Button') {
} else if (json.comName === 'Button') {
try {
callback(data);
} catch (e) {
......@@ -903,7 +906,7 @@ export default class TableCom extends Component {
if (!isChange) {
if (callback) {
const data = sqlKeys[sqlKey].data;
if (json.optionType && json.optionType == 'func') {
if (json.optionType && json.optionType === 'func') {
const res = callback(data);
if (res != null && !(typeof res === 'function')) {
this.setState(
......@@ -916,7 +919,7 @@ export default class TableCom extends Component {
},
);
}
} else if (json.comName == 'Button') {
} else if (json.comName === 'Button') {
try {
callback(data);
} catch (e) {
......@@ -1045,7 +1048,6 @@ export default class TableCom extends Component {
return 'norefeshxxxxxxxxxxxxxxxxxxxx';
};
getObjValues = () => {
const { isEdit, fatherObj, defaultValues, formKey, form, fatherCode } = this.props;
let obj = {};
......@@ -1064,7 +1066,7 @@ export default class TableCom extends Component {
};
}
return obj;
}
};
functionArguments = (column, callback) => {
const base52 = column.base52;
......@@ -1619,18 +1621,12 @@ export default class TableCom extends Component {
}
return <QRCode {...this.state.option} key={uuid} />;
}
if (json.comName == 'Echart') {
return (
<ReactEcharts
style={{ height: json.height || 500 }}
key={uuid}
option={this.state.option || {}}
notMerge={true}
lazyUpdate={true}
theme={'theme_name'}
onEvents={{}}
/>
);
if (json.comName === 'Echart') {
return this.props.form.getFieldDecorator(uuid, {
initialValue: '',
})(
<EchartsDiy json={json} uuid={uuid} option={this.state.option}/>
)
}
if (json.comName === 'Graph') {
return <Neo4jD3Com key={uuid} json={json} option={this.state.option || []} />;
......@@ -2115,9 +2111,9 @@ export default class TableCom extends Component {
if (dataColumn.isNull != null && !dataColumn.isNull) {
required = true;
}
if(Array.isArray(json.vlds)){
for(let item of json.vlds){
if(item.required){
if (Array.isArray(json.vlds)) {
for (let item of json.vlds) {
if (item.required) {
required = true; // 验证里面填了必填 则必填
}
}
......@@ -2590,12 +2586,8 @@ ${obj[dataColumn.base52]}
style={{
marginLeft: 5,
minHeight: get === 'mobile' ? '200px' : 'auto',
width:
get === 'mobile'
? 'auto'
: json.width,
width: get === 'mobile' ? 'auto' : json.width,
height: get === 'mobile' ? '' : json.height,
}}
/>
);
......@@ -3030,35 +3022,35 @@ ${obj[dataColumn.base52]}
defaultValues={defaultValues}
/>
) : /**
<ZdyTable
key={r}
modalInit={modalInit}
hfInstance={hfInstance}
currentFormTitle={
<ZdyTable
key={r}
modalInit={modalInit}
hfInstance={hfInstance}
currentFormTitle={
getCurrentFormTitle ? getCurrentFormTitle(json.childFormKey) : null
}
getCellValue={getCellValue}
formCode={this.props.formCode}
formId={this.props.formId}
isPreview={isPreview}
currentFormKey={json.childFormKey}
formConfig={datas}
get="mobile"
fatherCode={base52}
isEdit={isEdit}
index={r}
obj={objs[r]}
fatherObj={this.props.fatherObj}
init={objs}
isChild={true}
form={form}
mapData={mapData}
sqlData={sqlData}
datas={datasAll}
{...datas}
defaultValues={defaultValues}
/>
* */
getCellValue={getCellValue}
formCode={this.props.formCode}
formId={this.props.formId}
isPreview={isPreview}
currentFormKey={json.childFormKey}
formConfig={datas}
get="mobile"
fatherCode={base52}
isEdit={isEdit}
index={r}
obj={objs[r]}
fatherObj={this.props.fatherObj}
init={objs}
isChild={true}
form={form}
mapData={mapData}
sqlData={sqlData}
datas={datasAll}
{...datas}
defaultValues={defaultValues}
/>
* */
null}
</Tabs.TabPane>
);
......@@ -3175,15 +3167,19 @@ ${obj[dataColumn.base52]}
}
}
const optDiy = Array.isArray(json?.options) ? json.options : Array.isArray(options) ? options : [];
if(dataColumn.base52 === 'KjWXQFIprRc'){
const optDiy = Array.isArray(json?.options)
? json.options
: Array.isArray(options)
? options
: [];
if (dataColumn.base52 === 'KjWXQFIprRc') {
// console.log(json, required, dataColumn, optDiy);
}
cm = getFieldDecorator(dataColumn.base52, {
initialValue: !initValue && otherProps?.mode === 'multiple' ? undefined : initValue,
rules:
Array.isArray(json.vlds) && json.vlds.length > 0
Array.isArray(json.vlds) && json.vlds.length > 0
? json.vlds
: [
{
......@@ -3192,49 +3188,50 @@ ${obj[dataColumn.base52]}
},
],
})(
!optDiy.length ? <Input disabled={true} style={{ width: json.width }}/>:
<Select
allowClear
showSearch
disabled={selectDis || disabled}
placeholder={json.placeholder}
style={{ width: json.width }}
optionFilterProp="children"
getPopupContainer={getPopupContainer(this.props.isDynamic, uuid)}
onFocus={() => {
get === 'mobile' // 移动端取消输入键盘弹出
? setTimeout(() => {
if (document.querySelectorAll(`.ant-select-search__field`).length > 0) {
let ary = [...document.querySelectorAll(`.ant-select-search__field`)];
ary.map(item => {
item.setAttribute('readonly', 'readonly');
// setTimeout(() => {
// ary.map(arr => {
// arr.removeAttribute('readonly');
// })
// });
});
}
})
: null;
}}
filterOption={(input, option) =>
option
? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
: false
}
{...otherProps}
>
{
optDiy.map(r => {
!optDiy.length ? (
<Input disabled={true} style={{ width: json.width }} />
) : (
<Select
allowClear
showSearch
disabled={selectDis || disabled}
placeholder={json.placeholder}
style={{ width: json.width }}
optionFilterProp="children"
getPopupContainer={getPopupContainer(this.props.isDynamic, uuid)}
onFocus={() => {
get === 'mobile' // 移动端取消输入键盘弹出
? setTimeout(() => {
if (document.querySelectorAll(`.ant-select-search__field`).length > 0) {
let ary = [...document.querySelectorAll(`.ant-select-search__field`)];
ary.map(item => {
item.setAttribute('readonly', 'readonly');
// setTimeout(() => {
// ary.map(arr => {
// arr.removeAttribute('readonly');
// })
// });
});
}
})
: null;
}}
filterOption={(input, option) =>
option
? option.props.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
: false
}
{...otherProps}
>
{optDiy.map(r => {
return (
<Option key={r.value} value={r.value}>
{r.label}
</Option>
);
})
}
</Select>,
})}
</Select>
),
);
if (
get === 'mobile' &&
......@@ -3441,13 +3438,12 @@ ${obj[dataColumn.base52]}
json.vlds && json.vlds.length > 0
? json.vlds
: [
{
required: required,
message: '请选择起止时间',
validator: (rule, value, callback) => {
let errors = [];
if(!value || !Array.isArray(value) || value.length !== 2){
if (!value || !Array.isArray(value) || value.length !== 2) {
// 移动端起止时间必须是个数组 且 length = 2
errors.push(new Error('请选择', rule.field));
}
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论