mirror of
https://codeup.aliyun.com/67762337eccfc218f6110e0e/vue/learning-system-portal.git
synced 2025-12-19 07:46:43 +08:00
教师端1期 姓名搜索组件
This commit is contained in:
赵依梦
137
src/components/NameFilterSelect/index.vue
Normal file
137
src/components/NameFilterSelect/index.vue
Normal file
@@ -0,0 +1,137 @@
|
||||
<template>
|
||||
<div id="NameFilterSelect">
|
||||
<el-select @clear="handleClose" style="width:100%" @change="handleChange" clearable multiple v-model="aids"
|
||||
filterable placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
|
||||
:multiple-limit="5" :loading="nameListLoading">
|
||||
<el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
|
||||
<span>{{ item.name }}</span>
|
||||
<span v-if="item.code" class="option-code">（{{ item.code }}）</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import apiUserbasic from "@/api/boe/userbasic.js";
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
aids: [],
|
||||
nameListLoading: false,
|
||||
nameList: [],
|
||||
};
|
||||
},
|
||||
props: {},
|
||||
methods: {
|
||||
handleChange() {
|
||||
console.log("handleChange", this.aids);
|
||||
this.$emit("handleNameChange", this.aids);
|
||||
},
|
||||
handleClose() {
|
||||
console.log("handleClose", this.aids);
|
||||
this.$emit("handleClose");
|
||||
},
|
||||
async initNameList(keyword) {
|
||||
console.log("initNameList", keyword);
|
||||
if (!keyword) {
|
||||
return;
|
||||
}
|
||||
this.nameListLoading = true;
|
||||
try {
|
||||
const res = await apiUserbasic.selectUser(keyword);
|
||||
this.nameListLoading = false;
|
||||
|
||||
if (res && res.status === 200) {
|
||||
const resultList = res.result || [];
|
||||
this.nameList = resultList
|
||||
.map((item) => this.formatCreatorItem(item))
|
||||
.filter((item) => item.userId);
|
||||
} else {
|
||||
this.creatorOptions = [];
|
||||
}
|
||||
} catch (error) {
|
||||
this.nameList = [];
|
||||
this.nameListLoading = false;
|
||||
} finally {
|
||||
this.nameListLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
formatCreatorItem(item = {}) {
|
||||
return {
|
||||
userId: item.id,
|
||||
name: item.realName,
|
||||
code: item.userNo,
|
||||
};
|
||||
},
|
||||
},
|
||||
watch: {},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
::v-deep .el-upload-dragger {
|
||||
width: 100% !important;
|
||||
height: 100% !important;
|
||||
}
|
||||
.image-upload {
|
||||
width: 410px;
|
||||
height: 168px;
|
||||
}
|
||||
.image-card .el-upload--picture-card,
|
||||
.image-card .el-upload-list--picture-card .el-upload-list__item {
|
||||
background-color: #fbfdff;
|
||||
border: 1px dashed #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
}
|
||||
.el-upload--picture-card {
|
||||
background-color: #fbfdff;
|
||||
border: 1px dashed #c0ccda;
|
||||
border-radius: 6px;
|
||||
box-sizing: border-box;
|
||||
vertical-align: top;
|
||||
line-height: 100%;
|
||||
}
|
||||
.image-uploader .el-upload {
|
||||
border: 1px dashed #d9d9d9;
|
||||
border-radius: 6px;
|
||||
cursor: pointer;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
image-uploader .el-upload--picture-card {
|
||||
width: 100%;
|
||||
}
|
||||
image-uploader .el-upload:hover {
|
||||
border-color: #409eff;
|
||||
}
|
||||
.image-uploader-icon {
|
||||
font-size: 28px;
|
||||
color: #8c939d;
|
||||
text-align: center;
|
||||
margin-top: 50px;
|
||||
display: block;
|
||||
}
|
||||
.icon-text {
|
||||
font-size: 14px;
|
||||
display: block;
|
||||
height: 30px;
|
||||
line-height: 35px;
|
||||
}
|
||||
.image {
|
||||
position: relative;
|
||||
.mask {
|
||||
opacity: 0;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
transition: all 0.3s;
|
||||
}
|
||||
&:hover .mask {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
@@ -18,14 +18,15 @@
|
||||
<el-col :span="4">
|
||||
<div class="grid-content bg-purple">
|
||||
<!-- <el-input v-model="signup.name" clearable placeholder="姓名" maxlength="50" /> -->
|
||||
<el-select :key="2" style="width:100%" clearable multiple v-model="signup.aid" filterable
|
||||
<NameFilterSelect @handleNameChange="aids => signup.aid = aids" @handleClose="signup.aid = []" />
|
||||
<!-- <el-select :key="2" style="width:100%" clearable multiple v-model="signup.aid" filterable
|
||||
placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
|
||||
:multiple-limit="5" :loading="nameListLoading">
|
||||
<el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
|
||||
<span>{{ item.name }}</span>
|
||||
<span v-if="item.code" class="option-code">（{{ item.code }}）</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
</div>
|
||||
</el-col>
|
||||
<el-col :span="4">
|
||||
@@ -86,14 +87,16 @@
|
||||
<div class="grid-content bg-purple">
|
||||
<!-- <el-input clearable v-model="learningRecords.name" maxlength="50"
|
||||
placeholder="姓名"></el-input> -->
|
||||
<el-select :key="1" style="width:100%" clearable multiple v-model="learningRecords.aid" filterable
|
||||
<NameFilterSelect @handleNameChange="aids => learningRecords.aid = aids"
|
||||
@handleClose="learningRecords.aid = []" />
|
||||
<!-- <el-select :key="1" style="width:100%" clearable multiple v-model="learningRecords.aid" filterable
|
||||
placeholder="姓名" v-limit-input="50" reserve-keyword remote :remote-method="initNameList"
|
||||
:multiple-limit="5" :loading="nameListLoading">
|
||||
<el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
|
||||
<span>{{ item.name }}</span>
|
||||
<span v-if="item.code" class="option-code">（{{ item.code }}）</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
|
||||
</div>
|
||||
</el-col>
|
||||
@@ -272,14 +275,17 @@
|
||||
<el-row style="margin: 20px 0 20px -10px;" :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<el-select :key="3" style="width:100%" clearable multiple v-model="commonResourceStudyPeopleQuery.aid"
|
||||
<NameFilterSelect @handleNameChange="aids => commonResourceStudyPeopleQuery.aid = aids"
|
||||
@handleClose="commonResourceStudyPeopleQuery.aid = []" />
|
||||
|
||||
<!-- <el-select :key="3" style="width:100%" clearable multiple v-model="commonResourceStudyPeopleQuery.aid"
|
||||
filterable placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
|
||||
:multiple-limit="5" :loading="nameListLoading">
|
||||
<el-option v-for="item in nameList" :key="item.userId" :label="item.name" :value="item.userId">
|
||||
<span>{{ item.name }}</span>
|
||||
<span v-if="item.code" class="option-code">（{{ item.code }}）</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
<!-- <el-input v-model="commonResourceStudyPeopleQuery.name" clearable
|
||||
maxlength="50" placeholder="姓名" /> -->
|
||||
</div>
|
||||
@@ -347,6 +353,9 @@
|
||||
<el-row style="margin: 20px 0 20px -10px;" :gutter="20">
|
||||
<el-col :span="6">
|
||||
<div class="grid-content bg-purple">
|
||||
<NameFilterSelect @handleNameChange="aids => examResourceStudyPeopleQuery.aid = aids"
|
||||
@handleClose="examResourceStudyPeopleQuery.aid = []" />
|
||||
<!--
|
||||
<el-select :key="4" style="width:100%" clearable multiple v-model="examResourceStudyPeopleQuery.aid"
|
||||
filterable placeholder="姓名" v-limit-input="50" remote reserve-keyword :remote-method="initNameList"
|
||||
:multiple-limit="5" :loading="nameListLoading">
|
||||
@@ -354,7 +363,7 @@
|
||||
<span>{{ item.name }}</span>
|
||||
<span v-if="item.code" class="option-code">（{{ item.code }}）</span>
|
||||
</el-option>
|
||||
</el-select>
|
||||
</el-select> -->
|
||||
<!-- <el-input v-model="examResourceStudyPeopleQuery.name" clearable
|
||||
maxlength="50" placeholder="姓名" /> -->
|
||||
</div>
|
||||
@@ -438,8 +447,11 @@ import apiUser from "@/api/system/user.js";
|
||||
import apiStudy from "@/api/modules/courseStudy.js";
|
||||
import { getToken } from "@/utils/token";
|
||||
import axios from "axios";
|
||||
import NameFilterSelect from "@/components/NameFilterSelect/index.vue";
|
||||
|
||||
NameFilterSelect;
|
||||
export default {
|
||||
components: { NameFilterSelect },
|
||||
computed: {
|
||||
...mapGetters(["resOwnerMap", "sysTypeMap"]),
|
||||
},
|
||||
@@ -601,8 +613,6 @@ export default {
|
||||
status: "",
|
||||
aid: [],
|
||||
},
|
||||
nameList: [],
|
||||
nameListLoading: false,
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
@@ -622,39 +632,6 @@ export default {
|
||||
loadSysTypes: "sysType/loadSysTypes",
|
||||
}),
|
||||
|
||||
async initNameList(keyword) {
|
||||
console.log("initNameList", keyword);
|
||||
if (!keyword) {
|
||||
return;
|
||||
}
|
||||
this.nameListLoading = true;
|
||||
try {
|
||||
const res = await apiUserbasic.selectUser(keyword);
|
||||
this.nameListLoading = false;
|
||||
|
||||
if (res && res.status === 200) {
|
||||
const resultList = res.result || [];
|
||||
this.nameList = resultList
|
||||
.map((item) => this.formatCreatorItem(item))
|
||||
.filter((item) => item.userId);
|
||||
} else {
|
||||
this.creatorOptions = [];
|
||||
}
|
||||
} catch (error) {
|
||||
this.nameList = [];
|
||||
this.nameListLoading = false;
|
||||
} finally {
|
||||
this.nameListLoading = false;
|
||||
}
|
||||
},
|
||||
|
||||
formatCreatorItem(item = {}) {
|
||||
return {
|
||||
userId: item.id,
|
||||
name: item.realName,
|
||||
code: item.userNo,
|
||||
};
|
||||
},
|
||||
|
||||
resetCommonResourceQuery() {
|
||||
this.commonResourceStudyPeopleQuery = {
|
||||
@@ -714,7 +691,7 @@ export default {
|
||||
contentId: this.rousourceRow.contentId,
|
||||
pageIndex: this.examResourceStudyPeopleQuery.pageIndex,
|
||||
pageSize: this.examResourceStudyPeopleQuery.pageSize,
|
||||
name: '',
|
||||
name: "",
|
||||
status: this.examResourceStudyPeopleQuery.status,
|
||||
aid: this.examResourceStudyPeopleQuery.aid.join(","),
|
||||
})
|
||||
@@ -1137,7 +1114,6 @@ export default {
|
||||
},
|
||||
handleTabClick(tab) {
|
||||
this.tabName = tab.name;
|
||||
this.nameList = [];
|
||||
if (tab.name === "second") {
|
||||
this.getSignupList();
|
||||
} else if (tab.name === "third") {
|
||||
|
||||
Reference in New Issue
Block a user