supervision-uniapp/pages/negative/index.vue

<template>
	<view class="flex search">
		<view class="search-item flex justify-center" :search="searchFlag">
			<view class="search-item-conent">
				<uni-easyinput prefixIcon="search" type="text" v-model="query.thingDesc" placeholder="搜索" :inputBorder="false" @focus="searchFlag = true" />
				
			</view>
		</view>
		<view class="search-item flex justify-center" v-if="!searchFlag" @tap="showPopup">
			<view :class="filterFlag ? 'search-item-conent active': 'search-item-conent'">
				<uni-icons customPrefix="customicons" type="filter" size="20" color="#666" />
				<view>筛选</view>
			</view>
		</view>
		<view v-else>
			<view class="cancel-btn" @tap="searchFlag = false">取消</view>
		</view>
	</view>
	<view class="negative-container">
		<view class="card negative-item" v-for="item in negatives" @tap="open(item)">
			<view class="negative-title">
				<view>{{ item.problemSources }}</view>
				<view></view>
			</view>
			<view class="row">
				<view class="col col-12">
					<view class="label">录入时间：</view>
					<view class="content">{{ item.crtTime }}</view>
				</view>
				<view class="col col-12">
					<view class="label">发现时间：</view>
					<view class="content">{{ item.discoveryTime }}</view>
				</view>
				<view class="col col-12">
					<view class="label">业务类别：</view>
					<view class="content">{{ item.businessTypeName }}</view>
				</view>
				<view class="col col-12">
					<view class="label">涉及单位：</view>
					<view class="content">{{ item.involveDepartName }}</view>
				</view>
				<view class="col col-24">
					<view class="label">问题内容：</view>
					<view class="content">{{ item.thingDesc }}</view>
				</view>
				<view class="col col-24" v-if="item.checkStatusName">
					<view class="label">是否属实：</view>
					<view class="content">{{ item.checkStatusName }}</view>
				</view>
				<view class="col col-24" v-if="item.currentProcessingObject">
					<view class="label">当前处理：</view>
					<view class="content">{{ item.currentProcessingObject }}</view>
				</view>
			</view>
			<view class="negative-bottom">
				<view v-if="item.processingStatus === 'signing'" style="color: var(--danger-color)">签收中</view>
				<view v-if="item.processingStatus === 'processing'" style="color: #ff5722">办理中</view>
				<view v-if="item.processingStatus === 'approval'" style="color: var(--primary-color)">审批中</view>
				<view v-if="item.processingStatus === 'completed'" style="color: var(--success-color)">已办结</view>
			</view>
		</view>
		<empty v-if="negatives.length === 0" />
	</view>
	
	<uni-popup ref="filterPopupRef" type="top">
		<view class="popup-container">
			<view class="popup-header">
				<view>全部筛选</view>
				<uni-icons type="closeempty" class="close-btn" @tap="closePopup"></uni-icons>
			</view>
			<view class="popup-body">
				<view class="filter-container">
					<!-- <view class="filter-label">问题来源</view>
					<problem-picker v-model="query.problemTypeCode" @change="search" /> -->
					<view class="filter-label mt-10">业务类型</view>
					<filter-radio :data="businessTypes" v-model="query.businessTypeCode" :prop="{text: 'dictLabel', value: 'dictValue'}" @change="search" />
					<view class="filter-label mt-10">办理状态</view>
					<filter-radio :data="processingStatus" v-model="query.processingStatus" :prop="{text: 'dictLabel', value: 'dictValue'}" @change="search" />
					
					<view class="filter-label mt-10">涉及单位</view>
					<view class="mb-10">
						<uni-data-picker :localdata="departs" placeholder="请选择涉及单位" :border="false"
							:map="{text:'shortName', value: 'id'}" v-model="query.involveDepartId" @change="search" />
					</view>
					<view class="filter-label mt-10">办理单位</view>
					<view class="mb-10">
						<uni-data-picker :localdata="departs" placeholder="请选择办理单位" :border="false"
							:map="{text:'shortName', value: 'id'}" v-model="query.handleDepartId" @change="search" />
					</view>
					
				</view>
			</view>
			<view class="footer col-24 flex gap-8">
				<button class="col-12" @tap="reset">重置</button>
				<button type="primary" @tap="handleSearch" class="col-12">完成</button>
			</view>
		</view>
	</uni-popup>
</template>
<script>
	import store from '@/store'
	import { getDictOptions } from '@/common/dict'
	import { listNegative } from '@/api/negative'
	import {
		departTree
	} from '@/api/depart'
	import { getDictLabel } from '@/common/util'
	
	
	let oldList;
	let _this;
	
	export default {
		data() {
			return {
				negatives: [],
				query: {
					size: 100,
					current: 1
				},
				departs: [],
				searchFlag: false,
				filterFlag: false,
			}
		},
		setup(props, context) {
			const processingStatus = getDictOptions('processingStatus');
			const businessTypes = getDictOptions('businessType')
			return {
				processingStatus,
				businessTypes,
				getDictLabel
			}
		},
		watch: {
			searchFlag(val) {
				if (val) {
					oldList = this.negatives;
					this.negatives = []
				} else {
					this.negatives = oldList
				}
			},
			'query.thingDesc': function(val) {
				if (_this.searchFlag) {
					if (val) {
						_this.getNegatives()
					} else {
						this.negatives = []
					}
					
				}
			}
		},
		onLoad() {
			_this = this;
			this.getNegatives();
			departTree().then(data => {
				this.departs = data[0].children
			})
		},
		methods: {
			open(item) {
				uni.navigateTo({
				    url: '/pages/negative/info?id=' + item.id
				});
			},
			getNegatives() {
				uni.showLoading({
					title: '数据加载中'
				});
				listNegative(this.query).then(data => {
					this.negatives = data.records
					uni.hideLoading();
				});
			},
			showPopup() {
				this.$refs.filterPopupRef.open()
			},
			closePopup() {
				this.$refs.filterPopupRef.close()
			},
			search() {
				if (this.query.problemTypeCode || this.query.businessTypeCode || this.query.involveDepartId || this.query.handleDepartId) {
					this.filterFlag = true
				} else {
					this.filterFlag = false
				}
				this.getNegatives()
			},
			handleSearch() {
				this.search()
				this.closePopup()
			},
			reset() {
				this.filterFlag = false
				this.query = {
					size: 100,
					current: 1
				}
				this.getNegatives()
			}
		}
	}
</script>

<style lang="scss" scoped>
	.negative-container {
		max-height: calc(100vh - 98rpx);
		overflow: auto;
	}
	.negative-title {
		display: flex;
		justify-content: space-between;
		margin-bottom: 12rpx;
		font-weight: 500;
		font-size: 16px;
	}
	.negative-bottom {
		display: flex;
		justify-content: space-between;
		.negative-tag {
			color: #FF0000;
		}
	}
</style>