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