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

<template>
    <section >
        <div :style="'background:#f7f7f7;padding:10px 50px;height:'+tableHeight+'px;'">
        <!--工具条-->
        <!-- <el-col :span="24" class="toolbar" style="padding-bottom: 0px;background:#fff;border-bottom:1px solid #f7f7f7;">
            <el-form :inline="true">
                <el-form-item label="文件库">
                </el-form-item>
                <el-form-item style="float:right;">
                    <el-link type="primary" :underline="false" @click="createFolder()"><i class="el-icon-folder-add"></i><span style="margin-left:5px;">创建文件夹</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;">文件上传</span></el-link>
                    </el-upload>
                </el-form-item>
            </el-form>
        </el-col> -->
        <div style="padding: 20px;background:#fff;border-bottom:1px solid #ddd;font-weight:500;font-size:15px;">
            <span @click="viewFolder(null)" style="color: #409EFF;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" @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><ww-open-data type='userName' :openid='scope.row.creatorName'></ww-open-data></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>
        </div>
    </section>
</template>
<style scoped>
.fileTypeIcon {
    color:#20a0ff;font-size:20px;
}
.mianbaoxie {
    color: #909399;
}
.mianbaoxie:hover {
    color: #409EFF;
    cursor: pointer;
}
.mianbaoxie:hover .jianto {
    color: #909399;
}
</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")),
                recentFiles: [],
                addFormVisible: false,
                addLoading: false,
                curProjectId:null,
                title: "",
                addForm: {
                    
                },
            };
        },
        methods: {
            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===='+list);
                this.pathList = list;
                this.getList();
            },
            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.folderForm = JSON.parse(JSON.stringify(row));
            },
            createFolder(){
                this.addFolderDialog = true;
                this.folderForm = {projectId: this.curProjectId, folderId: this.parentFid,isFolder: 1};
            },

            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;
                    } 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.getList();
            }
        },
        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>