wkc/ccdi
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

优化前端页面布局细节

Browse Source
This commit is contained in:
wjj
2026-07-13 16:46:37 +08:00
parent 7a317204f7
commit ded07a2c33
23 changed files with 495 additions and 141 deletions
Download Patch File Download Diff File Expand all files Collapse all files

69
ruoyi-ui/src/views/ccdiAccountInfo/index.vue
View File

@@ -1,6 +1,5 @@
<template>
<div class="app-container account-page">
<div class="board">
<div class="app-container">
<el-form
v-show="showSearch"
ref="queryForm"
@@ -10,7 +9,7 @@
label-width="96px"
>
<el-row :gutter="16">
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="所属人类型">
<el-select v-model="queryParams.ownerType" placeholder="请选择所属人类型" clearable style="width: 100%">
<el-option label="员工" value="EMPLOYEE" />
@@ -20,12 +19,12 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="员工姓名">
<el-input v-model="queryParams.staffName" placeholder="请输入员工姓名" clearable style="width: 100%" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="账户范围">
<el-select v-model="queryParams.bankScope" placeholder="请选择账户范围" clearable style="width: 100%">
<el-option label="行内" value="INTERNAL" />
@@ -33,19 +32,19 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="关系类型">
<el-select v-model="queryParams.relationType" placeholder="请选择关系类型" clearable style="width: 100%">
<el-option v-for="item in relationTypeOptions" :key="item" :label="item" :value="item" />
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="账户姓名">
<el-input v-model="queryParams.accountName" placeholder="请输入账户姓名" clearable style="width: 100%" @keyup.enter.native="handleQuery" />
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="账户类型">
<el-select v-model="queryParams.accountType" placeholder="请选择账户类型" clearable style="width: 100%">
<el-option label="银行账户" value="BANK" />
@@ -55,7 +54,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="是否实控">
<el-select v-model="queryParams.isActualControl" placeholder="请选择是否实控" clearable style="width: 100%">
<el-option label="是" :value="1" />
@@ -63,7 +62,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="风险等级">
<el-select v-model="queryParams.riskLevel" placeholder="请选择风险等级" clearable style="width: 100%">
<el-option label="LOW" value="LOW" />
@@ -72,7 +71,7 @@
</el-select>
</el-form-item>
</el-col>
<el-col :span="6">
<el-col :xs="24" :sm="12" :md="8" :lg="6" :xl="6">
<el-form-item label="状态">
<el-select v-model="queryParams.status" placeholder="请选择状态" clearable style="width: 100%">
<el-option label="正常" :value="1" />
@@ -114,9 +113,6 @@
</el-row>
<el-table v-loading="loading" :data="rows" stripe border class="account-table">
<el-table-column label="员工姓名" prop="staffName" min-width="120">
<template slot-scope="scope">{{ scope.row.staffName || '-' }}</template>
</el-table-column>
<el-table-column label="所属人类型" prop="ownerType" width="132" align="center">
<template slot-scope="scope">
<el-tag :type="ownerTypeTagType(scope.row.ownerType)" size="mini" effect="plain">
@@ -124,16 +120,19 @@
</el-tag>
</template>
</el-table-column>
<el-table-column label="员工姓名" prop="staffName" min-width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.staffName || '-' }}</template>
</el-table-column>
<el-table-column label="关系类型" prop="relationType" width="90" align="center">
<template slot-scope="scope">{{ scope.row.relationType || '-' }}</template>
</el-table-column>
<el-table-column label="证件号" prop="ownerId" min-width="170" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.ownerId || scope.row.relationCertNo || '-' }}</template>
</el-table-column>
<el-table-column label="账户姓名" prop="accountName" min-width="120">
<el-table-column label="账户姓名" prop="accountName" min-width="120" show-overflow-tooltip>
<template slot-scope="scope">{{ scope.row.accountName || '-' }}</template>
</el-table-column>
<el-table-column label="账户号码" prop="accountNo" min-width="180" />
<el-table-column label="账户号码" prop="accountNo" min-width="180" show-overflow-tooltip />
<el-table-column label="账户类型" prop="accountType" width="110" align="center">
<template slot-scope="scope">{{ accountTypeLabel(scope.row.accountType) }}</template>
</el-table-column>
@@ -195,10 +194,15 @@
</el-table-column>
</el-table>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
</div>
<pagination v-show="total > 0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize" @pagination="getList" />
<el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="1160px" append-to-body>
<el-dialog
:title="dialogTitle"
:visible.sync="dialogVisible"
width="92%"
custom-class="account-info-dialog"
append-to-body
>
<el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
<div class="form-section">
<div class="section-head"><span>归属信息</span></div>
@@ -887,23 +891,15 @@ export default {
margin-right: 0;
}
.account-page {
min-height: calc(100vh - 84px);
background: #f5f7fa;
}
.board {
padding: 20px;
border-radius: 8px;
background: #fff;
border: 1px solid #ebeef5;
}
.account-table ::v-deep .el-table__header th {
background: #f8f8f9;
color: #515a6e;
}
::v-deep .account-info-dialog {
max-width: 1160px;
}
.form-section {
margin-bottom: 18px;
padding: 18px 18px 4px;
@@ -930,4 +926,15 @@ export default {
font-weight: 700;
}
@media (max-width: 768px) {
::v-deep .account-info-dialog {
width: calc(100vw - 24px) !important;
margin-top: 8vh !important;
}
::v-deep .account-info-dialog .el-dialog__body {
padding: 18px 16px;
}
}
</style>