ClientApps/pqs-9100_client
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

计划列表

Browse Source
This commit is contained in:
zhujiyan
2024-08-26 20:05:04 +08:00
parent 531ec04f8d
commit a3df1a14a0
20 changed files with 1522 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

29
frontend/components.d.ts vendored
View File

@@ -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']
}
}

11
frontend/src/api/plan/planList.ts Normal file
View File

@@ -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 }
);
};

68
frontend/src/components/Grid/components/GridItem.vue Normal file
View File

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

167
frontend/src/components/Grid/index.vue Normal file
View File

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

6
frontend/src/components/Grid/interface/index.ts Normal file
View File

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

3
frontend/src/components/ImportExcel/index.scss Normal file
View File

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

149
frontend/src/components/ImportExcel/index.vue Normal file
View File

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

45
frontend/src/components/ProTable/components/ColSetting.vue Normal file
View File

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

29
frontend/src/components/ProTable/components/Pagination.vue Normal file
View File

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

58
frontend/src/components/ProTable/components/TableColumn.vue Normal file
View File

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

333
frontend/src/components/ProTable/index.vue Normal file
View File

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

86
frontend/src/components/ProTable/interface/index.ts Normal file
View File

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

96
frontend/src/components/SearchForm/components/SearchFormItem.vue Normal file
View File

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

94
frontend/src/components/SearchForm/index.vue Normal file
View File

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

14
frontend/src/hooks/useTable.ts
View File

@@ -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);
};
/**

50
frontend/src/routers/modules/staticRouter.ts
View File

@@ -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"),
},
];

8
frontend/src/views/home/tabs/dashboard.vue
View File

@@ -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();

11
frontend/src/views/machine/testScript/index.vue Normal file
View File

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

290
frontend/src/views/plan/planList/index.vue Normal file
View File

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