index.js 5.1 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212
  1. "use strict";
  2. var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
  3. exports.__esModule = true;
  4. exports["default"] = void 0;
  5. var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
  6. var _utils = require("../utils");
  7. var _picker = _interopRequireDefault(require("../picker"));
  8. var _shared = require("../picker/shared");
  9. var _use = (0, _utils.use)('area'),
  10. sfc = _use[0],
  11. bem = _use[1];
  12. var _default2 = sfc({
  13. props: (0, _extends2["default"])({}, _shared.pickerProps, {
  14. value: String,
  15. areaList: {
  16. type: Object,
  17. "default": function _default() {
  18. return {};
  19. }
  20. },
  21. columnsNum: {
  22. type: [String, Number],
  23. "default": 3
  24. }
  25. }),
  26. data: function data() {
  27. return {
  28. code: this.value,
  29. columns: [{
  30. values: []
  31. }, {
  32. values: []
  33. }, {
  34. values: []
  35. }]
  36. };
  37. },
  38. computed: {
  39. province: function province() {
  40. return this.areaList.province_list || {};
  41. },
  42. city: function city() {
  43. return this.areaList.city_list || {};
  44. },
  45. county: function county() {
  46. return this.areaList.county_list || {};
  47. },
  48. displayColumns: function displayColumns() {
  49. return this.columns.slice(0, +this.columnsNum);
  50. }
  51. },
  52. watch: {
  53. value: function value() {
  54. this.code = this.value;
  55. this.setValues();
  56. },
  57. areaList: {
  58. deep: true,
  59. handler: function handler() {
  60. this.setValues();
  61. }
  62. }
  63. },
  64. mounted: function mounted() {
  65. this.setValues();
  66. },
  67. methods: {
  68. // get list by code
  69. getList: function getList(type, code) {
  70. var result = [];
  71. if (type !== 'province' && !code) {
  72. return result;
  73. }
  74. var list = this[type];
  75. result = Object.keys(list).map(function (listCode) {
  76. return {
  77. code: listCode,
  78. name: list[listCode]
  79. };
  80. });
  81. if (code) {
  82. // oversea code
  83. if (code[0] === '9' && type === 'city') {
  84. code = '9';
  85. }
  86. result = result.filter(function (item) {
  87. return item.code.indexOf(code) === 0;
  88. });
  89. }
  90. return result;
  91. },
  92. // get index by code
  93. getIndex: function getIndex(type, code) {
  94. var compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
  95. var list = this.getList(type, code.slice(0, compareNum - 2)); // oversea code
  96. if (code[0] === '9' && type === 'province') {
  97. compareNum = 1;
  98. }
  99. code = code.slice(0, compareNum);
  100. for (var i = 0; i < list.length; i++) {
  101. if (list[i].code.slice(0, compareNum) === code) {
  102. return i;
  103. }
  104. }
  105. return 0;
  106. },
  107. onChange: function onChange(picker, values, index) {
  108. this.code = values[index].code;
  109. this.setValues();
  110. this.$emit('change', picker, picker.getValues(), index);
  111. },
  112. setValues: function setValues() {
  113. var code = this.code || Object.keys(this.county)[0] || '';
  114. var picker = this.$refs.picker;
  115. var province = this.getList('province');
  116. var city = this.getList('city', code.slice(0, 2));
  117. if (!picker) {
  118. return;
  119. }
  120. picker.setColumnValues(0, province);
  121. picker.setColumnValues(1, city);
  122. if (city.length && code.slice(2, 4) === '00') {
  123. code = city[0].code;
  124. }
  125. picker.setColumnValues(2, this.getList('county', code.slice(0, 4)));
  126. picker.setIndexes([this.getIndex('province', code), this.getIndex('city', code), this.getIndex('county', code)]);
  127. },
  128. getValues: function getValues() {
  129. return this.$refs.picker ? this.$refs.picker.getValues().filter(function (value) {
  130. return !!value;
  131. }) : [];
  132. },
  133. getArea: function getArea() {
  134. var values = this.getValues();
  135. var area = {
  136. code: '',
  137. country: '',
  138. province: '',
  139. city: '',
  140. county: ''
  141. };
  142. if (!values.length) {
  143. return area;
  144. }
  145. var names = values.map(function (item) {
  146. return item.name;
  147. });
  148. area.code = values[values.length - 1].code;
  149. if (area.code[0] === '9') {
  150. area.country = names[1] || '';
  151. area.province = names[2] || '';
  152. } else {
  153. area.province = names[0] || '';
  154. area.city = names[1] || '';
  155. area.county = names[2] || '';
  156. }
  157. return area;
  158. },
  159. reset: function reset() {
  160. this.code = '';
  161. this.setValues();
  162. }
  163. },
  164. render: function render(h) {
  165. var on = (0, _extends2["default"])({}, this.$listeners, {
  166. change: this.onChange
  167. });
  168. return h(_picker["default"], {
  169. "ref": "picker",
  170. "class": bem(),
  171. "attrs": {
  172. "showToolbar": true,
  173. "valueKey": "name",
  174. "title": this.title,
  175. "loading": this.loading,
  176. "columns": this.displayColumns,
  177. "itemHeight": this.itemHeight,
  178. "visibleItemCount": this.visibleItemCount,
  179. "cancelButtonText": this.cancelButtonText,
  180. "confirmButtonText": this.confirmButtonText
  181. },
  182. "on": (0, _extends2["default"])({}, on)
  183. });
  184. }
  185. });
  186. exports["default"] = _default2;