|
@@ -1,7 +1,7 @@
|
|
|
<script setup lang="ts">
|
|
<script setup lang="ts">
|
|
|
interface ListItem {
|
|
interface ListItem {
|
|
|
value: string
|
|
value: string
|
|
|
- label: string
|
|
|
|
|
|
|
+ id: string
|
|
|
checked: boolean
|
|
checked: boolean
|
|
|
}
|
|
}
|
|
|
|
|
|
|
@@ -13,29 +13,38 @@ const loading = ref(false)
|
|
|
const states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
|
|
const states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas']
|
|
|
|
|
|
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
|
- list.value = states.map((item) => ({
|
|
|
|
|
- value: `value:${item}`,
|
|
|
|
|
- label: `label:${item}`,
|
|
|
|
|
- checked: false
|
|
|
|
|
- }))
|
|
|
|
|
- options.value = [...list.value]
|
|
|
|
|
|
|
+ options.value = []
|
|
|
})
|
|
})
|
|
|
|
|
|
|
|
// 搜索方法
|
|
// 搜索方法
|
|
|
const remoteMethod = (query: string) => {
|
|
const remoteMethod = (query: string) => {
|
|
|
- if (query) {
|
|
|
|
|
- loading.value = true
|
|
|
|
|
- setTimeout(() => {
|
|
|
|
|
|
|
+ // if (query) {
|
|
|
|
|
+ loading.value = true
|
|
|
|
|
+ $api
|
|
|
|
|
+ .getSpecificRolesPartyID({ term: query })
|
|
|
|
|
+ .then((res: any) => {
|
|
|
|
|
+ if (res.code === 200) {
|
|
|
|
|
+ options.value = res.data?.map((item: any) => ({
|
|
|
|
|
+ id: item.id,
|
|
|
|
|
+ label: item.label,
|
|
|
|
|
+ checked: false
|
|
|
|
|
+ }))
|
|
|
|
|
+ }
|
|
|
|
|
+ })
|
|
|
|
|
+ .finally(() => {
|
|
|
loading.value = false
|
|
loading.value = false
|
|
|
- options.value = list.value.filter((item) => {
|
|
|
|
|
- return item.label.toLowerCase().includes(query.toLowerCase())
|
|
|
|
|
- })
|
|
|
|
|
- syncCheckedState()
|
|
|
|
|
- }, 200)
|
|
|
|
|
- } else {
|
|
|
|
|
- options.value = [...list.value]
|
|
|
|
|
- syncCheckedState()
|
|
|
|
|
- }
|
|
|
|
|
|
|
+ })
|
|
|
|
|
+ // syncCheckedState()
|
|
|
|
|
+ // setTimeout(() => {
|
|
|
|
|
+ // loading.value = false
|
|
|
|
|
+ // options.value = list.value.filter((item) => {
|
|
|
|
|
+ // return item.label.toLowerCase().includes(query.toLowerCase())
|
|
|
|
|
+ // })
|
|
|
|
|
+ // }, 200)
|
|
|
|
|
+ // } else {
|
|
|
|
|
+ // options.value = [...list.value]
|
|
|
|
|
+ // syncCheckedState()
|
|
|
|
|
+ // }
|
|
|
}
|
|
}
|
|
|
|
|
|
|
|
const syncCheckedState = () => {
|
|
const syncCheckedState = () => {
|
|
@@ -78,7 +87,7 @@ const handleCheckboxChange = (item: ListItem) => {
|
|
|
style="width: 100%"
|
|
style="width: 100%"
|
|
|
popper-class="part-id-select-popper"
|
|
popper-class="part-id-select-popper"
|
|
|
>
|
|
>
|
|
|
- <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
|
|
|
|
|
|
|
+ <el-option v-for="item in options" :key="item.id" :label="item.id" :value="item.id">
|
|
|
<div class="select-option">
|
|
<div class="select-option">
|
|
|
<el-checkbox
|
|
<el-checkbox
|
|
|
:model-value="item.checked"
|
|
:model-value="item.checked"
|
|
@@ -89,7 +98,7 @@ const handleCheckboxChange = (item: ListItem) => {
|
|
|
>
|
|
>
|
|
|
{{ item.label }}
|
|
{{ item.label }}
|
|
|
</el-checkbox>
|
|
</el-checkbox>
|
|
|
- <span>{{ item.value }}</span>
|
|
|
|
|
|
|
+ <span>{{ item.id }}</span>
|
|
|
</div>
|
|
</div>
|
|
|
</el-option>
|
|
</el-option>
|
|
|
</el-select>
|
|
</el-select>
|