
<script lang="ts">
export default {
  name: 'student'  // 学生管理
};
</script>

<script setup lang="ts">
import { onMounted, reactive, ref, nextTick } from "vue";
import { ElMessage, ElMessageBox, FormRules } from "element-plus";
import { queryRegion } from "@/api/regionmodule/region";
import { querySchoolList } from "@/api/regionmodule/school";
import Page from '@/components/Pagination/page.vue'
import { querySchoolStudentPage,delSchoolStudent,addSchoolStudent,updateSchoolStudent,adjustClass,muchTransferOut,exportStudent
} from "@/api/regionmodule/schoolStudent";
import { downloadSchoolTemplate,downloadStudent } from "@/api/regionmodule/school";
import { getBirthdayByIdNumber,downloadFile } from '@/utils/index'
import { getToken } from '@/utils/auth'
import { querySchoolClassList } from "@/api/regionmodule/schoolClass";
import { querySchoolGradeList } from "@/api/regionmodule/schoolGrade"
import StudentVisdata from '@/views/regionmodule/schoolClass/studentVisdata.vue'
import StudentInfolog from '@/views/regionmodule/schoolClass/studentInfolog.vue'
import { publicTree } from '@/utils/validate';
import { useUserStore } from '@/store/modules/user';
import * as XLSX from 'xlsx';
const userStore = useUserStore();
const url = userStore.webApiBaseUrl;
const props1 = {
  checkStrictly: true,
  value:'id',
  label:'name'
}
//树形控件类型定义
interface Tree {
  [x: string]: any;
  label: string;
  children?: Tree[];
}
//搜索内容
const querystr = ref("");
// 左侧树
const cascaderdata: any = ref([]);
const cascaderList: any = ref([]);
const defaultProps = { label: "name" };
const handleNodeClick = (data: Tree) => {
  querystr.value = ""
  classId.value = ""
  gradeId.value = ""
  currenttreelist.value = data
  checkedtreeid.value = data.id;
  getData();
};
const infoForm = ref();
// 身份证号校验规则
const IdNumberRule = /(^\d{8}(0\d|10|11|12)([0-2]\d|30|31)\d{3}$)|(^\d{6}(18|19|20)\d{2}(0[1-9]|10|11|12)([0-2]\d|30|31)\d{3}(\d|X|x)$)/
const checkIdNumber = (rule: any, value: any, callback: any) => {
  if (value === '') {
    info.value.birth_date = ''
    info.value.age = ''
    info.value.gender = '男'
    callback('请输入身份证号')
  } else {
    if (IdNumberRule.test(value)) {
      // 验证通过则根据身份证号得到出生日期、年龄和性别
      let params = getBirthdayByIdNumber(value)
      info.value.birth_date = params.birth_date
      info.value.age = params.age
      info.value.gender = params.gender
      callback()
    } else {
      callback(new Error('请输入正确的身份证号'))
    }
  }
}
//填写规则
const moderules = reactive<FormRules>({
  code: [{ required: true, message: "请输入学生代码", trigger: "blur" }],
  name: [{ required: true, message: "请输入学生姓名", trigger: "blur" }],
  id_code: [{ required: true, validator: checkIdNumber, trigger: 'blur' }],
});
const treeRef = ref();
const currenttreelist:any = ref({})
// 表格数组类型定义
const tableData = ref([]);
const checkedtreeid = ref("");
const loading = ref(false);
const treeloading = ref(false);
//新建医生数组

const title = ref("");
const dialogVisible = ref(false);
const regionId =ref(""); //行政区域名称
const regionType =ref(""); 


const multipleIdsSelection = ref([]);
const shiftClassInfo: any = ref({})
const isShiftClass = ref(false)
const isMuchShiftClass = ref(false)
const isTransferOut = ref(false)
const gradeData:any = ref([])
const classData:any = ref([])
const gradeDatas:any = ref([])
const classDatas:any = ref([])
const classId:any = ref('')
const gradeId:any = ref('')
//转入学生列表
const multipleSelection = ref([]);


const upload:any = ref(null)
const errorData:any = ref([])
const dialogTableVisible = ref(false)
function handleSelectionChange(val: any) {
  multipleSelection.value = val;
}
//获取行政区域
function getTree() {
  const params = {
    name: "",
    status:'01'
  };

  queryRegion(params).then((res: any) => {
    cascaderList.value = JSON.parse(JSON.stringify(res.data))
    cascaderdata.value = publicTree(res.data,"");
  })
  .catch((error:any)=>{
    treeloading.value = false
  })
}
const queryInfo :any = ref({
  current:1,
  size:10,
  total:0
})
const treeData:any = ref([])
function getData(){
  querystr.value = querystr.value.replace(/\s+/g, "");
  let params = {
    name: querystr.value,
    schoolId: checkedtreeid.value,
    classId:classId.value,
    gradeId:gradeId.value,
    current: queryInfo.value.current,
    size:queryInfo.value.size
  };
  loadingtext.value = ""
  loading.value = true
  querySchoolStudentPage(params).then((res) => {
    tableData.value = res.data.records;
    queryInfo.value.total = res.data.total
    loading.value = false
  });
  let paramss = {
    schoolId: checkedtreeid.value,
  };
  querySchoolGradeList(paramss).then((res:any) => {
    gradeDatas.value = res.data;
  });

}
function handleSelectionIdsChange(val: any) {
  multipleIdsSelection.value = val;
}
//获取列表
function getTreeData() {
  if(regionId.value == ''){
    treeData.value = []
    return
  }
  let params = {
    name: "",
    regionId: regionId.value,
    type:regionType.value
  };
  treeloading.value = true
  querySchoolList(params).then((res) => {
    treeData.value = res.data;
    treeloading.value = false
    currenttreelist.value = {}
    tableData.value = []
    queryInfo.value.total = 0
    checkedtreeid.value = ""
    querystr.value = ""
    classId.value = ""
    gradeId.value = ""
    if (checkedtreeid.value == "" && cascaderdata.value.length != 0) {
      checkedtreeid.value = res.data[0].id;
      currenttreelist.value = res.data[0]
    }
    nextTick(() => {
      treeRef.value?.setCurrentKey(checkedtreeid.value);
    });
    getData();
  }).catch(()=>{
    treeloading.value = false
  });
}
// 选中区域获取学生列表
function handleChange(value:any){
  isCascader.value = false
  setTimeout(()=>{
    isCascader.value = true
  },20)
  if(value.length != 0){
    regionId.value = value[value.length -1]
    for(let i=0;i<cascaderList.value.length;i++){
      if(regionId.value == cascaderList.value[i].id){
        regionType.value = cascaderList.value[i].type
        break
      }
    } 
  }
  getTreeData()
}
function handleClick(data:any){
  if(data.children == null){
    isCascader.value = false
    setTimeout(()=>{
      isCascader.value = true
    },20)
  }
  regionId.value = data.id
  regionType.value = data.type
  getTreeData()
}
const isSwitch = ref(false) // 提交开关

//关闭弹窗
function handleClose() {
  if (infoForm.value != null) infoForm.value.resetFields();
  dialogVisible.value = false;
}


function dateFormat(row: any) {
  const daterc = row;
  if (daterc != null) {
    var date = new Date(daterc);
    var year = date.getFullYear();
    var month = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1;
    date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1;
    var day = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
    // 拼接
    return year + "-" + month + "-" + day + " ";
  }
}
onMounted(() => {
  getTree();
});
const vMove = {
  mounted(el: any) {
    el.onmousedown = function (e: any) {
      var init = e.clientX;
      var parent: any = document.getElementById("silderLeft");
      const initWidth: any = parent.offsetWidth;
      document.onmousemove = function (e) {
        var end = e.clientX;
        var newWidth = end - init + initWidth;
        parent.style.width = newWidth + "px";
      };
      document.onmouseup = function () {
        document.onmousemove = document.onmouseup = null;
      };
    };
  }
}
const info:any = ref({})
const htmlStatus= ref('1')
function viewVisdata(item:any){ // 查看学生视力档案
  info.value = item
  htmlStatus.value = '2'
}
function logClick(item:any){ // 查看学生日志
  info.value = item
  htmlStatus.value = '3'
}
const isCascader=ref(true)
//修改学生
function editHandle(row: any) {
  isSwitch.value = false
  title.value = "修改学生";
  info.value = JSON.parse(JSON.stringify(row));
  dialogVisible.value = true;
}
function shiftClassClick(item:any){
  title.value = '学生调班'
  isSwitch.value = false
 
  info.value = JSON.parse(JSON.stringify(item));
  shiftClassInfo.value = {
    grade_id: info.value.grade_id,
    grade_code: info.value.grade_code,
    grade_name: info.value.grade_name,
    class_id: info.value.class_id,
    class_code: info.value.class_code,
    class_name: info.value.class_name,
  }
  getGrade(info.value.school_id)
  getClass(info.value.grade_id)
  isShiftClass.value = true
}
//删除学生
function delHandle(row: any) {
  ElMessageBox.confirm("确定删除此学生吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let params = {
      ids: row.id,
    };
    delSchoolStudent(params).then(() => {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
//新建班级-保存/修改
function confirmClick(formEl: any) {
  formEl.validate((valid: any) => {
    if (valid) {
      if(isSwitch.value == true){
        return
      }
      isSwitch.value = true
      if (info.value.id) {
        const data:any = {
          id:info.value.id,
          schoolId:info.value.school_id,
          schoolName:info.value.school_name,
          gradeId:info.value.grade_id,
          gradeCode:info.value.grade_code,
          gradeName:info.value.grade_name,
          classId:info.value.class_id,
          classCode:info.value.class_code,
          className:info.value.class_name,
          code: info.value.code, // 班级代码
          name: info.value.name, // 班级名称
          photo:info.value.photo,
          idCode:info.value.id_code,
          nation:info.value.nation,
          studyCode:info.value.study_code,
          gender:info.value.gender,
          birthDate:info.value.birth_date,
          age:info.value.age,
          mobile:info.value.mobile
        };
        updateSchoolStudent(data).then((res:any) => {
          if(res.code == "0"){
            dialogVisible.value = false;
            ElMessage({
              message: "修改成功",
              type: "success",
            });
            getData();
          }else{
            isSwitch.value = false
          }
        }).catch(()=>{
          isSwitch.value = false
        })
      } else {
        const data:any = {
          schoolId:info.value.school_id,
          schoolName:info.value.school_name,
          gradeId:info.value.grade_id,
          gradeCode:info.value.grade_code,
          gradeName:info.value.grade_name,
          classId:info.value.class_id,
          classCode:info.value.class_code,
          className:info.value.class_name,
          code: info.value.code, // 班级代码
          name: info.value.name, // 班级名称
          photo:info.value.photo,
          idCode:info.value.id_code,
          nation:info.value.nation,
          studyCode:info.value.study_code,
          gender:info.value.gender,
          birthDate:info.value.birth_date,
          age:info.value.age
        };
        addSchoolStudent(data).then((res:any) => {
          if(res.code == "0"){
            dialogVisible.value = false;
            getData();
            ElMessage({
              message: "新增成功",
              type: "success",
            });
          }else{
            isSwitch.value = false
          }
          
        }).catch(()=>{
          isSwitch.value = false
        })
      }
     
    }
  })
}
function delPhoto(){
  info.value.photo = ""
}
function uploadChange(file:any){
  var reader = new FileReader();
  reader.readAsDataURL(file.raw);
  reader.onload = () => {
    info.value.photo =reader.result
  };
  reader.onerror = function(error) {
    console.log("Error: ", error);
  };
}
function confirmShiftClassMuch(){ //多人调班提交
  if(shiftClassInfo.value.class_id == ""){
    ElMessage({
      message: "请选择调入班级！",
      type: "warning",
    })
    return
  }
  let ids = [] as any[];
    multipleIdsSelection.value.forEach((item: any) => {
      ids.push(item.id)
    })
  const data:any = {
    ids:ids.join(","),
    gradeId:shiftClassInfo.value.grade_id,
    gradeCode:shiftClassInfo.value.grade_code,
    gradeName:shiftClassInfo.value.grade_name,
    classId:shiftClassInfo.value.class_id,
    classCode:shiftClassInfo.value.class_code,
    className:shiftClassInfo.value.class_name,
  };
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  adjustClass(data).then((item) => {
    isMuchShiftClass.value = false;
    ElMessage({
      message: "调班成功",
      type: "success",
    });
    getData();
    isSwitch.value = false
  }).catch(()=>{
    isSwitch.value = false
  })
}

function confirmShiftClass(){ //调班提交
  if(shiftClassInfo.value.class_id == ""){
    ElMessage({
      message: "请选择调入班级！",
      type: "warning",
    })
    return
  }
  const data:any = {
    id:info.value.id,
    gradeId:shiftClassInfo.value.grade_id,
    gradeCode:shiftClassInfo.value.grade_code,
    gradeName:shiftClassInfo.value.grade_name,
    classId:shiftClassInfo.value.class_id,
    classCode:shiftClassInfo.value.class_code,
    className:shiftClassInfo.value.class_name,
  };
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  updateSchoolStudent(data).then((item) => {
    isShiftClass.value = false;
    ElMessage({
      message: "调班成功",
      type: "success",
    });
    getData();
    isSwitch.value = false
  }).catch(()=>{
    isSwitch.value = false
  })
}
function classClose(){
  isShiftClass.value = false
  isTransferOut.value = false
  isMuchShiftClass.value = false
}
function gradeChange(e:any){
  for(let i=0;i<gradeData.value.length;i++){
    if(e== gradeData.value[i].id){
      shiftClassInfo.value.grade_name = gradeData.value[i].name
      shiftClassInfo.value.grade_code = gradeData.value[i].code
    }
  }
  shiftClassInfo.value.class_id = ""
  shiftClassInfo.value.class_code = ""
  shiftClassInfo.value.class_name = ""
  getClass(e)
}
function classChange(e:any){
  for(let i=0;i<classData.value.length;i++){
    if(e== classData.value[i].id){
      shiftClassInfo.value.class_name = classData.value[i].name
      shiftClassInfo.value.class_code = classData.value[i].code
    }
  }
}
function getClass(gradeId:any){ // 获取班级
  let params = {
    gradeId: gradeId,
  };
  querySchoolClassList(params).then((res) => {
    classData.value = res.data;
  });
}
function getGrade(schoolId:any){ // 获取年级
  let params = {
    schoolId: schoolId,
  };
  querySchoolGradeList(params).then((res:any) => {
    gradeData.value = res.data;
  });
}
function transferOutClick(item:any){ // 转出弹框
  title.value="学生转出"
  isSwitch.value = false
  info.value = item
  isTransferOut.value = true
}
function confirmTransferOut(){ // 转出提交
  const data:any = {
    id:info.value.id,
    status:"02"
  };
  if(isSwitch.value == true){
    return
  }
  isSwitch.value = true
  updateSchoolStudent(data).then((item) => {
    isTransferOut.value = false;
    ElMessage({
      message: "转出成功！",
      type: "success",
    });
    getData();
    isSwitch.value = false
  }).catch(()=>{
    isSwitch.value = false
  })
}
function shiftClassMuch(){ // 人多调班
  const id = multipleIdsSelection.value[0].grade_id
  for(let i  = 0;i<multipleIdsSelection.value.length;i++){
    if(multipleIdsSelection.value[i].grade_id !== id){
      ElMessage({
        message: "请选择相同年级的学生",
        type: "warning",
      });
      return
    }
  }
  title.value = '学生调班'
  isSwitch.value = false
  shiftClassInfo.value = {
    grade_id: multipleIdsSelection.value[0].grade_id,
    grade_code: multipleIdsSelection.value[0].grade_code,
    grade_name: multipleIdsSelection.value[0].grade_name,
    class_id: multipleIdsSelection.value[0].class_id,
    class_code: multipleIdsSelection.value[0].class_code,
    class_name: multipleIdsSelection.value[0].class_name,
  }
  getGrade(currenttreelist.value.id)
  getClass(multipleIdsSelection.value[0].grade_id)
  isMuchShiftClass.value = true
}
function transferOutMuch(){ // 人多转出
  let id = [] as any[];
  let name = [] as any[];
    multipleIdsSelection.value.forEach((item: any) => {
      id.push(item.id)
      name.push(item.name)
    })
  ElMessageBox.confirm("确定确定将"+ name.join(',') +"吗?", "学生转出", {
      confirmButtonText: "确定",
      cancelButtonText: "取消",
      type: "warning",
    }).then(() => {
     
      let params = {
        ids: id.join(','),
      };
      muchTransferOut(params).then(() => {
        getData();
        ElMessage({
          message: "转出成功！",
          type: "success",
        });
      });
    });
}
// 多选删除学校
function delClick() {
  ElMessageBox.confirm("确定删除已选择的学生吗?", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    let id = [] as any[];
    multipleIdsSelection.value.forEach((item: any) => {
      id.push(item.id)
    })
    let params = {
      ids: id.join(','),
    };
    delSchoolStudent(params).then(() => {
      getData();
      ElMessage({
        message: "删除成功",
        type: "success",
      });
    });
  });
}
function returnStudent(e:any){
  htmlStatus.value = '1'
}
function downloadSchool(){
  downloadSchoolTemplate({}).then((response: any) => {
    downloadFile(response, '学校基本信息导入模板', 'xlsx')
  });
}
function downloadSchoolStudent(){
  downloadStudent({}).then((response: any) => {
    downloadFile(response, '学生基本信息导入模板', 'xlsx')
  });
}
function exportStudentMode(type){
  let params = {
    studentName:querystr.value,
    schoolId: currenttreelist.value.id,
    schoolName:currenttreelist.value.name,
    gradeId:gradeId.value,
    classId:classId.value,
    type:type
  };
  loading.value = true
  loadingtext.value = "正在导出学生信息，请耐心等待！"
  exportStudent(params).then((response: any) => {
    if(type == 'id'){
      downloadFile(response, currenttreelist.value.name +'-学生基本信息(带学生id)', 'xlsx')
    }else{
      downloadFile(response, currenttreelist.value.name +'-学生基本信息', 'xlsx')
    }
    loading.value = false
    loadingtext.value = ""
  }).catch(()=>{
    loadingtext.value = ""
    loading.value = false
  });
}
function handlesSuccess(file: any) {
  loading.value = false
  if(file.code == "0"){
    ElMessage({
      message: "导入成功！",
      type: "success",
    });
    getData()
  }else{
    errorData.value = []
    let msg =  file.msg.split("！！<br>")
    msg.forEach(element => {
      errorData.value.push({name:element})
    });
    dialogTableVisible.value = true
    getData()
    // ElMessage({
    //   message: file.msg,
    //   type: "error",
    // });
  }

  upload.value.clearFiles()
}
function handleError(file: any){
  loading.value = false
  getData()
  ElMessage({
    message: "导入失败！",
    type: "error",
  });
  upload.value.clearFiles()
}
const loadingtext = ref("")

function handlePreview(){
  uploadVisible.value = false
  loadingtext.value = "正在导入数据，请耐心等待！"
  loading.value = true
}
function getQueryClass(id:any){
  if(id !=null && id!= ''){
    let params = {
      gradeId: id,
    };
    querySchoolClassList(params).then((res) => {
      classDatas.value = res.data;
    });
  }else{
    gradeId.value = ''
    classId.value = ''
    classDatas.value = []
  }

  getData()
}
const uploadVisible =ref(false)
const radioStudent = ref("1")
function uploadClick(){
  // radioStudent.value = "1"
  uploadVisible.value = true
}

function exportToExcel() {
  // 获取表格的 DOM 元素
  const table = document.querySelector('.table_error');

  // 使用 html-to-xlsx 工具将表格转换为工作表
  const ws = XLSX.utils.table_to_sheet(table);
  // 设置列的宽度
  const colWidths = [
    { wch: 5 }, 
    { wch: 70 },
  ];
  ws['!cols'] = colWidths;
  // 创建一个工作簿
  const wb = XLSX.utils.book_new();
  XLSX.utils.book_append_sheet(wb, ws, 'Sheet1');

  // 导出 Excel 文件
  XLSX.writeFile(wb, '导入错误信息.xlsx');
};
</script>

<template>
  <div class="faulttemplate-box">
    <aside id="silderLeft" v-show="htmlStatus == '1'">
      <div class="lefttitle">
        <div class="line"></div>
        <div class="treetitle">学校列表</div>
      </div>
      <div style="width:100% ;height:32px;display: flex;">
        <el-cascader v-if="isCascader" style="width: 90%; margin: auto;" placeholder="请输入行政区域" v-model="regionId" @change="handleChange" :options="cascaderdata" :props="props1" :show-all-levels="false" filterable>
          <template #default="{ node, data }">
            <div @click.stop="handleClick(data)">{{ data.name }}</div>
          </template>
        </el-cascader>
      </div>
      <el-tree v-loading="treeloading"
        ref="treeRef" node-key="id" :data="treeData" :highlight-current="true" :props="defaultProps"
        :expand-on-click-node="false"
        @node-click="handleNodeClick" style="height: calc(100vh - 245px); overflow: auto;margin-top: 10px;">
      </el-tree>
      
      <div class="moveBtn" v-move>
        <div class="moveBtn-line" v-move></div>
      </div>
    </aside>
    <main class="silderRight" v-show="htmlStatus == '1'">
      <el-row>
        <el-col :span="24" class="top-nav">
          <div>
            <el-input v-model="querystr" placeholder="请输入学生姓名/学籍号/身份证号" clearable style="width: 230px;margin-bottom: 10px" @keyup.enter="getData" />
            <el-select v-model="gradeId" @change="getQueryClass"  class="ml-3" placeholder="请选择年级"  clearable size="large" 
              style="width: 130px;margin-bottom: 10px" :disabled="currenttreelist.id ==''|| currenttreelist.id==null">
              <el-option v-for="item in gradeDatas" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <el-select v-model="classId"  class="ml-3" placeholder="请选择班级" clearable size="large" 
              style="width: 130px;margin-bottom: 10px" :disabled="gradeId==''|| gradeId==null" @change="getData">
              <el-option v-for="item in classDatas" :key="item.id" :label="item.name" :value="item.id"/>
            </el-select>
            <el-button type="primary" style="margin-left: 10px; margin-bottom: 10px" @click="getData" >搜索</el-button>
            <el-button style="margin-bottom: 10px" :disabled="multipleIdsSelection.length ==0" type="primary" @click="shiftClassMuch"><img style="margin-right:5px;" src="@/assets/student/u991.png" alt=""> 调班</el-button>
            <el-button style="margin-bottom: 10px" :disabled="multipleIdsSelection.length ==0" type="primary" @click="transferOutMuch"><img style="margin-right:5px;" src="@/assets/student/u986.png" alt=""> 转出</el-button>
            <el-button style="margin-bottom: 10px" :disabled="multipleIdsSelection.length ==0" type="primary" @click="delClick"><img style="margin-right:5px;" src="@/assets/student/u762.png" alt="" >删除</el-button>
            <el-button style="margin-bottom: 10px" type="primary" @click="downloadSchoolStudent"><img src="@/assets/MenuIcon/u458.png" alt=""  style="margin-right: 5px;">下载学生模版</el-button>
            <el-button style="margin-bottom: 10px" :disabled="currenttreelist.id == null"  type="primary" @click="exportStudentMode('')"><img src="@/assets/MenuIcon/u458.png" alt=""  style="margin-right: 5px;">导出学生</el-button>
            <el-button style="margin-bottom: 10px" :disabled="currenttreelist.id == null"  type="primary" @click="exportStudentMode('id')">导出学生带id</el-button>
            <el-button style="margin-bottom: 10px" :disabled="currenttreelist.id == null"  type="primary" @click="uploadClick"><img src="@/assets/MenuIcon/u455.png" alt=""  style="margin-right: 5px;">导入学生</el-button>
          </div>
        </el-col>
      </el-row>
      <el-table v-loading="loading" :data="tableData"
      :element-loading-text="loadingtext"
       style="width: 100%; height:calc(100vh - 300px)" row-key="id" border
            @selection-change="handleSelectionIdsChange" default-expand-all :header-cell-style="{background:'rgb(250 250 250)',height:'50px'}" >
            <el-table-column type="selection" width="50" align="center" />
            <!-- <el-table-column prop="code" label="学生代码" width="100"></el-table-column> -->
            <el-table-column prop="study_code" label="学籍号" width="200"  align="center"></el-table-column>
            <el-table-column prop="id_code" label="身份证" width="180" align="center"></el-table-column>
            <el-table-column prop="name" label="学生姓名" min-width="100"></el-table-column>
            <el-table-column prop="grade_name" label="所属年级" width="180" align="center"></el-table-column>
            <el-table-column prop="class_name" label="所属班级" width="90" align="center"></el-table-column>
            <el-table-column prop="gender" label="性别" width="60" align="center">
              <template #default="scope">
              <span v-if="scope.row.gender == '1'">男</span>
              <span v-if="scope.row.gender == '2'">女</span>
              </template>
            </el-table-column>
            <el-table-column prop="age" label="年龄" align="center" width="60"></el-table-column>
            <el-table-column prop="birth_date" label="出生日期" width="120" align="center"></el-table-column>
            <!-- <el-table-column prop="nation" label="民族" width="60"></el-table-column> -->

            <el-table-column prop="status" label="状态" width="80" align="center">
              <template #default="scope">
              <span v-if="scope.row.status == '01'">正常</span>
              <span v-if="scope.row.status == '02'" style="color:#FF9900 ;">已转出</span>
              </template>
            </el-table-column>
            <!-- <el-table-column prop="photo" label="照片" width="80" align="center">
              <template #default="scope">
                <img v-if="(scope.row.photo=='' || scope.row.photo==null) && scope.row.gender == '1'" src="@/assets/student/man.png" alt="" style="width:40px;height:40px;">
                <img v-if="(scope.row.photo=='' || scope.row.photo==null) && scope.row.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:40px;height:40px;">
                <img v-if="scope.row.photo!='' && scope.row.photo!=null" :src="scope.row.photo" alt="" style="width:40px;height:40px;">
              </template>
            </el-table-column> -->
            <el-table-column fixed="right" label="操作" width="200">
              <template #default="scope">
                <span style="display: flex;display: -webkit-flex;justify-content: space-around; -webkit-justify-content: space-around; ">
                  <img src="@/assets/MenuIcon/lbcz_xg.png" title="修改" style="cursor: pointer;"
                  @click="editHandle(scope.row)" >
                  <img src="@/assets/tableicon/u885.png" title="调班" style="cursor: pointer;"
                  @click="shiftClassClick(scope.row)" >
                   <img src="@/assets/tableicon/u878.png" title="转出" style="cursor: pointer;"
                  @click="transferOutClick(scope.row)" >
                  <img src="@/assets/tableicon/u880.png" title="查看视力档案" style="cursor: pointer;"
                  @click="viewVisdata(scope.row)" >
                  <img src="@/assets/tableicon/u883.png" title="信息变动日志" style="cursor: pointer;"
                  @click="logClick(scope.row)" >
                <img  src="@/assets/tableicon/u186.png" title="删除" style="cursor: pointer;"
                  @click="delHandle(scope.row)" >
                </span>
              </template>
            </el-table-column>
          </el-table>
      <Page class="mt-[20px]" :total="queryInfo.total" v-model:size="queryInfo.size" v-model:current="queryInfo.current"
          @pagination="getData" />
    </main>
    
    <el-dialog v-model="dialogVisible" :before-close="handleClose" :title="title" draggable width="620px">
      <el-form ref="infoForm" :model="info" label-width="100px" :rules="moderules">
        <div style="width: 100%;display: flex;">
          <div style="width:460px">
            <el-form-item label="所属学校">
              <el-input v-model="info.school_name" style="width: 100%;height: 40px;"  :disabled="true"></el-input>
            </el-form-item>
            <el-form-item label="所属年级">
              <el-input v-model="info.grade_name" style="width: 100%; height: 40px;"  :disabled="true"></el-input>
            </el-form-item>
          </div>
          <div style="margin-left:20px">
            <el-upload
                class="avatar-uploader"
                accept=".png, .jpg, .jpeg"
                action=""
                :show-file-list="false"
                :auto-upload="false"
                @change="uploadChange" 
              >
              <div style="width: 100px;height: 100px;position: relative;" v-if="info.photo || info.photo != ''">
                <img :src="info.photo" class="avatar" />
                <div style="position: absolute;top: 0px;left: 0px;z-index: 1;width: 100px;height: 100px;background: rgba(0,0,0,0.3);color: cornflowerblue;">
                  <el-icon style="position: absolute;top: 40px;left: 40px;z-index: 1;font-size: 20px;"
                  @click.stop="delPhoto"><Delete /></el-icon>
                </div>
              </div>
              <div  v-else style="text-align:center ;">
                <el-icon class="newavatar-uploader-icon"><Plus /></el-icon>
                <div class="newavatar-uploader-text">上传照片</div>
              </div>
              </el-upload>
          </div>
        </div>
        <el-form-item label="所属班级">
          <el-input v-model="info.class_name" style="width: 100%"  :disabled="true"></el-input>
        </el-form-item>
        <!-- <el-form-item label="学生代码" prop="code">
          <el-input v-model="info.code" style="width: 100%"  placeholder="请输入学生代码"></el-input>
        </el-form-item> -->
        <el-form-item label="学生姓名" prop="name">
          <el-input v-model="info.name" style="width: 100%" placeholder="请输入学生姓名"></el-input>
        </el-form-item>
        <el-form-item label="学籍号" prop="study_code">
          <el-input v-model="info.study_code" style="width: 100%" placeholder="请输入学籍号"></el-input>
        </el-form-item>
        <el-form-item label="身份证" prop="id_code">
          <el-input v-model="info.id_code" style="width: 100%" placeholder="请输入身份证"></el-input>
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-radio-group v-model="info.gender">
            <el-radio label="1" :disabled="true">男</el-radio>
            <el-radio label="2" :disabled="true">女</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="出生日期">
          <el-date-picker v-model="info.birth_date" type="date" placeholder="" style="width: 100%;" :disabled="true" />
        </el-form-item>
        <el-form-item label="民族" prop="nation">
          <el-input v-model="info.nation" style="width: 100%" placeholder="请输入民族"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="nation">
          <el-input v-model="info.mobile" style="width: 100%" placeholder="请输入电话号"></el-input>
        </el-form-item>
       

        
      </el-form>
      <span class="dialog-footer">
        <el-button style="padding: 10px 15px" @click="handleClose">取 消</el-button>
        <el-button type="primary" style="padding: 10px 15px" @click="confirmClick(infoForm)">确定</el-button>
      </span>
    </el-dialog>
    <el-dialog v-model="isShiftClass" :before-close="classClose" :title="title" draggable width="500px">
      <div style="padding: 10px 20px;">
        <div style="display:flex ;align-items: center;margin-bottom: 10px;">
          <div class="blueline"></div>
          <div class="texttitle">学生信息</div>
        </div>
        <div style="display: flex;align-items: center; ">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '1'" src="@/assets/student/man.png" alt="" style="width:100px;height:100px;">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:100px;height:100px;">
          <img v-if="info.photo!='' && info.photo!=null" :src="info.photo" alt="" style="width:100px;height:100px;">
          <div style="margin-left: 20px;">
            <div class="basicname" style="padding-bottom: 0px;">
              <span style="padding-right:20px">{{ info.name }}</span>
              <span v-if="info.gender == '1'">男</span>
              <span v-if="info.gender == '2'">女</span>
            </div>
            <div class="basicinfo" style="padding-top: 3px;">
              <span>{{info.nation}}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.birth_date }}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.age }}岁</span>
            </div>
            <div class="basicinfo" style="padding-top: 5px;">
              <span>年级：{{info.grade_name}}</span>
            </div>
            <div class="basicinfo" style="padding-top: 5px;">
              <span>班级：{{info.class_name}}</span>
            </div>
          </div>
        </div>
        <div style="display:flex ;align-items: center;margin: 20px 0; ">
          <div class="blueline"></div>
          <div class="texttitle">调班信息</div>
        </div>
        <div style="display:flex;align-items:center;margin-bottom:15px">
          <div class="diaotext">调入年级</div>
          <el-select v-model="shiftClassInfo.grade_id" class="!w-full" placeholder="请选择年级类型" @change="gradeChange">
            <el-option v-for="(i, index) in gradeData" :key="index" :label="i.name"
              :value="i.id"></el-option>
          </el-select>
        </div>
        <div style="display:flex;align-items:center;margin-bottom:15px">
          <div class="diaotext">调入班级</div>
          <el-select v-model="shiftClassInfo.class_id" class="!w-full" placeholder="请选择班级类型" @change="classChange">
            <el-option v-for="(i, index) in classData" :key="index" :label="i.name" :value="i.id"></el-option>
          </el-select>
        </div>
        <div style="width:100%;display:flex;justify-content:flex-end">
          <el-button type="primary" style="margin-left: 10px;" @click="confirmShiftClass">确定调班</el-button>
        </div>
      </div>
       
    </el-dialog>
    <el-dialog v-model="isTransferOut" :before-close="classClose" :title="title" draggable width="410px">
      <div style="padding: 10px 20px;">
        <div style="display: flex;align-items: center; ">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '1'" src="@/assets/student/man.png" alt="" style="width:100px;height:100px;">
          <img v-if="(info.photo=='' ||info.photo==null) && info.gender == '2'" src="@/assets/student/woman.png" alt="" style="width:100px;height:100px;">
          <img v-if="info.photo!='' && info.photo!=null" :src="info.photo" alt="" style="width:100px;height:100px;">
          <div style="margin-left: 20px;">
            <div class="basicname" style="padding-bottom: 0px;">
              <span style="padding-right:20px">{{ info.name }}</span>
              <span v-if="info.gender == '1'">男</span>
              <span v-if="info.gender == '2'">女</span>
            </div>
            <div class="basicinfo" style="padding-top: 5px;">
              <span>{{info.nation}}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.birth_date }}</span>
              <span style="padding: 0 15px;">|</span>
              <span>{{ info.age }}岁</span>
            </div>
          </div>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>年级：{{info.grade_name}}</span>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>班级：{{info.class_name}}</span>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>学籍号：{{info.study_code}}</span>
        </div>
        <div class="basicinfo" style="padding-top: 10px;">
          <span>身份证：{{info.id_code}}</span>
        </div>
        <div style="width:100%;display:flex;justify-content:flex-end">
          <el-button type="primary" queryShiftstyle="margin-left: 10px;" @click="confirmTransferOut">确定转出</el-button>
        </div>
      </div>
    </el-dialog>
    <el-dialog v-model="dialogTableVisible" title="导入学生错误信息列表" draggable width="800">

      <el-button style="margin-bottom: 10px" type="primary" @click="exportToExcel">导出错误信息</el-button>
      
      <el-table class="table_error" :data="errorData" style="height: calc(100vh - 200px);" border>
        <el-table-column type="index" label="序号"  width="90" />
        <el-table-column prop="name" label="内容"  min-width="200"  />
      </el-table>
    </el-dialog>
    <el-dialog v-model="uploadVisible" title="导入学生信息" draggable width="400">
      <div style="display: flex;justify-content: center;">
        <el-radio v-model="radioStudent" label="1">导入为准</el-radio>
        <el-radio v-model="radioStudent" label="2">系统为准</el-radio>
      </div>
      <div style="display: flex;justify-content: center;padding-top: 20px;">
        <el-upload
          ref="upload"
          accept=".xlsx"
          class="upload-demo"
          :action=" url + '/base/school-student/importSchoolStudentOptometry/?schoolId=' + currenttreelist.id +'&schoolName=' + currenttreelist.name + '&regionId=' + currenttreelist.region_id + '&type=' + radioStudent "
          :headers="{ token: getToken() }" 
          :show-file-list="false"
          :before-upload="handlePreview"
          :on-success="handlesSuccess"
          :on-error="handleError">
          <el-button type="primary" style="margin: 0 10px;">确定</el-button>
        </el-upload>
      </div>
      
    </el-dialog>
    <el-dialog v-model="isMuchShiftClass" :before-close="classClose" :title="title" draggable width="500px">
        <div style="padding: 10px 20px;">
          <div style="display:flex;align-items:center;margin-bottom:15px">
            <div class="diaotext">调入年级</div>
            <el-select v-model="shiftClassInfo.grade_id" class="!w-full" placeholder="请选择年级类型" @change="gradeChange">
              <el-option v-for="(i, index) in gradeData" :key="index" :label="i.name"
                :value="i.id"></el-option>
            </el-select>
          </div>
          <div style="display:flex;align-items:center;margin-bottom:15px">
            <div class="diaotext">调入班级</div>
            <el-select v-model="shiftClassInfo.class_id" class="!w-full" placeholder="请选择年级类型" @change="classChange">
              <el-option v-for="(i, index) in classData" :key="index" :label="i.name" :value="i.id"></el-option>
            </el-select>
          </div>
          <div style="width:100%;display:flex;justify-content:flex-end">
            <el-button type="primary" style="margin-left: 10px;" @click="confirmShiftClassMuch">确定调班</el-button>
          </div>
        </div>
        
      </el-dialog>
  </div>
  <StudentVisdata  v-if="htmlStatus == '2'" :studentInfo="info" @returnStudent="returnStudent" class="tsbox"/>
  <StudentInfolog  v-if="htmlStatus == '3'" :studentInfo="info" @returnStudent="returnStudent" class="tsbox"/>
</template>
<style scoped  lang="scss">
.silderLeft-default {
  :deep(.custom-tree-node, .treedelicon, .treeediticon) {
    font-size: 16px !important;
  }

  :deep(.custom-tree-large, .treedelicon, .treeediticon) {
    font-size: 14px !important;
  }
}

.faulttemplate-box {
  height: 100%;
  display: -webkit-flex;
  display: flex;
  background-color: #f2f4f9;
}

#silderLeft {
  width: 255px;
  box-sizing: border-box;
  background: #fff;
  border-radius: 3px;
  position: relative;
  &:hover {
    .moveBtn {
      opacity: 1;
    }
  }
}

/* 拖动条 */
.moveBtn {
  height: 100%;
  width: 15px;
  padding: 0 6px;
  opacity: 0;
  position: absolute;
  right: -15px;
  top: 0;
}

.moveBtn-line {
  width: 100%;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  background-color: #60bfff;
}

.dialog-footer {
  display: flex;
  display: -webkit-flex;
  justify-content: flex-end;
  -webkit-justify-content: flex-end;
}

.silderRight {
  flex: 1;
  position: relative;
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgba(255, 255, 255, 1);
  border-radius: 3px;
  padding: 15px;
  padding-bottom: 0px;
  margin-left: 15px;
  box-sizing: border-box;
}

:deep(.el-tree-node.is-current > .el-tree-node__content) {
  width: 100%;
  height: 40px;
  background-color: #409eff !important;
  color: #fff !important;
}

:deep(.el-tree-node__content) {
  width: 100%;
  height: 40px;
  line-height: 40px;
}

:deep(.el-tree-node__content:hover) {
  background-color: #409eff19;
}

.custom-tree-node {
  flex: 1;
  display: flex;
  display: -webkit-flex;
  align-items: center;
  -webkit-align-items: center;
  justify-content: space-between;
  -webkit-justify-content: space-between; 
  padding-right: 8px;

}

.faulttemplate-box {
  .is-current .treeediticon {
    color: #ffffff !important;
  }

  .is-current .treedelicon {
    color: #ffffff !important;
  }

  .el-tree-node__content:hover .treeediticon {
    color: #00cccc;
  }

  .el-tree-node__content:hover .treedelicon {
    color: #f56c6c;
  }
}

.treeediticon,
.treedelicon {
  color: #fff;
  margin: 0 5px;
}
:deep(.el-table__cell){
  color: #383838;
}
.top-nav {
  display: -webkit-flex;
  display: flex;
  justify-content: space-between;
  -webkit-justify-content: space-between;
}

.lefttitle {
  min-width: 130px;
  display: flex;
  align-items: center;
  padding: 10px 15px;
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #1B1B1B;
  border-bottom: 1px var(--el-border-color) var(--el-border-style);
  margin-bottom: 10px;
  .line{
    border-width: 0px;
    width: 5px;
    height: 14px;
    margin-right: 7px;
    background: inherit;
    background-color: rgba(64, 158, 255, 1);
    border: none;
    border-radius: 0px;
    -moz-box-shadow: none;
    -webkit-box-shadow: none;
    box-shadow: none;
  }
}
.schoolStudent-box{
  width: 100%;
  height: calc(100vh - 130px);
  overflow: auto;
  background-color: rgb(255, 255, 255);
  border: none;
  border-radius: 3px;
  padding: 10px 15px 0px;
  padding-right: 0;
  box-sizing: border-box;
    .schoolStudent-title{
      display: flex;
      justify-content: space-between;
      font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
      font-weight: 700;
      font-style: normal;
      font-size: 18px;
      color: #282828;
      .class_order{
        padding-bottom: 5px;
        border-bottom:3px solid #409eff;
      }
      .return{
        display: flex;
        align-items: center;
        justify-content: center;
        font-family: 'Arial Normal', 'Arial';
        font-weight: 400;
        font-style: normal;
        font-size: 12px;
        color: #409EFF;
        width: 50px;
        height: 26px;
        border: 1px solid #C6E2FF;
        background: rgb(236, 245, 255);
        border-radius:4px;
        cursor: pointer;
      }
    }
    .schoolStudent-line{
      width: 100%;
      height: 1px;
      background: rgb(220, 223, 230);
      margin-top: -1px;
    }
}
.diaotext{
  font-family: 微软雅黑;
  font-weight: 400;
  font-style: normal;
  color: rgb(148, 148, 148);
  font-size: 14px;
  text-align: left;
  width: 80px;
}
.basicname{
  font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
  font-weight: 700;
  font-style: normal;
  font-size: 16px;
  color: #333333;
  text-align: left;
  padding-bottom: 10px;
}
.basicinfo{
  font-family: 'Arial Normal', 'Arial';
  font-weight: 400;
  font-style: normal;
  font-size: 14px;
  color: #787878;
  text-align: left;
}
.tsbox{
  width: 100%;
  height: calc(100vh - 130px);
  background: rgb(255, 255, 255);
  padding: 15px 15px 15px 15px;
  border-radius: 5px;
}
</style>
