index.js 6.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224
  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. stack.push(picker.setColumnValues(0, province, false));
  169. stack.push(picker.setColumnValues(1, city, false));
  170. if (city.length && code.slice(2, 4) === '00') {
  171. [{ code }] = city;
  172. }
  173. stack.push(
  174. picker.setColumnValues(
  175. 2,
  176. this.getList('county', code.slice(0, 4)),
  177. false
  178. )
  179. );
  180. return Promise.all(stack)
  181. .catch(() => {})
  182. .then(() =>
  183. picker.setIndexes([
  184. this.getIndex('province', code),
  185. this.getIndex('city', code),
  186. this.getIndex('county', code),
  187. ])
  188. )
  189. .catch(() => {});
  190. },
  191. getValues() {
  192. const picker = this.getPicker();
  193. return picker ? picker.getValues().filter((value) => !!value) : [];
  194. },
  195. getDetail() {
  196. const values = this.getValues();
  197. const area = {
  198. code: '',
  199. country: '',
  200. province: '',
  201. city: '',
  202. county: '',
  203. };
  204. if (!values.length) {
  205. return area;
  206. }
  207. const names = values.map((item) => item.name);
  208. area.code = values[values.length - 1].code;
  209. if (area.code[0] === '9') {
  210. area.country = names[1] || '';
  211. area.province = names[2] || '';
  212. } else {
  213. area.province = names[0] || '';
  214. area.city = names[1] || '';
  215. area.county = names[2] || '';
  216. }
  217. return area;
  218. },
  219. reset(code) {
  220. this.code = code || '';
  221. return this.setValues();
  222. },
  223. },
  224. });