agilebuilder-ui 1.1.36-tmp4 → 1.1.37

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>