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

<template>
    <div v-if="!showEdit">
        <div class="bigBox">
            <!-- 功能 -->
            <div class="tabBox">
                <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick" tab-position="top">
                    <el-tab-pane label="我发起的" name="first">
                        <div>
                            <!-- <el-button @click="newFileAdd">新建文件</el-button> -->
                        </div>
                        <div>
                            <el-table :data="myEjoy" style="width: 100%;cursor: pointer;" @row-click="rowClickFN">
                                <!-- <el-table-column type="selection" width="55" /> -->
                                <el-table-column label="名称" width="200">
                                    <template #default="scope">
                                        <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="juzhong">
                                            <el-icon v-if="collectImg" class="juli">
                                                <Star />
                                            </el-icon>
                                            <img v-else src="../../assets/images/yellowstar.png" alt="" class="juli">
                                            <img :src="getImage(scope.row.fileType)" alt="" class="juli">
                                            <span>{{ scope.row.fileName }}</span>
                                        </span>
                                    </template>
                                </el-table-column>
                                <el-table-column prop="createTime" label="时间" sortable width="180" />
                                <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>
                        </div>
                    </el-tab-pane>
                    <el-tab-pane label="我参与的" name="second">
                        <el-table :data="myPack" style="width: 100%;cursor: pointer;" @row-click="rowClickFN">
                            <!-- <el-table-column type="selection" width="55" /> -->
                            <el-table-column label="名称" width="200">
                                <template #default="scope">
                                    <span style="white-space: nowrap;overflow: hidden;text-overflow: ellipsis;" class="juzhong">
                                        <el-icon v-if="collectImg" class="juli">
                                            <Star />
                                        </el-icon>
                                        <img v-else src="../../assets/images/yellowstar.png" alt="" class="juli">
                                        <img :src="getImage(scope.row.fileType)" alt="" class="juli">
                                        <span>{{ scope.row.fileName }}</span>
                                    </span>
                                </template>
                            </el-table-column>
                            <el-table-column prop="createTime" label="时间" sortable width="180" />
                            <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>
                    </el-tab-pane>
                </el-tabs>
            </div>
            <!-- 新增文件盒子 -->
            <div>
                <AddFile v-if="newAdd" :newAdd="newAdd" @threeBe="threeBe"></AddFile>
            </div>
        </div>
    </div>
    <div v-else class="preview">
        <FileEdit
        :docId="clickRowId"
        :copyRow="copyRow"
        :historyPrew="historyPrew"
        :historycopyRow="historycopyRow"
        :onlyView="onlyView"
        ></FileEdit>
    </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';
export default {
    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 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
        }
        function getCountPeople() {
            fileCount.myCount({}).then(res => {
                myEjoy.value = res.rows
            })
        }
        function getMyJoin() {
            fileCount.myJoin({}).then(res => {
                myPack.value = res.rows
            })
        }
        function handleClick(data, e) {
            console.log(data, e, 'tab');
        }
        function getImage(file) {
            if (file === '.txt') {
                return ImgFile.txt
            } else if (file === '.xlxs' || file === '.docx') {
                return ImgFile.xlxs
            } else if (file === '.pptx') {
                return ImgFile.pptx
            } else if (file === '.word') {
                return ImgFile.word
            } else if (file === '.pdf') {
                return ImgFile.pdf
            }
        }
        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
        }
        onMounted(() => {
            getCountPeople()
            getMyJoin()
        })
        return {
            activeName,
            handleClick,
            myEjoy,
            myPack,
            getCountPeople,
            getMyJoin,
            collectImg,
            getImage,
            formatFileSize,
            newAdd,
            newFileAdd,
            threeBe,
            historycopyRow,
            historyPrew,
            onlyView,
            rowClickFN,
            thisLClickRow,
            copyRow,
            clickRowId,
            showEdit,
            addFileTab
        }
    },
    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;
}
.preview {
  width: 100%;
  height: 100%;
  background-color: #fff;
  overflow: hidden;
}
:deep(.el-tabs__nav) {
    margin: 0 calc(100% - 55%);
}
</style>