报告上传新增树形标签及查询

src/views/Report/ReportList.vue

@@ -208,12 +208,10 @@ export default {
       q: {
         keyContent: '',
         year: [],
-        labelOneId: [],
+        name:'',
-        labelTwoId: [],
-        labelThreeId: [],
         pageNo: 1,
-        pageSize: 10
+        pageSize: 10,
-      },
+        },
       total: 0,
       tableData: [],
       yearList: [],

src/views/Report/ReportManager.vue

@@ -5,64 +5,73 @@
         </div>
         <div class="search">
             <el-row>
-                <el-col :span="20">
+                <el-col :span="6">
-                    <div class="search-box-left">
+                    <div class="tag-item">
-                        <label>搜索:</label>
+                        <label class="tag-title">关键词:</label>
-                        <el-input v-model="q.keyContent" placeholder="请输入搜索内容"></el-input>
+                        <el-input v-model="q.keyContent" placeholder="请输入报告名称"></el-input>
+                    </div>
+                </el-col>
+                <el-col :span="6">
+                    <div class="tag-item">
+                        <label class="tag-title">报告年份：</label>
                         <el-select v-model="q.year" multiple collapse-tags placeholder="请选择报告年份">
                             <template v-for="item in yearList">
                                 <el-option :label="item" :value="item" :key="item"></el-option>
                             </template>
                         </el-select>
-                        <el-select v-model="q.labelOneId" multiple collapse-tags
-                            :placeholder="'请选择' + tagsForm.tags01.name">
-                            <template v-for="item in tagsForm.tags01.childList">
-                                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
-                            </template>
-                        </el-select>
-                        <el-select v-model="q.labelTwoId" multiple collapse-tags
-                            :placeholder="'请选择' + tagsForm.tags02.name">
-                            <template v-for="item in tagsForm.tags02.childList">
-                                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
-                            </template>
-                        </el-select>
-                        <el-select v-model="q.labelThreeId" multiple collapse-tags
-                            :placeholder="'请选择' + tagsForm.tags03.name">
-                            <template v-for="item in tagsForm.tags03.childList">
-                                <el-option :label="item.name" :value="item.id" :key="item.id"></el-option>
-                            </template>
-                        </el-select>
                     </div>
                 </el-col>
-                <el-col :span="4" align="right">
+                <el-col :span="6">
-                    <div class="search-box-right">
+                    <div class="tag-item">
-                        <el-button type="primary" @click="search">查询</el-button>
+                        <label class="tag-title">报告名称:</label>
-                        <el-button @click="reset">重置</el-button>
+                        <el-input v-model="q.name" placeholder="请输入报告名称"></el-input>
                     </div>
                 </el-col>
-                <el-col :span="24">
+             
+                <el-col :span="6" align="right" class="tag-btns">
+                    <el-button type="primary" @click="search">查询</el-button>
+                    <el-button type="default" @click="reset">重置</el-button>
+                </el-col>
+            </el-row>
+            <el-row >
                     <div class="operate-box">
                         <el-button @click="openLog">操作日志</el-button>
                         <el-button @click="openTags">标签维护</el-button>
                         <el-button @click="openReportAdd">报告上传</el-button>
                     </div>
-                </el-col>
             </el-row>
         </div>
-        <div class="table">
+        <el-row>
+            <el-col :span="3"  class="treeList">
+                <el-input placeholder="输入关键字进行过滤" v-model="filterText">
+                    </el-input>
+                    <el-tree
+                    class="filter-tree"
+                    :data="treeData"
+                    show-checkbox
+                    node-key="id"
+                    default-expand-all
+                    :filter-node-method="filterNode"
+                    ref="tree"
+                    @check="getHalfCheckedNode"
+                    >
+                    </el-tree>
+            </el-col>
+            <el-col :span="20">
+                <div class="table">
             <vxe-table  ref="xTable" :data="tableData" :empty-render="{name: 'NotData'}" align="center" border stripe v-table-min-height="'calc(100vh - 320px)'">
                 <vxe-column show-overflow show-header-overflow type="seq" title="序号" width="77">
                     <template #default="{ row, rowIndex }">
                         {{ rowIndex + (q.pageNo - 1) * q.pageSize + 1 }}
                     </template>
                 </vxe-column>
-                <vxe-column show-overflow show-header-overflow field="labelOneName"
+                <!-- <vxe-column show-overflow show-header-overflow field="labelOneName"
-                    :title="tagsForm.tags01.name"></vxe-column>
+                    :title="tagsForm.tags01.name"></vxe-column> -->
                 <vxe-column show-overflow show-header-overflow field="name" title="报告名称"></vxe-column>
-                <vxe-column show-overflow show-header-overflow field="labelTwoName"
+                <!-- <vxe-column show-overflow show-header-overflow field="labelTwoName"
                     :title="tagsForm.tags02.name"></vxe-column>
                 <vxe-column show-overflow show-header-overflow field="labelThreeName"
-                    :title="tagsForm.tags03.name"></vxe-column>
+                    :title="tagsForm.tags03.name"></vxe-column> -->
                 <vxe-column show-overflow show-header-overflow field="year" title="报告年份"></vxe-column>
                 <vxe-column show-overflow show-header-overflow field="createDate" title="上传时间"></vxe-column>
                 <vxe-column show-overflow show-header-overflow title="操作" width="200" fixed="right">
@@ -78,6 +87,9 @@
                 :page-sizes="[5, 10, 20]" :page-size="q.pageSize" layout="total, sizes, prev, pager, next, jumper"
                 :total="total" />
         </div>
+            </el-col>
+        </el-row>
+      
         <!--操作日志-->
         <el-dialog title="操作日志" :visible.sync="dialogLog" width="1100px" :close-on-click-modal="false"
             :close-on-press-escape="false" modal-append-to-body append-to-body>
@@ -294,6 +306,8 @@ export default {
             filterText: '',
             treeData: [
             ],
+            filterText:'',
+            checkedKeys:[],
             privacyLevelOptions:[
                 {
                     value:'外部公开',
@@ -392,9 +406,7 @@ export default {
             q: {
                 keyContent: '',
                 year: [],
-                labelOneId: [],
+                name:'',
-                labelTwoId: [],
-                labelThreeId: [],
                 pageNo: 1,
                 pageSize: 10,
             },
@@ -423,6 +435,10 @@ export default {
             this.reportDateList();
             this.sysUserList();
         },
+        getHalfCheckedNode(node,data){
+        this.checkedKeys=data.checkedKeys
+         this.reportList()
+        },
         updateList(){
             this.$api.report.labelList().then(res => {
             this.treeData=res.data
@@ -822,9 +838,7 @@ export default {
             this.q = {
                 keyContent: '',
                 year: [],
-                labelOneId: [],
+                name:'',
-                labelTwoId: [],
-                labelThreeId: [],
                 pageNo: 1,
                 pageSize: 10,
             };
@@ -853,7 +867,7 @@ export default {
         },
         // 列表
         reportList() {
-            this.$api.report.reportList(this.q).then(({ data }) => {
+            this.$api.report.reportList({...this.q,labelId:this.checkedKeys}).then(({ data }) => {
                 this.tableData = data.records;
                 this.total = data.total;
                 this.q.pageNo = data.current;
@@ -903,6 +917,10 @@ export default {
             })
             // })
         },
+        filterNode(value, data) {
+            if (!value) return true;
+            return data.label.indexOf(value) !== -1;
+        },
     },
     created() {
         this.init();
@@ -911,6 +929,16 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.treeList{
+    padding: 20px;
+    margin-left: 13px;
+    box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
+    margin-right: 20px;
+    .filter-tree{
+        margin-top: 20px;
+    }
+
+}
 .check-all {
     text-align: right;
     width: 95%;
@@ -931,19 +959,16 @@ export default {
     }
 
     .search {
-        .search-box-left {
+        padding-top: 9px;
-            padding-top: 20px;
-            display: flex;
-            justify-content: flex-start;
-            align-items: center;
 
-            label {
+        ::v-deep .el-date-picker,
-                font-size: 14px;
+        ::v-deep .el-input {
-                font-weight: 400;
+            width: 240px;
-                color: #595959;
+        }
-                margin-right: 5px;
+
-                padding-left: 22px;
+        .tag-item {
-            }
+            margin-bottom: 15px;
+            display: flex;
 
             .year {
                 ::v-deep .el-input__inner {
@@ -951,31 +976,67 @@ export default {
                 }
             }
 
-            ::v-deep .el-input {
+            label.tag-title {
-                width: 167px;
+                font-size: 14px;
-                margin-right: 5px;
+                font-weight: normal;
+                color: #646464;
+                display: inline-block;
+                // width: 112px;
+                height: 19px;
+                line-height: 19px;
+                padding-left: 13px;
+                // border-right: 1px solid #BFBFBF;
+                margin-right: 10px;
+                margin-top: 2.5px;
+                overflow: hidden;
+                white-space: nowrap;
+                text-overflow: ellipsis;
             }
 
-            @media screen and (max-width: 1366px) {
+            .tag-show {
-                ::v-deep .el-input {
+                flex: 1;
-                    width: 135px;
+                margin-right: 28px;
-                    margin-right: 5px;
+                height: 19px;
+                overflow: hidden;
+                position: relative;
+
+                &.active {
+                    height: auto;
+                }
+
+                ::v-deep .check-active{
+                    .el-checkbox__label{
+                        color: #434343;
+                    }
+                }
+
+                ::v-deep .el-checkbox {
+                    margin-right: 15px;
+                    color: #434343;
+                }
+
+                ::v-deep .el-checkbox__label {
+                    min-width: 80px;
+                }
+
+                ::v-deep .el-checkbox-group {
+                    display: inline;
+                }
+
+                .el-icon-arrow-down,
+                .el-icon-arrow-up {
+                    color: #C0C4CC;
+                    cursor: pointer;
+                    position: absolute;
+                    right: 0;
+                    top: 2px;
                 }
             }
-
-            ::v-deep .el-button {
-                float: right;
-            }
         }
 
-        .search-box-right {
+        .tag-btns {
-            padding-top: 20px;
+            padding-right: 15px;
-            display: flex;
-            justify-content: flex-end;
-            align-items: center;
-            padding-right: 14px;
         }
-
         .operate-box {
             padding-left: 13px;
             padding-bottom: 11px;