初始化

2026-04-13 17:32:58 +08:00
commit c6ee0d5243
1342 changed files with 96426 additions and 0 deletions
--- a/frontend/src/components/ProTable/components/ColSetting.vue
+++ b/frontend/src/components/ProTable/components/ColSetting.vue
@@ -0,0 +1,45 @@
+<template>
+  <!-- 列设置 -->
+  <el-drawer v-model="drawerVisible" title="列设置" size="450px">
+    <div class="table-main">
+      <el-table :data="colSetting" :border="true" row-key="prop" default-expand-all :tree-props="{ children: '_children' }">
+        <el-table-column prop="label" align="center" label="列名" />
+        <el-table-column v-slot="scope" prop="isShow" align="center" label="显示">
+          <el-switch v-model="scope.row.isShow"></el-switch>
+        </el-table-column>
+        <el-table-column v-slot="scope" prop="sortable" align="center" label="排序">
+          <el-switch v-model="scope.row.sortable"></el-switch>
+        </el-table-column>
+        <template #empty>
+          <div class="table-empty">
+            <img src="@/assets/images/notData.png" alt="notData" />
+            <div>暂无可配置列</div>
+          </div>
+        </template>
+      </el-table>
+    </div>
+  </el-drawer>
+</template>
+
+<script setup lang="ts" name="ColSetting">
+import { ref } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+
+defineProps<{ colSetting: ColumnProps[] }>();
+
+const drawerVisible = ref<boolean>(false);
+
+const openColSetting = () => {
+  drawerVisible.value = true;
+};
+
+defineExpose({
+  openColSetting
+});
+</script>
+
+<style scoped lang="scss">
+.cursor-move {
+  cursor: move;
+}
+</style>
--- a/frontend/src/components/ProTable/components/Pagination.vue
+++ b/frontend/src/components/ProTable/components/Pagination.vue
@@ -0,0 +1,39 @@
+<template>
+  <!-- 分页组件 -->
+  <el-pagination
+    :background="true"
+    :current-page="pageable.current"
+    :page-size="pageable.size"
+    :page-sizes="[10, 25, 50, 100]"
+    :total="pageable.total"
+    :size="globalStore?.assemblySize ?? 'default'"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+import { useGlobalStore } from "@/stores/modules/global";
+const globalStore = useGlobalStore();
+
+interface Pageable {
+  current: number;
+  size: number;
+  total: number;
+}
+
+interface ResPageable {
+  current: number;
+  size: number;
+  total: number;
+}
+
+interface PaginationProps {
+  pageable: ResPageable;
+  handleSizeChange: (size: number) => void;
+  handleCurrentChange: (currentPage: number) => void;
+}
+
+defineProps<PaginationProps>();
+</script>
--- a/frontend/src/components/ProTable/components/TableColumn.vue
+++ b/frontend/src/components/ProTable/components/TableColumn.vue
@@ -0,0 +1,57 @@
+<template>
+  <RenderTableColumn v-bind='column' />
+</template>
+
+<script setup lang='tsx' name='TableColumn'>
+import { ColumnProps, RenderScope, HeaderRenderScope } from '@/components/ProTable/interface'
+import { filterEnum, formatValue, handleProp, handleRowAccordingToProp } from '@/utils'
+
+defineProps<{ column: ColumnProps }>()
+
+const slots = useSlots()
+
+const enumMap = inject('enumMap', ref(new Map()))
+
+// 渲染表格数据
+const renderCellData = (item: ColumnProps, scope: RenderScope<any>) => {
+  return enumMap.value.get(item.prop) && item.isFilterEnum
+      ? filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop)!, item.fieldNames)
+      : formatValue(handleRowAccordingToProp(scope.row, item.prop!))
+}
+
+// 获取 tag 类型
+const getTagType = (item: ColumnProps, scope: RenderScope<any>) => {
+  return (
+      filterEnum(handleRowAccordingToProp(scope.row, item.prop!), enumMap.value.get(item.prop), item.fieldNames, 'tag') || 'primary'
+  )
+}
+
+const RenderTableColumn = (item: ColumnProps) => {
+  return (
+      <>
+        {item.isShow && (
+            <el-table-column
+                {...item}
+                align={item.align ?? 'center'}
+                showOverflowTooltip={item.showOverflowTooltip ?? item.prop !== 'operation'}
+            >
+              {{
+                default: (scope: RenderScope<any>) => {
+                  if (item._children) return item._children.map(child => RenderTableColumn(child))
+                  if (item.render) return item.render(scope)
+                  if (item.prop && slots[handleProp(item.prop)]) return slots[handleProp(item.prop)]!(scope)
+                  if (item.tag) return <el-tag type={getTagType(item, scope)}>{renderCellData(item, scope)}</el-tag>
+                  return renderCellData(item, scope)
+                },
+                header: (scope: HeaderRenderScope<any>) => {
+                  if (item.headerRender) return item.headerRender(scope)
+                  if (item.prop && slots[`${handleProp(item.prop)}Header`]) return slots[`${handleProp(item.prop)}Header`]!(scope)
+                  return item.label
+                },
+              }}
+            </el-table-column>
+        )}
+      </>
+  )
+}
+</script>
--- a/frontend/src/components/ProTable/index.vue
+++ b/frontend/src/components/ProTable/index.vue
@@ -0,0 +1,336 @@
+<template>
+  <!-- 查询表单 -->
+  <SearchForm
+    v-show='isShowSearch'
+    :search='_search'
+    :reset='_reset'
+    :columns='searchColumns'
+    :search-param='searchParam'
+    :search-col='searchCol'
+  />
+  <!-- 表格主体 -->
+  <div class='table-main' :class='{ card: showCard }'  >
+    <!-- 表格头部 操作按钮 -->
+    <div class='table-header'>
+      <div class='header-button-lf'>
+        <slot name='tableHeader' :selected-list='selectedList' :selected-list-ids='selectedListIds'
+              :is-selected='isSelected' />
+      </div>
+      <div v-if='toolButton' class='header-button-ri'>
+        <slot name='toolButton'>
+          <el-button v-if="showToolButton('refresh')" :icon='Refresh' circle @click='getTableList' />
+          <el-button v-if="showToolButton('setting') && columns.length" :icon='Operation' circle
+                     @click='openColSetting' />
+          <el-button
+            v-if="showToolButton('search') && searchColumns?.length"
+            :icon='Search'
+            circle
+            @click='isShowSearch = !isShowSearch'
+          />
+        </slot>
+      </div>
+    </div>
+    <!-- 表格主体 -->
+    <el-table
+      ref='tableRef'
+      v-bind='$attrs'
+      :id='uuid'
+      :data='processTableData'
+      :border='border'
+      :row-key='rowKey'
+      @selection-change='selectionChange'
+    >
+      <!-- 默认插槽 -->
+      <slot />
+      
+      <template v-for='item in tableColumns' :key='item'>
+        <!-- selection || radio || index || expand || sort -->
+        <el-table-column
+          v-if='item.type && columnTypes.includes(item.type) && item.isShow'
+          v-bind='item'
+          :align="item.align ?? 'center'"
+          :reserve-selection="item.type == 'selection'"
+        >
+          <template #default='scope'>
+            <!-- expand -->
+            <template v-if="item.type == 'expand'">
+              <component :is='item.render' v-bind='scope' v-if='item.render' />
+              <slot v-else :name='item.type' v-bind='scope' />
+            </template>
+            <!-- radio -->
+            <el-radio v-if="item.type == 'radio'" v-model='radio' :label='scope.row[rowKey]'>
+              <i></i>
+            </el-radio>
+            <!-- sort -->
+            <el-tag v-if="item.type == 'sort'" class='move'>
+              <el-icon>
+                <DCaret />
+              </el-icon>
+            </el-tag>
+          </template>
+        </el-table-column>
+        <!-- other -->
+        <TableColumn v-else :column='item'>
+          <template v-for='slot in Object.keys($slots)' #[slot]='scope'>
+            <slot :name='slot' v-bind='scope' />
+          </template>
+        </TableColumn>
+      </template>
+      <!-- 插入表格最后一行之后的插槽 -->
+      <template #append>
+        <slot name='append' />
+      </template>
+      <!-- 无数据 -->
+      <template #empty>
+        <div class='table-empty'>
+          <slot name='empty'>
+            <img src='@/assets/images/notData.png' alt='notData' />
+            <div>暂无数据</div>
+          </slot>
+        </div>
+      </template>
+    </el-table>
+    <!-- 分页组件 -->
+    <slot name='pagination'>
+      <Pagination
+        v-if='pagination'
+        :pageable='resPageable'
+        :handle-size-change='handleSizeChange'
+        :handle-current-change='handleCurrentChange'
+      />
+    </slot>
+  </div>
+  <!-- 列设置 -->
+  <ColSetting v-if='toolButton' ref='colRef' v-model:col-setting='colSetting' />
+</template>
+
+<script setup lang='ts' name='ProTable'>
+import { ElTable } from 'element-plus'
+import { useTable } from '@/hooks/useTable'
+import { useSelection } from '@/hooks/useSelection'
+import { BreakPoint } from '@/components/Grid/interface'
+import { ColumnProps, TypeProps } from '@/components/ProTable/interface'
+import { Refresh, Operation, Search } from '@element-plus/icons-vue'
+import { generateUUID, handleProp } from '@/utils'
+import SearchForm from '@/components/SearchForm/index.vue'
+import Pagination from './components/Pagination.vue'
+import ColSetting from './components/ColSetting.vue'
+import TableColumn from './components/TableColumn.vue'
+import Sortable from 'sortablejs'
+
+export interface ProTableProps {
+
+  columns: ColumnProps[]; // 列配置项  ==> 必传
+  data?: any[]; // 静态 table data 数据，若存在则不会使用 requestApi 返回的 data ==> 非必传
+  requestApi?: (params: any) => Promise<any>; // 请求表格数据的 api ==> 非必传
+  requestAuto?: boolean; // 是否自动执行请求 api ==> 非必传（默认为true）
+  requestError?: (params: any) => void; // 表格 api 请求错误监听 ==> 非必传
+  dataCallback?: (data: any) => any; // 返回数据的回调函数，可以对数据进行处理 ==> 非必传
+  title?: string; // 表格标题 ==> 非必传
+  showCard?: boolean; // 下个是否需要卡片
+  pagination?: boolean; // 是否需要分页组件 ==> 非必传（默认为true）
+  initParam?: any; // 初始化请求参数 ==> 非必传（默认为{}）
+  border?: boolean; // 是否带有纵向边框 ==> 非必传（默认为true）
+  toolButton?: ('refresh' | 'setting' | 'search')[] | boolean; // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string; // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  searchCol?: number | Record<BreakPoint, number>; // 表格搜索项 每列占比配置 ==> 非必传 { xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  requestAuto: true,
+  pagination: true,
+  initParam: {},
+  border: true,
+  showCard: true,
+  toolButton: true,
+  rowKey: 'id',
+  searchCol: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+})
+
+// table 实例
+const tableRef = ref<InstanceType<typeof ElTable>>()
+
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+
+// column 列类型
+const columnTypes: TypeProps[] = ['selection', 'radio', 'index', 'expand', 'sort']
+
+// 是否显示搜索模块
+const isShowSearch = ref(true)
+
+// 控制 ToolButton 显示
+const showToolButton = (key: 'refresh' | 'setting' | 'search') => {
+  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton
+}
+
+// 单选值
+const radio = ref('')
+
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected } = useSelection(props.rowKey)
+
+// 表格操作 Hooks
+const {
+  tableData,
+  pageable,
+  resPageable,
+  searchParam,
+  searchInitParam,
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+} =
+  useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError)
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection()
+
+// 初始化表格数据 && 拖拽排序
+onMounted(() => {
+  dragSort()
+  props.requestAuto && getTableList()
+  props.data && (resPageable.value.total = props.data.length)
+})
+
+// 处理表格数据
+const processTableData = computed(() => {
+  if (!props.data) return tableData.value
+  if (!props.pagination) return props.data
+  return props.data.slice(
+    (resPageable.value.current - 1) * resPageable.value.size,
+    resPageable.value.size * resPageable.value.current,
+  )
+})
+
+// 监听页面 initParam 改化，重新获取表格数据
+watch(() => props.initParam, getTableList, { deep: true })
+
+// 接收 columns 并设置为响应式
+const tableColumns = reactive<ColumnProps[]>(props.columns)
+
+// 扁平化 columns
+const flatColumns = computed(() => flatColumnsFunc(tableColumns))
+
+// 定义 enumMap 存储 enum 值（避免异步请求无法格式化单元格内容 || 无法填充搜索下拉选择）
+const enumMap = ref(new Map<string, { [key: string]: any }[]>())
+const setEnumMap = async ({ prop, enum: enumValue }: ColumnProps) => {
+  if (!enumValue) return
+
+  // 如果当前 enumMap 存在相同的值 return
+  if (enumMap.value.has(prop!) && (typeof enumValue === 'function' || enumMap.value.get(prop!) === enumValue)) return
+
+  // 当前 enum 为静态数据，则直接存储到 enumMap
+  if (typeof enumValue !== 'function') return enumMap.value.set(prop!, unref(enumValue!))
+
+  // 为了防止接口执行慢，而存储慢，导致重复请求，所以预先存储为[]，接口返回后再二次存储
+  enumMap.value.set(prop!, [])
+
+  // 当前 enum 为后台数据需要请求数据，则调用该请求接口，并存储到 enumMap
+  const { data } = await enumValue()
+  enumMap.value.set(prop!, data)
+}
+
+// 注入 enumMap
+provide('enumMap', enumMap)
+
+// 扁平化 columns 的方法
+const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
+  columns.forEach(async col => {
+    if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children))
+    flatArr.push(col)
+
+    // column 添加默认 isShow && isSetting && isFilterEnum 属性值
+    col.isShow = col.isShow ?? true
+    col.isSetting = col.isSetting ?? true
+    col.isFilterEnum = col.isFilterEnum ?? true
+
+    // 设置 enumMap
+    await setEnumMap(col)
+  })
+  return flatArr.filter(item => !item._children?.length)
+}
+
+// 过滤需要搜索的配置项 && 排序
+const searchColumns = computed(() => {
+  return flatColumns.value
+    ?.filter(item => item.search?.el || item.search?.render)
+    .sort((a, b) => a.search!.order! - b.search!.order!)
+})
+
+// 设置 搜索表单默认排序 && 搜索表单项的默认值
+searchColumns.value?.forEach((column, index) => {
+  column.search!.order = column.search?.order ?? index + 2
+  const key = column.search?.key ?? handleProp(column.prop!)
+  const defaultValue = column.search?.defaultValue
+  if (defaultValue !== undefined && defaultValue !== null) {
+    searchParam.value[key] = defaultValue
+    searchInitParam.value[key] = defaultValue
+  }
+})
+
+// 列设置 ==> 需要过滤掉不需要设置的列
+const colRef = ref()
+const colSetting = tableColumns!.filter(item => {
+  const { type, prop, isSetting } = item
+  return !columnTypes.includes(type!) && prop !== 'operation' && isSetting
+})
+const openColSetting = () => colRef.value.openColSetting()
+
+// 定义 emit 事件
+const emit = defineEmits<{
+  search: [];
+  reset: [];
+  dragSort: [{ newIndex?: number; oldIndex?: number }];
+}>()
+
+const _search = () => {
+  search()
+  emit('search')
+}
+
+const _reset = () => {
+  reset()
+  emit('reset')
+}
+
+// 表格拖拽排序
+const dragSort = () => {
+  const tbody = document.querySelector(`#${uuid.value} tbody`) as HTMLElement
+  Sortable.create(tbody, {
+    handle: '.move',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      const [removedItem] = processTableData.value.splice(oldIndex!, 1)
+      processTableData.value.splice(newIndex!, 0, removedItem)
+      emit('dragSort', { newIndex, oldIndex })
+    },
+  })
+}
+
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: tableRef,
+  tableData: processTableData,
+  radio,
+  pageable,
+  searchParam,
+  searchInitParam,
+  isSelected,
+  selectedList,
+  selectedListIds,
+
+  // 下面为 function
+  getTableList,
+  search,
+  reset,
+  handleSizeChange,
+  handleCurrentChange,
+  clearSelection,
+  enumMap,
+})
+</script>
--- a/frontend/src/components/ProTable/interface/index.ts
+++ b/frontend/src/components/ProTable/interface/index.ts
@@ -0,0 +1,86 @@
+import { VNode, ComponentPublicInstance, Ref } from "vue";
+import { BreakPoint, Responsive } from "@/components/Grid/interface";
+import { TableColumnCtx } from "element-plus/es/components/table/src/table-column/defaults";
+import { ProTableProps } from "@/components/ProTable/index.vue";
+import ProTable from "@/components/ProTable/index.vue";
+
+export interface EnumProps {
+  label?: string; // 选项框显示的文字
+  value?: string | number | boolean | any[]; // 选项框值
+  disabled?: boolean; // 是否禁用此选项
+  tagType?: string; // 当 tag 为 true 时，此选择会指定 tag 显示类型
+  children?: EnumProps[]; // 为树形选择时，可以通过 children 属性指定子选项
+  [key: string]: any;
+}
+
+export type TypeProps = "index" | "selection" | "radio" | "expand" | "sort";
+
+export type SearchType =
+  | "input"
+  | "input-number"
+  | "select"
+  | "select-v2"
+  | "tree-select"
+  | "cascader"
+  | "date-picker"
+  | "time-picker"
+  | "time-select"
+  | "switch"
+  | "slider";
+
+export type SearchRenderScope = {
+  searchParam: { [key: string]: any };
+  placeholder: string;
+  clearable: boolean;
+  options: EnumProps[];
+  data: EnumProps[];
+};
+
+export type SearchProps = {
+  el?: SearchType; // 当前项搜索框的类型
+  label?: string; // 当前项搜索框的 label
+  props?: any; // 搜索项参数，根据 element plus 官方文档来传递，该属性所有值会透传到组件
+  key?: string; // 当搜索项 key 不为 prop 属性时，可通过 key 指定
+  tooltip?: string; // 搜索提示
+  order?: number; // 搜索项排序（从大到小）
+  span?: number; // 搜索项所占用的列数，默认为 1 列
+  offset?: number; // 搜索字段左侧偏移列数
+  defaultValue?: string | number | boolean | any[] | Ref<any>; // 搜索项默认值
+  render?: (scope: SearchRenderScope) => VNode; // 自定义搜索内容渲染（tsx语法）
+} & Partial<Record<BreakPoint, Responsive>>;
+
+export type FieldNamesProps = {
+  label: string;
+  value: string;
+  children?: string;
+};
+
+export type RenderScope<T> = {
+  row: T;
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export type HeaderRenderScope<T> = {
+  $index: number;
+  column: TableColumnCtx<T>;
+  [key: string]: any;
+};
+
+export interface ColumnProps<T = any>
+  extends Partial<Omit<TableColumnCtx<T>, "type" | "children" | "renderCell" | "renderHeader">> {
+  type?: TypeProps; // 列类型
+  tag?: boolean | Ref<boolean>; // 是否是标签展示
+  isShow?: boolean | Ref<boolean>; // 是否显示在表格当中
+  isSetting?: boolean | Ref<boolean>; // 是否在 ColSetting 中可配置
+  search?: SearchProps | undefined; // 搜索项配置
+  enum?: EnumProps[] | Ref<EnumProps[]> | ((params?: any) => Promise<any>); // 枚举字典
+  isFilterEnum?: boolean | Ref<boolean>; // 当前单元格值是否根据 enum 格式化（示例：enum 只作为搜索项数据）
+  fieldNames?: FieldNamesProps; // 指定 label && value && children 的 key 值
+  headerRender?: (scope: HeaderRenderScope<T>) => VNode; // 自定义表头内容渲染（tsx语法）
+  render?: (scope: RenderScope<T>) => VNode | string; // 自定义单元格内容渲染（tsx语法）
+  _children?: ColumnProps<T>[]; // 多级表头
+}
+
+export type ProTableInstance = Omit<InstanceType<typeof ProTable>, keyof ComponentPublicInstance | keyof ProTableProps>;