AddressEdit.js 11 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315
  1. var __create = Object.create;
  2. var __defProp = Object.defineProperty;
  3. var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
  4. var __getOwnPropNames = Object.getOwnPropertyNames;
  5. var __getProtoOf = Object.getPrototypeOf;
  6. var __hasOwnProp = Object.prototype.hasOwnProperty;
  7. var __export = (target, all) => {
  8. for (var name2 in all)
  9. __defProp(target, name2, { get: all[name2], enumerable: true });
  10. };
  11. var __copyProps = (to, from, except, desc) => {
  12. if (from && typeof from === "object" || typeof from === "function") {
  13. for (let key of __getOwnPropNames(from))
  14. if (!__hasOwnProp.call(to, key) && key !== except)
  15. __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
  16. }
  17. return to;
  18. };
  19. var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
  20. isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
  21. mod
  22. ));
  23. var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
  24. var stdin_exports = {};
  25. __export(stdin_exports, {
  26. addressEditProps: () => addressEditProps,
  27. default: () => stdin_default
  28. });
  29. module.exports = __toCommonJS(stdin_exports);
  30. var import_vue = require("vue");
  31. var import_vue2 = require("vue");
  32. var import_utils = require("../utils");
  33. var import_use_expose = require("../composables/use-expose");
  34. var import_area = require("../area");
  35. var import_cell = require("../cell");
  36. var import_form = require("../form");
  37. var import_field = require("../field");
  38. var import_popup = require("../popup");
  39. var import_toast = require("../toast");
  40. var import_button = require("../button");
  41. var import_switch = require("../switch");
  42. var import_AddressEditDetail = __toESM(require("./AddressEditDetail"));
  43. var import_utils2 = require("../area/utils");
  44. const [name, bem, t] = (0, import_utils.createNamespace)("address-edit");
  45. const DEFAULT_DATA = {
  46. name: "",
  47. tel: "",
  48. city: "",
  49. county: "",
  50. country: "",
  51. province: "",
  52. areaCode: "",
  53. isDefault: false,
  54. addressDetail: ""
  55. };
  56. const addressEditProps = {
  57. areaList: Object,
  58. isSaving: Boolean,
  59. isDeleting: Boolean,
  60. validator: Function,
  61. showArea: import_utils.truthProp,
  62. showDetail: import_utils.truthProp,
  63. showDelete: Boolean,
  64. disableArea: Boolean,
  65. searchResult: Array,
  66. telMaxlength: import_utils.numericProp,
  67. showSetDefault: Boolean,
  68. saveButtonText: String,
  69. areaPlaceholder: String,
  70. deleteButtonText: String,
  71. showSearchResult: Boolean,
  72. detailRows: (0, import_utils.makeNumericProp)(1),
  73. detailMaxlength: (0, import_utils.makeNumericProp)(200),
  74. areaColumnsPlaceholder: (0, import_utils.makeArrayProp)(),
  75. addressInfo: {
  76. type: Object,
  77. default: () => (0, import_utils.extend)({}, DEFAULT_DATA)
  78. },
  79. telValidator: {
  80. type: Function,
  81. default: import_utils.isMobile
  82. }
  83. };
  84. var stdin_default = (0, import_vue2.defineComponent)({
  85. name,
  86. props: addressEditProps,
  87. emits: ["save", "focus", "delete", "clickArea", "changeArea", "changeDetail", "selectSearch", "changeDefault"],
  88. setup(props, {
  89. emit,
  90. slots
  91. }) {
  92. const areaRef = (0, import_vue2.ref)();
  93. const data = (0, import_vue2.reactive)({});
  94. const showAreaPopup = (0, import_vue2.ref)(false);
  95. const detailFocused = (0, import_vue2.ref)(false);
  96. const areaListLoaded = (0, import_vue2.computed)(() => (0, import_utils.isObject)(props.areaList) && Object.keys(props.areaList).length);
  97. const areaText = (0, import_vue2.computed)(() => {
  98. const {
  99. province,
  100. city,
  101. county,
  102. areaCode
  103. } = data;
  104. if (areaCode) {
  105. const arr = [province, city, county];
  106. if (province && province === city) {
  107. arr.splice(1, 1);
  108. }
  109. return arr.filter(Boolean).join("/");
  110. }
  111. return "";
  112. });
  113. const hideBottomFields = (0, import_vue2.computed)(() => {
  114. var _a;
  115. return ((_a = props.searchResult) == null ? void 0 : _a.length) && detailFocused.value;
  116. });
  117. const onFocus = (key) => {
  118. detailFocused.value = key === "addressDetail";
  119. emit("focus", key);
  120. };
  121. const rules = (0, import_vue2.computed)(() => {
  122. const {
  123. validator,
  124. telValidator
  125. } = props;
  126. const makeRule = (name2, emptyMessage) => ({
  127. validator: (value) => {
  128. if (validator) {
  129. const message = validator(name2, value);
  130. if (message) {
  131. return message;
  132. }
  133. }
  134. if (!value) {
  135. return emptyMessage;
  136. }
  137. return true;
  138. }
  139. });
  140. return {
  141. name: [makeRule("name", t("nameEmpty"))],
  142. tel: [makeRule("tel", t("telInvalid")), {
  143. validator: telValidator,
  144. message: t("telInvalid")
  145. }],
  146. areaCode: [makeRule("areaCode", t("areaEmpty"))],
  147. addressDetail: [makeRule("addressDetail", t("addressEmpty"))]
  148. };
  149. });
  150. const onSave = () => emit("save", data);
  151. const onChangeDetail = (val) => {
  152. data.addressDetail = val;
  153. emit("changeDetail", val);
  154. };
  155. const assignAreaText = (options) => {
  156. data.province = options[0].text;
  157. data.city = options[1].text;
  158. data.county = options[2].text;
  159. };
  160. const onAreaConfirm = ({
  161. selectedValues,
  162. selectedOptions
  163. }) => {
  164. if (selectedValues.some((value) => value === import_utils2.AREA_EMPTY_CODE)) {
  165. (0, import_toast.showToast)(t("areaEmpty"));
  166. } else {
  167. showAreaPopup.value = false;
  168. assignAreaText(selectedOptions);
  169. emit("changeArea", selectedOptions);
  170. }
  171. };
  172. const onDelete = () => emit("delete", data);
  173. const setAreaCode = (code) => {
  174. data.areaCode = code || "";
  175. };
  176. const onDetailBlur = () => {
  177. setTimeout(() => {
  178. detailFocused.value = false;
  179. });
  180. };
  181. const setAddressDetail = (value) => {
  182. data.addressDetail = value;
  183. };
  184. const renderSetDefaultCell = () => {
  185. if (props.showSetDefault) {
  186. const slots2 = {
  187. "right-icon": () => (0, import_vue.createVNode)(import_switch.Switch, {
  188. "modelValue": data.isDefault,
  189. "onUpdate:modelValue": ($event) => data.isDefault = $event,
  190. "onChange": (event) => emit("changeDefault", event)
  191. }, null)
  192. };
  193. return (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_cell.Cell, {
  194. "center": true,
  195. "title": t("defaultAddress"),
  196. "class": bem("default")
  197. }, slots2), [[import_vue.vShow, !hideBottomFields.value]]);
  198. }
  199. };
  200. (0, import_use_expose.useExpose)({
  201. setAreaCode,
  202. setAddressDetail
  203. });
  204. (0, import_vue2.watch)(() => props.addressInfo, (value) => {
  205. (0, import_utils.extend)(data, DEFAULT_DATA, value);
  206. (0, import_vue2.nextTick)(() => {
  207. var _a;
  208. const options = (_a = areaRef.value) == null ? void 0 : _a.getSelectedOptions();
  209. if (options && options.every((option) => option && option.value !== import_utils2.AREA_EMPTY_CODE)) {
  210. assignAreaText(options);
  211. }
  212. });
  213. }, {
  214. deep: true,
  215. immediate: true
  216. });
  217. return () => {
  218. const {
  219. disableArea
  220. } = props;
  221. return (0, import_vue.createVNode)(import_form.Form, {
  222. "class": bem(),
  223. "onSubmit": onSave
  224. }, {
  225. default: () => {
  226. var _a;
  227. return [(0, import_vue.createVNode)("div", {
  228. "class": bem("fields")
  229. }, [(0, import_vue.createVNode)(import_field.Field, {
  230. "modelValue": data.name,
  231. "onUpdate:modelValue": ($event) => data.name = $event,
  232. "clearable": true,
  233. "label": t("name"),
  234. "rules": rules.value.name,
  235. "placeholder": t("name"),
  236. "onFocus": () => onFocus("name")
  237. }, null), (0, import_vue.createVNode)(import_field.Field, {
  238. "modelValue": data.tel,
  239. "onUpdate:modelValue": ($event) => data.tel = $event,
  240. "clearable": true,
  241. "type": "tel",
  242. "label": t("tel"),
  243. "rules": rules.value.tel,
  244. "maxlength": props.telMaxlength,
  245. "placeholder": t("tel"),
  246. "onFocus": () => onFocus("tel")
  247. }, null), (0, import_vue.withDirectives)((0, import_vue.createVNode)(import_field.Field, {
  248. "readonly": true,
  249. "label": t("area"),
  250. "is-link": !disableArea,
  251. "modelValue": areaText.value,
  252. "rules": rules.value.areaCode,
  253. "placeholder": props.areaPlaceholder || t("area"),
  254. "onFocus": () => onFocus("areaCode"),
  255. "onClick": () => {
  256. emit("clickArea");
  257. showAreaPopup.value = !disableArea;
  258. }
  259. }, null), [[import_vue.vShow, props.showArea]]), (0, import_vue.createVNode)(import_AddressEditDetail.default, {
  260. "show": props.showDetail,
  261. "rows": props.detailRows,
  262. "rules": rules.value.addressDetail,
  263. "value": data.addressDetail,
  264. "focused": detailFocused.value,
  265. "maxlength": props.detailMaxlength,
  266. "searchResult": props.searchResult,
  267. "showSearchResult": props.showSearchResult,
  268. "onBlur": onDetailBlur,
  269. "onFocus": () => onFocus("addressDetail"),
  270. "onInput": onChangeDetail,
  271. "onSelectSearch": (event) => emit("selectSearch", event)
  272. }, null), (_a = slots.default) == null ? void 0 : _a.call(slots)]), renderSetDefaultCell(), (0, import_vue.withDirectives)((0, import_vue.createVNode)("div", {
  273. "class": bem("buttons")
  274. }, [(0, import_vue.createVNode)(import_button.Button, {
  275. "block": true,
  276. "round": true,
  277. "type": "primary",
  278. "text": props.saveButtonText || t("save"),
  279. "class": bem("button"),
  280. "loading": props.isSaving,
  281. "nativeType": "submit"
  282. }, null), props.showDelete && (0, import_vue.createVNode)(import_button.Button, {
  283. "block": true,
  284. "round": true,
  285. "class": bem("button"),
  286. "loading": props.isDeleting,
  287. "text": props.deleteButtonText || t("delete"),
  288. "onClick": onDelete
  289. }, null)]), [[import_vue.vShow, !hideBottomFields.value]]), (0, import_vue.createVNode)(import_popup.Popup, {
  290. "show": showAreaPopup.value,
  291. "onUpdate:show": ($event) => showAreaPopup.value = $event,
  292. "round": true,
  293. "teleport": "body",
  294. "position": "bottom",
  295. "lazyRender": false
  296. }, {
  297. default: () => [(0, import_vue.createVNode)(import_area.Area, {
  298. "modelValue": data.areaCode,
  299. "onUpdate:modelValue": ($event) => data.areaCode = $event,
  300. "ref": areaRef,
  301. "loading": !areaListLoaded.value,
  302. "areaList": props.areaList,
  303. "columnsPlaceholder": props.areaColumnsPlaceholder,
  304. "onConfirm": onAreaConfirm,
  305. "onCancel": () => {
  306. showAreaPopup.value = false;
  307. }
  308. }, null)]
  309. })];
  310. }
  311. });
  312. };
  313. }
  314. });