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

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>
相关推荐
Sheldon一蓑烟雨任平生4 小时前
Vue3 插件(可选独立模块复用)
vue.js·vue3·插件·vue3 插件·可选独立模块·插件使用方式·插件中的依赖注入
鱼与宇6 小时前
苍穹外卖-VUE
前端·javascript·vue.js
用户47949283569156 小时前
Safari 中文输入法的诡异 Bug:为什么输入 @ 会变成 @@? ## 开头 做 @ 提及功能的时候,测试同学用 Safari 测出了个奇怪的问题
前端·javascript·浏览器
裴嘉靖6 小时前
Vue 生成 PDF 完整教程
前端·vue.js·pdf
毕设小屋vx ylw2824266 小时前
Java开发、Java Web应用、前端技术及Vue项目
java·前端·vue.js
冴羽7 小时前
今日苹果 App Store 前端源码泄露,赶紧 fork 一份看看
前端·javascript·typescript
蒜香拿铁7 小时前
Angular【router路由】
前端·javascript·angular.js
时间的情敌7 小时前
Vite 大型项目优化方案
vue.js
西洼工作室8 小时前
高效管理搜索历史:Vue持久化实践
前端·javascript·vue.js
樱花开了几轉8 小时前
element ui下拉框踩坑
开发语言·javascript·ui