@aliretail/react-materials-components
Version:
285 lines (253 loc) • 8.87 kB
JavaScript
import _extends from "@babel/runtime/helpers/extends";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React from 'react';
import PropTypes from 'prop-types';
import _ from 'lodash';
import { setup, SchemaForm } from "../FormComponents";
import AreaDialog from "./areaSelectDialog";
import { getAreaByCodeList, getTableDataByCodeList } from "./model";
import OperateBar from "./OperateBar";
setup();
var ServiceArea = /*#__PURE__*/function (_React$Component) {
_inheritsLoose(ServiceArea, _React$Component);
// 即便 ts 声明了 ServiceAreaProps，这里还是要提供 propsTypes，用于 react 报错提示
function ServiceArea(_props) {
var _props$extFetchListPa;
var _this;
_this = _React$Component.call(this, _props) || this;
_this.getExist = function () {
var _this$props = _this.props,
existApi = _this$props.existApi,
appCode = _this$props.appCode,
existApiUrl = _this$props.existApiUrl,
extFetchListParams = _this$props.extFetchListParams;
var _this$state = _this.state,
currentSelectedRegionCode = _this$state.currentSelectedRegionCode,
isAreaChange = _this$state.isAreaChange;
var existCodes = isAreaChange ? currentSelectedRegionCode : extFetchListParams.currentSelectedRegionCode;
getAreaByCodeList(appCode, existApi, existApiUrl, existCodes).then(function (result) {
_this.setState({
initValues: result,
dialogVisible: true
});
});
};
_this.selectArea = function () {
_this.getExist();
};
_this.dialogClose = function () {
_this.setState({
dialogVisible: false
});
};
_this.interResultList = function (currentSelectedRegionCode, props) {
if (props === void 0) {
props = _this.props;
}
var _props2 = props,
tableApi = _props2.tableApi,
appCode = _props2.appCode,
tableApiUrl = _props2.tableApiUrl,
_props2$extFetchListP = _props2.extFetchListParams,
extFetchListParams = _props2$extFetchListP === void 0 ? {} : _props2$extFetchListP;
getTableDataByCodeList(appCode, tableApi, tableApiUrl, _extends({}, extFetchListParams, {
currentSelectedRegionCode: currentSelectedRegionCode
})).then(function (result) {
_this.setState({
dataSource: result
});
});
};
_this.unique = function (arr) {
if (!Array.isArray(arr)) {
console.warn('retailforce material: service area : 115: Deduplication failure, codeList is not array.');
return [];
}
var codeList = [];
for (var i = 0; i < arr.length; i++) {
if (codeList.indexOf(arr[i]) === -1) {
codeList.push(arr[i]);
}
}
return codeList;
};
_this.dialogConfirm = function (codes) {
// const { currentSelectedRegionCode } = this.state;
// 数据处理
// const new_code_list = this.unique(currentSelectedRegionCode.concat(codes)); // [...new Set()]方法出现问题
// this.interResultList(codes); // 调用后端接口返回表格数据
_this.props.onChange(codes);
_this.setState({
dialogVisible: false,
currentSelectedRegionCode: codes,
isAreaChange: true
});
};
_this.renderValue = function (value) {
var data = value.value,
frags = value.frags;
var str = data;
var renderString; // 从 frags 里面获取每个 value 对应的颜色
if (frags) {
frags.forEach(function (item) {
var result = new RegExp("(" + item.value + ")", 'g');
str = str.replace(result, "<span style=\"color: " + item.color + "\">" + item.value + "</span>");
});
renderString = /*#__PURE__*/React.createElement("div", {
dangerouslySetInnerHTML: {
__html: str
}
});
} else {
renderString = data;
}
return renderString;
};
var _value = _props.value;
_this.state = {
dataSource: [],
dialogVisible: false,
currentSelectedRegionCode: ((_props$extFetchListPa = _props.extFetchListParams) === null || _props$extFetchListPa === void 0 ? void 0 : _props$extFetchListPa.currentSelectedRegionCode) || [],
initValues: [],
isAreaChange: false
};
if (Array.isArray(_value) && _value.length) {
_this.interResultList(_this.props.value);
}
return _this;
}
var _proto = ServiceArea.prototype;
_proto.UNSAFE_componentWillReceiveProps = function UNSAFE_componentWillReceiveProps(nextProps) {
// 当 value 更新时从接口中重新获取 dataSource
if (Array.isArray(nextProps.value) && !_.isEqual(nextProps.value, this.props.value)) {
this.interResultList(nextProps.value, nextProps);
}
};
_proto.render = function render() {
var _this2 = this;
var _this$state2 = this.state,
dataSource = _this$state2.dataSource,
dialogVisible = _this$state2.dialogVisible,
initValues = _this$state2.initValues;
var _this$props2 = this.props,
areaApi = _this$props2.areaApi,
appCode = _this$props2.appCode,
areaApiUrl = _this$props2.areaApiUrl;
var buttonGroup = [{
buttonType: 'secondary',
buttonText: false,
btnOnClick: function btnOnClick() {
return _this2.selectArea();
},
buttonName: '选择区域'
}];
var cellProps = function cellProps(rowIndex, colIndex, dataIndex, record) {
// 相同省，行合并
var provinceList = dataSource.filter(function (t) {
return t.province.value === record.province.value;
}); // 相同市，行合并
var cityList = dataSource.filter(function (t) {
return t.city.value === record.city.value && t.province.value === record.province.value;
});
if (colIndex === 0) {
return {
rowSpan: provinceList.length
};
}
if (colIndex === 1) {
return {
rowSpan: cityList.length
};
}
};
return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(SchemaForm, {
components: {
OperateBar: OperateBar
},
effects: function effects() {},
schema: {
type: 'object',
properties: {
table: {
type: 'object',
'x-component': 'TableX',
'x-component-props': {
dataSource: dataSource,
useVirtual: true,
cellProps: cellProps,
hasBorder: true,
columns: [{
dataIndex: 'province',
title: '省/自治区/直辖市/特区',
width: 180,
cell: function cell(value) {
return _this2.renderValue(value);
}
}, {
dataIndex: 'city',
title: '市/盟/自治州',
width: 140,
cell: function cell(value) {
return _this2.renderValue(value);
}
}, {
dataIndex: 'area',
title: '区/县/旗',
width: 140,
cell: function cell(value) {
return _this2.renderValue(value);
}
}, {
dataIndex: 'street',
title: '街道/乡/镇',
// width: 200,
cell: function cell(value) {
return _this2.renderValue(value);
}
}]
},
properties: {
actionBar: {
type: 'object',
properties: {
input: {
'x-component': 'OperateBar',
'x-component-props': {
buttonGroup: [].concat(buttonGroup),
visible: !this.props.readOnly
}
}
}
}
}
}
}
}
}), dialogVisible && /*#__PURE__*/React.createElement(AreaDialog, {
dialogVisible: dialogVisible,
onClose: this.dialogClose,
onOk: this.dialogConfirm,
title: "\u9009\u62E9\u533A\u57DF",
areaApi: areaApi,
appCode: appCode,
areaApiUrl: areaApiUrl,
initValues: initValues
}));
};
return ServiceArea;
}(React.Component);
ServiceArea.propTypes = {
handleChange: PropTypes.func
};
ServiceArea.defaultProps = {
readOnly: false,
appCode: 'retailforce_oms_pro',
areaApi: 'list_town_cover_info',
tableApi: 'render_region_guid',
existApi: 'findRegionByCodes',
areaApiUrl: '',
existApiUrl: '',
tableApiUrl: '',
extFetchListParams: {}
};
export default ServiceArea;