主子表：同步三种模式的代码

(cherry picked from commit 9f9e0f8bda)
2023-11-10 19:54:55 +08:00
parent 95f6dd4bbf
commit 7613a3b454
16 changed files with 1294 additions and 87 deletions
--- a/src/views/infra/demo02/DemoStudentAddressForm.vue
+++ b/src/views/infra/demo02/DemoStudentAddressForm.vue
@ -0,0 +1,58 @@
+<template>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="100px"
+    v-loading="formLoading"
+  >
+    <el-form-item label="子字段 1" prop="field1">
+      <el-input v-model="formData.field1" placeholder="请输入字段 1" />
+    </el-form-item>
+    <el-form-item label="子字段 2" prop="field2">
+      <el-input v-model="formData.field2" placeholder="请输入字段 2" />
+    </el-form-item>
+    <el-form-item label="子字段 3" prop="field3">
+      <el-input v-model="formData.field3" placeholder="请输入字段 3" />
+    </el-form-item>
+  </el-form>
+</template>
+<script setup lang="ts">
+const props = defineProps<{
+  studentId: undefined // 学生编号
+}>()
+const formLoading = ref(false) // 表单的加载中
+const formData = ref({})
+const formRules = reactive({
+  field1: [required]
+})
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = {
+        field2: '番茄',
+        field3: '西瓜'
+      }
+    } else {
+      formData.value = {}
+    }
+  },
+  { immediate: true }
+)
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
+</script>
--- a/src/views/infra/demo02/DemoStudentContactForm.vue
+++ b/src/views/infra/demo02/DemoStudentContactForm.vue
@ -1,68 +1,89 @@
 <template>
-  <el-table :data="formData" :stripe="true" class="-mt-10px">
-    <el-table-column label="序号" type="index" width="60" />
-    <el-table-column label="名字" prop="name" width="300">
-      <template #default="scope">
-        <el-form-item label-width="0px" :inline-message="true" class="mb-0px!">
-          <el-input v-model="scope.row.name" placeholder="请输入名字" />
-        </el-form-item>
-      </template>
-    </el-table-column>
-    <el-table-column label="手机号码">
-      <template #default="{ row, $index }">
-        <el-form-item
-          label-width="0px"
-          :prop="`demoStudentContactList.${$index}.mobile`"
-          :rules="formRules.mobile"
-          :inline-message="true"
-          class="mb-0px!"
-        >
-          <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
-        </el-form-item>
-      </template>
-    </el-table-column>
-    <el-table-column align="center" fixed="right" label="操作" width="60">
-      <template #default="{ $index }">
-        <el-button @click="handleRemove($index)" link>—</el-button>
-      </template>
-    </el-table-column>
-  </el-table>
+  <el-form
+    ref="formRef"
+    :model="formData"
+    :rules="formRules"
+    label-width="0px"
+    v-loading="formLoading"
+    :inline-message="true"
+  >
+    <el-table :data="formData" class="-mt-10px">
+      <el-table-column label="序号" type="index" width="100" />
+      <el-table-column label="名字" prop="name" width="300">
+        <template #default="row">
+          <el-form-item class="mb-0px!">
+            <el-input v-model="row.name" placeholder="请输入名字" />
+          </el-form-item>
+        </template>
+      </el-table-column>
+      <el-table-column label="手机号码">
+        <template #default="{ row, $index }">
+          <el-form-item :prop="`${$index}.mobile`" :rules="formRules.mobile" class="mb-0px!">
+            <el-input type="number" placeholder="输入手机号码" v-model="row.mobile" />
+          </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">
 const props = defineProps<{
-  formData: any[]
+  studentId: undefined // 学生编号
 }>()
-// const formData = ref([
-//   {
-//     name: '芋艿',
-//     mobile: '15601691300'
-//   },
-//   {
-//     name: '土豆',
-//     mobile: '15601691234'
-//   }
-// ])
+const formLoading = ref(false) // 表单的加载中
+const formData = ref([])
 const formRules = reactive({
  mobile: [required]
 })
+const formRef = ref() // 表单 Ref
+
+/** 监听主表的关联字段的变化，加载对应的子表数据 */
+watch(
+  () => props.studentId,
+  (val) => {
+    if (val) {
+      formData.value = [
+        {
+          name: '芋艿',
+          mobile: '15601691300'
+        }
+      ]
+    } else {
+      formData.value = []
+    }
+  },
+  { immediate: true }
+)

 /** 新增按钮操作 */
-const emit = defineEmits(['update:formData'])
 const handleAdd = () => {
-  emit('update:formData', [
-    ...props.formData,
-    {
-      name: '土豆'
-    }
-  ])
+  formData.value.push({
+    name: '土豆'
+  })
 }

 /** 删除按钮操作 */
-const handleRemove = (index) => {
-  const formData = props.formData.filter((_, i) => i !== index)
-  emit('update:formData', formData)
+const handleDelete = (index) => {
+  formData.value.splice(index, 1)
 }
+
+/** 表单校验 */
+const validate = () => {
+  return formRef.value.validate()
+}
+
+/** 表单值 **/
+const getData = () => {
+  return formData.value
+}
+
+defineExpose({ validate, getData })
 </script>
--- a/src/views/infra/demo02/DemoStudentForm.vue
+++ b/src/views/infra/demo02/DemoStudentForm.vue
@ -17,12 +17,14 @@
        <el-input v-model="formData.field3" placeholder="请输入字段 3" />
      </el-form-item>
    </el-form>
-    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
-      <el-tab-pane label="联系人信息" name="first">
-        <DemoStudentContactForm v-model:form-data="formData.demoStudentContactList" />
+    <!-- 子表的表单 -->
+    <el-tabs v-model="subTabsName">
+      <el-tab-pane label="联系人信息" name="DemoStudentContact">
+        <DemoStudentContactForm ref="demoStudentContactFormRef" :student-id="formData.id" />
+      </el-tab-pane>
+      <el-tab-pane label="地址信息" name="DemoStudentAddress">
+        <DemoStudentAddressForm ref="demoStudentAddressFormRef" :student-id="formData.id" />
      </el-tab-pane>
-      <el-tab-pane label="地址信息" name="third">地址信息</el-tab-pane>
-      <el-tab-pane label="其它信息" name="fourth">其它信息</el-tab-pane>
    </el-tabs>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
@ -33,6 +35,7 @@
 <script setup lang="ts">
 import * as DemoStudentApi from '@/api/infra/demo02'
 import DemoStudentContactForm from './DemoStudentContactForm.vue'
+import DemoStudentAddressForm from './DemoStudentAddressForm.vue'

 const { t } = useI18n() // 国际化
 const message = useMessage() // 消息弹窗
@ -42,28 +45,36 @@ const dialogTitle = ref('') // 弹窗的标题
 const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
 const formType = ref('') // 表单的类型：create - 新增；update - 修改
 const formData = ref({
-  id: undefined,
-  demoStudentContactList: [
-    {
-      name: '芋艿',
-      mobile: '15601691300'
-    }
-  ]
+  id: undefined
+})
+const formRules = reactive({
+  field2: [required]
 })
-const formRules = reactive({})
 const formRef = ref() // 表单 Ref

+/** 子表的表单 */
+const demoStudentContactFormRef = ref()
+const demoStudentAddressFormRef = ref()
+const subTabsName = ref('DemoStudentContact')
+
 /** 打开弹窗 */
 const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
-  // resetForm()
+  resetForm()
  // 修改时，设置数据
  if (id) {
+    // debugger
    formLoading.value = true
    try {
-      formData.value = await DemoStudentApi.getDemoStudent(id)
+      // formData.value = await DemoStudentApi.getDemoStudent(id)
+      formData.value = {
+        id: id,
+        field1: '1',
+        field2: '22',
+        field3: '333'
+      }
    } finally {
      formLoading.value = false
    }
@ -75,13 +86,27 @@ defineExpose({ open }) // 提供 open 方法，用于打开弹窗
 const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
 const submitForm = async () => {
  // 校验表单
-  if (!formRef) return
-  const valid = await formRef.value.validate()
-  if (!valid) return
+  await formRef.value.validate()
+  // 校验子表单
+  try {
+    await demoStudentContactFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentContact'
+    return
+  }
+  try {
+    await demoStudentAddressFormRef.value.validate()
+  } catch (e) {
+    subTabsName.value = 'DemoStudentAddress'
+    return
+  }
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as DemoStudentApi.DemoStudentVO
+    // 拼接子表的数据
+    data.demoStudentContacts = demoStudentContactFormRef.value.getData()
+    data.demoStudentAddress = demoStudentAddressFormRef.value.getData()
    if (formType.value === 'create') {
      await DemoStudentApi.createDemoStudent(data)
      message.success(t('common.createSuccess'))
--- a/src/views/infra/demo02/index.vue
+++ b/src/views/infra/demo02/index.vue
@ -11,12 +11,7 @@
      <el-form-item>
        <el-button @click="handleQuery"><Icon icon="ep:search" class="mr-5px" /> 搜索</el-button>
        <el-button @click="resetQuery"><Icon icon="ep:refresh" class="mr-5px" /> 重置</el-button>
-        <el-button
-          type="primary"
-          plain
-          @click="openForm('create')"
-          v-hasPermi="['infra:demo-student:create']"
-        >
+        <el-button type="primary" plain @click="openForm('create')">
          <Icon icon="ep:plus" class="mr-5px" /> 新增
        </el-button>
        <el-button
@ -35,19 +30,10 @@
  <!-- 列表 -->
  <ContentWrap>
    <el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
-      <el-table-column label="编号" align="center" prop="id">
-        <template #default="scope">
-          <dict-tag :type="DICT_TYPE.$dictType.toUpperCase()" :value="scope.row.id" />
-        </template>
-      </el-table-column>
+      <el-table-column label="编号" align="center" prop="id" />
      <el-table-column label="操作" align="center">
        <template #default="scope">
-          <el-button
-            link
-            type="primary"
-            @click="openForm('update', scope.row.id)"
-            v-hasPermi="['infra:demo-student:update']"
-          >
+          <el-button link type="primary" @click="openForm('update', scope.row.id)">
            编辑
          </el-button>
          <el-button
@ -98,9 +84,13 @@ const exportLoading = ref(false) // 导出的加载中
 const getList = async () => {
  loading.value = true
  try {
-    const data = await DemoStudentApi.getDemoStudentPage(queryParams)
-    list.value = data.list
-    total.value = data.total
+    // const data = await DemoStudentApi.getDemoStudentPage(queryParams)
+    list.value = [
+      {
+        id: 1
+      }
+    ]
+    total.value = 10
  } finally {
    loading.value = false
  }
@ -120,7 +110,10 @@ const resetQuery = () => {

 /** 添加/修改操作 */
 const formRef = ref()
+// const demoStudentContactFormRef = ref()
 const openForm = (type: string, id?: number) => {
+  // console.log(demoStudentContactFormRef, 'xx demoStudentContactFormRef xx')
+  // demoStudentContactFormRef.value.validate()
  formRef.value.open(type, id)
 }