index.vue

<template>
	<a-form :model="queryForm" layout="inline">
		<a-form-item label="集团：" style="padding: 5px 0;margin-bottom: 24px;">
			<a-select v-model:value="queryForm.account_id" style="width: 280px" @change="onAccountChange"
				:options="accountList" optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="广场：" style="padding: 5px 0;margin-bottom: 24px;">
			<a-select v-model:value="queryForm.plaza_id" style="width: 280px" :options="plazaList"
				optionFilterProp="label" show-search>
			</a-select>
		</a-form-item>
		<a-form-item label="日期:" style="padding: 5px 0;margin-bottom: 24px;">
			<a-date-picker v-model:value="queryForm.countDate" style="width: 280px" />
		</a-form-item>
		<a-form-item style="padding: 5px 0;margin-bottom: 24px;">
			<a-button type="primary" @click="search">查询</a-button>
		</a-form-item>
	</a-form>
	<a-table :dataSource="dataList" :scroll="scroll" :scrollbar="scrollbar" v-loading="isLoading" :columns="[
					{
						title:'序号',
						align:'center',
						slots: { customRender: 'index' },
					},
          {
                title: 'person_unid',
                dataIndex: 'srcPersonUnid',
                align:'center',
          },
           {
                title: '抓拍时间',
                dataIndex: 'srcCountTime',
                align:'center',
          },
					{
						title: '操作',
						dataIndex: 'operation',
						align: 'center',
						slots: {
								customRender: 'operation',
						},
					}
        ]" :pagination="false">
		<template #index="{index}">
			<span>{{index*1+1}}</span>
		</template>
		<template #operation="{ record }">
			<div>
				<a-button @click="showDetail(record)" type="primary">查看详情</a-button>
			</div>
		</template>
	</a-table>
	<a-pagination v-model:current="pageNum" v-model:pageSize="pageSize" :total="total"
		:show-total="total => `共 ${total} 条`" :pageSizeOptions="['10', '20']" @change="onPageNumChange"
		@showSizeChange="onPageSizeChange" show-size-changer show-quick-jumper style="text-align:center;margin-top: 10px;" />
	<ClusterResult ref="ClusterResultRef" />
</template>
<script>
	import moment from 'moment'
	import {
		isArray
	} from '@/PublicUtil/Judgment'
	import {
		defineComponent,
		ref,
		toRaw,
		reactive
	} from 'vue'
	import {
		filterEmptyValueInObject,
		formatDate
	} from '@/PublicUtil/PublicUtil'
	import clusterResultApi from '@/views/SnapshotCluster/ClusterResult/ClusterResultApi'
	import CustomerMatchListApi from '@/views/CustomerMatchList/CustomerMatchListApi'
	import ClusterResult from '@/views/CustomerMatchList/ClusterResult/ClusterResult.vue'

	export default defineComponent({
		components: {
			ClusterResult,
		},
		setup() {
			const scrollbar = ref(true);
			const scroll = {
				y: window.innerHeight - 260
			};
			const ClusterResultRef = ref();
			const pageNum = ref(1)
			const pageSize = ref(10)
			const total = ref()
			const dataList = ref([])
			const isLoading = ref(false)
			const accountList = ref([])
			const plazaList = ref([])
			const queryForm = reactive({
				account_id: '',
				plaza_id: '',
				countDate: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD')
			})
			const searchCondition = ref({})
			const getAccountList = function() {
				queryForm.account_id = ''
				accountList.value = []
				clusterResultApi.getAccountList().then(
					(r) => {
						if (isArray(r)) {
							for (const item of r) {
								accountList.value.push({
									value: item.id,
									label: item.name,
								})
							}
							if (accountList.value.length) {
								if (searchCondition.value.account_id && searchCondition.value.account_id.length > 0) {
									queryForm.account_id = searchCondition.value.account_id
								} else {
									queryForm.account_id = accountList.value[0].value
								}
								getPlazaList()
							}
						}
					}
				)
			}
			const onAccountChange = function() {
				getPlazaList(1)
			}
			const getPlazaList = function(val) {
				queryForm.plaza_id = ''
				plazaList.value = []
				if (!queryForm.account_id.toString()) {
					return
				}
				clusterResultApi.getPlazaList({
					account_id: queryForm.account_id.toString()
				}).then(
					(r) => {
						if (isArray(r)) {
							for (const item of r) {
								plazaList.value.push({
									value: item.id,
									label: item.name,
								})
							}
							if (plazaList.value.length > 0) {
								if (!val && searchCondition.value.plaza_id && searchCondition.value.plaza_id.length > 0) {
									queryForm.plaza_id = searchCondition.value.plaza_id
								} else {
									queryForm.plaza_id = plazaList.value[0].value
								}
								confirmSearch()
							}
						}
					}
				)
			}
			const onPageNumChange = function(num) {
				pageNum.value = num
				confirmSearch()
			}
			const onPageSizeChange = function(current, size) {
				pageNum.value = 1
				pageSize.value = size
				confirmSearch()
			}
			const confirmSearch = function() {
				isLoading.value = true
				const rawData = toRaw(queryForm)
				const data = filterEmptyValueInObject({
					pageNum: pageNum.value,
					pageSize: pageSize.value,
					startDate: formatDate(rawData.countDate),
					endDate: formatDate(rawData.countDate),
					mallId: rawData.plaza_id,
				})
				dataList.value = [], total.value = 0
				CustomerMatchListApi.getList(data).then(
					(r) => {
						isLoading.value = false
						if(r.code==200&&r.data){
							dataList.value = r.data.list
							total.value = r.data.total
						}
					}
				)
			}
			const search = function() {
				pageNum.value = 1
				pageSize.value = 10
				confirmSearch()
			}
			const __main = function() {
				getAccountList()
			}
			const showDetail = function(row) {
				const rawData = toRaw(queryForm)
				const data = filterEmptyValueInObject({
					countDate:formatDate(rawData.countDate),
					personUnid: row.srcPersonUnid,
				})

				// const data = filterEmptyValueInObject({
				// 	page: 0,
				// 	pageSize: 10,
				// 	account_id: rawData.account_id,
				// 	plaza_id: rawData.srcPersonUnid,
				// 	type: 0,
				// 	picType: 2,
				// 	startTime:formatDate(rawData.countDate) + ' 00:00:00',
				// 	countDate:formatDate(rawData.countDate),
				// 	personUnid: row.srcPersonUnid,
				// 	direction: '-1,1',
				// })
				// console.log(data)
				ClusterResultRef.value.initDialog(data);
			}

			__main()
			return {
				scrollbar,
				scroll,
				ClusterResultRef,
				accountList,
				onAccountChange,
				plazaList,
				queryForm,
				pageNum,
				pageSize,
				total,
				isLoading,
				dataList,
				onPageNumChange,
				onPageSizeChange,
				confirmSearch,
				search,
				showDetail
			}
		},
	})
</script>
<style lang="less" scoped>
	/deep/.ant-table-body{
		tr{
			th{
				padding: 13px 16px!important;
			}
		}
	}
	/deep/.ant-table-tbody{
		tr{
			td{
				padding: 8px 16px!important;
			}
		}
	}
</style>