StudentAttendanceForm.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131
  1. <template>
  2. <Dialog :title="dialogTitle" v-model="dialogVisible">
  3. <el-form
  4. ref="formRef"
  5. :model="formData"
  6. :rules="formRules"
  7. label-width="100px"
  8. v-loading="formLoading"
  9. >
  10. <el-form-item label="学生id" prop="studentId">
  11. <el-input v-model="formData.studentId" placeholder="请输入学生id" />
  12. </el-form-item>
  13. <el-form-item label="工作间id" prop="deptId">
  14. <el-input v-model="formData.deptId" placeholder="请输入工作间id" />
  15. </el-form-item>
  16. <el-form-item label="日期" prop="date">
  17. <el-date-picker
  18. v-model="formData.date"
  19. type="date"
  20. value-format="x"
  21. placeholder="选择日期"
  22. />
  23. </el-form-item>
  24. <el-form-item label="打卡时间" prop="clockInTime">
  25. <el-date-picker
  26. v-model="formData.clockInTime"
  27. type="date"
  28. value-format="x"
  29. placeholder="选择打卡时间"
  30. />
  31. </el-form-item>
  32. <el-form-item label="打卡状态 0正常,1迟到、2早退、3缺勤、4请假" prop="clockInStatus">
  33. <el-radio-group v-model="formData.clockInStatus">
  34. <el-radio label="1">请选择字典生成</el-radio>
  35. </el-radio-group>
  36. </el-form-item>
  37. <el-form-item label="备注原因" prop="remark">
  38. <el-input v-model="formData.remark" placeholder="请输入备注原因" />
  39. </el-form-item>
  40. </el-form>
  41. <template #footer>
  42. <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
  43. <el-button @click="dialogVisible = false">取 消</el-button>
  44. </template>
  45. </Dialog>
  46. </template>
  47. <script setup lang="ts">
  48. import { StudentAttendanceApi, StudentAttendanceVO } from '@/api/system/studentAttendance'
  49. /** 学生考勤记录 表单 */
  50. defineOptions({ name: 'StudentAttendanceForm' })
  51. const { t } = useI18n() // 国际化
  52. const message = useMessage() // 消息弹窗
  53. const dialogVisible = ref(false) // 弹窗的是否展示
  54. const dialogTitle = ref('') // 弹窗的标题
  55. const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
  56. const formType = ref('') // 表单的类型:create - 新增;update - 修改
  57. const formData = ref({
  58. id: undefined,
  59. studentId: undefined,
  60. deptId: undefined,
  61. date: undefined,
  62. clockInTime: undefined,
  63. clockInStatus: undefined,
  64. remark: undefined,
  65. })
  66. const formRules = reactive({
  67. studentId: [{ required: true, message: '学生id不能为空', trigger: 'blur' }],
  68. deptId: [{ required: true, message: '工作间id不能为空', trigger: 'blur' }],
  69. date: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
  70. })
  71. const formRef = ref() // 表单 Ref
  72. /** 打开弹窗 */
  73. const open = async (type: string, id?: number) => {
  74. dialogVisible.value = true
  75. dialogTitle.value = t('action.' + type)
  76. formType.value = type
  77. resetForm()
  78. // 修改时,设置数据
  79. if (id) {
  80. formLoading.value = true
  81. try {
  82. formData.value = await StudentAttendanceApi.getStudentAttendance(id)
  83. } finally {
  84. formLoading.value = false
  85. }
  86. }
  87. }
  88. defineExpose({ open }) // 提供 open 方法,用于打开弹窗
  89. /** 提交表单 */
  90. const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
  91. const submitForm = async () => {
  92. // 校验表单
  93. await formRef.value.validate()
  94. // 提交请求
  95. formLoading.value = true
  96. try {
  97. const data = formData.value as unknown as StudentAttendanceVO
  98. if (formType.value === 'create') {
  99. await StudentAttendanceApi.createStudentAttendance(data)
  100. message.success(t('common.createSuccess'))
  101. } else {
  102. await StudentAttendanceApi.updateStudentAttendance(data)
  103. message.success(t('common.updateSuccess'))
  104. }
  105. dialogVisible.value = false
  106. // 发送操作成功的事件
  107. emit('success')
  108. } finally {
  109. formLoading.value = false
  110. }
  111. }
  112. /** 重置表单 */
  113. const resetForm = () => {
  114. formData.value = {
  115. id: undefined,
  116. studentId: undefined,
  117. deptId: undefined,
  118. date: undefined,
  119. clockInTime: undefined,
  120. clockInStatus: undefined,
  121. remark: undefined,
  122. }
  123. formRef.value?.resetFields()
  124. }
  125. </script>