style(project-apply): 统一弹窗和独立表单底栏按钮风格
- 统一「保存+提交+返回」按钮的视觉层级和排序 - 按次要(默认)、中间(primary plain)、主操作(primary)三档区分按钮样式 - 调整按钮顺序为「辅助→返回/取消→保存草稿→提交」,主操作始终最右 - 修改project-apply、invoice-receipt-form、invoice-application-form三个页面的按钮实现 - 在 MEMORY.md 中新增底栏按钮统一规则说明 - 保留已合规页面按钮风格,避免重复修改
This commit is contained in:
@@ -120,3 +120,29 @@ vehicle/driver/ship 与 customer-archive 等本就是 14px(含 !important)
|
||||
- `src/views/business/project-apply.vue` 清理两处与全局冲突且不生效的局部表头样式:
|
||||
删除 `background: #f5f7fa; color: #303133;`,保留 `font-weight: 600`,
|
||||
选择器改为 `:deep(.el-table__header th .cell)`。
|
||||
|
||||
## 弹窗 / 独立表单页底栏「保存+提交+返回」按钮统一风格
|
||||
|
||||
**问题**: 主人截图 `business/project-apply/form?mode=add` 页面底部 `[保存][提交][返回]` 三个按钮,
|
||||
- 保存 + 提交 都是 `type="primary"` 蓝实心,视觉层级无区分。
|
||||
- 排序「主→主→次」,主操作不靠右,与全站其它页面(business-crud-page 等)已用的「次→中→主」不一致。
|
||||
|
||||
**修复**: 统一定 3 档层级 + 「次→中→主」排序。
|
||||
| 语义 | 写法 |
|
||||
| --- | --- |
|
||||
| 次要(返回/取消) | 默认(无 type)灰描边 |
|
||||
| 中间步骤(保存草稿) | `type="primary" plain` 蓝描边 |
|
||||
| 主操作(提交) | `type="primary"` 蓝实心 |
|
||||
|
||||
排序模板:`[可选辅助(如同步)][返回/取消][保存草稿][提交]`,主操作永远最右。
|
||||
|
||||
**改动文件**:
|
||||
- `business/project-apply.vue:617-651` — 主 footer + 变更 footer 都重排,`保存` 加 plain。
|
||||
- `payment/invoice-receipt-form.vue:242-252` — 保存加 plain,返回挪到保存前面。
|
||||
- `payment/invoice-application-form.vue:419-429` — 同上。
|
||||
|
||||
**未改动(已合规)**:
|
||||
- `settlement/components/pre-settlement-editor.vue` — 默认已是「默认保存 + primary 提交」。
|
||||
- `settlement/components/transport-reconciliation-editor.vue` — 两个 plain 中间步骤 + 完成对账 实心,层级清晰。
|
||||
|
||||
**沉淀**: `MEMORY.md` 新增「弹窗 / 独立表单页底栏按钮统一规则」一节,作为新页面 footer 写法标准。
|
||||
|
||||
@@ -36,6 +36,19 @@
|
||||
- 全站"状态语义"的 `el-tag` 加 `class="status-text"`,转为普通文字,不带颜色/背景/边框/圆点。
|
||||
- 实现:`element-ui.scss` 末尾 `.el-tag.status-text { ... }`。
|
||||
|
||||
### 弹窗 / 独立表单页底栏按钮统一规则
|
||||
- **排序**:从左到右按次→主排(次要居左、主操作居右),主操作永远放最后。
|
||||
- 顺序模板:`[可选辅助工具(如同步/导入)][返回/取消][保存草稿][提交/确认]`
|
||||
- **颜色层级 3 档**:
|
||||
| 语义 | type | 备注 |
|
||||
| --- | --- | --- |
|
||||
| 次要(返回 / 取消) | 不写 type(默认) | 灰描边 |
|
||||
| 中间步骤(保存草稿 / 按匹配结果更新等) | `type="primary" plain` | 蓝描边 |
|
||||
| 主操作(提交 / 完成对账 / 确认) | `type="primary"` | 蓝实心 |
|
||||
- **禁区**:保存草稿和主操作不允许同为 `type="primary"`,否则两个蓝实心按钮无视觉层级。
|
||||
- **生效页面**:`business/project-apply.vue`(footer + 变更 footer)、`payment/invoice-receipt-form.vue`、`payment/invoice-application-form.vue`。
|
||||
- **已合规不需要改**:`settlement/components/pre-settlement-editor.vue`(保存 default + 提交 primary)、`settlement/components/transport-reconciliation-editor.vue`(两个 plain 中间步骤 + 完成对账 实心)。
|
||||
|
||||
## 关键文件
|
||||
- `src/components/section-card/main.vue`
|
||||
- `src/styles/element-ui.scss`
|
||||
|
||||
@@ -619,20 +619,22 @@
|
||||
:class="{ 'project-apply-dialog__footer--change': isChangeDialog }"
|
||||
>
|
||||
<template v-if="isChangeDialog">
|
||||
<el-button type="primary" :loading="submitLoading" @click="saveChangeProject">
|
||||
<el-button v-if="!isProjectFormPage" @click="handleCancelProject">取消</el-button>
|
||||
<el-button v-if="isProjectFormPage" @click="closeProjectForm">返回</el-button>
|
||||
<el-button type="primary" plain :loading="submitLoading" @click="saveChangeProject">
|
||||
保存
|
||||
</el-button>
|
||||
<el-button type="primary" :loading="submitLoading" @click="submitChangeProject">
|
||||
提交
|
||||
</el-button>
|
||||
<el-button v-if="!isProjectFormPage" @click="handleCancelProject">取消</el-button>
|
||||
<el-button v-if="isProjectFormPage" @click="closeProjectForm">返回</el-button>
|
||||
</template>
|
||||
<template v-else>
|
||||
<el-button v-if="!isProjectFormPage" @click="handleCancelProject">取消</el-button>
|
||||
<el-button v-if="isProjectFormPage" @click="closeProjectForm">返回</el-button>
|
||||
<el-button
|
||||
v-if="!dialogReadonly"
|
||||
type="primary"
|
||||
plain
|
||||
:loading="submitLoading"
|
||||
@click="saveProject"
|
||||
>
|
||||
@@ -646,7 +648,6 @@
|
||||
>
|
||||
提交
|
||||
</el-button>
|
||||
<el-button v-if="isProjectFormPage" @click="closeProjectForm">返回</el-button>
|
||||
</template>
|
||||
</div>
|
||||
</component>
|
||||
|
||||
@@ -418,14 +418,18 @@
|
||||
|
||||
<div class="invoice-form-page__actions">
|
||||
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
|
||||
<el-button v-if="!readonly && canSave" @click="saveDraft">保存</el-button>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
<el-button
|
||||
v-if="!readonly && canSave"
|
||||
type="primary"
|
||||
plain
|
||||
@click="saveDraft"
|
||||
>保存</el-button>
|
||||
<el-button
|
||||
v-if="!readonly && canSave && hasPermission('invoice_application_submit')"
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
>提交</el-button
|
||||
>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
>提交</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
|
||||
@@ -241,14 +241,18 @@
|
||||
|
||||
<div class="receipt-form-page__actions">
|
||||
<el-button v-if="!readonly" type="primary" plain @click="syncReferenceData">同步</el-button>
|
||||
<el-button v-if="!readonly && canSave" @click="saveDraft">保存</el-button>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
<el-button
|
||||
v-if="!readonly && canSave"
|
||||
type="primary"
|
||||
plain
|
||||
@click="saveDraft"
|
||||
>保存</el-button>
|
||||
<el-button
|
||||
v-if="!readonly && canSave && hasPermission('invoice_receipt_submit')"
|
||||
type="primary"
|
||||
@click="submitForm"
|
||||
>提交</el-button
|
||||
>
|
||||
<el-button @click="goBack">返回</el-button>
|
||||
>提交</el-button>
|
||||
</div>
|
||||
</el-form>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user