jy-safe-app/pages/apply/subPages/FO2/jobEventRecord.vue

477 lines
12 KiB
Vue
Raw Permalink Normal View History

2025-10-14 15:17:30 +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" v-model="keyword" @confirm="handleSearch"
@cancel="handleCancelSearch" @clear="handleCancelSearch" placeholder="搜索" cancel-button="none">
<uni-icons slot="searchIcon" color="#999999" size="16" type="search" class="search-slot" />
</uni-search-bar>
<view class="filter filter-status" @click="handleShowPicker({title: '状态', name: 'status'})">
<text>{{statusFilterTxt}}</text>
<u-icon size="14" style="margin-left: 4px;" name="arrow-down"></u-icon>
</view>
</view>
</u-sticky>
<view class="main">
<view class="content-list">
<!-- <common-card :dataSource="item" v-for="item in lists" @click="handleToEdit(item)">
<view class="content">
<view class="field">
<text class="label">编号</text>
<text class="value">{{item.CODE}}</text>
</view>
<view class="field">
<text class="label">作业名称</text>
<text class="value">{{item.Nav_OperationStep ? item.Nav_OperationStep.NAME : ''}}</text>
</view>
<view class="field">
<text class="label">创建时间</text>
<text class="value">{{$u.timeFormat(item.CREATE_TIME,'yyyy-mm-dd')}}</text>
</view>
<view class="field">
<text class="label">创建人</text>
<text class="value">{{item.Nav_CreateUser ? item.Nav_CreateUser.NAME : ''}}</text>
</view>
<view class="field">
<text class="label">状态</text>
<text class="value">{{item.FORM_STATUS}}</text>
</view>
</view>
</common-card> -->
<view v-for="item in lists" @click="handleToEdit(item)" class="card-content">
<view>
<text class="content-text">
{{item.title}}
</text>
</view>
<view class="card-body-right">
<view>
<view class="field">
<text class="label">创建时间</text>
<text class="value">{{$u.timeFormat(item.CREATE_TIME,'yyyy-mm-dd')}}</text>
</view>
<view class="field">
<text class="label">创建人</text>
<text class="value">{{item.Nav_CreateUser ? item.Nav_CreateUser.NAME : ''}}</text>
</view>
<view class="field">
<text class="label">状态</text>
<text class="value status">{{item.FORM_STATUS}}</text>
</view>
</view>
<view class="forwad">
<uni-icons type="forward" size="12"></uni-icons>
</view>
<!-- <view v-if="!lists.length" class="empty-wrap">
<u-empty text="暂无数据" icon="/static/empty@2x.png">
</u-empty>
</view> -->
</view>
</view>
</view>
</view>
<u-picker :show="comPickerInfo.showPicker" :columns="comPickerInfo.columns" @confirm="onConfirmPicker"
:defaultIndex="[0]" @cancel="closePicker"></u-picker>
</view>
</template>
<script>
import {
getRequestOrderPage
// getJobEventData
} from '../../../../services/apply/FOServices/FOServices.js'
import {
extendInclude,
extendRule,
initFilter,
} 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 {
pageIndex: 1,
total: 0,
lists: [],
keyword: '',
searchStartTime: '',
filterStatus: null,
params: {},
dateFilterTxt: '时间区间',
statusFilterTxt: '状态筛选',
Nav_OperationStep: {
NAME: ''
},
comPickerInfo: {
showPicker: false,
columns: [],
title: '',
name: ''
}
}
},
onLoad() {
this.handleGetJobEventData()
},
methods: {
handleSearch(obj) {
this.keyword = obj.value
},
handleToEdit(obj) {
uni.navigateTo({
url: '/pages/apply/subPages/FO2/jobEventShow?ID=' + obj.ID
})
},
handleCancelSearch() {
this.keyword = ''
},
handleGetJobEventData() {
const orgId = uni.getStorageSync('orgId')
const json = initFilter(orgId, "", "CREATE_TIME", 1, this.pageIndex)
extendInclude(json, 'Nav_CreateUser');
extendInclude(json, 'Nav_OperationStep');
extendInclude(json, 'Nav_JobEventPerson');
extendInclude(json, 'Nav_JobEventPerson.Nav_User.Nav_Department');
extendInclude(json, 'Nav_Details');
extendInclude(json, 'Nav_Details.Nav_Files.Nav_ImgFile');
extendInclude(json, 'Nav_Details.Nav_Files.Nav_ImgFile');
extendInclude(json, 'Nav_Flow');
extendInclude(json, 'Nav_Flow.Nav_Files.Nav_ImgFile');
extendInclude(json, 'Nav_Flow.Nav_Files.Nav_ImgFile');
extendInclude(json, 'Nav_Measure');
extendInclude(json, 'Nav_Measure.Nav_Files.Nav_ImgFile');
extendInclude(json, 'Nav_Measure.Nav_Files.Nav_ImgFile');
// extendIgnoreDataRule(json)
if (this.keyword) {
extendRule(json, 'Nav_OperationStep.NAME', 9, this.keyword)
}
if (this.searchStartTime) {
extendRule(json, 'CREATE_TIME', 6, this.searchStartTime)
}
if (this.filterStatus !== null) {
extendRule(json, 'FORM_STATUS', 1, this.filterStatus)
}
getRequestOrderPage(json,"/FO/JobEventRecord/OrderPaged").then(res => {
this.total = res.TotalCount
for (let i = 0; i < res.Data.length; i++) {
if (res.Data[i].FORM_STATUS == 0) {
res.Data[i].FORM_STATUS = "草稿";
} else if (res.Data[i].FORM_STATUS == 1) {
res.Data[i].FORM_STATUS = "签到中";
} else if (res.Data[i].FORM_STATUS == 3) {
res.Data[i].FORM_STATUS = "审核中";
} else if (res.Data[i].FORM_STATUS == 4) {
res.Data[i].FORM_STATUS = "已驳回";
} else if (res.Data[i].FORM_STATUS == 2) {
res.Data[i].FORM_STATUS = "已归档";
}
}
let newRes = (res.Data || []).map(i => {
return {
...i,
title: i.Nav_OperationStep?.NAME ,
}
})
if (this.pageIndex !== 1) {
this.lists = this.lists.concat(newRes)
} else {
this.lists = newRes
}
})
},
handleShowPicker(p) {
let column = []
if (p.name === 'dateRange') {
column = ['全部', '当天', '最近三天', '最近一周', '最近一月']
}
if (p.name === 'status') {
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');
}
}
if (this.comPickerInfo.name === 'status') {
if (e.indexs[0] === 1) {
// 草稿 0
this.filterStatus = 0
} else if (e.indexs[0] === 2) {
// 签到中 1
this.filterStatus = 1
} else if (e.indexs[0] === 3) {
// 审核中 2
this.filterStatus = 3
} else if (e.indexs[0] === 4) {
// 驳回 2
this.filterStatus = 4
} else if (e.indexs[0] === 5) {
// 归档 2
this.filterStatus = 2
}
if (e.indexs[0] === 0) {
// 全部
this.filterStatus = null
this.statusFilterTxt = '状态筛选'
} else {
this.statusFilterTxt = e.value[0]
}
}
this.closePicker()
},
closePicker() {
this.comPickerInfo = {
showPicker: false,
columns: [],
title: '',
name: ''
}
},
},
// onReachBottom() {
// // 页码 +1
// this.pageIndex++
// const orgId = uni.getStorageSync('orgId')
// const json = initFilter(orgId, "", "CREATE_TIME", 1, this.pageIndex)
// this.params.PageIndex = json.PageIndex
// this.params.Start = json.Start
// // 重新获取列表数据
// this.handleGetJobEventData(this.params, true)
// }
onReachBottom() {
// 页码 +1
if (this.total > 10 * this.pageIndex)
this.pageIndex++
},
watch: {
pageIndex(n, o) {
this.handleGetJobEventData()
},
keyword(n, o) {
this.pageIndex = 1
this.keyword = n
this.handleGetJobEventData()
},
searchStartTime(n, o) {
this.pageIndex = 1
this.searchStartTime = n
this.handleGetJobEventData()
},
filterStatus(n, o) {
this.pageIndex = 1
this.filterStatus = n
this.handleGetJobEventData()
}
}
}
</script>
<style>
.risk-record-page {
position: relative;
/* background-color: #666; */
}
.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;
}
.search-slot {}
.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-list .card-content {
display: flex;
flex-direction: row;
/* justify-content: space-between; */
align-items: center;
border-radius: 8px;
margin-bottom: 12px;
font-size: 14px;
overflow: hidden;
/*display: flex;*/
/*flex-direction: row;*/
padding: 14px;
/*box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);*/
/*box-sizing: border-box;*/
/* #ifndef APP-NVUE */
box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.1);
/* #endif */
/*#ifdef APP-NVUE */
border: 1px solid rgba(0, 0, 0, 0.1);
/* #endif */
}
.card-body-right {
flex: 1;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
.forwad {
display: flex;
flex: 1;
justify-content: flex-end;
}
}
.content-text {
font-size: 14px;
color: #333333;
margin-right: 10px;
/* display: block; */
align-items: center;
font-weight: bold;
width: 120px;
/* white-space: nowrap; */
overflow: hidden;
text-overflow: ellipsis;
display: -webkit-box;
/*弹性伸缩盒子*/
-webkit-box-orient: vertical;
/*垂直排列*/
line-clamp: 3;
-webkit-line-clamp: 3;
/*只显示6行*/
/*溢出隐藏*/
}
.card-body-right .field {
font-size: 12px;
line-height: 18px;
/* margin-bottom: 4px; */
margin: 4px;
display: flex;
align-items: center;
}
.card-body-right .field .label {
color: #333333;
display: flex;
align-items: center;
width: 60px;
}
.card-body-right .field .value {
color: #333333;
display: flex;
align-items: center;
}
.card-body-right .field .status {
background-color: rgba(5, 109, 232, 0.1);
color: #056DE8;
padding: 0px 5px 0px 5px;
border-radius: 5px;
}
.content {
/* background-color: aliceblue; */
}
.content .field {
font-size: 12px;
line-height: 18px;
margin-bottom: 4px;
}
.content .field .label {
color: #666;
}
.content .field .value {
color: #333333;
}
</style>