agilebuilder-ui 1.0.76 → 1.0.78

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

@@ -0,0 +1,375 @@
+<template>
+  <div>
+    <el-card class="card-content" style="height: 50px">
+      <el-row class="item-row item-row-all">
+        <el-col style="width: 100%;">
+          <div style="display: flex">
+            <div style="flex: 0 0 20%;text-align:left">
+              <el-checkbox  v-if="multiple" v-model="checkAll" :label="$t('departmentTreeInline.allCheck')" value="all" @change="changeAllCheck" />
+            </div>
+            <div style="flex: 0 0 80%;text-align:right">
+              <el-input v-model="searchParam.searchValue" :placeholder="$t('departmentTreeInline.pleaseInputNameOrCode')" @clear="filterAppendNodes" @keyup.enter="filterAppendNodes" @blur="filterAppendNodes"  clearable>
+                  <template v-slot:suffix>
+                    <el-icon @click="filterAppendNodes"><Search /></el-icon>
+                </template>
+              </el-input>
+            </div>
+          </div>
+          </el-col>
+      </el-row>
+    </el-card>
+    <el-card  v-if="tenantName" class="card-content"  style="height: 40px">
+      <el-row class="item-row item-row-all">
+        <el-col class="item-label dept-path">
+          <el-breadcrumb separator="/">
+              <el-breadcrumb-item>
+                  <span>{{tenantName}}</span>
+              </el-breadcrumb-item>
+          </el-breadcrumb>
+        </el-col>
+      </el-row>
+    </el-card>
+    <el-card class="card-content org-tree" style="overflow: auto;">
+      <el-tree
+      ref="orgTreeRef"
+      :data="departments"
+      :show-checkbox="multiple"
+      node-key="nodeId"
+      check-on-click-node
+      :default-checked-keys="defaultCheckedKeys"
+      @check-change="handleCheckNode"
+      @node-click="handleClickNode"
+    >
+      <template #default="{ node, data }">
+        <div class="item-row">
+          <div class="item-label">{{ data.name }}</div>
+          <!-- <div v-if="!data.leaf" class="item-side" @click="loadChildren(data,false)">
+           <el-icon><ArrowRight /></el-icon>
+          </div> -->
+        </div>
+      </template>
+    </el-tree>
+    </el-card>
+    <el-card  class="card-footer" style="height: 40px">
+    <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 })}}
+            <span style="padding-left: 10px"><el-icon><ArrowUpBold /></el-icon></span>
+          </span>
+        </span>
+        <span v-else-if="selectDepts.length > 0">
+          {{$t('departmentTreeInline.selectResultInfoHasSelect')}}{{selectDepts[0].name }}
+        </span>
+      </div>
+      <div class="button-area">
+        <el-button size="large" type="primary" @click="saveDept">{{$t('imatrixUIPublicModel.sure')}}</el-button>
+      </div>
+    </div>
+    </el-card>
+    <deptResult ref="deptResultRef" :selectDepts="selectDepts" @removeDept="removeResultDept"/>
+  </div>
+</template>
+
+<script  setup lang="ts">
+import { reactive,ref,onMounted, defineEmits,Ref } from 'vue'
+import {
+  ArrowRight,
+  Search,
+  ArrowUpBold
+} from '@element-plus/icons-vue'
+import {getTenant, getTenantChildren, checkedDeptDefault, initSelectGroups} from './workgroup-tree-service.ts'
+import {resizeScrollTargetHeightUtil, getDeptNamePath} from '../../utils/organization.ts'
+import deptResult from './dept-result.vue'
+import {ElMessage} from 'element-plus'
+import {useI18n} from "vue-i18n"
+const props = defineProps<{
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true,
+    },
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    branchInfo: {
+      type: Array<any>,
+      default: null,
+    },
+    // 多选部门树时，已选择部门id或部门名称或编码集合，多个之间以逗号隔开
+    selectWorkgroupInfo: {
+      type: [String, Number],
+      default: null,
+    },
+    // 移除部门时，部门属性名称：id、name、code，默认是id
+    searchField: {
+      type: String,
+      default: 'code',
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    }
+  }>()
+const emits = defineEmits(["close"])
+const orgTreeRef = ref(null)
+let tenantInfo = ref(null)
+let containBranch = ref(false)
+let tenantName = ref(null)
+let tenantNodeId = -1
+let departments = ref([])
+let checkedKeys = ref([])
+let selectDepts = ref([])
+let selectDeptNodeIds = ref([])
+let clickDepts = ref([])
+let defaultCheckedKeys = ref([])
+let deptResultRef:Ref<any> = ref(null)
+let checkAll = ref(false)
+let searchParam = ref({
+  searchValue: null,
+  treeType: 'GROUP_TREE',
+  departmentInfo: null
+})
+const {t} = useI18n()
+onMounted(()=>{
+  initSelectGroups(props.searchField, props.selectWorkgroupInfo,  props.separator ).then((departments)=>{
+    selectDepts.value = departments
+    getTenantInfo()
+  })
+  resizeScrollTargetHeight()
+})
+function getTenantInfo() {
+  getTenant().then(data=>{
+    const tenantData = data[0].data
+    tenantInfo.value = JSON.parse(tenantData)
+    containBranch.value = data[0].containBranch
+    tenantName.value = data[0].name
+    getTenantChildrenDept()
+  })
+}
+
+function getTenantChildrenDept() {
+    getTenantChildren(props.branchInfo, tenantNodeId).then(children=>{
+        departments.value = children
+        checkedDeptDefault(selectDepts.value, defaultCheckedKeys.value)
+    })
+}
+
+function  resizeScrollTargetHeight () {
+    const scrollTarget = document.querySelector('.org-tree')
+    let height = resizeScrollTargetHeightUtil(scrollTarget)
+    const titleArea = 110
+    const deptPathArea = 60
+    const allCheckArea = 60
+    const buttonArea = 60
+    height = height - titleArea - deptPathArea - allCheckArea - buttonArea
+    scrollTarget['style'].height = height + 'px'
+    scrollTarget['style'].minHeight =  '300px'
+    // scrollTarget.style.maxHeight = height + 'px'
+}
+// 点击复选框时处理
+function handleCheckNode(data, check, isChildrenCheck) {
+  if(props.multiple){
+    if(check) {
+      // 表示选择节点时
+      addToSelectDept(data)
+    } else {
+      // 表示取消选择
+      removeSelectDept(data)
+    }
+  }
+}
+
+function handleClickNode(data, node, treenode, events) {
+  if(!props.multiple && data.nodeType && data.nodeType === 'WORKGROUP') {
+    selectDepts.value = [data]
+  }
+}
+
+
+function addToSelectDept(dept) {
+  console.log('addToSelectDept---selectDepts.value=', selectDepts.value, 'dept=', dept)
+    if(dept.nodeType && dept.nodeType === 'WORKGROUP') {
+      const filterValue = selectDepts.value.filter(item=> item.nodeId === dept.nodeId)
+      if(!filterValue || filterValue.length === 0) {
+        // 表示集合中没有该记录，需要记录到结果集合中
+        selectDepts.value.push(JSON.parse(JSON.stringify(dept)))
+      }
+    }
+}
+
+function removeSelectDept(dept) {
+    const index = selectDepts.value.findIndex(selectItem=> selectItem.nodeId === dept.nodeId)
+  console.log('removeSelectDept---selectDepts.value=', selectDepts.value, 'dept=', dept, 'index=', index)
+    if(index !== undefined && index !== -1) {
+      // 删除指定元素
+      selectDepts.value.splice(index, 1)
+    }
+    checkAll.value =false
+}
+function changeAllCheck(value: boolean) {
+  console.log('changeCheck====value=', value)
+  if(props.multiple) {
+    // 表示是复选组织树
+    if(value){
+      // 表示全选时
+      const allNodeIds = departments.value.map((item)=>{
+          return item['nodeId'];
+      })
+      orgTreeRef.value.setCheckedKeys(allNodeIds, false)
+      departments.value.forEach(item=>{
+        addToSelectDept(item)
+      })
+    } else {
+      // 表示取消全选时
+      departments.value.forEach(item=>{
+       removeSelectDept(item)
+      })
+      orgTreeRef.value.setCheckedKeys([], false)
+    }
+  }
+}
+
+// function loadChildrenDept(dept) {
+//   loadDepartment(dept.id).then(children=>{
+//     departments.value = children
+//     checkedDeptDefault(selectDepts.value,  defaultCheckedKeys.value)
+
+//   })
+// }
+// function  loadChildren (dept, isBreadcrumb) {
+//     clickDepts.value.push(dept)
+//     loadChildrenDept(dept)
+// }
+
+// function clickBreadcrumb(item, isTenant, index) {
+//   if(isTenant) {
+//     // 表示点击的时公司节点
+//     clickDepts.value = []
+//     getTenantChildrenDept()
+//   } else {
+//     // 表示点击的是部门节点
+//     // 删除指定元素
+//     clickDepts.value.splice(index+1, clickDepts.value.length - (index + 1) )
+//     loadChildrenDept(item)
+//   }
+// }
+
+function showResult() {
+  deptResultRef.value.showResult()
+}
+
+function removeResultDept(dept) {
+  const removeDeptInDepts = selectDepts.value.filter(item=>item.nodeId === dept.nodeId)
+    console.log('removeResultDept-----removeDeptInDepts=', removeDeptInDepts)
+  if(removeDeptInDepts && removeDeptInDepts.length > 0) {
+    // departments结果存在当前移除的节点时，check-change事件会走removeSelectDept的逻辑
+    const selectNodeIds = []
+    selectDepts.value.forEach(item=>{
+      if(item.nodeId !== dept.nodeId) {
+        selectNodeIds.push(item.nodeId)
+      }
+    })
+    console.log('removeResultDept-----selectNodeIds=', selectNodeIds)
+    orgTreeRef.value.setCheckedKeys(selectNodeIds, true)
+  }
+  removeSelectDept(dept)
+}
+
+function saveDept() {
+      if (props.multiple) {
+        let leafSelectNodeInfo = {
+          ids: [],
+          names: [],
+          codes: [],
+          workgroups: []
+        }
+        // const parentIds = []
+        selectDepts.value.forEach(node => {
+          // node.data是部门对象的json字符串信息，通过JSON.parse(node.data)将json字符串转为对象
+          let departmentData
+          // 点开initSelectDepts 查询的数据只有一层
+          if (node.data !== null && node.data !== undefined) {
+            departmentData = JSON.parse(node.data)
+          } else {
+            departmentData = node
+          }
+          addSelectedDepartmentInfo(leafSelectNodeInfo, node, departmentData)
+        })
+        let selectNodeInfo = {
+          ids: [],
+          names: [],
+          codes: [],
+          workgroups: []
+        }
+        Object.assign(selectNodeInfo, leafSelectNodeInfo)
+        if (selectNodeInfo.ids.length > 0) {
+          emits('close', selectNodeInfo)
+        } else {
+          ElMessage({
+            message: t('imatrixUIMessage.pleaseSelectDepartment'),
+            type: 'warning',
+          })
+        }
+      } else {
+        const dept = selectDepts.value[0]
+        const department = JSON.parse(dept.data)
+        const showName = dept.name
+        // if (this.containBranch && dept.branchName) {
+        // // 如果包含分支机构，则拼接分支机构名称
+        //   name = name + '（' + dept.branchName + '）'
+        // }
+        department.tenantName = tenantInfo.value.tenantName
+        department.tenantCode = tenantInfo.value.code
+        const selectNodeInfo = {
+          id: dept.id,
+					name: showName,
+					code: department.code,
+					containBranch: containBranch.value,
+					workgroup: department
+        }
+        emits('close', selectNodeInfo)
+      }
+    }
+    // 将选中的部门节点添加到结果集合中
+ function   addSelectedDepartmentInfo (result, node, department) {
+      result.ids.push(node.id)
+      result.codes.push(department.code)
+      result.containBranch = containBranch.value
+      department.tenantCode = tenantInfo.value.code
+      department.tenantName = tenantInfo.value.tenantName
+      result.workgroups.push(department)
+      const showName = department.name
+      // if (this.containBranch && node.branchName) {
+      //   // 如果包含分支机构，则拼接分支机构名称
+      //   name = name + '（' + node.branchName + '）'
+      // }
+      result.names.push(showName)
+    }
+
+  function filterAppendNodes ( ) {
+    if (searchParam.value.searchValue) {
+      searchParam.value.searchValue = searchParam.value.searchValue.trim()
+      searchParam.value.departmentInfo = props.branchInfo
+      window['$vueApp'].config.globalProperties.$http.post(window['$vueApp'].config.globalProperties.baseAPI + '/component/organization-trees/search-mobile-workgroups', searchParam.value).then(result => {
+        if (result) {
+          if (result.length === 0) {
+            ElMessage({
+              message: t('imatrixUIMessage.queryResultIsEmpty'),
+              type: 'warning',
+            })
+          }
+          departments.value = result
+        } else {
+          ElMessage({
+            message: t('imatrixUIMessage.queryResultIsEmpty'),
+            type: 'warning',
+          })
+        }
+      })
+    } else {
+     getTenantChildrenDept()
+    }
+}
+</script>

package/packages/workgroup-tree-mobile/src/workgroup-tree-service.ts

@@ -0,0 +1,62 @@
+export function getTenant () {
+  const parentId = 0
+  return window['$vueApp'].config.globalProperties.$http.get(window['$vueApp'].config.globalProperties.baseAPI + '/component/organization-trees/departments/' + parentId)
+}
+
+// 获得公司节点的孩子节点
+export function getTenantChildren (branchInfo, tenantNodeId ) {
+  // 加载整个组织结构树时，展开公司节点
+  return loadGroupNodes(branchInfo, tenantNodeId)
+  
+}
+
+  // 加载当前节点的子节点
+   function loadGroupNodes (branchInfo, parentId) {
+    const param = {
+      parentId: parentId,
+      departmentInfo: branchInfo,
+    }
+    return new Promise((resolve,reject)=>{
+       window['$vueApp'].config.globalProperties.$http.post(
+        window.$vueApp.config.globalProperties.baseAPI +
+          '/component/organization-trees/workgroups',
+        param
+      )
+      .then(children => {
+        resolve(children)
+      })
+    })
+  }
+
+  export function checkedDeptDefault (selectDepts, defaultCheckedKeys) {
+    defaultCheckedKeys = []
+    selectDepts.forEach(dept => {
+      defaultCheckedKeys.push(dept.nodeId)
+    })
+  }
+  export function initSelectGroups(searchField, selectGroupInfo, separator) {
+    return new Promise((resolve, reject) => {
+      if (!searchField) {
+        resolve([])
+      } else if (!selectGroupInfo) {
+        resolve([])
+      } else {
+        window['$vueApp'].config.globalProperties.$http
+          .get(
+            window.$vueApp.config.globalProperties.baseAPI +
+              '/component/organization-trees/select-workgroups?searchField=' +
+              searchField +
+              '&selectWorkgroupInfo=' +
+              selectGroupInfo +
+              '&separator=' +
+              separator
+          )
+          .then((groups) => {
+            resolve(groups)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      }
+    })
+  }

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

@@ -1,6 +1,16 @@
 <template>
 	<div>
+		<WorkgroupMobileUserTree
+			v-if="isMobile"
+			:multiple="multiple"
+			:branch-info="branchInfo"
+			:search-field="searchField"
+			:select-user-info="selectUserInfo"
+			:separator="separator"
+			@close="result"
+		/>
 		<el-dialog
+			v-else
 				:close-on-click-modal="false"
 				:title="myTitle"
 				:width="multiple ? '60%' : '40%'"
@@ -38,11 +48,14 @@
 <script>
 import {$on, $off, $once, $emit} from '../../utils/gogocodeTransfer'
 import InlineWorkgroupUserTree from '../../workgroup-user-tree-inline/src/workgroup-user-tree-inline.vue'
+import WorkgroupMobileUserTree from '../../workgroup-user-tree-mobile/src/workgroup-user-tree-app.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'WorkgroupUserTree',
 	components: {
 		InlineWorkgroupUserTree,
+		WorkgroupMobileUserTree
 	},
 	props: {
 		// 是否是多选树，默认是true
@@ -86,8 +99,10 @@ export default {
 		if (this.title) {
 			myTitle = this.title
 		}
+		const isMobile = isMobileBrowser()
 		return {
 			myTitle,
+			isMobile
 		}
 	},
 	methods: {

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

@@ -235,5 +235,32 @@ const workgroupTreeInlineService = {
         }
       })
   },
+  // 根据指定用户信息获得用户集合
+  initSelectUsers(searchField, selectUserInfo, separator) {
+    return new Promise((resolve, reject) => {
+      if (!searchField) {
+        resolve([])
+      } else if (!selectUserInfo) {
+        resolve([])
+      } else {
+        window.$vueApp.config.globalProperties.$http
+          .get(
+            window.$vueApp.config.globalProperties.baseAPI +
+              '/component/organization-trees/select-users?searchField=' +
+              searchField +
+              '&selectUserInfo=' +
+              selectUserInfo +
+              '&separator=' +
+              separator
+          )
+          .then((users) => {
+            resolve(users)
+          })
+          .catch((error) => {
+            reject(error)
+          })
+      }
+    })
+  }
 }
 export default workgroupTreeInlineService

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

@@ -201,6 +201,17 @@ export default {
 		},
 	},
 	created() {
+		if(this.multiple){
+			this.initSelectUsers(
+					this.searchField,
+					this.selectUserInfo,
+					this.separator
+			).then((users) => {
+				if (users) {
+					this.selectResult = users
+				}
+			})
+		}
 	},
 	mounted() {
 		var searchWorkgroup = localStorage.getObject(this.searchStoreKey)

package/packages/workgroup-user-tree-mobile/index.js

@@ -0,0 +1,6 @@
+import WorkgroupUserTreeMobile from './src/workgroup-user-tree-app.vue'
+WorkgroupUserTreeMobile.install = function (Vue) {
+  Vue.component('WorkgroupUserTreeMobile', WorkgroupUserTreeMobile)
+}
+
+export default WorkgroupUserTreeMobile

package/packages/workgroup-user-tree-mobile/src/dept-path.vue

@@ -0,0 +1,36 @@
+
+<template>
+    <el-breadcrumb separator="/">
+        <el-breadcrumb-item>
+            <span class="breadcrumb-label-link" v-if="clickDepts.length > 0" @click="clickBreadcrumb(null, true)">{{myTenantName}}</span>
+            <span v-else>{{myTenantName}}</span>
+        </el-breadcrumb-item>
+        <el-breadcrumb-item
+              v-for="(dept,index) in clickDepts"
+              :key="dept.id"
+            >
+            <span  class="breadcrumb-label-link" v-if="index < clickDepts.length - 1" @click="clickBreadcrumb(dept,false, index )" >{{dept.showName}}</span>
+            <span v-else>{{dept.showName}}</span>
+            </el-breadcrumb-item>
+  </el-breadcrumb>
+</template>
+<script  setup lang="ts">
+import { reactive,ref,onMounted, defineEmits } from 'vue'
+const props = defineProps({
+    tenantName:{
+        type: String,
+        default: null
+    },
+    clickDepts: {
+        type: Array<any>,
+        default: null
+    }
+})
+const emits = defineEmits(['clickBreadcrumb'])
+
+let myTenantName = ref(props.tenantName)
+
+function clickBreadcrumb (item, isTenant, index) {
+    emits('clickBreadcrumb', item, isTenant, index )
+}
+</script>

package/packages/workgroup-user-tree-mobile/src/dept-result.vue

@@ -0,0 +1,58 @@
+
+<template>
+<el-drawer v-model="isShowForm" direction="btt" size="80%" class="organization-tree">
+    <template #header>
+        <div style="text-align: center;">
+            {{$t('departmentTreeInline.selectResultTitle')}}
+        </div>
+    </template>
+    <template #default>
+        <el-tree
+        v-if="isShowForm"
+        ref="orgResultTreeRef"
+        :data="selectUsers"
+        node-key="nodeId"
+        >
+        <template #default="{ node, data }">
+            <div class="item-row">
+            <div class="item-label">{{ data.showName }}
+            <span v-if="data.nodeType && data.nodeType ==='USER'" style="color:#999">({{ data.loginName }}{{ getUserMainDeptName(data) ? '/'+getUserMainDeptName(data): ''}})</span>
+            <span v-if="data.parentNodeId !== '-1' && getDeptNamePath(data)" style="color:#999">({{ getDeptNamePath(data) }})</span>
+            </div>
+            <div class="item-side" @click="removeDept(data)">
+                <el-icon><DeleteFilled /></el-icon>
+            </div>
+            </div>
+        </template>
+        </el-tree>
+    </template>
+</el-drawer>
+</template>
+<script  setup lang="ts">
+import {
+  DeleteFilled
+} from '@element-plus/icons-vue'
+import { reactive,ref,onMounted, defineEmits } from 'vue'
+import { getUserMainDeptName, getDeptNamePath} from '../../utils/organization.ts'
+const props = defineProps({
+    selectUsers: {
+        type: Array<any>,
+        default: null
+    }
+})
+let isShowForm = ref(false)
+// onMounted(()=>{
+//     treeData.value = props.selectUsers.concat(props.selectDepts)
+// })
+const emits = defineEmits(['removeResult'])
+function removeDept (item) {
+    emits('removeResult', item )
+}
+
+function showResult() {
+    isShowForm.value = true
+}
+
+defineExpose({showResult})
+
+</script>