agilebuilder-ui 1.1.35 → 1.1.36-sit1

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

@@ -1,120 +1,127 @@
 <template>
-	<div>
-		<WorkgroupMobileTree
-			v-if="isMobile"
-			ref="workgroupTree"
-			:close-on-click-modal="false"
-			:close-on-press-escape="false"
-			: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%'"
-				append-to-body
-				class="user-tree"
-				model-value
-				@close="$emit('close')"
-				@closed="$emit('closed')"
-				@open="$emit('open')"
-				@opend="$emit('opend')"
-		>
-			<inline-workgroup-tree
-					ref="workgroupTree"
-					:branch-info="branchInfo"
-					:multiple="multiple"
-					@result="result"
-			/>
-			<template v-slot:footer>
-				<div class="dialog-footer">
-					<el-button class="button--default" size="default" @click="$emit('close')">
-						{{ $t('imatrixUIPublicModel.cancel') }}
-					</el-button>
-					<el-button size="default" type="primary" @click="selectWorkgroup">
-						{{ $t('imatrixUIPublicModel.sure') }}
-					</el-button>
-				</div>
-			</template>
-		</el-dialog>
-	</div>
+  <div>
+    <WorkgroupMobileTree
+      v-if="isMobile"
+      ref="workgroupTree"
+      :close-on-click-modal="false"
+      :close-on-press-escape="false"
+      :branch-info="branchInfo"
+      :multiple="multiple"
+      :search-field="searchField"
+      :select-workgroup-info="selectWorkgroupInfo"
+      :limit-filter-column="limitFilterColumn"
+      :separator="separator"
+      @close="result"
+    />
+    <el-dialog
+      v-else
+      :close-on-click-modal="false"
+      :title="myTitle"
+      :width="multiple ? '60%' : '40%'"
+      append-to-body
+      class="user-tree"
+      model-value
+      @close="$emit('close')"
+      @closed="$emit('closed')"
+      @open="$emit('open')"
+      @opend="$emit('opend')"
+    >
+      <inline-workgroup-tree
+        ref="workgroupTree"
+        :branch-info="branchInfo"
+        :limit-filter-column="limitFilterColumn"
+        :multiple="multiple"
+        @result="result"
+      />
+      <template v-slot:footer>
+        <div class="dialog-footer">
+          <el-button class="button--default" size="default" @click="$emit('close')">
+            {{ $t('imatrixUIPublicModel.cancel') }}
+          </el-button>
+          <el-button size="default" type="primary" @click="selectWorkgroup">
+            {{ $t('imatrixUIPublicModel.sure') }}
+          </el-button>
+        </div>
+      </template>
+    </el-dialog>
+  </div>
 </template>
 
 <script>
-import {$emit} from '../../utils/gogocodeTransfer'
+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'
+import { isMobileBrowser } from '../../../src/utils/common-util'
 
 export default {
-	name: 'WorkgroupTree',
-	components: {
-		InlineWorkgroupTree,
-		WorkgroupMobileTree
-	},
-	props: {
-		// 是否是多选树，默认是true
-		multiple: {
-			type: Boolean,
-			default: true,
-		},
-		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
-		branchInfo: {
-			type: Array,
-			default: null,
-		},
-		// 弹框的标题
-		title: {
-			type: String,
-			default: null,
-		},
-		// 弹框的宽度
-		width: {
-			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: {
-		// 工作组单选回调
-		result(selectNodeInfo) {
-			$emit(this, 'close', selectNodeInfo)
-		},
-		// 嵌入树，多选时，点击确定时调用的方法
-		selectWorkgroup() {
-			this.$refs.workgroupTree.selectWorkgroup()
-		},
-	},
-	emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed'],
+  name: 'WorkgroupTree',
+  components: {
+    InlineWorkgroupTree,
+    WorkgroupMobileTree
+  },
+  props: {
+    // 是否是多选树，默认是true
+    multiple: {
+      type: Boolean,
+      default: true
+    },
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    branchInfo: {
+      type: Array,
+      default: null
+    },
+    // 弹框的标题
+    title: {
+      type: String,
+      default: null
+    },
+    // 弹框的宽度
+    width: {
+      type: String,
+      default: '60%'
+    },
+    // 多选部门树时，已选择部门id或部门名称或编码集合，多个之间以逗号隔开
+    selectWorkgroupInfo: {
+      type: [String, Number],
+      default: null
+    },
+    // 移除部门时，部门属性名称：id、name、code，默认是id
+    searchField: {
+      type: String,
+      default: 'code'
+    },
+    // 多选树时结果之间的分隔符，默认是逗号分隔
+    separator: {
+      type: String,
+      default: ','
+    },
+    // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
+    limitFilterColumn: {
+      type: String,
+      default: 'code'
+    }
+  },
+  data() {
+    let myTitle = this.$t('imatrixUIMessage.pleaseSelectATeam')
+    if (this.title) {
+      myTitle = this.title
+    }
+    const isMobile = isMobileBrowser()
+    return {
+      myTitle,
+      isMobile
+    }
+  },
+  methods: {
+    // 工作组单选回调
+    result(selectNodeInfo) {
+      $emit(this, 'close', selectNodeInfo)
+    },
+    // 嵌入树，多选时，点击确定时调用的方法
+    selectWorkgroup() {
+      this.$refs.workgroupTree.selectWorkgroup()
+    }
+  },
+  emits: ['open', 'opend', 'close', 'closed', 'opend', 'close', 'closed']
 }
 </script>

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

@@ -177,7 +177,12 @@ export default {
 		separator: {
 			type: String,
 			default: ',',
-		}
+    },
+    // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
+    limitFilterColumn: {
+      type: String,
+      default: 'code'
+    }
 	},
 	computed: {},
 	watch: {

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

@@ -1,120 +1,148 @@
 <template>
-    <el-drawer v-model="isShowForm" append-to-body :close-on-click-modal="false" :close-on-press-escape="false"  direction="btt" size="100%" class="organization-tree" @close="closeTree()">
+  <el-drawer
+    v-model="isShowForm"
+    append-to-body
+    :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>
+      <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"/>
+      <InlineWorkgroupTreeApp
+        v-if="isShowForm"
+        :multiple="multiple"
+        :branchInfo="branchInfo"
+        :selectWorkgroupInfo="selectWorkgroupInfo"
+        :searchField="searchField"
+        :limit-filter-column="limitFilterColumn"
+        :separator="separator"
+        @close="closeTree"
+      />
     </template>
   </el-drawer>
-
 </template>
 
-<script  lang="ts">
+<script lang="ts">
 export default {
   name: 'DepartmentTreeMobile'
 }
 </script>
-<script  setup lang="ts">
+<script setup lang="ts">
 import InlineWorkgroupTreeApp from './workgroup-tree-inline-app.vue'
-import { reactive,ref,onMounted, defineEmits } from '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})
+  // 是否是多选树，默认是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: ','
+  }
+  // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
+  limitFilterColumn: {
+    type: String
+    default: 'code'
+  }
+}>()
+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,
+.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-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;
+  padding-top: 10px;
 }
 .organization-tree .card-content {
-	margin-top: 10px;
+  margin-top: 10px;
 }
 .organization-tree .item-row-all {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 .organization-tree .item-row {
-	display: flex;
-	width: 100%;
+  display: flex;
+  width: 100%;
 }
 .organization-tree .item-label {
-	flex: 0 0 90%;
-	text-align: left;
+  flex: 0 0 90%;
+  text-align: left;
 }
 .organization-tree .item-side {
-	flex: 0 0 10%;
-	text-align: right;
+  flex: 0 0 10%;
+  text-align: right;
 }
 .organization-tree .el-tree-node {
-	margin-bottom: 10px;
+  margin-bottom: 10px;
 }
 
-.organization-tree .el-tree-node__content>.el-tree-node__expand-icon {
-	padding: 0;
-	display: none;
+.organization-tree .el-tree-node__content > .el-tree-node__expand-icon {
+  padding: 0;
+  display: none;
 }
 
 .organization-tree .card-footer {
-	padding: 20px;
+  padding: 20px;
 }
 .organization-tree .card-footer .select-result {
-	color: #409EFF;
-	flex:1 1 75%;
-	text-align: left;
+  color: #409eff;
+  flex: 1 1 75%;
+  text-align: left;
 }
 .organization-tree .card-footer .button-area {
-	flex:0 0 20%;
-	text-align: right;
+  flex: 0 0 20%;
+  text-align: right;
 }
 
-.organization-tree .dept-path .breadcrumb-label-link{
-	color:#409EFF
+.organization-tree .dept-path .breadcrumb-label-link {
+  color: #409eff;
 }
 </style>