oa-system/src/components/OP/SharedFile.vue

<template>
    <div class="sharedsile-all">
        <div style="color: red;margin-bottom: 5px;">文件类型与团组名称选择哪个就是上传到对应的类型和团组！！！</div>
        <div style="display: flex;justify-content: space-between;align-items: baseline;">
            <div class="sharedsile-Groups">
                <div class="sharedsile-Groups-li">
                    <label>文件类型:</label>
                    <el-select size="small" @change="QuerySharedFile" v-model="filetype" clearable filterable placeholder="团组选择"
                        style="width: 150px;">
                        <el-option v-for="item in filetypelist" :key="item.id" :label="item.name" :value="item.id">
                        </el-option>
                    </el-select>
                </div>
                <div v-if="filetype == 1412" class="sharedsile-Groups-li">
                    <label>团组名称:</label>
                    <el-select  size="small" @change="QuerySharedFilegroup" v-model="diIdselect" clearable filterable placeholder="团组选择"
                        style="width: 300px;">
                        <el-option v-for="item in delegationInfoList" :key="item.id" :label="item.teamName"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </div>
            </div>
            <div>
                <el-upload class="upload-demo" ref="upload" action="" :multiple="true" :on-change="handleChange"
                    :on-preview="handlePreview" :on-remove="handleRemove" :file-list="fileList" :auto-upload="false">
                    <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
                    <el-button style="margin-left: 10px;" size="small" type="success"
                        @click="submitUpload">上传到服务器</el-button>
                    <div slot="tip" class="el-upload__tip">请不要上传过大的文件！</div>
                </el-upload>
            </div>
        </div>
        <div class="share-table">
            <div style="margin-bottom: 8px;">
                <el-date-picker
                size="small" 
                v-model="shdatetime"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期">
                </el-date-picker>
                <el-input  size="small"  v-model="fileName" placeholder="请输入文件名称搜索" style="width: 300px; margin-right: 10px;"
                    clearable @clear="handleSearch"></el-input>
                <el-button  size="small"  type="primary" @click="handleSearch">搜索</el-button>
            </div>
            <el-table :data="tabledata" border style="width: 100%">
                <el-table-column prop="fileName" label="文件名称">
                </el-table-column>
                <el-table-column prop="createTime" label="上传时间" width="180">
                </el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" @click="Downloadshare(scope.row)" type="primary">下载</el-button>
                        <el-button size="mini" @click="handleDelete(scope.row)" type="danger">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-pagination style="margin-top: 20px; text-align: center;" background
                layout="prev, pager, next, sizes, total" :current-page="currentPage" :page-size="pageSize"
                :page-sizes="[1, 5, 10, 15]" :total="total" @current-change="handlePageChange"
                @size-change="handleSizeChange">
            </el-pagination>
        </div>
        <div v-if="filetype == 1412" class="sharedsile-ps">PS:请先选择团组再下载！</div>
        <div v-if="filetype == 1412" class="sharedsile-table">
            <div class="sharedsile-table-tr">
                <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-name">文件名称
                </div>
                <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-type">版本格式
                </div>
                <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-Language">语言
                </div>
                <div style="font-size: 14px;color: #909399;font-weight: 600;" class="sharedsile-table-tb tb-download">操作
                </div>
            </div>
            <div class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">OP行程单</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="dcwzxc(0)" type="primary">下载</el-button>
                </div>
            </div>
            <div class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">OP行程单</div>
                <div class="sharedsile-table-tb tb-type">PDF</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="dcwzxc(1)" type="primary">下载</el-button>
                </div>
            </div>
            <div class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">团组名单</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="Exportlist(0)" type="primary">下载</el-button>
                </div>
            </div>
            <div class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">团组名单</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">英文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="Exportlist(1)" type="primary">下载</el-button>
                </div>
            </div>
            <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">倒推表</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="PostInvertedListFileDownload" type="primary">下载</el-button>
                </div>
            </div>
            <div  v-if="!isMarketingDepartment">
                <div v-for="(item,index) in filesidarrs" :key="index" class="sharedsile-table-tr">
                    <div class="sharedsile-table-tb tb-name">{{ item.name }}</div>
                    <div class="sharedsile-table-tb tb-type">WORD</div>
                    <div class="sharedsile-table-tb tb-Language">中文</div>
                    <div class="sharedsile-table-tb tb-download">
                        <el-button size="small" @click="eptschedule(item.filetype, item.id)" type="primary">下载</el-button>
                    </div>
                </div>
            </div>
            <!-- <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">出国出境经费审核计算明细</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="eptschedule(1, filesidarrs[0])" type="primary">下载</el-button>
                </div>
            </div>
            <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">因公出国(境)经费测算明细表</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="eptschedule(1, filesidarrs[1])" type="primary">下载</el-button>
                </div>
            </div>
            <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">四川省商务厅出国经费财政先行审核表</div>
                <div class="sharedsile-table-tb tb-type">EXCEL</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="eptschedule(1, filesidarrs[2])" type="primary">下载</el-button>
                </div>
            </div>
            <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">成都市因公临时出国任务和预算审批意见表（外专培训团专用）</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="eptschedule(1, filesidarrs[3])" type="primary">下载</el-button>
                </div>
            </div>
            <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">派员单位出(境)任务和预算审批意见表</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="eptschedule(2, filesidarrs[4])" type="primary">下载</el-button>
                </div>
            </div>
            <div v-if="!isMarketingDepartment" class="sharedsile-table-tr">
                <div class="sharedsile-table-tb tb-name">省级单位出(境)经费报销单</div>
                <div class="sharedsile-table-tb tb-type">WORD</div>
                <div class="sharedsile-table-tb tb-Language">中文</div>
                <div class="sharedsile-table-tb tb-download">
                    <el-button size="small" @click="eptschedule(2, filesidarrs[5])" type="primary">下载</el-button>
                </div>
            </div> -->
        </div>
    </div>
</template>
<script>
export default {
    data() {
        return {
            diIdselect: '',
            delegationInfoList: [],
            filetype: '',
            filetypelist: [],
            pageloadData: {
                "portType": 1,
                "pageIndex": 1,
                "pageSize": 10,
                "contact": "",
                "location": "",
                "client": "",
                "userid": "",
                "lvlid": 0,
                "business": "",
                "Range": 0,
                "Category": 0,
                "operationUserId": 0
            },
            token: '',
            pageId: '',
            userId: '',
            fileList: [],
            tabledata: [],
            currentPage: 1, // 当前页码
            pageSize: 5, // 每页显示条数
            total: 0, // 总条数
            isMarketingDepartment:false,
            fileName:'',
            shdatetime:[],
            filesidarrs:[],
            grouptodiid:0
        }
    },
    methods: {
        //处理时间
        disposeTime(val){
            var date = new Date(val);
            var y = date.getFullYear();
            var m = date.getMonth() + 1;
            m = m < 10 ? ('0' + m) : m;
            var d = date.getDate();
            d = d < 10 ? ('0' + d) : d;
            let time = y + '-' + m + '-' + d;
            return time
        },
        //基础数据
        SharedFileInit() {
            var url = "/api/Groups/SharedFileInit?userid="+this.userId+"&portType=1"
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.delegationInfoList = res.data.data.dropDownGroupList;
                    that.filetypelist = res.data.data.dropDownType;
                    that.filetype = that.filetypelist[0].id;
                    that.isMarketingDepartment=res.data.data.isMarketingDepartment;
                    if (that.grouptodiid!==that.grouptodiid) {
                        that.diIdselect = that.delegationInfoList[0].id;
                        that.EnterExitCostFileOwner(that.delegationInfoList[0].provinceId);
                    }else{
                        that.diIdselect = that.grouptodiid;
                        var objs = {}
                        objs = that.delegationInfoList.find(function (i) {
                            return i.id === that.grouptodiid
                        });
                        that.EnterExitCostFileOwner(objs.provinceId);
                    }
                    that.QuerySharedFile();
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        handleSearch(){
            console.log(this.shdatetime);
            
            this.QuerySharedFile();
        },
        //获取文件id
        EnterExitCostFileOwner(val) {
            var url = "/api/Groups/EnterExitCostFileOwner/"+val
            var that = this
            this.$axios({
                method: 'get',
                url: url,
            }).then(function (res) {
                var filesidarr=[];
                var filesidarrs=[];
                if (res.data.code == 200) {
                    var files=res.data.data;
                    for(let i=0;i<files.wordTypeData.length;i++){
                        files.wordTypeData[i].filetype=1
                        filesidarr.push(files.wordTypeData[i]);
                    }
                    for(let j=0;j<files.excelTypeData.length;j++){
                        files.excelTypeData[j].filetype=2
                        filesidarr.push(files.excelTypeData[j])
                    }
                    that.filesidarrs=filesidarr;
                    
                }else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //页面加载
        padeload() {
            var url = "/api/Business/PostGroupNameScreen"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: 1,
                    pageSize: 9000,
                    groupName: '',
                    userId: that.userId == 21 ? -1 : that.userId,
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.delegationInfoList = res.data.data;
                    that.diIdselect = that.delegationInfoList[0].id;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        QuerySharedFilegroup(val){
            var obj = {}
            obj = this.delegationInfoList.find(function (i) {
                return i.id === val
            });
            this.EnterExitCostFileOwner(obj.provinceId);
            this.QuerySharedFile();
        },
        //文件列表
        QuerySharedFile() {
            if (this.shdatetime==null) {
                this.shdatetime=[]
            }
            var url = "/api/Groups/QuerySharedFile"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    pageIndex: that.currentPage,
                    pageSize: that.pageSize,
                    fileType: that.filetype,
                    diid: that.filetype != 1412 ? 0 : that.diIdselect==""?0:that.diIdselect,
                    fileName:that.fileName,
                    startTime:that.shdatetime.length!=0?that.disposeTime(that.shdatetime[0]):"",
                    endTime:that.shdatetime.length!=0?that.disposeTime(that.shdatetime[1]):"",
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.tabledata = res.data.data.fileList;
                    that.total = res.data.data.totalCount; 
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        // 分页页码改变事件
        handlePageChange(val) {
            this.currentPage = val; // 更新当前页码
            this.QuerySharedFile(); // 重新查询数据
        },

        // 每页显示条数改变事件
        handleSizeChange(val) {
            this.pageSize = val; // 更新每页显示条数
            this.currentPage = 1; // 重置当前页码
            this.QuerySharedFile(); // 重新查询数据
        },
        //ctable获取团组
        PostGroupListByCTableAndUserId() {
            var url = "/api/Business/PostGroupListByCTableAndUserId"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    pageIndex: 1,
                    pageSize: 9000,
                    cTable: 1081,
                    userId: that.userId,
                    teamName: "",
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.delegationInfoList = res.data.data;
                    that.diIdselect = that.delegationInfoList[0].id;
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        //导出完整行程
        dcwzxc(val) {
            var url = "/api/Groups/ExportTravel"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    diid: that.diIdselect,
                    isPDF: val
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    window.open(res.data.data.replace('C:/Server/File/OA2023/', 'http://132.232.92.186:24/'));
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //团组名单
        Exportlist(val) {
            var url = "/api/Groups/PostTourClientListDownloadFile"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    userId: that.userId,
                    pageId: that.pageId,
                    diId: that.diIdselect,
                    language: val
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    window.location.href = res.data.data
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error("下载失败！");
            });
        },
        //导出倒推表
        PostInvertedListFileDownload() {
            var url = "/api/Groups/PostInvertedListFileDownload"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: {
                    portType: 1,
                    diId: that.diIdselect
                }
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.$message({
                        message: res.data.msg,
                        type: 'success',
                        offset: 50
                    });
                    window.open(res.data.data);
                } else {
                    that.$message.error(res.data.msg);
                }
            }).catch(function (error) {
                that.$message.error(error);
            });
        },
        //三公导出
        eptschedule(val1, val2) {
            var url = "/api/Groups/PostEnterExitCostDownload"
            var that = this
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + this.token
                },
                data: {
                    portType: 1,
                    diId: that.diIdselect,
                    exportType: val1,
                    subTypeId: val2
                }
            }).then(function (res) {
                console.log(res)
                if (res.data.code == 200) {
                    that.$message({
                        type: 'success',
                        message: res.data.msg
                    });
                    window.open(res.data.data.url);
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        // 文件状态改变时的钩子，添加文件、上传成功和上传失败时都会被调用,function(file, fileList)
        handleChange(file, fileList) {
            // if (fileList.length > 1 && fileList.status !== "fail") {
            //     fileList.splice(0, 1);
            // } else if (fileList.status === "fail") {
            //     errorMsg("上传失败，请重新上传！");
            //     fileList.splice(0, 1);
            // }
            this.fileList = fileList
        },
        //上传服务器
        submitUpload() {
            var verdict = false
            //判断是否有文件再上传
            console.log(this.fileList);

            if (this.fileList.length === 0) {
                return this.$message.warning('请选取文件后再上传！');
            }
            // 下面的代码将创建一个空的FormData对象:
            const formData = new FormData()
            // 你可以使用FormData.append来添加键/值对到表单里面；
            this.fileList.forEach((file) => {
                if (file.raw != undefined) {
                    verdict = true;
                    formData.append('Files', file.raw);
                }
            })

            formData.append('Diid', this.filetype != 1412 ? 0 : this.diIdselect);
            formData.append('Userid', this.userId);
            formData.append('FileType', this.filetype);
            if (!verdict) {
                return
            }
            var that = this;
            var url = "/api/Groups/SharedFileUpload"
            this.$axios({
                method: 'post',
                url: url,
                headers: {
                    Authorization: 'Bearer ' + that.token
                },
                data: formData
            }).then(function (res) {
                if (res.data.code == 200) {
                    that.clearFileList(); // 上传成功后清空文件列表
                    that.QuerySharedFile();
                    that.$message.success(res.data.msg);
                    // window.open(res.data.data.url)
                } else {
                    that.$message.error(res.data.msg);
                }
            })
        },
        // 清空文件列表
        clearFileList() {
            this.$refs.upload.clearFiles(); // 调用 el-upload 的 clearFiles 方法
            this.fileList = []; // 清空本地文件列表
        },
        handleRemove(file, fileList) {
            console.log(file, fileList);
        },
        handlePreview(file) {
            console.log(file);
        },
        Downloadshare(val) {
            window.open(val.filePath)
        },
        handleDelete(val) {
            this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
            }).then(() => {
                var url = "/api/Groups/DeleteSharedFile"
                var that = this
                this.$axios({
                    method: 'post',
                    url: url,
                    headers: {
                        Authorization: 'Bearer '
                    },
                    data:{
                        id: val.id,
                        userId: that.userId,
                    }
                }).then(function (res) {
                    if(res.data.code==200){
                        that.$message({
                            message:res.data.msg ,
                            type: 'success',
                        });
                        that.QuerySharedFile();
                    }else{
                        that.$message({
                            message:res.data.msg ,
                            type: 'warning',
                        });
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });          
            });
            
        }
    },
    created() {
        this.grouptodiid = Number(this.$route.query.diId);
        this.token = JSON.parse(localStorage.getItem('userinif')).token;
        this.userId = JSON.parse(localStorage.getItem('userinif')).userInfo.userId
        this.pageId = Number(localStorage.getItem('indexs').split('-')[1]);//页面id
        // this.PostGroupListByCTableAndUserId()
        this.SharedFileInit();

    }
}
</script>
<style>
.sharedsile-all {
    background-color: #fff;
    padding: 20px;
    box-shadow: 0 0 5px #0005;
    border-radius: 10px;
    min-height: 810px;
}

.sharedsile-Groups {
    display: flex;
    flex-wrap: wrap;
}

.sharedsile-btn {
    width: 200px;
}

.sharedsile-table-tr {
    display: flex;
}

.sharedsile-ps {
    margin-top: 20px;
    font-size: 14px;
    
}

.sharedsile-table {
    max-height: 700px;
    border-bottom: 1px solid #DCDFE6;
    overflow: hidden;
    overflow: auto;
}

.sharedsile-table-tr {
    border-top: 1px solid #DCDFE6;
}

.sharedsile-table-tb {
    padding: 10px;
    text-align: center;
    border-left: 1px solid #DCDFE6;
    font-size: 14px;
    color: #555;
    display: flex;
    justify-content: center;
    align-items: center;
}

.sharedsile-table-tb:last-child {
    border-right: 1px solid #DCDFE6;
}

.tb-name {
    width: 40%;
}

.tb-type {
    width: 25%;
}

.tb-Language {
    width: 25%;
}

.tb-download {
    width: 10%;
}

.sharedsile-Groups-li {
    display: flex;
    align-items: center;
    margin-right: 10px;
}

.sharedsile-Groups-li label {
    width: 60px;
}

.share-table {
    margin-top: 10px;
}
</style>