hreenshan112
12 months ago
5 changed files with 559 additions and 133 deletions
@ -0,0 +1,475 @@ |
|||
<!-- |
|||
@ 作者: 秦东 |
|||
@ 时间: 2024-10-28 15:22:32 |
|||
@ 备注: 自定义应用首页 |
|||
--> |
|||
<script lang='ts' setup> |
|||
import { useRoute,useRouter } from 'vue-router' |
|||
import { appBasicInformation,appTableFormPage,appTableInfoPage,AppTaskInfo,sendAppTaskCount,gainMenuGroupForm } 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-card style="max-width: 100%; margin: 5px 0;"> |
|||
<template #header> |
|||
<div class="card-header"> |
|||
<el-text type="info">栏目</el-text> |
|||
</div> |
|||
</template> |
|||
|
|||
</el-card> |
|||
|
|||
|
|||
<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; |
|||
: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> |
|||
Loading…
Reference in new issue