feat(fuzzy-select): 添加删除按钮功能并优化问题人选择逻辑

在fuzzy-select组件中添加删除按钮，支持清空选择项
优化problemRect页面中问题人选择逻辑，处理null值和删除操作
修复问题人必填校验时的提示信息

src/components/fuzzy-select/fuzzy-select.vue

@@ -1,8 +1,15 @@
 <template>
   <view class="fuzzy-select-container">
-    <!-- 搜索输入框 -->
-    <uni-easyinput ref="inputRef" v-model="searchKeyword" :placeholder="placeholder" :clearable="true"
-      :disabled="disabled" @input="handleInput" @focus="showDropdown = true" @blur="handleBlur" />
+    <!-- 搜索输入框和删除按钮 -->
+    <view class="input-container">
+      <uni-easyinput ref="inputRef" v-model="searchKeyword" :placeholder="placeholder" :clearable="true"
+        :disabled="disabled" @input="handleInput" @focus="showDropdown = true" @blur="handleBlur" />
+      
+      <!-- 删除按钮 -->
+      <view v-if="value && !disabled" class="delete-btn" @click="handleDelete">
+        <text class="delete-icon">×</text>
+      </view>
+    </view>
 
     <!-- 下拉选项列表 -->
     <view v-if="showDropdown && filteredOptions.length > 0" class="dropdown-list">
@@ -175,6 +182,13 @@ export default {
         this.$refs.inputRef.blur()
       }
     },
+
+    // 处理删除
+    handleDelete() {
+      if (this.disabled) return;
+      this.clearSearch()
+      this.$emit('delete')
+    },
   }
 }
 </script>
@@ -185,6 +199,39 @@ export default {
   width: 100%;
 }
 
+.input-container {
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+
+.delete-btn {
+  position: absolute;
+  right: 8px;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border-radius: 50%;
+  background-color: #f0f0f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  cursor: pointer;
+  z-index: 10;
+}
+
+.delete-btn:hover {
+  background-color: #e0e0e0;
+}
+
+.delete-icon {
+  font-size: 16px;
+  color: #999;
+  font-weight: bold;
+  line-height: 1;
+}
+
 .dropdown-list {
   position: absolute;
   top: 100%;

src/config.js

@@ -1,11 +1,11 @@
 // 应用全局配置
 module.exports = {
    // 接口地址  本地调试使用 http://192.168.3.222:38080  打包使用 /prod-api
- //  baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.3.221:82/prod-api' : '/prod-api', //生产
+  //  baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.3.221:82/prod-api' : '/prod-api', //生产
   //  baseUrl: process.env.NODE_ENV === 'development' ? 'http://192.168.3.221:8080' : '/prod-api',
 // baseUrl: process.env.NODE_ENV === 'development' ? 'http://guangxi.qinghe.sundot.cn:8088' : 'http://guangxi.qinghe.sundot.cn:8088/prod-api',
 // baseUrl: 'http://guangxi.qinghe.sundot.cn:8088',
-    baseUrl:'http://airport.samsundot.com:9021/prod-api',
+   baseUrl:'http://airport.samsundot.com:9021/prod-api',
   // 应用信息
   appInfo: {
     // 应用名称

src/pages/problemRect/index.vue

@@ -62,12 +62,16 @@
                                     </view>
                                     <view class="problem-content">
                                         <view class="problem-person">
-                                            <view class="problem-label">问题人<text style="color: red;margin-left: 10rpx;">请确定问题人</text></view>
-
-                                            <fuzzy-select v-model="problem.checkUserList.userId" :options="userOptions"
-                                                :placeholder="'请输入问题' + (index + 1) + '的责任人'" data-value="userId"
-                                                data-text="nickName" @change="handleUserSelect"
-                                                :disabled="formDisabled" />
+                                            <view class="problem-label"><text v-if="isResponsiblePerson"
+                                                    style="color: red;">*</text>问题人<text
+                                                    style="color: red;margin-left: 10rpx;">请确定问题人</text></view>
+
+                                            <fuzzy-select :value="getCheckUserListValue(problem.checkUserList)"
+                                                :options="userOptions" :placeholder="'请输入问题' + (index + 1) + '的责任人'"
+                                                data-value="userId" data-text="nickName"
+                                                @input="handleUserInput(index, $event)"
+                                                @change="handleUserSelect($event, index)"
+                                                @delete="handleUserDelete(index)" :disabled="formDisabled" />
                                         </view>
                                         <view class="problem-description">
                                             <text class="problem-label">问题描述</text>
@@ -209,7 +213,7 @@ import { listAllUser } from "@/api/system/user.js"
 import { getProblemRectDetail, approvalAgree, approvalReject } from '@/api/problemRect/problemRect.js'
 import { getApprovelHistory } from '@/api/approve/approve.js'
 import { getDeptManager, getDeptDetail } from "@/api/system/dept/dept.js"
-import { buildTeamOptions, buildDepartmentOptions,buildBrigadeOptions } from "@/utils/common.js"
+import { buildTeamOptions, buildDepartmentOptions, buildBrigadeOptions } from "@/utils/common.js"
 export default {
     components: { HomeContainer, RejectModal },
     mixins: [useDictMixin],
@@ -315,7 +319,7 @@ export default {
                 selectTeamName: '', // 整改班组名称
                 selectTeamLeaderId: '', // 班组长ID
                 selectTeamLeaderName: '', // 班组长姓名
-                
+
                 // 被检查对象相关字段
                 checkedBrigadeId: '', // 被检查大队ID
                 checkedBrigadeName: '', // 被检查大队名称
@@ -364,10 +368,39 @@ export default {
         console.log(this.$store.state.user)
     },
     methods: {
-        handlecheckedDepartmentIdChange(e) {
+        handleUserSelect(e, index) {
+            const person = this.userOptions.find(item => item.userId == e)
+            if (this.formData.checkProjectItemList && this.formData.checkProjectItemList[index]) {
+                this.formData.checkProjectItemList[index].checkUserList = person;
+            }
+        },
 
+        // 获取checkUserList的值，处理null情况
+        getCheckUserListValue(checkUserList) {
+            return checkUserList && checkUserList.userId ? checkUserList.userId : '';
+        },
+
+        // 处理用户输入
+        handleUserInput(index, value) {
+            if (this.formData.checkProjectItemList && this.formData.checkProjectItemList[index]) {
+                if (!this.formData.checkProjectItemList[index].checkUserList) {
+                    this.formData.checkProjectItemList[index].checkUserList = {};
+                }
+                this.formData.checkProjectItemList[index].checkUserList.userId = value;
+            }
+        },
+
+        // 处理用户删除
+        handleUserDelete(index) {
+            // 将problem.checkUserList置为null
+            if (this.formData.checkProjectItemList && this.formData.checkProjectItemList[index]) {
+                this.formData.checkProjectItemList[index].checkUserList = null;
+                // 强制更新视图以确保fuzzy-select组件重新渲染
+                this.$nextTick(() => {
+                    this.$forceUpdate();
+                });
+            }
         },
-        
         // 被检查大队选择
         handlecheckedBrigadeIdChange(e) {
             const { text, value } = e.detail.value[0];
@@ -422,7 +455,7 @@ export default {
 
         // 填充表单数据
         async fillFormData(data) {
-            console.log(data,"data")
+            console.log(data, "data")
             // debugger
             let checedProjectArr = [];
             if (data.checkProjectItemList && data.checkProjectItemList?.length > 0) {
@@ -476,7 +509,7 @@ export default {
 
             }
             console.log(checedProjectArr, "checedProjectArr")
-        //    debugger
+            //    debugger
 
             this.formData = {
                 ...this.formData,
@@ -555,7 +588,7 @@ export default {
 
             // 还原checkProjectItemList结构到后端原始格式
             const restoredCheckProjectItemList = this.restoreOriginalCheckProjectItemList();
-            
+
             const payload = {
                 ...this.formData,
                 checkProjectItemList: restoredCheckProjectItemList,
@@ -580,22 +613,23 @@ export default {
 
         // 提交表单
         submitForm() {
+            debugger
             // 如果当前用户是责任人，校验问题人字段必填
             if (this.isResponsiblePerson) {
-                const hasEmptyProblemUser = this.formData.checkProjectItemList?.some(problem => 
+                const hasEmptyProblemUser = this.formData.checkProjectItemList?.some(problem =>
                     !problem.checkUserList || !problem.checkUserList.userId
                 );
-                
+
                 if (hasEmptyProblemUser) {
-                    uni.showToast({ 
-                        title: '请填写所有问题的责任人', 
+                    uni.showToast({
+                        title: '请填写所有问题的问题人',
                         icon: 'none',
                         duration: 3000
                     });
                     return;
                 }
             }
-            
+
             this.$refs.form.validate().then(res => {
                 uni.showLoading({ title: '提交中...', mask: true });