style(ui): 优化必填星号与多行label的对齐方式
- 修复客商档案中必填项红色星号 * 与首行文字未垂直居中的问题 - 全站统一必填星号 * 的垂直居中规则,兼容单行与多行 label - 临时额度管理弹窗多行 label 调整星号与首字对齐,避免视觉偏移 - 调整客户档案中信用评分表和附件描述布局,使字段间距合理且内容可编辑 - /business/project-apply 搜索栏项目负责人改为手动输入,优化模糊查询体验 - 新增项目编号、客户名称、下游承运商三个搜索字段,增加查询灵活性 - 调整项目申请按钮权限顺序,新增及重大项目补录按钮功能互换 - 注释隐藏tags.vue中avue-tags相关菜单按钮,简化界面 - 修改vite开发服务器端口和代理配置,指向内网环境方便调试 - 更新 pnpm-lock.yaml 应用 avue 相关补丁,保证依赖兼容性
This commit is contained in:
@@ -21,18 +21,6 @@ const amountRules = label => [
|
||||
nonNegativeRule(label),
|
||||
];
|
||||
|
||||
const userDicFormatter = res => {
|
||||
const list = Array.isArray(res)
|
||||
? res
|
||||
: Array.isArray(res.data)
|
||||
? res.data
|
||||
: res.data?.records || [];
|
||||
return list.map(user => ({
|
||||
...user,
|
||||
realName: user.realName || user.name || user.account,
|
||||
}));
|
||||
};
|
||||
|
||||
const formatUserRealName = (row, role) =>
|
||||
row[`${role}RealName`] ||
|
||||
row[`${role}UserRealName`] ||
|
||||
@@ -103,7 +91,7 @@ export const config = {
|
||||
|
||||
export const option = createCrudOption([
|
||||
{
|
||||
label: '立项申请单号',
|
||||
label: '申请单号',
|
||||
prop: 'applyNo',
|
||||
search: true,
|
||||
searchPlaceholder: '请输入',
|
||||
@@ -115,6 +103,9 @@ export const option = createCrudOption([
|
||||
{
|
||||
label: '项目编号',
|
||||
prop: 'projectCode',
|
||||
search: true,
|
||||
searchPlaceholder: '请输入',
|
||||
searchOrder: 5,
|
||||
minWidth: 150,
|
||||
addDisplay: false,
|
||||
editDisabled: true,
|
||||
@@ -151,12 +142,18 @@ export const option = createCrudOption([
|
||||
{
|
||||
label: '客户名称',
|
||||
prop: 'customerNames',
|
||||
search: true,
|
||||
searchPlaceholder: '请输入',
|
||||
searchOrder: 6,
|
||||
minWidth: 180,
|
||||
rules: textRule('客户名称', 255, true),
|
||||
},
|
||||
{
|
||||
label: '下游承运商',
|
||||
prop: 'carrierNames',
|
||||
search: true,
|
||||
searchPlaceholder: '请输入',
|
||||
searchOrder: 10,
|
||||
minWidth: 180,
|
||||
rules: textRule('下游承运商', 255, true),
|
||||
},
|
||||
@@ -184,26 +181,17 @@ export const option = createCrudOption([
|
||||
{
|
||||
label: '项目负责人',
|
||||
prop: 'principalUserName',
|
||||
search: true,
|
||||
searchPlaceholder: '请输入',
|
||||
searchOrder: 4,
|
||||
minWidth: 130,
|
||||
formatter: row => formatUserRealName(row, 'principal'),
|
||||
rules: textRule('项目负责人', 50, true),
|
||||
},
|
||||
{
|
||||
label: '项目负责人',
|
||||
label: '项目负责人ID',
|
||||
prop: 'principalUserId',
|
||||
type: 'select',
|
||||
search: true,
|
||||
searchPlaceholder: '请选择',
|
||||
searchOrder: 4,
|
||||
filterable: true,
|
||||
dicUrl: '/blade-system/user/user-list',
|
||||
dicFormatter: userDicFormatter,
|
||||
props: {
|
||||
label: 'realName',
|
||||
value: 'id',
|
||||
},
|
||||
hide: true,
|
||||
display: false,
|
||||
},
|
||||
{
|
||||
label: '项目经办人',
|
||||
|
||||
+24
-23
@@ -10,7 +10,8 @@
|
||||
<div class="item" @click="closeAllTags">{{ $t('tagsView.closeAll') }}</div>
|
||||
<div class="item" @click="clearCacheTags">{{ $t('tagsView.clearCache') }}</div>
|
||||
</div>
|
||||
<div class="avue-tags__box">
|
||||
<!-- <div class="avue-tags__box">-->
|
||||
<div class="avue-tags__box2">
|
||||
<el-tabs
|
||||
v-model="active"
|
||||
type="card"
|
||||
@@ -38,28 +39,28 @@
|
||||
</template>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
<el-dropdown class="avue-tags__menu">
|
||||
<el-button type="primary">
|
||||
{{ $t('tagsView.menu') }}
|
||||
<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</el-button>
|
||||
<template #dropdown>
|
||||
<el-dropdown-menu>
|
||||
<el-dropdown-item @click="openSearch"
|
||||
><i class="icon-fangda" /> {{ $t('tagsView.search') }}</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="closeOthersTags"
|
||||
><i class="icon-fangkuai1" /> {{ $t('tagsView.closeOthers') }}
|
||||
</el-dropdown-item>
|
||||
<el-dropdown-item @click="closeAllTags"
|
||||
><i class="icon-cuowukongxin" /> {{ $t('tagsView.closeAll') }}</el-dropdown-item
|
||||
>
|
||||
<el-dropdown-item @click="clearCacheTags"
|
||||
><i class="icon-dingwei" /> {{ $t('tagsView.clearCache') }}
|
||||
</el-dropdown-item>
|
||||
</el-dropdown-menu>
|
||||
</template>
|
||||
</el-dropdown>
|
||||
<!-- <el-dropdown class="avue-tags__menu">-->
|
||||
<!-- <el-button type="primary">-->
|
||||
<!-- {{ $t('tagsView.menu') }}-->
|
||||
<!-- <i class="el-icon-arrow-down el-icon--right"></i>-->
|
||||
<!-- </el-button>-->
|
||||
<!-- <template #dropdown>-->
|
||||
<!-- <el-dropdown-menu>-->
|
||||
<!-- <el-dropdown-item @click="openSearch"-->
|
||||
<!-- ><i class="icon-fangda" /> {{ $t('tagsView.search') }}</el-dropdown-item-->
|
||||
<!-- >-->
|
||||
<!-- <el-dropdown-item @click="closeOthersTags"-->
|
||||
<!-- ><i class="icon-fangkuai1" /> {{ $t('tagsView.closeOthers') }}-->
|
||||
<!-- </el-dropdown-item>-->
|
||||
<!-- <el-dropdown-item @click="closeAllTags"-->
|
||||
<!-- ><i class="icon-cuowukongxin" /> {{ $t('tagsView.closeAll') }}</el-dropdown-item-->
|
||||
<!-- >-->
|
||||
<!-- <el-dropdown-item @click="clearCacheTags"-->
|
||||
<!-- ><i class="icon-dingwei" /> {{ $t('tagsView.clearCache') }}-->
|
||||
<!-- </el-dropdown-item>-->
|
||||
<!-- </el-dropdown-menu>-->
|
||||
<!-- </template>-->
|
||||
<!-- </el-dropdown>-->
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
@@ -1052,6 +1052,18 @@
|
||||
.el-form-item--default {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
|
||||
// ============ 必填星号 * 与首行文字垂直居中 ============
|
||||
// Element Plus 默认 .el-form-item__label 为 inline-flex + align-items: flex-start,
|
||||
// 星号 :before 高度(1em) 与文字行盒(line-height) 不一致时,多行/折行 label 会偏上。
|
||||
// 让 :before 跟随 label 行高、以 inline-block 参与行内对齐即可修复,
|
||||
// 兼容单行(默认 32px)与多行(auto + 18px)两种 label 高度场景。
|
||||
// 注:客商档案(customer-archive)的 label 为 auto 高度 + padding 下沉方案,scoped 特异性更高会覆盖本规则。
|
||||
.el-form-item.is-required .el-form-item__label::before {
|
||||
display: inline-block;
|
||||
line-height: inherit;
|
||||
margin-right: 4px;
|
||||
}
|
||||
//.el-form-item {
|
||||
// margin-bottom: 15px !important;
|
||||
//}
|
||||
|
||||
@@ -18,14 +18,6 @@
|
||||
@on-load="onLoad"
|
||||
>
|
||||
<template #menu-left>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
v-if="canMajorProjectSupplement"
|
||||
@click="openProjectDialog('majorSupplement')"
|
||||
>
|
||||
重大项目补录
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
@@ -34,6 +26,14 @@
|
||||
>
|
||||
新增
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-plus"
|
||||
v-if="canMajorProjectSupplement"
|
||||
@click="openProjectDialog('majorSupplement')"
|
||||
>
|
||||
重大项目补录
|
||||
</el-button>
|
||||
<el-button
|
||||
type="primary"
|
||||
icon="el-icon-download"
|
||||
|
||||
@@ -806,10 +806,33 @@ export default {
|
||||
}
|
||||
</style>
|
||||
|
||||
<style>
|
||||
<style lang="scss">
|
||||
// 弹窗字段 label 允许多行(列宽不足时换行)
|
||||
.temporary-credit-limit-dialog .el-form-item__label {
|
||||
white-space: normal;
|
||||
line-height: 1.2;
|
||||
line-height: 18px;
|
||||
}
|
||||
|
||||
// 多行 label 时,必填星号与第一行首字严格对齐(不被 form-item align-items:center 拉到中间)
|
||||
.temporary-credit-limit-dialog {
|
||||
.el-form-item {
|
||||
align-items: flex-start; // 改:取消上下居中,星号不再被拉到 label 块中央
|
||||
}
|
||||
|
||||
.el-form-item__label {
|
||||
height: auto !important;
|
||||
line-height: 18px;
|
||||
padding-top: 7px; // 视觉补偿:让单行 label 仍接近 input 中线
|
||||
}
|
||||
|
||||
// 强制必填星号垂直居中于行盒,与第一行汉字字符中心同基线(关键)
|
||||
.el-form-item.is-required .el-form-item__label::before {
|
||||
display: inline-block;
|
||||
line-height: 18px;
|
||||
height: 18px;
|
||||
vertical-align: middle; // 关键:相对 baseline 上移,与汉字字符中心对齐
|
||||
margin-right: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.temporary-credit-limit-dialog .business-crud-page__detail-content .el-descriptions__label {
|
||||
|
||||
@@ -174,7 +174,7 @@
|
||||
:close-on-press-escape="false"
|
||||
>
|
||||
<div class="category-detail">
|
||||
<div class="category-line">评分类目:{{ currentCategory.categoryName }}</div>
|
||||
<!-- <div class="category-line">评分类目:{{ currentCategory.categoryName }}</div>-->
|
||||
<section-card title="评分项目">
|
||||
<template #extra>
|
||||
<el-button
|
||||
|
||||
@@ -1111,12 +1111,12 @@
|
||||
ref="scoreForm"
|
||||
:model="currentScore"
|
||||
label-position="right"
|
||||
label-width="150"
|
||||
label-width="88"
|
||||
:disabled="readonly"
|
||||
class="score-detail-form"
|
||||
>
|
||||
<el-row :gutter="42">
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="评定日期" required>
|
||||
<el-date-picker
|
||||
v-model="currentScore.scoreDate"
|
||||
@@ -1125,7 +1125,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="拟申请总资金使用额度(万元)" required>
|
||||
<el-input
|
||||
v-model="currentScore.applyCreditLimit"
|
||||
@@ -1134,23 +1134,23 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="最终得分">
|
||||
<el-input :model-value="formatScoreValue(currentScore.finalScore)" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="最大资金使用额度(万元)">
|
||||
<el-input :model-value="formatScoreValue(currentScore.maxCreditLimit)" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="信用等级">
|
||||
<el-input :model-value="formatScoreValue(currentScore.creditLevel)" disabled />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="临时申请额度">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="临时申请额度(万元)">
|
||||
<el-input
|
||||
v-model="currentScore.tempApplyCreditLimit"
|
||||
maxlength="18"
|
||||
@@ -1158,7 +1158,7 @@
|
||||
/>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="临时额度申请使用期限">
|
||||
<div class="score-detail-form__range">
|
||||
<el-date-picker
|
||||
@@ -1175,12 +1175,7 @@
|
||||
</div>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="currentScore.remark" maxlength="200" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="8">
|
||||
<el-col :span="6">
|
||||
<el-form-item label="评分量化表" required>
|
||||
<el-select
|
||||
v-model="currentScore.quantificationId"
|
||||
@@ -1199,6 +1194,11 @@
|
||||
</el-select>
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
<el-col :span="24">
|
||||
<el-form-item label="备注">
|
||||
<el-input v-model="currentScore.remark" maxlength="200" :rows="2" type="textarea" />
|
||||
</el-form-item>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-form>
|
||||
|
||||
@@ -1323,7 +1323,17 @@
|
||||
{{ row.originalName || row.name || '-' }}
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="附件描述" prop="description" min-width="220" />
|
||||
<el-table-column label="附件描述" min-width="220">
|
||||
<template #default="{ row }">
|
||||
<el-input
|
||||
v-if="!readonly"
|
||||
v-model="row.description"
|
||||
placeholder="请输入附件描述"
|
||||
maxlength="200"
|
||||
/>
|
||||
<span v-else>{{ row.description || '-' }}</span>
|
||||
</template>
|
||||
</el-table-column>
|
||||
<el-table-column label="文件大小" min-width="120" align="center">
|
||||
<template #default="{ row }">
|
||||
<span>{{ formatAttachmentSize(row.size) || '-' }}</span>
|
||||
@@ -4657,6 +4667,23 @@ export default {
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
// 必填星号 * 与首行文字垂直居中
|
||||
// Element Plus 的 .el-form-item__label 默认 inline-flex + flex-start,
|
||||
// 多行 label 时 :before 与文字行盒高度不一致导致错位。
|
||||
// 通过 padding 把内容下沉到 label 中线,让 * 视觉中心落在第一行文字中心。
|
||||
:deep(.el-form-item.is-required .el-form-item__label) {
|
||||
align-items: flex-start;
|
||||
padding-top: 7px;
|
||||
padding-bottom: 7px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item.is-required .el-form-item__label::before) {
|
||||
display: inline-block;
|
||||
height: 18px;
|
||||
line-height: 18px;
|
||||
margin-right: 4px;
|
||||
}
|
||||
|
||||
:deep(.el-form-item__content > .el-input),
|
||||
:deep(.el-form-item__content > .el-select),
|
||||
:deep(.el-form-item__content > .el-cascader),
|
||||
@@ -4824,13 +4851,15 @@ export default {
|
||||
:deep(.el-form-item__label) {
|
||||
color: #70757a;
|
||||
font-size: 15px;
|
||||
font-weight: 600;
|
||||
white-space: normal;
|
||||
word-break: break-all;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
:deep(.el-input),
|
||||
:deep(.el-select),
|
||||
:deep(.el-date-editor) {
|
||||
width: 100%;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user