联调树形结构组件接口

 /*
  * @Date: 2022-06-17 14:54:29
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2022-11-17 16:00:04
+ * @LastEditTime: 2024-06-05 10:12:06
  * @FilePath: /data-table/src/api/component.js
  * @Description: 组件接口
  */
@@ -9,6 +9,9 @@ import { fn, fetch } from '@/api/fn';
 
 const Api = {
   QUERY_COMPONENT: '/srv/?a=query_component',
+  FLOW_DEPT_LIST: '/srv/?a=flow_setting&t=flow_dept_list',
+  FLOW_ROLE_LIST: '/srv/?a=flow_setting&t=flow_role_list',
+  SEARCH_USER_DEPT_ROLE: '/srv/?a=flow_setting&t=search_user_dept_role',
 }
 
 /**
@@ -18,3 +21,22 @@ const Api = {
  * @param: name 组件名称；条件：模糊查询；
  */
 export const getComponentAPI = (params) => fn(fetch.get(Api.QUERY_COMPONENT, params));
+
+/**
+ * @description: 查询部门列表
+ * @param: form_code 表单code
+ */
+export const getFlowDeptListAPI = (params) => fn(fetch.get(Api.FLOW_DEPT_LIST, params));
+
+/**
+ * @description: 查询角色列表
+ * @param: form_code 表单code
+ */
+export const getFlowRoleListAPI = (params) => fn(fetch.get(Api.FLOW_ROLE_LIST, params));
+
+/**
+ * @description: 查询用户部门角色
+ * @param: form_code 表单code
+ * @param: word 搜索内容
+ */
+export const searchUserDeptRoleAPI = (params) => fn(fetch.get(Api.SEARCH_USER_DEPT_ROLE, params));

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-04 14:02:58
+ * @LastEditTime: 2024-06-05 10:34:32
  * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
  * @Description: 树形组件
 -->
@@ -148,8 +148,9 @@
           @change="onSearchResultChange"
         >
         <div>
-          <p>部门</p>
-          <div>
+          <p style="font-weight: bold;">部门</p>
+          <div style="border-top: 1px solid #eee; margin: 0.5rem 0;"></div>
+          <div style="margin-bottom: 1rem;">
             <van-checkbox
               @click="onSearchResultClick(dept, $event)"
               v-for="(dept) in user_dept_role.dept"
@@ -161,11 +162,13 @@
               shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">
               {{ dept.name }}
             </van-checkbox>
+            <div v-if="!user_dept_role.dept.length" style="color: #999;">暂无数据</div>
           </div>
         </div>
         <div>
           <p>角色</p>
-          <div>
+          <div style="border-top: 1px solid #eee; margin: 0.5rem 0;"></div>
+          <div style="margin-bottom: 1rem;">
             <van-checkbox
               @click="onSearchResultClick(role, $event)"
               v-for="(role) in user_dept_role.role"
@@ -177,11 +180,13 @@
               shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.8rem;">
               {{ role.name }}
             </van-checkbox>
+            <div v-if="!user_dept_role.role.length" style="color: #999;">暂无数据</div>
           </div>
         </div>
         <div>
           <p>成员</p>
-          <div>
+          <div style="border-top: 1px solid #eee; margin: 0.5rem 0;"></div>
+          <div style="margin-bottom: 1rem;">
             <van-checkbox
               @click="onSearchResultClick(user, $event)"
               v-for="(user) in user_dept_role.user"
@@ -193,10 +198,9 @@
               shape="square" icon-size="13px" :checked-color="styleColor.baseColor" style="margin-bottom: 0.5rem;">
               {{ user.name }}
             </van-checkbox>
+            <div v-if="!user_dept_role.user.length" style="color: #999;">暂无数据</div>
           </div>
         </div>
-
-        {{ search_result_checked }}
         </van-checkbox-group>
       </div>
 
@@ -219,22 +223,37 @@
 import { inject, ref } from 'vue'
 import { useCustomFieldValue } from '@vant/use';
 import { styleColor } from "@/constant.js";
+import { getFlowDeptListAPI, getFlowRoleListAPI, searchUserDeptRoleAPI } from "@/api/component.js";
 // 大家可以根据需要是否引入VTreeNode, VTreeSearch, VTreeDrop
 import Vtree, { VTreeNode, VTreeSearch, VTreeDrop } from '@wsfe/vue-tree'
 import '@wsfe/vue-tree/style.css';
-import role_list from './flow_role_list.json'
-import dept_list from './flow_dept_list.json'
+// import role_list from './flow_role_list.json'
+// import dept_list from './flow_dept_list.json'
 import $ from 'jquery';
 import _ from 'lodash';
 
 // 获取父组件传值
 const props = inject('props');
-console.log("🚀 ~ file: MyComponent.vue:227 ~ props:", props);
 
 const emit = defineEmits(["active"]);
 
-onMounted(() => {
-  // TODO：获取已选中数据
+const $route = useRoute();
+const $router = useRouter();
+
+let role_list = [];
+let dept_list = [];
+
+onMounted(async () => {
+  // TAG: 获取后台数据
+  const flowDeptList = await getFlowDeptListAPI({ form_code: $route.query.code });
+  if (flowDeptList.code) {
+    role_list = flowDeptList.data;
+  }
+  const flowRoleList = await getFlowRoleListAPI({ form_code: $route.query.code });
+  if (flowRoleList.code) {
+    dept_list = flowRoleList.data;
+  }
+  // 获取已选中数据
   // 如果有默认值处理
   if (props.value) {
     let default_value = JSON.parse(props.value);
@@ -252,7 +271,7 @@ onMounted(() => {
 
 const openTree = () => {
   showPopover.value = true;
-  // TODO：获取数据
+  // 获取数据
   nextTick(() => {
     getDeptTreeData();
     // 获取已选择的数据
@@ -301,7 +320,11 @@ const is_search = ref(false); // 默认不显示搜索框
  */
 const search_result_checked = ref([]);
 
-const onSearchBlur = () => { // 搜索框失去焦点
+const onSearchBlur = async () => { // 搜索框失去焦点
+  const { code, data } = await searchUserDeptRoleAPI({ form_code: $route.query.code, word: searchValue.value })
+  if (code) {
+    user_dept_role.value = data;
+  }
 }
 
 const onSearchFocus = () => { // 搜索框获取焦点回调
@@ -313,7 +336,6 @@ const onSearchFocus = () => { // 搜索框获取焦点回调
   });
 
   // 如果选中框有值，点击搜索框后把结果选中到搜索结果集里面
-  // TODO：待实现 真实情况应该是请求搜索结果后做
   handleSelectToSearch();
 }
 
@@ -334,6 +356,12 @@ const syncResultToList = () => { // 把弹框结果集同步到树形选择树
 }
 
 const onCloseSearch = () => { // 点击搜索关闭按钮回调
+  searchValue.value = ''; // 清空搜索框
+  user_dept_role.value = {
+    dept: [],
+    role: [],
+    user: []
+  }; // 清空搜索结果
   tabActive.value = 0; // 默认选中组织结构
   is_search.value = false; // 关闭搜索状态
   syncResultToList(); // 同步勾选状态
@@ -504,44 +532,10 @@ const onCheckUserChange = (val, evt) => {
 /**************** END *****************/
 
 /***************** 搜索结果集模块 ********************/
-
-// 模拟数据
 const user_dept_role = ref({
-  "dept": [
-    {
-      "type": "dept",
-      "name": "男10组",
-      "id": 137571
-    }, {
-      "type": "dept",
-      "name": "主持组",
-      "id": 107700
-    }
-  ],
-  "role": [
-    {
-    "type": "role",
-    "name": "八关斋戒",
-    "id": 624337
-    },
-    {
-      "id": 82983,
-      "name": "场地管理",
-      "type": "role"
-    }
-  ],
-  "user": [
-    {
-      "id": 137918,
-      "name": "10组寝室长",
-      "type": "user"
-    },
-    {
-      "id": 137919,
-      "name": "11组寝室长",
-      "type": "user"
-    }
-  ]
+  dept: [],
+  role: [],
+  user: []
 });
 
 const onSearchResultChange = (val) => { // 监听搜索结果集点击回调，结果集为选中项
@@ -675,4 +669,10 @@ useCustomFieldValue(() => tree_select_value.value);
     align-items: center;
   }
 }
+
+.search-container {
+  margin: 1rem 5px;
+  height: 60vh;
+  overflow: scroll;
+}
 </style>