bonus-ui/src/views/accountCenter/account/tradeRecords/index.vue

316 lines
12 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="app-container">
<el-form :model="queryParams" ref="queryForm" size="small" :inline="true" v-show="showSearch" label-width="90px">
<el-form-item label="日期时间">
<el-date-picker
v-model="dateRange"
type="datetimerange"
align="right"
unlink-panels
range-separator="至"
start-placeholder="开始日期"
end-placeholder="结束日期"
format="yyyy-MM-dd HH:mm:ss" style="width: 340px"
:default-time="['00:00:00', '23:59:59']"
:picker-options="pickerOptions" >
</el-date-picker>
</el-form-item>
<el-form-item label="操作事件" prop="type">
<el-select v-model="queryParams.type" style="width: 240px" clearable>
<el-option label="启用" value="1"></el-option>
<el-option label="停用" value="2"></el-option>
</el-select>
</el-form-item>
<el-form-item label="操作员">
<el-input v-model="queryParams.createBy" placeholder="请输入操作员" maxlength="20" clearable style="width: 240px"/>
</el-form-item>
<el-form-item label="所属组织" prop="deptIdList">
<el-cascader v-model="queryParams.deptIdList"
:options="deptOptions" :filterable="true" style="width: 240px" :show-all-levels="false"
:props="{
multiple: true,
emitPath: false,// 若设置 false则只返回该节点的值只返回最后选择的id
checkStrictly: false,//来设置父子节点取消选中关联,从而达到选择任意一级选项的目的
value:'id',label:'label'
}" clearable collapse-tags>
</el-cascader>
</el-form-item>
<el-form-item label="关键字">
<el-input v-model="queryParams.searchValue" placeholder="请输入关键字" maxlength="20" clearable style="width: 240px"/>
</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-row :gutter="10" class="mb8">
<!-- <el-col :span="1.5">
<el-button
type="primary"
size="mini" :disabled="multiple"
@click="handleBatchRefund"
>批量退单</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
size="mini" :disabled="multiple"
@click="handleBatchWriteOff"
>批量核销</el-button>
</el-col>
<el-col :span="1.5">
<el-button
type="primary"
size="mini" :disabled="multiple"
@click="handleSyncPayState"
>同步订单状态</el-button>
</el-col> -->
<right-toolbar :showSearch.sync="showSearch" @queryTable="getList"></right-toolbar>
</el-row>
<el-table v-loading="loading" :data="tableListData" height="800" ref="multipleTable" :row-key="(row)=>{return row.orderId}">
<!-- <el-table-column type="selection" width="50" align="center" :reserve-selection="true"/> -->
<el-table-column label="序号" align="center" width="80" type="index" fixed="left">
<template slot-scope="scope">
<span>{{(queryParams.pageNum - 1) * queryParams.pageSize + scope.$index + 1}}</span>
</template>
</el-table-column>
<el-table-column label="用户编号" align="center" prop="userId" :show-overflow-tooltip="true" />
<el-table-column label="用户姓名" align="center" prop="userName" :show-overflow-tooltip="true" />
<el-table-column label="用户手机号" align="center" prop="phone" :show-overflow-tooltip="true" />
<el-table-column label="组织全称" align="center" prop="deptFullName" :show-overflow-tooltip="true" />
<el-table-column label="操作员" align="center" prop="createBy" :show-overflow-tooltip="true" />
<el-table-column label="操作员事件" align="center" prop="typeName" :show-overflow-tooltip="true" />
<el-table-column label="操作时间" align="center" prop="createTime" :show-overflow-tooltip="true" />
<!-- <el-table-column label="操作" align="center" width="180" class-name="small-padding fixed-width" fixed="right">
<template slot-scope="scope">
<el-button
size="mini"
type="text"
@click="handleView(scope.row)"
>详情</el-button>
<el-button
size="mini"
type="text" v-if="scope.row.orderStateMix==1||scope.row.orderStateMix==11"
@click="handleRefundPart(scope.row)"
>部分退款</el-button>
<el-button
size="mini"
type="text" v-if="scope.row.orderStateMix==1||scope.row.orderStateMix==11"
@click="handleRefund(scope.row)"
>退单</el-button>
<el-button
size="mini"
type="text" v-if="scope.row.orderStateMix==1"
@click="writeOffOrder(scope.row)"
>核销</el-button>
</template>
</el-table-column> -->
</el-table>
<pagination
v-show="total>0"
:total="total"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/>
</div>
</template>
<script>
import { deptTreeSelect } from '@/api/system/user'
import { accInfoOperationListApi } from "@/api/accountCenter/traderecords";
export default {
name: "",
dicts: [],
data() {
return {
// 遮罩层
loading: true,
// 选中数组
ids: [],
// 非单个禁用
single: true,
// 非多个禁用
multiple: true,
// 显示搜索条件
showSearch: true,
// 总条数
total: 0,
//表格数据
tableListData: [],
// 是否显示弹出层
open: false,
dateRange:this.defaultDateRange(),
pickerOptions: {
shortcuts: [{
text: '最近一周',
onClick(picker) {
const end = new Date(new Date().toLocaleDateString());
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date((new Date().toLocaleDateString()));
start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近一个月',
onClick(picker) {
const end = new Date(new Date().toLocaleDateString());
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date((new Date().toLocaleDateString()));
start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
picker.$emit('pick', [start, end]);
}
}, {
text: '最近三个月',
onClick(picker) {
const end = new Date(new Date().toLocaleDateString());
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date((new Date().toLocaleDateString()));
start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
picker.$emit('pick', [start, end]);
}
}]
},
deptOptions:[],//组织树
// 查询参数
queryParams: {
pageNum: 1,
pageSize: 10,
type:null,
createBy:null,
deptIdList:[],
searchValue:null
},
//订单详情
orderInfoData: {},
//部分退款
openPart:false,
orderDetailList:[],
rowData:{},
refundRules:{
refundMoney: [
{
required: true,
message: "本次退款金额不能为空",
trigger: "blur",
}
]
},
//批量操作
batchIds:[],//批量id
batchList:[],//批量数据数组
//批量核销批量退单提醒对话框
handleType:"退单",
ableList:[],
unableList:[],
openRemind:false,
};
},
created() {
this.getDeptTree();
// this.orderStateList();
this.getList()
},
methods: {
/** 查询部门下拉树结构 */
getDeptTree() {
deptTreeSelect().then((response) => {
this.deptOptions = this.filterTree(response.data)
})
},
filterTree(nodes) {
return nodes
.map((node) => {
if (node.children) {
node.children = this.filterTree(node.children)
}
return node
})
.filter((node) => node.status !== '1')
},
/** 搜索按钮操作 */
handleQuery() {
this.queryParams.pageNum = 1;
this.getList();
},
/** 重置按钮操作 */
resetQuery() {
this.dateRange = this.defaultDateRange()
this.queryParams = {
pageNum: 1,
pageSize: 10,
type:null,
createBy:null,
deptIdList:[],
searchValue:null
}
this.resetForm("queryForm");
this.handleQuery();
},
/** 查询列表 */
getList() {
this.loading = false;
let param = {
...this.queryParams,
"pageNum": this.queryParams.pageNum,
"pageSize": this.queryParams.pageSize,
"startDateTime":this.formatDate(this.dateRange[0]),
"endDateTime":this.formatDate(this.dateRange[1])
}
accInfoOperationListApi(param).then(response => {
this.tableListData = response.rows;
this.total = Number(response.total);
this.loading = false;
});
},
defaultDateRange() {
const end = new Date(new Date().toLocaleDateString());
end.setTime(end.getTime() + 24 * 60 * 60 * 1000 - 1);
const start = new Date((new Date().toLocaleDateString()));
start.setTime(start.getTime());
this.start = parseInt(start.getTime() / 1000)
this.end = parseInt(end.getTime() / 1000)
return [start, end]
},
//日期
formatDate(date) {
// 格式化为 YYYY-MM-DD
const year = date.getFullYear();
const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始
const day = String(date.getDate()).padStart(2, '0');
const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
const seconds = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`;
}
}
};
</script>
<style scoped>
.remind-question{
width: 100%;
height: 50px;
font-size: 22px;
display: flex;
align-items: center;
justify-content: center;
}
.remind-title{
width: 100%;
height: 40px;
font-size: 16px;
font-weight: bold;
color: #000;
display: flex;
align-items: center;
justify-content: center;
}
</style>