生成主机身份代码.
This commit is contained in:
lijiahang
@@ -0,0 +1,151 @@
|
||||
<template>
|
||||
<a-modal v-model:visible="visible"
|
||||
body-class="modal-form"
|
||||
title-align="start"
|
||||
:title="title"
|
||||
:top="80"
|
||||
:align-center="false"
|
||||
:draggable="true"
|
||||
:mask-closable="false"
|
||||
:unmount-on-close="true"
|
||||
:ok-button-props="{ disabled: loading }"
|
||||
:cancel-button-props="{ disabled: loading }"
|
||||
:on-before-ok="handlerOk"
|
||||
@close="handleClose">
|
||||
<a-spin :loading="loading">
|
||||
<a-form :model="formModel"
|
||||
ref="formRef"
|
||||
label-align="right"
|
||||
:style="{ width: '460px' }"
|
||||
:label-col-props="{ span: 6 }"
|
||||
:wrapper-col-props="{ span: 18 }"
|
||||
:rules="formRules">
|
||||
<!-- 名称 -->
|
||||
<a-form-item field="name" label="名称">
|
||||
<a-input v-model="formModel.name" placeholder="请输入名称" />
|
||||
</a-form-item>
|
||||
<!-- 公钥文本 -->
|
||||
<a-form-item field="publicKey" label="公钥文本">
|
||||
<a-input v-model="formModel.publicKey" placeholder="请输入公钥文本" />
|
||||
</a-form-item>
|
||||
<!-- 私钥文本 -->
|
||||
<a-form-item field="privateKey" label="私钥文本">
|
||||
<a-input v-model="formModel.privateKey" placeholder="请输入私钥文本" />
|
||||
</a-form-item>
|
||||
<!-- 密码 -->
|
||||
<a-form-item field="password" label="密码">
|
||||
<a-input v-model="formModel.password" placeholder="请输入密码" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-spin>
|
||||
</a-modal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'asset-host-key-form-modal'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import useVisible from '@/hooks/visible';
|
||||
import formRules from '../types/form.rules';
|
||||
import { createHostKey, updateHostKey } from '@/api/asset/host-key';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import { } from '../types/enum.types';
|
||||
import { } from '../types/const';
|
||||
import { toOptions } from '@/utils/enum';
|
||||
|
||||
const { visible, setVisible } = useVisible();
|
||||
const { loading, setLoading } = useLoading();
|
||||
|
||||
const title = ref<string>();
|
||||
const isAddHandle = ref<boolean>(true);
|
||||
|
||||
const defaultForm = () => {
|
||||
return {
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
publicKey: undefined,
|
||||
privateKey: undefined,
|
||||
password: undefined,
|
||||
};
|
||||
};
|
||||
|
||||
const formRef = ref<any>();
|
||||
const formModel = reactive<Record<string, any>>(defaultForm());
|
||||
|
||||
const emits = defineEmits(['added', 'updated']);
|
||||
|
||||
// 打开新增
|
||||
const openAdd = () => {
|
||||
title.value = '添加主机秘钥';
|
||||
isAddHandle.value = true;
|
||||
renderForm({ ...defaultForm() });
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 打开修改
|
||||
const openUpdate = (record: any) => {
|
||||
title.value = '修改主机秘钥';
|
||||
isAddHandle.value = false;
|
||||
renderForm({ ...defaultForm(), ...record });
|
||||
setVisible(true);
|
||||
};
|
||||
|
||||
// 渲染表单
|
||||
const renderForm = (record: any) => {
|
||||
Object.keys(formModel).forEach(k => {
|
||||
formModel[k] = record[k];
|
||||
});
|
||||
};
|
||||
|
||||
defineExpose({ openAdd, openUpdate });
|
||||
|
||||
// 确定
|
||||
const handlerOk = async () => {
|
||||
setLoading(true);
|
||||
try {
|
||||
// 验证参数
|
||||
const error = await formRef.value.validate();
|
||||
if (error) {
|
||||
return false;
|
||||
}
|
||||
if (isAddHandle.value) {
|
||||
// 新增
|
||||
await createHostKey(formModel as any);
|
||||
Message.success('创建成功');
|
||||
emits('added');
|
||||
} else {
|
||||
// 修改
|
||||
await updateHostKey(formModel as any);
|
||||
Message.success('修改成功');
|
||||
emits('updated');
|
||||
}
|
||||
// 清空
|
||||
handlerClear();
|
||||
} catch (e) {
|
||||
return false;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 关闭
|
||||
const handleClose = () => {
|
||||
handlerClear();
|
||||
};
|
||||
|
||||
// 清空
|
||||
const handlerClear = () => {
|
||||
setLoading(false);
|
||||
setVisible(false);
|
||||
};
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,209 @@
|
||||
<template>
|
||||
<!-- 搜索 -->
|
||||
<a-card class="general-card table-search-card">
|
||||
<a-query-header :model="formModel"
|
||||
label-align="left"
|
||||
@submit="fetchTableData"
|
||||
@reset="fetchTableData">
|
||||
<!-- id -->
|
||||
<a-form-item field="id" label="id" label-col-flex="50px">
|
||||
<a-input-number v-model="formModel.id" placeholder="请输入id" allow-clear/>
|
||||
</a-form-item>
|
||||
<!-- 名称 -->
|
||||
<a-form-item field="name" label="名称" label-col-flex="50px">
|
||||
<a-input v-model="formModel.name" placeholder="请输入名称" allow-clear/>
|
||||
</a-form-item>
|
||||
<!-- 公钥文本 -->
|
||||
<a-form-item field="publicKey" label="公钥文本" label-col-flex="50px">
|
||||
<a-input v-model="formModel.publicKey" placeholder="请输入公钥文本" allow-clear/>
|
||||
</a-form-item>
|
||||
<!-- 私钥文本 -->
|
||||
<a-form-item field="privateKey" label="私钥文本" label-col-flex="50px">
|
||||
<a-input v-model="formModel.privateKey" placeholder="请输入私钥文本" allow-clear/>
|
||||
</a-form-item>
|
||||
<!-- 密码 -->
|
||||
<a-form-item field="password" label="密码" label-col-flex="50px">
|
||||
<a-input v-model="formModel.password" placeholder="请输入密码" allow-clear/>
|
||||
</a-form-item>
|
||||
</a-query-header>
|
||||
</a-card>
|
||||
<!-- 表格 -->
|
||||
<a-card class="general-card table-card">
|
||||
<template #title>
|
||||
<!-- 左侧标题 -->
|
||||
<div class="table-title">
|
||||
主机秘钥列表
|
||||
</div>
|
||||
<!-- 右侧按钮 -->
|
||||
<div class="table-bar-handle">
|
||||
<a-space>
|
||||
<!-- 新增 -->
|
||||
<a-button type="primary"
|
||||
v-permission="['asset:host-key:create']"
|
||||
@click="emits('openAdd')">
|
||||
新增
|
||||
<template #icon>
|
||||
<icon-plus />
|
||||
</template>
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm position="br"
|
||||
type="warning"
|
||||
:content="`确认删除选中的${selectedKeys.length}条记录吗?`"
|
||||
@ok="deleteSelectRows">
|
||||
<a-button v-permission="['asset:host-key:delete']"
|
||||
type="secondary"
|
||||
status="danger"
|
||||
:disabled="selectedKeys.length === 0">
|
||||
删除
|
||||
<template #icon>
|
||||
<icon-delete />
|
||||
</template>
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</a-space>
|
||||
</div>
|
||||
</template>
|
||||
<!-- table -->
|
||||
<a-table row-key="id"
|
||||
class="table-wrapper-8"
|
||||
ref="tableRef"
|
||||
label-align="left"
|
||||
:loading="loading"
|
||||
:columns="columns"
|
||||
v-model:selectedKeys="selectedKeys"
|
||||
:row-selection="rowSelection"
|
||||
:data="tableRenderData"
|
||||
:pagination="pagination"
|
||||
@page-change="(page) => fetchTableData(page, pagination.pageSize)"
|
||||
@page-size-change="(size) => fetchTableData(pagination.current, size)"
|
||||
:bordered="false">
|
||||
<!-- 操作 -->
|
||||
<template #handle="{ record }">
|
||||
<div class="table-handle-wrapper">
|
||||
<!-- 修改 -->
|
||||
<a-button type="text"
|
||||
size="mini"
|
||||
v-permission="['asset:host-key:update']"
|
||||
@click="emits('openUpdate', record)">
|
||||
修改
|
||||
</a-button>
|
||||
<!-- 删除 -->
|
||||
<a-popconfirm content="确认删除这条记录吗?"
|
||||
position="left"
|
||||
type="warning"
|
||||
@ok="deleteRow(record)">
|
||||
<a-button v-permission="['asset:host-key:delete']"
|
||||
type="text"
|
||||
size="mini"
|
||||
status="danger">
|
||||
删除
|
||||
</a-button>
|
||||
</a-popconfirm>
|
||||
</div>
|
||||
</template>
|
||||
</a-table>
|
||||
</a-card>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
export default {
|
||||
name: 'asset-host-key-table'
|
||||
};
|
||||
</script>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { reactive, ref } from 'vue';
|
||||
import { batchDeleteHostKey, deleteHostKey, getHostKeyPage, HostKeyQueryRequest, HostKeyQueryResponse } from '@/api/asset/host-key';
|
||||
import { Message } from '@arco-design/web-vue';
|
||||
import useLoading from '@/hooks/loading';
|
||||
import columns from '../types/table.columns';
|
||||
import { defaultPagination, defaultRowSelection } from '@/types/table';
|
||||
import { } from '../types/enum.types';
|
||||
import { } from '../types/const';
|
||||
import { toOptions } from '@/utils/enum';
|
||||
|
||||
const tableRenderData = ref<HostKeyQueryResponse[]>();
|
||||
const { loading, setLoading } = useLoading();
|
||||
const emits = defineEmits(['openAdd', 'openUpdate']);
|
||||
|
||||
const pagination = reactive(defaultPagination());
|
||||
const selectedKeys = ref<number[]>([]);
|
||||
const rowSelection = reactive(defaultRowSelection());
|
||||
|
||||
const formModel = reactive<HostKeyQueryRequest>({
|
||||
id: undefined,
|
||||
name: undefined,
|
||||
publicKey: undefined,
|
||||
privateKey: undefined,
|
||||
password: undefined,
|
||||
});
|
||||
|
||||
// 删除选中行
|
||||
const deleteSelectRows = async () => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await batchDeleteHostKey(selectedKeys.value);
|
||||
Message.success(`成功删除${selectedKeys.value.length}条数据`);
|
||||
selectedKeys.value = [];
|
||||
// 重新加载数据
|
||||
await fetchTableData();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 删除当前行
|
||||
const deleteRow = async ({ id }: { id: number }) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
// 调用删除接口
|
||||
await deleteHostKey(id);
|
||||
Message.success('删除成功');
|
||||
// 重新加载数据
|
||||
await fetchTableData();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 添加后回调
|
||||
const addedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
// 更新后回调
|
||||
const updatedCallback = () => {
|
||||
fetchTableData();
|
||||
};
|
||||
|
||||
defineExpose({
|
||||
addedCallback, updatedCallback
|
||||
});
|
||||
|
||||
// 加载数据
|
||||
const doFetchTableData = async (request: HostKeyQueryRequest) => {
|
||||
try {
|
||||
setLoading(true);
|
||||
const { data } = await getHostKeyPage(request);
|
||||
tableRenderData.value = data.rows;
|
||||
pagination.total = data.total;
|
||||
pagination.current = request.page;
|
||||
pagination.pageSize = request.limit;
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
// 切换页码
|
||||
const fetchTableData = (page = 1, limit = pagination.pageSize, form = formModel) => {
|
||||
doFetchTableData({ page, limit, ...form });
|
||||
};
|
||||
fetchTableData();
|
||||
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user