You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
366 lines
9.6 KiB
366 lines
9.6 KiB
<!--
|
|
@ 作者: 秦东
|
|
@ 时间: 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>
|