✨ feat(组织结构组件): tab根据后端字段控制显示，详情可点击查看

 <!--
  * @Date: 2022-08-29 14:31:20
  * @LastEditors: hookehuyr hookehuyr@gmail.com
- * @LastEditTime: 2024-06-17 09:46:57
+ * @LastEditTime: 2024-06-26 10:02:40
  * @FilePath: /data-table/src/components/OrgPickerField/MyComponent.vue
  * @Description: 树形组件
 -->
 <template>
   <div class="tree-field-page">
     <div class="select-tree-box" @click="openTree">
-      <div class="select-tree-item" v-for="(dept) in emitCheckedGroup.dept" :key="dept.id">
+      <div class="select-tree-item" v-for="(dept) in emitCheckedGroup.dept" :key="dept.id" @click="clickNode(dept)">
         {{ dept.name }}
       </div>
-      <div class="select-tree-item" v-for="(role) in emitCheckedGroup.role" :key="role.id">
+      <div class="select-tree-item" v-for="(role) in emitCheckedGroup.role" :key="role.id" @click="clickNode(role)">
         {{ role.name }}
       </div>
-      <div class="select-tree-item" v-for="(user) in emitCheckedGroup.user" :key="user.id">
+      <div class="select-tree-item" v-for="(user) in emitCheckedGroup.user" :key="user.id" @click="clickNode(user)">
         {{ user.name }}
       </div>
     </div>
@@ -56,9 +56,10 @@
 
       <div v-show="!is_search" class="tab-tree-container">
         <van-tabs ref="tabRef" :color="styleColor.baseColor" v-model:active="tabActive" @click-tab="onClickTab" style="margin-bottom: 1rem;">
-          <van-tab title="组织结构" :name="0"></van-tab>
+          <!-- <van-tab title="组织结构" :name="0"></van-tab>
           <van-tab title="角色" :name="1"></van-tab>
-          <van-tab title="成员" :name="2"></van-tab>
+          <van-tab title="成员" :name="2"></van-tab> -->
+          <van-tab v-for="(tab, index) in tabList" :key="index" :title="tab.title" :name="tab.name"></van-tab>
         </van-tabs>
 
         <div v-show="tabActive === 0" style="padding: 0 0 0 1rem;">
@@ -232,6 +233,7 @@ import '@wsfe/vue-tree/style.css';
 // import dept_list from './flow_dept_list.json'
 import $ from 'jquery';
 import _ from 'lodash';
+import { showDialog } from 'vant';
 
 // 获取父组件传值
 const props = inject('props');
@@ -244,6 +246,32 @@ const $router = useRouter();
 let role_list = [];
 let dept_list = [];
 
+// 处理Tab显示问题
+// TODO：等待后台数据
+const tree_tabs = ['dept', 'role', 'user'];
+const tabList = computed(() => {
+  let arr = [];
+  if (tree_tabs.indexOf('dept') !== -1) {
+    arr.push({
+      title: '组织结构',
+      name: 0
+    })
+  }
+  if (tree_tabs.indexOf('role') !== -1) {
+    arr.push({
+      title: '角色',
+      name: 1
+    })
+  }
+  if (tree_tabs.indexOf('user') !== -1) {
+    arr.push({
+      title: '成员',
+      name: 2
+    })
+  }
+  return arr;
+});
+
 onMounted(async () => {
   // TAG: 获取后台数据
   const flowDeptList = await getFlowDeptListAPI({ form_code: $route.query.code });
@@ -291,6 +319,19 @@ const openTree = () => {
   });
 }
 
+// TODO：等待后台数据显示更多详情字段
+const clickNode = (node) => { // 点击显示选择详情
+  if (!props.component_props.readonly) return false; // 非只读不予许操作
+  console.warn(node);
+  showDialog({
+    title: '详情',
+    message: `${node.id}-${node.name}-${node.type}`,
+    confirmButtonColor: styleColor.baseColor
+  }).then(() => {
+    // on close
+  });
+}
+
 const emitCheckedGroup = ref({
   dept: [], // 组织结构
   role: [], // 角色