feat: 证书管理 列表

src/api/link/certificate.ts

@@ -5,3 +5,12 @@ export const NETWORK_CERTIFICATE_UPLOAD = `${BASE_API_PATH}/network/certificate/
 
 
 export const save = (data: object) => server.post(`/network/certificate`, data);
+
+export const update = (data: object) => server.patch(`/network/certificate`, data);
+
+export const query = (data: object) => server.post(`/network/certificate/_query`, data);
+
+export const queryDetail = (id: string) => server.get(`/network/certificate/${id}`);
+
+export const remove = (id: string) => server.remove(`/network/certificate/${id}`);
+

src/router/menu.ts

@@ -81,7 +81,7 @@ export default [
         component: () => import('@/views/link/Certificate/index.vue')
     },
     {
-        path: '/link/certificate/detail/add',
+        path: '/link/certificate/detail/:type/:id',
         component: () => import('@/views/link/Certificate/Detail/index.vue')
     },
     {

src/views/link/Certificate/Detail/index.vue

@@ -60,6 +60,7 @@
 
                     <a-form-item>
                         <a-button
+                            v-if="type !== 'view'"
                             class="form-submit"
                             html-type="submit"
                             type="primary"
@@ -97,16 +98,20 @@ import { message, Form } from 'ant-design-vue';
 import { getImage } from '@/utils/comm';
 import CertificateFile from './CertificateFile.vue';
 import type { UploadChangeParam } from 'ant-design-vue';
-import { save } from '@/api/link/certificate';
+import { save, update, queryDetail } from '@/api/link/certificate';
+import { FormDataType, TypeObjType } from '../type';
 
 const router = useRouter();
+const route = useRoute();
+const type = route.params.type as string;
+const id = route.params.id as string;
 
 const useForm = Form.useForm;
 
 const fileLoading = ref(false);
 const loading = ref(false);
 
-const formData = reactive({
+const formData = ref<FormDataType>({
     type: 'common',
     name: '',
     configs: {
@@ -137,9 +142,10 @@ const { resetFields, validate, validateInfos } = useForm(
 const onSubmit = () => {
     validate()
         .then(async (res) => {
-            const params = toRaw(formData);
+            const params = toRaw(formData.value);
             loading.value = true;
-            const response = await save(params);
+            const response =
+                type === 'edit' ? await update(params) : await save(params);
             if (response.status === 200) {
                 message.success('操作成功');
                 router.push('/link/certificate');
@@ -156,10 +162,28 @@ const handleChange = (info: UploadChangeParam) => {
     if (info.file.status === 'done') {
         message.success('上传成功！');
         const result = info.file.response?.result;
-        formData.configs.cert = result;
+        formData.value.configs.cert = result;
         fileLoading.value = false;
     }
 };
+
+const detail = async (id: string) => {
+    if (type !== 'add') {
+        loading.value = true;
+        const res = await queryDetail(id);
+        if (res.success) {
+            const result = res.result as FormDataType;
+            const type = result.type.value as TypeObjType;
+            formData.value = {
+                ...result,
+                type,
+            };
+        }
+        loading.value = false;
+    }
+};
+
+detail(id);
 </script>
 
 <style lang="less" scoped>

src/views/link/Certificate/index.vue

@@ -1,14 +1,196 @@
 <template>
-  <a-button type="primary" @click="handlAdd">新增</a-button>
+    <div class="page-container">
+        <a-card style="margin-bottom: 20px">
+            <Search
+                :columns="columns"
+                target="notice-config"
+                @search="handleSearch"
+            />
+        </a-card>
+        <a-card>
+            <JTable
+                ref="tableRef"
+                model="TABLE"
+                :columns="columns"
+                :request="query"
+                :defaultParams="{
+                    sorts: [{ name: 'createTime', order: 'desc' }],
+                }"
+                :params="params"
+            >
+                <template #headerTitle>
+                    <a-button type="primary" @click="handlAdd"
+                        ><plus-outlined />新增</a-button
+                    >
+                </template>
+                <template #type="slotProps">
+                    <span>{{ slotProps.type.text }}</span>
+                </template>
+                <template #action="slotProps">
+                    <a-space :size="16">
+                        <a-tooltip
+                            v-for="i in getActions(slotProps)"
+                            :key="i.key"
+                            v-bind="i.tooltip"
+                        >
+                            <a-popconfirm
+                                v-if="i.popConfirm"
+                                v-bind="i.popConfirm"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-popconfirm>
+                            <a-button
+                                style="padding: 0"
+                                type="link"
+                                v-else
+                                @click="i.onClick && i.onClick(slotProps)"
+                            >
+                                <a-button
+                                    :disabled="i.disabled"
+                                    style="padding: 0"
+                                    type="link"
+                                    ><AIcon :type="i.icon"
+                                /></a-button>
+                            </a-button>
+                        </a-tooltip>
+                    </a-space>
+                </template>
+            </JTable>
+        </a-card>
+    </div>
 </template>
 <script lang="ts" setup name="CertificatePage">
+import type { ActionsType } from '@/components/Table/index.vue';
+import { save, query, remove } from '@/api/link/certificate';
+import { message } from 'ant-design-vue';
 
+const tableRef = ref<Record<string, any>>({});
 const router = useRouter();
+const params = ref<Record<string, any>>({});
 
+const columns = [
+    {
+        title: '证书标准',
+        dataIndex: 'type',
+        key: 'type',
+        search: {
+            type: 'select',
+            options: [
+                {
+                    label: '证书标准',
+                    value: 'common',
+                },
+            ],
+        },
+        scopedSlots: true,
+    },
+    {
+        title: '证书名称',
+        dataIndex: 'name',
+        key: 'name',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '说明',
+        dataIndex: 'description',
+        key: 'description',
+        search: {
+            type: 'string',
+        },
+    },
+    {
+        title: '操作',
+        key: 'action',
+        fixed: 'right',
+        width: 200,
+        scopedSlots: true,
+    },
+];
+
+const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
+    if (!data) {
+        return [];
+    }
+    return [
+        {
+            key: 'eye',
+            text: '查看',
+            tooltip: {
+                title: '查看',
+            },
+            icon: 'EyeOutlined',
+            onClick: async () => {
+                handlEye(data.id);
+            },
+        },
+        {
+            key: 'edit',
+            text: '编辑',
+            tooltip: {
+                title: '编辑',
+            },
+            icon: 'EditOutlined',
+            onClick: async () => {
+                handlEdit(data.id);
+            },
+        },
+        {
+            key: 'delete',
+            text: '删除',
+            popConfirm: {
+                title: '确认删除?',
+                okText: ' 确定',
+                cancelText: '取消',
+                onConfirm: async () => {
+                    handlDelete(data.id);
+                },
+            },
+            icon: 'DeleteOutlined',
+        },
+    ];
+};
 
 const handlAdd = () => {
-  router.push('/link/certificate/detail/add');
+    router.push('/link/certificate/detail/add/new');
-  
+};
-}
 
+const handlEye = (id: string) => {
+    router.push(`/link/certificate/detail/view/${id}`);
+};
+
+const handlEdit = (id: string) => {
+    router.push(`/link/certificate/detail/edit/${id}`);
+};
+
+const handlDelete = async (id: string) => {
+    const res = await remove(id);
+    if (res.success) {
+        message.success('操作成功');
+        tableRef.value.reload();
+    }
+};
+
+/**
+ * 搜索
+ * @param params
+ */
+const handleSearch = (e: any) => {
+    console.log(1211, e);
+
+    params.value = e;
+};
 </script>
+
+<style lang="less" scoped>
+.page-container {
+    background: #f0f2f5;
+    padding: 24px;
+}
+</style>

src/views/link/Certificate/type.d.ts

@@ -0,0 +1,19 @@
+
+export interface TypeObjType = {
+    text: string;
+    value: string;
+};
+export type FormDataType = {
+    description: string;
+    name: string;
+    type: string | TypeObjType;
+    configs: {
+        cert: string;
+        key: string;
+    };
+    id?: string;
+    format?: string;
+    mode?: object;
+    creatorId?: string;
+    createTime?: number;
+};