Commit c32c4755 authored by ccc2wdd's avatar ccc2wdd

元数据

parent 1e9f78db
......@@ -4,7 +4,6 @@
title=""
ref="treeRef"
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="true"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'workSpaceName' }"
......@@ -19,7 +18,7 @@
import { router } from '@/router';
import { TreeData } from '@/views/metadata/metadataData';
defineOptions({ name: 'DeptTree' });
defineOptions({ name: 'DataSourceTree' });
const emit = defineEmits(['select']);
......@@ -69,7 +68,12 @@
return treeData !== '' ? treeData : data;
}
function handleSelect() {}
function handleSelect() {
const keys = getTree().getSelectedKeys();
const node = getTree().getSelectedNode(keys[0]);
// console.log('node', node);
emit('select', node);
}
onMounted(() => {
fetch();
......
import { BasicColumn, FormSchema } from '@/components/Table';
export const columns: BasicColumn[] = [
export const sourceColumns: BasicColumn[] = [
{
title: '知识名称',
title: '名称',
dataIndex: 'name',
slots: { customRender: 'name' },
width: 120,
},
{
title: '描述',
dataIndex: 'remark',
title: '数据源状态',
dataIndex: 'dataSourceStatus',
width: 120,
},
{
title: '文号',
dataIndex: 'fileType',
title: '类型',
dataIndex: 'category',
width: 120,
},
{
title: '权属机构',
dataIndex: 'deptName',
width: 120,
},
{
title: '创建人',
dataIndex: 'createBy',
title: '拥有者',
dataIndex: 'owner',
width: 120,
},
{
......@@ -31,11 +27,6 @@ export const columns: BasicColumn[] = [
dataIndex: 'createDate',
width: 140,
},
{
title: '更新人',
dataIndex: 'updateBy',
width: 120,
},
{
title: '更新时间',
dataIndex: 'updateDate',
......@@ -43,83 +34,148 @@ export const columns: BasicColumn[] = [
},
];
export const searchFormSchema: FormSchema[] = [
export const sourceSearchFormSchema: FormSchema[] = [
{
field: 'name',
label: '知识名称',
label: '',
componentProps: {
placeholder: '工作区名称',
},
component: 'Input',
colProps: { span: 8 },
},
{
field: 'fileType',
label: '文号',
field: 'workSpaceName',
label: '',
componentProps: {
placeholder: '所属工作区',
},
ifShow: false,
component: 'Input',
colProps: { span: 8 },
},
];
// 表头
export const dbColumns: BasicColumn[] = [
{
field: 'createBy',
label: '创建人',
component: 'Input',
colProps: { span: 8 },
title: '名称',
dataIndex: 'dbName',
slots: { customRender: 'dbName' },
width: 200,
},
{
field: 'createDate',
label: '创建开始时间',
component: 'DatePicker',
colProps: { span: 12 },
title: '拥有者',
dataIndex: 'owner',
width: 180,
},
{
field: 'createDate',
label: '创建结束时间',
component: 'DatePicker',
colProps: { span: 12 },
title: '表数量',
dataIndex: 'tableNumber',
width: 150,
},
];
export const formSchema: FormSchema[] = [
export const dbSearchFormSchema: FormSchema[] = [
{
field: 'name',
label: '知识名称',
field: 'dbName',
label: '',
componentProps: {
placeholder: '数据库名称',
},
component: 'Input',
required: true,
colProps: { span: 4 },
},
];
// 表头
export const tbColumns: BasicColumn[] = [
{
field: 'remark',
label: '描述',
component: 'Input',
required: true,
title: '名称',
dataIndex: 'tbName',
slots: { customRender: 'tbName' },
width: 200,
},
{
title: '中文名',
dataIndex: 'cnName',
width: 180,
},
{
title: '大小',
dataIndex: 'size',
width: 180,
},
{
field: 'fileType',
label: '文号',
title: '存储类型',
dataIndex: 'storageType',
width: 180,
},
];
export const tbSearchFormSchema: FormSchema[] = [
{
field: 'tbName',
label: '',
componentProps: {
placeholder: '数据表名称',
},
component: 'Input',
required: true,
colProps: { span: 5 },
},
{
field: 'deptName',
label: '权属机构',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
field: 'storageType',
label: '',
componentProps: {
fieldNames: {
label: 'deptName',
value: 'deptName',
},
getPopupContainer: () => document.body,
// mode: 'multiple',
placeholder: '存储类型',
options: [
{
label: 'orc',
value: 'orc',
},
{
label: 'TORC',
value: 'TORC',
},
{
label: 'DM_InnoDB',
value: 'DM_InnoDB',
},
{
label: 'DM_MyISAM',
value: 'DM_MyISAM',
},
{
label: 'DM_Temporary',
value: 'DM_Temporary',
},
{
label: 'DM_Memory',
value: 'DM_Memory',
},
{
label: 'MyISAM',
value: 'MyISAM',
},
{
label: 'InnoDB',
value: 'InnoDB',
},
],
},
required: true,
component: 'Select',
colProps: { span: 5 },
},
];
export const formSchema: FormSchema[] = [
{
field: 'file',
label: '上传文件',
colProps: { lg: 24, md: 24 },
component: 'Upload',
field: 'name',
label: '',
component: 'Input',
componentProps: {
accept: '.doc,.docx,.pdf,.xls,.xlsx,.ppt,.pptx,.txt,.zip,.rar',
maxSize: 1024 * 1024 * 10,
helpText: '支持jpg、jpeg、png格式,不超过2M,最多可选择10张图片,。',
placeholder: '未完成',
disable: true,
readOnly: true,
},
required: true,
required: false,
},
];
......
<template>
<BasicModal
v-bind="$attrs"
width="80%"
@register="registerDbModal"
:title="title"
:showOkBtn="false"
>
<div class="card-container">
<Tabs v-model:activeKey="page" size="large">
<a-tab-pane key="1" tab="数据表">
<BasicTable @register="registerTable" :title="tableTitle" v-if="page === '1'">
<template #tbName="{ text, record }">
<a @click="handleCreate(record)"> {{ text }}</a>
</template>
</BasicTable>
</a-tab-pane>
<a-tab-pane key="2" tab="视图">
<div v-if="page === '2'"> 视图 </div>
</a-tab-pane>
<a-tab-pane key="3" tab="存储过程">
<div v-if="page === '3'"> 存储过程 </div>
</a-tab-pane>
<a-tab-pane key="4" tab="基本信息">
<div v-if="page === '4'"> 基本信息 </div>
</a-tab-pane>
</Tabs>
</div>
</BasicModal>
<TableModal @register="registerTableModal" />
</template>
<script setup lang="ts">
import { BasicTable, useTable } from '@/components/Table';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import { ref } from 'vue';
import { Tabs } from 'ant-design-vue';
import { useModal, useModalInner } from '@/components/Modal';
import { tbColumns, tbSearchFormSchema } from '@/views/metadata/data';
import { tbData } from '@/views/metadata/metadataData';
import { useMessage } from '@/hooks/web/useMessage';
import TableModal from '@/views/metadata/tableModal.vue';
const { createMessage } = useMessage();
const page = ref('1');
const tableData = ref([]);
const title = ref('');
const tableTitle = ref('');
const params = ref({});
const [registerTableModal, { openModal }] = useModal();
const [registerTable, { reload, getForm }] = useTable({
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据,取出等于params.deptId的数据
var data = [];
data = tableData.value.filter((item) => item.parentId !== 0);
return { ...response, data: data };
},
columns: tbColumns,
formConfig: {
labelWidth: 120,
schemas: tbSearchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
handleSearchInfoFn(info) {
tableData.value = tbData.filter(
(item) =>
(info.tbName === undefined || item.tbName.includes(info.tbName)) &&
(info.storageType === undefined || item.storageType.includes(info.storageType)) &&
item.dbName === tableTitle.value,
);
// console.log('tableData', tableData.value);
// console.log('info', info);
return info;
},
});
const [registerDbModal, { closeModal }] = useModalInner(async (data) => {
title.value = data.workSpaceName;
tableTitle.value = data.dbName;
tableData.value = tbData.filter(
(item) =>
item.dbName === tableTitle.value,
);
await reload();
});
function handleNew() {
createMessage.warning('暂未完成,敬请期待');
}
function handleCreate(record) {
// console.log(record);
openModal(true, {
...record,
});
}
</script>
<style scoped lang="less"></style>
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { computed, ref, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { getDeptList } from '@/api/system/dept/dept';
import { UserDetailApi } from '@/api/system/user/user';
import { importFormSchema } from '@/views/knowledgeBase/data';
defineOptions({ name: 'AccountModal' });
const isUpdate = ref(true);
const rowId = ref('');
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: importFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
const treeData = await getDeptList();
const treeList = handleTree(treeData.data, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'username',
show: !unref(isUpdate),
},
{
field: 'password',
show: !unref(isUpdate),
},
{
field: 'flag',
show: !unref(isUpdate),
},
{
field: 'deptId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => (!unref(isUpdate) ? '导入' : '导出'));
function handleTree(data, id, parentId, children, rootId) {
id = id || 'id';
parentId = parentId || 'parentId';
children = children || 'children';
rootId =
rootId ||
Math.min.apply(
Math,
data.map((item) => {
return item[parentId];
}),
) ||
0;
// 对源数据深度克隆
const cloneData = JSON.parse(JSON.stringify(data));
// 循环所有项
const treeData = cloneData.filter((father) => {
const branchArr = cloneData.filter((child) => {
// 返回每一项的子级数组
return father[id] === child[parentId];
});
branchArr.length > 0 ? (father.children = branchArr) : '';
// 返回第一层
return father[parentId] === rootId;
});
return treeData !== '' ? treeData : data;
}
async function handleSubmit() {
closeModal();
}
</script>
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<GroupTree class="w-1/5 xl:w-1/8" @select="handleSelect" />
<BasicTable @register="registerTable" class="w-4/5 xl:w-7/8" :searchInfo="searchInfo">
<GroupTree class="w-1/3 xl:w-2/9" @select="onNodeSelect" />
<BasicTable @register="registerTable" class="w-2/3 xl:w-7/9" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleDeleteIds">删除</a-button>
<a-button type="primary" @click="download">下载</a-button>
<a-button type="primary" @click="handleImport">导入</a-button>
<a-button type="primary" @click="handleCreate">新建文件夹</a-button>
<a-button type="primary" @click="handleCreate">新建文件</a-button>
<a-button type="primary" @click="handleManage">存储管理</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:contract-line',
label: '',
onClick: handleView.bind(null, record),
},
{
icon: 'clarity:download-line',
label: '',
onClick: download.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
},
]"
/>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="error" v-if="record.dataSourceStatus === '0'">数据待采集</Tag>
</template>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="warning" v-if="record.dataSourceStatus === '1'">数据采集中</Tag>
</template>
<template v-if="column.key === 'dataSourceStatus'">
<Tag color="success" v-if="record.dataSourceStatus === '2'">采集已完成</Tag>
</template>
</template>
<template #name="{ text, record }">
<a @click="handleCreate(record)"> {{ text }}</a>
</template>
</BasicTable>
<knowledgeModal @register="registerModal" @success="handleSuccess" />
<importModal @register="registerImport" @success="handleSuccess" />
<MetaDataModal @register="registerModal" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { Tag } from 'ant-design-vue';
import { BasicTable, useTable } from '@/components/Table';
import { PageWrapper } from '@/components/Page';
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import knowledgeModal from '@/views/knowledgeBase/knowledgeModal.vue';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { columns, searchFormSchema } from '@/views/knowledgeBase/data';
import GroupTree from '@/views/knowledgeBase/GroupTree.vue';
import { knowledgeData } from '@/views/knowledgeBase/knowledgeBaseData';
import importModal from '@/views/knowledgeBase/improtModal.vue';
import { sourceColumns, sourceSearchFormSchema } from '@/views/metadata/data';
import GroupTree from '@/views/metadata/GroupTree.vue';
import { metadataData } from '@/views/metadata/metadataData';
import MetaDataModal from '@/views/metadata/metaDataModal.vue';
defineOptions({ name: 'KnowledgeBase' });
defineOptions({ name: 'Metadata' });
const title = ref('admin-个人工作区');
const { createMessage } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const selectedNode = ref(null);
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: '知识库',
title: title,
api: async () => {
const response = {
pageNu: '1',
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
......@@ -82,55 +65,54 @@
return { ...response, data: data };
},
rowKey: 'businessId',
rowSelection: true,
striped: false,
columns,
columns: sourceColumns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
schemas: sourceSearchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.deptId = '';
},
resetFunc: () => {},
},
useSearchForm: true,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
tableData.value = metadataData.filter(
(item) =>
(info.name === undefined || item.name.includes(info.name)) &&
(info.workSpaceName === undefined ||
info.workSpaceName === '数据库对象资源' ||
item.workSpaceName.includes(info.workSpaceName)),
);
console.log('tableData', tableData.value);
console.log('info', info);
return info;
},
actionColumn: {
width: 140,
title: '操作',
dataIndex: 'action',
},
});
/** 新增按钮*/
function handleCreate() {
function handleCreate(record) {
// console.log(record);
openModal(true, {
isUpdate: false,
...record,
});
}
function handleImport() {
openImportModal(true, {
isUpdate: false,
// 选中节点
async function onNodeSelect(node: any) {
selectedNode.value = node;
title.value = node.workSpaceName;
await getForm().setFieldsValue({
workSpaceName: title.value,
});
}
/** 下载按钮*/
function download() {
createMessage.success('下载成功!');
}
/** 批量删除按钮*/
function handleDeleteIds() {
createMessage.success('批量删除成功!');
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
reload();
const info = await getForm().getFieldsValue();
tableData.value = metadataData.filter(
(item) =>
(info.name === undefined || item.name.includes(info.name)) &&
(info.workSpaceName === undefined ||
info.workSpaceName === '数据库对象资源' ||
item.workSpaceName.includes(info.workSpaceName)),
);
await reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
......@@ -138,26 +120,17 @@
// 演示不刷新表格直接更新内部数据。
// 注意:updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
// console.log(result);
reload();
} else {
reload();
}
}
function handleView(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
disable: true,
});
}
/** 部门树的select*/
function handleSelect(deptId = '') {
searchInfo.deptId = deptId;
reload();
function handleManage() {
createMessage.warning('暂未完成,敬请期待');
}
onMounted(() => {
tableData.value = knowledgeData;
tableData.value = metadataData;
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
......@@ -175,8 +148,8 @@
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
console.log('path', from.path);
console.log('params', params);
// console.log('path', from.path);
// console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
......@@ -185,4 +158,46 @@
});
next(); // 允许导航
});
function fetchChartData(timeRange) {
// 假设这是从服务器获取数据的方法
this.databaseChartOption = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {},
series: [
{
name: '直接访问',
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260],
},
],
};
this.renderChart('databaseChart');
}
function fetchFieldChartData(timeRange) {
// 假设这是从服务器获取数据的方法
this.fieldChartOption = {
xAxis: {
data: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
},
yAxis: {},
series: [
{
name: '直接访问',
type: 'line',
data: [150, 230, 224, 218, 135, 147, 260],
},
],
};
this.renderChart('fieldChart');
}
function renderChart(chartId) {
let chartDom = document.getElementById(chartId);
let myChart = echarts.init(chartDom);
myChart.setOption(this[`${chartId}Option`]);
}
</script>
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
<BasicModal v-bind="$attrs" width="80%" @register="register" :title="title" :showOkBtn="false">
<div class="card-container">
<Tabs v-model:activeKey="page" size="large">
<a-tab-pane key="1" tab="数据库">
<BasicTable @register="registerTable" :title="tableTitle" v-if="page === '1'">
<template #toolbar>
<a-button type="primary" @click="handleNew">新建数据库</a-button>
</template>
<template #dbName="{ text, record }">
<a @click="handleCreate(record)"> {{ text }}</a>
</template>
</BasicTable>
</a-tab-pane>
<a-tab-pane key="2" tab="基本信息">
<div v-if="page === '2'"> 基本信息 </div>
</a-tab-pane>
</Tabs>
</div>
</BasicModal>
<DatabaseModal @register="registerDatabaseModal" />
</template>
<script lang="ts" setup>
import { ref, computed, unref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { getDeptList } from '@/api/system/dept/dept';
<script setup lang="ts">
import { BasicTable, useTable } from '@/components/Table';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import { ref } from 'vue';
import { Tabs } from 'ant-design-vue';
import { useModal, useModalInner } from '@/components/Modal';
import { dbColumns, dbSearchFormSchema } from '@/views/metadata/data';
import { dbData } from '@/views/metadata/metadataData';
import { useMessage } from '@/hooks/web/useMessage';
import { formSchema } from '@/views/knowledgeBase/data';
import { knowledgeData } from '@/views/knowledgeBase/knowledgeBaseData';
import DatabaseModal from '@/views/metadata/databaseModal.vue';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const rowId = ref('');
const page = ref('1');
const tableData = ref([]);
//获取接口数据并放在下拉框里(这里是打开了一个弹框)
//初始化表单
const [registerForm, { setFieldsValue, resetFields }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: formSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
const title = ref('');
const tableTitle = ref('');
const params = ref({});
const [registerDatabaseModal, { openModal }] = useModal();
const [registerTable, { reload, getForm }] = useTable({
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据,取出等于params.deptId的数据
var data = [];
data = tableData.value.filter((item) => item.parentId !== 0);
return { ...response, data: data };
},
columns: dbColumns,
formConfig: {
labelWidth: 120,
schemas: dbSearchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
handleSearchInfoFn(info) {
// console.log('tableData1', tableData.value);
tableData.value = dbData.filter(
(item) =>
(info.dbName === undefined || item.dbName.includes(info.dbName)) &&
item.workSpaceName === tableTitle.value,
);
// console.log('tableData2', tableData.value);
// console.log('info', info);
return info;
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 通过id获取行详情信息
tableData.value = knowledgeData;
var userData = [];
userData = tableData.value.filter((item) => item.businessId === rowId.value);
setFieldsValue(userData[0]);
}
const [register, { closeModal }] = useModalInner(async (data) => {
title.value = data.workSpaceName;
tableTitle.value = data.name;
tableData.value = dbData.filter((item) => item.workSpaceName === tableTitle.value);
await reload();
});
function handleNew() {
createMessage.warning('暂未完成,敬请期待');
}
const getTitle = computed(() => (!unref(isUpdate) ? '新增文件' : '编辑文件'));
async function handleSubmit() {
closeModal();
function handleCreate(record) {
// console.log(record);
openModal(true, {
...record,
});
}
</script>
<style scoped lang="less"></style>
......@@ -57,58 +57,324 @@ export const TreeData: any[] = [
},
];
export const knowledgeData: any[] = [
export const metadataData: any[] = [
{
delFlag: '0',
flag: '1',
dataSourceStatus: '1',
businessId: 309,
name: '知识验收文件',
remark: '产品验收用',
fileType: 'test',
name: 'mysql24',
category: 'MySQL',
owner: '张三',
workSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
createBy: 'admin',
deptName: '财务部门',
updateDate: '2024-10-24 10:04:04',
updateBy: 'admin',
},
{
delFlag: '0',
flag: '1',
dataSourceStatus: '2',
businessId: 310,
name: '知识库文件',
remark: '知识库文件',
fileType: 'test',
name: 'mysql11',
category: 'MySQL',
owner: '张三',
workSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
createBy: 'admin',
deptName: '财务部门',
updateDate: '2024-10-24 10:04:04',
updateBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 317,
name: '知识库文件',
remark: '知识库文件',
fileType: 'test',
dataSourceStatus: '0',
businessId: 311,
name: 'Gbase8',
category: 'Gbase',
owner: '管理员',
workSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
createBy: 'admin',
deptName: '研发部门',
updateDate: '2024-10-24 10:04:04',
updateBy: 'admin',
},
{
delFlag: '0',
flag: '1',
businessId: 318,
name: '知识库文件',
remark: '知识库文件',
fileType: 'test',
dataSourceStatus: '2',
businessId: 312,
name: '达梦',
category: '达梦金仓',
owner: '李四',
workSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
];
export const dbData: any[] = [
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 30901,
dbName: 'connector_foundation1',
owner: '张三',
tableNumber: '15',
category: 'MySQL',
workSpaceName: 'mysql24',
parentWorkSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 30902,
dbName: 'connector_test_foundation1',
owner: '张三',
tableNumber: '2',
category: 'MySQL',
workSpaceName: 'mysql24',
parentWorkSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 31101,
dbName: 'db1',
owner: '李四',
tableNumber: '15',
category: '达梦金仓',
workSpaceName: '达梦',
parentWorkSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 31102,
dbName: 'db2',
owner: '李四',
tableNumber: '2',
category: '达梦金仓',
workSpaceName: '达梦',
parentWorkSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 31001,
dbName: 'system',
owner: '管理员',
tableNumber: '15',
category: 'Gbase',
workSpaceName: 'Gbase8',
parentWorkSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 31002,
dbName: 'info',
owner: '管理员',
tableNumber: '2',
category: 'Gbase',
workSpaceName: 'Gbase8',
parentWorkSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
];
export const tbData: any[] = [
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3090101,
dbName: 'connector_foundation1',
tbName: 'tb_1',
cnName: '表1',
size: '20K',
storageType: 'TORC',
owner: '张三',
category: 'MySQL',
workSpaceName: 'mysql24',
parentWorkSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3090102,
dbName: 'connector_foundation1',
tbName: 'tb_2',
cnName: '表2',
size: '254K',
storageType: 'ORC',
owner: '张三',
category: 'MySQL',
workSpaceName: 'mysql24',
parentWorkSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3090201,
dbName: 'connector_test_foundation1',
tbName: 'user_tb',
cnName: '用户表',
size: '2210K',
storageType: 'orc',
owner: '张三',
category: 'MySQL',
workSpaceName: 'mysql24',
parentWorkSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3090202,
dbName: 'connector_test_foundation1',
tbName: 'root_tb',
cnName: '权限表',
size: '15K',
storageType: 'TORC',
owner: '张三',
category: 'MySQL',
workSpaceName: 'mysql24',
parentWorkSpaceName: 'admin-个人工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3110101,
dbName: 'db1',
tbName: 'tb_01',
cnName: '表1',
size: '1.25M',
storageType: 'DM_InnoDB',
owner: '李四',
category: '达梦金仓',
workSpaceName: '达梦',
parentWorkSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3110102,
dbName: 'db1',
tbName: 'tb_02',
cnName: '表2',
size: '2K',
storageType: 'DM_MyISAM',
owner: '李四',
category: '达梦金仓',
workSpaceName: '达梦',
parentWorkSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3110201,
dbName: 'db2',
tbName: 'abcd',
cnName: '-',
size: '20K',
storageType: 'DM_Temporary',
owner: '李四',
category: '达梦金仓',
workSpaceName: '达梦',
parentWorkSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3110202,
dbName: 'db2',
tbName: 'efgeh',
cnName: '-',
size: '20K',
storageType: 'DM_Memory',
owner: '李四',
category: '达梦金仓',
workSpaceName: '达梦',
parentWorkSpaceName: '共享工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3100101,
dbName: 'system',
tbName: 'sys_menu',
cnName: '菜单表',
size: '20K',
storageType: 'MyISAM',
owner: '管理员',
category: 'Gbase',
workSpaceName: 'Gbase8',
parentWorkSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3100102,
dbName: 'system',
tbName: 'sys_dept',
cnName: '部门表',
size: '120K',
storageType: 'InnoDB',
owner: '管理员',
category: 'Gbase',
workSpaceName: 'Gbase8',
parentWorkSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3100201,
dbName: 'info',
tbName: 'user_info',
cnName: '用户详情',
size: '25M',
storageType: 'MyISAM',
owner: '管理员',
category: 'Gbase',
workSpaceName: 'Gbase8',
parentWorkSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
},
{
delFlag: '0',
dataSourceStatus: '1',
businessId: 3100202,
dbName: 'info',
tbName: 'custom_info',
cnName: '客户详情',
size: '12MB',
storageType: 'InnoDB',
owner: '管理员',
category: 'Gbase',
workSpaceName: 'Gbase8',
parentWorkSpaceName: '高级工作区',
createDate: '2024-10-24 10:04:04',
createBy: 'admin',
deptName: '研发部门',
updateDate: '2024-10-24 10:04:04',
updateBy: 'admin',
},
];
......
<template>
<BasicModal
v-bind="$attrs"
width="80%"
@register="registerDbModal"
:title="title"
:showOkBtn="false"
>
<div>
<div style="display: flex; justify-content: flex-end">
<a-button style="margin-right: 5px" type="primary" @click="handleNew">刷新</a-button>
<a-button style="margin-right: 5px" type="primary" @click="handleNew">导出</a-button>
<a-button style="margin-right: 5px" type="primary" @click="handleNew">血缘分析</a-button>
<a-button style="margin-right: 5px" type="primary" @click="handleNew">版本管理</a-button>
</div>
<Tabs v-model:activeKey="page" size="large">
<a-tab-pane key="1" tab="概览">
<BasicTable @register="registerTable" :title="tableTitle" v-if="page === '1'" />
</a-tab-pane>
<a-tab-pane key="2" tab="列信息">
<div v-if="page === '2'"> 列信息 </div>
</a-tab-pane>
<a-tab-pane key="3" tab="采样数据">
<div v-if="page === '3'"> 采样数据 </div>
</a-tab-pane>
<a-tab-pane key="4" tab="关联关系">
<div v-if="page === '4'"> 关联关系 </div>
</a-tab-pane>
<a-tab-pane key="5" tab="关系表">
<div v-if="page === '5'"> 关系表 </div>
</a-tab-pane>
<a-tab-pane key="6" tab="关联度分析">
<div v-if="page === '6'"> 关联度分析 </div>
</a-tab-pane>
<a-tab-pane key="7" tab="数据特征">
<div v-if="page === '7'"> 数据特征 </div>
</a-tab-pane>
<a-tab-pane key="8" tab="物理模映射">
<div v-if="page === '8'"> 物理模映射 </div>
</a-tab-pane>
</Tabs>
</div>
</BasicModal>
</template>
<script setup lang="ts">
import { BasicTable, useTable } from '@/components/Table';
import BasicModal from '@/components/Modal/src/BasicModal.vue';
import { ref } from 'vue';
import { Tabs } from 'ant-design-vue';
import { useModalInner } from '@/components/Modal';
import { dbColumns, dbSearchFormSchema } from '@/views/metadata/data';
import { dbData } from '@/views/metadata/metadataData';
import { useMessage } from '@/hooks/web/useMessage';
const { createMessage } = useMessage();
const page = ref('1');
const tableData = ref([]);
const title = ref('');
const tableTitle = ref('');
const params = ref({});
const [registerTable, { reload, getForm }] = useTable({
api: async () => {
const response = {
pageNum: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据,取出等于params.deptId的数据
var data = [];
data = tableData.value.filter((item) => item.parentId !== 0);
return { ...response, data: data };
},
columns: dbColumns,
formConfig: {
labelWidth: 120,
schemas: dbSearchFormSchema,
autoSubmitOnEnter: true,
},
useSearchForm: true,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
handleSearchInfoFn(info) {
tableData.value = dbData.filter(
(item) => info.dbName === undefined || item.dbName.includes(info.dbName),
);
// console.log('tableData', tableData.value);
// console.log('info', info);
return info;
},
});
const [registerDbModal, { closeModal }] = useModalInner(async (data) => {
title.value = data.workSpaceName;
tableTitle.value = data.name;
tableData.value = dbData;
await reload();
});
function handleNew() {
createMessage.warning('暂未完成,敬请期待');
}
</script>
<style scoped lang="less"></style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment