新增底部按钮功能

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-05-31 17:09:02
+ * @LastEditTime: 2024-05-31 18:05:23
  * @FilePath: /data-table/src/components/TreeField/index.vue
  * @Description: 树形组件
 -->
@@ -12,9 +12,22 @@
       {{ item.component_props.label }}
     </div>
 
+    <div class="select-tree-box" @click="openTree">
+      <div class="select-tree-item" v-for="(dept) in emitCheckedGroup.dept" :key="dept.id">
+        {{ dept.name }}
+      </div>
+      <div class="select-tree-item" v-for="(role) in emitCheckedGroup.role" :key="role.id">
+        {{ role.name }}
+      </div>
+      <div class="select-tree-item" v-for="(user) in emitCheckedGroup.user" :key="user.id">
+        {{ user.name }}
+      </div>
+    </div>
+
     <van-popup
       v-model:show="showPopover"
       position="bottom"
+      :close-on-click-overlay="false"
       :style="{ height: '90vh' }"
     >
       <div v-if="!is_search" class="search-box" @click="onSearchFocus">
@@ -66,7 +79,7 @@
             :cascade="false"
             :defaultExpandAll="false"
             @checked-change="deptTreeCheckedChange"
-            style=" height: 60vh; overflow: scroll;"
+            style=" height: 55vh; overflow: scroll;"
           >
             <span slot="empty">暂无数据</span>
           </Vtree>
@@ -91,7 +104,7 @@
 
         <div v-if="tabActive === 2" style="padding: 0 0 0 1rem;">
           <van-row gutter="">
-            <van-col span="10" style="border-right: 1px solid #eee; height: 60vh; overflow: scroll;">
+            <van-col span="10" style="border-right: 1px solid #eee; height: 55vh; overflow: scroll;">
               <Vtree
                 ref="userTreeRef"
                 v-model="select_user_value"
@@ -189,6 +202,16 @@
         </van-checkbox-group>
       </div>
 
+      <div style="position: fixed; bottom: 0; left: 0; width: 100%;">
+        <van-row gutter="0">
+          <van-col span="12">
+            <van-button block type="default" @click="onCancelClick">取消</van-button>
+          </van-col>
+          <van-col span="12">
+            <van-button block type="primary" @click="onConfirmClick">确定</van-button>
+          </van-col>
+        </van-row>
+      </div>
     </van-popup>
 
   </div>
@@ -218,8 +241,35 @@ const isGroup = computed(() => {
   return props.item.component_props.is_field_group
 });
 
+onMounted(() => {
+  props.item.value = props.item.component_props.default;
+});
+
+const openTree = () => {
+  showPopover.value = true;
+  // TODO：获取数据
+  nextTick(() => {
+    getDeptTreeData();
+  })
+}
+
+const emitCheckedGroup = ref({
+  dept: [], // 组织结构
+  role: [], // 角色
+  user: [] // 成员
+});
+
+const onCancelClick = () => {
+  showPopover.value = false;
+}
+const onConfirmClick = () => {
+  showPopover.value = false;
+  //
+  emitCheckedGroup.value = _.cloneDeep(checkedGroup.value);
+}
+
 /******* 搜索输入项 *******/
-const showPopover = ref(true); // 显示/隐藏弹框
+const showPopover = ref(false); // 显示/隐藏弹框
 
 const searchInputRef = ref(null);
 const searchValue = ref('');
@@ -345,12 +395,6 @@ const userListReset = () => { // 成员重置列表
 }
 /**************** END *****************/
 
-onMounted(() => {
-  props.item.value = props.item.component_props.default;
-  // TODO：获取数据
-  getDeptTreeData();
-});
-
 /************* 组织结构模块 ***************/
 const select_dept_value = ref(); // 组织结构树形选中值
 
@@ -542,6 +586,29 @@ const onSearchResultClick = (val, evt) => { // 搜索结果集项点击回调
       color: red;
     }
   }
+
+  .select-tree-box {
+    height: 4rem;
+    border: 1px dashed #dfdfdf;
+    margin: 1rem;
+    overflow: scroll;
+    border-radius: 5px;
+    padding: 0.5rem;
+    display: flex;
+    flex-wrap: wrap;
+    .select-tree-item {
+      margin-right: 5px;
+      margin-bottom: 5px;
+      font-size: 0.85rem;
+      padding: 5px 8px;
+      background-color: #C2915F;
+      color: #fff;
+      height: 1.2rem;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
 }
 
 :deep(.van-field__body) {
@@ -570,6 +637,10 @@ const onSearchResultClick = (val, evt) => { // 搜索结果集项点击回调
   background-color: #f8e2cb;
 }
 
+// :deep(.ctree-tree__scroll-area) {
+//   margin-bottom: 2rem;
+// }
+
 .select-box {
   height: 4rem;
   border: 1px dashed #dfdfdf;