houzhongjian
2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<template>
  <div class="app-container">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      label-width="100px"
      v-loading="formLoading"
    >
      <el-form-item label="名字" prop="name">
        <el-input v-model="formData.name" placeholder="请输入名字" />
      </el-form-item>
      <el-form-item label="班主任" prop="teacher">
        <el-input v-model="formData.teacher" placeholder="请输入班主任" />
      </el-form-item>
    </el-form>
  </div>
</template>
 
<script>
import * as Demo03StudentApi from '@/api/infra/demo03-inner';
export default {
  name: "Demo03GradeForm",
  components: {
  },
  props:[
    'studentId'
  ],// 学生编号(主表的关联字段)
  data() {
    return {
      // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
      formLoading: false,
      // 表单参数
      formData: [],
      // 表单校验
      formRules: {
        studentId: [{ required: true, message: "学生编号不能为空", trigger: "blur" }],
        name: [{ required: true, message: "名字不能为空", trigger: "blur" }],
        teacher: [{ required: true, message: "班主任不能为空", trigger: "blur" }],
      },
    };
  },
  watch:{/** 监听主表的关联字段的变化,加载对应的子表数据 */
    studentId:{
      handler(val) {
        // 1. 重置表单
        this.formData = {
          id: undefined,
          studentId: undefined,
          name: undefined,
          teacher: undefined,
        }
        // 2. val 非空,则加载数据
        if (!val) {
          return;
        }
        try {
          this.formLoading = true;
          // 这里还是需要获取一下 this 的不然取不到 formData
          const that = this;
          Demo03StudentApi.getDemo03GradeByStudentId(val).then(function (res){
            const data = res.data;
            if (!data) {
              return
            }
            that.formData = data;
          })
        } finally {
          this.formLoading = false;
        }
      },
      immediate: true
    }
  },
  methods: {
    /** 表单校验 */
    validate(){
      return this.$refs["formRef"].validate();
    },
    /** 表单值 */
    getData(){
      return this.formData;
    }
  }
};
</script>