perf: 调整
This commit is contained in:
@ -72,7 +72,7 @@
|
|||||||
<DatePicker.RangePicker
|
<DatePicker.RangePicker
|
||||||
v-model="audit_started_at"
|
v-model="audit_started_at"
|
||||||
size="medium"
|
size="medium"
|
||||||
allow-clear
|
allowClear
|
||||||
format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
||||||
class="!w-280px"
|
class="!w-280px"
|
||||||
@change="(value) => onDateChange(value, 'audit_started_at')"
|
@change="(value) => onDateChange(value, 'audit_started_at')"
|
||||||
|
|||||||
@ -33,7 +33,7 @@
|
|||||||
<div class="filter-row flex">
|
<div class="filter-row flex">
|
||||||
<div class="filter-row-item flex items-center">
|
<div class="filter-row-item flex items-center">
|
||||||
<span class="label">时间筛选</span>
|
<span class="label">时间筛选</span>
|
||||||
<DatePicker.RangePicker v-model:value="query.data_time" allowClear format="YYYY-MM-DD" class="!w-240px" />
|
<DatePicker.RangePicker v-model="data_time" allowClear format="YYYY-MM-DD" class="!w-240px" @change="onDateChange" />
|
||||||
</div>
|
</div>
|
||||||
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
<Button type="primary" ghost class="mr-12px" @click="handleSearch">
|
||||||
<template #icon>
|
<template #icon>
|
||||||
@ -80,6 +80,8 @@ import PlanSelect from '@/views/components/common/PlanSelect.vue';
|
|||||||
const { TabPane } = Tabs;
|
const { TabPane } = Tabs;
|
||||||
const { Option } = Select;
|
const { Option } = Select;
|
||||||
const accountType = ref("1");
|
const accountType = ref("1");
|
||||||
|
const data_time = ref([]);
|
||||||
|
const operators = ref([]);
|
||||||
|
|
||||||
const onLoading = ref(true);
|
const onLoading = ref(true);
|
||||||
|
|
||||||
@ -108,6 +110,19 @@ const handleTabClick = (value) => {
|
|||||||
accountType.value = value;
|
accountType.value = value;
|
||||||
handleSearch();
|
handleSearch();
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onDateChange = (date) => {
|
||||||
|
if (!date) {
|
||||||
|
query.data_time = [];
|
||||||
|
handleSearch();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [start, end] = date;
|
||||||
|
const FORMAT_DATE = 'YYYY-MM-DD';
|
||||||
|
query.data_time = [dayjs(start).startOf('day').format(FORMAT_DATE), dayjs(end).endOf('day').format(FORMAT_DATE)];
|
||||||
|
handleSearch();
|
||||||
|
};
|
||||||
const mergeChartData = (apiResponse) => {
|
const mergeChartData = (apiResponse) => {
|
||||||
console.log(apiResponse, 'apiResponse');
|
console.log(apiResponse, 'apiResponse');
|
||||||
chartConfigs.value = chartConfigs.value.map((config) => {
|
chartConfigs.value = chartConfigs.value.map((config) => {
|
||||||
@ -221,14 +236,15 @@ const chartConfigs = ref([
|
|||||||
},
|
},
|
||||||
]);
|
]);
|
||||||
const handleReset = async () => {
|
const handleReset = async () => {
|
||||||
|
data_time.value = [];
|
||||||
query.platform = undefined;
|
query.platform = undefined;
|
||||||
query.operator_id = undefined;
|
query.operator_id = undefined;
|
||||||
|
query.data_time = [];
|
||||||
query.ids = [];
|
query.ids = [];
|
||||||
query.placement_account_id = [];
|
query.placement_account_id = [];
|
||||||
handleSearch();
|
handleSearch();
|
||||||
};
|
};
|
||||||
|
|
||||||
const operators = ref([]);
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
handleSearch();
|
handleSearch();
|
||||||
getOperators();
|
getOperators();
|
||||||
|
|||||||
@ -53,12 +53,11 @@
|
|||||||
<div class="filter-row-item">
|
<div class="filter-row-item">
|
||||||
<span class="label">时间筛选</span>
|
<span class="label">时间筛选</span>
|
||||||
<DatePicker.RangePicker
|
<DatePicker.RangePicker
|
||||||
v-model:value="query.data_time"
|
v-model="data_time"
|
||||||
size="medium"
|
:allowClear="false"
|
||||||
:allow-clear="false"
|
|
||||||
format="YYYY-MM-DD"
|
format="YYYY-MM-DD"
|
||||||
class="w-240px"
|
class="w-240px"
|
||||||
@change="handleSearch"
|
@change="onDateChange"
|
||||||
/>
|
/>
|
||||||
</div>
|
</div>
|
||||||
<div class="filter-row-item">
|
<div class="filter-row-item">
|
||||||
@ -80,6 +79,7 @@
|
|||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script setup>
|
<script setup>
|
||||||
|
import dayjs from 'dayjs';
|
||||||
import { reactive, defineEmits, defineProps } from 'vue';
|
import { reactive, defineEmits, defineProps } from 'vue';
|
||||||
import { Button, Input, DatePicker } from 'ant-design-vue';
|
import { Button, Input, DatePicker } from 'ant-design-vue';
|
||||||
import {
|
import {
|
||||||
@ -104,12 +104,21 @@ const props = defineProps({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
|
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
|
||||||
|
// // 同步父组件传入的初始值
|
||||||
|
// watch(
|
||||||
|
// () => props.query.data_time,
|
||||||
|
// (newVal) => {
|
||||||
|
// if (newVal && newVal.length > 0) {
|
||||||
|
// data_time.value = newVal;
|
||||||
|
// }
|
||||||
|
// },
|
||||||
|
// { immediate: true }
|
||||||
|
// );
|
||||||
// const tags = ref([]);
|
// const tags = ref([]);
|
||||||
const groups = ref([]);
|
const groups = ref([]);
|
||||||
const operators = ref([]);
|
const operators = ref([]);
|
||||||
const placementAccounts = ref([]);
|
const placementAccounts = ref([]);
|
||||||
// const dataTime = ref([]);
|
const data_time = ref([]);
|
||||||
|
|
||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
emits('update:query', props.query);
|
emits('update:query', props.query);
|
||||||
@ -118,7 +127,26 @@ const handleSearch = () => {
|
|||||||
});
|
});
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onDateChange = (date) => {
|
||||||
|
// query.data_time = date;
|
||||||
|
if (!date) {
|
||||||
|
props.query.data_time = [];
|
||||||
|
handleSearch();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [start, end] = date;
|
||||||
|
const FORMAT_DATE = 'YYYY-MM-DD';
|
||||||
|
props.query.data_time = [
|
||||||
|
dayjs(start).startOf('day').format(FORMAT_DATE),
|
||||||
|
dayjs(end).endOf('day').format(FORMAT_DATE),
|
||||||
|
];
|
||||||
|
|
||||||
|
handleSearch();
|
||||||
|
};
|
||||||
|
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
|
data_time.value = [];
|
||||||
emits('onReset');
|
emits('onReset');
|
||||||
};
|
};
|
||||||
|
|
||||||
@ -135,6 +163,13 @@ const getOperators = async () => {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const getYesterdayDays = () => {
|
||||||
|
const today = new Date();
|
||||||
|
const last7Days = new Date(today);
|
||||||
|
last7Days.setDate(today.getDate() - 1);
|
||||||
|
return [last7Days.toISOString().split('T')[0], today.toISOString().split('T')[0]];
|
||||||
|
};
|
||||||
|
|
||||||
const getAccounts = async () => {
|
const getAccounts = async () => {
|
||||||
const { code, data } = await getPlacementAccountsList();
|
const { code, data } = await getPlacementAccountsList();
|
||||||
if (code === 200) {
|
if (code === 200) {
|
||||||
@ -143,6 +178,9 @@ const getAccounts = async () => {
|
|||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
|
const defaultTime = getYesterdayDays();
|
||||||
|
data_time.value = defaultTime;
|
||||||
|
|
||||||
getGroups();
|
getGroups();
|
||||||
getOperators();
|
getOperators();
|
||||||
getAccounts();
|
getAccounts();
|
||||||
|
|||||||
@ -25,7 +25,7 @@
|
|||||||
<div class="filter-row flex mb-20px">
|
<div class="filter-row flex mb-20px">
|
||||||
<div class="filter-row-item flex items-center">
|
<div class="filter-row-item flex items-center">
|
||||||
<span class="label">时间筛选</span>
|
<span class="label">时间筛选</span>
|
||||||
<DatePicker.RangePicker v-model:value="query.data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" />
|
<DatePicker.RangePicker v-model="data_time" size="medium" allowClear format="YYYY-MM-DD" class="w-310" @change="onDateChange" />
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div class="filter-row-item flex items-center">
|
<div class="filter-row-item flex items-center">
|
||||||
@ -66,6 +66,9 @@ const props = defineProps({
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
|
const emits = defineEmits(['onSearch', 'onReset', 'update:query']);
|
||||||
|
|
||||||
|
const data_time = ref([]);
|
||||||
|
|
||||||
// 获取最近7天的日期
|
// 获取最近7天的日期
|
||||||
const getLast7Days = () => {
|
const getLast7Days = () => {
|
||||||
const today = new Date();
|
const today = new Date();
|
||||||
@ -76,6 +79,19 @@ const getLast7Days = () => {
|
|||||||
const handleSearch = () => {
|
const handleSearch = () => {
|
||||||
emits('onSearch', props.query);
|
emits('onSearch', props.query);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const onDateChange = (date) => {
|
||||||
|
if (!date) {
|
||||||
|
props.query.data_time = [];
|
||||||
|
handleSearch();
|
||||||
|
return;
|
||||||
|
}
|
||||||
|
|
||||||
|
const [start, end] = date;
|
||||||
|
const FORMAT_DATE = 'YYYY-MM-DD';
|
||||||
|
props.query.data_time = [dayjs(start).startOf('day').format(FORMAT_DATE), dayjs(end).endOf('day').format(FORMAT_DATE)];
|
||||||
|
handleSearch();
|
||||||
|
};
|
||||||
// 使用 computed 实现 v-model
|
// 使用 computed 实现 v-model
|
||||||
const localQuery = computed({
|
const localQuery = computed({
|
||||||
get: () => props.query,
|
get: () => props.query,
|
||||||
@ -83,10 +99,14 @@ const localQuery = computed({
|
|||||||
});
|
});
|
||||||
|
|
||||||
const handleReset = () => {
|
const handleReset = () => {
|
||||||
|
data_time.value = [];
|
||||||
emits('onReset');
|
emits('onReset');
|
||||||
};
|
};
|
||||||
|
|
||||||
onMounted(() => {
|
onMounted(() => {
|
||||||
localQuery.value.data_time = getLast7Days();
|
const defaultTime = getLast7Days();
|
||||||
|
data_time.value = defaultTime;
|
||||||
|
localQuery.value.data_time = defaultTime;
|
||||||
});
|
});
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user