From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue | 100 ++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 100 insertions(+), 0 deletions(-)
diff --git a/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
new file mode 100644
index 0000000..23766ba
--- /dev/null
+++ b/src/views/infra/demo/demo03/normal/components/Demo03CourseForm.vue
@@ -0,0 +1,100 @@
+<template>
+ <el-form
+ ref="formRef"
+ :model="formData"
+ :rules="formRules"
+ v-loading="formLoading"
+ label-width="0px"
+ :inline-message="true"
+ >
+ <el-table :data="formData" class="-mt-10px">
+ <el-table-column label="搴忓彿" type="index" width="100" />
+ <el-table-column label="鍚嶅瓧" min-width="150">
+ <template #default="{ row, $index }">
+ <el-form-item :prop="`${$index}.name`" :rules="formRules.name" class="mb-0px!">
+ <el-input v-model="row.name" placeholder="璇疯緭鍏ュ悕瀛�" />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column label="鍒嗘暟" min-width="150">
+ <template #default="{ row, $index }">
+ <el-form-item :prop="`${$index}.score`" :rules="formRules.score" class="mb-0px!">
+ <el-input v-model="row.score" placeholder="璇疯緭鍏ュ垎鏁�" />
+ </el-form-item>
+ </template>
+ </el-table-column>
+ <el-table-column align="center" fixed="right" label="鎿嶄綔" width="60">
+ <template #default="{ $index }">
+ <el-button @click="handleDelete($index)" link>鈥�</el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ </el-form>
+ <el-row justify="center" class="mt-3">
+ <el-button @click="handleAdd" round>+ 娣诲姞瀛︾敓璇剧▼</el-button>
+ </el-row>
+</template>
+<script setup lang="ts">
+import { Demo03StudentApi } from '@/api/infra/demo/demo03/normal'
+
+const props = defineProps<{
+ studentId: number // 瀛︾敓缂栧彿锛堜富琛ㄧ殑鍏宠仈瀛楁锛�
+}>()
+const formLoading = ref(false) // 琛ㄥ崟鐨勫姞杞戒腑
+const formData = ref<any[]>([])
+const formRules = reactive({
+ studentId: [{ required: true, message: '瀛︾敓缂栧彿涓嶈兘涓虹┖', trigger: 'blur' }],
+ name: [{ required: true, message: '鍚嶅瓧涓嶈兘涓虹┖', trigger: 'blur' }],
+ score: [{ required: true, message: '鍒嗘暟涓嶈兘涓虹┖', trigger: 'blur' }],
+})
+const formRef = ref() // 琛ㄥ崟 Ref
+
+/** 鐩戝惉涓昏〃鐨勫叧鑱斿瓧娈电殑鍙樺寲锛屽姞杞藉搴旂殑瀛愯〃鏁版嵁 */
+watch(
+ () => props.studentId,
+ async (val) => {
+ // 1. 閲嶇疆琛ㄥ崟
+ formData.value = []
+ // 2. val 闈炵┖锛屽垯鍔犺浇鏁版嵁
+ if (!val) {
+ return
+ }
+ try {
+ formLoading.value = true
+ formData.value = await Demo03StudentApi.getDemo03CourseListByStudentId(val)
+ } finally {
+ formLoading.value = false
+ }
+ },
+ { immediate: true }
+)
+
+/** 鏂板鎸夐挳鎿嶄綔 */
+const handleAdd = () => {
+ const row = {
+ id: undefined,
+ studentId: undefined,
+ name: undefined,
+ score: undefined,
+ }
+ row.studentId = props.studentId as any
+ formData.value.push(row)
+}
+
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+const handleDelete = (index) => {
+ formData.value.splice(index, 1)
+}
+
+/** 琛ㄥ崟鏍￠獙 */
+const validate = () => {
+ return formRef.value.validate()
+}
+
+/** 琛ㄥ崟鍊� */
+const getData = () => {
+ return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
--
Gitblit v1.8.0