更新容器获取
This commit is contained in:
@@ -6,9 +6,11 @@
|
||||
<div class="server-card">
|
||||
<div class="ip-info">
|
||||
<div class="info-item ip-row">
|
||||
<span><a-button type="link" size="small" @click="openModal(true, item)">{{ item.sysHostname || '未知IP' }}</a-button></span>
|
||||
<span><a-button type="link" size="small" @click="openModalServer(true, item)">{{ item.sysHostname || '未知IP' }}</a-button></span>
|
||||
<span class="status-tag" :class="item.ustatus === '1' ? 'status-running' : 'status-offline'">
|
||||
{{ item.ustatus === '1' ? '运行中' : '已离线' }}
|
||||
<a-button type="link" size="small" @click="openModalDocker(true, item)">
|
||||
{{ item.ustatus === '1' ? '运行中' : '已离线' }}
|
||||
</a-button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
@@ -67,7 +69,8 @@
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
<Modal @register="register" />
|
||||
<ModalInfo @register="ServerRegister" />
|
||||
<DockerInfo @register="DockerRegister" />
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
@@ -77,13 +80,15 @@ import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { useRouter } from 'vue-router';
|
||||
import { BizServerInfo, bizServerInfoListAll } from '@jeesite/biz/api/biz/serverInfo';
|
||||
import Modal from './info/ServerInfo.vue';
|
||||
import ModalInfo from './info/ServerInfo.vue';
|
||||
import DockerInfo from './info/DockerInfo.vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { Card, Icon, Modal },
|
||||
components: { Card, Icon, ModalInfo, DockerInfo },
|
||||
setup() {
|
||||
|
||||
const [register, { openModal }] = useModal();
|
||||
const [ServerRegister, { openModal: openModalServer }] = useModal();
|
||||
const [DockerRegister, { openModal: openModalDocker }] = useModal();
|
||||
// 服务器数据列表
|
||||
const listData = ref<BizServerInfo[]>([]);
|
||||
|
||||
@@ -119,8 +124,10 @@ export default defineComponent({
|
||||
|
||||
return {
|
||||
listData,
|
||||
register,
|
||||
openModal,
|
||||
ServerRegister,
|
||||
DockerRegister,
|
||||
openModalServer,
|
||||
openModalDocker,
|
||||
getUsageClass,
|
||||
getProgressClass,
|
||||
};
|
||||
|
||||
@@ -0,0 +1,414 @@
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
@register="register"
|
||||
title="容器详情"
|
||||
:showOkBtn="false"
|
||||
:showCancelBtn="false"
|
||||
width="70%"
|
||||
>
|
||||
<div class="container-outer-wrapper">
|
||||
<div class="search-filter-header">
|
||||
<div class="search-box">
|
||||
<a-input-search
|
||||
v-model:value="searchKey"
|
||||
placeholder="搜索容器名称"
|
||||
enter-button
|
||||
@search="onSearch"
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
<!-- 内容滚动 -->
|
||||
<div class="content-scroll-container">
|
||||
<div v-if="loading" class="loading-placeholder">
|
||||
<a-skeleton :paragraph="{ rows: 3 }" style="width: 100%" active />
|
||||
</div>
|
||||
<div class="container-card-list">
|
||||
<a-card
|
||||
v-for="item in filteredContainerList"
|
||||
:key="item.id"
|
||||
class="single-container-card"
|
||||
hoverable
|
||||
:bordered="false"
|
||||
>
|
||||
<div class="card-content-wrapper">
|
||||
<div class="top-info-row">
|
||||
<div class="left-name-status">
|
||||
<Tooltip :title="item.name" placement="topLeft">
|
||||
<h3 class="container-name">{{ item.name }}</h3>
|
||||
</Tooltip>
|
||||
<Tooltip :title="item.state" placement="topLeft">
|
||||
{{ item.state === '1' ? '运行中' : '已停止' }}
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="right-resource-text">
|
||||
<span class="cpu-text">CPU: {{ item.cpuUsage }}%</span>
|
||||
<span class="mem-text">内存: {{ item.memUsage }}%</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="detail-info-group">
|
||||
<div class="info-item">
|
||||
<span class="label">容器ID：</span>
|
||||
<Tooltip :title="item.id" placement="top">
|
||||
<span class="value">{{ item.cid }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">镜像：</span>
|
||||
<Tooltip :title="item.imageName" placement="top">
|
||||
<span class="value">{{ item.imageName }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">端口映射：</span>
|
||||
<Tooltip :title="item.mapPorts || '无'" placement="top">
|
||||
<span class="value">{{ item.mapPorts || '无' }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="label">运行时长：</span>
|
||||
<Tooltip :title="item.status || '无'" placement="top">
|
||||
<span class="value">{{ item.status || '无' }}</span>
|
||||
</Tooltip>
|
||||
</div>
|
||||
</div>
|
||||
<div class="action-divider"></div>
|
||||
<div class="action-button-section">
|
||||
<a-space size="middle">
|
||||
<a-button size="small" @click="handleRestart(item)">重启</a-button>
|
||||
<a-button type="error" size="small" @click="handleStop(item)" :disabled="item.state == '0'" > 停止</a-button>
|
||||
<a-button type="success" size="small" @click="handleStart(item)" :disabled="item.state == '1'" >启动</a-button>
|
||||
</a-space>
|
||||
</div>
|
||||
</div>
|
||||
</a-card>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { defineComponent, ref, onMounted } from 'vue';
|
||||
import { Tag, Tabs, TabPane, Tooltip, InputSearch } from 'ant-design-vue'; // 显式导入InputSearch
|
||||
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { DockerInfo , bizDockerInfoList, bizDockerRestart, bizDockerStart, bizDockerStop } from '@jeesite/biz/api/biz/myWork';
|
||||
import { message, Modal } from 'ant-design-vue';
|
||||
|
||||
export default defineComponent({
|
||||
components: { BasicModal, Tag, Tabs, TabPane, Tooltip, InputSearch },
|
||||
setup() {
|
||||
const { createMessage } = useMessage();
|
||||
const loading = ref(false);
|
||||
const searchKey = ref<string>('');
|
||||
const containerList = ref<DockerInfo[]>([]);
|
||||
const filteredContainerList = ref<DockerInfo[]>([]);
|
||||
const FormValues = ref<Record<string, any>>({
|
||||
hostId: '-1'
|
||||
});
|
||||
|
||||
const handleInput = (value: string) => {
|
||||
searchKey.value = value;
|
||||
};
|
||||
|
||||
const onSearch = async () => {
|
||||
await getDockerList();
|
||||
if (!searchKey.value.trim()) {
|
||||
filteredContainerList.value = [...containerList.value];
|
||||
return;
|
||||
}
|
||||
|
||||
const keyword = searchKey.value.toLowerCase();
|
||||
const filtered = containerList.value.filter(item => {
|
||||
return item.name?.toLowerCase().includes(keyword);
|
||||
});
|
||||
|
||||
filteredContainerList.value = filtered;
|
||||
};
|
||||
|
||||
const getDockerList = async () => {
|
||||
try {
|
||||
loading.value = true;
|
||||
const params = {
|
||||
... FormValues.value
|
||||
};
|
||||
const result = await bizDockerInfoList(params);
|
||||
containerList.value = result || [];
|
||||
filteredContainerList.value = [...containerList.value];
|
||||
} catch (error) {
|
||||
console.error('获取数据失败：', error);
|
||||
containerList.value = [];
|
||||
filteredContainerList.value = [];
|
||||
} finally {
|
||||
loading.value = false;
|
||||
}
|
||||
};
|
||||
|
||||
const handleRestart = async (item: DockerInfo) => {
|
||||
Modal.confirm({
|
||||
title: '温馨提示',
|
||||
content: '您确定要重启当前容器吗?',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
width: 420,
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await bizDockerRestart(item);
|
||||
createMessage.success(res.message);
|
||||
onSearch();
|
||||
} catch (error) {
|
||||
console.error('重启容器失败:', error);
|
||||
}
|
||||
},
|
||||
onCancel: () => {
|
||||
createMessage.info('已取消重启操作');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleStop = async (item: DockerInfo) => {
|
||||
Modal.confirm({
|
||||
title: '温馨提示',
|
||||
content: '您确定要停止当前容器吗?',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
width: 420,
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await bizDockerStop(item);
|
||||
createMessage.success(res.message);
|
||||
onSearch();
|
||||
} catch (error) {
|
||||
console.error('停止容器失败:', error);
|
||||
}
|
||||
},
|
||||
onCancel: () => {
|
||||
createMessage.info('已取消停止操作');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const handleStart = async (item: DockerInfo) => {
|
||||
Modal.confirm({
|
||||
title: '温馨提示',
|
||||
content: '您确定要启动当前容器吗?',
|
||||
okText: '确认',
|
||||
cancelText: '取消',
|
||||
okType: 'danger',
|
||||
width: 420,
|
||||
onOk: async () => {
|
||||
try {
|
||||
const res = await bizDockerStart(item);
|
||||
createMessage.success(res.message);
|
||||
onSearch();
|
||||
} catch (error) {
|
||||
console.error('启动容器失败:', error);
|
||||
}
|
||||
},
|
||||
onCancel: () => {
|
||||
createMessage.info('已取消启动操作');
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const [register, { closeModal }] = useModalInner(async (data: any) => {
|
||||
if (!data?.hostId) {
|
||||
closeModal();
|
||||
return;
|
||||
}
|
||||
searchKey.value = ''; // 重置搜索关键词
|
||||
FormValues.value.hostId = data.hostId;
|
||||
await getDockerList();
|
||||
});
|
||||
|
||||
return {
|
||||
register,
|
||||
onSearch,
|
||||
handleInput,
|
||||
closeModal,
|
||||
loading,
|
||||
searchKey,
|
||||
containerList,
|
||||
filteredContainerList,
|
||||
handleRestart,
|
||||
handleStop,
|
||||
handleStart,
|
||||
};
|
||||
},
|
||||
});
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
/* 样式部分保持不变 */
|
||||
.container-outer-wrapper {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 8px;
|
||||
padding: 12px;
|
||||
background-color: #f5f7fa;
|
||||
border-radius: 12px;
|
||||
height: calc(100vh - 320px);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.search-filter-header {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 4px 12px;
|
||||
background: #fff;
|
||||
border-bottom: 1px solid #d9e8f0;
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 10;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
:deep(.ant-tabs-tab-active) {
|
||||
background-color: #4096ff !important;
|
||||
color: #fff !important;
|
||||
}
|
||||
|
||||
.content-scroll-container {
|
||||
flex: 1;
|
||||
overflow-y: auto;
|
||||
padding: 2px 4px;
|
||||
scrollbar-width: thin;
|
||||
scrollbar-color: #4096ff #e8f4f8;
|
||||
}
|
||||
|
||||
.content-scroll-container::-webkit-scrollbar { width: 8px; }
|
||||
.content-scroll-container::-webkit-scrollbar-track { background: #e8f4f8; border-radius: 4px; }
|
||||
.content-scroll-container::-webkit-scrollbar-thumb { background: #4096ff; border-radius: 4px; }
|
||||
|
||||
.container-card-list {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.single-container-card {
|
||||
background: #fff;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 8px rgba(0,0,0,0.08);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
.single-container-card:hover {
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.12);
|
||||
transform: translateY(-1px);
|
||||
}
|
||||
|
||||
.card-content-wrapper {
|
||||
padding: 16px 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.top-info-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
padding-bottom: 12px;
|
||||
border-bottom: 1px solid #f0f7fb;
|
||||
}
|
||||
|
||||
.left-name-status {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.container-name {
|
||||
font-size: 18px;
|
||||
font-weight: 600;
|
||||
color: #1f2937;
|
||||
margin: 0;
|
||||
width: 180px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.right-resource-text {
|
||||
display: flex;
|
||||
gap: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
.cpu-text { color: #2f54eb; font-weight: 500; }
|
||||
.mem-text { color: #1890ff; font-weight: 500; }
|
||||
|
||||
.detail-info-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
font-size: 14px;
|
||||
flex-wrap: nowrap;
|
||||
overflow: hidden;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.info-item {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.info-item .label {
|
||||
color: #667085;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
.info-item .value {
|
||||
color: #344054;
|
||||
max-width: 200px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.action-divider {
|
||||
width: 100%;
|
||||
height: 1px;
|
||||
background-color: #f0f7fb;
|
||||
margin: 4px 0;
|
||||
}
|
||||
|
||||
.action-button-section {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.action-button-section :deep(.ant-btn) {
|
||||
padding: 4px 12px;
|
||||
font-size: 12px;
|
||||
height: 28px;
|
||||
}
|
||||
|
||||
/* 无结果提示样式 */
|
||||
.no-result {
|
||||
text-align: center;
|
||||
padding: 40px 0;
|
||||
color: #667085;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.top-info-row {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 10px;
|
||||
}
|
||||
.detail-info-group {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 8px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -36,15 +36,13 @@ const chartDom = ref<HTMLDivElement | null>(null);
|
||||
const statusOptions = ref([
|
||||
{ value: '-12', label: '12小时' },
|
||||
{ value: '-24', label: '24小时' },
|
||||
{ value: '-36', label: '36小时' },
|
||||
{ value: '-48', label: '48小时' },
|
||||
{ value: '-72', label: '72小时' },
|
||||
]);
|
||||
const currentStatus = ref<string>('-12');
|
||||
|
||||
// 防抖处理resize，避免频繁触发
|
||||
const resizeHandler = () => {
|
||||
if (chartInstance.value) {
|
||||
// 使用nextTick确保DOM更新完成后再调整大小
|
||||
nextTick(() => {
|
||||
chartInstance.value?.resize({
|
||||
animation: { duration: 200 }
|
||||
|
||||
@@ -1,103 +0,0 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author gaoxq
|
||||
-->
|
||||
<template>
|
||||
<BasicModal
|
||||
v-bind="$attrs"
|
||||
:title="t('导入数据信息')"
|
||||
:okText="t('导入')"
|
||||
@register="registerModal"
|
||||
@ok="handleSubmit"
|
||||
:minHeight="120"
|
||||
:width="400"
|
||||
>
|
||||
<Upload accept=".xls,.xlsx" :file-list="fileList" :before-upload="beforeUpload" @remove="handleRemove">
|
||||
<a-button> <Icon icon="ant-design:upload-outlined" /> {{ t('选择文件') }} </a-button>
|
||||
<span class="ml-4">{{ uploadInfo }}</span>
|
||||
</Upload>
|
||||
<div class="ml-4 mt-4">
|
||||
{{ t('提示：仅允许导入“xls”或“xlsx”格式文件！') }}
|
||||
</div>
|
||||
<div class="mt-4">
|
||||
<a-button @click="handleDownloadTemplate()" type="text">
|
||||
<Icon icon="i-fa:file-excel-o" />
|
||||
{{ t('下载模板') }}
|
||||
</a-button>
|
||||
</div>
|
||||
</BasicModal>
|
||||
</template>
|
||||
<script lang="ts" setup>
|
||||
import { ref } from 'vue';
|
||||
import { Upload } from 'ant-design-vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { downloadByUrl } from '@jeesite/core/utils/file/download';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicModal, useModalInner } from '@jeesite/core/components/Modal';
|
||||
import { bizTableInfoImportData } from '@jeesite/biz/api/biz/tableInfo';
|
||||
import { FileType } from 'ant-design-vue/es/upload/interface';
|
||||
import { AxiosProgressEvent } from 'axios';
|
||||
|
||||
const emit = defineEmits(['success', 'register']);
|
||||
|
||||
const { t } = useI18n('biz.tableInfo');
|
||||
const { showMessage, showMessageModal } = useMessage();
|
||||
|
||||
const fileList = ref<FileType[]>([]);
|
||||
const uploadInfo = ref('');
|
||||
|
||||
const beforeUpload = (file: FileType) => {
|
||||
fileList.value = [file];
|
||||
return false;
|
||||
};
|
||||
|
||||
const handleRemove = () => {
|
||||
fileList.value = [];
|
||||
};
|
||||
|
||||
const [registerModal, { setModalProps, closeModal }] = useModalInner(() => {
|
||||
fileList.value = [];
|
||||
uploadInfo.value = '';
|
||||
});
|
||||
|
||||
async function handleDownloadTemplate() {
|
||||
const { ctxAdminPath } = useGlobSetting();
|
||||
downloadByUrl({ url: ctxAdminPath + '/biz/tableInfo/importTemplate' });
|
||||
}
|
||||
|
||||
function onUploadProgress(progressEvent: AxiosProgressEvent) {
|
||||
const complete = ((progressEvent.loaded / (progressEvent.total || 1)) * 100) | 0;
|
||||
if (complete != 100) {
|
||||
uploadInfo.value = t('正在导入，请稍候') + ' ' + complete + '%...';
|
||||
} else {
|
||||
uploadInfo.value = '';
|
||||
}
|
||||
}
|
||||
|
||||
async function handleSubmit() {
|
||||
try {
|
||||
if (fileList.value.length == 0) {
|
||||
showMessage(t('请选择要导入的数据文件'));
|
||||
return;
|
||||
}
|
||||
setModalProps({ confirmLoading: true });
|
||||
const params = {
|
||||
file: fileList.value[0],
|
||||
};
|
||||
const { data } = await bizTableInfoImportData(params, onUploadProgress);
|
||||
showMessageModal({ content: data.message });
|
||||
setTimeout(closeModal);
|
||||
emit('success');
|
||||
} catch (error: any) {
|
||||
if (error && error.errorFields) {
|
||||
showMessage(error.message || t('common.validateError'));
|
||||
}
|
||||
console.log('error', error);
|
||||
} finally {
|
||||
setModalProps({ confirmLoading: false });
|
||||
}
|
||||
}
|
||||
</script>
|
||||
@@ -1,262 +0,0 @@
|
||||
<!--
|
||||
* Copyright (c) 2013-Now http://jeesite.com All rights reserved.
|
||||
* No deletion without permission, or be held responsible to law.
|
||||
* @author gaoxq
|
||||
-->
|
||||
<template>
|
||||
<div>
|
||||
<BasicTable @register="registerTable">
|
||||
<template #toolbar>
|
||||
<a-button type="default" :loading="loading" @click="handleExport()">
|
||||
<Icon icon="i-ant-design:download-outlined" /> {{ t('导出') }}
|
||||
</a-button>
|
||||
</template>
|
||||
</BasicTable>
|
||||
<FormImport @register="registerImportModal" @success="handleSuccess" />
|
||||
</div>
|
||||
</template>
|
||||
<script lang="ts" setup name="ViewsBizTableInfoList">
|
||||
import { onMounted, ref, unref } from 'vue';
|
||||
import { useI18n } from '@jeesite/core/hooks/web/useI18n';
|
||||
import { useMessage } from '@jeesite/core/hooks/web/useMessage';
|
||||
import { useGlobSetting } from '@jeesite/core/hooks/setting';
|
||||
import { downloadByUrl } from '@jeesite/core/utils/file/download';
|
||||
import { router } from '@jeesite/core/router';
|
||||
import { Icon } from '@jeesite/core/components/Icon';
|
||||
import { BasicTable, BasicColumn, useTable } from '@jeesite/core/components/Table';
|
||||
import { BizTableInfo, bizTableInfoList } from '@jeesite/biz/api/biz/tableInfo';
|
||||
import { bizTableInfoDelete, bizTableInfoListData } from '@jeesite/biz/api/biz/tableInfo';
|
||||
import { useDrawer } from '@jeesite/core/components/Drawer';
|
||||
import { useModal } from '@jeesite/core/components/Modal';
|
||||
import { FormProps } from '@jeesite/core/components/Form';
|
||||
import FormImport from './formImport.vue';
|
||||
|
||||
const { t } = useI18n('biz.tableInfo');
|
||||
const { showMessage } = useMessage();
|
||||
const { meta } = unref(router.currentRoute);
|
||||
const record = ref<BizTableInfo>({} as BizTableInfo);
|
||||
const loading = ref(false);
|
||||
|
||||
const searchForm: FormProps<BizTableInfo> = {
|
||||
baseColProps: { md: 8, lg: 6 },
|
||||
labelWidth: 90,
|
||||
schemas: [
|
||||
{
|
||||
label: t('记录时间起'),
|
||||
field: 'createTime_gte',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('记录时间止'),
|
||||
field: 'createTime_lte',
|
||||
component: 'DatePicker',
|
||||
componentProps: {
|
||||
format: 'YYYY-MM-DD HH:mm',
|
||||
showTime: { format: 'HH:mm' },
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('数据表名称'),
|
||||
field: 'dataName',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('数据表描述'),
|
||||
field: 'tableComment',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('数据库名称'),
|
||||
field: 'dbId',
|
||||
fieldLabel: 'dbName',
|
||||
component: 'ListSelect',
|
||||
componentProps: {
|
||||
selectType: 'bizDbSelect',
|
||||
},
|
||||
},
|
||||
{
|
||||
label: t('数据来源'),
|
||||
field: 'dataSource',
|
||||
component: 'Input',
|
||||
},
|
||||
{
|
||||
label: t('备注信息'),
|
||||
field: 'remarks',
|
||||
component: 'Input',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const tableColumns: BasicColumn<BizTableInfo>[] = [
|
||||
{
|
||||
title: t('记录时间'),
|
||||
dataIndex: 'createTime',
|
||||
key: 'a.create_time',
|
||||
sorter: true,
|
||||
width: 180,
|
||||
align: 'left',
|
||||
fixed: 'left',
|
||||
},
|
||||
{
|
||||
title: t('数据库名称'),
|
||||
dataIndex: 'dbName',
|
||||
key: 'b.db_name',
|
||||
sorter: true,
|
||||
width: 200,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('数据库IP'),
|
||||
dataIndex: 'dbIp',
|
||||
key: 'b.db_ip',
|
||||
sorter: true,
|
||||
width: 200,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('数据表名称'),
|
||||
dataIndex: 'dataName',
|
||||
key: 'a.data_name',
|
||||
sorter: true,
|
||||
width: 200,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('数据表描述'),
|
||||
dataIndex: 'tableComment',
|
||||
key: 'a.table_comment',
|
||||
sorter: true,
|
||||
width: 225,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('数据表大小'),
|
||||
dataIndex: 'tableSize',
|
||||
key: 'a.table_size',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'right',
|
||||
},
|
||||
{
|
||||
title: t('数据来源'),
|
||||
dataIndex: 'dataSource',
|
||||
key: 'a.data_source',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('创建人员'),
|
||||
dataIndex: 'creator',
|
||||
key: 'a.creator',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('记录条数'),
|
||||
dataIndex: 'dataRows',
|
||||
key: 'a.data_rows',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('更新时间'),
|
||||
dataIndex: 'updateTime',
|
||||
key: 'a.update_time',
|
||||
sorter: true,
|
||||
width: 180,
|
||||
align: 'center',
|
||||
},
|
||||
{
|
||||
title: t('备注信息'),
|
||||
dataIndex: 'remarks',
|
||||
key: 'a.remarks',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
{
|
||||
title: t('分区日期'),
|
||||
dataIndex: 'ds',
|
||||
key: 'a.ds',
|
||||
sorter: true,
|
||||
width: 130,
|
||||
align: 'left',
|
||||
},
|
||||
];
|
||||
|
||||
const actionColumn: BasicColumn<BizTableInfo> = {
|
||||
width: 160,
|
||||
align: 'center',
|
||||
actions: (record: BizTableInfo) => [
|
||||
{
|
||||
icon: 'i-ant-design:delete-outlined',
|
||||
color: 'error',
|
||||
title: t('删除'),
|
||||
popConfirm: {
|
||||
title: t('是否确认删除数据信息?'),
|
||||
confirm: handleDelete.bind(this, record),
|
||||
},
|
||||
auth: 'biz:tableInfo:edit',
|
||||
},
|
||||
],
|
||||
};
|
||||
|
||||
const [registerTable, { reload, getForm }] = useTable<BizTableInfo>({
|
||||
api: bizTableInfoListData,
|
||||
beforeFetch: (params) => {
|
||||
return params;
|
||||
},
|
||||
columns: tableColumns,
|
||||
actionColumn: actionColumn,
|
||||
formConfig: searchForm,
|
||||
showTableSetting: true,
|
||||
useSearchForm: true,
|
||||
canResize: true,
|
||||
});
|
||||
|
||||
onMounted(async () => {
|
||||
const res = await bizTableInfoList();
|
||||
record.value = (res.bizTableInfo || {}) as BizTableInfo;
|
||||
await getForm().setFieldsValue(record.value);
|
||||
});
|
||||
|
||||
const [registerDrawer, { openDrawer }] = useDrawer();
|
||||
|
||||
function handleForm(record: Recordable) {
|
||||
openDrawer(true, record);
|
||||
}
|
||||
|
||||
async function handleExport() {
|
||||
loading.value = true;
|
||||
const { ctxAdminPath } = useGlobSetting();
|
||||
await downloadByUrl({
|
||||
url: ctxAdminPath + '/biz/tableInfo/exportData',
|
||||
params: getForm().getFieldsValue(),
|
||||
});
|
||||
loading.value = false;
|
||||
}
|
||||
|
||||
const [registerImportModal, { openModal: importModal }] = useModal();
|
||||
|
||||
function handleImport() {
|
||||
importModal(true, {});
|
||||
}
|
||||
|
||||
async function handleDelete(record: Recordable) {
|
||||
const params = { tableId: record.tableId };
|
||||
const res = await bizTableInfoDelete(params);
|
||||
showMessage(res.message);
|
||||
await handleSuccess(record);
|
||||
}
|
||||
|
||||
async function handleSuccess(record: Recordable) {
|
||||
await reload({ record });
|
||||
}
|
||||
</script>
|
||||
@@ -11,9 +11,6 @@
|
||||
<TabPane key="3" tab="文件管理">
|
||||
<MyfileInfo />
|
||||
</TabPane>
|
||||
<TabPane key="4" tab="字典管理">
|
||||
<TableInfo />
|
||||
</TabPane>
|
||||
</Tabs>
|
||||
</div>
|
||||
</template>
|
||||
@@ -23,7 +20,6 @@
|
||||
import { Tag, Tabs, TabPane } from 'ant-design-vue';
|
||||
import MySchedule from './components/MySchedule.vue';
|
||||
import Calendar from './components/calendar/list.vue';
|
||||
import TableInfo from './components/tableInfo/list.vue';
|
||||
import ItemsInfo from './components/listItem/list.vue';
|
||||
import MyfileInfo from './components/myfiles/index.vue';
|
||||
|
||||
|
||||
Reference in New Issue
Block a user