diff --git a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
index 26fcc085..f33db5fe 100644
--- a/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
+++ b/packages/ui/certd-client/src/plugin/fast-crud/index.tsx
@@ -6,16 +6,48 @@ import { FsExtendsCopyable, FsExtendsEditor, FsExtendsJson, FsExtendsTime, FsExt
import "@fast-crud/fast-extends/dist/style.css";
import UiAntdv from "@fast-crud/ui-antdv4";
import "@fast-crud/ui-antdv4/dist/style.css";
-import { merge } from "lodash-es";
+import { debounce, merge } from "lodash-es";
import { useCrudPermission } from "../permission";
import { App } from "vue";
import { notification } from "ant-design-vue";
import { usePreferences } from "/@/vben/preferences";
+import { LocalStorage } from "/@/utils/util.storage";
+
+class ColumnSizeSaver {
+ save: (key: string, size: number) => void;
+ constructor() {
+ this.save = debounce((key: string, size: number) => {
+ const saveKey = this.getKey();
+ let data = LocalStorage.get(saveKey);
+ if (!data) {
+ data = {};
+ }
+ data[key] = size;
+ LocalStorage.set(saveKey, data);
+ });
+ }
+ getKey() {
+ const loc = window.location;
+ const currentUrl = `${loc.pathname}${loc.search}${loc.hash}`;
+ return `columnSize-${currentUrl}`;
+ }
+ get(key: string) {
+ const saveKey = this.getKey();
+ const row = LocalStorage.get(saveKey);
+ return row?.[key];
+ }
+ clear() {
+ const saveKey = this.getKey();
+ LocalStorage.remove(saveKey);
+ }
+}
+const columnSizeSaver = new ColumnSizeSaver();
function install(app: App, options: any = {}) {
app.use(UiAntdv);
//设置日志级别
setLogger({ level: "info" });
+
app.use(FastCrud, {
i18n: options.i18n,
async dictRequest({ url }: any) {
@@ -39,20 +71,21 @@ function install(app: App, options: any = {}) {
mobile: {
enabled: true,
props: {
- isMobile: isMobile
- }
- }
- }
+ isMobile: isMobile,
+ },
+ },
+ },
},
table: {
scroll: {
- x: 960
+ x: 960,
},
size: "small",
pagination: false,
- onResizeColumn: (w: number | string, col: any) => {
+ onResizeColumn: (w: number, col: any) => {
if (crudBinding.value?.table?.columnsMap && crudBinding.value?.table?.columnsMap[col.key]) {
crudBinding.value.table.columnsMap[col.key].width = w;
+ columnSizeSaver.save(col.key, w);
}
},
conditionalRender: {
@@ -70,13 +103,18 @@ function install(app: App, options: any = {}) {
},
render() {
return "-";
- }
- }
+ },
+ },
},
toolbar: {
export: {
- fileType: "excel"
- }
+ fileType: "excel",
+ },
+ columnsFilter: {
+ async onReset() {
+ columnSizeSaver.clear();
+ },
+ },
},
rowHandle: {
fixed: "right",
@@ -84,13 +122,15 @@ function install(app: App, options: any = {}) {
view: { type: "link", text: null, icon: "ion:eye-outline" },
copy: { show: true, type: "link", text: null, icon: "ion:copy-outline" },
edit: { type: "link", text: null, icon: "ion:create-outline" },
- remove: { type: "link", style: { color: "red" }, text: null, icon: "ion:trash-outline" }
+ remove: { type: "link", style: { color: "red" }, text: null, icon: "ion:trash-outline" },
},
dropdown: {
more: {
- type: "link"
- }
- }
+ type: "link",
+ },
+ },
+ resizable: true,
+ width: 200,
},
request: {
transformQuery: ({ page, form, sort }: PageQuery): UserPageQuery => {
@@ -103,10 +143,10 @@ function install(app: App, options: any = {}) {
return {
page: {
limit,
- offset
+ offset,
},
query: form,
- sort
+ sort,
};
},
transformRes: ({ res }: TransformResProps): PageRes => {
@@ -116,16 +156,16 @@ function install(app: App, options: any = {}) {
currentPage++;
}
return { currentPage, pageSize, records: res.records, total: res.total, ...res };
- }
+ },
},
search: {
formItem: {
wrapperCol: {
style: {
- width: "50%"
- }
- }
- }
+ width: "50%",
+ },
+ },
+ },
},
form: {
display: "flex",
@@ -133,8 +173,8 @@ function install(app: App, options: any = {}) {
//固定label宽度
span: null,
style: {
- width: "145px"
- }
+ width: "145px",
+ },
},
async afterSubmit({ mode }) {
if (mode === "add") {
@@ -144,13 +184,13 @@ function install(app: App, options: any = {}) {
}
},
wrapperCol: {
- span: null
+ span: null,
},
wrapper: {
- saveRemind: true
+ saveRemind: true,
// inner: true,
// innerContainerSelector: "main.fs-framework-content"
- }
+ },
},
columns: {
//最后一列空白，用于自动伸缩列宽
@@ -158,23 +198,23 @@ function install(app: App, options: any = {}) {
title: "",
type: "text",
form: {
- show: false
+ show: false,
},
column: {
order: 99999,
width: -1,
columnSetShow: false,
- resizable: false
- }
- }
- }
+ resizable: false,
+ },
+ },
+ },
};
// 从 useCrud({permission}) 里获取permission参数，去设置各个按钮的权限
const permission = props.context?.permission || null;
const crudPermission = useCrudPermission({ permission });
return crudPermission.merge(opts);
- }
+ },
});
// fast-extends里面的扩展组件均为异步组件，只有在使用时才会被加载，并不会影响首页加载速度
@@ -202,19 +242,19 @@ function install(app: App, options: any = {}) {
url: action,
method: "post",
headers: {
- "Content-Type": "multipart/form-data"
+ "Content-Type": "multipart/form-data",
},
timeout: 60000,
data,
onUploadProgress: (p: any) => {
onProgress({ percent: Math.round((p.loaded / p.total) * 100) });
- }
+ },
});
},
successHandle(res: any) {
return res;
- }
- }
+ },
+ },
});
//安装editor
@@ -222,10 +262,10 @@ function install(app: App, options: any = {}) {
//编辑器的公共配置
wangEditor: {
editorConfig: {
- MENU_CONF: {}
+ MENU_CONF: {},
},
- toolbarConfig: {}
- }
+ toolbarConfig: {},
+ },
});
app.use(FsExtendsJson);
app.use(FsExtendsTime);
@@ -250,8 +290,8 @@ function install(app: App, options: any = {}) {
column: { component: { name: "fs-date-format", format: "YYYY-MM-DD" } },
valueBuilder(context: any) {
console.log("time2,valueBuilder", context);
- }
- }
+ },
+ },
});
// 此处演示自定义字段合并插件
@@ -266,32 +306,14 @@ function install(app: App, options: any = {}) {
// 合并column配置
merge(columnProps, {
form: { show: false },
- viewForm: { show: true }
+ viewForm: { show: true },
});
}
return columnProps;
- }
+ },
});
//默认宽度，支持自动拖动调整列宽
- registerMergeColumnPlugin({
- name: "resize-column-plugin",
- order: 2,
- handle: (columnProps: ColumnCompositionProps) => {
- if (!columnProps.column) {
- columnProps.column = {};
- }
- if (columnProps.column.resizable == null) {
- columnProps.column.resizable = true;
- if (!columnProps.column.width) {
- columnProps.column.width = 200;
- }
- }
-
- return columnProps;
- }
- });
-
registerMergeColumnPlugin({
name: "resize-column-plugin",
order: 2,
@@ -300,16 +322,19 @@ function install(app: App, options: any = {}) {
columnProps.column = {};
}
columnProps.column.resizable = true;
- if (columnProps.column.width == null) {
+ const savedColumnWidth = columnSizeSaver.get(columnProps.key as string);
+ if (savedColumnWidth) {
+ columnProps.column.width = savedColumnWidth;
+ } else if (columnProps.column.width == null) {
columnProps.column.width = 200;
} else if (typeof columnProps.column?.width === "string" && columnProps.column.width.indexOf("px") > -1) {
columnProps.column.width = parseInt(columnProps.column.width.replace("px", ""));
}
return columnProps;
- }
+ },
});
}
export default {
- install
+ install,
};
diff --git a/packages/ui/certd-client/src/views/certd/monitor/site/crud.tsx b/packages/ui/certd-client/src/views/certd/monitor/site/crud.tsx
index f9a82403..d145a758 100644
--- a/packages/ui/certd-client/src/views/certd/monitor/site/crud.tsx
+++ b/packages/ui/certd-client/src/views/certd/monitor/site/crud.tsx
@@ -38,8 +38,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
data: [
{ label: "成功", value: "ok", color: "green" },
{ label: "检查中", value: "checking", color: "blue" },
- { label: "异常", value: "error", color: "red" }
- ]
+ { label: "异常", value: "error", color: "red" },
+ ],
});
return {
crudOptions: {
@@ -47,22 +47,22 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
pageRequest,
addRequest,
editRequest,
- delRequest
+ delRequest,
},
form: {
labelCol: {
//固定label宽度
span: null,
style: {
- width: "100px"
- }
+ width: "100px",
+ },
},
col: {
- span: 22
+ span: 22,
},
wrapper: {
- width: 600
- }
+ width: 600,
+ },
},
actionbar: {
buttons: {
@@ -72,7 +72,7 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
//非plus
if (crudBinding.value.data.length >= 1) {
notification.error({
- message: "基础版只能添加一个监控站点，请赞助升级专业版"
+ message: "基础版只能添加一个监控站点，请赞助升级专业版",
});
mitter.emit("openVipModal");
return;
@@ -86,15 +86,15 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
const max = suiteDetail.monitorCount.max;
if (max != -1 && max <= suiteDetail.monitorCount.used) {
notification.error({
- message: `对不起，您最多只能创建条${max}监控记录，请购买或升级套餐`
+ message: `对不起，您最多只能创建条${max}监控记录，请购买或升级套餐`,
});
return;
}
}
await crudExpose.openAdd({});
- }
- }
- }
+ },
+ },
+ },
},
rowHandle: {
fixed: "right",
@@ -105,18 +105,18 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
type: "link",
text: null,
tooltip: {
- title: "立即检查"
+ title: "立即检查",
},
icon: "ion:play-sharp",
click: async ({ row }) => {
await api.DoCheck(row.id);
await crudExpose.doRefresh();
notification.success({
- message: "检查完成"
+ message: "检查完成",
});
- }
- }
- }
+ },
+ },
+ },
},
columns: {
id: {
@@ -124,78 +124,67 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
key: "id",
type: "number",
search: {
- show: false
+ show: false,
},
column: {
width: 80,
- align: "center"
+ align: "center",
},
form: {
- show: false
- }
+ show: false,
+ },
},
name: {
title: "站点名称",
search: {
- show: true
+ show: true,
},
type: "text",
form: {
- rules: [{ required: true, message: "请输入站点名称" }]
+ rules: [{ required: true, message: "请输入站点名称" }],
},
column: {
- width: 160
- }
+ width: 160,
+ },
},
domain: {
title: "网站域名",
search: {
- show: true
+ show: true,
},
type: "text",
form: {
rules: [
{ required: true, message: "请输入域名" },
//@ts-ignore
- { type: "domains", message: "请输入正确的域名" }
- ]
+ { type: "domains", message: "请输入正确的域名" },
+ ],
},
column: {
- width: 200,
+ width: 230,
sorter: true,
- cellRender({ value }) {
+ cellRender({ value, row }) {
+ const url = `https://${value}:${row.httpsPort}`;
return (
-
+
+
+ {value}:{row.httpsPort}
+
+
);
- }
- }
- },
- httpsPort: {
- title: "HTTPS端口",
- search: {
- show: false
+ },
},
- type: "number",
- form: {
- value: 443,
- rules: [{ required: true, message: "请输入端口" }]
- },
- column: {
- align: "center",
- width: 110,
- show: false
- }
},
certDomains: {
title: "证书域名",
search: {
- show: true
+ show: true,
},
type: "text",
form: {
- show: false
+ show: false,
},
column: {
width: 200,
@@ -207,56 +196,56 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
{value}
);
- }
- }
+ },
+ },
},
certProvider: {
title: "颁发机构",
search: {
- show: false
+ show: false,
},
type: "text",
form: {
- show: false
+ show: false,
},
column: {
width: 200,
sorter: true,
cellRender({ value }) {
return {value};
- }
- }
+ },
+ },
},
certStatus: {
title: "证书状态",
search: {
- show: true
+ show: true,
},
type: "dict-select",
dict: dict({
data: [
{ label: "正常", value: "ok", color: "green" },
- { label: "过期", value: "expired", color: "red" }
- ]
+ { label: "过期", value: "expired", color: "red" },
+ ],
}),
form: {
- show: false
+ show: false,
},
column: {
- width: 110,
+ width: 100,
sorter: true,
show: true,
- align: "center"
- }
+ align: "center",
+ },
},
certExpiresTime: {
title: "证书到期时间",
search: {
- show: false
+ show: false,
},
type: "date",
form: {
- show: false
+ show: false,
},
column: {
sorter: true,
@@ -269,35 +258,56 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
const color = leftDays < 20 ? "red" : "#389e0d";
const percent = (leftDays / 90) * 100;
return `${leftDays}天`} />;
- }
- }
+ },
+ },
},
lastCheckTime: {
title: "上次检查时间",
search: {
- show: false
+ show: false,
},
type: "datetime",
form: {
- show: false
+ show: false,
},
column: {
sorter: true,
- width: 155
- }
+ width: 155,
+ },
+ },
+ disabled: {
+ title: "禁用启用",
+ search: {
+ show: false,
+ },
+ type: "dict-switch",
+ dict: dict({
+ data: [
+ { label: "启用", value: false, color: "green" },
+ { label: "禁用", value: true, color: "red" },
+ ],
+ }),
+ form: {
+ value: false,
+ },
+ column: {
+ width: 100,
+ sorter: true,
+ align: "center",
+ },
},
checkStatus: {
title: "检查状态",
search: {
- show: false
+ show: false,
},
type: "dict-select",
dict: checkStatusDict,
form: {
- show: false
+ show: false,
},
column: {
- width: 110,
+ width: 100,
align: "center",
sorter: true,
cellRender({ value, row, key }) {
@@ -306,8 +316,8 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
);
- }
- }
+ },
+ },
},
// error: {
// title: "错误信息",
@@ -329,51 +339,30 @@ export default function ({ crudExpose, context }: CreateCrudOptionsProps): Creat
pipelineId: {
title: "关联流水线id",
search: {
- show: false
+ show: false,
},
form: { show: false },
type: "number",
column: {
width: 200,
sorter: true,
- show: false
- }
+ show: false,
+ },
},
certInfoId: {
title: "证书id",
search: {
- show: false
+ show: false,
},
type: "number",
form: { show: false },
column: {
width: 100,
sorter: true,
- show: false
- }
+ show: false,
+ },
},
- disabled: {
- title: "禁用启用",
- search: {
- show: false
- },
- type: "dict-switch",
- dict: dict({
- data: [
- { label: "启用", value: false, color: "green" },
- { label: "禁用", value: true, color: "red" }
- ]
- }),
- form: {
- value: false
- },
- column: {
- width: 110,
- sorter: true,
- align: "center"
- }
- }
- }
- }
+ },
+ },
};
}