成员列表搜索功能调整

hookehuyr
Commit 0b73c3c607c11de8c2a6cb653f65d705907532c9 0b73c3c6 1 parent eee12f26
Showing 2 changed files with 64 additions and 55 deletions
doc/App.vue
doc/selectUserView.vue
--- a/doc/App.vue
View file @0b73c3c
+++ b/doc/App.vue
View file @0b73c3c
@@ -96,7 +96,7 @@
                     <div style="font-size: 14px; margin-bottom: 10px;">
                       节点负责人 <span style="color: red;">*</span>
                     </div>
-                    <div class="flow-tag__wrapper" @click="openUserForm">
+                    <div class="flow-tag__wrapper" style="max-height: 100px; overflow: auto;" @click="openUserForm">
                       <el-tag
                         v-if="state.userTags.length"
                         v-for="tag in state.userTags"
@@ -521,20 +521,20 @@ export default {
     onMounted(() => {
       document.title = '可视化流程设计器'
-      // // 显示提示框的标志位
+      // 显示提示框的标志位
-      // var showConfirmation = true;
+      var showConfirmation = true;
-      // // 监听 beforeunload 事件
+      // 监听 beforeunload 事件
-      // window.addEventListener('beforeunload', function (event) {
+      window.addEventListener('beforeunload', function (event) {
-      //   if (showConfirmation) {
+        if (showConfirmation) {
-      //     // 取消事件的默认行为（弹出确认对话框）
+          // 取消事件的默认行为（弹出确认对话框）
-      //     event.preventDefault();
+          event.preventDefault();
-      //   }
+        }
-      // });
+      });
-      // // 监听 unload 事件
+      // 监听 unload 事件
-      // window.addEventListener('unload', function () {
+      window.addEventListener('unload', function () {
-      //   // 设置标志位为 false，避免在刷新页面时再次显示提示框
+        // 设置标志位为 false，避免在刷新页面时再次显示提示框
-      //   showConfirmation = false;
+        showConfirmation = false;
-      // });
+      });
       // 监听 resize 事件
       window.addEventListener('resize', function () {
         state.detailModel = null;
@@ -868,15 +868,15 @@ export default {
       //     return false
       //   }
       // })
-      state.detailModel.text = state.node_name
+      state.detailModel.text = state.node_name;
       // state.detailModel.label = state.node_name
       // 更新流程图信息
-      editor.updateModel(state.detailModel)
+      editor.updateModel(state.detailModel);
-      // editor.closeModel()
+      editor.closeModel();
-      console.log('节点名称', state.node_name)
+      console.log('节点名称', state.node_name);
-      console.log('节点负责人', state.userTags)
+      console.log('节点负责人', state.userTags);
-      console.log('字段权限', state.field_auths)
+      console.log('字段权限', state.field_auths);
-      console.log('更多属性', state.more_attr)
+      console.log('更多属性', state.more_attr);
     }
     /**
--- a/doc/selectUserView.vue
View file @0b73c3c
+++ b/doc/selectUserView.vue
View file @0b73c3c
 <!--
  * @Date: 2023-11-01 10:18:53
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2023-11-22 13:49:46
+ * @LastEditTime: 2023-11-22 15:46:03
  * @FilePath: /vue-flow-editor/doc/selectUserView.vue
  * @Description: 成员列表选择控件
 -->
@@ -11,7 +11,7 @@
     title="成员列表"
     @close="closeUserForm"
   >
-    <div class="flow-tag__wrapper">
+    <div class="flow-tag__wrapper" style="max-height: 150px; overflow: auto;">
       <el-tag
         v-if="userTags.length"
         v-for="tag in userTags"
@@ -55,14 +55,14 @@
                 </div>
               </div>
             </div>
-            <!-- TAG: 暂时不做搜索功能 -->
+            <div class="flow-tab-search" @click="activeSearchBtn">
-            <!-- <div class="flow-tab-search" @click="activeSearchBtn">
               <el-icon :size="15"><Search /></el-icon> &nbsp;搜索框
-            </div> -->
+            </div>
           </div>
           <div v-else>
             <el-input
               v-model="search_input"
+              @input="onSearchInput"
               class="search-btn-wrapper"
               placeholder="请输入关键字"
             >
@@ -71,8 +71,8 @@
               </template>
               <template #append>
                 <div class="search-group">
-                  <div class="confirm-btn" @click="onSearch">搜索</div>
+                  <!-- <div class="confirm-btn" @click="onSearch">搜索</div> -->
-                  <div class="cancel-btn" @click="onClearSearch">取消</div>
+                  <div class="cancel-btn" @click="onClearSearch">关闭</div>
                 </div>
               </template>
             </el-input>
@@ -192,20 +192,25 @@
           </div> -->
         </div>
       </div>
-      <div v-else>
+      <div v-else style="height: 300px; overflow: scroll;">
         <el-checkbox-group
           class="flow-checkbox-group"
           style="padding-left: 10px;"
           v-model="checkedSearchUserList"
         >
-          <el-checkbox
+          <template
             v-for="(user, idx) in searchUserList"
             :key="idx"
+          >
+          <el-checkbox
+            v-if="user.show"
             :label="user.id"
             :disabled="user.disabled"
             @change="handleCheckedUserListChange(user, $event)"
-            >{{ user.name }}</el-checkbox
+            >
-          >
+            {{ user.name }}
+          </el-checkbox>
+          </template>
         </el-checkbox-group>
       </div>
     </div>
@@ -344,6 +349,7 @@ watch(() => {
     dialogUserFormVisible.value = true;
   } else {
     dialogUserFormVisible.value = false;
+    is_active_search.value = false;
   }
 });
@@ -638,7 +644,15 @@ const confirmUserForm = () => {
  */
 const activeSearchBtn = () => {
   is_active_search.value = !is_active_search.value;
-  searchUserList.value = []; // 清空搜索列表
+  search_input.value = '';
+  // 后台数据集合
+  searchUserList.value = _.cloneDeep(deptList.value[0]['user'].concat(roleList.value));
+  //
+  searchUserList.value.forEach((ele) => {
+    ele.show = true;
+  });
+  // 如果 tags 里存在的值，需要在搜索列表中勾选
+  checkSearchStatus();
 };
 /**
@@ -697,30 +711,25 @@ const onClearSearch = () => {
  * @return {void} No return value.
  */
 const onSearch = () => {
-  // TODO: 获取后台数据
+  // 后台数据集合
-  searchUserList.value = [
+  searchUserList.value = _.cloneDeep(deptList.value[0]['user'].concat(roleList.value));
-    {
+  //
-      id: "user-1-1",
+  searchUserList.value.forEach((ele) => {
-      name: "用户1-1",
+    ele.show = true;
-      checked: false,
+  });
-      disabled: false
-    },
-    {
-      id: "user-1-2",
-      name: "用户1-2",
-      checked: false,
-      disabled: false
-    },
-    {
-      id: "user-1-3",
-      name: "用户1-3",
-      checked: false,
-      disabled: true
-    }
-  ];
   // 如果 tags 里存在的值，需要在搜索列表中勾选
   checkSearchStatus();
 };
+
+const onSearchInput = (val) => {
+  searchUserList.value.forEach((ele) => {
+    if (ele.name.indexOf(val) > -1) {
+      ele.show = true;
+    } else {
+      ele.show = false;
+    }
+  })
+}
 </script>
 <style lang="scss">