初始化
parent
de5d8c6208
commit
bbb43faaa3
@ -0,0 +1,14 @@
|
|||||||
|
import axios from '@/utils/axios';
|
||||||
|
import type { ApiResponse } from '@/api/types';
|
||||||
|
export async function getTableOptionsVOList(options?: { [key: string]: any }) {
|
||||||
|
return axios<ApiResponse<any[]>>('/tableInfo/get/list', {
|
||||||
|
method: 'GET',
|
||||||
|
...(options || {})
|
||||||
|
});
|
||||||
|
}
|
||||||
|
export async function getTableInfoVO(options?: { [key: string]: any }) {
|
||||||
|
return axios<ApiResponse<any[]>>('/tableInfo/get/vo', {
|
||||||
|
method: 'GET',
|
||||||
|
...(options || {})
|
||||||
|
});
|
||||||
|
}
|
||||||
@ -0,0 +1,5 @@
|
|||||||
|
export interface ApiResponse<T = any> {
|
||||||
|
code: number;
|
||||||
|
message: string;
|
||||||
|
data: T;
|
||||||
|
}
|
||||||
@ -0,0 +1,144 @@
|
|||||||
|
<script setup lang="ts">
|
||||||
|
import type { DataGridSchema } from './type';
|
||||||
|
import type { PropType } from 'vue';
|
||||||
|
const props = defineProps({
|
||||||
|
// 表格的列规范
|
||||||
|
columns: {
|
||||||
|
type: Array as PropType<DataGridSchema>,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
// 表格的数据源
|
||||||
|
tableData: {
|
||||||
|
type: Array,
|
||||||
|
required: true
|
||||||
|
},
|
||||||
|
spanMethod: {
|
||||||
|
type: Function as PropType<
|
||||||
|
(
|
||||||
|
row: any,
|
||||||
|
column: any,
|
||||||
|
rowIndex: number,
|
||||||
|
columnIndex: number
|
||||||
|
) => { rowspan: number; colspan: number } | null
|
||||||
|
>,
|
||||||
|
default: undefined
|
||||||
|
}
|
||||||
|
});
|
||||||
|
const emit = defineEmits(['on-action']);
|
||||||
|
const handleActionClick = (actionKey: string, row: any) => {
|
||||||
|
emit('on-action', {
|
||||||
|
actionKey,
|
||||||
|
row
|
||||||
|
});
|
||||||
|
};
|
||||||
|
// 状态字典映射
|
||||||
|
const getStatusConfig = (statusValue: string | number) => {
|
||||||
|
const dict: Record<string, { label: string; elType: string }> = {
|
||||||
|
normal: { label: '正常', elType: 'success' }, // 绿色
|
||||||
|
fault: { label: '故障', elType: 'warning' }, // 黄色
|
||||||
|
alarm: { label: '报警', elType: 'danger' }, // 红色
|
||||||
|
running: { label: '运行', elType: 'primary' }, // 蓝色
|
||||||
|
turnOn: { label: '开启', elType: 'info' }, // 灰色
|
||||||
|
turnOff: { label: '关闭', elType: 'info' }, // 灰色
|
||||||
|
no_action: { label: '未动作', elType: 'info' } // 灰色
|
||||||
|
};
|
||||||
|
return dict[statusValue] || { label: '未知', elType: 'info' };
|
||||||
|
};
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<template>
|
||||||
|
<div class="standard-data-grid">
|
||||||
|
<el-table :data="tableData" border :span-method="spanMethod">
|
||||||
|
<template v-for="(item, index) in columns" :key="item.key">
|
||||||
|
<el-table-column
|
||||||
|
v-if="item.children && item.children.length > 0"
|
||||||
|
:label="item.title"
|
||||||
|
:prop="item.key"
|
||||||
|
:align="item.align ?? 'center'"
|
||||||
|
>
|
||||||
|
<el-table-column
|
||||||
|
v-for="subItem in item.children"
|
||||||
|
:key="subItem.key"
|
||||||
|
:prop="subItem.key"
|
||||||
|
:label="subItem.title"
|
||||||
|
:align="subItem.align ?? 'center'"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<div v-if="subItem.type === 'action'" class="action-btn-group">
|
||||||
|
<template v-for="btn in subItem.actions" :key="btn.actionKey">
|
||||||
|
<el-button
|
||||||
|
v-if="!btn.showOn || btn.showOn.values.includes(scope.row[btn.showOn.key])"
|
||||||
|
:type="btn.btnType || 'primary'"
|
||||||
|
size="small"
|
||||||
|
@click="handleActionClick(btn.actionKey, scope.row)"
|
||||||
|
>
|
||||||
|
{{ btn.label }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</el-table-column>
|
||||||
|
<el-table-column
|
||||||
|
v-else
|
||||||
|
:label="item.title"
|
||||||
|
:prop="item.key"
|
||||||
|
:align="item.align"
|
||||||
|
:width="item.width"
|
||||||
|
:min-width="item.minWidth"
|
||||||
|
>
|
||||||
|
<template #default="scope">
|
||||||
|
<span v-if="item.type === 'text'">
|
||||||
|
{{ scope.row[item.key] ?? '--' }}
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.type === 'number'">
|
||||||
|
{{ scope.row[item.key] }}<span class="unit">{{ item.unit }}</span>
|
||||||
|
</span>
|
||||||
|
<span v-else-if="item.type === 'status'">
|
||||||
|
<el-tag :type="getStatusConfig(scope.row[item.key]).elType">
|
||||||
|
{{ getStatusConfig(scope.row[item.key]).label }}
|
||||||
|
</el-tag>
|
||||||
|
</span>
|
||||||
|
<div v-else-if="item.type === 'action'" class="action-btn-group">
|
||||||
|
<template v-for="btn in item.actions" :key="btn.actionKey">
|
||||||
|
<el-button
|
||||||
|
v-if="!btn.showOn || btn.showOn.values.includes(scope.row[btn.showOn.key])"
|
||||||
|
:type="btn.btnType || 'primary'"
|
||||||
|
:disabled="
|
||||||
|
!btn.disabledOn || btn.disabledOn.values.includes(scope.row[btn.disabledOn.key])
|
||||||
|
"
|
||||||
|
@click="handleActionClick(btn.actionKey, scope.row)"
|
||||||
|
>
|
||||||
|
{{ btn.label }}
|
||||||
|
</el-button>
|
||||||
|
</template>
|
||||||
|
</div>
|
||||||
|
<div
|
||||||
|
v-if="
|
||||||
|
item.horizontalMergeRule &&
|
||||||
|
scope.row[item.horizontalMergeRule.matchCondition.key] ===
|
||||||
|
item.horizontalMergeRule.matchCondition.value
|
||||||
|
"
|
||||||
|
>
|
||||||
|
<div
|
||||||
|
v-if="item?.horizontalMergeRule.renderConfig?.type === 'action'"
|
||||||
|
class="merged-action-cell"
|
||||||
|
>
|
||||||
|
<el-button
|
||||||
|
v-for="btn in item.horizontalMergeRule.renderConfig.actions"
|
||||||
|
:key="btn.actionKey"
|
||||||
|
:type="btn.btnType"
|
||||||
|
@click="handleActionClick(btn.actionKey, scope.row)"
|
||||||
|
>
|
||||||
|
{{ btn.label }}
|
||||||
|
</el-button>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
</el-table-column>
|
||||||
|
</template>
|
||||||
|
</el-table>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
|
||||||
|
<style scoped></style>
|
||||||
@ -0,0 +1,75 @@
|
|||||||
|
/**
|
||||||
|
* 表格列的基本规范
|
||||||
|
*/
|
||||||
|
interface BaseColumn {
|
||||||
|
// 表头的标题
|
||||||
|
title: string;
|
||||||
|
// 数据源对应的字段名
|
||||||
|
key: string;
|
||||||
|
// 列的宽度
|
||||||
|
width?: number | string;
|
||||||
|
// 单元格的显示位置
|
||||||
|
align?: 'left' | 'center' | 'right';
|
||||||
|
// 固定列
|
||||||
|
fixed?: 'left' | 'right';
|
||||||
|
// 最小宽度,适应不同大小的屏幕
|
||||||
|
minWidth?: number | string;
|
||||||
|
// 标记这个列是否需要纵向合并
|
||||||
|
mergeRow?: boolean;
|
||||||
|
// 标记这个列是否需要横向合并
|
||||||
|
horizontalMergeRule?: {
|
||||||
|
matchCondition: { key: string; value: string | boolean };
|
||||||
|
mergeKeys: string[];
|
||||||
|
renderConfig?: {
|
||||||
|
type: string;
|
||||||
|
actions?: ActionButton[];
|
||||||
|
};
|
||||||
|
};
|
||||||
|
// 多级表头
|
||||||
|
children?: TableColumnSchema[];
|
||||||
|
// 标记合并行时的参考列
|
||||||
|
mergeBy?: string;
|
||||||
|
}
|
||||||
|
// 纯文本列
|
||||||
|
export interface TextColumn extends BaseColumn {
|
||||||
|
type: 'text';
|
||||||
|
}
|
||||||
|
// 状态列
|
||||||
|
export interface StatusColumn extends BaseColumn {
|
||||||
|
type: 'status';
|
||||||
|
dictCode?: string;
|
||||||
|
}
|
||||||
|
// 数值列
|
||||||
|
export interface NumberColumn extends BaseColumn {
|
||||||
|
type: 'number';
|
||||||
|
// 单位后缀
|
||||||
|
unit?: string;
|
||||||
|
}
|
||||||
|
// 操作列
|
||||||
|
export interface ActionColumn extends BaseColumn {
|
||||||
|
type: 'action';
|
||||||
|
// 操作列包含按钮列表
|
||||||
|
actions: ActionButton[];
|
||||||
|
}
|
||||||
|
// 按钮定义的schema
|
||||||
|
export interface ActionButton {
|
||||||
|
// 按钮的文字
|
||||||
|
label: string;
|
||||||
|
//抛出给外层的事件名
|
||||||
|
actionKey: string;
|
||||||
|
// 按钮的视觉类型
|
||||||
|
btnType?: 'primary' | 'default' | 'dashed' | 'danger' | 'link' | 'text';
|
||||||
|
// 根据状态值控制显示
|
||||||
|
showOn?: {
|
||||||
|
key: string; // 依赖哪一列数据
|
||||||
|
values: any[]; // 当值等于数组中的哪些项时，才显示按钮
|
||||||
|
};
|
||||||
|
// 根据状态来控制禁用
|
||||||
|
disabledOn?: {
|
||||||
|
key: string;
|
||||||
|
values: any[];
|
||||||
|
};
|
||||||
|
isRound?: boolean;
|
||||||
|
}
|
||||||
|
export type TableColumnSchema = TextColumn | StatusColumn | NumberColumn | ActionColumn;
|
||||||
|
export type DataGridSchema = TableColumnSchema[];
|
||||||
@ -0,0 +1,118 @@
|
|||||||
|
// 提取叶子节点列，解决多级表头索引对齐问题
|
||||||
|
const getLeafColumns = (columns: any[]) => {
|
||||||
|
let leaves: any[] = [];
|
||||||
|
columns.forEach((col) => {
|
||||||
|
if (col.children && col.children.length > 0) {
|
||||||
|
leaves.push(...getLeafColumns(col.children));
|
||||||
|
} else {
|
||||||
|
leaves.push(col);
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return leaves;
|
||||||
|
};
|
||||||
|
/**
|
||||||
|
*
|
||||||
|
* @param data 表格的数据源
|
||||||
|
* @param rowMergeConfigs 纵向合并配置 [{ key: 'xxx', mergeBy: 'yyy' }]
|
||||||
|
* @param rawColumns 表格列配置
|
||||||
|
*/
|
||||||
|
export const createRowSpanMethod = (
|
||||||
|
data: any[],
|
||||||
|
rawColumns: any[],
|
||||||
|
rowMergeConfigs: { key: string; mergeBy: string }[]
|
||||||
|
) => {
|
||||||
|
// 1. 拍平获取物理叶子列
|
||||||
|
const columns = getLeafColumns(rawColumns);
|
||||||
|
const rowSpanInfos: Record<string, number[]> = {};
|
||||||
|
rowMergeConfigs.forEach((config) => {
|
||||||
|
const { key, mergeBy } = config;
|
||||||
|
rowSpanInfos[key] = [];
|
||||||
|
let position = 0;
|
||||||
|
data.forEach((item, index) => {
|
||||||
|
if (index === 0) {
|
||||||
|
rowSpanInfos[key].push(1);
|
||||||
|
position = 0;
|
||||||
|
} else {
|
||||||
|
// 如果当前行数据和上一行数据相等，则当前行不显示
|
||||||
|
if (
|
||||||
|
item[mergeBy] === data[index - 1][mergeBy] &&
|
||||||
|
!item.colMergeConfig &&
|
||||||
|
!data[index - 1].colMergeConfig
|
||||||
|
) {
|
||||||
|
rowSpanInfos[key][position] += 1;
|
||||||
|
rowSpanInfos[key].push(0);
|
||||||
|
} else {
|
||||||
|
rowSpanInfos[key].push(1);
|
||||||
|
position = index;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
});
|
||||||
|
});
|
||||||
|
return ({ row, column, rowIndex, columnIndex }: any) => {
|
||||||
|
// 优先处理横向合并
|
||||||
|
const ruleColumn = columns.find(
|
||||||
|
(col) =>
|
||||||
|
col.horizontalMergeRule &&
|
||||||
|
row[col.horizontalMergeRule.matchCondition.key] ===
|
||||||
|
col.horizontalMergeRule.matchCondition.value
|
||||||
|
);
|
||||||
|
if (ruleColumn) {
|
||||||
|
const rule = ruleColumn.horizontalMergeRule;
|
||||||
|
const targetKeys = rule.mergeKeys;
|
||||||
|
const validIndices = targetKeys
|
||||||
|
.map((key) => columns.findIndex((item) => item.key === key))
|
||||||
|
.filter((index) => index != -1);
|
||||||
|
|
||||||
|
if (validIndices.length > 0) {
|
||||||
|
const minIndex = Math.min(...validIndices);
|
||||||
|
const maxIndex = Math.max(...validIndices);
|
||||||
|
const actualColSpan = maxIndex - minIndex + 1;
|
||||||
|
if (columnIndex == minIndex) {
|
||||||
|
return {
|
||||||
|
rowspan: 1,
|
||||||
|
colspan: actualColSpan
|
||||||
|
};
|
||||||
|
}
|
||||||
|
if (columnIndex > minIndex && columnIndex <= maxIndex) {
|
||||||
|
return {
|
||||||
|
rowspan: 0,
|
||||||
|
colspan: 0
|
||||||
|
};
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
// 再处理纵向合并
|
||||||
|
const mergeTarget = rowMergeConfigs.find((c) => c.key === column.property);
|
||||||
|
if (mergeTarget) {
|
||||||
|
const rowspan = rowSpanInfos[column.property][rowIndex];
|
||||||
|
const colspan = rowspan > 0 ? 1 : 0;
|
||||||
|
return { rowspan, colspan };
|
||||||
|
}
|
||||||
|
return { rowspan: 1, colspan: 1 };
|
||||||
|
};
|
||||||
|
};
|
||||||
|
|
||||||
|
/**
|
||||||
|
* 通用数组聚合标记函数
|
||||||
|
* @param {Array} list - 原始数组
|
||||||
|
* @param {String} groupKey - 按照哪个字段进行分组统计 (例如 'deviceName')
|
||||||
|
* @param {String} flagName - 生成的布尔值标记名称 (例如 'isMultiNode')
|
||||||
|
*/
|
||||||
|
export const injectMultiNodeFlag = (list: any[], groupKey: string, flagName: string) => {
|
||||||
|
const countMap = {} as Record<string, number>;
|
||||||
|
// 统计
|
||||||
|
list.forEach((item) => {
|
||||||
|
const val = item[groupKey];
|
||||||
|
if (val) countMap[val] = (countMap[val] || 0) + 1;
|
||||||
|
});
|
||||||
|
|
||||||
|
// 映射
|
||||||
|
return list.map((item) => {
|
||||||
|
const val = item[groupKey];
|
||||||
|
if (!val) return item; // 非目标数据，直接返回
|
||||||
|
return {
|
||||||
|
...item,
|
||||||
|
[flagName]: countMap[val] > 1 // 动态注入标记
|
||||||
|
};
|
||||||
|
});
|
||||||
|
};
|
||||||
@ -0,0 +1,52 @@
|
|||||||
|
import { computed, type Ref, unref } from 'vue';
|
||||||
|
import { createRowSpanMethod } from '@/components/custom-components/table-vue/utils/tableUtils';
|
||||||
|
/**
|
||||||
|
* 只能表格合并 hook
|
||||||
|
* @param tableData 表格数据源
|
||||||
|
* @param tableColumns 表格列配置
|
||||||
|
*/
|
||||||
|
export function useTableSpan(tableData: Ref<any[]>, tableColumns: any[] | Ref<any[]>) {
|
||||||
|
const flatColumns = computed(() => {
|
||||||
|
const columns = unref(tableColumns); // 兼容普通对象和ref对象
|
||||||
|
const flatten = (cols: any[]): any[] => {
|
||||||
|
let result: any[] = [];
|
||||||
|
cols.forEach((col) => {
|
||||||
|
result.push(col);
|
||||||
|
if (col.children && col.children.length > 0) {
|
||||||
|
result.push(...flatten(col.children));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return result;
|
||||||
|
};
|
||||||
|
return flatten(columns);
|
||||||
|
});
|
||||||
|
//自动提取需要纵向合并的列配置
|
||||||
|
const rowMergeConfigs = computed(() => {
|
||||||
|
return flatColumns.value
|
||||||
|
.filter((col) => col.mergeRow)
|
||||||
|
.map((col) => {
|
||||||
|
return {
|
||||||
|
key: col.key,
|
||||||
|
mergeBy: col.mergeBy || col.key
|
||||||
|
};
|
||||||
|
});
|
||||||
|
});
|
||||||
|
// 判断表格需不需要开启合并引擎
|
||||||
|
const needSpan = computed(() => {
|
||||||
|
// 有任何列配置了纵向合并
|
||||||
|
const hasRowMerge = rowMergeConfigs.value.length;
|
||||||
|
// 有任何列配置了横向合并
|
||||||
|
const hasColMerge = flatColumns.value.some((col) => !!col.horizontalMergeRule);
|
||||||
|
return hasRowMerge || hasColMerge;
|
||||||
|
});
|
||||||
|
// 动态返回合并函数
|
||||||
|
const spanMethod = computed(() => {
|
||||||
|
if (!needSpan.value) {
|
||||||
|
return undefined;
|
||||||
|
}
|
||||||
|
return createRowSpanMethod(unref(tableData), unref(tableColumns), rowMergeConfigs.value);
|
||||||
|
});
|
||||||
|
return {
|
||||||
|
spanMethod
|
||||||
|
};
|
||||||
|
}
|
||||||
@ -0,0 +1,7 @@
|
|||||||
|
import axios from 'axios';
|
||||||
|
const myAxios = axios.create({
|
||||||
|
baseURL: 'http://localhost:8080',
|
||||||
|
timeout: 60000,
|
||||||
|
withCredentials: true
|
||||||
|
});
|
||||||
|
export default myAxios;
|
||||||
Loading…
Reference in New Issue