@ -1,6 +1,5 @@
@@ -1,6 +1,5 @@
< template >
< div >
< div : class = "[prefixCls, [`${prefixCls}-form-container`]]" >
< div ref = "wrapRef" : class = "[prefixCls, [`${prefixCls}-form-container`]]" >
< AForm ref = "formElRef"
layout = "inline"
: colon = "false"
@ -23,7 +22,25 @@
@@ -23,7 +22,25 @@
class = "mr-2" > 重置 < / a - b u t t o n >
< / AFormItem >
< / AForm >
< ATable :dataSource ="dataSource" :columns ="columns" >
< ATable ref = "tableElRef"
: size = "state.selectedKeys[0]"
: dataSource = "state.dataSource"
: columns = "columns"
: scroll = " {
x : '100%' ,
y : state . tableHeight ,
scrollToFirstRowOnChange : true
} "
: pagination = " {
current : 1 ,
pageSize : 10 ,
size : 'small' ,
defaultPageSize : 10 ,
showTotal : ( total ) => t ( 'component.table.total' , { total } ) ,
showSizeChanger : true ,
showQuickJumper : true ,
} "
>
< template # title >
< div style = "width: 100%" >
< div class = "flex items-center" >
@ -31,45 +48,49 @@
@@ -31,45 +48,49 @@
< div :class ="`${headerPrefixCls}__toolbar`" >
< a -button type = "primary" > 新增 < / a - b u t t o n >
< a -button type = "primary" > 编辑 < / a - b u t t o n >
< Divider type = "vertical" / >
< a -button type = "primary" > 删除 < / a - b u t t o n >
< ADivider type = "vertical" / >
< div class = "table-settings" >
<!-- 重做 -- >
< Tooltip placement = "top" >
< A Tooltipplacement = "top" >
< template # title >
< span > { { t ( 'common.redo' ) } } < / span >
< / template >
< RedoOutlined @ click = "() => { console.log(1) } "/ >
< / Tooltip >
< RedoOutlined @click ="handleQuery "/ >
< / A Tooltip>
<!-- 尺寸 -- >
< Tooltip placement = "top" >
< A Tooltipplacement = "top" >
< template # title >
< span > { { t ( 'component.table.settingDens' ) } } < / span >
< / template >
< Dropdown placement = "bottomCenter" :trigger ="['click']" :getPopupContainer ="getPopupContainer" >
< ADropdown :trigger ="['click']"
: getPopupContainer = "getPopupContainer"
placement = "bottomCenter"
>
< ColumnHeightOutlined / >
< template # overlay >
< Menu @click ="()=>{console.log(2)}" selectable :selectedKeys ="[]" >
< MenuItem key = "default" >
< AMenu v -model :selectedKeys ="state.selectedKeys" selectable >
< A MenuItemkey = "default" >
< span > { { t ( 'component.table.settingDensDefault' ) } } < / span >
< / MenuItem >
< MenuItem key = "middle" >
< / A MenuItem>
< A MenuItemkey = "middle" >
< span > { { t ( 'component.table.settingDensMiddle' ) } } < / span >
< / MenuItem >
< MenuItem key = "small" >
< / A MenuItem>
< A MenuItemkey = "small" >
< span > { { t ( 'component.table.settingDensSmall' ) } } < / span >
< / MenuItem >
< / Menu >
< / A MenuItem>
< / A Menu>
< / template >
< / Dropdown >
< / Tooltip >
< / A Dropdown>
< / A Tooltip>
<!-- 全屏 -- >
< Tooltip placement = "top" >
< A Tooltipplacement = "top" >
< template # title >
< span > { { t ( 'component.table.settingFullScreen' ) } } < / span >
< / template >
< FullscreenOutlined @ click = "() => {console.log(3)}" / >
<!-- < FullscreenExitOutlined @click ="toggle" v -else / > -- >
< / Tooltip >
< FullscreenOutlined v -if = " ! isFullscreen " @click ="toggle" / >
< FullscreenExitOutlined v -else @click ="toggle" / >
< / A Tooltip>
< / div >
< / div >
< / div >
@ -77,110 +98,87 @@
@@ -77,110 +98,87 @@
< / template >
< / ATable >
< / div >
< / div >
< / template >
< script lang = "ts" setup >
/ * *
* 提供模板规范代码参考 , 请尽量保证编写代码风格跟模板规范代码一致
* 采用ant - design - vue表格表单组件编写 , 采用 setup 写法
* 当vben的BasicTable跟BasicForm组件不能满足一些特殊需求时 , 需要写原生ant - design - vue组件时 , 请严格参考此处代码
* 当前原生ant - design - vue表格表单组件模板 , 目前已经与系统项目配置高度集成 , 系统配置发生修改时组件也会产生对应的变化
* 目前是基于vben的BasicTable跟BasicForm组件重写出一套ant - design - vue原生表格表单组件模板
* Copyright © 2020 - 2022 < a href = "http://www.entfrm.com/" > entfrm < / a > All rights reserved .
* author entfrm开发团队 - 王翔
* /
import { BasicTitle } from '/@/components/Basic' ;
import { RedoOutlined , ColumnHeightOutlined , FullscreenOutlined , FullscreenExitOutlined } from '@ant-design/icons-vue' ;
import { computed , ComputedRef , ref , useSlots } from 'vue' ;
import { RedoOutlined , ColumnHeightOutlined , FullscreenOutlined , FullscreenExitOutlined , LeftOutlined , RightOutlined } from '@ant-design/icons-vue' ;
import { ref , onMounted } from 'vue' ;
import { Table , Form , Row , Col , Divider , Tooltip , Dropdown , Menu } from 'ant-design-vue' ;
const MenuItem = Menu . Item ;
import { default as TableTitle } from '/@/components/Table/src/components/TableTitle.vue' ;
import {
BasicTable ,
useTable ,
TableAction ,
InnerHandlers ,
ColumnChangeParam ,
BasicTableProps ,
} from '/@/components/Table' ;
import { getPopupContainer } from '/@/utils' ;
/ / i m p o r t { l i s t , r e m o v e } f r o m ' / @ / a p i / p l a t f o r m / s y s t e m / c o n t r o l l e r / c o n f i g ' ;
import { SizeType } from '/@/components/Table' ;
import { listConfig , delConfig } from '/@/api/platform/system/controller/config' ;
import ConfigModal from './ConfigModal.vue' ;
import { searchFormSchema } from './config.data' ;
import { columns } from './config.data' ;
import { useMessage } from '/@/hooks/web/useMessage' ;
import { reactive , toRaw , unref } from 'vue' ;
import { useModal } from "/@/components/Modal" ;
import { useDesign } from "/@/hooks/web/useDesign" ;
import { t } from '/@/hooks/web/useI18n' ;
import { useI18n } from '/@/hooks/web/useI18n' ;
import { createFormContext } from "/@/components/Form/src/hooks/useFormContext" ;
import { useTableHeader } from "/@/components/Table/src/hooks/useTableHeader" ;
import { basicProps } from "/@/components/Table/src/props" ;
import { convertDateRange } from "/@/utils/dateUtil" ;
const { createConfirm } = useMessage ( ) ;
const { createMessage } = useMessage ( ) ;
const { prefixCls } = useDesign ( 'basic-table' ) ;
const { prefixCls : headerPrefixCls } = useDesign ( 'basic-table-header' ) ;
import { useFullscreen } from "@vueuse/core" ;
import { getPopupContainer } from '/@/utils' ;
import { useTimeoutFn } from "/@/hooks/core/useTimeout" ;
interface ItemRender {
page : number ;
type : 'page' | 'prev' | 'next' ;
originalElement : any ;
}
/** 类型规范统一声明定义区域 */
interface TableState {
ids : string [ ] ;
single : boolean ;
multiple : boolean ;
total : number ;
tableHeight : number ;
tableInstance : ComponentRef ;
selectedKeys : SizeType [ ] ;
queryParams : Recordable ;
dataSource : any [ ] ;
dateRange : string [ ] ;
}
/** 通用变量统一声明区域 */
const ATable = Table ;
const AForm = Form ;
const AMenu = Menu ;
const AFormItem = Form . Item ;
const ACol = Col ;
const AMenuItem = Menu . Item ;
const ADivider = Divider ;
const ATooltip = Tooltip ;
const ADropdown = Dropdown ;
const ARow = Row ;
const ACol = Col ;
const handlers : InnerHandlers = {
onColumnsChange : ( data : ColumnChangeParam [ ] ) => {
console . log ( 1111 ) ;
} ,
} ;
const dataSource = [
{
key : '1' ,
name : '胡彦斌' ,
age : 32 ,
address : '西湖区湖底公园1号' ,
} ,
{
key : '2' ,
name : '胡彦祖' ,
age : 42 ,
address : '西湖区湖底公园1号' ,
} ,
] ;
const { t } = useI18n ( ) ;
const wrapRef = ref ( null ) ;
const tableElRef = ref < ComponentRef > ( null ) ;
const columns = [
{
title : '姓名' ,
dataIndex : 'name' ,
key : 'name' ,
} ,
{
title : '年龄' ,
dataIndex : 'age' ,
key : 'age' ,
} ,
{
title : '住址' ,
dataIndex : 'address' ,
key : 'address' ,
} ,
] ;
const { createConfirm } = useMessage ( ) ;
const { createMessage } = useMessage ( ) ;
const state = reactive ( {
/ / 选 中 数 组
ids : [ ] ,
/ / 非 单 个 禁 用
single : true ,
/ / 非 多 个 禁 用
multiple : true
} ) ;
const { prefixCls } = useDesign ( 'basic-table' ) ;
const { prefixCls : headerPrefixCls } = useDesign ( 'basic-table-header' ) ;
const { toggle , isFullscreen } = useFullscreen ( wrapRef ) ;
const [ registerModal , { openModal } ] = useModal ( ) ;
const [ registerTable , { reload } ] = useTable ( {
/ * c o n s t [ r e g i s t e r T a b l e , { r e l o a d } ] = u s e T a b l e ( {
title : '角色列表' ,
/ / a p i : l i s t ,
columns ,
formConfig : {
labelWidth : 120 ,
schemas : searchFormSchema
} ,
useSearchForm : true ,
showTableSetting : true ,
bordered : true ,
@ -194,8 +192,59 @@
@@ -194,8 +192,59 @@
slots : { customRender : 'action' } ,
fixed : false
}
} ) ; * /
const state = reactive < TableState > ( {
/ / 选 中 数 组
ids : [ ] ,
/ / 非 单 个 禁 用
single : true ,
/ / 非 多 个 禁 用
multiple : true ,
/ / 总 条 数
total : 0 ,
/ / 手 动 设 置 表 格 高 度
tableHeight : 650 ,
/ / a - t a b l e 表 格 实 例
tableInstance : null ,
/ / 尺 寸 大 小 选 择
selectedKeys : [ 'middle' ] ,
/ / 查 询 参 数
queryParams : {
current : 1 ,
size : 10
} ,
/ / 数 据 列 表
dataSource : [ ] ,
/ / 日 期 范 围
dateRange : [ ]
} ) ;
/** 生命周期钩子回调处理区域 */
onMounted ( ( ) => {
state . tableInstance = unref ( tableElRef ) ;
if ( ! state . tableInstance ? . $el ) return ;
/ / 设 置 表 格 高 度 , B a s i c T a b l e 内 部 采 用 r e f 元 素 动 态 计 算 , 降 低 复 杂 度 , 由 手 动 设 置
const bodyEl : HTMLElement | null = state . tableInstance . $el . querySelector ( '.ant-table-body' ) ;
bodyEl && ( bodyEl . style . height = ` ${ state . tableHeight } px ` ) ;
useTimeoutFn ( ( ) => getList ( ) , 16 ) ;
} ) ;
/** 搜索按钮操作 */
function handleQuery ( ) {
state . queryParams . current = 1 ;
getList ( ) ;
}
/** 查询列表数据 */
function getList ( ) {
listConfig ( convertDateRange ( state . queryParams , state . dateRange ) ) . then ( response => {
state . dataSource = response . data ;
state . total = response . total ;
} ) ;
}
/** 处理多选框选中数据 */
function handleSelectionChange ( selection ? : Recordable ) {
const rawRows = toRaw ( selection ? . rows ) || [ ] ;
wangxiang
3 years ago