120 lines
2.9 KiB
Vue
120 lines
2.9 KiB
Vue
<script setup lang="ts" xmlns="http://www.w3.org/1999/html">
|
|
import { ref, computed } from 'vue';
|
|
import { Form } from 'ant-design-vue';
|
|
import type { FormInstance } from 'ant-design-vue';
|
|
import { useI18n } from 'vue-i18n';
|
|
const { t } = useI18n();
|
|
interface SearchModel {
|
|
pageNum: number;
|
|
pageSize: number;
|
|
userName?: string;
|
|
type?: number;
|
|
status?: number;
|
|
}
|
|
|
|
const props = withDefaults(defineProps<{
|
|
model: SearchModel;
|
|
}>(), {
|
|
model: () => ({
|
|
pageNum: 1,
|
|
pageSize: 10,
|
|
userName: '',
|
|
type: undefined,
|
|
status: undefined
|
|
})
|
|
});
|
|
|
|
const emit = defineEmits<{
|
|
'update:model': [value: SearchModel];
|
|
'search': [];
|
|
'reset': [];
|
|
}>();
|
|
|
|
const formRef = ref<FormInstance>();
|
|
const { resetFields } = Form.useForm(props.model);
|
|
|
|
const formModel = computed({
|
|
get: () => props.model,
|
|
set: (val: SearchModel) => emit('update:model', val)
|
|
});
|
|
|
|
function handleReset() {
|
|
resetFields();
|
|
emit('reset');
|
|
}
|
|
|
|
function handleSearch() {
|
|
emit('search');
|
|
}
|
|
|
|
const orderTypeOptions =computed(()=> [
|
|
{ label: t('page.bill.packagebill'), value: 0 },
|
|
{ label: t('page.bill.rechargebill'), value: 1 }
|
|
]);
|
|
|
|
const orderStatusOptions =computed(()=> [
|
|
{ label: t('page.bill.wait'), value: 0 },
|
|
{ label: t('page.bill.done'), value: 1 },
|
|
{ label: t('page.bill.close'), value: 2 }
|
|
]);
|
|
</script>
|
|
|
|
<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.bill.username')">
|
|
<AInput
|
|
v-model:value="formModel.userName"
|
|
:placeholder="t('page.bill.pleusername')"
|
|
allow-clear
|
|
/>
|
|
</AFormItem>
|
|
<AFormItem :label="t('page.bill.billtype')">
|
|
<ASelect
|
|
v-model:value="formModel.type"
|
|
:placeholder="t('page.bill.plebilltype')"
|
|
:options="orderTypeOptions"
|
|
allow-clear
|
|
style="width: 200px"
|
|
/>
|
|
</AFormItem>
|
|
<AFormItem :label="t('page.bill.status')">
|
|
<ASelect
|
|
v-model:value="formModel.status"
|
|
:placeholder="t('page.bill.plestatus')"
|
|
:options="orderStatusOptions"
|
|
allow-clear
|
|
style="width: 200px"
|
|
/>
|
|
</AFormItem>
|
|
<AFormItem class="flex-1 justify-end">
|
|
<ASpace>
|
|
<div class="w-full flex-y-center justify-end gap-12px">
|
|
<AButton type="primary" ghost @click="handleSearch">
|
|
<div class="flex-y-center gap-8px">
|
|
<icon-mdi-search class="text-icon"/>
|
|
{{ t('page.bill.search') }}</div></AButton>
|
|
<AButton @click="handleReset">
|
|
<div class="flex-y-center gap-8px">
|
|
<icon-mdi-refresh class="text-icon"/>
|
|
{{ t('page.bill.reset') }}</div></AButton>
|
|
</div>
|
|
</ASpace>
|
|
</AFormItem>
|
|
</AForm>
|
|
</ACard>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.search-card {
|
|
:deep(.ant-card-body) {
|
|
padding: 16px;
|
|
}
|
|
}
|
|
</style>
|