routing
Project routing configuration is stored under src/router/routes. src/router/routes/modules is used to store routing modules, and files in this directory will be automatically registered.
Routing related uses and concepts
Exercise - Based on the previous table, add new functions, click the new button, jump to the page, and add data.
Previous related records: Basic use and exercises of Table component
Add addPage page under src/views/myComponents/tableTest
Configure routing
import type {
AppRouteModule } from '/@/router/types';
import {
LAYOUT } from '/@/router/constant';
import {
t } from '/@/hooks/web/useI18n';
const testRoute: AppRouteModule = {
path: '/testRoute',
name: 'TestRoute',
component: LAYOUT,
redirect: '/testRoute/test1',
meta: {
orderNo: 20,
icon: 'ph:swatches-duotone',
title: t('routes.test.testRoute'),
},
children: [
{
path: 'test1',
name: 'test1',
component: () => import('/@/views/myComponents/test1.vue'),
meta: {
// affix: true,
title: t('routes.test.test1'),
},
},
{
path: 'test2',
name: 'test2',
component: () => import('/@/views/myComponents/test2.vue'),
meta: {
title: t('routes.test.test2'),
},
},
{
path: 'test3',
name: 'test3',
component: () => import('/@/views/myComponents/test3.vue'),
meta: {
title: t('routes.test.test3'),
},
},
{
path: 'tableTest',
name: 'tableTest',
component: () => import('/@/views/myComponents/tableTest/basicTable.vue'),
meta: {
title: t('routes.test.tableTest'),
},
},
{
path:'addPage',
name:'addPage',
component: () => import('/@/views/myComponents/tableTest/addPage/index.vue'),
meta:{
title:('routes.test.addPage'),
// 菜单中不显示
hideMenu: true
}
}
],
};
export default testRoute;
addPage/index.vue
<template>
<div
:style="{
overflow: 'hidden',
position: 'relative',
height: '100%',
backgroundColor: 'white',
}"
>
<a-card :bordered="true">
<div>
<div>
<BasicForm @register="registerForm" />
</div>
</div>
</a-card>
</div>
</template>
<script lang="ts">
import {
defineComponent } from 'vue';
import {
Card } from 'ant-design-vue';
import {
BasicForm, useForm } from '/@/components/Form';
import {
useMessage } from '/@/hooks/web/useMessage';
import {
useGo } from '/@/hooks/web/usePage';
import {
schemasView } from '../data';
export default defineComponent({
name: 'addPage',
components: {
BasicForm,
[Card.name]: Card,
},
setup() {
const go = useGo();
const {
createMessage } = useMessage();
const [registerForm, {
validate, getFieldsValue, resetFields, setFieldsValue }] = useForm({
labelCol: {
span: 8,
},
wrapperCol: {
span: 16,
},
baseColProps: {
span: 8,
},
schemas: schemasView,
actionColOptions: {
offset: 15,
span: 12,
},
submitButtonOptions: {
text: '保存',
},
resetButtonOptions: {
text: '返回',
},
submitFunc: customSubmit,
resetFunc: customReset,
});
async function customSubmit() {
await validate();
const values = await getFieldsValue();
console.log('保存数据', values);
createMessage.success('保存成功');
}
// 返回按钮跳转回表格页面
async function customReset() {
resetFields();
go('/testRoute/tableTest');
}
return {
registerForm,
validate,
getFieldsValue,
resetFields,
setFieldsValue,
customSubmit,
};
},
});
</script>
<style scoped></style>
basicTable.vue
<template>
<div
:style="{
overflow: 'hidden',
position: 'relative',
height: '100%',
}"
>
<!-- 注册table -->
<BasicTable @register="registerTable">
<template #action="{ record }">
<TableAction
:actions="[
{
tooltip: '查看',
icon: 'clarity:info-standard-line',
onClick: handleView.bind(null, { data: record }),
},
{
tooltip: '编辑',
icon: 'clarity:note-edit-line',
onClick: handleEdit.bind(null, { data: record }),
},
{
tooltip: '删除',
color: 'error',
icon: 'ant-design:delete-outlined',
popConfirm: {
title: '是否确定删除？',
confirm: handleDel.bind(null, record),
},
},
]"
/>
</template>
<template #toolbar>
<a-button type="primary" @click="handleAdd()">{
{ '新增' }}</a-button>
</template>
</BasicTable>
<ViewDrawer @reload="handleReload" @register="registerDrawer" />
<EditModal @reload="handleReload" @register="registerModal" />
</div>
</template>
<script lang="ts">
import {
defineComponent } from 'vue';
import {
router} from '/@/router'
import {
formConfig, columns, initData } from './data';
import {
BasicTable, useTable, TableAction } from '/@/components/Table';
import {
useDrawer } from '/@/components/Drawer';
import {
useModal } from '/@/components/Modal';
import {
useMessage } from '/@/hooks/web/useMessage';
import ViewDrawer from './ViewDrawer.vue';
import EditModal from './EditModal.vue';
export default defineComponent({
name: 'tableTest',
components: {
BasicTable,
TableAction,
ViewDrawer,
EditModal
},
setup() {
const data = initData();
const {
createMessage } = useMessage();
// 设置table
const [registerTable, {
reload }] = useTable({
title: '查询结果',
dataSource: data,
columns: columns,
bordered: true,
useSearchForm: true, //开启搜索区域
formConfig: formConfig,
actionColumn: {
width: 120,
title: '操作',
dataIndex: 'action',
slots: {
customRender: 'action' },
},
rowSelection: {
type: 'radio' },
pagination: {
pageSize: 10 },
showTableSetting: true,
tableSetting: {
fullScreen: true },
showIndexColumn: true,
indexColumnProps: {
fixed: 'left' },
});
// 注册Drawer
const [registerDrawer, {
openDrawer }] = useDrawer();
// 配置Modal
const [registerModal, {
openModal }] = useModal();
// 新增按钮
function handleAdd(){
router.push({
path:'/testRoute/addPage'
})
}
// 查看按钮
function handleView({
data }) {
openDrawer(true, data);
}
// 编辑按钮
function handleEdit({
data }) {
openModal(true, data);
}
// 删除按钮
function handleDel(record){
console.log('删除数据',record);
createMessage.success('删除成功');
reload()
}
function handleReload() {
reload();
}
return {
registerTable,
reload,
// 新增路由跳转
handleAdd,
// 查看抽屉
registerDrawer,
handleView,
handleReload,
// 编辑弹窗
registerModal,
handleEdit,
// 删除
handleDel
};
},
});
</script>
<style scoped></style>
Page effect
Route jump to new page