index.js 4.3 KB

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