Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
a04a7e36 by xukangle
Options

update: 新增分类分级页面

1 parent c7acd525
Inline Side-by-side
Showing 10 changed files with 575 additions and 42 deletions
.env.development
......@@ -23,6 +23,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-zcgl-data-plan-service
#数据质量接口地址
VITE_APP_QUALITY_BASEURL = ms-daop-zcgl-data-quality-service
#数据盘点接口地址
VITE_APP_CHECK_BASEURL = ms-daop-zcgl-data-inventory
#门户接口
VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal
......
pnpm-lock.yaml
This diff could not be displayed because it is too large.
src/api/modules/dataInventory.ts 0 → 100644
import request from "@/utils/request";
/** 分类分级模板数据 */
export const getTempleteClassifyData = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
method: 'post',
data
})
src/components/TemplateItem/index.vue 0 → 100644
<template>
<div class="template-container">
<div v-for="(item, index) in items" :key="index" :class="['template-item', item.content.status]"
:style="getItemStyle(item.content.status)">
<div class="template-item-content">
<div class="item-top-area">
<div class="top-mian-description">
<div class="item-title">{{ item.content.templateName }}</div>
<div class="item-status">已发布</div>
</div>
<div class="top-sub-description">
<span>医疗行业分类</span>
<span>五级</span>
<span>v5</span>
</div>
</div>
<div class="item-middle-area">{{ item.content.templateDesc }}</div>
<div class="item-bottom-area">
<div class="bottom-info">
<span>模板确认人: {{ item.content.modelConfirmUserName }}</span>
<span>模板确认时间: {{ item.content.modelConfirmTime }}</span>
</div>
<div class="botton-btn">
<el-button type="primary" class="off-line-btn">下线</el-button>
<el-button type="primary" class="templete-btn">模板训练</el-button>
<el-button type="primary" class="delete-btn">删除</el-button>
</div>
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
interface Item {
content: ItemContent;
}
interface ItemContent {
guid: string,
tenantGuid: string,
templateName: string,
templateDesc: string,
version: 0,
classifyGuid: string,
gradeGuid: string,
modelConfirmTime: string,
modelConfirmUserName: string,
metaGuids: string,
status: string
}
const items: Item[] = [
{
content: {
guid: '1',
tenantGuid: '1',
templateName: '医疗行业分类分级模板',
templateDesc: '使用于医疗行业的分类分级模板',
version: 0,
classifyGuid: '1',
gradeGuid: '1',
modelConfirmTime: '2021-09-01',
modelConfirmUserName: '张三',
metaGuids: '1',
status: 'published',
}
},
{
content: {
guid: '2',
tenantGuid: '2',
templateName: '模板2',
templateDesc: '模板2描述',
version: 0,
classifyGuid: '2',
gradeGuid: '2',
modelConfirmTime: '2021-09-02',
modelConfirmUserName: '李四',
metaGuids: '2',
status: 'running',
}
},
{
content: {
guid: '3',
tenantGuid: '3',
templateName: '模板3',
templateDesc: '模板3描述使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板使用于医疗行业的分类分级模板',
version: 0,
classifyGuid: '3',
gradeGuid: '3',
modelConfirmTime: '2021-09-03',
modelConfirmUserName: '王五',
metaGuids: '3',
status: 'pending',
}
},
{
content: {
guid: '4',
tenantGuid: '4',
templateName: '模板4',
templateDesc: '模板4描述',
version: 0,
classifyGuid: '4',
gradeGuid: '4',
modelConfirmTime: '2021-09-04',
modelConfirmUserName: '赵六',
metaGuids: '4',
status: 'published',
}
},
{
content: {
guid: '5',
tenantGuid: '5',
templateName: '模板5',
templateDesc: '模板5描述',
version: 0,
classifyGuid: '5',
gradeGuid: '5',
modelConfirmTime: '2021-09-05',
modelConfirmUserName: '钱七',
metaGuids: '5',
status: 'running',
}
},
];
const getItemStyle = (status: string) => {
let borderColor = '#1BA854'; // 默认绿色
switch (status) {
case 'published':
borderColor = '#1BA854';
break;
case 'running':
borderColor = '#FF991C';
break;
case 'pending':
borderColor = '#B2B2B2 ';
break;
}
return {
borderTop: `4px solid ${borderColor}`,
};
};
</script>
<style scoped lang="scss">
.template-container {
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.template-item {
width: 400px;
}
.template-item-content {
width: 100%;
height: 222px;
background: #FFFFFF;
border: 1px solid rgba(217, 217, 217, 1);
padding: 20px;
box-sizing: border-box;
display: flex;
flex-direction: column;
.item-top-area {
.top-mian-description {
display: flex;
justify-content: space-between;
align-items: center;
.item-title {
font-family: PingFangSC-Semibold;
font-size: 16px;
color: #212121;
line-height: 24px;
font-weight: 600;
}
.item-status {
border-radius: 2px;
font-size: 12px;
text-align: center;
line-height: 18px;
font-weight: 400;
padding: 1px 8px;
}
}
.top-sub-description {
margin-top: 9px;
display: flex;
/* 左对齐 */
justify-content: flex-start;
span {
background: #F5F5F5;
border: 1px solid rgba(217, 217, 217, 1);
border-radius: 2px;
display: inline-block;
padding: 1px 8px;
margin-right: 8px;
font-size: 12px;
color: #404040;
text-align: center;
line-height: 18px;
font-weight: 400;
}
}
}
.item-middle-area {
margin-top: 16px;
font-size: 14px;
color: #999999;
letter-spacing: 0;
line-height: 21px;
font-weight: 400;
height: 44px;
overflow: hidden;
display: -webkit-box;
display: -moz-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
text-overflow: ellipsis;
}
.item-bottom-area {
margin-top: 8px;
.bottom-info {
display: flex;
justify-content: space-between;
align-items: center;
span {
display: inline-block;
font-size: 14px;
color: #666666;
letter-spacing: 0;
line-height: 21px;
font-weight: 400;
}
}
.botton-btn {
margin-top: 13px;
.off-line-btn {
background-color: #fff;
font-size: 14px;
color: #4FA1A4;
}
.templete-btn,
.delete-btn {
background: #FFFFFF;
border: 1px solid rgba(217, 217, 217, 1);
font-size: 14px;
color: #212121;
}
}
}
}
.template-item.published .template-item-content .item-status {
color: #1BA854;
background: #F2FFF5;
border: 1px solid rgba(109, 209, 142, 1);
}
.template-item.running .template-item-content .item-status {
color: #FF991C;
background: #FFFBF2;
border: 1px solid rgba(255, 203, 120, 1);
}
.template-item.pending .template-item-content .item-status {
border: 1px solid rgba(217, 217, 217, 1);
color: #404040;
background: #F5F5F5;
}
</style>
src/router/index.ts
......@@ -124,8 +124,8 @@ router.beforeEach(async (to, from, next) => {
}
}
else {
if (to.name === 'home' || to.name == 'contactInfo' || to.name == 'register' || to.name == 'registerMobile' || to.name == 'homeDamRegister' || to.name == 'homeDamRegisterMobile' || to.name == 'homeDamFinance' || to.name == 'homeDamDataCircule' ||
to.name == 'homeDamDemand' || to.name == 'homeDamAlgorithm' || to.name == 'homeDamAlgorithmMobile' || to.name == 'homeDamMarket' || to.name == 'homeDamMarketMobile'
if (to.name === 'home' || to.name == 'contactInfo' || to.name == 'register' || to.name == 'registerMobile' || to.name == 'homeDamRegister' || to.name == 'homeDamRegisterMobile' || to.name == 'homeDamFinance' || to.name == 'homeDamDataCircule' ||
to.name == 'homeDamDemand' || to.name == 'homeDamAlgorithm' || to.name == 'homeDamAlgorithmMobile' || to.name == 'homeDamMarket' || to.name == 'homeDamMarketMobile'
|| to.name == 'homeDamDataCirculeMobile' || to.name == 'homeDamDemandMobile' || to.name == 'homeDamFinanceMobile') {
next()
}
......
src/router/modules/dataInventory.ts
......@@ -44,7 +44,7 @@ const routes: RouteRecordRaw[] = [
cache: true,
reuse: true,
editPage: true,
activeMenu: '/data-inventory/classify-grade-manage/template-config'
activeMenu: '/data-inventory/classify-grade-manage/template-config'
},
beforeEnter: (to, from) => {
if (to.query.classStandardName) {
......@@ -52,6 +52,25 @@ const routes: RouteRecordRaw[] = [
}
}
},
{
path: 'newCreate-template',
name: 'newCreateTemplate',
component: () => import('@/views/data_inventory/newCreateTemplate.vue'),
meta: {
title: '新增-',
sidebar: false,
breadcrumb: false,
cache: true,
reuse: true,
editPage: true,
activeMenu: '/data-inventory/classify-grade-manage/template-config'
},
beforeEnter: (to, from) => {
if (to.query.classStandardName) {
to.meta.title = `新增-${to.query.classStandardName}`;
}
}
},
],
}
]
......
src/types/components.d.ts
......@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
Table_tools: typeof import('./../components/Tools/table_tools.vue')['default']
Table_v2: typeof import('./../components/Table/table_v2.vue')['default']
Tabs: typeof import('./../components/Tabs/index.vue')['default']
TemplateItem: typeof import('./../components/TemplateItem/index.vue')['default']
Toolbar: typeof import('./../components/LineageGraph/toolbar.vue')['default']
Topbar: typeof import('./../components/LineageGraph/topbar.vue')['default']
Transfer: typeof import('./../components/Transfer/index.vue')['default']
......
src/views/data_inventory/classStandardEdit.vue
<route lang="yaml">
name: classStandardEdit //分类标准编辑
</route>
<script lang="ts" setup name="classStandardEdit">
import { ref, onMounted} from "vue";
import { ref, onMounted } from "vue";
import useUserStore from "@/store/modules/user";
import { useValidator } from '@/hooks/useValidator';
import { TableColumnWidth } from '@/utils/enum';
......@@ -69,26 +69,30 @@ const tableInfo = ref({
type: "btn",
width: 120,
btns: [
{ label: "编辑", value: "edit", click: (scope) => {
currTableInfo.value = scope.row;
drawerInfo.value.visible = true;
drawerInfo.value.header.title = '编辑分类';
classEditFormItems.value.forEach(item => {
item.default = scope.row[item.field]
})
} },
{ label: "删除", value: "delete", click: (scope) => {
proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
// deleteBizTerm([scope.row.guid]).then((res: any) => {
// if (res.code == proxy.$passCode) {
// getTableData();
// proxy.$ElMessage.success('该分类删除成功');
// } else {
// proxy.$ElMessage.error(res.msg);
// }
// });
})
} },
{
label: "编辑", value: "edit", click: (scope) => {
currTableInfo.value = scope.row;
drawerInfo.value.visible = true;
drawerInfo.value.header.title = '编辑分类';
classEditFormItems.value.forEach(item => {
item.default = scope.row[item.field]
})
}
},
{
label: "删除", value: "delete", click: (scope) => {
proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
// deleteBizTerm([scope.row.guid]).then((res: any) => {
// if (res.code == proxy.$passCode) {
// getTableData();
// proxy.$ElMessage.success('该分类删除成功');
// } else {
// proxy.$ElMessage.error(res.msg);
// }
// });
})
}
},
],
},
loading: false,
......@@ -103,7 +107,7 @@ const classEditFormItems = ref([{
default: '',
clearable: true,
required: true
}, {
}, {
label: '排序',
type: 'input',
placeholder: '请输入',
......@@ -146,8 +150,8 @@ const classEditFormItems = ref([{
type: 'switch',
field: 'state',
default: 'Y',
activeText:"有效",
inactiveText:"停用",
activeText: "有效",
inactiveText: "停用",
activeValue: 'Y',
inactiveValue: 'N'
}, {
......@@ -273,8 +277,8 @@ G6.registerNode('tree-node', {
textAlign: 'left',
textBaseline: 'middle',
fill: '#4FA1A4',
fontSize: 10,
fontFamily: 'simsun'
fontSize: 10,
fontFamily: 'simsun'
}
});
var bbox = text.getBBox();
......@@ -283,7 +287,7 @@ G6.registerNode('tree-node', {
group.addShape('circle', {
attrs: {
x: 95,
y: bbox.minX + bbox.height / 2-5,
y: bbox.minX + bbox.height / 2 - 5,
r: 5,
stroke: '#4FA1A4',
fill: '#fff',
......@@ -348,7 +352,7 @@ onMounted(() => {
data.collapsed = collapsed;
return true;
}
}, 'drag-canvas', 'zoom-canvas']
}, 'drag-canvas', 'zoom-canvas']
},
defaultNode: {
type: 'tree-node',
......@@ -409,7 +413,7 @@ onMounted(() => {
const { item, target } = evt;
const currentAnchor = target.get('name');
if (!currentAnchor) return;
// 设置一个全局属性，指定点击的是哪个图形元素
// 设置一个全局属性，指定点击的是哪个图形元素
});
})
......@@ -421,11 +425,12 @@ onMounted(() => {
<ContentWrap id="id-baseInfo" title="基础信息" description="" style="margin-top: 8px;">
<Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px; height: calc(100% - 161px)">
<ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description=""
style="margin-top:16px; height: calc(100% - 161px)">
<div class="tools_btns">
<el-button v-show="dataShowMethod == 'table'" type="primary" @click="newCreateClass">添加分类</el-button>
<el-button v-show="dataShowMethod == 'table'" @click="importClass">导入分类</el-button>
<el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button>
<el-button class="show-change-btn" @click="changeShowMethod">{{ '图形展示' }}</el-button>
</div>
<Table v-show="dataShowMethod == 'table'" :tableInfo="tableInfo" />
<div ref="shapeMain" class="shape-main" v-show="dataShowMethod != 'table'"></div>
......@@ -440,7 +445,6 @@ onMounted(() => {
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
......@@ -487,4 +491,4 @@ onMounted(() => {
.table_panel {
height: calc(100% - 58px) !important;
}
</style>
\ No newline at end of file
</style>
......
src/views/data_inventory/newCreateTemplate.vue 0 → 100644
<route lang="yaml">
name: newCreateTemplate //新增分级分类模板
</route>
<script lang="ts" setup name="newCreateTemplate">
import { ref } from "vue";
const fullscreenLoading = ref(false);
const isExpand = ref(true);
const classStandardFormItems = ref([{
label: '模板名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'templeteName',
default: '',
clearable: true,
required: true
}, {
label: '行业分类',
type: 'select',
placeholder: '请选择',
field: ' industryCategory',
default: '',
options: [], //TODO
required: true,
filterable: true,
clearable: true,
visible: true,
}, {
label: '分级标准',
type: 'select',
placeholder: '请选择',
field: ' gradingStandard',
default: '',
options: [], //TODO
required: true,
filterable: true,
clearable: true,
visible: true,
}]);
const dataShowMethod = ref('shape');
const tableInfo = ref({
id: "data-class-standard-table",
multiple: false,
fields: [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "数据库名称", field: "className", width: 160, },
{ label: "数据库名", field: "levelName", width: 120 },
{ label: "总表数", field: "state", type: "tag", width: 120, align: "center" },
{ label: "存储量（约/MB）", field: "description", },
{ label: "总字段数", field: "minLevel", width: 140 },
],
data: [{
guid: '1',
children: [{
guid: '1-1'
}]
}],
showPage: false,
loading: false,
});
const cancel = () => {
console.log('cancel');
};
const save = () => {
console.log('save');
};
</script>
<template>
<div class="container_wrap" v-loading="fullscreenLoading">
<div class="content_main">
<ContentWrap id="id-baseInfo" title="模板信息" description="" style="margin-top: 8px;" :expandSwicth=isExpand>
<Form ref="formRef" :itemList="classStandardFormItems" formId="main-model-edit" col="col3" />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
:expandSwicth=isExpand>
</ContentWrap>
</div>
<div class=" bottom_tool_wrap">
<el-button @click="cancel">取消</el-button>
<el-button type="primary" @click="save">保存</el-button>
</div>
</div>
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
.content_main {
height: calc(100% - 44px);
padding: 10px 16px;
}
</style>
src/views/data_inventory/templateConfig.vue
......@@ -9,6 +9,8 @@ import TableTools from '@/components/Tools/table_tools.vue';
import { MoreFilled } from "@element-plus/icons-vue";
import { commonPageConfig } from '@/components/PageNav/index';
import { useValidator } from '@/hooks/useValidator';
import TemplateItem from '@/components/TemplateItem/index.vue'
import { getTempleteClassifyData } from "@/api/modules/dataInventory";
const router = useRouter();
const { required } = useValidator();
......@@ -105,12 +107,12 @@ const searchClass = (val: any, clear: boolean = false) => {
classPage.value.curr = 1;
if (clear) {
classSearchItemList.value.map(item => item.default = '')
// classPage.value.planName = '';
// classPage.value.planName = '';
getClassListData();
return;
}
// classPage.value.planName = '';
getClassListData();
// classPage.value.planName = '';
getClassListData();
};
const newCreateClass = () => {
......@@ -218,6 +220,12 @@ const newCreateClassStandardDialogInfo = ref({
})
const newCreateTemplate = () => {
router.push({
name: 'newCreateTemplate',
query: {
classStandardName: '分类分级模板'
}
});
}
......@@ -225,8 +233,42 @@ const newCreateGrade = () => {
}
/**
* 分类分级模板
*
*/
const pageInfo = ref({
limit: 50,
curr: 1,
sizes: [
{ label: "10", value: 10 },
{ label: "50", value: 50 },
{ label: "100", value: 100 },
{ label: "150", value: 150 },
{ label: "200", value: 200 },
],
type: "normal",
rows: 0,
})
const pageChange = (info) => {
pageInfo.value.curr = Number(info.curr);
pageInfo.value.limit = Number(info.limit);
getClassificationTemplateList();
}
const getClassificationTemplateList = async () => {
const params = {
pageSize: pageInfo.value.limit,
pageIndex: pageInfo.value.curr,
}
const res = await getTempleteClassifyData(params);
console.log(res);
}
onBeforeMount(() => {
getClassListData();
getClassificationTemplateList();
})
</script>
......@@ -241,6 +283,12 @@ onBeforeMount(() => {
<el-button type="primary" @click="newCreateTemplate">新增模板</el-button>
</div>
</div>
<div class="content">
<TemplateItem />
</div>
<div class="botton-page-nav">
<PageNav :class="[pageInfo.type]" :pageInfo="pageInfo" @pageChange="pageChange" />
</div>
</div>
<div class="panel" v-show="tabsInfo.activeName == 'classStandard'">
<div class="table_tool_wrap">
......@@ -282,7 +330,40 @@ onBeforeMount(() => {
</div>
</div>
<div class="panel" v-show="tabsInfo.activeName == 'gradeStandard'">
<el-button type="primary" @click="newCreateGrade">新增分级</el-button>
<div class="tools_btns">
<el-button type="primary" @click="newCreateGrade">新增分级</el-button>
</div>
<div class="data-content" v-loading="classListDataLoading">
<div class="card-content" v-for="item in classListData" :key="item.guid" @click="handleClassDataClick(item)">
<div class="type-btn">
<el-popover v-model="cardBtnVisible" placement="bottom" width="96" trigger="click"
popper-class="tree-item-edit-menu" :show-arrow="false" :hide-after="0">
<template #reference>
<el-icon color="#666" @click.stop="cardBtnVisible = true">
<MoreFilled />
</el-icon>
</template>
<div class="levitation-ul">
<span class="levitation-li" @click="handleClassDataClick(item)">配置</span>
<span class="levitation-li" @click="handleClassDataEdit(item)">编辑</span>
<span class="levitation-li" @click="handleClassDataDel(item)">删除</span>
</div>
</el-popover>
</div>
<el-icon class="title-icon">
<svg-icon name="folder" />
</el-icon>
<div class="title">{{ item.name }}</div>
<div class="desc-row">
<div class="desc">{{ '分级标准' }}</div>
<div class="desc">{{ item.updateTime }}</div>
</div>
</div>
<div v-if="!classListData.length" class="card-noData">
<img src="../../assets/images/no-data.png" :style="{ width: '96px', height: '96px' }" />
<span>暂无分类标准</span>
</div>
</div>
</div>
<Dialog_form :dialogConfigInfo="newCreateClassStandardDialogInfo" />
</div>
......@@ -295,7 +376,25 @@ onBeforeMount(() => {
.panel {
height: calc(100% - 51px);
display: flex;
flex-direction: column;
.content {
flex: 1;
height: 100%;
overflow-y: auto;
}
.botton-page-nav {
position: sticky;
bottom: 0;
width: 100%;
background-color: #fff;
z-index: 10;
}
}
}
:deep(.table-tools) {
......@@ -384,4 +483,4 @@ onBeforeMount(() => {
}
}
}
</style>
\ No newline at end of file
</style>
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!