From 4ae80a84f6d47c37285bfab0cb0fb3939d6cdec0 Mon Sep 17 00:00:00 2001 From: zhouwx <1175765986@qq.com> Date: 星期五, 17 一月 2025 10:21:16 +0800 Subject: [PATCH] 修改 --- src/views/specialOperationsPay/notCoalPay/components/addDialog.vue | 246 ++++++++++++++++++ src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue | 162 ++++++++++++ src/layout/components/Sidebar/Logo.vue | 11 src/main.js | 8 src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue | 150 +++++++++++ src/views/specialOperationsPay/notCoalPay/index.vue | 184 +++++++++++++ 6 files changed, 750 insertions(+), 11 deletions(-) diff --git a/src/layout/components/Sidebar/Logo.vue b/src/layout/components/Sidebar/Logo.vue index 97c52b7..6f084a2 100644 --- a/src/layout/components/Sidebar/Logo.vue +++ b/src/layout/components/Sidebar/Logo.vue @@ -59,8 +59,8 @@ .sidebar-logo-container { position: relative; width: 100%; - height: 50px; - line-height: 50px; + height: 66px; + line-height: 66px; background: #2b2f3a; text-align: center; overflow: hidden; @@ -70,15 +70,16 @@ width: 100%; & .sidebar-logo { - width: 38px; + width: 43px; height: 38px; vertical-align: middle; - margin-right: 12px; + margin: 20px 0; } & .sidebar-title { display: inline-block; - margin: 0; + //margin: 0; + margin-left: 5px; color: #fff; font-weight: 600; line-height: 50px; diff --git a/src/main.js b/src/main.js index 5607eeb..3625db9 100644 --- a/src/main.js +++ b/src/main.js @@ -79,6 +79,14 @@ Vue.use(Element, { size: Cookies.get('size') || 'medium' // set element-ui default size }) +Vue.directive('removeAriaHidden', { + bind(el, binding) { + const ariaEls = el.querySelectorAll('.el-radio__original') + ariaEls.forEach((item) => { + item.removeAttribute('aria-hidden') + }) + } +}) Vue.config.productionTip = false diff --git a/src/views/specialOperationsPay/notCoalPay/components/addDialog.vue b/src/views/specialOperationsPay/notCoalPay/components/addDialog.vue new file mode 100644 index 0000000..f9e33fe --- /dev/null +++ b/src/views/specialOperationsPay/notCoalPay/components/addDialog.vue @@ -0,0 +1,246 @@ +<template> + <el-dialog + :title="dialogStatus==='add'?'新增':'编辑'" + :visible.sync="dialogVisible" + :modal-append-to-body="false" + :close-on-click-modal="false" + width="700px" + :before-close="handleClose" + > + <div class="infoTitle"> + <div>考试点名称:XXXXX</div> + <div style="margin-left: 15px">管辖行政区划:XXXxxxx</div> + </div> + <el-form ref="dataForm" :model="dataForm" :rules="rules" label-position="right" label-width="150px" style="padding-right: 50px" element-loading-text="保存中..."> + <el-form-item label="批次名称:" prop="batchName"> + <el-input v-model.trim="dataForm.batchName"/> + </el-form-item> + <el-form-item label="所属缴费周期:" prop="year"> + <div style="display: flex"> + <el-select v-model="dataForm.year" placeholder="请选择年份" style="width: 150px" clearable> + <el-option + v-for="item in yearList" + :key="item.id" + :label="item.label" + :value="item.label"> + </el-option> + </el-select> + <el-select v-model="dataForm.quarter" placeholder="请选择季度" style="width: 150px;margin-left: 5px" clearable> + <el-option + v-for="item in quarterList" + :key="item.id" + :label="item.label" + :value="item.label"> + </el-option> + </el-select> + </div> + </el-form-item> + <el-form-item label="缴费类型:" prop="type"> + <el-radio-group v-model="dataForm.type" @change="changeRadio" v-removeAriaHidden> + <el-radio + v-for="item in payType" + :key="item.id" + :label="item.id" + >{{item.label}}</el-radio> + </el-radio-group> + </el-form-item> + <el-form-item v-if="dataForm.type === 1 || dataForm.type === 3 || dataForm.type === 4 " label="理论类别:" prop="deal" style="margin-left: 85px"> + <el-select v-model="dataForm.deal" placeholder="请选择" style="width: 84%" clearable> + <el-option + v-for="item in dealList" + :key="item.id" + :label="item.label" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + <el-form-item v-if="dataForm.type === 2 || dataForm.type === 3" label="实操类别:" prop="operation" style="margin-left: 85px"> + <el-select v-model="dataForm.operation" placeholder="请选择" style="width: 84%" clearable> + <el-option + v-for="item in operationList" + :key="item.id" + :label="item.label" + :value="item.id"> + </el-option> + </el-select> + </el-form-item> + </el-form> + <span slot="footer" class="dialog-footer"> + <el-button @click="handleClose">取 消</el-button> + <el-button type="primary" @click="onSubmit">确 定</el-button> + </span> + </el-dialog> +</template> + +<script > +import { addPlat, updatePlat } from '@/api/onlineEducation/plat' + +export default { + name: 'addUser', + components: { + }, + data() { + return { + dialogVisible: false, + dialogStatus: '', + + rules: { + batchName: [{ required: true, message: '请输入批次名称', trigger: 'blur' }], + year: [{ required: true, message: '请选择缴费周期', trigger: 'blur' }], + type: [{ required: true, message: '请选择缴费类型', trigger: 'blur' }], + operation: [{ required: true, message: '请选择实操类别', trigger: 'blur' }], + deal: [{ required: true, message: '请选择理论类别', trigger: 'blur' }], + }, + dataForm: {}, + yearList: [ + { + id: 0, + label: '2024年' + }, + { + id: 1, + label: '2025年' + }, + { + id: 2, + label: '2026年' + }, + { + id: 3, + label: '2027年' + }, + { + id: 4, + label: '2028年' + }, + { + id: 5, + label: '2029年' + }, + { + id: 6, + label: '2030年' + }, + ], + quarterList: [ + { + id: 1, + label: '第一季度' + }, + { + id: 2, + label: '第二季度' + }, + { + id: 3, + label: '第三季度' + }, + { + id: 4, + label: '第四季度' + }, + ], + payType: [ + { + id: 1, + label: '初训理论' + }, + { + id: 2, + label: '初训实操' + }, + { + id: 3, + label: '初训理论与实操' + }, + { + id: 4, + label: '复训理论' + }, + ], + dealList: [], + operationList: [] + } + }, + created() { + + }, + methods: { + openDialog (type, data) { + this.resetDataForm(); + this.dialogVisible = true; + this.dialogStatus = type; + if(this.dialogStatus == 'edit') { + this.dataForm = data; + } + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) + }, + changeRadio(val){ + console.log('val',val) + this.dataForm.deal = null + this.dataForm.operation = null + }, + handleClose() { + this.dialogVisible = false; + this.$emit("getList"); + }, + onSubmit() { + this.$refs["dataForm"].validate( async valid => { + if (valid) { + if(this.dialogStatus == 'add'){ + console.log("this.dataForm",this.dataForm) + // const res = await addPlat(this.dataForm); + // if(res.code == 200) { + // this.$emit("getList"); + // this.dialogVisible = false; + // this.$message({ + // type:'success', + // message: '新增成功' + // }) + // }else{ + // this.$message({ + // type:'warning', + // message: res.msg + // }) + // } + }else { + // const res = await updatePlat(this.dataForm); + // if(res.code == 200) { + // this.$emit("getList"); + // this.dialogVisible = false; + // this.$message({ + // type:'success', + // message: '编辑成功' + // }) + // }else{ + // this.$message({ + // type:'warning', + // message: res.msg + // }) + // } + } + } + }) + + }, + resetDataForm() { + this.dataForm = { + } + }, + } +} + +</script> +<style scoped> +.infoTitle{ + margin-top:-10px; + margin-bottom:20px; + display: flex; + justify-content: space-around; + font-weight: 800; + font-size: 16px +} + +</style> diff --git a/src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue b/src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue new file mode 100644 index 0000000..f597722 --- /dev/null +++ b/src/views/specialOperationsPay/notCoalPay/components/addStuDialog.vue @@ -0,0 +1,150 @@ +<template> + <el-dialog + :title="dialogStatus==='add'?'新增':'编辑'" + :visible.sync="dialogVisible" + :modal-append-to-body="false" + :close-on-click-modal="false" + width="450px" + :before-close="handleClose" + > + <el-form ref="dataForm" :model="dataForm" :rules="rules" 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> +</template> + +<script > +import { addPlat, updatePlat } from '@/api/onlineEducation/plat' +import { verifySimplePhone } from '@/utils/validate' + +export default { + name: 'addUser', + components: { + }, + data() { + let validatePhone = (rule, value, callback)=>{ + if(value === ''){ + callback(new Error('请输入手机号')) + }else{ + if(!verifySimplePhone(value)){ + callback(new Error('手机号格式有误')) + }else{ + callback() + } + } + } + return { + dialogVisible: false, + dialogStatus: '', + + rules: { + name: [{ required: true, message: '请输入姓名', trigger: 'blur' }], + idCard: [{ required: true, message: '请输入身份证号', trigger: 'blur' }], + phone:[{ required: true, validator: validatePhone, trigger: 'blur' }], + sex: [{ required: true, message: '请选择性别', trigger: 'blur' }], + }, + dataForm: {}, + + } + }, + created() { + + }, + methods: { + openDialog (type, data) { + this.resetDataForm(); + this.dialogVisible = true; + this.dialogStatus = type; + if(this.dialogStatus == 'edit') { + this.dataForm = data; + } + this.$nextTick(() => { + this.$refs['dataForm'].clearValidate() + }) + }, + handleClose() { + this.dialogVisible = false; + this.$emit("getList"); + }, + onSubmit() { + this.$refs["dataForm"].validate( async valid => { + if (valid) { + if(this.dialogStatus == 'add'){ + console.log("this.dataForm",this.dataForm) + // const res = await addPlat(this.dataForm); + // if(res.code == 200) { + // this.$emit("getList"); + // this.dialogVisible = false; + // this.$message({ + // type:'success', + // message: '新增成功' + // }) + // }else{ + // this.$message({ + // type:'warning', + // message: res.msg + // }) + // } + }else { + // const res = await updatePlat(this.dataForm); + // if(res.code == 200) { + // this.$emit("getList"); + // this.dialogVisible = false; + // this.$message({ + // type:'success', + // message: '编辑成功' + // }) + // }else{ + // this.$message({ + // type:'warning', + // message: res.msg + // }) + // } + } + } + }) + + }, + resetDataForm() { + this.dataForm = { + } + }, + } +} + +</script> +<style scoped> +.infoTitle{ + margin-top:-10px; + margin-bottom:20px; + display: flex; + justify-content: space-around; + font-weight: 800; + font-size: 16px +} + +</style> diff --git a/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue b/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue new file mode 100644 index 0000000..be72ce4 --- /dev/null +++ b/src/views/specialOperationsPay/notCoalPay/components/studentDialog.vue @@ -0,0 +1,162 @@ +<template> + <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> + <div class="infoTitle"> + <div>考试点名称:XXXXX</div> + </div> + <el-form :model="form" ref="ruleForm" label-width="125px"> + <el-row :gutter="24"> + <el-col :span="8"> + <el-form-item label="缴费周期:" prop="timeRange"> + <span>xxxx</span> + </el-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="缴费类型:" prop="timeRange"> + <span>xxxx</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-form-item> + </el-col> + <el-col :span="12"> + <el-form-item label="实操类别:" prop="timeRange"> + <span>xxxx</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> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="总计应缴费:" prop="timeRange"> + <span>xxxx</span> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="已完成缴费:" prop="timeRange"> + <span>xxxx</span> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="剩余未缴费:" prop="timeRange"> + <span>xxxx</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> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="已完成缴费:" prop="timeRange"> + <span>xxxx人</span> + </el-form-item> + </el-col> + <el-col :span="6"> + <el-form-item label="当前未完成缴费:" prop="timeRange"> + <span>xxxx人</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" >批量导入</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> + <pagination + v-show="total>0" + :total="total" + :page.sync="queryParams.pageNum" + :limit.sync="queryParams.pageSize" + @pagination="getStuList" + /> + </el-dialog> + <add-stu-dialog ref="addStuDialogRef" @getList = "getStuList"></add-stu-dialog> + </div> +</template> +<script> +import addStuDialog from './addStuDialog.vue' + +export default { + name: 'addStu', + components: { + addStuDialog + }, + data() { + return { + open: false, + id: null, + dialogVisible: false, + loading: false, + stuList: [], + form: { + id: null, + staffId: null, + timeRange: [], + startTime: '', + endTime: '', + unit: '' + }, + total: 0, + queryParams: { + pageNum: 1, + pageSize: 10, + }, + }; + }, + methods: { + openDialog(val) { + this.dialogVisible = true; + }, + getStuList () { + + }, + handleAddStu(type,data){ + this.$refs.addStuDialogRef.openDialog(type, data); + } + } +} + +</script> + +<style scoped lang="scss"> +.stu{ + ::v-deep .el-form-item { + margin-bottom: 5px; + } + .infoTitle{ + margin-bottom:10px; + margin-left: 40px; + display: flex; + font-weight: 800; + font-size: 16px + } + +} + +</style> diff --git a/src/views/specialOperationsPay/notCoalPay/index.vue b/src/views/specialOperationsPay/notCoalPay/index.vue index cf82b1e..5500d37 100644 --- a/src/views/specialOperationsPay/notCoalPay/index.vue +++ b/src/views/specialOperationsPay/notCoalPay/index.vue @@ -1,10 +1,182 @@ -<script setup> - -</script> - <template> + <div class="app-container"> + <div> + <el-button + size="medium" + style="margin-bottom: 10px;background-color: #0FC7F0;color: white" + @click="handleAdd('add',{})" + >录入批次</el-button> + <el-date-picker + style="margin-left: 30px;width: 300px" + size="small" + v-model="dateValue" + @change="changeDate" + type="daterange" + format="yyyy-MM-dd" + value-format="yyyy-MM-dd" + range-separator="至" + start-placeholder="开始日期" + end-placeholder="结束日期"> + </el-date-picker> + <el-select v-model="queryParams.institutionId" size="small" style="margin-left: 15px;" placeholder="请选择行政区划"> + <el-option + v-for="item in districtList" + :key="item.id" + :label="item.institutionalName" + :value="item.id"> + </el-option> + </el-select> + <el-select v-model="queryParams.institutionId" size="small" style="margin-left: 15px;" placeholder="请选择考试点"> + <el-option + v-for="item in examList" + :key="item.id" + :label="item.institutionalName" + :value="item.id"> + </el-option> + </el-select> + <el-button + size="small" + type="primary" + style="margin-bottom: 10px;margin-left: 20px" + @click="handleQuery()" + >查询</el-button> + <el-button + size="small" + type="primary" + style="margin-bottom: 10px" + @click="resetQuery()" + >重置</el-button> + </div> + <el-table v-loading="loading" :data="expertList" style="margin-top: 10px"> + <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="batchName" /> + <el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px"> + <template #default="scope" > + <el-button size="mini" type="text" style="color: #1890ff" @click="handleViewStu(scope.row)">学员管理</el-button> + <el-button size="mini" type="text" style="color: #1890ff" @click="handleViewCourse(scope.row,'')">批量缴费</el-button> + <el-button size="mini" type="text" style="color:lightcoral" @click="handleViewCourse(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="getList" + /> + <add-dialog ref="addDialogRef" @getList = "getList"></add-dialog> + <stu-dialog ref="stuDialogRef" @getList = "getList"></stu-dialog> + </div> </template> -<style scoped lang="scss"> +<script> +import { delJobRegist } from '@/api/coalMine/jobRegist' +import { listPlat, listPlatSelect } from '@/api/onlineEducation/plat' +import { listCourse } from '@/api/onlineEducation/course' +import addDialog from './components/addDialog.vue' +import stuDialog from './components/studentDialog.vue' +export default { + name: "nPeopleManage", + dicts: [], + components: { addDialog,stuDialog }, + data() { + return { + isDark:true, + loading: false, + single: true, + multiple: true, + showSearch: true, + addForm: false, + total: 0, + districtList: [], + examList: [], + dateValue: [], + expertList: [], + queryParams: { + pageNum: 1, + pageSize: 10, + institutionId: '' + }, + }; + }, + created() { + this.getDistrict(); + this.getList(); + this.getExam(); + }, + methods: { + getList(){ + this.loading = true; + this.expertList = [ + { + id: 1, -</style> + } + ] + this.total = 1 + this.loading = false; + // this.loading = true; + // listCourse( this.queryParams).then((res) => { + // if (res.code == 200) { + // this.expertList = res.rows.map(item => { + // return { + // ...item, + // courseNum: item.outline ? item.outline.length : '', + // } + // }) + // this.total = res.total + // this.loading = false; + // } + // }) + }, + openUrl(url) { + window.open(url,'_blank') + }, + //行政区划 + getDistrict() { + + }, + //考试点 + getExam() { + + }, + changeDate(val){ + console.log('val',val) + }, + handleAdd(type,data) { + this.$refs.addDialogRef.openDialog(type, data); + }, + handleViewStu(val){ + this.$refs.stuDialogRef.openDialog(val); + }, + handleQuery(){ + this.getList(); + }, + resetQuery(){ + this.queryParams = { + pageNum: 1, + pageSize: 10, + institutionId: '' + } + this.getList(); + }, + check(val){ + this.$confirm('此操作将审核该条数据, 是否继续?', '提示', { + confirmButtonText: '确定', + cancelButtonText: '取消', + type: 'warning' + }).then(async () => { + }).catch(() => { + + }); + } + } +}; +</script> -- Gitblit v1.9.2