缴费页面

This commit is contained in:
Your Name
2023-09-08 10:48:24 +08:00
parent 3d38d82004
commit aeaf7f86d8
4 changed files with 381 additions and 20 deletions
+1 -1
View File
@@ -5,7 +5,7 @@ VUE_APP_TITLE = 智慧仲裁管理系统
ENV = 'development'
# 智慧仲裁管理系统/开发环境
VUE_APP_BASE_API = '/dev-api'
VUE_APP_BASE_API = '/API'
# 路由懒加载
VUE_CLI_BABEL_TRANSPILE_MODULES = true
-10
View File
@@ -1,10 +0,0 @@
# 页面标题
VUE_APP_TITLE = 智慧仲裁管理系统
NODE_ENV = production
# 测试环境配置
ENV = 'staging'
# 智慧仲裁管理系统/测试环境
VUE_APP_BASE_API = '/stage-api'
+193
View File
@@ -0,0 +1,193 @@
<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="申请人" prop="ipaddr">
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="提交人" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="dataList" style="width: 100%;">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="申请人名称" align="center" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="案件数量" align="center" prop="casesNumber" :show-overflow-tooltip="true" />
<el-table-column label="标的总金额" align="center" prop="totalAmount" />
<el-table-column label="提交日期" align="center" prop="date" :show-overflow-tooltip="true" />
<el-table-column label="提交人" align="center" prop="presenter" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="state" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-download" @click="confirmation(scope.row)"
v-hasPermi="['monitor:online:forceLogout']">查看缴费清单</el-button>
<el-button size="mini" type="text" icon="el-icon-bank-card" @click="confirmation(scope.row)"
v-hasPermi="['monitor:online:forceLogout']">缴费确认</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="true">
<el-form-item label="案件编号:" prop="caseNumber">
<el-input v-model="form.caseNumber" placeholder="请输入岗位名称" />
</el-form-item>
<el-form-item label="申请人:" prop="applicant">
<el-input v-model="form.applicant" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="案件标的:" prop="caseIdentifying">
<el-input-number v-model="form.caseIdentifying" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="案件应缴费用:" prop="feePayable">
<el-input-number v-model="form.feePayable" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="案件实缴费用:" prop="actualPayment">
<el-input-number v-model="form.actualPayment" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="被申请人:" prop="respondent">
<el-input v-model="form.Respondent" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="申请人仲裁诉求:" prop="appeal">
<el-input v-model="form.appeal" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="案件状态:" prop="state">
<el-input v-model="form.state" placeholder="请输入编码名称" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
</div>
</template>
<script>
import { list, forceLogout } from "@/api/monitor/online";
export default {
name: "payList",
data() {
return {
// 遮罩层
loading: false,
// 总条数
total: 0,
// 表格数据
list: [],
pageNum: 1,
pageSize: 10,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
ipaddr: undefined,
userName: undefined
},
// 弹出层内容
form: {
caseNumber:'111',
applicant:'韩超勃',
caseIdentifying:10000,
feePayable:1000,
actualPayment:980,
Respondent:'黄海龙',
appeal:'杀人放火',
state:'已缴费',
},
// 校验表单
rules: {
postName: [
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
],
postCode: [
{ required: true, message: "岗位编码不能为空", trigger: "blur" }
],
postSort: [
{ required: true, message: "岗位顺序不能为空", trigger: "blur" }
]
},
dataList: [
{
name: '黄海龙',
casesNumber: 1,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}, {
name: '黄海龙',
casesNumber: 1,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}, {
name: '黄海龙',
casesNumber: 2,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}, {
name: '黄海龙',
casesNumber: 3,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}
]
};
},
created() {
// this.getList();
},
methods: {
// 取消按钮
cancel() {
this.open = false;
},
/** 新增按钮操作 */
confirmation() {
debugger
this.open = true;
this.title = "缴费确认";
},
// 提交表单
submitForm(){},
/** 查询登录日志列表 */
getList() {
// this.loading = true;
// list(this.queryParams).then(response => {
// this.list = response.rows;
// this.total = response.total;
// this.loading = false;
// });
},
/** 搜索按钮操作 */
handleQuery() {
// this.pageNum = 1;
// this.getList();
},
/** 重置按钮操作 */
resetQuery() {
// this.resetForm("queryForm");
// this.handleQuery();
},
}
};
</script>
+187 -9
View File
@@ -1,15 +1,193 @@
<template>
<div>
缴费
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" label-width="68px">
<el-form-item label="申请人" prop="ipaddr">
<el-input v-model="queryParams.ipaddr" placeholder="请输入登录地址" clearable @keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item label="提交人" prop="userName">
<el-input v-model="queryParams.userName" placeholder="请输入用户名称" clearable
@keyup.enter.native="handleQuery" />
</el-form-item>
<el-form-item>
<el-button type="primary" icon="el-icon-search" size="mini" @click="handleQuery">搜索</el-button>
<el-button icon="el-icon-refresh" size="mini" @click="resetQuery">重置</el-button>
</el-form-item>
</el-form>
<el-table v-loading="loading" :data="dataList" style="width: 100%;">
<el-table-column label="序号" type="index" align="center">
<template slot-scope="scope">
<span>{{ (pageNum - 1) * pageSize + scope.$index + 1 }}</span>
</template>
</el-table-column>
<el-table-column label="申请人名称" align="center" prop="name" :show-overflow-tooltip="true" />
<el-table-column label="案件数量" align="center" prop="casesNumber" :show-overflow-tooltip="true" />
<el-table-column label="标的总金额" align="center" prop="totalAmount" />
<el-table-column label="提交日期" align="center" prop="date" :show-overflow-tooltip="true" />
<el-table-column label="提交人" align="center" prop="presenter" :show-overflow-tooltip="true" />
<el-table-column label="状态" align="center" prop="state" />
<el-table-column label="操作" align="center" class-name="small-padding fixed-width">
<template slot-scope="scope">
<el-button size="mini" type="text" icon="el-icon-download" @click="confirmation(scope.row)"
v-hasPermi="['monitor:online:forceLogout']">查看缴费清单</el-button>
<el-button size="mini" type="text" icon="el-icon-bank-card" @click="confirmation(scope.row)"
v-hasPermi="['monitor:online:forceLogout']">缴费</el-button>
</template>
</el-table-column>
</el-table>
<el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
<el-form ref="form" :model="form" :rules="rules" label-width="150px" :disabled="true">
<el-form-item label="案件编号:" prop="caseNumber">
<el-input v-model="form.caseNumber" placeholder="请输入岗位名称" />
</el-form-item>
<el-form-item label="申请人:" prop="applicant">
<el-input v-model="form.applicant" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="案件标的:" prop="caseIdentifying">
<el-input-number v-model="form.caseIdentifying" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="案件应缴费用:" prop="feePayable">
<el-input-number v-model="form.feePayable" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="案件实缴费用:" prop="actualPayment">
<el-input-number v-model="form.actualPayment" controls-position="right" :min="0" />
</el-form-item>
<el-form-item label="被申请人:" prop="respondent">
<el-input v-model="form.Respondent" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="申请人仲裁诉求:" prop="appeal">
<el-input v-model="form.appeal" placeholder="请输入编码名称" />
</el-form-item>
<el-form-item label="案件状态:" prop="state">
<el-input v-model="form.state" placeholder="请输入编码名称" />
</el-form-item>
</el-form>
<div slot="footer" class="dialog-footer">
<!-- <el-button type="primary" @click="submitForm">确 定</el-button> -->
<el-button @click="cancel">取 消</el-button>
</div>
</el-dialog>
<pagination v-show="total > 0" :total="total" :page.sync="pageNum" :limit.sync="pageSize" />
</div>
</template>
<script>
export default {
import { list, forceLogout } from "@/api/monitor/online";
export default {
name: "payList",
data() {
return {
// 遮罩层
loading: false,
// 总条数
total: 0,
// 表格数据
list: [],
pageNum: 1,
pageSize: 10,
// 弹出层标题
title: "",
// 是否显示弹出层
open: false,
// 查询参数
queryParams: {
ipaddr: undefined,
userName: undefined
},
// 弹出层内容
form: {
caseNumber:'111',
applicant:'韩超勃',
caseIdentifying:10000,
feePayable:1000,
actualPayment:980,
Respondent:'黄海龙',
appeal:'杀人放火',
state:'已缴费',
},
// 校验表单
rules: {
postName: [
{ required: true, message: "岗位名称不能为空", trigger: "blur" }
],
postCode: [
{ required: true, message: "岗位编码不能为空", trigger: "blur" }
],
postSort: [
{ required: true, message: "岗位顺序不能为空", trigger: "blur" }
]
},
dataList: [
{
name: '黄海龙',
casesNumber: 1,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}, {
name: '黄海龙',
casesNumber: 1,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}, {
name: '黄海龙',
casesNumber: 2,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}, {
name: '黄海龙',
casesNumber: 3,
totalAmount: '1000',
date: '2016-05-02',
presenter: '韩超勃',
state: "待缴费"
}
]
};
},
created() {
// this.getList();
},
methods: {
// 取消按钮
cancel() {
this.open = false;
},
/** 新增按钮操作 */
confirmation() {
debugger
this.open = true;
this.title = "缴费确认";
},
// 提交表单
submitForm(){},
/** 查询登录日志列表 */
getList() {
// this.loading = true;
// list(this.queryParams).then(response => {
// this.list = response.rows;
// this.total = response.total;
// this.loading = false;
// });
},
/** 搜索按钮操作 */
handleQuery() {
// this.pageNum = 1;
// this.getList();
},
/** 重置按钮操作 */
resetQuery() {
// this.resetForm("queryForm");
// this.handleQuery();
},
}
};
</script>
<style lang="scss" scoped>
</style>