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,gainMenuGroupForm } 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<any[]>([]) //数据列表
//滚动条
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
    gainMenuGroupForm(appFormPage)
        .then(({data})=>{
            console.log("加载表单数据",data)
            pageList.value = data
            loadText.value = ""
            loadingList.value = false
        })
}
/**
@ 作者: 秦东
@ 时间: 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" >
            <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-card v-for="item in pageList" :key="item.id" style="max-width: 100%; margin: 5px 0;">
                <template #header>
                    <div class="card-header">
                        <el-text type="info">{{ item.title }}</el-text>
                    </div>
                </template>
                <el-row>
                    <el-col v-for="itemChild in item.list" :key="itemChild.id" class="colBox" :span="6">
                        <div   @click="openApp(itemChild)">
                            
                            <div v-if="itemChild.icon!=''" class="iconImgBox"><el-image style="width: 40px; height: 40px" :src="itemChild.icon" fit="cover" /></div>
                            <div v-else-if="itemChild.svg!=''" class="iconBox" style="background-color: #409EFF; color: #FFFFFF"><SvgIcon :icon-class="itemChild.svg" :size="40" /></div>
                            <div v-else class="iconBox" style="background-color: #409EFF; color: #FFFFFF"><SvgIcon icon-class="all" :size="40" /></div>
                            <div class="appTitle">
                                <el-text type="info">{{itemChild.label}}</el-text>
                            </div>
                        </div>
                    </el-col>
                    
                </el-row>
            </el-card>


           


            
           
            <div v-if="loadingList" class="loading">{{loadText}}</div>
        </el-scrollbar>
    </div>
</template>
<style  lang='scss' scoped>
.appBodyCalss{
    // text-align: center;
    :deep .el-card__body{
        padding:10px 0px 15px 0;
    }
    :deep .el-card__header{
        padding:10px 10px;
    }
    .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;
    }
}
.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>