1624 lines
50 KiB
Vue
1624 lines
50 KiB
Vue
<template>
|
|
<commonManage>
|
|
<div class="head">
|
|
<div class="left">
|
|
<p class="desctipt">学生名称:</p>
|
|
<el-input v-model="data.tableNeed.StudentName" class="m-2" placeholder="请输入学生名称" clearable />
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">学生学号:</p>
|
|
<el-input v-model="data.tableNeed.StudentNo" class="m-2" placeholder="请输入学生学号" clearable />
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">年级-班级:</p>
|
|
<el-cascader v-model="data.tableNeed.ClassId" clearable :options="data.drawerDialog.classes" lazy
|
|
filterable></el-cascader>
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">性别:</p>
|
|
<el-select v-model="data.tableNeed.Sex" class="m-2">
|
|
<el-option v-for="item in data.options" :key="item.id" :label="item.label" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="left">
|
|
<p class="desctipt">状态:</p>
|
|
<el-select v-model="data.tableNeed.StudentStatus" class="m-2">
|
|
<el-option v-for="item in data.options1" :key="item.id" :label="item.label" :value="item.id" />
|
|
</el-select>
|
|
</div>
|
|
<div class="rightBtn">
|
|
<p v-for="(item, index) in handelData" :key="index" :class="item.className"
|
|
@click="btnClick(item.engName)">
|
|
{{ item.chinName }}</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="cont">
|
|
<el-table :data="data.tableNeed.tableData"
|
|
style="width: calc(100% - 40px) ;height: calc(100vh - 323px); margin:0 20px ; margin-top: 20px;"
|
|
fit="true" v-if="data.tableNeed.refresh"
|
|
:header-cell-style="{ 'text-align': 'center', 'font-size': '12px', 'color': '#3F404A', padding: '3px', background: '#F8F8FA', height: '50px' }"
|
|
:cell-style="getCellStyles" :row-style="{ height: '0px' }">
|
|
<el-table-column fixed prop="ind" label="序号" width="60" />
|
|
<el-table-column prop="studentNo" label="学生学号" />
|
|
<el-table-column prop="studentName" label="学生姓名" />
|
|
<el-table-column prop="sex" label="性别" width="80" />
|
|
<el-table-column prop="gradeName" label="年级" width="80" />
|
|
<el-table-column prop="className" label="班级" width="80" />
|
|
<el-table-column prop="age" label="年龄" width="80" />
|
|
<!-- <el-table-column prop="schoolRollNo" label="学籍号" width="150" /> -->
|
|
<el-table-column prop="heartRateFrontNo" label="心率设备正面编号" />
|
|
<el-table-column prop="heartRateId" label="心率设备ID" />
|
|
<el-table-column prop="ropeSkipQRCode" label="跳绳编号" />
|
|
<el-table-column label="学生照片">
|
|
<template v-slot="{ row }">
|
|
<img style="width:30px; height:30px;" :src="row.photo" alt="">
|
|
</template>
|
|
</el-table-column>
|
|
<el-table-column prop="studentStatus" label="状态" />
|
|
<el-table-column prop="orderNo" label="排序号" />
|
|
<el-table-column label="操作" width="300">
|
|
|
|
<template v-slot="{ row }">
|
|
<div class="operate">
|
|
<p class="edit" @click="editTable(row)">编辑</p>
|
|
<p class="delete" @click="deleteOne(row)">重置密码</p>
|
|
<!-- <p class="view" @click="toViewStudent(row)">查看详情</p> -->
|
|
<p class="view" @click="finish(row)">毕业</p>
|
|
<!-- <p class="view" @click="changeSchool(row)">转学</p> -->
|
|
|
|
</div>
|
|
</template>
|
|
</el-table-column>
|
|
</el-table>
|
|
<el-pagination class="pagination" :current-page="data.tableNeed.pageIndex"
|
|
:page-size="data.tableNeed.pageSize" :page-sizes="[10, 50, 100, 200]"
|
|
layout="total, sizes, prev, pager, next, jumper" :total="data.tableNeed.total"
|
|
@size-change="handleSizeChange" @current-change="changeSize" />
|
|
</div>
|
|
</commonManage>
|
|
<div class="addTeacherDrawer">
|
|
<el-drawer v-model="data.drawerDialog.show" direction="rtl" size="50%" :close-on-click-modal="false"
|
|
:show-close=false append-to-body>
|
|
|
|
<template #header>
|
|
<p class="title">{{ data.dialogTitle }}</p>
|
|
</template>
|
|
|
|
<template #default>
|
|
<el-form ref="ruleFormRef" :model="ruleForm" :rules="rules" label-width="150px" class="demo-ruleForm"
|
|
size="default" status-icon>
|
|
<el-form-item label="学生名称:" prop="studentName">
|
|
<el-input v-model="ruleForm.studentName" />
|
|
</el-form-item>
|
|
<el-form-item label="年级-班级" prop="classId">
|
|
<el-cascader v-model="ruleForm.classId" :options="data.drawerDialog.classes" lazy
|
|
filterable></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="学生学号:" prop="studentNo">
|
|
<el-input v-model="ruleForm.studentNo" />
|
|
</el-form-item>
|
|
<el-form-item label="性别:" prop="sex">
|
|
<el-select v-model="ruleForm.sex" class="m-2">
|
|
<el-option v-for="item in data.options.slice(1, 3)" :key="item.id" :label="item.label"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="年龄:" prop="age">
|
|
<el-input v-model="ruleForm.age" />
|
|
</el-form-item>
|
|
<el-form-item label="出生日期:" prop="birthday">
|
|
<el-date-picker v-model="ruleForm.birthday" type="date" placeholder="请选择出生日期"
|
|
format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="身份证:" prop="idCard">
|
|
<el-input v-model="ruleForm.idCard" />
|
|
</el-form-item>
|
|
<el-form-item label="学生照片:" prop="photo">
|
|
<el-upload class="dl-avatar-uploader-min square" ref="uploadRef" action=""
|
|
:show-file-list="false" :before-upload="beforeImageUpload" :on-exceed="handleExceed"
|
|
list-type="picture" accept=".jpg,.jpeg,.png">
|
|
<el-image v-if="ruleForm.photo" :src="ruleForm.photo" class="avatar"
|
|
style="width: 100px;height: 100px;"></el-image>
|
|
<p v-else style="color:#0486FE">点击上传照片</p>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="心率设备正面编号:" prop="heartRateFrontNo">
|
|
<el-input v-model="ruleForm.heartRateFrontNo" />
|
|
</el-form-item>
|
|
<el-form-item label="心率设备ID:" prop="heartRateId">
|
|
<el-input v-model="ruleForm.heartRateId" />
|
|
</el-form-item>
|
|
<el-form-item label="中长跑芯片编号:" prop="runChipNo">
|
|
<el-input v-model="ruleForm.runChipNo" />
|
|
</el-form-item>
|
|
<el-form-item label="跳绳编号:" prop="ropeSkipQRCode">
|
|
<el-input v-model="ruleForm.ropeSkipQRCode" />
|
|
</el-form-item>
|
|
<el-form-item label="排序号:" prop="orderNo">
|
|
<el-input v-model="ruleForm.orderNo" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="footer">
|
|
<p class="cancle" @click="cancelClick">取消</p>
|
|
<p class="confirm" @click="confirmClick">确定</p>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
<div class="addTeacherDrawer">
|
|
<el-drawer v-model="data.drawerDialog.show1" direction="rtl" size="50%" :close-on-click-modal="false"
|
|
:show-close=false append-to-body>
|
|
|
|
<template #header>
|
|
<p class="title">{{ data.dialogTitle }}</p>
|
|
</template>
|
|
|
|
<template #default>
|
|
<el-form ref="ruleFormRef1" :model="ruleForm1" :rules="rules" label-width="150px" class="demo-ruleForm"
|
|
size="default" status-icon>
|
|
<el-form-item label="学生名称:" prop="studentName">
|
|
<el-input v-model="ruleForm1.studentName" />
|
|
</el-form-item>
|
|
<el-form-item label="年级-班级" prop="classId">
|
|
<el-cascader v-model="ruleForm1.classId" :options="data.drawerDialog.classes" lazy
|
|
filterable></el-cascader>
|
|
</el-form-item>
|
|
<el-form-item label="学生学号:" prop="studentNo">
|
|
<el-input v-model="ruleForm1.studentNo" />
|
|
</el-form-item>
|
|
<el-form-item label="性别:" prop="sex">
|
|
<el-select v-model="ruleForm1.sex" class="m-2">
|
|
<el-option v-for="item in data.options.slice(1, 3)" :key="item.id" :label="item.label"
|
|
:value="item.id" />
|
|
</el-select>
|
|
</el-form-item>
|
|
<el-form-item label="年龄:" prop="age">
|
|
<el-input v-model="ruleForm1.age" />
|
|
</el-form-item>
|
|
<el-form-item label="出生日期:" prop="birthday">
|
|
<el-date-picker v-model="ruleForm1.birthday" type="date" placeholder="请选择出生日期"
|
|
format="YYYY-MM-DD" value-format="YYYY-MM-DD" style="width: 100%" />
|
|
</el-form-item>
|
|
<el-form-item label="身份证:" prop="idCard">
|
|
<el-input v-model="ruleForm1.idCard" />
|
|
</el-form-item>
|
|
<el-form-item label="学生照片:" prop="photo">
|
|
<el-upload class="dl-avatar-uploader-min square" action="" ref="uploadRef"
|
|
:show-file-list="false" :before-upload="beforeImageUpload1" :on-exceed="handleExceed"
|
|
list-type="picture" accept=".jpg,.jpeg,.png">
|
|
<el-image v-if="ruleForm1.photo" :src="ruleForm1.photo" class="avatar"
|
|
style="width: 100px;height: 100px;"></el-image>
|
|
<p v-else style="color:#0486FE">点击上传照片</p>
|
|
</el-upload>
|
|
</el-form-item>
|
|
<el-form-item label="心率设备正面编号:" prop="heartRateFrontNo">
|
|
<el-input v-model="ruleForm1.heartRateFrontNo" />
|
|
</el-form-item>
|
|
<el-form-item label="心率设备ID:" prop="heartRateId">
|
|
<el-input v-model="ruleForm1.heartRateId" />
|
|
</el-form-item>
|
|
<el-form-item label="中长跑芯片编号:" prop="runChipNo">
|
|
<el-input v-model="ruleForm1.runChipNo" />
|
|
</el-form-item>
|
|
<el-form-item label="跳绳编号:" prop="ropeSkipQRCode">
|
|
<el-input v-model="ruleForm1.ropeSkipQRCode" />
|
|
</el-form-item>
|
|
<el-form-item label="排序号:" prop="orderNo">
|
|
<el-input v-model="ruleForm1.orderNo" />
|
|
</el-form-item>
|
|
</el-form>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="footer">
|
|
<p class="cancle" @click="cancelClick">取消</p>
|
|
<p class="confirm" @click="confirmClick">确定</p>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div>
|
|
<!-- <div class="addTeacherDrawer">
|
|
<el-drawer v-model="data.drawerDialog.show2" direction="rtl" size="50%" :close-on-click-modal="false"
|
|
:show-close=false append-to-body>
|
|
|
|
<template #header>
|
|
<p class="title">{{ data.dialogTitle }}</p>
|
|
</template>
|
|
|
|
<template #default>
|
|
<el-button type="primary" @click="downLoad" style="margin-bottom: 10px;">下载导入学生模板</el-button>
|
|
<el-upload ref="uploadref" class="upload-demo" action="" accept=".xls,.xlsx" :limit="1"
|
|
:before-upload="handleBeforeUpload">
|
|
<el-button type="primary">请选择上传需要导入的学生文件</el-button>
|
|
</el-upload>
|
|
<div class="uploadFileName" v-if="data.showIcon">
|
|
<div class="oneData">
|
|
<p>{{ data.fileList.name }}</p>
|
|
<p class="delete1" @click="deleteFile">X</p>
|
|
</div>
|
|
</div>
|
|
<el-upload ref="uploadref" class="upload-demo" action="" accept=".xls,.xlsx" :limit="1"
|
|
:before-upload="handleBeforeUpload3">
|
|
<el-button type="primary">请选择批量上传学生头像</el-button>
|
|
</el-upload>
|
|
<div class="uploadFileName" v-if="data.showIcon3">
|
|
<div class="oneData">
|
|
<p>{{ data.fileList3.name }}</p>
|
|
<p class="delete1" @click="deleteFile3">X</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<template #footer>
|
|
<div class="footer">
|
|
<p class="cancle" @click="cancelClick1">取消</p>
|
|
<p class="confirm" @click="confirmClick1">确定</p>
|
|
</div>
|
|
</template>
|
|
</el-drawer>
|
|
</div> -->
|
|
<uoploadStudent :data="uploadStudentData"></uoploadStudent>
|
|
<upLoadStudentFace :data="uploadStudentFaceData"></upLoadStudentFace>
|
|
<!-- <vol-box v-if="data.drawerDialog.show2" :showClose="false" :showCheck="true" v-model="data.upload.excel"
|
|
:height="450" :width="600" @handleClose="handleClose" :lazy="true" :title="('学生') + '-导入'">
|
|
<UploadExcel ref="upload_excel" @importExcelAfter="importExcelAfter" :importExcelBefore="importExcelBefore"
|
|
:url="data.upload.url" :template="data.upload.template" :method="data.upload.method"></UploadExcel>
|
|
</vol-box> -->
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { ref, onMounted, onUnmounted, inject } from 'vue';
|
|
import commonManage from '@/components/commonManage/index.vue';
|
|
import commonTable from '@/components/commonTable/index.vue';
|
|
import commonDialog from '@/components/commonDialog/index.vue';
|
|
import { useRoute } from 'vue-router';
|
|
import { useStore } from 'vuex';
|
|
import * as _api from '@/api/grade';
|
|
import { ElMessage, componentSizeMap, ElMessageBox } from 'element-plus';
|
|
import axios from 'axios';
|
|
import eventBus from '@/eventBus.js';
|
|
import VolBox from '@/components/basic/VolBox.vue';
|
|
import UploadExcel from '@/components/basic/UploadExcel.vue';
|
|
import uoploadStudent from '@/components/upLoadStudent/index.vue'
|
|
import upLoadStudentFace from '@/components/upLoadStudentFace/index.vue'
|
|
// const axios = inject('axios');
|
|
const cascaderProps = {
|
|
multiple: true,
|
|
|
|
}
|
|
const ruleFormRef = ref(null)
|
|
const ruleFormRef1 = ref(null)
|
|
const uploadRef = ref(null)
|
|
const route = useRoute();
|
|
const currentRoute = route.path; //获取当前页面路由
|
|
const store = useStore();
|
|
const baseURL = axios.defaults.baseURL;
|
|
const dialogVisiblePhoto = ref(false)
|
|
let buttons = store.getters.getPermission(currentRoute).permission;
|
|
const form = new FormData();
|
|
const form1 = new FormData();
|
|
const form2 = new FormData();
|
|
const form3 = new FormData();
|
|
const photoForm = new FormData();
|
|
let contrast = {
|
|
'查询': 'Search',
|
|
'重置': 'Upload',
|
|
'新增': 'Add',
|
|
'导入学生': 'Import',
|
|
'导出': 'Export',
|
|
'导入人脸': 'Audit',
|
|
} //对照表
|
|
let handelData = ref<any>([]) //接收处理后的按钮数据
|
|
buttons.map((i) => {
|
|
handelData.value.push({
|
|
engName: i,
|
|
chinName: '',
|
|
className: i
|
|
})
|
|
})
|
|
//给每个按钮添加中文名
|
|
for (let i in contrast) {
|
|
handelData.value.map((v) => {
|
|
if (v.engName == contrast[i]) {
|
|
v.chinName = i
|
|
}
|
|
})
|
|
}
|
|
//按钮排序
|
|
const customOrder = {
|
|
"Search": 2,
|
|
"Upload": 1,
|
|
'Add': 3,
|
|
'Import': 4,
|
|
'Audit': 5,
|
|
'Export': 6
|
|
};
|
|
handelData.value.sort((a, b) => {
|
|
const orderA = customOrder[a.engName];
|
|
const orderB = customOrder[b.engName];
|
|
|
|
if (orderA < orderB) {
|
|
return -1;
|
|
} else if (orderA > orderB) {
|
|
return 1;
|
|
} else {
|
|
return 0;
|
|
}
|
|
});
|
|
const ruleForm = ref({
|
|
id: 0,
|
|
studentNo: '',
|
|
idCard: '',
|
|
studentName: '',
|
|
gradeId: '',
|
|
classId: '',
|
|
className: '',
|
|
age: '',
|
|
sex: '',
|
|
photo: '',
|
|
birthday: '',
|
|
heartRateFrontNo: '',
|
|
heartRateId: '',
|
|
runChipNo: '',
|
|
ropeSkipQRCode: '',
|
|
orderNo: ''
|
|
})
|
|
const ruleForm1 = ref({
|
|
id: 0,
|
|
studentNo: '',
|
|
idCard: '',
|
|
studentName: '',
|
|
gradeId: '',
|
|
classId: '',
|
|
className: '',
|
|
age: '',
|
|
sex: '',
|
|
photo: '',
|
|
birthday: '',
|
|
heartRateFrontNo: '',
|
|
heartRateId: '',
|
|
runChipNo: '',
|
|
ropeSkipQRCode: '',
|
|
orderNo: ''
|
|
})
|
|
const rules = ref({
|
|
studentName: [
|
|
{
|
|
required: true,
|
|
message: '请输入学生姓名',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
classId: [
|
|
{
|
|
required: true,
|
|
message: '请输入班级',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
photo: [
|
|
{
|
|
required: false,
|
|
message: '请选择照片',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
idCard: [
|
|
{
|
|
required: false,
|
|
message: '请输入身份证号',
|
|
trigger: 'blur',
|
|
},
|
|
// {
|
|
// validator: validatePhone,
|
|
// trigger: 'blur',
|
|
// },
|
|
],
|
|
birthday: [
|
|
{
|
|
type: 'date',
|
|
required: false,
|
|
message: '请选择出生日期',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
studentNo: [
|
|
{
|
|
required: true,
|
|
message: '请输入学号',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
age: [
|
|
{
|
|
required: true,
|
|
message: '请输入年龄',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
sex: [
|
|
{
|
|
required: true,
|
|
message: '请选择性别',
|
|
trigger: 'change',
|
|
},
|
|
],
|
|
heartRateFrontNo: [
|
|
{
|
|
required: false,
|
|
message: '请输入心率设备正面编号',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
heartRateId: [
|
|
{
|
|
required: false,
|
|
message: '请输入心率设备正面编号',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
runChipNo: [
|
|
{
|
|
required: false,
|
|
message: '请输入心率设备正面编号',
|
|
trigger: 'blur',
|
|
},
|
|
],
|
|
ropeSkipQRCode: [
|
|
{
|
|
required: false,
|
|
message: '请输入心率设备正面编号',
|
|
trigger: 'blur',
|
|
},
|
|
]
|
|
})
|
|
const uploadStudentData = ref({
|
|
visable: false,
|
|
})
|
|
const uploadStudentFaceData = ref({
|
|
visable: false,
|
|
})
|
|
const data = ref({
|
|
|
|
gender: 0,
|
|
nameIpt: '',
|
|
status: 0,
|
|
fileList: {},
|
|
fileList1: {},
|
|
fileList2: {},
|
|
fileList3: {},
|
|
options1: [
|
|
{
|
|
id: '',
|
|
label: '全部',
|
|
},
|
|
{
|
|
id: 1,
|
|
label: '在读',
|
|
},
|
|
|
|
],
|
|
options: [
|
|
{
|
|
id: '',
|
|
label: '全部',
|
|
},
|
|
{
|
|
id: '1',
|
|
label: '男',
|
|
},
|
|
{
|
|
id: '2',
|
|
label: '女',
|
|
}
|
|
],
|
|
|
|
tableNeed: {
|
|
pageIndex: 1,
|
|
pageSize: 10,
|
|
total: 0,
|
|
refresh: false,
|
|
GradeId: '',
|
|
ClassId: [],
|
|
StudentNo: '',
|
|
StudentName: '',
|
|
orderNo: '',
|
|
Sex: '',
|
|
StudentStatus: '',
|
|
tableData: [
|
|
|
|
],
|
|
},
|
|
drawerDialog: {
|
|
show: false,
|
|
show1: false,
|
|
show2: false,
|
|
dynamicTags: [],
|
|
GradeData: [],
|
|
classes: [
|
|
|
|
],
|
|
mutily: { multiple: true }
|
|
},
|
|
upload: {
|
|
//导入上传excel对象
|
|
excel: false, //导入的弹出框是否显示
|
|
url: '', //导入的路径,如果没有值，则不渲染导入功能
|
|
template: {
|
|
//下载模板对象
|
|
url: '', //下载模板路径
|
|
fileName: '导入学生模板', //模板下载的中文名
|
|
TestingUnitUserId: '',
|
|
file: null,
|
|
},
|
|
method: 'POST',
|
|
init: false, //是否有导入权限，有才渲染导入组件
|
|
isCommon: true
|
|
},
|
|
dialogTitle: "添加学生",
|
|
isAdd: true,
|
|
showIcon: false,
|
|
showIcon1: false,
|
|
showIcon2: false,
|
|
showIcon3: false,
|
|
currrentInd: 0
|
|
})
|
|
const handleExceed = (files) => {
|
|
photoForm.delete("file")
|
|
uploadRef.value!.clearFiles()
|
|
const file = files[0]
|
|
file.uid = genFileId()
|
|
uploadRef.value!.handleStart(file)
|
|
}
|
|
const handleClose = (tag: string) => {
|
|
data.value.drawerDialog.dynamicTags.splice(data.value.drawerDialog.dynamicTags.indexOf(tag), 1)
|
|
}
|
|
//上传文件成功后
|
|
const importExcelAfter = (val) => {
|
|
console.log(val, 'valllllll')
|
|
if (val.code == 200) {
|
|
ElMessage.success({
|
|
dangerouslyUseHTMLString: true,
|
|
message: `导入成功`,
|
|
})
|
|
data.value.drawerDialog.show2 = false
|
|
initApi(data.value)
|
|
data.value.upload.template.file = null
|
|
} else {
|
|
ElMessage.error({
|
|
dangerouslyUseHTMLString: true,
|
|
message: val.message,
|
|
})
|
|
// ElMessage.error(val.message)
|
|
data.value.drawerDialog.show2 = false
|
|
}
|
|
}
|
|
// 点击切换年级
|
|
const changeGrade = (e, num) => {
|
|
console.log(e, 'eeeeeeeeeeeeeee')
|
|
if (num == 0) {
|
|
data.value.tableNeed.ClassId = null
|
|
GetClassNames(e, 1)
|
|
} else if (num == 1) {
|
|
ruleForm.value.classId = null
|
|
GetClassNames(e, 1)
|
|
}
|
|
|
|
|
|
}
|
|
const handleBeforeUpload = (file) => {
|
|
data.value.currrentInd = 0
|
|
data.value.showIcon = true
|
|
data.value.fileList = file
|
|
form.append("file", data.value.fileList);
|
|
console.log(form, 'formmmmm')
|
|
return false; // 阻止自动上传
|
|
};
|
|
const handleBeforeUpload1 = (file) => {
|
|
data.value.currrentInd = 1
|
|
data.value.showIcon1 = true
|
|
data.value.fileList1 = file
|
|
form1.append("file", data.value.fileList1);
|
|
console.log(form1, 'formmmmm1111')
|
|
return false; // 阻止自动上传
|
|
};
|
|
// const handleBeforeUpload2 = (file) => {
|
|
// data.value.currrentInd = 2
|
|
// data.value.showIcon2 = true
|
|
// data.value.fileList2 = file
|
|
// form2.append("file", data.value.fileList2);
|
|
// console.log(form2, 'formmmmm1111')
|
|
// return false; // 阻止自动上传
|
|
// };
|
|
const handleBeforeUpload3 = (file) => {
|
|
data.value.currrentInd = 3
|
|
data.value.showIcon3 = true
|
|
data.value.fileList3 = file
|
|
form3.append("file", data.value.fileList3);
|
|
console.log(form3, 'formmmmm1111')
|
|
return false; // 阻止自动上传
|
|
};
|
|
function getCellStyles({ row, column, rowIndex, columnIndex }) {
|
|
const prop = column.property;
|
|
return {
|
|
height: 0,
|
|
textAlign: 'center',
|
|
};
|
|
}
|
|
const deleteFile = () => {
|
|
|
|
data.value.fileList = {}
|
|
data.value.showIcon = false
|
|
|
|
}
|
|
const deleteFile1 = () => {
|
|
|
|
data.value.fileList1 = {}
|
|
data.value.showIcon1 = false
|
|
|
|
}
|
|
// const deleteFile2 = () => {
|
|
|
|
// data.value.fileList2 = {}
|
|
// data.value.showIcon2 = false
|
|
|
|
// }
|
|
const deleteFile3 = () => {
|
|
|
|
data.value.fileList3 = {}
|
|
data.value.showIcon3 = false
|
|
|
|
}
|
|
const beforeImageUpload = (file) => {
|
|
console.log(file, 'fileeeee')
|
|
console.log(ruleForm.value, 'ruleForm.value')
|
|
if (!ruleForm.value.studentNo && !ruleForm.value.studentName && !ruleForm.value.gradeId && !ruleForm.value.classId) {
|
|
return ElMessage.error('请选填写信息再上传头像')
|
|
}
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = function () {
|
|
photoForm.append("file", file);
|
|
AddPhoto(ruleForm.value)
|
|
|
|
};
|
|
reader.onerror = function (error) {
|
|
reject(error);
|
|
};
|
|
reader.onloadend = function () {
|
|
resolve(ruleForm.value.photo);
|
|
};
|
|
})
|
|
}
|
|
const beforeImageUpload1 = (file) => {
|
|
console.log(file, 'fileeeee')
|
|
console.log(ruleForm1.value, 'ruleForm.value')
|
|
if (!ruleForm1.value.studentNo && !ruleForm1.value.studentName && !ruleForm1.value.gradeId && !ruleForm1.value.classId) {
|
|
return ElMessage.error('请选填写信息再上传头像')
|
|
}
|
|
return new Promise((resolve, reject) => {
|
|
const reader = new FileReader();
|
|
reader.readAsDataURL(file);
|
|
reader.onload = function () {
|
|
photoForm.append("file", file);
|
|
AddPhoto(ruleForm1.value)
|
|
|
|
};
|
|
reader.onerror = function (error) {
|
|
reject(error);
|
|
};
|
|
reader.onloadend = function () {
|
|
resolve(ruleForm.value.photo);
|
|
};
|
|
})
|
|
}
|
|
const cancelClick1 = () => {
|
|
data.value.drawerDialog.show2 = false
|
|
data.value.fileList = {}
|
|
data.value.fileList1 = {}
|
|
data.value.fileList2 = {}
|
|
data.value.fileList3 = {}
|
|
data.value.showIcon = false
|
|
data.value.showIcon1 = false
|
|
data.value.showIcon2 = false
|
|
data.value.showIcon3 = false
|
|
form.delete("file")
|
|
form1.delete("file")
|
|
form2.delete("file")
|
|
form3.delete("file")
|
|
}
|
|
const confirmClick1 = () => {
|
|
console.log(data.value.fileList, 'data.value.fileList')
|
|
console.log(data.value.fileList1, 'data.value.fileList1111')
|
|
if (data.value.showIcon) {
|
|
AddList()
|
|
} else if (data.value.showIcon1) {
|
|
// AddList1()
|
|
} else if (data.value.showIcon2) {
|
|
// AddList2()
|
|
} else if (data.value.showIcon3) {
|
|
AddList3()
|
|
}
|
|
else if (data.value.showIcon && data.value.showIcon1 && data.value.showIcon2 && data.value.showIcon3) {
|
|
AddList()
|
|
// AddList1()
|
|
// AddList2()
|
|
AddList3()
|
|
}
|
|
}
|
|
//验证身份证格式
|
|
function validatePhone(rule, value, callback) {
|
|
// 身份证正则表达式，仅匹配中国大陆身份证号码
|
|
const idCardRegex = /^[1-9]\d{16}[\dxX]$/;
|
|
|
|
if (!idCardRegex.test(value)) {
|
|
callback(new Error('请输入正确的身份证号码格式'));
|
|
} else {
|
|
callback();
|
|
}
|
|
}
|
|
//提交表单
|
|
const submitForm = async (formEl) => {
|
|
if (!formEl) return
|
|
await formEl.validate((valid, fields) => {
|
|
if (valid) {
|
|
switch (data.value.isAdd) {
|
|
case true:
|
|
AddStudents(ruleForm.value)
|
|
break
|
|
case false:
|
|
// ruleForm.value.sex = '1'
|
|
console.log(ruleForm1.value, 'ruleForm11111111111111111111')
|
|
ModifyTeachers(ruleForm1.value)
|
|
break
|
|
}
|
|
} else {
|
|
console.log('error submit!', fields)
|
|
}
|
|
})
|
|
}
|
|
//重置表单
|
|
const resetForm = (formEl) => {
|
|
if (!formEl) return
|
|
formEl.resetFields()
|
|
|
|
}
|
|
const cancelClick = () => {
|
|
if (data.value.isAdd) {
|
|
resetForm(ruleFormRef.value)
|
|
data.value.drawerDialog.show = false
|
|
} else {
|
|
resetForm(ruleFormRef1.value)
|
|
data.value.drawerDialog.show1 = false
|
|
}
|
|
|
|
|
|
}
|
|
const confirmClick = () => {
|
|
|
|
if (data.value.isAdd) {
|
|
submitForm(ruleFormRef.value)
|
|
} else {
|
|
submitForm(ruleFormRef1.value)
|
|
}
|
|
|
|
}
|
|
//分页
|
|
const changeSize = (e) => {
|
|
console.log(e, 'eeeee')
|
|
data.value.tableNeed.pageIndex = e
|
|
data.value.tableNeed.refresh = false
|
|
initApi(data.value)
|
|
}
|
|
const handleSizeChange = (val) => {
|
|
data.value.tableNeed.pageSize = val
|
|
data.value.tableNeed.refresh = false
|
|
initApi(data.value)
|
|
}
|
|
|
|
//编辑表格行
|
|
const editTable = (e) => {
|
|
console.log(e, 'eeeeee')
|
|
let k = []
|
|
data.value.dialogTitle = '编辑'
|
|
data.value.isAdd = false
|
|
data.value.drawerDialog.classes.map((i) => {
|
|
i.children.map((v) => {
|
|
if (v.value == e.classId) {
|
|
k.push(i.value, v.value)
|
|
}
|
|
})
|
|
})
|
|
ruleForm1.value = {
|
|
id: e.id,
|
|
studentNo: e.studentNo,
|
|
idCard: '',
|
|
studentName: e.studentName,
|
|
classId: k,
|
|
age: e.age,
|
|
sex: e.sex == '男' ? '1' : '2',
|
|
photo: e.photo,
|
|
birthday: '',
|
|
heartRateFrontNo: e.heartRateFrontNo,
|
|
heartRateId: e.heartRateId,
|
|
runChipNo: e.runChipNo,
|
|
ropeSkipQRCode: e.ropeSkipQRCode,
|
|
orderNo: e.orderNo
|
|
}
|
|
data.value.drawerDialog.show1 = true
|
|
}
|
|
//删除表格行
|
|
const deleteOne = (e) => {
|
|
console.log(e, 'deleteOne')
|
|
ElMessageBox.confirm(
|
|
`<p><span class="confirm-tip">您正在将密码重置为${e.studentNo}</span>,<span>您还要继续吗?</span></p>`,
|
|
'警告',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true, // 允许使用 HTML
|
|
}
|
|
)
|
|
.then(() => {
|
|
let params = {
|
|
"studentNo": e.studentNo
|
|
}
|
|
UpdateStudentPwdApi(params)
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '更新成功',
|
|
});
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: 'info',
|
|
message: '用户取消',
|
|
});
|
|
});
|
|
|
|
}
|
|
// 毕业
|
|
const finish = (e) => {
|
|
console.log(e, 'deleteOne')
|
|
ElMessageBox.confirm(
|
|
`<p><span class="confirm-tip">您正在将此学生设置为毕业状态</span>,<span>您还要继续吗?</span></p>`,
|
|
'警告',
|
|
{
|
|
confirmButtonText: '确定',
|
|
cancelButtonText: '取消',
|
|
type: 'warning',
|
|
dangerouslyUseHTMLString: true, // 允许使用 HTML
|
|
}
|
|
)
|
|
.then(() => {
|
|
let params = {
|
|
"studentNo": e.studentNo,
|
|
"status": 3
|
|
}
|
|
UpdateStudentStatusApi(params)
|
|
ElMessage({
|
|
type: 'success',
|
|
message: '更新成功',
|
|
});
|
|
})
|
|
.catch(() => {
|
|
ElMessage({
|
|
type: 'info',
|
|
message: '用户取消',
|
|
});
|
|
});
|
|
|
|
}
|
|
const toViewStudent = (e) => {
|
|
// console.log(e, 'toView')
|
|
eventBus.emit('toViewStudent', e);
|
|
}
|
|
const changClass = (e) => {
|
|
console.log('转班')
|
|
}
|
|
const changeSchool = (e) => {
|
|
console.log('转学')
|
|
}
|
|
//创建班级
|
|
function btnClick(val) {
|
|
console.log(val, 'vallll')
|
|
switch (val) {
|
|
case 'Search':
|
|
data.value.tableNeed.refresh = false
|
|
initApi(data.value)
|
|
break
|
|
case 'Add':
|
|
data.value.isAdd = true
|
|
data.value.drawerDialog.show = true
|
|
data.value.dialogTitle = '添加学生'
|
|
break
|
|
case 'Import':
|
|
// data.value.dialogTitle = '上传文件'
|
|
// data.value.drawerDialog.show2 = true
|
|
// submitFile()
|
|
// data.value.drawerDialog.show2 = true
|
|
// data.value.upload.excel = true
|
|
// data.value.upload.template.url = `${axios.defaults.baseURL}api/Student/GetImportStudentsTemplate`
|
|
// data.value.upload.url = `${axios.defaults.baseURL}api/Student/ImportStudents`
|
|
uploadStudentData.value.visable = true
|
|
break
|
|
case 'Export':
|
|
exportData(data.value)
|
|
break
|
|
case 'Audit':
|
|
uploadStudentFaceData.value.visable = true
|
|
break
|
|
case 'Upload':
|
|
data.value.tableNeed.StudentName = ''
|
|
data.value.tableNeed.StudentNo = ''
|
|
data.value.tableNeed.ClassId = []
|
|
data.value.tableNeed.Sex = ''
|
|
data.value.tableNeed.StudentStatus = ''
|
|
data.value.tableNeed.refresh = false
|
|
initApi(data.value)
|
|
|
|
break
|
|
}
|
|
// data.value.dialogData.dialogVisible = true
|
|
}
|
|
|
|
onMounted(() => {
|
|
GetGradeNames()
|
|
initApi(data.value)
|
|
|
|
console.log('Axios baseURL:', baseURL);
|
|
})
|
|
// 下载模板
|
|
const downLoad = () => {
|
|
axios({
|
|
method: 'post',
|
|
url: `/api/Student/GetImportStudentsTemplate`,
|
|
// data: data,
|
|
responseType: 'blob'
|
|
})
|
|
.then((res) => {
|
|
const blob = new Blob([res.data])
|
|
const fileName = `学生模板.xlsx`
|
|
if ('download' in document.createElement('a')) {
|
|
const elink = document.createElement('a')
|
|
elink.download = fileName
|
|
elink.style.display = 'none'
|
|
elink.href = URL.createObjectURL(blob)
|
|
document.body.appendChild(elink)
|
|
elink.click()
|
|
URL.revokeObjectURL(elink.href)
|
|
document.body.removeChild(elink)
|
|
}
|
|
})
|
|
}
|
|
//列表接口
|
|
async function initApi(val) {
|
|
console.log(val, 'vallllll')
|
|
try {
|
|
const res = await _api.StudentGetClassPageList(val.tableNeed.ClassId ? val.tableNeed.ClassId[1] : '', val.tableNeed.StudentNo, val.tableNeed.StudentName, val.tableNeed.Sex, val.tableNeed.StudentStatus, val.tableNeed.pageIndex, val.tableNeed.pageSize);
|
|
if (res.code == 200) {
|
|
res.data.datas.map((i) => {
|
|
i.sex = i.sex == 1 ? '男' : '女'
|
|
i.studentStatus = i.studentStatus == 1 ? '在读' : '毕业'
|
|
// i.photo = `${baseURL}` + i.photo
|
|
})
|
|
val.tableNeed.tableData = res.data.datas;
|
|
val.tableNeed.tableData.map((i, index) => {
|
|
i.ind = val.tableNeed.pageSize * (val.tableNeed.pageIndex - 1) + index + 1
|
|
})
|
|
val.tableNeed.total = res.data.total;
|
|
data.value.tableNeed.refresh = true
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
function transformData(data) {
|
|
return data.map(grade => ({
|
|
value: grade.id,
|
|
label: grade.gradeName,
|
|
children: grade.class.map(cls => ({
|
|
value: cls.id,
|
|
label: cls.className
|
|
}))
|
|
}));
|
|
}
|
|
//年级接口
|
|
async function GetGradeNames() {
|
|
try {
|
|
const res = await _api.GetGradeName();
|
|
if (res.code == 200) {
|
|
if (res.data) {
|
|
data.value.drawerDialog.classes = transformData(res.data)
|
|
// data.value.drawerDialog.GradeData = res.data
|
|
// data.value.tableNeed.GradeId = res.data[0].id
|
|
// GetClassNames(res.data[0].id, 0)
|
|
}
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//班级接口
|
|
async function GetClassNames(val, num) {
|
|
try {
|
|
const res = await _api.GetClassNames(val);
|
|
if (res.code == 200) {
|
|
if (res.data) {
|
|
data.value.drawerDialog.classes = res.data
|
|
}
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//重置密码
|
|
async function UpdateStudentPwdApi(val) {
|
|
try {
|
|
const res = await _api.UpdateStudentPwd(val);
|
|
if (res.code == 200) {
|
|
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error(error)
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//毕业
|
|
async function UpdateStudentStatusApi(val) {
|
|
try {
|
|
const res = await _api.UpdateStudentStatus(val);
|
|
if (res.code == 200) {
|
|
|
|
} else {
|
|
ElMessage.error(res.message)
|
|
}
|
|
} catch (error) {
|
|
ElMessage.error(error)
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//新增学生
|
|
async function AddStudents(val) {
|
|
console.log(val, 'valllllllllllAddStudents')
|
|
val.classId = val.classId ? val.classId[1] : null
|
|
// const path = val.photo ? val.photo.match(/(?:\/\/[^\/]+)?\/(.*)/)[1] : '';
|
|
// console.log(path, 'pathhhhh')
|
|
// val.photo = path
|
|
try {
|
|
const res = await _api.AddStudent(val);
|
|
if (res.code == 200) {
|
|
data.value.drawerDialog.show = false
|
|
resetForm(ruleFormRef.value)
|
|
data.value.tableNeed.refresh = false
|
|
initApi(data.value)
|
|
ElMessage({
|
|
message: res.data,
|
|
type: 'success',
|
|
})
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: 'success',
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
//编辑
|
|
async function ModifyTeachers(val) {
|
|
// const path = val.photo.match(/(?:\/\/[^\/]+)?\/(.*)/)[1];
|
|
// val.photo = path
|
|
val.classId = val.classId ? val.classId[1] : null
|
|
// console.log(val.photo, 'val.phoito')
|
|
try {
|
|
const res = await _api.ModifyStudent(val);
|
|
if (res.code == 200) {
|
|
data.value.drawerDialog.show1 = false
|
|
resetForm(ruleFormRef1.value)
|
|
data.value.tableNeed.refresh = false
|
|
initApi(data.value)
|
|
ElMessage({
|
|
message: res.data,
|
|
type: 'success',
|
|
})
|
|
} else {
|
|
ElMessage({
|
|
message: res.message,
|
|
type: 'error',
|
|
})
|
|
}
|
|
} catch (error) {
|
|
console.error('Error occurred while calling API:', error);
|
|
}
|
|
}
|
|
async function AddList() {
|
|
const options = {
|
|
method: 'POST',
|
|
// url: 'http://192.168.10.230:14102/api/BackStandard/Add',
|
|
url: '/api/Student/ImportStudents',
|
|
headers: {
|
|
Accept: '',
|
|
'content-type': 'multipart/form-data; boundary=---011000010111000001101001'
|
|
},
|
|
data: form
|
|
};
|
|
let k = data.value as any
|
|
axios.request(options).then(function (response) {
|
|
console.log(response.data, 'Student_0012')
|
|
if (response.data.code == 200) {
|
|
k.drawerDialog.show2 = false
|
|
k.fileList = {}
|
|
k.showIcon = false
|
|
form.delete("file")
|
|
data.value.tableNeed.refresh = false
|
|
ElMessage.success(response.data.data)
|
|
initApi(data.value)
|
|
} else {
|
|
ElMessage.error(response.data.message)
|
|
}
|
|
}).catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}
|
|
async function AddList1() {
|
|
const options = {
|
|
method: 'POST',
|
|
// url: 'http://192.168.10.230:14102/api/BackStandard/Add',
|
|
url: '/api/SportsTestResult/ImportStudentsTestData',
|
|
headers: {
|
|
Accept: '',
|
|
'content-type': 'multipart/form-data; boundary=---011000010111000001101001'
|
|
},
|
|
data: form1
|
|
};
|
|
let k = data.value as any
|
|
axios.request(options).then(function (response) {
|
|
if (response.data.code == 200) {
|
|
k.drawerDialog.show2 = false
|
|
k.fileList1 = {}
|
|
k.showIcon1 = false
|
|
form1.delete("file")
|
|
data.value.tableNeed.refresh = false
|
|
ElMessage.success(response.data.data)
|
|
initApi(data.value)
|
|
}
|
|
}).catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}
|
|
async function AddList2() {
|
|
const options = {
|
|
method: 'POST',
|
|
// url: 'http://192.168.10.230:14102/api/BackStandard/Add',
|
|
url: '/api/Student/UploadPhoto',
|
|
headers: {
|
|
Accept: '',
|
|
'content-type': 'multipart/form-data; boundary=---011000010111000001101001'
|
|
},
|
|
data: form2
|
|
};
|
|
let k = data.value as any
|
|
axios.request(options).then(function (response) {
|
|
if (response.data.code == 200) {
|
|
k.drawerDialog.show2 = false
|
|
k.fileList2 = {}
|
|
k.showIcon2 = false
|
|
form2.delete("file")
|
|
data.value.tableNeed.refresh = false
|
|
ElMessage.success(response.data.data)
|
|
initApi(data.value)
|
|
}
|
|
}).catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}
|
|
async function AddList3() {
|
|
const options = {
|
|
method: 'POST',
|
|
// url: 'http://192.168.10.230:14102/api/BackStandard/Add',
|
|
url: '/api/Student/BatchUploadPhoto',
|
|
headers: {
|
|
Accept: '',
|
|
'content-type': 'multipart/form-data; boundary=---011000010111000001101001'
|
|
},
|
|
data: form3
|
|
};
|
|
let k = data.value as any
|
|
axios.request(options).then(function (response) {
|
|
if (response.data.code == 200) {
|
|
k.drawerDialog.show2 = false
|
|
k.fileList3 = {}
|
|
k.showIcon3 = false
|
|
form3.delete("file")
|
|
data.value.tableNeed.refresh = false
|
|
ElMessage.success(response.data.data)
|
|
initApi(data.value)
|
|
}
|
|
}).catch(function (error) {
|
|
console.error(error);
|
|
});
|
|
}
|
|
async function AddPhoto(val) {
|
|
console.log(photoForm, 'photoForm')
|
|
const datas = {
|
|
gradeId: val.classId[0],
|
|
classId: val.classId[1],
|
|
studentNo: val.studentNo,
|
|
}
|
|
console.log(datas, 'datasssss')
|
|
const options = {
|
|
method: 'POST',
|
|
// url: 'http://192.168.10.230:14102/api/BackStandard/Add',
|
|
url: `/api/Student/UploadPhoto?gradeId=${datas.gradeId}&classId=${datas.classId}&studentNo=${datas.studentNo}`,
|
|
headers: {
|
|
Accept: '',
|
|
'content-type': 'multipart/form-data; boundary=---011000010111000001101001'
|
|
},
|
|
data: photoForm
|
|
};
|
|
let k = data.value as any
|
|
axios.request(options).then(function (response) {
|
|
if (response.data.code == 200) {
|
|
const newUrl = response.data.data + '?timestamp=' + new Date().getTime();
|
|
if (data.value.isAdd) {
|
|
console.log(response.data.data, 'response.data.data123')
|
|
ruleForm.value.photo = newUrl;
|
|
console.log(ruleForm.value.photo, 'ruleForm.value.photo')
|
|
} else {
|
|
console.log(response.data.data, 'response.data.data')
|
|
ruleForm1.value.photo = newUrl;
|
|
console.log(ruleForm1.value.photo, 'ruleForm1.value.photo')
|
|
}
|
|
// k.drawerDialog.show2 = false
|
|
// k.fileList3 = {}
|
|
// k.showIcon3 = false
|
|
photoForm.delete("file")
|
|
// data.value.tableNeed.refresh = false
|
|
// ElMessage.success(response.data.data)
|
|
// initApi(data.value)
|
|
} else {
|
|
ElMessage.error(response.data.message)
|
|
photoForm.delete("file")
|
|
}
|
|
}).catch(function (error) {
|
|
console.error(error, 'errororor');
|
|
});
|
|
}
|
|
function exportData(val) {
|
|
axios({
|
|
method: 'get',
|
|
url: `/api/Student/StudentExport?ClassId=${val.tableNeed.ClassId}&StudentNo=${val.tableNeed.StudentNo}&StudentName=${val.tableNeed.StudentName}&Sex=${val.tableNeed.Sex}&StudentStatus=${val.tableNeed.StudentStatus}`,
|
|
// data: data,
|
|
responseType: 'blob'
|
|
})
|
|
.then((res) => {
|
|
const blob = new Blob([res.data])
|
|
const fileName = `导出列表.xlsx`
|
|
if ('download' in document.createElement('a')) {
|
|
const elink = document.createElement('a')
|
|
elink.download = fileName
|
|
elink.style.display = 'none'
|
|
elink.href = URL.createObjectURL(blob)
|
|
document.body.appendChild(elink)
|
|
elink.click()
|
|
URL.revokeObjectURL(elink.href)
|
|
document.body.removeChild(elink)
|
|
}
|
|
})
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
.confirm-tip {
|
|
color: red;
|
|
}
|
|
</style>
|
|
<style lang="less" scoped>
|
|
.head {
|
|
width: 100%;
|
|
height: 72px;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.left {
|
|
width: auto;
|
|
height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.desctipt {
|
|
width: auto;
|
|
font-size: 16px;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
color: #3F404A;
|
|
margin-left: 20px;
|
|
text-align: center;
|
|
margin-right: 10px
|
|
}
|
|
|
|
|
|
|
|
.m-2 {
|
|
width: 100px;
|
|
}
|
|
}
|
|
|
|
.left:nth-of-type(1),
|
|
.left:nth-of-type(2) {
|
|
.desctipt {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.rightBtn {
|
|
flex:1;
|
|
width: 100%;
|
|
// height: 100%;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: right;
|
|
|
|
|
|
.Add,
|
|
|
|
.Import,
|
|
.Audit,
|
|
.Export {
|
|
margin-right: 20px;
|
|
width: 80px;
|
|
height: 35px;
|
|
background: #4188FE;
|
|
border-radius: 8px;
|
|
text-align: center;
|
|
// line-height: 35px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
cursor: pointer;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
:deep(.el-upload) {
|
|
p {
|
|
margin-top: 22px;
|
|
}
|
|
|
|
}
|
|
}
|
|
|
|
.Upload {
|
|
width: 95px;
|
|
height: 35px;
|
|
background: #FAFAFA;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
text-align: center;
|
|
line-height: 35px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
}
|
|
|
|
.Search {
|
|
width: 95px;
|
|
height: 35px;
|
|
background: #4188FE;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
font-size: 14px;
|
|
color: #fff;
|
|
text-align: center;
|
|
line-height: 35px;
|
|
cursor: pointer;
|
|
user-select: none;
|
|
margin-right: 20px;
|
|
}
|
|
|
|
// .Add::before {
|
|
// content: '';
|
|
// background: url('@/assets/images/allImg/add.png') no-repeat;
|
|
// background-size: cover;
|
|
// width: 14px;
|
|
// height: 14px;
|
|
// font-size: 12px;
|
|
// margin-right: 5px;
|
|
// }
|
|
|
|
// .Search::before {
|
|
// content: '';
|
|
// background: url('@/assets/images/allImg/search.png') no-repeat;
|
|
// background-size: cover;
|
|
// width: 14px;
|
|
// height: 14px;
|
|
// font-size: 12px;
|
|
// margin-right: 5px;
|
|
// }
|
|
}
|
|
|
|
|
|
:deep(.pageSize) {
|
|
margin-left: 20px;
|
|
}
|
|
|
|
.operate {
|
|
height: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.edit {
|
|
width: 100px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #1890FF;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.delete {
|
|
// width: 50px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #FE4C04;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.view {
|
|
width: 100px;
|
|
height: 20px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #4188FE;
|
|
text-align: center;
|
|
line-height: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.addTeacherDrawer {
|
|
.title {
|
|
font-size: 16px;
|
|
font-family: PingFangSC;
|
|
font-weight: 500;
|
|
color: rgba(0, 0, 0, 0.85);
|
|
}
|
|
|
|
.el-drawer {
|
|
width: 700px;
|
|
|
|
.el-form {
|
|
// width: 500px;
|
|
// height: 35px;
|
|
display: flex;
|
|
|
|
flex-wrap: wrap;
|
|
|
|
.el-form-item {
|
|
width: 300px;
|
|
height: 100px;
|
|
margin-bottom: 20px;
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
|
|
// .el-select {
|
|
// width: 300px;
|
|
// }
|
|
}
|
|
|
|
}
|
|
|
|
.uploadFileName {
|
|
width: 600px;
|
|
height: 80px;
|
|
background: #F8F9FA;
|
|
border-radius: 8px;
|
|
border: 1px solid #EDEEF3;
|
|
|
|
|
|
.oneData {
|
|
width: calc(100% - 6px);
|
|
margin-left: 3px;
|
|
margin-top: 3px;
|
|
height: 48px;
|
|
background: #FFFFFF;
|
|
border-radius: 3px;
|
|
border: 1px solid #F2F5F8;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
p {
|
|
width: calc(100% - 93px);
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #2D2E39;
|
|
margin-left: 14px;
|
|
}
|
|
|
|
.delete1 {
|
|
width: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
}
|
|
|
|
.footer {
|
|
width: 100%;
|
|
height: 40px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.cancle {
|
|
width: 120px;
|
|
height: 40px;
|
|
background: #FAFAFA;
|
|
border-radius: 8px;
|
|
border: 1px solid rgba(0, 0, 0, 0.15);
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: rgba(0, 0, 0, 0.65);
|
|
text-align: center;
|
|
line-height: 40px;
|
|
margin-right: 20px;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.confirm {
|
|
width: 120px;
|
|
height: 40px;
|
|
background: #0486FE;
|
|
border-radius: 8px;
|
|
font-size: 14px;
|
|
font-family: PingFangSC;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
line-height: 40px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
}
|
|
|
|
.pagination {
|
|
margin-left: 28px;
|
|
margin-top: 15px;
|
|
}
|
|
</style> |