inspectionRecord.vue

<template>
	<!-- 巡检记录列表页面 -->
	<view class="inspection-record">
		<!-- 搜索页面 -->
		<view class="inspection-search">
			<PageOptions :options="indicatorsList" :has-today="true" :options-props="indicatorsOptions" @change="handleStoreChange"></PageOptions>
			<!-- <DatePicker @change="handleDateChange"></DatePicker> -->
		</view>

		<!-- 列表内容 -->
		<view class="inspection-record-container">
			<!-- 此为循环项 -->
			<template v-if="recordDataList.length > 0">
				<view
					v-for="item in recordDataList"
					:key="item.id"
					class="record-item"
					@click="handleDetail(item)"
				>
					<view class="record-item-header">
						<view class="header-left-part">
							<view class="header-icon">
								<uv-icon name="order" size="18px"></uv-icon>
							</view>
							<view class="record-number">
								{{item.sn}}
							</view>
						</view>
						<view class="header-right-part">
							<uv-tags
								:text="getStatusInfo(item.status)[0]"
								:color="getStatusInfo(item.status)[2]"
								:bgColor="getStatusInfo(item.status)[1]"
								:borderColor="getStatusInfo(item.status)[1]"
								plain
								shape="circle"
							></uv-tags>
						</view>
					</view>

					<view class="record-item-body">
						<view class="record-detail">
							<view
								v-for="rItem in detailList"
								:key="rItem.key"
								class="record-detail-row"
							>
								<view class="detail-title">
									{{rItem.label}}
								</view>
								<view class="detail-content">
									{{getDetailValue(rItem.key, item)}}
								</view>
							</view>
						</view>
					</view>
				</view>
			</template>
			<uv-empty v-else mode="list" marginTop="100"></uv-empty>
		</view>
	</view>
</template>

<script setup>
	import { ref, } from 'vue';
	import { onLoad, onShow } from '@dcloudio/uni-app';
	import { getStageObj } from '@/utils'
	import { doGetInspectionListApi } from '@/api';
	// import DatePicker from '@/components/DatePicker.nvue'
	import PageOptions from '@/components/PageOptions.vue'
	// import MockDataList from './mockData.json'
	import { getDetailOptions, getStatusOptions, getDetailValueByKey } from './config.js'
  import { t } from '@/plugins/index.js'
	const waitMe = ref(false) // 是否是待我处理
	const indicatorsList = ref(getStatusOptions())
	const indicatorsOptions = {
		label: 'indexName',
		value: 'indexKey'
	}
  const stashData = ref({
    val:'',
    type:''
  })
  const onPageLoad = ref(true)
  onShow(()=>{
    if(onPageLoad.value){
      onPageLoad.value = false
      return
    }
    handleStoreChange(stashData.value.val, stashData.value.type)
  })
  
  
	const handleStoreChange = (val, type) => {
    stashData.value = {
      val,
      type
    }
    
		console.log('handleStoreChange', val, type)

		getInspectionList({
			startDate: val.range[0],
			endDate: val.range[1],
			mallId: val.storeId,
			// mallId: undefined,
			// mallId: 9218,
			status: val.indicatorKey || '',
			waitMe: waitMe.value,
		})
	}

	const detailList = ref(getDetailOptions())

	const recordDataList = ref([])
	function getInspectionList(data) {
		const storeInfo = getStageObj('store') || {}
		const params = Object.assign({
			// mallId: storeInfo.id,

			accountId: storeInfo.accountId,
			// accountId: 337, // 临时定为	337

			// TODO: 需要按需加载，暂时设置为999
			pageNum: 1,
			pageSize: 999,

			// startDate: '',
			// endDate: '',
			patrolType: waitMe.value ? '' : 1,
		}, data)
		doGetInspectionListApi(params).then(res => {
			console.log('doGetInspectionListApi', res)
			// console.log('MockDataList', MockDataList)
			// recordDataList.value = MockDataList
			recordDataList.value = res.data.list || []
		})
	}

	function getDetailValue(key, data) {
		return getDetailValueByKey(key, data)
	}
	function getStatusInfo(status) {
		switch (status){
			case 1:
				return [t('dictionary.pending'), '#FDEEEE', '#F32C2C']
			case 2:
				return [t('dictionary.reexamine'), '#FFF7E8', '#FF7E01']
			case 3:
				return [t('dictionary.completed'), '#DDE9FF', '#387CF5']
			default:
				return [t('maintenance.common.unknown'), '', '']
		}
	}
	function handleDetail(item) {
		console.log('handleDetail', item)
		const origin = waitMe.value ? 'processing' : 'record'
		uni.navigateTo({
			url: `/subPackages/accountGroup/pages/inspection/inspectionDetail?id=${item.id}&origin=${origin}`,
		})
	}
	onLoad((options) => {
		console.log('options', options)
		// getInspectionList()
		waitMe.value = (options.origin === 'processing')
		uni.setNavigationBarTitle({
		  title: t('Management.storeInspectionRecord')
		})
		// 设置页面标题
		if (waitMe.value) {
			uni.setNavigationBarTitle({
				title: t('app.home.waitMeDeal'),
			});
		}
	})
</script>

<style lang="scss" scoped>
	.inspection-record {
		min-height: 100vh;
		background-color: #F2F3F6;
	}
	.inspection-search {
	}
	.inspection-record-container {
		// margin-top: 10px;
		padding: 0px 10px 10px 10px;
		.record-item {
			background-color: #FFF;
			border-radius: 8px;
			margin-bottom: 10px;
			font-size: 14px;
		}
		.record-item-header {
			height: 42px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #EEF0F3;
			padding: 0px 10px;
			.header-left-part {
				display: flex;
				flex-direction: row;
				/* justify-content: center; */
				align-items: center;
				.header-icon {
					margin-right: 6px;
				}
			}
		}
		.record-item-body {
			.record-detail {
				padding: 10px;
			}
			.record-detail-row {
				display: flex;
				margin-bottom: 6px;
				.detail-title {
					margin-right: 10px;
					color: #202328;
					/* font-size: 13px; */
				}
				.detail-content {
					color: #6D778F;
				}
			}
		}
	}
</style>