From e735896a68d8c1742859a06d7bc1c7c1bb61f57d Mon Sep 17 00:00:00 2001
From: 马宇豪 <978517621@qq.com>
Date: 星期四, 23 一月 2025 14:08:52 +0800
Subject: [PATCH] 新增页面
---
src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue | 379 +++++++++++++++++++++++++++++++++++++++++++++++------
1 files changed, 331 insertions(+), 48 deletions(-)
diff --git a/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue b/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue
index be72ce4..82cd217 100644
--- a/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue
+++ b/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue
@@ -2,73 +2,73 @@
<div>
<el-dialog :visible.sync="dialogVisible" width="800px" append-to-body class="stu">
<div class="infoTitle">
- <div>批次名称：XXXXX</div>
- <div style="margin-left: 35px">管辖行政区划：XXXxxxx</div>
+ <div>批次名称：<span>{{stuInfo.batchName}}</span></div>
+ <div style="margin-left: 35px">所属区划：<span>{{stuInfo.districtName}}</span></div>
</div>
<div class="infoTitle">
- <div>考试点名称：XXXXX</div>
+ <div>组织架构：<span>{{stuInfo.deptName}}</span></div>
</div>
- <el-form :model="form" ref="ruleForm" label-width="125px">
+ <el-form :model="stuInfo" label-width="125px">
<el-row :gutter="24">
- <el-col :span="8">
- <el-form-item label="缴费周期：" prop="timeRange">
- <span>xxxx</span>
+ <el-col :span="12">
+ <el-form-item label="缴费周期：">
+ <span><span>{{stuInfo.year}}</span></span>
</el-form-item>
</el-col>
<el-col :span="12">
- <el-form-item label="缴费类型：" prop="timeRange">
- <span>xxxx</span>
+ <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="8">
- <el-form-item label="理论类别：" prop="timeRange">
- <span>xxxx</span>
+ <el-col :span="12" v-if="stuInfo.payType === 1 || stuInfo.payType === 3 || stuInfo.payType === 4">
+ <el-form-item label="理论类别：">
+ <span>{{stuInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1).subjectName}}</span>
</el-form-item>
</el-col>
- <el-col :span="12">
- <el-form-item label="实操类别：" prop="timeRange">
- <span>xxxx</span>
+ <el-col :span="12" v-if="stuInfo.payType === 2 || stuInfo.payType === 3">
+ <el-form-item label="实操类别：">
+ <span>{{stuInfo.nonCoalPayCategoryList.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>xxxx</span>
+ <span>{{stuInfo.amount}}</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="总计应缴费：" prop="timeRange">
- <span>xxxx</span>
+ <span>{{ stuInfo.totalCountFee }}元</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="已完成缴费：" prop="timeRange">
- <span>xxxx</span>
+ <span>{{stuInfo.payCountFee}}元</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="剩余未缴费：" prop="timeRange">
- <span>xxxx</span>
+ <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>xxxx人</span>
+ <span>{{stuInfo.totalCount}}人</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="已完成缴费：" prop="timeRange">
- <span>xxxx人</span>
+ <span>{{stuInfo.payCount}}人</span>
</el-form-item>
</el-col>
<el-col :span="6">
<el-form-item label="当前未完成缴费：" prop="timeRange">
- <span>xxxx人</span>
+ <span>{{stuInfo.unPayCount}}人</span>
</el-form-item>
</el-col>
</el-row>
@@ -77,16 +77,40 @@
<!-- 表格-->
<div style="margin: 20px 15px;display: flex">
<el-button size="small" type="primary" @click="handleAddStu('add',{})">添加学员</el-button>
- <el-button size="small" type="primary" >批量导入</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="createTime" />
- <el-table-column label="身份证号" align="center" prop="batchName" />
- <el-table-column label="手机号" align="center" prop="batchName" />
- <el-table-column label="性别" align="center" prop="batchName" />
- <el-table-column label="财政缴款码" align="center" prop="batchName" />
- <el-table-column label="是否已缴" align="center" prop="batchName" />
+ <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"
@@ -96,49 +120,306 @@
@pagination="getStuList"
/>
</el-dialog>
- <add-stu-dialog ref="addStuDialogRef" @getList = "getStuList"></add-stu-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"
+ :on-error="onError"
+ :on-success="onSuccess"
+ :auto-upload="false"
+ accept=".xlsx,.xls"
+ :on-preview="handlePreview"
+ :on-remove="handleRemove"
+ :before-remove="beforeRemove"
+ :before-upload="picSize"
+ ref="upload"
+ :limit="1"
+ :data={nonCoalPayId: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 addStuDialog from './addStuDialog.vue'
+
+import {verifyIdCard, verifySimplePhone} from "@/utils/validate";
+import {
+ addNonCoalStu, delNonCalStu, delNonCoalPay,
+ editNonCoalStu,
+ getNonCoalPayStudents,
+ getPayTypeInfo
+} from "@/api/specialOperationsPay/notCoalPay";
+import exampleFile from '@/assets/studentInfo.xlsx'
+import {getToken} from "@/utils/auth";
export default {
name: 'addStu',
- components: {
- addStuDialog
- },
+ 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: [],
- form: {
- id: null,
- staffId: null,
- timeRange: [],
- startTime: '',
- endTime: '',
- unit: ''
+ fileList: [],
+ uploadUrl: process.env.VUE_APP_BASE_API + '/pay/nonCoalPay/stuImportData',
+ 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' }]
+ }
};
},
methods: {
- openDialog(val) {
+ openDialog(id) {
+ this.getStuList(id)
+ this.id = id
this.dialogVisible = true;
},
- getStuList () {
-
+ getStuList(id) {
+ getNonCoalPayStudents(id).then(res=>{
+ if(res.code == 200){
+ this.stuInfo = res.data
+ this.stuList = res.data.nonCoalPayStudentList
+ }
+ })
},
handleAddStu(type,data){
- this.$refs.addStuDialogRef.openDialog(type, data);
- }
+ this.addDialog = true
+ this.resetDataForm()
+ if(type == 'add'){
+ this.dataForm.nonCoalPayId = this.id
+ }else{
+ const {id,nonCoalPayId,name,idCard,sex,phone} = data
+ this.dataForm = {id,nonCoalPayId,name,idCard,sex,phone}
+ }
+ console.log(this.dataForm,'form')
+ 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){
+ 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 addNonCoalStu(this.dataForm)
+ if(res.code == 200) {
+ this.getStuList(this.id)
+ this.addDialog = false
+ this.$message({
+ type:'success',
+ message: '新增成功'
+ })
+ }else{
+ this.$message({
+ type:'warning',
+ message: res.msg
+ })
+ }
+ }else {
+ const res = await editNonCoalStu(this.dataForm)
+ if(res.code == 200) {
+ this.getStuList(this.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 delNonCalStu(row.id)
+ if(res.code == 200){
+ this.$message({
+ type: 'success',
+ message: '删除成功!'
+ });
+ await this.getStuList(this.id)
+ }else{
+ this.$message({
+ type: 'warning',
+ message: res.msg
+ });
+ }
+ }).catch(() => {
+
+ });
+ },
+ resetDataForm() {
+ this.dataForm = {
+ }
+ },
}
}
@@ -153,8 +434,10 @@
margin-bottom:10px;
margin-left: 40px;
display: flex;
- font-weight: 800;
- font-size: 16px
+ font-size: 16px;
+ span{
+ font-weight: bolder;
+ }
}
}
--
Gitblit v1.9.2