508 lines
13 KiB
Vue
508 lines
13 KiB
Vue
<template>
|
||
<div class="detail-container">
|
||
<div class="detail-header">
|
||
<h3>{{ accountData.name }}详情</h3>
|
||
<button class="close-btn" @click="handleClose">×</button>
|
||
</div>
|
||
<div class="split-line"></div>
|
||
<div class="detail-body">
|
||
<el-form :model="searchForm" class="search-form">
|
||
<div class="form-items-wrapper">
|
||
<el-form-item label="交易名称：" class="form-item">
|
||
<el-input
|
||
v-model="searchForm.flowName"
|
||
placeholder="请输入交易名称"
|
||
clearable
|
||
/>
|
||
</el-form-item>
|
||
<el-form-item label="交易类型：" class="form-item">
|
||
<el-select
|
||
v-model="searchForm.transactionType"
|
||
placeholder="请选择交易类型"
|
||
clearable
|
||
class="custom-select"
|
||
teleport="body"
|
||
popper-class="theme-select-popper"
|
||
:popper-append-to-body="true"
|
||
@change="getTranTypes"
|
||
>
|
||
<el-option label="收入" value="2" />
|
||
<el-option label="支出" value="1" />
|
||
</el-select>
|
||
</el-form-item>
|
||
<el-form-item label="交易分类：" class="form-item">
|
||
<el-select
|
||
v-model="searchForm.categoryId"
|
||
placeholder="请选择交易分类"
|
||
clearable
|
||
class="custom-select"
|
||
teleport="body"
|
||
popper-class="theme-select-popper"
|
||
:popper-append-to-body="true"
|
||
>
|
||
<el-option
|
||
v-for="item in tranTypes"
|
||
:key="item.categoryId"
|
||
:label="item.categoryName"
|
||
:value="item.categoryId"
|
||
/>
|
||
</el-select>
|
||
</el-form-item>
|
||
</div>
|
||
<el-form-item class="form-btn-group">
|
||
<el-button type="primary" @click="handleSearch">查询</el-button>
|
||
<el-button type="default" @click="handleReset" class="reset-btn">重置</el-button>
|
||
</el-form-item>
|
||
</el-form>
|
||
|
||
<el-table
|
||
:data="tableData"
|
||
stripe
|
||
style="width: 100%"
|
||
empty-text="暂无相关交易数据"
|
||
class="data-table"
|
||
v-loading="loading"
|
||
:header-cell-style="{
|
||
background: 'rgba(10, 30, 60, 0.8)',
|
||
color: '#a0cfff',
|
||
border: 'none',
|
||
borderBottom: '1px solid rgba(64, 158, 255, 0.3)'
|
||
}"
|
||
:row-style="{
|
||
background: 'transparent',
|
||
color: '#a0cfff',
|
||
border: 'none'
|
||
}"
|
||
:cell-style="{
|
||
border: 'none',
|
||
borderBottom: '1px solid rgba(64, 158, 255, 0.2)'
|
||
}"
|
||
>
|
||
<el-table-column prop="flowId" label="交易编号" />
|
||
<el-table-column prop="flowName" label="交易名称" />
|
||
<el-table-column prop="categoryName" label="交易分类" />
|
||
<el-table-column prop="tranType" label="交易类型" />
|
||
<el-table-column prop="amount" label="交易金额">
|
||
<template #default="scope">
|
||
¥{{ scope.row.amount }}
|
||
</template>
|
||
</el-table-column>
|
||
<el-table-column prop="remark" label="交易备注" />
|
||
<el-table-column prop="transactionTime" label="交易时间" />
|
||
</el-table>
|
||
|
||
<div class="pagination-wrapper">
|
||
<el-pagination
|
||
v-model:current-page="currentPage"
|
||
v-model:page-size="pageSize"
|
||
:page-sizes="[20,50,99]"
|
||
:total="total"
|
||
layout="total, sizes, prev, pager, next, jumper"
|
||
@size-change="handleSizeChange"
|
||
@current-change="handleCurrentChange"
|
||
class="custom-pagination"
|
||
teleport="body"
|
||
popper-class="theme-pagination-popper"
|
||
:popper-append-to-body="true"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { defineProps, defineEmits, ref, onMounted, reactive } from 'vue'
|
||
import { ElMessage } from 'element-plus'
|
||
import { getErpCategoryList, getErpTransactionFlowList } from '@/api/bizApi'
|
||
|
||
const props = defineProps({
|
||
accountData: {
|
||
type: Object,
|
||
default: () => ({})
|
||
}
|
||
})
|
||
|
||
const emit = defineEmits(['close'])
|
||
const handleClose = () => emit('close')
|
||
|
||
const tranTypes = ref();
|
||
const loading = ref(false);
|
||
|
||
const searchForm = reactive({
|
||
flowName: '',
|
||
transactionType: '',
|
||
categoryId: '',
|
||
})
|
||
|
||
const tableData = ref([]);
|
||
const currentPage = ref(1);
|
||
const pageSize = ref(20);
|
||
const total = ref(0);
|
||
|
||
const handleSearch = () => {
|
||
getList();
|
||
}
|
||
|
||
const handleReset = () => {
|
||
Object.assign(searchForm, {
|
||
flowName: '',
|
||
transactionType: '',
|
||
categoryId: '',
|
||
})
|
||
currentPage.value = 1;
|
||
getList();
|
||
}
|
||
|
||
const handleSizeChange = (val) => {
|
||
pageSize.value = val;
|
||
getList();
|
||
}
|
||
const handleCurrentChange = (val) => {
|
||
currentPage.value = val;
|
||
getList();
|
||
}
|
||
|
||
async function getTranTypes(){
|
||
try {
|
||
const params = {
|
||
categoryType: searchForm.transactionType,
|
||
}
|
||
const res = await getErpCategoryList(params);
|
||
tranTypes.value = res || [];
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error);
|
||
tranTypes.value = [];
|
||
}
|
||
}
|
||
|
||
async function getList() {
|
||
try {
|
||
const reqParmas = {
|
||
... searchForm,
|
||
pageNum: currentPage.value, // 当前页
|
||
pageSize: pageSize.value, // 每页条数
|
||
accountId: props.accountData.rawData?.accountId || '',
|
||
}
|
||
const res = await getErpTransactionFlowList(reqParmas);
|
||
total.value = res.total;
|
||
tableData.value = res.list || [];
|
||
} catch (error) {
|
||
console.error('获取数据失败:', error);
|
||
tableData.value = [];
|
||
}
|
||
}
|
||
|
||
onMounted(async () => {
|
||
await getList();
|
||
await getTranTypes();
|
||
})
|
||
</script>
|
||
|
||
<style scoped>
|
||
.detail-container {
|
||
width: 100%;
|
||
height: 100%;
|
||
padding: 12px;
|
||
color: #e0e6ff;
|
||
background: url('@/assets/images/border.png') no-repeat center center;
|
||
background-size: 100% 100%;
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
box-sizing: border-box;
|
||
position: relative;
|
||
z-index: 10001;
|
||
}
|
||
|
||
.detail-header {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
align-items: center;
|
||
margin-bottom: 10px;
|
||
}
|
||
.detail-header h3 {
|
||
margin: 0;
|
||
color: #409EFF;
|
||
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
|
||
font-size: 18px;
|
||
}
|
||
.close-btn {
|
||
background: transparent;
|
||
border: none;
|
||
font-size: 24px;
|
||
color: #e0e6ff;
|
||
cursor: pointer;
|
||
width: 40px;
|
||
height: 40px;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
transition: color 0.2s;
|
||
z-index: 10002;
|
||
}
|
||
.close-btn:hover {
|
||
color: #409EFF;
|
||
}
|
||
|
||
.split-line {
|
||
height: 1px;
|
||
background-color: #409EFF;
|
||
opacity: 0.6;
|
||
margin-bottom: 16px;
|
||
}
|
||
|
||
.detail-body {
|
||
width: 100%;
|
||
height: calc(100% - 80px);
|
||
border: 1px solid #409EFF;
|
||
border-radius: 6px;
|
||
padding: 16px;
|
||
background-color: rgba(10, 30, 60, 0.2);
|
||
box-sizing: border-box;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 16px;
|
||
overflow: visible;
|
||
position: relative;
|
||
z-index: 10001;
|
||
}
|
||
|
||
.search-form {
|
||
display: flex;
|
||
align-items: center;
|
||
width: 100%;
|
||
padding-bottom: 16px;
|
||
border-bottom: 1px solid rgba(64, 158, 255, 0.3);
|
||
flex-wrap: wrap;
|
||
position: relative;
|
||
z-index: 10001;
|
||
}
|
||
.form-items-wrapper {
|
||
display: flex;
|
||
flex: 1;
|
||
gap: 20px;
|
||
min-width: 0;
|
||
flex-wrap: wrap;
|
||
}
|
||
.form-item {
|
||
flex: 1;
|
||
margin-bottom: 0 !important;
|
||
min-width: 180px;
|
||
}
|
||
.date-range-item {
|
||
min-width: 280px !important;
|
||
}
|
||
.form-btn-group {
|
||
margin-left: 20px;
|
||
margin-bottom: 0 !important;
|
||
flex-shrink: 0;
|
||
display: flex;
|
||
gap: 10px;
|
||
}
|
||
|
||
.data-table {
|
||
flex: 1;
|
||
overflow: auto;
|
||
position: relative;
|
||
z-index: 10001;
|
||
}
|
||
|
||
.pagination-wrapper {
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
align-items: center;
|
||
padding-top: 10px;
|
||
border-top: 1px solid rgba(64, 158, 255, 0.2);
|
||
background-color: rgba(10, 30, 60, 0.2);
|
||
flex-shrink: 0;
|
||
position: relative;
|
||
z-index: 10001;
|
||
}
|
||
|
||
:deep(.el-form-item__label) {
|
||
color: #e0e6ff !important;
|
||
font-size: 14px;
|
||
}
|
||
:deep(.el-input__wrapper),
|
||
:deep(.el-select__wrapper),
|
||
:deep(.el-date-editor__wrapper) {
|
||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||
border: 1px solid #409EFF !important;
|
||
box-shadow: none !important;
|
||
width: 100% !important;
|
||
position: relative;
|
||
z-index: 10001;
|
||
}
|
||
:deep(.el-input__inner),
|
||
:deep(.el-select__inner),
|
||
:deep(.el-date-editor input) {
|
||
color: #e0e6ff !important;
|
||
background-color: transparent !important;
|
||
}
|
||
:deep(.el-input__placeholder),
|
||
:deep(.el-date-editor__placeholder) {
|
||
color: rgba(224, 230, 255, 0.6) !important;
|
||
}
|
||
|
||
:deep(.custom-pagination) {
|
||
--el-pagination-text-color: #e0e6ff;
|
||
--el-pagination-button-color: #e0e6ff;
|
||
--el-pagination-button-hover-color: #409EFF;
|
||
--el-pagination-button-active-color: #409EFF;
|
||
--el-pagination-border-color: #409EFF;
|
||
--el-pagination-bg-color: rgba(10, 30, 60, 0.2) !important;
|
||
z-index: 10001;
|
||
}
|
||
:deep(.el-pagination button) {
|
||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||
border-color: #409EFF !important;
|
||
color: #e0e6ff !important;
|
||
}
|
||
:deep(.el-pagination .el-pager li) {
|
||
color: #e0e6ff !important;
|
||
}
|
||
:deep(.el-pagination .el-pager li.active) {
|
||
color: #409EFF !important;
|
||
font-weight: bold;
|
||
}
|
||
|
||
:deep(.el-table) {
|
||
--el-table-text-color: #a0cfff;
|
||
--el-table-header-text-color: #a0cfff;
|
||
--el-table-row-hover-bg-color: rgba(64, 158, 255, 0.2);
|
||
--el-table-border-color: transparent !important;
|
||
--el-table-stripe-row-bg-color: rgba(10, 30, 60, 0.3);
|
||
background-color: transparent !important;
|
||
border: none !important;
|
||
z-index: 10001;
|
||
}
|
||
:deep(.el-table th) {
|
||
border: none !important;
|
||
border-bottom: 1px solid rgba(64, 158, 255, 0.3) !important;
|
||
background-color: rgba(10, 30, 60, 0.8) !important;
|
||
color: #a0cfff !important;
|
||
}
|
||
:deep(.el-table td) {
|
||
border: none !important;
|
||
border-bottom: 1px solid rgba(64, 158, 255, 0.2) !important;
|
||
background-color: transparent !important;
|
||
color: #a0cfff !important;
|
||
}
|
||
:deep(.el-table--striped .el-table__row--striped td) {
|
||
background-color: rgba(10, 30, 60, 0.3) !important;
|
||
border-bottom-color: rgba(64, 158, 255, 0.2) !important;
|
||
}
|
||
:deep(.el-table__row:hover > td) {
|
||
background-color: rgba(64, 158, 255, 0.2) !important;
|
||
border-bottom-color: rgba(64, 158, 255, 0.3) !important;
|
||
}
|
||
:deep(.el-table tr:last-child td) {
|
||
border-bottom: none !important;
|
||
}
|
||
:deep(.el-table-empty-text) {
|
||
color: #a0cfff !important;
|
||
background-color: transparent !important;
|
||
}
|
||
|
||
:deep(.el-button) {
|
||
--el-button-text-color: #e0e6ff !important;
|
||
--el-button-border-color: #409EFF !important;
|
||
--el-button-hover-text-color: #fff !important;
|
||
--el-button-hover-border-color: #409EFF !important;
|
||
--el-button-hover-bg-color: rgba(64, 158, 255, 0.2) !important;
|
||
height: 32px;
|
||
padding: 0 16px;
|
||
z-index: 10001;
|
||
}
|
||
:deep(.el-button--primary) {
|
||
--el-button-text-color: #fff !important;
|
||
--el-button-bg-color: rgba(64, 158, 255, 0.8) !important;
|
||
--el-button-border-color: #409EFF !important;
|
||
--el-button-hover-bg-color: #409EFF !important;
|
||
}
|
||
:deep(.reset-btn) {
|
||
background-color: rgba(0, 0, 0, 0.2) !important;
|
||
border-color: #409EFF !important;
|
||
color: #e0e6ff !important;
|
||
}
|
||
:deep(.reset-btn:hover) {
|
||
background-color: rgba(64, 158, 255, 0.2) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
:deep(.el-loading-mask) {
|
||
background-color: rgba(10, 30, 60, 0.8) !important;
|
||
z-index: 10002;
|
||
}
|
||
:deep(.el-table__loading-wrapper) {
|
||
background-color: transparent !important;
|
||
}
|
||
:deep(.el-loading-spinner .path) {
|
||
stroke: #409EFF !important;
|
||
}
|
||
:deep(.el-loading-text) {
|
||
color: #a0cfff !important;
|
||
}
|
||
|
||
.detail-body::-webkit-scrollbar,
|
||
:deep(.el-table__body-wrapper)::-webkit-scrollbar {
|
||
width: 6px;
|
||
height: 6px;
|
||
}
|
||
.detail-body::-webkit-scrollbar-track {
|
||
background: rgba(10, 30, 60, 0.1);
|
||
border-radius: 3px;
|
||
}
|
||
.detail-body::-webkit-scrollbar-thumb {
|
||
background: rgba(64, 158, 255, 0.5);
|
||
border-radius: 3px;
|
||
}
|
||
</style>
|
||
|
||
<style>
|
||
|
||
.theme-select-popper {
|
||
background-color: rgba(10, 30, 60, 0.95) !important;
|
||
border: 1px solid #409EFF !important;
|
||
color: #e0e6ff !important;
|
||
z-index: 99999 !important;
|
||
pointer-events: auto !important;
|
||
position: fixed !important;
|
||
}
|
||
.theme-select-popper .el-select-dropdown__item {
|
||
color: #e0e6ff !important;
|
||
background-color: transparent !important;
|
||
padding: 6px 12px !important;
|
||
}
|
||
.theme-select-popper .el-select-dropdown__item:hover {
|
||
background-color: rgba(64, 158, 255, 0.2) !important;
|
||
color: #fff !important;
|
||
}
|
||
.theme-select-popper .el-select-dropdown__item.selected {
|
||
background-color: rgba(64, 158, 255, 0.5) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.theme-pagination-popper {
|
||
background-color: rgba(10, 30, 60, 0.95) !important;
|
||
border: 1px solid #409EFF !important;
|
||
color: #e0e6ff !important;
|
||
z-index: 99999 !important;
|
||
pointer-events: auto !important;
|
||
position: fixed !important;
|
||
}
|
||
.theme-pagination-popper .el-pagination__sizes-option {
|
||
color: #e0e6ff !important;
|
||
background-color: transparent !important;
|
||
}
|
||
.theme-pagination-popper .el-pagination__sizes-option:hover {
|
||
background-color: rgba(64, 158, 255, 0.2) !important;
|
||
color: #fff !important;
|
||
}
|
||
|
||
.modal-overlay {
|
||
pointer-events: auto !important;
|
||
}
|
||
.modal-overlay .modal-content {
|
||
pointer-events: auto !important;
|
||
}
|
||
</style> |