440 lines
13 KiB
Vue
440 lines
13 KiB
Vue
<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, index) in schoolArr"
|
|
:label="item.name"
|
|
:value="item.deptId"
|
|
:key="index"
|
|
></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, index) in schoolArr"
|
|
:label="item.name"
|
|
:value="item.deptId"
|
|
:key="index"
|
|
></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>
|
|
.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>
|