agilebuilder-ui 1.0.621 → 1.0.962

package/packages/workflow-button/src/workflow-button.vue

@@ -18,7 +18,7 @@
 		      :key="buttonIndex"
 		      v-permission="button.permission"
 		      :class="button.code ? button.code : ''"
-		      :disabled="preventReclick"
+		      :disabled="disabled?disabled:preventReclick"
 		      :type="button.type"
 
 		      @click="button.clickFun"
@@ -60,6 +60,11 @@ export default {
 			type: String,
 			default: null,
 		},
+		// 是否禁用按钮组所有按钮
+		disabled: {
+			type: Boolean,
+			default: false
+		},
 	},
 	data() {
 		const buttonsPermission = this.getButtonsPermission()

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

@@ -1,6 +1,17 @@
 <template>
 	<div>
+		<WorkgroupMobileTree
+			v-if="isMobile"
+			ref="workgroupTree"
+			:branch-info="branchInfo"
+			:multiple="multiple"
+			:search-field="searchField"
+			:select-workgroup-info="selectWorkgroupInfo"
+			:separator="separator"
+			@close="result"
+		/>
 		<el-dialog
+		v-else
 				:close-on-click-modal="false"
 				:title="myTitle"
 				:width="multiple ? '60%' : '40%'"
@@ -35,11 +46,14 @@
 <script>
 import {$emit} from '../../utils/gogocodeTransfer'
 import InlineWorkgroupTree from '../../workgroup-tree-inline/src/workgroup-tree-inline.vue'
+import WorkgroupMobileTree from '../../workgroup-tree-mobile/src/workgroup-tree-app.vue'
+import {isMobileBrowser} from '../../../src/utils/common-util'
 
 export default {
 	name: 'WorkgroupTree',
 	components: {
 		InlineWorkgroupTree,
+		WorkgroupMobileTree
 	},
 	props: {
 		// 是否是多选树，默认是true
@@ -62,14 +76,31 @@ export default {
 			type: String,
 			default: '60%',
 		},
+		// 多选部门树时，已选择部门id或部门名称或编码集合，多个之间以逗号隔开
+		selectWorkgroupInfo: {
+			type: [String, Number],
+			default: null
+		},
+		// 移除部门时，部门属性名称：id、name、code，默认是id
+		searchField: {
+			type: String,
+			default: 'code',
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		separator: {
+			type: String,
+			default: ','
+		}
 	},
 	data() {
 		let myTitle = this.$t('imatrixUIMessage.pleaseSelectATeam')
 		if (this.title) {
 			myTitle = this.title
 		}
+		const isMobile = isMobileBrowser()
 		return {
 			myTitle,
+			isMobile
 		}
 	},
 	methods: {

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

@@ -163,6 +163,21 @@ export default {
 			type: Array,
 			default: null,
 		},
+		// 多选工作组树时，已选择工作组id或工作组名称或工作组编码集合，多个之间以逗号隔开
+		selectGroupInfo: {
+			type: [String, Number],
+			default: null,
+		},
+		// 工作组属性名称：id、name、code，默认是id
+		searchField: {
+			type: String,
+			default: 'code',
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		separator: {
+			type: String,
+			default: ',',
+		}
 	},
 	computed: {},
 	watch: {
@@ -174,6 +189,19 @@ export default {
 			}
 		},
 	},
+	created() {
+		if(this.multiple){
+			this.initSelectGroups(
+					this.searchField,
+					this.selectGroupInfo,
+					this.separator
+			).then((selectGroups) => {
+				if (selectGroups) {
+					this.selectResult = selectGroups
+				}
+			})
+		}
+	},
 	mounted() {
 		var searchWorkgroup = localStorage.getObject(this.searchStoreKey)
 		if (searchWorkgroup) {

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

@@ -89,5 +89,31 @@ const workgroupTreeService = {
         }
       })
   },
+  initSelectGroups(searchField, selectGroupInfo, separator) {
+    return new Promise((resolve, reject) => {
+      if (!searchField) {
+        resolve([])
+      } else if (!selectGroupInfo) {
+        resolve([])
+      } else {
+        this.$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)
+          })
+      }
+    })
+  }
 }
 export default workgroupTreeService

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

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

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

@@ -0,0 +1,51 @@
+
+<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
+        ref="orgResultTreeRef"
+        :data="selectDepts"
+        node-key="nodeId"
+        check-on-click-node
+        >
+        <template #default="{ node, data }">
+            <div class="item-row">
+            <div class="item-label">{{ data.name }}</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'
+const props = defineProps({
+    selectDepts: {
+        type: Array<any>,
+        default: null
+    }
+})
+let isShowForm = ref(false)
+const emits = defineEmits(['removeDept'])
+function removeDept (item) {
+    emits('removeDept', item )
+}
+
+function showResult() {
+    isShowForm.value = true
+}
+
+defineExpose({showResult})
+
+</script>

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

@@ -0,0 +1,120 @@
+<template>
+    <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')}}
+        </div>
+    </template>
+    <template #default>
+		<InlineWorkgroupTreeApp v-if="isShowForm" :multiple="multiple" :branchInfo="branchInfo" :selectWorkgroupInfo="selectWorkgroupInfo" :searchField="searchField" :separator="separator" @close="closeTree"/>
+    </template>
+  </el-drawer>
+
+</template>
+
+<script  lang="ts">
+export default {
+  name: 'DepartmentTreeMobile'
+}
+</script>
+<script  setup lang="ts">
+import InlineWorkgroupTreeApp from './workgroup-tree-inline-app.vue'
+import { reactive,ref,onMounted, defineEmits } from 'vue'
+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'])
+	let isShowForm = ref(true)
+	// function showTree() {
+	// 	isShowForm.value = true
+	// }
+	function closeTree(selectNodeInfo) {
+		emits('close', selectNodeInfo)
+		isShowForm.value = false
+	}
+	function selectDepartment() {
+		// this.$refs.inlineDeparmentTree.selectDepartment()
+	}
+	// defineExpose({showTree})
+</script>
+<style>
+.organization-tree, .organization-tree .el-checkbox__label,.organization-tree .el-breadcrumb__inner,.organization-tree .el-tree {
+	font-size: 17px;
+	font-weight: 700;
+}
+
+.organization-tree .el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover {
+    font-size: 17px;
+	font-weight: 700;
+}
+.organization-tree .el-card__body {
+	padding-top: 10px;
+}
+.organization-tree .card-content {
+	margin-top: 10px;
+}
+.organization-tree .item-row-all {
+	margin-bottom: 10px;
+}
+.organization-tree .item-row {
+	display: flex;
+	width: 100%;
+}
+.organization-tree .item-label {
+	flex: 0 0 90%;
+	text-align: left;
+}
+.organization-tree .item-side {
+	flex: 0 0 10%;
+	text-align: right;
+}
+.organization-tree .el-tree-node {
+	margin-bottom: 10px;
+}
+
+.organization-tree .el-tree-node__content>.el-tree-node__expand-icon {
+	padding: 0;
+	display: none;
+}
+
+.organization-tree .card-footer {
+	padding: 20px;
+}
+.organization-tree .card-footer .select-result {
+	color: #409EFF;
+	flex:1 1 75%;
+	text-align: left;
+}
+.organization-tree .card-footer .button-area {
+	flex:0 0 20%;
+	text-align: right;
+}
+
+.organization-tree .dept-path .breadcrumb-label-link{
+	color:#409EFF
+}
+</style>