manHourHousekeeper/fhKeeper/formulahousekeeper/timesheet/src/views/project/fileCenter.vue

<template>
    <section >
        <div :style="'background:#f7f7f7;padding:10px 50px;height:'+tableHeight+'px;'">
        <!--工具条-->
        <div style="padding: 20px;background:#fff;border-bottom:1px solid #ddd;font-weight:500;font-size:15px;">
            <span @click="viewFolder(null)" class="themeFontColor" style="cursor: pointer;">{{ $t('library') }}</span>
            <span v-for="path in pathList" :key="path.id" @click="viewFolder(path)" class="mianbaoxie"> <i class="el-icon-arrow-right jianto"></i> {{path.documentName}}</span>
            <span style="float:right;">
                <!-- <el-link type="primary" :underline="false" v-if="list.length
                > 0"><i class="el-icon-setting"></i><span style="margin-right:5px;" @click="templatedialingClick('设为模板')">设为模板</span></el-link> -->
                    <el-link type="primary" :underline="false" @click="defaultTemplate" v-if="permissions.projectEditDefaultFolder"><i class="el-icon-folder-add"></i><span style="margin-left:5px;">{{ $t('moRenWenJianJia') }}</span></el-link>
                    <el-link type="primary" :underline="false" @click="createFolder"><i class="el-icon-folder-add"></i><span style="margin-left:5px;">{{ $t('createafolder') }}</span></el-link>
                    <el-upload ref="upload" action="#" :http-request="uploadFile" :show-file-list="false" :limit="1" style="display:inline-block;">
                        <el-link type="primary" :underline="false" style="margin-left:10px;"><i class="iconfont firerock-iconshangchuan"></i><span style="margin-left:5px;">{{ $t('fileupload') }}</span></el-link>
                    </el-upload>
            </span>
        </div>
        <div>
        <el-col :span="6" style="border-right: 1px solid #EBEEF5;">
            <el-table :data="recentFiles" highlight-current-row :height="tableHeight">
                <el-table-column prop="documentName" :label="$t('recentdocuments')" sortable="true">
                    <template slot-scope="scope">
                        <!-- <el-link @click.stop.native="viewOnline(scope.row)"> -->
                        <i v-if="scope.row.documentType == -1" class="iconfont firerock-iconfile fileTypeIcon"></i>
                        <i v-if="scope.row.documentType != -1" :class="docTypeList[scope.row.documentType]+' fileTypeIcon'" ></i>
                        <span style="margin-left:8px;color:#262626;" >{{scope.row.documentName}}</span>
                        <!-- <span style="margin-left:8px;color:#262626;" @click="viewOnline(scope.row)">{{scope.row.documentName}}</span> -->
                        <!-- </el-link> -->
                    </template>
                </el-table-column>
                <el-table-column width="60">
                <template slot-scope="scope">
                        <el-button icon="el-icon-download"  circle size="mini" style="margin-left:10px;" @click.stop.native="downloadByA(scope.row)"></el-button>
                </template>
                </el-table-column>
            </el-table>
        </el-col>
        <el-col :span="18" >
            <el-table :data="list" highlight-current-row :height="tableHeight" style="width: 100%;"  @row-click="rowClick" @cell-mouse-enter="cursorOver" >
                <!-- <el-table-column prop="folder" ></el-table-column> -->
                <el-table-column prop="documentName" :label="$t('names')" >
                    <template slot-scope="scope" >
                        <div v-if="scope.row.isFolder==1">
                            <i class="el-icon-folder fileTypeIcon"></i><span style="margin-left:8px;color:#262626;" >{{scope.row.documentName}}</span>
                        </div>
                        <div v-if="scope.row.isFolder==0">
                            <!-- <el-link @click.stop.native="viewOnline(scope.row)"> -->
                            <i v-if="scope.row.documentType == -1" class="iconfont firerock-iconfile fileTypeIcon"></i>
                            <i v-if="scope.row.documentType != -1" :class="docTypeList[scope.row.documentType]+' fileTypeIcon'"></i>
                            <span style="margin-left:8px;color:#262626;" >{{scope.row.documentName}}</span>
                            <!-- </el-link> -->
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="size" :label="$t('da-xiao')" width="100">
                    <template slot-scope="scope">
                        {{scope.row.isFolder==0?scope.row.size:"-"}}
                    </template>
                </el-table-column>
                <el-table-column prop="creatorName" :label="$t('creator')" width="100">
                    <template slot-scope="scope">
                        <div>
                            <span v-if="user.userNameNeedTranslate != 1">{{scope.row.creatorName}}</span>
                            <span v-else><TranslationOpenDataText type='userName' :openid='scope.row.creatorName'></TranslationOpenDataText></span>
                        </div>
                    </template>
                </el-table-column>
                <el-table-column prop="indate" :label="$t('creationtime')" sortable="true" width="100"></el-table-column>
                <el-table-column width="140">
                    <template slot-scope="scope" >
                    <div v-show="currentDataId == scope.row.id">
                        <el-button v-if="scope.row.isFolder == 0" icon="el-icon-download"  circle size="mini"  @click.stop.native="downloadByA(scope.row)"></el-button>
                        <el-button icon="el-icon-edit" circle size="mini" style="margin-left:10px;" @click.stop.native="showEditName(scope.row)"></el-button>
                        <el-button icon="el-icon-delete"  circle size="mini" style="margin-left:10px;" @click.stop.native="deleteItem(scope.row)"></el-button>
                    </div>
                    </template>
                </el-table-column>
            </el-table>
        </el-col>
        </div>
        
        <!--新增界面-->
        <el-dialog :title="$t('fileupload')" v-if="addFormVisible" :visible.sync="addFormVisible" :close-on-click-modal="false" customClass="customWidth" width="600px">
            <el-form ref="form1" :model="addForm" :rules="rules" label-width="120px">
                <el-form-item :label="$t('expirationdate')" prop="planEndDate">
                    <el-date-picker v-model="addForm.planEndDate" v-if="user.company.packageProject==1" 
                     :editable="false" 
                     format="yyyy-MM-dd" 
                     value-format="yyyy-MM-dd"
                     :clearable="false" type="date" 
                     :placeholder="$t('optiondate')"></el-date-picker>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click.native="addFormVisible = false">{{ $t('btn.cancel') }}</el-button>
                <el-button type="primary" @click="submitInsert" :loading="addLoading">{{ $t('btn.submit') }}</el-button>
            </div>
        </el-dialog>

         <!-- 文件夹弹出框 -->
        <!-- <el-dialog :title="$t('modifyingFolder')" v-if="addFolderDialog" :visible.sync="addFolderDialog" :close-on-click-modal="false" customClass="customWidth" width="300px">
            <el-form ref="form2" :model="folderForm" :rules="rules" >
                <el-form-item prop="documentName">
                    <el-input v-model="folderForm.documentName" :placeholder="$t('pleaseenterfoldername')" maxlength="25"
                        show-word-limit clearable></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="addFolder" style="width:100%;" >{{ $t('save') }}</el-button>
            </div>
        </el-dialog> -->

        <el-dialog :title="$t('modifyingFolder')" v-if="addFolderDialog" :visible.sync="addFolderDialog" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div class="titleBox">
                <el-tabs v-model="activeName" @tab-click="handleClick" v-if="!addFolderDialogTwo">
                    <el-tab-pane :label="$t('ziDingYiMingCheng')" name="one">
                        <el-form ref="form2" :model="folderForm" :rules="rules" style="margin-top: 10px">
                            <el-form-item prop="documentName">
                                <el-input v-model="folderForm.documentName" :placeholder="$t('pleaseenterfoldername')" maxlength="25"
                                    show-word-limit clearable></el-input>
                            </el-form-item>
                        </el-form>
                    </el-tab-pane>
                    <!-- <el-tab-pane label="从模板中创建" name="two">
                        <div v-for="(item,index) in templateList" :key="index" @click="cardClick(index)">
                            <el-card :class="`box-card ${templateIndex == index ? 'cardOn' : ''}`">
                                <div class="text item">
                                    <div>{{ item.name }}</div>
                                    <div>
                                        <el-link :underline="false" @click="editTemplate(item)"><i class="el-icon-edit"></i></el-link>
                                        <el-link :underline="false" @click="removeTemplate(item)"><i  class="el-icon-delete" style="margin-left: 10px"></i></el-link>
                                        <div class="cardIcon">
                                            <i class="el-icon-check" v-if="templateIndex == index"></i>
                                        </div>
                                    </div>
                                </div>
                            </el-card>
                        </div>
                    </el-tab-pane> -->
                </el-tabs>

                <el-form ref="form2" :model="folderForm" :rules="rules" v-if="addFolderDialogTwo">
                    <el-form-item prop="documentName">
                        <el-input v-model="folderForm.documentName" :placeholder="$t('pleaseenterfoldername')" maxlength="25"
                            show-word-limit clearable></el-input>
                    </el-form-item>
                    <el-form-item >
                        <el-checkbox v-model="folderForm.syncChange">{{ $t('tongBuXiuGaiQiTaXiangMuZhongDeTongMingWenJianJia') }}</el-checkbox>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button v-if="activeName == 'one'" type="primary" @click="addFolder" style="width:100%;" >{{ $t('save') }}</el-button>
                <el-button v-if="activeName == 'two'" type="primary" @click="addFolderTemplate" style="width:100%;" >{{ $t('save') }}</el-button>
            </div>
        </el-dialog>

        <!-- 设为模板 -->
        <el-dialog :title="$t('bianJiMoRenMoBan')" v-if="templatedialing" :visible.sync="templatedialing" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div>
                <div class="filrTree">
                    <el-tree
                        :data="templateDataTree"
                        node-key="id"
                        :expand-on-click-node="false">
                        <span class="custom-tree-node tree_node" slot-scope="{ node, data }">
                            <span>{{ node.label }}</span>
                            <span class="tree_node_btn">
                                <i class="el-icon-edit" @click="editNode(data)"></i>
                                <i class="el-icon-circle-plus-outline" style="margin-left: 10px" @click="newNode(data)"></i>
                                <i class="el-icon-delete" style="margin-left: 10px" @click="removeNode(node, data)"></i>
                            </span>
                        </span>
                    </el-tree>
                    <div class="treeAdd">
                        <i class="el-icon-circle-plus-outline" @click="newNode()"></i>
                    </div>
                </div>

            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:100%;" :loading="templateDataTreeDaylong" @click="addTemplate('templateForm')">{{ $t('save') }}</el-button>
            </div>
        </el-dialog>

        <!-- 添加子节点 -->
        <el-dialog :title="$t('xinZengJieDian')" v-if="addtemplateNodeDailoing" :visible.sync="addtemplateNodeDailoing" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div>
                <el-form :model="nodeForm" ref="nodeForm" label-width="100px" class="demo-ruleForm">
                    <el-form-item :label="$t('nameofthenode')" prop="name"
                        :rules="[
                            { required: true, message: $t('qingShuRuJieDianMingCheng')}
                        ]"
                    >
                        <el-input v-model="nodeForm.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:100%;" @click="addtemplateNode('nodeForm')">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
        <!-- 点击第一级的节点 -->
        <el-dialog :title="$t('xinZengJieDian')" v-if="addtemplateTwoNodeDailoing" :visible.sync="addtemplateTwoNodeDailoing" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div>
                <el-form :model="nodeForm" ref="nodeForms" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="$t('nameofthenode')" prop="name"
                        :rules="[
                            { required: true, message: $t('qingShuRuJieDianMingCheng')}
                        ]"
                    >
                        <el-input v-model="nodeForm.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:100%;" @click="addtemplateTwoNode('nodeForms')">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>
        <!-- 编辑节点的名称 -->
        <el-dialog :title="$t('xinZengJieDian')" v-if="addtemplateNodeNameDailoing" :visible.sync="addtemplateNodeNameDailoing" :close-on-click-modal="false" customClass="customWidth" width="500px">
            <div>
                <el-form :model="nodeForm" ref="nodeFormss" label-width="100px" class="demo-ruleForm">
                    <el-form-item label="$t('nameofthenode')" prop="name"
                        :rules="[
                            { required: true, message: $t('qingShuRuJieDianMingCheng')}
                        ]"
                    >
                        <el-input v-model="nodeForm.name"></el-input>
                    </el-form-item>
                </el-form>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" style="width:100%;" @click="editTemplateNodeName('nodeFormss')">{{ $t('btn.determine') }}</el-button>
            </div>
        </el-dialog>

        </div>
    </section>
</template>
<style scoped lang="scss">
@import "../../assets/scss/handle";

.themeFontColor {
    @include font_color("color");
}
.fileTypeIcon {
    @include font_color("color");
    font-size:20px;
}
.mianbaoxie {
    color: #909399;
}
.mianbaoxie:hover {
    @include font_color("color");
    cursor: pointer;
}
.mianbaoxie:hover .jianto {
    color: #909399;
}
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
.fileCenter {
    margin-bottom: 10px;
}
.filrTree {
    width: 100%;
    max-height: 280px;
    overflow: auto;
    margin-bottom: 10px;
}
.titleBox {
    width: 100%;
    max-height: 340px;
    overflow: auto;
    margin-bottom: 10px;
    padding: 0 10px;
    box-sizing: border-box;
}
.text {
  font-size: 14px;
}
.item {
  margin-bottom: 10px;
  display: flex;
  justify-content: space-between;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
.box-card {
  width: 100%;
  box-sizing: border-box;
  margin: 10px 0;
}
.cardOn {
    border: 1px solid;
    @include border_color("border_color");
}
.cardIcon {
    display: inline-block; 
    margin-left: 10px;
    width: 20px;
    @include font_color("color");
    font-size: 16px;
    font-weight: bold;
}
.treeAdd {
    padding: 0 10px;
    font-size: 20px;
}
</style>
<script>
    import util from "../../common/js/util";

    export default {
        data() {
            return {
                pathList:[],
                currentDataId: null,
                docTypeList:["iconfont firerock-iconJPG","iconfont firerock-iconword","iconfont firerock-icontxt"
                ,"iconfont firerock-iconex","iconfont firerock-iconZip","iconfont firerock-iconvideo"
                ,"iconfont firerock-iconaudio","iconfont firerock-iconPDF"],
                rules: {
                    documentName: [{ required: true, message: this.$t('pleaseenterfoldername'), trigger: "blur" }],
                },
                folderForm:{},
                addFolderDialog: false,
                moveToTrashDialog:false,
                list:[],
                parentFid:null,
                upLoading:false,
                keyword:null,
                user: JSON.parse(sessionStorage.getItem("user")),
                permissions: JSON.parse(sessionStorage.getItem("permissions")),
                recentFiles: [],
                addFormVisible: false,
                addLoading: false,
                curProjectId:null,
                title: "",
                addForm: {
                    
                },
                templateTitle: '',
                templatedialing: false,
                templateForm: {
                    name: ''
                },
                templateDataTree: [],
                addtemplateNodeDailoing: false,
                nodeForm: {
                    name: ''
                },
                excessiveNodeData: null,
                templateDataTreeDaylong: false,
                activeName: 'one',
                templateList: [],
                templateFlg: false,
                templateIndex: '0',
                addFolderDialogTwo: false,
                addtemplateTwoNodeDailoing: false,
                addtemplateNodeNameDailoing: false
            };
        },
        methods: {
            addFolderTemplate() {
                let obj = {
                    templateId: this.templateList[this.templateIndex].id,
                    projectId: this.curProjectId,
                }
                this.parentFid ? obj.parentFid = this.parentFid : ''
                console.log('obj', obj)
                // return
                this.http.post('/document/buildWithTemplate', obj,
                res => {
                    if (res.code == "ok") {
                        this.addFolderDialog = false
                        this.getList()
                    } else {
                        this.$message({message: res.msg,type: 'error'});
                    }
                }, error => {
                    this.$message({message: error,type: 'error'});
                })
            },
            cardClick(index) {
                this.templateIndex = index
            },
            editTemplate(data) {
                console.log('触发')
                // this.templateForm.name = data.name
                // this.templateForm.creWithPro = data.creWithPro ? true : false
                this.templateForm.id = data.id
                this.templateDataTree = data.proDocumentTemDetailList
                // this.templateFlg = false
                this.templatedialing = true
            },
            newNode(data) {
                if(data) {
                    this.excessiveNodeData = data
                    this.addtemplateNodeDailoing = true
                } else {
                    this.addtemplateTwoNodeDailoing = true
                }
                this.nodeForm.name = ''
            },
            editNode(data) {
                this.excessiveNodeData = data
                this.addtemplateNodeNameDailoing = true
                this.nodeForm.name = data.label
            },
            removeTemplate(data) {
                this.$confirm(`${this.$t('queDingShanChu')}【${data.name}】${this.$t('moBanMa')}？`, this.$t('other.prompts'), {
                    confirmButtonText: this.$t('btn.determine'),
                    cancelButtonText: this.$t('btn.cancel'),
                    type: 'warning'
                }).then(() => {
                    this.http.post('/project-document-template/delete', {id: data.id},
                        res => {
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.$t('message.successfullyDeleted'),
                                    type: 'success'
                                });
                                this.getTemplateList()
                            } else {
                                this.$message({message: res.msg,type: 'error'});
                            }
                        }, error => {
                            this.$message({message: error,type: 'error'});
                        })
                }).catch(() => {});
            },
            uploadTemplate(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        this.templateDataTreeDaylong = true
                        this.http.post('/project-document-template/update', {
                            proDocumentTemDetailList: JSON.stringify(this.templateDataTree),
                            name: this.templateForm.name,
                            creWithPro: this.templateForm.creWithPro ? '1' : '0',
                            id: this.templateForm.id,
                            companyId: this.user.companyId
                        },
                        res => {
                            this.templateDataTreeDaylong = false
                            if (res.code == "ok") {
                                this.$message({
                                    message: this.$t('operationissuccessful'),
                                    type: 'success'
                                });
                            } else {this.$message({message: res.msg,type: 'error'});}
                        }, error => {
                            this.templateDataTreeDaylong = false
                            this.$message({message: error,type: 'error'});
                        })
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addTemplate() {
                let obj = {} 
                if(this.templateFlg) {
                    obj = {
                        documentString: JSON.stringify(this.templateDataTree),
                        companyId: this.user.companyId
                    }
                } else {
                    obj = {
                        documentString: JSON.stringify(this.templateDataTree),
                        id: this.templateForm.id,
                        companyId: this.user.companyId
                    }
                }
                this.templateDataTreeDaylong = true
                this.http.post('/project-document-template/addTemplate', obj,
                res => {
                    this.templateDataTreeDaylong = false
                    if (res.code == "ok") {
                        this.$message({
                            message: this.$t('operationissuccessful'),
                            type: 'success'
                        });
                        this.templatedialing = false
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.templateDataTreeDaylong = false
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            addtemplateNode(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('excessiveNodeData',this.excessiveNodeData)
                        let data = this.excessiveNodeData
                        const newChild = { label: this.nodeForm.name, children: [], folderId: this.excessiveNodeData.id || ''};
                        if (!data.children) {
                            this.$set(data, 'children', []);
                        }
                        data.children.push(newChild);
                        this.addtemplateNodeDailoing = false
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            addtemplateTwoNode(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        let obj = {
                            children: [],
                            id: new Date().getTime()/ 1000,
                            label: this.nodeForm.name
                        }
                        this.templateDataTree.push(obj)
                        this.addtemplateTwoNodeDailoing = false
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            editTemplateNodeName(formName) {
                this.$refs[formName].validate((valid) => {
                    if (valid) {
                        console.log('excessiveNodeData',this.excessiveNodeData)
                        let data = this.excessiveNodeData
                        data.label = this.nodeForm.name
                        data.name = this.nodeForm.name
                        this.addtemplateNodeNameDailoing = false
                    } else {
                        console.log('error submit!!');
                        return false;
                    }
                });
            },
            
            removeNode(node, data) {
                this.$confirm(`${this.$t('queDingShanChu')}（${data.label}）${this.$t('jieDian')}？`, this.$t('other.prompts'), {
                    confirmButtonText: this.$t('btn.determine'),
                    cancelButtonText: this.$t('btn.cancel'),
                    type: 'warning'
                }).then(() => {
                    const parent = node.parent;
                    const children = parent.data.children || parent.data;
                    const index = children.findIndex(d => d.id === data.id);
                    children.splice(index, 1);
                }).catch(() => {});
            },
            templatedialingClick(title) {
                this.templateTitle = title
                this.templateForm = {name: ''}
                this.templatedialing = true
                this.templateFlg = true
                this.getTemplateDataTree()
            },
            getTemplateDataTree() {
                this.http.post('/document/getSubList', {
                    projectId: this.curProjectId,
                    parentFid: this.parentFid
                },
                res => {
                    if (res.code == "ok") {
                        this.templateDataTree = []
                        this.templateDataTree = res.data
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            cursorOver(row, column, cell, event) {
                this.currentDataId = row.id;
            },
            viewOnline(row) {
                this.http.post('/pdf-file/getProjectFile', {fileId: row.id},
                res => {
                    if (res.code == "ok") {
                        console.log(res.data+'----'+row.documentName);
                        let routeUrl = this.$router.resolve({
                            path: "/viewonline",
                            params: {serverFname:res.data, fileName:row.documentName}
                        });
                        sessionStorage.setItem("serverFname",res.data);
                        sessionStorage.setItem("fileName",row.documentName);
                        console.log(routeUrl.href);
                        window.open(routeUrl.href, '_blank');
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },
            deleteItem(row) {
                this.$confirm(this.$t('wanttomove'), this.$t('other.prompts'), {
                    //type: 'warning'
                }).then(() => {
                    this.http.post('/document/delete', row,
                    res => {
                        if (res.code == "ok") {
                            this.addFolderDialog = false;
                            this.getRecentList();
                            this.getList();
                        } else {
                            this.$message({
                            message: res.msg,
                            type: "error"
                            });
                        }
                    },
                    error => {
                        this.$message({
                            message: error,
                            type: "error"
                        });
                    });
                });
            },
            viewFolder(item) {
                var list = [];
                if (item == null) {
                    //查看根目录
                    this.parentFid = null;
                } else {
                    this.parentFid = item.id;
                    for (var i=0;i<this.pathList.length; i++) {
                        list.push(this.pathList[i]);
                        if (this.pathList[i].id == item.id) {
                            break;
                        }
                    }
                }
                
                console.log('list=view folder==='+list);
                this.pathList = list;
                this.getList();
            },
            clearPathList() {
                console.log('111')
                this.pathList = []
                this.viewFolder(null)
            },
            rowClick(row, column, event) {
                if (row.isFolder==1) {
                    //进入子目录
                    this.parentFid = row.id;
                    this.pathList.push(row);
                    this.getList();
                } else {
                    //直接查看，在线打开
                }
            },
            addFolder() {
                this.$refs.form2.validate(valid => {
                    if (valid) {
                        this.http.post('/document/createDocument', this.folderForm,
                            res => {
                                if (res.code == "ok") {
                                    this.addFolderDialog = false;
                                    this.getRecentList();
                                    this.getList();
                                } else {
                                    this.$message({
                                    message: res.msg,
                                    type: "error"
                                    });
                                }
                            },
                            error => {
                                this.$message({
                                    message: error,
                                    type: "error"
                                });
                            });
                    }
                });
                
            },
            showEditName(row) {
                this.addFolderDialog = true;
                this.addFolderDialogTwo = true
                this.folderForm = JSON.parse(JSON.stringify(row));
            },
            createFolder(){
                this.addFolderDialog = true;
                this.addFolderDialogTwo = false
                this.folderForm = {projectId: this.curProjectId, folderId: this.parentFid,isFolder: 1};
                this.activeName = 'one'
                // this.getTemplateList()
            },
            defaultTemplate() {
                this.getTemplateList()
            },
            getTemplateList() {
                this.http.post('/project-document-template/list ', {},
                res => {
                    if (res.code == "ok") {
                        this.templateList = res.data
                        this.editTemplate(res.data[0])
                    } else {
                        this.$message({message: res.msg,type: 'error'});
                    }
                }, error => {
                    this.$message({message: error,type: 'error'});
                })
            },

            openWin(url) {
                var el = document.createElement("a");
                document.body.appendChild(el);
                el.href = encodeURI(url); 
                el.target = '_blank'; 
                el.click();
                document.body.removeChild(el);
            },

            downloadByA(row) {
                const a = document.createElement('a'); // 创建a标签
                a.setAttribute('download', row.documentName);// download属性
                a.setAttribute('href', row.url);// href链接
                a.click();// 自执行点击事件
                a.remove();
            },

            //上传
            uploadFile(params) {
                this.upLoading = true;
                var fileObj = params.file;
                var form = new FormData();
                form.append("projectId",this.curProjectId);
                form.append("file", fileObj);
                if (this.parentFid != null) {
                    form.append("folderId", this.parentFid);
                }
                this.http.uploadFile('/document/uploadDocument', form , res => {
                    this.upLoading = false;
                    this.$refs.upload.clearFiles();
                    if (res.code == "ok") {
                        this.$message({
                            message: this.$t('uploadedsuccessfully'),
                            type: 'success'
                        });
                        this.getList();
                        this.getRecentList();
                    } else {
                        this.$message({
                            message: res.msg,
                            type: 'error'
                        });
                    }
                }, error => {
                    this.upLoading = false;
                    this.$refs.upload.clearFiles();
                    this.$message({
                        message: error,
                        type: 'error'
                    });
                })
            },

            //下载
            dowloadFile(row) {
                this.http.post(this.port.project.dowloadFile, {
                    id: row.id
                } , res => {
                    this.getOperList();
                }, error => {
                })
            },


            //获取近期文件
            getRecentList() {
                this.http.post('/document/recentlyList', {
                    projectId: this.curProjectId,
                },
                res => {
                    if (res.code == "ok") {
                        this.recentFiles = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            getUsers() {
                // this.http.post(this.port.manage.list, {
                //     departmentId: -1,
                //     pageIndex: 1,
                //     // pageSize: 99999
                //     pageSize: -1
                // },
                this.http.post('/user/getSimpleActiveUserList', {},
                res => {
                    if (res.code == "ok") {
                        this.users = res.data;
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },


            //获取列表
            getList() {
                this.listLoading = true;
                this.http.post('/document/allList', {
                    projectId: this.curProjectId,
                    parentFid: this.parentFid
                },
                res => {
                    this.listLoading = false;
                    if (res.code == "ok") {
                        this.list = res.data;
                        this.$forceUpdate();
                    } else {
                        this.$message({
                        message: res.msg,
                        type: "error"
                        });
                    }
                },
                error => {
                    this.listLoading = false;
                    this.$message({
                        message: error,
                        type: "error"
                    });
                });
            },
            refreshPage() {
                this.curProjectId = parseInt(this.$route.params.id);
                this.getRecentList();
                this.clearPathList();
            }
        },
        created() {
            console.log('created===');
            let height = window.innerHeight;
            this.tableHeight = height - 190;
            const that = this;
            window.onresize = function temp() {
                that.tableHeight = window.innerHeight - 190;
            };
        },
        mounted() {
            console.log('mounted===');
            this.curProjectId = parseInt(this.$route.params.id);
            this.getRecentList();
            this.getList();
            this.getUsers();
        }
    };
</script>