自己开发页面引入online模块
概述
因为之前对 online 部分进行过重构(主要是将原有的列表和表单耦合在一起的功能给分开),这里介绍下怎么在自己开发的页面中引入 online 模块的列表,表单.
引入 online 列表
- 列表文件位置位于
src\views\modules\online\cgform\auto\OnlineList.vue - 列表的功能包括查询项(可配置是否显示),表格,表格操作列(可配置是否显示),表格上方 toolbar 按钮(可配置是否显示)
- 列表只用传递一个
codeprop 就可以正常工作, 当然也可以接收另外的一些 prop 如隐藏按钮,查询项 - 配置的列表的 JS 增强,自定义按钮可以正常使用
- 列表点击新增,编辑,详情分别会触发 add/edit/detail 事件,需要手动监听事件对 online 表单进行操作,可见最后的代码示例
引入 online 表单
- 表单文件位置位于
src\views\modules\online\cgform\auto\OnlineForm.vue - 表单的功能包括表单字段渲染,提交功能. 注意: 新的表单不包含模态框, 需要手动在外层包裹一个
Modal组件 - 配置的表单的 JS 增强,自定义按钮可以正常使用
- 表单可以传递一个
codeprop, 也可以在手动调用 add,edit,detail 方法时候传递 code 参数 - 表单内部定义了 add/detail/edit 方法, 用于新增/编辑/详情业务的显示, 新增可以传递表单默认值,对于编辑和详情还需要额外传递一个数据 id 参数
引入完整的 online 模块
- online 入口页面文件位置位于
src\views\modules\online\cgform\auto\OnlinePage.vue - 这个组件包含完整的 online 列表、表单功能.
- 配置的各种 JS 增强,自定义按钮可以正常使用
- 传递一个
codeprop 就可以正常工作, 也可以传递listProps和formProps给列表和表单传递属性
代码示例
示例文件位置位于: src\views\onlineDemo\list-tab.vue
<template>
<a-card class="form-page">
<a-tabs v-model="tabKey" @change="onTabChange">
<a-tab-pane key="list-1" tab="列表1只显示表格">
<OnlineList
code="da94102aebae4f6db76d3405a32b288b"
@add="() => onAdd('da94102aebae4f6db76d3405a32b288b', {})"
@edit="id => onEdit('da94102aebae4f6db76d3405a32b288b', id)"
@detail="id => onDetail('da94102aebae4f6db76d3405a32b288b', id)"
hideActionColumn
hideSearch
hideToolbar
hideTableSelect
/>
</a-tab-pane>
<a-tab-pane key="form-1" tab="表单1详情">
<OnlineForm code="da94102aebae4f6db76d3405a32b288b" :inModal="false" ref="form1" />
</a-tab-pane>
<a-tab-pane key="list-2" tab="列表2完整功能" class="list-tab-container">
<OnlineList
code="b8d424fcb761422db519250612cb341c"
@add="() => onAdd('b8d424fcb761422db519250612cb341c', { age2: 99 })"
@edit="id => onEdit('b8d424fcb761422db519250612cb341c', id)"
@detail="id => onDetail('b8d424fcb761422db519250612cb341c', id)"
/>
</a-tab-pane>
<a-tab-pane key="form-2" tab="表单2编辑">
<OnlineForm code="b8d424fcb761422db519250612cb341c" :inModal="false" ref="form2" />
</a-tab-pane>
<a-tab-pane key="listAndForm" tab="完整功能">
<OnlinePage code="ea146a674a104480a6bfaea51ee793fe" />
</a-tab-pane>
</a-tabs>
<a-modal
:visible="modalState.visible"
:footer="null"
@cancel="() => (modalState.visible = false)"
:title="modalState.title"
>
<OnlineForm :code="modalState.code" inModal @close="() => (modalState.visible = false)" ref="modalForm" />
</a-modal>
</a-card>
</template>
<script>
import OnlineList from '@/views/modules/online/cgform/auto/OnlineList'
import OnlineForm from '@/views/modules/online/cgform/auto/OnlineForm'
import OnlinePage from '@/views/modules/online/cgform/auto/OnlinePage'
export default {
name: 'FormDemo',
components: {
OnlineForm,
OnlineList,
OnlinePage,
},
data() {
return {
tabKey: 'list-1',
modalState: {
visible: false,
title: '',
code: '',
action: '',
dataId: '',
},
}
},
created() {
console.log('created==========================')
},
methods: {
onTabChange(key) {
if (key === 'form-1') {
this.$nextTick(() => {
this.$refs.form1.detail({ id: '1607932603350949890' })
})
}
if (key === 'form-2') {
this.$nextTick(() => {
this.$refs.form2.edit({ id: '1590614094256992258' })
})
}
},
onAdd(code, defaultFormData) {
this.modalState = {
visible: true,
title: '添加',
code,
}
this.$nextTick(() => {
this.$refs.modalForm.add({ defaultFormData })
})
},
onEdit(code, id) {
this.modalState = {
visible: true,
title: '编辑',
code,
}
this.$nextTick(() => {
this.$refs.modalForm.edit({ id })
})
},
onDetail(code, id) {
this.modalState = {
visible: true,
title: '详情',
code,
}
this.$nextTick(() => {
this.$refs.modalForm.detail({ id })
})
},
},
}
</script>
//
<style lang="less" scoped>
.form-page {
/deep/ .list-tab-container {
.table-page-search-wrapper {
background-color: #fff;
}
}
}
</style>
示例截图
感谢您的反馈。如果您有关于如何使用 KubeSphere 的具体问题，请在 Slack 上提问。如果您想报告问题或提出改进建议，请在 GitHub 存储库中打开问题。
上一篇
页面内容