Skip to content

B
bigDataSystem
Commit 2b1a2ec8 authored by LiXuyang's avatar LiXuyang
Browse files
Options

实体详情页

parent 740482c8
Show whitespace changes
Inline Side-by-side
Showing with 747 additions and 14 deletions
src/router/routes/index.ts
View file @ 2b1a2ec8
......@@ -149,6 +149,15 @@ export const DataWarehousePlanningRoute: AppRouteRecordRaw = {
icon: '',
},
},
{
path: 'logicalModel/entity-detail',
name: 'logicalEntityModel',
component: () => import('@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/index.vue'),
meta: {
title: '实体详情',
icon: '',
},
},
],
};
export const ModelRoute: AppRouteRecordRaw = {
......
src/views/dataWarehousePlanning/logicalModel/modelDetail/connectionTable.vue
View file @ 2b1a2ec8
......@@ -29,7 +29,7 @@
</div>
</template>
<script lang="ts" setup>
import {reactive, onMounted, ref, defineProps} from 'vue';
import { reactive, onMounted, ref, defineProps } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { connectionFormSchema, connectionTable } from './model.data';
......@@ -41,8 +41,8 @@ import {reactive, onMounted, ref, defineProps} from 'vue';
defineOptions({ name: 'AccountManagement' });
const props = defineProps({
editFlag: Boolean
})
editFlag: Boolean,
});
const filterStore = useFilterStore();
const route = useRoute();
const searchInfo = reactive<Recordable>({});
......
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data.ts 0 → 100644
View file @ 2b1a2ec8
import { BasicColumn } from '@/components/Table';
export const propertyFormSchema: any[] = [
{
field: 'name',
component: 'Input',
componentProps: {
placeholder: '输入属性名称搜素',
},
colProps: { span: 4 },
},
];
export const propertyModelFormSchema: any[] = [
{
field: 'propName',
label: '属性名称',
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'fieldName',
label: '字段名称',
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'dataType',
label: '数据类型',
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'nullFlag',
label: '是否为空',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '否', value: '0' },
{ label: '是', value: '1' },
],
},
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'primaryFlag',
label: '是否主键',
component: 'RadioGroup',
componentProps: {
options: [
{ label: '否', value: '0' },
{ label: '是', value: '1' },
],
},
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'length',
label: '长度',
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'precision',
label: '精度',
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'relationBasic',
label: '关联基础标准',
component: 'Select',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'relationCode',
label: '关联公共代码',
component: 'Select',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'describe',
label: '属性描述',
component: 'Input',
required: true,
colProps: { lg: 24, md: 24 },
},
];
export const propertyTable: BasicColumn[] = [
{
title: '属性名称',
dataIndex: 'propName',
width: 150,
},
{
title: '字段名称',
dataIndex: 'fieldName',
width: 150,
},
{
title: '数据类型',
dataIndex: 'dataType',
width: 150,
},
{
title: '是否为空',
dataIndex: 'nullFlag',
width: 150,
},
{
title: '是否主键',
dataIndex: 'primaryFlag',
width: 150,
},
{
title: '是否外键',
dataIndex: 'foreignFlag',
width: 150,
},
{
title: '关联属性',
dataIndex: 'relationValue',
width: 150,
},
{
title: '长度',
dataIndex: 'length',
width: 150,
},
{
title: '精度',
dataIndex: 'precision',
width: 150,
},
{
title: '关联基础标准',
dataIndex: 'relationBasic',
width: 150,
},
{
title: '关联公共代码',
dataIndex: 'relationCode',
width: 150,
},
{
title: '属性描述',
dataIndex: 'describe',
width: 150,
},
];
export const entityConnectionModelFormSchema: any[] = [
{
field: 'physicalModel',
label: '选择物理模型',
component: 'Select',
required: true,
colProps: { lg: 24, md: 24 },
},
{
field: 'describe',
label: '关联描述',
component: 'Input',
colProps: { lg: 24, md: 24 },
},
];
export const entityConnectionTable: any[] = [
{
title: '名称',
dataIndex: 'name',
width: 150,
},
{
title: '路径',
dataIndex: 'path',
width: 150,
},
{
title: '关联描述',
dataIndex: 'describe',
width: 150,
},
{
title: '关联时间',
dataIndex: 'time',
width: 150,
},
{
title: '操作用户',
dataIndex: 'operate',
width: 150,
},
];
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityConnectionModel.vue 0 → 100644
View file @ 2b1a2ec8
<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 } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import {
entityConnectionModelFormSchema
} from "@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data";
defineOptions({ name: 'ModelModal' });
const isUpdate = ref(false);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: entityConnectionModelFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
await setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => (isUpdate.value ? '物理模型关联' : '物理模型关联'));
/**确定按钮*/
async function handleSubmit() {
await validate();
closeModal();
}
</script>
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityConnectionTable.vue 0 → 100644
View file @ 2b1a2ec8
<template>
<div>
<span class="table-title" style="font-size: 18px; margin: 12px 10px 0">实体关联关系</span>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary" @click="handleConnectionModel">关联</a-button>
</template>
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
// 编辑
icon: 'clarity:note-edit-line',
onClick: handleConnectionEditModel.bind(null, record),
},
{
// 删除
icon: 'ant-design:delete-outlined',
color: 'error',
},
]"
/>
</template>
</template>
</BasicTable>
<EntityConnectionModel @register="connectionModal" @success="connectionSuccess" />
</div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { useFilterStore } from '@/store/modules/filterData';
import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
import { useModal } from '@/components/Modal';
import {
entityConnectionTable,
propertyFormSchema
} from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data';
import { entityConnectionData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityData';
import EntityConnectionModel from './entityConnectionModel.vue';
defineOptions({ name: 'AccountManagement' });
const filterStore = useFilterStore();
const route = useRoute();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
// 模态框
const [connectionModal, { openModal }] = useModal();
// 实体新增
function handleConnectionModel() {
openModal(true, {
isUpdate: false,
});
}
// 实体编辑
function handleConnectionEditModel(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
function connectionSuccess({ isUpdate, values }) {
if (isUpdate) {
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
//修改表单的值
const result = updateTableDataRecord(values.businessId, values);
reload();
} else {
tableData.value.push(values);
reload();
}
}
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '',
// 定高
scroll: { y: 200 },
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: entityConnectionData.length,
code: '',
message: '',
data: entityConnectionData,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: entityConnectionTable,
rowSelection: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 150,
title: '操作',
dataIndex: 'action',
},
});
onMounted(() => {
tableData.value = TreeData;
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.institutionId = params.institutionId;
}
}
});
onBeforeRouteLeave((to, from, next) => {
next(); // 允许导航
});
</script>
<style scoped lang="scss">
.vben-basic-table-form-container {
padding: 0;
}
</style>
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityData.ts 0 → 100644
View file @ 2b1a2ec8
export const propertyData: any[] = [
{
propName: '业务日',
fieldName: 'biz_date',
dataType: 'varchar',
nullFlag: '0',
primaryFlag: '0',
foreignFlag: '0',
relationValue: '1',
length: '1',
precision: '1',
relationBasic: '1',
relationCode: '1',
describe: '1',
},
{
propName: '前结算价',
fieldName: 'last_clear_price',
dataType: 'decimal',
nullFlag: '1',
primaryFlag: '0',
foreignFlag: '0',
relationValue: '1',
length: '1',
precision: '1',
relationBasic: '1',
relationCode: '1',
describe: '1',
},
{
propName: '合约号',
fieldName: 'contract_id',
dataType: 'varchar',
nullFlag: '0',
primaryFlag: '0',
foreignFlag: '0',
relationValue: '1',
length: '1',
precision: '1',
relationBasic: 'basic',
relationCode: 'common',
describe: '1',
},
{
propName: '结算价',
fieldName: 'clear_price',
dataType: 'decimal',
nullFlag: '0',
primaryFlag: '0',
foreignFlag: '0',
relationValue: null,
length: null,
precision: null,
relationBasic: null,
relationCode: null,
describe: null,
},
];
export const entityConnectionData: any[] = [
{
name: '名称1',
path: '路径1',
describe: '关联描述1',
time: '关联时间1',
operate: '操作用户1',
},
];
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/index.vue 0 → 100644
View file @ 2b1a2ec8
<template>
<PageWrapper :title="infoData.name" contentBackground headerSticky>
<template #extra>
<a-button type="primary">编辑</a-button>
</template>
<Descriptions title="基本信息" style="margin: 10px 12px" :column="2">
<Descriptions.Item label="实体名称" style="padding-left: 40px"
>{{ infoData.name }}
</Descriptions.Item>
<Descriptions.Item label="实体描述" style="padding-left: 40px"
>{{ infoData.txt }}
</Descriptions.Item>
<Descriptions.Item label="实体英文名" style="padding-left: 40px"
>{{ infoData.engName }}
</Descriptions.Item>
<Descriptions.Item label="资产责任人" style="padding-left: 40px"
>{{ infoData.person }}
</Descriptions.Item>
<Descriptions.Item label="所属部门" style="padding-left: 40px"
>{{ infoData.deptName }}
</Descriptions.Item>
</Descriptions>
<Property />
<EntityConnection />
</PageWrapper>
</template>
<script lang="ts" setup>
import { PageWrapper } from '@/components/Page';
import { useRoute } from 'vue-router';
import { Descriptions } from 'ant-design-vue';
import Property from './propertyTabel.vue';
import EntityConnection from './entityConnectionTable.vue';
const route = useRoute();
const infoData = route.query;
</script>
<style lang="scss" scoped></style>
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/propertyModel.vue 0 → 100644
View file @ 2b1a2ec8
<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 } from 'vue';
import { BasicModal, useModalInner } from '@/components/Modal';
import { BasicForm, useForm } from '@/components/Form';
import { propertyModelFormSchema } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/enetity.data';
defineOptions({ name: 'ModelModal' });
const isUpdate = ref(false);
const isMove = ref(false);
const rowId = ref('');
//获取接口数据并放在下拉框里（这里是打开了一个弹框）
//初始化表单
const [registerForm, { setFieldsValue, updateSchema, resetFields, validate }] = useForm({
labelWidth: 100,
baseColProps: { lg: 12, md: 24 },
schemas: propertyModelFormSchema,
showActionButtonGroup: false,
actionColOptions: {
span: 23,
},
});
//初始化弹框
const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
await resetFields();
setModalProps({ confirmLoading: false });
isUpdate.value = !!data?.isUpdate;
isMove.value = !!data?.isMove;
if (unref(isUpdate)) {
// 获取行数据的id
rowId.value = data.record.businessId;
// 塞值
await setFieldsValue({
...data.record,
});
}
});
const getTitle = computed(() => (isUpdate.value ? '编辑属性' : '新建属性'));
/**确定按钮*/
async function handleSubmit() {
await validate();
closeModal();
}
</script>
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/propertyTabel.vue 0 → 100644
View file @ 2b1a2ec8
<template>
<div>
<span class="table-title" style="font-size: 18px; margin: 12px 10px 0">属性</span>
<BasicTable @register="registerTable" :searchInfo="searchInfo">
<template #toolbar>
<a-button type="primary"><DeleteTwoTone />批量删除</a-button>
<a-button type="primary" @click="handlePropertyModel"
><PlusCircleTwoTone />新建属性</a-button
>
</template>
<template #bodyCell="{ column, record }">
<template v-if="record[column.key] === null">
<span>-</span>
</template>
<template
v-else-if="
['nullFlag', 'primaryFlag', 'foreignFlag', 'relationValue'].includes(column.key)
"
>
<span>{{ record[column.key] === '0' ? '否' : '是' }}</span>
</template>
<template v-if="column.key === 'action'">
<TableAction
:actions="[
{
icon: 'clarity:note-edit-line',
onClick: handlePropertyEditModel.bind(null, record),
},
{
icon: 'ant-design:delete-outlined',
color: 'error',
},
]"
/>
</template>
</template>
</BasicTable>
<PropertyModel @register="propertyModal" @success="propertySuccess" />
</div>
</template>
<script lang="ts" setup>
import { reactive, onMounted, ref } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import { propertyFormSchema, propertyTable } from './enetity.data';
import { useFilterStore } from '@/store/modules/filterData';
import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
import { crossData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
import { DeleteTwoTone, PlusCircleTwoTone } from '@ant-design/icons-vue';
import { useModal } from '@/components/Modal';
import { propertyData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/entityDetail/entityData';
import PropertyModel from './propertyModel.vue';
defineOptions({ name: 'AccountManagement' });
const filterStore = useFilterStore();
const route = useRoute();
const searchInfo = reactive<Recordable>({});
const tableData = ref([]);
// 模态框
const [propertyModal, { openModal }] = useModal();
// 实体新增
function handlePropertyModel() {
openModal(true, {
isUpdate: false,
});
}
// 实体编辑
function handlePropertyEditModel(record: Recordable) {
openModal(true, {
record,
isUpdate: true,
});
}
// 模态框保存
function propertySuccess({ isUpdate, values }) {
if (isUpdate) {
// 注意：updateTableDataRecord要求表格的rowKey属性为string并且存在于每一行的record的keys中
//修改表单的值
const result = updateTableDataRecord(values.businessId, values);
reload();
} else {
tableData.value.push(values);
reload();
}
}
const [
registerTable,
{ reload, updateTableDataRecord, getSearchInfo, getForm, getRowSelection },
] = useTable({
title: '',
// 定高
scroll: { y: 200 },
// 数据
api: async (params) => {
console.log('params:', params);
const response = {
pageNu: '1',
pageSize: '10',
pages: '1',
total: propertyData.length,
code: '',
message: '',
data: propertyData,
};
return { ...response };
},
rowKey: 'businessId',
// 列
columns: propertyTable,
rowSelection: true,
useSearchForm: true,
showTableSetting: false,
bordered: true,
handleSearchInfoFn(info) {
return info;
},
actionColumn: {
width: 150,
title: '操作',
dataIndex: 'action',
},
});
onMounted(() => {
tableData.value = TreeData;
const path = route.path;
if (filterStore.getSearchParams[path]) {
if (JSON.parse(filterStore.getSearchParams[path] !== {})) {
const params = JSON.parse(filterStore.getSearchParams[path]);
getForm().setFieldsValue({
page: params.page,
pageSize: params.pageSize,
username: params.username,
flag: params.flag,
});
searchInfo.institutionId = params.institutionId;
}
}
});
onBeforeRouteLeave((to, from, next) => {
next(); // 允许导航
});
</script>
<style scoped lang="scss">
.vben-basic-table-form-container {
padding: 0;
}
</style>
src/views/dataWarehousePlanning/logicalModel/modelDetail/entityTable.vue
View file @ 2b1a2ec8
......@@ -10,12 +10,26 @@
<template #bodyCell="{ column, record }">
<template v-if="column.key === 'action'">
<TableAction
:actions="[
:actions="
editFlag
? [
{
icon: 'clarity:contract-line',
onClick: handleEntityEditModel.bind(null, record),
},
]"
{
// 删除
icon: 'ant-design:delete-outlined',
color: 'error',
},
]
: [
{
icon: 'clarity:contract-line',
onClick: handleEntityEditModel.bind(null, record),
},
]
"
/>
</template>
</template>
......@@ -24,20 +38,21 @@
</div>
</template>
<script lang="ts" setup>
import {reactive, onMounted, ref, defineProps} from 'vue';
import { reactive, onMounted, ref, defineProps } from 'vue';
import { BasicTable, useTable, TableAction } from '@/components/Table';
import { useRoute, onBeforeRouteLeave } from 'vue-router';
import {useRoute, onBeforeRouteLeave, useRouter} from 'vue-router';
import { entityColumns, entityFormSchema } from './model.data';
import { useFilterStore } from '@/store/modules/filterData';
import { TreeData } from '@/views/dataWarehousePlanning/logicalModel/modelData';
import { entityData } from '@/views/dataWarehousePlanning/logicalModel/modelDetail/modelData';
import EntityModel from './entityModel.vue';
import { useModal } from '@/components/Modal';
const { push } = useRouter();
defineOptions({ name: 'AccountManagement' });
const props = defineProps({
editFlag: Boolean
})
editFlag: Boolean,
});
// 模态框
const [entityModal, { openModal }] = useModal();
// 实体新增
......@@ -49,7 +64,10 @@ import {reactive, onMounted, ref, defineProps} from 'vue';
// 实体编辑
function handleEntityEditModel(record: Recordable) {
// 跳转到详情
push({
path: '/dataWarehousePlanning/logicalModel/entity-detail',
query: record,
});
}
function entitySuccess({ isUpdate, values }) {
if (isUpdate) {
......
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