//此js文件是用来自定义扩展业务代码，可以扩展一些自定义页面或者重新配置生成的代码
|
|
let extension = {
|
components: {
|
//查询界面扩展组件
|
gridHeader: '',
|
gridBody: '',
|
gridFooter: '',
|
//新建、编辑弹出框扩展组件
|
modelHeader: '',
|
modelBody: '',
|
modelFooter: ''
|
},
|
tableAction: '', //指定某张表的权限(这里填写表名,默认不用填写)
|
buttons: { view: [], box: [], detail: [] }, //扩展的按钮
|
methods: {
|
onInit() {
|
this.buttons.forEach(x => {
|
if (x.name == "删 除") {
|
x.name = "处 理";
|
x.icon = 'el-icon-edit';
|
x.type = 'primary';
|
}
|
});
|
// 在 onInit 中直接修改列配置
|
this.fixColumnFormatter();
|
},
|
// 直接修改列配置
|
fixColumnFormatter() {
|
// 延迟执行，确保列已加载
|
this.$nextTick(() => {
|
setTimeout(() => {
|
const col = this.columns?.find(c => c.field === 'messageGroupBy');
|
if (col) {
|
// 完全替换 formatter
|
col.formatter = (row) => {
|
const value = row.messageGroupBy;
|
const text = this.getTextByValue(value);
|
|
if (value === 1) {
|
// 库存过期预警 - 根据天数分三种颜色
|
const info = row.messageInfo || '';
|
const days = this.extractDays(info);
|
|
// 设置样式
|
let style = '';
|
if (days !== null) {
|
if (days < 0) {
|
// 已过期 - 红色
|
style = 'background-color:#fff0f0;color:#f56c6c;border:1px solid #f56c6c33;';
|
} else if (days <= 30) {
|
// 1个月内过期 - 红色
|
style = 'background-color:#fff0f0;color:#f56c6c;border:1px solid #f56c6c33;';
|
} else if (days <= 120) {
|
// 大于30天且小于等于120天 - 橙色
|
style = 'background-color:#fdf6ec;color:#e6a23c;border:1px solid #e6a23c33;';
|
} else {
|
// 大于120天 - 绿色
|
style = 'background-color:#f0f9eb;color:#67c23a;border:1px solid #67c23a33;';
|
}
|
} else {
|
// 默认样式
|
style = 'background-color:#f5f5f5;color:#909399;border:1px solid #dcdfe6;';
|
}
|
|
return `<span style="${style} padding:3px 10px;border-radius:12px;font-weight:600;font-size:12px;display:inline-block;line-height:1;">${text}</span>`;
|
}
|
|
// 其他分组 - 保持原有的样式
|
return this.getOtherGroupStyle(value, text);
|
};
|
|
console.log('列格式化函数已设置');
|
}
|
}, 200);
|
});
|
},
|
|
// 其他分组的样式
|
getOtherGroupStyle(value, text) {
|
const styleMap = {
|
0: 'background-color:#e8f4ff;color:#0088ff;border:1px solid #0088ff33;', // 设备报警 - 亮蓝色
|
2: 'background-color:#fff2e8;color:#ff8800;border:1px solid #ff880033;', // 低库存预警 - 亮橙色
|
3: 'background-color:#ffe8e8;color:#ff4444;border:1px solid #ff444433;', // 物料待维护报警 - 亮红色
|
4: 'background-color:#f0e8ff;color:#8844ff;border:1px solid #8844ff33;', // 入库单报警 - 紫色
|
5: 'background-color:#e8fffb;color:#00aa88;border:1px solid #00aa8833;', // 出库单报警 - 青色
|
6: 'background-color:#fff8e8;color:#ffaa00;border:1px solid #ffaa0033;', // 与ERP同步报警 - 金色
|
};
|
|
const style = styleMap[value] || 'background-color:#f5f5f5;color:#909399;border:1px solid #dcdfe6;';
|
|
return `<span style="${style} padding:3px 10px;border-radius:12px;font-weight:600;font-size:12px;display:inline-block;line-height:1;">${text}</span>`;
|
},
|
|
getTextByValue(value) {
|
const map = {
|
0: '设备报警',
|
1: '库存过期预警',
|
2: '低库存预警',
|
3: '物料待维护报警',
|
4: '入库单报警',
|
5: '出库单报警',
|
6: '与ERP同步报警'
|
};
|
return map[value] || `分组${value}`;
|
},
|
|
extractDays(info) {
|
if (!info) return null;
|
const match1 = info.match(/还有(\d+)天过期/);
|
const match2 = info.match(/已过期(\d+)天/);
|
|
if (match1) return parseInt(match1[1]);
|
if (match2) return -parseInt(match2[1]);
|
return null;
|
},
|
|
onInited() {
|
//框架初始化配置后
|
//可以在这里配置下拉框数据
|
},
|
|
// 设置设备状态下拉框选项
|
setDeviceStatusOptions() {
|
|
|
},
|
|
searchBefore(param) {
|
//界面查询前,可以给param.wheres添加查询参数
|
//返回false，则不会执行查询
|
return true;
|
},
|
|
searchAfter(result) {
|
//查询后，result返回的查询数据,可以在显示到表格前处理表格的值
|
return true;
|
},
|
|
addBefore(formData) {
|
//新建保存前formData为对象，包括明细表，可以给给表单设置值
|
return true;
|
},
|
|
updateBefore(formData) {
|
//编辑保存前formData为对象，包括明细表、删除行的Id
|
return true;
|
},
|
|
rowClick({ row, column, event }) {
|
//查询界面点击行事件
|
this.$refs.table.$refs.table.toggleRowSelection(row); //单击行时选中当前行;
|
},
|
|
modelOpenAfter(row) {
|
//点击编辑、新建按钮弹出框后，可以在此处写逻辑
|
|
}
|
}
|
};
|
|
export default extension;
|
