appFormLowcode/src/views/formTable/index.vue

<!--
@ 作者: 秦东
@ 时间: 2024-10-28 15:22:32
@ 备注: 自定义应用首页
-->
<script lang='ts' setup>
import { useRoute,useRouter } from 'vue-router'
import { appBasicInformation,appTableFormPage,appTableInfoPage,AppTaskInfo,sendAppTaskCount } from '@/api/lowCode/type'
import { gainAppEditPsge,getAllAppTableForm,calculateQuantityOption } from '@/api/lowCode/index'


import Header from '@/views/common/header/formTable/header.vue'
import VisitingCard from '@/views/common/user/visitingCard.vue'
import SvgIcon from '@/components/svgIcon/index.vue'

const route = useRoute()
const router = useRouter()

const appInfo = reactive<appBasicInformation>({
    appKey: "",
    appName: "",
    appSvg: "",
    describe: "",
    state: 0,
    uuid: "",
    menuTree:[]
})
//查询数据参数
const appFormPage = reactive<appTableFormPage>({
    page:1,
    pagesize:40,
    id:route.query.id,
    type:2
})
const gainAppCount = reactive<AppTaskInfo>({
    id:route.query.id,
    type:2
})
const gainAppTaskList = ref<sendAppTaskCount[]>([])
const pageTotal = ref<number>(0) //数据总量
const pageList = ref<appTableInfoPage[]>([]) //数据列表
//滚动条
const _scrollTop = ref<number>(0)
const loadingList = ref(false)  //是否显示加载
const scrollAppBox = ref(null) //滚动条
const loadText = ref("数据加载中，请稍后......")
/**
@ 作者: 秦东
@ 时间: 2024-10-30 15:36:18
@ 功能: 获取app基本信息
*/
const getAppBasicInformation = () => {
    gainAppEditPsge({id:route.query.id})
        .then(({data}) => {
            // console.log(' 获取app基本信息',data)
            appInfo.appKey = data.appKey
            appInfo.appName = data.appName
            appInfo.appSvg = data.appSvg
            appInfo.describe = data.describe
            appInfo.state = data.state
            appInfo.uuid = data.uuid
            appInfo.menuTree = data.menuTree
            loadAppTableForm();
        })
}
//组件渲染后加载
onMounted(()=>{
    appTaskCardList()
    getAppBasicInformation()
})
/**
@ 作者: 秦东
@ 时间: 2024-10-31 14:49:46
@ 功能: 加载表单数据
*/
const loadAppTableForm = () => {
    loadText.value = "数据加载中，请稍后......"
    loadingList.value = true
    getAllAppTableForm(appFormPage)
        .then(({data})=>{
            // console.log("加载表单数据",data)
            pageTotal.value = pageTotal.value + data.count
            // pageTotal.value = data.total
            // pageList.value = data.list
            pageList.value.push(...data.list)
            if(data.total > 0){
                if(pageTotal.value < data.total){
                    let pagenum = appFormPage.pagesize - data.count
                    if (pagenum > 0) {
                        loadText.value = ""
                        loadingList.value = true
                    }else{
                        loadText.value = ""
                        loadingList.value = false
                    }
                }else{
                    loadText.value = ""
                    loadingList.value = true
                }
                
            }else{
                loadText.value = "此选项没有数据！"
                loadingList.value = true
            }
        })
}
/**
@ 作者: 秦东
@ 时间: 2024-10-31 10:44:06
@ 功能: 滚动滑轮
*/
const onHandleAppScroll = (event:any) => {
    if (loadingList.value === true) {
        return
    }
    // console.log("onHandleScroll",loadingList.value, event)
    let wrapRef = scrollAppBox.value.wrapRef
    scrollAppBox.value.moveY = wrapRef.scrollTop * 100 / wrapRef.clientHeight
    scrollAppBox.value.moveX = wrapRef.scrollLeft * 100 / wrapRef.clientWidth
    let poor = wrapRef.scrollHeight - wrapRef.clientHeight

    // console.log("wrapRef",wrapRef)
    // console.log("moveY",scrollAppBox.value.moveY )
    // console.log("moveX",scrollAppBox.value.moveX )
    // console.log("poor",poor,event.scrollTop)
    if (event.scrollTop + 2 >= poor) {
        _scrollTop.value = event.scrollTop
        
        loadingList.value=true
        appFormPage.page++
        // console.log("appFormPage.page",appFormPage.page++)
        loadAppTableForm()
    }
}
/**
@ 作者: 秦东
@ 时间: 2024-10-28 13:40:15
@ 功能: 监听当前页面是否回归到首页
*/
watch(()=>appFormPage.page,(val:number)=>{
    if(val <= 1){
        _scrollTop.value = 0
        scrollAppBox.value.setScrollTop(_scrollTop)
    }
})
/**
@ 作者: 秦东
@ 时间: 2024-11-01 08:33:47
@ 功能: 获取任务数量
*/
const appTaskCardList = () => {
    calculateQuantityOption(gainAppCount)
        .then(({data})=>{
            // console.log("获取任务数量",data)
            gainAppTaskList.value = data
        })
}
/**
@ 作者: 秦东
@ 时间: 2024-11-01 09:36:29
@ 功能: 打开任务列表
*/
const openInfo = (val:sendAppTaskCount) => {
    
    router.push({ path: "/form_table/taskList",query:{id: route.query.id,class:val.sort,title:val.lable}});
}
/**
@ 作者: 秦东
@ 时间: 2024-11-02 09:22:29
@ 功能: 打开App
*/
const openApp = (val:sendAppTaskCount) => {
    
    if(val.isList){
        router.push({ path: "/form_table/taskListPage",query:{id: val.tableId,key: val.appKeyStr,formid: val.versionId,formKey: val.idStr,title: val.label,state:1}});
    }else{
        router.push({ path: "/form_table/taskInfo",query:{id: val.tableId,key: val.appKeyStr,formid: val.versionId,formKey: val.idStr,title: val.label,state:2}});
    }
}
</script>
<template>
    <div class="appBodyCalss">
        <Header :header-title="appInfo.appName" :menu-tree="appInfo.menuTree" :call-back-click="true" />
        <el-scrollbar ref="scrollAppBox" class="appIndexBody" @scroll="onHandleAppScroll">
            <VisitingCard /> 
            <div class="myTaskMenu ">
                <el-card>
                    <div v-for="item in gainAppTaskList" :key="item.sort"  @click="openInfo(item)" class="taskBox">
                        <div class="iconSvgBoxt"><el-badge :value="item.count" :max="99" class="item"><SvgIcon :icon-class="item.icon" :size="30" /></el-badge></div>
                        {{item.lable}}
                    </div>
                </el-card>
            </div>
            <!-- <el-row class="myRowBox" >
                <el-col v-for="item in gainAppTaskList" :key="item.sort" :span="12" class="taskCardLeft">
                
                    <el-card class="myCardBox" shadow="always" @click="openInfo(item)">
                        <table>
                            <tbody>
                                <tr>
                                    <td style="width:75px;">
                                        <div class="iconSvgBox"><SvgIcon :icon-class="item.icon" :size="50" /></div>
                                    </td>
                                    <td valign="top" style="vertical-align: top;">
                                        <div class="carCont">{{item.lable}}</div>
                                        <div class="carCont magTop">{{item.count}}</div>
                                    </td>
                                </tr>
                            </tbody>
                        
                        </table>
                    </el-card>
                </el-col> -->
                <!-- <el-col :span="12" class="taskCardRight">
                    <el-card class="myCardBox" shadow="always">
                        <table>
                            <tbody>
                                <tr>
                                    <td style="width:75px;">
                                        <div class="iconSvgBox"><SvgIcon icon-class="gdqr" :size="50" /></div>
                                    </td>
                                    <td valign="top" style="vertical-align: top;">
                                        <div class="carCont">已办事宜</div>
                                        <div class="carCont magTop">0</div>
                                    </td>
                                </tr>
                            </tbody>
                        
                        </table>
                    </el-card>
                </el-col>
                <el-col :span="12" class="taskCardLeft">
                    <el-card class="myCardBox" shadow="always">
                        <table>
                            <tbody>
                                <tr>
                                    <td style="width:75px;">
                                        <div class="iconSvgBox"><SvgIcon icon-class="woChuangJianDe" :size="50" /></div>
                                    </td>
                                    <td valign="top" style="vertical-align: top;">
                                        <div class="carCont">我创建的</div>
                                        <div class="carCont magTop">0</div>
                                    </td>
                                </tr>
                            </tbody>
                        
                        </table>
                    </el-card>
                </el-col>
                <el-col :span="12" class="taskCardRight">
                    <el-card class="myCardBox" shadow="always">
                        <table>
                            <tbody>
                                <tr>
                                    <td style="width:75px;">
                                        <div class="iconSvgBox"><SvgIcon icon-class="chaoSongWoDe" :size="50" /></div>
                                    </td>
                                    <td valign="top" style="vertical-align: top;">
                                        <div class="carCont">抄送我的</div>
                                        <div class="carCont magTop">0</div>
                                    </td>
                                </tr>
                            </tbody>
                        </table>
                    </el-card>
                </el-col> -->
            <!-- </el-row> -->
            <!--内容列表-->
            <el-row>
                 <el-col v-for="item in pageList" :key="item.id" class="colBox" :span="6">
                    <div   @click="openApp(item)">
                        <div v-if="item.icon!=''" class="iconImgBox"><el-image style="width: 40px; height: 40px" :src="item.icon" fit="cover" /></div>
                        <div v-else class="iconBox" style="background-color: #FFFFFF; color: #000000"><SvgIcon :icon-class="item.svg" :size="40" /></div>
                        <div class="appTitle">
                            <el-text type="info">{{item.label}}</el-text>
                        </div>
                    </div>
                </el-col> 
            </el-row>

            <!-- <div  class="myAppRowBox">
                <el-row :gutter="10">
                    <el-col v-for="item in pageList" :key="item.id" class="appInfoBox" :span="12" @click="openApp(item)">
                        <el-image
                            class="imgBox"
                            :src="item.icon"
                        >
                            <template #error>
                                <div class="image-slot">
                                    <SvgIcon :icon-class="item.svg" :size="'100%'" />
                                </div>
                            </template>
                        </el-image>
                        <div class="appTextTwo">{{item.label}}</div>
                        <div class="appText">创建人:{{item.founder}}</div>
                        <div class="appText">创建时间：{{item.createDate}}</div>
                        
                    </el-col>
                </el-row>
            </div> -->
            <div v-if="loadingList" class="loading">{{loadText}}</div>
        </el-scrollbar>
    </div>
</template>
<style  lang='scss' scoped>
.appBodyCalss{
    // text-align: center;
}
.myAppRowBox{
    padding: 0 10px;
    // margin-top:15px;
    .appInfoBox{
        margin-top:15px;
        
    }
}
.myRowBox{
    // width: calc(100% - 20px);
    // margin: 20px 0 0 10px;
    :deep .el-card__body{
        padding:5px;

    }
}
.taskCardLeft{
    padding: 10px 5px 0px 10px;
}
.taskCardRight{
    padding: 10px 10px 0px 5px;
}
.myCardBox{
    width: 100%;
}
.iconSvgBox{
    width:66px;
    background-color: #01A7F0;
    padding: 8px;
    border-radius: 10px;
    color: #FFFFFF;
}
.carCont{
    width:100%;
    font-size: 18px;
    font-weight:bold;
    text-align: center;
    
}
.magTop{
    margin-top: 5px;
    font-size: 28px;
}
.imgBox{
    display: flex;
    width:100%;
    height: 200px;
    background-color: #EEEEEE;
    align-items: center;
    border-radius: 5px;
    :deep .el-image__inner {
        width:100%;
        height: 200px;
    }
}
.appTextTwo{
    width:100%;
    height:40px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}
.appText{
    width:100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 5px;
}
.appIndexBody{
    width:100%;
    height: calc(100vh - 60px);
    padding: 10px 10px 10px 10px;
}
.loading{
    width:100%;
    text-align: center;
    height:40px;
    line-height: 40px;
}
.myTaskMenu{
    width:100%;
    padding: 0 10px;
    margin: 10px 0 15px 0;
    text-align: center;
    :deep .el-card__body{
        padding: 15px 5px 5px 5px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .taskBox{
        background-color: #FFFFFF;
    }
    .iconSvgBoxt{
        width: 50px;
        background-color: #01A7F0;
        padding: 8px;
        border-radius: 10px;
        color: #FFFFFF;
        margin: 0 auto;
    }
}
.colBox{
    text-align: center;
    padding: 5px 5px;
}
.appTitle{
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 12px;
}
.iconBox{
    padding: 5px 5px;
    display: inline-flex;
    border-radius: 5px;
}
.iconImgBox{
    padding: 5px 5px;
    display: inline-flex;
    border-radius: 5px;
    border: 1px solid #E4E7ED;
}
</style>