国有建设用地使用权/房屋所有权

 <!--
  * @Description: 受理信息
  * @Autor: renchao
- * @LastEditTime: 2024-03-25 16:42:53
+ * @LastEditTime: 2024-03-26 11:04:32
 -->
 <template>
   <div class="slxx">
@@ -113,7 +113,7 @@
             </el-form-item>
           </el-col>
           <el-col :span="8">
-            <el-form-item label="土地性质：" prop="fdcq2.tdxz">
+            <el-form-item label="土地性质：" prop="fdcq2.tdxz" :class="{ 'is-error': isError }">
               <treeselect
                 :disabled="!viewEdit"
                 v-model="ruleForm.fdcq2.tdxz"
@@ -495,6 +495,7 @@
     },
     data () {
       return {
+        isError: false,
         normalizer (node) {
           if (node.children == null || node.children == "null") {
             delete node.children;
@@ -637,6 +638,7 @@
        * @author: renchao
        */
       onSubmit () {
+        this.isError = false
         let that = this;
         let arr = this.ruleForm.tdytqxList.filter((item) => !item.yt);
         if (arr.length > 0) {
@@ -700,9 +702,9 @@
             })
           }
         }
-        this.$refs['ruleForm'].validate((valid) => {
+        this.$refs['ruleForm'].validate((valid, errors) => {
           if (valid) {
-            that.$store.dispatch("user/refreshPage", false);            
+            that.$store.dispatch("user/refreshPage", false);
             saveData(that.ruleForm).then((res) => {
               if (res.code === 200) {
                 that.$message({
@@ -715,12 +717,16 @@
                 that.$message({
                   showClose: true,
                   message: res.message,
-                  type: "error",
-                });
+                  type: "error"
+                })
               }
             })
 
           } else {
+            const fieldErrors = errors['fdcq2.tdxz'];
+            if (fieldErrors.length > 0) {
+              this.isError = true
+            }
             that.$message({
               showClose: true,
               message: "请输入红框内的相关信息！",
@@ -812,4 +818,9 @@
   /deep/.el-form-item__label {
     padding-bottom: 0px;
   }
+
+  /* 当校验失败时的边框样式 */
+  /deep/.is-error .vue-treeselect div {
+    border-color: #f56c6c; /* 设置失败时的边框颜色为红色 */
+  }
 </style>