houzhongjian
2024-07-11 759b1c71011abd6b58c37d2566f3f3c208c2f1b2
提交 | 用户 | 时间
759b1c 1 <template>
H 2   <div class="app-container">
3     <!-- 对话框(添加 / 修改) -->
4     <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="45%" v-dialogDrag append-to-body>
5       <el-form ref="formRef" :model="formData" :rules="formRules" v-loading="formLoading" label-width="100px">
6         <el-form-item label="名字" prop="name">
7           <el-input v-model="formData.name" placeholder="请输入名字" />
8         </el-form-item>
9         <el-form-item label="性别" prop="sex">
10           <el-radio-group v-model="formData.sex">
11             <el-radio v-for="dict in this.getDictDatas(DICT_TYPE.SYSTEM_USER_SEX)"
12                       :key="dict.value" :label="parseInt(dict.value)"
13             >{{dict.label}}</el-radio>
14           </el-radio-group>
15         </el-form-item>
16         <el-form-item label="出生日期" prop="birthday">
17           <el-date-picker clearable v-model="formData.birthday" type="date" value-format="timestamp" placeholder="选择出生日期" />
18         </el-form-item>
19         <el-form-item label="简介">
20           <Editor v-model="formData.description" :min-height="192"/>
21         </el-form-item>
22       </el-form>
23       <div slot="footer" class="dialog-footer">
24         <el-button type="primary" @click="submitForm" :disabled="formLoading">确 定</el-button>
25         <el-button @click="dialogVisible = false">取 消</el-button>
26       </div>
27     </el-dialog>
28   </div>
29 </template>
30
31 <script>
32 import * as Demo03StudentApi from '@/api/infra/demo03-erp';
33 import Editor from '@/components/Editor';
34 export default {
35   name: "Demo03StudentForm",
36   components: {
37     Editor,
38   },
39   data() {
40     return {
41       // 弹出层标题
42       dialogTitle: "",
43       // 是否显示弹出层
44       dialogVisible: false,
45       // 表单的加载中:1)修改时的数据加载;2)提交的按钮禁用
46       formLoading: false,
47       // 表单参数
48       formData: {
49         id: undefined,
50         name: undefined,
51         sex: undefined,
52         birthday: undefined,
53         description: undefined,
54       },
55       // 表单校验
56       formRules: {
57         name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
58         sex: [{ required: true, message: '性别不能为空', trigger: 'blur' }],
59         birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
60         description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
61       },
62     };
63   },
64   methods: {
65     /** 打开弹窗 */
66     async open(id) {
67       this.dialogVisible = true;
68       this.reset();
69       // 修改时,设置数据
70       if (id) {
71         this.formLoading = true;
72         try {
73           const res = await Demo03StudentApi.getDemo03Student(id);
74           this.formData = res.data;
75           this.title = "修改学生";
76         } finally {
77           this.formLoading = false;
78         }
79       }
80       this.title = "新增学生";
81     },
82     /** 提交按钮 */
83     async submitForm() {
84       // 校验主表
85       await this.$refs["formRef"].validate();
86       this.formLoading = true;
87       try {
88         const data = this.formData;
89         // 修改的提交
90         if (data.id) {
91           await Demo03StudentApi.updateDemo03Student(data);
92           this.$modal.msgSuccess("修改成功");
93           this.dialogVisible = false;
94           this.$emit('success');
95           return;
96         }
97         // 添加的提交
98         await Demo03StudentApi.createDemo03Student(data);
99         this.$modal.msgSuccess("新增成功");
100         this.dialogVisible = false;
101         this.$emit('success');
102       } finally {
103         this.formLoading = false;
104       }
105     },
106     /** 表单重置 */
107     reset() {
108       this.formData = {
109         id: undefined,
110         name: undefined,
111         sex: undefined,
112         birthday: undefined,
113         description: undefined,
114       };
115       this.resetForm("formRef");
116     }
117   }
118 };
119 </script>