增加待审批页面
This commit is contained in:
xuli3099
216
src/pages/notice/waitApprove.vue
Normal file
216
src/pages/notice/waitApprove.vue
Normal file
@@ -0,0 +1,216 @@
|
||||
<template>
|
||||
<view class="con-body">
|
||||
<view class="con-bg">
|
||||
<!-- 头部 -->
|
||||
<customHeader ref="customHeaderRef" :title="'待审批'" :leftFlag="true" :rightFlag="true"></customHeader>
|
||||
|
||||
<!-- 高度来避免头部遮挡 -->
|
||||
<view class="top-height"></view>
|
||||
|
||||
<!-- 正文内容 -->
|
||||
<view class="all-body">
|
||||
|
||||
<!-- 分页部分 -->
|
||||
<mescroll-uni ref="mescrollRef"
|
||||
@init="mescrollInit"
|
||||
@down="downCallback"
|
||||
@up="upCallback"
|
||||
:up="upOption"
|
||||
:down="downOption"
|
||||
:fixed="false"
|
||||
textColor="#ffffff"
|
||||
bgColor="#ffffff"
|
||||
class="scroll-h"
|
||||
:class="{'loading-scroll':cssFlag}"
|
||||
>
|
||||
<view class="white-bg margin-bottom20" v-for="(item, index) in list" :key="index" @click="handleJump(item)">
|
||||
<view class="report-list">
|
||||
<view class="r-list">
|
||||
<view class="r-name">{{ item.subject }}</view>
|
||||
<view class="r-right btn-orange" size="mini" v-if="item.status==1">待处理</view>
|
||||
<view v-else-if="item.status==2">已处理</view>
|
||||
</view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">来自 <text>{{ item.appName }}</text></view>
|
||||
<view class="r-right">
|
||||
<text style="color:#FF2B44" v-if="item.status==1 && (item.level==1 || item.level==2)">
|
||||
{{ formatLevel(item.level) }}
|
||||
</text>
|
||||
<text v-else>{{ formatLevel(item.level) }}</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="border-bottom"></view>
|
||||
<view class="r-list">
|
||||
<view class="r-left">创建人 <text>{{ item.createUser.userId }}</text></view>
|
||||
<view class="r-right">{{ parseTime(item.createTime,'{y}-{m}-{d} {h}:{i}') }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</mescroll-uni>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref, onMounted } from 'vue'
|
||||
import customHeader from '@/components/customHeader.vue'
|
||||
import MescrollUni from 'mescroll-uni/mescroll-uni.vue';
|
||||
import { getNavBarPaddingTop } from '@/utils/system.js'
|
||||
import { flowList } from '@/api/notice.js'
|
||||
import {formatLevel} from '@/utils/status.js'
|
||||
import { parseTime } from '@/utils/datetime.js'
|
||||
|
||||
// 获取导航栏高度用于内容区域padding
|
||||
const navBarPaddingTop = ref(0);
|
||||
onMounted(() => {
|
||||
navBarPaddingTop.value = getNavBarPaddingTop() * 2;
|
||||
})
|
||||
|
||||
// 查询列表
|
||||
let list = ref([]);
|
||||
const mescrollRef = ref(null);
|
||||
const upOption = ref({
|
||||
page: { num: 0, size: 10 },
|
||||
noMoreSize: 5,
|
||||
empty: { tip: '~ 空空如也 ~' },
|
||||
textLoading: '加载中...',
|
||||
textNoMore: '已经到底了'
|
||||
});
|
||||
|
||||
const downOption = ref({
|
||||
auto: false,
|
||||
textInOffset: '下拉刷新',
|
||||
textOutOffset: '释放更新',
|
||||
textLoading: '刷新中...'
|
||||
});
|
||||
|
||||
let cssFlag=ref(false);//控制样式
|
||||
const mescrollInit = (mescroll) => {
|
||||
console.log("mescrollInit=>")
|
||||
cssFlag.value = true;
|
||||
mescrollRef.value = mescroll;
|
||||
};
|
||||
|
||||
|
||||
// 下拉刷新
|
||||
const downCallback = async (mescroll) => {
|
||||
try {
|
||||
console.log("downCallback=>下拉刷新")
|
||||
const res = await getFlowList(1, upOption.value.page.size);
|
||||
cssFlag.value = false;
|
||||
list.value = res.list;
|
||||
mescroll.resetUpScroll();
|
||||
} catch (error) {
|
||||
mescroll.endErr();
|
||||
} finally {
|
||||
mescroll.endSuccess();
|
||||
}
|
||||
}
|
||||
// 上拉加载更多
|
||||
const upCallback = async (mescroll) => {
|
||||
try {
|
||||
console.log("upCallback=>上拉加载更多")
|
||||
const res = await getFlowList(mescroll.num, mescroll.size);
|
||||
if (mescroll.num === 1) {
|
||||
list.value = res.list;
|
||||
} else {
|
||||
list.value.push(...res.list);
|
||||
}
|
||||
mescroll.endBySize(res.list.length, res.total);
|
||||
} catch (error) {
|
||||
mescroll.endErr();
|
||||
}
|
||||
}
|
||||
|
||||
// 获取数据列表
|
||||
const getFlowList = (pageIndex, pageSize) => {
|
||||
return new Promise(async (resolve) => {
|
||||
let param = {
|
||||
pageIndex,
|
||||
pageSize
|
||||
}
|
||||
let res = await flowList(param);
|
||||
let list = res.list || [];
|
||||
resolve({
|
||||
list,
|
||||
total: res.recordCount
|
||||
});
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
// 跳转webview
|
||||
const handleJump = (item)=>{
|
||||
uni.navigateTo({
|
||||
url: '/pages/h5-webview/h5-webview?url=' + item.mobileLink+"&title="+item.subject
|
||||
});
|
||||
}
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.all-body {
|
||||
/* #ifdef APP-PLUS */
|
||||
top: 150rpx;
|
||||
height: calc(100vh - 75px);
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
top:120rpx;
|
||||
height: calc(100vh);
|
||||
/* #endif */
|
||||
}
|
||||
.search{
|
||||
display: flex;
|
||||
}
|
||||
.search .btn-search{
|
||||
border:none;
|
||||
background: none;
|
||||
line-height: normal;
|
||||
color:#fff;
|
||||
line-height: 56rpx !important;
|
||||
padding:10rpx 0 0;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
}
|
||||
.search .btn-search::after{
|
||||
display: none;
|
||||
}
|
||||
.search .custom-search{
|
||||
width:80%;
|
||||
|
||||
}
|
||||
.search .custom-search.uni-searchbar{
|
||||
padding-right:0 !important;
|
||||
}
|
||||
|
||||
.scroll-h{
|
||||
/* #ifdef APP-PLUS */
|
||||
height:calc(100vh - 78px) !important;
|
||||
/* #endif */
|
||||
/* #ifndef APP-PLUS */
|
||||
height: calc(100vh - 65px) !important;
|
||||
/* #endif */
|
||||
}
|
||||
.white-bg{
|
||||
padding-top:0rpx;
|
||||
padding-bottom:10rpx;
|
||||
}
|
||||
|
||||
/* .report-list .r-list{
|
||||
padding: 10rpx 0;
|
||||
} */
|
||||
.report-list .r-list:first-child{
|
||||
padding-bottom:10rpx;
|
||||
}
|
||||
|
||||
.report-list .r-list .r-name {
|
||||
color: #3384DF;
|
||||
font-size: 38rpx;
|
||||
font-weight: bold;
|
||||
}
|
||||
.report-list .r-list .r-left text{
|
||||
font-size: 28rpx;
|
||||
color:#919191;
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user