<template>
|
<div class="app-container">
|
<div>
|
<el-button
|
size="medium"
|
style="margin-bottom: 10px;background-color: #0FC7F0;color: white"
|
@click="handleAdd('add',{})"
|
v-if="isAhthority"
|
>录入批次
|
</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-cascader v-model="queryParams.deptId" size="small" style="margin-left: 15px" :options="deptOptions" placeholder="组织架构" :props="{ expandTrigger: 'hover',checkStrictly: true,emitPath: false,value: 'id' }"></el-cascader>
|
<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="payList" 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="deptName"/>
|
<!-- <el-table-column label="所属地州" align="center" prop="districtName"/>-->
|
<el-table-column label="缴费类型" align="center" prop="payType">
|
<template #default="scope">
|
{{scope.row.payType == 1?'初训理论':scope.row.payType == 2?'初训实操':scope.row.payType == 3?'初训理论与实操':scope.row.payType == 4?'复训理论':''}}
|
</template>
|
</el-table-column>
|
<el-table-column label="单人（元）" align="center" prop="amount"/>
|
<el-table-column label="人数" align="center">
|
<template #default="scope">
|
<span>{{scope.row.havePayNum}}</span>/{{scope.row.totalNum}}
|
</template>
|
</el-table-column>
|
<el-table-column label="学员个人缴费" align="center" prop="batchName">
|
<template #default="scope">
|
<span v-if="scope.row.payPersonType == 1">已开启</span>
|
<span v-if="scope.row.payPersonType == 2" style="color:red">已关闭</span>
|
<el-button type="text" style="color:lightcoral" @click="updatePayType(scope.row)" v-if="scope.row.payPersonType == 1">关闭</el-button>
|
</template>
|
</el-table-column>
|
<el-table-column label="操作" align="center" class-name="small-padding fixed-width" width="180px">
|
<template #default="scope">
|
<el-button v-if="isAhthority" size="mini" type="text" style="color: #1890ff" @click="handleViewStu(scope.row)">学员管理</el-button>
|
<el-button v-if="isAhthority && scope.row.payPersonType == 2 && (scope.row.havePayNum < scope.row.totalNum)" size="mini" type="text" style="color: #1890ff" @click="handleBatchPay(scope.row,'add')">批量缴费</el-button>
|
<el-button v-if="isAhthority" 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="getList"
|
/>
|
<add-dialog ref="addDialogRef" @getList="getList"></add-dialog>
|
<stu-dialog ref="stuDialogRef" @getList="getList"></stu-dialog>
|
<batch-pay ref="batchPayRef" @getList="getList"></batch-pay>
|
</div>
|
</template>
|
|
<script>
|
|
import addDialog from './components/addDialog.vue'
|
import stuDialog from './components/studentDialog.vue'
|
import batchPay from "./components/batchPay.vue"
|
import {getExamPage} from "@/api/coalMine/placeManage/exam";
|
import {getAreaList} from "@/api/coalMine/placeManage/train";
|
import {delCoalPay, getCoalPayList, updateCoalPayType} from "@/api/specialOperationsPay/coalPay";
|
import store from "@/store";
|
import {deptTreeSelect} from "@/api/system/user";
|
|
export default {
|
name: "nCoalPay",
|
dicts: [],
|
components: {addDialog, stuDialog, batchPay},
|
data() {
|
return {
|
isDark: true,
|
loading: false,
|
single: true,
|
multiple: true,
|
showSearch: true,
|
addForm: false,
|
total: 0,
|
areaList: [],
|
deptOptions: [],
|
dateValue: [],
|
payList: [],
|
queryParams: {
|
pageNum: 1,
|
pageSize: 10,
|
deptId: '',
|
minDate: '',
|
maxDate: ''
|
},
|
isAhthority: false
|
};
|
},
|
created() {
|
this.getDistrict()
|
this.getList()
|
this.getDeptList()
|
const roles = store.getters && store.getters.roles
|
if (roles.includes('admin') || roles.includes('mkexam') || roles.includes('feimeiexam') ) {
|
this.isAhthority = true
|
} else {
|
this.isAhthority = false
|
}
|
},
|
methods: {
|
getList() {
|
this.queryParams.minDate = this.dateValue[0]?this.dateValue[0] + ' 00:00:00':''
|
this.queryParams.maxDate = this.dateValue[1]?this.dateValue[1] + ' 23:59:59':''
|
getCoalPayList( this.queryParams).then((res) => {
|
if (res.code == 200) {
|
this.payList = res.rows
|
this.total = res.total
|
}
|
})
|
},
|
|
getDeptList() {
|
deptTreeSelect().then(response => {
|
this.deptOptions = response.data
|
})
|
},
|
|
openUrl(url) {
|
window.open(url, '_blank')
|
},
|
//行政区划
|
async getDistrict() {
|
const res = await getAreaList()
|
if (res.code == 200) {
|
this.areaList = res.data
|
}
|
},
|
|
changeDate(val) {
|
console.log('val', val)
|
},
|
handleAdd(type, data) {
|
this.$refs.addDialogRef.openDialog(type, data, this.areaList,this.deptOptions);
|
},
|
handleViewStu(val) {
|
this.$refs.stuDialogRef.openDialog(val)
|
},
|
handleBatchPay(val,type) {
|
this.$refs.batchPayRef.openDialog(val,type);
|
},
|
handleQuery() {
|
this.getList();
|
},
|
resetQuery() {
|
this.queryParams = {
|
pageNum: 1,
|
pageSize: 10,
|
deptId: '',
|
minDate: '',
|
maxDate: ''
|
}
|
this.dateValue = []
|
this.getList()
|
},
|
updatePayType(row){
|
this.$confirm('一旦关闭则无法重新开启个人缴费，必须批量缴完剩余所有学员。是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const res = await updateCoalPayType({coalPayId: row.id,payPersonType: 2})
|
if(res.code == 200){
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
await this.getList()
|
}else{
|
this.$message({
|
type: 'warning',
|
message: res.msg
|
});
|
}
|
}).catch(() => {
|
|
});
|
},
|
|
handleDelete(row){
|
this.$confirm('此操作将永久删除该条数据, 是否继续?', '提示', {
|
confirmButtonText: '确定',
|
cancelButtonText: '取消',
|
type: 'warning'
|
}).then(async () => {
|
const res = await delCoalPay([row.id])
|
if(res.code == 200){
|
this.$message({
|
type: 'success',
|
message: '删除成功!'
|
});
|
await this.getList()
|
}else{
|
this.$message({
|
type: 'warning',
|
message: res.msg
|
});
|
}
|
}).catch(() => {
|
|
});
|
}
|
}
|
};
|
</script>
|
