|
@@ -0,0 +1,232 @@
|
|
|
+<template>
|
|
|
+ <div class="optionWindow" v-if="optionWindow.show">
|
|
|
+ <div class="box">
|
|
|
+ <div class="top">
|
|
|
+ <div>手动选择学生</div>
|
|
|
+ <div @click="close">关闭</div>
|
|
|
+ </div>
|
|
|
+ <div class="content">
|
|
|
+ <div class="searchBox">
|
|
|
+ <el-select v-model="optionForm.grade" :popper-append-to-body="false" placeholder="年级" clearable>
|
|
|
+ <el-option v-for="item in gradeList" :key="item.value" :label="item.label" :value="item.value" />
|
|
|
+ </el-select>
|
|
|
+ <el-select v-model="optionForm.class" :popper-append-to-body="false" placeholder="班级" clearable>
|
|
|
+ <el-option v-for="item in classData" :key="item.value" :label="item.name" :value="item.id" />
|
|
|
+ </el-select>
|
|
|
+ <el-input v-model="optionForm.name" placeholder="请输入学生姓名" clearable />
|
|
|
+ <el-button type="primary" @click="getStudent">搜索</el-button>
|
|
|
+ </div>
|
|
|
+ <div class="tableBox">
|
|
|
+ <el-table :data="tableData" border class="table" @row-click="handleSelectionChange" @row-dblclick="confirm"
|
|
|
+ highlight-current-row>
|
|
|
+ <el-table-column label="头像" width="120">
|
|
|
+ <template #default="scope">
|
|
|
+ <el-avatar :src="scope.row.logo_url || scope.row.face_pic" />
|
|
|
+ </template>
|
|
|
+ </el-table-column>
|
|
|
+ <el-table-column prop="className" label="班级" width="180" />
|
|
|
+ <el-table-column prop="name" label="姓名" width="180" />
|
|
|
+ <el-table-column prop="genderName" label="性别" />
|
|
|
+ <el-table-column prop="student_number" label="学号" />
|
|
|
+ </el-table>
|
|
|
+
|
|
|
+ <el-pagination layout="sizes, prev, pager, next" :total="page.total" :page-size="page.size"
|
|
|
+ :page-sizes="[20, 60, 120]" :current-page="page.page" @size-change="handleSizeChange"
|
|
|
+ @current-change="handleCurrentChange" />
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="bottom">
|
|
|
+ <div @click="close">取消</div>
|
|
|
+ <div @click="confirm">确定</div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+</template>
|
|
|
+<script setup lang="ts">
|
|
|
+import useAppStore from '@/store/modules/app';
|
|
|
+import dataDictionary from "@/utils/dataDictionary"
|
|
|
+const { proxy } = getCurrentInstance() as any;
|
|
|
+const emit = defineEmits(['back']);
|
|
|
+
|
|
|
+//筛选班别
|
|
|
+const classData = computed(() => {
|
|
|
+ optionForm.value.class = "";
|
|
|
+ let list = classList.value.filter((item: any) => {
|
|
|
+ return item.grade == optionForm.value.grade;
|
|
|
+ })
|
|
|
+ return list;
|
|
|
+});
|
|
|
+
|
|
|
+//年级
|
|
|
+const gradeList = dataDictionary.gradeList;
|
|
|
+
|
|
|
+const data = reactive<any>({
|
|
|
+ optionForm: {
|
|
|
+ gesture: true,
|
|
|
+ hasHB: false,
|
|
|
+ },
|
|
|
+ optionWindow: {
|
|
|
+ show: false,
|
|
|
+ time: "",
|
|
|
+ },
|
|
|
+ classList: [],
|
|
|
+ tableData: [],
|
|
|
+ page: {
|
|
|
+ current: 1,
|
|
|
+ size: 60,
|
|
|
+ total: 0,
|
|
|
+ },
|
|
|
+ selectValue: [],
|
|
|
+});
|
|
|
+
|
|
|
+const { optionForm, optionWindow, classList, tableData, page, selectValue } = toRefs(data);
|
|
|
+
|
|
|
+//打开
|
|
|
+const open = (data: any) => {
|
|
|
+ getClass();
|
|
|
+ getStudent();
|
|
|
+ optionWindow.value.show = true;
|
|
|
+};
|
|
|
+
|
|
|
+//关闭
|
|
|
+const close = () => {
|
|
|
+ optionWindow.value.show = false;
|
|
|
+};
|
|
|
+
|
|
|
+//获取班级列表
|
|
|
+const getClass = () => {
|
|
|
+ const list: any = useAppStore().getClass();
|
|
|
+ if (list.length) {
|
|
|
+ classList.value = list;
|
|
|
+ console.log("classList.value", classList.value)
|
|
|
+ } else {
|
|
|
+ let params = {
|
|
|
+ per_page: 1000,
|
|
|
+ page: 1,
|
|
|
+ };
|
|
|
+ proxy?.$http.common.classList(params).then((res: any) => {
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ let myList: any = res.data;
|
|
|
+ classList.value = myList;
|
|
|
+ useAppStore().setClass(myList);
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+};
|
|
|
+
|
|
|
+//获取学生列表
|
|
|
+const getStudent = () => {
|
|
|
+ let myInfo: any = localStorage.getItem("userInfo");
|
|
|
+ let userInfo = JSON.parse(myInfo);
|
|
|
+ let params: any = {
|
|
|
+ school_id: userInfo.school_id,
|
|
|
+ class_id: optionForm.value.class,
|
|
|
+ page: page.value.current,
|
|
|
+ per_page: page.value.size,
|
|
|
+ };
|
|
|
+ if (optionForm.value.name) {
|
|
|
+ params.name = optionForm.value.name;
|
|
|
+ }
|
|
|
+ proxy?.$http.common.studentList(params).then((res: any) => {
|
|
|
+ if (res.data.length > 0) {
|
|
|
+ tableData.value = res.data.map((item: any) => {
|
|
|
+ let classObj = classList.value.find((items: any) => {
|
|
|
+ return items.id == item.class_id;
|
|
|
+ })
|
|
|
+ item.className = classObj.name;
|
|
|
+ item.genderName = item.gender == 1 ? "男" : "女";
|
|
|
+ item.student_id = item.id;
|
|
|
+ return item;
|
|
|
+ });
|
|
|
+ page.value.total = res.total;
|
|
|
+ }
|
|
|
+ });
|
|
|
+};
|
|
|
+
|
|
|
+//切换页码
|
|
|
+const handleCurrentChange = (data: number) => {
|
|
|
+ page.value.current = data
|
|
|
+ getStudent()
|
|
|
+};
|
|
|
+
|
|
|
+//切换页数
|
|
|
+const handleSizeChange = (data: number) => {
|
|
|
+ page.value.current = 1
|
|
|
+ page.value.size = data
|
|
|
+ getStudent()
|
|
|
+};
|
|
|
+
|
|
|
+//被选行
|
|
|
+const handleSelectionChange = (data: any) => {
|
|
|
+ selectValue.value = data;
|
|
|
+};
|
|
|
+
|
|
|
+//确定
|
|
|
+const confirm = () => {
|
|
|
+ if (!selectValue.value.id) {
|
|
|
+ proxy?.$modal.msgError(`请选择!`);
|
|
|
+ return false;
|
|
|
+ }
|
|
|
+ emit('back', selectValue.value)
|
|
|
+ close();
|
|
|
+};
|
|
|
+
|
|
|
+onMounted(() => {
|
|
|
+})
|
|
|
+
|
|
|
+//暴露给父组件用
|
|
|
+defineExpose({
|
|
|
+ open,
|
|
|
+ close,
|
|
|
+ optionWindow
|
|
|
+})
|
|
|
+</script>
|
|
|
+<style lang="scss" scoped>
|
|
|
+.optionWindow {
|
|
|
+ position: fixed;
|
|
|
+ height: 100vh;
|
|
|
+ width: 100vw;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ background: rgba(0, 0, 0, 0.3);
|
|
|
+ display: flex;
|
|
|
+ justify-content: center;
|
|
|
+ align-items: center;
|
|
|
+ color: #FFFFFF;
|
|
|
+
|
|
|
+ .box {
|
|
|
+ width: 50%;
|
|
|
+ background: #000000;
|
|
|
+
|
|
|
+ .top {
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+
|
|
|
+ .content {
|
|
|
+
|
|
|
+
|
|
|
+ .searchBox {
|
|
|
+ display: flex;
|
|
|
+ }
|
|
|
+
|
|
|
+ .tableBox {
|
|
|
+ .table {
|
|
|
+ height: 40vh;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .bottom {
|
|
|
+ height: 60px;
|
|
|
+ align-items: center;
|
|
|
+ color: #ffffff;
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-around;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+
|
|
|
+}
|
|
|
+</style>
|