index.js 7.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321
  1. import _extends from "@babel/runtime/helpers/esm/extends";
  2. import { createNamespace } from '../utils';
  3. import { pickerProps } from '../picker/shared';
  4. import Picker from '../picker';
  5. var _createNamespace = createNamespace('area'),
  6. createComponent = _createNamespace[0],
  7. bem = _createNamespace[1];
  8. var PLACEHOLDER_CODE = '000000';
  9. function isOverseaCode(code) {
  10. return code[0] === '9';
  11. }
  12. function pickSlots(instance, keys) {
  13. var $slots = instance.$slots,
  14. $scopedSlots = instance.$scopedSlots;
  15. var scopedSlots = {};
  16. keys.forEach(function (key) {
  17. if ($scopedSlots[key]) {
  18. scopedSlots[key] = $scopedSlots[key];
  19. } else if ($slots[key]) {
  20. scopedSlots[key] = function () {
  21. return $slots[key];
  22. };
  23. }
  24. });
  25. return scopedSlots;
  26. }
  27. export default createComponent({
  28. props: _extends({}, pickerProps, {
  29. value: String,
  30. areaList: {
  31. type: Object,
  32. default: function _default() {
  33. return {};
  34. }
  35. },
  36. columnsNum: {
  37. type: [Number, String],
  38. default: 3
  39. },
  40. isOverseaCode: {
  41. type: Function,
  42. default: isOverseaCode
  43. },
  44. columnsPlaceholder: {
  45. type: Array,
  46. default: function _default() {
  47. return [];
  48. }
  49. }
  50. }),
  51. data: function data() {
  52. return {
  53. code: this.value,
  54. columns: [{
  55. values: []
  56. }, {
  57. values: []
  58. }, {
  59. values: []
  60. }]
  61. };
  62. },
  63. computed: {
  64. province: function province() {
  65. return this.areaList.province_list || {};
  66. },
  67. city: function city() {
  68. return this.areaList.city_list || {};
  69. },
  70. county: function county() {
  71. return this.areaList.county_list || {};
  72. },
  73. displayColumns: function displayColumns() {
  74. return this.columns.slice(0, +this.columnsNum);
  75. },
  76. placeholderMap: function placeholderMap() {
  77. return {
  78. province: this.columnsPlaceholder[0] || '',
  79. city: this.columnsPlaceholder[1] || '',
  80. county: this.columnsPlaceholder[2] || ''
  81. };
  82. }
  83. },
  84. watch: {
  85. value: function value(val) {
  86. this.code = val;
  87. this.setValues();
  88. },
  89. areaList: {
  90. deep: true,
  91. handler: 'setValues'
  92. },
  93. columnsNum: function columnsNum() {
  94. var _this = this;
  95. this.$nextTick(function () {
  96. _this.setValues();
  97. });
  98. }
  99. },
  100. mounted: function mounted() {
  101. this.setValues();
  102. },
  103. methods: {
  104. // get list by code
  105. getList: function getList(type, code) {
  106. var result = [];
  107. if (type !== 'province' && !code) {
  108. return result;
  109. }
  110. var list = this[type];
  111. result = Object.keys(list).map(function (listCode) {
  112. return {
  113. code: listCode,
  114. name: list[listCode]
  115. };
  116. });
  117. if (code) {
  118. // oversea code
  119. if (this.isOverseaCode(code) && type === 'city') {
  120. code = '9';
  121. }
  122. result = result.filter(function (item) {
  123. return item.code.indexOf(code) === 0;
  124. });
  125. }
  126. if (this.placeholderMap[type] && result.length) {
  127. // set columns placeholder
  128. var codeFill = '';
  129. if (type === 'city') {
  130. codeFill = PLACEHOLDER_CODE.slice(2, 4);
  131. } else if (type === 'county') {
  132. codeFill = PLACEHOLDER_CODE.slice(4, 6);
  133. }
  134. result.unshift({
  135. code: "" + code + codeFill,
  136. name: this.placeholderMap[type]
  137. });
  138. }
  139. return result;
  140. },
  141. // get index by code
  142. getIndex: function getIndex(type, code) {
  143. var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
  144. var list = this.getList(type, code.slice(0, compareNum - 2)); // oversea code
  145. if (this.isOverseaCode(code) && type === 'province') {
  146. compareNum = 1;
  147. }
  148. code = code.slice(0, compareNum);
  149. for (var i = 0; i < list.length; i++) {
  150. if (list[i].code.slice(0, compareNum) === code) {
  151. return i;
  152. }
  153. }
  154. return 0;
  155. },
  156. // parse output columns data
  157. parseOutputValues: function parseOutputValues(values) {
  158. var _this2 = this;
  159. return values.map(function (value, index) {
  160. // save undefined value
  161. if (!value) return value;
  162. value = JSON.parse(JSON.stringify(value));
  163. if (!value.code || value.name === _this2.columnsPlaceholder[index]) {
  164. value.code = '';
  165. value.name = '';
  166. }
  167. return value;
  168. });
  169. },
  170. onChange: function onChange(picker, values, index) {
  171. this.code = values[index].code;
  172. this.setValues();
  173. var parsedValues = this.parseOutputValues(picker.getValues());
  174. this.$emit('change', picker, parsedValues, index);
  175. },
  176. onConfirm: function onConfirm(values, index) {
  177. values = this.parseOutputValues(values);
  178. this.setValues();
  179. this.$emit('confirm', values, index);
  180. },
  181. getDefaultCode: function getDefaultCode() {
  182. if (this.columnsPlaceholder.length) {
  183. return PLACEHOLDER_CODE;
  184. }
  185. var countyCodes = Object.keys(this.county);
  186. if (countyCodes[0]) {
  187. return countyCodes[0];
  188. }
  189. var cityCodes = Object.keys(this.city);
  190. if (cityCodes[0]) {
  191. return cityCodes[0];
  192. }
  193. return '';
  194. },
  195. setValues: function setValues() {
  196. var code = this.code;
  197. if (!code) {
  198. code = this.getDefaultCode();
  199. }
  200. var picker = this.$refs.picker;
  201. var province = this.getList('province');
  202. var city = this.getList('city', code.slice(0, 2));
  203. if (!picker) {
  204. return;
  205. }
  206. picker.setColumnValues(0, province);
  207. picker.setColumnValues(1, city);
  208. if (city.length && code.slice(2, 4) === '00' && !this.isOverseaCode(code)) {
  209. code = city[0].code;
  210. }
  211. picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
  212. picker.setIndexes([this.getIndex('province', code), this.getIndex('city', code), this.getIndex('county', code)]);
  213. },
  214. getValues: function getValues() {
  215. var picker = this.$refs.picker;
  216. var getValues = picker ? picker.getValues().filter(function (value) {
  217. return !!value;
  218. }) : [];
  219. getValues = this.parseOutputValues(getValues);
  220. return getValues;
  221. },
  222. getArea: function getArea() {
  223. var values = this.getValues();
  224. var area = {
  225. code: '',
  226. country: '',
  227. province: '',
  228. city: '',
  229. county: ''
  230. };
  231. if (!values.length) {
  232. return area;
  233. }
  234. var names = values.map(function (item) {
  235. return item.name;
  236. });
  237. var validValues = values.filter(function (value) {
  238. return !!value.code;
  239. });
  240. area.code = validValues.length ? validValues[validValues.length - 1].code : '';
  241. if (this.isOverseaCode(area.code)) {
  242. area.country = names[1] || '';
  243. area.province = names[2] || '';
  244. } else {
  245. area.province = names[0] || '';
  246. area.city = names[1] || '';
  247. area.county = names[2] || '';
  248. }
  249. return area;
  250. },
  251. // @exposed-api
  252. reset: function reset(code) {
  253. this.code = code || '';
  254. this.setValues();
  255. }
  256. },
  257. render: function render() {
  258. var h = arguments[0];
  259. var on = _extends({}, this.$listeners, {
  260. change: this.onChange,
  261. confirm: this.onConfirm
  262. });
  263. return h(Picker, {
  264. "ref": "picker",
  265. "class": bem(),
  266. "attrs": {
  267. "showToolbar": true,
  268. "valueKey": "name",
  269. "title": this.title,
  270. "columns": this.displayColumns,
  271. "loading": this.loading,
  272. "readonly": this.readonly,
  273. "itemHeight": this.itemHeight,
  274. "swipeDuration": this.swipeDuration,
  275. "visibleItemCount": this.visibleItemCount,
  276. "cancelButtonText": this.cancelButtonText,
  277. "confirmButtonText": this.confirmButtonText
  278. },
  279. "scopedSlots": pickSlots(this, ['title', 'columns-top', 'columns-bottom']),
  280. "on": _extends({}, on)
  281. });
  282. }
  283. });