agilebuilder-ui 1.1.46 → 1.1.48-rc1

package/packages/workgroup-tree-inline/src/workgroup-tree-inline.vue

@@ -3,7 +3,7 @@
     <el-container style="height: 395px">
       <el-aside width="430px">
         <el-container style="height: 390px">
-          <el-header style="text-align: right; font-size: 12px">
+          <el-header style="text-align: right; font-size: 12px; height: 35px">
             <el-autocomplete
               v-model="filterText"
               :fetch-suggestions="querySearch"
@@ -20,44 +20,48 @@
             </el-autocomplete>
           </el-header>
           <el-main>
-            <div
-              v-if="!searchValue"
-              style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
-            >
-              <el-tree
-                ref="workgroupTree"
-                :filter-node-method="filterNode"
-                :load="loadNode"
-                :props="defaultProps"
-                :show-checkbox="multiple"
-                lazy
-                node-key="id"
-                @check="handleCheckNode"
-                @node-click="handleNodeClick"
+            <template v-if="!searchValue">
+              <div
+                v-if="canShowOrgTree"
+                style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
               >
-                <template #default="{ node, data }">
-                  <span>
-                    <el-icon>
-                      <Menu v-if="node.data.id === -1" />
-                      <Calendar v-else />
-                    </el-icon>
-                    <span
-                      :class="
-                        data.nodeType &&
-                        data.nodeType === 'WORKGROUP' &&
-                        searchValue &&
-                        data.name.indexOf(searchValue) > -1
-                          ? 'searchResult'
-                          : ''
-                      "
-                      :title="node.label"
-                    >
-                      {{ node.label }}
+                <el-tree
+                  ref="workgroupTree"
+                  :filter-node-method="filterNode"
+                  :load="loadNode"
+                  :props="defaultProps"
+                  :show-checkbox="multiple"
+                  lazy
+                  node-key="id"
+                  @check="handleCheckNode"
+                  @node-click="handleNodeClick"
+                >
+                  <template #default="{ node, data }">
+                    <span>
+                      <el-icon>
+                        <Menu v-if="node.data.id === -1" />
+                        <Calendar v-else />
+                      </el-icon>
+                      <span
+                        :class="
+                          data.nodeType &&
+                          data.nodeType === 'WORKGROUP' &&
+                          searchValue &&
+                          data.name.indexOf(searchValue) > -1
+                            ? 'searchResult'
+                            : ''
+                        "
+                        :title="node.label"
+                      >
+                        {{ node.label }}
+                      </span>
                     </span>
-                  </span>
-                </template>
-              </el-tree>
-            </div>
+                  </template>
+                </el-tree>
+              </div>
+              <!-- 暂无信息 -->
+              <EmptyState v-else style="width: 100%; height: 100%" />
+            </template>
             <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
               <workgroup-result
                 ref="workgroupResult"
@@ -116,7 +120,7 @@ import localStorage from '../../../src/utils/local-storage'
 import utils from '../../utils/utils'
 import workgroupTreeService from './workgroup-tree-service'
 import WorkgroupResult from './search-result.vue'
-
+import EmptyState from '../../empty-state/index.vue'
 export default {
   data() {
     return {
@@ -145,12 +149,14 @@ export default {
       selectWorkgroupData: null,
       // 公司根节点信息
       tenantInfo: {},
-      ElIconSearch
+      ElIconSearch,
+      canShowOrgTree: false
     }
   },
   name: 'InlineWorkgroupTree',
   components: {
-    WorkgroupResult
+    WorkgroupResult,
+    EmptyState
   },
   props: {
     // 是否是多选树，默认是true
@@ -195,6 +201,9 @@ export default {
     }
   },
   created() {
+    utils.canShowOrgTree().then((showOrgTree) => {
+      this.canShowOrgTree = showOrgTree
+    })
     if (this.multiple) {
       this.initSelectGroups(this.searchField, this.selectGroupInfo, this.separator).then((selectGroups) => {
         if (selectGroups) {
@@ -537,7 +546,7 @@ export default {
 }
 </script>
 
-<style>
+<style scoped>
 .searchResult {
   color: red;
 }

package/packages/workgroup-tree-mobile/src/workgroup-tree-inline-app.vue

@@ -43,7 +43,9 @@
       </el-row>
     </el-card>
     <el-card class="card-content org-tree" style="overflow: auto">
+      <el-empty v-if="!departments.length" :image="noMessageImage"> </el-empty>
       <el-tree
+        v-else
         ref="orgTreeRef"
         :data="departments"
         :show-checkbox="multiple"
@@ -63,14 +65,14 @@
         </template>
       </el-tree>
     </el-card>
-    <el-card class="card-footer" style="height: 40px">
+    <el-card class="card-footer">
       <div style="display: flex">
         <div class="select-result" @click="showResult">
           <!-- 已选择:6人,其中有一个部门(含子部门) -->
           <span v-if="multiple" @click="showResult">
             <span v-if="selectDepts.length > 0">
               {{ $t('departmentTreeInline.selectResultInfoHasSelect')
-              }}{{ $t('departmentTreeInline.workgroupTree', { num: selectDepts.length }) }}
+              }}{{ $t('workgroupTree.selectResultInfo', { num: selectDepts.length }) }}
               <span style="padding-left: 10px"
                 ><el-icon><ArrowUpBold /></el-icon
               ></span>
@@ -97,6 +99,8 @@ import { resizeScrollTargetHeightUtil, getDeptNamePath } from '../../utils/organ
 import deptResult from './dept-result.vue'
 import { ElMessage } from 'element-plus'
 import { useI18n } from 'vue-i18n'
+import utils from '../../utils/utils'
+import noMessageImage from '../../../src/assets/nonemessage.png'
 const props = defineProps<{
   // 是否是多选树，默认是true
   multiple: {
@@ -149,6 +153,7 @@ let searchParam = ref({
   departmentInfo: null
 })
 const { t } = useI18n()
+
 onMounted(() => {
   initSelectGroups(props.searchField, props.selectWorkgroupInfo, props.separator).then((departments) => {
     selectDepts.value = departments
@@ -167,9 +172,15 @@ function getTenantInfo() {
 }
 
 function getTenantChildrenDept() {
-  getTenantChildren(props.branchInfo, tenantNodeId).then((children) => {
-    departments.value = children
-    checkedDeptDefault(selectDepts.value, defaultCheckedKeys.value)
+  utils.canShowOrgTree().then((showOrgTree) => {
+    if (showOrgTree) {
+      getTenantChildren(props.branchInfo, tenantNodeId).then((children) => {
+        departments.value = children
+        checkedDeptDefault(selectDepts.value, defaultCheckedKeys.value)
+      })
+    } else {
+      departments.value = []
+    }
   })
 }
 

package/packages/workgroup-user-tree-inline/src/search-result.vue

@@ -209,7 +209,8 @@ export default {
 		},
 		// 添加工作组
 		addWorkgroupUser(index, row) {
-			$emit(this, 'addWorkgroupUser', index, row)
+			// JSON.parse(JSON.stringify(row)) 转换对象是为了解决添加数据时浏览器崩溃
+            $emit(this, 'addWorkgroupUser', index, JSON.parse(JSON.stringify(row)))
 		},
 		// 选中工作组
 		selectWorkgroupUser(selectVal) {

package/packages/workgroup-user-tree-inline/src/workgroup-tree-inline-service.js

@@ -132,27 +132,29 @@ const workgroupTreeInlineService = {
       .then((data) => {
         resolve(data)
         // 更新当前点击的节点的子节点
-        this.$refs.workgroupUserTree.updateKeyChildren(parentNodeId, data)
-        if (parentId === 0) {
-          // 初始化树时，展开公司节点
-          const tenantData = data[0].data
-          this.tenantInfo = JSON.parse(tenantData)
-          this.containBranch = data[0].containBranch
-          // 加载整个组织结构树时，展开公司节点
-          this.loadWorkgroup(this.tenantNodeId, this.tenantNodeId + '')
-        }
-        if (this.isClickNode) {
-          // 表示点击工作组节点选中时展开
-          this.isClickNode = false
-          this.checkedNode(node.data)
-        } else {
-          // 表示是点击三角展开节点时
-          if (checkedKeys && checkedKeys.indexOf(parentNodeId) > -1) {
-            // 点击公司名称前的三角标识展开节点时，保持当前节点的选中状态
-            // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
-            this.checkedNode(node.data)
+          if (this.$refs.workgroupUserTree) {
+            this.$refs.workgroupUserTree.updateKeyChildren(parentNodeId, data)
+            if (parentId === 0) {
+              // 初始化树时，展开公司节点
+              const tenantData = data[0].data
+              this.tenantInfo = JSON.parse(tenantData)
+              this.containBranch = data[0].containBranch
+              // 加载整个组织结构树时，展开公司节点
+              this.loadWorkgroup(this.tenantNodeId, this.tenantNodeId + '')
+            }
+            if (this.isClickNode) {
+              // 表示点击工作组节点选中时展开
+              this.isClickNode = false
+              this.checkedNode(node.data)
+            } else {
+              // 表示是点击三角展开节点时
+              if (checkedKeys && checkedKeys.indexOf(parentNodeId) > -1) {
+                // 点击公司名称前的三角标识展开节点时，保持当前节点的选中状态
+                // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
+                this.checkedNode(node.data)
+              }
+            }
           }
-        }
       })
   },
   // 加载当前节点的子节点
@@ -164,9 +166,11 @@ const workgroupTreeInlineService = {
     this.$http
       .post(window.$vueApp.config.globalProperties.baseAPI + '/component/organization-trees/workgroup-users', param)
       .then((children) => {
-        this.$refs.workgroupUserTree.updateKeyChildren(parentNodeId, children)
-        if (this.$refs.workgroupUserTree.store.nodesMap[parentNodeId]) {
-          this.$refs.workgroupUserTree.store.nodesMap[parentNodeId].expanded = true
+        if(this.$refs.workgroupUserTree) {
+          this.$refs.workgroupUserTree.updateKeyChildren(parentNodeId, children)
+          if (this.$refs.workgroupUserTree.store.nodesMap[parentNodeId]) {
+            this.$refs.workgroupUserTree.store.nodesMap[parentNodeId].expanded = true
+          }
         }
         if (isSearch) {
           // 查询时处理
@@ -176,7 +180,9 @@ const workgroupTreeInlineService = {
           }
           if (this.allExpandNodeIds.length === this.allSearchNodeIds.length) {
             // 表示所有节点已展开，执行树的过滤方法
-            this.$refs.workgroupUserTree.filter(searchValue)
+            if(this.$refs.workgroupUserTree) {
+                this.$refs.workgroupUserTree.filter(searchValue)
+            }
             this.allExpandNodeIds = []
             this.allSearchNodeIds = []
           }

package/packages/workgroup-user-tree-inline/src/workgroup-user-tree-inline.vue

@@ -21,41 +21,45 @@
             </el-autocomplete>
           </el-header>
           <el-main style="padding: 10px">
-            <div
-              v-if="!searchValue"
-              style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
-            >
-              <el-tree
-                ref="workgroupUserTree"
-                :filter-node-method="filterNode"
-                :load="loadNode"
-                :props="defaultProps"
-                :show-checkbox="multiple"
-                lazy
-                node-key="nodeId"
-                @check="handleCheckNode"
-                @node-click="handleNodeClick"
+            <template v-if="!searchValue">
+              <div
+                v-if="canShowOrgTree"
+                style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
               >
-                <template #default="{ node, data }">
-                  <span>
-                    <el-icon>
-                      <Menu v-if="node.data.id === -1" />
-                      <Calendar v-else />
-                    </el-icon>
-                    <span
-                      :class="
-                        data.nodeType && data.nodeType === 'USER' && searchValue && filterUserVal(data, searchValue)
-                          ? 'searchResult'
-                          : ''
-                      "
-                      :title="node.label"
-                    >
-                      {{ node.label }}
+                <el-tree
+                  ref="workgroupUserTree"
+                  :filter-node-method="filterNode"
+                  :load="loadNode"
+                  :props="defaultProps"
+                  :show-checkbox="multiple"
+                  lazy
+                  node-key="nodeId"
+                  @check="handleCheckNode"
+                  @node-click="handleNodeClick"
+                >
+                  <template #default="{ node, data }">
+                    <span>
+                      <el-icon>
+                        <Menu v-if="node.data.id === -1" />
+                        <Calendar v-else />
+                      </el-icon>
+                      <span
+                        :class="
+                          data.nodeType && data.nodeType === 'USER' && searchValue && filterUserVal(data, searchValue)
+                            ? 'searchResult'
+                            : ''
+                        "
+                        :title="node.label"
+                      >
+                        {{ node.label }}
+                      </span>
                     </span>
-                  </span>
-                </template>
-              </el-tree>
-            </div>
+                  </template>
+                </el-tree>
+              </div>
+              <!-- 暂无信息 -->
+              <EmptyState v-else style="width: 100%; height: 100%" />
+            </template>
             <div v-if="searchValue && searchValue.length > 0" style="height: 100%; overflow: hidden">
               <workgroup-user-result
                 ref="workgroupUserResult"
@@ -114,7 +118,7 @@ import localStorage from '../../../src/utils/local-storage'
 import utils from '../../utils/utils'
 import workgroupTreeInlineService from './workgroup-tree-inline-service'
 import WorkgroupUserResult from './search-result.vue'
-
+import EmptyState from '../../empty-state/index.vue'
 export default {
   data() {
     return {
@@ -153,12 +157,14 @@ export default {
       selectNodeInfo: null,
       // 公司根节点信息
       tenantInfo: {},
-      ElIconSearch
+      ElIconSearch,
+      canShowOrgTree: false
     }
   },
   name: 'InlineWorkgroupUserTree',
   components: {
-    WorkgroupUserResult
+    WorkgroupUserResult,
+    EmptyState
   },
   props: {
     // 是否是多选树，默认是true
@@ -198,6 +204,9 @@ export default {
     }
   },
   created() {
+    utils.canShowOrgTree().then((showOrgTree) => {
+      this.canShowOrgTree = showOrgTree
+    })
     if (this.multiple) {
       this.initSelectUsers(this.searchField, this.selectUserInfo, this.separator).then((users) => {
         if (users) {
@@ -291,7 +300,10 @@ export default {
       // // this.searchParam.userField = this.searchField
       // // 后台查询部门，并拼接树节点
       // this.filterAppendNodes(value)
-      this.$refs.workgroupUserTree.filter(value)
+      
+      if(this.$refs.workgroupUserTree) {
+        this.$refs.workgroupUserTree.filter(value)
+      }
     },
     // 点击查询按钮调用的方法
     clickSearch() {