计划列表

2024-08-26 20:05:04 +08:00
parent 531ec04f8d
commit a3df1a14a0
20 changed files with 1522 additions and 28 deletions
--- a/frontend/components.d.ts
+++ b/frontend/components.d.ts
@@ -10,12 +10,18 @@ declare module 'vue' {
    403: typeof import('./src/components/ErrorMessage/403.vue')['default']
    404: typeof import('./src/components/ErrorMessage/404.vue')['default']
    500: typeof import('./src/components/ErrorMessage/500.vue')['default']
+    ColSetting: typeof import('./src/components/ProTable/components/ColSetting.vue')['default']
+    ComplexProTable: typeof import('./src/components/proTable/complexProTable/index.vue')['default']
+    Default: typeof import('./src/components/echarts/pie/default.vue')['default']
+    Detail: typeof import('./src/components/proTable/useProTable/detail.vue')['default']
+    Document: typeof import('./src/components/proTable/document/index.vue')['default']
    ElAside: typeof import('element-plus/es')['ElAside']
    ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
    ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
    ElButton: typeof import('element-plus/es')['ElButton']
    ElColorPicker: typeof import('element-plus/es')['ElColorPicker']
    ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
    ElDialog: typeof import('element-plus/es')['ElDialog']
    ElDivider: typeof import('element-plus/es')['ElDivider']
    ElDrawer: typeof import('element-plus/es')['ElDrawer']
@@ -31,16 +37,39 @@ declare module 'vue' {
    ElMain: typeof import('element-plus/es')['ElMain']
    ElMenu: typeof import('element-plus/es')['ElMenu']
    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
+    ElOption: typeof import('element-plus/es')['ElOption']
+    ElPagination: typeof import('element-plus/es')['ElPagination']
+    ElRadio: typeof import('element-plus/es')['ElRadio']
    ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElSelect: typeof import('element-plus/es')['ElSelect']
+    ElSpace: typeof import('element-plus/es')['ElSpace']
    ElSubMenu: typeof import('element-plus/es')['ElSubMenu']
    ElSwitch: typeof import('element-plus/es')['ElSwitch']
+    ElTable: typeof import('element-plus/es')['ElTable']
+    ElTableColumn: typeof import('element-plus/es')['ElTableColumn']
    ElTabPane: typeof import('element-plus/es')['ElTabPane']
    ElTabs: typeof import('element-plus/es')['ElTabs']
+    ElTag: typeof import('element-plus/es')['ElTag']
    ElTooltip: typeof import('element-plus/es')['ElTooltip']
+    ElTree: typeof import('element-plus/es')['ElTree']
+    ElUpload: typeof import('element-plus/es')['ElUpload']
+    Grid: typeof import('./src/components/Grid/index.vue')['default']
+    GridItem: typeof import('./src/components/Grid/components/GridItem.vue')['default']
+    ImportExcel: typeof import('./src/components/ImportExcel/index.vue')['default']
    Loading: typeof import('./src/components/Loading/index.vue')['default']
+    Pagination: typeof import('./src/components/ProTable/components/Pagination.vue')['default']
+    ProTable: typeof import('./src/components/ProTable/index.vue')['default']
    RouterLink: typeof import('vue-router')['RouterLink']
    RouterView: typeof import('vue-router')['RouterView']
+    SearchForm: typeof import('./src/components/SearchForm/index.vue')['default']
+    SearchFormItem: typeof import('./src/components/SearchForm/components/SearchFormItem.vue')['default']
    SvgIcon: typeof import('./src/components/staticExtend/SvgIcon/src/SvgIcon.vue')['default']
    SwitchDark: typeof import('./src/components/SwitchDark/index.vue')['default']
+    TableColumn: typeof import('./src/components/ProTable/components/TableColumn.vue')['default']
+    TreeProTable: typeof import('./src/components/proTable/treeProTable/index.vue')['default']
+    UseProTable: typeof import('./src/components/proTable/useProTable/index.vue')['default']
+    UserDrawer: typeof import('./src/components/proTable/components/UserDrawer.vue')['default']
+    UseSelectFilter: typeof import('./src/components/proTable/useSelectFilter/index.vue')['default']
+    UseTreeFilter: typeof import('./src/components/proTable/useTreeFilter/index.vue')['default']
  }
 }
--- a/frontend/src/api/plan/planList.ts
+++ b/frontend/src/api/plan/planList.ts
@@ -0,0 +1,11 @@
+import http from "@/api";
+
+//获取计划列表
+export const getPlanList = (data: any) => {
+    return http.post<Static.planData>(
+      "http://192.168.1.123:4523/m1/2573730-0-default/plan/planList/list",
+      data,
+      { loading: false }
+    );
+  };
+  
--- a/frontend/src/components/Grid/components/GridItem.vue
+++ b/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>
--- a/frontend/src/components/Grid/index.vue
+++ b/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>
--- a/frontend/src/components/Grid/interface/index.ts
+++ b/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;
+};
--- a/frontend/src/components/ImportExcel/index.scss
+++ b/frontend/src/components/ImportExcel/index.scss
@@ -0,0 +1,3 @@
+.upload {
+  width: 80%;
+}
--- a/frontend/src/components/ImportExcel/index.vue
+++ b/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>
--- 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,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>
--- a/frontend/src/components/ProTable/components/TableColumn.vue
+++ b/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>
--- a/frontend/src/components/ProTable/index.vue
+++ b/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>
--- 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>;
--- a/frontend/src/components/SearchForm/components/SearchFormItem.vue
+++ b/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>
--- a/frontend/src/components/SearchForm/index.vue
+++ b/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>
--- a/frontend/src/hooks/useTable.ts
+++ b/frontend/src/hooks/useTable.ts
@@ -64,8 +64,7 @@ export const useTable = (
      state.tableData = isPageable ? data.list : data;
      // 解构后台返回的分页数据 (如果有分页更新分页信息)
      if (isPageable) {
-        const { pageNum, pageSize, total } = data;
-        updatePageable({ pageNum, pageSize, total });
+        state.pageable.total = data.total;
      }
    } catch (error) {
      requestError && requestError(error);
@@ -87,16 +86,7 @@ export const useTable = (
        nowSearchParam[key] = state.searchParam[key];
      }
    }
-    Object.assign(state.totalParam, nowSearchParam, isPageable ? pageParam.value : {});
-  };
-
-  /**
-   * @description 更新分页信息
-   * @param {Object} pageable 后台返回的分页数据
-   * @return void
-   * */
-  const updatePageable = (pageable: Table.Pageable) => {
-    Object.assign(state.pageable, pageable);
+    Object.assign(state.totalParam, nowSearchParam);
  };

  /**
--- a/frontend/src/routers/modules/staticRouter.ts
+++ b/frontend/src/routers/modules/staticRouter.ts
@@ -7,24 +7,46 @@ import { HOME_URL, LOGIN_URL } from "@/config";
 export const staticRouter: RouteRecordRaw[] = [
  {
    path: "/",
-    redirect: HOME_URL
+    redirect: HOME_URL,
  },
  {
    path: LOGIN_URL,
    name: "login",
    component: () => import("@/views/login/index.vue"),
    meta: {
-      title: "登录"
-    }
+      title: "登录",
+    },
  },
  {
    path: "/layout",
    name: "layout",
    component: () => import("@/layouts/index.vue"),
    // component: () => import("@/layouts/indexAsync.vue"),
-    redirect: HOME_URL,
-    children: []
-  }
+    // redirect: HOME_URL,
+    children: [
+      {
+        path: "/plan",
+        name: "plan",
+        redirect:"/plan/planList",
+        children: [
+          {
+            path: "/plan/planList",
+            name: "planList",
+            component:()=> import("@/views/plan/planList/index.vue"),
+            meta: {
+              title: "检测计划列表",
+              icon: "List",
+              isLink: "",
+              isHide: false,
+              isFull: false,
+              isAffix: false,
+              isKeepAlive: false,
+            },
+          },
+        ],
+      },
+    ],
+  },
 ];

 /**
@@ -36,28 +58,28 @@ export const errorRouter = [
    name: "403",
    component: () => import("@/components/ErrorMessage/403.vue"),
    meta: {
-      title: "403页面"
-    }
+      title: "403页面",
+    },
  },
  {
    path: "/404",
    name: "404",
    component: () => import("@/components/ErrorMessage/404.vue"),
    meta: {
-      title: "404页面"
-    }
+      title: "404页面",
+    },
  },
  {
    path: "/500",
    name: "500",
    component: () => import("@/components/ErrorMessage/500.vue"),
    meta: {
-      title: "500页面"
-    }
+      title: "500页面",
+    },
  },
  // Resolve refresh page, route warnings
  {
    path: "/:pathMatch(.*)*",
-    component: () => import("@/components/ErrorMessage/404.vue")
-  }
+    component: () => import("@/components/ErrorMessage/404.vue"),
+  },
 ];
--- a/frontend/src/views/home/tabs/dashboard.vue
+++ b/frontend/src/views/home/tabs/dashboard.vue
@@ -142,7 +142,7 @@
            <el-button type="primary" v-if="form.activeTabs === 5"
              >设备导入</el-button
            >
-            <el-button type="primary">计划详情</el-button>
+            <el-button type="primary" @click="planDetail">计划详情</el-button>
          </el-form-item>
        </el-form>
      </div>
@@ -340,6 +340,12 @@ const handleDetection = () => {
    path: "/detection",
  });
 };
+//前往计划详情
+const planDetail = () => {
+  router.push({
+    path: "/plan/planList",
+  });
+};
 onMounted(() => {
  console.log();
  getTree();
--- a/frontend/src/views/machine/testScript/index.vue
+++ b/frontend/src/views/machine/testScript/index.vue
@@ -0,0 +1,11 @@
+<template>
+<div>检测脚本</div>
+</template>
+<script lang='ts' setup>
+import {ref,onMounted} from 'vue';
+onMounted(()=>{
+console.log()
+})
+</script>
+<style lang='scss' scoped>
+</style>
--- a/frontend/src/views/plan/planList/index.vue
+++ b/frontend/src/views/plan/planList/index.vue
@@ -0,0 +1,290 @@
+<template>
+  <div class="table-box">
+    <ProTable
+      ref="proTable"
+      :columns="columns"
+      :request-api="getTableList"
+      :init-param="initParam"
+      :data-callback="dataCallback"
+      @drag-sort="sortTable"
+    >
+      <!-- 表格 header 按钮 -->
+      <template #tableHeader="scope">
+        <el-form :model="searchForm">
+          <el-form-item label="检测时间">
+            <el-select
+              v-model="searchForm.intervalType"
+              style="width: 100px !important"
+            >
+              <el-option :value="0" label="按周">按周</el-option>
+              <el-option :value="1" label="按月">按月</el-option>
+              <el-option :value="2" label="按日">按日</el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="">
+            <el-date-picker> </el-date-picker>
+          </el-form-item>
+          <el-form-item label="检测状态">
+            <el-select v-model="searchForm.checkStatus">
+              <el-option :value="0" label="全部"></el-option>
+              <el-option :value="1" label="未检测"></el-option>
+              <el-option :value="2" label="检测中"></el-option>
+              <el-option :value="3" label="检测完成"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检测报告状态">
+            <el-select v-model="searchForm.checkReportStatus">
+              <el-option :value="0" label="全部"></el-option>
+              <el-option :value="1" label="未生成"></el-option>
+              <el-option :value="2" label="部分生成"></el-option>
+              <el-option :value="3" label="全部生成"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item label="检测结果">
+            <el-select v-model="searchForm.checkResult">
+              <el-option :value="0" label="全部"></el-option>
+              <el-option :value="1" label="/"></el-option>
+              <el-option :value="2" label="符合"></el-option>
+              <el-option :value="3" label="不符合"></el-option>
+            </el-select>
+          </el-form-item>
+          <el-form-item>
+            <el-button type="primary">搜索</el-button>
+            <el-button>重置</el-button>
+          </el-form-item>
+        </el-form>
+
+        <!-- <el-button
+          v-auth="'add'"
+          type="primary"
+          :icon="CirclePlus"
+          @click="openDrawer('新增')"
+          >新增用户</el-button
+        >
+        <el-button
+          v-auth="'batchAdd'"
+          type="primary"
+          :icon="Upload"
+          plain
+          @click="batchAdd"
+          >批量添加用户</el-button
+        >
+        <el-button
+          v-auth="'export'"
+          type="primary"
+          :icon="Download"
+          plain
+          @click="downloadFile"
+          >导出用户数据</el-button
+        >
+        <el-button type="primary" plain @click="toDetail"
+          >To 子集详情页面</el-button
+        >
+        <el-button
+          type="danger"
+          :icon="Delete"
+          plain
+          :disabled="!scope.isSelected"
+          @click="batchDelete(scope.selectedListIds)"
+        >
+          批量删除用户
+        </el-button> -->
+      </template>
+      <!-- Expand -->
+      <!-- <template #expand="scope">
+        {{ scope.row }}
+      </template> -->
+      <!-- 表格操作 -->
+      <template #operation="scope">
+        <el-button
+          type="primary"
+          link
+          :icon="View"
+          @click="openDrawer('查看', scope.row)"
+          >查看</el-button
+        >
+        <el-button
+          type="primary"
+          link
+          :icon="EditPen"
+          @click="openDrawer('编辑', scope.row)"
+          >导出</el-button
+        >
+        <el-button
+          type="primary"
+          link
+          :icon="Delete"
+          @click="deleteAccount(scope.row)"
+          >删除</el-button
+        >
+      </template>
+    </ProTable>
+  </div>
+</template>
+
+<script setup lang="tsx" name="useProTable">
+import { ref, reactive,onMounted } from "vue";
+import { useRouter } from "vue-router";
+import { User } from "@/api/interface";
+import { useHandleData } from "@/hooks/useHandleData";
+import { useDownload } from "@/hooks/useDownload";
+import { ElMessage, ElMessageBox } from "element-plus";
+import ProTable from "@/components/ProTable/index.vue";
+import ImportExcel from "@/components/ImportExcel/index.vue";
+import {
+  CirclePlus,
+  Delete,
+  EditPen,
+  Download,
+  Upload,
+  View,
+  Refresh,
+} from "@element-plus/icons-vue";
+import { getPlanList } from "@/api/plan/planList";
+const router = useRouter();
+
+// 跳转详情页
+const toDetail = () => {
+  router.push(
+    `/proTable/useProTable/detail/${Math.random().toFixed(3)}?params=detail-page`
+  );
+};
+const searchForm = ref({
+  intervalType: 0,
+  searchBeginTime: "",
+  searchEndTime: "",
+  checkStatus: 0,
+  checkReportStatus: 0,
+  checkResult: 0,
+});
+// ProTable 实例
+const proTable = ref<ProTableInstance>();
+
+// 如果表格需要初始化请求参数，直接定义传给 ProTable (之后每次请求都会自动带上该参数，此参数更改之后也会一直带上，改变此参数会自动刷新表格数据)
+const initParam = reactive({ type: 1 });
+
+// dataCallback 是对于返回的表格数据做处理，如果你后台返回的数据不是 list && total 这些字段，可以在这里进行处理成这些字段
+// 或者直接去 hooks/useTable.ts 文件中把字段改为你后端对应的就行
+const tableList = ref([]);
+// console.log(data, ">>>>>>>>>>>");
+//   tableList.value = data;
+//   console.log(tableList.value, "?????????????????????177");
+const dataCallback = (data: any) => {
+  return {
+    list: data||data.data||data.list,
+    total: data.length||data.total,//total
+  };
+};
+console.log(proTable.value,"proTable.value?proTable.value?proTable.value?");
+// 如果你想在请求之前对当前请求参数做一些操作，可以自定义如下函数：params 为当前所有的请求参数（包括分页），最后返回请求列表接口
+// 默认不做操作就直接在 ProTable 组件上绑定	:requestApi="getUserList"
+const getTableList = (params: any) => {
+  let newParams = JSON.parse(JSON.stringify(params));
+  newParams.createTime && (newParams.startTime = newParams.createTime[0]);
+  newParams.createTime && (newParams.endTime = newParams.createTime[1]);
+  delete newParams.createTime;
+  return getPlanList(newParams);
+};
+
+// 表格配置项
+const columns = reactive<ColumnProps<User.ResUserList>[]>([
+  { type: "selection", fixed: "left", width: 70 },
+  //   { type: "sort", label: "Sort", width: 80 },
+  //   { type: "expand", label: "Expand", width: 85 },
+  {
+    prop: "planName",
+    label: "计划名称",
+  },
+//   { prop: "checkMode", label: "检测模式", width: 120 ,render: scope => {
+// return( <span v-if="scope,row.checkMode===0">模拟式<span/>)
+
+//   }},
+  { prop: "checkFrom", label: "检测源", minWidth: 120 },
+  { prop: "numberFromName", label: "数字源名称", width: 120 },
+  { prop: "checkExe", label: "检测脚本", width: 120 },
+  { prop: "wctx", label: "误差体系", width: 120 },
+  { prop: "checkStatus", label: "检测状态", width: 120 },
+  { prop: "checkReport", label: "检测报告", width: 120 },
+  { prop: "checkResult", label: "检测结果", width: 120 },
+  { prop: "parentNode", label: "父节点", width: 120 },
+  {
+    prop: "createTime",
+    label: "创建时间",
+    width: 180,
+  },
+  { prop: "operation", label: "操作", fixed: "right", width: 250 },
+]);
+
+// 表格拖拽排序
+const sortTable = ({
+  newIndex,
+  oldIndex,
+}: {
+  newIndex?: number;
+  oldIndex?: number;
+}) => {
+  console.log(newIndex, oldIndex);
+  console.log(proTable.value?.tableData);
+  ElMessage.success("修改列表排序成功");
+};
+
+// 删除用户信息
+const deleteAccount = async (params: User.ResUserList) => {
+  await useHandleData(
+    deleteUser,
+    { id: [params.id] },
+    `删除【${params.username}】`
+  );
+  proTable.value?.getTableList();
+};
+
+// 批量删除用户信息
+const batchDelete = async (id: string[]) => {
+  await useHandleData(deleteUser, { id }, "删除所选用户信息");
+  proTable.value?.clearSelection();
+  proTable.value?.getTableList();
+};
+
+// 重置用户密码
+const resetPass = async (params: User.ResUserList) => {
+  await useHandleData(
+    resetUserPassWord,
+    { id: params.id },
+    `重置【${params.username}】用户密码`
+  );
+  proTable.value?.getTableList();
+};
+
+// 切换用户状态
+const changeStatus = async (row: User.ResUserList) => {
+  await useHandleData(
+    changeUserStatus,
+    { id: row.id, status: row.status == 1 ? 0 : 1 },
+    `切换【${row.username}】用户状态`
+  );
+  proTable.value?.getTableList();
+};
+onMounted(()=>{
+    console.log(proTable.value?.tableData);
+})
+</script>
+<style lang="scss" scoped>
+::v-deep .el-select {
+  width: 180px !important;
+}
+
+.el-form {
+  width: 100%;
+  display: flex;
+  flex-wrap: wrap;
+  .el-form-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    .el-button {
+      margin: 0 !important;
+      margin-right: 10px !important;
+    }
+  }
+}
+</style>
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
  "license": "Apache",
  "devDependencies": {
    "@electron/rebuild": "^3.2.13",
+    "@vitejs/plugin-vue-jsx": "^4.0.1",
    "debug": "^4.3.3",
    "ee-bin": "1.6.0",
    "electron": "^21.4.4",
@@ -60,4 +61,4 @@
    "electron-updater": "^5.3.0",
    "lodash": "^4.17.21"
  }
-}
+}