初始化
This commit is contained in:
hezhidong
@@ -0,0 +1,68 @@
|
||||
import request from '../../../utils/request'
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/get',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 新增
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
|
||||
// 删除
|
||||
export function deleteOrders (id) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/delete',
|
||||
method: 'put',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders (orderId) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/get',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单未交费人员
|
||||
export function getNoOrders (orderId) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/getNoOrders',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
|
||||
// 查看缴费标题字典
|
||||
export function getSubject () {
|
||||
return request({
|
||||
url: '/schoolpay/orders/getSub',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
// 获取组织架构
|
||||
export function getOrganization (superId){
|
||||
return request({
|
||||
url: `/user-dept/user/dept/${superId}`,
|
||||
method: 'get',
|
||||
})
|
||||
}
|
||||
|
||||
@@ -0,0 +1,124 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
></el-table-column>
|
||||
<el-table-column fixed="right" prop="zip" label="操作" width="160">
|
||||
<template slot-scope="scope">
|
||||
<!-- <el-button
|
||||
@click="handleEdit(scope.row)"
|
||||
class="el-icon-edit"
|
||||
type="text"
|
||||
size="small"
|
||||
>编辑</el-button
|
||||
> -->
|
||||
<el-button
|
||||
@click="handleDetail(scope.row)"
|
||||
type="text"
|
||||
size="small"
|
||||
>缴费情况</el-button
|
||||
>
|
||||
<el-popconfirm
|
||||
@confirm="handleDelete(scope.row)"
|
||||
:title="'确定要删除吗？'"
|
||||
>
|
||||
<el-button
|
||||
slot="reference"
|
||||
style="margin-left: 10px; color: red"
|
||||
class="el-icon-delete"
|
||||
type="text"
|
||||
size="small"
|
||||
>删除</el-button
|
||||
>
|
||||
</el-popconfirm>
|
||||
</template>
|
||||
</el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
detailFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
console.log(row);
|
||||
// 调用触发父组件的函数叫他发请求删除元素，重新获取数据 id
|
||||
// this.deleteFunc(id);
|
||||
this.deleteFunc(row);
|
||||
const index = this.tableData.indexOf(row); // 找到要删除的数据项在数组中的索引
|
||||
this.tableData.splice(index, 1); // 使用splice方法从数组中删除该数据项
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
// 详情事件
|
||||
handleDetail(row) {
|
||||
// console.log(row);
|
||||
this.detailFunc(row);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,450 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="校区名称" prop="schoolId">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="query.schoolId"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<!-- <el-row :gutter="35"> -->
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="query.subject"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="query.money"></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="开始时间" prop="date">
|
||||
<el-date-picker
|
||||
v-model="query.date"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:detail-func="detailData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="校区名称" prop="schoolId">
|
||||
<el-select
|
||||
size="mini"
|
||||
v-model="form.schoolId"
|
||||
placeholder="请选择校区"
|
||||
clearable
|
||||
class="w100"
|
||||
>
|
||||
<el-option
|
||||
v-for="item in schoolArr"
|
||||
:label="item.name"
|
||||
:value="item.deptId"
|
||||
></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间"
|
||||
@change="onChangeStartTime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间"
|
||||
@change="onChangeEndTime"
|
||||
>
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
|
||||
<el-dialog title="缴费详细" :visible.sync="isVisible1" width="30%">
|
||||
<div class="big-box">
|
||||
<h3>已缴费名单</h3>
|
||||
<div v-if="userArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in userArr" class="" :key="index">{{item.name}}</div>
|
||||
</div>
|
||||
<div v-else class="dialog-box">
|
||||
暂无缴费名单
|
||||
</div>
|
||||
<h3>未缴费名单</h3>
|
||||
<div v-if="noUserArr.length" class="dialog-box">
|
||||
<div v-for="(item, index) in noUserArr" class="" :key="index">{{item.name}}</div>
|
||||
</div>
|
||||
<div v-else class="dialog-box">
|
||||
暂无缴费名单
|
||||
</div>
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible1 = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="isVisible1 = false">确定</el-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, deleteOrders, getUserOrders, getNoOrders, getOrganization } from './api'
|
||||
import CommonTables from './components/CommonTables.vue'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题 .
|
||||
schoolId: null, // 校区
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "校区名称",
|
||||
prop: "schoolName",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费金额",
|
||||
prop: "money",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
label: "状态", // 0-缴费中 1-缴费结束 2-删除
|
||||
prop: "status",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
schoolId: null,
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
date: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
isVisible1: false,// 详情状态
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
schoolId: [
|
||||
{ required: true, message: '请选择校区', trigger: 'change' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
statusArr: ['缴费中', '缴费结束', '删除'],
|
||||
userArr: [], // 已缴费人员
|
||||
noUserArr: [], // 未交费人员
|
||||
schoolArr: [], //
|
||||
}
|
||||
},
|
||||
components:{
|
||||
CommonTables
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
getOrganization(0).then((res) => {
|
||||
console.log(res);
|
||||
this.schoolArr = res.data;
|
||||
});
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击开始时间比较
|
||||
onChangeStartTime() {
|
||||
// startTime: null, // 开始时间
|
||||
// endTime: null, // 结束时间
|
||||
let start = (new Date(this.form.startTime)).getTime()
|
||||
let end = (new Date(this.form.endTime)).getTime()
|
||||
if(this.form.endTime){
|
||||
if(start > end){
|
||||
this.message('开始时间不能大于结束时间','error')
|
||||
this.form.startTime = null
|
||||
|
||||
}
|
||||
}
|
||||
},
|
||||
// 点击结束时间比较
|
||||
onChangeEndTime() {
|
||||
let start = (new Date(this.form.startTime)).getTime()
|
||||
let end = (new Date(this.form.endTime)).getTime()
|
||||
console.log(start)
|
||||
console.log(end)
|
||||
if(this.form.startTime){
|
||||
console.log('--------------')
|
||||
if(start > end){
|
||||
console.log('++++++++++++')
|
||||
this.message('开始时间不能大于结束时间','error')
|
||||
|
||||
this.form.endTime = null
|
||||
}
|
||||
}
|
||||
},
|
||||
// 查看详情
|
||||
detailData(row) {
|
||||
console.log(row)
|
||||
console.log('-----------------')
|
||||
this.isVisible1 = true
|
||||
this.userArr.push('张三返回')
|
||||
// for( let i = 0; i < 100; i++){
|
||||
// this.userArr.push({name: '张三返回'})
|
||||
// }
|
||||
// for( let i = 0; i < 100; i++){
|
||||
// this.noUserArr.push({name: '张三返回'})
|
||||
// }
|
||||
getUserOrders(row.id).then( res =>{
|
||||
console.log(res)
|
||||
this.userArr = res.data
|
||||
|
||||
})
|
||||
getNoOrders(row.id).then(res =>{
|
||||
this.noUserArr = res.data
|
||||
|
||||
})
|
||||
},
|
||||
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
schoolId: null, //
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
date: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
schoolId: null, // 校区
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
// console.log("搜索了", rew);
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
item.status = this.statusArr[item.status]
|
||||
item.startTime = this.formatDate(item.startTime)
|
||||
item.endTime = this.formatDate(item.endTime)
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
deleteOrders(item.id).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.message('删除成功！')
|
||||
}else{
|
||||
this.message('删除失败！', 'error')
|
||||
}
|
||||
})
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
console.log( '点击了每页页数' +pageSize)
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.big-box{
|
||||
|
||||
}
|
||||
.dialog-box{
|
||||
// width: 100%;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
max-height: 200px;
|
||||
// min-height: 50px;
|
||||
padding: 20px 0 40px;
|
||||
overflow: auto;
|
||||
div{
|
||||
padding: 5px 5px;
|
||||
box-sizing: border-box;
|
||||
// height: 40px;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
|
||||
</style>
|
||||
@@ -0,0 +1,256 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="姓名">
|
||||
<el-input v-model="form.name" placeholder="请输入姓名" clearable></el-input>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders } from './api'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "金额",
|
||||
prop: "money",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "开始时间",
|
||||
prop: "startTime",
|
||||
},
|
||||
{
|
||||
label: "结束时间",
|
||||
prop: "endTime",
|
||||
},
|
||||
{
|
||||
label: "状态", // 0-缴费中 1-缴费结束 2-删除
|
||||
prop: "status",
|
||||
},
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
|
||||
}
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.query.pageNum = 1
|
||||
this.query.pageSize = 10
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getOrders(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,55 @@
|
||||
import request from '../../../utils/request'
|
||||
// 新增订单
|
||||
export function postAddOrders (data) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/add',
|
||||
method: 'post',
|
||||
data,
|
||||
});
|
||||
}
|
||||
// get获取列表
|
||||
export function getOrders (params) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/get',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 删除订单
|
||||
export function putOrders (id) {
|
||||
return request({
|
||||
url: '/schoolpay/orders/delete',
|
||||
method: 'put',
|
||||
params:{
|
||||
id
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders (orderId) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/get',
|
||||
method: 'get',
|
||||
params:{
|
||||
orderId
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 查看订单缴费详情
|
||||
export function getUserOrders1 (params) {
|
||||
return request({
|
||||
url: '/schoolpay/userOrders/get',
|
||||
method: 'get',
|
||||
params
|
||||
});
|
||||
}
|
||||
// 查看缴费标题字典
|
||||
export function getSubject () {
|
||||
return request({
|
||||
url: '/schoolpay/orders/getSub',
|
||||
method: 'get',
|
||||
});
|
||||
}
|
||||
|
||||
@@ -0,0 +1,36 @@
|
||||
<template>
|
||||
<div>
|
||||
<el-button @click="resetClick" type="info" size="mini" icon="iconfont icon-biaodan"
|
||||
>重置</el-button
|
||||
>
|
||||
<el-button @click="searchClick" type="warning" size="mini" icon="el-icon-search"
|
||||
>搜索</el-button
|
||||
>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: "CommonHead",
|
||||
data() {
|
||||
return {
|
||||
searchData: "",
|
||||
};
|
||||
},
|
||||
|
||||
methods: {
|
||||
newlyClick() {
|
||||
// 在此处调用父组件传入的方法叫父组件做事情
|
||||
this.$emit("newly-data");
|
||||
},
|
||||
resetClick() {
|
||||
this.$emit("reset-data");
|
||||
},
|
||||
searchClick() {
|
||||
this.$emit("search-data", this.searchData);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
@@ -0,0 +1,94 @@
|
||||
<template>
|
||||
<el-card class="box-card">
|
||||
<el-table :data="tableData" style="width: 100%" height="650" size="mini">
|
||||
<el-table-column
|
||||
v-if="column.label !== 'id'"
|
||||
v-for="(column, index) in tableColumns"
|
||||
:key="index"
|
||||
:prop="column.prop"
|
||||
:label="column.label"
|
||||
width="auto"
|
||||
></el-table-column>
|
||||
</el-table>
|
||||
</el-card>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: {
|
||||
columns: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
required: true,
|
||||
},
|
||||
deleteFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
editFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
detailFunc: {
|
||||
type: Function,
|
||||
default: () => {},
|
||||
},
|
||||
},
|
||||
name: "CommonTables",
|
||||
data() {
|
||||
return {};
|
||||
},
|
||||
methods: {
|
||||
// 删除事件
|
||||
handleDelete(row) {
|
||||
console.log(row);
|
||||
// 调用触发父组件的函数叫他发请求删除元素，重新获取数据 id
|
||||
// this.deleteFunc(id);
|
||||
this.deleteFunc(row);
|
||||
const index = this.tableData.indexOf(row); // 找到要删除的数据项在数组中的索引
|
||||
this.tableData.splice(index, 1); // 使用splice方法从数组中删除该数据项
|
||||
},
|
||||
// 编辑事件
|
||||
handleEdit(row) {
|
||||
console.log(row);
|
||||
this.editFunc(row);
|
||||
},
|
||||
// 详情事件
|
||||
handleDetail(row) {
|
||||
// console.log(row);
|
||||
this.detailFunc(row);
|
||||
}
|
||||
},
|
||||
|
||||
computed: {
|
||||
tableColumns() {
|
||||
// 处理传进来的列配置，返回符合 Element UI 表格要求的配置
|
||||
return this.columns.map((column) => {
|
||||
return {
|
||||
label: column.label,
|
||||
prop: column.prop,
|
||||
};
|
||||
});
|
||||
},
|
||||
tableData() {
|
||||
// 处理传进来的数据，返回符合 Element UI 表格要求的数据
|
||||
return this.data.map((rowData) => {
|
||||
let row = {};
|
||||
for (let column of this.columns) {
|
||||
row[column.prop] = rowData[column.prop];
|
||||
}
|
||||
return row;
|
||||
});
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.s {
|
||||
color: red;
|
||||
}
|
||||
</style>
|
||||
@@ -0,0 +1,333 @@
|
||||
<template>
|
||||
<div>
|
||||
<!-- 搜索 -->
|
||||
<div class="form-adapt-container">
|
||||
<el-card shadow="hover" header="">
|
||||
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
|
||||
<el-form :model="form" size="small" label-width="100px" class="mt35 mb35">
|
||||
<el-row :gutter="35">
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费标题">
|
||||
<el-select
|
||||
v-model="query.orderId"
|
||||
placeholder="请选择缴费标题"
|
||||
clearable
|
||||
class="w100"
|
||||
filterable
|
||||
>
|
||||
<el-option v-for="(item, index) in subjectArr" :key="index" :label="item.subject" :value="item.id"></el-option>
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费金额">
|
||||
<el-input v-model="query.totalAmount" placeholder="请输入缴费金额" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="缴费时间">
|
||||
<el-date-picker
|
||||
v-model="query.orderTime"
|
||||
type="date"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择缴费时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="手机号码">
|
||||
<el-input type="number" v-model="query.mobile" placeholder="请输入手机号码" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="用户姓名">
|
||||
<el-input v-model="query.name" placeholder="请输入用户姓名" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="4" class="mb20">
|
||||
<el-form-item label="支付宝订单号">
|
||||
<el-input v-model="query.tradeNo" placeholder="请输入支付宝订单号" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
</el-card>
|
||||
</div>
|
||||
<!-- 表格 -->
|
||||
<CommonTables
|
||||
:delete-func="deleteData"
|
||||
:edit-func="editData"
|
||||
:columns="columns"
|
||||
:data="data"
|
||||
></CommonTables>
|
||||
<Pagination
|
||||
:total="total"
|
||||
v-show="total > 0"
|
||||
:pageNum="query.pageNum"
|
||||
:pageSize="query.pageSize"
|
||||
@clickCurrent="onClickCurrent"
|
||||
@clickSize="onClickSize"
|
||||
/>
|
||||
<!-- 创建缴费 -->
|
||||
<el-dialog :title="title" :visible.sync="isVisible" width="30%">
|
||||
<el-form ref="form" :model="form" :rules="rules" label-width="80px" class="demo-ruleForm">
|
||||
<el-form-item label="缴费标题" prop="subject">
|
||||
<el-input size="mini" v-model="form.subject"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费金额" prop="money">
|
||||
<el-input size="mini" type="number" v-model="form.money"></el-input>
|
||||
</el-form-item>
|
||||
<el-form-item label="开始时间" prop="startTime">
|
||||
<el-date-picker
|
||||
v-model="form.startTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择开始时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="结束时间" prop="endTime" >
|
||||
<el-date-picker
|
||||
v-model="form.endTime"
|
||||
type="datetime"
|
||||
value-format="yyyy-MM-dd HH:mm:ss"
|
||||
placeholder="选择结束时间">
|
||||
</el-date-picker>
|
||||
</el-form-item>
|
||||
<el-form-item label="缴费说明" prop="explain">
|
||||
<el-input size="mini" v-model="form.explain"></el-input>
|
||||
</el-form-item>
|
||||
</el-form>
|
||||
|
||||
<div slot="footer" class="dialog-footer">
|
||||
<el-button size="mini" @click="isVisible = false">取 消</el-button>
|
||||
<el-button size="mini" type="primary" @click="onClickSubmit">确定</el-button>
|
||||
</div>
|
||||
</el-dialog>
|
||||
</div>
|
||||
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { postAddOrders, getOrders, putOrders, getSubject, getUserOrders1 } from './api'
|
||||
import CommonTables from './components/CommonTables.vue'
|
||||
import CommonHead from './components/CommonHead.vue'
|
||||
export default {
|
||||
name: "CreatePayment",
|
||||
data() {
|
||||
return {
|
||||
form: {
|
||||
subject: null, // 缴费标题
|
||||
money: null, // 金额
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
},
|
||||
columns: [
|
||||
{
|
||||
label: "id",
|
||||
prop: "id",
|
||||
},
|
||||
{
|
||||
label: "缴费标题",
|
||||
prop: "subject",
|
||||
},
|
||||
{
|
||||
label: "缴费说明",
|
||||
prop: "explain",
|
||||
},
|
||||
{
|
||||
label: "订单号",
|
||||
prop: "outTradeNo",
|
||||
},
|
||||
{
|
||||
label: "金额",
|
||||
prop: "totalAmount",
|
||||
},
|
||||
{
|
||||
label: "缴费时间",
|
||||
prop: "orderTime",
|
||||
},
|
||||
{
|
||||
label: "用户姓名",
|
||||
prop: "name",
|
||||
},
|
||||
{
|
||||
label: "手机号码",
|
||||
prop: "mobile",
|
||||
},
|
||||
{
|
||||
label: "支付宝订单号",
|
||||
prop: "tradeNo",
|
||||
},
|
||||
{
|
||||
label: "系统付款状态",
|
||||
prop: "status",
|
||||
},
|
||||
{
|
||||
label: "支付宝付款状态",
|
||||
prop: "tradeStatus",
|
||||
},
|
||||
{
|
||||
label: "系统付款金额",
|
||||
prop: "buyerPayAmount",
|
||||
},
|
||||
|
||||
],
|
||||
data: [],
|
||||
query: {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
orderId: null,
|
||||
totalAmount: null, // 缴费金额
|
||||
orderTime: null, // 缴费时间
|
||||
mobile: null, // 手机号码
|
||||
name: null, // 用户姓名
|
||||
tradeNo:null, // 支付宝订单号
|
||||
},
|
||||
total: 0, // 总页数
|
||||
isVisible: false, // 弹出层
|
||||
title: '新增', // 弹出层按钮
|
||||
rules: {
|
||||
subject: [
|
||||
{ required: true, message: '请输入缴费标题', trigger: 'blur' },
|
||||
],
|
||||
money: [
|
||||
{ required: true, message: '请输入缴费金额', trigger: 'blur' },
|
||||
],
|
||||
explain: [
|
||||
{ required: true, message: '请输入缴费说明', trigger: 'blur' },
|
||||
],
|
||||
startTime: [
|
||||
{ required: true, message: '请输入开始时间', trigger: 'blur' },
|
||||
],
|
||||
endTime: [
|
||||
{ required: true, message: '请输入结束时间', trigger: 'blur' },
|
||||
],
|
||||
},
|
||||
statusArr: ['待缴费', '缴费成功', '缴费失败'],
|
||||
subjectArr: [], // 字典
|
||||
}
|
||||
},
|
||||
components:{
|
||||
CommonTables,
|
||||
CommonHead
|
||||
},
|
||||
created(){
|
||||
this.getList()
|
||||
getSubject().then(res =>{
|
||||
console.log(res)
|
||||
this.subjectArr = res.data
|
||||
})
|
||||
},
|
||||
methods:{
|
||||
// 点击确定提交
|
||||
onClickSubmit(){
|
||||
console.log(this.form)
|
||||
|
||||
this.$refs['form'].validate((valid) => {
|
||||
if (valid) {
|
||||
let obj = { ...this.form }
|
||||
let startTime = new Date(this.form.startTime)
|
||||
let endTime = new Date(this.form.endTime)
|
||||
obj.startTime = startTime
|
||||
obj.endTime = endTime
|
||||
console.log(startTime)
|
||||
console.log(endTime)
|
||||
postAddOrders(obj).then(res =>{
|
||||
if(res.code == 200){
|
||||
this.getList()
|
||||
this.resetForm()
|
||||
this.message()
|
||||
this.isVisible = false;
|
||||
|
||||
}else{
|
||||
this.message('新增失败', 'error')
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
},
|
||||
// 点击新增
|
||||
fetchData() {
|
||||
this.isVisible = true;
|
||||
this.title = '新增'
|
||||
this.resetForm()
|
||||
},
|
||||
// 重置按钮
|
||||
reset() {
|
||||
console.log("按钮重置点击了");
|
||||
this.query = {
|
||||
pageNum: 1,
|
||||
pageSize: 10,
|
||||
|
||||
}
|
||||
this.getList()
|
||||
},
|
||||
// 重置表单
|
||||
resetForm() {
|
||||
this.form = {
|
||||
money: null, // 金额
|
||||
subject: null, // 缴费标题
|
||||
explain: null, // 缴费说明
|
||||
startTime: null, // 开始时间
|
||||
endTime: null, // 结束时间
|
||||
}
|
||||
},
|
||||
// 搜索按钮
|
||||
search() {
|
||||
this.getList()
|
||||
},
|
||||
// 获取数据
|
||||
getList(){
|
||||
getUserOrders1(this.query).then( res =>{
|
||||
console.log(res)
|
||||
this.data = res.data.map(item =>{
|
||||
item.status = this.statusArr[item.status]
|
||||
item.orderTime = this.formatDate(item.orderTime)
|
||||
return item
|
||||
})
|
||||
this.total = res.total
|
||||
})
|
||||
},
|
||||
// 删除
|
||||
deleteData(item) {
|
||||
console.log('------------------------------------------')
|
||||
console.log(item)
|
||||
// putOrders().then(res =>{
|
||||
|
||||
// })
|
||||
},
|
||||
// 编辑
|
||||
editData() {
|
||||
this.isVisible = true;
|
||||
this.title = '修改'
|
||||
this.resetForm()
|
||||
|
||||
},
|
||||
// 点击切换页数
|
||||
onClickCurrent(pageNum){
|
||||
console.log( '点击切换页数' +pageNum)
|
||||
this.query.pageNum = pageNum
|
||||
this.getList()
|
||||
},
|
||||
// 点击了每页页数
|
||||
onClickSize(pageSize){
|
||||
this.pageSize = pageSize
|
||||
this.query.pageSize = pageSize
|
||||
this.getList()
|
||||
console.log(pageSize)
|
||||
},
|
||||
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
|
||||
if(type == 'success'){
|
||||
this.$message({
|
||||
message,
|
||||
type
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped></style>
|
||||
Reference in New Issue
Block a user