index.vue 4.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165
  1. <template>
  2. <el-dialog v-model="visible" :title="isEdit ? '编辑课程' : '添加课程'" width="500px">
  3. <el-form :model="form" :rules="rules" ref="formRef" label-width="100px">
  4. <el-form-item label="上课日期" prop="class_date">
  5. <el-date-picker v-model="form.class_date" type="date" value-format="YYYY-MM-DD" />
  6. </el-form-item>
  7. <el-form-item label="时间段" prop="time">
  8. <el-select v-model="form.time" placeholder="选择时间段">
  9. <el-option label="上午" :value="1" />
  10. <el-option label="下午" :value="2" />
  11. <el-option label="晚上" :value="3" />
  12. </el-select>
  13. </el-form-item>
  14. <el-form-item label="课程名称" prop="classdetail">
  15. <el-input v-model="form.classdetail" />
  16. </el-form-item>
  17. <el-form-item label="教师" prop="teacher">
  18. <el-select v-model="form.teacher" placeholder="请选择教师">
  19. <el-option
  20. v-for="teacher in teacherList"
  21. :key="teacher.id"
  22. :label="teacher.name"
  23. :value="teacher.id"
  24. />
  25. </el-select>
  26. </el-form-item>
  27. <el-form-item label="学期" prop="semester">
  28. <el-input-number v-model="form.semester" :min="1" />
  29. </el-form-item>
  30. <el-form-item label="年级" prop="grade">
  31. <el-input-number v-model="form.grade" :min="1" />
  32. </el-form-item>
  33. <el-form-item label="班级编码" prop="class_number">
  34. <el-input-number v-model="form.class_number" :min="1" :max="10" />
  35. </el-form-item>
  36. <el-form-item label="教室" prop="classroom">
  37. <el-input v-model="form.classroom" />
  38. </el-form-item>
  39. <el-form-item label="总课时" prop="total_lessons">
  40. <el-input-number v-model="form.total_lessons" :min="1" />
  41. </el-form-item>
  42. </el-form>
  43. <template #footer>
  44. <el-button @click="close">取消</el-button>
  45. <el-button type="primary" @click="save">保存</el-button>
  46. </template>
  47. </el-dialog>
  48. </template>
  49. <script setup lang="ts">
  50. import { ref, defineExpose,onMounted } from 'vue';
  51. import {AddObj,getTeacherList,UpdateObj} from '../api';
  52. import { ElMessage } from 'element-plus';
  53. const teacherList = ref<any[]>([]);
  54. const emit = defineEmits(['saved']);
  55. async function fetchTeachers() {
  56. const result = await getTeacherList();
  57. teacherList.value = result.data;
  58. }
  59. onMounted(() => {
  60. fetchTeachers();
  61. });
  62. const formRef = ref();
  63. const rules = {
  64. class_date: [
  65. { required: true, message: '请选择上课日期', trigger: 'change' },
  66. ],
  67. teacher: [
  68. { required: true, message: '请选择老师', trigger: 'change' },
  69. ],
  70. classdetail: [
  71. { required: true, message: '请填写课程名称', trigger: 'change' },
  72. ],
  73. classroom: [
  74. { required: true, message: '请填写教室', trigger: 'change' },
  75. ],
  76. };
  77. const visible = ref(false);
  78. const isEdit = ref(false);
  79. const form = ref({
  80. class_date: '',
  81. time: 1,
  82. classdetail: '',
  83. teacher: null,
  84. semester: 1,
  85. grade: 1,
  86. class_number: 1,
  87. classroom: '',
  88. total_lessons: 48
  89. });
  90. function open(data?: any) {
  91. if (data) {
  92. form.value = { ...data };
  93. isEdit.value = true;
  94. } else {
  95. form.value = {
  96. class_date: '',
  97. time: 1,
  98. classdetail: '',
  99. teacher: null,
  100. semester: 1,
  101. grade: 1,
  102. class_number: 1,
  103. classroom: '',
  104. total_lessons: 48
  105. };
  106. isEdit.value = false;
  107. }
  108. visible.value = true;
  109. }
  110. function close() {
  111. visible.value = false;
  112. }
  113. async function save() {
  114. try {
  115. formRef.value?.validate(async (valid: boolean) => {
  116. if (valid) {
  117. const isEdit = !!form.value.id;
  118. // eslint-disable-next-line no-console
  119. console.log('保存课程:', form.value);
  120. if (isEdit) {
  121. await UpdateObj(form.value);
  122. }else{
  123. await AddObj(form.value);
  124. }
  125. visible.value = false;
  126. ElMessage.success(isEdit ? '编辑成功' : '创建成功');
  127. emit('saved');
  128. }else {
  129. ElMessage.success('表单校验未通过!');
  130. }
  131. });
  132. } catch (error) {
  133. // eslint-disable-next-line no-console
  134. console.error('保存失败', error);
  135. ElMessage.error('保存失败!');
  136. }
  137. }
  138. defineExpose({ open });
  139. </script>