147 lines
4.0 KiB
Plaintext
147 lines
4.0 KiB
Plaintext
import { ref, Ref, ComputedRef, unref, computed, watch, toRaw } from 'vue';
|
|
import type { BasicColumn, BasicTableProps } from '../types/table';
|
|
import { cloneDeep } from 'lodash-es';
|
|
import { isArray, isBoolean, isFunction } from '@/utils/is';
|
|
import { usePermission } from '@/hooks/web/usePermission';
|
|
import { ActionItem } from '@/components/Table';
|
|
import { renderEditCell } from '../components/editable';
|
|
// import { Tooltip } from 'ant-design-vue';
|
|
// import { FormOutlined } from '@ant-design/icons-vue';
|
|
|
|
export function useColumns(propsRef: ComputedRef<BasicTableProps>) {
|
|
const columnsRef = ref(unref(propsRef).columns) as unknown as Ref<BasicColumn[]>;
|
|
let cacheColumns = unref(propsRef).columns.filter((item) => item.type != 'selection');
|
|
|
|
const getColumnsRef = computed(() => {
|
|
const columns = cloneDeep(unref(columnsRef));
|
|
|
|
handleActionColumn(propsRef, columns);
|
|
if (!columns) return [];
|
|
return columns;
|
|
});
|
|
|
|
const { hasPermission } = usePermission();
|
|
|
|
function isIfShow(action: ActionItem): boolean {
|
|
const ifShow = action.ifShow;
|
|
|
|
let isIfShow = true;
|
|
|
|
if (isBoolean(ifShow)) {
|
|
isIfShow = ifShow;
|
|
}
|
|
if (isFunction(ifShow)) {
|
|
isIfShow = ifShow(action);
|
|
}
|
|
return isIfShow;
|
|
}
|
|
|
|
// const renderTooltip = (trigger, content) => {
|
|
// return h(Tooltip, null, {
|
|
// title: () => content,
|
|
// default: () => trigger,
|
|
// });
|
|
// };
|
|
|
|
const getPageColumns = computed(() => {
|
|
const pageColumns = unref(getColumnsRef);
|
|
const columns = cloneDeep(pageColumns);
|
|
return columns
|
|
.filter((column) => {
|
|
return hasPermission(column.auth as string[]) && isIfShow(column);
|
|
})
|
|
.map((column) => {
|
|
column.align = typeof column.align === 'undefined' ? 'center' : column.align;
|
|
//默认 ellipsis 为true
|
|
column.ellipsis = typeof column.ellipsis === 'undefined' ? { tooltip: true } : false;
|
|
const { edit, editRow } = column;
|
|
if (edit || editRow) {
|
|
column.customRender = renderEditCell(column);
|
|
//const title: any = column.title;
|
|
// column.title = () => {
|
|
// return renderTooltip(
|
|
// h('span', {}, [
|
|
// h('span', { style: { 'margin-right': '5px' } }, title),
|
|
// h(
|
|
// 'span',
|
|
// {
|
|
// size: 14,
|
|
// },
|
|
// {
|
|
// default: () => h(FormOutlined),
|
|
// }
|
|
// ),
|
|
// ]),
|
|
// '该列可编辑'
|
|
// );
|
|
// };
|
|
}
|
|
return column;
|
|
});
|
|
});
|
|
|
|
watch(
|
|
() => unref(propsRef).columns,
|
|
(columns) => {
|
|
columnsRef.value = columns;
|
|
cacheColumns = columns;
|
|
},
|
|
);
|
|
|
|
function handleActionColumn(propsRef: ComputedRef<BasicTableProps>, columns) {
|
|
const { actionColumn } = unref(propsRef);
|
|
if (!actionColumn) return;
|
|
const hasIndex = columns.findIndex((item) => item.key === 'action');
|
|
if (hasIndex === -1) {
|
|
columns.push({
|
|
...(actionColumn as any),
|
|
});
|
|
}
|
|
}
|
|
|
|
//设置
|
|
function setColumns(columnList: string[]) {
|
|
const columns: any[] = cloneDeep(columnList);
|
|
if (!isArray(columns)) return;
|
|
|
|
if (!columns.length) {
|
|
columnsRef.value = [];
|
|
return;
|
|
}
|
|
columnsRef.value = columns as BasicColumn[];
|
|
}
|
|
|
|
//获取
|
|
function getColumns(): BasicColumn[] {
|
|
const columns = toRaw(unref(getColumnsRef));
|
|
return columns;
|
|
}
|
|
|
|
//获取原始
|
|
function getCacheColumns(isKey?: boolean): any[] {
|
|
return isKey ? cacheColumns.map((item) => item.key) : cacheColumns;
|
|
}
|
|
|
|
//更新原始数据单个字段
|
|
function setCacheColumnsField(key: string | undefined, value: Partial<BasicColumn>) {
|
|
if (!key || !value) {
|
|
return;
|
|
}
|
|
cacheColumns.forEach((item) => {
|
|
if (item.key === key) {
|
|
Object.assign(item, value);
|
|
return;
|
|
}
|
|
});
|
|
}
|
|
|
|
return {
|
|
getColumnsRef,
|
|
getCacheColumns,
|
|
setCacheColumnsField,
|
|
setColumns,
|
|
getColumns,
|
|
getPageColumns,
|
|
};
|
|
}
|