agilebuilder-ui 1.0.621 → 1.0.962

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.0.621",
+  "version": "1.0.962",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",
@@ -12,20 +12,23 @@
     "@tinymce/tinymce-vue": "4.0.4",
     "@zxing/library": "^0.20.0",
     "async-validator": "^4.2.5",
+    "compressorjs": "1.2.1",
     "font-awesome": "^4.7.0",
     "js-base64": "^3.7.7",
     "js-cookie": "^3.0.5",
     "mitt": "^3.0.1",
     "path-to-regexp": "6.2.1",
     "sortablejs": "^1.15.0",
-    "tinymce": "5.8.2"
+    "tinymce": "5.8.2",
+    "uuid": "^9.0.1"
   },
   "devDependencies": {
     "@element-plus/icons-vue": "^2.1.0",
     "@vitejs/plugin-vue": "^4.2.3",
+    "axios": "^1.5.1",
     "element-plus": "^2.4.1",
     "nprogress": "^0.2.0",
-    "sass": "^1.69.4",
+    "sass": "1.69.4",
     "vite": "^4.4.5",
     "vite-plugin-require-transform": "^1.0.21",
     "vite-plugin-svg-icons": "^2.0.1",

package/packages/department-tree/src/department-tree.vue

@@ -1,16 +1,27 @@
 <template>
 	<div>
+		<DepartmentMobileTree
+			v-if="isMobile"
+			ref="inlineDeparmentTree"
+			:department-info="departmentInfo"
+			:multiple="multiple"
+			:search-field="searchField"
+			:select-department-info="selectDepartmentInfo"
+			:separator="separator"
+			@close="result"
+		/>
 		<el-dialog
-				:close-on-click-modal="false"
-				:title="myTitle"
-				:width="multiple ? '920px' : '509px'"
-				append-to-body
-				class="user-tree"
-				model-value
-				@close="$emit('close')"
-				@closed="$emit('closed')"
-				@open="$emit('open')"
-				@opend="$emit('opend')"
+			v-else
+			:close-on-click-modal="false"
+			:title="myTitle"
+			:width="multiple ? '920px' : '509px'"
+			append-to-body
+			class="user-tree"
+			model-value
+			@close="$emit('close')"
+			@closed="$emit('closed')"
+			@open="$emit('open')"
+			@opend="$emit('opend')"
 		>
 			<inline-department-tree
 					ref="inlineDeparmentTree"
@@ -40,11 +51,14 @@
 <script>
 import {$emit} from '../../utils/gogocodeTransfer'
 import InlineDepartmentTree from '../../department-tree-inline/src/department-tree-inline.vue'
+import DepartmentMobileTree from '../../department-tree-mobile/src/department-tree-app.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'DepartmentTree',
 	components: {
 		InlineDepartmentTree,
+		DepartmentMobileTree
 	},
 	props: {
 		// 是否是多选树，默认是true
@@ -93,12 +107,15 @@ export default {
 		},
 	},
 	data() {
+    	const isMobile = isMobileBrowser()
+		console.log('部门树---isMobile=', isMobile)
 		let myTitle = this.$t('imatrixUIMessage.pleaseSelectDepartment')
 		if (this.title) {
 			myTitle = this.title
 		}
 		return {
 			myTitle,
+			isMobile
 		}
 	},
 	methods: {

package/packages/department-tree-inline/src/department-tree-service.js

@@ -6,8 +6,7 @@ const departmentTreeService = {
   filterAppendNodes(value) {
     this.$http
       .post(
-        window.$vueApp.config.globalProperties.baseAPI +
-          '/component/organization-trees/search-pc-depts',
+        window.$vueApp.config.globalProperties.baseAPI + '/component/organization-trees/search-pc-depts',
         this.searchParam
       )
       .then((result) => {
@@ -17,7 +16,7 @@ const departmentTreeService = {
             this.$message({
               showClose: true,
               type: 'error',
-              message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+              message: getI18n().t('imatrixUIMessage.queryResultIsEmpty')
             })
             return
           }
@@ -35,7 +34,7 @@ const departmentTreeService = {
           this.$message({
             showClose: true,
             type: 'error',
-            message: getI18n().t('imatrixUIMessage.queryResultIsEmpty'),
+            message: getI18n().t('imatrixUIMessage.queryResultIsEmpty')
           })
         }
       })
@@ -55,11 +54,7 @@ const departmentTreeService = {
     // this.handleSelectUtil(item, localStorage)
     // 查询最新部门信息替换,缓存为历史数据 数据库可能发生变化
     this.$http
-      .get(
-        window.$vueApp.config.globalProperties.baseAPI +
-          '/api/departments?departmentCode=' +
-          item.code
-      )
+      .get(window.$vueApp.config.globalProperties.baseAPI + '/api/departments?departmentCode=' + item.code)
       .then((departmentDTO) => {
         if (departmentDTO !== null) {
           for (const dtoKey in departmentDTO) {
@@ -72,9 +67,7 @@ const departmentTreeService = {
         this.searchValue = ''
         this.setMemoryCacheData(item, 'department')
         if (this.multiple) {
-          const index = this.selectResult.findIndex(
-            (selectEntity) => selectEntity.code === item.code
-          )
+          const index = this.selectResult.findIndex((selectEntity) => selectEntity.code === item.code)
           if (index < 0) {
             this.selectResult.push(item)
           }
@@ -144,9 +137,7 @@ const departmentTreeService = {
           // 不是叶子节点，并且没有加载过该父节点的子节点时，需要走后台展开子节点
           this.$http
             .get(
-              window.$vueApp.config.globalProperties.baseAPI +
-                '/component/organization-trees/departments/' +
-                data.id
+              window.$vueApp.config.globalProperties.baseAPI + '/component/organization-trees/departments/' + data.id
             )
             .then((result) => {
               // 更新当前点击的节点的子节点
@@ -193,21 +184,22 @@ const departmentTreeService = {
     if (this.$refs.deparmentTree) {
       checkedKeys = this.$refs.deparmentTree.getCheckedKeys()
     }
+    if (parentId === -1 && node.data.childDepartments && node.data.childDepartments.length > 0) {
+      // 表示初始化树时，展开公司节点
+      resolve(node.data.childDepartments)
+      return
+    }
     // 初始化部门树
     this.initLoadDepartment(parentId, node, resolve, checkedKeys)
   },
   // 初始化部门树
   initLoadDepartment(parentId, node, resolve, checkedKeys) {
     this.$http
-      .get(
-        window.$vueApp.config.globalProperties.baseAPI +
-          '/component/organization-trees/departments/' +
-          parentId
-      )
+      .get(window.$vueApp.config.globalProperties.baseAPI + '/component/organization-trees/departments/' + parentId)
       .then((data) => {
         resolve(data)
         // 更新当前点击的节点的子节点
-        this.$refs.deparmentTree.updateKeyChildren(parentId, data)
+        // this.$refs.deparmentTree.updateKeyChildren(parentId, data)
         if (parentId === 0) {
           // 初始化树时，展开公司节点
           const tenantData = data[0].data
@@ -242,11 +234,7 @@ const departmentTreeService = {
   loadDepartment(parentId, isSearch, searchValue) {
     return new Promise((resolve, reject) => {
       this.$http
-        .get(
-          window.$vueApp.config.globalProperties.baseAPI +
-            '/component/organization-trees/departments/' +
-            parentId
-        )
+        .get(window.$vueApp.config.globalProperties.baseAPI + '/component/organization-trees/departments/' + parentId)
         .then((children) => {
           this.$refs.deparmentTree.updateKeyChildren(parentId, children)
           if (this.$refs.deparmentTree.store.nodesMap[parentId]) {
@@ -263,15 +251,13 @@ const departmentTreeService = {
   loadPointDepartments() {
     this.$http
       .post(
-        window.$vueApp.config.globalProperties.baseAPI +
-          '/component/organization-trees/point-departments',
+        window.$vueApp.config.globalProperties.baseAPI + '/component/organization-trees/point-departments',
         this.departmentInfo
       )
       .then((children) => {
         this.$refs.deparmentTree.updateKeyChildren(this.tenantNodeId, children)
         if (this.$refs.deparmentTree.store.nodesMap[this.tenantNodeId]) {
-          this.$refs.deparmentTree.store.nodesMap[this.tenantNodeId].expanded =
-            true
+          this.$refs.deparmentTree.store.nodesMap[this.tenantNodeId].expanded = true
         }
       })
   },
@@ -306,7 +292,7 @@ const departmentTreeService = {
     // 表示集合中不存在该用户，则封装该用户
     var allDept = {
       id: this.tenantNodeId,
-      name: '所有部门',
+      name: '所有部门'
     }
     return allDept
   },
@@ -314,20 +300,13 @@ const departmentTreeService = {
     return new Promise((resolve, reject) => {
       const selectDepts = []
       if (this.selectDepartmentInfo) {
-        if (
-          this.selectDepartmentInfo === this.tenantNodeId ||
-          this.selectDepartmentInfo === '所有部门'
-        ) {
+        if (this.selectDepartmentInfo === this.tenantNodeId || this.selectDepartmentInfo === '所有部门') {
           // 表示已选择所有用户
           selectDepts.push(this.packageAllDept())
           resolve(selectDepts)
         } else {
           // 表示不是选择的所有用户
-          this.getSelectDepts(
-            this.searchField,
-            this.selectDepartmentInfo,
-            this.separator
-          )
+          this.getSelectDepts(this.searchField, this.selectDepartmentInfo, this.separator)
             .then((departments) => {
               resolve(departments)
             })
@@ -339,6 +318,6 @@ const departmentTreeService = {
         resolve(selectDepts)
       }
     })
-  },
+  }
 }
 export default departmentTreeService

package/packages/department-tree-mobile/src/department-tree-app.vue

@@ -1,5 +1,5 @@
 <template>
-    <el-drawer v-model="isShowForm" direction="btt" size="100%" class="organization-tree">
+    <el-drawer v-model="isShowForm" :close-on-click-modal="false" :close-on-press-escape="false" direction="btt" size="100%" class="organization-tree" @close="closeTree()">
     <template #header>
         <div style="text-align: center;">
             {{$t('imatrixUIMessage.pleaseSelect')}}
@@ -48,10 +48,10 @@ const props = defineProps<{
 		}
 	}>()
 	const emits = defineEmits(['close'])
-	let isShowForm = ref(false)
-	function showTree() {
-		isShowForm.value = true
-	}
+	let isShowForm = ref(true)
+	// function showTree() {
+	// 	isShowForm.value = true
+	// }
 	function closeTree(selectNodeInfo) {
 		emits('close', selectNodeInfo)
 		isShowForm.value = false
@@ -59,7 +59,7 @@ const props = defineProps<{
 	function selectDepartment() {
 		// this.$refs.inlineDeparmentTree.selectDepartment()
 	}
-	defineExpose({showTree})
+	// defineExpose({showTree})
 </script>
 <style>
 .organization-tree, .organization-tree .el-checkbox__label,.organization-tree .el-breadcrumb__inner,.organization-tree .el-tree {

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

@@ -18,7 +18,7 @@
           </el-col>
       </el-row>
     </el-card>
-    <el-card  v-if="tenantName" class="card-content"  style="height: 40px">
+    <el-card  v-if="tenantName" class="card-content" >
       <el-row class="item-row item-row-all">
         <el-col class="item-label dept-path"><deptPath :tenantName="tenantName" :clickDepts="clickDepts" @clickBreadcrumb="clickBreadcrumb"/></el-col>
       </el-row>
@@ -44,7 +44,7 @@
       </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人,其中有一个部门(含子部门) -->
@@ -166,17 +166,19 @@ function  resizeScrollTargetHeight () {
 }
 // 点击复选框时处理
 function handleCheckNode(data, check, isChildrenCheck) {
-    if(check) {
-      // 表示选择节点时
-      addToSelectDept(data)
-    } else {
-      // 表示取消选择
-      removeSelectDept(data)
+    if(props.multiple) {
+      if(check) {
+        // 表示选择节点时
+        addToSelectDept(data)
+      } else {
+        // 表示取消选择
+        removeSelectDept(data)
+      }
     }
 }
 
 function handleClickNode(data, node, treenode, events) {
-  if(data.nodeType && data.nodeType === 'DEPARTMENT') {
+  if(!props.multiple && data.nodeType && data.nodeType === 'DEPARTMENT') {
     selectDepts.value = [data]
   }
 }
@@ -184,7 +186,7 @@ function handleClickNode(data, node, treenode, events) {
 
 function addToSelectDept(dept) {
     if(dept.nodeType && dept.nodeType === 'DEPARTMENT') {
-      const filterValue = selectDepts.value.filter(item=> item.nodeId === dept.nodeId)
+      const filterValue = selectDepts.value.filter(item=> (item.nodeId === dept.nodeId))
       if(!filterValue || filterValue.length === 0) {
         // 表示集合中没有该记录，需要记录到结果集合中
         selectDepts.value.push(JSON.parse(JSON.stringify(dept)))
@@ -193,7 +195,7 @@ function addToSelectDept(dept) {
 }
 
 function removeSelectDept(dept) {
-    const index = selectDepts.value.findIndex(selectItem=> selectItem.nodeId === dept.nodeId)
+    const index = selectDepts.value.findIndex(selectItem=> (selectItem.nodeId === dept.nodeId))
     // 删除指定元素
     selectDepts.value.splice(index, 1)
     checkAll.value =false
@@ -251,7 +253,7 @@ function showResult() {
 }
 
 function removeResultDept(dept) {
-  const removeDeptInDepts = departments.value.filter(item=>item.nodeId === dept.nodeId)
+  const removeDeptInDepts = selectDepts.value.filter(item=>item.nodeId === dept.nodeId)
   if(removeDeptInDepts && removeDeptInDepts.length > 0) {
     // departments结果存在当前移除的节点时，check-change事件会走removeSelectDept的逻辑
     const selectNodeIds = []
@@ -261,10 +263,8 @@ function removeResultDept(dept) {
       }
     })
     orgTreeRef.value.setCheckedKeys(selectNodeIds, true)
-  } else {
-    // departments结果不存在当前移除的节点时
-    removeSelectDept(dept)
   }
+  removeSelectDept(dept)
 }
 
 function saveDept() {

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

@@ -1,7 +1,7 @@
 <template>
 	<div>
 		<department-user-multi-tree
-				v-if="multiple"
+				v-if="!isMobile && multiple"
 				:department-info="departmentInfo"
 				:height="height"
 				:is-need-virtual-user="isNeedVirtualUser"
@@ -16,7 +16,7 @@
 				@opendDialog="opendDialog"
 		/>
 		<department-user-single-tree
-				v-if="!multiple"
+				v-if="!isMobile && !multiple"
 				:department-info="departmentInfo"
 				:is-need-virtual-user="isNeedVirtualUser"
 				:title="title"
@@ -26,6 +26,15 @@
 				@openDialog="openDialog"
 				@opendDialog="opendDialog"
 		/>
+		<DepartmentUserMobileTree
+			v-if="isMobile"
+			:multiple="multiple"
+			:department-info="departmentInfo"
+			:search-field="searchField"
+			:select-user-info="selectUserInfo"
+			:separator="separator"
+			@close="closeDialog"
+		/>
 	</div>
 </template>
 
@@ -33,12 +42,15 @@
 import {$emit} from '../../utils/gogocodeTransfer'
 import DepartmentUserSingleTree from './department-user-single-tree.vue'
 import DepartmentUserMultiTree from './department-user-multiple-tree.vue'
+import DepartmentUserMobileTree from '../../department-user-tree-mobile/src/department-user-tree-app.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'DepartmentUserTree',
 	components: {
 		DepartmentUserSingleTree,
 		DepartmentUserMultiTree,
+		DepartmentUserMobileTree
 	},
 	props: {
 		// 是否是多选树，默认是true
@@ -88,12 +100,15 @@ export default {
 		}
 	},
 	data() {
+    	const isMobile = isMobileBrowser()
+		console.log('部门人员树---isMobile=', isMobile)
 		let myTitle = this.$t('imatrixUIMessage.pleaseSelectPersonnel')
 		if (this.title) {
 			myTitle = this.title
 		}
 		return {
 			myTitle,
+			isMobile
 		}
 	},
 	methods: {

package/packages/department-user-tree-inline/src/department-user-multiple-tree-inline.vue

@@ -28,31 +28,45 @@
                 display: inline-block !important;
               "
 						>
-							<el-tree
-									ref="deparmentUserTree"
-									:check-on-click-node="true"
-									:load="loadNode"
-									:props="defaultProps"
-									lazy
-									node-key="nodeId"
-									show-checkbox
-									@check="handleCheckNode"
-									@check-change="handleCheckChange"
-							>
-								<template #default="{ node, data }">
-									<span>
-										<el-icon>
-											<Menu v-if="node.data.id === -1 || node.data.branch"/>
-										  <Tickets v-else-if="node.data.id === -2 || node.data.id === -3"/>
-											<User v-else-if="node.data.nodeType === 'USER'"/>
-											<Calendar v-else/>
-										</el-icon>
-										<span :title="node.label">
-											{{ node.label }}
-										</span>
-									</span>
-								</template>
-							</el-tree>
+								<el-tabs v-model="activeTab" class="boe">
+										<el-tab-pane :label="$t('departmentUserTreeInline.orgTree')" name="orgTree">
+												<el-tree
+														ref="deparmentUserTree"
+														:props="defaultProps"
+														:load="loadNode"
+														:check-on-click-node="true"
+														lazy
+														show-checkbox
+														node-key="nodeId"
+														@check="handleCheckNode"
+														@check-change="handleCheckChange"
+												>
+														<template #default="{ node, data }">
+																<span>
+																		<el-icon>
+																				<Menu v-if="node.data.id === -1 || node.data.branch"/>
+																				<Tickets v-else-if="node.data.id === -2 || node.data.id === -3"/>
+																				<User v-else-if="node.data.nodeType === 'USER'"/>
+																				<Calendar v-else/>
+																		</el-icon>
+																		<span :title="node.label">
+																				{{ node.label }}
+																		</span>
+																</span>
+														</template>
+												</el-tree>
+										</el-tab-pane>
+										<el-tab-pane name="groupTree">
+												<template v-slot:label>
+														<span>{{$t('departmentUserTreeInline.group')}}</span>
+														<span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
+												</template>
+												<GroupUserMultipleTree
+														v-if="isShowGroupTree"
+														@result="getGroupUserResult"
+												/>
+										</el-tab-pane>
+								</el-tabs>
 							<!-- @node-click="handleNodeClick" 移除节点点击，不然会造成节点不可选择时，点击也会选择节点 -->
 						</div>
 
@@ -117,6 +131,8 @@ import UserResult from './search-result.vue'
 import utils from '../../utils/utils'
 import departmentUserTreeMultiService from './department-user-tree-multi-service'
 import memoryCacheUtils from '../../utils/memory-cache-utils'
+import GroupUserMultipleTree from './group-user-multiple-tree'
+import GroupUser from './group-user/group-user.vue'
 
 export default {
 	data() {
@@ -156,6 +172,8 @@ export default {
 			searchStoreKey: 'searchDepartmentUser',
 			// 公司根节点信息
 			tenantInfo: {},
+			activeTab: 'orgTree', // 当前页签
+			isShowGroupTree: true,
 			memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
 			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
 			memoryCacheData: [],
@@ -168,7 +186,9 @@ export default {
 		Menu,
 		Tickets,
 		User,
-		Calendar
+		Calendar,
+		GroupUserMultipleTree,
+		GroupUser
 	},
 	props: {
 		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
@@ -729,6 +749,21 @@ export default {
 		// 	//   </span>`
 		// 	// )
 		// },
+		getGroupUserResult(selectUser) {
+				if (selectUser) {
+						const result = this.selectResult.filter(user => user.id === selectUser.id)
+						if (!result || result.length === 0) {
+								this.selectResult.push(selectUser)
+						}
+				}
+		},
+		updateGroupTree() {
+				this.isShowGroupTree = false
+				const that = this
+				setTimeout(() => {
+						that.isShowGroupTree = true
+				}, 10)
+		}
 	},
 	emits: ['result'],
 }