feat: 联动清空数据

src/views/batchesResult/batchesResult.vue

@@ -2,14 +2,25 @@
 	<div class="containter">
 		<a-form :model="queryForm" layout="inline" :label-col="{ style: { width: '70px' } }">
 			<a-form-item label="集团：" style="padding: 5px 0">
-				<a-select v-model:value="queryForm.account_id" style="width: 240px" mode="multiple" :maxTagCount="1"
+				<a-select v-model:value="queryForm.account_id" style="width: 240px" :maxTagCount="1"
 					@change="onAccountChange" :options="accountList" optionFilterProp="label" show-search>
 				</a-select>
 			</a-form-item>
 			<a-form-item label="广场：" style="padding: 5px 0">
-				<a-select v-model:value="queryForm.plaza_id" style="width: 240px" :maxTagCount="1" :options="plazaList" optionFilterProp="label" show-search>
+				<a-select v-model:value="queryForm.plaza_id" style="width: 240px" :maxTagCount="1" :options="plazaList" optionFilterProp="label" show-search @change="onPlazaChange">
 				</a-select>
 			</a-form-item>
+      <a-form-item label="店铺：" style="padding: 5px 0">
+        <a-select v-model:value="queryForm.zone_id"
+                  style="width: 240px"
+                  mode="multiple"
+                  :maxTagCount="1"
+                  :options="zoneList"
+                  optionFilterProp="label"
+                  show-search
+        >
+        </a-select>
+      </a-form-item>
 
 			<a-form-item label="选择日期：" style="padding: 5px 0">
 				<a-date-picker v-model:value="queryForm.date" :format="'YYYY-MM-DD'" :allowClear="false" style="width: 240px" />
@@ -92,6 +103,7 @@
 		getPagedList
 	} from '@/PublicUtil/PublicUtil'
 	import {ElMessage,ElMessageBox} from 'element-plus'
+  import snapshotRecordApi from '@/views/SnapshotCluster/SnapshotRecord/SnapshotRecordApi';
 	export default {
 		components: {
 		},
@@ -105,10 +117,11 @@
 			const dataList = ref([])
 			const accountList = ref([])
 			const plazaList = ref([])
+      const zoneList = ref([])
 			const currobj = ref({})
 			const currentItem = ref({})
 			const queryForm = reactive({
-				account_id: [],
+				account_id: '',
 				plaza_id: '',
 				date: moment(moment().format('YYYY-MM-DD'), 'YYYY-MM-DD'),
 				startTime: '00:00:00',
@@ -139,11 +152,19 @@
 			const onAccountChange = function() {
 				getPlazaList(1)
 			}
+      const onPlazaChange = function() {
+        queryForm.zone_id = []
+        zoneList.value = []
+        // 1 表示不从localStorage中读取数据
+        getZoneList(1)
+      }
 			const getPlazaList = function(val) {
 				queryForm.plaza_id = ''
+        queryForm.zone_id = []
 				plazaList.value = []
+        zoneList.value = []
 				batchesResultApi.getPlazaList({
-					account_id: queryForm.account_id.toString()
+					account_id: Array.isArray(queryForm.account_id) ? queryForm.account_id[0] : queryForm.account_id,
 				}).then(
 					(r) => {
 						if (isArray(r)) {
@@ -159,15 +180,52 @@
 								} else {
 									queryForm.plaza_id = plazaList.value[0].value
 								}
-								confirmSearch()
+                // 1 表示不从localStorage中读取数据，若则读取
+                getZoneList(val)
 							}
 						}
 					}
 				)
 			}
 
+      const getZoneList = function(val) {
+        console.log('getZoneList', val, searchCondition.value)
+        // queryForm.zone_id = []
+        zoneList.value = []
+        snapshotRecordApi.getZoneList(
+            {
+              account_id: Array.isArray(queryForm.account_id) ? queryForm.account_id[0] : queryForm.account_id,
+              plaza_id: queryForm.plaza_id,
+            }
+        ).then(
+            (r) => {
+              if (isArray(r))
+              {
+                for (const item of r)
+                {
+                  zoneList.value.push(
+                      {
+                        value: item.id,
+                        label: item.name,
+                      }
+                  )
+                }
+                if(zoneList.value.length){
+                  if(!val&&searchCondition.value.zone_id && searchCondition.value.zone_id.length>0){
+                    queryForm.zone_id = searchCondition.value.zone_id
+                  }else{
+                    queryForm.zone_id = []
+                  }
+                }else{
+                  queryForm.zone_id = []
+                }
+              }
+            }
+        )
+      }
+
 			const getAccountList = function() {
-				queryForm.account_id = []
+				queryForm.account_id = ''
 				accountList.value = []
 				batchesResultApi.getAccountList().then(
 					(r) => {
@@ -179,10 +237,10 @@
 								})
 							}
 							if (accountList.value.length) {
-								if (searchCondition.value.account_id && searchCondition.value.account_id.length > 0) {
+								if (searchCondition.value.account_id) {
 									queryForm.account_id = searchCondition.value.account_id
 								} else {
-									queryForm.account_id.push(accountList.value[0].value)
+									queryForm.account_id = accountList.value[0].value
 								}
 								getPlazaList()
 							}
@@ -199,6 +257,7 @@
 				const rawData = toRaw(queryForm)
 				const data = filterEmptyValueInObject({
 					mallId: rawData.plaza_id,
+          zoneId: rawData.zone_id.toString(),
 					countDate: formatDate(rawData.date),
 					startTime: formatDate(rawData.date) + ' ' + rawData.startTime,
 					endTime: formatDate(rawData.date) + ' ' + rawData.endTime,
@@ -210,6 +269,7 @@
 				const storageData = filterEmptyValueInObject({
 					account_id: rawData.account_id,
 					plaza_id: [rawData.plaza_id],
+          zone_id: rawData.zone_id,
 					date: rawData.date,
 					minNum: rawData.minNum,
 					maxNum: rawData.maxNum,
@@ -219,7 +279,7 @@
 				let searchCondition = JSON.parse(window.localStorage.getItem('searchCondition'));
 				let newSearchCondition = {
 					...searchCondition,
-					...storageData
+					...storageData,
 				}
 				window.localStorage.setItem('searchCondition', JSON.stringify(newSearchCondition))
 				batchesResultApi.getBatchesResultList(data).then(
@@ -426,6 +486,8 @@
 				clickSearch,
 				concatBatches,
 				deleteBatches,
+        onPlazaChange,
+        zoneList,
 			}
 		}
 	}