这是一个学生信息查询页面的Vue.js模板代码。它包含一个搜索表单、一个显示结果的表以及在不同类型的信息（补贴和非补贴相关）之间切换的选项卡。该模板使用Element UI库中的各种UI组件，包括el image、el form、el table和el radio组。表格列显示学生姓名、身份证号码、班级名称、培训时间和补贴状态等信息。该模板还包括一个用于验证captcha的Verify组件，以及一个用于刷新表和切换搜索表单的工具栏组件。
<template>
<div class="mod-config ml10">
<div class="studentInfoQuery">
<el-image class="studentInfoQuery-img" src="https://cdn.hnjngl.hnrrcz.com/common/society/studentInfoQuery.png"></el-image>
</div>
<!--搜索-->
<div class="search searchHead" v-show="showSearch">
<el-form ref="searchForm" :model="searchForm" :inline="true" :rules="rules" size="mini">
<el-form-item label="学员姓名" prop="studentName">
<cl-input
v-model="searchForm.studentName"
placeholder="请输入学员姓名"
clearable
size="small"
style="width: 240px"
/>
</el-form-item>
<el-form-item label="学员身份证号" prop="studentIdNo">
<cl-input
v-model="searchForm.studentIdNo"
placeholder="请输入学员身份证号"
clearable
size="small"
style="width: 240px"
/>
</el-form-item>
<el-form-item>
<el-button
icon="el-icon-search"
type="primary"
size="small"
@click="handleQuery"
>搜索</el-button
>
<el-button icon="el-icon-delete" size="small" @click="resetQuery"
>清空</el-button
>
</el-form-item>
</el-form>
</div>
<Verify
@success="verifySuccess"
:mode="'pop'"
:captchaType="'blockPuzzle'"
:imgSize="{ width: '330px', height: '155px' }"
ref="verify"
/>
<div class="tableContent">
<toolbar
class="com-group"
@refreshTable="getDataList"
:showSearch.sync="showSearch"
>
<el-radio-group slot="tabs" v-model="activeTab" @input="changeTab($event)" style="margin-left: 40px;" v-show="unSubsidyIn.total||subsidyInTrainorg.total||subsidyInOrgIndustry.total">
<el-radio-button v-for="(item,index) in tabs" :key="index" :label="item.label" size="small">
<div style="min-height: 20px;line-height: initial;">
<span class="tab-name">{{item.label === 'subsidyInOrgIndustry' ? '补贴性信息（人社/行业）': item.label === 'unSubsidyIn' ? '非补贴性信息' : '补贴性信息（机构）'}}</span>
<span class="tab-unread" v-if="item.unread > 0">{{item.unread}}</span>
</div>
</el-radio-button>
</el-radio-group>
</toolbar>
<!--学员列表表格-->
<div class="avue-crud">
<!--表格-->
<el-table
ref="table"
:data="studentCLazzDTOIPage"
border
:v-loding="dataListLoading"
v-show="activeTab==='subsidyInTrainorg'&&subsidyInTrainorg.total"
>
<el-table-column
prop="clazz.trainorgName"
header-align="left"
align="left"
label="所属机构"
width="230"
fixed
>
<template slot-scope="scope">
<span
class="fl"
>{{ scope.row.clazz.trainorgName }}</span
>
</template>
</el-table-column>
<el-table-column
prop="clazz.name"
header-align="left"
align="left"
label="班级名称"
width="280"
>
<template slot-scope="scope">
<div
>
<div class="seqCode">
<span class="fl">{{ scope.row.clazz.seqCode }}</span
><copy-seq-code :seqCode="scope.row.clazz.seqCode"></copy-seq-code>
</div>
<div class="seqCode">
<span
class="fl"
style="color: #409eff"
>{{ scope.row.clazz.name }}</span
>
<copy-seq-code
:seqCode="scope.row.clazz.name"
title="复制名称"
></copy-seq-code>
</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="clazz.clazzhour"
header-align="left"
align="left"
label="最低学时"
width="250"
></el-table-column>
<el-table-column
prop="clazz.trainticketStatus"
header-align="left"
align="left"
label="是否使用培训券"
width="250"
>
<template slot-scope="scope">
<span>{{scope.row.clazz.trainticketStatus == 0 ? '是' : '否'}}</span>
</template>
</el-table-column>
<el-table-column
prop="clazz.specialtyName"
header-align="left"
align="left"
label="培训专业"
width="250"
></el-table-column>
<el-table-column
prop="clazz.jobName"
header-align="left"
align="left"
label="培训工种"
width="250"
></el-table-column>
<el-table-column
prop="clazz.trainingCategoryLabel"
header-align="left"
align="left"
label="培训等级"
width="250"
></el-table-column>
<el-table-column
prop="clazz.categoryLabel"
header-align="left"
align="left"
label="班级分类"
width="250"
></el-table-column>
<el-table-column
prop="clazz.trainModel"
header-align="left"
align="left"
label="培训模式"
width="130"
>
<template slot-scope="scope">
<span>
{{
scope.row.clazz.trainModel === 0
? "线上"
: scope.row.clazz.trainModel === 1
? "线下"
: "线上+线下"
}}
</span>
</template>
</el-table-column>
<el-table-column
prop="clazz.trainingCategoryLabel"
header-align="left"
align="left"
label="培训周期"
width="150"
>
<template slot-scope="{ row }">
{{ row.clazz.startTime.substring(0,10)+'至'+row.clazz.endTime.substring(0,10)}}
</template>
</el-table-column>
<el-table-column
prop="clazz.orgName"
header-align="left"
align="left"
label="上报单位"
width="230"
></el-table-column>
<el-table-column
prop="studentPageDTO.courseFinishStatus"
header-align="center"
fixed="right"
width="100"
align="center"
label="学员结业状态"
>
<template slot-scope="scope">
<span
class="txtStatus_fail"
v-if="scope.row.studentPageDTO.courseFinishStatus !== 2"
>未结业</span
>
<span
class="txtStatus_success"
v-if="scope.row.studentPageDTO.courseFinishStatus === 2"
>已结业</span
>
<span class="txtStatus_fail" v-if="scope.row.studentPageDTO.courseFinishStatus !== 2&&scope.row.studentPageDTO.courseFinishStatus === 3"
>未结业（已退学）</span
>
</template>
</el-table-column>
<el-table-column
prop="studentPageDTO.subsidyApplyStatus"
header-align="center"
fixed="right"
width="100"
align="center"
label="学员补贴状态"
>
<template slot-scope="scope">
<span
class="txtStatus_wait_submit"
v-if="scope.row.studentPageDTO.subsidyApplyStatus === 0"
>未提交</span
>
<span
class="txtStatus_success"
v-if="scope.row.studentPageDTO.subsidyApplyStatus === 2"
>已通过</span
>
<span class="txtStatus_fail" v-if="scope.row.studentPageDTO.subsidyApplyStatus === 3"
>未通过</span>
</template>
</el-table-column>
</el-table>
<el-table
ref="table"
:data="subStudentCLazzDTOIPage"
border
:v-loding="dataListLoading"
v-show="activeTab === 'subsidyInOrgIndustry'&&subsidyInOrgIndustry.total"
>
<el-table-column
prop="subclazz.trainorgName"
header-align="left"
align="left"
label="录入单位"
width="230"
fixed
>
</el-table-column>
<el-table-column
prop="subclazz.trainorgName"
header-align="left"
align="left"
label="所属机构"
width="230"
>
<template slot-scope="scope">
<span
class="fl"
>{{ scope.row.subclazz.trainorgName }}</span
>
</template>
</el-table-column>
<el-table-column
prop="subclazz.name"
header-align="left"
align="left"
label="班级名称"
width="280"
>
<template slot-scope="scope">
<div
>
<div class="seqCode">
<span class="fl">{{ scope.row.subclazz.seqCode }}</span
><copy-seq-code :seqCode="scope.row.subclazz.seqCode"></copy-seq-code>
</div>
<div class="seqCode">
<span
class="fl"
style="color: #409eff"
>{{ scope.row.subclazz.name }}</span
>
<copy-seq-code
:seqCode="scope.row.subclazz.name"
title="复制名称"
></copy-seq-code>
</div>
</div>
</template>
</el-table-column>
<el-table-column
prop="subclazz.specialtyName"
header-align="left"
align="left"
label="培训专业"
width="250"
></el-table-column>
<el-table-column
prop="subclazz.jobName"
header-align="left"
align="left"
label="培训工种"
width="150"
></el-table-column>
<el-table-column
prop="subclazz.trainingCategoryLabel"
header-align="left"
align="left"
label="培训等级"
width="250"
></el-table-column>
<el-table-column
prop="subclazz.clazzhour"
header-align="left"
align="left"
label="培训学时"
width="80"
>
</el-table-column>
<el-table-column
prop="subclazz.startTime"
header-align="left"
align="left"
label="培训周期"
width="230"
>
<template slot-scope="{ row }">
{{ row.subclazz.startTime.substring(0,10)+'至'+row.subclazz.endTime.substring(0,10)}}
</template>
</el-table-column>
<el-table-column
prop="subclazz.affiliation"
header-align="left"
align="left"
label="数据归口"
width="140"
>
<template slot-scope="scope">
<span v-for="(item,index) in affiliationList" :key="index" v-if="item.value==scope.row.subclazz.affiliation">{{item.label}}</span>
</template>
</el-table-column>
<el-table-column
prop="subclazz.fundingSourceName"
header-align="left"
align="left"
label="资金来源"
width="140"
></el-table-column>
<el-table-column
prop="subclazz.approvalOrgName"
header-align="left"
align="left"
label="补贴审核单位"
width="140"
>
</el-table-column>
<el-table-column
prop="subclazz.status"
header-align="center"
fixed="right"
width="100"
align="center"
label="状态"
>
<template slot-scope="scope">
<span
class="txtStatus_success"
v-if="scope.row.subclazz.status === 2"
>已上报</span
>
<span class="txtStatus_fail" v-if="scope.row.subclazz.status !== 2"
>未上报</span
>
</template>
</el-table-column>
</el-table>
<el-table
ref="table"
:data="nosubstudentCLazzDTOIPage"
border
:v-loding="dataListLoading"
v-show="activeTab === 'unSubsidyIn'&&unSubsidyIn.total"
>
<el-table-column
prop="nosubclazz.trainorgName"
header-align="left"
align="left"
label="录入单位"
width="230"
fixed
>
</el-table-column>
<el-table-column
prop="nosubclazz.orgRegion"
header-align="left"
align="left"
label="行政区划"
width="230"
></el-table-column>
<el-table-column
prop="nosubclazz.name"
header-align="left"
align="left"
label="班级名称"
width="230"
>
<template slot-scope="scope">
<span
class="fl"
>{{ scope.row.nosubclazz.name }}</span
>
</template>
</el-table-column>
<el-table-column
prop="nosubclazz.trainSpecialtyName"
header-align="left"
align="left"
label="培训专业"
width="250"
></el-table-column>
<el-table-column
prop="nosubclazz.jobName"
header-align="left"
align="left"
label="培训工种"
width="150"
></el-table-column>
<el-table-column
prop="nosubclazz.categoryLabel"
header-align="left"
align="left"
label="培训周期"
width="250"
>
<template slot-scope="{ row }">
{{ row.nosubclazz.startTime.substring(0,10)+'至'+row.nosubclazz.endTime.substring(0,10)}}
</template>
</el-table-column>
<el-table-column
prop="nosubclazz.affiliation"
header-align="left"
align="left"
label="数据归口"
width="80"
>
<template slot-scope="scope">
<span v-for="(item,index) in affiliationList" :key="index" v-if="item.value==scope.row.nosubclazz.affiliation">{{item.label}}</span>
</template>
</el-table-column>
<el-table-column
prop="nosubclazz.orgName"
header-align="left"
align="left"
label="上报单位"
width="230"
></el-table-column>
<el-table-column
prop="nosubclazz.status"
header-align="center"
fixed="right"
width="100"
align="center"
label="状态"
>
<template slot-scope="scope">
<span
class="txtStatus_success"
v-if="scope.row.nosubclazz.status === 2"
>已上报</span>
<span class="txtStatus_fail" v-if="scope.row.nosubclazz.status !== 2"
>未上报</span>
</template>
</el-table-column>
</el-table>
</div>
<!--分页-->
<div class="avue-crud__pagination">
<el-pagination
@size-change="sizeChangeHandle($event)"
@current-change="currentChangeHandle($event)"
:current-page="getCurrentPage()"
:page-sizes="[10, 20, 50, 100]"
:page-size="getPageSize()"
:total="getTotalPage()"
background
layout="total,sizes,prev,pager,next,jumper"
></el-pagination>
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from "vuex";
import { fetchListStudentInfoQuery } from "@/api/training/student";
import Toolbar from "@/components/Toolbar";
import Verify from "@/components/verifition/Verify";
import { getDicDataSources } from "@/util/common";
export default {
data() {
return {
searchForm: {
current: 1,
size: 10,
studentName: "", //姓名
studentIdNo: "", //身份证号
},
studentCLazzDTOIPage: [],//补贴性信息（机构）
subStudentCLazzDTOIPage: [],//补贴性信息（人社/行业）
nosubstudentCLazzDTOIPage: [],//非补贴性信息
subsidyInTrainorg: {total: 0,current: 1,size: 10,},//补贴性信息（机构）
subsidyInOrgIndustry: {total: 0,current: 1,size: 10,},//补贴性信息（人社/行业）
unSubsidyIn: {total: 0,current: 1,size: 10,},//非补贴性信息
dataListLoading: false,
trainTypeList: [],
classCategoryList: [], //学员分类
affiliationList: [], //数据归口
showSearch: true, //展示不展示搜索
trainModelList: [
/* {
value: 0,
label: "线上模式",
},*/
{
value: 1,
label: "线下模式",
},
{
value: 2,
label: "线上+线下",
},
],
activeTab: 'subsidyInTrainorg',
tabs: [{label: 'subsidyInTrainorg',unread: ''},{label: 'subsidyInOrgIndustry',unread: ''},{label: 'unSubsidyIn',unread: ''}],
initTab: true,//自动初始化tab开启
rules: {
studentName: [{ required: true, message: "请输入姓名", trigger: "blur" },{
pattern: /^([\u4e00-\u9fa5]{1,20}|[a-zA-Z\.\s]{1,20})$/,
message: "请输入正确的姓名，支持中文或者英文(20位字符内)",
trigger: "change",
},],
studentIdNo: [{ required: true, message: "请输入证件号码", trigger: "blur" }, {
pattern: /^\d{6}((((((19|20)\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|(((19|20)\d{2})(0[13578]|1[02])31)|((19|20)\d{2})02(0[1-9]|1\d|2[0-8])|((((19|20)([13579][26]|[2468][048]|0[48]))|(2000))0229))\d{3})|((((\d{2})(0[13-9]|1[012])(0[1-9]|[12]\d|30))|((\d{2})(0[13578]|1[02])31)|((\d{2})02(0[1-9]|1\d|2[0-8]))|(([13579][26]|[2468][048]|0[048])0229))\d{2}))(\d|X|x)$/,
message: "请输入18位身份证号", trigger: "change",
},
],
},
checkStatus: false,//验证是否通过
};
},
created() {
this.init();
this.getDataList();
},
computed: {
...mapGetters(["permissions"]),
permissionList() {
return {
addBtn: this.vaildData(this.permissions.training_clazz_add, false),
delBtn: this.vaildData(this.permissions.training_clazz_del, false),
editBtn: this.vaildData(this.permissions.training_clazz_edit, false),
viewBtn: this.vaildData(this.permissions.training_clazz_view, false),
};
},
},
methods: {
//状态切换
changeTab(e) {
this.activeTab = e;
let current = this.getCurrentPage();
let size = this.getPageSize();
this.subsidyInTrainorg.current = current;
this.subsidyInOrgIndustry.current = current;
this.unSubsidyIn.current = current;
this.subsidyInTrainorg.size = size;
this.subsidyInOrgIndustry.size = size;
this.unSubsidyIn.size = size;
this.getDataList();
let unread = this.getTotalPage();
if (unread === 0) {
this.confirmTips();
}
},
//初始化字典
async init() {
let typeList =
"class_category,skill_category,entrepreneurship_category,train_type,industry_sectors";
let result = await getDicDataSources(typeList);
this.classCategoryList = result.class_category; //学员分类
//学员分类(技能提升培训) 添加二级 skill_category
this.classCategoryList[0].children = result.skill_category;
this.classCategoryList[1].children = result.entrepreneurship_category;
this.trainTypeList = result.train_type; //
this.affiliationList = result.industry_sectors; //数据归口
},
//获取数据列表
getDataList() {
this.dataListLoading = true;
this.searchForm.current = this.getCurrentPage();
this.searchForm.size = this.getPageSize();
if (this.searchForm.studentName&&this.searchForm.studentIdNo) {
fetchListStudentInfoQuery(
Object.assign({
...this.searchForm,
})
).then((response => {
console.log("🛫🛫🛫 data",response.data.data);
if (response.data.data != null) {
this.studentCLazzDTOIPage = response.data.data.studentCLazzDTOIPage.records;//补贴性信息（机构）
this.subStudentCLazzDTOIPage = response.data.data.subStudentCLazzDTOIPage.records;//补贴性信息（人社/行业）
this.nosubstudentCLazzDTOIPage = response.data.data.nosubstudentCLazzDTOIPage.records;//非补贴性信息
this.subsidyInTrainorg.total = response.data.data.studentCLazzDTOIPage.total;//补贴性信息（机构）
this.subsidyInOrgIndustry.total = response.data.data.subStudentCLazzDTOIPage.total;//补贴性信息（人社/行业）
this.unSubsidyIn.total = response.data.data.nosubstudentCLazzDTOIPage.total;//非补贴性信息
//循环获取每个列表的总条数并循环赋值给每个tabs的unread
for (let t = 0; t <this.tabs.length; t++) {
this.tabs[t].unread = this[this.tabs[t].label].total;
}
if (this.initTab) {
let maxUnread = -1;
let activeTabIndex = -1;
for (let i = 0; i < this.tabs.length;i++) {//循环获取数据最大的索引
if (this.tabs[i].unread > maxUnread) {
maxUnread = this.tabs[i].unread;
activeTabIndex = i;
}
}
if (activeTabIndex !== -1) {
this.activeTab = this.tabs[activeTabIndex].label;//设置activeTab为数据最多元素的label
}
}
this.initTab = false;//自动初始化tab关闭
//如果每个列表都查不到信息 显示查询失败提示
if (this.studentCLazzDTOIPage.length === 0 && this.subStudentCLazzDTOIPage.length === 0 && this.nosubstudentCLazzDTOIPage.length === 0) {
this.confirmTips();
}
} else {
this.confirmTips();
}
})).catch(() =>{
this.confirmTips();
})
}
this.dataListLoading = false;
},
//每页数
sizeChangeHandle(val) {
let name = this.activeTab;
this[name].size = val;
this[name].current = 1;
this.getDataList();
},
//当前页
currentChangeHandle(val) {
let name = this.activeTab;
this[name].current = val;
this.getDataList();
},
//获取当前tab的current
getCurrentPage() {
return this[this.activeTab].current
},
//获取当前tab的size
getPageSize() {
return this[this.activeTab].size
},
//获取当前tab的total
getTotalPage() {
return this[this.activeTab].total
},
//搜索
handleQuery() {
this.$refs["searchForm"].validate((valid) => {
if (valid) {
this.$refs.verify.show();//拼图滑块验证显示
if (this.checkStatus) {//验证通过
this.initTab = true;//自动初始化tab开启
this.getDataList();
this.checkStatus = false;//请求后重置为验证未通过
}
}
})
},
//清空
resetQuery() {
this.$nextTick(() => {
//清空 搜索条件 数据 分页
this.searchForm.studentName = "";
this.searchForm.studentIdNo = "";
this.studentCLazzDTOIPage = [];//补贴性信息（机构）
this.subStudentCLazzDTOIPage = [];//补贴性信息（人社/行业）
this.nosubstudentCLazzDTOIPage = [];//非补贴性信息
this.subsidyInTrainorg = {total: 0,current: 1,size: 10,};//补贴性信息（机构）
this.subsidyInOrgIndustry = {total: 0,current: 1,size: 10,};//补贴性信息（人社/行业）
this.unSubsidyIn = {total: 0,current: 1,size: 10,};//非补贴性信息
this.confirmTips();
this.handleQuery();
});
},
changeLabel(label, val) {
console.log("label,val:", label, val);
if (label === "trainModel") {
let trainModelLabel = this.trainModelList.filter(
(a) => a.value == val
)[0];
this.resultForm.trainModelLabel = trainModelLabel.label;
} else if (label === "trainingCategory") {
let trainingCategoryLabel = this.trainTypeList.filter(
(a) => a.value == val
)[0];
this.resultForm.trainingCategoryLabel = trainingCategoryLabel.label;
}
},
verifySuccess(params) {
if(params.captchaVerification) {
this.checkStatus = params.captchaVerification;
this.handleQuery();
}
},
confirmTips() {
this.$confirm(
'<span>查询失败</span><p style="font-size: 12px;color: #999;">没有查询到该学员的信息，请核对信息后重新查询</p>',
'提示', {
confirmButtonText: '确定',
cancelButtonText: '取消',
dangerouslyUseHTMLString: true,
type: 'warning'
}).then(() => {
}).catch(() => {
})
},
},
components: {
Toolbar,
Verify,
},
};
</script>
<style scoped lang="scss">
.studentInfoQuery {
width: 100%;
&-img {
width: 99%;
}
}
.tab-unread {
display: inline-block;
background-color: #f26161;
color: #fff;
width: 18px;
height: 18px;
border-radius: 50%;
font-size: 12px;
line-height: 18px;
text-align: center;
vertical-align: middle;
margin-left: 5px;
}
</style>
