fj-dc-ui/.svn/pristine/10/10f57013c79fce45439f4ca612bbac4e48a6c4e9.svn-base

<template>
<div>
    <el-container class="max-box">
        <el-aside width="40%" :height="asideHeight">
              <div :style="{'height': asideHeight + 'px','overflow': 'auto'}" class="left_tree">
                  <el-card class="box-card" style="min-height: 99%">
                    <div slot="header" class="clearfix">
                        <span>工程信息</span>
                        <el-button type="success"  @click="addJie" style="margin-left:30px;">添加节点</el-button>
                        <!-- <el-button style="float: right; padding: 3px 0" type="text" @click="batchImport" v-if="ownPriv('manage')">批量导入</el-button> -->
                        <!-- 水利工程基础信息批量导入弹窗 -->
                        <!-- <slgc-tian-bao-pl v-if="showGongChengTianBaoPl" @closePlDialog="closePlDialog"></slgc-tian-bao-pl> -->
                    </div>
                    <el-tree :data="treeData"
                    class="filter-tree"
                    lazy
                    highlight-current="true"
                    :load="loadAddvData"
                    ref="tree"
                    :props="defaultProps"
                    @node-click="handleNodeClick"
                    :expand-on-click-node="false">
                      <span class="custom-tree-node" slot-scope="{ node, data }">
                        <span>{{ node.label }}</span>
                        <span>
                          <el-button
                            type="success"
                            size="mini"
                            @click="() => toAddJieDian(data)">
                            添加节点
                          </el-button>
                          <el-button
                            type="primary"
                            size="mini"
                            @click="() => toEditJieDian(data)">
                            修改
                          </el-button>
                          <el-button
                            type="danger"
                            size="mini"
                            @click="() => delete_jieDian(data,node)">
                            删除
                          </el-button>
                        </span>
                        </span>
                    </el-tree>
                  </el-card>
              </div>
          </el-aside>
        <el-main>
            <el-row style="height:40px;">
                <el-col :span="18">
                    <el-form :inline="true" size="mini"  class="demo-form-inline" style="padding-left: 10px;">
                        <el-form-item label="文件名称">
                            <el-input style="width:230px;" v-model="filenameval" clearable placeholder="文件名称"></el-input>
                        </el-form-item>
                        <el-form-item>
                            <el-button type="primary" @click="getFilelist(upId)">查询</el-button>
                        </el-form-item>
                    </el-form>
                </el-col> 
                <el-col :span="6">
                    <el-form :inline="true" size="mini"  class="demo-form-inline" style="float:right;">
                        <el-form-item label="">
                            <el-button type="success" @click="uploadFile" v-if="ownPriv('manage')"  style="margin-right:30px;"><i class="el-icon-upload el-icon--right"></i> 文件上传</el-button>
                        </el-form-item>
                    </el-form>
                </el-col>
            </el-row>
            <el-table
                v-loading="loading"
                :height="tableHeight"
                :data="fileList"
                style="width: 100%"
                :row-class-name="tableRowClassName">
                <el-table-column
                    prop="index"
                    label="序号"
                    width="100">
                </el-table-column>
                <el-table-column
                    prop="fileName"
                    label="文件名"
                    width="600">
                    <template slot-scope="scope">
                        <span @click="downloadFile(scope.row.filePath)">{{scope.row.fileName}}</span>
                    </template>
                </el-table-column>
                <el-table-column
                    prop="createDate"
                    label="上传时间"
                    width="200">
                </el-table-column>
                <el-table-column
                    prop="filePath"
                    label="操作">
                    <template slot-scope="scope">
                        <el-button type="text" @click="downloadFile(scope.row.filePath)">下载</el-button>
                        <el-button type="text" v-if="ownPriv('manage')" @click="deleteFile(scope.row.id)">删除</el-button>
                        <el-button v-if="scope.row.top != 1 &&　ownPriv('manage')" type="text" @click="makeTop(scope.row.id)">置顶</el-button>
                        <el-button v-if="scope.row.top == 1　&&　ownPriv('manage')" type="text" @click="cancelTop(scope.row.id)">取消置顶</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-left: 30px;" :pager-count="5" :current-page="pageIndex" background
            :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"
            :page-sizes="[10, 20, 50, 100]"
            @current-change="pageIndexChange" @size-change="handleSizeChange"
            ></el-pagination>
            
            <el-dialog title="文件上传" :visible.sync="dialogFormVisible" :close-on-click-modal="false" width="40%">
                <upload
                    ref="uploadFile"
                    :url="`/pdcApi/file/insert?bizId=`"
                    @uploadOver="removeNewSupervision"
                ></upload>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addFile">保 存</el-button>
                </div>
            </el-dialog>
        </el-main>
    </el-container>
    <el-dialog title="添加节点" :visible.sync="jiedian">
        <el-form label-width="120px">
            <el-form-item label="节点名称" required>
                <el-input v-model="jieDianName"  clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="jiedian = false">取 消</el-button>
            <el-button type="primary" @click="add_jieDian">确 定</el-button>
        </div>
    </el-dialog>
    <el-dialog title="修改节点" :visible.sync="xjiedian">
        <el-form label-width="120px">
            <el-form-item label="节点名称" required>
                <el-input v-model="jieDianName"  clearable></el-input>
            </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
            <el-button @click="xjiedian = false">取 消</el-button>
            <el-button type="primary" @click="add_jieDian1">确 定</el-button>
        </div>
    </el-dialog>
</div>    
</template>
<script>
import request from '@util/gw_ajax_request.js'
import {hostUrl} from '@util/global_variable.js'
export default {
    data(){
        return{
            asideHeight: window.innerHeight - 116,
            treeData: [
            ],
            filenameval: '',
            treeData1: [
                // {
                //     nm: '金水',
                //     uptm: [{
                //         nm: '金水1',
                //         uptm: [{
                //             nm: '金水1.1',
                //             uptm: []
                //         }]
                //     }]
                // }
            ],
            defaultProps: {
                children: 'children',
                label: 'nm'
            },
            jiedian: false,
            xjiedian: false,
            tableHeight: window.innerHeight - 230,
            fileList: [
                // {
                //     index: 1,
                //     fileName: '附件1：福建省水利厅关于联合开展2018~2019年度中央及省级水利投资建设项目稽察的通知.pdf',
                //     filePath: 'http://61.154.12.112:9900/upload/pdf/附件1：福建省水利厅关于联合开展2018~2019年度中央及省级水利投资建设项目稽察的通知.pdf'
                // },
                // {
                //     index: 2,
                //     fileName: '附件2：稽察组人员名单.pdf',
                //     filePath: 'http://61.154.12.112:9900/upload/pdf/附件2：稽察组人员名单.pdf'
                // },
                // {
                //     index: 3,
                //     fileName: '关于召开2018-2019年度中央及省级水利投资建设项目稽察布置会的通知  闽水监督函〔2019〕10号.pdf',
                //     filePath: 'http://61.154.12.112:9900/upload/pdf/关于召开2018-2019年度中央及省级水利投资建设项目稽察布置会的通知  闽水监督函〔2019〕10号.pdf'
                // },
                // {
                //     index: 4,
                //     fileName: '水利工程稽察人员业务指南.docx',
                //     filePath: 'http://61.154.12.112:9900/upload/pdf/水利工程稽察人员业务指南.docx'
                // },
                // {
                //     index: 5,
                //     fileName: '稽察报告大纲.doc',
                //     filePath: 'http://61.154.12.112:9900/upload/pdf/稽察报告大纲.doc'
                // }
            ],
            pageIndex: 1,
            pageSize: 20,
            total: 0,
            dialogFormVisible: false,
            gwComFileList: [],
            loading: false,
            add: {},
            jieDianName: '',
            jieDianId:'',
            upId: ''
        }
    },
    computed:{
         persId() {
            return localStorage.getItem("userid")
                ? localStorage.getItem("userid")
                : "1098101939614724096";
        },
        hostUrl(){
            return hostUrl
        },
        currentRlcode(){
            return localStorage.getItem("currentRlcode") ? localStorage.getItem("currentRlcode") : ''
        }
    },
    components:{
        upload: resolve => {
            require(["@widget/uploadFile.vue"], resolve);
        }
    },
    mounted(){
        this.getTree()
        // this.getFilelist()
    },
    methods:{
        tableRowClassName({row, rowIndex}) {
            if (row['top'] == 1) {
                return 'success-row';
            }
            return '';
        },
        cancelTop(id){
            request.get(`/file/cancelTop/${id}`).then(res => {
                if(res.success){
                    this.$message.success('取消置顶成功')
                    this.getFilelist(this.upId)
                }
            })
        },
        makeTop(id){
            request.get(`/file/top/${id}`).then(res => {
                if(res.success){
                    this.$message.success('置顶成功')
                    this.getFilelist(this.upId)
                }
            })
        },
        loadAddvData: function (node, resolve) {
             request.get(`/bis/insp/Folder/getNextNode?id=${node.data.id}`).then(
                response => {
                    var data = response.data;
                    let children = [];
                    response.data.forEach((element, index) => {
                        children.push({
                            'id': element.id,
                            'nm': element.nm
                        })
                    });
                    resolve(children);
                }
            );
        },
        addJie(){
            this.jieDianName = ''
            this.add = {
                nm: '',         
                orgId: "034",   
                persId: this.persId,
                pid: 'root'
            }
            this.jiedian = true;
        },
        delete_jieDian(data){
            let parms = {
                id: data.id
            }
            request.post(`/bis/insp/Folder/delete/${data.id}`,parms).then(res => {
                if(res.success){
                    this.$message.success('删除成功')
                    this.getTree()
                }
            })
        },
        toEditJieDian(data){
            this.xjiedian = true
            this.jieDianId = data['id']
        },
        add_jieDian1(){
            let param = {
                id: this.jieDianId,
                nm: this.jieDianName
            }
            request.post(`/bis/insp/Folder/update`,param).then(res => {
                if(res.success){
                    this.xjiedian = false
                    this.getTree()
                }
            })
                
        },
        add_jieDian(){
            this.add['nm'] = this.jieDianName
            request.post(`/bis/insp/Folder/add`,this.add).then(res => {
                if(res.success){
                    this.jiedian = false;
                    this.getTree()
                }
            })
        },
        toAddJieDian(data){
            this.jieDianName = ''
            this.add = {
                nm: '',         
                orgId: "034",   
                persId: data.persId,
                pid: data.id
            }
            this.jiedian = true;
        },
        handleNodeClick(data) {
            this.upId = data['id']
            this.getFilelist(data['id'])
        },
        getTree(){
            request.get(`/bis/insp/Folder/getNextNode?id=`).then(res => {
                let children = [];
                res.data.forEach((element, index) => {
                    children.push({
                        'id': element.id,
                        'nm': element.nm
                    })
                });
                this.treeData = children;
                this.upId = children[0]['id']
                this.getFilelist(children[0]['id'])
            })
        },
        getTree1(){
            request.get(`/bis/insp/Folder/getNextNode?id=`).then(res => {
                if(res.success){
                    res.data.forEach((ele, index) => {
                        this.treeData1[index] = {
                            nm : ele['nm'],
                            id : ele['id'],
                            children: []
                        }
                        request.get(`/bis/insp/Folder/getNextNode?id=${ele.id}`).then(response => {
                            if(response.data.length > 0){
                                response.data.forEach((item,ind) => {
                                    this.treeData1[index]['children'][ind] = {
                                        nm : response.data[ind]['nm'],
                                        id : response.data[ind]['id'],
                                        children: []
                                    }
                                })
                            }else{
                                ele['children'] = null
                            }
                        })
                    })
                    this.treeData = this.treeData1
                    // console.log(this.treeData,'12131211111111111113')
                }
            })
        },
        getFilelist(e){
            let params = {
                pageNum: this.pageIndex,
                pageSize: this.pageSize,
                fileName: this.filenameval,
                bizId: e
            }
            let _this = this
            this.loading = true
            request.post(`/file/findPageInfo`,params).then(res=>{
                if(res.success){
                    this.fileList = res.data.list
                    this.fileList.forEach((ele,index)=>{
                        ele['index'] = _this.pageSize * (_this.pageIndex - 1) + (index + 1)
                    })
                    this.total = res.data.total
                    this.loading = false
                }
            })
        },
        downloadFile(filePath){
            window.open(this.hostUrl + filePath)
        },
        pageIndexChange(val){
            this.pageIndex = val
            this.getFilelist(this.upId)
        },
        handleSizeChange(val){
            this.pageSize = val
            this.getFilelist(this.upId)
        },
        uploadFile(){
            if(!this.upId){
                this.$message({
                    type: 'warning',
                    message: '请选择左侧节点'
                });
                return false
            }
            this.dialogFormVisible = true
        },
        addFile(){
            this.gwComFileList = [];
            if (this.$refs.uploadFile.submitUpload(this.upId)) {
                this.removeNewSupervision();
            }
        },
        removeNewSupervision(arg) {
            if (arg) {
                var args = this.gwComFileList.concat(arg);
            }
            this.gwComFileList = [];
            this.dialogFormVisible = false
            this.$message.success('添加成功')
            this.getFilelist(this.upId)
        },
        // 文件上传
        submitUpload() {
            this.$refs.upload.submit();
        },
        // 文件删除
        deleteFile(id){
            this.$confirm('确定删除该文件吗?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                request.post(`/file/${id}`).then(res=>{
                    if(res.success){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        this.getFilelist(this.upId)
                    }else{
                        this.$message.warning(res.message)
                    }
                })
            }).catch(() => {
            });
        }
    }
}
</script>
<style lang="scss">
    .max-box{
        .el-tree-node__content{
            height: 33px;
            line-height: 33px;
        }
    }
    h4.mxh{
        margin-bottom: 20px;
        overflow: hidden;
        button{
            float: right;
        }
    }
    .el-table .warning-row {
        background: oldlace;
    }
    .el-table .success-row {
        background: #ebf9f9;
    }
    
    .left_tree .custom-tree-node {
        flex: 1;
        display: flex;
        align-items: center;
        justify-content: space-between;
        font-size: 14px;
        padding-right: 8px;
    }
</style>