fix(styles): 优化多页面表单及弹窗样式统一性和功能
- 全站业务状态标签文字化,el-tag.status-text 转为纯文本,统一字号、行高和基线对齐 - 临时额度详情弹窗加宽 label 列宽至 180px,避免标签折成三行 - 年检记录费用字段将单位“元”移至标签内,清理无效 append 配置和 template 代码 - 维修记录里程字段单位动态显示于标签,移除输入框右侧单位后缀 - 全站 Avue CRUD 弹窗标题自动添加页面全称,支持手动覆盖和自定义 - 合同管理独立表单页顶部补充“新增合同管理”标题,统一与其它表单页面样式 - 结算-正式结算页表格整合到“应付/应收”两个标签页内,复用组件并调整操作列宽度至320px - 业务相关弹窗和组件统一支持 dialogCustomClass 传递及样式适配 - 取消部分页面样式中冗余或注释代码,调整组件内按钮布局和权限判断函数逻辑 - 新增全局 mixin 以设置 CRUD 弹窗标题,主入口 main.js 注册相关初始化函数
This commit is contained in:
@@ -0,0 +1,41 @@
|
||||
/**
|
||||
* 全站 Avue CRUD 新增/编辑/查看弹窗标题自动注入
|
||||
*
|
||||
* 默认情况下 Avue 弹窗标题走 i18n,只显示「新增 / 编辑 / 查看」。
|
||||
* 本 mixin 在组件创建时自动根据当前菜单中文标题拼出完整标题,例如:
|
||||
* 「新增空港机场主数据」/「编辑空港机场主数据」/「查看空港机场主数据」
|
||||
*
|
||||
* 标题来源优先级:
|
||||
* 1. 页面自定义方法 getCrudPageTitle()(若存在)
|
||||
* 2. 当前路由中文菜单标题(this.$router.$avueRouter.generateTitle)
|
||||
*
|
||||
* 若页面已在 option 中手动配置了 addTitle / editTitle / viewTitle,则不覆盖。
|
||||
*/
|
||||
export function setupCrudDialogTitle(app) {
|
||||
app.mixin({
|
||||
created() {
|
||||
if (!this.option || typeof this.option !== 'object') return;
|
||||
if (!Array.isArray(this.option.column)) return;
|
||||
if (this.option._dialogTitleInjected) return;
|
||||
|
||||
const getTitle =
|
||||
typeof this.getCrudPageTitle === 'function'
|
||||
? this.getCrudPageTitle
|
||||
: () => {
|
||||
const router = this.$router;
|
||||
if (router && router.$avueRouter) {
|
||||
return router.$avueRouter.generateTitle(this.$route, { label: 'name' });
|
||||
}
|
||||
return (this.$route && this.$route.meta && this.$route.meta.title) || '';
|
||||
};
|
||||
|
||||
const title = getTitle();
|
||||
if (!title) return;
|
||||
|
||||
this.option.addTitle = this.option.addTitle || `新增${title}`;
|
||||
this.option.editTitle = this.option.editTitle || `编辑${title}`;
|
||||
this.option.viewTitle = this.option.viewTitle || `查看${title}`;
|
||||
this.option._dialogTitleInjected = true;
|
||||
},
|
||||
});
|
||||
}
|
||||
Reference in New Issue
Block a user