feat(新增):单元格按需变色

package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@riophae/vue-treeselect": "^0.4.0",
+    "async-validator": "^4.2.5",
     "axios": "0.18.1",
     "bpmn-js": "^6.1.1",
     "bpmn-js-properties-panel": "^0.33.1",

src/views/sample/chCheckOrder/CheckOrders/ACheckOrders.vue

@@ -32,9 +32,10 @@
           <el-input
             v-model="scope.row.one"
             :class="{ 'error-border': scope.row.error }"
-            @change="(value)=>ocrVerify(value,scope.row,scope.row.index,scope.column.index)"
+            style="background-color: transparent"
+            @change="(value)=>ocrVerify(value,scope.row,scope.column.property)"
           />
-          <!-- 错误提示 -->
+
           <div v-if="scope.row.error" class="error-message">
             {{ scope.row.error }}
           </div>
@@ -298,7 +299,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 0
         },
         {
@@ -318,7 +319,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 1
         },
         {
@@ -338,7 +339,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 2
         },
         {
@@ -358,7 +359,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 3
         },
         {
@@ -378,7 +379,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 4
         },
         {
@@ -398,7 +399,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 5
         },
         {
@@ -418,7 +419,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 6
         },
         {
@@ -438,7 +439,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 7
         },
         {
@@ -458,7 +459,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 8
         },
         {
@@ -478,7 +479,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 9
         },
         {
@@ -498,7 +499,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 10
         },
         {
@@ -518,7 +519,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 11
         },
         {
@@ -538,7 +539,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 12
         },
         {
@@ -558,7 +559,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 13
         },
         {
@@ -578,7 +579,7 @@ export default {
           X: undefined,
           R: undefined,
           res: undefined,
-          error: '',
+          error: {},
           col: 14
         }
       ]
@@ -588,8 +589,6 @@ export default {
   watch: {
     ocrArray: {
       handler(newValue, oldValue) {
-        // console.log('ocrArray11111111111111', this.ocrArray)
-
         const ocrResArr = JSON.parse(this.ocrArray)
         // 去除已识别的行数
         ocrResArr.splice(0, 1)
@@ -612,52 +611,54 @@ export default {
   methods: {
     ocrRender(res) {
       for (let i = 0; i < res.length; i++) {
-        this.tableData[i].one = res[i].one
-        this.tableData[i].two = res[i].two
-        this.tableData[i].three = res[i].three
-        this.tableData[i].four = res[i].four
-        this.tableData[i].five = res[i].five
-        this.tableData[i].six = res[i].six
-        this.tableData[i].seven = res[i].seven
-        this.tableData[i].eight = res[i].eight
-        this.tableData[i].nine = res[i].nine
-        this.tableData[i].ten = res[i].ten
-        this.tableData[i].X = res[i].X
-        this.tableData[i].R = res[i].R
-        this.tableData[i].res = res[i].res
+        // 合并当前行数据与 OCR 数据，并确保 error 对象存在
+        const newRow = {
+          ...this.tableData[i], // 保留原有数据（如 NO/difference 等）
+          ...res[i], // 覆盖 OCR 识别的数值字段（one/two...）
+          error: {
+            ...(this.tableData[i].error || {}), // 保留已有错误状态
+            ...(res[i].error || {}) // 合并 OCR 可能的错误信息（可选）
+          }
+        }
+
+        // 使用 Vue.set 触发响应式更新
+        this.$set(this.tableData, i, newRow)
       }
     },
-    ocrVerify(value, rowDatas, row, col) {
-      console.log('#####', row, '????', col)
-
-      // 定义校验规则
+    ocrVerify(value, row, field) {
+      console.log(field)
       const schema = new Schema({
-        one: {
-          type: 'string',
+        [field]: {
+          type: 'number',
           required: true,
-          message: '字段不能为空'
+          message: '请输入有效数值'
         }
-        // 其他规则...
       })
-
-      // 执行校验
-      schema.validate({ one: value }, (errors) => {
-        console.log(value)
+      schema.validate({ [field]: value }, (errors) => {
         if (errors) {
-          console.log(errors)
-          // 将错误信息更新到当前行
-          rowDatas.error = errors[0].message
+          this.$set(row.error, field, errors[0].message)
         } else {
-          rowDatas.error = '' // 校验通过，清空错误
+          this.$delete(row.error, field)
         }
       })
     },
-    cellStyle({ row, column, rowIndex, columnIndex }) {
-      row.row = rowIndex
-      column.index = columnIndex
-      /* if (row.error.length > 0 && column.property && column) {
-        return { 'border': '2px red solid' }
-      }*/
+    cellStyle({ row, column }) {
+      const value = row[column.property]
+      const hasError = !!row.error[column.property]
+
+      // 空值或存在错误时变红
+      if (
+        value === '' ||
+        value === null ||
+        value === undefined ||
+        hasError
+      ) {
+        return {
+          backgroundColor: 'red' // 半透明红色
+
+        }
+      }
+      return {}
     }
 
   }
@@ -666,5 +667,14 @@ export default {
 </script>
 
 <style scoped lang="scss">
+/*.el-input /deep/ .el-input__inner {
+
+  border-color: transparent !important;
+}*/
 
+/* 错误提示样式 */
+.error-message {
+  color: #ff0000;
+  font-size: 12px;
+}
 </style>

vue.config.js

@@ -122,7 +122,7 @@ module.exports = {
         // target: `http://192.144.239.97:20070/`,
         // ===
         // target: `http://192.168.1.37:8088/`,
-        target: `http://localhost:8082/`,
+        target: `http://localhost:8089/`,
         changeOrigin: true,
         pathRewrite: {
           ['^' + process.env.VUE_APP_BASE_API]: ''