618 lines
16 KiB
Vue
618 lines
16 KiB
Vue
<template>
|
||
<view class="index">
|
||
<view>
|
||
<view
|
||
style="height: 290rpx;background-image: url('../../static/home/index-top-img.png');background-position: center bottom;background-size: 100%;">
|
||
</view>
|
||
<view class="navigate-title">
|
||
<view @click="goIntoTargetPage('daiban')"
|
||
style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
|
||
<text class="text">{{ticketCount}}</text>
|
||
<view class="status">待办工单</view>
|
||
</view>
|
||
<view @click="goIntoTargetPage('copy')"
|
||
style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
|
||
<text class="text">{{copyCount}}</text>
|
||
<view class="status">抄送我</view>
|
||
</view>
|
||
<view @click="goIntoTargetPage('warning')"
|
||
style="width: 25%;height: 100%;display: flex;flex-direction: column;justify-content: center;">
|
||
<text class="text">{{eventCount}}</text>
|
||
<view class="status">事件提醒</view>
|
||
</view>
|
||
</view>
|
||
<view class="daiban">
|
||
<view class="daiban01">
|
||
<view class="title">
|
||
<view class="left-content">
|
||
<view class="img-view">
|
||
<image src="../../static/home/daiban.png" mode="" class="img"></image>
|
||
</view>
|
||
<text class="title-text-left">待审批</text>
|
||
</view>
|
||
<view class="" @click="goIntoTargetPage('duty')">
|
||
<text class="title-text-right">查看更多</text>
|
||
<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="listWrap" v-if="ticketList.length>0">
|
||
<view v-for="item in ticketList" :key="item.id">
|
||
<view class="itemTitle">{{item.title}}</view>
|
||
<view class="itemCenter">
|
||
<view class="info-details" v-if="item.ticket_data.name">工单名称：{{item.ticket_data.name}}</view>
|
||
<view class="info-details">所属工作流：{{item.workflow_.name}}</view>
|
||
<view class="info-details">工单节点：{{item.state_.name}}</view>
|
||
<view class="info-details">工单状态：{{act_states[item.act_state]}}</view>
|
||
<view class="info-details">提交时间：{{item.create_time}} </view>
|
||
<view class="info-details">更新时间：{{item.update_time}} </view>
|
||
<!-- <view class="info-details">可处理人：{{item.update_time}} </view> -->
|
||
<view class="info-details" v-if="item.participant_&&item.participant_.length>0">
|
||
可处理人：
|
||
<text v-for="(val,index) in item.participant_">{{val.name}} <text v-if="index!==item.participant_.length-1">、</text></text>
|
||
</view>
|
||
</view>
|
||
<view class="bottom-btns">
|
||
<view class="shenhezhong bottom-btn" @click="ticketHandle(item,'handle')"
|
||
v-if="(item.act_state===1||item.act_state===3)&&item.state_.type===0">
|
||
<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
|
||
处理
|
||
</view>
|
||
<view class="shenhezhong bottom-btn" @click="ticketHandle(item,'handle')"
|
||
v-if=" item.act_state===2&&item.create_by==vuex_user.id">
|
||
<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
|
||
处理
|
||
|
||
</view>
|
||
<view class="shenhejieshu bottom-btn" @click="ticketHandle(item,'show')">
|
||
<image src="../../static/my/my_apply/tongguo.png" mode=""></image>
|
||
查看
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="listWrap" v-else>
|
||
<view class="emptyList">暂无待办工单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="copy">
|
||
<view class="copy01">
|
||
<view class="title">
|
||
<view class="left-content">
|
||
<view class="img-view">
|
||
<image src="../../static/home/daiban.png" mode="" class="img"></image>
|
||
</view>
|
||
<text class="title-text-left">抄送我</text>
|
||
</view>
|
||
<view class="" @click="goIntoTargetPage('cc')">
|
||
<text class="title-text-right">查看更多</text>
|
||
<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="listWrap" v-if="copyList.length>0">
|
||
<view v-for="item in copyList" :key="item.id">
|
||
<view class="itemTitle">{{item.title}}</view>
|
||
<view class="itemCenter">
|
||
<view class="info-details" v-if="item.ticket_data.name">工单名称：{{item.ticket_data.name}}</view>
|
||
<view class="info-details">所属工作流：{{item.workflow_.name}}</view>
|
||
<view class="info-details">工单状态：{{item.state_.name}}</view>
|
||
<view class="info-details">提交时间：{{item.create_time}} </view>
|
||
<view class="info-details">更新时间：{{item.update_time}} </view>
|
||
</view>
|
||
<view class="bottom-btns">
|
||
<view class="shenhejieshu bottom-btn" @click="ticketHandle(item,'show')">
|
||
<image src="../../static/my/my_apply/tongguo.png" mode=""></image>
|
||
查看
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="listWrap" v-else>
|
||
<view class="emptyList">暂无待办工单</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="tongzhi">
|
||
<view class="title">
|
||
<view class="left-content">
|
||
<view class="img-view">
|
||
<image src="../../static/home/tongzhi.png" mode="" class="img"></image>
|
||
</view>
|
||
<text class="title-text-left">最近发生</text>
|
||
</view>
|
||
<view class="" @click="goIntoTargetPage('warning')">
|
||
<text class="title-text-right">查看更多</text>
|
||
<uni-icons type="right" :size="11" color="#ababab"></uni-icons>
|
||
</view>
|
||
</view>
|
||
<view class="line"></view>
|
||
<view class="listWrap" v-if="eventList.length>0">
|
||
<view v-for="event in eventList" :key="event.id">
|
||
<view class="itemTitle" v-if="event.cates_">事件类型:
|
||
<text v-for="cate in event.cates_">{{cate.name}}</text>
|
||
</view>
|
||
<view class="itemCenter">
|
||
<view class="info-details">触发时间：{{event.create_time}}</view>
|
||
<view class="info-details">事件信息：{{event.voice_msg}}</view>
|
||
</view>
|
||
<view class="bottom-btns">
|
||
<view class="shenhezhong bottom-btn" @click="eventHandle(event)">
|
||
<image src="../../static/my/my_apply/blue-time.png" mode=""></image>
|
||
处理
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="listWrap" v-else>
|
||
<view class="emptyList">今日暂无事件</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<u-popup :round="10" v-model="dShow" mode="center" border-radius="14">
|
||
<view style="margin: 30rpx">
|
||
下载中 请勿退出 {{percentVal}}%
|
||
</view>
|
||
|
||
</u-popup >
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
dShow: false,
|
||
percentVal: 0,
|
||
cateAggForm: {
|
||
start_create: '',
|
||
is_handled: false,
|
||
completed: true
|
||
},
|
||
limitedOperation:false,
|
||
limitedRpj:false,
|
||
limitedVisit:false,
|
||
copyList: [],
|
||
ticketList: [],
|
||
eventList: [],
|
||
eventCount: 0,
|
||
ticketCount: 0,
|
||
copyCount:0,
|
||
act_states: {
|
||
0: "草稿中",
|
||
1: "进行中",
|
||
2: "被退回",
|
||
3: "被撤回",
|
||
4: "已完成",
|
||
5: "已关闭",
|
||
},
|
||
// 2022年2月18日
|
||
mytopimg: require("@/static/home/bgimg-top.jpg"),
|
||
}
|
||
},
|
||
onLoad() {
|
||
// #ifdef APP-PLUS
|
||
this.showHeader = false;
|
||
this.statusHeight = plus.device.uuid; //uniapp打包安卓调用设备唯一标识方法
|
||
// #endif
|
||
this.checkVersion()
|
||
},
|
||
onShow() {
|
||
if(this.vuex_user.type==='visitor'||this.vuex_user.type==='driver'){
|
||
this.limitedVisit = true;
|
||
}else{
|
||
let date = new Date();
|
||
this.cateAggForm.start_create = date.getFullYear() + '-' + (date.getMonth() + 1) + '-' + date.getDate();
|
||
this.getTicketAgg();
|
||
this.getTicket();
|
||
this.getcopy();
|
||
this.getEventAgg();
|
||
this.getEvent();
|
||
}
|
||
|
||
},
|
||
methods: {
|
||
checkVersion() {
|
||
let that = this;
|
||
uni.getSystemInfo({
|
||
success(res) {
|
||
that.$u.vuex('vuex_version', res.appVersion)
|
||
// #ifdef APP-PLUS
|
||
if (res.platform == 'android') {
|
||
that.$u.api.apkCheck().then(res1 => {
|
||
// console.log(res.appVersion, 2, res1.version)
|
||
if (res.appVersion < res1.version) {
|
||
uni.showModal({
|
||
title: "版本更新",
|
||
content: '有新的版本发布, 请下载新版本',
|
||
confirmText: '立即更新',
|
||
cancelText: '稍后进行',
|
||
success: function(res2) {
|
||
if (res2.confirm) {
|
||
let fullurl = res1.file
|
||
if(res1.file.indexOf("http") == -1){
|
||
fullurl = that.vuex_host + res1.file
|
||
}
|
||
that.dShow = true // show变量控制一个下载进度弹框（这个UI样式自己写即可）
|
||
// 创建一个下载任务，并根据后端返回的apk静态资源地址filePath进行下载
|
||
var dtask = plus.downloader.createDownload(fullurl, {}, function(d, status) {
|
||
// 下载完成
|
||
if (status == 200) {
|
||
that.dShow = false // 下载完成再把下载进度弹框关闭即可
|
||
plus.runtime.install(plus.io.convertLocalFileSystemURL(d
|
||
.filename), {}, {}, function(error) {
|
||
uni.showToast({
|
||
title: '安装失败',
|
||
duration: 1500
|
||
});
|
||
})
|
||
} else {
|
||
uni.showToast({
|
||
title: '更新失败',
|
||
duration: 1500
|
||
});
|
||
}
|
||
});
|
||
function onStateChanged(download, status) {
|
||
|
||
if (status == 200) {
|
||
const totalSize=download.totalSize
|
||
let nowSize=download.downloadedSize
|
||
that.percentVal= nowSize / 17700000 * 100 > 99? 99 : (nowSize / 17700000 * 100).toFixed(0)
|
||
}
|
||
|
||
}
|
||
dtask.addEventListener("statechanged", onStateChanged, false);
|
||
dtask.start();
|
||
}
|
||
else{
|
||
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
}
|
||
// #endif
|
||
}
|
||
})
|
||
},
|
||
getTicket() {
|
||
let that = this;
|
||
that.ticketList = []
|
||
let params = {
|
||
category: 'duty'
|
||
};
|
||
that.$u.api.getTickets(params).then(res => {
|
||
that.ticketList = res.results.splice(0, 2);
|
||
})
|
||
},
|
||
|
||
getcopy() {
|
||
let that = this;
|
||
that.copyList = []
|
||
let params = {
|
||
category: 'cc'
|
||
};
|
||
that.$u.api.getTickets(params).then(res => {
|
||
that.copyCount = res.count;
|
||
that.copyList = res.results.splice(0, 2);
|
||
})
|
||
},
|
||
getEvent() {
|
||
let that = this;
|
||
let params = {
|
||
page: 1,
|
||
page_size: 2,
|
||
ordering: '-create_time'
|
||
};
|
||
that.$u.api.eventList(params).then(res => {
|
||
let eventList = res.results.filter(item => {
|
||
return item.handle_user === null;
|
||
});
|
||
that.eventList = eventList.splice(0, 2);
|
||
|
||
})
|
||
},
|
||
getTicketAgg() {
|
||
this.$u.api.ticketDutyAgg().then(res => {
|
||
if (res.err_msg) {} else {
|
||
this.ticketCount = res.total_count;
|
||
}
|
||
})
|
||
},
|
||
getEventAgg() {
|
||
this.$u.api.eventCateAgg(this.cateAggForm).then(res => {
|
||
if (res.err_msg) {} else {
|
||
this.eventCount = res.total_count;
|
||
}
|
||
})
|
||
},
|
||
goIntoTargetPage(type) {
|
||
if(this.limitedVisit==true){
|
||
}else{
|
||
let params = `?type=${type}`;
|
||
if (type == "duty") {
|
||
uni.navigateTo({
|
||
url: "./list/ticket"+params
|
||
})
|
||
}
|
||
if (type == "cc") {
|
||
uni.navigateTo({
|
||
url: "./list/ticket"+params
|
||
})
|
||
}
|
||
if (type == "warning") {
|
||
uni.navigateTo({
|
||
url: "./list/event"
|
||
})
|
||
}
|
||
}
|
||
},
|
||
ticketHandle(row, type) {
|
||
let projectId = null;
|
||
let cateType = row.workflow_.key;
|
||
if (cateType === 'visit') {
|
||
projectId = row.ticket_data.visit;
|
||
} else if (cateType === 'rpj') {
|
||
projectId = row.ticket_data.rpj;
|
||
} else if(cateType.indexOf('opl_')!=-1){
|
||
projectId = row.ticket_data.opl;
|
||
cateType = 'opl'
|
||
}
|
||
const params = `?ticketId=${row.id}&projectId=${projectId}&cateType=${cateType}&type=${type}`;
|
||
uni.navigateTo({
|
||
url: './detail/ticketHandle' + params,
|
||
})
|
||
},
|
||
eventHandle(val){
|
||
let params = `?eventId=${val.id}`;
|
||
uni.navigateTo({
|
||
url: './detail/eventHandle' + params,
|
||
})
|
||
},
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.index {
|
||
background-color: #edf8ff;
|
||
padding-bottom: 45rpx;
|
||
position: relative;
|
||
}
|
||
|
||
.nav-bar {
|
||
height: 401rpx;
|
||
background-color: #2cade8;
|
||
background-size: cover;
|
||
color: #FFFFFF;
|
||
padding-top: 26rpx;
|
||
padding-left: 18rpx;
|
||
}
|
||
|
||
.nav-bar-text {
|
||
font-size: 38rpx;
|
||
color: #ffffff;
|
||
font-weight: 400;
|
||
|
||
}
|
||
|
||
.navigate-title {
|
||
width: 720rpx;
|
||
height: 160rpx;
|
||
background-color: #ffffff;
|
||
box-shadow: 0px 2px 24px 0px rgba(213, 237, 255, 0.53);
|
||
border-radius: 10px;
|
||
display: flex;
|
||
justify-content: space-around;
|
||
align-items: center;
|
||
text-align: center;
|
||
position: absolute;
|
||
left: 50%;
|
||
top: 196rpx;
|
||
transform: translateX(-50%);
|
||
z-index: 1;
|
||
}
|
||
|
||
.navigate-title .text+.status {
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
letter-spacing: 0rpx;
|
||
}
|
||
|
||
.navigate-title .text {
|
||
font-family: PingFang-SC-Bold;
|
||
font-size: 48rpx;
|
||
font-weight: 600;
|
||
color: #2c6fd9;
|
||
}
|
||
|
||
.navigate-title .status {
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 26rpx;
|
||
color: #383838;
|
||
}
|
||
.daiban01 ,.copy01{
|
||
width: 720rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin: 0 auto;
|
||
margin-top: 88rpx;
|
||
}
|
||
.copy01{
|
||
margin-top: 20upx;
|
||
}
|
||
.title {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
padding: 20rpx 20rpx;
|
||
height: 79rpx;
|
||
align-items: center;
|
||
}
|
||
|
||
.left-content {
|
||
display: flex;
|
||
align-items: center;
|
||
}
|
||
|
||
.img-view {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.img-view .img {
|
||
width: 100%;
|
||
height: 100%;
|
||
}
|
||
|
||
.title-text-left {
|
||
font-size: 34rpx;
|
||
color: #383838;
|
||
padding-left: 10rpx;
|
||
}
|
||
|
||
.title-text-right {
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 24rpx;
|
||
font-weight: normal;
|
||
font-stretch: normal;
|
||
line-height: 72rpx;
|
||
color: #ababab;
|
||
}
|
||
|
||
.line {
|
||
width: 660rpx;
|
||
height: 1rpx;
|
||
background-color: #eeeeee;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.daiban02 {
|
||
width: 720rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin: 0 auto;
|
||
margin-top: 18rpx;
|
||
}
|
||
|
||
/* 通知样式 */
|
||
.tongzhi {
|
||
width: 720rpx;
|
||
background-color: #ffffff;
|
||
border-radius: 10rpx;
|
||
margin: 0 auto;
|
||
margin-top: 20rpx;
|
||
padding-bottom: 20rpx;
|
||
}
|
||
|
||
.tongzhi .content {
|
||
display: flex;
|
||
padding: 0 20rpx;
|
||
margin-top: 41rpx;
|
||
}
|
||
|
||
|
||
.tongzhi-img image {
|
||
width: 55rpx;
|
||
height: 55rpx;
|
||
border-radius: 50%;
|
||
}
|
||
|
||
.tongzhi .tongzhi-info {
|
||
margin-left: 15rpx;
|
||
flex: 1;
|
||
}
|
||
|
||
.tongzhi-info .tongzhi-title {
|
||
font-size: 30rpx;
|
||
color: #3d3d3d;
|
||
}
|
||
|
||
.tongzhi-info .tongzhi-content {
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 28rpx;
|
||
line-height: 50rpx;
|
||
color: #5b5b5b;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
display: flex;
|
||
display: -webkit-box;
|
||
line-clamp: 2;
|
||
-webkit-line-clamp: 2;
|
||
-webkit-box-orient: vertical;
|
||
word-break: break-all;
|
||
}
|
||
|
||
.tongzhi .bottom-content {
|
||
font-family: PingFang-SC-Regular;
|
||
font-size: 24rpx;
|
||
line-height: 72rpx;
|
||
letter-spacing: 0rpx;
|
||
color: #ababab;
|
||
text-align: right;
|
||
padding: 0 20rpx;
|
||
}
|
||
|
||
.bottom-content .liulan {
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.listWrap {
|
||
padding: 20upx 50upx;
|
||
}
|
||
|
||
.itemTitle {
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 30upx;
|
||
line-height: 72upx;
|
||
color: #3d3d3d;
|
||
flex: 1;
|
||
}
|
||
|
||
.itemCenter {
|
||
padding-bottom: 10rpx;
|
||
|
||
}
|
||
|
||
.info-details {
|
||
font-size: 26upx;
|
||
line-height: 40rpx;
|
||
color: #5b5b5b;
|
||
}
|
||
|
||
/* btns */
|
||
.bottom-btns {
|
||
text-align: center;
|
||
font-family: PingFang-SC-Medium;
|
||
font-size: 28rpx;
|
||
line-height: 60rpx;
|
||
display: flex;
|
||
border-bottom: 1rpx solid #eeeeee;
|
||
}
|
||
|
||
.bottom-btn {
|
||
flex: 1;
|
||
/* border-right: 1upx solid #eeeeee; */
|
||
}
|
||
|
||
/* .bottom-btns>.bottom-btn:last-child{
|
||
border-right: none;
|
||
} */
|
||
.shenhezhong {
|
||
color: #2c6fd9;
|
||
}
|
||
|
||
.shenhejieshu {
|
||
color: #15a306;
|
||
}
|
||
|
||
.bottom-btn image {
|
||
width: 26rpx;
|
||
height: 26rpx;
|
||
margin-right: 10rpx;
|
||
vertical-align: middle;
|
||
}
|
||
</style>
|