cloudfile-ui/src/views/myjoin/MyJoin.vue

<template>
    <div class="bigBox">
        <!-- 功能 -->
        <div class="tabBox">
            <el-tabs v-model="activeName" v-el-table-infinite-scroll="setPackScroll" :infinite-scroll-distance="30" :infinite-scroll-disabled="packTotal" class="demo-tabs" @tab-click="handleClick" tab-position="top">
                <el-tab-pane label="我发起的" name="first" style="min-height:300px">
                    <div>
                        <!-- <el-button @click="newFileAdd">新建文件</el-button> -->
                    </div>
                    <div>
                        <el-table @row-contextmenu="handleRowClick" height="calc(88vh - 40px - 15px)" :data="myPack" style="width: 100%;cursor: pointer;" @row-click="rowJoinClickFN">
                            <!-- <el-table-column type="selection" width="55" /> -->
                            <el-table-column label="名称" width="280">
                                <template #default="scope">
                                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="juzhong">
                                        <img :src="getImage(scope.row.fileType)" alt="" class="juli">
                                        <el-tooltip class="box-item" effect="dark" placement="top"
                                        :show-after="1000" :content="scope.row.fileName">
                                                <span>{{ scope.row.fileName }}</span>
                                            </el-tooltip>
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="时间" sortable width="280" />
                            <el-table-column prop="fileType" label="类型" />
                            <el-table-column label="大小">
                                <template #default="scope">
                                    <span>
                                        {{ formatFileSize(scope.row.fileSize) }}
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column label="是否归档">
                                <template #default="scope">
                                    <span>
                                        {{ scope.row.isFiled === "Y"?'已归档':'未归档' }}
                                    </span>
                                </template>
                            </el-table-column>
                        </el-table>
                        <div class="setCli" v-if="cliCC" :style="{ left: xz  - 100+ 'px', top: yz -150 + 'px' }">
                            <template v-for="(item, index) in rightMenuData" :key="index">
                                <p @click="chooseSet(item, index, 1)" class="chooseSet">
                                    <img :src="item.img" alt="">
                                    {{ item.name }}
                                </p>
                            </template>
                        </div>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="我参与的" name="second">
                    <el-table :data="myEjoy" style="width: 100%;cursor: pointer;" @row-click="rowJoinClickFN">
                        <!-- <el-table-column type="selection" width="55" /> -->
                        <el-table-column label="名称" width="280">
                            <template #default="scope">
                                <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="juzhong">
                                    <img :src="getImage(scope.row.fileType)" alt="" class="juli">
                                    
                                    <el-tooltip class="box-item" effect="dark" placement="top"
                                        :show-after="1000" :content="scope.row.fileName">
                                        <span>{{ scope.row.fileName }}</span>
                                    </el-tooltip>
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="createTime" label="时间" sortable width="280" />
                        <el-table-column prop="fileType" label="类型" />
                        <el-table-column label="大小">
                            <template #default="scope">
                                <span>
                                    {{ formatFileSize(scope.row.fileSize) }}
                                </span>
                            </template>
                        </el-table-column>
                        <el-table-column label="是否归档">
                                <template #default="scope">
                                    <span>
                                        {{ scope.row.isFiled === "Y"?'已归档':'未归档' }}
                                    </span>
                                </template>
                        </el-table-column>
                    </el-table>
                </el-tab-pane>
            </el-tabs>
        </div>
        <!-- 新增文件盒子 -->
        <div>
            <AddFile v-if="newAdd" :newAdd="newAdd" @threeBe="threeBe"></AddFile>
        </div>
    </div>
</template>

<script>
import { ref, onMounted ,inject} from 'vue'
import fileCount from '../../api/fileCount/fileCount';
import ImgFile from '../myfile/jsComponents/ImgFile';
import { toRaw } from "@vue/reactivity";
import AddFile from './components/AddFile.vue'
import FileEdit from "@/views/myfile/components/FileEdit.vue";
import { ElMessage } from 'element-plus';
import archiveTray from "@/assets/images/archiveTray.png";
import {documentation}from "@/api/biz/actor.js"
import {getInfo}from "@/api/biz/info.js"
import elTableInfiniteScroll from 'el-table-infinite-scroll'
import {  setIcon } from "@/utils/index.js";
export default {
    directives: {
        'el-table-infinite-scroll': elTableInfiniteScroll
    },
    setup() {
        const activeName = ref('first')
        let collectImg = ref(true)
        let myEjoy = ref([])
        let myPack = ref([])
        let newAdd = ref(false)
        const historycopyRow = ref(false);
        const historyPrew = ref();
        const clickRowId = ref();
        const copyRow = ref();
        const onlyView = ref(false);
        const showEdit = ref(false)
        const thisLClickRow = ref()//当前左键的文件
        const addFileTab = inject("addFileTab");
        const ejoyPageNum = ref(1)
        const packPageNum = ref(1)
        const ejoyTotal = ref(true)
        const packTotal = ref(true)
        const clickRow = ref()
        let xz = ref(0)
        let yz = ref(0)
        const cliCC = ref(false)
        const rightMenuData = ref([
            {
                name:'归档',
                img:archiveTray
            }
        ])
        const rowClickFN = (row,col,e)=>{
            // console.log('row',row);
            thisLClickRow.value = row
            clickRowId.value = row.docId
            copyRow.value = toRaw(row)
            addFileTab(copyRow.value,1);
            // showEdit.value = true
        }
        const rowJoinClickFN = (row,col,e)=>{
            console.log('row',row);
            getInfo(row.docId).then((res)=>{
                    // console.log('res',res);
                    row = res.data
                    if(row.isFiled === "Y"){
                        return ElMessage({ message: '该文件已归档 不可再次编辑', type: 'error' })
                    }
                    thisLClickRow.value = row
                    clickRowId.value = row.docId
                    copyRow.value = toRaw(row)
                    addFileTab(copyRow.value,1);
                })
            
        }
        function getCountPeople() {
            packTotal.value = true
            packPageNum.value = 1
            const query = `pageSize=20&pageNum=${packPageNum.value}`
            fileCount.myCount(query).then(res => {
                myPack.value = res.rows
                if(res.rows.length <res.total){
                    packTotal.value = false
                }
            })
        }
        function getMyJoin() {
            ejoyTotal.value = true
            ejoyPageNum.value = 1
            const query = `pageSize=20&pageNum=${ejoyPageNum.value}`
            console.log('query',query);
            fileCount.myJoin(query).then(res => {
                myEjoy.value = res.rows
                if(res.rows.length <res.total){
                    ejoyTotal.value = false
                }
            })
        }
        const setJoinScroll = ()=>{
            // console.log('btm');
             ejoyPageNum.value = ejoyPageNum.value + 1
            const query = `pageSize=20&pageNum=${ejoyPageNum.value}`
              // -------------先禁止掉事件 定时器1秒钟后才能再次触发
            ejoyTotal.value = true
            fileCount.myJoin(query).then(res => {
                const newarr = toRaw(myEjoy.value).concat(res.rows)
                console.log('newarr', newarr);
                myEjoy.value = JSON.parse(JSON.stringify(newarr))
                if(newarr.length <res.total){
                    //获取后的数量<total就可以再次获取
                    setTimeout(()=>{
                        ejoyTotal.value = false
                    },1000)
                }
            })
        }
        const setPackScroll = ()=>{
            // console.log('btm');
            packPageNum.value = packPageNum.value + 1
            const query = `pageSize=20&pageNum=${packPageNum.value}`
              // -------------先禁止掉事件 定时器1秒钟后才能再次触发
            packTotal.value = true
            fileCount.myCount(query).then(res => {
                const newarr = toRaw(myPack.value).concat(res.rows)
                console.log('newarr', newarr);
                myPack.value = JSON.parse(JSON.stringify(newarr))
                if(newarr.length <res.total){
                    //获取后的数量<total就可以再次获取
                    setTimeout(()=>{
                        packTotal.value = false
                    },1000)
                }
            })
            
        }
        function handleClick(data, e) {
            // console.log(data, e, 'tab');
        }
        function getImage(file) {
            return setIcon(file);
        }
        function formatFileSize(fileSize) {
            if (fileSize >= 1024 * 1024 * 1024) {
                // 大于等于1GB，显示GB
                return (fileSize / (1024 * 1024 * 1024)).toFixed(2) + 'GB';
            } else if (fileSize >= 1024 * 1024) {
                // 大于等于1MB，显示MB
                return (fileSize / (1024 * 1024)).toFixed(2) + 'MB';
            } else if (fileSize >= 1024) {
                // 大于等于1KB，显示KB
                return (fileSize / 1024).toFixed(2) + 'KB';
            } else {
                // 小于1KB，显示字节
                return fileSize + 'B';
            }
        }
        function newFileAdd(){
            newAdd.value = true
        }
        function threeBe(data){
            newAdd.value = data
        }
        // 我发起的右键事件
        // 文件名表格每一行点击事件
        function handleRowClick(row, col, e) {
            console.log('row', row);
            clickRow.value = row
            e.preventDefault();
            e.stopPropagation();
            xz.value = e.pageX
            yz.value = e.pageY
            if (cliCC.value === true) {
                cliCC.value = false
            } else {
                cliCC.value = true
            }
        }
        // 关闭文件夹右键菜单
        const closeRMenu = () => {
            // console.log("close");
            cliCC.value = false;
        };
        const chooseSet =async (row, index, num)=>{
            if (row.name == '归档') {
                if(clickRow.value.isFiled == 'Y'){
                    return ElMessage({
                            type: "error",
                            message: "文件已归档，请勿重复操作"
                        })
                }
                const res = await documentation(clickRow.value.docId)
                console.log('res',res);
                if(res.code == 200){
                     ElMessage({
                            type: "success",
                            message: "成功归档"
                        })
                        getCountPeople()
                }
                cliCC.value = false
            }
        }

        onMounted(() => {
            getCountPeople()
            getMyJoin()
            window.addEventListener("click", closeRMenu, true);
        })
        return {
            activeName,
            handleClick,
            myEjoy,
            myPack,
            getCountPeople,
            getMyJoin,
            collectImg,
            getImage,
            formatFileSize,
            newAdd,
            newFileAdd,
            threeBe,
            historycopyRow,
            historyPrew,
            onlyView,
            rowClickFN,
            thisLClickRow,
            copyRow,
            clickRowId,
            showEdit,
            addFileTab,
            handleRowClick,
            clickRow,
            xz,
            yz,
            rightMenuData,
            archiveTray,
            closeRMenu,
            cliCC,
            chooseSet,
            rowJoinClickFN,
            ejoyPageNum,
            packPageNum,
            ejoyTotal,
            packTotal,
            setJoinScroll,
            setPackScroll
        }
    },
    components:{
        AddFile,
        FileEdit
    }
}
</script>

<style scoped lang="scss">
@import "@/assets/styles/my-common.scss";
.bigBox {
    width: 100%;
    height: 88vh;
    margin: 0 auto;
    background-color: white;
}

.tabBox {
    width: 100%;
    height: 40px;
    margin: 0 auto;
    background-color: #F5F7F9;
    position: relative;
}
.juli{
    width: 22px;
    height: 22px;
}
.preview {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
.setCli {
    width: 156px;
    max-height: auto;
    position: absolute;
    // top: -70px;
    // left: 300px;
    flex-wrap: 400;
    background-color: white;
    border: 1px solid gray;
    border-radius: 4px;
    z-index: 300000000;
    overflow-y: auto;
    // font-size: 16px;
}
.chooseSet {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    font-size: 13px;
    cursor: pointer;
    // display: flex;
    // align-items: center;
    // position: relative;
    img {
        margin-right: 4px;
        vertical-align: middle;
    }
}

.chooseSet:hover {
    width: 140px;
    height: 30px;
    line-height: 30px;
    margin: 5px auto;
    font-size: 13px;
    background-color: #F5F7F9;
    /* color: white; */
}
:deep(.el-tabs__nav) {
    margin: 0 calc(100% - 55%);
}
</style>