index.js 7.3 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206
  1. const verify = require('../../utils/deleteMark');
  2. Component({
  3. externalClasses: [],
  4. properties: {
  5. form: Array,
  6. showAll: {
  7. type: Boolean,
  8. value: true
  9. }, //不显示必填项
  10. onConfirm: Function,
  11. interrupt: Function, //打断处理,用于条件判断 把form返回到上个页面处理重新传入
  12. },
  13. options: {
  14. multipleSlots: true //允许使用多个slot
  15. },
  16. methods: {
  17. toOptions(e) {
  18. const {
  19. item
  20. } = e.currentTarget.dataset;
  21. wx.navigateTo({
  22. url: '/packageA/options/index?data=' + JSON.stringify(item),
  23. })
  24. },
  25. route(e) {
  26. const {
  27. item
  28. } = e.currentTarget.dataset;
  29. if (item.disabled) return
  30. let param = JSON.stringify(item);
  31. param += item.radio ? '&radio=true' : '';
  32. wx.navigateTo({
  33. url: item.url + '?item=' + param,
  34. })
  35. },
  36. /* 处理路由返回结果 */
  37. handleRoute(data, list) {
  38. console.log(data)
  39. let i = this.data.form.findIndex(v => v.valueName == data.valueName);
  40. this.setData({
  41. [`form[${i}].value`]: data.value
  42. });
  43. wx.navigateBack();
  44. this.triggerEvent("interrupt", {
  45. data,
  46. form: this.data.form,
  47. list: list || []
  48. });
  49. setTimeout(() => {
  50. this.confirm()
  51. }, 100)
  52. },
  53. /* 改变值 */
  54. inputChange(e) {
  55. let item = e.target.dataset.item,
  56. index = this.data.form.findIndex(v => v.valueName === item.valueName),
  57. value = e.detail;
  58. //开始校验 //校验规则 不填:不校验 "base":默认校验 "phone":手机号 "mail":邮箱 "正则表达式":以自定义内容为校验标准
  59. if (item.checking) {
  60. let reg = item.checking;
  61. switch (item.checking) {
  62. case 'base':
  63. value = verify.queryStr(value);
  64. break;
  65. case 'phone':
  66. reg = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/;
  67. this.setData({
  68. [`form[${index}].errMsg`]: !reg.test(value) ? '请输入正确11位手机号码' : ''
  69. });
  70. break;
  71. case 'mail':
  72. reg = /^([A-Za-z0-9_\-\.])+\@([A-Za-z0-9_\-\.])+\.([A-Za-z]{2,4})$/;
  73. this.setData({
  74. [`form[${index}].errMsg`]: !reg.test(value) ? '请输入正确的邮箱格式' : ''
  75. });
  76. break;
  77. default:
  78. reg = new RegExp(reg);
  79. this.setData({
  80. [`form[${index}].errMsg`]: !reg.test(value) ? item.hint || '输入文本不符合条件!' : ''
  81. });
  82. break;
  83. };
  84. };
  85. this.setData({
  86. [`form[${index}].value`]: value,
  87. [`form[${index}].error`]: false,
  88. });
  89. if (!item.required && value == '') this.setData({
  90. [`form[${index}].errMsg`]: "",
  91. });
  92. this.confirm();
  93. },
  94. /* 日期,时间 选择器 */
  95. bindDateChange(e) {
  96. let item = e.target.dataset.item,
  97. index = this.data.form.findIndex(v => v.valueName === item.valueName),
  98. value = e.detail.value;
  99. this.setData({
  100. [`form[${index}].value`]: value,
  101. [`form[${index}].error`]: false,
  102. });
  103. if (item.interrupt) this.triggerEvent("interrupt", {
  104. data: this.data.form[index],
  105. form: this.data.form
  106. });
  107. this.confirm();
  108. },
  109. /* 时间范围选择器 */
  110. rangeDateChange(e) {
  111. let item = e.target.dataset.item,
  112. i = e.target.dataset.index,
  113. index = this.data.form.findIndex(v => v.valueName === item.valueName),
  114. value = e.detail.value;
  115. this.setData({
  116. [`form[${index}].value[${i}]`]: value,
  117. [`form[${index}].error`]: false,
  118. });
  119. this.confirm();
  120. },
  121. /* 省市县 */
  122. bindRegionChange(e) {
  123. let item = e.currentTarget.dataset.item,
  124. index = this.data.form.findIndex(v => v.valueName === item.valueName),
  125. value = e.detail.value;
  126. this.setData({
  127. [`form[${index}].value`]: value,
  128. [`form[${index}].error`]: false,
  129. });
  130. this.confirm();
  131. },
  132. /* 自定义选项 */
  133. setOption(item) {
  134. let i = this.data.form.findIndex(v => v.valueName == item.valueName);
  135. this.setData({
  136. [`form[${i}].value`]: item.value
  137. });
  138. this.confirm();
  139. },
  140. /* 是否完成必填项 */
  141. confirm() {
  142. this.triggerEvent("onConfirm", this.data.form.some(v => {
  143. if (v.type == "dateRange" && v.required) {
  144. return v.value[0] == "" || v.value[1] == "";
  145. } else {
  146. return v.required && v.value == '';
  147. }
  148. }))
  149. },
  150. /* 性别 */
  151. sexChange(e) {
  152. let item = e.currentTarget.dataset.item,
  153. index = this.data.form.findIndex(v => v.valueName === item.valueName);
  154. this.setData({
  155. [`form[${index}].value`]: e.detail,
  156. [`form[${index}].error`]: false,
  157. });
  158. this.confirm();
  159. },
  160. /* 单选 选择器改变 */
  161. radioChange(e) {
  162. let item = e.currentTarget.dataset.item,
  163. index = this.data.form.findIndex(v => v.valueName == item.valueName);
  164. this.setData({
  165. [`form[${index}].value`]: e.detail,
  166. [`form[${index}].error`]: false,
  167. });
  168. if (item.interrupt) this.triggerEvent("interrupt", {
  169. data: this.data.form[index],
  170. form: this.data.form
  171. });
  172. this.confirm();
  173. },
  174. /* 提交 */
  175. submit() {
  176. let obj = {},
  177. isPass = false;
  178. this.data.form.forEach((v, i) => {
  179. obj[v.valueName] = v.value;
  180. if (v.errMsg != '') {
  181. this.setData({
  182. [`form[${i}].error`]: true
  183. });
  184. isPass = true;
  185. }
  186. });
  187. if (isPass) {
  188. wx.showToast({
  189. title: '请检查表单内容',
  190. icon: "none"
  191. })
  192. } else {
  193. return obj;
  194. }
  195. },
  196. /* 查询结果 不验证是否必填 */
  197. query() {
  198. let obj = {};
  199. this.data.form.forEach(v => {
  200. obj[v.valueName] = v.value;
  201. });
  202. return obj;
  203. }
  204. }
  205. })