完成能力标签化--标签目录管理

back/src/views/modules/ability/components/tag-directory.vue

@@ -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
+                    <el-tree ref="treeDom" class="filter-tree" :data="dataListCopy" :props="defaultProps" node-key="id"
-                        @node-click="handleNodeClick" :filter-node-method="filterNode" ref="tree">
+                        :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 = []
+                this.dataListCopy = [];
-                newVal.map(v => {
+                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 {
+::v-deep .el-tree {
-    width: 350px;
+    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%;

back/src/views/modules/ability/components/tag-sys-build-life.vue

@@ -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>

back/src/views/modules/ability/tag.vue

@@ -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;