You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
356 lines
10 KiB
356 lines
10 KiB
3 months ago
|
<template>
|
||
|
|
<div class="search">
|
||
|
|
<Card>
|
||
|
|
<Row v-show="openSearch" @keydown.enter.native="handleSearch">
|
||
|
|
<Form ref="searchForm" :model="searchForm" inline :label-width="70">
|
||
|
|
<FormItem label="充值编号" prop="rechargeId">
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
v-model="searchForm.name"
|
||
|
|
placeholder="请输入充值编号"
|
||
|
|
clearable
|
||
|
|
style="width: 200px"
|
||
|
|
/>
|
||
|
|
</FormItem>
|
||
|
|
<FormItem label="被充值人名称" prop="rechargeName">
|
||
|
|
<Input
|
||
|
|
type="text"
|
||
|
|
v-model="searchForm.rechargeName"
|
||
|
|
placeholder="被充值人名称"
|
||
|
|
clearable
|
||
|
|
style="width: 200px"
|
||
|
|
/>
|
||
|
|
</FormItem>
|
||
|
|
<span v-if="drop">
|
||
|
|
<FormItem label="被充值人编号" prop="rechargeWorkerId">
|
||
|
|
<dict dict="workerStatus" v-model="searchForm.workerStatus" style="width: 200px" />
|
||
|
|
</FormItem>
|
||
|
|
<FormItem label="充值时间">
|
||
|
|
<DatePicker
|
||
|
|
:options="options"
|
||
|
|
v-model="selectDate"
|
||
|
|
type="daterange"
|
||
|
|
format="yyyy-MM-dd"
|
||
|
|
clearable
|
||
|
|
@on-change="selectDateRange"
|
||
|
|
placeholder="选择起始时间"
|
||
|
|
style="width: 200px"
|
||
|
|
></DatePicker>
|
||
|
|
</FormItem>
|
||
|
|
</span>
|
||
|
|
<FormItem style="margin-left: -35px" class="br">
|
||
|
|
<Button @click="handleSearch" type="primary" icon="ios-search"
|
||
|
|
>搜索</Button
|
||
|
|
>
|
||
|
|
<Button @click="handleReset">重置</Button>
|
||
|
|
</FormItem>
|
||
|
|
</Form>
|
||
|
|
</Row>
|
||
|
|
<Row align="middle" justify="space-between" class="operation">
|
||
|
|
<div class="icons">
|
||
|
|
<Tooltip content="刷新" placement="top" transfer>
|
||
|
|
<Icon
|
||
|
|
type="md-refresh"
|
||
|
|
size="18"
|
||
|
|
class="item"
|
||
|
|
@click="getDataList"
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip
|
||
|
|
:content="openSearch ? '关闭搜索' : '开启搜索'"
|
||
|
|
placement="top"
|
||
|
|
transfer
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
type="ios-search"
|
||
|
|
size="18"
|
||
|
|
class="item tip"
|
||
|
|
@click="openSearch = !openSearch"
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip
|
||
|
|
:content="openTip ? '关闭提示' : '开启提示'"
|
||
|
|
placement="top"
|
||
|
|
transfer
|
||
|
|
>
|
||
|
|
<Icon
|
||
|
|
type="md-bulb"
|
||
|
|
size="18"
|
||
|
|
class="item tip"
|
||
|
|
@click="openTip = !openTip"
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip content="表格密度" placement="top" transfer>
|
||
|
|
<Dropdown @on-click="changeTableSize" trigger="click">
|
||
|
|
<Icon type="md-list" size="18" class="item" />
|
||
|
|
<DropdownMenu slot="list">
|
||
|
|
<DropdownItem :selected="tableSize == 'default'" name="default"
|
||
|
|
>默认</DropdownItem
|
||
|
|
>
|
||
|
|
<DropdownItem :selected="tableSize == 'large'" name="large"
|
||
|
|
>宽松</DropdownItem
|
||
|
|
>
|
||
|
|
<DropdownItem :selected="tableSize == 'small'" name="small"
|
||
|
|
>紧密</DropdownItem
|
||
|
|
>
|
||
|
|
</DropdownMenu>
|
||
|
|
</Dropdown>
|
||
|
|
</Tooltip>
|
||
|
|
<Tooltip content="导出数据" placement="top" transfer>
|
||
|
|
<Icon
|
||
|
|
type="md-download"
|
||
|
|
size="18"
|
||
|
|
class="item"
|
||
|
|
@click="exportData"
|
||
|
|
/>
|
||
|
|
</Tooltip>
|
||
|
|
</div>
|
||
|
|
</Row>
|
||
|
|
<Alert show-icon v-show="openTip">
|
||
|
|
已选择
|
||
|
|
<span class="select-count">{{ selectList.length }}</span> 项
|
||
|
|
<a class="select-clear" @click="clearSelectAll">清空</a>
|
||
|
|
</Alert>
|
||
|
|
<Table
|
||
|
|
:loading="loading"
|
||
|
|
border
|
||
|
|
:columns="columns"
|
||
|
|
:data="data"
|
||
|
|
:size="tableSize"
|
||
|
|
ref="table"
|
||
|
|
sortable="custom"
|
||
|
|
@on-sort-change="changeSort"
|
||
|
|
@on-selection-change="changeSelect"
|
||
|
|
></Table>
|
||
|
|
<Row type="flex" justify="end" class="page">
|
||
|
|
<Page
|
||
|
|
:current="searchForm.pageNumber"
|
||
|
|
:total="total"
|
||
|
|
:page-size="searchForm.pageSize"
|
||
|
|
@on-change="changePage"
|
||
|
|
@on-page-size-change="changePageSize"
|
||
|
|
:page-size-opts="[10, 20, 50]"
|
||
|
|
size="small"
|
||
|
|
show-total
|
||
|
|
show-elevator
|
||
|
|
show-sizer
|
||
|
|
></Page>
|
||
|
|
</Row>
|
||
|
|
</Card>
|
||
|
|
</div>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import {
|
||
|
|
getWorkerRechargeRecord
|
||
|
|
} from "@/api/index";
|
||
|
|
import uploadPicInput from "@/views/my-components/hiver/upload-pic-input";
|
||
|
|
import { shortcuts } from "@/libs/shortcuts";
|
||
|
|
export default {
|
||
|
|
name: "recharge",
|
||
|
|
components: {
|
||
|
|
uploadPicInput,
|
||
|
|
},
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
tableSize: "default",
|
||
|
|
openSearch: true, // 显示搜索
|
||
|
|
openTip: true, // 显示提示
|
||
|
|
loading: true, // 表单加载状态
|
||
|
|
modalType: 0, // 添加或编辑标识
|
||
|
|
modalVisible: false, // 添加或编辑显示
|
||
|
|
modalTitle: "", // 添加或编辑标题
|
||
|
|
searchForm: {
|
||
|
|
// 搜索框初始化对象
|
||
|
|
pageNumber: 1, // 当前页数
|
||
|
|
pageSize: 10, // 页面大小
|
||
|
|
sort: "createTime", // 默认排序字段
|
||
|
|
order: "desc", // 默认排序方式
|
||
|
|
startDate: "", // 起始时间
|
||
|
|
endDate: "", // 终止时间
|
||
|
|
},
|
||
|
|
selectDate: null,
|
||
|
|
options: {
|
||
|
|
shortcuts: shortcuts,
|
||
|
|
},
|
||
|
|
form: {
|
||
|
|
// 添加或编辑表单对象初始化数据
|
||
|
|
name: "",
|
||
|
|
logo: "",
|
||
|
|
clientSecret: "",
|
||
|
|
homeUri: "",
|
||
|
|
redirectUri: "",
|
||
|
|
autoApprove: false,
|
||
|
|
},
|
||
|
|
submitLoading: false, // 添加或编辑提交状态
|
||
|
|
selectList: [], // 多选数据
|
||
|
|
columns: [
|
||
|
|
{
|
||
|
|
type: "selection",
|
||
|
|
width: 60,
|
||
|
|
align: "center",
|
||
|
|
fixed: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
type: "index",
|
||
|
|
width: 60,
|
||
|
|
align: "center",
|
||
|
|
fixed: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "充值编号",
|
||
|
|
key: "rechargeId",
|
||
|
|
minWidth: 125,
|
||
|
|
sortable: true,
|
||
|
|
fixed: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "被充值人名称",
|
||
|
|
key: "rechargeName",
|
||
|
|
minWidth: 125,
|
||
|
|
sortable: true,
|
||
|
|
fixed: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "被充值人编号",
|
||
|
|
key: "rechargeWorkerId",
|
||
|
|
minWidth: 125,
|
||
|
|
sortable: true,
|
||
|
|
fixed: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "充值金额",
|
||
|
|
key: "rechargeNum",
|
||
|
|
minWidth: 125,
|
||
|
|
sortable: true,
|
||
|
|
fixed: "left",
|
||
|
|
},
|
||
|
|
{
|
||
|
|
title: "充值时间",
|
||
|
|
key: "createTime",
|
||
|
|
width: 170,
|
||
|
|
sortable: true,
|
||
|
|
sortType: "desc",
|
||
|
|
},
|
||
|
|
],
|
||
|
|
data: [], // 表单数据
|
||
|
|
total: 0, // 表单数据总数
|
||
|
|
rechargeWorkerId: "",
|
||
|
|
};
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
init() {
|
||
|
|
this.getDataList();
|
||
|
|
},
|
||
|
|
changePage(v) {
|
||
|
|
this.searchForm.pageNumber = v;
|
||
|
|
this.getDataList();
|
||
|
|
this.clearSelectAll();
|
||
|
|
},
|
||
|
|
changePageSize(v) {
|
||
|
|
this.searchForm.pageSize = v;
|
||
|
|
this.getDataList();
|
||
|
|
},
|
||
|
|
handleSearch() {
|
||
|
|
this.searchForm.pageNumber = 1;
|
||
|
|
this.searchForm.pageSize = 10;
|
||
|
|
this.getDataList();
|
||
|
|
},
|
||
|
|
handleReset() {
|
||
|
|
this.$refs.searchForm.resetFields();
|
||
|
|
this.searchForm.pageNumber = 1;
|
||
|
|
this.searchForm.pageSize = 10;
|
||
|
|
this.selectDate = null;
|
||
|
|
this.searchForm.startDate = "";
|
||
|
|
this.searchForm.endDate = "";
|
||
|
|
// 重新加载数据
|
||
|
|
this.getDataList();
|
||
|
|
},
|
||
|
|
changeSort(e) {
|
||
|
|
this.searchForm.sort = e.key;
|
||
|
|
this.searchForm.order = e.order;
|
||
|
|
if (e.order === "normal") {
|
||
|
|
this.searchForm.order = "";
|
||
|
|
}
|
||
|
|
this.getDataList();
|
||
|
|
},
|
||
|
|
clearSelectAll() {
|
||
|
|
this.$refs.table.selectAll(false);
|
||
|
|
},
|
||
|
|
changeSelect(e) {
|
||
|
|
this.selectList = e;
|
||
|
|
},
|
||
|
|
selectDateRange(v) {
|
||
|
|
if (v) {
|
||
|
|
this.searchForm.startDate = v[0];
|
||
|
|
this.searchForm.endDate = v[1];
|
||
|
|
}
|
||
|
|
},
|
||
|
|
changeTableSize(v) {
|
||
|
|
this.tableSize = v;
|
||
|
|
},
|
||
|
|
exportData() {
|
||
|
|
this.$refs.table.exportCsv({
|
||
|
|
filename: "数据",
|
||
|
|
});
|
||
|
|
},
|
||
|
|
generateSecret() {
|
||
|
|
getSecretKey().then((res) => {
|
||
|
|
if (res.success) {
|
||
|
|
this.form.clientSecret = res.result;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
getDataList() {
|
||
|
|
this.loading = true;
|
||
|
|
// 带多条件搜索参数获取表单数据 请自行修改接口
|
||
|
|
getWorkerRechargeRecord(this.rechargeWorkerId).then((res) => {
|
||
|
|
this.loading = false;
|
||
|
|
if (res.success) {
|
||
|
|
this.data = res.result.content;
|
||
|
|
this.total = res.result.totalElements;
|
||
|
|
if (this.data.length == 0 && this.searchForm.pageNumber > 1) {
|
||
|
|
this.searchForm.pageNumber -= 1;
|
||
|
|
this.getDataList();
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
handleSubmit() {
|
||
|
|
this.$refs.form.validate((valid) => {
|
||
|
|
if (valid) {
|
||
|
|
this.submitLoading = true;
|
||
|
|
if (this.modalType === 0) {
|
||
|
|
// 添加 避免编辑后传入id等数据 记得删除
|
||
|
|
delete this.form.id;
|
||
|
|
addClient(this.form).then((res) => {
|
||
|
|
this.submitLoading = false;
|
||
|
|
if (res.success) {
|
||
|
|
this.$Message.success("操作成功");
|
||
|
|
this.getDataList();
|
||
|
|
this.modalVisible = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
} else {
|
||
|
|
// 编辑
|
||
|
|
updateClient(this.form).then((res) => {
|
||
|
|
this.submitLoading = false;
|
||
|
|
if (res.success) {
|
||
|
|
this.$Message.success("操作成功");
|
||
|
|
this.getDataList();
|
||
|
|
this.modalVisible = false;
|
||
|
|
}
|
||
|
|
});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
});
|
||
|
|
},
|
||
|
|
},
|
||
|
|
mounted() {
|
||
|
|
this.init();
|
||
|
|
},
|
||
|
|
};
|
||
|
|
</script>
|
||
|
|
<style lang="less">
|
||
|
|
@import "@/styles/table-common.less";
|
||
|
|
</style>
|