<template>
|
<ProFieldCustom>
|
<div class="address-select">
|
<el-cascader
|
v-bind="areaByCascaderProps"
|
v-model="areaList"
|
:placeholder="placeholder"
|
clearable
|
:value-on-clear="() => []"
|
></el-cascader>
|
</div>
|
</ProFieldCustom>
|
</template>
|
|
<script setup lang="ts">
|
import { ProFieldCustom } from '@bole-core/components';
|
import { CascaderProps } from 'element-plus';
|
import * as enterpriseWalletServices from '@/services/api/enterpriseWallet';
|
import { useQueryClient } from '@tanstack/vue-query';
|
|
defineOptions({
|
name: 'WeChatPayWalletBankBranchAreaCascader',
|
});
|
|
type Props = {
|
placeholder?: string;
|
};
|
|
const props = withDefaults(defineProps<Props>(), {});
|
|
const areaList = defineModel<number[]>('areaList');
|
|
const queryClient = useQueryClient();
|
|
function getEnterpriseWeChatPayWalletBankProvinces() {
|
return queryClient.fetchQuery({
|
queryKey: ['enterpriseWalletServices/getEnterpriseWeChatPayWalletBankProvinces'],
|
queryFn: async () => {
|
let res = await enterpriseWalletServices.getEnterpriseWeChatPayWalletBankProvinces(
|
{},
|
{ showLoading: false }
|
);
|
return res.map((x) => ({
|
areaName: x.province_name,
|
areaCode: x.province_code,
|
}));
|
},
|
staleTime: Infinity,
|
});
|
}
|
|
function getEnterpriseWeChatPayWalletBankCities(provinceCode: number) {
|
return queryClient.fetchQuery({
|
queryKey: ['enterpriseWalletServices/getEnterpriseWeChatPayWalletBankCities', provinceCode],
|
queryFn: async () => {
|
let res = await enterpriseWalletServices.getEnterpriseWeChatPayWalletBankCities(
|
{
|
provinceCode: provinceCode,
|
},
|
{ showLoading: false }
|
);
|
return res.map((x) => ({
|
areaName: x.city_name,
|
areaCode: x.city_code,
|
}));
|
},
|
staleTime: Infinity,
|
});
|
}
|
|
const areaByCascaderProps = {
|
props: {
|
label: 'areaName',
|
value: 'areaCode',
|
lazy: true,
|
async lazyLoad(node, resolve) {
|
const { level, data, value } = node;
|
console.log('value: ', value);
|
const areas =
|
level === 0
|
? await getEnterpriseWeChatPayWalletBankProvinces()
|
: await getEnterpriseWeChatPayWalletBankCities(value as any);
|
|
return resolve(
|
areas.map((x) => ({
|
...x,
|
leaf: level >= 1,
|
}))
|
);
|
},
|
} as CascaderProps,
|
};
|
</script>
|
