index.js 4.8 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210
  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 _mobile = require("../utils/validate/mobile");
  8. var _cell = _interopRequireDefault(require("../cell"));
  9. var _field = _interopRequireDefault(require("../field"));
  10. var _button = _interopRequireDefault(require("../button"));
  11. var _dialog = _interopRequireDefault(require("../dialog"));
  12. var _switch = _interopRequireDefault(require("../switch"));
  13. // Utils
  14. // Components
  15. var _createNamespace = (0, _utils.createNamespace)('contact-edit'),
  16. createComponent = _createNamespace[0],
  17. bem = _createNamespace[1],
  18. t = _createNamespace[2];
  19. var defaultContact = {
  20. tel: '',
  21. name: ''
  22. };
  23. var _default2 = createComponent({
  24. props: {
  25. isEdit: Boolean,
  26. isSaving: Boolean,
  27. isDeleting: Boolean,
  28. showSetDefault: Boolean,
  29. setDefaultLabel: String,
  30. contactInfo: {
  31. type: Object,
  32. default: function _default() {
  33. return (0, _extends2.default)({}, defaultContact);
  34. }
  35. },
  36. telValidator: {
  37. type: Function,
  38. default: _mobile.isMobile
  39. }
  40. },
  41. data: function data() {
  42. return {
  43. data: (0, _extends2.default)({}, defaultContact, this.contactInfo),
  44. errorInfo: {
  45. name: '',
  46. tel: ''
  47. }
  48. };
  49. },
  50. watch: {
  51. contactInfo: function contactInfo(val) {
  52. this.data = (0, _extends2.default)({}, defaultContact, val);
  53. }
  54. },
  55. methods: {
  56. onFocus: function onFocus(key) {
  57. this.errorInfo[key] = '';
  58. },
  59. getErrorMessageByKey: function getErrorMessageByKey(key) {
  60. var value = this.data[key].trim();
  61. switch (key) {
  62. case 'name':
  63. return value ? '' : t('nameInvalid');
  64. case 'tel':
  65. return this.telValidator(value) ? '' : t('telInvalid');
  66. }
  67. },
  68. onSave: function onSave() {
  69. var _this = this;
  70. var isValid = ['name', 'tel'].every(function (item) {
  71. var msg = _this.getErrorMessageByKey(item);
  72. if (msg) {
  73. _this.errorInfo[item] = msg;
  74. }
  75. return !msg;
  76. });
  77. if (isValid && !this.isSaving) {
  78. this.$emit('save', this.data);
  79. }
  80. },
  81. onDelete: function onDelete() {
  82. var _this2 = this;
  83. _dialog.default.confirm({
  84. title: t('confirmDelete')
  85. }).then(function () {
  86. _this2.$emit('delete', _this2.data);
  87. });
  88. }
  89. },
  90. render: function render() {
  91. var _this3 = this;
  92. var h = arguments[0];
  93. var data = this.data,
  94. errorInfo = this.errorInfo;
  95. var onFocus = function onFocus(name) {
  96. return function () {
  97. return _this3.onFocus(name);
  98. };
  99. };
  100. return h("div", {
  101. "class": bem()
  102. }, [h("div", {
  103. "class": bem('fields')
  104. }, [h(_field.default, {
  105. "attrs": {
  106. "clearable": true,
  107. "maxlength": "30",
  108. "label": t('name'),
  109. "placeholder": t('nameEmpty'),
  110. "errorMessage": errorInfo.name
  111. },
  112. "on": {
  113. "focus": onFocus('name')
  114. },
  115. "model": {
  116. value: data.name,
  117. callback: function callback($$v) {
  118. _this3.$set(data, "name", $$v);
  119. }
  120. }
  121. }), h(_field.default, {
  122. "attrs": {
  123. "clearable": true,
  124. "type": "tel",
  125. "label": t('tel'),
  126. "placeholder": t('telEmpty'),
  127. "errorMessage": errorInfo.tel
  128. },
  129. "on": {
  130. "focus": onFocus('tel')
  131. },
  132. "model": {
  133. value: data.tel,
  134. callback: function callback($$v) {
  135. _this3.$set(data, "tel", $$v);
  136. }
  137. }
  138. })]), this.showSetDefault && h(_cell.default, {
  139. "attrs": {
  140. "title": this.setDefaultLabel,
  141. "border": false
  142. },
  143. "class": bem('switch-cell')
  144. }, [h(_switch.default, {
  145. "attrs": {
  146. "size": 24
  147. },
  148. "slot": "right-icon",
  149. "on": {
  150. "change": function change(event) {
  151. _this3.$emit('change-default', event);
  152. }
  153. },
  154. "model": {
  155. value: data.isDefault,
  156. callback: function callback($$v) {
  157. _this3.$set(data, "isDefault", $$v);
  158. }
  159. }
  160. })]), h("div", {
  161. "class": bem('buttons')
  162. }, [h(_button.default, {
  163. "attrs": {
  164. "block": true,
  165. "round": true,
  166. "type": "danger",
  167. "text": t('save'),
  168. "loading": this.isSaving
  169. },
  170. "on": {
  171. "click": this.onSave
  172. }
  173. }), this.isEdit && h(_button.default, {
  174. "attrs": {
  175. "block": true,
  176. "round": true,
  177. "text": t('delete'),
  178. "loading": this.isDeleting
  179. },
  180. "on": {
  181. "click": this.onDelete
  182. }
  183. })])]);
  184. }
  185. });
  186. exports.default = _default2;