Skip to content

Commit 9f9e0f8

Browse files
YunaiVYunaiV
committed
主子表：同步三种模式的代码
1 parent 86d9a97 commit 9f9e0f8

16 files changed

+1294
-87
lines changed

‎src/views/infra/demo02/DemoStudentAddressForm.vue

Lines changed: 58 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,58 @@
1+
<template>
2+
<el-form
3+
ref="formRef"
4+
:model="formData"
5+
:rules="formRules"
6+
label-width="100px"
7+
v-loading="formLoading"
8+
>
9+
<el-form-item label="子字段 1" prop="field1">
10+
<el-input v-model="formData.field1" placeholder="请输入字段 1" />
11+
</el-form-item>
12+
<el-form-item label="子字段 2" prop="field2">
13+
<el-input v-model="formData.field2" placeholder="请输入字段 2" />
14+
</el-form-item>
15+
<el-form-item label="子字段 3" prop="field3">
16+
<el-input v-model="formData.field3" placeholder="请输入字段 3" />
17+
</el-form-item>
18+
</el-form>
19+
</template>
20+
<script setup lang="ts">
21+
const props = defineProps<{
22+
studentId: undefined // 学生编号
23+
}>()
24+
const formLoading = ref(false) // 表单的加载中
25+
const formData = ref({})
26+
const formRules = reactive({
27+
field1: [required]
28+
})
29+
const formRef = ref() // 表单 Ref
30+
31+
/** 监听主表的关联字段的变化，加载对应的子表数据 */
32+
watch(
33+
() => props.studentId,
34+
(val) => {
35+
if (val) {
36+
formData.value = {
37+
field2: '番茄',
38+
field3: '西瓜'
39+
}
40+
} else {
41+
formData.value = {}
42+
}
43+
},
44+
{ immediate: true }
45+
)
46+
47+
/** 表单校验 */
48+
const validate = () => {
49+
return formRef.value.validate()
50+
}
51+
52+
/** 表单值 **/
53+
const getData = () => {
54+
return formData.value
55+
}
56+
57+
defineExpose({ validate, getData })
58+
</script>

‎src/views/infra/demo02/DemoStudentContactForm.vue

Lines changed: 70 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,68 +1,89 @@
11
<template>
2-
<el-table :data="formData" :stripe="true" class="-mt-10px">
3-
<el-table-column label="序号" type="index" width="60" />
4-
<el-table-column label="名字" prop="name" width="300">
5-
<template #default="scope">
6-
<el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
7-
<el-input v-model="scope.row.name" placeholder="请输入名字" />
8-
</el-form-item>
9-
</template>
10-
</el-table-column>
11-
<el-table-column label="手机号码">
12-
<template #default="{ row, $index }">
13-
<el-form-item
14-
label-width="0px"
15-
:prop="`demoStudentContactList.${$index}.mobile`"
16-
:rules="formRules.mobile"
17-
:inline-message="true"
18-
class="mb-0px!"
19-
>
20-
<el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
21-
</el-form-item>
22-
</template>
23-
</el-table-column>
24-
<el-table-column align="center" fixed="right" label="操作" width="60">
25-
<template #default="{ $index }">
26-
<el-button @click="handleRemove($index)" link>—</el-button>
27-
</template>
28-
</el-table-column>
29-
</el-table>
2+
<el-form
3+
ref="formRef"
4+
:model="formData"
5+
:rules="formRules"
6+
label-width="0px"
7+
v-loading="formLoading"
8+
:inline-message="true"
9+
>
10+
<el-table :data="formData" class="-mt-10px">
11+
<el-table-column label="序号" type="index" width="100" />
12+
<el-table-column label="名字" prop="name" width="300">
13+
<template #default="row">
14+
<el-form-item class="mb-0px!">
15+
<el-input v-model="row.name" placeholder="请输入名字" />
16+
</el-form-item>
17+
</template>
18+
</el-table-column>
19+
<el-table-column label="手机号码">
20+
<template #default="{ row, $index }">
21+
<el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
22+
<el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
23+
</el-form-item>
24+
</template>
25+
</el-table-column>
26+
<el-table-column align="center" fixed="right" label="操作" width="60">
27+
<template #default="{ $index }">
28+
<el-button @click="handleDelete($index)" link>—</el-button>
29+
</template>
30+
</el-table-column>
31+
</el-table>
32+
</el-form>
3033
<el-row justify="center" class="mt-3">
3134
<el-button @click="handleAdd" round>+ 添加联系人</el-button>
3235
</el-row>
3336
</template>
3437
<script setup lang="ts">
3538
const props = defineProps<{
36-
formData: any[]
39+
studentId: undefined // 学生编号
3740
}>()
38-
// const formData = ref([
39-
// {
40-
// name: '芋艿',
41-
// mobile: '15601691300'
42-
// },
43-
// {
44-
// name: '土豆',
45-
// mobile: '15601691234'
46-
// }
47-
// ])
41+
const formLoading = ref(false) // 表单的加载中
42+
const formData = ref([])
4843
const formRules = reactive({
4944
mobile: [required]
5045
})
46+
const formRef = ref() // 表单 Ref
47+
48+
/** 监听主表的关联字段的变化，加载对应的子表数据 */
49+
watch(
50+
() => props.studentId,
51+
(val) => {
52+
if (val) {
53+
formData.value = [
54+
{
55+
name: '芋艿',
56+
mobile: '15601691300'
57+
}
58+
]
59+
} else {
60+
formData.value = []
61+
}
62+
},
63+
{ immediate: true }
64+
)
5165
5266
/** 新增按钮操作 */
53-
const emit = defineEmits(['update:formData'])
5467
const handleAdd = () => {
55-
emit('update:formData', [
56-
...props.formData,
57-
{
58-
name: '土豆'
59-
}
60-
])
68+
formData.value.push({
69+
name: '土豆'
70+
})
6171
}
6272
6373
/** 删除按钮操作 */
64-
const handleRemove = (index) => {
65-
const formData = props.formData.filter((_, i) => i !== index)
66-
emit('update:formData', formData)
74+
const handleDelete = (index) => {
75+
formData.value.splice(index, 1)
76+
}
77+
78+
/** 表单校验 */
79+
const validate = () => {
80+
return formRef.value.validate()
81+
}
82+
83+
/** 表单值 **/
84+
const getData = () => {
85+
return formData.value
6786
}
87+
88+
defineExpose({ validate, getData })
6889
</script>

‎src/views/infra/demo02/DemoStudentForm.vue

Lines changed: 43 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -17,12 +17,14 @@
1717
<el-input v-model="formData.field3" placeholder="请输入字段 3" />
1818
</el-form-item>
1919
</el-form>
20-
<el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
21-
<el-tab-pane label="联系人信息" name="first">
22-
<DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
20+
<!-- 子表的表单 -->
21+
<el-tabs v-model="subTabsName">
22+
<el-tab-pane label="联系人信息" name="DemoStudentContact">
23+
<DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
24+
</el-tab-pane>
25+
<el-tab-pane label="地址信息" name="DemoStudentAddress">
26+
<DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
2327
</el-tab-pane>
24-
<el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
25-
<el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
2628
</el-tabs>
2729
<template #footer>
2830
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@@ -33,6 +35,7 @@
3335
<script setup lang="ts">
3436
import * as DemoStudentApi from '@/api/infra/demo02'
3537
import DemoStudentContactForm from './DemoStudentContactForm.vue'
38+
import DemoStudentAddressForm from './DemoStudentAddressForm.vue'
3639
3740
const { t } = useI18n() // 国际化
3841
const message = useMessage() // 消息弹窗
@@ -42,28 +45,36 @@ const dialogTitle = ref('') // 弹窗的标题
4245
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
4346
const formType = ref('') // 表单的类型：create - 新增；update - 修改
4447
const formData = ref({
45-
id: undefined,
46-
demoStudentContactList: [
47-
{
48-
name: '芋艿',
49-
mobile: '15601691300'
50-
}
51-
]
48+
id: undefined
49+
})
50+
const formRules = reactive({
51+
field2: [required]
5252
})
53-
const formRules = reactive({})
5453
const formRef = ref() // 表单 Ref
5554
55+
/** 子表的表单 */
56+
const demoStudentContactFormRef = ref()
57+
const demoStudentAddressFormRef = ref()
58+
const subTabsName = ref('DemoStudentContact')
59+
5660
/** 打开弹窗 */
5761
const open = async (type: string, id?: number) => {
5862
dialogVisible.value = true
5963
dialogTitle.value = t('action.' + type)
6064
formType.value = type
61-
// resetForm()
65+
resetForm()
6266
// 修改时，设置数据
6367
if (id) {
68+
// debugger
6469
formLoading.value = true
6570
try {
66-
formData.value = await DemoStudentApi.getDemoStudent(id)
71+
// formData.value = await DemoStudentApi.getDemoStudent(id)
72+
formData.value = {
73+
id: id,
74+
field1: '1',
75+
field2: '22',
76+
field3: '333'
77+
}
6778
} finally {
6879
formLoading.value = false
6980
}
@@ -75,13 +86,27 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
7586
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
7687
const submitForm = async () => {
7788
// 校验表单
78-
if (!formRef) return
79-
const valid = await formRef.value.validate()
80-
if (!valid) return
89+
await formRef.value.validate()
90+
// 校验子表单
91+
try {
92+
await demoStudentContactFormRef.value.validate()
93+
} catch (e) {
94+
subTabsName.value = 'DemoStudentContact'
95+
return
96+
}
97+
try {
98+
await demoStudentAddressFormRef.value.validate()
99+
} catch (e) {
100+
subTabsName.value = 'DemoStudentAddress'
101+
return
102+
}
81103
// 提交请求
82104
formLoading.value = true
83105
try {
84106
const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
107+
// 拼接子表的数据
108+
data.demoStudentContacts = demoStudentContactFormRef.value.getData()
109+
data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
85110
if (formType.value === 'create') {
86111
await DemoStudentApi.createDemoStudent(data)
87112
message.success(t('common.createSuccess'))

‎src/views/infra/demo02/index.vue

Lines changed: 13 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -11,12 +11,7 @@
1111
<el-form-item>
1212
<el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
1313
<el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
14-
<el-button
15-
type="primary"
16-
plain
17-
@click="openForm('create')"
18-
v-hasPermi="['infra:demo-student:create']"
19-
>
14+
<el-button type="primary" plain @click="openForm('create')">
2015
<Icon icon="ep:plus" class="mr-5px" /> 新增
2116
</el-button>
2217
<el-button
@@ -35,19 +30,10 @@
3530
<!-- 列表 -->
3631
<ContentWrap>
3732
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
38-
<el-table-column label="编号" align="center" prop="id">
39-
<template #default="scope">
40-
<dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.id" />
41-
</template>
42-
</el-table-column>
33+
<el-table-column label="编号" align="center" prop="id" />
4334
<el-table-column label="操作" align="center">
4435
<template #default="scope">
45-
<el-button
46-
link
47-
type="primary"
48-
@click="openForm('update', scope.row.id)"
49-
v-hasPermi="['infra:demo-student:update']"
50-
>
36+
<el-button link type="primary" @click="openForm('update', scope.row.id)">
5137
编辑
5238
</el-button>
5339
<el-button
@@ -98,9 +84,13 @@ const exportLoading = ref(false) // 导出的加载中
9884
const getList = async () => {
9985
loading.value = true
10086
try {
101-
const data = await DemoStudentApi.getDemoStudentPage(queryParams)
102-
list.value = data.list
103-
total.value = data.total
87+
// const data = await DemoStudentApi.getDemoStudentPage(queryParams)
88+
list.value = [
89+
{
90+
id: 1
91+
}
92+
]
93+
total.value = 10
10494
} finally {
10595
loading.value = false
10696
}
@@ -120,7 +110,10 @@ const resetQuery = () => {
120110
121111
/** 添加/修改操作 */
122112
const formRef = ref()
113+
// const demoStudentContactFormRef = ref()
123114
const openForm = (type: string, id?: number) => {
115+
// console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
116+
// demoStudentContactFormRef.value.validate()
124117
formRef.value.open(type, id)
125118
}
126119

0 commit comments

Comments
 (0)