feat:[模板管理][update]

src/components/Template/BaseInfoFormPcakge.vue

@@ -9,12 +9,14 @@
                         <template v-if="sItem.type === 'input'">
                             <div class="form-title">{{ sItem.label }}</div>
                             <HandleFormItem @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]" 
-                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                                :orange-bg="orangeBgFields[key]" />
                         </template>
                         <template v-else-if="sItem.type === 'inputNumber'">
                             <div class="form-title">{{ sItem.label }}</div>
                             <HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" :item="sItem" @input = "onInputNumberChange(key, $event)"  v-model="formFields[key]" 
-                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                                :orange-bg="orangeBgFields[key]" />
                         </template>
                     </div>
                 </div>
@@ -27,7 +29,8 @@
                             <div class="form-title">{{ sItem.label }}</div>
                             <div class="flex ">
                                 <HandleFormItem type="select" :item="sItem" v-model="formFields[key]"
-                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" />
+                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" 
+                                    :orange-bg="orangeBgFields[key]" />
 
                             </div>
                         </div>
@@ -54,19 +57,23 @@
                             <div class="form-title" v-if="sItem.label">{{ sItem.label }}</div>
                             <div v-if="sItem.type === 'dateTime'" class="flex1">
                                 <HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]"
-                                    @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                                    @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                                    :orange-bg="orangeBgFields[key]" />
                             </div>
                             <div v-else-if="sItem.type === 'select'">
                                 <HandleFormItem type="select" :item="sItem" v-model="formFields[key]"
-                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" />
+                                    @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" 
+                                    :orange-bg="orangeBgFields[key]" />
                             </div>
                             <div v-else-if="sItem.type === 'input'">
                                 <HandleFormItem @blur="onBlur(key, $event)" :item="sItem" v-model="formFields[key]" 
-                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                                :orange-bg="orangeBgFields[key]" />
                             </div>
                             <div v-else-if="sItem.type === 'textarea'">
                                 <HandleFormItem @blur="onBlur(key, $event)" type="textarea" :item="sItem" v-model="formFields[key]" 
-                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                                @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                                :orange-bg="orangeBgFields[key]" />
                             </div>
                         </div>
                     </div>
@@ -80,24 +87,29 @@
                         <div class="step-form-title" v-if="sItem.label">{{ sItem.label }}</div>
                         <div v-if="sItem.type === 'dateTime'" class="flex1">
                             <HandleFormItem type="dateTime" :item="sItem" v-model="formFields[key]"
-                                    @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                                    @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                                    :orange-bg="orangeBgFields[key]" />
                         </div>
                         <div v-else-if="sItem.type === 'select'" class="flex flex1">
                             <HandleFormItem type="select" :item="sItem" style="width: auto;flex:1" v-model="formFields[key]"
-                                @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" />
+                                @copy="onCopy(sItem, key)" @change="onSelectChange(key, $event)" :error="errors[key]" @update:error="errors[key] = false" 
+                                :orange-bg="orangeBgFields[key]" />
                             <div v-show="isShowOther(formFields[key])" class="flex flex1">
                                 <div class="other-title">其他</div>
                                 <div class="flex">
                                     <HandleFormItem @blur="onBlur(key, $event)" class="sub-select" :item="getOtherItem(sItem)" v-model="formFields[sItem.otherCode]" 
-                                        @copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]" @update:error="errors[sItem.otherCode] = false" />
+                                        @copy="onCopy(sItem, key)" :error="errors[sItem.otherCode]" @update:error="errors[sItem.otherCode] = false" 
+                                        :orange-bg="orangeBgFields[sItem.otherCode]" />
                                 </div>
                             </div>
                         </div>
                         <div v-else-if="sItem.type === 'input'" class="flex flex1">
                             <HandleFormItem @blur="onBlur(key, $event)" class="flex1" :item="sItem" v-model="formFields[key]" 
-                            @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                            @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                            :orange-bg="orangeBgFields[key]" />
                             <HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]" 
-                            @copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" />
+                            @copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" 
+                            :orange-bg="orangeBgFields[sItem.subKey]" />
                             <div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div>
                             <HandleFormItem v-else-if="sItem.subType === 'clickable'" type="clickable" @clickable="handleClickable(sItem,$event)" class="sub-select" :item="getClickableItem(sItem)" :value="formFields[sItem.subKey]" 
                             />
@@ -108,9 +120,11 @@
                         </div>
                         <div v-else-if="sItem.type === 'inputNumber'" class="flex flex1">
                             <HandleFormItem type = "inputNumber" @blur="onBlur(key, $event)" class="flex1" :item="sItem" @input = "onInputNumberChange(key, $event)" :value = "formFields[key]" 
-                            @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" />
+                            @copy="onCopy(sItem, key)" :error="errors[key]" @update:error="errors[key] = false" 
+                            :orange-bg="orangeBgFields[key]" />
                             <HandleFormItem v-if="sItem.subType === 'select'" type="select" class="sub-select" :item="getSubItem(sItem)" v-model="formFields[sItem.subKey]" 
-                            @copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" />
+                            @copy="onCopy(sItem, key)" @change="onSelectChange(sItem.subKey, $event)" :error="errors[sItem.subKey]" @update:error="errors[sItem.subKey] = false" 
+                            :orange-bg="orangeBgFields[sItem.subKey]" />
                             <div v-else-if="sItem.subType === 'span'">{{ formFields[sItem.subKey] }}</div>
                               <HandleFormItem v-else-if="sItem.subType === 'clickable'" @clickable="handleClickable(sItem,$event)" type="clickable" class="sub-select" :item="getClickableItem(sItem)" :value="formFields[sItem.subKey]" 
                             />
@@ -153,6 +167,7 @@ export default {
             formFields: {},//表单绑定字段
             allFieldsConfig: {},//包含config的所有字段,主要用于校验表单是否填写
             errors: {},//存储表单错误信息，用于标红提示
+            orangeBgFields: {},// 存储需要橙色背景的字段
         };
     },
     watch: {
@@ -394,6 +409,21 @@ export default {
             return this.formFields[key];
         },
         onBlur(key, val) {
+            // compareTo 功能：当fillType==="actFill"时，判断当前值是否与compareTo字段的值一样，如果不一样则将当前input框的背景色标记成橙色
+            const currentFieldConfig = this.allFieldsConfig[key];
+            if (currentFieldConfig && currentFieldConfig.fillType === "actFill" && currentFieldConfig.compareTo) {
+                const compareToKey = currentFieldConfig.compareTo;
+                const compareToValue = this.formFields[compareToKey];
+                
+                // 比较当前值和compareTo值，如果不相等则设置橙色背景
+                if (val !== compareToValue) {
+                    this.$set(this.orangeBgFields, key, true);
+                } else {
+                    // 相等则移除橙色背景
+                    this.$set(this.orangeBgFields, key, false);
+                }
+            }
+            
             this.$emit("blur", { key, value: val ,...this.formFields});
         },
         onSelectChange(key, val) {
@@ -519,7 +549,7 @@ export default {
     margin-right: 24px;
 }
 .sub-select{
-    width: auto;
+    width: 100px;
     margin-left: 10px;
 }
 .clickable{

src/components/Template/CustomTable.vue

@@ -40,21 +40,24 @@
                     class="body-input" :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]"
                     @change="onBodyValueChange(rowIndex, colIndex, $event)"
                     :error="hasError(rowIndex, colIndex, col.prop)"
-                    @update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
+                    @update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
+                    :orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
                 </template>
                 <template v-else-if="col.bodyType === 'inputNumber'">
                   <HandleFormItem type="inputNumber" @copy="onCopy(rowIndex, col)" class="body-input-number"
                     :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]" @blur="onBlur(rowIndex, col.prop, $event)"
                     @change="onBodyValueChange(rowIndex, colIndex, $event)"
                     :error="hasError(rowIndex, colIndex, col.prop)"
-                    @update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
+                    @update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
+                    :orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
                 </template>
                 <template v-else-if="col.bodyType === 'select'">
                   <HandleFormItem type="select" class="body-select" @blur="onBlur(rowIndex, col.prop, $event)"
                     :item="getBodyItem(col, rowIndex)" v-model="row[col.prop]"
                     @change="onBodyValueChange(rowIndex, colIndex, $event)"
                     :error="hasError(rowIndex, colIndex, col.prop)"
-                    @update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)" />
+                    @update:error="onErrorUpdate(rowIndex, colIndex, col.prop, $event)"
+                    :orange-bg="hasOrangeBg(rowIndex, colIndex, col.prop)" />
                 </template>
                 <template v-else>
                   {{ row[col.prop] }}
@@ -66,7 +69,8 @@
                     @copy="onCopy(rowIndex, col)" :item="getBodySubItem(col)" v-model="row[col.bodySubKey]"
                     @change="onBodySubValueChange(rowIndex, colIndex, $event)"
                     :error="hasError(rowIndex, colIndex, col.bodySubKey)"
-                    @update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)" />
+                    @update:error="onErrorUpdate(rowIndex, colIndex, col.bodySubKey, $event)"
+                    :orange-bg="hasOrangeBg(rowIndex, colIndex, col.bodySubKey)" />
                 </template>
                 <template v-else>
                   {{ row[col.bodySubKey] }}
@@ -140,7 +144,8 @@ export default {
     return {
       localDataSource: [],
       headerSelectFields: {},
-      formErrors: [] // 表单错误状态管理
+      formErrors: [], // 表单错误状态管理
+      orangeBgCells: {} // 存储需要橙色背景的单元格 {rowIndex-colIndex: true/false}
     }
   },
   watch: {
@@ -338,6 +343,7 @@ export default {
         label: col.label,
         precision: currentItem[col.bodyPrecisionKey] || col.precision || 0,
         copyFrom: col.copyFrom || "",
+        compareTo: col.bodyCompareTo, // 添加 compareTo 字段
       };
       if (col.bodyDisabled) {
         item.disabled = col.bodyDisabled;
@@ -352,6 +358,7 @@ export default {
         label: "",
         placeholder: col.bodySubPlaceholder || "请输入",
         precision: col.subPrecision || 0,
+        compareTo: col.bodySubCompareTo, // 添加 compareTo 字段
       }
       if (col.bodySubDisabled) {
         item.disabled = col.bodySubDisabled;
@@ -402,8 +409,50 @@ export default {
     onSubBlur(rowIndex, colKey, value) {
       this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] });
     },
+    // 检查是否需要橙色背景
+    hasOrangeBg(rowIndex, colIndex, field) {
+      const key = `${rowIndex}-${colIndex}-${field}`;
+      return this.orangeBgCells[key] || false;
+    },
+    // 设置橙色背景状态
+    setOrangeBg(rowIndex, colIndex, field, status) {
+      const key = `${rowIndex}-${colIndex}-${field}`;
+      this.$set(this.orangeBgCells, key, status);
+    },
     onBlur(rowIndex, colKey) {
       const value = this.localDataSource[rowIndex][colKey];
+      
+      // 查找对应的列配置
+      const col = this.columns.find(c => c.prop === colKey);
+      if (col && col.bodyFillType === "actFill" && col.bodyCompareTo) {
+        const compareToValue = this.localDataSource[rowIndex][col.bodyCompareTo];
+        
+        // 比较当前值和compareTo值，如果不相等则设置橙色背景
+        if (value !== compareToValue) {
+          this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.prop === colKey), colKey, true);
+        } else {
+          // 相等则移除橙色背景
+          this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.prop === colKey), colKey, false);
+        }
+      }
+      
+      this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] });
+    },
+    onSubBlur(rowIndex, colKey, value) {
+      // 查找对应的列配置
+      const col = this.columns.find(c => c.bodySubKey === colKey);
+      if (col && col.bodySubFillType === "actFill" && col.bodySubCompareTo) {
+        const compareToValue = this.localDataSource[rowIndex][col.bodySubCompareTo];
+        
+        // 比较当前值和compareTo值，如果不相等则设置橙色背景
+        if (value !== compareToValue) {
+          this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.bodySubKey === colKey), colKey, true);
+        } else {
+          // 相等则移除橙色背景
+          this.setOrangeBg(rowIndex, this.columns.findIndex(c => c.bodySubKey === colKey), colKey, false);
+        }
+      }
+      
       this.$emit("blur", { rowIndex, colKey, value, item: this.localDataSource[rowIndex] });
     }
   }

src/components/Template/HandleFormItem.vue

@@ -2,31 +2,31 @@
     <div class="flex w-100">
         <div class="flex1 flex">
             <el-input v-if="type === 'input'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
-                :class="getFillTypeStyle()" @blur="onBlur"
+                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" @blur="onBlur"
                 :placeholder="getPlaceholder()" v-model="inputValue"
                 @input="onInputChange" @change="onInputChange" />
             <el-input v-else-if="type === 'textarea'" :maxlength="item.maxlength || 50" :disabled="getDisabled()"
-                :class="getFillTypeStyle()" type="textarea" show-word-limit resize="none" @blur="onBlur"
+                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" type="textarea" show-word-limit resize="none" @blur="onBlur"
                 :rows="item.rows || 3" :placeholder="getPlaceholder()"
                 v-model="inputValue" @input="onInputChange" @change="onInputChange" />
             <DecimalInput v-else-if="type === 'inputNumber'" @blur="onBlur" :maxlength="item.maxlength || 10"
                 class="flex1" :disabled="getDisabled()" :controls="item.controls || false" :min="item.min || 0"
                 :prepend = "item.prepend"
-                :decimalDigits="item.precision" :class="getFillTypeStyle()"
+                :decimalDigits="item.precision" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
                 :placeholder="getPlaceholder()" v-model="inputValue"
                 @input="onInputChange" @change="onInputChange" />
             <el-select v-else-if="type === 'select'" class="flex1" :multiple="item.multiple"
-                :class="getFillTypeStyle()" v-model="inputValue" :disabled="getDisabled()"
+                :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')" v-model="inputValue" :disabled="getDisabled()"
                 :placeholder="getPlaceholder()" @change="onInputChange">
                 <el-option v-for="op in item.options" :key="op.value" :label="op.label" :value="op.value">
                 </el-option>
             </el-select>
-            <el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" :class="getFillTypeStyle()"
+            <el-date-picker v-else-if="type === 'dateTime'" type="datetime" class="flex1" :class="getFillTypeStyle() + (orangeBg ? ' orange-bg' : '')"
                 v-model="inputValue" :disabled="getDisabled()" format="yyyy/MM/DD HH:mm:ss"
                 value-format="yyyy/MM/DD HH:mm:ss"
                 :placeholder="getPlaceholder()" @change="onInputChange">
             </el-date-picker>
-            <div class="clickable" :class="getFillTypeStyle() + (getDisabled()?' disabled':'')" v-else-if = "item.type ==='clickable'" @click="handleClickable(item,$event)">
+            <div class="clickable" :class="getFillTypeStyle() + (getDisabled()?' disabled':'') + (orangeBg ? ' orange-bg' : '')" v-else-if = "item.type ==='clickable'" @click="handleClickable(item,$event)">
                 <span v-if="value">{{ value }}</span>
                 <span v-else class="default-placeholder-text">{{getPlaceholder()}}</span>
             </div>
@@ -76,6 +76,11 @@ export default {
             type: Boolean,
             default: false
         },
+        // 橙色背景状态
+        orangeBg: {
+            type: Boolean,
+            default: false
+        },
     },
     data() {
         return {
@@ -347,6 +352,15 @@ export default {
         border-color: #f56c6c;
     }
 }
+
+.orange-bg {
+    background-color: #FFF1F1 !important; // 橙色背景，透明度适中
+    
+    input, textarea, .el-input__inner, .el-textarea__inner {
+        background-color: #FFF1F1 !important;
+    }
+}
+
 .clickable{
     cursor: pointer;
     width: auto;

src/views/business/comps/template/comps/sp/SWYPBQGZYZBB.vue

@@ -305,6 +305,7 @@ export default {
 					bodyType: "inputNumber",
 					bodyFillType: "actFill",
 					bodyMaxlength: 10,
+					bodyCompareTo: "targetStartSolutionVolume",//与哪个字段比较
 					copyFrom: "targetStartSolutionVolume",//复制哪个字段
 				},
 				{
@@ -336,6 +337,7 @@ export default {
 					bodyType: "inputNumber",
 					bodyFillType: "actFill",
 					bodyMaxlength: 10,
+					bodyCompareTo: "targetDiluentVolume",//与哪个字段比较
 					copyFrom: "targetDiluentVolume",//复制哪个字段
 				},
 				{

src/views/business/comps/template/comps/sp/SWYPFXRYPZB.vue

@@ -183,6 +183,7 @@ export default {
 							type: "inputNumber",
 							subType: "select",
 							subKey: "targetActConcentrationUnit",
+							compareTo: "targetPreConcentration",//与哪个字段比较
 							fillType: "actFill",
 							subFillType: "preFill",
 							subOptions: this.getDictOptions('business_nddw'),
@@ -206,6 +207,7 @@ export default {
 							fillType: "actFill",
 							subFillType: "preFill",
 							subOptions: this.getDictOptions('business_tjdw'),
+							compareTo: "targetPreVolume",//与哪个字段比较
 							copyFrom: "targetPreVolume",//复制哪个字段
 							maxlength:10
 						},