refactor(mobile/plan): 促销计划_移动端_搜索 bug 排查修复

src/mobile/views/promotion/plan/index/index.vue

@@ -49,9 +49,10 @@
 
     <!-- 搜索组件 -->
     <PlanSearch v-model:show="showSearch"
+      v-model:query="query"
       :planColumns="planColumns"
       :allEmpolyeeList="allEmpolyeeList"
-      @query="getPlanList" />
+      @query="querySearch" />
   </div>
 </template>
 
@@ -111,28 +112,28 @@ const getEmployeeList = async () => {
   })
 }
 
-
-const getPlanList = async ({ activityStartDate, activityEndDate, planStatus, employeeId, storeNameLike } = {}) => {
+const getPlanList = async () => {
+  // 搜索条件改变/刷新时，页码重置为 1
+  !loading.value && (query.pageNum = 1)
   const res = await getPlanListAPI({
-    ...query,
+    pageNum: query.pageNum,
+    pageSize: query.pageSize,
     queryParams: {
-      activityStartDate: parseTime(activityStartDate, "{y}-{m}-{d}"),
-      activityEndDate: parseTime(activityEndDate, "{y}-{m}-{d}"),
-      planStatus: planColumns.find(item => item.text === planStatus)?.value,
-      employeeId: promotionIdentity.value ? allEmpolyeeList.value.find(o => o.employeeNo === employeeNo.value)?.value : employeeId,
-      storeNameLike
+      activityStartDate: parseTime(query.activityStartDate, "{y}-{m}-{d}"),
+      activityEndDate: parseTime(query.activityEndDate, "{y}-{m}-{d}"),
+      planStatus: planColumns.find(item => item.text === query.planStatus)?.value,
+      employeeId: promotionIdentity.value ? allEmpolyeeList.value.find(o => o.employeeNo === employeeNo.value)?.value : query.employeeId,
+      storeNameLike: query.storeNameLike
     },
   })
-  if (loading.value) {
-    planList.value = [...planList.value, ...res.data.records]
-    finished.value = res.data.records.length === 0
-    loading.value = false
-  } else {
-    planList.value = res.data.records
-  }
-}
 
+  planList.value = [...planList.value, ...res.data.records]
+  loading.value = false
+  refreshLoading.value = false
+  finished.value = res.data.records.length < query.pageSize
+}
 
+// 加载更多
 const onLoad = () => {
   loading.value = true
   query.pageNum++
@@ -144,11 +145,18 @@ const refreshLoading = ref(false)
 const onRefresh = () => {
   setTimeout(async () => {
     query.pageNum = 1
-    await getPlanList()
-    refreshLoading.value = false
+    planList.value = []
+    getPlanList()
   }, 300)
 }
 
+// 搜索表单
+const querySearch = () => {
+  query.pageNum = 1
+  planList.value = []
+  getPlanList()
+}
+
 // 编辑计划
 const editPlan = (row) => {
   if (!checkPlanExpire(row)) {

src/mobile/views/promotion/plan/index/plan-search.vue

@@ -87,7 +87,6 @@ const employeeNo = computed(() => userStore().employeeNo)
 
 const { recentPickerOptions: pickerOptions } = useDatePickerOptions()
 
-const query = reactive({})
 const props = defineProps({
   planColumns: { // 活动状态列表
     type: Array,
@@ -96,56 +95,61 @@ const props = defineProps({
   allEmpolyeeList: { // 所有归属人
     type: Array,
     default: []
+  },
+  query: { // 搜索对象
+    type: Object,
+    default: () => { }
   }
 })
+
 const emits = defineEmits(['query'])
 
-watch(query, () => {
-  emits('query', query)
-}, { deep: true })
 
 // 选择快捷日期
 const pickerSelDate = (item) => {
   let [startTime, endTime] = item.value() // 拿到日期对象
   // 同步更新单独选择日期的选择器和参数
-  query.activityStartDate = startTime
-  query.activityEndDate = endTime
+  props.query.activityStartDate = startTime
+  props.query.activityEndDate = endTime
+  emits('query')
 }
 
 // 选择日期区间
 const showCalendar = ref(false)
 const searchDateStr = computed(() => {
-  if (!query.activityStartDate || !query.activityEndDate) {
+  if (!props.query.activityStartDate || !props.query.activityEndDate) {
     return ''
   }
-  return [query.activityStartDate, query.activityEndDate].map(o => parseTime(o, "{y}-{m}-{d}")).join(' 至 ')
+  return [props.query.activityStartDate, props.query.activityEndDate].map(o => parseTime(o, "{y}-{m}-{d}")).join(' 至 ')
 })
 // 日历最小范围
 const searchMinDate = computed(() => {
-  return new Date(!query.activityStartDate ? new Date().getFullYear() - 1 : query.activityStartDate.getFullYear() - 1, 0, 1)
+  return new Date(!props.query.activityStartDate ? new Date().getFullYear() - 1 : props.query.activityStartDate.getFullYear() - 1, 0, 1)
 })
 // 日期日历范围
 const selSearchCalendar = () => {
   // 默认设置今日日期
-  if (!query.activityStartDate || !query.activityEndDate) {
-    query.activityStartDate = new Date()
-    query.activityEndDate = new Date()
+  if (!props.query.activityStartDate || !props.query.activityEndDate) {
+    props.query.activityStartDate = new Date()
+    props.query.activityEndDate = new Date()
   }
   showCalendar.value = true
 }
 // 确定日期
 const confirmCalendar = (value) => {
   showCalendar.value = false
-  query.activityStartDate = value[0]
-  query.activityEndDate = value[1]
+  props.query.activityStartDate = value[0]
+  props.query.activityEndDate = value[1]
+  emits('query')
 }
 
 // 活动状态
 const showPlanStatus = ref(false)
 // 选中的活动状态
 const confirmPlan = (val) => {
-  query.planStatus = val.selectedOptions[0].text
+  props.query.planStatus = val.selectedOptions[0].text
   showPlanStatus.value = false
+  emits('query')
 }
 
 // 归属人
@@ -158,7 +162,7 @@ watch(() => props.allEmpolyeeList, (newValue) => {
   if (promotionIdentity.value) {
     // 找到员工的 id
     const obj = newValue.find(o => o.employeeNo === employeeNo.value)
-    query.employeeId = obj.value
+    props.query.employeeId = obj.value
   }
 })
 // 搜索归属人
@@ -169,22 +173,26 @@ const searchEmployee = (searchName) => {
 }
 // 确定归属人
 const onEmployeeConfirm = (val) => {
-  query.employeeId = val.selectedOptions[0].value
+  props.query.employeeId = val.selectedOptions[0].value
   showEmployee.value = false
+  emits('query')
 }
 
 // 店铺名
 const searchByStoreName = (val) => {
-  query.storeNameLike = val
+  props.query.storeNameLike = val
+  emits('query')
 }
 
 // 重置
 const resetFn = () => {
-  query.activityStartDate = ''
-  query.activityEndDate = ''
-  query.planStatus = ''
-  !promotionIdentity.value && (query.employeeId = '')
-  query.storeNameLike = ''
+  props.query.pageNum = 1
+  props.query.activityStartDate = ''
+  props.query.activityEndDate = ''
+  props.query.planStatus = undefined
+  !promotionIdentity.value && (props.query.employeeId = undefined)
+  props.query.storeNameLike = undefined
+  emits('query')
 }
 </script>