<template> 
 | 
  <QueryMenuView @close="handleReset" @confirm="emit('close')" cancelText="重置"> 
 | 
    <div class="home-query-menu-view"> 
 | 
      <QueryMenuItem title="结算方式"> 
 | 
        <ProRadio 
 | 
          v-model="query.settlementCycle" 
 | 
          :value-enum="EnumSettlementCycleText" 
 | 
          show-all-btn 
 | 
        ></ProRadio> 
 | 
      </QueryMenuItem> 
 | 
      <QueryMenuItem title="员工福利"> 
 | 
        <ProRadio v-model="query.benefitCodes" :value-enum="welfareList" show-all-btn></ProRadio> 
 | 
      </QueryMenuItem> 
 | 
      <QueryMenuItem title="性别要求"> 
 | 
        <ProRadio 
 | 
          v-model="query.genderLimit" 
 | 
          :value-enum="EnumUserGenderText" 
 | 
          show-all-btn 
 | 
        ></ProRadio> 
 | 
      </QueryMenuItem> 
 | 
    </div> 
 | 
  </QueryMenuView> 
 | 
</template> 
 | 
  
 | 
<script setup lang="ts"> 
 | 
import { QueryMenuView, QueryMenuItem, ProRadio } from '@12333/components'; 
 | 
import { 
 | 
  EnumUserGenderText, 
 | 
  EnumSettlementCycle, 
 | 
  CategoryCode, 
 | 
  EnumSettlementCycleText, 
 | 
} from '@12333/constants'; 
 | 
import { useDictionaryDataSelect } from '@12333/hooks'; 
 | 
  
 | 
defineOptions({ 
 | 
  name: 'HomeQueryMenuView', 
 | 
}); 
 | 
  
 | 
// type Props = {}; 
 | 
  
 | 
// const props = withDefaults(defineProps<Props>(), {}); 
 | 
  
 | 
const { dictionaryDataList: welfareList } = useDictionaryDataSelect({ 
 | 
  categoryCode: CategoryCode.Welfare, 
 | 
}); 
 | 
  
 | 
const emit = defineEmits<{ 
 | 
  (e: 'reset'): void; 
 | 
  (e: 'close'): void; 
 | 
}>(); 
 | 
  
 | 
const query = defineModel<{ 
 | 
  genderLimit: number | string; 
 | 
  settlementCycle: EnumSettlementCycle; 
 | 
  benefitCodes: string; 
 | 
}>('query'); 
 | 
  
 | 
const DefaultQuery = { 
 | 
  ...query.value, 
 | 
}; 
 | 
  
 | 
function handleReset() { 
 | 
  for (const key in DefaultQuery) { 
 | 
    query.value[key] = DefaultQuery[key]; 
 | 
  } 
 | 
} 
 | 
</script> 
 | 
  
 | 
<style lang="scss"> 
 | 
@import '@/styles/common.scss'; 
 | 
  
 | 
.home-query-menu-view { 
 | 
  max-height: 400px; 
 | 
  padding: 30px; 
 | 
  overflow: auto; 
 | 
} 
 | 
</style> 
 |