完成能力标签化--标签目录管理
This commit is contained in:
parent
14cac6c190
commit
a157cc24e7
|
|
@ -1,21 +1,21 @@
|
|||
<template>
|
||||
<div class="tag-directory-box">
|
||||
<div class="left-tree-box">
|
||||
<el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
|
||||
<el-form :inline="true" :model="dataForm" style="margin-left:10px">
|
||||
<el-form-item>
|
||||
<el-input v-model="dataForm.dictName" placeholder="标签名称" clearable></el-input>
|
||||
<el-input v-model="filterText" placeholder="标签名称" clearable></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item>
|
||||
<el-button @click="getDataList()">{{ $t('query') }}</el-button>
|
||||
<el-button>标签检索</el-button>
|
||||
</el-form-item>
|
||||
<div class="tree-box">
|
||||
<el-tree class="filter-tree" :data="dataListCopy" :props="defaultProps" default-expand-all
|
||||
@node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
|
||||
<el-tree ref="treeDom" class="filter-tree" :data="dataListCopy" :props="defaultProps" node-key="id"
|
||||
:highlight-current="true" :default-expanded-keys="[defaultNode]" @node-click="handleNodeClick"
|
||||
:filter-node-method="filterNode">
|
||||
</el-tree>
|
||||
</div>
|
||||
</el-form>
|
||||
</div>
|
||||
|
||||
<div class="right-detail">
|
||||
<div class="title">标签详情</div>
|
||||
<el-form :model="dataForm" label-width="120px">
|
||||
|
|
@ -35,6 +35,7 @@
|
|||
</el-form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -66,19 +67,31 @@ export default {
|
|||
defaultProps: {
|
||||
children: 'sysDictDataDTOList',
|
||||
label: 'dictName'
|
||||
}
|
||||
},
|
||||
defaultNode: '',
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
filterText(val) {
|
||||
this.$refs.tree.filter(val);
|
||||
this.$refs.treeDom.filter(val);
|
||||
},
|
||||
dataList: {
|
||||
handler(newVal) {
|
||||
this.dataListCopy = []
|
||||
newVal.map(v => {
|
||||
this.dataListCopy = [];
|
||||
this.defaultNode = null;
|
||||
this.dataForm = {};
|
||||
newVal.map((v, i) => {
|
||||
v.id = `${v.id}`;
|
||||
if (i == 0) {
|
||||
this.defaultNode = v.id;
|
||||
this.dataForm = v;
|
||||
this.$nextTick(() => {
|
||||
this.$refs.treeDom.setCurrentKey(this.defaultNode); //一定要加这个选中了否则样式没有出来
|
||||
});
|
||||
}
|
||||
if (v.sysDictDataDTOList && v.sysDictDataDTOList.length && v.sysDictDataDTOList.length > 0) {
|
||||
v.sysDictDataDTOList.map(x => {
|
||||
x.id = `${x.id}`;
|
||||
x.dictName = x.dictLabel;
|
||||
return x
|
||||
})
|
||||
|
|
@ -94,9 +107,8 @@ export default {
|
|||
return data.label.indexOf(value) !== -1;
|
||||
},
|
||||
handleNodeClick(data) {
|
||||
console.log('data------------>', data);
|
||||
this.dataForm = data
|
||||
}
|
||||
},
|
||||
},
|
||||
|
||||
}
|
||||
|
|
@ -108,20 +120,37 @@ export default {
|
|||
width: 100%;
|
||||
}
|
||||
|
||||
.left-tree-box {
|
||||
width: 350px;
|
||||
::v-deep .el-tree {
|
||||
min-height: calc(calc(100vh - 50px - 38px - 30px) - 164px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
::v-deep .el-tree-node__content {
|
||||
height: 32px;
|
||||
}
|
||||
|
||||
::v-deep .el-tree--highlight-current .el-tree-node.is-current>.el-tree-node__content {
|
||||
background: #0058e1;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.left-tree-box {
|
||||
// width: 350px;
|
||||
padding: 20px 0;
|
||||
// min-height: calc(calc(100vh - 50px - 38px - 30px) - 62px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-detail {
|
||||
flex: 1;
|
||||
margin-left: 20px;
|
||||
background: #fff;
|
||||
padding: 20px;
|
||||
min-height: calc(calc(100vh - 50px - 38px - 30px) - 62px);
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.right-detail {
|
||||
|
||||
.el-form {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<template>
|
||||
<el-dialog :visible.sync="visible" title="生命周期管理" :close-on-click-modal="false" :close-on-press-escape="false">
|
||||
<div class="title">{{ rowData.dictName }}</div>
|
||||
<el-table v-loading="dataListLoading" :data="dataList" border style="width: 100%;">
|
||||
<el-table :data="dataList" border style="width: 100%;">
|
||||
<el-table-column prop="status" label="状态" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="time" label="时间" header-align="center" align="center"></el-table-column>
|
||||
<el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<template>
|
||||
<div style="height:100%">
|
||||
<el-card shadow="never" class="aui-card--fill" style="background:transparent">
|
||||
<div class="tab-box">
|
||||
<div class="tab-item" v-for="(tab, i) in tabList" :key="i" @click="selectTab = tab.key"
|
||||
:class="[selectTab == tab.key ? 'tab-active' : '', i == 0 ? 'no-border-right' : '']">
|
||||
|
|
@ -8,7 +8,8 @@
|
|||
</div>
|
||||
<TagSysBuild v-if="selectTab == 'build'"></TagSysBuild>
|
||||
<TagDirectory v-if="selectTab == 'directory'"></TagDirectory>
|
||||
</div>
|
||||
</el-card>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -43,7 +44,8 @@ export default {
|
|||
const routeParams = {
|
||||
routeName: `${this.$route.name}__${row.id}`,
|
||||
title: `${this.$route.meta.title} - ${row.dictType}`,
|
||||
path: 'ability/tag-data',
|
||||
// path: 'ability/tag-data',
|
||||
path: 'ability/tag',
|
||||
params: {
|
||||
dictTypeId: row.id
|
||||
}
|
||||
|
|
@ -54,7 +56,7 @@ export default {
|
|||
}
|
||||
}
|
||||
</script>
|
||||
<style scoped>
|
||||
<style lang="scss" scoped>
|
||||
.tab-box {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
|
|
|
|||
Loading…
Reference in New Issue