Skip to content

csbr-daop / fe-data-trusted-space

Go to a project
Toggle navigation
Toggle navigation pinning
a4576de4 by lxs
Options

Merge branch 'develop' of http://117.78.60.236:8000/csbr-daop/fe-data-asset-management into develop

2 parents 17618d9c 9a4f1f8c
Expand all
Inline Side-by-side
Showing 13 changed files with 1276 additions and 12 deletions
.env.development
......@@ -3,7 +3,8 @@ VITE_APP_TITLE = 数据资产管理系统
# 接口域名
# VITE_API_BASEURL = https://www.zgsjzc.com/api
# VITE_API_BASEURL = https://swzl-test.csbr.cn/api
VITE_API_BASEURL = http://10.4.82.1:28052/
# VITE_API_BASEURL = http://10.4.82.30:8052/
VITE_API_BASEURL = http://10.4.82.1:28052/
# 平台用户 接口请地址
VITE_APP_USER_API_BASEURL = gateway-server/user
# 系统管理 接口地址
......@@ -23,6 +24,9 @@ VITE_APP_PLAN_BASEURL = ms-daop-jgjf-data-plan-service
#数据质量接口地址
VITE_APP_QUALITY_BASEURL = ms-daop-data-quality-service
#数据盘点接口地址
VITE_APP_CHECK_BASEURL = ms-daop-zcgl-data-inventory
#门户接口
VITE_API_PORTALURL = https://swzl-test.zgsjzc.com/portal
......
components.d.ts
......@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
Table_tools: typeof import('./src/components/Tools/table_tools.vue')['default']
Table_v2: typeof import('./src/components/Table/table_v2.vue')['default']
Tabs: typeof import('./src/components/Tabs/index.vue')['default']
TemplateItem: typeof import('./src/components/TemplateItem/index.vue')['default']
Toolbar: typeof import('./src/components/LineageGraph/toolbar.vue')['default']
Topbar: typeof import('./src/components/LineageGraph/topbar.vue')['default']
Transfer: typeof import('./src/components/Transfer/index.vue')['default']
......
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";
/**
* 获取数据级别
* @param {Object}
* { paramCode: "DATA-CLASSIFY" }
* DATA-CLASSIFY 数据类别
* DATA-GRADE 数据级别
*/
export const getLargeCategoryList = (data) => request({
url:`${import.meta.env.VITE_APP_API_BASEURL}/data-dict/get-data-list`,
method: 'post',
data
})
/** 分类分级模板数据 */
export const getTempleteClassifyData = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/cg-template/page-list`,
method: 'post',
data
})
/** 新增分级
*
* @param {Object}
* @path /classify-grade/save
*/
export const saveClassifyGrad = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/save`,
method: 'post',
data
})
/** 删除分级
* @param {Object}
* @path /classify-grade/delete
* */
export const deleteClassifyGrad = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/delete`,
method: 'delete',
headers: {
'Content-Type': 'multipart/form-data',
},
data
})
/** 修改分级
* @param {Object}
* @path /classify-grade/update
* */
export const updateClassifyGrad = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/update`,
method: 'post',
data
})
/**
* 分级列表
* @param {Object}
* @path /classify-grade/page-list
*/
export const getClassifyGradList = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/classify-grade/page-list`,
method: 'post',
data
})
/**
* 分级新增
* @param {Object}
* @path /grade/save
*/
export const saveGrade = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/save`,
method: 'post',
data
})
/**
* 分级更新
* @param {Object}
* @path /grade/update
* */
export const updateGrade = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/update`,
method: 'post',
data
})
/**
* 分级列表
* @param {Object}
* @path /grade/page-list
*/
export const getGradeList = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/page-list`,
method: 'post',
data
})
/**
* 批量删除分级
* @param {Array}
* @path /grade/delete
* */
export const deleteGrade = (data) => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/delete`,
method: 'delete',
data
})
/*---------------------------------分类标准 tab -----------------------------*/
/**
* 分级树形结构
* @param no params
* @path /grade/tree-list
*/
export const getGradeTreeList = () => request({
url: `${import.meta.env.VITE_APP_CHECK_BASEURL}/grade/tree-list`,
method: 'post',
})
src/api/modules/queryService.ts
......@@ -46,8 +46,13 @@ export const getImageUrl = (params) => request({
})
/** 查看图片 */
// export const getImageContent = (params) => request({
// url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic?filePath=${params}`,
// method: 'get',
// responseType: 'blob'
// });
export const getImageContent = (params) => request({
url: `${import.meta.env.VITE_APP_API_BASEURL}/obs`,
url: `${import.meta.env.VITE_APP_API_BASEURL}/obs/view-pic`,
method: 'get',
responseType: 'blob'
});
......
src/router/modules/dataInventory.ts
......@@ -73,6 +73,58 @@ 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}`;
}
}
},
{
path: 'newCreate-class',
name: 'newCreateClass',
component: () => import('@/views/data_inventory/newCreateClass.vue'),
meta: {
title: '新增分类',
sidebar: false,
breadcrumb: false,
cache: true,
reuse: true,
editPage: true,
activeMenu: '/data-inventory/classify-grade-manage/template-config'
},
},
{
path: 'classifyGrad-edit',
name: 'classifyGradEdit',
component: () => import('@/views/data_inventory/classifyGradEdit.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.classClassifyGradName) {
to.meta.title = `编辑-${to.query.classClassifyGradName}`;
}
}
},
],
}
]
......
src/views/data_inventory/classStandardEdit.vue
......@@ -3,7 +3,7 @@
</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,15 +69,18 @@ const tableInfo = ref({
type: "btn",
width: 120,
btns: [
{ label: "编辑", value: "edit", click: (scope) => {
{
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) => {
}
},
{
label: "删除", value: "delete", click: (scope) => {
proxy.$openMessageBox("此操作将永久删除该分类, 是否继续", () => {
// deleteBizTerm([scope.row.guid]).then((res: any) => {
// if (res.code == proxy.$passCode) {
......@@ -88,7 +91,8 @@ const tableInfo = ref({
// }
// });
})
} },
}
},
],
},
loading: false,
......@@ -146,8 +150,8 @@ const classEditFormItems = ref([{
type: 'switch',
field: 'state',
default: 'Y',
activeText:"有效",
inactiveText:"停用",
activeText: "有效",
inactiveText: "停用",
activeValue: 'Y',
inactiveValue: 'N'
}, {
......@@ -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',
......@@ -401,6 +405,10 @@ onMounted(() => {
name: '装备制造'
}]
});
graph.value.on('node:mouseenter', (e) => {
const nodeItem = e.item // 获取鼠标进入的节点元素对象
console.log('鼠标移入', nodeItem._cfg)
})
graph.value.render();
graph.value.fitView();
graph.value.on('node:click', (evt: any) => {
......@@ -421,7 +429,8 @@ 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>
......@@ -440,7 +449,6 @@ onMounted(() => {
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
......
src/views/data_inventory/classifyGradEdit.vue 0 → 100644
<route lang="yaml">
name: classifyGradEdit //新增分级分类模板
</route>
<script lang="ts" setup name="classifyGradEdit">
import router from "@/router";
import { ref } from "vue";
import { saveGrade, getGradeList, deleteGrade, getLargeCategoryList, updateGrade } from '@/api/modules/dataInventory';
onMounted(() => {
getGradeListData();
Promise.all([getDataGrade(), getDataClassify()]);
});
// 获取分级列表
const getGradeListData = async () => {
const params = {
pageIndex: 1,
pageSize: -1,
classifyGradeGuid: guid
}
const res: any = await getGradeList(params);
if (res.code == proxy.$passCode) {
tableInfo.value.data = res.data.records;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 获取数据类别
const getDataGrade = async () => {
const params = {
paramCode: "DATA-CLASSIFY"
}
const res: any = await getLargeCategoryList(params);
if (res.code == proxy.$passCode) {
// 提出value和label 作为select的options
const options = res.data.map((item: any) => ({
label: item.paramName,
value: item.paramValue
}));
newCreateGradeFormItems.value[1].options = options;
classDataRef.value = options;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 获取数据级别
const getDataClassify = async () => {
const params = {
paramCode: "DATA-GRADE"
}
const res: any = await getLargeCategoryList(params);
if (res.code == proxy.$passCode) {
// 提出value和label 作为select的options
const options = res.data.map((item: any) => ({
label: item.paramName,
value: item.paramValue
}));
newCreateGradeFormItems.value[0].options = options;
// 这里需要过滤已经在表格中数据级别
gradeDataRef.value = options;
} else {
proxy.$ElMessage.error(res.msg);
}
}
// 新增过滤数据级别
const filterDataGrade = () => {
const selectedDataGrade = new Set();
tableInfo.value.data.forEach((item: any) => {
if (item.dataGrade) {
selectedDataGrade.add(item.dataGrade);
}
});
const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
(newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
};
// 编辑过滤数据级别，需包含当前数据级别，不排除自己
const filterDataGradeEdit = (dataGrade: string) => {
const selectedDataGrade = new Set();
tableInfo.value.data.forEach((item: any) => {
if (item.dataGrade) {
selectedDataGrade.add(item.dataGrade);
}
});
// 移除当前数据级别dataGrade
selectedDataGrade.delete(dataGrade);
console.log(selectedDataGrade,);
const filteredOptions = gradeDataRef.value.filter(option => !selectedDataGrade.has(option.value));
(newCreateGradeFormItems.value[0].options as any[]) = filteredOptions;
};
const tableRef = ref();
const classDataRef = ref();
const gradeDataRef = ref();
const fullscreenLoading = ref(false);
const editClassifyGradeGuid = ref('');
const { proxy } = getCurrentInstance() as any;
const guidArray = ref<any[]>([]);
// 获取query参数 中的guid
const guid = router.currentRoute.value.query.guid;
const tableInfo = ref({
id: "data-class-standard-table",
multiple: true,
fields: [
{ label: "序号", field: 'orderNum', width: 56, align: "center" },
{
label: "数据级别", field: "dataGrade", width: 120, getName: (scope) => {
let dataGrade = scope.row.dataGrade;
return dataGrade + '级';
}
},
{
label: "数据类别", field: "dataClassify", width: 120, getName: (scope) => {
let dataClassify = scope.row.dataClassify;
return classDataRef.value.find((item: any) => item.value === dataClassify)?.label;
}
},
{ label: "分级描述", field: "gradeDesc", align: "left", },
],
actionInfo: {
label: "操作",
type: "btn",
width: 120,
btns: [
{
label: "编辑", value: "edit", click: (scope) => {
console.log(scope);
filterDataGradeEdit(scope.row.dataGrade);
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeStandardDialogInfo.value.title = '编辑分类';
newCreateGradeFormItems.value.forEach(item => {
item.default = scope.row[item.field];
})
editClassifyGradeGuid.value = scope.row.guid;
}
},
{
label: "删除", value: "delete", click: (scope) => {
guidArray.value = []; // 重置数组
guidArray.value.push(scope.row.guid);
batchRemobe();
}
},
],
},
data: [],
showPage: false,
loading: false,
});
// 选择勾选的数据
const onTableSelectChange = async (selection: any[]) => {
guidArray.value = []; // 重置数组
selection.forEach((item: any) => {
guidArray.value.push(item.guid);
});
};
// 批量删除
const batchRemobe = async () => {
// 批量删除,增加confirm确认弹窗
if (guidArray.value.length == 0) {
proxy.$ElMessage({
type: 'warning',
message: '请选择要删除的数据'
})
return;
}
// confirm弹窗
proxy.$confirm('是否删除选中数据?', '提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
type: 'warning'
}).then(async () => {
const res: any = await deleteGrade(guidArray.value);
if (res.code == proxy.$passCode) {
proxy.$ElMessage({
type: 'success',
message: '删除成功'
})
getGradeListData();
} else {
proxy.$ElMessage.error(res.msg);
}
}).catch(() => {
proxy.$ElMessage({
type: 'info',
message: '已取消删除'
});
});
};
/**弹窗配置 */
const newCreateGradeFormItems = ref([{
label: '数据级别',
type: 'select',
placeholder: '请选择',
field: 'dataGrade',
default: '',
options: gradeDataRef.value,
required: true,
filterable: true,
clearable: true,
visible: true,
},
{
label: '数据类别',
type: 'select',
placeholder: '请选择',
field: 'dataClassify',
default: '',
options: [],
required: true,
filterable: true,
clearable: true,
visible: true,
},
{
label: '序号',
type: 'input',
maxlength: 19,
placeholder: '请输入',
field: 'orderNum',
default: '',
clearable: true,
required: true,
regexp: /\D/g
},
{
label: '分级描述',
type: 'textarea',
maxlength: 50,
placeholder: '分类分级的描述说明',
field: 'gradeDesc',
default: '',
clearable: true,
required: false,
block: true,
}]);
const newCreateGradeFormRules = ref({
dataGrade: [
{ required: true, message: '请选择数据级别', trigger: 'change' }
],
orderNum: [
{ required: true, message: '请输入序号', trigger: 'blur' }
],
dataClassify: [
{ required: true, message: '请选择数据类别', trigger: 'change' }
]
});
const newCreateGradeStandardDialogInfo = ref({
visible: false,
size: 860,
title: "添加分类",
type: "",
formInfo: {
id: "grade-form",
items: newCreateGradeFormItems.value,
rules: newCreateGradeFormRules.value,
},
submitBtnLoading: false,
btns: {
cancel: () => {
newCreateGradeStandardDialogInfo.value.visible = false;
},
submit: async (btn, info) => {
console.log(info, guid);
newCreateGradeStandardDialogInfo.value.submitBtnLoading = true;
if (newCreateGradeStandardDialogInfo.value.title === '编辑分类') {
const params = {
...info,
guid: editClassifyGradeGuid.value,
classifyGradeGuid: guid
}
const res: any = await updateGrade(params);
if (res.code == proxy.$passCode) {
proxy.$ElMessage({
type: 'success',
message: '修改分类成功'
})
getGradeListData();
newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
newCreateGradeStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
return;
} else {
const params = {
...info,
classifyGradeGuid: guid
}
const res: any = await saveGrade(params);
if (res.code == proxy.$passCode) {
proxy.$ElMessage({
type: 'success',
message: '新增分类成功'
})
getGradeListData();
newCreateGradeStandardDialogInfo.value.submitBtnLoading = false;
newCreateGradeStandardDialogInfo.value.visible = false;
} else {
proxy.$ElMessage.error(res.msg);
}
}
}
}
})
const newStandard = () => {
filterDataGrade();
newCreateGradeStandardDialogInfo.value.visible = true;
newCreateGradeFormItems.value.forEach(item => item.default = '');
}
</script>
<template>
<div class="container_wrap" v-loading="fullscreenLoading">
<div class="content_main">
<div class="table-top-btns">
<el-button type="primary" @click="newStandard">新增标准</el-button>
<el-button @click="batchRemobe">批量删除</el-button>
</div>
<Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
</div>
<Dialog_form :dialogConfigInfo="newCreateGradeStandardDialogInfo" />
</div>
</template>
<style lang="scss" scoped>
.container_wrap {
padding: 0px;
}
.content_main {
height: calc(100% - 44px);
padding: 17px 16px 10px 16px;
.table-top-btns {
display: flex;
margin-bottom: 12px;
}
}
</style>
src/views/data_inventory/newCreateClass.vue 0 → 100644
<route lang="yaml">
name: newCreateClass //新增分级分类模板
</route>
<script lang="ts" setup name="newCreateClass">
import router from "@/router";
import { getMetaDataBase } from '@/api/modules/dataMetaService';
import { ref } from "vue";
onMounted(async () => {
const params = {
pageIndex: 1,
pageSize: -1,
}
const res = await getMetaDataBase(params)
console.log(res);
});
// 表单引用
const formRef = ref();
const tableRef = ref();
const fullscreenLoading = ref(false);
const isExpand = ref(true);
const newCreateClassFormItems = ref([{
label: '分类名称',
type: 'input',
maxlength: 50,
placeholder: '请输入',
field: 'categoryName',
default: '',
clearable: true,
required: true
}, {
label: '引用分级标准',
type: 'select',
placeholder: '请选择',
field: 'ReferenceGradingStandard',
default: '',
options: [], //TODO
required: true,
filterable: true,
clearable: true,
visible: true,
}]);
const formRules = ref({
templeteName: [
{ required: true, message: '请输入模板名称', trigger: 'blur' },
{ max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
],
industryCategory: [
{ required: true, message: '请选择行业分类', trigger: 'change' }
],
gradingStandard: [
{ required: true, message: '请选择分级标准', trigger: 'change' }
]
});
const tableInfo = ref({
id: "data-class-standard-table",
fields: [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "层级", field: "databaseNameZh", width: 160, },
{ label: "状态", field: "databaseName", width: 120, },
{ label: "定义说明", field: "tableCount", width: 120, align: "right", },
{ label: "最低安全级别", field: "storageCapacities", align: "right", width: 220, },
{ label: "创建时间", field: "columns", width: 140, align: "right", },
],
actionInfo: {
show: false,
},
data: [
{
index: 1,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 2,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 3,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 4,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 5,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 6,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
],
showPage: false,
loading: false,
});
const onTableSelectChange = (selection: any[]) => {
console.log(selection);
};
const cancel = () => {
// 返回上一页路由
router.back();
};
const save = async () => {
console.log('save');
// 校验表单
const res = formRef.value;
res.ruleFormRef.validate((valid: any) => {
if (valid) {
// 表单校验通过
console.log('表单校验通过');
} else {
console.log('表单校验不通过');
return false;
}
});
};
</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="newCreateClassFormItems" formId="main-model-edit" col="col3" :rules=formRules />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="分类标准" description="" style="margin-top:16px;"
:expandSwicth=isExpand>
<div class="table-content_wrap">
<Table ref="tableRef" :tableInfo="tableInfo" />
</div>
</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;
.table-content_wrap {
width: 100%;
height: 213px;
}
}
.bottom_tool_wrap {
display: flex;
justify-content: center;
border-top: 1px solid #D9D9D9;
padding-top: 8px;
}
</style>
src/views/data_inventory/newCreateTemplate.vue 0 → 100644
<route lang="yaml">
name: newCreateTemplate //新增分级分类模板
</route>
<script lang="ts" setup name="newCreateTemplate">
import router from "@/router";
import { getMetaDataBase } from '@/api/modules/dataMetaService';
import { ref } from "vue";
onMounted(async () => {
const params = {
pageIndex: 1,
pageSize: -1,
}
const res = await getMetaDataBase(params)
console.log(res);
});
// 表单引用
const formRef = ref();
const tableRef = ref();
const fullscreenLoading = ref(false);
const isExpand = ref(true);
const newCreateTemplateFormItems = 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 formRules = ref({
templeteName: [
{ required: true, message: '请输入模板名称', trigger: 'blur' },
{ max: 50, message: '长度在 50 个字符以内', trigger: 'blur' }
],
industryCategory: [
{ required: true, message: '请选择行业分类', trigger: 'change' }
],
gradingStandard: [
{ required: true, message: '请选择分级标准', trigger: 'change' }
]
});
const tableInfo = ref({
id: "data-class-standard-table",
multiple: true,
fields: [
{ label: "序号", type: "index", width: 56, align: "center" },
{ label: "数据库名称", field: "databaseNameZh", width: 160, },
{ label: "数据库名", field: "databaseName", width: 120, },
{ label: "总表数", field: "tableCount", width: 120, align: "right", },
{ label: "存储量（约/MB）", field: "storageCapacities", align: "right", width: 220, },
{ label: "总字段数", field: "columns", width: 140, align: "right", },
],
actionInfo: {
show: false,
},
data: [
{
index: 1,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 2,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 3,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 4,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 5,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
{
index: 6,
databaseNameZh: "数据库名称",
databaseName: "数据库名",
tableCount: 0,
storageCapacities: 0,
columns: 0,
},
],
showPage: false,
loading: false,
});
const onTableSelectChange = (selection: any[]) => {
console.log(selection);
};
const cancel = () => {
// 返回上一页路由
router.back();
};
const save = async () => {
console.log('save');
// 校验表单
const res = formRef.value;
res.ruleFormRef.validate((valid: any) => {
if (valid) {
// 表单校验通过
console.log('表单校验通过');
} else {
console.log('表单校验不通过');
return false;
}
});
};
</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="newCreateTemplateFormItems" formId="main-model-edit" col="col3"
:rules=formRules />
</ContentWrap>
<ContentWrap id="id-classStandard" class="detail-content" title="选择元数据" description="" style="margin-top:16px;"
:expandSwicth=isExpand>
<div class="table-content_wrap">
<Table ref="tableRef" :tableInfo="tableInfo" @tableSelectionChange="onTableSelectChange" />
</div>
</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;
.table-content_wrap {
width: 100%;
height: 213px;
}
}
.bottom_tool_wrap {
display: flex;
justify-content: center;
border-top: 1px solid #D9D9D9;
padding-top: 8px;
}
</style>
src/views/data_inventory/templateItem.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>
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!