Skip to content

B
basic-vue-admin
提交 19c76089 作者: 方治民
操作

feat: 新增在线表单页面（表格及基本交互）

上级 7573a60c
正在显示 包含 331 行增加 和 10 行删除
src/views/demo/tools/database/index.vue
<script lang="ts" setup>
<script lang="tsx" setup>
import { Button, Space } from 'ant-design-vue'
import { Icon } from '/@/components/Icon'
import { useModal } from '/@/components/Modal'
import { ActionItem, BasicColumn, BasicTable, EditRecordRow, useTable, TableAction } from '/@/components/Table'
// 业务组件
import EditModal from './edit.vue'
// 数据
import { getColumns, getDataSource, getFormConfig } from './data'
const [registerTable] = useTable({
......@@ -28,7 +30,7 @@
return [
{
label: '编辑',
onClick: () => editHandler('编辑', record),
onClick: () => editHandler(record),
},
{
label: '删除',
......@@ -43,8 +45,8 @@
const [registerEditModal, { openModal, setModalProps }] = useModal()
// 新增/编辑打开窗口
const editHandler = (type: '新增' | '编辑', data?: Recordable) => {
setModalProps({ title: type + '数据源' })
const editHandler = (data?: Recordable) => {
setModalProps({ title: (data ? '编辑' : '新增') + '数据源' })
openModal(true, data)
}
......@@ -59,16 +61,15 @@
<template>
<!-- 数据表格 -->
<BasicTable @register="registerTable">
<template #form-custom> custom-slot </template>
<template #tableTitle>
<Space>
<Button type="primary" @click="editHandler('新增')">
<Button type="primary" @click="editHandler()">
<template #icon>
<Icon icon="ant-design:plus-outlined" />
</template>
新增
</Button>
<Button type="dashed" danger @click="exportHandler">
<Button type="primary" @click="exportHandler">
<template #icon>
<Icon icon="ant-design:export-outlined" />
</template>
......
src/views/demo/tools/online/form/data.tsx 0 → 100644
import { Tag } from 'ant-design-vue'
import { BasicColumn, FormProps } from '@/components/Table'
export interface TypeOption {
label: string
value: string
disabled?: boolean
}
/**
* 支持的数据源类型
*/
export const typeOptions: TypeOption[] = [
{
label: '单表',
value: 'Single',
},
{
label: '主表',
value: 'Master',
disabled: true,
},
{
label: '从表',
value: 'Slave',
disabled: true,
},
]
// ================================
export function getColumns(): BasicColumn[] {
return [
{
title: '表类型',
dataIndex: 'type',
},
{
title: '表名',
dataIndex: 'name',
},
{
title: '表描述',
dataIndex: 'describe',
},
{
title: '版本',
dataIndex: 'version',
sorter: true,
},
{
title: '同步状态',
dataIndex: 'sync',
sorter: true,
customRender: ({ value }) => <Tag color={value ? 'green' : 'red'}>{value ? '已同步' : '未同步'}</Tag>,
},
{
title: '创建时间',
dataIndex: 'createTime',
sorter: true,
width: 180,
},
]
}
export function getDataSource() {
return (() => {
const data = []
data.push({
id: '1',
type: '单表',
name: 'bs_staff',
describe: '人员信息表',
version: '1',
sync: true,
createTime: '2023-02-26 15:36:01',
})
return data
})()
}
export function getFormConfig(): Partial<FormProps> {
return {
layout: 'inline',
name: 'query',
colon: true,
compact: true,
schemas: [
{
field: `type`,
label: `表类型`,
component: 'Select',
componentProps: {
options: typeOptions,
mode: 'multiple',
style: {
width: '180px',
},
},
},
{
field: `name`,
label: `表名`,
component: 'Input',
},
{
field: `describe`,
label: `表描述`,
component: 'Input',
},
],
showAdvancedButton: false,
submitButtonOptions: {
preIcon: 'material-symbols:search',
},
}
}
src/views/demo/tools/online/form/edit.vue 0 → 100644
<script lang="ts" setup>
import { BasicModal, useModalInner } from '/@/components/Modal'
const [registerModal] = useModalInner((data) => {
console.log(data)
})
</script>
<template>
<BasicModal v-bind="$attrs" @register="registerModal" destroyOnClose defaultFullscreen />
</template>
<style lang="less" scoped>
/** ... */
</style>
src/views/demo/tools/online/form/index.vue
<script lang="ts" setup>
import { PageComing } from '/@/components/Page'
<script lang="tsx" setup>
import { Button, Space, RadioGroup, FormItem, Input } from 'ant-design-vue'
import { Icon } from '/@/components/Icon'
import { useModal } from '/@/components/Modal'
import { BasicTable, useTable, TableAction, EditRecordRow, ActionItem } from '/@/components/Table'
// hooks
import { useMessage } from '@/hooks/web/useMessage'
// 业务组件
import EditModal from './edit.vue'
// 数据
import { getColumns, getDataSource, getFormConfig } from './data'
const { createConfirm } = useMessage()
const [registerTable] = useTable({
size: 'small',
bordered: true,
canResize: true,
columns: getColumns(),
dataSource: getDataSource(),
rowKey: (record) => record.id,
useSearchForm: true,
formConfig: getFormConfig(),
showTableSetting: true,
tableSetting: { fullScreen: true },
actionColumn: {
width: 160,
title: '操作',
dataIndex: 'action',
},
})
const createActions = (record: EditRecordRow): ActionItem[] => {
return [
{
label: '编辑',
onClick: () => editHandler(record),
},
]
}
const createDropDownActions = (record: EditRecordRow): ActionItem[] => {
return [
{
label: '同步数据库',
onClick: () => {
const submiting = ref(false)
const syncType = ref('update')
const confirm = createConfirm({
iconType: 'info',
title: '同步数据库',
content: () => {
return (
<div class="pt-3">
<RadioGroup
v-model:value={syncType.value}
options={[
{ label: '普通同步（保留表数据）', value: 'update' },
{ label: '强制同步（删除表，重新生成）', value: 'overlay' },
]}
disabled={submiting.value}
/>
</div>
)
},
okText: '开始同步',
cancelText: '取消',
onOk: async () => {
// @ts-ignore
confirm.update({ cancelButtonProps: { disabled: true } })
submiting.value = true
// TODO: 同步数据库表
console.log('OK', syncType.value)
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
}).catch(() => console.log('Oops errors!'))
},
})
},
},
{
label: '功能测试',
onClick: () => console.log(record),
ifShow: record.sync === true,
},
{
label: '地址配置',
onClick: () => console.log(record),
ifShow: record.sync === true,
},
{
label: '权限配置',
onClick: () => console.log(record),
ifShow: record.sync === true,
},
{
label: '授权配置',
onClick: () => console.log(record),
ifShow: record.sync === true,
},
{
label: '复制表',
onClick: () => {
const submiting = ref(false)
const tableName = ref((record.name ?? '') + '_copy')
const confirm = createConfirm({
iconType: 'info',
title: '复制表',
content: () => {
return (
<div class="pt-3">
<FormItem label="新表名">
<Input
placeholder="请输入新表名"
v-model:value={tableName.value}
style="width: 240px"
disabled={submiting.value}
/>
</FormItem>
</div>
)
},
okText: '复制',
cancelText: '取消',
onOk: async () => {
// @ts-ignore
confirm.update({ cancelButtonProps: { disabled: true } })
submiting.value = true
// TODO: 复制表
console.log('OK', tableName.value)
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
}).catch(() => console.log('Oops errors!'))
},
})
},
},
{
label: '移除',
popConfirm: {
title: '是否移除',
confirm: () => console.log(record),
},
},
{
label: '删除',
popConfirm: {
title: '是否删除',
confirm: () => console.log(record),
},
},
]
}
const [registerEditModal, { openModal, setModalProps }] = useModal()
// 新增/编辑打开窗口
const editHandler = (data?: Recordable) => {
setModalProps({ title: data ? '编辑' : '新增' })
openModal(true, data)
}
</script>
<template>
<PageComing />
<!-- 数据表格 -->
<BasicTable @register="registerTable">
<template #tableTitle>
<Space>
<Button type="primary" @click="editHandler()">
<template #icon>
<Icon icon="ant-design:plus-outlined" />
</template>
新增
</Button>
</Space>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction :actions="createActions(record)" :dropDownActions="createDropDownActions(record)">
<template #more>
<a-button type="link" size="small">
更多
<Icon icon="ic:baseline-keyboard-arrow-down" />
</a-button>
</template>
</TableAction>
</template>
</template>
</BasicTable>
<!-- 新增/编辑弹窗 -->
<EditModal @register="registerEditModal" />
</template>
<style lang="less" scoped>
......
Markdown 格式
0% 或
您添加了 0 人 到此讨论。请谨慎行事。
请先完成此评论的编辑！
请 注册 或者 后发表评论