477 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
			
		
		
	
	
			477 lines
		
	
	
		
			12 KiB
		
	
	
	
		
			Vue
		
	
	
	
	
	
<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> |