lm-safe-app/pages/apply/subPages/FM/NotificationTaskList.vue

400 lines
10 KiB
Vue
Raw Permalink Normal View History

2024-06-03 09:37:52 +08:00
<template>
<view class="risk-record-page">
<u-sticky>
<view class="filter-bar">
<view class="filter filter-date-range" @click="handleShowPicker({title: '时间区间', name: 'dateRange'})">
<text>{{dateFilterTxt}}</text>
<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
</view>
<uni-search-bar class="search-bar" radius="100" :value="keyword" @confirm="handleSearch"
@cancel="handleCancelSearch" @clear="handleCancelSearch" placeholder="搜索待办人员"></uni-search-bar>
</view>
</u-sticky>
<view class="main">
<view class="content-list">
<common-card
:dataSource="item"
v-for="item in lists"
class="content"
@click="handleToEdit"
>
<view>
<!-- <view class="field">
<text class="label">消息标题</text>
<text class="value">{{item.NOTICE_TITLE}}</text>
</view> -->
<view class="field">
<text class="label">待办人</text>
<text class="status">{{item.USER_NAME}}</text>
</view>
<view class="field">
<text class="label">开始时间</text>
<text class="value">{{$u.timeFormat(item.TASK_STARTDT,'yyyy-mm-dd')}}</text>
</view>
<view class="field">
<text class="label">结束时间</text>
<text class="value">{{$u.timeFormat(item.TASK_ENDDT,'yyyy-mm-dd')}}</text>
</view>
<view class="field">
<text class="label">消息状态</text>
<text class="value">{{item.NOTICE_STATUS}}</text>
</view>
</view>
</common-card>
</view>
<view v-if="!lists.length" class="empty-wrap">
<u-empty text="暂无数据" icon="/static/empty@2x.png">
</u-empty>
</view>
<view >
<u-modal :show="show" @cancel="cancel" :title="title" @confirm="confirm" :showCancelButton="true">
<!-- 这里是modal的内容 -->
<view>
<u--form>
<u-form-item label="转给" prop="UserName" @click="handleChangeMonitor()">
<u--input disabledColor="#fff" v-model="UserName" disabled placeholder="请选择人员" suffixIcon="arrow-right" suffixIconStyle="font-size:12px" fontSize="14px"
customStyle="margin:0px;display:flex;padding:3px 9px" border="none" >
</u--input>
</u-form-item>
</u--form>
</view>
<!-- 这里是modal的底部按钮 -->
<view slot="footer" class="footer">
<u-button @click="show = false">关闭</u-button>
</view>
</u-modal>
</view>
</view>
<u-picker
:show="comPickerInfo.showPicker"
:columns="comPickerInfo.columns"
@confirm="onConfirmPicker"
:defaultIndex="[0]"
@cancel="closePicker"
></u-picker>
<query-selector :show="showPopupMonitor" :total="curTotalMonitor" :lists="monitorLists" :defaultValue="currentOperateMonitor.NAME" @close="handleClosePopupMonitor" @search="handleSearchMonitor"
@select="handleSelectedMonitor" />
</view>
</template>
<script>
import {
getNotificationTaskList,
getUserLists,
getChangeUser
} from '../../../../services/apply/FMServices/FMServices.js'
import {
extendInclude, extendRule,extendFilterGroup,extendOrder,guid,
initFilter,initFilterGroup,extendGroupRule,extendIgnoreDataRule
} from '../../../../utils/common'
import UniSearchBar from '../../../../uni_modules/uni-search-bar/components/uni-search-bar/uni-search-bar.vue'
export default {
components: { UniSearchBar },
data() {
return {
title:'选择转办人',
UserName:'',
ID:null,
UserID:null,
show :false,
pageIndex: 1,
curTotalMonitor: 0,
monitorLists: [],
currentOperateMonitor: {},
showPopupMonitor: false,
total: 0,
lists: [],
keyword: '',
searchStartTime: '',
dateFilterTxt: '时间区间',
comPickerInfo: {
showPicker: false,
columns: [],
title: '',
name: ''
}
}
},
onLoad() {
this.loadData()
},
methods: {
handleSearch(obj) {
this.keyword = obj.value
},
handleToEdit(obj) {
this.show = true
this.ID = obj.ID
},
cancel() {
this.show = false
this.ID=null
this.UserID=null
this.UserName=''
},
confirm(){
const orgId = uni.getStorageSync('orgId')
const json = initFilter(orgId, this.ID, '', 0, 1,this.UserID)
if(this.ID==null || this.UserID==null)
{
this.show =false;
uni.$showErrorInfo('未选择转办人!')
return
}
getChangeUser(json).then(res => {
this.show = false
this.ID=null
this.UserID=null
this.UserName=''
uni.$showMsgFunc('转办成功!', () => {
uni.navigateBack()
}, 'success', 1000)
}).catch((error) => {
this.show = false
this.ID=null
this.UserID=null
this.UserName=''
uni.$showErrorInfo(error);
})
},
handleChangeMonitor() {
this.currentOperateMonitor = []
this.showPopupMonitor = true
this.handleSearchMonitor('init')
},
handleSelectedMonitor(val) {
this.showPopupMonitor = false
this.currentOperateMonitor = val
this.UserName = val.NAME
this.UserID = val.ID
// this.dataModel.Nav_MonitorUser = val
// this.dataModel.MONITOR_USER_ID = val.ID
},
handleSearchMonitor(val, pageIndex) {
const orgId = uni.getStorageSync('orgId')
const json = initFilter(orgId, "", "NAME", '', pageIndex)
extendRule(json, 'ENABLE_STATUS', 1, '0')
if (val !== 'init') {
const tempGroup = initFilterGroup(false);
extendGroupRule(tempGroup, 'NAME', 9, val)
extendFilterGroup(json, tempGroup);
}
json.Limit = 20
if (pageIndex) {
json.Start = (pageIndex - 1) * 20;
}
getUserLists(json).then(res => {
if (res.IsSuccessful) {
this.monitorLists = res.Data.map(i => {
return {
...i,
name: i.NAME,
code: i.CODE
}
})
this.curTotalMonitor = res.TotalCount
}
})
},
handleClosePopupMonitor() {
this.showPopupMonitor = false
// this.showPopupCertificate = false
},
handleCancelSearch() {
this.keyword = ''
},
loadData() {
const orgId = uni.getStorageSync('orgId')
const json = initFilter(orgId, "", "CREATE_TIME", 1, this.pageIndex)
if (this.keyword) {
extendRule(json, 'USER_NAME', 9, this.keyword)
}
if (this.searchStartTime) {
extendRule(json, 'CREATE_TIME', 6, this.searchStartTime)
}
getNotificationTaskList(json).then(res => {
this.total = res.TotalCount
for (let i = 0; i < res.Data.length; i++) {
if (res.Data[i].NOTICE_STATUS == 0) {
res.Data[i].NOTICE_STATUS = "未处理";
}else if(res.Data[i].NOTICE_STATUS == 1) {
res.Data[i].NOTICE_STATUS = "已完成";
}else if(res.Data[i].NOTICE_STATUS == 2) {
res.Data[i].NOTICE_STATUS = "超时完成";
}
}
const newRes = (res.Data || []).map(i => {
return {
...i,
title: i.NOTICE_TITLE,
}
})
if (this.pageIndex !== 1) {
this.lists = this.lists.concat(newRes)
} else {
this.lists = newRes
}
})
},
handleShowPicker(p) {
let column = []
if (p.name === 'dateRange') {
column = ['全部', '当天', '最近三天', '最近一周', '最近一月']
}
this.comPickerInfo = {
showPicker: true,
title: p.title,
name: p.name,
columns: [column]
}
},
onConfirmPicker(e) {
if (this.comPickerInfo.name === 'dateRange') {
let currentDate = new Date();
if (e.indexs[0] === 2) {
currentDate.setDate(currentDate.getDate() - 3);
} else if (e.indexs[0] === 3) {
currentDate.setDate(currentDate.getDate() - 7);
} else if (e.indexs[0] === 4) {
currentDate.setDate(currentDate.getMonth());
}
if (e.indexs[0] === 0) {
this.searchStartTime = ''
this.dateFilterTxt = '时间区间'
} else {
this.dateFilterTxt = e.value[0]
this.searchStartTime = uni.$u.timeFormat(currentDate, 'yyyy-mm-dd 00:00:00');
}
}
this.closePicker()
},
closePicker() {
this.comPickerInfo = {
showPicker: false,
columns: [],
title: '',
name: ''
}
},
},
onReachBottom() {
// 页码 +1
if (this.total > 10 * this.pageIndex)
this.pageIndex++
// 重新获取列表数据
},
watch: {
pageIndex(n, o) {
this.loadData()
},
keyword(n, o) {
this.pageIndex = 1
this.keyword = n
this.loadData()
},
searchStartTime(n, o) {
this.pageIndex = 1
this.searchStartTime = n
this.loadData()
},
}
}
</script>
<style>
.risk-record-page {
position: relative;
}
.risk-record-page .main {
padding: 0px 16px;
position: relative;
}
.risk-record-page>>>.uni-searchbar {
padding: 0px;
display: flex;
align-items: center;
font-size: 12px;
.uni-searchbar__box {
height: 30px;
}
.uni-searchbar__box-icon-clear {
display: flex;
align-items: center;
}
.uni-input-placeholder {}
.uni-searchbar__box-search-input {
font-size: 12px;
}
.uni-searchbar__text-placeholder {
font-size: 12px;
margin-left: 0px;
}
.uni-text {
font-size: 12px;
}
}
.filter-bar .search-bar {
margin-left: 20px;
margin-right: 20px;
width: 100%;
display: flex;
flex: 1;
align-items: center;
font-size: 12px;
}
.filter-bar {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #ffffff;
padding: 10px 16px 10px 16px;
box-shadow: 0px 0px 5px 0px #eaedf4;
}
.filter-bar .filter {
display: flex;
align-items: center;
font-size: 12px;
line-height: 18px;
color: #333;
}
.content-list {
padding: 10px 0;
}
.content .field {
font-size: 12px;
line-height: 18px;
margin-bottom: 4px;
}
.content .field .label {
color: #666;
}
.content .field .value {
color: #333333;
}
.status {
background-color: rgba(5, 109, 232, 0.1);
color: #056DE8;
padding: 0px 5px 0px 5px;
border-radius: 5px;
}
</style>