<template>
|
<div>
|
<el-dialog :visible.sync="dialogVisible" width="800px" append-to-body class="stu">
|
<div class="infoTitle">
|
<div>批次名称：<span>{{stuInfo.batchName}}</span></div>
|
<!-- <div style="margin-left: 35px">所属区划：<span>{{stuInfo.districtName}}</span></div>-->
|
</div>
|
<div class="infoTitle">
|
<div>组织架构：<span>{{stuInfo.deptName}}</span></div>
|
</div>
|
<el-form :model="stuInfo" label-width="125px">
|
<el-row :gutter="24">
|
<el-col :span="12">
|
<el-form-item label="缴费周期：">
|
<span><span>{{stuInfo.year}}{{stuInfo.quarter==1?' 第一季度':stuInfo.quarter==2?' 第二季度':stuInfo.quarter==3?' 第三季度':' 第四季度'}}</span></span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12">
|
<el-form-item label="缴费类型：">
|
<span>{{stuInfo.payType == 1?'初训理论':stuInfo.payType == 2?'初训实操':stuInfo.payType == 3?'初训理论与实操':stuInfo.payType == 4?'复训理论':''}}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="12" v-if="stuInfo.payType === 1 || stuInfo.payType === 3 || stuInfo.payType === 4">
|
<el-form-item label="理论类别：">
|
<span>{{stuInfo.coalCategoryList.find(i=>i.categoryType == 1).subjectName}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="12" v-if="stuInfo.payType === 2 || stuInfo.payType === 3">
|
<el-form-item label="实操类别：">
|
<span>{{stuInfo.coalCategoryList.find(i=>i.categoryType == 2).subjectName}}</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="单人应缴：" prop="timeRange">
|
<span>{{stuInfo.amount}}</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="总计应缴费：" prop="timeRange">
|
<span>{{ stuInfo.totalCountFee }}元</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="已完成缴费：" prop="timeRange">
|
<span>{{stuInfo.payCountFee}}元</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="剩余未缴费：" prop="timeRange">
|
<span>{{stuInfo.unPayCountFee}}元</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
<el-row :gutter="24">
|
<el-col :span="6">
|
<el-form-item label="当前总计应缴：" prop="timeRange">
|
<span>{{stuInfo.totalCount}}人</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="已完成缴费：" prop="timeRange">
|
<span>{{stuInfo.payCount}}人</span>
|
</el-form-item>
|
</el-col>
|
<el-col :span="6">
|
<el-form-item label="当前未完成缴费：" prop="timeRange">
|
<span>{{stuInfo.unPayCount}}人</span>
|
</el-form-item>
|
</el-col>
|
</el-row>
|
</el-form>
|
|
<!-- 表格-->
|
<div style="margin: 20px 15px;display: flex">
|
<el-button size="small" type="primary" @click="handleAddStu('add',{})">添加学员</el-button>
|
<el-button size="small" type="primary" @click="importDialog = true">批量导入</el-button>
|
</div>
|
<el-table v-loading="loading" :data="stuList">
|
<el-table-column label="序号" align="center" type="index" />
|
<el-table-column label="姓名" align="center" prop="name" />
|
<el-table-column label="身份证号" align="center" prop="idCard" />
|
<el-table-column label="手机号" align="center" prop="phone" />
|
<el-table-column label="性别" align="center" prop="sex">
|
<template #default="scope">
|
{{scope.row.sex == 0?'男':scope.row.sex == 1?'女':'未知'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="财政缴款码" align="center" prop="payCode">
|
<template #default="scope">
|
{{scope.row.payCode?scope.row.payCode:'--'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="是否已缴" align="center" prop="payStatus">
|
<template #default="scope">
|
{{scope.row.payStatus == 0?'未缴':scope.row.payStatus == 1?'已缴':'未缴'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="类别" align="center" prop="payType">
|
<template #default="scope">
|
{{scope.row.payType == 1?'个人':scope.row.payType == 2?'集体':'个人'}}
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center">
|
<template #default="scope">
|
<el-button size="mini" type="text" v-if="scope.row.payStatus == 1" style="color: #1890ff">查看票据</el-button>
|
<el-button size="mini" type="text" style="color: #1890ff" @click="handleAddStu('edit',scope.row)">修改</el-button>
|
<el-button size="mini" type="text" style="color:lightcoral" @click="handleDelete(scope.row)">删除</el-button>
|
</template>
|
</el-table-column>
|
</el-table>
|
<pagination
|
v-show="total>0"
|
:total="total"
|
:page.sync="queryParams.pageNum"
|
:limit.sync="queryParams.pageSize"
|
@pagination="getStuList"
|
/>
|
</el-dialog>
|
<el-dialog
|
:title="dialogStatus==='add'?'新增':'编辑'"
|
:visible.sync="addDialog"
|
:modal-append-to-body="false"
|
:close-on-click-modal="false"
|
width="450px"
|
:before-close="handleClose"
|
>
|
<el-form ref="dataForm" :model="dataForm" :rules="addRules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中...">
|
<el-form-item label="姓名:" prop="name">
|
<el-input v-model.trim="dataForm.name"/>
|
</el-form-item>
|
<el-form-item label="性别:" prop="sex">
|
<el-radio-group v-model="dataForm.sex">
|
<el-radio :label="0">男</el-radio>
|
<el-radio :label="1">女</el-radio>
|
</el-radio-group>
|
</el-form-item>
|
<el-form-item label="身份证号:" prop="idCard">
|
<el-input v-model.trim="dataForm.idCard"/>
|
</el-form-item>
|
<el-form-item label="手机号:" prop="phone">
|
<el-input v-model.trim="dataForm.phone"/>
|
</el-form-item>
|
</el-form>
|
<el-alert
|
:closable="false"
|
title="提示：请务必填写准确，将用于个人缴费查询。"
|
type="warning">
|
</el-alert>
|
<span slot="footer" class="dialog-footer">
|
<el-button @click="handleClose">取 消</el-button>
|
<el-button type="primary" @click="onSubmit">确 定</el-button>
|
</span>
|
</el-dialog>
|
<el-dialog
|
:visible.sync="importDialog"
|
append-to-body
|
title="批量导入"
|
:close-on-click-modal="false"
|
>
|
<el-form
|
ref="importForm"
|
label-position="right"
|
label-width="120px"
|
style="margin-left:50px;width:500px;"
|
element-loading-text="导入中..."
|
>
|
<el-form-item label="导入文件:">
|
<el-upload
|
:action="uploadUrl"
|
:auto-upload="false"
|
:on-error="onError"
|
:on-success="onSuccess"
|
accept=".xlsx,.xls"
|
:on-preview="handlePreview"
|
:on-remove="handleRemove"
|
:before-remove="beforeRemove"
|
:before-upload="picSize"
|
ref="upload"
|
:limit="1"
|
:data={coalPayId:stuInfo.id}
|
:headers="header"
|
:on-exceed="handleExceed"
|
:file-list="fileList">
|
<el-button size="small" type="primary">点击上传</el-button>
|
<div slot="tip" class="el-upload__tip">只能上传excel(.xlsx、.xls后缀)文件，且不超过2M</div>
|
</el-upload>
|
</el-form-item>
|
<el-form-item label="excel参考模板:">
|
<el-button type="text" @click="viewHandle">下载模板</el-button>
|
</el-form-item>
|
</el-form>
|
<div slot="footer" class="dialog-footer">
|
<el-button @click="importDialog = false">取消</el-button>
|
<el-button type="primary" @click="importHandle()">导入</el-button>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
<script>
|
import {verifyIdCard, verifySimplePhone} from "@/utils/validate";
|
import {addCoalPayStu, delCoalPayStu, editCoalPayStu, getCoalPayStudentList} from "@/api/specialOperationsPay/coalPay";
|
import exampleFile from '@/assets/studentInfo.xlsx'
|
import {getToken} from "@/utils/auth";
|
export default {
|
name: 'addStu',
|
components: {},
|
data() {
|
let validatePhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else{
|
if(!verifySimplePhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
let verifyId = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入身份证号'))
|
}else{
|
if(!verifyIdCard(value)){
|
callback(new Error('身份证号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
return {
|
open: false,
|
id: null,
|
dialogVisible: false,
|
importDialog: false,
|
loading: false,
|
stuInfo: {},
|
stuList: [],
|
fileList: [],
|
uploadUrl: process.env.VUE_APP_BASE_API + '/pay/coalPayStudent/import',
|
header: {
|
Authorization: "Bearer " + getToken()
|
},
|
total: 0,
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
},
|
addDialog: false,
|
dialogStatus: '',
|
dataForm: {},
|
addRules: {
|
name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
|
idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
|
phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
|
sex: [{ required: true, message: '请选择性别', trigger: 'blur' }]
|
},
|
exampleFile
|
};
|
},
|
methods: {
|
openDialog(val) {
|
this.stuInfo = val
|
this.getStuList(this.stuInfo.id)
|
this.dialogVisible = true;
|
},
|
|
getStuList(id) {
|
getCoalPayStudentList(id).then(res=>{
|
if(res.code == 200){
|
this.stuList = res.rows
|
this.total = res.total
|
this.stuInfo.totalCountFee = this.stuInfo.amount * this.total
|
this.stuInfo.totalCount = this.total
|
if(this.total == 0){
|
this.stuInfo.payCount = 0
|
this.stuInfo.payCountFee = 0
|
}else{
|
this.stuInfo.payCount = this.stuList.filter(i=>i.payStatus == 1).length
|
this.stuInfo.payCountFee = this.stuInfo.payCount * this.stuInfo.amount
|
}
|
this.stuInfo.unPayCount = this.stuInfo.totalCount - this.stuInfo.payCount
|
this.stuInfo.unPayCountFee = this.stuInfo.totalCountFee - this.stuInfo.payCountFee
|
}
|
})
|
},
|
|
handleAddStu(type,data){
|
this.addDialog = true
|
this.resetDataForm()
|
if(type == 'add'){
|
this.dataForm.coalPayId = this.stuInfo.id
|
}else{
|
const {id,coalPayId,name,idCard,sex,phone} = data
|
this.dataForm = {id,coalPayId,name,idCard,sex,phone}
|
}
|
this.dialogStatus = type
|
},
|
|
viewHandle() {
|
const link = document.createElement('a')
|
link.href = exampleFile
|
link.target = '_blank'
|
link.download = '学员批量导入模版.xlsx'
|
link.click()
|
},
|
|
handleRemove(file, fileList) {
|
console.log(file, fileList);
|
},
|
handlePreview(file) {
|
console.log(file);
|
},
|
handleExceed(files, fileList) {
|
this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
|
},
|
picSize(rawFile){
|
console.log(rawFile,'file')
|
if(rawFile.size / 1024 / 1024 > 2){
|
this.$message({
|
type: 'warning',
|
message: '文件大小不能超过2M'
|
});
|
return false
|
}
|
},
|
|
async importHandle(){
|
const t = this
|
await t.$refs.upload.submit()
|
t.importDialog = false
|
setTimeout(()=>{
|
t.getStuList(this.stuInfo.id)
|
t.fileList = []
|
t.$refs.upload.clearFiles()
|
},800)
|
},
|
|
onError(){
|
console.log("文件上传失败")
|
},
|
|
onSuccess(res, file, fileList){
|
if(res.code == 200){
|
this.$message({
|
type:'success',
|
message: res.msg
|
})
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
},
|
|
beforeRemove(file, fileList) {
|
return this.$confirm(`确定移除 ${ file.name }？`);
|
},
|
|
handleClose() {
|
this.addDialog = false
|
},
|
onSubmit() {
|
this.$refs["dataForm"].validate( async valid => {
|
if (valid) {
|
if(this.dialogStatus == 'add'){
|
const res = await addCoalPayStu(this.dataForm)
|
if(res.code == 200) {
|
this.getStuList(this.stuInfo.id)
|
this.addDialog = false
|
this.$message({
|
type:'success',
|
message: '新增成功'
|
})
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}else {
|
const res = await editCoalPayStu(this.dataForm)
|
if(res.code == 200) {
|
this.getStuList(this.stuInfo.id)
|
this.addDialog = false
|
this.$message({
|
type:'success',
|
message: '修改成功'
|
})
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}
|
}
|
})
|
},
|
handleDelete(row){
|
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const res = await delCoalPayStu([row.id])
|
if(res.code == 200){
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
await this.getStuList(this.stuInfo.id)
|
}else{
|
this.$message({
|
type: 'warning',
|
message: res.msg
|
});
|
}
|
}).catch(() => {
|
|
});
|
},
|
resetDataForm() {
|
this.dataForm = {
|
}
|
},
|
}
|
}
|
|
</script>
|
|
<style scoped lang="scss">
|
.stu{
|
::v-deep .el-form-item {
|
margin-bottom: 5px;
|
}
|
.infoTitle{
|
margin-bottom:10px;
|
margin-left: 40px;
|
display: flex;
|
font-size: 16px;
|
span{
|
font-weight: bolder;
|
}
|
}
|
|
}
|
|
</style>
|
