123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131 |
- <template>
- <Dialog :title="dialogTitle" v-model="dialogVisible">
- <el-form
- ref="formRef"
- :model="formData"
- :rules="formRules"
- label-width="100px"
- v-loading="formLoading"
- >
- <el-form-item label="学生id" prop="studentId">
- <el-input v-model="formData.studentId" placeholder="请输入学生id" />
- </el-form-item>
- <el-form-item label="工作间id" prop="deptId">
- <el-input v-model="formData.deptId" placeholder="请输入工作间id" />
- </el-form-item>
- <el-form-item label="日期" prop="date">
- <el-date-picker
- v-model="formData.date"
- type="date"
- value-format="x"
- placeholder="选择日期"
- />
- </el-form-item>
- <el-form-item label="打卡时间" prop="clockInTime">
- <el-date-picker
- v-model="formData.clockInTime"
- type="date"
- value-format="x"
- placeholder="选择打卡时间"
- />
- </el-form-item>
- <el-form-item label="打卡状态 0正常,1迟到、2早退、3缺勤、4请假" prop="clockInStatus">
- <el-radio-group v-model="formData.clockInStatus">
- <el-radio label="1">请选择字典生成</el-radio>
- </el-radio-group>
- </el-form-item>
- <el-form-item label="备注原因" prop="remark">
- <el-input v-model="formData.remark" placeholder="请输入备注原因" />
- </el-form-item>
- </el-form>
- <template #footer>
- <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
- <el-button @click="dialogVisible = false">取 消</el-button>
- </template>
- </Dialog>
- </template>
- <script setup lang="ts">
- import { StudentAttendanceApi, StudentAttendanceVO } from '@/api/system/studentAttendance'
- /** 学生考勤记录 表单 */
- defineOptions({ name: 'StudentAttendanceForm' })
- const { t } = useI18n() // 国际化
- const message = useMessage() // 消息弹窗
- const dialogVisible = ref(false) // 弹窗的是否展示
- const dialogTitle = ref('') // 弹窗的标题
- const formLoading = ref(false) // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
- const formType = ref('') // 表单的类型:create - 新增;update - 修改
- const formData = ref({
- id: undefined,
- studentId: undefined,
- deptId: undefined,
- date: undefined,
- clockInTime: undefined,
- clockInStatus: undefined,
- remark: undefined,
- })
- const formRules = reactive({
- studentId: [{ required: true, message: '学生id不能为空', trigger: 'blur' }],
- deptId: [{ required: true, message: '工作间id不能为空', trigger: 'blur' }],
- date: [{ required: true, message: '日期不能为空', trigger: 'blur' }],
- })
- const formRef = ref() // 表单 Ref
- /** 打开弹窗 */
- const open = async (type: string, id?: number) => {
- dialogVisible.value = true
- dialogTitle.value = t('action.' + type)
- formType.value = type
- resetForm()
- // 修改时,设置数据
- if (id) {
- formLoading.value = true
- try {
- formData.value = await StudentAttendanceApi.getStudentAttendance(id)
- } finally {
- formLoading.value = false
- }
- }
- }
- defineExpose({ open }) // 提供 open 方法,用于打开弹窗
- /** 提交表单 */
- const emit = defineEmits(['success']) // 定义 success 事件,用于操作成功后的回调
- const submitForm = async () => {
- // 校验表单
- await formRef.value.validate()
- // 提交请求
- formLoading.value = true
- try {
- const data = formData.value as unknown as StudentAttendanceVO
- if (formType.value === 'create') {
- await StudentAttendanceApi.createStudentAttendance(data)
- message.success(t('common.createSuccess'))
- } else {
- await StudentAttendanceApi.updateStudentAttendance(data)
- message.success(t('common.updateSuccess'))
- }
- dialogVisible.value = false
- // 发送操作成功的事件
- emit('success')
- } finally {
- formLoading.value = false
- }
- }
- /** 重置表单 */
- const resetForm = () => {
- formData.value = {
- id: undefined,
- studentId: undefined,
- deptId: undefined,
- date: undefined,
- clockInTime: undefined,
- clockInStatus: undefined,
- remark: undefined,
- }
- formRef.value?.resetFields()
- }
- </script>
|