|
|
|
|
@ -1,375 +1,461 @@
|
|
|
|
|
<template>
|
|
|
|
|
<div class="fater-body-show">
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<div
|
|
|
|
|
class="el-card-header"
|
|
|
|
|
slot="header"
|
|
|
|
|
style="font-size: 26px"
|
|
|
|
|
<!-- 整个页面的最外层容器,设置类名用于样式控制 -->
|
|
|
|
|
<div class="fater-body-show">
|
|
|
|
|
<!-- 使用Element UI的el-card组件,设置阴影效果为"never",即无阴影 -->
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<!-- el-card组件的头部内容,设置样式和显示文本,包含一个图标及"信息查询"文字,通过slot="header"指定为头部插槽内容 -->
|
|
|
|
|
<div
|
|
|
|
|
class="el-card-header"
|
|
|
|
|
slot="header"
|
|
|
|
|
style="font-size: 26px"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-r-find" style="font-size: 26px"></i>
|
|
|
|
|
信息查询
|
|
|
|
|
</div>
|
|
|
|
|
<!-- el-card组件的主体内容部分,放置查询表单 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 使用Element UI的el-form组件,设置为行内表单形式,并绑定名为"qryForm"的模型数据 -->
|
|
|
|
|
<el-form :inline="true" :model="qryForm">
|
|
|
|
|
<!-- el-form-item作为表单每一项的容器,这里是输入团队名称的输入框项 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<!-- 使用Element UI的el-input组件,双向绑定"qryForm"模型中的"teamName"字段,用于输入团队名称,设置占位提示文字及关闭自动完成功能 -->
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="qryForm.teamName"
|
|
|
|
|
placeholder="输入团队名称…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 另一个el-form-item,是输入成员姓名的输入框项,双向绑定"qryForm"模型中的"userName"字段 -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="qryForm.userName"
|
|
|
|
|
placeholder="输入成员姓名…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- el-form-item中放置一个按钮,点击按钮触发"getPageLikeInfo"方法,按钮样式设置了字体大小,按钮文本为"搜索" -->
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
@click="getPageLikeInfo()"
|
|
|
|
|
>
|
|
|
|
|
<i class="iconfont icon-r-find" style="font-size: 26px"></i>
|
|
|
|
|
信息查询
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-form :inline="true" :model="qryForm">
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="qryForm.teamName"
|
|
|
|
|
placeholder="输入团队名称…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="qryForm.userName"
|
|
|
|
|
placeholder="输入成员姓名…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
@click="getPageLikeInfo()"
|
|
|
|
|
>
|
|
|
|
|
搜索</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
搜索</el-button
|
|
|
|
|
>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<div v-if="userType == 1" slot="header">
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
@click="showAddWin()"
|
|
|
|
|
>
|
|
|
|
|
新增</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<div>
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
element-loading-text="拼命加载中"
|
|
|
|
|
element-loading-spinner="el-icon-loading"
|
|
|
|
|
element-loading-background="rgba(124, 124, 124, 0.8)"
|
|
|
|
|
:data="pageInfos"
|
|
|
|
|
border
|
|
|
|
|
>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
type="index"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="teamName"
|
|
|
|
|
label="社团名称"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="userName"
|
|
|
|
|
label="成员姓名"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="userGender"
|
|
|
|
|
label="成员性别"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="userPhone"
|
|
|
|
|
label="成员电话"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="createTime"
|
|
|
|
|
label="缴费时间"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="total"
|
|
|
|
|
label="缴纳费用(元)"
|
|
|
|
|
></el-table-column
|
|
|
|
|
>>
|
|
|
|
|
</el-table>
|
|
|
|
|
<el-pagination
|
|
|
|
|
v-if="pageTotal >= 0"
|
|
|
|
|
style="margin-top: 15px"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
:current-page="pageIndex"
|
|
|
|
|
:page-sizes="[5, 10, 20, 50]"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="totalInfo"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
<!-- 另一个el-card组件,同样无阴影效果 -->
|
|
|
|
|
<el-card shadow="never">
|
|
|
|
|
<!-- 根据"userType"的值决定是否显示此div内容,可能用于根据用户类型展示不同的头部操作按钮 -->
|
|
|
|
|
<div v-if="userType == 1" slot="header">
|
|
|
|
|
<!-- 一个主要按钮,点击触发"showAddWin"方法,样式设置了字体大小,按钮文本为"新增" -->
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
@click="showAddWin()"
|
|
|
|
|
>
|
|
|
|
|
新增</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- el-card的主体内容部分,放置了表格和分页组件 -->
|
|
|
|
|
<div>
|
|
|
|
|
<!-- 使用Element UI的el-table组件展示数据,通过"v-loading"指令控制加载状态,设置加载时的文本、图标及背景样式等,绑定名为"pageInfos"的数据作为表格数据源,设置边框 -->
|
|
|
|
|
<el-table
|
|
|
|
|
v-loading="loading"
|
|
|
|
|
element-loading-text="拼命加载中"
|
|
|
|
|
element-loading-spinner="el-icon-loading"
|
|
|
|
|
element-loading-background="rgba(124, 124, 124, 0.8)"
|
|
|
|
|
:data="pageInfos"
|
|
|
|
|
border
|
|
|
|
|
>
|
|
|
|
|
<!-- el-table-column定义表格的列,此列用于显示序号,文本居中对齐 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
type="index"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<!-- 定义一列,绑定"teamName"属性作为数据来源,列标题为"社团名称",文本居中对齐 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="teamName"
|
|
|
|
|
label="社团名称"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<!-- 定义展示"成员姓名"信息的列,绑定"userName"属性 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="userName"
|
|
|
|
|
label="成员姓名"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<!-- 定义展示"成员性别"信息的列,绑定"userGender"属性 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="userGender"
|
|
|
|
|
label="成员性别"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<!-- 定义展示"成员电话"信息的列,绑定"userPhone"属性 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="userPhone"
|
|
|
|
|
label="成员电话"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<!-- 定义展示"缴费时间"信息的列,绑定"createTime"属性 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="createTime"
|
|
|
|
|
label="缴费时间"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
<!-- 定义展示"缴纳费用(元)"信息的列,绑定"total"属性 -->
|
|
|
|
|
<el-table-column
|
|
|
|
|
align="center"
|
|
|
|
|
prop="total"
|
|
|
|
|
label="缴纳费用(元)"
|
|
|
|
|
></el-table-column>
|
|
|
|
|
</el-table>
|
|
|
|
|
<!-- 使用Element UI的el-pagination组件实现分页功能,根据条件判断是否显示,绑定页面大小改变、当前页改变等事件处理方法,设置当前页、可选页面大小数组、默认页面大小及布局等属性 -->
|
|
|
|
|
<el-pagination
|
|
|
|
|
v-if="pageTotal >= 0"
|
|
|
|
|
style="margin-top: 15px"
|
|
|
|
|
@size-change="handleSizeChange"
|
|
|
|
|
@current-change="handleCurrentChange"
|
|
|
|
|
:current-page="pageIndex"
|
|
|
|
|
:page-sizes="[5, 10, 20, 50]"
|
|
|
|
|
:page-size="pageSize"
|
|
|
|
|
layout="total, sizes, prev, pager, next, jumper"
|
|
|
|
|
:total="totalInfo"
|
|
|
|
|
>
|
|
|
|
|
</el-pagination>
|
|
|
|
|
</div>
|
|
|
|
|
</el-card>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="添加信息" width="600px" :visible.sync="showAddFlag">
|
|
|
|
|
<el-form label-width="90px" :model="payLogsForm">
|
|
|
|
|
<el-form-item label="缴纳费用(元)">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.total"
|
|
|
|
|
onkeyup="value=value.replace(/[^\d.]/g,'')"
|
|
|
|
|
placeholder="请输入缴纳费用…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收费社团">
|
|
|
|
|
<el-select
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-model="payLogsForm.teamId"
|
|
|
|
|
placeholder="请输入收费社团…"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item, index) in teams"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="缴费用户">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.userId"
|
|
|
|
|
placeholder="请输入缴费用户ID…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showAddFlag = false" style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
取 消</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="addInfo()"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
确 定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
<!-- 使用Element UI的el-dialog组件创建一个对话框,用于添加信息,设置标题、宽度及双向绑定显示隐藏状态 -->
|
|
|
|
|
<el-dialog title="添加信息" width="600px" :visible.sync="showAddFlag">
|
|
|
|
|
<!-- 在对话框内放置一个el-form表单,设置标签宽度并绑定名为"payLogsForm"的模型数据 -->
|
|
|
|
|
<el-form label-width="90px" :model="payLogsForm">
|
|
|
|
|
<!-- 表单中的一项,用于输入缴纳费用,双向绑定"payLogsForm"模型中的"total"字段,通过onkeyup属性设置输入时的校验,只允许输入数字和小数点 -->
|
|
|
|
|
<el-form-item label="缴纳费用(元)">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.total"
|
|
|
|
|
onkeyup="value=value.replace(/[^\d.]/g,'')"
|
|
|
|
|
placeholder="请输入缴纳费用…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 表单项用于选择收费社团,使用el-select下拉选择框组件,设置宽度并双向绑定"teamId"字段,下拉选项通过循环生成 -->
|
|
|
|
|
<el-form-item label="收费社团">
|
|
|
|
|
<el-select
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-model="payLogsForm.teamId"
|
|
|
|
|
placeholder="请输入收费社团…"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item, index) in teams"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 表单项用于输入缴费用户ID,双向绑定"payLogsForm"模型中的"userId"字段 -->
|
|
|
|
|
<el-form-item label="缴费用户">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.userId"
|
|
|
|
|
placeholder="请输入缴费用户ID…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 对话框的底部按钮区域,放置取消和确定两个按钮,分别绑定关闭对话框和提交添加信息的方法,设置字体大小 -->
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showAddFlag = false" style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
取 消</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="addInfo()"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
确 定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
|
|
|
|
|
<el-dialog title="修改信息" width="600px" :visible.sync="showUpdFlag">
|
|
|
|
|
<el-form label-width="90px" :model="payLogsForm">
|
|
|
|
|
<el-form-item label="缴纳费用">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.total"
|
|
|
|
|
type="number"
|
|
|
|
|
onkeyup="value=value.replace(/[^\d.]/g,'')"
|
|
|
|
|
placeholder="请输入缴纳费用…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
元
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="收费社团">
|
|
|
|
|
<el-select
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-model="payLogsForm.teamId"
|
|
|
|
|
placeholder="请输入收费社团…"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item, index) in teams"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<el-form-item label="缴费用户">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.userId"
|
|
|
|
|
placeholder="请输入缴费用户ID…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showUpdFlag = false" style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
取 消</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="updInfo()"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
确 定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 使用Element UI的el-dialog组件创建另一个对话框,用于修改信息,设置标题、宽度及双向绑定显示隐藏状态 -->
|
|
|
|
|
<el-dialog title="修改信息" width="600px" :visible.sync="showUpdFlag">
|
|
|
|
|
<!-- 在对话框内放置el-form表单,设置标签宽度并绑定名为"payLogsForm"的模型数据 -->
|
|
|
|
|
<el-form label-width="90px" :model="payLogsForm">
|
|
|
|
|
<!-- 表单中的一项,用于输入缴纳费用,双向绑定"payLogsForm"模型中的"total"字段,设置类型为"number",并通过onkeyup属性设置输入时的校验,只允许输入数字和小数点,后面添加"元"字作为提示 -->
|
|
|
|
|
<el-form-item label="缴纳费用">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.total"
|
|
|
|
|
type="number"
|
|
|
|
|
onkeyup="value=value.replace(/[^\d.]/g,'')"
|
|
|
|
|
placeholder="请输入缴纳费用…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
>元</el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 表单项用于选择收费社团,使用el-select下拉选择框组件,设置宽度并双向绑定"teamId"字段,下拉选项通过循环生成 -->
|
|
|
|
|
<el-form-item label="收费社团">
|
|
|
|
|
<el-select
|
|
|
|
|
style="width: 100%"
|
|
|
|
|
v-model="payLogsForm.teamId"
|
|
|
|
|
placeholder="请输入收费社团…"
|
|
|
|
|
>
|
|
|
|
|
<el-option
|
|
|
|
|
v-for="(item, index) in teams"
|
|
|
|
|
:key="index"
|
|
|
|
|
:label="item.name"
|
|
|
|
|
:value="item.id"
|
|
|
|
|
></el-option>
|
|
|
|
|
</el-select>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
<!-- 表单项用于输入缴费用户ID,双向绑定"payLogsForm"模型中的"userId"字段 -->
|
|
|
|
|
<el-form-item label="缴费用户">
|
|
|
|
|
<el-input
|
|
|
|
|
v-model="payLogsForm.userId"
|
|
|
|
|
placeholder="请输入缴费用户ID…"
|
|
|
|
|
autocomplete="off"
|
|
|
|
|
></el-input>
|
|
|
|
|
</el-form-item>
|
|
|
|
|
</el-form>
|
|
|
|
|
<!-- 对话框的底部按钮区域,放置取消和确定两个按钮,分别绑定关闭对话框和提交修改信息的方法,设置字体大小 -->
|
|
|
|
|
<div slot="footer" class="dialog-footer">
|
|
|
|
|
<el-button @click="showUpdFlag = false" style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
取 消</el-button
|
|
|
|
|
>
|
|
|
|
|
<el-button
|
|
|
|
|
type="primary"
|
|
|
|
|
@click="updInfo()"
|
|
|
|
|
style="font-size: 18px"
|
|
|
|
|
>
|
|
|
|
|
确 定</el-button
|
|
|
|
|
>
|
|
|
|
|
</div>
|
|
|
|
|
</el-dialog>
|
|
|
|
|
</div>
|
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
<style>
|
|
|
|
|
</style>
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
// 从相对路径"../../api"模块中导入多个函数,这些函数用于与后端API进行交互,执行诸如获取团队列表、获取登录用户信息、获取缴费记录分页数据、添加缴费记录、更新缴费记录以及删除缴费记录等操作
|
|
|
|
|
import {
|
|
|
|
|
getAllTeamList,
|
|
|
|
|
getManTeamList,
|
|
|
|
|
getLoginUser,
|
|
|
|
|
getPagePayLogs,
|
|
|
|
|
addPayLogs,
|
|
|
|
|
updPayLogs,
|
|
|
|
|
delPayLogs,
|
|
|
|
|
getAllTeamList,
|
|
|
|
|
getManTeamList,
|
|
|
|
|
getLoginUser,
|
|
|
|
|
getPagePayLogs,
|
|
|
|
|
addPayLogs,
|
|
|
|
|
updPayLogs,
|
|
|
|
|
delPayLogs,
|
|
|
|
|
} from "../../api";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
teams: [],
|
|
|
|
|
userType: "",
|
|
|
|
|
pageInfos: [],
|
|
|
|
|
pageIndex: 1,
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
pageTotal: 0,
|
|
|
|
|
totalInfo: 0,
|
|
|
|
|
loading: true,
|
|
|
|
|
showAddFlag: false,
|
|
|
|
|
showUpdFlag: false,
|
|
|
|
|
qryForm: {
|
|
|
|
|
token: this.$store.state.token,
|
|
|
|
|
teamName: "",
|
|
|
|
|
userName: "",
|
|
|
|
|
},
|
|
|
|
|
payLogsForm: {
|
|
|
|
|
id: "",
|
|
|
|
|
total: "",
|
|
|
|
|
teamId: "",
|
|
|
|
|
userId: "",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
getPageInfo(pageIndex, pageSize) {
|
|
|
|
|
getPagePayLogs(pageIndex, pageSize, this.qryForm.token).then(
|
|
|
|
|
(resp) => {
|
|
|
|
|
this.pageInfos = resp.data.data;
|
|
|
|
|
this.pageIndex = resp.data.pageIndex;
|
|
|
|
|
this.pageSize = resp.data.pageSize;
|
|
|
|
|
this.pageTotal = resp.data.pageTotal;
|
|
|
|
|
this.totalInfo = resp.data.count;
|
|
|
|
|
data() {
|
|
|
|
|
return {
|
|
|
|
|
// 用于存储团队相关的数据,可能作为下拉选择框等组件展示团队列表的数据源,初始为空数组
|
|
|
|
|
teams: [],
|
|
|
|
|
// 用于标识用户类型,不同的用户类型可能对应不同的界面操作权限或展示内容,初始为空字符串
|
|
|
|
|
userType: "",
|
|
|
|
|
// 存储从后端获取的当前页面要展示的缴费记录信息数据,作为表格组件展示数据的来源,初始为空数组
|
|
|
|
|
pageInfos: [],
|
|
|
|
|
// 当前页码,用于分页功能,初始值设为1,表示默认显示第一页数据
|
|
|
|
|
pageIndex: 1,
|
|
|
|
|
// 每页显示的数据条数,初始值设为10,即默认每页展示10条缴费记录信息
|
|
|
|
|
pageSize: 10,
|
|
|
|
|
// 总页数,初始值设为0,后续会根据从后端获取的数据动态更新该值
|
|
|
|
|
pageTotal: 0,
|
|
|
|
|
// 总的数据条数,用于分页组件显示总记录数等相关信息,同样会根据后端返回的数据进行更新,初始值为0
|
|
|
|
|
totalInfo: 0,
|
|
|
|
|
// 用于控制表格组件的加载状态,true表示正在加载数据,false表示数据加载完成,初始值设为true,即进入页面先显示加载状态
|
|
|
|
|
loading: true,
|
|
|
|
|
// 控制添加信息对话框的显示隐藏状态,通过Vue的双向绑定":visible.sync"实现,true表示对话框显示,false表示隐藏,初始值为false,即默认对话框不显示
|
|
|
|
|
showAddFlag: false,
|
|
|
|
|
// 控制修改信息对话框的显示隐藏状态,与"showAddFlag"类似,通过双向绑定实现,初始值为false,默认不显示修改对话框
|
|
|
|
|
showUpdFlag: false,
|
|
|
|
|
// 查询表单的数据模型,包含了与查询相关的字段,如用于身份验证的token(从Vuex的store中获取)、要查询的团队名称、成员姓名等,初始时团队名称和成员姓名为空字符串
|
|
|
|
|
qryForm: {
|
|
|
|
|
token: this.$store.state.token,
|
|
|
|
|
teamName: "",
|
|
|
|
|
userName: "",
|
|
|
|
|
},
|
|
|
|
|
// 用于添加或修改缴费记录信息的表单数据模型,包含了缴费记录的各个属性字段,如记录的ID、缴纳费用、收费社团ID、缴费用户ID等,各字段初始值为空字符串或空值
|
|
|
|
|
payLogsForm: {
|
|
|
|
|
id: "",
|
|
|
|
|
total: "",
|
|
|
|
|
teamId: "",
|
|
|
|
|
userId: "",
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
methods: {
|
|
|
|
|
// 获取指定页码和每页条数的缴费记录信息的方法
|
|
|
|
|
// 参数pageIndex表示要获取的页码,pageSize表示每页显示的记录条数
|
|
|
|
|
// 调用getPagePayLogs函数与后端API交互获取数据,在获取成功的回调函数中(then方法内),将返回的数据解析并赋值给相应的属性,用于更新页面展示内容,并将加载状态loading设为false,表示数据加载完成
|
|
|
|
|
getPageInfo(pageIndex, pageSize) {
|
|
|
|
|
getPagePayLogs(pageIndex, pageSize, this.qryForm.token).then(
|
|
|
|
|
(resp) => {
|
|
|
|
|
// 将后端返回的缴费记录数据赋值给pageInfos,用于表格展示
|
|
|
|
|
this.pageInfos = resp.data.data;
|
|
|
|
|
// 更新当前页码
|
|
|
|
|
this.pageIndex = resp.data.pageIndex;
|
|
|
|
|
// 更新每页显示的条数
|
|
|
|
|
this.pageSize = resp.data.pageSize;
|
|
|
|
|
// 更新总页数
|
|
|
|
|
this.pageTotal = resp.data.pageTotal;
|
|
|
|
|
// 更新总的数据条数
|
|
|
|
|
this.totalInfo = resp.data.count;
|
|
|
|
|
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
getPageLikeInfo() {
|
|
|
|
|
getPagePayLogs(
|
|
|
|
|
1,
|
|
|
|
|
this.pageSize,
|
|
|
|
|
this.qryForm.token,
|
|
|
|
|
this.qryForm.teamName,
|
|
|
|
|
this.qryForm.userName
|
|
|
|
|
).then((resp) => {
|
|
|
|
|
this.pageInfos = resp.data.data;
|
|
|
|
|
this.pageIndex = resp.data.pageIndex;
|
|
|
|
|
this.pageSize = resp.data.pageSize;
|
|
|
|
|
this.totalInfo = resp.data.count;
|
|
|
|
|
this.pageTotal = resp.data.pageTotal;
|
|
|
|
|
this.loading = false;
|
|
|
|
|
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
handleSizeChange(pageSize) {
|
|
|
|
|
this.getPageInfo(
|
|
|
|
|
this.pageIndex,
|
|
|
|
|
pageSize,
|
|
|
|
|
this.qryForm.token,
|
|
|
|
|
this.qryForm.teamName,
|
|
|
|
|
this.qryForm.userName
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
handleCurrentChange(pageIndex) {
|
|
|
|
|
this.getPageInfo(
|
|
|
|
|
pageIndex,
|
|
|
|
|
this.pageSize,
|
|
|
|
|
this.qryForm.token,
|
|
|
|
|
this.qryForm.teamName,
|
|
|
|
|
this.qryForm.userName
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
initForm() {
|
|
|
|
|
this.payLogsForm = {
|
|
|
|
|
id: "",
|
|
|
|
|
total: "",
|
|
|
|
|
teamId: "",
|
|
|
|
|
userId: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
showAddWin() {
|
|
|
|
|
this.initForm();
|
|
|
|
|
this.showAddFlag = true;
|
|
|
|
|
},
|
|
|
|
|
showUpdWin(row) {
|
|
|
|
|
this.payLogsForm = row;
|
|
|
|
|
this.showUpdFlag = true;
|
|
|
|
|
},
|
|
|
|
|
addInfo() {
|
|
|
|
|
addPayLogs(this.payLogsForm).then((resp) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: resp.msg,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
this.loading = false;
|
|
|
|
|
}
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 根据查询表单条件获取缴费记录信息的方法
|
|
|
|
|
// 调用getPagePayLogs函数,传入相关参数与后端交互获取数据,默认从第一页开始获取(参数1表示页码),同时携带查询表单中的团队名称和成员姓名等条件进行筛选查询
|
|
|
|
|
// 在获取成功的回调中,同样进行数据解析和相关属性赋值,更新页面展示内容,并将加载状态设为false
|
|
|
|
|
getPageLikeInfo() {
|
|
|
|
|
getPagePayLogs(
|
|
|
|
|
1,
|
|
|
|
|
this.pageSize,
|
|
|
|
|
this.qryForm.token,
|
|
|
|
|
this.qryForm.teamName,
|
|
|
|
|
this.qryForm.userName
|
|
|
|
|
).then((resp) => {
|
|
|
|
|
this.pageInfos = resp.data.data;
|
|
|
|
|
this.pageIndex = resp.data.pageIndex;
|
|
|
|
|
this.pageSize = resp.data.pageSize;
|
|
|
|
|
this.totalInfo = resp.data.count;
|
|
|
|
|
this.pageTotal = resp.data.pageTotal;
|
|
|
|
|
this.loading = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 处理页面大小改变事件的方法
|
|
|
|
|
// 当页面上选择了不同的每页显示条数(例如通过分页组件的下拉选择改变每页显示数量)时触发该方法
|
|
|
|
|
// 该方法会调用getPageInfo方法,传入当前页码、新的页面大小以及查询表单相关参数,重新获取并更新页面数据
|
|
|
|
|
handleSizeChange(pageSize) {
|
|
|
|
|
this.getPageInfo(
|
|
|
|
|
this.pageIndex,
|
|
|
|
|
pageSize,
|
|
|
|
|
this.qryForm.token,
|
|
|
|
|
this.qryForm.teamName,
|
|
|
|
|
this.qryForm.userName
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 处理当前页码改变事件的方法
|
|
|
|
|
// 当用户点击分页组件切换到不同页码时触发该方法
|
|
|
|
|
// 调用getPageInfo方法,传入新的当前页码、原来的页面大小以及查询表单相关参数,重新获取对应页码的数据并更新页面展示内容
|
|
|
|
|
handleCurrentChange(pageIndex) {
|
|
|
|
|
this.getPageInfo(
|
|
|
|
|
pageIndex,
|
|
|
|
|
this.pageSize,
|
|
|
|
|
this.qryForm.token,
|
|
|
|
|
this.qryForm.teamName,
|
|
|
|
|
this.qryForm.userName
|
|
|
|
|
);
|
|
|
|
|
},
|
|
|
|
|
// 初始化"payLogsForm"表单数据的方法
|
|
|
|
|
// 将payLogsForm重置为初始的空值状态,用于在进行添加或修改操作前,清除表单中可能存在的原有数据,保证每次操作都是基于初始状态进行填写
|
|
|
|
|
initForm() {
|
|
|
|
|
this.payLogsForm = {
|
|
|
|
|
id: "",
|
|
|
|
|
total: "",
|
|
|
|
|
teamId: "",
|
|
|
|
|
userId: "",
|
|
|
|
|
};
|
|
|
|
|
},
|
|
|
|
|
// 显示添加信息对话框的方法
|
|
|
|
|
// 首先调用initForm方法初始化表单数据,将其清空,然后将showAddFlag设置为true,通过Vue的双向绑定机制,使得对应的添加信息对话框显示在页面上
|
|
|
|
|
showAddWin() {
|
|
|
|
|
this.initForm();
|
|
|
|
|
this.showAddFlag = true;
|
|
|
|
|
},
|
|
|
|
|
// 显示修改信息对话框的方法
|
|
|
|
|
// 将传入的参数row(通常是包含要修改的缴费记录数据的对象)赋值给payLogsForm,这样对话框中的表单就会显示已有的记录数据,方便用户进行修改操作,然后将showUpdFlag设置为true,使修改对话框显示出来
|
|
|
|
|
showUpdWin(row) {
|
|
|
|
|
this.payLogsForm = row;
|
|
|
|
|
this.showUpdFlag = true;
|
|
|
|
|
},
|
|
|
|
|
// 添加缴费记录信息的方法
|
|
|
|
|
// 调用addPayLogs函数,将payLogsForm中的数据发送给后端,尝试添加一条新的缴费记录,在添加成功的回调函数中(then方法内):
|
|
|
|
|
// 1. 使用this.$message弹出一个提示框,显示后端返回的成功消息(resp.msg),提示类型为"success",表示成功提示。
|
|
|
|
|
// 2. 调用getPageInfo方法重新获取第一页的数据,以更新页面展示的缴费记录列表,使其包含新添加的记录。
|
|
|
|
|
// 3. 将showAddFlag设置为false,关闭添加信息的对话框。
|
|
|
|
|
addInfo() {
|
|
|
|
|
addPayLogs(this.payLogsForm).then((resp) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: resp.msg,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.getPageInfo(1, this.pageSize, this.qryForm.token);
|
|
|
|
|
this.getPageInfo(1, this.pageSize, this.qryForm.token);
|
|
|
|
|
|
|
|
|
|
this.showAddFlag = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
updInfo() {
|
|
|
|
|
updPayLogs(this.payLogsForm).then((resp) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: resp.msg,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
this.showAddFlag = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 更新缴费记录信息的方法
|
|
|
|
|
// 调用updPayLogs函数,将payLogsForm中的数据发送给后端,尝试更新对应的缴费记录信息,在更新成功的回调中:
|
|
|
|
|
// 1. 同样使用this.$message弹出成功提示框,显示后端返回的消息,提示类型为"success"。
|
|
|
|
|
// 2. 调用getPageInfo方法重新获取第一页的数据,更新页面展示内容,使修改后的记录信息得到及时显示。
|
|
|
|
|
// 3. 将showUpdFlag设置为false,关闭修改信息的对话框。
|
|
|
|
|
updInfo() {
|
|
|
|
|
updPayLogs(this.payLogsForm).then((resp) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: resp.msg,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.getPageInfo(1, this.pageSize, this.qryForm.token);
|
|
|
|
|
this.getPageInfo(1, this.pageSize, this.qryForm.token);
|
|
|
|
|
|
|
|
|
|
this.showUpdFlag = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
delInfo(id) {
|
|
|
|
|
this.$confirm("即将删除相关信息, 是否继续?", "提示", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
}).then(() => {
|
|
|
|
|
delPayLogs(id).then((resp) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: resp.msg,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
this.showUpdFlag = false;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
// 删除缴费记录信息的方法
|
|
|
|
|
// 首先使用this.$confirm弹出一个确认框,提示用户即将删除相关信息,并给出确定和取消按钮,类型为"warning",表示警告性的提示。
|
|
|
|
|
// 当用户点击确定按钮(在then方法内),调用delPayLogs函数,传入要删除的记录的ID,向后端发起删除请求,在删除成功的回调中:
|
|
|
|
|
// 1. 使用this.$message弹出成功提示框,显示后端返回的消息,提示类型为"success"。
|
|
|
|
|
// 2. 调用getPageInfo方法重新获取第一页的数据,更新页面展示内容,将已删除的记录从列表中移除。
|
|
|
|
|
delInfo(id) {
|
|
|
|
|
this.$confirm("即将删除相关信息, 是否继续?", "提示", {
|
|
|
|
|
confirmButtonText: "确定",
|
|
|
|
|
cancelButtonText: "取消",
|
|
|
|
|
type: "warning",
|
|
|
|
|
}).then(() => {
|
|
|
|
|
delPayLogs(id).then((resp) => {
|
|
|
|
|
this.$message({
|
|
|
|
|
message: resp.msg,
|
|
|
|
|
type: "success",
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
this.getPageInfo(1, this.pageSize);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
this.getPageInfo(1, this.pageSize);
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getPageInfo(1, this.pageSize, this.qryForm.token);
|
|
|
|
|
},
|
|
|
|
|
// 在组件挂载(mounted)时执行的生命周期钩子函数,当组件被挂载到DOM上后会自动调用该函数
|
|
|
|
|
// 该函数主要执行两个操作:
|
|
|
|
|
// 1. 调用getPageInfo方法,传入初始的页码和每页显示条数以及查询表单的token,获取第一页的缴费记录信息,用于初始化页面表格数据展示。
|
|
|
|
|
// 2. 调用getLoginUser函数,传入token获取登录用户信息,在获取成功的回调中(then方法内):
|
|
|
|
|
// - 将返回的用户类型赋值给userType属性,用于后续根据用户类型控制不同的界面操作和展示内容。
|
|
|
|
|
// - 根据用户类型判断,如果是类型1(可能是特定权限用户,比如管理员等),则调用getManTeamList函数,传入用户ID获取特定的团队列表数据,并将其赋值给teams属性;如果不是类型1(可能是普通用户等),则调用getAllTeamList函数获取所有团队列表数据,并赋值给teams属性,teams数据可用于下拉选择等组件展示团队相关选项。
|
|
|
|
|
mounted() {
|
|
|
|
|
this.getPageInfo(1, this.pageSize, this.qryForm.token);
|
|
|
|
|
|
|
|
|
|
getLoginUser(this.$store.state.token).then((resp) => {
|
|
|
|
|
this.userType = resp.data.type;
|
|
|
|
|
getLoginUser(this.$store.state.token).then((resp) => {
|
|
|
|
|
this.userType = resp.data.type;
|
|
|
|
|
|
|
|
|
|
if (resp.data.type == 1) {
|
|
|
|
|
getManTeamList(resp.data.id).then((resp) => {
|
|
|
|
|
this.teams = resp.data;
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
getAllTeamList().then((resp) => {
|
|
|
|
|
this.teams = resp.data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
if (resp.data.type == 1) {
|
|
|
|
|
getManTeamList(resp.data.id).then((resp) => {
|
|
|
|
|
this.teams = resp.data;
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
} else {
|
|
|
|
|
getAllTeamList().then((resp) => {
|
|
|
|
|
this.teams = resp.data;
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
},
|
|
|
|
|
};
|
|
|
|
|
</script>
|