agilebuilder-ui 1.0.80 → 1.0.82-tmp1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agilebuilder-ui",
-  "version": "1.0.80",
+  "version": "1.0.82-tmp1",
   "type": "module",
   "private": false,
   "main": "./lib/super-ui.js",

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">
+												<div slot="label">
+														<span>{{$t('departmentUserTreeInline.group')}}</span>
+														<span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
+												</div>
+												<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'],
 }

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

@@ -27,28 +27,43 @@
             display: inline-block !important;
           "
 				>
-					<el-tree
-							ref="deparmentUserTree"
-							:load="loadNode"
-							:props="defaultProps"
-							lazy
-							node-key="nodeId"
-							@node-click="handleNodeClick"
-					>
-						<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"
+												:load="loadNode"
+												:props="defaultProps"
+												lazy
+												node-key="nodeId"
+												@node-click="handleNodeClick"
+										>
+												<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">
+										<div slot="label">
+												<span>{{ $t('departmentUserTreeInline.group') }}</span>
+												<span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
+										</div>
+										<GroupUserSingleTree
+												v-if="isShowGroupTree"
+												@singleClick="getGroupUserResult"
+												@dblClick="dblClickGroupUserResult"
+										/>
+								</el-tab-pane>
+						</el-tabs>
 				</div>
 				<div
 						v-if="
@@ -79,6 +94,8 @@ import UserResult from './search-result.vue'
 import utils from '../../utils/utils'
 import departmentUserTreeSingleService from './department-user-tree-single-service'
 import memoryCacheUtils from '../../utils/memory-cache-utils'
+import GroupUserSingleTree from './group-user-single-tree.vue'
+import GroupUser from './group-user/group-user.vue'
 
 export default {
 	data() {
@@ -125,11 +142,15 @@ export default {
 			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
 			memoryCacheData: [],
 			ElIconSearch,
+			activeTab: 'orgTree', // 当前页签
+			isShowGroupTree: true
 		}
 	},
 	name: 'InlineDepartmentUserSingleTree',
 	components: {
 		UserResult,
+		GroupUserSingleTree,
+		GroupUser
 	},
 	props: {
 		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
@@ -330,6 +351,27 @@ export default {
 			this.packageSelectResult(user)
 			$emit(this, 'result', this.selectNodeInfo)
 		},
+			getGroupUserResult(selectNodeInof) {
+					console.log('getGroupUserResult----selectNodeInof=', selectNodeInof)
+					if (selectNodeInof) {1
+							this.selectNodeInfo = selectNodeInof
+							// this.$emit('result', this.selectNodeInfo)
+					}
+			},
+			updateGroupTree() {
+					this.isShowGroupTree = false
+					const that = this
+					setTimeout(() => {
+							that.isShowGroupTree = true
+					}, 10)
+			},
+			dblClickGroupUserResult(selectNodeInof) {
+					console.log('dblClickGroupUserResult----selectNodeInof=', selectNodeInof)
+					if (selectNodeInof) {
+							this.selectNodeInfo = selectNodeInof
+							this.$emit('result', this.selectNodeInfo)
+					}
+			}
 	},
 	emits: ['result'],
 }

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

@@ -96,12 +96,6 @@ const departmentUserTreeSingleService = {
     if (children && children.length > 0) {
       // 表示加载过该父节点的子节点，只需重新更新一下
       resolve(children)
-      // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
-      if (checkedKeys && checkedKeys.indexOf(parentNodeId) > -1) {
-        // 点击部门名称前的三角标识展开节点时，保持当前节点的选中状态
-        // 表示当前展开的节点是选中状态，则应保持其选中状态，并选中其子节点
-        this.checkedChildrenUserNodes(node.data, node.data.children)
-      }
     } else {
       // 表示没有加载过该父节点的子节点集合时
       const param = {

package/packages/department-user-tree-inline/src/group-user/group-input.vue

@@ -0,0 +1,153 @@
+<template>
+		<el-dialog
+				visible
+				:title="$t('departmentUserTreeInline.groupForm')"
+				:close-on-click-modal="false"
+				append-to-body
+				width="30%"
+				@open="$emit('openDialog')"
+				@opend="$emit('opendDialog')"
+				@close="closeInput"
+				@closed="$emit('closedDialog')"
+		>
+				<div>
+						<el-form
+								ref="ruleFormRef"
+								:model="group"
+								label-width="auto"
+								status-icon
+						>
+								<el-form-item
+										:label="$t('departmentUserTreeInline.groupName')"
+										prop="name"
+										:rules="[
+            { required: true, message: $t('departmentUserTreeInline.groupNameNotEmpty'), trigger: 'blur' }
+          ]"
+								>
+										<el-input
+												v-model="group.name"
+										/>
+								</el-form-item>
+						</el-form>
+						<div v-if="myGroupId">
+								<div style="padding-bottom: 5px">
+										<el-button size="small" @click="showDeptMultipleTree=true">
+												{{ $t('imatrixUIPublicModel.add') }}
+										</el-button>
+								</div>
+								<el-table :data="tableData" border style="width: 100%" max-height="350">
+										<el-table-column prop="name" :label="$t('departmentUserTreeInline.name')" />
+										<el-table-column prop="loginName" :label="$t('departmentUserTreeInline.loginName')" />
+										<el-table-column :label="$t('imatrixUIPublicModel.edit')" align="center" width="60px">
+												<template slot-scope="scope">
+														<div>
+																<el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeUser(scope.$index, scope.row)" />
+														</div>
+												</template>
+										</el-table-column>
+								</el-table>
+						</div>
+
+						<department-user-tree v-if="showDeptMultipleTree" width="60%" :multiple="true" @close="closeDeptMultiple" />
+				</div>
+				<div slot="footer" class="dialog-footer">
+						<el-button size="small" @click="closeInput">
+								{{ $t('imatrixUIPublicModel.cancel') }}
+						</el-button>
+						<el-button size="small" type="primary" @click="saveGroup">
+								{{ $t('imatrixUIPublicModel.sure') }}
+						</el-button>
+				</div>
+		</el-dialog>
+</template>
+<script>
+import groupUserTreeSevice from '../group-user-tree-service'
+import utils from '../../../utils/utils'
+export default {
+		name: 'GroupInput',
+		props: {
+				groupId: {
+						type: Number,
+						default: null
+				},
+		},
+		data() {
+				return {
+						group: {
+
+						},
+						showDeptMultipleTree: false,
+						loginNames: null,
+						tableData: [],
+						myGroupId: this.groupId
+				}
+		},
+		created() {
+				if (this.myGroupId) {
+						this.getGroupById(this.myGroupId).then((result) => {
+								this.group = result
+								this.tableData = result.users
+						})
+				}
+		},
+		methods: {
+				...utils,
+				...groupUserTreeSevice,
+				saveGroup() {
+						this.$refs['ruleFormRef'].validate((valid) => {
+								if (valid) {
+										this.saveUserGroup(this.group).then((data) => {
+												this.group = data
+												this.myGroupId = data.id
+												this.$message({
+														showClose: true,
+														type: 'success',
+														message: this.$t('imatrixUIMessage.saveSuccessfully')
+												})
+												if (this.tableData.length > 0) {
+														this.$emit('closeDialog')
+												}
+										})
+								} else {
+										return false
+								}
+						})
+				},
+				// 多选树关闭方法
+				closeDeptMultiple(selectNodeInfo) {
+						if (selectNodeInfo) {
+								this.loginNames = selectNodeInfo.loginNames
+								if (this.myGroupId) {
+										this.saveUserGroupLinks(this.myGroupId, this.loginNames).then(() => {
+												this.getUserGroupLinks(this.myGroupId).then((data) => {
+														this.tableData = data
+														this.showDeptMultipleTree = false
+												})
+										})
+								}
+						} else {
+								this.showDeptMultipleTree = false
+						}
+				},
+				removeUser(rowindex, row) {
+						if (this.myGroupId) {
+								this.deleteGroupUserLink(this.myGroupId, row.loginName).then(() => {
+										this.$message({
+												showClose: true,
+												type: 'success',
+												message: this.$t('superGrid.deleteSuccessful')
+										})
+										this.getUserGroupLinks(this.myGroupId).then((data) => {
+												this.tableData = data
+										})
+								})
+						} else {
+								this.removeUser(this.tableData, row)
+						}
+				},
+				closeInput() {
+						this.$emit('closeDialog')
+				}
+		}
+}
+</script>

package/packages/department-user-tree-inline/src/group-user/group-list.vue

@@ -0,0 +1,96 @@
+<template>
+		<div>
+				<el-dialog
+						visible
+						:title="$t('departmentUserTreeInline.groupList')"
+						:close-on-click-modal="false"
+						append-to-body
+						width="30%"
+						@open="$emit('openDialog')"
+						@opend="$emit('opendDialog')"
+						@close="$emit('closeDialog')"
+						@closed="$emit('closedDialog')"
+				>
+						<div>
+								<div style="padding-bottom: 5px">
+										<el-button size="small" @click="addGroup()">
+												{{ $t('imatrixUIPublicModel.add') }}
+										</el-button>
+								</div>
+								<el-table :data="tableData" border style="width: 100%" max-height="350">
+										<el-table-column :label="$t('superGrid.index')" align="center" width="60">
+												<template slot-scope="scope">
+														{{ scope.$index+1 }}
+												</template>
+										</el-table-column>
+										<el-table-column prop="name" :label="$t('departmentUserTreeInline.groupName')" />
+										<el-table-column :label="$t('imatrixUIPublicModel.edit')" align="center" width="130">
+												<template slot-scope="scope">
+														<div>
+																<el-button type="primary" size="mini" icon="el-icon-edit" circle @click="updateGroup(scope.$index, scope.row)" />
+																<el-button type="danger" size="mini" icon="el-icon-delete" circle @click="removeGroup(scope.$index, scope.row)" />
+														</div>
+												</template>
+										</el-table-column>
+								</el-table>
+						</div>
+				</el-dialog>
+				<GroupInput
+						v-if="isShowInput2"
+						:group-id="groupId"
+						@closeDialog="closeGroupInput"
+				/>
+		</div>
+</template>
+<script>
+import GroupInput from './group-input'
+import groupUserTreeSevice from '../group-user-tree-service'
+export default {
+		name: 'GroupList',
+		components: {
+				GroupInput
+		},
+		props: {
+		},
+		data() {
+				return {
+						tableData: [],
+						isShowInput2: false,
+						groupId: null
+				}
+		},
+		created() {
+				this.listGroups()
+		},
+		methods: {
+				...groupUserTreeSevice,
+				listGroups() {
+						this.getUserGroupList().then((data) => {
+								this.tableData = data
+						})
+				},
+				updateGroup(rowindex, row) {
+						this.groupId = row.id
+						this.isShowInput2 = true
+				},
+				removeGroup(rowindex, row) {
+						this.deleteUserGroup(row.id).then(() => {
+								this.$message({
+										showClose: true,
+										type: 'success',
+										message: this.$t('superGrid.deleteSuccessful')
+								})
+								this.listGroups()
+						})
+				},
+				closeGroupInput() {
+						this.isShowInput2 = false
+						this.listGroups()
+				},
+				addGroup() {
+						this.groupId = null
+						this.isShowInput2 = true
+				}
+		}
+}
+</script>

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

@@ -0,0 +1,42 @@
+<template>
+  <span style="padding-left: 10px">
+				<el-icon @click="isShowInput = true"><CirclePlus /></el-icon>
+    <GroupList
+						v-if="isShowList"
+						@closeDialog="closeList()"
+				/>
+  </span>
+</template>
+<script>
+import GroupList from './group-list'
+import groupUserTreeService from '../group-user-tree-service'
+import { CirclePlus } from '@element-plus/icons-vue'
+export default {
+		name: 'GroupUser',
+		components: {
+				GroupList,
+				CirclePlus
+		},
+		props: {
+				activeTab: {
+						type: String,
+						default: null
+				}
+		},
+		data() {
+				return {
+						isShowList: false,
+						groupId: null
+				}
+		},
+		created() {
+		},
+		methods: {
+				...groupUserTreeService,
+				closeList() {
+						this.isShowList = false
+						this.$emit('update-group-tree')
+				},
+		}
+}
+</script>