<template>
    <div class="app-container">
        <el-dialog title="查询" :visible.sync="query" width="50%" append-to-body>
            <el-form :model="queryForm" ref="queryForm" size="small" :inline="true" label-width="68px" class="search">
                <el-form-item label="学年">
                    <el-select v-model="queryForm.schoolYear" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="dict in dict.type.yearda" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="学期">
                    <el-select v-model="queryForm.semester" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="dict in dict.type.semester_jsdzda" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="届别" prop="gradeYear">
                    <el-select v-model="queryForm.gradeYear" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="dict in dict.type.rankwj" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="年级" prop="gradeId">
                    <el-select v-model="queryForm.gradeId" clearable placeholder="请选择" style="width: 100%;">
                        <el-option v-for="dict in dict.type.grade_da" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="班级" prop="className">
                    <el-input v-model="queryForm.className" placeholder="请输入" clearable
                        @keyup.enter.native="handleQuery" />
                </el-form-item>
                <el-form-item label="班级类型">
                    <el-select v-model="queryForm.classType" clearable placeholder="请选择" style="width: 100%">
                        <el-option v-for="dict in dict.type.class_type_wj" :key="dict.value" :label="dict.label"
                            :value="dict.value">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="姓名">
                    <el-input v-model="queryForm.name" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="性别">
                    <el-select v-model="queryForm.sex" placeholder="请选择" clearable style="width: 100%;">
                        <el-option label="男" value="男"></el-option>
                        <el-option label="女" value="女"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="身份证号">
                    <el-input v-model="queryForm.idCard" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="班主任">
                    <!-- <el-select v-model="queryForm.classTeacherId" placeholder="请选择" :style="{ width: '100%' }" filterable>
                        <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                            :value="item.userId"></el-option>
                    </el-select> -->
                    <el-input v-model="queryForm.classTeacher" placeholder="请输入" clearable></el-input>
                </el-form-item>
                <el-form-item label="违纪行为">
                    <el-input v-model="queryForm.violateType" placeholder="输入"></el-input>
                </el-form-item>
                <el-form-item label="违纪次数">
                    <el-select v-model="queryForm.violateNum" placeholder="请选择" clearable style="width: 100%;">
                        <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="处分结果">
                    <el-select v-model="queryForm.punishResult" placeholder="请选择" clearable style="width: 100%;">
                        <el-option v-for="dict in dict.type.punish_result" :key="dict.value" :label="dict.label"
                            :value="dict.value" />
                    </el-select>
                </el-form-item>
                <el-form-item label="处分时间">
                    <el-date-picker v-model="queryForm.punishTime" type="date" value-format="yyyy-MM-dd"
                        placeholder="请选择" clearable style="width: 100%;">
                    </el-date-picker>
                </el-form-item>
                <el-form-item class="dialog-footer" style="display: flex; justify-content: center; align-items: center">
                    <el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
                    <el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
                </el-form-item>
            </el-form>
        </el-dialog>
        <el-row :gutter="10" class="mb8">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="el-icon-search" size="mini" @click="handleQuerycx">查询</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="primary" icon="el-icon-plus" size="mini" @click="handleAdd">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="el-icon-download" size="mini" @click="handleImport"
                    v-hasPermi="['system:student:import']">导入
                </el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="warning" plain icon="el-icon-upload2" size="mini" @click="handleExport"
                    v-hasPermi="['system:student:export']">导出
                </el-button>
            </el-col>
        </el-row>
        <el-table :row-style="{ height: '0' }" :cell-style="{ padding: '3px' }" :data="tableData"
            :default-sort="{ prop: 'punishTime', order: 'descending' }" border style="width: 100%">
            <el-table-column align="center" type="index" label="序号" width="55" />
            <el-table-column align="center" prop="schoolYear" sortable label="学年" width="100px" show-overflow-tooltip />
            <el-table-column align="center" prop="semester" sortable label="学期" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.semester_jsdzda, row.semester) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="gradeYear" sortable label="届别" width="90px" show-overflow-tooltip />
            <el-table-column align="center" prop="gradeName" sortable label="年级" width="120px" show-overflow-tooltip>
                <template slot-scope="scope">
                    <dict-tag :options="dict.type.grade_da" :value="scope.row.gradeName" />
                </template>
            </el-table-column>
            <el-table-column align="center" prop="className" sortable label="班级" show-overflow-tooltip />
            <el-table-column align="center" prop="classType" sortable label="班级类型" width="100" show-overflow-tooltip>
                <!-- <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.class_type_wj, row.classType) }}</div>
                </template> -->
            </el-table-column>
            <el-table-column align="center" prop="name" sortable label="姓名" show-overflow-tooltip />
            <el-table-column align="center" prop="sex" sortable label="性别">
                <!-- <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.sys_user_sex, row.sex) }}</div>
                </template> -->
            </el-table-column>
            <el-table-column align="center" prop="idCard" sortable label="身份证号" width="180" show-overflow-tooltip />
            <el-table-column align="center" prop="classTeacher" sortable label="班主任" width="100"
                show-overflow-tooltip />
            <el-table-column align="center" prop="gradeDirector" sortable label="级部主任" width="100"
                show-overflow-tooltip />
            <el-table-column align="center" prop="violateType" sortable label="违纪行为" width="180" show-overflow-tooltip>
                <!-- <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.violate_type, row.violateType) }}</div>
                </template> -->
            </el-table-column>
            <el-table-column align="center" prop="violateNum" sortable label="违纪次数" width="100">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.violate_num, row.violateNum) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="punishResult" sortable label="处分结果" width="100" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.punish_result, row.punishResult) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="punishTime" sortable label="处分时间" width="130" show-overflow-tooltip />
            <el-table-column align="center" prop="remark" sortable label="备注" show-overflow-tooltip />
            <el-table-column align="center" prop="auditState" label="审核状态" fixed="right">
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.audit_state, row.auditState) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" fixed="right" label="操作" width="200">
                <template slot-scope="scope">
                    <div>
                        <el-button v-if="['1', '3'].includes(scope.row.auditState)" @click="handleExamine(scope.row)"
                            type="text" size="small">审核</el-button>
                        <el-button v-if="['1', '3'].includes(scope.row.auditState)" @click="handleEdit(scope.row)"
                            type="text" size="small">编辑</el-button>
                        <el-button v-if="['1', '3'].includes(scope.row.auditState)" @click="handleDelete(scope.row)"
                            type="text" size="small">删除</el-button>
                        <el-button v-if="['1', '3'].includes(scope.row.auditState)" @click="handleLook(scope.row)"
                            type="text" size="small">查看</el-button>
                    </div>
                    <div>
                        <el-button v-if="scope.row.auditState === '2'" @click="handleEdit(scope.row)" type="text"
                            size="small">编辑</el-button>
                        <el-button v-if="scope.row.auditState === '2'" @click="handleDelete(scope.row)" type="text"
                            size="small">删除</el-button>
                        <el-button v-if="scope.row.auditState === '2'" @click="handleLook(scope.row)" type="text"
                            size="small">查看</el-button>
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <pagination v-show="total > 0" :total="total" :page.sync="queryForm.pageNum" :limit.sync="queryForm.pageSize"
            @pagination="getList" />
        <!-- 导入对话框 -->
        <el-dialog :title="title" :visible.sync="uploadOpen" width="520px" append-to-body inline>
            <el-form ref="uploadForm" :model="uploadForm" :rules="rules" label-width="70px">
                <el-form-item prop="dataUrl">
                    <el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="upload.headers"
                        :action="upload.url + '?updateSupport=' + upload.updateSupport" :disabled="upload.isUploading"
                        :on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false"
                        drag>
                        <i class="el-icon-upload"></i>
                        <div class="el-upload__text">
                            将文件拖到此处，或<em>点击上传</em>
                        </div>
                        <div class="el-upload__tip text-center" slot="tip">
                            <span>仅允许导入xls、xlsx格式文件。</span>
                            <el-link type="primary" :underline="false" style="font-size: 12px; vertical-align: baseline"
                                @click="importTemplate">下载模板
                            </el-link>
                        </div>
                    </el-upload>
                </el-form-item>
            </el-form>
            <div class="mask" v-if="importing">
                <div class="mask-content">
                    <i class="el-icon-loading"></i>
                    <span>正在导入，请稍候...</span>
                </div>
            </div>
            <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="submitFileForm">确 定</el-button>
                <el-button @click="cancelFile">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 新增/编辑弹框 -->
        <el-dialog title="详细信息" :visible.sync="dialogTableVisible" width="1100px">
            <el-form :model="form" ref="form" size="small" label-width="120px" :disabled="isEdit" :rules="rules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="学年" prop="schoolYear">
                            <el-select v-model="form.schoolYear" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.yearda" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学期" prop="semester">
                            <el-select v-model="form.semester" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.semester_jsdzda" :key="dict.value"
                                    :label="dict.label" :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="届别" prop="gradeYear">
                            <el-select v-model="form.gradeYear" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.rankwj" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年级" prop="gradeName">
                            <el-select v-model="form.gradeName" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.grade_da" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="className">
                            <el-select v-model="form.className" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.class_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级类型" prop="classType">
                            <el-select v-model="form.classType" placeholder="请选择" clearable style="width: 100%">
                                <el-option v-for="dict in dict.type.class_type_wj" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="form.idCard" @blur="handleIdCardBlur" maxlength="18" placeholder="请输入"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择" clearable style="width: 100%;">
                                <el-option label="男" value="男"></el-option>
                                <el-option label="女" value="女"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="班主任" prop="classTeacher">
                            <el-input v-model="form.classTeacher" placeholder="请输入" clearable></el-input>
                            <!-- <el-select v-model="form.classTeacherId" placeholder="请选择" :style="{ width: '100%' }"
                                filterable>
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="级部主任" prop="gradeDirector">
                            <el-input v-model="form.gradeDirector" placeholder="请输入" clearable></el-input>
                            <!-- <el-select v-model="form.gradeDirectorId" placeholder="请选择" :style="{ width: '100%' }"
                                filterable>
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="违纪次数" prop="violateNum">
                            <el-select v-model="form.violateNum" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <!-- <el-form-item label="违纪行为" prop="violateType">
                            <el-select v-model="form.violateType" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="违纪行为" prop="violateType">
                            <el-input v-model="form.violateType" placeholder="输入" type="textarea"></el-input>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="处分结果" prop="punishResult">
                            <el-select v-model="form.punishResult" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.punish_result" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处分时间" prop="punishTime">
                            <el-date-picker v-model="form.punishTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择" clearable :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" clearable type="textarea"
                                :rows="2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="16">
                        <el-form-item label="附件" prop="schoolAccessoryList">
                            <fileUploadn @input="getFileList" :value="fileList">
                            </fileUploadn>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button type="primary" @click="submitForm"> 确 定</el-button>
                <el-button @click="cancelDialog">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 查看 -->
        <el-dialog title="详细信息" :visible.sync="look" width="1100px">
            <el-form :model="form" ref="form" size="small" label-width="120px" :disabled="isEdit" :rules="rules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="学年" prop="schoolYear">
                            <el-select v-model="form.schoolYear" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.yearda" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学期" prop="semester">
                            <el-select v-model="form.semester" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.semester_jsdzda" :key="dict.value"
                                    :label="dict.label" :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="届别" prop="gradeYear">
                            <el-select v-model="form.gradeYear" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.rankwj" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年级" prop="gradeName">
                            <el-select v-model="form.gradeName" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.grade_da" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="className">
                            <el-select v-model="form.className" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.class_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级类型" prop="classType">
                            <el-select v-model="form.classType" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.class_type_wj" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="form.idCard" @blur="handleIdCardBlur" maxlength="18" placeholder="请输入"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="班主任" prop="classTeacher">
                            <el-input v-model="form.classTeacher" placeholder="请输入" clearable></el-input>
                            <!-- <el-select v-model="form.classTeacherId" placeholder="请选择" :style="{ width: '100%' }"
                                filterable>
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="级部主任" prop="gradeDirector">
                            <el-input v-model="form.gradeDirector" placeholder="请输入" clearable></el-input>
                            <!-- <el-select v-model="form.gradeDirectorId" placeholder="请选择" :style="{ width: '100%' }"
                                filterable>
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="违纪行为" prop="violateType">
                            <el-input v-model="form.violateType" placeholder="输入"></el-input>
                        </el-form-item>

                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="违纪次数" prop="violateNum">
                            <el-select v-model="form.violateNum" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <!-- <el-form-item label="违纪行为" prop="violateType">
                            <el-select v-model="form.violateType" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="违纪行为" prop="violateType">
                            <el-input v-model="form.violateType" placeholder="输入" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                    <el-col :span="8">
                        <el-form-item label="处分结果" prop="punishResult">
                            <el-select v-model="form.punishResult" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.punish_result" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>

                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处分时间" prop="punishTime">
                            <el-date-picker v-model="form.punishTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择" clearable :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" clearable type="textarea"
                                :rows="2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="10">
                        <el-form-item label="附件 :">
                            <li class="el-upload-list__item ele-upload-list__item-content" v-for="file in fileList"
                                :key="file.id">
                                <el-link :href="`${baseUrl}${file.accessoryUrl}`" :underline="false" target="_blank">
                                    <span class="el-icon-document"> {{ file.accessoryName }} </span>
                                </el-link>
                            </li>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="cancelDialog">取 消</el-button>
            </div>
        </el-dialog>
        <!-- 审核弹框 -->
        <el-dialog title="审核信息" :visible.sync="open" width="1100px">
            <el-form :model="form" ref="form" size="small" label-width="120px" :disabled="isEdit" :rules="rules">
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="学年" prop="schoolYear">
                            <el-select v-model="form.schoolYear" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.yearda" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="学期" prop="semester">
                            <el-select v-model="form.semester" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.semester" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="届别" prop="gradeYear">
                            <el-select v-model="form.gradeYear" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.rankwj" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>

                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="年级" prop="gradeName">
                            <el-select v-model="form.gradeName" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.grade_da" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级" prop="className">
                            <el-select v-model="form.className" clearable placeholder="请选择" style="width: 100%;">
                                <el-option v-for="dict in dict.type.class_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="班级类型" prop="classType">
                            <el-select v-model="form.classType" placeholder="请选择" clearable style="width: 100%">
                                <el-option v-for="dict in dict.type.class_type_wj" :key="dict.value" :label="dict.label"
                                    :value="dict.value">
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="姓名" prop="name">
                            <el-input v-model="form.name" placeholder="请输入" clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="身份证号" prop="idCard">
                            <el-input v-model="form.idCard" @blur="handleIdCardBlur" maxlength="18" placeholder="请输入"
                                clearable></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="性别" prop="sex">
                            <el-select v-model="form.sex" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.sys_user_sex" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="班主任" prop="classTeacher">
                            <el-input v-model="form.classTeacher" placeholder="请输入" clearable></el-input>
                            <!-- <el-select v-model="form.classTeacherId" placeholder="请选择" :style="{ width: '100%' }">
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="级部主任" prop="gradeDirector">
                            <el-input v-model="form.gradeDirector" placeholder="请输入" clearable></el-input>
                            <!-- <el-select v-model="form.gradeDirectorId" placeholder="请选择" :style="{ width: '100%' }">
                                <el-option v-for="item in deptOptions" :key="item.userId" :label="item.userName"
                                    :value="item.userId"></el-option>
                            </el-select> -->
                        </el-form-item>
                    </el-col>
                    <!-- <el-col :span="8">
                        <el-form-item label="违纪行为" prop="violateType">
                            <el-input v-model="form.violateType" placeholder="输入"></el-input>
                        </el-form-item>
                    </el-col> -->
                    <el-col :span="8">
                        <el-form-item label="违纪次数" prop="violateNum">
                            <el-select v-model="form.violateNum" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <!-- <el-form-item label="违纪行为" prop="violateType">
                            <el-select v-model="form.violateType" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_type" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item> -->
                        <el-form-item label="违纪行为" prop="violateType">
                            <el-input v-model="form.violateType" placeholder="输入" type="textarea"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="8">
                        <el-form-item label="违纪次数" prop="violateNum">
                            <el-select v-model="form.violateNum" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.violate_num" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处分结果" prop="punishResult">
                            <el-select v-model="form.punishResult" placeholder="请选择" clearable style="width: 100%;">
                                <el-option v-for="dict in dict.type.punish_result" :key="dict.value" :label="dict.label"
                                    :value="dict.value" />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="8">
                        <el-form-item label="处分时间" prop="punishTime">
                            <el-date-picker v-model="form.punishTime" type="date" value-format="yyyy-MM-dd"
                                placeholder="请选择" clearable :style="{ width: '100%' }">
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-row>
                <el-row>
                </el-row>
                <el-row>
                    <el-col :span="24">
                        <el-form-item label="备注" prop="remark">
                            <el-input v-model="form.remark" placeholder="请输入" clearable type="textarea"
                                :rows="2"></el-input>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="handleAgree" type="primary" size="small">同意</el-button>
                <el-button @click="handleDisagree" type="danger" size="small">不同意</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import {
    listDiscipline,// 查看学生违纪列表(管理员)
    listDisciplinegr,//查看学生违纪列表(个人)
    getDiscipline,//查看详情
    addDiscipline,// 新增学生违纪(管理员)
    addDisciplinegr,// 新增学生违纪(个人)
    updateDiscipline,// 编辑学生违纪
    delDiscipline,// 删除学生违纪
    subApply,//提交
    getGrade,// 获取最新三个年级
    getClassList,// 根据年级获取班级,
    listDisciplinetg,//查看已通过
    getTeacher,//获取教师
} from '@/api/smartSchool/awardsDisciplinary/studentViolation/disciplinaryManagemen'
import { getToken } from "@/utils/auth";
import { checkIdcard } from '@/utils/utilLibrary/validate'
import fileUploadn from "@/components/FilepersonUploadNew";
export default {
    name: 'index',
    components: {
        fileUploadn,
    },
    dicts: ['violate_type', 'violate_num', 'punish_result', 'sys_user_sex', 'class_type_wj', 'semester', 'audit_state', 'semester_jsdzda', 'exam_typeda', 'grade_da', 'class_type_wj', 'yearda', 'rankda', 'appointment_situation', 'appointment_positions', 'class_num', 'audit_states', 'rankwj'],
    data() {
        return {
            title: "",
            importing: false,
            uploadOpen: false,
            upload: {
                // 是否显示弹出层（用户导入）
                open: false,
                // 弹出层标题（用户导入）
                title: "",
                // 是否禁用上传
                isUploading: false,
                // 是否更新已经存在的用户数据
                updateSupport: 0,
                // 设置上传的请求头部
                headers: { Authorization: "Bearer " + getToken() },
                // 上传的地址
                url:
                    process.env.VUE_APP_BASE_API + "/school/discipline/importData",
            },
            uploadForm: {},
            baseUrl: [process.env.VUE_APP_BASE_API],
            uploadLoading: false,
            uploadFileLoading: false,
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",

            },
            isEdit: false,
            look: false,
            query: false,
            gradeLists: [],
            fileList: [],
            //表格数据
            tableData: [


            ],
            //查看弹窗表格
            ExperimentalData: [],
            form: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacherId: "",
                gradeDirectorId: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",
                remark: "",
                schoolAccessoryList: [],
            },
            //弹窗
            dialogTableVisible: false,
            schoolAccessoryList: [],
            open: false,
            total: 0,
            gradeList: [],
            classList: [],
            deptOptions: [],
            rules: {
                schoolYear: [
                    { required: true, message: "学年不能为空", trigger: "change" }
                ],
                semester: [
                    { required: true, message: "学期不能为空", trigger: "change" }
                ],
                gradeYear: [
                    { required: true, message: "届别不能为空", trigger: "change" }
                ],
                sex: [
                    { required: true, message: "性别不能为空", trigger: "change" }
                ],
                gradeName: [
                    { required: true, message: "年级不能为空", trigger: "change" }
                ],
                className: [
                    { required: true, message: "班级不能为空", trigger: "change" }
                ],
                classType: [
                    { required: true, message: "班级类型不能为空", trigger: "change" }
                ],
                name: [
                    { required: true, message: "姓名不能为空", trigger: "change" }
                ],
                idCard: [{ required: true, validator: checkIdcard, trigger: 'blur' }],
                classTeacher: [
                    { required: true, message: "班主任不能为空", trigger: "change" }
                ],
                gradeDirector: [
                    { required: true, message: "级部主任不能为空", trigger: "change" }
                ],
                violateNum: [
                    { required: true, message: "违纪次数不能为空", trigger: "change" }
                ],
                violateType: [
                    { required: true, message: "违纪行为不能为空", trigger: "change" }
                ],
                punishResult: [
                    { required: true, message: "处分结果不能为空", trigger: "change" }
                ],
                punishTime: [
                    { required: true, message: "处分时间不能为空", trigger: "change" }
                ],
            },
        }
    },
    created() {
        this.getList();
        this.getGradelist();
        this.getTeacher();

    },

    methods: {
        handleAdd() {
            this.reset();
            this.isEdit = false;
            this.dialogTableVisible = true;
        },
        handleIdCardBlur() {
            this.form.sex = this.getGenderFromIdCard(this.form.idCard); // 调用获取性别的方法
            console.log(this.form.sex, 'this.form.sex ');
        },
        getGenderFromIdCard(idCard) {
            const lastDigit = parseInt(idCard.charAt(idCard.length - 2)); // 获取倒数第二位数字
            return lastDigit % 2 === 0 ? '女' : '男'; // 奇数表示男性，偶数表示女性
        },

        //修改
        handleEdit(row) {
            console.log(row);
            const id = row.id || this.ids;
            getDiscipline(id).then((response) => {
                this.form = response.data;
                this.fileList = response.data.schoolAccessoryList.map(item => {
                    return {
                        name: item.accessoryName,
                        url: item.accessoryUrl,
                    }
                })
                this.schoolAccessoryList = response.data.schoolAccessoryList;
                console.log(this.fileList, '修改 ');
                this.form.gradeId = response.data.gradeId;
                const params = { gradeId: this.form.gradeId };
                getClassList(params).then(response => {
                    this.loading = false;
                    this.classList = response.data;
                    console.log("this.classList", this.classList);
                });
                this.isEdit = false;
                this.dialogTableVisible = true;

            }).catch(error => {
                this.$modal.closeLoading();
            })

        },
        // 附件上传回调函数
        getFileList(data) {
            console.log('getFileList', data)
            // this.form.files = data
            this.schoolAccessoryList = data.map(item => {
                return {
                    "accessoryUrl": item.url,
                    "accessoryName": item.name
                }
            })
            console.log('schoolAccessoryList', this.schoolAccessoryList)
        },
        handleImport() {
            this.reset();
            this.title = "导入";
            this.uploadOpen = true;

        },
        handleFileUploadProgress(event, file, fileList) {
            this.upload.isUploading = true;
            this.importing = true;

        },
        // 提交上传文件
        submitFileForm() {
            this.$refs.upload.submit();
        },
        cancelFile() {
            this.uploadOpen = false;
            this.upload.isUploading = false;
            this.$refs.upload.clearFiles();
        },
        // 文件上传成功处理
        handleFileSuccess(response, file, fileList) {
            this.uploadOpen = false;
            this.upload.isUploading = false;
            this.importing = false;
            this.$refs.upload.clearFiles();
            this.$alert(
                "<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" +
                response.msg +
                "</div>",
                "导入结果",
                { dangerouslyUseHTMLString: true }
            );
            this.getList();
        },
        //下载模版
        importTemplate() {
            this.download(
                "/school/discipline/importTemplate",
                {},
                `违纪管理_${Date.now()}.xlsx`
            );
        },
        /** 导出按钮操作 */
        handleExport() {
            this.download('/school/discipline/exportGl', {
                ...this.queryForm
            }, `违纪管理_${Date.now()}.xlsx`)

        },
        //查看
        handleLook(row) {
            console.log(row);
            const id = row.id || this.ids;
            getDiscipline(id).then((response) => {
                this.form = response.data;
                this.isEdit = true;
                this.look = true;
                this.form.gradeId = response.data.gradeId;
                this.fileList = response.data.schoolAccessoryList;
                console.log(this.fileList, 'this.fileList');
                const params = { gradeId: this.form.gradeId };
                getClassList(params).then(response => {
                    this.loading = false;
                    this.classList = response.data;
                    console.log("this.classList", this.classList);
                });
            }).catch(error => {
                this.$modal.closeLoading();
            })

        },
        cancelDialog() {
            this.dialogTableVisible = false;
            this.look = false;
            this.open = false;
        },
        reset() {
            this.form = {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                gradeDirector: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",
                remark: "",

            },
                this.fileList = [];
            this.resetForm('form')
        },
        //审核
        handleExamine(row) {
            const id = row.id || this.ids;
            getDiscipline(id).then((response) => {
                this.form = response.data;
                this.form.id = response.data.id;
                this.isEdit = true;
                this.open = true;
                this.title = "审核信息";
                this.form.gradeId = response.data.gradeId;
                const params = { gradeId: this.form.gradeId };
                getClassList(params).then(response => {
                    this.loading = false;
                    this.classList = response.data;
                    console.log("this.classList", this.classList);
                }).catch(error => {
                    this.$modal.closeLoading();
                });
            }).catch(error => {
                this.$modal.closeLoading();
            })
        },
        // 同意
        handleAgree() {
            const params = {
                id: this.form.id,
                auditState: '2'  // 表示同意
            };
            subApply(params).then(({ code }) => {
                console.log(this.form, 'this.form');
                if (code == 200) {
                    this.$modal.msgSuccess('操作成功')
                    this.open = false;
                    this.getList()
                }
            })
        },

        // 不同意
        handleDisagree() {
            const params = {
                id: this.form.id,
                auditState: '3'  // 表示不同意
            };
            subApply(params).then(({ code }) => {
                console.log(this.form, 'this.form');
                if (code == 200) {
                    this.$modal.msgSuccess('操作成功')
                    this.open = false
                    this.getList()
                }
            })
        },
        // 删除
        handleDelete(row) {
            this.$modal.confirm(`是否确认删除此数据？`).then(() => {
                this.loading = true;
                return delDiscipline(row.id);
            }).then(() => {
                this.getList();
                this.loading = false;
                this.$modal.msgSuccess("删除成功");
            }).catch(() => {
                this.loading = false
            });
        },


        getList() {
            listDiscipline(this.queryForm)
                .then(response => {
                    this.tableData = response.rows;
                    console.log('response', response);
                    this.total = response.total;
                    this.loading = false;
                })
                .catch(error => {
                    this.loading = false;
                    console.log(error);
                });
        },
        //获取教师下拉框
        getTeacher() {
            getTeacher().then(response => {
                this.deptOptions = response.data;
                console.log(this.deptOptions, ' this.deptOptions ');
            });
        },
        //确定按钮
        submitForm: function () {
            // const classTeacherId = this.form.classTeacherId;
            // console.log(classTeacherId, 'classTeacherId');
            // this.form.classTeacher = classTeacherId == '' ? '' : this.deptOptions.find(item => item.userId == classTeacherId).userName
            // console.log(this.form.classTeacher, '  this.form.classTeacher ');
            // const gradeDirectorId = this.form.gradeDirectorId;
            // console.log(gradeDirectorId, 'const gradeDirectorId ');
            // this.form.gradeDirector = gradeDirectorId == '' ? '' : this.deptOptions.find(item => item.userId == gradeDirectorId).userName
            // console.log(this.form.gradeDirectorId, '  this.form.gradeDirectorId ');
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {

                        const params = {
                            id: this.form.id,
                            schoolYear: this.form.schoolYear,
                            semester: this.form.semester,
                            gradeYear: this.form.gradeYear,
                            gradeName: this.form.gradeName,
                            className: this.form.className,
                            classType: this.form.classType,
                            name: this.form.name,
                            sex: this.form.sex,
                            idCard: this.form.idCard,
                            classTeacher: this.form.classTeacher,
                            gradeDirector: this.form.gradeDirector,
                            violateType: this.form.violateType,
                            violateNum: this.form.violateNum,
                            punishResult: this.form.punishResult,
                            punishTime: this.form.punishTime,
                            remark: this.form.remark,
                            schoolAccessoryList: this.schoolAccessoryList.map(item => ({
                                accessoryUrl: item.accessoryUrl,
                                accessoryName: item.accessoryName
                            }))
                        }
                        updateDiscipline(params)
                            .then(response => {
                                this.$modal.msgSuccess('修改成功');
                                this.dialogTableVisible = false;
                                this.getList();

                            })
                            .catch(error => {

                            });
                    } else {
                        const params = {
                            schoolYear: this.form.schoolYear,
                            semester: this.form.semester,
                            gradeYear: this.form.gradeYear,
                            gradeName: this.form.gradeName,
                            className: this.form.className,
                            classType: this.form.classType,
                            name: this.form.name,
                            sex: this.form.sex,
                            idCard: this.form.idCard,
                            classTeacher: this.form.classTeacher,
                            gradeDirector: this.form.gradeDirector,
                            violateType: this.form.violateType,
                            violateNum: this.form.violateNum,
                            punishResult: this.form.punishResult,
                            punishTime: this.form.punishTime,
                            remark: this.form.remark,
                            schoolAccessoryList: this.schoolAccessoryList.map(item => ({
                                accessoryUrl: item.accessoryUrl,
                                accessoryName: item.accessoryName
                            }))
                        }
                        addDiscipline(params)
                            .then(response => {
                                this.$modal.msgSuccess('新增成功');
                                this.dialogTableVisible = false;
                                this.getList();

                            })
                            .catch(error => {

                            });
                    }
                }
            });
        },

        // 获取最新三个年级
        getGradelist() {
            getGrade().then(response => {
                this.loading = false;
                this.gradeList = response.data;
                this.getClasslist()
                console.log("this.gradeList", this.gradeList);
            });
        },
        handleChange(selectedGrade) {
            console.log(selectedGrade, 'selectedGrade');
            this.getClasslist(selectedGrade); // 传递选择的年级id作为参数
        },
        // 根据年级获取班级
        getClasslist(selectedGrade) {
            const query = { gradeId: selectedGrade }; // 创建包含gradeId的对象
            getClassList(query).then(response => {
                this.loading = false;
                this.classList = response.data;
                console.log("this.classList", this.classList);
            });
        },


        resetQuery() {
            this.queryForm = {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",

            },
                this.getList();
        },
        handleQuerycx() {
            this.query = true;
        },
        handleQuery() {
            this.getList();
            this.query = false;
        },

    },
}
</script>

<style scoped lang="scss">
.mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    justify-content: center;
}

.mask-content {
    display: flex;
    align-items: center;
    justify-content: center;
    color: #1a74be;
    font-size: 16px;
}

::v-deep .el-form-item {
    margin-bottom: 12px;
}

::v-deep .el-input--medium .el-input__inner {
    height: 26px;
    line-height: 26px;
}

::v-deep .el-dialog__body {
    padding: 10px 20px
}

::v-deep .el-dialog:not(.is-fullscreen) {
    margin-top: 4vh !important;
}

.search ::v-deep .el-form-item__content {
    width: 200px
}
</style>