root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

代码生成：支持设置主子表的信息

Browse Source 
(cherry picked from commit 45656562a8)
This commit is contained in:
YunaiV 2023-11-14 09:50:54 +08:00 committed by shizhong
parent 9449829fd3
commit 3524e3525b
10 changed files with 612 additions and 70 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
src/api/infra/codegen/index.ts
View File

@ -1,6 +1,11 @@
import request from '@/config/axios'
import type { CodegenUpdateReqVO, CodegenCreateListReqVO } from './types'
// 查询列表代码生成表定义
export const getCodegenTableList = (dataSourceConfigId: number) => {
return request.get({ url: '/infra/codegen/table/list?dataSourceConfigId=' + dataSourceConfigId })
}
// 查询列表代码生成表定义
export const getCodegenTablePageApi = (params) => {
return request.get({ url: '/infra/codegen/table/page', params })
@ -26,11 +31,6 @@ export const syncCodegenFromDBApi = (id: number) => {
return request.put({ url: '/infra/codegen/sync-from-db?tableId=' + id })
}
// 基于 SQL 建表语句，同步数据库的表和字段定义
export const syncCodegenFromSQLApi = (id: number, sql: string) => {
return request.put({ url: '/infra/codegen/sync-from-sql?tableId=' + id + '&sql=' + sql })
}
// 预览生成代码
export const previewCodegenApi = (id: number) => {
return request.get({ url: '/infra/codegen/preview?tableId=' + id })

48
src/api/infra/demo12/index.ts
View File

@ -44,14 +44,52 @@ export const exportDemo12Student = async (params) => {
// ==================== 子表（学生联系人） ====================
// 获得学生联系人列表
export const getDemo12StudentContactListByStudentId = async (studentId) => {
return await request.get({ url: `/infra/demo12-student/demo12-student/list-by-student-id?studentId=` + studentId })
// 获得学生联系人分页
export const getDemo12StudentContactPage = async (params) => {
return await request.get({ url: `/infra/demo12-student/demo12-student-contact/page`, params })
}
// 新增学生联系人
export const createDemo12StudentContact = async (data) => {
return await request.post({ url: `/infra/demo12-student/demo12-student-contact/create`, data })
}
// 修改学生联系人
export const updateDemo12StudentContact = async (data) => {
return await request.put({ url: `/infra/demo12-student/demo12-student-contact/update`, data })
}
// 删除学生联系人
export const deleteDemo12StudentContact = async (id: number) => {
return await request.delete({ url: `/infra/demo12-student/demo12-student-contact/delete?id=` + id })
}
// 获得学生联系人
export const getDemo12StudentContact = async (id: number) => {
return await request.get({ url: `/infra/demo12-student/demo12-student-contact/get?id=` + id })
}
// ==================== 子表（学生班主任） ====================
// 获得学生班主任分页
export const getDemo12StudentTeacherPage = async (params) => {
return await request.get({ url: `/infra/demo12-student/demo12-student-teacher/page`, params })
}
// 新增学生班主任
export const createDemo12StudentTeacher = async (data) => {
return await request.post({ url: `/infra/demo12-student/demo12-student-teacher/create`, data })
}
// 修改学生班主任
export const updateDemo12StudentTeacher = async (data) => {
return await request.put({ url: `/infra/demo12-student/demo12-student-teacher/update`, data })
}
// 删除学生班主任
export const deleteDemo12StudentTeacher = async (id: number) => {
return await request.delete({ url: `/infra/demo12-student/demo12-student-teacher/delete?id=` + id })
}
// 获得学生班主任
export const getDemo12StudentTeacherByStudentId = async (studentId) => {
return await request.get({ url: `/infra/demo12-student/demo12-student/get-by-student-id?studentId=` + studentId })
export const getDemo12StudentTeacher = async (id: number) => {
return await request.get({ url: `/infra/demo12-student/demo12-student-teacher/get?id=` + id })
}

2
src/views/infra/codegen/EditTable.vue
View File

@ -8,7 +8,7 @@
<column-info-form ref="columnInfoRef" :columns="formData.columns" />
</el-tab-pane>
<el-tab-pane label="生成信息" name="generateInfo">
<generate-info-form ref="generateInfoRef" :table="formData.table" />
<generate-info-form ref="generateInfoRef" :table="formData.table" :columns="formData.columns" />
</el-tab-pane>
</el-tabs>
<el-form>

94
src/views/infra/codegen/components/GenerateInfoForm.vue
View File

@ -3,7 +3,7 @@
<el-row>
<el-col :span="12">
<el-form-item label="生成模板" prop="templateType">
<el-select v-model="formData.templateType" @change="tplSelectChange">
<el-select v-model="formData.templateType">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.INFRA_CODEGEN_TEMPLATE_TYPE)"
:key="dict.value"
@ -246,48 +246,68 @@
</el-form-item>
</el-col>
</el-row>
<el-row v-show="formData.tplCategory === 'sub'">
<h4 class="form-header">关联信息</h4>
<!-- 主表信息 -->
<el-row v-if="formData.templateType === 15">
<el-col :span="24">
<h4 class="form-header">主表信息</h4>
</el-col>
<el-col :span="12">
<el-form-item>
<el-form-item prop="masterTableId">
<template #label>
<span>
关联子表的表名
<el-tooltip content="关联子表的表名， 如：sys_user" placement="top">
关联的主表
<el-tooltip content="关联主表（父表）的表名， 如：system_user" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<el-select v-model="formData.subTableName" placeholder="请选择" @change="subSelectChange">
<el-select v-model="formData.masterTableId" placeholder="请选择">
<el-option
v-for="(table0, index) in tables"
:key="index"
:label="table0.tableName + '：' + table0.tableComment"
:value="table0.tableName"
:value="table0.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item>
<el-form-item prop="subJoinColumnId">
<template #label>
<span>
子表关联的外键名
<el-tooltip content="子表关联的外键名， 如：user_id" placement="top">
子表关联的字段
<el-tooltip content="子表关联的字段， 如：user_id" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<el-select v-model="formData.subTableFkName" placeholder="请选择">
<el-select v-model="formData.subJoinColumnId" placeholder="请选择">
<el-option
v-for="(column, index) in subColumns"
v-for="(column, index) in props.columns"
:key="index"
:label="column.columnName + '：' + column.columnComment"
:value="column.columnName"
:value="column.id"
/>
</el-select>
</el-form-item>
</el-col>
<el-col :span="12">
<el-form-item prop="subJoinMany">
<template #label>
<span>
关联关系
<el-tooltip content="主表与子表的关联关系" placement="top">
<Icon icon="ep:question-filled" />
</el-tooltip>
</span>
</template>
<el-radio-group v-model="formData.subJoinMany" placeholder="请选择">
<el-radio :label="true">一对多</el-radio>
<el-radio :label="false">一对一</el-radio>
</el-radio-group>
</el-form-item>
</el-col>
</el-row>
</el-form>
</template>
@ -305,6 +325,10 @@ const props = defineProps({
table: {
type: Object as PropType<Nullable<CodegenApi.CodegenTableVO>>,
default: () => null
},
columns: {
type: Array as unknown as PropType<CodegenApi.CodegenColumnVO[]>,
default: () => null
}
})
@ -323,9 +347,10 @@ const formData = ref({
treeParentCode: '',
treeName: '',
tplCategory: '',
subTableName: '',
subTableFkName: '',
genType: ''
genType: '',
masterTableId: undefined,
subJoinColumnId: undefined,
subJoinMany: undefined
})
const rules = reactive({
@ -336,41 +361,27 @@ const rules = reactive({
businessName: [required],
businessPackage: [required],
className: [required],
classComment: [required]
classComment: [required],
masterTableId: [required],
subJoinColumnId: [required],
subJoinMany: [required]
})
const tables = ref([])
const subColumns = ref([])
const tables = ref([]) // 表定义列表
const menus = ref<any[]>([])
const menuTreeProps = {
label: 'name'
}
/** 选择子表名触发 */
const subSelectChange = () => {
formData.value.subTableFkName = ''
}
/** 选择生成模板触发 */
const tplSelectChange = (value) => {
if (value !== 1) {
// TODO 芋艿：暂时不考虑支持树形结构
message.error(
'暂时不考虑支持【树形】和【主子表】的代码生成。原因是：导致 vm 模板过于复杂，不利于胖友二次开发'
)
return false
}
if (value !== 'sub') {
formData.value.subTableName = ''
formData.value.subTableFkName = ''
}
}
watch(
() => props.table,
(table) => {
async (table) => {
if (!table) return
formData.value = table as any
// 加载表列表
if (table.dataSourceConfigId >= 0) {
tables.value = await CodegenApi.getCodegenTableList(formData.value.dataSourceConfigId)
}
},
{
deep: true,
@ -380,6 +391,7 @@ watch(
onMounted(async () => {
try {
// 加载菜单
const resp = await MenuApi.getSimpleMenusList()
menus.value = handleTree(resp)
} catch {}

2
src/views/infra/demo12/Demo12StudentForm.vue
View File

@ -42,7 +42,7 @@
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="头像">
<el-form-item label="头像" prop="avatar">
<UploadImg v-model="formData.avatar" />
</el-form-item>
<el-form-item label="附件" prop="video">

152
src/views/infra/demo12/components/Demo12StudentContactForm.vue
View File

@ -1,5 +1,155 @@
<template>
<div>123</div>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<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="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker
v-model="formData.birthday"
type="date"
value-format="x"
placeholder="选择出生日期"
/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="formData.sex" placeholder="请选择性别">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="是否有效" prop="enabled">
<el-radio-group v-model="formData.enabled">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<UploadImg v-model="formData.avatar" />
</el-form-item>
<el-form-item label="附件" prop="video">
<UploadFile v-model="formData.video" />
</el-form-item>
<el-form-item label="备注" prop="memo">
<Editor v-model="formData.memo" height="150px" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import * as Demo12StudentApi from '@/api/infra/demo12'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
studentId: undefined,
name: undefined,
description: undefined,
birthday: undefined,
sex: undefined,
enabled: undefined,
avatar: undefined,
video: undefined,
memo: undefined
})
const formRules = reactive({
studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number, studentId: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
formData.value.studentId = studentId
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await Demo12StudentApi.getDemo12StudentContact(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value
if (formType.value === 'create') {
await Demo12StudentApi.createDemo12StudentContact(data)
message.success(t('common.createSuccess'))
} else {
await Demo12StudentApi.updateDemo12StudentContact(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
studentId: undefined,
name: undefined,
description: undefined,
birthday: undefined,
sex: undefined,
enabled: undefined,
avatar: undefined,
video: undefined,
memo: undefined
}
formRef.value?.resetFields()
}
</script>

95
src/views/infra/demo12/components/Demo12StudentContactList.vue
View File

@ -1,6 +1,14 @@
<template>
<!-- 列表 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['infra:demo12-student:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="学生编号" align="center" prop="studentId" />
@ -33,31 +41,108 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['infra:demo12-student:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:demo12-student:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<Demo12StudentContactForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import * as Demo12StudentApi from '@/api/infra/demo12'
import Demo12StudentContactForm from './Demo12StudentContactForm.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps<{
studentId: undefined // 学生编号（主表的关联字段）
}>()
const loading = ref(true) // 列表的加载中
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
studentId: undefined
})
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.studentId,
(val) => {
queryParams.studentId = val
handleQuery()
},
{ immediate: false }
)
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
list.value = await Demo12StudentApi.getDemo12StudentContactListByStudentId(studentId.props)
const data = await Demo12StudentApi.getDemo12StudentContactPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(() => {
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
})
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
if (!props.studentId) {
message.error('请选择一个学生')
return
}
formRef.value.open(type, id, props.studentId)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await Demo12StudentApi.deleteDemo12StudentContact(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
</script>

152
src/views/infra/demo12/components/Demo12StudentTeacherForm.vue
View File

@ -1,5 +1,155 @@
<template>
<div>123</div>
<Dialog :title="dialogTitle" v-model="dialogVisible">
<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="description">
<el-input v-model="formData.description" type="textarea" placeholder="请输入简介" />
</el-form-item>
<el-form-item label="出生日期" prop="birthday">
<el-date-picker
v-model="formData.birthday"
type="date"
value-format="x"
placeholder="选择出生日期"
/>
</el-form-item>
<el-form-item label="性别" prop="sex">
<el-select v-model="formData.sex" placeholder="请选择性别">
<el-option
v-for="dict in getIntDictOptions(DICT_TYPE.SYSTEM_USER_SEX)"
:key="dict.value"
:label="dict.label"
:value="dict.value"
/>
</el-select>
</el-form-item>
<el-form-item label="是否有效" prop="enabled">
<el-radio-group v-model="formData.enabled">
<el-radio
v-for="dict in getBoolDictOptions(DICT_TYPE.INFRA_BOOLEAN_STRING)"
:key="dict.value"
:label="dict.value"
>
{{ dict.label }}
</el-radio>
</el-radio-group>
</el-form-item>
<el-form-item label="头像" prop="avatar">
<UploadImg v-model="formData.avatar" />
</el-form-item>
<el-form-item label="附件" prop="video">
<UploadFile v-model="formData.video" />
</el-form-item>
<el-form-item label="备注" prop="memo">
<Editor v-model="formData.memo" height="150px" />
</el-form-item>
</el-form>
<template #footer>
<el-button @click="submitForm" type="primary" :disabled="formLoading">确 定</el-button>
<el-button @click="dialogVisible = false">取 消</el-button>
</template>
</Dialog>
</template>
<script setup lang="ts">
import { getIntDictOptions, getBoolDictOptions, DICT_TYPE } from '@/utils/dict'
import * as Demo12StudentApi from '@/api/infra/demo12'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const formData = ref({
id: undefined,
studentId: undefined,
name: undefined,
description: undefined,
birthday: undefined,
sex: undefined,
enabled: undefined,
avatar: undefined,
video: undefined,
memo: undefined
})
const formRules = reactive({
studentId: [{ required: true, message: '学生编号不能为空', trigger: 'blur' }],
name: [{ required: true, message: '名字不能为空', trigger: 'blur' }],
description: [{ required: true, message: '简介不能为空', trigger: 'blur' }],
birthday: [{ required: true, message: '出生日期不能为空', trigger: 'blur' }],
sex: [{ required: true, message: '性别不能为空', trigger: 'change' }],
enabled: [{ required: true, message: '是否有效不能为空', trigger: 'blur' }],
avatar: [{ required: true, message: '头像不能为空', trigger: 'blur' }],
memo: [{ required: true, message: '备注不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref
/** 打开弹窗 */
const open = async (type: string, id?: number, studentId: number) => {
dialogVisible.value = true
dialogTitle.value = t('action.' + type)
formType.value = type
resetForm()
formData.value.studentId = studentId
// 修改时，设置数据
if (id) {
formLoading.value = true
try {
formData.value = await Demo12StudentApi.getDemo12StudentTeacher(id)
} finally {
formLoading.value = false
}
}
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗
/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
// 校验表单
await formRef.value.validate()
// 提交请求
formLoading.value = true
try {
const data = formData.value
if (formType.value === 'create') {
await Demo12StudentApi.createDemo12StudentTeacher(data)
message.success(t('common.createSuccess'))
} else {
await Demo12StudentApi.updateDemo12StudentTeacher(data)
message.success(t('common.updateSuccess'))
}
dialogVisible.value = false
// 发送操作成功的事件
emit('success')
} finally {
formLoading.value = false
}
}
/** 重置表单 */
const resetForm = () => {
formData.value = {
id: undefined,
studentId: undefined,
name: undefined,
description: undefined,
birthday: undefined,
sex: undefined,
enabled: undefined,
avatar: undefined,
video: undefined,
memo: undefined
}
formRef.value?.resetFields()
}
</script>

99
src/views/infra/demo12/components/Demo12StudentTeacherList.vue
View File

@ -1,6 +1,14 @@
<template>
<!-- 列表 -->
<ContentWrap>
<el-button
type="primary"
plain
@click="openForm('create')"
v-hasPermi="['infra:demo12-student:create']"
>
<Icon icon="ep:plus" class="mr-5px" /> 新增
</el-button>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="学生编号" align="center" prop="studentId" />
@ -33,35 +41,108 @@
:formatter="dateFormatter"
width="180px"
/>
<el-table-column label="操作" align="center">
<template #default="scope">
<el-button
link
type="primary"
@click="openForm('update', scope.row.id)"
v-hasPermi="['infra:demo12-student:update']"
>
编辑
</el-button>
<el-button
link
type="danger"
@click="handleDelete(scope.row.id)"
v-hasPermi="['infra:demo12-student:delete']"
>
删除
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页 -->
<Pagination
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getList"
/>
</ContentWrap>
<!-- 表单弹窗：添加/修改 -->
<Demo12StudentTeacherForm ref="formRef" @success="getList" />
</template>
<script setup lang="ts">
import { DICT_TYPE } from '@/utils/dict'
import * as Demo12StudentApi from '@/api/infra/demo12'
import Demo12StudentTeacherForm from './Demo12StudentTeacherForm.vue'
const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const props = defineProps<{
studentId: undefined // 学生编号（主表的关联字段）
}>()
const loading = ref(true) // 列表的加载中
const loading = ref(false) // 列表的加载中
const list = ref([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
pageNo: 1,
pageSize: 10,
studentId: undefined
})
/** 监听主表的关联字段的变化，加载对应的子表数据 */
watch(
() => props.studentId,
(val) => {
queryParams.studentId = val
handleQuery()
},
{ immediate: false }
)
/** 查询列表 */
const getList = async () => {
loading.value = true
try {
const data = await Demo12StudentApi.getDemo12StudentTeacherByStudentId(studentId.props)
if (!data) {
return
}
list.value.push(data)
const data = await Demo12StudentApi.getDemo12StudentTeacherPage(queryParams)
list.value = data.list
total.value = data.total
} finally {
loading.value = false
}
}
/** 初始化 **/
onMounted(() => {
/** 搜索按钮操作 */
const handleQuery = () => {
queryParams.pageNo = 1
getList()
})
}
/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
if (!props.studentId) {
message.error('请选择一个学生')
return
}
formRef.value.open(type, id, props.studentId)
}
/** 删除按钮操作 */
const handleDelete = async (id: number) => {
try {
// 删除的二次确认
await message.delConfirm()
// 发起删除
await Demo12StudentApi.deleteDemo12StudentTeacher(id)
message.success(t('common.delSuccess'))
// 刷新列表
await getList()
} catch {}
}
</script>

28
src/views/infra/demo12/index.vue
View File

@ -94,7 +94,14 @@
<!-- 列表 -->
<ContentWrap>
<el-table v-loading="loading" :data="list" :stripe="true" :show-overflow-tooltip="true">
<el-table
v-loading="loading"
:data="list"
:stripe="true"
:show-overflow-tooltip="true"
highlight-current-row
@current-change="handleCurrentChange"
>
<el-table-column label="编号" align="center" prop="id" />
<el-table-column label="名字" align="center" prop="name" />
<el-table-column label="简介" align="center" prop="description" />
@ -157,6 +164,17 @@
<!-- 表单弹窗：添加/修改 -->
<Demo12StudentForm ref="formRef" @success="getList" />
<!-- 子表的列表 -->
<ContentWrap>
<el-tabs model-value="demo12StudentContact">
<el-tab-pane label="学生联系人" name="demo12StudentContact">
<Demo12StudentContactList :student-id="currentRow.id" />
</el-tab-pane>
<el-tab-pane label="学生班主任" name="demo12StudentTeacher">
<Demo12StudentTeacherList :student-id="currentRow.id" />
</el-tab-pane>
</el-tabs>
</ContentWrap>
</template>
<script setup lang="ts">
@ -165,6 +183,8 @@ import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import * as Demo12StudentApi from '@/api/infra/demo12'
import Demo12StudentForm from './Demo12StudentForm.vue'
import Demo12StudentContactList from './components/Demo12StudentContactList.vue'
import Demo12StudentTeacherList from './components/Demo12StudentTeacherList.vue'
defineOptions({ name: 'InfraDemo12Student' })
@ -245,6 +265,12 @@ const handleExport = async () => {
}
}
/** 选中行操作 */
const currentRow = ref({}) // 选中行
const handleCurrentChange = (row) => {
currentRow.value = row
}
/** 初始化 **/
onMounted(() => {
getList()