TestMobileForm.vue 5.0 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156
  1. <template>
  2. <view>
  3. <u--form :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" :rules="rules" ref="inputForm">
  4. <u-form-item label="姓名" borderBottom prop="name">
  5. <u--input placeholder='请填写姓名' v-model="inputForm.name" border="none"></u--input>
  6. </u-form-item>
  7. <u-form-item label="年龄" borderBottom prop="age">
  8. <u--input placeholder='请填写年龄' v-model="inputForm.age" border="none"></u--input>
  9. </u-form-item>
  10. <u-form-item label="地区" borderBottom prop="areaId">
  11. <jp-area-select v-model="inputForm.areaId"></jp-area-select>
  12. </u-form-item>
  13. <u-form-item label="公司" borderBottom prop="company.id">
  14. <jp-office-select v-model="inputForm.company.id"></jp-office-select>
  15. </u-form-item>
  16. <u-form-item label="部门" borderBottom prop="office.id">
  17. <jp-office-select v-model="inputForm.office.id"></jp-office-select>
  18. </u-form-item>
  19. <u-form-item label="性别" borderBottom prop="sex">
  20. <jp-picker v-model="inputForm.sex" rangeKey="label" rangeValue="value" :range="$dictUtils.getDictList('sex')"></jp-picker>
  21. </u-form-item>
  22. <u-form-item label="头像" borderBottom prop="teImage">
  23. <jp-image-upload v-model="inputForm.teImage"></jp-image-upload>
  24. </u-form-item>
  25. <u-form-item label="单选框" borderBottom prop="isSingle">
  26. <u-radio-group
  27. v-model="inputForm.isSingle"
  28. >
  29. <u-radio
  30. :customStyle="{margin: '8px'}"
  31. v-for="(option, index) in $dictUtils.getDictList('yes_no')""
  32. :key="index"
  33. :label="option.label"
  34. :name="option.value"
  35. >
  36. </u-radio>
  37. </u-radio-group>
  38. </u-form-item>
  39. <u-form-item label="多选框" borderBottom prop="cks">
  40. <jp-checkbox-group v-model="inputForm.cks">
  41. <u-checkbox
  42. :customStyle="{margin: '8px'}"
  43. v-for="(option, index) in $dictUtils.getDictList('oa_leave_type')"
  44. :key="index"
  45. :label="option.label || option.value"
  46. :name="option.value"
  47. >
  48. </u-checkbox>
  49. </jp-checkbox-group>
  50. </u-form-item>
  51. <u-form-item label="多行文本框" borderBottom prop="textArea">
  52. <u--textarea placeholder='请填写多行文本框' v-model="inputForm.textArea" ></u--textarea>
  53. </u-form-item>
  54. <u-form-item label="数字输入框" borderBottom prop="textNumber">
  55. <u--input placeholder='请填写数字输入框' v-model="inputForm.textNumber" border="none"></u--input>
  56. </u-form-item>
  57. <u-form-item label="日期选择框" borderBottom prop="teDate">
  58. <jp-datetime-picker v-model="inputForm.teDate" placeholder="选择日期时间" mode="datetime"></jp-datetime-picker>
  59. </u-form-item>
  60. <u-form-item label="邮箱" borderBottom prop="email">
  61. <u--input placeholder='请填写邮箱' v-model="inputForm.email" border="none"></u--input>
  62. </u-form-item>
  63. <u-form-item label="手机号" borderBottom prop="phone">
  64. <u--input placeholder='请填写手机号' v-model="inputForm.phone" border="none"></u--input>
  65. </u-form-item>
  66. <u-form-item label="电话" borderBottom prop="tel">
  67. <u--input placeholder='请填写电话' v-model="inputForm.tel" border="none"></u--input>
  68. </u-form-item>
  69. </u--form>
  70. <view class="bottom-wrap flex">
  71. <u-button
  72. type="primary"
  73. text=提交
  74. @click="formSubmit"
  75. ></u-button>
  76. </view>
  77. </view>
  78. </template>
  79. <script>
  80. import testMobileService from '@/api/test/mobile/testMobileService'
  81. export default {
  82. data () {
  83. return {
  84. inputForm: {
  85. id: '',
  86. name: '',
  87. age: '',
  88. areaId: '',
  89. company: {
  90. id: ''
  91. },
  92. office: {
  93. id: ''
  94. },
  95. sex: '',
  96. teImage: '',
  97. isSingle: '',
  98. cks: '',
  99. textArea: '',
  100. textNumber: '',
  101. teDate: '',
  102. email: '',
  103. phone: '',
  104. tel: ''
  105. },
  106. rules: {
  107. 'name': [
  108. {
  109. required: true,
  110. message: '姓名不能为空',
  111. trigger: ['blur', 'change']
  112. }],
  113. 'age': [
  114. {
  115. required: true,
  116. message: '年龄不能为空',
  117. trigger: ['blur', 'change']
  118. }]
  119. }
  120. }
  121. },
  122. async onLoad(query) {
  123. if(query&&query.id){
  124. uni.setNavigationBarTitle({
  125. title: "修改移动表单"
  126. });
  127. let data = await testMobileService.queryById(query.id)
  128. this.inputForm = this.recover(this.inputForm, data)
  129. }else{
  130. uni.setNavigationBarTitle({
  131. title: "新建移动表单"
  132. });
  133. }
  134. },
  135. methods: {
  136. formSubmit: function(e) {
  137. //定义表单规则
  138. this.$refs.inputForm.validate().then(res => {
  139. uni.showLoading()
  140. testMobileService.save(this.inputForm).then((data) => {
  141. uni.showToast({title:data, icon:"success"});
  142. uni.navigateTo({
  143. url: '/pages/test/mobile/TestMobileList'
  144. })
  145. }).catch((e)=>{
  146. })
  147. })
  148. }
  149. }
  150. }
  151. </script>