ModifyClazzSimple.vue 2.6 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
  1. <template>
  2. <el-dialog
  3. class="modify-clazz"
  4. :visible.sync="modalIsShow"
  5. :title="title"
  6. top="10vh"
  7. width="448px"
  8. :close-on-click-modal="false"
  9. :close-on-press-escape="false"
  10. append-to-body
  11. @open="visibleChange"
  12. >
  13. <el-form
  14. ref="modalFormComp"
  15. :model="modalForm"
  16. :rules="rules"
  17. :key="modalForm.id"
  18. label-position="top"
  19. >
  20. <el-form-item prop="teachClazzName" label="班级名称:">
  21. <el-input
  22. v-model.trim="modalForm.teachClazzName"
  23. placeholder="请输入班级名称"
  24. clearable
  25. ></el-input>
  26. </el-form-item>
  27. </el-form>
  28. <div slot="footer">
  29. <el-button type="primary" :disabled="isSubmit" @click="submit"
  30. >确认</el-button
  31. >
  32. <el-button @click="cancel">取消</el-button>
  33. </div>
  34. </el-dialog>
  35. </template>
  36. <script>
  37. import { updateClazzSimple } from "../../api";
  38. const initModalForm = {
  39. id: null,
  40. teachClazzName: "",
  41. teachCourseId: ""
  42. };
  43. export default {
  44. name: "modify-clazz-simple",
  45. props: {
  46. instance: {
  47. type: Object,
  48. default() {
  49. return {};
  50. }
  51. }
  52. },
  53. computed: {
  54. isEdit() {
  55. return !!this.instance.id;
  56. },
  57. title() {
  58. return (this.isEdit ? "编辑" : "新增") + "班级";
  59. }
  60. },
  61. data() {
  62. return {
  63. modalIsShow: false,
  64. isSubmit: false,
  65. modalForm: { ...initModalForm },
  66. rules: {
  67. teachClazzName: [
  68. {
  69. required: true,
  70. message: "请输入班级名称",
  71. trigger: "change"
  72. },
  73. {
  74. max: 30,
  75. message: "班级名称不能超过30个字",
  76. trigger: "change"
  77. }
  78. ]
  79. }
  80. };
  81. },
  82. methods: {
  83. initData(val) {
  84. this.modalForm = this.$objAssign(initModalForm, val);
  85. },
  86. visibleChange() {
  87. this.initData(this.instance);
  88. },
  89. cancel() {
  90. this.modalIsShow = false;
  91. },
  92. open() {
  93. this.modalIsShow = true;
  94. },
  95. async submit() {
  96. const valid = await this.$refs.modalFormComp.validate().catch(() => {});
  97. if (!valid) return;
  98. if (this.isSubmit) return;
  99. this.isSubmit = true;
  100. let datas = { ...this.modalForm };
  101. const data = await updateClazzSimple(datas).catch(() => {
  102. this.isSubmit = false;
  103. });
  104. if (!data) return;
  105. this.isSubmit = false;
  106. this.$message.success(this.title + "成功!");
  107. this.$emit("modified");
  108. this.cancel();
  109. }
  110. }
  111. };
  112. </script>