mirror of
https://github.com/certd/certd.git
synced 2026-05-16 05:07:32 +08:00
Translate other parts
This commit is contained in:
Lorenzo
@@ -1,5 +1,6 @@
|
||||
// @ts-ignore
|
||||
import { useI18n } from "vue-i18n";
|
||||
//
|
||||
import { AddReq, compute, CreateCrudOptionsProps, CreateCrudOptionsRet, DelReq, dict, EditReq, useFormWrapper, UserPageQuery, UserPageRes } from "@fast-crud/fast-crud";
|
||||
import { certInfoApi } from "./api";
|
||||
import dayjs from "dayjs";
|
||||
@@ -10,285 +11,287 @@ import CertView from "/@/views/certd/pipeline/cert-view.vue";
|
||||
import { useCertUpload } from "/@/views/certd/pipeline/cert-upload/use";
|
||||
|
||||
export default function ({ crudExpose, context }: CreateCrudOptionsProps): CreateCrudOptionsRet {
|
||||
const api = certInfoApi;
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async (req: EditReq) => {
|
||||
const { form, row } = req;
|
||||
form.id = row.id;
|
||||
const res = await api.UpdateObj(form);
|
||||
return res;
|
||||
};
|
||||
const delRequest = async (req: DelReq) => {
|
||||
const { row } = req;
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
const { t } = useI18n();
|
||||
const api = certInfoApi;
|
||||
const pageRequest = async (query: UserPageQuery): Promise<UserPageRes> => {
|
||||
return await api.GetList(query);
|
||||
};
|
||||
const editRequest = async (req: EditReq) => {
|
||||
const { form, row } = req;
|
||||
form.id = row.id;
|
||||
const res = await api.UpdateObj(form);
|
||||
return res;
|
||||
};
|
||||
const delRequest = async (req: DelReq) => {
|
||||
const { row } = req;
|
||||
return await api.DelObj(row.id);
|
||||
};
|
||||
|
||||
const addRequest = async (req: AddReq) => {
|
||||
const { form } = req;
|
||||
const res = await api.AddObj(form);
|
||||
return res;
|
||||
};
|
||||
const { openCrudFormDialog } = useFormWrapper();
|
||||
const router = useRouter();
|
||||
const addRequest = async (req: AddReq) => {
|
||||
const { form } = req;
|
||||
const res = await api.AddObj(form);
|
||||
return res;
|
||||
};
|
||||
const { openCrudFormDialog } = useFormWrapper();
|
||||
const router = useRouter();
|
||||
|
||||
const model = useModal();
|
||||
const viewCert = async (row: any) => {
|
||||
const cert = await api.GetCert(row.id);
|
||||
if (!cert) {
|
||||
notification.error({ message: "证书还未生成，请先运行流水线" });
|
||||
return;
|
||||
}
|
||||
const model = useModal();
|
||||
const viewCert = async (row: any) => {
|
||||
const cert = await api.GetCert(row.id);
|
||||
if (!cert) {
|
||||
notification.error({ message: t("certd.certificateNotGenerated") });
|
||||
return;
|
||||
}
|
||||
|
||||
model.success({
|
||||
title: "查看证书",
|
||||
maskClosable: true,
|
||||
okText: "关闭",
|
||||
width: 800,
|
||||
content: () => {
|
||||
return <CertView cert={cert}></CertView>;
|
||||
},
|
||||
});
|
||||
};
|
||||
model.success({
|
||||
title: t("certd.modal.viewCertificateTitle"),
|
||||
maskClosable: true,
|
||||
okText: t("certd.modal.close"),
|
||||
width: 800,
|
||||
content: () => {
|
||||
return <CertView cert={cert}></CertView>;
|
||||
},
|
||||
});
|
||||
};
|
||||
|
||||
const { openUploadCreateDialog, openUpdateCertDialog } = useCertUpload();
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest,
|
||||
},
|
||||
form: {
|
||||
labelCol: {
|
||||
//固定label宽度
|
||||
span: null,
|
||||
style: {
|
||||
width: "100px",
|
||||
},
|
||||
},
|
||||
col: {
|
||||
span: 22,
|
||||
},
|
||||
wrapper: {
|
||||
width: 600,
|
||||
},
|
||||
},
|
||||
actionbar: {
|
||||
show: true,
|
||||
buttons: {
|
||||
add: {
|
||||
text: "上传自定义证书",
|
||||
type: "primary",
|
||||
show: false,
|
||||
async click() {
|
||||
await openUploadCreateDialog();
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tabs: {
|
||||
name: "fromType",
|
||||
show: true,
|
||||
},
|
||||
rowHandle: {
|
||||
width: 100,
|
||||
fixed: "right",
|
||||
buttons: {
|
||||
view: { show: false },
|
||||
viewCert: {
|
||||
order: 3,
|
||||
title: "查看证书",
|
||||
type: "link",
|
||||
icon: "ph:certificate",
|
||||
async click({ row }) {
|
||||
await viewCert(row);
|
||||
},
|
||||
},
|
||||
copy: { show: false },
|
||||
edit: { show: false },
|
||||
remove: {
|
||||
order: 10,
|
||||
show: false,
|
||||
},
|
||||
download: {
|
||||
order: 9,
|
||||
title: "下载证书",
|
||||
type: "link",
|
||||
icon: "ant-design:download-outlined",
|
||||
async click({ row }) {
|
||||
if (!row.certFile) {
|
||||
notification.error({ message: "证书还未生成，请先运行流水线" });
|
||||
return;
|
||||
}
|
||||
window.open("/api/monitor/cert/download?id=" + row.id);
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 100,
|
||||
editable: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
fromType: {
|
||||
title: "来源",
|
||||
search: {
|
||||
show: true,
|
||||
},
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ label: "流水线", value: "pipeline" },
|
||||
{ label: "手动上传", value: "upload" },
|
||||
],
|
||||
}),
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 100,
|
||||
sorter: true,
|
||||
component: {
|
||||
color: "auto",
|
||||
},
|
||||
conditionalRender: false,
|
||||
},
|
||||
valueBuilder({ value, row, key }) {
|
||||
if (!value) {
|
||||
row[key] = "pipeline";
|
||||
}
|
||||
},
|
||||
},
|
||||
domains: {
|
||||
title: "域名",
|
||||
search: {
|
||||
show: true,
|
||||
},
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "请输入域名" }],
|
||||
},
|
||||
column: {
|
||||
width: 450,
|
||||
sorter: true,
|
||||
component: {
|
||||
name: "fs-values-format",
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
domainCount: {
|
||||
title: "域名数量",
|
||||
type: "number",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 120,
|
||||
sorter: true,
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
expiresLeft: {
|
||||
title: "有效天数",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "date",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
sorter: true,
|
||||
conditionalRender: false,
|
||||
cellRender({ row }) {
|
||||
const value = row.expiresTime;
|
||||
if (!value) {
|
||||
return "-";
|
||||
}
|
||||
const expireDate = dayjs(value).format("YYYY-MM-DD");
|
||||
const leftDays = dayjs(value).diff(dayjs(), "day");
|
||||
const color = leftDays < 20 ? "red" : "#389e0d";
|
||||
const percent = (leftDays / 90) * 100;
|
||||
return <a-progress title={expireDate + "过期"} percent={percent} strokeColor={color} format={(percent: number) => `${leftDays}天`} />;
|
||||
},
|
||||
},
|
||||
},
|
||||
expiresTime: {
|
||||
title: "过期时间",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "datetime",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
sorter: true,
|
||||
},
|
||||
},
|
||||
certProvider: {
|
||||
title: "证书颁发机构",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "text",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 200,
|
||||
},
|
||||
},
|
||||
applyTime: {
|
||||
title: "申请时间",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "datetime",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
sorter: true,
|
||||
},
|
||||
},
|
||||
"pipeline.title": {
|
||||
title: "关联流水线",
|
||||
search: { show: false },
|
||||
type: "link",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 350,
|
||||
sorter: true,
|
||||
component: {
|
||||
on: {
|
||||
onClick({ row }) {
|
||||
router.push({ path: "/certd/pipeline/detail", query: { id: row.pipelineId, editMode: "false" } });
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
const { openUploadCreateDialog, openUpdateCertDialog } = useCertUpload();
|
||||
return {
|
||||
crudOptions: {
|
||||
request: {
|
||||
pageRequest,
|
||||
addRequest,
|
||||
editRequest,
|
||||
delRequest,
|
||||
},
|
||||
form: {
|
||||
labelCol: {
|
||||
//固定label宽度
|
||||
span: null,
|
||||
style: {
|
||||
width: "100px",
|
||||
},
|
||||
},
|
||||
col: {
|
||||
span: 22,
|
||||
},
|
||||
wrapper: {
|
||||
width: 600,
|
||||
},
|
||||
},
|
||||
actionbar: {
|
||||
show: true,
|
||||
buttons: {
|
||||
add: {
|
||||
text: "上传自定义证书",
|
||||
type: "primary",
|
||||
show: false,
|
||||
async click() {
|
||||
await openUploadCreateDialog();
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
tabs: {
|
||||
name: "fromType",
|
||||
show: true,
|
||||
},
|
||||
rowHandle: {
|
||||
width: 100,
|
||||
fixed: "right",
|
||||
buttons: {
|
||||
view: { show: false },
|
||||
viewCert: {
|
||||
order: 3,
|
||||
title: t("certd.viewCert.title"),
|
||||
type: "link",
|
||||
icon: "ph:certificate",
|
||||
async click({ row }) {
|
||||
await viewCert(row);
|
||||
},
|
||||
},
|
||||
copy: { show: false },
|
||||
edit: { show: false },
|
||||
remove: {
|
||||
order: 10,
|
||||
show: false,
|
||||
},
|
||||
download: {
|
||||
order: 9,
|
||||
title: t("certd.download.title"),
|
||||
type: "link",
|
||||
icon: "ant-design:download-outlined",
|
||||
async click({ row }) {
|
||||
if (!row.certFile) {
|
||||
notification.error({ message: t("certd.certificateNotGenerated") });
|
||||
return;
|
||||
}
|
||||
window.open("/api/monitor/cert/download?id=" + row.id);
|
||||
},
|
||||
},
|
||||
|
||||
},
|
||||
},
|
||||
columns: {
|
||||
id: {
|
||||
title: "ID",
|
||||
key: "id",
|
||||
type: "number",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 100,
|
||||
editable: {
|
||||
disabled: true,
|
||||
},
|
||||
},
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
fromType: {
|
||||
title: "来源",
|
||||
search: {
|
||||
show: true,
|
||||
},
|
||||
type: "dict-select",
|
||||
dict: dict({
|
||||
data: [
|
||||
{ label: "流水线", value: "pipeline" },
|
||||
{ label: "手动上传", value: "upload" },
|
||||
],
|
||||
}),
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 100,
|
||||
sorter: true,
|
||||
component: {
|
||||
color: "auto",
|
||||
},
|
||||
conditionalRender: false,
|
||||
},
|
||||
valueBuilder({ value, row, key }) {
|
||||
if (!value) {
|
||||
row[key] = "pipeline";
|
||||
}
|
||||
},
|
||||
},
|
||||
domains: {
|
||||
title: "域名",
|
||||
search: {
|
||||
show: true,
|
||||
},
|
||||
type: "text",
|
||||
form: {
|
||||
rules: [{ required: true, message: "请输入域名" }],
|
||||
},
|
||||
column: {
|
||||
width: 450,
|
||||
sorter: true,
|
||||
component: {
|
||||
name: "fs-values-format",
|
||||
color: "auto",
|
||||
},
|
||||
},
|
||||
},
|
||||
domainCount: {
|
||||
title: "域名数量",
|
||||
type: "number",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 120,
|
||||
sorter: true,
|
||||
show: false,
|
||||
},
|
||||
},
|
||||
expiresLeft: {
|
||||
title: "有效天数",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "date",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
sorter: true,
|
||||
conditionalRender: false,
|
||||
cellRender({ row }) {
|
||||
const value = row.expiresTime;
|
||||
if (!value) {
|
||||
return "-";
|
||||
}
|
||||
const expireDate = dayjs(value).format("YYYY-MM-DD");
|
||||
const leftDays = dayjs(value).diff(dayjs(), "day");
|
||||
const color = leftDays < 20 ? "red" : "#389e0d";
|
||||
const percent = (leftDays / 90) * 100;
|
||||
return <a-progress title={expireDate + "过期"} percent={percent} strokeColor={color} format={(percent: number) => `${leftDays}天`} />;
|
||||
},
|
||||
},
|
||||
},
|
||||
expiresTime: {
|
||||
title: "过期时间",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "datetime",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
sorter: true,
|
||||
},
|
||||
},
|
||||
certProvider: {
|
||||
title: "证书颁发机构",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "text",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 200,
|
||||
},
|
||||
},
|
||||
applyTime: {
|
||||
title: "申请时间",
|
||||
search: {
|
||||
show: false,
|
||||
},
|
||||
type: "datetime",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
sorter: true,
|
||||
},
|
||||
},
|
||||
"pipeline.title": {
|
||||
title: "关联流水线",
|
||||
search: { show: false },
|
||||
type: "link",
|
||||
form: {
|
||||
show: false,
|
||||
},
|
||||
column: {
|
||||
width: 350,
|
||||
sorter: true,
|
||||
component: {
|
||||
on: {
|
||||
onClick({ row }) {
|
||||
router.push({ path: "/certd/pipeline/detail", query: { id: row.pipelineId, editMode: "false" } });
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
@@ -1,30 +1,33 @@
|
||||
<template>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
证书仓库
|
||||
<span class="sub">从流水线生成的证书</span>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
<fs-page>
|
||||
<template #header>
|
||||
<div class="title">
|
||||
{{ t("certd.certificateRepo.title") }}
|
||||
<span class="sub">{{ t("certd.certificateRepo.sub") }}</span>
|
||||
</div>
|
||||
</template>
|
||||
<fs-crud ref="crudRef" v-bind="crudBinding"> </fs-crud>
|
||||
</fs-page>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { onActivated, onMounted } from "vue";
|
||||
import { useFs } from "@fast-crud/fast-crud";
|
||||
import createCrudOptions from "./crud";
|
||||
import { useI18n } from "vue-i18n";
|
||||
|
||||
const { t } = useI18n();
|
||||
|
||||
defineOptions({
|
||||
name: "CertStore",
|
||||
name: "CertStore",
|
||||
});
|
||||
const { crudBinding, crudRef, crudExpose } = useFs({ createCrudOptions, context: {} });
|
||||
|
||||
// 页面打开后获取列表数据
|
||||
onMounted(() => {
|
||||
crudExpose.doRefresh();
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
onActivated(() => {
|
||||
crudExpose.doRefresh();
|
||||
crudExpose.doRefresh();
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user