提交 8e6e55bb authored 作者: matian's avatar matian

班级和项目实现联动效果

上级 f47aa841
......@@ -12,26 +12,7 @@ interface classList {
list: any[]
}
const classListItem = reactive<classList>({ loading: false, page: 1, total: 0, list: [] })
onMounted(() => {
handleGetClassList()
})
// 获取班级列表
const handleGetClassList = () => {
const params = {
page: classListItem.page,
limit: 10000,
project_prefix: '',
id: '',
name: ''
}
getClassList(params).then((res: any) => {
classListItem.list = res.data.data
})
}
// 刷新页面
const handleFresh = () => {
appList.value?.refetch()
}
const listOptions = {
remote: {
httpRequest: getAlumniList,
......@@ -66,14 +47,15 @@ const listOptions = {
placeholder: '性别',
options: sexList
},
{
prop: 'class_id',
slots: 'filter-class'
},
{
prop: 'project_prefix',
slots: 'filter-project'
},
{
prop: 'class_id',
slots: 'filter-class'
},
{ type: 'select', prop: 'province', slots: 'filter-province' },
{ type: 'select', prop: 'city', slots: 'filter-city' },
{ type: 'select', prop: 'industry', placeholder: '所在行业', options: industryCategoryList },
......@@ -87,7 +69,6 @@ const listOptions = {
align: 'center',
computed(row: any) {
return sexList.filter((item: any) => {
console.log(item, row.row, 'item')
if (item.value === row.row.sex) {
return item
}
......@@ -114,21 +95,61 @@ const listOptions = {
{ label: '操作', slots: 'table-operate', width: 230, align: 'center' }
]
}
// 筛选项目,匹配班级
const handleChangeClass = (val: any) => {
handleGetClassList(val)
}
// 获取班级列表
const handleGetClassList = (val: string) => {
const params = {
page: classListItem.page,
limit: 10000,
project_prefix: val,
id: '',
name: ''
}
getClassList(params).then((res: any) => {
if (listOptions.remote.params.project_prefix !== '') {
classListItem.list = res.data.data.filter(
(item: any) => item.project_prefix === listOptions.remote.params.project_prefix
)
} else {
classListItem.list = res.data.data
}
})
}
// 刷新页面
const handleFresh = () => {
appList.value?.refetch()
}
onMounted(() => {
// 获取班级列表
handleGetClassList('')
})
</script>
<template>
<AppCard>
<AppList v-bind="listOptions" ref="appList">
<template #filter-class="{ params }">
<el-select @change="handleFresh" clearable v-model="params.class_id" placeholder="班级">
<el-option v-for="item in classListItem.list" :key="item.id" :label="item.name" :value="item.class_id" />
</el-select>
</template>
<template #filter-project="{ params }">
<el-select @change="handleFresh" clearable v-model="params.project_prefix" placeholder="项目">
<el-select @change="handleChangeClass" clearable v-model="params.project_prefix" placeholder="项目">
<el-option v-for="item in allPrefixList" :key="item.prefix" :label="item.name" :value="item.prefix" />
</el-select>
</template>
<template #filter-class="{ params }">
<el-select
@change="handleFresh"
clearable
v-model="params.class_id"
placeholder="班级"
:remote-method="handleGetClassList"
filterable
remote
>
<el-option v-for="item in classListItem.list" :key="item.id" :label="item.name" :value="item.class_id" />
</el-select>
</template>
<template #filter-province>
<el-select filterable clearable v-model="provinceValue" @change="handleFresh" placeholder="省份">
<el-option v-for="item in provinceList" :value="item.label" :key="item.code"></el-option>
......
Markdown 格式
0%
您添加了 0 到此讨论。请谨慎行事。
请先完成此评论的编辑!
注册 或者 后发表评论