Skip to content

B
bigDataSystem
Commit 1a1266a3 authored by baiyinhao's avatar baiyinhao
Browse files
Options

修改架构规划

parent 40a105a4
Hide whitespace changes
Inline Side-by-side
Showing with 1872 additions and 94 deletions
src/views/ArchitecturePlan/dataTiering/index.vue
View file @ 1a1266a3
......@@ -6,6 +6,7 @@
<!-- <a-button type="primary" @click="handleCreateModel">导出</a-button>
<a-button type="primary" @click="handleCreateModel">导入</a-button>
<a-button type="primary" @click="handleCreateFolder">新建文件夹</a-button> -->
<a-button type="error" @click="handleDeleteBatch">删除所选</a-button>
<a-button type="primary" @click="handleCreateFile">新建分层</a-button>
</template>
<template #bodyCell="{ column, record }">
......@@ -60,6 +61,7 @@
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { modelData, TreeData } from './mock';
import { Modal } from 'ant-design-vue';
// import ModelTree from '@/views/dataWarehousePlanning/physicalModel/ModelTree.vue';
defineOptions({ name: 'AccountManagement' });
......@@ -163,7 +165,25 @@
createMessage.success('删除成功!');
reload();
}
/**批量删除*/
function handleDeleteBatch() {
Modal.confirm({
title: '确认删除',
content: '是否删除选中的系统?',
onOk: () => {
const rowSelection = getRowSelection().selectedRowKeys;
for (let i = 0; i < rowSelection.length; i++) {
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
1,
);
}
createMessage.success('删除成功!');
rowSelection.length = 0;
reload();
},
});
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
if (isUpdate) {
......
src/views/ArchitecturePlan/dataTiering/mock.ts
View file @ 1a1266a3
......@@ -10,9 +10,9 @@ type CheckedType = boolean | string | number;
export const TreeData: any[] = [
{
tireName: '分层1',
themeEngName: 'theme1',
description: '描述1',
tireName: '源系统层',
themeEngName: 'SRC',
description: '源系统归集层,即用于统一管理还未抽取数据到贴源层的系统',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
......@@ -20,9 +20,10 @@ export const TreeData: any[] = [
institutionId: null,
},
{
tireName: '分层2',
themeEngName: 'theme1',
description: '',
tireName: '数据贴源层',
themeEngName: 'ODS',
description:
'用于接收并处理需要存储至数据仓库系统的原始数据，其数据表的结构与原始数据所在的数据系统中的表结构一致，是数据仓库的数据准备区。',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
......@@ -30,9 +31,9 @@ export const TreeData: any[] = [
institutionId: null,
},
{
tireName: '分层1',
themeEngName: 'theme1',
description: '描述1',
tireName: '明细数据层',
themeEngName: 'DWD',
description: '在此层级中，将从ODS层中获得的数据按照主题建立各种数据模型。',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
......@@ -40,9 +41,9 @@ export const TreeData: any[] = [
institutionId: null,
},
{
tireName: '分层1',
themeEngName: 'theme1',
description: '描述1',
tireName: '轻度汇总层',
themeEngName: 'DWS',
description: '在此层级中，将从ODS层中获得的数据按照主题建立各种数据模型。',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
......@@ -50,9 +51,10 @@ export const TreeData: any[] = [
institutionId: null,
},
{
tireName: '分层1',
themeEngName: 'theme1',
description: '',
tireName: '数据应用层',
themeEngName: 'ADS',
description:
'在此层级中，按照业务划分，如流量、订单、用户等，生成字段比较多的宽表，用于提供后续的业务查询、OLAP分析、数据分发等。',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
......@@ -60,25 +62,16 @@ export const TreeData: any[] = [
institutionId: null,
},
{
tireName: '分层1',
themeEngName: 'theme1',
description: '描述1',
tireName: '数据展示层',
themeEngName: 'DP',
description:
'此层级主要是提供给数据产品和数据分析使用的数据，一般会存放在 ES、Mysql 等系统中供线上系统使用，也可能会存在 Hive 或者 Druid 中供数据分析和数据挖掘使用。',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
businessId: 406,
institutionId: null,
},
{
tireName: '分层1',
themeEngName: 'theme1',
description: '描述1',
creator: '创建人1',
createTime: '2024-10-27 10:04:04',
updateTime: '2024-10-27 10:04:04',
businessId: 407,
institutionId: null,
},
];
export const modelData: any[] = [
......
src/views/ArchitecturePlan/sys/ModelTree.vue 0 → 100644
View file @ 1a1266a3
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
ref="treeRef"
title="主题域选择"
search
toolbar
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'modelName' }"
@select="handleSelect"
/>
<ModelDetailModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import { Nullable } from '@vben/types';
import { TreeData } from '@/views/ArchitecturePlan/theme/model.data';
import ModelDetailModal from './modelDetailModal.vue';
import { useModal } from '@/components/Modal';
defineOptions({ name: 'DeptTree' });
const [registerModal, { openModal }] = useModal();
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
const data = TreeData;
treeData.value = handleTree(data, 'businessId', undefined, undefined, undefined);
await nextTick(() => {
getTree().expandAll(true);
});
}
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;
}
function handleSelect(keys) {
emit('select', keys[0]);
if (keys[0] >= 200) {
openModal(true, {
isUpdate: false,
});
}
}
onMounted(() => {
fetch();
});
</script>
src/views/ArchitecturePlan/sys/index.vue
View file @ 1a1266a3
......@@ -6,7 +6,7 @@
<!-- <a-button type="primary" @click="handleCreateModel">导出</a-button>
<a-button type="primary" @click="handleCreateModel">导入</a-button>
<a-button type="primary" @click="handleCreateFolder">新建文件夹</a-button> -->
<a-button type="primary" @click="handleDeleteBatch">删除所选</a-button>
<a-button type="error" @click="handleDeleteBatch">删除所选</a-button>
<a-button type="primary" @click="handleCreateFile">新建系统</a-button>
</template>
<template #bodyCell="{ column, record }">
......@@ -15,17 +15,20 @@
:actions="[
{
icon: 'clarity:search-line',
label: '查看',
// label: '查看',
tooltip: '查看',
onClick: handleView.bind(null, record),
},
{
icon: 'clarity:note-edit-line',
label: '编辑',
// label: '编辑',
tooltip: '编辑',
onClick: handleEdit.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
label: '删除',
// label: '删除',
tooltip: '删除',
color: 'error',
popConfirm: {
title: `是否确认删除 ${record.systemName}`,
......@@ -60,11 +63,13 @@
import { useMessage } from '@/hooks/web/useMessage';
import { useModal } from '@/components/Modal';
import ModelModal from './modelModal.vue';
import { columns, searchFormSchema } from './model.data';
import { columns, searchFormSchema, MoveFormSchema } from './model.data';
import { useGo } from '@/hooks/web/usePage';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { modelData, TreeData } from './mock';
import { modelData, TableData } from './mock';
import { Modal } from 'ant-design-vue';
// import ModelTree from '@/views/dataWarehousePlanning/physicalModel/ModelTree.vue';
defineOptions({ name: 'AccountManagement' });
......@@ -119,7 +124,7 @@
return info;
},
actionColumn: {
width: 225,
width: 120,
title: '操作',
dataIndex: 'action',
},
......@@ -185,6 +190,25 @@
}
/**批量删除*/
function handleDeleteBatch() {
Modal.confirm({
title: '确认删除',
content: '是否删除选中的系统?',
onOk: () => {
const rowSelection = getRowSelection().selectedRowKeys;
for (let i = 0; i < rowSelection.length; i++) {
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
1,
);
}
rowSelection.length = 0;
createMessage.success('删除成功!');
reload();
},
});
}
/**批量删除*/
function handleDeleteBatch2() {
const rowSelection = getRowSelection().selectedRowKeys;
for (let i = 0; i < rowSelection.length; i++) {
tableData.value.splice(
......@@ -212,11 +236,12 @@
}
//查看按钮
function handleView(record: Recordable) {
go('/system/account_detail/' + record.id);
reload();
}
onMounted(() => {
tableData.value = TreeData;
tableData.value = TableData;
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
......
src/views/ArchitecturePlan/sys/mock.ts
View file @ 1a1266a3
......@@ -8,7 +8,7 @@ import { update } from 'lodash-es';
// 引入开关组件
type CheckedType = boolean | string | number;
export const TreeData: any[] = [
export const TableData: any[] = [
{
systemName: '系统1',
themeEngName: 'theme1',
......
src/views/ArchitecturePlan/sys/model.data copy.ts 0 → 100644
View file @ 1a1266a3
import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag, Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { changeFlagApi } from '@/api/system/user/user';
// 引入开关组件
type CheckedType = boolean | string | number;
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'modelName',
width: 150,
onEditRow: true,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 150,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 150,
},
{
title: '拥有者',
dataIndex: 'holder',
width: 150,
},
];
export const dataSetColumns: BasicColumn[] = [
{
title: '元数据',
dataIndex: 'orginalData',
width: 150,
},
{
title: '物理模型',
dataIndex: 'physicsModel',
width: 150,
editable: true,
edit: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '表名',
value: '1',
},
{
label: '中文名',
value: '2',
},
{
label: '列名',
value: '3',
},
{
label: '列中文名',
value: '4',
},
{
label: '英文名',
value: '5',
},
{
label: '列英文名',
value: '6',
},
],
},
},
];
export const detailColumns: BasicColumn[] = [
{
title: '属性名称',
dataIndex: 'name',
width: 150,
},
{
title: '描述',
dataIndex: 'description',
width: 150,
},
{
title: '属性英文名',
dataIndex: 'englishName',
width: 150,
},
{
title: '是否必填',
dataIndex: 'isWrite',
width: 150,
customRender: ({ record }) => (record.isWrite === '1' ? '是' : '否'),
},
{
title: '是否显示',
dataIndex: 'isShow',
width: 150,
customRender: ({ record }) => (record.isShow === '1' ? '是' : '否'),
},
{
title: '类型',
dataIndex: 'type',
width: 200,
customRender: ({ record }) => {
const typeMap = {
'1': '字符串',
'2': '布尔',
'3': '整型',
'4': '浮点型',
};
return typeMap[record.type];
},
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '名称',
component: 'Input',
componentProps: {
placeholder: '请输入元模型名称',
},
colProps: { span: 7 },
},
];
export const modelFormSchema: any[] = [
{
field: 'modelId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'modelName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'modelName',
label: '元模型名称',
component: 'Input',
colProps: { lg: 24, md: 24 },
rules: [
{
required: true,
message: '请输入登录名',
},
],
},
{
field: 'type',
label: '数据资产类型',
component: 'Select',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{
label: 'ArgoDB表',
value: 'ArgoDB',
},
{
label: 'DB2表',
value: 'DB2',
},
{
label: '达梦数据库表',
value: '达梦',
},
{
label: 'Hana表',
value: 'Hana',
},
{
label: 'Inceptor表',
value: 'Inceptor',
},
{
label: 'KunDB表',
value: 'KunDB',
},
{
label: 'MySQL表',
value: 'MySQL',
},
],
},
rules: [
{
required: true,
message: '请输入数据资产类型',
},
],
},
];
/**移动*/
export const MoveFormSchema: any[] = [
{
field: 'modelId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'modelName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
];
src/views/ArchitecturePlan/sys/model.data.ts
View file @ 1a1266a3
......@@ -101,15 +101,67 @@ export const physicalModelFormSchema: any[] = [
{
field: 'dept',
label: '业务部门',
colProps: { span: 24 },
component: 'TreeSelect',
required: true,
colProps: { span: 24 },
componentProps: {
fieldNames: {
label: 'label',
value: 'value',
},
treeData: [
{
label: '部门1',
value: 'option1',
children: [
{
label: '二级部门1',
value: 'subOption1-1',
},
{
label: '二级部门2',
value: 'subOption1-2',
},
],
},
{
label: '部门2',
value: 'option2',
children: [
{
label: '二级部门3',
value: 'subOption2-1',
},
{
label: '二级部门4',
value: 'subOption2-2',
},
],
},
],
},
},
{
field: 'principal',
label: '负责人',
component: 'Input',
component: 'Select',
required: true,
componentProps: {
options: [
{
label: '用户1',
value: '用户1',
},
{
label: '用户2',
value: '用户2',
},
{
label: '创建人1',
value: '创建人1',
},
],
},
colProps: { span: 24 },
},
{
......@@ -124,17 +176,88 @@ export const physicalModelFormSchema: any[] = [
/**移动*/
export const MoveFormSchema: any[] = [
{
field: 'institutionId',
label: '所属机构',
field: 'themeFather',
label: '父级主题域',
colProps: { span: 24 },
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'institutionName',
value: 'businessId',
label: 'label',
value: 'value',
},
getPopupContainer: () => document.body,
treeData: [
{
label: '一级主题域1',
value: 'option1',
children: [
{
label: '二级主题域1',
value: 'subOption1-1',
},
{
label: '二级主题域2',
value: 'subOption1-2',
},
],
},
{
label: '一级主题域2',
value: 'option2',
children: [
{
label: '二级主题域3',
value: 'subOption2-1',
},
{
label: '二级主题域4',
value: 'subOption2-2',
},
],
},
],
},
},
];
export const detailColumns: BasicColumn[] = [
{
title: '属性名称',
dataIndex: 'name',
width: 150,
},
{
title: '描述',
dataIndex: 'description',
width: 150,
},
{
title: '属性英文名',
dataIndex: 'englishName',
width: 150,
},
{
title: '是否必填',
dataIndex: 'isWrite',
width: 150,
customRender: ({ record }) => (record.isWrite === '1' ? '是' : '否'),
},
{
title: '是否显示',
dataIndex: 'isShow',
width: 150,
customRender: ({ record }) => (record.isShow === '1' ? '是' : '否'),
},
{
title: '类型',
dataIndex: 'type',
width: 200,
customRender: ({ record }) => {
const typeMap = {
'1': '字符串',
'2': '布尔',
'3': '整型',
'4': '浮点型',
};
return typeMap[record.type];
},
required: true,
},
];
src/views/ArchitecturePlan/sys/modelDetailModal.vue 0 → 100644
View file @ 1a1266a3
<template>
<BasicModal width="80%" v-bind="$attrs" @register="registerModal" :title="getTitle">
<PageWrapper title="" class="content-padding" contentBackground @back="goBack">
<template #footer>
<div
style="
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 5px 20px;
background-color: white;
"
>
<div
style="
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: -100px;
padding-left: 5px;
"
>
<div style="font-weight: bold">关联资产类型</div>
<div style="margin-top: 20px">数据资产类型：Inceptor表</div>
</div>
<div style="cursor: pointer">
<Icon
icon="ant-design:appstore-outlined"
style="margin-right: 10px"
:size="30"
@click="handleSetButton"
:color="'#1091FE'"
/>
<Icon
icon="ant-design:edit-outlined"
:size="30"
@click="handleUpdateButton"
:color="'#1091FE'"
/>
</div>
</div>
</template>
<BasicTable @register="registerTable1" class="height1">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="表信息" allowClear />
</template>
</BasicTable>
<BasicTable @register="registerTable2" class="height2">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="分桶信息" allowClear />
</template>
</BasicTable>
<BasicTable @register="registerTable3" class="height3">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="分区信息" allowClear />
</template>
</BasicTable>
<BasicTable @register="registerTable4" class="height4">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="列信息" allowClear />
</template>
</BasicTable>
</PageWrapper>
<DetailSetModal @register="registerSetModal" @success="handleSuccess" />
</BasicModal>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { ref, computed, unref, reactive, onMounted } from 'vue';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { detailColumns, modelFormSchema } from './model.data';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/metaModel/physicsModel/modelData';
import { router } from '@/router';
import ColumnTable from './ColumnTable.vue';
import AreaTable from './AreaTable.vue';
import Table from './Table.vue';
import BucketTable from './BucketTable.vue';
import DetailSetModal from './detailSetModal.vue';
import { useTable, BasicTable } from '@/components/Table';
import {
editAreaData,
editColumnData,
editBucketData,
editTableData,
} from '@/views/metaModel/physicsModel/modelData.ts';
import Icon from '@/components/Icon/Icon.vue';
import { useGo } from '@/hooks/web/usePage';
defineOptions({ name: 'ModelModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
const tableData = ref([]);
const columnTableData = ref([]);
const bucketTableData = ref([]);
const areaTableData = ref([]);
const go = useGo();
const getTitle = computed(() => 'Inceptor元模型');
const [registerSetModal, { openModal: setModal }] = useModal();
const [registerTable1, { reload1, getForm1 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
return { ...response, data: tableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
const [registerTable2, { reload2, getForm2 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: bucketTableData.value.length,
code: '',
message: '',
data: bucketTableData.value,
};
return { ...response, data: bucketTableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
const [registerTable3, { reload3, getForm3 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: areaTableData.value.length,
code: '',
message: '',
data: areaTableData.value,
};
return { ...response, data: areaTableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
const [registerTable4, { reload4, getForm4 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: columnTableData.value.length,
code: '',
message: '',
data: columnTableData.value,
};
return { ...response, data: columnTableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false, showCancelBtn: false, showOkBtn: false });
});
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
}
/** 配置按钮*/
function handleSetButton() {
setModal(true, {
isUpdate: false,
});
}
/** 修改按钮*/
function handleUpdateButton() {
go('/metaModel/physicsModel/editRowTable');
}
onMounted(() => {
tableData.value = editTableData;
columnTableData.value = editColumnData;
bucketTableData.value = editBucketData;
areaTableData.value = editAreaData;
});
</script>
<style>
.height1 {
.ant-table-container {
.ant-table-body {
min-height: 650px;
}
}
}
.height2 {
.ant-table-container {
.ant-table-body {
min-height: 300px;
}
}
}
.height3 {
.ant-table-container {
.ant-table-body {
min-height: 300px;
}
}
}
.height4 {
.ant-table-container {
.ant-table-body {
min-height: 400px;
}
}
}
</style>
src/views/ArchitecturePlan/sys/modelModal.vue
View file @ 1a1266a3
......@@ -18,7 +18,7 @@
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { encryptTwo } from '../../../../src/utils/jsencrypt.js';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/ArchitecturePlan/sys/mock';
import { TableData } from '@/views/ArchitecturePlan/sys/mock';
import { router } from '@/router';
defineOptions({ name: 'ModelModal' });
......
src/views/ArchitecturePlan/sys/moveModel.vue 0 → 100644
View file @ 1a1266a3
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { modelFormSchema, MoveFormSchema } from './model.data copy';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/ArchitecturePlan/theme/model.data';
defineOptions({ name: 'ModelModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: MoveFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const formData = {
modelId: data.record.businessId,
};
// 塞值
setFieldsValue({
...formData,
});
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'modelId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => '移动');
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() {
createMessage.success('修改成功');
closeModal();
}
</script>
src/views/ArchitecturePlan/theme/ModelTree.vue 0 → 100644
View file @ 1a1266a3
<template>
<div class="m-4 mr-0 overflow-hidden bg-white">
<BasicTree
ref="treeRef"
title="主题域选择"
search
toolbar
treeWrapperClassName="h-[calc(100%-35px)] overflow-auto"
:clickRowToExpand="false"
:defaultExpandAll="true"
:treeData="treeData"
:fieldNames="{ key: 'businessId', title: 'modelName' }"
@select="handleSelect"
/>
<ModelDetailModal @register="registerModal" @success="handleSuccess" />
</div>
</template>
<script lang="ts" setup>
import { nextTick, onMounted, ref, unref } from 'vue';
import { BasicTree, TreeActionType, TreeItem } from '@/components/Tree';
import { getDeptList } from '@/api/system/dept/dept';
import { Nullable } from '@vben/types';
import { TreeData } from '@/views/ArchitecturePlan/theme/model.data';
import ModelDetailModal from './modelDetailModal.vue';
import { useModal } from '@/components/Modal';
defineOptions({ name: 'DeptTree' });
const [registerModal, { openModal }] = useModal();
const emit = defineEmits(['select']);
const treeData = ref<TreeItem[]>([]);
const treeRef = ref<Nullable<TreeActionType>>(null);
function getTree() {
const tree = unref(treeRef);
if (!tree) {
throw new Error('tree is null!');
}
return tree;
}
async function fetch() {
const data = TreeData;
treeData.value = handleTree(data, 'businessId', undefined, undefined, undefined);
await nextTick(() => {
getTree().expandAll(true);
});
}
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;
}
function handleSelect(keys) {
emit('select', keys[0]);
if (keys[0] >= 200) {
openModal(true, {
isUpdate: false,
});
}
}
onMounted(() => {
fetch();
});
</script>
src/views/ArchitecturePlan/theme/detailSetModal.vue 0 → 100644
View file @ 1a1266a3
<template>
<BasicModal width="50%" v-bind="$attrs" @register="registerModal" :title="getTitle" @ok="handleSubmit">
<PageWrapper
title=""
class="content-padding"
contentBackground
@back="goBack"
>
<BasicTable @register="registerTable1" class="height1" style="height: 250px">
<template #toolbar>
<a-input style="width: 200px;margin-right: auto" default-value="表信息" allowClear></a-input>
</template>
</BasicTable>
<BasicTable @register="registerTable2" class="height2" style="height: 250px">
<template #toolbar>
<a-input style="width: 200px;margin-right: auto" default-value="列信息" allowClear></a-input>
</template>
</BasicTable>
</PageWrapper>
</BasicModal>
</template>
<script lang="ts" setup>
import {ref, computed, unref, reactive, onMounted} from 'vue';
import {BasicModal, useModal, useModalInner} from '@/components/Modal';
import { useMessage } from '@/hooks/web/useMessage';
import {useTable,BasicTable} from "@/components/Table";
import {dataSetColumns} from "@/views/metaModel/physicsModel/model.data";
import {setColumnData,setTableData} from '@/views/metaModel/physicsModel/modelData.ts'
import Icon from '@/components/Icon/Icon.vue';
import { useGo } from '@/hooks/web/usePage';
defineOptions({ name: 'ModelModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const tableData = ref([])
const columnTableData = ref([])
const go = useGo();
const getTitle = computed(() => ('映射配置'));
const [registerTable1, { reload1 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: tableData.value.length,
code:'',
message:'',
data: [],
};
return { ...response, data: tableData.value };
},
columns:dataSetColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
canResize: false//取消自适应 取消滚动条
});
const [registerTable2, { reload2 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: "1",
pageSize: "10",
pages: "1",
total: columnTableData.value.length,
code:'',
message:'',
data: columnTableData.value,
};
return { ...response, data: columnTableData.value };
},
columns:dataSetColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
canResize: false
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
});
/**确定按钮*/
async function handleSubmit() {
createMessage.success('保存成功!')
closeModal()
}
onMounted(() => {
tableData.value = setTableData
columnTableData.value = setColumnData
});
</script>
<style>
</style>
src/views/ArchitecturePlan/theme/index.vue
View file @ 1a1266a3
<template>
<PageWrapper dense contentFullHeight fixedHeight contentClass="flex">
<!-- <ModelTree class="w-1/4 xl:w-1/5" @select="handleSelect" /> -->
<BasicTable @register="registerTable" class="w-1 xl:w-5/5" :searchInfo="searchInfo">
<ModelTree class="w-1/4 xl:w-1/5" @select="handleSelect" />
<BasicTable @register="registerTable" class="w-1 xl:w-4/5" :searchInfo="searchInfo">
<template #toolbar>
<!-- <a-button type="primary" @click="handleCreateModel">导出</a-button>
<a-button type="primary" @click="handleCreateModel">导入</a-button> -->
<!-- <a-button type="primary" @click="handleCreateFolder">新建文件夹</a-button> -->
<a-button type="error" @click="handleDeleteBatch">删除所选</a-button>
<a-button type="primary" @click="handleCreateFile">新建主题域</a-button>
</template>
<template #bodyCell="{ column, record }">
......@@ -48,6 +49,7 @@
</template>
</BasicTable>
<ModelModal @register="registerModal" @success="handleSuccess" />
<MoveModelModal @register="registerMoveModel" @success="handleSuccess" />
</PageWrapper>
</template>
<script lang="ts" setup>
......@@ -62,12 +64,13 @@
import { useGo } from '@/hooks/web/usePage';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { modelData, TreeData } from './mock';
import { modelData, TableData } from './mock';
import { Icon } from 'vxe-pc-ui';
import { color } from 'echarts';
import { popconfirmProps } from 'ant-design-vue/es/popconfirm';
import MoveModelModal from '@/views/ArchitecturePlan/theme/moveModel.vue';
import { message, Modal, Popconfirm } from 'ant-design-vue';
// import ModelTree from '@/views/dataWarehousePlanning/physicalModel/ModelTree.vue';
import ModelTree from '@/views/ArchitecturePlan/theme/ModelTree.vue';
defineOptions({ name: 'AccountManagement' });
const { createMessage } = useMessage();
......@@ -77,6 +80,7 @@
const [registerModal, { openModal }] = useModal();
const [registerAddUserModal, { openModal: addUserModal }] = useModal();
const [registerMoveUser, { openModal: openMoveUserModal }] = useModal();
const [registerMoveModel, { openModal: openMoveModelModal }] = useModal();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
const [
......@@ -149,12 +153,27 @@
/** 移动按钮*/
function handleMove(record: Recordable) {
openMoveUserModal(true, {
openMoveModelModal(true, {
record,
isMove: true,
});
}
/** 移动 */
function handleMoveSuccess({ isMove, values }) {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length > 0) {
//批量移动
for (let i = 0; i < rowSelection.length; i++) {
const result = updateTableDataRecord(values[i].institutionId, values[i]);
}
} else {
//单个移动
const result = updateTableDataRecord(values.businessId, values);
}
reload();
}
/** 编辑按钮*/
function handleEdit(record: Recordable) {
openModal(true, {
......@@ -193,16 +212,22 @@
}
/**批量删除*/
function handleDeleteBatch() {
const rowSelection = getRowSelection().selectedRowKeys;
for (let i = 0; i < rowSelection.length; i++) {
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
1,
);
}
createMessage.success('删除成功!');
rowSelection.length = 0;
reload();
Modal.confirm({
title: '确认删除',
content: '是否删除选中的系统?',
onOk: () => {
const rowSelection = getRowSelection().selectedRowKeys;
for (let i = 0; i < rowSelection.length; i++) {
tableData.value.splice(
tableData.value.findIndex((item) => item.businessId === rowSelection[i]),
1,
);
}
rowSelection.length = 0;
createMessage.success('删除成功!');
reload();
},
});
}
/** 新增/编辑成功*/
function handleSuccess({ isUpdate, values }) {
......@@ -217,27 +242,12 @@
}
}
/** 移动*/
function handleMoveSuccess({ isMove, values }) {
const rowSelection = getRowSelection().selectedRowKeys;
if (rowSelection.length > 0) {
//批量移动
for (let i = 0; i < rowSelection.length; i++) {
const result = updateTableDataRecord(values[i].institutionId, values[i]);
}
} else {
//单个移动
const result = updateTableDataRecord(values.businessId, values);
}
reload();
}
function handleView(record: Recordable) {
go('/system/account_detail/' + record.id);
}
onMounted(() => {
tableData.value = TreeData;
tableData.value = TableData;
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
......
src/views/ArchitecturePlan/theme/mock.ts
View file @ 1a1266a3
......@@ -8,7 +8,7 @@ import { update } from 'lodash-es';
// 引入开关组件
type CheckedType = boolean | string | number;
export const TreeData: any[] = [
export const TableData: any[] = [
{
themeName: '主题1',
themeEngName: 'theme1',
......
src/views/ArchitecturePlan/theme/model.data copy.ts 0 → 100644
View file @ 1a1266a3
import { getAllRoleList } from '@/api/system/role/role';
import { BasicColumn, FormSchema } from '@/components/Table';
import { h } from 'vue';
import { Tag, Switch } from 'ant-design-vue';
import { useMessage } from '@/hooks/web/useMessage';
import { changeFlagApi } from '@/api/system/user/user';
// 引入开关组件
type CheckedType = boolean | string | number;
export const columns: BasicColumn[] = [
{
title: '名称',
dataIndex: 'modelName',
width: 150,
onEditRow: true,
},
{
title: '创建时间',
dataIndex: 'createDate',
width: 150,
},
{
title: '更新时间',
dataIndex: 'updateDate',
width: 150,
},
{
title: '拥有者',
dataIndex: 'holder',
width: 150,
},
];
export const dataSetColumns: BasicColumn[] = [
{
title: '元数据',
dataIndex: 'orginalData',
width: 150,
},
{
title: '物理模型',
dataIndex: 'physicsModel',
width: 150,
editable: true,
edit: true,
editComponent: 'Select',
editComponentProps: {
options: [
{
label: '表名',
value: '1',
},
{
label: '中文名',
value: '2',
},
{
label: '列名',
value: '3',
},
{
label: '列中文名',
value: '4',
},
{
label: '英文名',
value: '5',
},
{
label: '列英文名',
value: '6',
},
],
},
},
];
export const detailColumns: BasicColumn[] = [
{
title: '属性名称',
dataIndex: 'name',
width: 150,
},
{
title: '描述',
dataIndex: 'description',
width: 150,
},
{
title: '属性英文名',
dataIndex: 'englishName',
width: 150,
},
{
title: '是否必填',
dataIndex: 'isWrite',
width: 150,
customRender: ({ record }) => (record.isWrite === '1' ? '是' : '否'),
},
{
title: '是否显示',
dataIndex: 'isShow',
width: 150,
customRender: ({ record }) => (record.isShow === '1' ? '是' : '否'),
},
{
title: '类型',
dataIndex: 'type',
width: 200,
customRender: ({ record }) => {
const typeMap = {
'1': '字符串',
'2': '布尔',
'3': '整型',
'4': '浮点型',
};
return typeMap[record.type];
},
},
];
export const searchFormSchema: FormSchema[] = [
{
field: 'name',
label: '名称',
component: 'Input',
componentProps: {
placeholder: '请输入元模型名称',
},
colProps: { span: 7 },
},
];
export const modelFormSchema: any[] = [
{
field: 'modelId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'modelName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
{
field: 'modelName',
label: '元模型名称',
component: 'Input',
colProps: { lg: 24, md: 24 },
rules: [
{
required: true,
message: '请输入登录名',
},
],
},
{
field: 'type',
label: '数据资产类型',
component: 'Select',
colProps: { lg: 24, md: 24 },
componentProps: {
options: [
{
label: 'ArgoDB表',
value: 'ArgoDB',
},
{
label: 'DB2表',
value: 'DB2',
},
{
label: '达梦数据库表',
value: '达梦',
},
{
label: 'Hana表',
value: 'Hana',
},
{
label: 'Inceptor表',
value: 'Inceptor',
},
{
label: 'KunDB表',
value: 'KunDB',
},
{
label: 'MySQL表',
value: 'MySQL',
},
],
},
rules: [
{
required: true,
message: '请输入数据资产类型',
},
],
},
];
/**移动*/
export const MoveFormSchema: any[] = [
{
field: 'modelId',
label: '路径',
component: 'TreeSelect',
colProps: { lg: 24, md: 24 },
componentProps: {
fieldNames: {
label: 'modelName',
value: 'businessId',
},
getPopupContainer: () => document.body,
},
required: true,
},
];
src/views/ArchitecturePlan/theme/model.data.ts
View file @ 1a1266a3
......@@ -87,10 +87,39 @@ export const physicalModelFormSchema: any[] = [
component: 'TreeSelect',
componentProps: {
fieldNames: {
label: 'themeName',
value: 'themeId',
label: 'label',
value: 'value',
},
getPopupContainer: () => document.body,
treeData: [
{
label: '一级主题域1',
value: 'option1',
children: [
{
label: '二级主题域1',
value: 'subOption1-1',
},
{
label: '二级主题域2',
value: 'subOption1-2',
},
],
},
{
label: '一级主题域2',
value: 'option2',
children: [
{
label: '二级主题域3',
value: 'subOption2-1',
},
{
label: '二级主题域4',
value: 'subOption2-2',
},
],
},
],
},
},
];
......@@ -112,3 +141,183 @@ export const MoveFormSchema: any[] = [
required: true,
},
];
export const TreeData: any[] = [
{
delFlag: '0',
flag: '1',
businessId: 100,
modelName: '主题域',
parentId: 0,
'code:': '001',
ancestors: '0',
orderNum: 0,
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
type: 'MySQL',
// icon: 'ion:settings-outline',
},
{
delFlag: '0',
flag: '1',
businessId: 101,
modelName: '一级主题域1',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
type: 'MySQL',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:folder-open-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 102,
modelName: '一级主题域1',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
type: 'MySQL',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:folder-open-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 103,
modelName: '一级主题域2',
parentId: 100,
'code:': '002',
ancestors: '0,100',
orderNum: 1,
type: 'DB2',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:folder-open-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 201,
modelName: '二级主题域1',
parentId: 101,
'code:': '002',
ancestors: '0,100，101',
orderNum: 1,
type: 'MySQL',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:codepen-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 202,
modelName: '二级主题域2',
parentId: 101,
'code:': '002',
ancestors: '0,100，101',
orderNum: 1,
type: 'ArgoDB',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:codepen-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 203,
modelName: '二级主题域3',
parentId: 102,
'code:': '002',
ancestors: '0,100，102',
orderNum: 1,
type: 'MySQL',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:codepen-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 204,
modelName: '二级主题域4',
parentId: 102,
'code:': '002',
ancestors: '0,100，102',
orderNum: 1,
type: 'MySQL',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:codepen-outlined',
},
{
delFlag: '0',
flag: '1',
businessId: 205,
modelName: '二级主题域5',
parentId: 103,
'code:': '002',
ancestors: '0,100，103',
orderNum: 1,
type: 'MySQL',
holder: 'admin',
createDate: '2024-10-24 10:04:04',
updateDate: '2024-10-24 10:04:04',
// icon: 'ant-design:codepen-outlined',
},
];
export const detailColumns: BasicColumn[] = [
{
title: '属性名称',
dataIndex: 'name',
width: 150,
},
{
title: '描述',
dataIndex: 'description',
width: 150,
},
{
title: '属性英文名',
dataIndex: 'englishName',
width: 150,
},
{
title: '是否必填',
dataIndex: 'isWrite',
width: 150,
customRender: ({ record }) => (record.isWrite === '1' ? '是' : '否'),
},
{
title: '是否显示',
dataIndex: 'isShow',
width: 150,
customRender: ({ record }) => (record.isShow === '1' ? '是' : '否'),
},
{
title: '类型',
dataIndex: 'type',
width: 200,
customRender: ({ record }) => {
const typeMap = {
'1': '字符串',
'2': '布尔',
'3': '整型',
'4': '浮点型',
};
return typeMap[record.type];
},
},
];
src/views/ArchitecturePlan/theme/modelDetailModal.vue 0 → 100644
View file @ 1a1266a3
<template>
<BasicModal width="80%" v-bind="$attrs" @register="registerModal" :title="getTitle">
<PageWrapper title="" class="content-padding" contentBackground @back="goBack">
<template #footer>
<div
style="
display: flex;
align-items: flex-end;
justify-content: space-between;
padding: 0 5px 20px;
background-color: white;
"
>
<div
style="
display: flex;
flex-direction: column;
justify-content: flex-start;
margin-top: -100px;
padding-left: 5px;
"
>
<div style="font-weight: bold">关联资产类型</div>
<div style="margin-top: 20px">数据资产类型：Inceptor表</div>
</div>
<div style="cursor: pointer">
<Icon
icon="ant-design:appstore-outlined"
style="margin-right: 10px"
:size="30"
@click="handleSetButton"
:color="'#1091FE'"
/>
<Icon
icon="ant-design:edit-outlined"
:size="30"
@click="handleUpdateButton"
:color="'#1091FE'"
/>
</div>
</div>
</template>
<BasicTable @register="registerTable1" class="height1">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="表信息" allowClear />
</template>
</BasicTable>
<BasicTable @register="registerTable2" class="height2">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="分桶信息" allowClear />
</template>
</BasicTable>
<BasicTable @register="registerTable3" class="height3">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="分区信息" allowClear />
</template>
</BasicTable>
<BasicTable @register="registerTable4" class="height4">
<template #toolbar>
<a-input style="width: 200px; margin-right: auto" default-value="列信息" allowClear />
</template>
</BasicTable>
</PageWrapper>
<DetailSetModal @register="registerSetModal" @success="handleSuccess" />
</BasicModal>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { ref, computed, unref, reactive, onMounted } from 'vue';
import { BasicModal, useModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { detailColumns, modelFormSchema } from './model.data';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/metaModel/physicsModel/modelData';
import { router } from '@/router';
import ColumnTable from './ColumnTable.vue';
import AreaTable from './AreaTable.vue';
import Table from './Table.vue';
import BucketTable from './BucketTable.vue';
import DetailSetModal from './detailSetModal.vue';
import { useTable, BasicTable } from '@/components/Table';
import {
editAreaData,
editColumnData,
editBucketData,
editTableData,
} from '@/views/metaModel/physicsModel/modelData.ts';
import Icon from '@/components/Icon/Icon.vue';
import { useGo } from '@/hooks/web/usePage';
defineOptions({ name: 'ModelModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
const tableData = ref([]);
const columnTableData = ref([]);
const bucketTableData = ref([]);
const areaTableData = ref([]);
const go = useGo();
const getTitle = computed(() => 'Inceptor元模型');
const [registerSetModal, { openModal: setModal }] = useModal();
const [registerTable1, { reload1, getForm1 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: tableData.value.length,
code: '',
message: '',
data: [],
};
return { ...response, data: tableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
const [registerTable2, { reload2, getForm2 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: bucketTableData.value.length,
code: '',
message: '',
data: bucketTableData.value,
};
return { ...response, data: bucketTableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
const [registerTable3, { reload3, getForm3 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: areaTableData.value.length,
code: '',
message: '',
data: areaTableData.value,
};
return { ...response, data: areaTableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
const [registerTable4, { reload4, getForm4 }] = useTable({
title: '',
api: async (params) => {
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: columnTableData.value.length,
code: '',
message: '',
data: columnTableData.value,
};
return { ...response, data: columnTableData.value };
},
columns: detailColumns,
showTableSetting: false,
showIndexColumn: false,
pagination: false,
bordered: true,
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
setModalProps({ confirmLoading: false, showCancelBtn: false, showOkBtn: false });
});
/** 删除按钮*/
function handleDelete(record: Recordable) {
createMessage.success('删除成功!');
}
/** 配置按钮*/
function handleSetButton() {
setModal(true, {
isUpdate: false,
});
}
/** 修改按钮*/
function handleUpdateButton() {
go('/metaModel/physicsModel/editRowTable');
}
onMounted(() => {
tableData.value = editTableData;
columnTableData.value = editColumnData;
bucketTableData.value = editBucketData;
areaTableData.value = editAreaData;
});
</script>
<style>
.height1 {
.ant-table-container {
.ant-table-body {
min-height: 650px;
}
}
}
.height2 {
.ant-table-container {
.ant-table-body {
min-height: 300px;
}
}
}
.height3 {
.ant-table-container {
.ant-table-body {
min-height: 300px;
}
}
}
.height4 {
.ant-table-container {
.ant-table-body {
min-height: 400px;
}
}
}
</style>
src/views/ArchitecturePlan/theme/modelModal.vue
View file @ 1a1266a3
......@@ -18,7 +18,7 @@
import { addUserApi, UserDetailApi, UserUpdataApi } from '@/api/system/user/user';
import { encryptTwo } from '../../../../src/utils/jsencrypt.js';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from './mock';
import { TableData } from './mock';
import { router } from '@/router';
defineOptions({ name: 'ModelModal' });
......@@ -54,16 +54,16 @@
});
}
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
console.log('treeList', treeList);
updateSchema([
{
field: 'modelId',
componentProps: {
treeData: treeList,
},
},
]);
// const treeList = handleTree(TableData, 'businessId', undefined, undefined, undefined);
// console.log('treeList', treeList);
// updateSchema([
// {
// field: 'modelId',
// componentProps: {
// tableData: treeList,
// },
// },
// ]);
});
const getTitle = computed(() => (!unref(isUpdate) ? '新建主题域' : '编辑主题域'));
......
src/views/ArchitecturePlan/theme/moveModel.vue 0 → 100644
View file @ 1a1266a3
<template>
<BasicModal
width="40%"
v-bind="$attrs"
@register="registerModal"
:title="getTitle"
@ok="handleSubmit"
>
<BasicForm @register="registerForm" />
</BasicModal>
</template>
<script lang="ts" setup>
import { ref, computed, unref, reactive } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { modelFormSchema, MoveFormSchema } from './model.data copy';
import { useMessage } from '@/hooks/web/useMessage';
import { TreeData } from '@/views/ArchitecturePlan/theme/model.data';
defineOptions({ name: 'ModelModal' });
const emit = defineEmits(['success', 'register']);
const { createMessage } = useMessage();
const isUpdate = ref(true);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: MoveFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
resetFields();
setModalProps({ confirmLoading: false });
const formData = {
modelId: data.record.businessId,
};
// 塞值
setFieldsValue({
...formData,
});
const treeList = handleTree(TreeData, 'businessId', undefined, undefined, undefined);
updateSchema([
{
field: 'modelId',
componentProps: {
treeData: treeList,
},
},
]);
});
const getTitle = computed(() => '移动');
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() {
createMessage.success('修改成功');
closeModal();
}
</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