FINI/fini-ui
3
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

筛选完成

Browse Source
This commit is contained in:
zzy
2023-04-23 16:31:24 +08:00
parent 8b6c10f1d5
commit 00bb0d8346
11 changed files with 475 additions and 393 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/login/components/Select.vue
+170 -189
View File
@@ -6,23 +6,24 @@
<div class="word" @click="checkAll(1)">
{{ $t(i18n.global.t('home.title.All')) }}
<div class="check">
<el-icon v-if="checkedAll==1">
<Check></Check>
</el-icon>
<el-icon v-if="checkedAll == 1">
<Check></Check>
</el-icon>
</div>
</div>
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
<div class="word" @click="checkAll(2)">{{ $t(i18n.global.t('home.title.None')) }}
<div class="check">
<el-icon v-if="checkedAll==2">
<Check></Check>
</el-icon>
<el-icon v-if="checkedAll == 2">
<Check></Check>
</el-icon>
</div>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.IPOStatus')) }}</div>
<li>
<div class="word" v-for="item in obj.ipoStatus" :key="item.key" @click="ipoStatusSlect(item.key)">
<div class="word" v-for="item in obj.ipoStatus" :key="item.key"
@click="checkOne(item.key, 'ipoStatus')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -34,7 +35,7 @@
<div class="title">{{ $t(i18n.global.t('home.title.TradingCurrency')) }}</div>
<li>
<div class="word" v-for="item in obj.tradingCurrency" :key="item.key"
@click="tradingCurrencySlect(item.key)">
@click="checkOne(item.key, 'tradingCurrency')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -45,7 +46,8 @@
</li>
<div class="title">{{ $t(i18n.global.t('home.title.OfferingType')) }}</div>
<li>
<div class="word" v-for="item in obj.offeringType" :key = "item.key" @click="offeringType(item.key)">
<div class="word" v-for="item in obj.offeringType" :key="item.key"
@click="checkOne(item.key, 'offeringType')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -56,7 +58,8 @@
</li>
<div class="title">{{ $t(i18n.global.t('home.title.SecuritiestobeListed')) }}</div>
<li>
<div class="word" v-for="item in obj.SecuritiestobeListed" :key = "item.key" @click="SecuritiestobeListed(item.key)">
<div class="word" v-for="item in obj.SecuritiestobeListed" :key="item.key"
@click="checkOne(item.key, 'SecuritiestobeListed')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -65,9 +68,10 @@
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
<!-- <div class="title">{{ $t(i18n.global.t('home.title.ListingPlatform')) }}</div>
<li>
<div class="word" v-for="item in obj.ListingPlatform" :key = "item.key" @click="ListingPlatform(item.key)">
<div class="word" v-for="item in obj.ListingPlatform" :key="item.key"
@click="checkOne(item.key, 'ListingPlatform')">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
@@ -75,22 +79,12 @@
</div>
<span>{{ item.value }}</span>
</div>
</li>
<div class="title">{{ $t(i18n.global.t('home.title.ListingType')) }}</div>
<li>
<div class="word" v-for="item in obj.ListingType" :key = "item.key" @click="ListingType(item.key)">
<div class="check">
<el-icon v-if="item.isSelcted">
<Check />
</el-icon>
</div>
<span>{{ item.value }}</span>
</div>
</li>
</li> -->
</div>
<div class="footer">
<button @click="confirm">{{ $t(i18n.global.t('home.title.APPLY')) }}</button>
<button @click="confirm">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>
<button @click="Cancel">{{ $t(i18n.global.t('home.title.Cancel')) }}</button>
</div>
</div>
@@ -105,39 +99,66 @@ export default {
</script>
<script lang="ts" setup>
import { ref, defineExpose, reactive } from 'vue';
import { ref, defineExpose, reactive ,inject} from 'vue';
import i18n from '@/locales'
import { getCurrentInstance } from 'vue'
type keyType='ipoStatus'|'tradingCurrency'|'offeringType'|'SecuritiestobeListed'|'ListingPlatform'|'ListingType'
import { getSelectList } from "@/api/reqIpo/ipo"
type keyType = 'ipoStatus' | 'tradingCurrency' | 'offeringType' | 'SecuritiestobeListed' | 'ListingPlatform'
type requestType = 'status' | 'trade_currency' | 'offer_type' | 'list_securities' | 'list_platform'
const { proxy } = (getCurrentInstance() as any)
const showSelect = ref(false)
const checkedAll=ref(0)
const confirm = () => {
const checkedAll = ref(0)
const selectCards=inject('selectCards') as Function
const confirm = async () => {
var keyArry = ['status', 'trade_currency', 'offer_type', 'list_securities', 'list_platform',]
var reqeustObj = {
status: [] as string[],
trade_currency: [] as string[],
offer_type: [] as string[],
list_securities: [] as string[],
list_platform: [] as string[],
}
Object.keys(obj).forEach((item: string, index: number) => {
obj[item as keyType].forEach((element: any) => {
if (element.isSelcted) {
reqeustObj[keyArry[index] as requestType].push(element.key as string)
}
})
})
const result = await getSelectList(reqeustObj)
console.log('result',result);
selectCards(result);
showSelect.value=false
}
const Cancel = () => {
showSelect.value = false;
}
const preVant = (e: any) => {
e.stopPropagation();
}
const obj = reactive({
ipoStatus: [{
key: 25,
key: "25",
value: proxy.$t('home.DealInitiated'),
isSelcted: false
},
{
key: 30,
key: "30",
value: proxy.$t('home.PublicOfferClosed'),
isSelcted: true
}, {
key: 35,
key: "35",
value: proxy.$t('home.ApplicationValidated'),
isSelcted: true
}, {
key: 45,
key: "45",
value: proxy.$t('home.AllotmentConfirmed'),
isSelcted: false
}, {
key: 50,
key: "50",
value: proxy.$t('home.MoneySettlement'),
isSelcted: false
}, {
@@ -145,225 +166,185 @@ const obj = reactive({
value: proxy.$t('home.AllocationConfirmed'),
isSelcted: false
}, {
key: 60,
key: "60",
value: proxy.$t('home.placingApproved'),
isSelcted: false
}, {
key: 65,
key: "65",
value: proxy.$t('home.AllotmentResultsApproved'),
isSelcted: false
}, {
key: 70,
key: "70",
value: proxy.$t('home.TradingStarted'),
isSelcted: false
}, {
key: 80,
key: "80",
value: proxy.$t('home.Suspended'),
isSelcted: false
}, {
key: 90,
key: "90",
value: proxy.$t('home.Cancelled'),
isSelcted: false
}],
tradingCurrency: [
{
key: 'HKD',
value: 'Hong Kong Dollar',
value: proxy.$t('home.HongKongDollar'),
isSelcted: false
},
{
key: 'CNY',
value: 'Chinese Yuan',
value: proxy.$t('home.ChineseYuan'),
isSelcted: true
},
{
key: 'USD',
value: 'United States Dollar',
value: proxy.$t('home.UnitedStatesDollar'),
isSelcted: false
}
],
offeringType:[{
key:'1',
value:proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
offeringType: [{
key: '1',
value: proxy.$t('ipo.TypeofListing.Globalofferplacingandpublicoffer'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.Byplacingonly'),
}, {
key: '2',
value: proxy.$t('ipo.TypeofListing.Byplacingonly'),
isSelcted: false
},{
key:'3',
value:proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
}, {
key: '3',
value: proxy.$t('ipo.TypeofListing.Bypublicofferonly'),
isSelcted: false
},{
key:'4',
value:proxy.$t('ipo.TypeofListing.Byintroduction'),
}, {
key: '4',
value: proxy.$t('ipo.TypeofListing.Byintroduction'),
isSelcted: false
},
{
key:'5',
value:proxy.$t('ipo.TypeofListing.TransferfromGEM'),
key: '5',
value: proxy.$t('ipo.TypeofListing.TransferfromGEM'),
isSelcted: true
}
],
SecuritiestobeListed:[{
key:'1',
value:proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
],
SecuritiestobeListed: [{
key: '1',
value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
},{
key:'3',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
}, {
key: '2',
value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
isSelcted: false
},{
key:'4',
value:proxy.$t('ipo.TypeofListing.Preferenceshares'),
}, {
key: '3',
value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
isSelcted: false
}, {
key: '4',
value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
isSelcted: false
},
{
key:'5',
value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
key: '5',
value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: true
},
{
key:'6',
value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
key: '6',
value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: true
},
{
key:'7',
value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
key: '7',
value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: true
},
{
key:'8',
value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
key: '8',
value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: true
},
{
key:'99',
value:proxy.$t('ipo.TypeofListing.Other'),
key: '99',
value: proxy.$t('ipo.TypeofListing.Other'),
isSelcted: false
}
],
ListingPlatform:[{
key:'1',
value:proxy.$t('home.Mainboard'),
isSelcted: false
},{
key:'2',
value:proxy.$t('home.GEM'),
isSelcted: false
}],
ListingType:[{
key:'1',
value:proxy.$t('ipo.TypeofListing.Ordinaryshares'),
isSelcted: false
},{
key:'2',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
],
ListingPlatform: [{
key: '1',
value: proxy.$t('home.Mainboard'),
isSelcted: false
},{
key:'3',
value:proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
}, {
key: '2',
value: proxy.$t('home.GEM'),
isSelcted: false
},{
key:'4',
value:proxy.$t('ipo.TypeofListing.Preferenceshares'),
isSelcted: false
},
{
key:'5',
value:proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
isSelcted: true
},
{
key:'6',
value:proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
isSelcted: true
},
{
key:'7',
value:proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
isSelcted: true
},
{
key:'8',
value:proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
isSelcted: true
},
{
key:'99',
value:proxy.$t('ipo.TypeofListing.Other'),
isSelcted: false
}
]
}],
// ListingType: [{
// key: '1',
// value: proxy.$t('ipo.TypeofListing.Ordinaryshares'),
// isSelcted: false
// }, {
// key: '2',
// value: proxy.$t('ipo.TypeofListing.OrdinarysharesHshares'),
// isSelcted: false
// }, {
// key: '3',
// value: proxy.$t('ipo.TypeofListing.OrdinarysharesconversionfromBtoHshares'),
// isSelcted: false
// }, {
// key: '4',
// value: proxy.$t('ipo.TypeofListing.Preferenceshares'),
// isSelcted: false
// },
// {
// key: '5',
// value: proxy.$t('ipo.TypeofListing.RealEstateInvestmentTrust'),
// isSelcted: true
// },
// {
// key: '6',
// value: proxy.$t('ipo.TypeofListing.ExchangeTradedProduct'),
// isSelcted: true
// },
// {
// key: '7',
// value: proxy.$t('ipo.TypeofListing.DepositaryReceipts'),
// isSelcted: true
// },
// {
// key: '8',
// value: proxy.$t('ipo.TypeofListing.ShareStapledUnits'),
// isSelcted: true
// },
// {
// key: '99',
// value: proxy.$t('ipo.TypeofListing.Other'),
// isSelcted: false
// }
// ]
})
const ipoStatusSlect = (key: number) => {
obj.ipoStatus = obj.ipoStatus.map((item: any) => {
const checkOne = (key: number | string, objKey: keyType) => {
obj[objKey] = obj[objKey].map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const tradingCurrencySlect = (key: string) => {
obj.tradingCurrency = obj.tradingCurrency.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const offeringType = (key: string) => {
obj.offeringType = obj.offeringType.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const SecuritiestobeListed = (key: string) => {
obj.SecuritiestobeListed = obj.SecuritiestobeListed.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const ListingPlatform = (key: string) => {
obj.ListingPlatform = obj.ListingPlatform.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const ListingType = (key: string) => {
obj.ListingType = obj.ListingType.map((item: any) => {
if (item.key == key) {
return { ...item, isSelcted: !item.isSelcted }
}
return item
})
}
const checkAll = (number:number)=>{
if(checkedAll.value&&checkedAll.value==number){
checkedAll.value=0;
}else{
checkedAll.value=number;
selectAll(number as 1|2)
const checkAll = (number: number) => {
if (checkedAll.value && checkedAll.value == number) {
checkedAll.value = 0;
} else {
checkedAll.value = number;
selectAll(number as 1 | 2)
}
}
function selectAll(all:1|2){
// obj['ipoStatus']
var boolean=all==1?true:false;
Object.keys(obj).forEach((item:string)=>{
obj[item as keyType]=obj[item as keyType].map(element=>{
return {...element,isSelcted:boolean} as any;
function selectAll(all: 1 | 2) {
var boolean1 = all == 1 ? true : false;
Object.keys(obj).forEach((item: string) => {
obj[item as keyType] = obj[item as keyType].map(element => {
return { ...element, isSelcted: boolean1 } as any;
})
})
}
@@ -383,7 +364,7 @@ defineExpose({
left: 50%;
transform: translate(-50%, -50%);
z-index: 10;
.box {
box-sizing: border-box;
padding: 10px 20px 20px 20px;