<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="gradeName">
                    <el-select v-model="queryForm.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-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" :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-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 plain type="warning" icon="el-icon-upload2" size="mini" @click="handleExport">导出</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="110" show-overflow-tooltip />
            <el-table-column align="center" prop="semester" sortable label="学期" show-overflow-tooltip>
                <template slot-scope="{ row }">
                    <div>{{ selectDictLabel(dict.type.semester, row.semester) }}</div>
                </template>
            </el-table-column>
            <el-table-column align="center" prop="gradeYear" sortable label="届别" show-overflow-tooltip />
            <el-table-column align="center" prop="gradeName" sortable label="年级" width="100" 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.grade_type, 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="性别" show-overflow-tooltip>
                <!-- <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="120" 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" show-overflow-tooltip>
                <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="150" 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="110">
                <template slot-scope="scope">
                    <el-button @click="handleLook(scope.row)" type="text" size="small">查看</el-button>
                </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="详细信息" :visible.sync="dialogTableVisible" width="1200px">
            <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         "
                                    :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="classTeacherId">
                            <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="gradeDirectorId">
                            <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="违纪行为">
                            <el-input v-model="form.violateType" placeholder="输入"></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-row>
                <el-row>
                    <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-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-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-form>
            <div slot="footer" class="dialog-footer" style="text-align: center;">
                <el-button @click="cancelDialog">取 消</el-button>
            </div>
        </el-dialog>

    </div>
</template>

<script>

import {
    listDiscipline,// 查看学生违纪列表(管理员)
    listDisciplinegr,//查看学生违纪列表(个人)
    getDiscipline,//查看详情
    addDiscipline,// 新增学生违纪(管理员)
    addDisciplinegr,// 新增学生违纪(个人)
    updateDiscipline,// 编辑学生违纪
    delDiscipline,// 删除学生违纪
    subApply,//提交
    getGrade,// 获取最新三个年级
    getClassList,// 根据年级获取班级,
    getTeacher,//获取教师
} from '@/api/smartSchool/awardsDisciplinary/studentViolation/disciplinaryManagemen'
import { listStudentwj } from "@/api/smartSchool/classAdviser/studentCommendation";
import { checkIdcard } from '@/utils/utilLibrary/validate'
export default {
    name: 'index',
    dicts: ['violate_type', 'violate_num', 'punish_result', 'sys_user_sex', 'grade_type', 'semester', 'audit_state', 'semester_jsdzda', 'exam_typeda', 'grade_da', 'class_type', 'yearda', 'rankwj', 'appointment_situation', 'appointment_positions', 'class_num', 'audit_states'],
    data() {
        return {
            queryForm: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacher: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",

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


            ],
            baseUrl: process.env.VUE_APP_BASE_API,
            //查看弹窗表格
            ExperimentalData: [],
            form: {
                pageNum: 1,
                pageSize: 10,
                schoolYear: "",
                semester: "",
                gradeYear: "",
                gradeId: "",
                classId: "",
                classType: "",
                name: "",
                sex: "",
                idCard: "",
                classTeacherId: "",
                gradeDirectorId: "",
                violateType: "",
                violateNum: "",
                punishResult: "",
                punishTime: "",
                remark: "",

            },
            //弹窗
            dialogTableVisible: false,
            total: 0,
            fileList: [],
            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" }
                ],
                gradeName: [
                    { required: true, message: "班级不能为空", trigger: "change" }
                ],
                name: [
                    { required: true, message: "姓名不能为空", trigger: "change" }
                ],
                idCard: [{ required: true, validator: checkIdcard, trigger: 'blur' }],
                classTeacherId: [
                    { required: true, message: "班主任不能为空", trigger: "change" }
                ],
                gradeDirectorId: [
                    { 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); // 调用获取性别的方法
        },
        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.isEdit = false;
                this.dialogTableVisible = true;
            }).catch(error => {
                this.$modal.closeLoading();
            })

        },
        //查看
        handleLook(row) {
            console.log(row);
            const id = row.id || this.ids;
            getDiscipline(id).then((response) => {
                this.form = response.data;
                this.fileList = response.data.schoolAccessoryList;
                console.log(this.fileList, 'this.fileList');
                this.isEdit = true;
                this.dialogTableVisible = true;
                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();
            })

        },
        cancelDialog() {
            this.dialogTableVisible = 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.resetForm('form')
        },
        //审核
        handleExamine(row) {
            console.log(row, 'row');
            this.$confirm('确认要提交申请?', '提示', {
                confirmButtonText: '同意',
                cancelButtonText: '不同意',
                confirmButtonClass: 'custom-blue-button',
                cancelButtonClass: 'custom-blue-button'
            })

                .then(() => {
                    // 弹出确认框，用户点击同意后执行的逻辑
                    const params = {
                        id: row.id,
                        auditState: '2'  // 表示同意
                    };
                    subApply(params).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'success',
                                message: '提交成功!'
                            });
                            this.getList();
                        }
                    });
                })
                .catch(() => {
                    // 用户点击不同意或者取消后执行的逻辑
                    const params = {
                        id: row.id,
                        auditState: '3'  // 表示不同意
                    };
                    subApply(params).then(res => {
                        if (res.code == 200) {
                            this.$message({
                                type: 'info',
                                message: '已取消审核'
                            });
                        }
                    });
                });
        },
        // 删除
        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() {
            listStudentwj(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 () {
            this.$refs['form'].validate(valid => {
                if (valid) {
                    if (this.form.id != null) {
                        updateDiscipline(this.form).then(({ code }) => {
                            console.log(this.form, 'this.form');
                            if (code == 200) {
                                this.$modal.msgSuccess('修改成功')
                                this.dialogTableVisible = false
                                this.getList()
                            }
                        }).catch(() => {
                            this.$modal.msgError("修改失败");
                        });
                    } else {
                        addDiscipline(this.form).then(response => {
                            console.log(this.form, 'this.form');
                            this.$modal.msgSuccess('新增成功')
                            this.dialogTableVisible = false
                            this.getList()
                        }).catch(() => {
                            this.$modal.msgError("新增失败");
                        });
                    }
                }
            });
        },

        // 获取最新三个年级
        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;
        },
        handleExport() {
            this.download('/school/discipline/exportYtg', {
                ...this.queryParams
            }, `学生违纪_${new Date().getTime()}.xlsx`)
        }
    },
}
</script>

<style scoped lang="scss" >
::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>