146 lines
3.5 KiB
Vue
146 lines
3.5 KiB
Vue
<template>
|
|
<ACard :bordered="false" class="search-card">
|
|
<AForm
|
|
ref="formRef"
|
|
:model="formModel"
|
|
layout="inline"
|
|
class="flex flex-wrap gap-16px items-center"
|
|
>
|
|
<AFormItem :label="t('page.kyc.searchtime')">
|
|
<ARangePicker
|
|
v-model:value="queryRangePicker"
|
|
show-time
|
|
:placeholder="[t('page.kyc.starttime'), t('page.kyc.endtime')]"
|
|
format="YYYY-MM-DD HH:mm:ss"
|
|
value-format="YYYY-MM-DD HH:mm:ss"
|
|
class="w-400px"
|
|
@change="handleTimeChange"
|
|
/>
|
|
</AFormItem>
|
|
<AFormItem :label="t('page.kyc.status')">
|
|
<ASelect
|
|
v-model:value="formModel.status"
|
|
:placeholder="t('page.kyc.plestatus')"
|
|
allow-clear
|
|
class="w-200px"
|
|
>
|
|
<ASelectOption value="PENDING">{{ t('page.kyc.pending') }}</ASelectOption>
|
|
<ASelectOption value="APPROVED">{{ t('page.kyc.approved') }}</ASelectOption>
|
|
<ASelectOption value="REJECTED">{{ t('page.kyc.rejected') }}</ASelectOption>
|
|
</ASelect>
|
|
</AFormItem>
|
|
<AFormItem class="flex-1 justify-end">
|
|
<ASpace>
|
|
<AButton type="primary" @click="handleSearch">
|
|
<template #icon>
|
|
<icon-mdi-search />
|
|
</template>{{ t('page.kyc.search') }}</AButton>
|
|
<AButton @click="handleReset">
|
|
<template #icon>
|
|
<icon-mdi-refresh />
|
|
</template>{{ t('page.kyc.reset') }}</AButton>
|
|
</ASpace>
|
|
</AFormItem>
|
|
</AForm>
|
|
</ACard>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, computed, watch } from 'vue';
|
|
import {
|
|
Form as AForm,
|
|
FormItem as AFormItem,
|
|
Select as ASelect,
|
|
SelectOption as ASelectOption,
|
|
Button as AButton,
|
|
Space as ASpace,
|
|
Card as ACard,
|
|
DatePicker
|
|
} from 'ant-design-vue';
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
const ARangePicker = DatePicker.RangePicker;
|
|
import dayjs, { Dayjs } from 'dayjs';
|
|
|
|
interface SearchModel {
|
|
pageNum: number;
|
|
pageSize: number;
|
|
createTimeStart?: string;
|
|
createTimeEnd?: string;
|
|
status?: string;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
model: SearchModel;
|
|
}>(), {
|
|
model: () => ({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
createTimeStart: undefined,
|
|
createTimeEnd: undefined,
|
|
status: undefined
|
|
})
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
'update:model': [value: SearchModel];
|
|
'search': [];
|
|
'reset': [];
|
|
}>();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
const { resetFields } = AForm.useForm(props.model);
|
|
|
|
const formModel = computed({
|
|
get: () => props.model,
|
|
set: (val: SearchModel) => emit('update:model', val)
|
|
});
|
|
|
|
const queryRangePicker = ref<[string, string]>(['', '']);
|
|
|
|
const handleTimeChange = (dates: any, dateStrings: [string, string]) => {
|
|
formModel.value.createTimeStart = dateStrings[0] || undefined;
|
|
formModel.value.createTimeEnd = dateStrings[1] || undefined;
|
|
};
|
|
|
|
function handleSearch() {
|
|
emit('search');
|
|
}
|
|
|
|
function handleReset() {
|
|
queryRangePicker.value = ['', ''];
|
|
resetFields();
|
|
formModel.value = {
|
|
...formModel.value,
|
|
createTimeStart: undefined,
|
|
createTimeEnd: undefined,
|
|
status: undefined,
|
|
pageNum: 1
|
|
};
|
|
emit('reset');
|
|
}
|
|
|
|
watch(
|
|
() => [props.model.createTimeStart, props.model.createTimeEnd],
|
|
([start, end]) => {
|
|
queryRangePicker.value = [start || '', end || ''];
|
|
},
|
|
{ immediate: true }
|
|
);
|
|
</script>
|
|
|
|
<style scoped>
|
|
.search-card {
|
|
margin-bottom: 16px;
|
|
}
|
|
|
|
.w-200px {
|
|
width: 200px;
|
|
}
|
|
|
|
.w-400px {
|
|
width: 400px;
|
|
}
|
|
</style>
|