66 lines
1.8 KiB
Vue
66 lines
1.8 KiB
Vue
<template>
|
|
<div class="common-query">
|
|
<el-select v-model="billStore.billQueryForm.billBook"
|
|
@change="billStore.refreshInfo(isStats)" style="width: 120px">
|
|
<el-option
|
|
v-for="(item, index) in billQuery.billBookList"
|
|
:key="index" :label="item.label" :value="item.name"
|
|
/>
|
|
</el-select>
|
|
|
|
<el-select v-model="billStore.billDateType"
|
|
@change="billStore.refreshInfo(isStats)"
|
|
style="width: 120px;align-self: center;">
|
|
<el-option v-for="(item, index) in dateTypeOptions" :key="index"
|
|
:label="item.label" :value="item.value"/>
|
|
</el-select>
|
|
|
|
<el-switch
|
|
v-model="billStore.billType"
|
|
inline-prompt
|
|
active-value="income" inactive-value="expensive"
|
|
active-text="收入" inactive-text="支出"
|
|
@change="billStore.refreshInfo(isStats)"
|
|
style="--el-switch-on-color: #6FBB69; --el-switch-off-color: #CA6C65;"
|
|
/>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { computed, onMounted, reactive } from 'vue'
|
|
import { useBillStore } from '@/store/bill.ts'
|
|
import { deepCopyObject } from 'vue3-common/utils/dataUtil'
|
|
import { IBillBook } from '@/types/bill.ts'
|
|
import { useRoute } from 'vue-router'
|
|
|
|
const billStore = useBillStore()
|
|
const route = useRoute()
|
|
|
|
const isStats = computed(() => route.path.includes('chart'))
|
|
|
|
onMounted(async () => {
|
|
billQuery.billBookList = deepCopyObject(billStore.billBookList)
|
|
billQuery.billBookList.push({
|
|
color: '',
|
|
icon: '',
|
|
id: 0,
|
|
label: '全部账本',
|
|
name: 'all'
|
|
})
|
|
})
|
|
|
|
const dateTypeOptions = [{
|
|
label: '按月选择',
|
|
value: 'month'
|
|
},
|
|
{
|
|
label: '按年选择',
|
|
value: 'year'
|
|
}]
|
|
|
|
const billQuery = reactive({
|
|
query: '',
|
|
billBookList: [] as IBillBook[]
|
|
})
|
|
</script>
|