mirror of
https://github.com/jekip/naive-ui-admin.git
synced 2026-02-15 02:32:27 +08:00
fix Bug Features CHANGELOG.ms
This commit is contained in:
Ah jung
91
src/components/Table/README.md
Normal file
91
src/components/Table/README.md
Normal file
@@ -0,0 +1,91 @@
|
||||
BasicTable 重封装组件说明
|
||||
====
|
||||
|
||||
封装说明
|
||||
----
|
||||
|
||||
> 基础的使用方式与 API 与 [官方版(data-table)](https://www.naiveui.com/zh-CN/os-theme/components/data-table#tree) 本一致，在其基础上，封装了加载数据的方法。
|
||||
>
|
||||
> 你无需在你是用表格的页面进行分页逻辑处理，仅需向 BasicTable 组件传递绑定 `:api="Promise"` 对象即可
|
||||
>
|
||||
> 例子1
|
||||
----
|
||||
（基础使用）
|
||||
|
||||
```vue
|
||||
|
||||
<template>
|
||||
<BasicTable
|
||||
title="表格列表"
|
||||
:columns="columns"
|
||||
:api="loadDataTable"
|
||||
:row-key="row => row.id"
|
||||
@update:checked-row-keys="onCheckedRow"
|
||||
>
|
||||
<template #toolbar>
|
||||
<n-button type="primary">添加会员</n-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent } from 'vue'
|
||||
import { BasicTable } from '@/components/Table'
|
||||
import { getTableList } from '@/api/table/list'
|
||||
const columns = [
|
||||
{
|
||||
title: 'id',
|
||||
key: 'id'
|
||||
},
|
||||
{
|
||||
title: '名称',
|
||||
key: 'name'
|
||||
},
|
||||
{
|
||||
title: '地址',
|
||||
key: 'address'
|
||||
},
|
||||
{
|
||||
title: '日期',
|
||||
key: 'date'
|
||||
},
|
||||
]
|
||||
export default defineComponent({
|
||||
components: { BasicTable },
|
||||
setup() {
|
||||
const loadDataTable = async (params) => {
|
||||
const data = await getTableList(params);
|
||||
return data
|
||||
}
|
||||
return {
|
||||
columns,
|
||||
loadDataTable
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
```
|
||||
|
||||
API
|
||||
----
|
||||
BasicTable 在 NaiveUi 的 data-table 上进行了一层封装，支持了一些预设，并且封装了一些行为。这里只列出与 data-table 不同的 api。
|
||||
|
||||
> request：Promise 参考上面例子写法
|
||||
> ref：可绑定ref 调用组件内部方法（data-table本身的方法和参数）
|
||||
|
||||
Methods
|
||||
----
|
||||
> reload：actionRef.value.reload()
|
||||
|
||||
> 其余方法，请打印查看
|
||||
|
||||
Slots
|
||||
----
|
||||
> 名称：tableTitle | 表格顶部左侧区域
|
||||
> 名称：toolbar | 表格顶部右侧区域
|
||||
|
||||
|
||||
更新时间
|
||||
----
|
||||
|
||||
该文档最后更新于： 2021-07-12 PM 10:13
|
||||
1
src/components/Table/index.ts
Normal file
1
src/components/Table/index.ts
Normal file
@@ -0,0 +1 @@
|
||||
export { default as BasicTable } from './src/Table.vue';
|
||||
296
src/components/Table/src/Table.vue
Normal file
296
src/components/Table/src/Table.vue
Normal file
@@ -0,0 +1,296 @@
|
||||
<template>
|
||||
<div class="table-toolbar">
|
||||
|
||||
<!--顶部左侧区域-->
|
||||
<div class="flex items-center table-toolbar-left ">
|
||||
<template v-if="title">
|
||||
<div class="table-toolbar-left-title">
|
||||
{{ title }}
|
||||
<n-tooltip trigger="hover" v-if="titleTooltip">
|
||||
<template #trigger>
|
||||
<n-icon size="18" class="ml-1 cursor-pointer text-gray-400">
|
||||
<QuestionCircleOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
{{ titleTooltip }}
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</template>
|
||||
<slot name="tableTitle"></slot>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center table-toolbar-right">
|
||||
|
||||
<!--顶部右侧区域-->
|
||||
<slot name="toolbar"></slot>
|
||||
|
||||
<!--刷新-->
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<div class="table-toolbar-right-icon" @click="reload">
|
||||
<n-icon size="18">
|
||||
<ReloadOutlined/>
|
||||
</n-icon>
|
||||
</div>
|
||||
</template>
|
||||
<span>刷新</span>
|
||||
</n-tooltip>
|
||||
|
||||
<!--密度-->
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<div class="table-toolbar-right-icon">
|
||||
<n-dropdown @select="densitySelect" trigger="click" :options="densityOptions" v-model:value="tableSize">
|
||||
<n-icon size="18">
|
||||
<ColumnHeightOutlined/>
|
||||
</n-icon>
|
||||
</n-dropdown>
|
||||
</div>
|
||||
</template>
|
||||
<span>密度</span>
|
||||
</n-tooltip>
|
||||
|
||||
<!--表格设置单独抽离成组件-->
|
||||
<ColumnSetting></ColumnSetting>
|
||||
|
||||
</div>
|
||||
|
||||
</div>
|
||||
<div class="s-table">
|
||||
<n-data-table
|
||||
v-bind="getBindValues"
|
||||
:pagination="pagination"
|
||||
@update:page="updatePage"
|
||||
@update:page-size="updatePageSize"
|
||||
>
|
||||
<template #[item]="data" v-for="item in Object.keys($slots)" :key="item">
|
||||
<slot :name="item" v-bind="data"></slot>
|
||||
</template>
|
||||
</n-data-table>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { NDataTable } from 'naive-ui'
|
||||
import { ref, defineComponent, reactive, unref, onMounted, toRaw, onBeforeMount, computed, toRefs, watch } from "vue"
|
||||
import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, QuestionCircleOutlined } from '@vicons/antd'
|
||||
import { createTableContext } from './hooks/useTableContext';
|
||||
|
||||
import ColumnSetting from './components/settings/ColumnSetting.vue'
|
||||
|
||||
import { useLoading } from './hooks/useLoading';
|
||||
import { useColumns } from './hooks/useColumns';
|
||||
import { useDataSource } from './hooks/useDataSource';
|
||||
import { usePagination } from './hooks/usePagination';
|
||||
|
||||
import { basicProps } from './props'
|
||||
|
||||
import { BasicTableProps } from './types/table'
|
||||
|
||||
|
||||
const densityOptions = [
|
||||
{
|
||||
type: "menu",
|
||||
label: '紧凑',
|
||||
key: 'small',
|
||||
},
|
||||
{
|
||||
type: "menu",
|
||||
label: '默认',
|
||||
key: "medium"
|
||||
},
|
||||
{
|
||||
type: "menu",
|
||||
label: '宽松',
|
||||
key: 'large'
|
||||
}
|
||||
]
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, ColumnSetting, QuestionCircleOutlined
|
||||
},
|
||||
props: {
|
||||
...NDataTable.props, // 这里继承原 UI 组件的 props
|
||||
...basicProps
|
||||
},
|
||||
emits: [
|
||||
'fetch-success',
|
||||
'fetch-error',
|
||||
'update:checked-row-keys'
|
||||
],
|
||||
setup(props, { emit }) {
|
||||
|
||||
const wrapRef = ref<Nullable<HTMLDivElement>>(null);
|
||||
|
||||
const tableData = ref<Recordable[]>([]);
|
||||
const innerPropsRef = ref<Partial<BasicTableProps>>();
|
||||
|
||||
const getProps = computed(() => {
|
||||
return { ...props, ...unref(innerPropsRef) } as BasicTableProps;
|
||||
});
|
||||
|
||||
const { getLoading, setLoading } = useLoading(getProps);
|
||||
|
||||
const {
|
||||
getPaginationInfo,
|
||||
getPagination,
|
||||
setPagination,
|
||||
setShowPagination,
|
||||
getShowPagination,
|
||||
} = usePagination(getProps)
|
||||
|
||||
const { getDataSourceRef, getRowKey, getDataSource, setDataSource, reload } = useDataSource(
|
||||
getProps, {
|
||||
getPaginationInfo,
|
||||
setPagination,
|
||||
tableData,
|
||||
setLoading
|
||||
}, emit
|
||||
)
|
||||
|
||||
const {
|
||||
getPageColumns,
|
||||
setColumns,
|
||||
getColumns,
|
||||
getCacheColumns,
|
||||
setCacheColumnsField,
|
||||
getColumnsRef
|
||||
} = useColumns(getProps)
|
||||
|
||||
const state = reactive({
|
||||
tableSize: 'medium',
|
||||
isColumnSetting: false
|
||||
})
|
||||
|
||||
//页码切换
|
||||
function updatePage(page) {
|
||||
setPagination({ page: page, });
|
||||
reload()
|
||||
}
|
||||
|
||||
//分页数量切换
|
||||
function updatePageSize(size) {
|
||||
setPagination({ page: 1, pageSize: size, });
|
||||
reload()
|
||||
}
|
||||
|
||||
//密度切换
|
||||
function densitySelect(e) {
|
||||
state.tableSize = e
|
||||
}
|
||||
|
||||
//选中行
|
||||
function updateCheckedRowKeys(rowKeys) {
|
||||
emit('update:checked-row-keys', rowKeys)
|
||||
}
|
||||
|
||||
//重置 Columns
|
||||
const resetColumns = () => {
|
||||
columns.map(item => {
|
||||
item.isShow = true
|
||||
})
|
||||
}
|
||||
|
||||
//获取表格大小
|
||||
const getTableSize = computed(() => state.tableSize)
|
||||
|
||||
//组装表格信息
|
||||
const getBindValues = computed(() => {
|
||||
const tableData = unref(getDataSourceRef);
|
||||
let propsData = {
|
||||
...unref(getProps),
|
||||
loading: unref(getLoading),
|
||||
columns: toRaw(unref(getPageColumns)),
|
||||
rowKey: unref(getRowKey),
|
||||
data: tableData,
|
||||
size: unref(getTableSize),
|
||||
remote: true
|
||||
}
|
||||
return propsData
|
||||
})
|
||||
|
||||
//获取分页信息
|
||||
const pagination = computed(() => toRaw(unref(getPaginationInfo)))
|
||||
|
||||
function setProps(props: Partial<BasicTableProps>) {
|
||||
innerPropsRef.value = { ...unref(innerPropsRef), ...props };
|
||||
}
|
||||
|
||||
const tableAction: TableActionType = {
|
||||
reload,
|
||||
setColumns,
|
||||
setLoading,
|
||||
setProps,
|
||||
getColumns,
|
||||
getPageColumns,
|
||||
getCacheColumns,
|
||||
setCacheColumnsField,
|
||||
emit,
|
||||
getSize: () => {
|
||||
return unref(getBindValues).size as SizeType;
|
||||
},
|
||||
};
|
||||
|
||||
createTableContext({ ...tableAction, wrapRef, getBindValues });
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
getBindValues,
|
||||
densityOptions,
|
||||
reload,
|
||||
densitySelect,
|
||||
updatePage,
|
||||
updatePageSize,
|
||||
updateCheckedRowKeys,
|
||||
pagination,
|
||||
resetColumns,
|
||||
tableAction
|
||||
}
|
||||
}
|
||||
})
|
||||
|
||||
</script>
|
||||
<style lang='less' scoped>
|
||||
.table-toolbar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 0 0 16px 0;
|
||||
|
||||
&-left {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
flex: 1;
|
||||
|
||||
&-title {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-start;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
}
|
||||
}
|
||||
|
||||
&-right {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
flex: 1;
|
||||
|
||||
&-icon {
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
cursor: pointer;
|
||||
color: var(--text-color);
|
||||
|
||||
:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-toolbar-inner-popover-title {
|
||||
padding: 2px 0;
|
||||
}
|
||||
</style>
|
||||
283
src/components/Table/src/components/settings/ColumnSetting.vue
Normal file
283
src/components/Table/src/components/settings/ColumnSetting.vue
Normal file
@@ -0,0 +1,283 @@
|
||||
<template>
|
||||
<n-tooltip trigger="hover">
|
||||
<template #trigger>
|
||||
<div class="cursor-pointer table-toolbar-right-icon">
|
||||
<n-popover trigger="click" :width="230" class="toolbar-popover" placement="bottom-end">
|
||||
<template #trigger>
|
||||
<n-icon size="18">
|
||||
<SettingOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
<template #header>
|
||||
<div class="table-toolbar-inner-popover-title">
|
||||
<n-space>
|
||||
<n-checkbox v-model:checked="checkAll" @update:checked="onCheckAll">列展示</n-checkbox>
|
||||
<n-checkbox v-model:checked="selection" @update:checked="onSelection">勾选列</n-checkbox>
|
||||
<n-button text type="info" size="small" class="mt-1" @click="resetColumns">重置</n-button>
|
||||
</n-space>
|
||||
</div>
|
||||
</template>
|
||||
<div class="table-toolbar-inner">
|
||||
<n-checkbox-group v-model:value="checkList" @update:value="onChange">
|
||||
<Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
|
||||
<template #item="{element, index}">
|
||||
<div class="table-toolbar-inner-checkbox"
|
||||
:class="{'table-toolbar-inner-checkbox-dark':getDarkTheme === true}">
|
||||
<span class="drag-icon">
|
||||
<n-icon size="18">
|
||||
<DragOutlined/>
|
||||
</n-icon>
|
||||
</span>
|
||||
<n-checkbox :value="element.key" :label="element.title"/>
|
||||
<div class="fixed-item">
|
||||
<n-tooltip trigger="hover" placement="bottom">
|
||||
<template #trigger>
|
||||
<n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
|
||||
class="cursor-pointer" @click="fixedColumn(element,'left')">
|
||||
<VerticalRightOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>固定到左侧</span>
|
||||
</n-tooltip>
|
||||
<n-divider vertical/>
|
||||
<n-tooltip trigger="hover" placement="bottom">
|
||||
<template #trigger>
|
||||
<n-icon size="18" :color="element.fixed === 'right' ? '#2080f0':undefined"
|
||||
class="cursor-pointer" @click="fixedColumn(element,'right')">
|
||||
<VerticalLeftOutlined/>
|
||||
</n-icon>
|
||||
</template>
|
||||
<span>固定到右侧</span>
|
||||
</n-tooltip>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</Draggable>
|
||||
</n-checkbox-group>
|
||||
</div>
|
||||
</n-popover>
|
||||
</div>
|
||||
</template>
|
||||
<span>列设置</span>
|
||||
</n-tooltip>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEffect } from "vue"
|
||||
import { useTableContext } from '../../hooks/useTableContext';
|
||||
import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalRightOutlined, VerticalLeftOutlined } from '@vicons/antd'
|
||||
import Draggable from 'vuedraggable/src/vuedraggable'
|
||||
import { useDesignSetting } from "@/hooks/setting/useDesignSetting";
|
||||
|
||||
interface Options {
|
||||
title: string;
|
||||
key: string;
|
||||
fixed?: boolean | 'left' | 'right';
|
||||
}
|
||||
|
||||
export default defineComponent({
|
||||
name: 'ColumnSetting',
|
||||
components: {
|
||||
ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, Draggable,
|
||||
VerticalRightOutlined, VerticalLeftOutlined
|
||||
},
|
||||
setup(props, { emit }) {
|
||||
const { getDarkTheme } = useDesignSetting()
|
||||
const table = useTableContext();
|
||||
const columnsList = ref<Options[]>([]);
|
||||
const cacheColumnsList = ref<Options[]>([]);
|
||||
|
||||
const state = reactive({
|
||||
selection: false,
|
||||
checkAll: true,
|
||||
checkList: [],
|
||||
defaultCheckList: []
|
||||
})
|
||||
|
||||
const getSelection = computed(() => {
|
||||
return state.selection
|
||||
})
|
||||
|
||||
watchEffect(() => {
|
||||
const columns = table.getColumns();
|
||||
if (columns.length) {
|
||||
init();
|
||||
}
|
||||
});
|
||||
|
||||
//初始化
|
||||
function init() {
|
||||
const columns = getColumns();
|
||||
const checkList = columns.map(item => item.key)
|
||||
state.checkList = checkList
|
||||
state.defaultCheckList = checkList
|
||||
columnsList.value = columns
|
||||
cacheColumnsList.value = columns
|
||||
}
|
||||
|
||||
//切换
|
||||
function onChange(checkList) {
|
||||
if (state.selection) {
|
||||
checkList.unshift('selection')
|
||||
}
|
||||
setColumns(checkList)
|
||||
}
|
||||
|
||||
//设置
|
||||
function setColumns(columns) {
|
||||
table.setColumns(columns)
|
||||
}
|
||||
|
||||
//获取
|
||||
function getColumns() {
|
||||
let newRet = []
|
||||
table.getColumns().forEach(item => {
|
||||
newRet.push({ ...item })
|
||||
})
|
||||
return newRet
|
||||
}
|
||||
|
||||
//重置
|
||||
function resetColumns() {
|
||||
state.checkList = [...state.defaultCheckList]
|
||||
state.checkAll = true;
|
||||
let cacheColumnsKeys: any[] = table.getCacheColumns()
|
||||
let newColumns = cacheColumnsKeys.map(item => {
|
||||
return {
|
||||
...item,
|
||||
fixed: undefined
|
||||
}
|
||||
})
|
||||
setColumns(newColumns);
|
||||
columnsList.value = newColumns
|
||||
}
|
||||
|
||||
//全选
|
||||
function onCheckAll(e) {
|
||||
let checkList = table.getCacheColumns(true)
|
||||
if (e) {
|
||||
setColumns(checkList);
|
||||
state.checkList = checkList
|
||||
} else {
|
||||
setColumns([]);
|
||||
state.checkList = []
|
||||
}
|
||||
}
|
||||
|
||||
//拖拽排序
|
||||
function draggableEnd() {
|
||||
const newColumns = toRaw(unref(columnsList))
|
||||
columnsList.value = newColumns
|
||||
setColumns(newColumns);
|
||||
}
|
||||
|
||||
//勾选列
|
||||
function onSelection(e) {
|
||||
let checkList = table.getCacheColumns()
|
||||
if (e) {
|
||||
checkList.unshift({ type: 'selection', key: 'selection' })
|
||||
setColumns(checkList);
|
||||
} else {
|
||||
checkList.splice(0, 1)
|
||||
setColumns(checkList);
|
||||
}
|
||||
}
|
||||
|
||||
//固定
|
||||
function fixedColumn(item, fixed) {
|
||||
console.log('item：', item)
|
||||
if (!state.checkList.includes(item.key)) return;
|
||||
let columns = getColumns();
|
||||
const isFixed = item.fixed === fixed ? undefined : fixed
|
||||
let index = columns.findIndex(res => res.key === item.key)
|
||||
console.log('index：', index)
|
||||
if (index !== -1) {
|
||||
columns[index].fixed = isFixed;
|
||||
}
|
||||
table.setCacheColumnsField(item.key, { fixed: isFixed })
|
||||
columnsList.value[index].fixed = isFixed
|
||||
console.log('columnsList：', columnsList.value)
|
||||
setColumns(columns);
|
||||
}
|
||||
|
||||
return {
|
||||
...toRefs(state),
|
||||
columnsList,
|
||||
getDarkTheme,
|
||||
onChange,
|
||||
onCheckAll,
|
||||
onSelection,
|
||||
resetColumns,
|
||||
fixedColumn,
|
||||
draggableEnd,
|
||||
getSelection
|
||||
}
|
||||
}
|
||||
})
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.table-toolbar {
|
||||
&-inner-popover-title {
|
||||
padding: 3px 0;
|
||||
}
|
||||
|
||||
&-right {
|
||||
&-icon {
|
||||
margin-left: 12px;
|
||||
font-size: 16px;
|
||||
color: var(--text-color);
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
color: #1890ff;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.table-toolbar-inner {
|
||||
&-checkbox {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 10px 14px;
|
||||
|
||||
&:hover {
|
||||
background: #e6f7ff;
|
||||
}
|
||||
|
||||
.drag-icon {
|
||||
display: inline-flex;
|
||||
margin-right: 8px;
|
||||
cursor: move;
|
||||
}
|
||||
|
||||
.fixed-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
margin-left: auto;
|
||||
}
|
||||
|
||||
.ant-checkbox-wrapper {
|
||||
flex: 1;
|
||||
|
||||
&:hover {
|
||||
color: #1890ff !important;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-checkbox-dark {
|
||||
&:hover {
|
||||
background: hsla(0, 0%, 100%, .08);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.toolbar-popover {
|
||||
.n-popover__content {
|
||||
padding: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
src/components/Table/src/const.ts
Normal file
15
src/components/Table/src/const.ts
Normal file
@@ -0,0 +1,15 @@
|
||||
import componentSetting from '@/settings/componentSetting'
|
||||
|
||||
const { table } = componentSetting
|
||||
|
||||
const { apiSetting, defaultPageSize, pageSizes } = table;
|
||||
|
||||
export const DEFAULTPAGESIZE = defaultPageSize;
|
||||
|
||||
export const APISETTING = apiSetting;
|
||||
|
||||
export const PAGESIZES = pageSizes;
|
||||
|
||||
|
||||
|
||||
|
||||
95
src/components/Table/src/hooks/useColumns.ts
Normal file
95
src/components/Table/src/hooks/useColumns.ts
Normal file
@@ -0,0 +1,95 @@
|
||||
import { ref, Ref, ComputedRef, unref, computed, watch, toRaw } from 'vue';
|
||||
import type { BasicColumn, BasicTableProps } from '../types/table';
|
||||
import { isEqual, cloneDeep } from 'lodash-es';
|
||||
import { isArray, isString } from '@/utils/is';
|
||||
|
||||
export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
|
||||
const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
|
||||
let cacheColumns = unref(propsRef).columns;
|
||||
|
||||
const getColumnsRef = computed(() => {
|
||||
const columns = cloneDeep(unref(columnsRef));
|
||||
return columns;
|
||||
})
|
||||
|
||||
const getPageColumns = computed(() => {
|
||||
const pageColumns = unref(getColumnsRef);
|
||||
const columns = cloneDeep(pageColumns);
|
||||
return columns
|
||||
})
|
||||
|
||||
watch(
|
||||
() => unref(propsRef).columns,
|
||||
(columns) => {
|
||||
columnsRef.value = columns;
|
||||
cacheColumns = columns;
|
||||
}
|
||||
);
|
||||
|
||||
|
||||
//设置
|
||||
function setColumns(columnList: string[]) {
|
||||
const columns: any[] = cloneDeep(columnList);
|
||||
if (!isArray(columns)) return;
|
||||
|
||||
if (!columns.length) {
|
||||
columnsRef.value = [];
|
||||
return;
|
||||
}
|
||||
const cacheKeys = cacheColumns.map((item) => item.key);
|
||||
//针对拖拽排序
|
||||
if (!isString(columns[0])) {
|
||||
columnsRef.value = columns;
|
||||
} else {
|
||||
const newColumns: any[] = []
|
||||
cacheColumns.forEach(item => {
|
||||
if (columnList.includes(item.key)) {
|
||||
newColumns.push({ ...item })
|
||||
}
|
||||
})
|
||||
if (!isEqual(cacheKeys, columns)) {
|
||||
newColumns.sort((prev, next) => {
|
||||
return (
|
||||
cacheKeys.indexOf(prev.key) - cacheKeys.indexOf(next.key)
|
||||
);
|
||||
});
|
||||
}
|
||||
columnsRef.value = newColumns
|
||||
}
|
||||
}
|
||||
|
||||
//获取
|
||||
function getColumns() {
|
||||
let columns = toRaw(unref(getColumnsRef));
|
||||
return columns.map(item => {
|
||||
return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined }
|
||||
})
|
||||
}
|
||||
|
||||
//获取原始
|
||||
function getCacheColumns(isKey?: boolean): any[] {
|
||||
return isKey ? cacheColumns.map(item => item.key) : cacheColumns;
|
||||
}
|
||||
|
||||
//更新原始数据单个字段
|
||||
function setCacheColumnsField(dataIndex: string | undefined, value: Partial<BasicColumn>) {
|
||||
if (!dataIndex || !value) {
|
||||
return;
|
||||
}
|
||||
cacheColumns.forEach((item) => {
|
||||
if (item.key === dataIndex) {
|
||||
Object.assign(item, value);
|
||||
return;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
return {
|
||||
getColumnsRef,
|
||||
getCacheColumns,
|
||||
setCacheColumnsField,
|
||||
setColumns,
|
||||
getColumns,
|
||||
getPageColumns
|
||||
};
|
||||
}
|
||||
141
src/components/Table/src/hooks/useDataSource.ts
Normal file
141
src/components/Table/src/hooks/useDataSource.ts
Normal file
@@ -0,0 +1,141 @@
|
||||
import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue';
|
||||
import type { BasicTableProps } from '../types/table';
|
||||
import type { PaginationProps } from '../types/pagination';
|
||||
import { isBoolean } from '@/utils/is';
|
||||
import { APISETTING } from '../const';
|
||||
|
||||
export function useDataSource(
|
||||
propsRef: ComputedRef<BasicTableProps>,
|
||||
{
|
||||
getPaginationInfo,
|
||||
setPagination,
|
||||
setLoading,
|
||||
tableData
|
||||
},
|
||||
emit
|
||||
) {
|
||||
const dataSourceRef = ref([]);
|
||||
|
||||
watchEffect(() => {
|
||||
tableData.value = unref(dataSourceRef);
|
||||
});
|
||||
|
||||
watch(
|
||||
() => unref(propsRef).dataSource,
|
||||
() => {
|
||||
const { dataSource }: any = unref(propsRef);
|
||||
dataSource && (dataSourceRef.value = dataSource);
|
||||
},
|
||||
{
|
||||
immediate: true,
|
||||
}
|
||||
);
|
||||
|
||||
const getRowKey = computed(() => {
|
||||
const { rowKey }: any = unref(propsRef);
|
||||
return rowKey ? rowKey : () => {
|
||||
return 'key'
|
||||
};
|
||||
});
|
||||
|
||||
const getDataSourceRef = computed(() => {
|
||||
const dataSource = unref(dataSourceRef);
|
||||
if (!dataSource || dataSource.length === 0) {
|
||||
return unref(dataSourceRef);
|
||||
}
|
||||
return unref(dataSourceRef);
|
||||
});
|
||||
|
||||
async function fetch(opt?) {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { request, pagination }: any = unref(propsRef);
|
||||
|
||||
//组装分页信息
|
||||
const pageField = APISETTING.pageField
|
||||
const sizeField = APISETTING.sizeField
|
||||
const totalField = APISETTING.totalField
|
||||
const listField = APISETTING.listField
|
||||
|
||||
let pageParams = {};
|
||||
const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
|
||||
|
||||
if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
|
||||
pageParams = {};
|
||||
} else {
|
||||
pageParams[pageField] = (opt && opt[pageField]) || page;
|
||||
pageParams[sizeField] = pageSize;
|
||||
}
|
||||
|
||||
let params = {
|
||||
...pageParams,
|
||||
}
|
||||
const res = await request(params);
|
||||
|
||||
const resultTotal = res[totalField] || 0
|
||||
const currentPage = res[pageField]
|
||||
|
||||
// 如果数据异常，需获取正确的页码再次执行
|
||||
if (resultTotal) {
|
||||
const currentTotalPage = Math.ceil(resultTotal / pageSize);
|
||||
if (page > currentTotalPage) {
|
||||
setPagination({
|
||||
[pageField]: currentTotalPage,
|
||||
});
|
||||
fetch(opt);
|
||||
}
|
||||
}
|
||||
let resultInfo = res[listField] ? res[listField] : []
|
||||
dataSourceRef.value = resultInfo;
|
||||
setPagination({
|
||||
[pageField]: currentPage,
|
||||
[totalField]: resultTotal,
|
||||
});
|
||||
if (opt && opt[pageField]) {
|
||||
setPagination({
|
||||
[pageField]: opt[pageField] || 1,
|
||||
});
|
||||
}
|
||||
emit('fetch-success', {
|
||||
items: unref(resultInfo),
|
||||
resultTotal
|
||||
});
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
emit('fetch-error', error);
|
||||
dataSourceRef.value = [];
|
||||
// setPagination({
|
||||
// pageCount: 0,
|
||||
// });
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}
|
||||
|
||||
onMounted(() => {
|
||||
setTimeout(() => {
|
||||
fetch();
|
||||
}, 16)
|
||||
});
|
||||
|
||||
function setTableData(values) {
|
||||
dataSourceRef.value = values;
|
||||
}
|
||||
|
||||
function getDataSource(): any[] {
|
||||
return getDataSourceRef.value;
|
||||
}
|
||||
|
||||
async function reload(opt?) {
|
||||
await fetch(opt);
|
||||
}
|
||||
|
||||
return {
|
||||
fetch,
|
||||
getRowKey,
|
||||
getDataSourceRef,
|
||||
getDataSource,
|
||||
setTableData,
|
||||
reload
|
||||
}
|
||||
}
|
||||
21
src/components/Table/src/hooks/useLoading.ts
Normal file
21
src/components/Table/src/hooks/useLoading.ts
Normal file
@@ -0,0 +1,21 @@
|
||||
import { ref, ComputedRef, unref, computed, watch } from 'vue';
|
||||
import type { BasicTableProps } from '../types/table';
|
||||
|
||||
export function useLoading(props: ComputedRef<BasicTableProps>) {
|
||||
const loadingRef = ref(unref(props).loading);
|
||||
|
||||
watch(
|
||||
() => unref(props).loading,
|
||||
(loading) => {
|
||||
loadingRef.value = loading;
|
||||
}
|
||||
);
|
||||
|
||||
const getLoading = computed(() => unref(loadingRef));
|
||||
|
||||
function setLoading(loading: boolean) {
|
||||
loadingRef.value = loading;
|
||||
}
|
||||
|
||||
return { getLoading, setLoading };
|
||||
}
|
||||
48
src/components/Table/src/hooks/usePagination.ts
Normal file
48
src/components/Table/src/hooks/usePagination.ts
Normal file
@@ -0,0 +1,48 @@
|
||||
import type { PaginationProps } from '../types/pagination';
|
||||
import type { BasicTableProps } from '../types/table';
|
||||
import { computed, unref, ref, ComputedRef } from 'vue';
|
||||
|
||||
import { isBoolean } from '@/utils/is';
|
||||
import { DEFAULTPAGESIZE, PAGESIZES } from '../const';
|
||||
|
||||
export function usePagination(refProps: ComputedRef<BasicTableProps>) {
|
||||
const configRef = ref<PaginationProps>({});
|
||||
const show = ref(true);
|
||||
|
||||
const getPaginationInfo = computed((): PaginationProps | boolean => {
|
||||
const { pagination } = unref(refProps);
|
||||
if (!unref(show) || (isBoolean(pagination) && !pagination)) {
|
||||
return false;
|
||||
}
|
||||
return {
|
||||
pageSize: DEFAULTPAGESIZE,
|
||||
pageSizes: PAGESIZES,
|
||||
showSizePicker: true,
|
||||
showQuickJumper: true,
|
||||
...(isBoolean(pagination) ? {} : pagination),
|
||||
...unref(configRef),
|
||||
};
|
||||
});
|
||||
|
||||
function setPagination(info: Partial<PaginationProps>) {
|
||||
const paginationInfo = unref(getPaginationInfo);
|
||||
configRef.value = {
|
||||
...(!isBoolean(paginationInfo) ? paginationInfo : {}),
|
||||
...info,
|
||||
};
|
||||
}
|
||||
|
||||
function getPagination() {
|
||||
return unref(getPaginationInfo);
|
||||
}
|
||||
|
||||
function getShowPagination() {
|
||||
return unref(show);
|
||||
}
|
||||
|
||||
async function setShowPagination(flag: boolean) {
|
||||
show.value = flag;
|
||||
}
|
||||
|
||||
return { getPagination, getPaginationInfo, setShowPagination, getShowPagination, setPagination };
|
||||
}
|
||||
22
src/components/Table/src/hooks/useTableContext.ts
Normal file
22
src/components/Table/src/hooks/useTableContext.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type { Ref } from 'vue';
|
||||
import type { BasicTableProps, TableActionType } from '../types/table';
|
||||
import { provide, inject, ComputedRef } from 'vue';
|
||||
|
||||
const key = Symbol('s-table');
|
||||
|
||||
type Instance = TableActionType & {
|
||||
wrapRef: Ref<Nullable<HTMLElement>>;
|
||||
getBindValues: ComputedRef<Recordable>;
|
||||
};
|
||||
|
||||
type RetInstance = Omit<Instance, 'getBindValues'> & {
|
||||
getBindValues: ComputedRef<BasicTableProps>;
|
||||
};
|
||||
|
||||
export function createTableContext(instance: Instance) {
|
||||
provide(key, instance);
|
||||
}
|
||||
|
||||
export function useTableContext(): RetInstance {
|
||||
return inject(key) as RetInstance;
|
||||
}
|
||||
45
src/components/Table/src/props.ts
Normal file
45
src/components/Table/src/props.ts
Normal file
@@ -0,0 +1,45 @@
|
||||
import type { PropType } from 'vue'
|
||||
import { BasicColumn } from './types/table'
|
||||
|
||||
export const basicProps = {
|
||||
title: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
titleTooltip: {
|
||||
type: String,
|
||||
default: null,
|
||||
},
|
||||
size: {
|
||||
type: String,
|
||||
default: 'medium',
|
||||
},
|
||||
tableData: {
|
||||
type: [Object],
|
||||
default: () => {
|
||||
},
|
||||
},
|
||||
columns: {
|
||||
type: [Array] as PropType<BasicColumn[]>,
|
||||
default: () => [],
|
||||
required: true,
|
||||
},
|
||||
request: {
|
||||
type: Function as PropType<(...arg: any[]) => Promise<any>>,
|
||||
default: null,
|
||||
required: true
|
||||
},
|
||||
rowKey: {
|
||||
type: [String, Function] as PropType<string | ((record) => string)>,
|
||||
default: undefined,
|
||||
},
|
||||
pagination: {
|
||||
type: [Object, Boolean],
|
||||
default: () => {
|
||||
}
|
||||
},
|
||||
showPagination: {
|
||||
type: [String, Boolean],
|
||||
default: 'auto'
|
||||
}
|
||||
}
|
||||
11
src/components/Table/src/types/pagination.ts
Normal file
11
src/components/Table/src/types/pagination.ts
Normal file
@@ -0,0 +1,11 @@
|
||||
import Pagination from 'naive-ui/lib/pagination';
|
||||
import { VNodeChild } from 'vue';
|
||||
|
||||
export interface PaginationProps {
|
||||
page?: number;
|
||||
pageCount?: number,
|
||||
pageSize?: number,
|
||||
pageSizes?: number[],
|
||||
showSizePicker?: boolean,
|
||||
showQuickJumper?: boolean,
|
||||
}
|
||||
22
src/components/Table/src/types/table.ts
Normal file
22
src/components/Table/src/types/table.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
import type {
|
||||
TableBaseColumn,
|
||||
} from 'naive-ui/lib/data-table/src/interface';
|
||||
|
||||
export interface BasicColumn extends TableBaseColumn {
|
||||
|
||||
}
|
||||
|
||||
export interface TableActionType {
|
||||
reload: (opt) => Promise<void>;
|
||||
emit?: any;
|
||||
getColumns: (opt) => BasicColumn[];
|
||||
setColumns: (columns: BasicColumn[] | string[]) => void;
|
||||
}
|
||||
|
||||
export interface BasicTableProps<T = any> {
|
||||
title?: string,
|
||||
dataSource: Function,
|
||||
columns: any[],
|
||||
pagination: object,
|
||||
showPagination: boolean
|
||||
}
|
||||
Reference in New Issue
Block a user