当前位置: 首页 > article >正文

增删改查 数据下载 一键编辑 删除

 

index  首页 

<template>


  <div class="box">
    <el-card :style="{ width: treeButton ? '19.5%' : '35px', position: 'relative', transition: '1s' }">
      <el-tree v-if="treeButton" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" ref="treeRef"
        style="width:100%;" />
      <!-- <el-tree class="filter-tree" :data="data" :props="defaultProps" default-expand-all
        :filter-node-method="filterNode" ref="tree">
      </el-tree> -->

    </el-card>
    <el-card :style="{ width: treeButton ? '79.5%' : '100%', overflow: 'auto', transition: '1s' }">


      <el-form ref="form" :model="form" label-width="80px" style="display: flex;">
        <el-form-item label="学号">
          <el-input v-model="form.studentId"></el-input>
        </el-form-item>

        <el-form-item label="姓名">
          <el-input v-model="form.name"></el-input>
        </el-form-item>
        <el-form-item label="身份证号">
          <el-input v-model="form.idCard"></el-input>
        </el-form-item>


        <el-form-item label="其他">
          <el-select v-model="form.region" placeholder="请选择活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>

      </el-form>



      <div style="display: flex;margin-bottom:10px;">
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="handleExit()">重置</el-button>
        <el-button type="success" @click="add('add')" style="margin-left:20px;">新增</el-button>
        <el-button type="success" @click="batchEdit()">批量编辑</el-button>
        <el-button type="success" @click="downloadTemplate()" style="margin-left:20px;">数据下载</el-button>
        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls"
          :action="`${this.$http.BASE_URL}/excel/importAdmission`" :show-file-list="false" :before-upload="beforeUpload"
          :disabled="progressShow">
          <el-button type="success" style="margin-left:20px;" :disabled="progressShow">导入</el-button>
        </el-upload>
        <el-button type="success" style="margin-left:20px;" :disabled="progressShow" @click="open">导入记录</el-button>


        <el-button type="primary" @click="deleteDatabase()">一键删库</el-button>
        <!-- <el-button type="success" @click="this.$refs.MyTablePrint.dialogVisible = true"
          style="margin-left:20px;">导入记录</el-button> -->
      </div>

      <!-- <el-button type="primary" @click="showAdditionalOptions = !showAdditionalOptions"
        style="position: relative; right: 20px;margin-left:20px;margin-bottom:10px;">
        {{ showAdditionalOptions ? '隐藏更多选项' : '显示更多选项' }}
      </el-button> -->

      <!-- <div v-if="showAdditionalOptions" style="display: flex;margin-bottom:10px;">

        nihap
      </div> -->

      <!-- <div v-if="showAdditionalOptions" style="display: flex;margin-bottom:10px;">
        <el-button type="warning" @click="downloadRegisyrarTemplate()" :disabled="progressShow">下载教务处导入模板</el-button>
        <el-button type="warning" @click="downloadEducation()" :disabled="progressShow">下载继续教育学院导入模板</el-button>
        <el-button type="warning" style="margin-right:15px;" @click="downloadGraduationTemplate()"
          :disabled="progressShow">下载研究生导入模板</el-button>

        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls" :action="`${this.$http.BASE_URL}/excel/import`"
          :data="{ officeId: officeId }" :show-file-list="false" :before-upload="beforeUpload" :disabled="progressShow">
          <el-button type="success" style="margin-right:15px;" :disabled="progressShow">导入教务处数据</el-button>
        </el-upload>
        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls"
          :action="`${this.$http.BASE_URL}/excel/importContinue`" :show-file-list="false" :before-upload="beforeUpload"
          :disabled="progressShow">
          <el-button type="success" style="margin-right:15px;" :disabled="progressShow">导入继续教育学院数据</el-button>
        </el-upload>
        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls"
          :action="`${this.$http.BASE_URL}/excel/importEducation`" :show-file-list="false" :before-upload="beforeUpload"
          :disabled="progressShow">
          <el-button type="success" style="margin-right:15px;" :disabled="progressShow">导入研究生院数据</el-button>
        </el-upload>

        <el-button type="primary" @click="deleteDatabase()">一键删库</el-button>
        <el-button type="primary" @click="batchEdit()">批量编辑</el-button>
      </div> -->

      <el-progress :percentage="progressPercent" v-if="progressShow" style="margin-bottom:10px;" />


      <el-table :data="tableData" border @select="tableSelect" @select-all="tableSelect" row-key="id" ref="table"
        table-layout="auto" style="width: 100%;">
        <el-table-column type="selection" reserve-selection width="55" align="center" fixed="left" />
        <el-table-column v-for="j in tableHead" :key="j.prop" :prop="j.prop" :label="j.label" width="" align="center" />
        <el-table-column v-for="item in $myMethod.getCustom(tableData[0])" :key="item" :prop="item"
          :label="item.slice(7)" width="100" align="center" />

        <el-table-column fixed="right" label="操作" width="100">
          <template v-slot:default="scope">
            <el-button @click="handleClick(scope.row)" type="text" size="small">编辑</el-button>
          </template>
        </el-table-column>



      </el-table>

      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]"
        layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search" @current-change="search"
        style="margin-top: 20px; display:flex; justify-content: flex-end;" />
    </el-card>
  </div>
  <editForm ref="editForm" @search="handleExit" />
  <formVue ref="formVue" @search="handleExit" />
  <!-- <MyTablePrint ref="MyTablePrint" :tableHead="tableHead" :tableData="tableData" /> -->




  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="70%" center @close="cancel">
    <el-form label-position="left" label-width="130" :model="formItem" ref="form" inline :rules="rules">
      <h2 style="margin: 2rem 0 ;">学生档案</h2>
      <el-form-item label="档号" prop="archivalNum" class="form-width">
        <el-input v-model="fromlist.archivalNum" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="案卷题名" prop="caseTitle" class="form-width">
        <el-input v-model="fromlist.caseTitle" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="文件标题" prop="fileTitle" class="form-width">
        <el-input v-model="fromlist.fileTitle" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="存储位置" prop="saveLocation" class="form-width">
        <el-input v-model="fromlist.saveLocation" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="所在页" prop="pageLocation" class="form-width">
        <el-input v-model="fromlist.pageLocation" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="页面序号" prop="pageNum" class="form-width">
        <el-input v-model="fromlist.pageNum" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="考生号" prop="examineeNum" class="form-width">
        <el-input v-model="fromlist.examineeNum" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="准考证号" prop="admissionNum" class="form-width">
        <el-input v-model="fromlist.admissionNum" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="studentId" class="form-width">
        <el-input-number v-model="fromlist.studentId" :min="1" :max="10" :disabled="true" />
      </el-form-item>
      <el-form-item label="姓名" prop="name" class="form-width">
        <el-input v-model="fromlist.name" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender" class="form-width">
        <el-input v-model="fromlist.gender" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday" class="form-width">
        <el-date-picker v-model="fromlist.birthday" :disabled="true" value-format="YYYY-MM-DD" type="date"
          style="width:100%;" />
      </el-form-item>
      <el-form-item label="政治面貌" prop="politicalOutlook" class="form-width">
        <el-input v-model="fromlist.politicalOutlook" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="nation" class="form-width">
        <el-input v-model="fromlist.nation" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard" class="form-width">
        <el-input v-model="fromlist.idCard" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="计划性质" prop="planNature" class="form-width">
        <el-input v-model="fromlist.planNature" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="录取学校" prop="admissionSchools" class="form-width">
        <el-input v-model="fromlist.admissionSchools" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="录取学院" prop="admissionAcademy" class="form-width">
        <el-input v-model="fromlist.admissionAcademy" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="录取专业" prop="admissionMajor" class="form-width">
        <el-input v-model="fromlist.admissionMajor" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="录取时间" prop="admissionTime" class="form-width">
        <el-date-picker v-model="fromlist.admissionTime" :disabled="true" value-format="YYYY-MM-DD" type="date"
          style="width:100%;" />
      </el-form-item>
      <el-form-item label="层次" prop="gradation" class="form-width">
        <el-input v-model="fromlist.gradation" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="学制" prop="educationalSystem" class="form-width">
        <el-input v-model="fromlist.educationalSystem" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="学习形式" prop="learningForms" class="form-width">
        <el-input v-model="fromlist.learningForms" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="考生类别" prop="examineeSort" class="form-width">
        <el-input v-model="fromlist.examineeSort" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="科类" prop="category" class="form-width">
        <el-input v-model="fromlist.category" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="批次" prop="batch" class="form-width">
        <el-input v-model="fromlist.batch" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="毕业学校" prop="graduationSchool" class="form-width">
        <el-input v-model="fromlist.graduationSchool" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="来源地区" prop="sourceArea" class="form-width">
        <el-input v-model="fromlist.sourceArea" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="地区名称" prop="areaName" class="form-width">
        <el-input v-model="fromlist.areaName" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="家庭(邮寄)地址" prop="homeAddress" class="form-width">
        <el-input v-model="fromlist.homeAddress" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="邮政编码" prop="postalCode" class="form-width">
        <el-input v-model="fromlist.postalCode" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNum" class="form-width">
        <el-input v-model="fromlist.phoneNum" :disabled="true"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks" class="form-width">
        <el-input v-model="fromlist.remarks" :disabled="true"></el-input>
      </el-form-item>


      <h2 style="margin: 2rem 0 ;">教学档案</h2>

      <div style="display: flex;margin-bottom:10px;">

        <el-form label-position="left" label-width="130" :model="fromlist" ref="form" inline :rules="rules">

          <el-form-item label="档案馆代码" prop="archiveCode" class="form-width">
            <el-input v-model="fromlist.archiveCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="全宗号" prop="fullSetCode" class="form-width">
            <el-input v-model="fromlist.fullSetCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="门类代码" prop="categoryCode" class="form-width">
            <el-input v-model="fromlist.categoryCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="类别号" prop="categoryId" class="form-width">
            <el-input v-model="fromlist.categoryId" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="项目号" prop="projectId" class="form-width">
            <el-input v-model="fromlist.projectId" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="目录号" prop="directoryCode" class="form-width">
            <el-input v-model="fromlist.directoryCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="年度" prop="annual" class="form-width">
            <el-input v-model="fromlist.annual" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="保管期限代码" prop="retentionPeriodCode" class="form-width">
            <el-input v-model="fromlist.retentionPeriodCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="机构(问题)" prop="institution" class="form-width">
            <el-input v-model="fromlist.institution" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="案卷号" prop="caseNumber" class="form-width">
            <el-input v-model="fromlist.caseNumber" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="件号" prop="itemNumber" class="form-width">
            <el-input v-model="fromlist.itemNumber" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="文件标题" prop="documentTitle" class="form-width">
            <el-input v-model="fromlist.documentTitle" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="dateTime" class="form-width">
            <el-date-picker v-model="fromlist.dateTime" :disabled="formDisabled" value-format="YYYY-MM-DD" type="date"
              style="width:100%;" />
          </el-form-item>
          <el-form-item label="责任者" prop="responsiblePerson" class="form-width">
            <el-input v-model="fromlist.responsiblePerson" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="specification" class="form-width">
            <el-input v-model="fromlist.specification" :disabled="formDisabled"></el-input>
          </el-form-item>

          <el-form-item label="件数" prop="itemCount" class="form-width">
            <el-input-number v-model="fromlist.itemCount" :min="1" :max="10" />
            <!-- <el-input v-model="fromlist.itemCount" type="number" :disabled="formDisabled"></el-input> -->
          </el-form-item>

          <el-form-item label="页数" prop="pageCount" class="form-width">
            <el-input-number v-model="fromlist.pageCount" :min="1" :max="10" />
            <!-- <el-input v-model="fromlist.pageCount" type="number" :disabled="formDisabled"></el-input> -->
          </el-form-item>

          <el-form-item label="保管期限" prop="retentionPeriod" class="form-width">
            <el-input v-model="fromlist.retentionPeriod" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="密级" prop="confidentialityLevel" class="form-width">
            <el-input v-model="fromlist.confidentialityLevel" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="公开属性" prop="disclosureAttribute" class="form-width">
            <el-input v-model="fromlist.disclosureAttribute" :disabled="formDisabled"></el-input>
          </el-form-item>

          <el-form-item label="开放标识" prop="openFlag" class="form-width">
            <el-input-number v-model="fromlist.openFlag" :min="1" :max="10" />
            <!-- <el-input v-model="fromlist.openFlag" :disabled="formDisabled"></el-input> -->
          </el-form-item>
          <el-form-item label="附注" prop="remark" class="form-width">
            <el-input v-model="fromlist.remark" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="主题词或关键词" prop="keywords" class="form-width">
            <el-input v-model="fromlist.keywords" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="存储位置" prop="storageLocation" class="form-width">
            <el-input v-model="fromlist.storageLocation" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="著录者" prop="cataloger" class="form-width">
            <el-input v-model="fromlist.cataloger" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="著录日期" prop="catalogDate" class="form-width">
            <el-date-picker v-model="fromlist.catalogDate" :disabled="formDisabled" value-format="YYYY-MM-DD"
              type="date" style="width:100%;" />
          </el-form-item>

          <el-form-item label="归档单位" prop="archivingUnit" class="form-width">
            <el-input v-model="fromlist.archivingUnit" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="归档人" prop="archiver" class="form-width">
            <el-input v-model="fromlist.archiver" :disabled="formDisabled"></el-input>
          </el-form-item>

          <el-form-item label="归档时间" prop="archiveTime" class="form-width">
            <el-date-picker v-model="fromlist.archiveTime" :disabled="formDisabled" value-format="YYYY-MM-DD"
              type="date" style="width:100%;" />
          </el-form-item>

          <el-form-item label="电文文件" prop="electronicDocument" class="form-width">
            <el-input v-model="fromlist.electronicDocument" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="电文文件元数据" prop="electronicDocumentMetadata" class="form-width">
            <el-input v-model="fromlist.electronicDocumentMetadata" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="notes" class="form-width">
            <el-input v-model="fromlist.notes" :disabled="formDisabled"></el-input>
          </el-form-item>




        </el-form>

      </div>
    </el-form>

    <template #footer v-if="dialogTitle != '查看'">
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button v-if="this.dialogTitle == '新增'" @click="this.$refs.form.resetFields()">重置</el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import allApi from '@/api/allApi.js';
import searchForm from '@/views/components/searchForm.vue';
import axios from "axios";
import editForm from "./edit.vue"
import formVue from './form.vue';

export default {
  data() {
    return {
      fromlist: '',
      dialogVisible: false,
      form: {
        studentId: '',
        name: '',
        idCard: '',
        region: '',

      },
      showAdditionalOptions: false,  // 控制显示更多选项
      currentPage: 1,
      pageSize: 10,
      total: 0,
      treeData: [],
      treeButton: true,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      tableData: [],
      //   taskId: null,
      webSocket: null,
      progressPercent: 0,
      progressShow: false,
      selectList: [],
      param: {
        admissionAcademy: '',
        admissionMajor: '',
        admissionTime: '',
      },
      officeId: this.$TOOL.data.get("USER_INFO").officeDTO.id,
      tableHead: [
        { prop: 'archivalNum', label: '档号', },
        { prop: 'caseTitle', label: '案卷题名', },
        { prop: 'fileTitle', label: '文件标题', },
        { prop: 'saveLocation', label: '存储位置', },
        { prop: 'pageLocation', label: '所在页', },
        { prop: 'pageNum', label: '页面序号', },
        { prop: 'examineeNum', label: '考生号', },
        { prop: 'admissionNum', label: '准考证号', },
        { prop: 'classId', label: '班号', },
        { prop: 'studentId', label: '学号', },
        { prop: 'name', label: '姓名', },
        { prop: 'gender', label: '性别', },
        { prop: 'birthday', label: '出生日期', },
        { prop: 'politicalOutlook', label: '政治面貌', },
        { prop: 'nation', label: '民族', },
        { prop: 'idCard', label: '身份证号码', },
        { prop: 'planNature', label: '计划性质', },
        { prop: 'admissionSchools', label: '录取学校', },
        { prop: 'admissionAcademy', label: '录取学院', },
        { prop: 'admissionMajor', label: '录取专业', },
        { prop: 'admissionTime', label: '录取时间', },
        { prop: 'gradation', label: '层次', },
        { prop: 'educationalSystem', label: '学制', },
        { prop: 'learningForms', label: '学习形式', },
        { prop: 'examineeSort', label: '考生类别', },
        { prop: 'category', label: '科类', },
        { prop: 'batch', label: '批次', },
        { prop: 'graduationSchool', label: '毕业学校', },
        { prop: 'sourceArea', label: '来源地区', },
        { prop: 'areaName', label: '地区名称', },
        { prop: 'homeAddress', label: '家庭(邮寄)地址', },
        { prop: 'postalCode', label: '邮政编码', },
        { prop: 'phoneNum', label: '联系电话', },
        { prop: 'infoSource', label: '信息源', },
        { prop: 'remarks', label: '备注', },

        { prop: 'archiveCode', label: '档案馆代码', },
        { prop: 'fullSetCode', label: '全宗号', },
        { prop: 'categoryCode', label: '门类代码', },
        { prop: 'categoryId', label: '类别号', },
        { prop: 'projectId', label: '项目号', },
        { prop: 'directoryCode', label: '目录号', },
        { prop: 'annual', label: '年度', },
        { prop: 'retentionPeriodCode', label: '保管期限代码', },
        { prop: 'institution', label: '机构问题', },
        { prop: 'caseNumber', label: '案卷号', },
        { prop: 'itemNumber', label: '件号', },
        { prop: 'documentTitle', label: '文件标题', },
        { prop: 'dateTime', label: '日期', },
        { prop: 'responsiblePerson', label: '责任者', },
        { prop: 'specification', label: '规格', },
        { prop: 'itemCount', label: '件数', },
        { prop: 'pageCount', label: '页数', },
        { prop: 'retentionPeriod', label: '保管期限', },
        { prop: 'confidentialityLevel', label: '密级', },
        { prop: 'disclosureAttribute', label: '公开属性', },
        { prop: 'openFlag', label: '开放标识', },
        { prop: 'remark', label: '附注', },
        { prop: 'keywords', label: '主题词或关键词', },
        { prop: 'storageLocation', label: '存储位置', },
        { prop: 'cataloger', label: '著录者', },
        { prop: 'catalogDate', label: '著录日期', },
        { prop: 'archivingUnit', label: '归档单位', },
        { prop: 'archiver', label: '归档人', },
        { prop: 'archiveTime', label: '归档时间', },
        { prop: 'electronicDocument', label: '电文文件', },
        { prop: 'electronicDocumentMetadata', label: '电文文件元数据', },
        { prop: 'notes', label: '备注', },
      ],
    };
  },
  components: {
    searchForm,
    editForm,
    formVue,
  },

  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    }
  },

  mounted() {
    this.search();
    this.getTree();
  },
  beforeDestroy() {
    if (this.webSocket) {
      this.webSocket.close();
    }
  },
  methods: {
    handleClick(row) {

      this.dialogVisible = true
      // alert("nihao")
      this.fromlist = JSON.parse(JSON.stringify(row))
      console.log(this.fromlist, '     this.fromlist');
    },
    open() {
      this.$alert('这是一段内容', '标题名称', {
        confirmButtonText: '确定',
        callback: action => {
          this.$message({
            type: 'info',
            message: `action: ${action}`
          });
        }
      });
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
    getTree() {
      var officeId = this.officeId
      allApi.catalogTree({ officeId: officeId}).then(res => {
        this.treeData = res
      })
    },
    //树选中
    handleNodeClick(val) {
      let node = this.$refs.treeRef.getNode(val)
      if (node.level == 1) {
        this.param.admissionAcademy = val.label
        this.param.admissionMajor = ''
        this.param.admissionTime = ''
      } else if (node.level == 2) {
        this.param.admissionAcademy = node.parent.data.label
        this.param.admissionMajor = val.label
        this.param.admissionTime = ''
      } else if (node.level == 3) {
        this.param.admissionAcademy = node.parent.parent.data.label
        this.param.admissionMajor = node.parent.data.label
        this.param.admissionTime = val.label
      }
      this.search()
    },
    // 查询方法
    search() {
      console.log(this.form, 'from')
      allApi.listEnrollInfo({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.form,
        // ...this.$refs.searchForm.formItem,
        ...this.param,
      }).then((res) => {
        this.tableData = res.records;
        console.log(res.records, 'this.tableData111111111111 ')
        this.total = res.total;
      });
    },
    tableSelect(selection) {
      this.selectList = []
      for (let i = 0; i < selection.length; i++) {
        const e = selection[i];
        this.selectList.push(e.id)
      }
    },
    //  批量删除
    deleteDatabase() {
      // 立即刷新页面
      location.reload();

      // 如果你想在刷新前发起请求,不等待其完成,可以这样做:
      axios.get(`${this.$http.BASE_URL}/excel/deleteDatabase`, {
        headers: {
          // 如果有需要,可以添加请求头内容
        }
      })
        .then(response => {
          console.log('999'); // 请求成功后输出 "999"
          // 注意:由于页面已经刷新,这里的代码可能不会被执行
        })
        .catch(error => {
          console.error('Error deleting database:', error);
          // 同样,这里的错误处理在页面刷新后也不会被执行
        });
    },



    //下载导入模版

    // 下载模板的方法
    downloadTemplate() {
      // 将 this.selectList 中的每个项目转换为字符串的数组
      const dowmids = this.selectList.map(item => item.toString());

      const dowm = JSON.parse(JSON.stringify(dowmids))

      // 调用 API 函数并直接传递数组
      allApi.dowmfrom(dowm)
        .then((res) => {
          console.log(res, '111');
          const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
          // 创建下载链接
          const downloadUrl = window.URL.createObjectURL(blob);
          const link = document.createElement('a');
          link.href = downloadUrl;
          // 设置下载的文件名
          link.download = '导入模板.xlsx';
          // 触发点击事件,下载文件
          link.click();
          // 释放 URL 对象
          window.URL.revokeObjectURL(downloadUrl);
        })
        .catch(err => {
          console.error('Error downloading template:', err);
        });



      // // allApi.downloadTemplateEnrollInfo().then(res => {
      // //   // 创建一个 Blob 对象
      //   const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
      //   // 创建下载链接
      //   const downloadUrl = window.URL.createObjectURL(blob);
      //   const link = document.createElement('a');
      //   link.href = downloadUrl;
      //   // 设置下载的文件名
      //   link.download = '导入模板.xlsx';
      //   // 触发点击事件,下载文件
      //   link.click();
      //   // 释放 URL 对象
      //   window.URL.revokeObjectURL(downloadUrl);
      // // })
    },
    //教务处导入模板
    downloadRegisyrarTemplate() {
      allApi.regisyrarEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '教务处导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    //继续教育学院导入模板
    downloadEducation() {
      allApi.educationEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '继续教育学院导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    //研究生导入模板
    downloadGraduationTemplate() {
      allApi.graduationEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '研究生院导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    beforeUpload() {
      if (!this.progressShow) {
        this.progressPercent = 0
        this.progressShow = true
        this.initializeWebSocket()
      } else {
        this.$message.warning("请等待导入完成")
        return false
      }
    },
    // 初始化 WebSocket 连接
    initializeWebSocket() {
      //无论是开发环境还是部署环境,都用VITE_APP_BASE_WS
      this.webSocket = new WebSocket(import.meta.env.VITE_APP_BASE_WS);
      this.webSocket.onmessage = (event) => {
        const progress = JSON.parse(event.data).progress;
        this.progressPercent = progress;
        // console.log(this.progressPercent, ' this.progressPercent ')

        if (this.progressPercent >= 100) {
          this.progressShow = false
          this.$message.success("导入完成");
          this.search()
          this.getTree();
        }
      };
    },
    add(type) {

      this.$refs.formVue.init(type)
    },

    // 批量编辑
    batchEdit() {
      if (this.selectList.length === 0) {
        this.$message.warning("请选择要编辑的数据")
        return
      }
      this.$refs.editForm.init(this.selectList)

    },
    // 重置
    handleExit() {
      this.form.studentId = '',
        this.form.name = '',
        this.form.idCard = '',
        this.form.region = '',
        this.param.admissionAcademy = ''
      this.param.admissionMajor = ''
      this.param.admissionTime = ''
      this.search();
      this.getTree();
      //   this.progressPercent = 0; // 重置进度条
      // this.$refs.searchForm.clear();


    },
  }
};
</script>

<style lang="less" scoped>
.form-width {
  width: 30%;
}

.box {
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
}

.el-progress {
  margin-top: 10px;
}

:deep(.el-table .cell) {
  width: max-content;
  display: inline-block;
}

.tree-button {
  position: absolute;
  right: 0;
  bottom: 50%;
  font-size: 25px;
  width: 0;
}
</style>

首页 暂不使用 


<!-- ----------------------------------------------------- -->

<!-- <template>
  录取信息页面
  <div class="box">
    <el-card :style="{width:treeButton? '19.5%':'35px',position: 'relative',transition: '1s'}">
      <el-tree v-if="treeButton" :data="treeData" :props="defaultProps" @node-click="handleNodeClick" ref="treeRef" style="width:100%;" />
      <el-button type="primary" text @click="this.treeButton = !this.treeButton" class="tree-button">{{ treeButton ? '<<' : '>>'}}</el-button>
    </el-card>
    <el-card :style="{width: treeButton?'79.5%':'100%',overflow:'auto',transition: '1s'}">
      <searchForm ref="searchForm" />
      <div style="display: flex;margin-bottom:10px;">
        <el-button type="primary" @click="search()">查询</el-button>
        <el-button type="primary" @click="handleExit()">重置</el-button>
        <el-button type="success" @click="add('add')" style="margin-left:20px;">新增</el-button>
        <el-button type="success" @click="downloadTemplate()" style="margin-left:20px;">下载导入模板</el-button>
        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls" :action="`${this.$http.BASE_URL}/excel/importAdmission`" :show-file-list="false" :before-upload="beforeUpload" :disabled="progressShow">
          <el-button type="success" style="margin-left:20px;" :disabled="progressShow">导入</el-button>
        </el-upload>
        <el-button type="success" @click="this.$refs.MyTablePrint.dialogVisible = true" style="margin-left:20px;">打印</el-button>
      </div>

      显示隐藏部分
      <el-button type="primary" @click="showAdditionalOptions = !showAdditionalOptions" style="position: relative; right: 20px;margin-left:20px;margin-bottom:10px;">
        {{ showAdditionalOptions ? '隐藏更多选项' : '显示更多选项' }}
      </el-button>

      <div v-if="showAdditionalOptions" style="display: flex;margin-bottom:10px;">
        <el-button type="warning" @click="downloadRegisyrarTemplate()" :disabled="progressShow">下载教务处导入模板</el-button>
        <el-button type="warning" @click="downloadEducation()" :disabled="progressShow">下载继续教育学院导入模板</el-button>
        <el-button type="warning" style="margin-right:15px;" @click="downloadGraduationTemplate()" :disabled="progressShow">下载研究生导入模板</el-button>

        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls" :action="`${this.$http.BASE_URL}/excel/import`" :show-file-list="false" :before-upload="beforeUpload" :disabled="progressShow">
          <el-button type="success" style="margin-right:15px;" :disabled="progressShow">导入教务处数据</el-button>
        </el-upload>
        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls" :action="`${this.$http.BASE_URL}/excel/importContinue`" :show-file-list="false" :before-upload="beforeUpload" :disabled="progressShow">
          <el-button type="success" style="margin-right:15px;" :disabled="progressShow">导入继续教育学院数据</el-button>
        </el-upload>
        <el-upload v-model:file-list="fileList" accept=".xlsx,.xls" :action="`${this.$http.BASE_URL}/excel/importEducation`" :show-file-list="false" :before-upload="beforeUpload" :disabled="progressShow">
          <el-button type="success" style="margin-right:15px;" :disabled="progressShow">导入研究生院数据</el-button>
        </el-upload>

        <el-button type="primary" @click="deleteDatabase()">一键删库</el-button>
        <el-button type="primary" @click="batchEdit()">批量编辑</el-button>
      </div>

      <el-progress :percentage="progressPercent" v-if="progressShow" style="margin-bottom:10px;" />

      列表
      <el-table :data="tableData" border @select="tableSelect" @select-all="tableSelect" row-key="id" ref="table" table-layout="auto" style="width: 100%;">
        <el-table-column type="selection" reserve-selection width="55" align="center" fixed="left" />
        <el-table-column v-for="j in tableHead" :key="j.prop" :prop="j.prop" :label="j.label" width="" align="center" />
        <el-table-column v-for="item in $myMethod.getCustom(tableData[0])" :key="item" :prop="item" :label="item.slice(7)" width="100" align="center" />
      </el-table>

      分页
      <el-pagination v-model:current-page="currentPage" v-model:page-size="pageSize" :page-sizes="[10, 20, 30, 50]" layout="total, sizes, prev, pager, next, jumper" :total="total" @size-change="search" @current-change="search" style="margin-top: 20px; display:flex; justify-content: flex-end;" />
    </el-card>
  </div>
  <editForm ref="editForm" @search="handleExit" />
  <formVue ref="formVue" @search="handleExit" />
  <MyTablePrint ref="MyTablePrint" :tableHead="tableHead" :tableData="tableData" />
</template>

<script>
import allApi from '@/api/allApi.js';
import searchForm from '@/views/components/searchForm.vue';
import axios from "axios";
import editForm from "./edit.vue"
import formVue from './form.vue';

export default {
  data() {
    return {
      showAdditionalOptions: false,  // 控制显示更多选项
      currentPage: 1,
      pageSize: 10,
      total: 0,
      treeData: [],
      treeButton: true,
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      tableData: [],
      //   taskId: null,
      webSocket: null,
      progressPercent: 0,
      progressShow: false,
      selectList: [],
      param: {
        admissionAcademy: '',
        admissionMajor: '',
        admissionTime: '',
      },
      tableHead: [
        { prop: 'archivalNum', label: '档号', },
        { prop: 'caseTitle', label: '案卷题名', },
        { prop: 'fileTitle', label: '文件标题', },
        { prop: 'saveLocation', label: '存储位置', },
        { prop: 'pageLocation', label: '所在页', },
        { prop: 'pageNum', label: '页面序号', },
        { prop: 'examineeNum', label: '考生号', },
        { prop: 'admissionNum', label: '准考证号', },
        { prop: 'classId', label: '班号', },
        { prop: 'studentId', label: '学号', },
        { prop: 'name', label: '姓名', },
        { prop: 'gender', label: '性别', },
        { prop: 'birthday', label: '出生日期', },
        { prop: 'politicalOutlook', label: '政治面貌', },
        { prop: 'nation', label: '民族', },
        { prop: 'idCard', label: '身份证号码', },
        { prop: 'planNature', label: '计划性质', },
        { prop: 'admissionSchools', label: '录取学校', },
        { prop: 'admissionAcademy', label: '录取学院', },
        { prop: 'admissionMajor', label: '录取专业', },
        { prop: 'admissionTime', label: '录取时间', },
        { prop: 'gradation', label: '层次', },
        { prop: 'educationalSystem', label: '学制', },
        { prop: 'learningForms', label: '学习形式', },
        { prop: 'examineeSort', label: '考生类别', },
        { prop: 'category', label: '科类', },
        { prop: 'batch', label: '批次', },
        { prop: 'graduationSchool', label: '毕业学校', },
        { prop: 'sourceArea', label: '来源地区', },
        { prop: 'areaName', label: '地区名称', },
        { prop: 'homeAddress', label: '家庭(邮寄)地址', },
        { prop: 'postalCode', label: '邮政编码', },
        { prop: 'phoneNum', label: '联系电话', },
        { prop: 'infoSource', label: '信息源', },
        { prop: 'remarks', label: '备注', },
      ],
    };
  },
  components: {
    searchForm,
    editForm,
    formVue,
  },
  mounted() {
    this.search();
    this.getTree();
    // this.initializeWebSocket();  // Initialize WebSocket connection
  },
  beforeDestroy() {
    if (this.webSocket) {
      this.webSocket.close();
    }
  },
  methods: {
    getTree() {
      allApi.catalogTree().then(res => {
        this.treeData = res
      })
    },
    //树选中
    handleNodeClick(val) {
      let node = this.$refs.treeRef.getNode(val)
      if (node.level == 1) {
        this.param.admissionAcademy = val.label
        this.param.admissionMajor = ''
        this.param.admissionTime = ''
      } else if (node.level == 2) {
        this.param.admissionAcademy = node.parent.data.label
        this.param.admissionMajor = val.label
        this.param.admissionTime = ''
      } else if (node.level == 3) {
        this.param.admissionAcademy = node.parent.parent.data.label
        this.param.admissionMajor = node.parent.data.label
        this.param.admissionTime = val.label
      }
      this.search()
    },
    // 查询方法
    search() {
      allApi.listEnrollInfo({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        ...this.$refs.searchForm.formItem,
        ...this.param,
      }).then((res) => {
        this.tableData = res.records;
        this.total = res.total;
      });
    },
    tableSelect(selection) {
      this.selectList = []
      for (let i = 0; i < selection.length; i++) {
        const e = selection[i];
        this.selectList.push(e.id)
      }
    },
    deleteDatabase() {
      axios.get(`${this.$http.BASE_URL}/excel/deleteDatabase`, {
        headers: {
        }
      })
        .then(response => {
        })
        .catch(error => {
        });
    },
    //下载导入模版
    downloadTemplate() {
      allApi.downloadTemplateEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    //教务处导入模板
    downloadRegisyrarTemplate() {
      allApi.regisyrarEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '教务处导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    //继续教育学院导入模板
    downloadEducation() {
      allApi.educationEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '继续教育学院导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    //研究生导入模板
    downloadGraduationTemplate() {
      allApi.graduationEnrollInfo().then(res => {
        // 创建一个 Blob 对象
        const blob = new Blob([res], { type: 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet' });
        // 创建下载链接
        const downloadUrl = window.URL.createObjectURL(blob);
        const link = document.createElement('a');
        link.href = downloadUrl;
        // 设置下载的文件名
        link.download = '研究生院导入模板.xlsx';
        // 触发点击事件,下载文件
        link.click();
        // 释放 URL 对象
        window.URL.revokeObjectURL(downloadUrl);
      })
    },
    beforeUpload() {
      if (!this.progressShow) {
        this.progressPercent = 0
        this.progressShow = true
        this.initializeWebSocket()
      } else {
        this.$message.warning("请等待导入完成")
        return false
      }
    },
    // 初始化 WebSocket 连接
    initializeWebSocket() {
      //无论是开发环境还是部署环境,都用VITE_APP_BASE_WS
      this.webSocket = new WebSocket(import.meta.env.VITE_APP_BASE_WS);
      this.webSocket.onmessage = (event) => {
        const progress = JSON.parse(event.data).progress;
        this.progressPercent = progress;

        if (this.progressPercent >= 100) {
          this.progressShow = false
          this.$message.success("导入完成");
          this.search()
          this.getTree();
        }
      };
    },
    add(type) {
      this.$refs.formVue.init(type)
    },
    batchEdit() {
      if (this.selectList.length === 0) {
        this.$message.warning("请选择要编辑的数据")
        return
      }
      this.$refs.editForm.init(this.selectList)
    },
    // 重置
    handleExit() {
      this.param.admissionAcademy = ''
      this.param.admissionMajor = ''
      this.param.admissionTime = ''
      this.search();
      this.getTree();
      //   this.progressPercent = 0; // 重置进度条
      this.$refs.searchForm.clear();
    },
  }
};
</script>

<style lang="less" scoped>
.box {
  width: 100%;
  height: calc(100% - 10px);
  margin-top: 10px;
  padding: 20px;
  background-color: #fff;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.el-progress {
  margin-top: 10px;
}
:deep(.el-table .cell) {
  width: max-content;
  display: inline-block;
}
.tree-button {
  position: absolute;
  right: 0;
  bottom: 50%;
  font-size: 25px;
  width: 0;
}
</style> -->

 子页面 formVue

<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="70%" center @close="cancel">
    <el-form label-position="left" label-width="130" :model="formItem" ref="form" inline :rules="rules">
      <h2 style="margin: 2rem 0 ;">学生档案</h2>
      <el-form-item label="档号" prop="archivalNum" class="form-width">
        <el-input v-model="formItem.archivalNum" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="案卷题名" prop="caseTitle" class="form-width">
        <el-input v-model="formItem.caseTitle" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="文件标题" prop="fileTitle" class="form-width">
        <el-input v-model="formItem.fileTitle" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="存储位置" prop="saveLocation" class="form-width">
        <el-input v-model="formItem.saveLocation" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="所在页" prop="pageLocation" class="form-width">
        <el-input v-model="formItem.pageLocation" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="页面序号" prop="pageNum" class="form-width">
        <el-input v-model="formItem.pageNum" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="考生号" prop="examineeNum" class="form-width">
        <el-input v-model="formItem.examineeNum" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="准考证号" prop="admissionNum" class="form-width">
        <el-input v-model="formItem.admissionNum" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="学号" prop="studentId" class="form-width">
        <el-input-number v-model="formItem.studentId" :min="1" :max="10" />
        <!-- <el-input v-model="formItem.studentId" type="number" :disabled="formDisabled"></el-input> -->
      </el-form-item>
      <el-form-item label="姓名" prop="name" class="form-width">
        <el-input v-model="formItem.name" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="性别" prop="gender" class="form-width">
        <el-input v-model="formItem.gender" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="出生日期" prop="birthday" class="form-width">
        <el-date-picker v-model="formItem.birthday" :disabled="formDisabled" value-format="YYYY-MM-DD" type="date"
          style="width:100%;" />
      </el-form-item>
      <el-form-item label="政治面貌" prop="politicalOutlook" class="form-width">
        <el-input v-model="formItem.politicalOutlook" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="民族" prop="nation" class="form-width">
        <el-input v-model="formItem.nation" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard" class="form-width">
        <el-input v-model="formItem.idCard" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="计划性质" prop="planNature" class="form-width">
        <el-input v-model="formItem.planNature" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="录取学校" prop="admissionSchools" class="form-width">
        <el-input v-model="formItem.admissionSchools" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="录取学院" prop="admissionAcademy" class="form-width">
        <el-input v-model="formItem.admissionAcademy" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="录取专业" prop="admissionMajor" class="form-width">
        <el-input v-model="formItem.admissionMajor" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="录取时间" prop="admissionTime" class="form-width">
        <el-date-picker v-model="formItem.admissionTime" :disabled="formDisabled" value-format="YYYY-MM-DD" type="date"
          style="width:100%;" />
      </el-form-item>
      <el-form-item label="层次" prop="gradation" class="form-width">
        <el-input v-model="formItem.gradation" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="学制" prop="educationalSystem" class="form-width">
        <el-input v-model="formItem.educationalSystem" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="学习形式" prop="learningForms" class="form-width">
        <el-input v-model="formItem.learningForms" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="考生类别" prop="examineeSort" class="form-width">
        <el-input v-model="formItem.examineeSort" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="科类" prop="category" class="form-width">
        <el-input v-model="formItem.category" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="批次" prop="batch" class="form-width">
        <el-input v-model="formItem.batch" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="毕业学校" prop="graduationSchool" class="form-width">
        <el-input v-model="formItem.graduationSchool" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="来源地区" prop="sourceArea" class="form-width">
        <el-input v-model="formItem.sourceArea" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="地区名称" prop="areaName" class="form-width">
        <el-input v-model="formItem.areaName" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="家庭(邮寄)地址" prop="homeAddress" class="form-width">
        <el-input v-model="formItem.homeAddress" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="邮政编码" prop="postalCode" class="form-width">
        <el-input v-model="formItem.postalCode" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="联系电话" prop="phoneNum" class="form-width">
        <el-input v-model="formItem.phoneNum" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks" class="form-width">
        <el-input v-model="formItem.remarks" :disabled="formDisabled"></el-input>
      </el-form-item>

      <h2 style="margin: 2rem 0 ;">教学档案</h2>

      <div style="display: flex;margin-bottom:10px;">

        <el-form label-position="left" label-width="130" :model="formItem2" ref="form" inline :rules="rules">

          <el-form-item label="档案馆代码" prop="archiveCode" class="form-width">
            <el-input v-model="formItem2.archiveCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="全宗号" prop="fullSetCode" class="form-width">
            <el-input v-model="formItem2.fullSetCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="门类代码" prop="categoryCode" class="form-width">
            <el-input v-model="formItem2.categoryCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="类别号" prop="categoryId" class="form-width">
            <el-input v-model="formItem2.categoryId" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="项目号" prop="projectId" class="form-width">
            <el-input v-model="formItem2.projectId" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="目录号" prop="directoryCode" class="form-width">
            <el-input v-model="formItem2.directoryCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="年度" prop="annual" class="form-width">
            <el-input v-model="formItem2.annual" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="保管期限代码" prop="retentionPeriodCode" class="form-width">
            <el-input v-model="formItem2.retentionPeriodCode" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="机构问题" prop="institution" class="form-width">
            <el-input v-model="formItem2.institution" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="案卷号" prop="caseNumber" class="form-width">
            <el-input v-model="formItem2.caseNumber" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="件号" prop="itemNumber" class="form-width">
            <el-input v-model="formItem2.itemNumber" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="文件标题" prop="documentTitle" class="form-width">
            <el-input v-model="formItem2.documentTitle" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="日期" prop="dateTime" class="form-width">
            <el-date-picker v-model="formItem2.dateTime" :disabled="formDisabled" value-format="YYYY-MM-DD" type="date"
              style="width:100%;" />
          </el-form-item>
          <el-form-item label="责任者" prop="responsiblePerson" class="form-width">
            <el-input v-model="formItem2.responsiblePerson" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="规格" prop="specification" class="form-width">
            <el-input v-model="formItem2.specification" :disabled="formDisabled"></el-input>
          </el-form-item>

          <el-form-item label="件数" prop="itemCount" class="form-width">
            <el-input-number v-model="formItem2.itemCount" :min="1" :max="10" />
            <!-- <el-input v-model="formItem2.itemCount" type="number" :disabled="formDisabled"></el-input> -->
          </el-form-item>

          <el-form-item label="页数" prop="pageCount" class="form-width">
            <el-input-number v-model="formItem2.pageCount" :min="1" :max="10" />
            <!-- <el-input v-model="formItem2.pageCount" type="number" :disabled="formDisabled"></el-input> -->
          </el-form-item>

          <el-form-item label="保管期限" prop="retentionPeriod" class="form-width">
            <el-input v-model="formItem2.retentionPeriod" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="密级" prop="confidentialityLevel" class="form-width">
            <el-input v-model="formItem2.confidentialityLevel" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="公开属性" prop="disclosureAttribute" class="form-width">
            <el-input v-model="formItem2.disclosureAttribute" :disabled="formDisabled"></el-input>
          </el-form-item>

          <el-form-item label="开放标识" prop="openFlag" class="form-width">
            <el-input-number v-model="formItem2.openFlag" :min="1" :max="10" />
            <!-- <el-input v-model="formItem2.openFlag" :disabled="formDisabled"></el-input> -->
          </el-form-item>
          <el-form-item label="附注" prop="remark" class="form-width">
            <el-input v-model="formItem2.remark" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="主题词或关键词" prop="keywords" class="form-width">
            <el-input v-model="formItem2.keywords" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="存储位置" prop="storageLocation" class="form-width">
            <el-input v-model="formItem2.storageLocation" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="著录者" prop="cataloger" class="form-width">
            <el-input v-model="formItem2.cataloger" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="著录日期" prop="catalogDate" class="form-width">
            <el-date-picker v-model="formItem2.catalogDate" :disabled="formDisabled" value-format="YYYY-MM-DD"
              type="date" style="width:100%;" />
          </el-form-item>

          <el-form-item label="归档单位" prop="archivingUnit" class="form-width">
            <el-input v-model="formItem2.archivingUnit" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="归档人" prop="archiver" class="form-width">
            <el-input v-model="formItem2.archiver" :disabled="formDisabled"></el-input>
          </el-form-item>

          <el-form-item label="归档时间" prop="archiveTime" class="form-width">
            <el-date-picker v-model="formItem2.archiveTime" :disabled="formDisabled" value-format="YYYY-MM-DD"
              type="date" style="width:100%;" />
          </el-form-item>

          <el-form-item label="电文文件" prop="electronicDocument" class="form-width">
            <el-input v-model="formItem2.electronicDocument" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="电文文件元数据" prop="electronicDocumentMetadata" class="form-width">
            <el-input v-model="formItem2.electronicDocumentMetadata" :disabled="formDisabled"></el-input>
          </el-form-item>
          <el-form-item label="备注" prop="notes" class="form-width">
            <el-input v-model="formItem2.notes" :disabled="formDisabled"></el-input>
          </el-form-item>




        </el-form>

      </div>
    </el-form>
    <div v-if="this.dialogTitle == '新增'" style="text-align: center;">
      <div>当前{{ formNum + 1 }}/共计5条</div>
      <el-button @click="pageTurning(0)" type="text">第一条</el-button>
      <el-button @click="pageTurning(formNum - 1)" :disabled="formNum == 0" type="text">上一条</el-button>
      <el-button @click="pageTurning(formNum + 1)" :disabled="formNum == 4" type="text">下一条</el-button>
      <el-button @click="pageTurning(4)" type="text">最后一条</el-button>
      <el-button @click="saveNext" type="text">保存并编辑下一条</el-button>
    </div>
    <template #footer v-if="dialogTitle != '查看'">
      <div class="dialog-footer">
        <el-button type="primary" @click="save">保存</el-button>
        <el-button v-if="this.dialogTitle == '新增'" @click="this.$refs.form.resetFields()">重置</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import allApi from '@/api/allApi.js';
export default {
  props: [],
  data() {
    return {
      showAdditionalOptions: false,  // 控制显示更多选项
      dialogVisible: false,
      dialogTitle: "",
      tableRow: {},
      formDisabled: false,
      formList: [],
      formNum: 0,
      formItem: {
        archivalNum: '',
        caseTitle: '',
        fileTitle: '',
        saveLocation: '',
        pageLocation: '',
        pageNum: '',
        examineeNum: '',
        admissionNum: '',
        studentId: '',
        name: '',
        gender: '',
        birthday: '',
        politicalOutlook: '',
        nation: '',
        idCard: '',
        planNature: '',
        admissionSchools: '',
        admissionAcademy: '',
        admissionMajor: '',
        admissionTime: '',
        gradation: '',
        educationalSystem: '',
        learningForms: '',
        examineeSort: '',
        category: '',
        batch: '',
        graduationSchool: '',
        sourceArea: '',
        areaName: '',
        homeAddress: '',
        postalCode: '',
        phoneNum: '',
        remarks: '',
      },


      formItem2: {
        archiveCode: '', //档案馆代码
        fullSetCode: '', //全宗号
        categoryCode: '',  //门类代码
        categoryId: '',  //类别号
        projectId: '',  //项目号
        directoryCode: '',//目录号
        annual: '', // 年度
        retentionPeriodCode: '',  //保管期限代码
        institution: '',  // 机构(问题)
        caseNumber: '',  // 案卷号
        itemNumber: '',// 件号
        documentTitle: '',  // 文件标题
        dateTime: '', // 日期
        responsiblePerson: '', // 责任者
        specification: '',// 规格
        itemCount: 0, // 件数(记录文件件数)
        pageCount: 0, // 页数(记录文件页数)
        retentionPeriod: '', // 保管期限(描述文件的保管时长)
        confidentialityLevel: '',// 密级(记录文件的机密等级)
        disclosureAttribute: '',// 公开属性(记录文件的公开属性,如是否公开)
        openFlag: 0,// 开放标识(0表示不公开,1表示公开)
        remark: '', // 附注(存储关于档案的附加信息)
        keywords: '',  // 主题词或关键词(用于档案的关键词索引)
        storageLocation: '',// 存储位置(记录档案存储的位置)
        cataloger: '', // 著录者(记录档案信息的人员)
        catalogDate: 0, // 著录日期(记录档案信息的日期)
        archivingUnit: '', // 归档单位(归档文件的部门或单位)
        archiver: '',  // 归档人(执行归档操作的人员)
        archiveTime: '',// 归档时间(归档操作的日期)
        electronicDocument: '', // 电文文件(记录是否为电文文件,存储文件路径或名称)
        electronicDocumentMetadata: '',// 电文文件元数据(存储电文文件的元数据)
        notes: '', // 备注(存储其他额外信息)


      },
      rules: {
        studentId: [{ required: true, message: '必填项不能为空', trigger: 'blur' },],
        admissionAcademy: [{ required: true, message: '必填项不能为空', trigger: 'blur' },],
        // grade: [{ required: true, message: '必填项不能为空', trigger: 'blur' },],
        admissionMajor: [{ required: true, message: '必填项不能为空', trigger: 'blur' },],
        admissionTime: [{ required: true, message: '必填项不能为空', trigger: 'blur' },],
      },
    }
  },
  mounted() {


  },
  methods: {
    init(type, row) {
      this.dialogVisible = true
      this.tableRow = row
      if (type == 'view') {
        this.dialogTitle = '查看'
        this.formDisabled = true
        this.$nextTick(() => {
          //行数据回显
          Object.keys(this.tableRow).forEach(key => {
            this.formItem[key] = this.tableRow[key]
          })
        })
      } else if (type == 'edit') {
        this.dialogTitle = '编辑'
        this.$nextTick(() => {
          //行数据回显
          Object.keys(this.tableRow).forEach(key => {
            this.formItem[key] = this.tableRow[key]
          })
        })
      } else if (type == 'add') {
        this.dialogTitle = '新增'
        //沿用数据回显
        // Object.keys(this.$store.state.follow.enrollInfoForm).forEach(key => {
        //   this.formItem[key] = this.$store.state.follow.enrollInfoForm[key]
        // })
      }
    },
    // 最后一条
    pageTurning(num) {
      this.$refs.form.validate(val => {
        if (val) {
          this.formNum = num
          //formList数组里有数据说明是上一页,反显上一页数据,没有就是下一页,显示沿用数据
          this.formItem = { ...this.formList[num] ? this.formList[num] : this.$store.state.follow.enrollInfoForm }
        }
      })
    },
    //保存并编辑下一页
    saveNext() {
      this.$refs.form.validate(val => {
        if (val) {
          this.formList[this.formNum] = { ...this.formItem, ...this.formItem2 }
          this.saveFollow()//存储沿用数据
          this.formNum = this.formNum + 1
          this.pageTurning(this.formNum)
        }
      })
    },
    //存储沿用数据
    saveFollow() {
      this.$store.commit("getEnrollInfoForm", {
        archivalNum: this.formItem.archivalNum,
        caseTitle: this.formItem.caseTitle,
        fileTitle: this.formItem.fileTitle,
        saveLocation: this.formItem.saveLocation,
        pageLocation: this.formItem.pageLocation,
        pageNum: this.formItem.pageNum,
        studentId: Number(this.formItem.studentId) + 1,
        gender: this.formItem.gender,
        politicalOutlook: this.formItem.politicalOutlook,
        nation: this.formItem.nation,
        planNature: this.formItem.planNature,
        admissionSchools: this.formItem.admissionSchools,
        admissionAcademy: this.formItem.admissionAcademy,
        admissionMajor: this.formItem.admissionMajor,
        admissionTime: this.formItem.admissionTime,
        gradation: this.formItem.gradation,
        educationalSystem: this.formItem.educationalSystem,
        learningForms: this.formItem.learningForms,
        examineeSort: this.formItem.examineeSort,
        category: this.formItem.category,
        batch: this.formItem.batch,
        sourceArea: this.formItem.sourceArea,
        areaName: this.formItem.areaName,





      });
    },
    save() {
      this.$refs.form.validate(val => {
        if (val) {
          if (this.dialogTitle == '新增') {

            console.log('archiveTime:', this.formItem2.archiveTime);

            this.formList[this.formNum] = { ...this.formItem, ...this.formItem2 }
            console.log(this.formList[this.formNum] = { ...this.formItem, ...this.formItem2 })
            this.saveFollow()//存储沿用数据
            allApi.addEnrollInfo(this.formList).then((res) => {
              if (res.code == '0000') {
                this.$message.success('操作成功')
                this.$emit('search')
                this.cancel()
                location.reload();
              } else {
                this.$message.error(res.msg)
              }
            });
          } else if (this.dialogTitle == '编辑') {
            // allApi.saveArchivesInfo(this.formItem).then((res) => {
            //   if (res.code == '0000') {
            //     this.$message.success('操作成功')
            //     this.$emit('search')
            //     this.cancel()
            //   } else {
            //     this.$message.error(res.msg)
            //   }
            // });
          }
        }
      })
    },
    cancel() {
      this.dialogVisible = false
      this.formDisabled = false
      this.formNum = 0
      this.formList = []
      this.$refs.form && this.$refs.form.resetFields()
    },
  }
};
</script>
<style lang="less" scoped>
.form-width {
  width: 30%;
}

.el-card {
  margin-top: 10px;
}
</style>

子页面 editForm

<template>
  <el-dialog v-model="dialogVisible" :title="dialogTitle" width="70%" center @close="cancel">
    <el-form label-position="left" label-width="110" :model="formItem" ref="form" inline :rules="rules">
      <!-- <el-form-item label="姓名" prop="name" class="form-width">
        <el-input v-model="formItem.name" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="政治面貌" prop="politicalOutlook" class="form-width">
        <el-input v-model="formItem.politicalOutlook" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="身份证号码" prop="idCard" class="form-width">
        <el-input v-model="formItem.idCard" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="学习形式" prop="learningForms" class="form-width">
        <el-input v-model="formItem.learningForms" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="班号" prop="classId" class="form-width">
        <el-input v-model="formItem.classId" :disabled="formDisabled"></el-input>
      </el-form-item> -->

      <!-- 班号  份数 移交人,接收人、移交时间、信息源  没有 -->

      <el-form-item label="档号" prop="archivalNum" class="form-width">
        <el-input v-model="formItem.archivalNum" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="案卷题名" prop="caseTitle" class="form-width">
        <el-input v-model="formItem.caseTitle" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="文件标题" prop="documentTitle" class="form-width">
        <el-input v-model="formItem.documentTitle" :disabled="formDisabled"></el-input>
      </el-form-item>

      <el-form-item label="存储位置" prop="storageLocation" class="form-width">
        <el-input v-model="formItem.storageLocation" :disabled="formDisabled"></el-input>
      </el-form-item>

      <el-form-item label="所在页" prop="pageLocation" class="form-width">
        <el-input v-model="formItem.pageLocation" :disabled="formDisabled"></el-input>
      </el-form-item>

      <el-form-item label="页面序号" prop="pageNum" class="form-width">
        <el-input v-model="formItem.pageNum" :disabled="formDisabled"></el-input>
      </el-form-item>

      <el-form-item label="责任者" prop="responsiblePerson" class="form-width">
        <el-input v-model="formItem.responsiblePerson" :disabled="formDisabled"></el-input>
      </el-form-item>

      <el-form-item label="日期" prop="dateTime" class="form-width">
        <el-date-picker v-model="formItem.dateTime" :disabled="formDisabled" value-format="YYYY-MM-DD" type="date"
          style="width:100%;" />
      </el-form-item>

      <el-form-item label="规格" prop="specification" class="form-width">
        <el-input v-model="formItem.specification" :disabled="formDisabled"></el-input>
      </el-form-item>

      <el-form-item label="页数" prop="pageCount" class="form-width">
        <el-input-number v-model="formItem.pageCount" :min="1" :max="10" />

      </el-form-item>
      <el-form-item label="归档单位" prop="archivingUnit" class="form-width">
        <el-input v-model="formItem.archivingUnit" :disabled="formDisabled"></el-input>
      </el-form-item>
      <el-form-item label="备注" prop="remarks" class="form-width">
        <el-input v-model="formItem.remarks" :disabled="formDisabled"></el-input>
      </el-form-item>


    </el-form>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="cancel">取消</el-button>
        <el-button type="primary" @click="save">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>
<script>
import allApi from '@/api/allApi.js';
export default {
  props: [],
  data() {
    return {
      dialogVisible: false,
      dialogTitle: "",
      tableRow: {},
      formDisabled: false,
      ids: [],
      formItem: {
        archivalNum: '',
        caseTitle: '',
        documentTitle: '',
        storageLocation: '',
        pageLocation: "",
        pageNum: '',
        responsiblePerson: "",
        dateTime: '',
        specification: '',
        pageCount: '',
        archivingUnit: '',
        remarks: '',



        name: '',
        politicalOutlook: '',
        idCard: '',
        learningForms: '',
        classId: '',
      },
      rules: {
      },
    }
  },
  mounted() {

  },
  methods: {
    init(selectList) {
      this.dialogVisible = true
      this.ids = selectList

      console.log(selectList, 'selectList')
    },
    save() {
      this.$refs.form.validate(val => {
        if (val) {
          allApi.batchEditAffairsEnrollInfo({
            studentIds: this.ids,
            ...this.formItem,
          }).then((res) => {

            // console.log(selectList, 'selectList')
            if (res.code == '0000') {
              this.$message.success('操作成功')
              this.$emit('search')
              this.cancel()
            } else {
              this.$message.error(res.msg)
            }
          });
        }
      })
    },
    cancel() {
      this.dialogVisible = false
      this.formDisabled = false
      this.$refs.form && this.$refs.form.resetFields()
    },
  }
};
</script>
<style lang="less" scoped>
.form-width {
  width: 30%;
}

.el-card {
  margin-top: 10px;
}
</style>

 


http://www.kler.cn/a/571543.html

相关文章:

  • AI数据分析:deepseek生成SQL
  • nn.Identity 单位矩阵,同一矩阵
  • vue+elementui 实现上传文件/导入文件的功能
  • Golang的性能分析指标解读
  • Docker概念与架构
  • 【深入OpenCV图像处理:从基础到实战应用】
  • React 中 useState 的 基础使用
  • 医学图像处理开源库介绍:ITK、VTK 和 MITK
  • 【Java---数据结构】链表 LinkedList
  • CSS中各个元素的显示模式(块级/行内元素分类)
  • mysql唯一索引下插入数据死锁过程分析
  • 机器学习--特征选择
  • 每日OJ_牛客_游游的字母串_枚举_C++_Java
  • 高效卸载神器:深度体验分享
  • 探秘基带算法:从原理到5G时代的通信变革【三】Turbo 编解码
  • 【OpenCV C++】以时间命名存图,自动检查存储目录,若不存在自动创建, 按下空格、回车、Q、S自动存图
  • 爬虫逆向实战小记——解决webpack实记
  • 【借助 DeepSeek 之力:自动化 Web 渗透测试脚本编写与实战】
  • 大模型学习笔记------Llama 3模型架构简介
  • Python--面向对象高级(上)