mirrors2/naive-ui-admin
1
0
Fork 0
mirror of https://github.com/jekip/naive-ui-admin.git synced 2026-02-10 16:32:25 +08:00
Code Issues Packages Projects Releases Wiki Activity

日常 bugfix 更新

Browse Source
This commit is contained in:
Ah jung
2021-07-13 10:01:31 +08:00
parent b1c730dde8
commit 18597fabd3
10 changed files with 235 additions and 191 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/ProTable/src/ProTable.vue
View File

@@ -267,7 +267,6 @@ export default defineComponent({
justify-content: flex-start;
font-size: 16px;
font-weight: 600;
color: rgba(0, 0, 0, .85);
}
}
@@ -280,9 +279,8 @@ export default defineComponent({
height: 18px;
margin-left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, .75);
cursor: pointer;
color:var(--text-color);
:hover {
color: #1890ff;
}

133
src/components/ProTable/src/components/settings/ColumnSetting.vue
View File

@@ -18,42 +18,41 @@
</div>
</template>
<div class="table-toolbar-inner">
<Draggable v-model="columnsList" animation="300" item-key="key" @end="draggableEnd">
<template #item="{element, index}">
<div class="table-toolbar-inner-checkbox">
<span class="drag-icon">
<n-icon size="18">
<DragOutlined/>
</n-icon>
</span>
<n-checkbox-group v-model:value="checkList" @update:value="onChange">
<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"/>
</n-checkbox-group>
<div class="fixed-item">
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
class="transform -rotate-90 cursor-pointer" @click="fixedColumn(index,'left')">
<VerticalAlignTopOutlined/>
</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="transform rotate-90 cursor-pointer" @click="fixedColumn(index,'right')">
<VerticalAlignTopOutlined/>
</n-icon>
</template>
<span>固定到右侧</span>
</n-tooltip>
<div class="fixed-item">
<n-tooltip trigger="hover" placement="bottom">
<template #trigger>
<n-icon size="18" :color="element.fixed === 'left' ? '#2080f0':undefined"
class="transform -rotate-90 cursor-pointer" @click="fixedColumn(element,'left')">
<VerticalAlignTopOutlined/>
</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="transform rotate-90 cursor-pointer" @click="fixedColumn(element,'right')">
<VerticalAlignTopOutlined/>
</n-icon>
</template>
<span>固定到右侧</span>
</n-tooltip>
</div>
</div>
</div>
</template>
</Draggable>
</template>
</Draggable>
</n-checkbox-group>
</div>
</n-popover>
</div>
@@ -67,6 +66,7 @@ import { ref, defineComponent, reactive, unref, toRaw, computed, toRefs, watchEf
import { useTableContext } from '../../hooks/useTableContext';
import { ReloadOutlined, ColumnHeightOutlined, SettingOutlined, DragOutlined, VerticalAlignTopOutlined } from '@vicons/antd'
import Draggable from 'vuedraggable/src/vuedraggable'
import { useDesignSetting } from "@/hooks/setting/useDesignSetting";
interface Options {
title: string;
@@ -81,8 +81,11 @@ export default defineComponent({
VerticalAlignTopOutlined
},
setup(props, { emit }) {
const { getDarkTheme } = useDesignSetting()
const table = useTableContext();
const columnsList = ref<Options[]>([]);
const cacheColumnsList = ref<Options[]>([]);
const state = reactive({
selection: false,
checkAll: true,
@@ -108,6 +111,7 @@ export default defineComponent({
state.checkList = checkList
state.defaultCheckList = checkList
columnsList.value = columns
cacheColumnsList.value = columns
}
//切换
@@ -125,18 +129,26 @@ export default defineComponent({
//获取
function getColumns() {
const newArr = []
let newRet = []
table.getColumns().forEach(item => {
newArr.push({ ...item })
newRet.push({...item })
})
return newArr
return newRet
}
//重置
function resetColumns() {
state.checkList = [...state.defaultCheckList]
state.checkAll = true;
setColumns(table.getCacheColumns(true));
let cacheColumnsKeys:any[] = table.getCacheColumns()
let newColumns = cacheColumnsKeys.map(item => {
return {
...item,
fixed:undefined
}
})
setColumns(newColumns);
columnsList.value = newColumns
}
//全选
@@ -154,6 +166,8 @@ export default defineComponent({
//拖拽排序
function draggableEnd(e) {
const newColumns = toRaw(unref(columnsList))
console.log(newColumns);
columnsList.value = newColumns
setColumns(newColumns);
}
@@ -170,19 +184,26 @@ export default defineComponent({
}
//固定
function fixedColumn(index, fixed) {
let columnList = getColumns();
let columnInfo = columnList[index]
const isFixed = columnInfo.fixed === fixed ? undefined : fixed
columnInfo.fixed = isFixed
columnsList.value = columnList
table.setCacheColumnsField(columnInfo.key, { fixed: isFixed })
setColumns(columnList);
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,
@@ -197,12 +218,15 @@ export default defineComponent({
<style lang="less">
.table-toolbar {
&-inner-popover-title{
padding: 3px 0;
}
&-right {
&-icon {
height: 18px;
margin-left: 12px;
font-size: 16px;
color: rgba(0, 0, 0, .75);
color:var(--text-color);
cursor: pointer;
:hover {
@@ -216,18 +240,15 @@ export default defineComponent({
&-checkbox {
display: flex;
align-items: center;
padding: 8px 0;
padding: 10px 14px;
&:hover {
background: #e6f7ff;
}
.drag-icon {
display: inline-flex;
margin-right: 8px;
cursor: move;
}
.fixed-item {
display: flex;
align-items: center;
@@ -243,5 +264,15 @@ export default defineComponent({
}
}
}
&-checkbox-dark{
&:hover {
background: hsla(0, 0%, 100%, .08);
}
}
}
.toolbar-popover{
.n-popover__content{
padding: 0;
}
}
</style>

8
src/components/ProTable/src/hooks/useColumns.ts
View File

@@ -22,10 +22,11 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
() => unref(propsRef).columns,
(columns) => {
columnsRef.value = columns;
cacheColumns = columns?.filter((item) => !item.flag) ?? [];
cacheColumns = columns;
}
);
//设置
function setColumns(columnList: string[]) {
const columns: any[] = cloneDeep(columnList);
@@ -36,7 +37,6 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
return;
}
const cacheKeys = cacheColumns.map((item) => item.key);
//针对拖拽排序
if (!isString(columns[0])) {
columnsRef.value = columns;
@@ -60,9 +60,9 @@ export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
//获取
function getColumns() {
const columns = toRaw(unref(propsRef).columns);
let columns = toRaw(unref(getColumnsRef));
return columns.map(item => {
return { title: item.title, key: item.key, fixed: item.fixed || undefined }
return { ...item, title: item.title, key: item.key, fixed: item.fixed || undefined }
})
}

50
src/components/ProTable/src/hooks/useDataSource.ts
View File

@@ -1,8 +1,8 @@
import { ref, ComputedRef, unref, computed, onMounted, onBeforeMount, watchEffect, watch } from 'vue';
import { ref, ComputedRef, unref, computed, onMounted, watchEffect, watch } from 'vue';
import type { BasicTableProps } from '../types/table';
import type { PaginationProps } from '../types/pagination';
import { isFunction, isBoolean } from '@/utils/is';
import { DEFAULTPAGESIZE, APISETTING, PAGESIZES } from '../const';
import { isBoolean } from '@/utils/is';
import { APISETTING } from '../const';
export function useDataSource(
propsRef: ComputedRef<BasicTableProps>,
@@ -10,12 +10,11 @@ export function useDataSource(
getPaginationInfo,
setPagination,
setLoading,
tableData,
getSelection
tableData
},
emit: EmitType
emit
) {
const dataSourceRef = ref<Recordable[]>([]);
const dataSourceRef = ref([]);
watchEffect(() => {
tableData.value = unref(dataSourceRef);
@@ -33,7 +32,7 @@ export function useDataSource(
);
const getRowKey = computed(() => {
const { rowKey } = unref(propsRef);
const { rowKey }:any = unref(propsRef);
return rowKey ? rowKey : () => {
return 'key'
};
@@ -44,25 +43,6 @@ export function useDataSource(
if (!dataSource || dataSource.length === 0) {
return unref(dataSourceRef);
}
// if (unref(getAutoCreateKey)) {
// const firstItem = dataSource[0];
// const lastItem = dataSource[dataSource.length - 1];
//
// if (firstItem && lastItem) {
// if (!firstItem[ROW_KEY] || !lastItem[ROW_KEY]) {
// const data = cloneDeep(unref(dataSourceRef));
// data.forEach((item) => {
// if (!item[ROW_KEY]) {
// item[ROW_KEY] = buildUUID();
// }
// if (item.children && item.children.length) {
// setTableKey(item.children);
// }
// });
// dataSourceRef.value = data;
// }
// }
// }
return unref(dataSourceRef);
});
@@ -77,7 +57,7 @@ export function useDataSource(
const totalField = APISETTING.totalField
const listField = APISETTING.listField
let pageParams: Recordable = {};
let pageParams = {};
const { page = 1, pageSize = 10 } = unref(getPaginationInfo) as PaginationProps;
if ((isBoolean(pagination) && !pagination) || isBoolean(getPaginationInfo)) {
@@ -95,7 +75,7 @@ export function useDataSource(
const resultTotal = res[totalField] || 0
const currentPage = res[pageField]
// 假如数据变少，导致总页数变少并小于当前选中页码，通过getPaginationRef获取到的页码是不正确的，需获取正确的页码再次执行
// 如果数据异常，需获取正确的页码再次执行
if (resultTotal) {
const currentTotalPage = Math.ceil(resultTotal / pageSize);
if (page > currentTotalPage) {
@@ -138,19 +118,15 @@ export function useDataSource(
}, 16)
});
// onBeforeMount(()=> {
// fetch()
// })
function setTableData<T = Recordable>(values: T[]) {
function setTableData(values) {
dataSourceRef.value = values;
}
function getDataSource<T = Recordable>() {
return getDataSourceRef.value as T[];
function getDataSource() :any[] {
return getDataSourceRef.value;
}
async function reload(opt?: FetchParams) {
async function reload(opt?) {
await fetch(opt);
}

1
src/components/ProTable/src/props.ts
View File

@@ -23,7 +23,6 @@ export const basicProps = {
type: [Array] as PropType<BasicColumn[]>,
default: () => [],
required: true,
},
request: {
type: Function as PropType<(...arg: any[]) => Promise<any>>,

22
src/components/ProTable/src/types/table.ts Normal file
View 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
}