index.js 8.2 KB

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