Area.mjs 7.0 KB

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