fix: 设备接入网关/证书管理 代码优化
This commit is contained in:
jackhoo_98
parent
419f5ff4a2
commit
15e19f8714
|
|
@ -1,42 +1,44 @@
|
|||
<template>
|
||||
<a-spin :spinning="loading">
|
||||
<a-card :bordered="false">
|
||||
<div v-if="type && modeType === 'add'">
|
||||
<Provider
|
||||
@onClick="goProviders"
|
||||
:dataSource="dataSource"
|
||||
></Provider>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!id"><a @click="goBack">返回</a></div>
|
||||
<AccessNetwork
|
||||
v-if="showType === 'network'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Media
|
||||
v-if="showType === 'media'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Channel
|
||||
v-if="showType === 'channel'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Edge
|
||||
v-if="showType === 'edge'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Cloud
|
||||
v-if="showType === 'cloud'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
<page-container>
|
||||
<a-spin :spinning="loading">
|
||||
<a-card :bordered="false">
|
||||
<div v-if="type && id === ':id'">
|
||||
<Provider
|
||||
@onClick="goProviders"
|
||||
:dataSource="dataSource"
|
||||
></Provider>
|
||||
</div>
|
||||
<div v-else>
|
||||
<div v-if="!id"><a @click="goBack">返回</a></div>
|
||||
<AccessNetwork
|
||||
v-if="showType === 'network'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Media
|
||||
v-if="showType === 'media'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Channel
|
||||
v-if="showType === 'channel'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Edge
|
||||
v-if="showType === 'edge'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
<Cloud
|
||||
v-if="showType === 'cloud'"
|
||||
:provider="provider"
|
||||
:data="data"
|
||||
/>
|
||||
</div>
|
||||
</a-card>
|
||||
</a-spin>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="AccessConfigDetail">
|
||||
|
|
@ -51,7 +53,7 @@ import Cloud from '../components/Cloud/index.vue';
|
|||
|
||||
const route = useRoute();
|
||||
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const dataSource = ref([]);
|
||||
|
|
@ -138,7 +140,7 @@ const queryProviders = async () => {
|
|||
};
|
||||
|
||||
const getProvidersData = async () => {
|
||||
if (id && modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
getProviders().then((response) => {
|
||||
if (response.status === 200) {
|
||||
const list = getTypeList(response.result);
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="modeType !== 'view'"
|
||||
v-if="view === 'false'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
|
|
@ -96,7 +96,7 @@ interface FormState {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -126,9 +126,7 @@ const onFinish = async (values: any) => {
|
|||
channel: providerId === 'modbus-tcp' ? 'modbus' : 'opc-ua',
|
||||
};
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
id === ':id' ? await save(params) : await update({ ...params, id });
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// if (params.get('save')) {
|
||||
|
|
@ -145,7 +143,7 @@ const onFinish = async (values: any) => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
if (id === ':id') {
|
||||
formState.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
|
|
|
|||
|
|
@ -283,7 +283,7 @@
|
|||
下一步
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="current === 2 && modeType !== 'view'"
|
||||
v-if="current === 2 && view === 'false'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
|
|
@ -383,7 +383,7 @@ interface Form {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -450,13 +450,13 @@ const saveData = async () => {
|
|||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({
|
||||
id === ':id'
|
||||
? await save(params)
|
||||
: await update({
|
||||
...props.data,
|
||||
...params,
|
||||
})
|
||||
: await save(params);
|
||||
|
||||
id,
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// 回到列表页面
|
||||
|
|
@ -489,7 +489,7 @@ const queryProcotolList = async (id: string, params = {}) => {
|
|||
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const url = '/iot/link/protocol';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
|
|
@ -518,7 +518,7 @@ const prev = () => {
|
|||
current.value = current.value - 1;
|
||||
};
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
formState.value = props.data.configuration;
|
||||
procotolCurrent.value = props.data.protocol;
|
||||
formData.value = {
|
||||
|
|
|
|||
|
|
@ -377,7 +377,7 @@
|
|||
</a-button>
|
||||
<a-button
|
||||
style="margin-right: 8px"
|
||||
v-if="current === 2 && modeType !== 'view'"
|
||||
v-if="current === 2 && view === 'false'"
|
||||
type="primary"
|
||||
@click="saveData"
|
||||
>
|
||||
|
|
@ -479,7 +479,7 @@ interface Form {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -547,12 +547,13 @@ const saveData = async () => {
|
|||
transport: 'HTTP_SERVER',
|
||||
};
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({
|
||||
id === ':id'
|
||||
? await save(params)
|
||||
: await update({
|
||||
...props.data,
|
||||
...params,
|
||||
})
|
||||
: await save(params);
|
||||
id,
|
||||
});
|
||||
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
|
|
@ -585,7 +586,7 @@ const queryProcotolList = async (id: string, params = {}) => {
|
|||
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const url = '/iot/link/protocol';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
|
|
@ -615,7 +616,7 @@ const prev = () => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
formState.value = props.data.configuration;
|
||||
procotolCurrent.value = props.data.protocol;
|
||||
formData.value = {
|
||||
|
|
|
|||
|
|
@ -140,7 +140,7 @@
|
|||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="current !== 1 && modeType !== 'view'"
|
||||
v-if="current !== 1 && view === 'false'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
|
|
@ -179,7 +179,7 @@
|
|||
下一步
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="current === 1 && modeType !== 'view'"
|
||||
v-if="current === 1 && view === 'false'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
|
|
@ -297,7 +297,7 @@ interface FormState {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -338,9 +338,7 @@ const onFinish = async (values: any) => {
|
|||
};
|
||||
if (networkCurrent.value) params.channelId = networkCurrent.value;
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
id === ':id' ? await save(params) : await update({ ...params, id });
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// if (params.get('save')) {
|
||||
|
|
@ -392,7 +390,7 @@ const saveData = async () => {
|
|||
|
||||
const addNetwork = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Type/Detail']
|
||||
const url = '/demo';
|
||||
const url = '/iot/link/type/detail/:id';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?type=${
|
||||
NetworkTypeMapping.get(props.provider?.id) || ''
|
||||
|
|
@ -421,7 +419,7 @@ onMounted(() => {
|
|||
if (props.provider.id === 'official-edge-gateway') {
|
||||
queryNetworkList(props.provider.id, '');
|
||||
}
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
formState.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
|
|
|
|||
|
|
@ -503,7 +503,7 @@
|
|||
下一步
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="current === 1 && modeType !== 'view'"
|
||||
v-if="current === 1 && view === 'false'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
|
|
@ -559,7 +559,7 @@ const props = defineProps({
|
|||
});
|
||||
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const activeKey: any = ref([]);
|
||||
|
|
@ -663,9 +663,7 @@ const saveData = () => {
|
|||
};
|
||||
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
id === ':id' ? await save(params) : await update({ ...params, id });
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// if (params.get('save')) {
|
||||
|
|
@ -741,7 +739,7 @@ onMounted(() => {
|
|||
}
|
||||
});
|
||||
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
formState.value = props.data.configuration;
|
||||
formData.value = {
|
||||
name: props.data.name,
|
||||
|
|
|
|||
|
|
@ -40,7 +40,7 @@
|
|||
</a-form-item>
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="modeType !== 'view'"
|
||||
v-if="view === 'false'"
|
||||
type="primary"
|
||||
html-type="submit"
|
||||
>保存</a-button
|
||||
|
|
@ -91,7 +91,7 @@ interface FormState {
|
|||
description: string;
|
||||
}
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const props = defineProps({
|
||||
|
|
@ -119,9 +119,7 @@ const onFinish = async (values: any) => {
|
|||
channel: 'fixed-media',
|
||||
};
|
||||
const resp =
|
||||
!!id && modeType !== 'add'
|
||||
? await update({ ...params, id })
|
||||
: await save(params);
|
||||
id === ':id' ? await save(params) : await update({ ...params, id });
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// if (params.get('save')) {
|
||||
|
|
@ -138,7 +136,7 @@ const onFinish = async (values: any) => {
|
|||
};
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
formState.value = {
|
||||
name: props.data.name,
|
||||
description: props.data?.description || '',
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="margin-top: 10px">
|
||||
<div>
|
||||
<a-steps :current="stepCurrent">
|
||||
<a-step v-for="item in steps" :key="item" :title="item" />
|
||||
</a-steps>
|
||||
|
|
@ -304,7 +304,7 @@
|
|||
下一步
|
||||
</a-button>
|
||||
<a-button
|
||||
v-if="current === 2 && modeType !== 'view'"
|
||||
v-if="current === 2 && view === 'false'"
|
||||
type="primary"
|
||||
style="margin-right: 8px"
|
||||
@click="saveData"
|
||||
|
|
@ -767,7 +767,7 @@ const props = defineProps({
|
|||
const clientHeight = document.body.clientHeight;
|
||||
const type = props.provider.channel;
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const formRef = ref<FormInstance>();
|
||||
|
|
@ -839,7 +839,7 @@ const queryProcotolList = async (id: string, params = {}) => {
|
|||
|
||||
const addNetwork = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Type/Detail']
|
||||
const url = '/demo';
|
||||
const url = '/iot/link/type/detail/:id';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?type=${
|
||||
NetworkTypeMapping.get(props.provider?.id) || ''
|
||||
|
|
@ -854,7 +854,7 @@ const addNetwork = () => {
|
|||
};
|
||||
const addProcotol = () => {
|
||||
// const url = this.$store.state.permission.routes['Link/Protocol']
|
||||
const url = '/demo';
|
||||
const url = '/iot/link/protocol';
|
||||
const tab = window.open(
|
||||
`${window.location.origin + window.location.pathname}#${url}?save=true`,
|
||||
);
|
||||
|
|
@ -903,27 +903,25 @@ const procotolSearch = (value: string) => {
|
|||
const saveData = () => {
|
||||
validate()
|
||||
.then(async (values) => {
|
||||
let resp = undefined;
|
||||
let params = {
|
||||
const params = {
|
||||
...props.data,
|
||||
...values,
|
||||
protocol: procotolCurrent.value,
|
||||
channel: 'network', // 网络组件
|
||||
channelId: networkCurrent.value,
|
||||
};
|
||||
if (!!id && modeType !== 'add') {
|
||||
resp = await update(params);
|
||||
} else {
|
||||
params = {
|
||||
...params,
|
||||
provider: props.provider.id,
|
||||
transport:
|
||||
props.provider?.id === 'child-device'
|
||||
? 'Gateway'
|
||||
: ProtocolMapping.get(props.provider.id),
|
||||
};
|
||||
resp = await save(params);
|
||||
}
|
||||
const resp =
|
||||
id === ':id'
|
||||
? await save(params)
|
||||
: await update({
|
||||
...params,
|
||||
id,
|
||||
provider: props.provider.id,
|
||||
transport:
|
||||
props.provider?.id === 'child-device'
|
||||
? 'Gateway'
|
||||
: ProtocolMapping.get(props.provider.id),
|
||||
});
|
||||
if (resp.status === 200) {
|
||||
message.success('操作成功！');
|
||||
// 回到列表页面
|
||||
|
|
@ -1104,7 +1102,7 @@ onMounted(() => {
|
|||
});
|
||||
|
||||
onMounted(() => {
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
procotolCurrent.value = props.data.protocol;
|
||||
formData.value = {
|
||||
name: props.data.name,
|
||||
|
|
|
|||
|
|
@ -1,9 +1,8 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<a-card style="margin-bottom: 20px">
|
||||
<page-container>
|
||||
<div>
|
||||
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||
</a-card>
|
||||
<a-card>
|
||||
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
model="CARD"
|
||||
|
|
@ -187,8 +186,8 @@
|
|||
/>
|
||||
</template>
|
||||
</JTable>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="AccessConfigPage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
|
|
@ -345,13 +344,25 @@ const getProvidersList = async () => {
|
|||
getProvidersList();
|
||||
|
||||
const handlAdd = () => {
|
||||
router.push('/link/accessConfig/detail/add/new');
|
||||
// router.push('/link/accessConfig/detail/add/new');
|
||||
router.push({
|
||||
path: `/iot/link/accessConfig/detail/:id`,
|
||||
query: { view: false },
|
||||
});
|
||||
};
|
||||
const handlEdit = (id: string) => {
|
||||
router.push(`/link/accessConfig/detail/edit/${id}`);
|
||||
// router.push(`/link/accessConfig/detail/edit/${id}`);
|
||||
router.push({
|
||||
path: `/iot/link/accessConfig/detail/${id}`,
|
||||
query: { view: false },
|
||||
});
|
||||
};
|
||||
const handlEye = (id: string) => {
|
||||
router.push(`/link/accessConfig/detail/view/${id}`);
|
||||
// router.push(`/link/accessConfig/detail/view/${id}`);
|
||||
router.push({
|
||||
path: `/iot/link/accessConfig/detail/${id}`,
|
||||
query: { view: true },
|
||||
});
|
||||
};
|
||||
|
||||
/**
|
||||
|
|
@ -375,10 +386,6 @@ const handleSearch = (e: any) => {
|
|||
// }
|
||||
</script>
|
||||
<style lang="less" scoped>
|
||||
.page-container {
|
||||
background: #f0f2f5;
|
||||
padding: 24px;
|
||||
}
|
||||
.tableCardDisabled {
|
||||
width: 100%;
|
||||
background: url('/images/access-config-diaabled.png') no-repeat;
|
||||
|
|
|
|||
|
|
@ -1,96 +1,104 @@
|
|||
<template>
|
||||
<a-card>
|
||||
<a-row :gutter="[24, 24]" style="padding: 24px">
|
||||
<a-col :span="12">
|
||||
<a-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
:label-col="{ span: 8 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<a-form-item label="证书标准" v-bind="validateInfos.type">
|
||||
<a-radio-group v-model:value="formData.type">
|
||||
<a-radio-button
|
||||
class="form-radio-button"
|
||||
value="common"
|
||||
>
|
||||
<img :src="getImage('/certificate.png')" />
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item label="证书名称" v-bind="validateInfos.name">
|
||||
<a-input
|
||||
placeholder="请输入证书名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="证书文件"
|
||||
v-bind="validateInfos['configs.cert']"
|
||||
<page-container>
|
||||
<a-card>
|
||||
<a-row :gutter="[24, 24]" style="padding: 24px">
|
||||
<a-col :span="12">
|
||||
<a-form
|
||||
class="form"
|
||||
layout="vertical"
|
||||
:model="formData"
|
||||
name="basic"
|
||||
:label-col="{ span: 8 }"
|
||||
:wrapper-col="{ span: 16 }"
|
||||
autocomplete="off"
|
||||
>
|
||||
<CertificateFile
|
||||
name="cert"
|
||||
v-model:modelValue="formData.configs.cert"
|
||||
placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="证书私钥"
|
||||
v-bind="validateInfos['configs.key']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="key"
|
||||
v-model:modelValue="formData.configs.key"
|
||||
placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="modeType !== 'view'"
|
||||
class="form-submit"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
@click.prevent="onSubmit"
|
||||
:loading="loading"
|
||||
>保存</a-button
|
||||
<a-form-item
|
||||
label="证书标准"
|
||||
v-bind="validateInfos.type"
|
||||
>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
|
||||
<a-radio-group v-model:value="formData.type">
|
||||
<a-radio-button
|
||||
class="form-radio-button"
|
||||
value="common"
|
||||
>
|
||||
<img :src="getImage('/certificate.png')" />
|
||||
</a-radio-button>
|
||||
</a-radio-group>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item
|
||||
label="证书名称"
|
||||
v-bind="validateInfos.name"
|
||||
>
|
||||
<a-input
|
||||
placeholder="请输入证书名称"
|
||||
v-model:value="formData.name"
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="证书文件"
|
||||
v-bind="validateInfos['configs.cert']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="cert"
|
||||
v-model:modelValue="formData.configs.cert"
|
||||
placeholder='证书格式以"-----BEGIN CERTIFICATE-----"开头，以"-----END CERTIFICATE-----"结尾"'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item
|
||||
label="证书私钥"
|
||||
v-bind="validateInfos['configs.key']"
|
||||
>
|
||||
<CertificateFile
|
||||
name="key"
|
||||
v-model:modelValue="formData.configs.key"
|
||||
placeholder='证书私钥格式以"-----BEGIN (RSA|EC) PRIVATE KEY-----"开头，以"-----END(RSA|EC) PRIVATE KEY-----"结尾。'
|
||||
/>
|
||||
</a-form-item>
|
||||
<a-form-item label="说明" name="description">
|
||||
<a-textarea
|
||||
placeholder="请输入说明"
|
||||
v-model:value="formData.description"
|
||||
:maxlength="200"
|
||||
:rows="3"
|
||||
showCount
|
||||
/>
|
||||
</a-form-item>
|
||||
|
||||
<a-form-item>
|
||||
<a-button
|
||||
v-if="view === 'false'"
|
||||
class="form-submit"
|
||||
html-type="submit"
|
||||
type="primary"
|
||||
@click.prevent="onSubmit"
|
||||
:loading="loading"
|
||||
>保存</a-button
|
||||
>
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-col>
|
||||
<a-col :span="12">
|
||||
<div class="doc">
|
||||
<h1>1. 概述</h1>
|
||||
<div>
|
||||
证书由受信任的数字证书颁发机构CA，在验证服务器身份后颁发，具有服务器身份验证和数据传输加密功能，保障设备与平台间的数据传输安全。配置后可被网络组件引用。
|
||||
</div>
|
||||
<h1>2. 配置说明</h1>
|
||||
<h2>1、证书文件</h2>
|
||||
<div>
|
||||
您可以使用文本编辑工具打开PEM或者CRT格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
<h2>2、证书私钥</h2>
|
||||
<div>
|
||||
填写证书私钥内容的PEM编码。
|
||||
您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
</div>
|
||||
<h1>2. 配置说明</h1>
|
||||
<h2>1、证书文件</h2>
|
||||
<div>
|
||||
您可以使用文本编辑工具打开PEM或者CRT格式的证书文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传，并选择存储在本地计算机的证书文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
<h2>2、证书私钥</h2>
|
||||
<div>
|
||||
填写证书私钥内容的PEM编码。
|
||||
您可以使用文本编辑工具打开KEY格式的证书私钥文件，复制其中的内容并粘贴到该文本框，或者单击该文本框下的上传并选择存储在本地计算机的证书私钥文件，将文件内容上传到文本框。
|
||||
</div>
|
||||
</div>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</a-col>
|
||||
</a-row>
|
||||
</a-card>
|
||||
</page-container>
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup name="CertificateDetail">
|
||||
|
|
@ -103,7 +111,7 @@ import { FormDataType, TypeObjType } from '../type';
|
|||
|
||||
const router = useRouter();
|
||||
const route = useRoute();
|
||||
const modeType = route.params.type as string;
|
||||
const view = route.query.view as string;
|
||||
const id = route.params.id as string;
|
||||
|
||||
const useForm = Form.useForm;
|
||||
|
|
@ -145,10 +153,12 @@ const onSubmit = () => {
|
|||
const params = toRaw(formData.value);
|
||||
loading.value = true;
|
||||
const response =
|
||||
modeType === 'edit' ? await update(params) : await save(params);
|
||||
id === ':id'
|
||||
? await save(params)
|
||||
: await update({ ...params, id });
|
||||
if (response.status === 200) {
|
||||
message.success('操作成功');
|
||||
router.push('/link/certificate');
|
||||
router.push('/iot/link/certificate');
|
||||
}
|
||||
loading.value = false;
|
||||
})
|
||||
|
|
@ -168,7 +178,7 @@ const handleChange = (info: UploadChangeParam) => {
|
|||
};
|
||||
|
||||
const detail = async (id: string) => {
|
||||
if (modeType !== 'add') {
|
||||
if (id !== ':id') {
|
||||
loading.value = true;
|
||||
const res = await queryDetail(id);
|
||||
if (res.success) {
|
||||
|
|
|
|||
|
|
@ -1,13 +1,7 @@
|
|||
<template>
|
||||
<div class="page-container">
|
||||
<a-card style="margin-bottom: 20px">
|
||||
<Search
|
||||
:columns="columns"
|
||||
target="search"
|
||||
@search="handleSearch"
|
||||
/>
|
||||
</a-card>
|
||||
<a-card>
|
||||
<page-container>
|
||||
<div>
|
||||
<Search :columns="columns" target="search" @search="handleSearch" />
|
||||
<JTable
|
||||
ref="tableRef"
|
||||
model="TABLE"
|
||||
|
|
@ -61,8 +55,8 @@
|
|||
</a-space>
|
||||
</template>
|
||||
</JTable>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</page-container>
|
||||
</template>
|
||||
<script lang="ts" setup name="CertificatePage">
|
||||
import type { ActionsType } from '@/components/Table/index.vue';
|
||||
|
|
@ -158,15 +152,24 @@ const getActions = (data: Partial<Record<string, any>>): ActionsType[] => {
|
|||
};
|
||||
|
||||
const handlAdd = () => {
|
||||
router.push('/link/certificate/detail/add/new');
|
||||
router.push({
|
||||
path: `/iot/link/certificate/detail/:id`,
|
||||
query: { view: false },
|
||||
});
|
||||
};
|
||||
|
||||
const handlEye = (id: string) => {
|
||||
router.push(`/link/certificate/detail/view/${id}`);
|
||||
router.push({
|
||||
path: `/iot/link/certificate/detail/${id}`,
|
||||
query: { view: true },
|
||||
});
|
||||
};
|
||||
|
||||
const handlEdit = (id: string) => {
|
||||
router.push(`/link/certificate/detail/edit/${id}`);
|
||||
router.push({
|
||||
path: `/iot/link/certificate/detail/${id}`,
|
||||
query: { view: false },
|
||||
});
|
||||
};
|
||||
|
||||
const handlDelete = async (id: string) => {
|
||||
|
|
@ -182,15 +185,8 @@ const handlDelete = async (id: string) => {
|
|||
* @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>
|
||||
<style lang="less" scoped></style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue