Skip to content

B
bigDataSystem
Commit 0f40d8dc authored by 罗林杰's avatar 罗林杰
Browse files
Options

修改血缘

parent b3453600
Hide whitespace changes
Inline Side-by-side
Showing with 538 additions and 175 deletions
src/views/kinship/kinshipAnalysis/storageManagementModal.vue
View file @ 0f40d8dc
......@@ -40,13 +40,13 @@
confirm: handleDelete.bind(null),
},
},
{
//失败日志
icon: 'clarity:contract-line',
label: '',
ifShow: record.status === '0',
onClick: handleDetail.bind(null),
},
// {
// //失败日志
// icon: 'clarity:contract-line',
// label: '',
// ifShow: record.status === '0',
// onClick: handleDetail.bind(null),
// },
]"
/>
</template>
......@@ -57,7 +57,7 @@
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import {BasicModal, useModal, useModalInner} from '@/components/Modal';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { storageManagementColumns, storageManagementFormSchema } from './data';
......
src/views/kinship/kinshipOperations/data.ts 0 → 100644
View file @ 0f40d8dc
import { BasicColumn, FormSchema } from '@/components/Table';
import { DescItem } from '@/components/Description';
export const columns: BasicColumn[] = [
{
title: '血缘插件名称',
dataIndex: 'name',
width: 120,
},
{
title: '插件状态',
dataIndex: 'status',
width: 120,
},
];
export const modEditColumns: BasicColumn[] = [
{
title: '连接名称',
dataIndex: 'name',
width: 80,
},
{
title: '连接类型',
dataIndex: 'type',
width: 80,
},
{
title: '连接字符串',
dataIndex: 'filed',
width: 120,
},
];
export const ruleSchema: FormSchema[] = [
{
field: 'type',
label: '过滤类型',
component: 'RadioGroup',
colProps: { lg: 22 },
componentProps: {
options: [
{ label: '黑名单', value: '0' },
{ label: '白名单', value: '1' },
],
},
defaultValue: '0',
required: true,
},
{
field: 'baseRule',
label: '库规则',
component: 'InputTextArea',
colProps: { lg: 22 },
defaultValue: 'system|discover|tmp',
required: true,
},
{
field: 'tableRule',
label: '表规则',
component: 'InputTextArea',
colProps: { lg: 22 },
defaultValue:
'tdt_,TDT_VIEW,baymax_tmp_,TDT_ROCK_VIEW_,TDT_ROCK_TABLE_,TDTTABLEEXTERNAL,TDTTABLE_PERSISTENT',
required: true,
},
{
field: 'rule',
label: '规则检验',
component: 'Input',
colProps: { lg: 22 },
},
];
export const detailHookColumns: BasicColumn[] = [
{
title: '实例地址',
dataIndex: 'name',
width: 120,
},
{
title: '生产者分区ID',
dataIndex: 'code',
width: 120,
},
{
title: '生成者注释',
dataIndex: 'remark',
width: 120,
},
{
title: '实例状态',
dataIndex: 'status',
width: 120,
},
];
export const refundSchema: DescItem[] = [
{
field: 'type',
label: '认证类型',
},
{
field: 'name',
label: '当前消费组名称',
},
{
field: 'code',
label: '消费者分组ID',
},
{
field: 'theme',
label: '消费者主体',
},
];
export const KafkaColumns: BasicColumn[] = [
{
title: 'Partition Number',
dataIndex: 'PartitionNumber',
width: 120,
},
{
title: 'LastEndOffset',
dataIndex: 'LastEndOffset',
width: 120,
},
{
title: 'CurrentOffset',
dataIndex: 'CurrentOffset',
width: 120,
},
{
title: 'Lag',
dataIndex: 'Lag',
width: 120,
},
];
src/views/kinship/kinshipOperations/detailModal.vue 0 → 100644
View file @ 0f40d8dc
<template>
<BasicModal
width="60%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<Description size="middle" :bordered="false" title="Hook插件" />
<BasicTable @register="registerTable">
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<Tag color="success" v-if="record.status === '1'">up</Tag>
</template>
</template>
</BasicTable>
<Description
size="middle"
:bordered="false"
title="Kafka服务"
:column="2"
:data="refundData"
:schema="refundSchema"
/>
<BasicTable @register="registerKafkaTable" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, useTable } from '@/components/Table';
import Description from '@/components/Description/src/Description.vue';
import {
detailHookColumns,
KafkaColumns,
refundSchema,
} from '@/views/kinship/kinshipOperations/data';
import {
detailHookData,
KafkaData,
refundData,
} from '@/views/kinship/kinshipOperations/kinshipOperationsData';
import { Tag } from 'ant-design-vue';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerTable, { reload }] = 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;
return { ...response, data: data };
},
pagination: false,
columns: detailHookColumns,
useSearchForm: false,
showTableSetting: false,
bordered: false,
showIndexColumn: false,
scroll: { y: 300 },
actionColumn: {
width: '120px',
title: '操作',
dataIndex: 'action',
slots: { customRender: 'action' },
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
const [registerKafkaTable] = useTable({
dataSource: KafkaData,
columns: KafkaColumns,
pagination: false,
showIndexColumn: false,
scroll: { y: 300 },
});
async function handleSubmit() {
closeModal();
}
onMounted(() => {
tableData.value = detailHookData;
});
</script>
src/views/kinship/kinshipOperations/index.vue
View file @ 0f40d8dc
<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">
<PageWrapper title="血缘运维" contentFullHeight fixedHeight contentClass="flex">
<BasicTable @register="registerTable" :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="handleAdd">新建文件夹</a-button>
<a-button type="primary" @click="handleCreate">新建文件</a-button>
<a-button type="primary" @click="refresh">刷新</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'status'">
<Tag color="error" v-if="record.status === '0'">错误</Tag>
</template>
<template v-if="column.key === 'status'">
<Tag color="success" v-if="record.status === '1'">健康</Tag>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:contract-line',
label: '',
onClick: handleView.bind(null, record),
onClick: handleDetail.bind(null),
},
{
icon: 'clarity:download-line',
icon: 'clarity:link-line',
label: '',
onClick: download.bind(null, record),
onClick: modEdit.bind(null),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
icon: 'clarity:usb-line',
label: '',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null, record),
},
onClick: handleDelete.bind(null),
},
]"
/>
</template>
</template>
</BasicTable>
<knowledgeModal @register="registerModal" @success="handleSuccess" />
<importModal @register="registerImport" @success="handleSuccess" />
<addModal @register="registerAdd" />
<modEditModal @register="registerModal" />
<ruleModal @register="registerRuleModal" />
<detailModal @register="registerDetailModal" />
</PageWrapper>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { reactive } from 'vue';
import { BasicTable, useTable, TableAction } 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 addModal from '@/views/knowledgeBase/addModal.vue';
import { columns } from './data';
import { Tag } from 'ant-design-vue';
import { Data } from '@/views/kinship/kinshipOperations/kinshipOperationsData';
import modEditModal from './modEditModal.vue';
import ruleModal from './ruleModal.vue';
import detailModal from './detailModal.vue';
defineOptions({ name: 'KnowledgeBase' });
const { createMessage, createConfirm } = useMessage();
const filterStore = useFilterStore();
const route = useRoute();
const [registerModal, { openModal }] = useModal();
const [registerImport, { openModal: openImportModal }] = useModal();
const [registerAdd, { openModal: openAddModal }] = useModal();
const [registerRuleModal, { openModal: openRuleModal }] = useModal();
const [registerDetailModal, { openModal: openDetailModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const [registerTable, { reload, updateTableDataRecord, getSearchInfo, getForm }] = useTable({
title: '知识库',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
//过滤data中的数据，取出等于params.deptId的数据
let data = [];
if (params.fileTypeId == 100) {
data = tableData.value.filter((item) => item.parentId !== 0);
} else if (params.fileTypeId == 101 || params.fileTypeId == 111) {
data = tableData.value.filter((item) => item.fileTypeId == 101);
} else if (params.fileTypeId == 107 || params.fileTypeId == 112) {
data = tableData.value.filter((item) => item.fileTypeId == 107);
} else if (params.fileTypeId == 203 || params.fileTypeId == 113) {
data = tableData.value.filter((item) => item.fileTypeId == '');
} else {
data = tableData.value.filter((item) => item.parentId !== 0);
}
return { ...response, data: data };
},
rowKey: 'businessId',
rowSelection: true,
const [registerTable, { reload }] = useTable({
dataSource: Data,
striped: false,
columns,
formConfig: {
labelWidth: 120,
schemas: searchFormSchema,
autoSubmitOnEnter: true,
resetFunc: () => {
searchInfo.fileTypeId = '';
},
},
useSearchForm: true,
showIndexColumn: false,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
console.log('handleSearchInfoFn', info);
return info;
},
actionColumn: {
width: 140,
width: 120,
title: '操作',
dataIndex: 'action',
},
});
/** 新增按钮*/
function handleCreate() {
function modEdit() {
openModal(true, {
isUpdate: false,
title: '插件配置',
});
}
function handleAdd() {
openAddModal(true, {
isUpdate: false,
});
}
function handleImport() {
openImportModal(true, {
isUpdate: false,
});
function refresh() {
createMessage.success('刷新成功!');
}
/** 下载按钮*/
function download() {
createConfirm({
iconType: 'warning',
title: '确认下载',
content: '确认下载？',
onOk() {
createMessage.success('下载成功!');
},
function handleDelete() {
openRuleModal(true, {
title: '血缘采集规则配置',
});
}
/** 批量删除按钮*/
function handleDeleteIds() {
createConfirm({
iconType: 'warning',
title: '确认删除',
content: '确认批量删除选中数据吗？',
onOk() {
createMessage.success('批量删除成功!');
},
function handleDetail() {
openDetailModal(true, {
title: '血缘插件详情',
});
}
/** 重置密码弹窗确定按钮*/
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
reload();
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
// 演示不刷新表格直接更新内部数据。
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
const result = updateTableDataRecord(values.id, values);
console.log(result);
reload();
} else {
reload();
}
}
function handleView(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
disable: true,
});
}
/** 部门树的select*/
function handleSelect(workSpaceName = '') {
searchInfo.fileTypeId = workSpaceName;
reload();
}
onMounted(() => {
tableData.value = knowledgeData;
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
console.log('11111111111111111111111111111', params);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.deptId = params.deptId;
}
}
});
onBeforeRouteLeave((to, from, next) => {
const params = Object.assign({}, getSearchInfo(), getForm().getFieldsValue());
console.log('path', from.path);
console.log('params', params);
filterStore.setSearchParams({
path: from.path,
param: {
...params,
},
});
next(); // 允许导航
});
</script>
src/views/kinship/kinshipOperations/kinshipOperationsData.ts 0 → 100644
View file @ 0f40d8dc
export const Data: any[] = [
{
name: 'quark1',
status: '1',
},
{
name: 'quark2',
status: '1',
},
{
name: 'quark3',
status: '1',
},
{
name: 'quark4',
status: '1',
},
{
name: 'quark5',
status: '0',
},
];
export const modEditData: any[] = [
{
name: 'quark1',
type: 'mysql',
filed: 'mysql://root:123456@127.0.0.1:3306/quark',
},
{
name: 'quark2',
type: 'mysql',
filed: 'mysql://root:123456@127.0.0.1:3306/quark',
},
{
name: 'quark3',
type: 'mysql',
filed: 'mysql://root:123456@127.0.0.1:3306/quark',
},
];
export const detailHookData: any[] = [
{
name: 'Instance-001',
code: 'Partition-10',
remark: '用于处理日常任务',
status: '1',
},
{
name: 'Instance-002',
code: 'Partition-15',
remark: '仅供测试使用',
status: '1',
},
{
name: 'Instance-003',
code: 'Partition-20',
remark: '处理高优先级任务',
status: '1',
},
{
name: 'Instance-004',
code: 'Partition-25',
remark: '备用实例',
status: '1',
},
];
export const refundData = {
type: 'NONE',
name: 'catalog_hook_group_catalog12',
code: '4',
theme: 'CATALOG_HOOK',
};
export const KafkaData: any[] = [
{
PartitionNumber: '2',
LastEndOffset: '404792',
CurrentOffset: '404792',
Lag: '0',
},
{
PartitionNumber: '3',
LastEndOffset: '3',
CurrentOffset: '3',
Lag: '0',
},
{
PartitionNumber: '0',
LastEndOffset: '55',
CurrentOffset: '55',
Lag: '0',
},
{
PartitionNumber: '1',
LastEndOffset: '5',
CurrentOffset: '5',
Lag: '0',
},
];
src/views/kinship/kinshipOperations/modEditModal.vue 0 → 100644
View file @ 0f40d8dc
<template>
<BasicModal
width="50%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<Alert
show-icon
message="维护血缘插件与数据连接的映射关系，标识插件中的血缘在以下连接所关联的数据源中展示。"
/>
<BasicTable @register="registerTable">
<template #toolbar>
<a-button type="primary" @click="handleDeleteIds">新增映射</a-button>
</template>
<template #bodyCell="{ column }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'ant-design:delete-outlined',
color: 'error',
label: '',
popConfirm: {
title: '是否确认删除',
placement: 'left',
confirm: handleDelete.bind(null),
},
},
]"
/>
</template>
</template>
</BasicTable>
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { BasicTable, TableAction, useTable } from '@/components/Table';
import { Alert } from 'ant-design-vue';
import { modEditColumns } from '@/views/kinship/kinshipOperations/data';
import { modEditData } from '@/views/kinship/kinshipOperations/kinshipOperationsData';
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerTable, { reload }] = 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;
return { ...response, data: data };
},
pagination: false,
columns: modEditColumns,
useSearchForm: false,
showTableSetting: false,
bordered: true,
showIndexColumn: false,
actionColumn: {
width: 40,
title: '操作',
dataIndex: 'action',
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await reload();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
}
/** 批量删除按钮*/
function handleDeleteIds() {
createMessage.success('刷新成功!');
}
/** 删除按钮*/
function handleDelete() {
createMessage.success('删除成功!');
reload();
}
onMounted(() => {
tableData.value = modEditData;
});
</script>
src/views/kinship/kinshipOperations/ruleModal.vue 0 → 100644
View file @ 0f40d8dc
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="title"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { onMounted, ref } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import { recommendData } from '@/views/metadata/metadataData';
import { BasicForm, useForm } from '@/components/Form';
import {ruleSchema} from "@/views/kinship/kinshipOperations/data";
defineOptions({ name: 'KnowledgeModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const title = ref();
const tableData = ref([]);
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: ruleSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
title.value = data.title;
});
async function handleSubmit() {
closeModal();
createMessage.success('提交成功');
await resetFields();
}
onMounted(() => {
tableData.value = recommendData;
});
</script>
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