saber/src/views/manager/projectinfo/archiveTime.vue

<template>
    <div style="height: 100%" class="flexStar">
        <div class="boxswai" style="width: 15%;">
            <div class="boxnei" style="display: flex; flex-direction: column">
                <el-menu :default-active="activeIndex" class="el-menu-vertical-demo" @select="selectMajorDataType">
                    <el-menu-item :index="item.dictKey" v-for="(item, index) in majorDataTypeList">
                        <i class="el-icon-s-opportunity"></i>
                        <span>{{ item.dictValue }}</span>
                    </el-menu-item>

                </el-menu>
            </div>



        </div>
        <div class="boxswai" style="width: 30%; padding-left: 0px">
            <div class="boxnei" style="display: flex; flex-direction: column">
                <h3>引用元素表</h3>
                <div style="overflow: auto; flex: 1;height:500px">
                    <div class="flex">
                        <el-input size="small" placeholder="请输入你想搜索的表单" clearable @clear="clearfiltertext"
                            v-model="filterText">
                        </el-input>
                        <el-button size="small" class="mg-l-10" @click="treeFilter">搜索</el-button>
                    </div>
                    <el-tree style="display: inline-block;min-width: 100%;" class="filter-tree" :data="treeData"
                        :default-expanded-keys="defaultExpanded" @node-click="getNodeDetail" :props="defaultProps"
                        :expand-on-click-node="false" highlight-current node-key="id" ref="tree" lazy :load="treeLoadNode"
                        v-show="!allTreeShow">
                    </el-tree>
                    <el-tree style="width: 100%" ref="treeall" v-loading="treeloading" :data="allTreeData"
                        :props="defaultProps" @node-click="getNodeDetail" node-key="id" :expand-on-click-node="false"
                        :filter-node-method="filterNode" v-show="allTreeShow">
                    </el-tree>
                </div>
            </div>
        </div>
        <div class="boxswai" style="width: 55%; padding-left: 0px; padding-right: 0px">
            <div class="boxnei">
                <div class="marleft10" style="height: 100%; display: flex; flex-direction: column">
                    <div class="martop20" v-if="true" style="flex: 1">
                        <div class="flex mg-b-10">
                            <el-input
                            v-model="formulaInput"
                            placeholder="请输入名称"
                            size="samll"
                            clearable
                            @clear="searchFormulaName">
                            </el-input>
                            <el-button type="info" class="mg-l-10" @click="searchFormulaName">搜索</el-button>
                        </div>
                       
                            <el-table
                                :data="editEleListFilter"
                                border
                                style="width: 100%"  
                            >
                                <el-table-column align="center" prop="eName" label="字段信息">
                                </el-table-column>
                                <el-table-column align="center" label="操作" width="200">
                                <template slot-scope="scope">
                                    <el-button
                                    v-if="!scope.row.isFile"
                                    type="primary"
                                    size="small"
                                    plain
                                    @click="setFiledate(scope.row)"
                                    >设置为文件日期
                                    </el-button>
                                    <el-button
                                   v-else
                                    type="danger"
                                    size="small"
                                    plain
                                    @click="quitFiledate(scope.row)"
                                    >取消
                                    </el-button>
                                </template>
                                </el-table-column>
                             </el-table>
                
                        
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
  
<script>

import { dictionary } from "@/api/manager/archivetree";
import {tabTypeLazyTree} from "@/api/manager/wbsprivate";
import {getTableElments} from "@/api/manager/wbstree";


export default {


    data() {
        return {
            majorDataTypeList: [],  //内业资料类型
            activeIndex:'1',
            projectid: '',
            wbsid: '',
            treeData: [],
            allTreeData:[],
            filterText: '',
            defaultExpanded: '',
            allTreeShow: false,
            defaultProps: {
                children: "children",
                label: "title",
                isLeaf: function (data) {
                    return !data.hasChildren;
                },
            },
            curData:{

            },
            majorDataType:{

            },
            formulaInput:'',//搜索元素字段
            editEleListFilter:[],
            editEleListAll:[]
        };
    },
    created() {
        this.projectid = this.$route.query.pid;
        this.wbsid = this.$route.query.wbsid;
        this.major_data_type()//内业资料类型
    },
    methods: {
        async major_data_type() {//内业资料类型
            const { data: res } = await dictionary({ code: 'major_data_type' })
            console.log(res);
            if (res.code == 200) {
                this.majorDataTypeList = res.data
            }
        },
        selectMajorDataType(item){
            console.log(item,'item');
            this.treeloading = true;
            this.allTreeShow = false;
            this.activeIndex=item
            let parentId=''
             if(this.curData.hasChildren){
               parentId=this.curData.id
             }else{
                // parentId=this.curData.parentId
                 parentId=''
             }
            tabTypeLazyTree({parentId:parentId,projectId:this.projectid,pcurrent:1,size:1000,titleName:this.filterText,majorDataType:this.activeIndex}).then((res) => {
                  this.treeloading = false;
                  this.allTreeData = res.data.data.records;
             });
        },
        clearfiltertext() {
            this.allTreeShow = false;
        },
        getNodeDetail(data,node) {
            this.curData=data;
            console.log(data,'data');
            this.getTableElmentsData()
            
        },
      
        treeLoadNode(node, resolve) {
            let parentId = 12345678910;
            if (node.level != 0) {
                parentId = node.data.id;
            }
            // 开启 “加载中” 动画
            if (node.level == 0) this.loading = true
                tabTypeLazyTree({ 
                    parentId, projectId: this.projectid, pcurrent: 1, size: 1000,majorDataType:this.activeIndex
                }).then(res => {
                    // 请求接口，返回数据
                    let data = res.data.data.records;
                    this.loading = false
                    resolve(data);
                })
            
        },
        filterNode(value, data) {
            if (!value) return true;
            return data.title.indexOf(value) !== -1;
        },
         //搜索树
        treeFilter() {
        console.log('搜索');
        if (this.filterText) {
            this.allTreeShow = true;
            this.allTreeData=[]
            if (!this.allTreeData.length) {
            this.treeloading = true;
        
            let parentId=''
                if(this.curData.hasChildren){
                parentId=this.curData.id
                }else{
                    // parentId=this.curData.parentId
                    parentId=''
                }
                console.log(parentId,'parentId');
                    tabTypeLazyTree({parentId:parentId,projectId:this.projectid,pcurrent:1,size:1000,titleName:this.filterText,majorDataType:this.activeIndex}).then((res) => {
                    this.treeloading = false;
                    this.allTreeData = res.data.data.records;
                    });
                    this.$nextTick(() => {
                        console.log("过滤");
                        this.treeloading = false;
                        this.$refs.treeall.filter(this.filterText);
                    });
            
            } else {
                this.treeloading = false;
            this.$refs.treeall.filter(this.filterText);
            }
        } else {
            this.$message.warning('请先输入文字')
            this.allTreeShow = false;
        }
        },
           //搜索 筛选
        searchFormulaName() {
            this.editEleListFilter = this.editEleListAll.filter((ele) => {
                return ele.eName.indexOf(this.formulaInput) > -1;
            });
        },
        //获取元素列表
    
        getTableElmentsData(){
                getTableElments(this.curData.initTableId).then((res) => {
                this.editEleListFilter = res.data.data;
                this.editEleListAll = [].concat(this.editEleListFilter);
            });
           
        },
        //设置为文件日期
        setFiledate(row){
            if(!row.isFile){
                this.$set(row, "isFile", true);
            }
            
        },
        //取消设置
        quitFiledate(row){
      
            if(row.isFile){
                this.$set(row, "isFile", false);
            }
           
        }





    },

    mounted() {
        // this.heightss = this.$refs.rulesss.clientHeight
    },
};
</script>
  
<style scoped lang="scss">
//调整表单样式
.excelHtml {
    position: absolute;
    z-index: 999999;
    top: 50px;
    left: 0px;
    width: 100%;
    height: 100%;
}

.marleft10 {
    margin-left: 10px;
}

/deep/.el-tree-node__expand-icon {
    font-size: 16px;
}

.colorblue {
    color: rgb(0, 82, 217);
}

.treecontent /deep/.el-scrollbar {
    height: 100%;
}

.el-scrollbar {
    height: 100%;
}

.rightHeader {
    display: flex;
    justify-content: flex-start;
    align-items: top;
    font-size: 14px;
    background-color: #fff;

    .excelname {
        box-sizing: border-box;
        min-width: 200px;
        height: 28px;
        border: 1px solid rgb(220, 220, 220);
        padding: 0 10px;
        border-radius: 3px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
}

.dialogModel {
    .dialogBox {
        .middle {
            display: flex;

            .left {
                border: 1px solid rgb(220, 220, 220);
                border-radius: 3px;
                height: 500px;
                width: 49%;

                .select {
                    box-sizing: border-box;
                    display: flex;
                    justify-content: center;
                    padding: 5px 0;
                    border-bottom: 1px solid #e0e0e0;
                }

                .leftscroll {
                    height: 450px;
                    overflow-y: scroll;
                }
            }

            .right {
                height: auto;
                height: 60px;
                max-height: 500px;
                margin-left: 2%;
                // height: 500px;
                border-radius: 3px;

                td {
                    box-sizing: border-box;
                    padding: 5px 10px;
                    height: 30px;
                    line-height: 30px;
                }
            }
        }
    }

    .btbox {
        margin-top: 20px;
        display: flex;
        justify-content: center;
    }
}

.rightBox {
    flex: 1;
}

.boxswai {
    height: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;

}

/deep/.avue-crud__left {
    width: 65%;
}

/deep/.el-input-group__append {
    background-color: #ecf5ff;
    color: #409EFF;
}

/deep/.el-input-group__append:hover {
    background-color: #409EFF;
    color: white;
}

/deep/.el-input-group__prepend:hover {
    background-color: #409EFF;
    color: white;
}

/deep/.el-input-group__append:active {
    background-color: #9dc5ee;
    color: white;
}

/deep/.el-input-group__prepend:active {
    background-color: #9dc5ee;
    color: white;
}
</style>