diff --git a/klp-ui/src/views/system/menu/index.vue b/klp-ui/src/views/system/menu/index.vue index 825f71f4c..92e302b3e 100644 --- a/klp-ui/src/views/system/menu/index.vue +++ b/klp-ui/src/views/system/menu/index.vue @@ -231,15 +231,55 @@ - + - 菜单样式 +
+ +
+
+ 快捷样式: + 浅红 + 浅绿 + 浅橙 + 浅蓝 + 浅紫 + 暖色 + 加粗 + 斜体 + 清除 +
+
+ 校验 + {{ showPreview ? '隐藏预览' : '预览样式' }} +
+
+
+ {{ styleError }} +
+
+
菜单预览效果:
+
+
+ 📁 + {{ form.menuName || '菜单名称' }} +
+
+
+
@@ -311,6 +351,16 @@ export default { name: "Menu", dicts: ['sys_show_hide', 'sys_normal_disable'], components: { Treeselect, IconSelect }, + computed: { + parsedStyle() { + if (!this.form.style) return {}; + try { + return JSON.parse(this.form.style); + } catch (e) { + return {}; + } + } + }, data() { return { // 遮罩层 @@ -334,6 +384,10 @@ export default { menuName: undefined, visible: undefined }, + // 菜单样式预览 + showPreview: false, + // 菜单样式校验错误 + styleError: '', // 表单参数 form: {}, // 表单校验 @@ -358,6 +412,67 @@ export default { selected(name) { this.form.icon = name; }, + /** 应用样式预设 */ + applyStylePreset(type) { + const presets = { + danger: { background: 'linear-gradient(135deg, #fff5f5 0%, #ffe0e0 100%)', color: '#c45c5c', borderRadius: '4px', border: '1px solid #ffd4d4' }, + success: { background: 'linear-gradient(135deg, #f0fff4 0%, #dcffe4 100%)', color: '#5c8a6b', borderRadius: '4px', border: '1px solid #c3e6cb' }, + warning: { background: 'linear-gradient(135deg, #fffdf0 0%, #fff3cd 100%)', color: '#b8860b', borderRadius: '4px', border: '1px solid #ffeeba' }, + primary: { background: 'linear-gradient(135deg, #f0f7ff 0%, #d6eaff 100%)', color: '#4a7fb5', borderRadius: '4px', border: '1px solid #b8daff' }, + accent: { background: 'linear-gradient(135deg, #f8f0ff 0%, #e8d5ff 100%)', color: '#8b5cf6', borderRadius: '4px', border: '1px solid #d8b4fe' }, + warm: { background: 'linear-gradient(135deg, #fff8f0 0%, #ffedd5 100%)', color: '#c27832', borderRadius: '4px', border: '1px solid #fed7aa' }, + bold: { fontWeight: '600', color: '#303133' }, + italic: { fontStyle: 'italic', color: '#606266' }, + clear: {} + }; + if (type === 'clear') { + this.form.style = ''; + this.styleError = ''; + } else { + // 合并已有样式 + let currentStyle = {}; + if (this.form.style) { + try { + currentStyle = JSON.parse(this.form.style); + } catch (e) { + currentStyle = {}; + } + } + const mergedStyle = { ...currentStyle, ...presets[type] }; + this.form.style = JSON.stringify(mergedStyle); + this.validateStyle(); + } + }, + /** 校验菜单样式JSON格式 */ + validateStyle() { + this.styleError = ''; + if (!this.form.style) { + this.$modal.msgSuccess('样式为空,无需校验'); + return; + } + try { + const styleObj = JSON.parse(this.form.style); + if (typeof styleObj !== 'object' || styleObj === null) { + this.styleError = '样式必须是JSON对象格式'; + this.$modal.msgError('校验失败:样式必须是JSON对象格式'); + return; + } + // 检查是否包含有效的CSS属性 + const validCssProps = [ + 'backgroundColor', 'background', 'color', 'fontWeight', 'fontSize', 'fontStyle', + 'borderRadius', 'padding', 'margin', 'border', 'textAlign', + 'textDecoration', 'lineHeight', 'letterSpacing', 'opacity', 'boxShadow' + ]; + const invalidProps = Object.keys(styleObj).filter(prop => !validCssProps.includes(prop)); + if (invalidProps.length > 0) { + this.styleError = `可能无效的属性:${invalidProps.join(', ')}`; + } + this.$modal.msgSuccess('校验通过:JSON格式正确'); + } catch (e) { + this.styleError = `JSON格式错误:${e.message}`; + this.$modal.msgError('校验失败:' + e.message); + } + }, /** 查询菜单列表 */ getList() { this.loading = true; @@ -554,3 +669,107 @@ export default { } }; + + diff --git a/klp-ui/src/views/wms/coil/do/warehousing.vue b/klp-ui/src/views/wms/coil/do/warehousing.vue index 124e4521b..010347110 100644 --- a/klp-ui/src/views/wms/coil/do/warehousing.vue +++ b/klp-ui/src/views/wms/coil/do/warehousing.vue @@ -20,7 +20,7 @@ + @click.native="$router.push('/wip/receive/plan')">