@aliretail/react-materials-components
Version:
281 lines (253 loc) • 8.04 kB
JavaScript
import _CascaderSelect from "@alifd/next/es/cascader-select";
import _Balloon from "@alifd/next/es/balloon";
import _Icon from "@alifd/next/es/icon";
import _inheritsLoose from "@babel/runtime/helpers/inheritsLoose";
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { getAreaByCode } from "./model";
import { mergeRegionCodes } from "./util";
var AreaSelect = /*#__PURE__*/function (_Component) {
_inheritsLoose(AreaSelect, _Component);
function AreaSelect(props) {
var _this;
_this = _Component.call(this, props) || this;
_this.state = {
areaList: []
};
_this.onLoadData = function (data) {
var _this$props = _this.props,
appCode = _this$props.appCode,
areaApi = _this$props.areaApi,
areaApiUrl = _this$props.areaApiUrl;
var code = (data === null || data === void 0 ? void 0 : data.value) || '';
return getAreaByCode(appCode, areaApi, areaApiUrl, code).then(function (result) {
var newList = result.map(function (item) {
return {
label: item.name,
value: item.code,
// 如果有 isLeaf 则判断 isLeaf 为叶子节点
// 否则当 divLevel 为 4 的时候，认为是最后一级、即叶子节点 （兼容之前版本）
isLeaf: typeof item.isLeaf === 'undefined' ? item.divLevel === 4 : item.isLeaf,
tips: item.tips
};
});
if (data) {
data._source.children = newList;
} else {
_this.setState({
areaList: newList
});
}
});
};
_this.handleCityData = function (data, extra) {
var indeterminateData = extra.indeterminateData;
var value = data.value;
var obj = {
id: value,
city: {
value: data.label
},
area: {
value: '全部'
},
street: {
value: '全部'
},
province: {}
};
indeterminateData.length && indeterminateData.forEach(function (t) {
if (t.children && t.children.some(function (item) {
return item.value === value;
})) {
obj.province.value = t.label;
}
});
return obj;
};
_this.handleAreaData = function (data, extra) {
var indeterminateData = extra.indeterminateData;
var areaValue = data.value;
var obj = {
id: areaValue,
area: {
value: data.label
},
street: {
value: '全部'
},
city: {},
province: {}
};
var cityValue = '';
indeterminateData.length && indeterminateData.forEach(function (t) {
if (t.children && t.children.some(function (item) {
return item.value === areaValue;
})) {
obj.city.value = t.label;
cityValue = t.value;
}
});
indeterminateData.length && indeterminateData.forEach(function (t) {
if (t.children && t.children.some(function (item) {
return item.value === cityValue;
})) {
obj.province.value = t.label;
}
});
return obj;
};
_this.handleStreetData = function (data, extra) {
var indeterminateData = extra.indeterminateData;
var streetValue = data.value;
var obj = {
id: streetValue,
area: {},
street: {},
city: {},
province: {}
};
var cityValue = '';
var areaValue = '';
indeterminateData.length && indeterminateData.forEach(function (t) {
if (t.children && t.children.some(function (item) {
return item.value === streetValue;
})) {
obj.area.value = t.label;
areaValue = t.value;
}
});
indeterminateData.length && indeterminateData.forEach(function (t) {
if (t.children && t.children.some(function (item) {
return item.value === areaValue;
})) {
obj.city.value = t.label;
cityValue = t.value;
}
});
indeterminateData.length && indeterminateData.forEach(function (t) {
if (t.children && t.children.some(function (item) {
return item.value === cityValue;
})) {
obj.province.value = t.label;
}
});
obj.street.value = data.label;
return obj;
};
_this.handleData = function (data, extra) {
var list = [];
data.length && data.forEach(function (t) {
var pos = t.pos; // 当前选择数据层级
var posList = pos.split('-');
if (posList.length === 2) {
// 当前选择全省
var obj = {
id: t.value,
province: {
value: t.label
},
city: {
value: '全部'
},
area: {
value: '全部'
},
street: {
value: '全部'
}
};
list.push(obj);
} else if (posList.length === 3) {
// 当前选择为全市
var _obj = _this.handleCityData(t, extra);
list.push(_obj);
} else if (posList.length === 4) {
// 当前选择为全区
var _obj2 = _this.handleAreaData(t, extra);
list.push(_obj2);
} else {
// 当前选择为街道
var _obj3 = _this.handleStreetData(t, extra);
list.push(_obj3);
}
});
return list;
};
_this.handleChange = function (value) {
// const list = this.handleData(data, extra);
// mergeRegionCodes
_this.props.handleChange(mergeRegionCodes(value));
};
_this.onLoadData();
return _this;
}
/**
* 异步加载地域组件的选项
* @param data 选中的值，如果没有的话视为初次渲染
*/
var _proto = AreaSelect.prototype;
_proto.render = function render() {
var initValues = this.props.initValues;
var areaList = this.state.areaList;
var itemRender = function itemRender(item) {
var defaultTrigger = /*#__PURE__*/React.createElement(_Icon, {
type: "prompt",
className: "iconStyle"
});
if (item.tips) {
return /*#__PURE__*/React.createElement("span", {
className: "areaItemStyle"
}, item.label, /*#__PURE__*/React.createElement(_Balloon, {
trigger: defaultTrigger,
closable: false
}, item.tips));
}
return /*#__PURE__*/React.createElement("span", null, item.label);
};
var valueRenderFun = function valueRenderFun(item) {
// 当改项目没有 label 则直接显示该项的 name
if (item !== null && item !== void 0 && item.label) {
return item.label;
} else if (Array.isArray(initValues) && initValues.length) {
var initValuesItem = initValues.find(function (t) {
return t.code === item.value;
});
return initValuesItem ? initValuesItem.name : '';
}
};
return /*#__PURE__*/React.createElement(_CascaderSelect, {
dataSource: areaList,
multiple: true // showSearch // 本期去除搜索
,
valueRender: valueRenderFun,
defaultValue: initValues.map(function (t) {
return t.code;
}),
itemRender: itemRender // 自定义渲染
,
loadData: this.onLoadData // 异步加载
,
onChange: this.handleChange,
placeholder: "\u8BF7\u8F93\u5165\u7701/\u5E02/\u533A\u8FDB\u884C\u641C\u7D22\u6216\u9009\u62E9",
style: {
width: 360
},
listStyle: {
width: '150px'
},
listClassName: "aliretail-cascaderSelectStyle"
});
};
return AreaSelect;
}(Component);
AreaSelect.propTypes = {
handleChange: PropTypes.func // 区域选择事件
};
AreaSelect.defaultProps = {
handleChange: function handleChange() {},
appCode: 'retailforce_oms_pro',
areaApi: 'list_town_cover_info',
initValues: []
};
export default AreaSelect;