Area.js 8.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260
  1. var __defProp = Object.defineProperty;
  2. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  3. var __getOwnPropNames = Object.getOwnPropertyNames;
  4. var __hasOwnProp = Object.prototype.hasOwnProperty;
  5. var __export = (target, all) => {
  6. for (var name2 in all)
  7. __defProp(target, name2, { get: all[name2], enumerable: true });
  8. };
  9. var __copyProps = (to, from, except, desc) => {
  10. if (from && typeof from === "object" || typeof from === "function") {
  11. for (let key of __getOwnPropNames(from))
  12. if (!__hasOwnProp.call(to, key) && key !== except)
  13. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  14. }
  15. return to;
  16. };
  17. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  18. var stdin_exports = {};
  19. __export(stdin_exports, {
  20. default: () => stdin_default
  21. });
  22. module.exports = __toCommonJS(stdin_exports);
  23. var import_vue = require("vue");
  24. var import_vue2 = require("vue");
  25. var import_deep_clone = require("../utils/deep-clone");
  26. var import_utils = require("../utils");
  27. var import_Picker = require("../picker/Picker");
  28. var import_use_expose = require("../composables/use-expose");
  29. var import_picker = require("../picker");
  30. const [name, bem] = (0, import_utils.createNamespace)("area");
  31. const EMPTY_CODE = "000000";
  32. const INHERIT_SLOTS = ["title", "cancel", "confirm", "toolbar", "columns-top", "columns-bottom"];
  33. const INHERIT_PROPS = ["title", "loading", "readonly", "itemHeight", "swipeDuration", "visibleItemCount", "cancelButtonText", "confirmButtonText"];
  34. const isOverseaCode = (code) => code[0] === "9";
  35. const areaProps = (0, import_utils.extend)({}, import_Picker.pickerSharedProps, {
  36. value: String,
  37. columnsNum: (0, import_utils.makeNumericProp)(3),
  38. columnsPlaceholder: (0, import_utils.makeArrayProp)(),
  39. areaList: {
  40. type: Object,
  41. default: () => ({})
  42. },
  43. isOverseaCode: {
  44. type: Function,
  45. default: isOverseaCode
  46. }
  47. });
  48. var stdin_default = (0, import_vue2.defineComponent)({
  49. name,
  50. props: areaProps,
  51. emits: ["change", "confirm", "cancel"],
  52. setup(props, {
  53. emit,
  54. slots
  55. }) {
  56. const pickerRef = (0, import_vue2.ref)();
  57. const state = (0, import_vue2.reactive)({
  58. code: props.value,
  59. columns: [{
  60. values: []
  61. }, {
  62. values: []
  63. }, {
  64. values: []
  65. }]
  66. });
  67. const areaList = (0, import_vue2.computed)(() => {
  68. const {
  69. areaList: areaList2
  70. } = props;
  71. return {
  72. province: areaList2.province_list || {},
  73. city: areaList2.city_list || {},
  74. county: areaList2.county_list || {}
  75. };
  76. });
  77. const placeholderMap = (0, import_vue2.computed)(() => {
  78. const {
  79. columnsPlaceholder
  80. } = props;
  81. return {
  82. province: columnsPlaceholder[0] || "",
  83. city: columnsPlaceholder[1] || "",
  84. county: columnsPlaceholder[2] || ""
  85. };
  86. });
  87. const getDefaultCode = () => {
  88. if (props.columnsPlaceholder.length) {
  89. return EMPTY_CODE;
  90. }
  91. const {
  92. county,
  93. city
  94. } = areaList.value;
  95. const countyCodes = Object.keys(county);
  96. if (countyCodes[0]) {
  97. return countyCodes[0];
  98. }
  99. const cityCodes = Object.keys(city);
  100. if (cityCodes[0]) {
  101. return cityCodes[0];
  102. }
  103. return "";
  104. };
  105. const getColumnValues = (type, code) => {
  106. let column = [];
  107. if (type !== "province" && !code) {
  108. return column;
  109. }
  110. const list = areaList.value[type];
  111. column = Object.keys(list).map((listCode) => ({
  112. code: listCode,
  113. name: list[listCode]
  114. }));
  115. if (code) {
  116. if (type === "city" && props.isOverseaCode(code)) {
  117. code = "9";
  118. }
  119. column = column.filter((item) => item.code.indexOf(code) === 0);
  120. }
  121. if (placeholderMap.value[type] && column.length) {
  122. let codeFill = "";
  123. if (type === "city") {
  124. codeFill = EMPTY_CODE.slice(2, 4);
  125. } else if (type === "county") {
  126. codeFill = EMPTY_CODE.slice(4, 6);
  127. }
  128. column.unshift({
  129. code: code + codeFill,
  130. name: placeholderMap.value[type]
  131. });
  132. }
  133. return column;
  134. };
  135. const getIndex = (type, code) => {
  136. let compareNum = code.length;
  137. if (type === "province") {
  138. compareNum = props.isOverseaCode(code) ? 1 : 2;
  139. }
  140. if (type === "city") {
  141. compareNum = 4;
  142. }
  143. code = code.slice(0, compareNum);
  144. const list = getColumnValues(type, compareNum > 2 ? code.slice(0, compareNum - 2) : "");
  145. for (let i = 0; i < list.length; i++) {
  146. if (list[i].code.slice(0, compareNum) === code) {
  147. return i;
  148. }
  149. }
  150. return 0;
  151. };
  152. const setValues = () => {
  153. const picker = pickerRef.value;
  154. if (!picker) {
  155. return;
  156. }
  157. let code = state.code || getDefaultCode();
  158. const province = getColumnValues("province");
  159. const city = getColumnValues("city", code.slice(0, 2));
  160. picker.setColumnValues(0, province);
  161. picker.setColumnValues(1, city);
  162. if (city.length && code.slice(2, 4) === "00" && !props.isOverseaCode(code)) {
  163. [{
  164. code
  165. }] = city;
  166. }
  167. picker.setColumnValues(2, getColumnValues("county", code.slice(0, 4)));
  168. picker.setIndexes([getIndex("province", code), getIndex("city", code), getIndex("county", code)]);
  169. };
  170. const parseValues = (values) => values.map((value, index) => {
  171. if (value) {
  172. value = (0, import_deep_clone.deepClone)(value);
  173. if (!value.code || value.name === props.columnsPlaceholder[index]) {
  174. value.code = "";
  175. value.name = "";
  176. }
  177. }
  178. return value;
  179. });
  180. const getValues = () => {
  181. if (pickerRef.value) {
  182. const values = pickerRef.value.getValues().filter(Boolean);
  183. return parseValues(values);
  184. }
  185. return [];
  186. };
  187. const getArea = () => {
  188. const values = getValues();
  189. const area = {
  190. code: "",
  191. country: "",
  192. province: "",
  193. city: "",
  194. county: ""
  195. };
  196. if (!values.length) {
  197. return area;
  198. }
  199. const names = values.map((item) => item.name);
  200. const validValues = values.filter((value) => value.code);
  201. area.code = validValues.length ? validValues[validValues.length - 1].code : "";
  202. if (props.isOverseaCode(area.code)) {
  203. area.country = names[1] || "";
  204. area.province = names[2] || "";
  205. } else {
  206. area.province = names[0] || "";
  207. area.city = names[1] || "";
  208. area.county = names[2] || "";
  209. }
  210. return area;
  211. };
  212. const reset = (newCode = "") => {
  213. state.code = newCode;
  214. setValues();
  215. };
  216. const onChange = (values, index) => {
  217. state.code = values[index].code;
  218. setValues();
  219. if (pickerRef.value) {
  220. const parsedValues = parseValues(pickerRef.value.getValues());
  221. emit("change", parsedValues, index);
  222. }
  223. };
  224. const onConfirm = (values, index) => {
  225. setValues();
  226. emit("confirm", parseValues(values), index);
  227. };
  228. const onCancel = (...args) => emit("cancel", ...args);
  229. (0, import_vue2.onMounted)(setValues);
  230. (0, import_vue2.watch)(() => props.value, (value) => {
  231. state.code = value;
  232. setValues();
  233. });
  234. (0, import_vue2.watch)(() => props.areaList, setValues, {
  235. deep: true
  236. });
  237. (0, import_vue2.watch)(() => props.columnsNum, () => {
  238. (0, import_vue2.nextTick)(setValues);
  239. });
  240. (0, import_use_expose.useExpose)({
  241. reset,
  242. getArea,
  243. getValues
  244. });
  245. return () => {
  246. const columns = state.columns.slice(0, +props.columnsNum);
  247. return (0, import_vue.createVNode)(import_picker.Picker, (0, import_vue.mergeProps)({
  248. "ref": pickerRef,
  249. "class": bem(),
  250. "columns": columns,
  251. "columnsFieldNames": {
  252. text: "name"
  253. },
  254. "onChange": onChange,
  255. "onCancel": onCancel,
  256. "onConfirm": onConfirm
  257. }, (0, import_utils.pick)(props, INHERIT_PROPS)), (0, import_utils.pick)(slots, INHERIT_SLOTS));
  258. };
  259. }
  260. });