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

2
ruoyi-ui/src/views/ccdiProject/components/ProjectTable.vue
View File

@@ -22,7 +22,7 @@
<el-table-column
prop="updateTime"
label="更新/创建时间"
label="最近更新时间"
width="180"
align="center"
>

6
ruoyi-ui/src/views/ccdiProject/components/QuickEntry.vue
View File

@@ -23,7 +23,7 @@
</div>
<div class="card-content">
<div class="card-title">创建季度初核</div>
<div class="card-desc">创建季度初核</div>
<div class="card-desc">预填本季度项目模板</div>
</div>
</div>
</el-col>
@@ -34,7 +34,7 @@
</div>
<div class="card-content">
<div class="card-title">创建新员工排查</div>
<div class="card-desc">创建新员工排查</div>
<div class="card-desc">预填本月排查模板</div>
</div>
</div>
</el-col>
@@ -45,7 +45,7 @@
</div>
<div class="card-content">
<div class="card-title">创建高风险专项</div>
<div class="card-desc">创建高风险专项</div>
<div class="card-desc">预填专项排查模板</div>
</div>
</div>
</el-col>

47
ruoyi-ui/src/views/ccdiProject/components/detail/DetailQuery.vue
View File

@@ -226,7 +226,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="摘要 / 交易类型" min-width="240">
<el-table-column label="摘要 / 交易类型" min-width="200">
<template slot-scope="scope">
<div class="multi-line-cell">
<div class="primary-text">{{ formatField(scope.row.userMemo) }}</div>
@@ -234,6 +234,22 @@
</div>
</template>
</el-table-column>
<el-table-column
label="交易金额"
prop="displayAmount"
width="120"
align="right"
sortable="custom"
>
<template slot-scope="scope">
<span
class="amount-text"
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
>
{{ formatAmount(scope.row.displayAmount) }}
</span>
</template>
</el-table-column>
<el-table-column label="异常标签" min-width="220">
<template slot-scope="scope">
<div v-if="scope.row.hitTags && scope.row.hitTags.length" class="hit-tag-list">
@@ -250,22 +266,6 @@
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
<el-table-column
label="交易金额"
prop="displayAmount"
min-width="140"
align="right"
sortable="custom"
>
<template slot-scope="scope">
<span
class="amount-text"
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
>
{{ formatAmount(scope.row.displayAmount) }}
</span>
</template>
</el-table-column>
<el-table-column label="详情" width="100" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="small" @click="handleViewDetail(scope.row)">
@@ -974,18 +974,31 @@ export default {
.primary-text {
color: #303133;
line-height: 20px;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.secondary-text {
color: #909399;
font-size: 12px;
line-height: 18px;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.hit-tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.hit-tag-list ::v-deep .el-tag {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.empty-text {

2
ruoyi-ui/src/views/ccdiProject/components/detail/IncreaseLendingSection.vue
View File

@@ -9,7 +9,7 @@
</div>
<el-form :model="queryParams" size="small" :inline="true" label-width="104px" class="query-form">
<el-form-item label="柜员号">
<el-form-item label="柜员号" label-width="72px">
<el-input
v-model="queryParams.staffId"
placeholder="请输入柜员号"

43
ruoyi-ui/src/views/ccdiProject/components/detail/RiskDetailSection.vue
View File

@@ -93,7 +93,7 @@
</div>
</template>
</el-table-column>
<el-table-column label="摘要 / 交易类型" min-width="240">
<el-table-column label="摘要 / 交易类型" min-width="200">
<template slot-scope="scope">
<div class="multi-line-cell">
<div class="primary-text">{{ formatField(scope.row.userMemo) }}</div>
@@ -101,6 +101,16 @@
</div>
</template>
</el-table-column>
<el-table-column prop="displayAmount" label="交易金额" width="120" align="right">
<template slot-scope="scope">
<span
class="amount-text"
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
>
{{ formatAmount(scope.row.displayAmount) }}
</span>
</template>
</el-table-column>
<el-table-column label="异常标签" min-width="220">
<template slot-scope="scope">
<div v-if="scope.row.hitTags && scope.row.hitTags.length" class="hit-tag-list">
@@ -117,16 +127,6 @@
<span v-else class="empty-text">-</span>
</template>
</el-table-column>
<el-table-column prop="displayAmount" label="交易金额" min-width="140" align="right">
<template slot-scope="scope">
<span
class="amount-text"
:class="scope.row.displayAmount >= 0 ? 'amount-in' : 'amount-out'"
>
{{ formatAmount(scope.row.displayAmount) }}
</span>
</template>
</el-table-column>
<el-table-column label="详情" width="100" fixed="right" align="center">
<template slot-scope="scope">
<el-button type="text" size="mini" @click="handleViewDetail(scope.row)">
@@ -1079,12 +1079,16 @@ export default {
font-weight: 500;
}
.suspicious-filter-form :deep(.el-button) {
min-width: 88px;
}
.suspicious-filter-select {
width: 220px;
width: 240px;
}
.suspicious-type-select {
width: 160px;
width: 240px;
}
.result-table {
@@ -1100,18 +1104,31 @@ export default {
.primary-text {
color: #303133;
line-height: 20px;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.secondary-text {
color: #909399;
font-size: 12px;
line-height: 18px;
min-width: 0;
overflow-wrap: anywhere;
word-break: break-word;
}
.hit-tag-list {
display: flex;
flex-wrap: wrap;
gap: 6px;
min-width: 0;
}
.hit-tag-list ::v-deep .el-tag {
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
}
.empty-text {

67
ruoyi-ui/src/views/ccdiProject/components/detail/RiskModelSection.vue
View File

@@ -9,11 +9,11 @@
</div>
<div class="model-workbench">
<section class="model-list-panel">
<section class="model-list-panel" aria-label="模型预警统计">
<div class="panel-header">
<div>
<div class="panel-title">模型预警统计</div>
<div class="panel-subtitle">点击模型筛选下方命中人员</div>
<div class="panel-subtitle">点击筛选</div>
</div>
</div>
@@ -41,11 +41,10 @@
</div>
</section>
<section class="model-result-panel">
<section class="model-result-panel" aria-label="命中模型涉及人员">
<div class="panel-header">
<div>
<div class="panel-title">命中模型涉及人员</div>
<div class="panel-subtitle">按模型、人员信息和触发方式查看明细</div>
</div>
</div>
@@ -56,7 +55,7 @@
<el-tag
v-for="item in selectedCards"
:key="`selected-${item.key}`"
size="mini"
size="small"
closable
effect="plain"
@close="toggleModelSelection(item.key)"
@@ -76,7 +75,7 @@
<span class="filter-label">{{ keywordLabel }}</span>
<el-input
v-model.trim="keyword"
size="mini"
size="small"
clearable
:placeholder="keywordPlaceholder"
@keyup.enter.native="handleQuery"
@@ -87,7 +86,7 @@
<span class="filter-label">部门</span>
<el-select
v-model="deptId"
size="mini"
size="small"
clearable
filterable
:loading="deptLoading"
@@ -106,7 +105,7 @@
<span class="filter-label">模型关系</span>
<el-radio-group
v-model="matchMode"
size="mini"
size="small"
@change="handleMatchModeChange"
>
<el-radio-button label="ANY">命中任一模型</el-radio-button>
@@ -115,8 +114,8 @@
</div>
<div class="filter-actions">
<el-button size="mini" type="primary" @click="handleQuery">查询</el-button>
<el-button size="mini" plain @click="resetQuery">重置</el-button>
<el-button size="small" type="primary" @click="handleQuery">查询</el-button>
<el-button size="small" plain @click="resetQuery">重置</el-button>
</div>
</div>
@@ -594,9 +593,9 @@ export default {
.model-list-panel,
.model-result-panel {
border: 1px solid var(--ccdi-border);
border-radius: 8px;
background: #fff;
border: 0;
border-radius: 0;
background: transparent;
overflow: hidden;
}
@@ -609,10 +608,8 @@ export default {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 54px;
padding: 12px 14px;
border-bottom: 1px solid #e7eef5;
background: #f8fbfe;
min-height: 38px;
padding: 0 2px 10px;
}
.panel-title {
@@ -623,7 +620,7 @@ export default {
}
.panel-subtitle {
margin-top: 3px;
margin-top: 2px;
font-size: 12px;
color: var(--ccdi-text-muted);
}
@@ -632,7 +629,7 @@ export default {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
padding: 12px;
padding: 0;
}
.model-card {
@@ -747,16 +744,16 @@ export default {
display: flex;
align-items: center;
gap: 10px;
margin: 12px 14px 0;
padding: 8px 10px;
border: 1px solid #e6edf5;
border-radius: 6px;
background: #fbfdff;
margin: 14px 0 0;
padding: 0 0 10px;
border-bottom: 1px solid #edf2f7;
background: transparent;
}
.selected-label {
color: var(--ccdi-text-secondary);
font-size: 12px;
font-size: 14px;
line-height: 22px;
flex-shrink: 0;
}
@@ -771,19 +768,18 @@ export default {
.selected-placeholder {
color: var(--ccdi-text-muted);
font-size: 13px;
font-size: 14px;
}
.filter-bar {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: 10px 14px;
margin: 10px 14px 12px;
padding: 10px;
border: 1px solid #e6edf5;
border-radius: 6px;
background: #fff;
gap: 12px 18px;
margin: 12px 0 14px;
padding: 0;
border: 0;
background: transparent;
}
.filter-item {
@@ -808,7 +804,8 @@ export default {
.filter-label,
.summary-label {
font-size: 12px;
font-size: 14px;
line-height: 32px;
color: var(--ccdi-text-secondary);
flex-shrink: 0;
white-space: nowrap;
@@ -821,8 +818,8 @@ export default {
}
.model-table {
margin: 0 14px;
width: calc(100% - 28px);
margin: 0;
width: 100%;
border: 1px solid #e7eef5;
border-radius: 6px;
overflow: hidden;

41
ruoyi-ui/src/views/ccdiProject/index.vue
View File

@@ -202,11 +202,36 @@ export default {
return {
projectId: null,
projectName: "",
projectDesc: "",
startDate: "",
endDate: "",
targetCount: 0,
targetPersons: [],
description: "",
configType: "default",
};
},
getProjectTemplate(type) {
const now = new Date();
const year = now.getFullYear();
const month = now.getMonth() + 1;
const quarter = Math.floor(now.getMonth() / 3) + 1;
const quarterNames = ["一", "二", "三", "四"];
const templates = {
quarterly: {
projectName: `${year}年第${quarterNames[quarter - 1]}季度纪检初核项目`,
description: `用于开展${year}年第${quarterNames[quarter - 1]}季度纪检初核排查工作。`,
configType: "default",
},
employee: {
projectName: `${year}年${month}月新员工排查项目`,
description: `用于开展${year}年${month}月新入职员工排查工作。`,
configType: "default",
},
highRisk: {
projectName: `${year}年高风险专项排查项目`,
description: `用于开展${year}年高风险人员和异常线索专项排查工作。`,
configType: "custom",
},
};
return {
...this.getEmptyForm(),
...templates[type],
};
},
/** 关闭新增弹窗 */
@@ -247,19 +272,19 @@ export default {
},
/** 创建季度初核 */
handleCreateQuarterly() {
this.projectForm = this.getEmptyForm();
this.projectForm = this.getProjectTemplate("quarterly");
this.addDialogTitle = "创建季度初核项目";
this.addDialogVisible = true;
},
/** 创建新员工排查 */
handleCreateEmployee() {
this.projectForm = this.getEmptyForm();
this.projectForm = this.getProjectTemplate("employee");
this.addDialogTitle = "创建新员工排查项目";
this.addDialogVisible = true;
},
/** 创建高风险专项 */
handleCreateHighRisk() {
this.projectForm = this.getEmptyForm();
this.projectForm = this.getProjectTemplate("highRisk");
this.addDialogTitle = "创建高风险专项项目";
this.addDialogVisible = true;
},