diff --git a/src/components/NGTools/NGCom.vue b/src/components/NGTools/NGCom.vue
index 030103b..ba21e76 100644
--- a/src/components/NGTools/NGCom.vue
+++ b/src/components/NGTools/NGCom.vue
@@ -235,9 +235,31 @@ export default {
diff --git a/src/components/NGTools/meterPar.vue b/src/components/NGTools/meterPar.vue
index 81b9534..93bc19e 100644
--- a/src/components/NGTools/meterPar.vue
+++ b/src/components/NGTools/meterPar.vue
@@ -114,7 +114,7 @@
@@ -325,27 +325,44 @@ export default {
data() {
return {
selectWidth: 0, //下拉选择组件的宽度
- meterPar: _.cloneDeep(this.value)
+ meterPar: _.cloneDeep(this.value),
+ isUpdating: false //避免循环更新标志
};
},
watch: {
+ // 新增对meterPar的深度监听
+ meterPar: {
+ deep: true,
+ handler(newVal) {
+ // 比较新旧值避免循环
+ if (!_.isEqual(newVal, this.value)) {
+ console.log('Emit to parent', newVal);
+ this.$emit('input', _.cloneDeep(newVal));
+ }
+ }
+ },
elFormWidth: {
deep: true,
handler(newVal) {
this.selectWidth = newVal;
}
},
+ // 修改后的watch配置
value: {
deep: true,
- handler(newVal) {
- console.log('-------------------', newVal, newVal.dMeterType);
- this.meterPar = _.cloneDeep(newVal);
- // 强制类型转换(如果必要)
- this.meterPar.dMeterType = String(this.meterPar.dMeterType);
- }
+ handler(newVal, oldVal) {
+ // 深度比较避免不必要的更新
+ if (!_.isEqual(newVal, this.meterPar)) {
+ console.log('Update from parent', newVal);
+ this.meterPar = _.cloneDeep({
+ ...newVal,
+ dMeterType: String(newVal.dMeterType) // 强制类型转换
+ });
+ }
+ },
+ immediate: true
}
- },
- methods: {}
+ }
};
@@ -356,7 +373,30 @@ export default {
}
.flex-form {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
- gap: 10px; /* 设置表单项之间的间距 */
+ /* 优化后的自适应规则 */
+ grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+ gap: 5px;
+
+ /* 移动端优化补充 */
+ @media (max-width: 768px) {
+ /* 手机端强制单列布局 */
+ /* grid-template-columns: 1fr; */
+
+ /* 防止内容溢出 */
+ overflow-x: hidden;
+
+ /* 移动端缩小间距 */
+ gap: 2px;
+
+ /* 表单项最小高度保障 */
+ grid-auto-rows: minmax(40px, auto);
+ }
+
+ /* 子元素弹性处理 */
+ > * {
+ min-width: 0; /* 允许内容收缩 */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
diff --git a/src/components/NGTools/meterResult.vue b/src/components/NGTools/meterResult.vue
index deab9eb..adbf255 100644
--- a/src/components/NGTools/meterResult.vue
+++ b/src/components/NGTools/meterResult.vue
@@ -1,37 +1,7 @@
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
+
-
+
-
+
+
+
+
+
+
+
@@ -147,6 +149,10 @@ export default {
elFormWidth: {
type: Number,
default: 180
+ },
+ dMeterType: {
+ type: String,
+ default: '0'
}
},
mounted() {
@@ -225,7 +231,30 @@ export default {
}
.flex-form {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); /* 自适应列宽 */
- gap: 10px; /* 设置表单项之间的间距 */
+ /* 优化后的自适应规则 */
+ grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
+ gap: 5px;
+
+ /* 移动端优化补充 */
+ @media (max-width: 768px) {
+ /* 手机端强制单列布局 */
+ /* grid-template-columns: 1fr; */
+
+ /* 防止内容溢出 */
+ overflow-x: hidden;
+
+ /* 移动端缩小间距 */
+ gap: 2px;
+
+ /* 表单项最小高度保障 */
+ grid-auto-rows: minmax(40px, auto);
+ }
+
+ /* 子元素弹性处理 */
+ > * {
+ min-width: 0; /* 允许内容收缩 */
+ overflow: hidden;
+ text-overflow: ellipsis;
+ }
}
diff --git a/src/views/index.vue b/src/views/index.vue
index 0df3385..0791f73 100644
--- a/src/views/index.vue
+++ b/src/views/index.vue
@@ -51,7 +51,7 @@
-
妍杰丽云工作室版权所有 © ----- 基于若依管理框架系统 V3.8.9
+
妍杰丽云工作室 ----- 基于若依管理框架系统 V3.8.9©
diff --git a/src/views/ngtools/FlowCal/index.vue b/src/views/ngtools/FlowCal/index.vue
index 3171ca3..915dd01 100644
--- a/src/views/ngtools/FlowCal/index.vue
+++ b/src/views/ngtools/FlowCal/index.vue
@@ -14,7 +14,7 @@
-
+
@@ -42,8 +42,8 @@ export default {
data() {
return {
btnText: '',
- elFormItemWidth: 200,
- elFormItemWidthmin: 180,
+ elFormItemWidth: 160,
+ elFormItemWidthmin: 140,
activeTab: 'meterpar',
isShowMessage: false,
message: '',