index.js 6.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229
  1. import { VantComponent } from '../common/component';
  2. import { pickerProps } from '../picker/shared';
  3. const COLUMNSPLACEHOLDERCODE = '000000';
  4. VantComponent({
  5. classes: ['active-class', 'toolbar-class', 'column-class'],
  6. props: Object.assign(Object.assign({}, pickerProps), {
  7. value: {
  8. type: String,
  9. observer(value) {
  10. this.code = value;
  11. this.setValues();
  12. },
  13. },
  14. areaList: {
  15. type: Object,
  16. value: {},
  17. observer: 'setValues',
  18. },
  19. columnsNum: {
  20. type: null,
  21. value: 3,
  22. observer(value) {
  23. this.setData({
  24. displayColumns: this.data.columns.slice(0, +value),
  25. });
  26. },
  27. },
  28. columnsPlaceholder: {
  29. type: Array,
  30. observer(val) {
  31. this.setData({
  32. typeToColumnsPlaceholder: {
  33. province: val[0] || '',
  34. city: val[1] || '',
  35. county: val[2] || '',
  36. },
  37. });
  38. },
  39. },
  40. }),
  41. data: {
  42. columns: [{ values: [] }, { values: [] }, { values: [] }],
  43. displayColumns: [{ values: [] }, { values: [] }, { values: [] }],
  44. typeToColumnsPlaceholder: {},
  45. },
  46. mounted() {
  47. setTimeout(() => {
  48. this.setValues();
  49. }, 0);
  50. },
  51. methods: {
  52. getPicker() {
  53. if (this.picker == null) {
  54. this.picker = this.selectComponent('.van-area__picker');
  55. }
  56. return this.picker;
  57. },
  58. onCancel(event) {
  59. this.emit('cancel', event.detail);
  60. },
  61. onConfirm(event) {
  62. const { index } = event.detail;
  63. let { value } = event.detail;
  64. value = this.parseOutputValues(value);
  65. this.emit('confirm', { value, index });
  66. },
  67. emit(type, detail) {
  68. detail.values = detail.value;
  69. delete detail.value;
  70. this.$emit(type, detail);
  71. },
  72. // parse output columns data
  73. parseOutputValues(values) {
  74. const { columnsPlaceholder } = this.data;
  75. return values.map((value, index) => {
  76. // save undefined value
  77. if (!value) return value;
  78. value = JSON.parse(JSON.stringify(value));
  79. if (!value.code || value.name === columnsPlaceholder[index]) {
  80. value.code = '';
  81. value.name = '';
  82. }
  83. return value;
  84. });
  85. },
  86. onChange(event) {
  87. const { index, picker, value } = event.detail;
  88. this.code = value[index].code;
  89. this.setValues().then(() => {
  90. this.$emit('change', {
  91. picker,
  92. values: this.parseOutputValues(picker.getValues()),
  93. index,
  94. });
  95. });
  96. },
  97. getConfig(type) {
  98. const { areaList } = this.data;
  99. return (areaList && areaList[`${type}_list`]) || {};
  100. },
  101. getList(type, code) {
  102. const { typeToColumnsPlaceholder } = this.data;
  103. let result = [];
  104. if (type !== 'province' && !code) {
  105. return result;
  106. }
  107. const list = this.getConfig(type);
  108. result = Object.keys(list).map((code) => ({
  109. code,
  110. name: list[code],
  111. }));
  112. if (code) {
  113. // oversea code
  114. if (code[0] === '9' && type === 'city') {
  115. code = '9';
  116. }
  117. result = result.filter((item) => item.code.indexOf(code) === 0);
  118. }
  119. if (typeToColumnsPlaceholder[type] && result.length) {
  120. // set columns placeholder
  121. const codeFill =
  122. type === 'province'
  123. ? ''
  124. : type === 'city'
  125. ? COLUMNSPLACEHOLDERCODE.slice(2, 4)
  126. : COLUMNSPLACEHOLDERCODE.slice(4, 6);
  127. result.unshift({
  128. code: `${code}${codeFill}`,
  129. name: typeToColumnsPlaceholder[type],
  130. });
  131. }
  132. return result;
  133. },
  134. getIndex(type, code) {
  135. let compareNum = type === 'province' ? 2 : type === 'city' ? 4 : 6;
  136. const list = this.getList(type, code.slice(0, compareNum - 2));
  137. // oversea code
  138. if (code[0] === '9' && type === 'province') {
  139. compareNum = 1;
  140. }
  141. code = code.slice(0, compareNum);
  142. for (let i = 0; i < list.length; i++) {
  143. if (list[i].code.slice(0, compareNum) === code) {
  144. return i;
  145. }
  146. }
  147. return 0;
  148. },
  149. setValues() {
  150. const county = this.getConfig('county');
  151. let { code } = this;
  152. if (!code) {
  153. if (this.data.columnsPlaceholder.length) {
  154. code = COLUMNSPLACEHOLDERCODE;
  155. } else if (Object.keys(county)[0]) {
  156. code = Object.keys(county)[0];
  157. } else {
  158. code = '';
  159. }
  160. }
  161. const province = this.getList('province');
  162. const city = this.getList('city', code.slice(0, 2));
  163. const picker = this.getPicker();
  164. if (!picker) {
  165. return;
  166. }
  167. const stack = [];
  168. const indexes = [];
  169. const { columnsNum } = this.data;
  170. if (columnsNum >= 1) {
  171. stack.push(picker.setColumnValues(0, province, false));
  172. indexes.push(this.getIndex('province', code));
  173. }
  174. if (columnsNum >= 2) {
  175. stack.push(picker.setColumnValues(1, city, false));
  176. indexes.push(this.getIndex('city', code));
  177. if (city.length && code.slice(2, 4) === '00') {
  178. [{ code }] = city;
  179. }
  180. }
  181. if (columnsNum === 3) {
  182. stack.push(
  183. picker.setColumnValues(
  184. 2,
  185. this.getList('county', code.slice(0, 4)),
  186. false
  187. )
  188. );
  189. indexes.push(this.getIndex('county', code));
  190. }
  191. return Promise.all(stack)
  192. .catch(() => {})
  193. .then(() => picker.setIndexes(indexes))
  194. .catch(() => {});
  195. },
  196. getValues() {
  197. const picker = this.getPicker();
  198. return picker ? picker.getValues().filter((value) => !!value) : [];
  199. },
  200. getDetail() {
  201. const values = this.getValues();
  202. const area = {
  203. code: '',
  204. country: '',
  205. province: '',
  206. city: '',
  207. county: '',
  208. };
  209. if (!values.length) {
  210. return area;
  211. }
  212. const names = values.map((item) => item.name);
  213. area.code = values[values.length - 1].code;
  214. if (area.code[0] === '9') {
  215. area.country = names[1] || '';
  216. area.province = names[2] || '';
  217. } else {
  218. area.province = names[0] || '';
  219. area.city = names[1] || '';
  220. area.county = names[2] || '';
  221. }
  222. return area;
  223. },
  224. reset(code) {
  225. this.code = code || '';
  226. return this.setValues();
  227. },
  228. },
  229. });