Skip to content

csbr-daop / fe-data-trusted-space

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

分类分级任务bug修改

1 parent c7b77154
Inline Side-by-side
Showing 6 changed files with 144 additions and 43 deletions
src/components/Dialog/index.vue
......@@ -684,7 +684,7 @@ defineExpose({
@radioGroupChange="radioGroupChange" @selectChange="formSelectChange" @toolBtnClick="formToolBtnClick"
@checkboxChange="checkboxChange" @switchChange="switchChange" @btnClick="btnClick"
@treeSelectLoad="treeSelectLoad" @treeSelectNodeChange="treeSelectNodeChange"
@scheduleChange="scheduleChange" @inputChange="formInputChange" />
@scheduleChange="scheduleChange" @inputChange="formInputChange" @cascaderChange="cascaderChange" />
<template v-if="con.note">
<div class="sql-note">{{ con.note }}</div>
</template>
......
src/components/Tools/table_search.vue
......@@ -84,10 +84,15 @@ const handleTreeSelectNodeClick = (node, item) => {
}
const cascaderChange = (val, item) => {
emits("cascaderChange", val, item);
if(item.blur){
const formCascader = formCascaderRef.value[0] || formCascaderRef.value;
formCascader.togglePopperVisible(false)
}
}
const inputChange = (val) => {
onSubmit()
}
const formCascaderRef = ref()
onMounted(() => {
props.init && onSubmit()
})
......@@ -197,7 +202,7 @@ onMounted(() => {
:show-all-levels="item.showAllLevels ?? true" :clearable="item.clearable"
:filterable="item.filterable ?? false" :collapse-tags="item.collapse ?? false"
:collapse-tags-tooltip="item.tagsTooltip ?? false" :max-collapse-tags="item.maxTags ?? 1"
:disabled="item.disabled ?? false" @change="(val) => cascaderChange(val, item)" />
:disabled="item.disabled ?? false" :popper-class="item.popperClass ?? ''" @change="(val) => cascaderChange(val, item)" />
</template>
<template v-else>
<el-input v-model.trim="formInline[item.field]" :placeholder="item.placeholder" :clearable="item.clearable"
......
src/components/Tools/table_tools.vue
......@@ -44,8 +44,8 @@ const loadMore = () => {
const treeSelectLoad = (node, resolve, item) => {
emits("treeSelectLoad", node, resolve, item);
};
const selectChange = (val, row) => {
emits("selectChange", val, row);
const selectChange = (val, row, info) => {
emits("selectChange", val, row, info);
};
const handleTreeSelectNodeChange = (node, item) => {
emits("treeSelectNodeChange", node, item);
......
src/views/data_inventory/taskConfig.vue
......@@ -35,7 +35,7 @@ const tableInfo = ref({
label: "目录名称", field: "cgDirName", width: 120, type: "text_btn", columClass: 'text_btn', click: (scope) => {
router.push({
name: "classifyGradeCatalogue",
// query: { guid: scope.row.damGuid },
query: { name: scope.row.cgDirName },
});
}
},
......
src/views/data_inventory/taskDetail.vue
......@@ -6,7 +6,7 @@
import { ref, onMounted } from "vue";
import { useRouter, useRoute } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
import { Search, Warning } from "@element-plus/icons-vue";
import { Search, Warning, ArrowUp } from "@element-plus/icons-vue";
import { tagMethod, tagType, changeNum } from "@/utils/common";
import TableTools from '@/components/Tools/table_tools.vue';
import {
......@@ -41,7 +41,7 @@ const treeInfo: any = ref({
id: "data-pickup-tree",
filter: true,
queryValue: "",
queryPlaceholder: "输入组织名称搜索",
queryPlaceholder: "输入分类名称搜索",
props: {
label: "classifyName",
value: "classifyDetailGuid",
......@@ -51,7 +51,7 @@ const treeInfo: any = ref({
expandOnNodeClick: false,
data: [],
});
const titleClose = ref(false)
const taskDetail: any = ref({})
const fieldCounts = ref({})
const tabsInfo = ref({
......@@ -163,8 +163,10 @@ const fieldItemList = ref([
label: "classifyName",
value: "classifyDetailGuid",
},
// popperClass: 'strictiy_cascader',
filterable: true,
clearable: true,
blur: true
},
{
type: "select",
......@@ -180,7 +182,8 @@ const fieldItemList = ref([
clearable: true,
},
]);
const tableToolRef = ref();
const toolH = ref(49);
const page = ref({
limit: 50,
curr: 1,
......@@ -192,7 +195,6 @@ const page = ref({
{ label: "200", value: 200 },
],
});
const currTableData: any = ref({});
const sheetTableInfo = ref({
id: "mapping-table",
......@@ -241,7 +243,7 @@ const fieldTableInfo = ref({
label: "分类", field: "classifyDetailGuid", width: 280,
type: "cascader",
options: [],
showAllLevels: false,
showAllLevels: true,
props: {
checkStrictly: false,
expandTrigger: "hover",
......@@ -261,9 +263,12 @@ const fieldTableInfo = ref({
}
},
{
label: "分级", field: "gradeDetailName", width: 120, type: 'select', options: [], props: { label: 'gradeName', value: 'guid' },
label: "分级", field: "gradeDetailGuid", width: 80, type: 'select', options: [], props: { label: 'gradeName', value: 'guid' },
getName: (scope) => {
return scope.row.gradeDetailName || '--'
}
},
{ label: "标签", field: "label", width: 96 },
{ label: "标签", field: "label", width: 120 },
{ label: "规则", field: "ruleDetail", width: 200 },
{ label: "表英文名", field: "tableName", width: 200 },
{ label: "表中文名", field: "tableChName", width: 120 },
......@@ -292,7 +297,7 @@ const formItems = ref([
field: "classifyName",
default: [],
options: [],
showAllLevels: false,
showAllLevels: true,
props: {
checkStrictly: false,
expandTrigger: "hover",
......@@ -612,6 +617,9 @@ const btnClick = async (btn, bType = null) => {
if (type == 'path') {
router.push({
name: "classifyGradeCatalogue",
query: {
name: taskDetail.value.cgDirName
}
});
} else if (type == 'batch') {
if (selectRowData.value.length == 0) {
......@@ -679,19 +687,30 @@ const searchField = (val: any, clear: boolean = false) => {
getFieldTableData();
};
const cascaderChange = (val, row) => {
const cascaderChange = (val, info) => {
if (dialogInfo.value.visible) {
const cascaderData = dialogRef.value.getCascaderCheckedData();
formItems.value[1].default = cascaderData.length ? cascaderData[0].data.gradeGuid : '';
} else {
if (info && info.row) {
const cascaderData = getCascaderCheckedData();
info.row.gradeDetailGuid = cascaderData.length ? cascaderData[0].data.gradeGuid : '';
} else {
treeInfoRef.value.expandedKey = val || ['all'];
treeInfoRef.value.setCurrentKey(val?.at(-1) || 'all');
console.log('cascader', val)
getFieldTableData();
}
}
};
const selectChange = (val, item, scope = null) => {
if (scope) {
if (scope && item.field == 'gradeDetailName') {
let row = scope.row;
row.gradeGuid = val || '';
row.gradeDetailName = val ? item.options.find(i => i.guid == val)?.gradeName : '';
} else {
const params: any = scope;
if (tabsInfo.value.activeName == 'sheet') {
if (!val) {
sheetItemList.value[1].default = '';
......@@ -699,6 +718,7 @@ const selectChange = (val, item, scope = null) => {
} else {
sheetItemList.value[1].disabled = false;
}
params.tableGuid = '';
} else {
if (item.field == "databaseGuid") {
if (!val) {
......@@ -708,7 +728,10 @@ const selectChange = (val, item, scope = null) => {
fieldItemList.value[3].disabled = true;
} else {
fieldItemList.value[2].disabled = false;
params.tableGuid && (fieldItemList.value[3].disabled = false);
}
params.tableGuid = '';
params.fieldGuid = '';
} else {
if (!val) {
fieldItemList.value[3].default = '';
......@@ -716,6 +739,7 @@ const selectChange = (val, item, scope = null) => {
} else {
fieldItemList.value[3].disabled = false;
}
params.fieldGuid = '';
}
}
if (val) {
......@@ -763,7 +787,10 @@ onBeforeMount(() => {
})
onMounted(() => {
toolH.value = tableToolRef.value.offsetHeight;
window.addEventListener('resize', function () {
toolH.value = tableToolRef.value.offsetHeight;
})
})
</script>
......@@ -772,7 +799,7 @@ onMounted(() => {
<div class="container_wrap full flex" v-loading="loading">
<div class="main_wrap full">
<div class="content_main panel">
<div class="template_panel">
<div class="template_panel" :class="{ active: !titleClose }">
<div class="panel_title">
<div class="title_wrap">
<span class="title_text">{{ taskDetail.taskName }}</span>
......@@ -780,6 +807,12 @@ onMounted(() => {
{{ filterVal(taskDetail.confirmStatus, 'confirmStatus') }}
</el-tag>
</div>
<div class="title_btn" @click="titleClose = !titleClose">
<el-icon :class="{ active: !titleClose }">
<ArrowUp />
</el-icon>
<span class="title_btn_item">{{ titleClose ? '展开' : '收起' }}</span>
</div>
</div>
<div class="title_desc">
<div class="desc_group">
......@@ -804,7 +837,8 @@ onMounted(() => {
</div>
<div class="desc_item">
<span class="desc_label">元数据名称：</span>
<span class="desc_value">{{ (taskDetail.metaNames || []).length ? taskDetail.metaNames.join(',') : '--'
<span class="desc_value">{{ (taskDetail.metaNames || []).length ? taskDetail.metaNames.join(',') :
'--'
}}</span>
</div>
</div>
......@@ -824,7 +858,7 @@ onMounted(() => {
<span>个字段</span>
</p>
</div>
<div class="panel_content">
<div class="panel_content" :class="{ full: titleClose }">
<Tabs class="panel_tabs" :tabs-info="tabsInfo" @tab-change="tabChange" />
<div class="panel" v-show="tabsInfo.activeName == 'sheet'">
<div class="table_tool_wrap">
......@@ -840,7 +874,7 @@ onMounted(() => {
<Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
</div>
<div class="box_right">
<div class="table_tool_wrap">
<div class="table_tool_wrap" ref="tableToolRef">
<TableTools ref="fieldSearchRef" :searchItems="fieldItemList" :searchId="'field-search'" :init="false"
@selectChange="selectChange" @cascaderChange="cascaderChange" @search="searchField" />
<div class="tools_btns">
......@@ -851,7 +885,7 @@ onMounted(() => {
</div>
</div>
</div>
<div class="table_panel_wrap panel">
<div class="table_panel_wrap panel" :style="{ height: 'calc(100% - ' + toolH + 'px)' }">
<div class="table_panel" v-loading="fieldTableInfo.loading">
<el-table ref="costTableRef" :data="fieldTableInfo.data" border :height="'100%'"
style="width: 100%; display: inline-block" :style="{ 'max-height': 'calc(100% - 44px)' }"
......@@ -884,7 +918,8 @@ onMounted(() => {
<el-cascader v-else-if="item.type == 'cascader' && scope.row['STATE'] === 'Running'"
ref="cascaderRef" v-model="scope.row[item.field]" :options="item.options" :props="item.props"
:show-all-levels="item.showAllLevels ?? true" :disabled="item.disabled ?? false"
:clearable="item.clearable ?? true" size="small" />
:clearable="item.clearable ?? true" size="small"
@change="val => cascaderChange(val, scope)" />
<span v-else>
{{ item.getName ? item.getName(scope) : scope.row[item.field] !== 0 && !scope.row[item.field]
?
......@@ -915,7 +950,7 @@ onMounted(() => {
</div>
</div>
</div>
<Dialog ref="dialogRef" :dialogInfo="dialogInfo" @btnClick="dialogBtnClick" />
<Dialog ref="dialogRef" :dialogInfo="dialogInfo" @cascaderChange="cascaderChange" @btnClick="dialogBtnClick" />
</div>
</template>
......@@ -986,6 +1021,9 @@ onMounted(() => {
.template_panel {
padding: 0 16px;
height: 40px;
overflow: hidden;
transition: height .3s;
.panel_title {
display: flex;
......@@ -1006,6 +1044,25 @@ onMounted(() => {
margin-right: 12px;
}
}
.title_btn {
padding: 2px 4px;
cursor: pointer;
.el-icon {
margin-right: 4px;
transform: rotateX(180deg);
transition: transform .3s;
&.active {
transform: rotateX(0deg);
}
}
&:hover {
background: #f2f2f2;
}
}
}
.title_desc {
......@@ -1047,10 +1104,15 @@ onMounted(() => {
margin-left: 8px;
}
}
&.active {
height: 144px;
}
}
.panel_content {
height: calc(100% - 145px);
flex: 1;
.panel {
height: calc(100% - 35px);
......@@ -1104,6 +1166,9 @@ onMounted(() => {
}
:deep(.table_tool_wrap) {
height: auto;
min-height: unset;
.table-tools {
.tools_search {
padding-top: 8px;
......
src/views/data_inventory/taskEdit.vue
......@@ -32,7 +32,7 @@ const treeInfo = ref({
filter: true,
queryValue: "",
loading: false,
queryPlaceholder: "请输入分类名称搜索",
queryPlaceholder: "请输入规则名称搜索",
props: {
label: "classifyName",
value: "guid",
......@@ -42,7 +42,8 @@ const treeInfo = ref({
expandOnNodeClick: false,
data: [],
});
const toolH = ref(82)
const toolRef = ref();
const expand1 = ref(true)
const expand2 = ref(true)
......@@ -322,7 +323,10 @@ const handleScroll = () => {
// 点击分类列表
const listClick = (row) => {
templateInfo.value = row;
getClassifyTree()
getClassifyTree();
searchItemValue.value.classifyGuid = row.guid;
searchItemValue.value.detailGuid = '';
getTableData();
};
// 获取分类列表
......@@ -340,12 +344,14 @@ const getPermissionList = (val, init = true) => {
currpermissionList.value = JSON.parse(JSON.stringify(data))
listPage.value.totalPages = res.data.totalPages
if (data.length) {
let tempInfo = data[0];
if (route.query.type == 'edit') {
templateInfo.value = data.filter(item => item.guid == taskDetail.value.classifyGuid)[0]
} else {
templateInfo.value = data[0];
tempInfo = data.filter(item => item.guid == taskDetail.value.classifyGuid)[0]
}
getClassifyTree()
listClick(tempInfo);
nextTick(() => {
toolH.value = toolRef.value.offsetHeight
})
}
} else {
permissionList.value.push(...JSON.parse(JSON.stringify(data)))
......@@ -370,7 +376,6 @@ const getClassifyTree = () => {
const data = res.data || [];
treeInfo.value.data = data;
treeInfoRef.value.setCurrentKey('');
tableInfo.value.data = [];
}
}).catch(() => {
treeInfo.value.loading = false;
......@@ -395,16 +400,22 @@ onBeforeMount(() => {
}
})
onMounted(() => {
window.addEventListener('resize', function () {
toolH.value = toolRef.value.offsetHeight
})
})
</script>
<template>
<div class="container_wrap full flex">
<div class="aside_wrap" v-show="step == 0">
<div class="aside_title">选择分类</div>
<div class="aside_search">
<!-- <div class="aside_search">
<el-input v-model.trim="asideSearchInput" placeholder="请输入关键字" :prefix-icon="Search" clearable
@change="querySearch" />
</div>
</div> -->
<div class="aside_list" v-loading="listLoading" v-infinite-scroll="handleScroll">
<div class="list_item" v-for="(item, i) in currpermissionList" :class="{ active: selectIndex == i }"
@click="selectIndex = i; listClick(item);" v-preReClick>{{ item.name }}</div>
......@@ -412,7 +423,7 @@ onBeforeMount(() => {
</div>
<div class="main_wrap" :class="{ full: step == 1 }">
<div class="content_main" v-show="step == 0">
<div class="template_panel">
<div class="template_panel" ref="toolRef">
<div class="title_item">
<span class="title_label">分类标准：</span>
<span class="title_text">{{ templateInfo.name || '--' }}</span>
......@@ -426,7 +437,7 @@ onBeforeMount(() => {
<span class="title_text">{{ templateInfo.description || '--' }}</span>
</div>
</div>
<div class="panel_content">
<div class="panel_content" :style="{ height: 'calc(100% - ' + toolH + 'px)' }">
<div class="box_left">
<Tree ref="treeInfoRef" :treeInfo="treeInfo" @nodeClick="nodeClick" />
</div>
......@@ -445,8 +456,8 @@ onBeforeMount(() => {
col="col3" />
</div>
</ContentWrap>
<ContentWrap id="id-approveInfo" title="选择元数据" expandSwicth style="margin-top: 15px" :isExpand="expand2"
@expand="(v) => expand2 = v">
<ContentWrap id="id-approveInfo" :class="{ full: expand2 }" title="选择元数据" expandSwicth style="margin-top: 15px"
:isExpand="expand2" @expand="(v) => expand2 = v">
<div class="table_panel_wrap full">
<Table ref="metadataTableRef" :tableInfo="metadataTableInfo" @tableSelectionChange="tableSelectionChange" />
</div>
......@@ -476,6 +487,10 @@ onBeforeMount(() => {
display: inline-block;
}
.aside_list {
height: calc(100% - 36px);
}
.icon-add.el-icon {
width: 24px;
height: 24px;
......@@ -522,7 +537,6 @@ onBeforeMount(() => {
flex-direction: column;
height: calc(100% - 45px);
overflow: hidden auto;
flex: 1;
&.panel {
padding: 0 16px;
......@@ -571,7 +585,7 @@ onBeforeMount(() => {
border-top: 1px solid #d9d9d9;
.box_left {
width: 240px;
width: 200px;
height: 100%;
border-right: 1px solid #d9d9d9;
......@@ -590,7 +604,7 @@ onBeforeMount(() => {
}
.box_right {
width: calc(100% - 240px);
width: calc(100% - 200px);
padding-top: 8px;
.el-breadcrumb {
......@@ -601,7 +615,21 @@ onBeforeMount(() => {
}
:deep(#id-approveInfo) {
height: calc(100% - 192px);
height: auto;
transition: height 0.3s;
.el-card__body {
height: 0 !important;
transition: none;
.card-body-content {
height: 100%;
}
}
&.full {
flex: 1;
margin-bottom: 16px;
.el-card__body {
height: calc(100% - 50px) !important;
......@@ -612,6 +640,9 @@ onBeforeMount(() => {
}
}
}
.table_panel_wrap {
width: 100%;
height: 100%;
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!