TestActivitiLeaveForm.vue 3.5 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127
  1. <template>
  2. <view>
  3. <form @submit="formSubmit" ref="inputForm" class="cu-list menu">
  4. <view class="cu-form-group margin-top">
  5. <view class="title">
  6. <text class="red-color">* </text> 类型
  7. </view>
  8. <jp-picker v-model="inputForm.leaveType" :disabled="formReadOnly" :range="$dictUtils.getDictList('oa_leave_type')">
  9. <view class="picker">
  10. {{$dictUtils.getDictLabel('oa_leave_type', inputForm.leaveType ,'请选择')}}
  11. </view>
  12. </jp-picker>
  13. </view>
  14. <view class="cu-form-group">
  15. <view class="title">请假开始时间</view>
  16. <jp-datetime-picker v-model="inputForm.startTime" :placeholder='item.placeholder' :disabled="!item.writable" mode="time"></jp-datetime-picker>
  17. </view>
  18. <view class="cu-form-group">
  19. <view class="title">请假结束时间</view>
  20. <jp-datetime-picker v-model="inputForm.endTime" :placeholder='item.placeholder' :disabled="!item.writable" mode="time"></jp-datetime-picker>
  21. </view>
  22. <view class="cu-form-group">
  23. <view class="title">
  24. <text class="red-color">* </text> 请假事由
  25. </view>
  26. <textarea maxlength="2000" v-model="inputForm.reason" :disabled="formReadOnly" name="reason" placeholder="请填写内容"></textarea>
  27. </view>
  28. </form>
  29. </view>
  30. </template>
  31. <script>
  32. var graceChecker = require("@/common/graceChecker.js");
  33. import jpPicker from '@/components/jp-picker/jp-picker.vue'
  34. import moment from 'moment'
  35. import testActivitiLeaveService from "@/api/test/activiti/testActivitiLeaveService"
  36. export default {
  37. data () {
  38. return {
  39. loading: false,
  40. inputForm: {
  41. id: '',
  42. leaveType: '',
  43. startTime: moment(new Date()).format('YYYY-MM-DD'),
  44. endTime: moment(new Date()).format('YYYY-MM-DD'),
  45. reason: ''
  46. }
  47. }
  48. },
  49. props: {
  50. businessId: {
  51. type: String,
  52. default: ''
  53. },
  54. formReadOnly: {
  55. type: Boolean,
  56. default: false
  57. }
  58. },
  59. components: {
  60. jpPicker
  61. },
  62. watch: {
  63. 'businessId': {
  64. handler (newVal) {
  65. if (this.businessId) {
  66. this.init(this.businessId)
  67. } else {
  68. this.$nextTick(() => {
  69. // this.$refs.inputForm.reset()
  70. })
  71. }
  72. },
  73. immediate: true,
  74. deep: false
  75. }
  76. },
  77. methods: {
  78. StartTimeChange (e) {
  79. this.inputForm.startTime = e.detail.value
  80. },
  81. EndTimeChange (e) {
  82. this.inputForm.endTime = e.detail.value
  83. },
  84. init (id) {
  85. if (id) {
  86. testActivitiLeaveService.queryById(id).then(({data}) => {
  87. this.inputForm = this.recover(this.inputForm, data)
  88. })
  89. }
  90. },
  91. saveForm (callback) {
  92. //定义表单规则
  93. var rule = [
  94. {name:"leaveType", checkType : "notnull", checkRule:"", errorMsg:"类型不能为空"},
  95. {name:"startTime", checkType : "notnull", checkRule:"", errorMsg:"请假开始时间不能为空"},
  96. {name:"endTime", checkType : "notnull", checkRule:"", errorMsg:"请假结束时间不能为空"},
  97. {name:"reason", checkType : "notnull", checkRule:"", errorMsg:"请假事由不能为"}
  98. ];
  99. //进行表单检查
  100. var formData = this.inputForm;
  101. var checkRes = graceChecker.check(formData, rule);
  102. if(checkRes){
  103. uni.showLoading()
  104. testActivitiLeaveService.save(this.inputForm).then(({data}) => {
  105. callback(data.businessTable, data.businessId)
  106. }).catch((e)=>{
  107. })
  108. }else{
  109. uni.showToast({ title: graceChecker.error, icon: "none" });
  110. }
  111. }
  112. }
  113. }
  114. </script>
  115. <style>
  116. .cu-form-group .title {
  117. min-width: calc(4em + 40px);
  118. }
  119. </style>