计划列表

frontend/src/components/Grid/components/GridItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <div v-show="isShow" :style="style">
+    <slot></slot>
+  </div>
+</template>
+<script setup lang="ts" name="GridItem">
+import { computed, inject, Ref, ref, useAttrs, watch } from "vue";
+import { BreakPoint, Responsive } from "../interface/index";
+
+type Props = {
+  offset?: number;
+  span?: number;
+  suffix?: boolean;
+  xs?: Responsive;
+  sm?: Responsive;
+  md?: Responsive;
+  lg?: Responsive;
+  xl?: Responsive;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  offset: 0,
+  span: 1,
+  suffix: false,
+  xs: undefined,
+  sm: undefined,
+  md: undefined,
+  lg: undefined,
+  xl: undefined
+});
+
+const attrs = useAttrs() as { index: string };
+const isShow = ref(true);
+
+// 注入断点
+const breakPoint = inject<Ref<BreakPoint>>("breakPoint", ref("xl"));
+const shouldHiddenIndex = inject<Ref<number>>("shouldHiddenIndex", ref(-1));
+watch(
+  () => [shouldHiddenIndex.value, breakPoint.value],
+  n => {
+    if (!!attrs.index) {
+      isShow.value = !(n[0] !== -1 && parseInt(attrs.index) >= Number(n[0]));
+    }
+  },
+  { immediate: true }
+);
+
+const gap = inject("gap", 0);
+const cols = inject("cols", ref(4));
+const style = computed(() => {
+  let span = props[breakPoint.value]?.span ?? props.span;
+  let offset = props[breakPoint.value]?.offset ?? props.offset;
+  if (props.suffix) {
+    return {
+      gridColumnStart: cols.value - span - offset + 1,
+      gridColumnEnd: `span ${span + offset}`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  } else {
+    return {
+      gridColumn: `span ${span + offset > cols.value ? cols.value : span + offset}/span ${
+        span + offset > cols.value ? cols.value : span + offset
+      }`,
+      marginLeft: offset !== 0 ? `calc(((100% + ${gap}px) / ${span + offset}) * ${offset})` : "unset"
+    };
+  }
+});
+</script>

frontend/src/components/Grid/index.vue

@@ -0,0 +1,167 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+import {
+  ref,
+  watch,
+  useSlots,
+  computed,
+  provide,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onDeactivated,
+  onActivated,
+  VNodeArrayChildren,
+  VNode
+} from "vue";
+import type { BreakPoint } from "./interface/index";
+
+type Props = {
+  cols?: number | Record<BreakPoint, number>;
+  collapsed?: boolean;
+  collapsedRows?: number;
+  gap?: [number, number] | number;
+};
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: () => ({ xs: 1, sm: 2, md: 2, lg: 3, xl: 4 }),
+  collapsed: false,
+  collapsedRows: 1,
+  gap: 0
+});
+
+onBeforeMount(() => props.collapsed && findIndex());
+onMounted(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onActivated(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent);
+  window.addEventListener("resize", resize);
+});
+onUnmounted(() => {
+  window.removeEventListener("resize", resize);
+});
+onDeactivated(() => {
+  window.removeEventListener("resize", resize);
+});
+
+// 监听屏幕变化
+const resize = (e: UIEvent) => {
+  let width = (e.target as Window).innerWidth;
+  switch (!!width) {
+    case width < 768:
+      breakPoint.value = "xs";
+      break;
+    case width >= 768 && width < 992:
+      breakPoint.value = "sm";
+      break;
+    case width >= 992 && width < 1200:
+      breakPoint.value = "md";
+      break;
+    case width >= 1200 && width < 1920:
+      breakPoint.value = "lg";
+      break;
+    case width >= 1920:
+      breakPoint.value = "xl";
+      break;
+  }
+};
+
+// 注入 gap 间距
+provide("gap", Array.isArray(props.gap) ? props.gap[0] : props.gap);
+
+// 注入响应式断点
+let breakPoint = ref<BreakPoint>("xl");
+provide("breakPoint", breakPoint);
+
+// 注入要开始折叠的 index
+const hiddenIndex = ref(-1);
+provide("shouldHiddenIndex", hiddenIndex);
+
+// 注入 cols
+const gridCols = computed(() => {
+  if (typeof props.cols === "object") return props.cols[breakPoint.value] ?? props.cols;
+  return props.cols;
+});
+provide("cols", gridCols);
+
+// 寻找需要开始折叠的字段 index
+const slots = useSlots().default!();
+
+const findIndex = () => {
+  let fields: VNodeArrayChildren = [];
+  let suffix: VNode | null = null;
+  slots.forEach((slot: any) => {
+    // suffix
+    if (typeof slot.type === "object" && slot.type.name === "GridItem" && slot.props?.suffix !== undefined) suffix = slot;
+    // slot children
+    if (typeof slot.type === "symbol" && Array.isArray(slot.children)) fields.push(...slot.children);
+  });
+
+  // 计算 suffix 所占用的列
+  let suffixCols = 0;
+  if (suffix) {
+    suffixCols =
+      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0);
+  }
+  try {
+    let find = false;
+    fields.reduce((prev = 0, current, index) => {
+      prev +=
+        ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
+        ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0);
+      if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+        hiddenIndex.value = index;
+        find = true;
+        throw "find it";
+      }
+      return prev;
+    }, 0);
+    if (!find) hiddenIndex.value = -1;
+  } catch (e) {
+    // console.warn(e);
+  }
+};
+
+// 断点变化时执行 findIndex
+watch(
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex();
+  }
+);
+
+// 监听 collapsed
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex();
+    hiddenIndex.value = -1;
+  }
+);
+
+// 设置间距
+const gridGap = computed(() => {
+  if (typeof props.gap === "number") return `${props.gap}px`;
+  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`;
+  return "unset";
+});
+
+// 设置 style
+const style = computed(() => {
+  return {
+    display: "grid",
+    gridGap: gridGap.value,
+    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
+  };
+});
+
+defineExpose({ breakPoint });
+</script>

frontend/src/components/Grid/interface/index.ts

@@ -0,0 +1,6 @@
+export type BreakPoint = "xs" | "sm" | "md" | "lg" | "xl";
+
+export type Responsive = {
+  span?: number;
+  offset?: number;
+};

frontend/src/components/ImportExcel/index.scss

@@ -0,0 +1,3 @@
+.upload {
+  width: 80%;
+}

frontend/src/components/ImportExcel/index.vue

@@ -0,0 +1,149 @@
+<template>
+  <el-dialog v-model="dialogVisible" :title="`批量添加${parameter.title}`" :destroy-on-close="true" width="580px" draggable>
+    <el-form class="drawer-multiColumn-form" label-width="100px">
+      <el-form-item label="模板下载 :">
+        <el-button type="primary" :icon="Download" @click="downloadTemp"> 点击下载 </el-button>
+      </el-form-item>
+      <el-form-item label="文件上传 :">
+        <el-upload
+          action="#"
+          class="upload"
+          :drag="true"
+          :limit="excelLimit"
+          :multiple="true"
+          :show-file-list="true"
+          :http-request="uploadExcel"
+          :before-upload="beforeExcelUpload"
+          :on-exceed="handleExceed"
+          :on-success="excelUploadSuccess"
+          :on-error="excelUploadError"
+          :accept="parameter.fileType!.join(',')"
+        >
+          <slot name="empty">
+            <el-icon class="el-icon--upload">
+              <upload-filled />
+            </el-icon>
+            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
+          </slot>
+          <template #tip>
+            <slot name="tip">
+              <div class="el-upload__tip">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</div>
+            </slot>
+          </template>
+        </el-upload>
+      </el-form-item>
+      <el-form-item label="数据覆盖 :">
+        <el-switch v-model="isCover" />
+      </el-form-item>
+    </el-form>
+  </el-dialog>
+</template>
+
+<script setup lang="ts" name="ImportExcel">
+import { ref } from "vue";
+import { useDownload } from "@/hooks/useDownload";
+import { Download } from "@element-plus/icons-vue";
+import { ElNotification, UploadRequestOptions, UploadRawFile } from "element-plus";
+
+export interface ExcelParameterProps {
+  title: string; // 标题
+  fileSize?: number; // 上传文件的大小
+  fileType?: File.ExcelMimeType[]; // 上传文件的类型
+  tempApi?: (params: any) => Promise<any>; // 下载模板的Api
+  importApi?: (params: any) => Promise<any>; // 批量导入的Api
+  getTableList?: () => void; // 获取表格数据的Api
+}
+
+// 是否覆盖数据
+const isCover = ref(false);
+// 最大文件上传数
+const excelLimit = ref(1);
+// dialog状态
+const dialogVisible = ref(false);
+// 父组件传过来的参数
+const parameter = ref<ExcelParameterProps>({
+  title: "",
+  fileSize: 5,
+  fileType: ["application/vnd.ms-excel", "application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"]
+});
+
+// 接收父组件参数
+const acceptParams = (params: ExcelParameterProps) => {
+  parameter.value = { ...parameter.value, ...params };
+  dialogVisible.value = true;
+};
+
+// Excel 导入模板下载
+const downloadTemp = () => {
+  if (!parameter.value.tempApi) return;
+  useDownload(parameter.value.tempApi, `${parameter.value.title}模板`);
+};
+
+// 文件上传
+const uploadExcel = async (param: UploadRequestOptions) => {
+  let excelFormData = new FormData();
+  excelFormData.append("file", param.file);
+  excelFormData.append("isCover", isCover.value as unknown as Blob);
+  await parameter.value.importApi!(excelFormData);
+  parameter.value.getTableList && parameter.value.getTableList();
+  dialogVisible.value = false;
+};
+
+/**
+ * @description 文件上传之前判断
+ * @param file 上传的文件
+ * */
+const beforeExcelUpload = (file: UploadRawFile) => {
+  const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType);
+  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!;
+  if (!isExcel)
+    ElNotification({
+      title: "温馨提示",
+      message: "上传文件只能是 xls / xlsx 格式！",
+      type: "warning"
+    });
+  if (!fileSize)
+    setTimeout(() => {
+      ElNotification({
+        title: "温馨提示",
+        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
+        type: "warning"
+      });
+    }, 0);
+  return isExcel && fileSize;
+};
+
+// 文件数超出提示
+const handleExceed = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: "最多只能上传一个文件！",
+    type: "warning"
+  });
+};
+
+// 上传错误提示
+const excelUploadError = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: `批量添加${parameter.value.title}失败，请您重新上传！`,
+    type: "error"
+  });
+};
+
+// 上传成功提示
+const excelUploadSuccess = () => {
+  ElNotification({
+    title: "温馨提示",
+    message: `批量添加${parameter.value.title}成功！`,
+    type: "success"
+  });
+};
+
+defineExpose({
+  acceptParams
+});
+</script>
+<style lang="scss" scoped>
+@import "./index.scss";
+</style>

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>

frontend/src/components/ProTable/components/Pagination.vue

@@ -0,0 +1,29 @@
+<template>
+  <!-- 分页组件 -->
+  <el-pagination
+    :background="true"
+    :current-page="pageable.pageNum"
+    :page-size="pageable.pageSize"
+    :page-sizes="[10, 25, 50, 100]"
+    :total="pageable.total"
+    layout="total, sizes, prev, pager, next, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+
+<script setup lang="ts" name="Pagination">
+interface Pageable {
+  pageNum: number;
+  pageSize: number;
+  total: number;
+}
+
+interface PaginationProps {
+  pageable: Pageable;
+  handleSizeChange: (size: number) => void;
+  handleCurrentChange: (currentPage: number) => void;
+}
+
+defineProps<PaginationProps>();
+</script>

frontend/src/components/ProTable/components/TableColumn.vue

@@ -0,0 +1,58 @@
+<template>
+  <RenderTableColumn v-bind="column" />
+</template>
+
+<script setup lang="tsx" name="TableColumn">
+import { inject, ref, useSlots } from "vue";
+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>

frontend/src/components/ProTable/index.vue

@@ -0,0 +1,333 @@
+<template>
+  <!-- 查询表单 -->
+  <SearchForm
+    v-show="isShowSearch"
+    :search="_search"
+    :reset="_reset"
+    :columns="searchColumns"
+    :search-param="searchParam"
+    :search-col="searchCol"
+  />
+
+  <!-- 表格主体 -->
+  <div class="card table-main">
+    <!-- 表格头部 操作按钮 -->
+    <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>
+    <!-- 表格主体 -->
+    <!-- :data='[ {
+            "planName": "建线表铁习包前",
+            "checkMode": "2",
+            "checkFrom": "2",
+            "numberFromName": "1",
+            "checkExe": "2",
+            "wctx": "2",
+            "checkStatus": "3",
+            "checkReport": "1",
+            "checkResult": "1",
+            "parentNode": "0"
+        }]' -->
+    <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)"
+          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="pageable"
+        :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 { ref, watch, provide, onMounted, unref, computed, reactive } from "vue";
+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; // 表格标题 ==> 非必传
+  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,
+  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, searchParam, searchInitParam, getTableList, search, reset, handleSizeChange, handleCurrentChange } =
+  useTable(props.requestApi, props.initParam, props.pagination, props.dataCallback, props.requestError);
+  console.log(props,"175175175175175175");
+
+// 清空选中数据列表
+const clearSelection = () => tableRef.value!.clearSelection();
+
+// 初始化表格数据 && 拖拽排序
+onMounted(() => {
+  dragSort();
+  props.requestAuto && getTableList();
+  props.data && (pageable.value.total = props.data.length);
+});
+
+// 处理表格数据
+const processTableData = computed(() => {
+  console.log(props.data,tableData.value,props.pagination,"8888777777766666666188");
+  if (!props.data) return tableData.value;
+  if (!props.pagination) return props.data;
+  return props.data.slice(
+    (pageable.value.pageNum - 1) * pageable.value.pageSize,
+    pageable.value.pageSize * pageable.value.pageNum
+  );
+});
+
+// 监听页面 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>

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>;

frontend/src/components/SearchForm/components/SearchFormItem.vue

@@ -0,0 +1,96 @@
+<template>
+  <component
+    :is="column.search?.render ?? `el-${column.search?.el}`"
+    v-bind="{ ...handleSearchProps, ...placeholder, searchParam: _searchParam, clearable }"
+    v-model.trim="_searchParam[column.search?.key ?? handleProp(column.prop!)]"
+    :data="column.search?.el === 'tree-select' ? columnEnum : []"
+    :options="['cascader', 'select-v2'].includes(column.search?.el!) ? columnEnum : []"
+  >
+    <template v-if="column.search?.el === 'cascader'" #default="{ data }">
+      <span>{{ data[fieldNames.label] }}</span>
+    </template>
+    <template v-if="column.search?.el === 'select'">
+      <component
+        :is="`el-option`"
+        v-for="(col, index) in columnEnum"
+        :key="index"
+        :label="col[fieldNames.label]"
+        :value="col[fieldNames.value]"
+      ></component>
+    </template>
+    <slot v-else></slot>
+  </component>
+</template>
+
+<script setup lang="ts" name="SearchFormItem">
+import { computed, inject, ref } from "vue";
+import { handleProp } from "@/utils";
+import { ColumnProps } from "@/components/ProTable/interface";
+
+interface SearchFormItem {
+  column: ColumnProps;
+  searchParam: { [key: string]: any };
+}
+const props = defineProps<SearchFormItem>();
+
+// Re receive SearchParam
+const _searchParam = computed(() => props.searchParam);
+
+// 判断 fieldNames 设置 label && value && children 的 key 值
+const fieldNames = computed(() => {
+  return {
+    label: props.column.fieldNames?.label ?? "label",
+    value: props.column.fieldNames?.value ?? "value",
+    children: props.column.fieldNames?.children ?? "children"
+  };
+});
+
+// 接收 enumMap (el 为 select-v2 需单独处理 enumData)
+const enumMap = inject("enumMap", ref(new Map()));
+const columnEnum = computed(() => {
+  let enumData = enumMap.value.get(props.column.prop);
+  if (!enumData) return [];
+  if (props.column.search?.el === "select-v2" && props.column.fieldNames) {
+    enumData = enumData.map((item: { [key: string]: any }) => {
+      return { ...item, label: item[fieldNames.value.label], value: item[fieldNames.value.value] };
+    });
+  }
+  return enumData;
+});
+
+// 处理透传的 searchProps (el 为 tree-select、cascader 的时候需要给下默认 label && value && children)
+const handleSearchProps = computed(() => {
+  const label = fieldNames.value.label;
+  const value = fieldNames.value.value;
+  const children = fieldNames.value.children;
+  const searchEl = props.column.search?.el;
+  let searchProps = props.column.search?.props ?? {};
+  if (searchEl === "tree-select") {
+    searchProps = { ...searchProps, props: { ...searchProps, label, children }, nodeKey: value };
+  }
+  if (searchEl === "cascader") {
+    searchProps = { ...searchProps, props: { ...searchProps, label, value, children } };
+  }
+  return searchProps;
+});
+
+// 处理默认 placeholder
+const placeholder = computed(() => {
+  const search = props.column.search;
+  if (["datetimerange", "daterange", "monthrange"].includes(search?.props?.type) || search?.props?.isRange) {
+    return {
+      rangeSeparator: search?.props?.rangeSeparator ?? "至",
+      startPlaceholder: search?.props?.startPlaceholder ?? "开始时间",
+      endPlaceholder: search?.props?.endPlaceholder ?? "结束时间"
+    };
+  }
+  const placeholder = search?.props?.placeholder ?? (search?.el?.includes("input") ? "请输入" : "请选择");
+  return { placeholder };
+});
+
+// 是否有清除按钮 (当搜索项有默认值时，清除按钮不显示)
+const clearable = computed(() => {
+  const search = props.column.search;
+  return search?.props?.clearable ?? (search?.defaultValue == null || search?.defaultValue == undefined);
+});
+</script>

frontend/src/components/SearchForm/index.vue

@@ -0,0 +1,94 @@
+<template>
+  <div v-if="columns.length" class="card table-search">
+    <el-form ref="formRef" :model="searchParam">
+      <Grid ref="gridRef" :collapsed="collapsed" :gap="[20, 0]" :cols="searchCol">
+        <GridItem v-for="(item, index) in columns" :key="item.prop" v-bind="getResponsive(item)" :index="index">
+          <el-form-item>
+            <template #label>
+              <el-space :size="4">
+                <span>{{ `${item.search?.label ?? item.label}` }}</span>
+                <el-tooltip v-if="item.search?.tooltip" effect="dark" :content="item.search?.tooltip" placement="top">
+                  <i :class="'iconfont icon-yiwen'"></i>
+                </el-tooltip>
+              </el-space>
+              <span>&nbsp;:</span>
+            </template>
+            <SearchFormItem :column="item" :search-param="searchParam" />
+          </el-form-item>
+        </GridItem>
+        <GridItem suffix>
+          <div class="operation">
+            <el-button type="primary" :icon="Search" @click="search"> 搜索 </el-button>
+            <el-button :icon="Delete" @click="reset"> 重置 </el-button>
+            <el-button v-if="showCollapse" type="primary" link class="search-isOpen" @click="collapsed = !collapsed">
+              {{ collapsed ? "展开" : "合并" }}
+              <el-icon class="el-icon--right">
+                <component :is="collapsed ? ArrowDown : ArrowUp"></component>
+              </el-icon>
+            </el-button>
+          </div>
+        </GridItem>
+      </Grid>
+    </el-form>
+  </div>
+</template>
+<script setup lang="ts" name="SearchForm">
+import { computed, ref } from "vue";
+import { ColumnProps } from "@/components/ProTable/interface";
+import { BreakPoint } from "@/components/Grid/interface";
+import { Delete, Search, ArrowDown, ArrowUp } from "@element-plus/icons-vue";
+import SearchFormItem from "./components/SearchFormItem.vue";
+import Grid from "@/components/Grid/index.vue";
+import GridItem from "@/components/Grid/components/GridItem.vue";
+
+interface ProTableProps {
+  columns?: ColumnProps[]; // 搜索配置列
+  searchParam?: { [key: string]: any }; // 搜索参数
+  searchCol: number | Record<BreakPoint, number>;
+  search: (params: any) => void; // 搜索方法
+  reset: (params: any) => void; // 重置方法
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  columns: () => [],
+  searchParam: () => ({})
+});
+
+// 获取响应式设置
+const getResponsive = (item: ColumnProps) => {
+  return {
+    span: item.search?.span,
+    offset: item.search?.offset ?? 0,
+    xs: item.search?.xs,
+    sm: item.search?.sm,
+    md: item.search?.md,
+    lg: item.search?.lg,
+    xl: item.search?.xl
+  };
+};
+
+// 是否默认折叠搜索项
+const collapsed = ref(true);
+
+// 获取响应式断点
+const gridRef = ref();
+const breakPoint = computed<BreakPoint>(() => gridRef.value?.breakPoint);
+
+// 判断是否显示 展开/合并 按钮
+const showCollapse = computed(() => {
+  let show = false;
+  props.columns.reduce((prev, current) => {
+    prev +=
+      (current.search![breakPoint.value]?.span ?? current.search?.span ?? 1) +
+      (current.search![breakPoint.value]?.offset ?? current.search?.offset ?? 0);
+    if (typeof props.searchCol !== "number") {
+      if (prev >= props.searchCol[breakPoint.value]) show = true;
+    } else {
+      if (prev >= props.searchCol) show = true;
+    }
+    return prev;
+  }, 0);
+  return show;
+});
+</script>