hzd/h5
4
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1

Browse Source
This commit is contained in:
hezhidong
2024-01-30 10:55:56 +08:00
parent ff582f261b
commit 4438dbfe4d
6 changed files with 328 additions and 496 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/views/PaymentSystem/CreatePayment/index.vue
+187 -198
View File
@@ -3,35 +3,35 @@
<!-- 搜索 -->
<div class="form-adapt-container">
<el-card shadow="hover" header="">
<CommonHead @newly-data="fetchData" @reset-data="reset" @search-data="search" />
<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-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-form-item label="缴费金额" prop="money">
<el-input size="mini" type="number" v-model="query.money"></el-input>
</el-form-item>
</el-col>
@@ -41,11 +41,11 @@
v-model="query.date"
type="date"
value-format="yyyy-MM-dd"
placeholder="选择开始时间">
placeholder="选择开始时间"
>
</el-date-picker>
</el-form-item>
</el-col>
</el-row>
</el-form>
</el-card>
@@ -58,17 +58,23 @@
:columns="columns"
:data="data"
></CommonTables>
<Pagination
<Pagination
:total="total"
v-show="total > 0"
v-show="total > 0"
:pageNum="query.pageNum"
:pageSize="query.pageSize"
@clickCurrent="onClickCurrent"
@clickSize="onClickSize"
@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
ref="form"
:model="form"
:rules="rules"
label-width="80px"
class="demo-ruleForm"
>
<el-form-item label="校区名称" prop="schoolId">
<el-select
size="mini"
@@ -78,16 +84,17 @@
class="w100"
>
<el-option
v-for="item in schoolArr"
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-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">
@@ -100,14 +107,14 @@
>
</el-date-picker>
</el-form-item>
<el-form-item label="结束时间" prop="endTime" >
<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">
@@ -123,34 +130,40 @@
<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 v-if="userArr.length" class="dialog-box">
<div v-for="(item, index) in userArr" class="" :key="index">
{{ item.name }}
</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 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'
import {
postAddOrders,
getOrders,
deleteOrders,
getUserOrders,
getNoOrders,
getOrganization,
} from "./api";
import CommonTables from "./components/CommonTables.vue";
export default {
name: "CreatePayment",
data() {
@@ -189,7 +202,7 @@ export default {
prop: "startTime",
},
{
label: "结束时间",
label: "结束时间",
prop: "endTime",
},
{
@@ -202,7 +215,7 @@ export default {
pageNum: 1,
pageSize: 10,
schoolId: null,
subject: null, // 缴费标题
subject: null, // 缴费标题
money: null, // 金额
explain: null, // 缴费说明
date: null, // 开始时间
@@ -210,226 +223,206 @@ export default {
},
total: 0, // 总页数
isVisible: false, // 弹出层
isVisible1: false,// 详情状态
title: '新增', // 弹出层按钮
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' },
],
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: ['缴费中', '缴费结束', '删除'],
statusArr: ["缴费中", "缴费结束", "删除"],
userArr: [], // 已缴费人员
noUserArr: [], // 未交费人员
schoolArr: [], //
}
schoolArr: [], //
};
},
components:{
CommonTables
components: {
CommonTables,
},
created(){
this.getList()
created() {
this.getList();
getOrganization(0).then((res) => {
console.log(res);
this.schoolArr = res.data;
});
},
methods:{
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;
onClickSubmit() {
console.log(this.form);
}else{
this.message('新增失败', 'error')
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
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
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('张三返回')
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
})
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()
this.title = "新增";
this.resetForm();
},
// 重置按钮
reset() {
console.log("按钮重置点击了");
this.query = {
(this.query = {
pageNum: 1,
pageSize: 10,
schoolId: null, //
subject: null, // 缴费标题
schoolId: null, //
subject: null, // 缴费标题
money: null, // 金额
explain: null, // 缴费说明
date: null, // 开始时间
endTime: null, // 结束时间
},
this.getList()
}),
this.getList();
},
// 重置表单
resetForm() {
this.form = {
this.form = {
money: null, // 金额
subject: 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()
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
})
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')
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()
this.title = "修改";
this.resetForm();
},
// 点击切换页数
onClickCurrent(pageNum){
console.log( '点击切换页数' +pageNum)
this.query.pageNum = pageNum
this.getList()
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)
onClickSize(pageSize) {
console.log("点击了每页页数" + pageSize);
this.query.pageSize = pageSize;
this.getList();
console.log(pageSize);
},
message(message = '新增成功',type = 'success'){ // type类型 success成功 warning警告 error错误
message(message = "新增成功", type = "success") {
// type类型 success成功 warning警告 error错误
this.$message({
message,
type
type,
});
}
}
},
},
};
</script>
<style lang="scss" scoped>
.big-box{
}
.dialog-box{
.dialog-box {
// width: 100%;
display: flex;
flex-wrap: wrap;
@@ -437,14 +430,10 @@ export default {
// min-height: 50px;
padding: 20px 0 40px;
overflow: auto;
div{
padding: 5px 5px;
box-sizing: border-box;
// height: 40px;
}
div {
padding: 5px 5px;
box-sizing: border-box;
// height: 40px;
}
}
</style>