index.js 4.8 KB

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