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.
435 lines
14 KiB
435 lines
14 KiB
1 year ago
|
<!--
|
||
|
|
@ 作者: 秦东
|
||
|
|
@ 时间: 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:6,
|
||
|
|
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>
|