@cainiaofe/cn-ui-charts
Version:
455 lines (454 loc) • 19.4 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
var _window, _window$AliLowCodeEng2;
import React from 'react';
import { CnTabItem, CnAsyncSelect, CnIcon, CnFormItem, CnInput, CnDialog } from '@alife/cn-ui';
import { getJSExpressionPrototype, getLowCodeCoreUtil, getRealResponse, isArrayNotEmpty } from "../../util/util";
import { getDataOriginSetterSnippet } from "../../manager/setter-snippet";
import { __dataSource__, dataOriginDataEasy, getDataEasyDomain, getDataEasyParams, queryDataSetByPage, queryDataSetDetailByIdPath } from "../../util/const";
import { request } from 'cn-request';
import isPlainObject from 'lodash/isPlainObject';
import get from 'lodash/get';
import "./index.scss";
import { getMixedSetterSnippet } from "../statistic-setter";
var _window$AliLowCodeEng = (_window = window) === null || _window === void 0 ? void 0 : (_window$AliLowCodeEng2 = _window.AliLowCodeEngine) === null || _window$AliLowCodeEng2 === void 0 ? void 0 : _window$AliLowCodeEng2.common,
skeletonCabin = _window$AliLowCodeEng.skeletonCabin;
var createSettingFieldView = skeletonCabin.createSettingFieldView;
var ChartServiceSelectSetter = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ChartServiceSelectSetter, _React$Component);
function ChartServiceSelectSetter(props) {
var _this;
_this = _React$Component.call(this, props) || this;
_this.requestConfigField = void 0;
_this.getDataSetDetail = function (value) {
var _ref = value || {},
requestConfig = _ref.requestConfig;
var _ref2 = requestConfig || {},
serviceType = _ref2.serviceType,
guid = _ref2.guid;
if (serviceType === dataOriginDataEasy && guid) {
request({
url: "" + getDataEasyDomain() + queryDataSetDetailByIdPath,
method: 'get',
withCredentials: true,
params: {
guid: guid,
env: getDataEasyParams()
}
}).then(function (res) {
var realRes = getRealResponse(res);
var _ref3 = realRes || {},
data = _ref3.data;
if (isArrayNotEmpty(data === null || data === void 0 ? void 0 : data.returnFields)) {
_this.setState({
allFieldList: data.returnFields
});
}
});
}
};
_this.changeRequestConfigValue = function (newV) {
var _this$props, _this$props$prop, _this$props$prop$getV;
var value = (_this$props = _this.props) === null || _this$props === void 0 ? void 0 : (_this$props$prop = _this$props.prop) === null || _this$props$prop === void 0 ? void 0 : (_this$props$prop$getV = _this$props$prop.getValue) === null || _this$props$prop$getV === void 0 ? void 0 : _this$props$prop$getV.call(_this$props$prop);
var _ref4 = _this.props || {},
onChange = _ref4.onChange;
var _ref5 = value || {},
requestConfig = _ref5.requestConfig;
if (isPlainObject(newV)) {
onChange === null || onChange === void 0 ? void 0 : onChange(_extends({}, value, {
requestConfig: _extends({}, requestConfig, newV)
}));
}
};
_this.getRequestConfigValue = function (key) {
var value = _this.props.value;
var _ref6 = value || {},
requestConfig = _ref6.requestConfig;
return get(requestConfig, key);
};
_this.getContent = function (serviceType) {
var _this$props2 = _this.props,
leftDom = _this$props2.leftDom,
leftDomProps = _this$props2.leftDomProps,
leftDomPropsList = _this$props2.leftDomPropsList;
if (serviceType === dataOriginDataEasy && leftDom) {
var _this$state = _this.state,
allFieldList = _this$state.allFieldList,
draggingField = _this$state.draggingField;
return /*#__PURE__*/React.createElement("div", {
className: "dataeasy-wrap"
}, /*#__PURE__*/React.createElement(leftDom, _extends({}, _this.props, {
draggingField: draggingField,
changeRequestConfigValue: _this.changeRequestConfigValue
}, leftDomProps)), /*#__PURE__*/React.createElement("div", {
className: "dw-item dw-right"
}, /*#__PURE__*/React.createElement("div", {
className: "dw-title"
}, "DataEasy\u6570\u636E\u6E90"), _this.dataOriginDom, _this.requestConfigDom, /*#__PURE__*/React.createElement("div", {
className: "dw-title"
}, "\u5B57\u6BB5\u5217\u8868"), allFieldList === null || allFieldList === void 0 ? void 0 : allFieldList.map(function (item) {
// return <CnMenuButton label={item}/>
return /*#__PURE__*/React.createElement("div", {
onDragOver: function onDragOver(e) {
e.preventDefault();
},
onDragStart: function onDragStart() {
_this.setState({
draggingField: item
});
},
draggable: true
}, item);
})));
} else {
return /*#__PURE__*/React.createElement("div", {
className: "dataeasy-wrap"
}, /*#__PURE__*/React.createElement("div", {
style: {
width: '100%'
}
}, _this.dataOriginDom, _this.requestConfigDom, isArrayNotEmpty(leftDomPropsList) && /*#__PURE__*/React.createElement("div", {
style: {
marginTop: '10px'
}
}, leftDomPropsList.map(function (item) {
var _ref7 = item || {},
fieldName = _ref7.fieldName,
fieldTitle = _ref7.fieldTitle;
return /*#__PURE__*/React.createElement(CnFormItem
// inline
// style={{margin: '10px', marginBottom: '0px'}}
, {
labelCol: {
fixedSpan: 3
},
title: fieldTitle
}, /*#__PURE__*/React.createElement(CnInput, {
value: _this.getRequestConfigValue(fieldName + "[0].fieldName"),
onChange: function onChange(v) {
var _this$getRequestConfi, _this$changeRequestCo;
_this.changeRequestConfigValue((_this$changeRequestCo = {}, _this$changeRequestCo[fieldName] = [_extends({}, (_this$getRequestConfi = _this.getRequestConfigValue(fieldName)) === null || _this$getRequestConfi === void 0 ? void 0 : _this$getRequestConfi[0], {
fieldName: v
})], _this$changeRequestCo));
}
}), /*#__PURE__*/React.createElement(CnIcon, {
onClick: function onClick() {
_this.setState({
visible: true,
currentEditFieldName: fieldName,
currentEditFieldConfig: item
});
},
style: {
marginLeft: '5px'
},
type: 'setting'
}));
}))));
}
};
_this.getFieldDetailDialog = function () {
var _this$state2 = _this.state,
visible = _this$state2.visible,
currentEditFieldName = _this$state2.currentEditFieldName,
currentEditFieldConfig = _this$state2.currentEditFieldConfig;
var realField = _this.getRequestConfigValue(currentEditFieldName + "[0]");
return /*#__PURE__*/React.createElement(CnDialog, {
onClose: function onClose() {
return _this.setState({
visible: false
});
},
onCancel: function onCancel() {
return _this.setState({
visible: false
});
},
onOk: function onOk() {
return _this.setState({
visible: false
});
},
visible: visible,
title: '字段设置面板'
}, /*#__PURE__*/React.createElement("div", {
className: ""
}, (currentEditFieldConfig === null || currentEditFieldConfig === void 0 ? void 0 : currentEditFieldConfig.showAliasName) && /*#__PURE__*/React.createElement(CnFormItem
// inline
// style={{margin: '10px', marginBottom: '0px'}}
, {
labelCol: {
fixedSpan: 3
},
title: '字段别名'
}, /*#__PURE__*/React.createElement(CnInput, {
value: realField === null || realField === void 0 ? void 0 : realField.aliasName,
onChange: function onChange(v) {
if (currentEditFieldName) {
var _this$changeRequestCo2;
_this.changeRequestConfigValue((_this$changeRequestCo2 = {}, _this$changeRequestCo2[currentEditFieldName] = [_extends({}, realField, {
aliasName: v
})], _this$changeRequestCo2));
}
}
}))));
};
var field = _this.props.field;
_this.state = {
allFieldList: [],
draggingField: undefined,
visible: false,
currentEditFieldName: undefined,
currentEditFieldConfig: undefined
};
var ParamSelectSetter = getLowCodeCoreUtil('setterMap.ParamSelectSetter');
_this.requestConfigField = field.createField({
name: 'requestConfig',
title: '查询服务',
display: 'plain',
setter: {
componentName: 'ServiceChoiceSetter',
props: {
mockDataTemplate: {
success: true,
data: [{
label: '选项一',
value: 'first',
children: [{
label: '子选项一',
value: 'sub1'
}]
}, {
label: '选项二',
value: 'second'
}]
},
paramTitleDom: /*#__PURE__*/React.createElement("div", {
className: ""
}, "\u8BF7\u6C42\u53C2\u6570\u914D\u7F6E\uFF1A"),
buttonText: '选择请求API',
params: {
env: 'pre',
pageSize: 999
// serviceType: 'HSF',
},
paramSetter: {
componentName: 'MixedSetter',
props: {
setters: [{
componentName: 'ParamSelectSetter',
props: {
ParamSelectSetterComponent: ParamSelectSetter,
configList: [{
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true
}]
},
title: '选择参数'
}, {
componentName: 'StringSetter',
title: '字符串'
}, getJSExpressionPrototype({
type: 'base'
})]
}
},
resultProcessFuncTemplate: "function(res) {\n // \u9700\u8981\u8FD4\u56DE\u7684\u5982\u4E0B\u7684\u6570\u636E\u7ED3\u6784\n // return {\n // success: true,\n // data: {\n // }\n // }\n return res;\n}",
getExtraServiceDom: function getExtraServiceDom(setterContext) {
var _setterContext$state;
return /*#__PURE__*/React.createElement(CnTabItem, {
title: "DataEasy\u6570\u636E\u670D\u52A1",
key: "dataeasy"
}, /*#__PURE__*/React.createElement("div", {
className: "scc-tab-content"
}, /*#__PURE__*/React.createElement("div", {
className: 'cn-sc-setter-config-wrap',
style: {
display: 'flex'
}
}, /*#__PURE__*/React.createElement("div", {
className: "service-api-list"
}, /*#__PURE__*/React.createElement("a", {
target: '_blank',
style: {
"float": 'right'
},
href: "https://tg.cainiao.test/market/index.htm",
rel: "noreferrer"
}, "DataEasy\u6570\u636E\u670D\u52A1\u5E02\u573A"), /*#__PURE__*/React.createElement("div", {
className: "label"
}, "\u63A5\u53E3\u5217\u8868\uFF1A"), /*#__PURE__*/React.createElement(CnAsyncSelect, {
className: "select-list",
placeholder: "\u8BF7\u9009\u62E9DataEasy\u6570\u636E\u6E90",
hasClear: true,
showSearch: true,
filterLocal: false,
requestConfig: {
// url:'https://mocks.alibaba-inc.com/mock/conelowcode/queryDataSetByPage',
url: "" + getDataEasyDomain() + queryDataSetByPage,
withCredentials: true,
searchFormat: function searchFormat(originalParam) {
return {
currentPage: 1,
pageSize: 20,
keyWord: originalParam === null || originalParam === void 0 ? void 0 : originalParam.key,
env: getDataEasyParams()
};
},
formatResult: function formatResult(res) {
var _res$data;
var result = [];
var tempData = res === null || res === void 0 ? void 0 : (_res$data = res.data) === null || _res$data === void 0 ? void 0 : _res$data.tableData;
if (isArrayNotEmpty(tempData)) {
result = tempData.map(function (item) {
return {
label: (item === null || item === void 0 ? void 0 : item.name) || (item === null || item === void 0 ? void 0 : item.guid),
value: item === null || item === void 0 ? void 0 : item.guid
};
});
}
return result;
}
},
value: setterContext === null || setterContext === void 0 ? void 0 : (_setterContext$state = setterContext.state) === null || _setterContext$state === void 0 ? void 0 : _setterContext$state.selectedDataEasyDs,
style: {
width: '100%'
},
onChange: function onChange(v, m, record) {
setterContext.setState({
selectedDataEasyDs: v
});
}
}), createSettingFieldView(_this.paramsArrayField, _this.paramsArrayField.parent)))));
}
}
}
});
// {
// componentName: 'ParamSelectSetter',
// props:{
// ParamSelectSetterComponent: ParamSelectSetter,
// configList: [
// {
// dataKey: 'config',
// labelKey: 'label',
// valueKey: 'name',
// groupName: '筛选栏',
// relativeDataSourceName: '_bindFilterDataSourceName',
// relativeDataSourceNameKey: '_dataSourceName',
// },
// {
// groupName:'当前表格的的分页信息',
// groupExprName: __extraParam__,
// handleCustomGroup:(extra)=>{
// if(Array.isArray(extra?.children)) {
// extra.children.push({
// label: currentPageLabel,
// value: `${__extraParam__}.currentPage`,
// })
// extra.children.push({
// label: pageSizeLabel,
// value: `${__extraParam__}.pageSize`,
// })
// }
// }
// },
// {
// groupName:'其他数据',
// groupExprName: __dataSource__,
// needSecondParam:true,
// }
// ]
// },
// title: '选择参数',
// }
_this.paramsArrayField = _this.requestConfigField.createField({
name: 'params',
title: '请求参数配置',
className: 'params-list',
setter: {
componentName: 'ArraySetter',
props: {
mode: 'list',
itemSetter: {
componentName: 'ObjectSetter',
initialValue: {},
props: {
config: {
items: [{
name: 'label',
isRequired: true,
title: '参数名',
setter: 'StringSetter'
}, {
name: 'value',
isRequired: true,
title: '参数值',
setter: getMixedSetterSnippet({
setters: [{
componentName: 'ParamSelectSetter',
props: {
configList: [{
dataKey: 'config',
labelKey: 'label',
valueKey: 'name',
groupName: '筛选栏',
relativeDataSourceName: '_bindFilterDataSourceName',
relativeDataSourceNameKey: '_dataSourceName'
}, {
groupName: '其他数据',
groupExprName: __dataSource__,
needSecondParam: true
}]
},
title: '选择参数'
}, {
componentName: 'StringSetter',
title: '字符串'
}]
})
}]
}
}
}
}
}
});
_this.dataOriginField = field.createField(getDataOriginSetterSnippet({
condition: function condition() {
return false;
},
initialValue: 'request',
defaultValue: 'request'
}));
_this.dataOriginDom = createSettingFieldView(_this.dataOriginField, _this.dataOriginField.parent);
_this.requestConfigDom = createSettingFieldView(_this.requestConfigField, _this.requestConfigField.parent);
return _this;
}
var _proto = ChartServiceSelectSetter.prototype;
_proto.componentDidMount = function componentDidMount() {
var _this$props3,
_this$requestConfigFi,
_this2 = this;
this.getDataSetDetail((_this$props3 = this.props) === null || _this$props3 === void 0 ? void 0 : _this$props3.value);
(_this$requestConfigFi = this.requestConfigField) === null || _this$requestConfigFi === void 0 ? void 0 : _this$requestConfigFi.onValueChange(function () {
var _this2$props, _this2$props$prop, _this2$props$prop$get;
// this.forceUpdate()
_this2.getDataSetDetail(_this2 === null || _this2 === void 0 ? void 0 : (_this2$props = _this2.props) === null || _this2$props === void 0 ? void 0 : (_this2$props$prop = _this2$props.prop) === null || _this2$props$prop === void 0 ? void 0 : (_this2$props$prop$get = _this2$props$prop.getValue) === null || _this2$props$prop$get === void 0 ? void 0 : _this2$props$prop$get.call(_this2$props$prop));
});
};
_proto.render = function render() {
var _this$props4, _this$props4$prop, _this$props4$prop$get;
var value = (_this$props4 = this.props) === null || _this$props4 === void 0 ? void 0 : (_this$props4$prop = _this$props4.prop) === null || _this$props4$prop === void 0 ? void 0 : (_this$props4$prop$get = _this$props4$prop.getValue) === null || _this$props4$prop$get === void 0 ? void 0 : _this$props4$prop$get.call(_this$props4$prop);
var _ref8 = value || {},
requestConfig = _ref8.requestConfig;
var _ref9 = requestConfig || {},
serviceType = _ref9.serviceType;
return /*#__PURE__*/React.createElement("div", {
className: "chart-service-select-setter-wrap"
}, this.getContent(serviceType), this.getFieldDetailDialog());
};
return ChartServiceSelectSetter;
}(React.Component);
export { ChartServiceSelectSetter as default };