agilebuilder-ui 1.1.32 → 1.1.33-sit2

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

@@ -1,94 +1,87 @@
 <template>
-	<div>
-		<el-container style="height: 395px">
-			<el-header style="font-size: 12px; height: 35px;padding: 0">
-				<el-autocomplete
-						v-model="filterText"
-						:fetch-suggestions="querySearch"
-						:placeholder="$t('departmentUserTree.pleaseEnterUserInformation')"
-						class="inline-input searchDepartmentUser"
-						style="width: 100%;"
-						size="default"
-						@select="handleSelect"
-						@keyup.enter="clickSearch"
-				>
-					<template v-slot:append>
-						<el-button :icon="ElIconSearch" @click="clickSearch"/>
-					</template>
-				</el-autocomplete>
-			</el-header>
-			<el-main style="padding: 10px; width: 100%">
-				<div
-						v-if="!searchValue || searchResult.length === 0"
-						style="
-            padding-top: 5px;
-            overflow: auto;
-            width: auto;
-            display: inline-block !important;
-          "
-				>
-						<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">
-										<template v-slot:label>
-												<span>{{ $t('departmentUserTreeInline.group') }}</span>
-												<span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
-										</template>
-										<GroupUserSingleTree
-												v-if="isShowGroupTree"
-												@singleClick="getGroupUserResult"
-												@dblClick="dblClickGroupUserResult"
-										/>
-								</el-tab-pane>
-						</el-tabs>
-				</div>
-				<div
-						v-if="
-            searchValue && searchValue.length > 0 && searchResult.length > 0
-          "
-						style="height: 100%; overflow: hidden"
-				>
-					<user-result
-							ref="userResult"
-							:contain-branch="containBranch"
-							:grid-data="searchResult"
-							:height="height"
-							:multiple="false"
-							@resultRowDblclick="resultRowDblclick"
-							@selectResult="getSelectUser"
-					/>
-				</div>
-			</el-main>
-		</el-container>
-	</div>
+  <div>
+    <el-container style="height: 395px">
+      <el-header style="font-size: 12px; height: 35px; padding: 0">
+        <el-autocomplete
+          v-model="filterText"
+          :fetch-suggestions="querySearch"
+          :placeholder="$t('departmentUserTree.pleaseEnterUserInformation')"
+          class="inline-input searchDepartmentUser"
+          style="width: 100%"
+          size="default"
+          @select="handleSelect"
+          @keyup.enter="clickSearch"
+        >
+          <template v-slot:append>
+            <el-button :icon="ElIconSearch" @click="clickSearch" />
+          </template>
+        </el-autocomplete>
+      </el-header>
+      <el-main style="padding: 10px; width: 100%">
+        <div
+          v-if="!searchValue || searchResult.length === 0"
+          style="padding-top: 5px; overflow: auto; width: auto; display: inline-block !important"
+        >
+          <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">
+              <template v-slot:label>
+                <span>{{ $t('departmentUserTreeInline.group') }}</span>
+                <span><GroupUser :active-tab="activeTab" @update-group-tree="updateGroupTree" /></span>
+              </template>
+              <GroupUserSingleTree
+                v-if="isShowGroupTree"
+                @singleClick="getGroupUserResult"
+                @dblClick="dblClickGroupUserResult"
+              />
+            </el-tab-pane>
+          </el-tabs>
+        </div>
+        <div
+          v-if="searchValue && searchValue.length > 0 && searchResult.length > 0"
+          style="height: 100%; overflow: hidden"
+        >
+          <user-result
+            ref="userResult"
+            :contain-branch="containBranch"
+            :grid-data="searchResult"
+            :height="height"
+            :multiple="false"
+            @resultRowDblclick="resultRowDblclick"
+            @selectResult="getSelectUser"
+          />
+        </div>
+      </el-main>
+    </el-container>
+  </div>
 </template>
 
 <script>
-import {Search as ElIconSearch} from '@element-plus/icons-vue'
-import {$emit} from '../../utils/gogocodeTransfer'
+import { Search as ElIconSearch } from '@element-plus/icons-vue'
+import { $emit } from '../../utils/gogocodeTransfer'
 import localStorage from '../../../src/utils/local-storage'
 import UserResult from './search-result.vue'
 import utils from '../../utils/utils'
@@ -98,303 +91,285 @@ import GroupUserSingleTree from './group-user-single-tree.vue'
 import GroupUser from './group-user/group-user.vue'
 
 export default {
-	data() {
-		return {
-			filterText: '',
-			defaultProps: {
-				id: 'id',
-				label: 'showName',
-				children: 'children',
-				isLeaf: 'leaf',
-			},
-			searchParam: {
-				userField: null,
-				searchValue: null,
-				treeType: 'MAN_DEPARTMENT_TREE',
-				departmentInfo: null,
-			},
-			count: 0,
-			// 当前租户内是否包含分支机构。获得当前选中用户名称时，如果有分支，则需要将分支名称返回给用户，例如：张三(分支1)
-			containBranch: false,
-			// 公司节点的id
-			tenantNodeId: -1,
-			// 查询的用户属性集合
-			searchFields: [],
-			searchField: 'name',
-			// 查询的备选值
-			restaurants: [],
-			// 查询条件
-			searchValue: null,
-			// 用户的查询结果
-			searchResult: [],
-			searchStoreKey: 'searchDepartmentUser',
-			// 公司根节点信息
-			tenantInfo: {},
-			// 选择的用户原信息
-			selectUser: null,
-			// 封装后的用户信息，即用户结果
-			selectNodeInfo: null,
-			// 节点没有双击事件，手动实现双击事件，参数用来记录次数
-			notMultipleClickNum: null,
-			// 节点没有双击事件，手动实现双击事件，参数用来记录节点
-			notMultipleClickNode: null,
-			memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
-			// 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
-			memoryCacheData: [],
-			ElIconSearch,
-			activeTab: 'orgTree', // 当前页签
-			isShowGroupTree: true
-		}
-	},
-	name: 'InlineDepartmentUserSingleTree',
-	components: {
-		UserResult,
-		GroupUserSingleTree,
-		GroupUser
-	},
-	props: {
-		// 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
-		departmentInfo: {
-			type: Array,
-			default: null,
-		},
-		// 弹框的高度
-		height: {
-			type: String,
-			default: '300px',
-		},
-		// 是否需要显示虚拟用户
-		isNeedVirtualUser: {
-			type: Boolean,
-			default: false,
-		},
-	},
-	computed: {},
-	watch: {
-		filterText(val) {
-			if (!val) {
-				this.searchValue = val
-				// 清空查询内容时，重新加载整个树
-				if (this.departmentInfo && this.departmentInfo.length > 0) {
-					// 加载指定部门时，展开公司节点
-					this.loadPointDepartments(this)
-				} else {
-					// 加载整个组织结构树时，展开公司节点
-					this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
-				}
-			}
-		},
-	},
-	created() {
-		this.searchFields = this.getSearchUserFields()
-	},
-	mounted() {
-		var searchDepartmentUser = localStorage.getObject(this.searchStoreKey)
-		if (searchDepartmentUser) {
-			this.restaurants = searchDepartmentUser
-		} else {
-			this.restaurants = []
-		}
-		this.getMemoryCacheData('departmentUser')
-	},
-	methods: {
-		...utils,
-		...departmentUserTreeSingleService,
-		...memoryCacheUtils,
-		// selectUser(row, column, event) {
-		//   this.packageSelectResult(row)
-		// },
-		handleNodeClick(data, node, nodeTree) {
-			if (this.isUserNode(data)) {
-				const user = JSON.parse(data.data)
-				user.tenantName = this.tenantInfo.tenantName
-				user.tenantCode = this.tenantInfo.code
-				// 搜索选中记忆
-				this.setMemoryCacheData(user, 'departmentUser')
-				// 点击的是用户节点，并且是单选树时，点击部门节点直接关闭弹框
-				this.packageSelectResult(user)
-				if (
-						this.notMultipleClickNode &&
-						this.notMultipleClickNode.id === node.id
-				) {
-					this.notMultipleClickNum++
-					// 表示第二次点击
-					// 判断次数
-					if (this.notMultipleClickNum === 2) {
-						this.notMultipleClickNum = 0
-						this.notMultipleClickNode = null
-						// 关闭弹窗
-						$emit(this, 'result', this.selectNodeInfo)
-					}
-				} else {
-					this.notMultipleClickNode = node
-					this.notMultipleClickNum = 1
-				}
-				const that = this
-				setTimeout(function () {
-					that.notMultipleClickNum = 0
-					that.notMultipleClickNode = null
-				}, 300)
-			}
-		},
-		packageSelectResult(user) {
-			let name = user.name
-			if (user.enName && user.enName.trim() !== '') {
-				name = name + '(' + user.enName + ')'
-			}
-			if (this.containBranch && user.subCompanyName) {
-				// 如果包含分支机构，则拼接分支机构名称
-				// name = name + '（' + user.subCompanyName + '）'
-			}
-			const selectNodeInfo = {
-				id: user.id,
-				name: name,
-				zhName: user.name,
-				loginName: user.loginName,
-				email: user.email,
-				telephone: user.telephone,
-				containBranch: this.containBranch,
-				user: user,
-				enName: user.enName,
-				subCompanyName: user.subCompanyName,
-			}
-			// 表示是勾选单选按钮或 选中树节点
-			this.selectNodeInfo = selectNodeInfo
-		},
-		isUserNode(data) {
-			// 当前节点不是公司节点，节点类型是用户类型时，表示点击的是用户节点
-			return (
-					data.id !== this.tenantNodeId &&
-					data.nodeType &&
-					data.nodeType === 'USER'
-			)
-		},
-		confirmSelectUser() {
-			if (this.selectNodeInfo) {
-				$emit(this, 'result', this.selectNodeInfo)
-			} else {
-				this.$alert(
-						this.$t('imatrixUIMessage.pleaseSelectPersonnel'),
-						this.$t('imatrixUIMessage.tips'),
-						{
-							confirmButtonText: this.$t('imatrixUIPublicModel.sure'),
-						}
-				)
-			}
-		},
-		// 是否选中了公司节点
-		isSelectTenantNode(dataId) {
-			return (
-					dataId === this.tenantNodeId &&
-					(!this.departmentInfo || this.departmentInfo.length === 0)
-			)
-		},
-		// 初始化树 或 点击三角展开节点时动态加载子节点
-		loadNode(node, resolve) {
-			var parentId = 0
-			var parentNodeId = '0'
-			if (node.level === 0) {
-				// 表示初始化树
-				parentId = 0
-				parentNodeId = parentId + ''
-			} else {
-				parentId = node.data.id
-				parentNodeId = node.data.nodeId
-			}
-			var checkedKeys = []
-			if (this.$refs.deparmentUserTree) {
-				checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
-			}
-			// 初始化部门人员树
-			this.initLoadDepartment(
-					parentId,
-					node,
-					resolve,
-					checkedKeys,
-					parentNodeId
-			)
-		},
-		// renderContent(h, {node, data, store}) {
-		// 	var className
-		// 	if (node.data.id === -1 || node.data.branch) {
-		// 		// node.id ===-1表示公司节点，node.branch表示是分支机构节点
-		// 		className = 'Menu'
-		// 	} else if (node.data.id === -2 || node.data.id === -3) {
-		// 		// node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
-		// 		className = 'Tickets'
-		// 	} else if (node.data.nodeType === 'USER') {
-		// 		className = 'User'
-		// 	} else {
-		// 		className = 'Date'
-		// 	}
-		// 	return h(
-		// 			'span',
-		// 			h('el-icon', h(className)),
-		// 			h('span', {title: node.label}, node.label)
-		// 	)
-		// 	// return (
-		// 	//   `<span>
-		// 	//     <i class={className}></i>
-		// 	//     <span title={node.label}>{node.label}</span>
-		// 	//   </span>`
-		// 	// )
-		// },
-		getSelectUser(selectUser) {
-			// console.log('getSelectUser==', selectUser)
-			this.selectUser = selectUser
-			// 搜索选中记忆
-			this.setMemoryCacheData(selectUser, 'departmentUser')
-			// true参数表示是否是勾选单选框，是勾选单选框时不关闭弹框
-			this.packageSelectResult(selectUser)
-		},
-		resultRowDblclick(user) {
-			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'],
+  data() {
+    return {
+      filterText: '',
+      defaultProps: {
+        id: 'id',
+        label: 'showName',
+        children: 'children',
+        isLeaf: 'leaf'
+      },
+      searchParam: {
+        userField: null,
+        searchValue: null,
+        treeType: 'MAN_DEPARTMENT_TREE',
+        departmentInfo: null
+      },
+      count: 0,
+      // 当前租户内是否包含分支机构。获得当前选中用户名称时，如果有分支，则需要将分支名称返回给用户，例如：张三(分支1)
+      containBranch: false,
+      // 公司节点的id
+      tenantNodeId: -1,
+      // 查询的用户属性集合
+      searchFields: [],
+      searchField: 'name',
+      // 查询的备选值
+      restaurants: [],
+      // 查询条件
+      searchValue: null,
+      // 用户的查询结果
+      searchResult: [],
+      searchStoreKey: 'searchDepartmentUser',
+      // 公司根节点信息
+      tenantInfo: {},
+      // 选择的用户原信息
+      selectUser: null,
+      // 封装后的用户信息，即用户结果
+      selectNodeInfo: null,
+      // 节点没有双击事件，手动实现双击事件，参数用来记录次数
+      notMultipleClickNum: null,
+      // 节点没有双击事件，手动实现双击事件，参数用来记录节点
+      notMultipleClickNode: null,
+      memoryCacheKey: 'DEPARTMENT_USER_MEMORY_KEY',
+      // 记忆选择数据, 搜索框获得焦点后，下拉显示最近选中的10个人，倒序排列，最后选中的在最上面显示。
+      memoryCacheData: [],
+      ElIconSearch,
+      activeTab: 'orgTree', // 当前页签
+      isShowGroupTree: true
+    }
+  },
+  name: 'InlineDepartmentUserSingleTree',
+  components: {
+    UserResult,
+    GroupUserSingleTree,
+    GroupUser
+  },
+  props: {
+    // 显示指定部门节点及其子节点，不传该属性，表示显示整个组织结构树
+    departmentInfo: {
+      type: Array,
+      default: null
+    },
+    // 弹框的高度
+    height: {
+      type: String,
+      default: '300px'
+    },
+    // 是否需要显示虚拟用户
+    isNeedVirtualUser: {
+      type: Boolean,
+      default: false
+    }
+  },
+  computed: {},
+  watch: {
+    filterText(val) {
+      if (!val) {
+        this.searchValue = val
+        // 清空查询内容时，重新加载整个树
+        if (this.departmentInfo && this.departmentInfo.length > 0) {
+          // 加载指定部门时，展开公司节点
+          this.loadPointDepartments(this)
+        } else {
+          // 加载整个组织结构树时，展开公司节点
+          this.loadDepartment(this.tenantNodeId, this.tenantNodeId + '')
+        }
+      }
+    }
+  },
+  created() {
+    this.searchFields = this.getSearchUserFields()
+  },
+  mounted() {
+    var searchDepartmentUser = localStorage.getObject(this.searchStoreKey)
+    if (searchDepartmentUser) {
+      this.restaurants = searchDepartmentUser
+    } else {
+      this.restaurants = []
+    }
+    this.getMemoryCacheData('departmentUser')
+  },
+  methods: {
+    ...utils,
+    ...departmentUserTreeSingleService,
+    ...memoryCacheUtils,
+    // selectUser(row, column, event) {
+    //   this.packageSelectResult(row)
+    // },
+    handleNodeClick(data, node, nodeTree) {
+      if (this.isUserNode(data)) {
+        const user = JSON.parse(data.data)
+        user.tenantName = this.tenantInfo.tenantName
+        user.tenantCode = this.tenantInfo.code
+        // 搜索选中记忆
+        this.setMemoryCacheData(user, 'departmentUser')
+        // 点击的是用户节点，并且是单选树时，点击部门节点直接关闭弹框
+        this.packageSelectResult(user)
+        if (this.notMultipleClickNode && this.notMultipleClickNode.id === node.id) {
+          this.notMultipleClickNum++
+          // 表示第二次点击
+          // 判断次数
+          if (this.notMultipleClickNum === 2) {
+            this.notMultipleClickNum = 0
+            this.notMultipleClickNode = null
+            // 关闭弹窗
+            $emit(this, 'result', this.selectNodeInfo)
+          }
+        } else {
+          this.notMultipleClickNode = node
+          this.notMultipleClickNum = 1
+        }
+        const that = this
+        setTimeout(function () {
+          that.notMultipleClickNum = 0
+          that.notMultipleClickNode = null
+        }, 300)
+      }
+    },
+    packageSelectResult(user) {
+      let name = user.name
+      if (user.enName && user.enName.trim() !== '') {
+        name = name + '(' + user.enName + ')'
+      }
+      if (this.containBranch && user.subCompanyName) {
+        // 如果包含分支机构，则拼接分支机构名称
+        // name = name + '（' + user.subCompanyName + '）'
+      }
+      const selectNodeInfo = {
+        id: user.id,
+        name: name,
+        zhName: user.name,
+        loginName: user.loginName,
+        email: user.email,
+        telephone: user.telephone,
+        containBranch: this.containBranch,
+        user: user,
+        enName: user.enName,
+        subCompanyName: user.subCompanyName,
+        divisionManager: user.divisionManager
+      }
+      // 表示是勾选单选按钮或 选中树节点
+      this.selectNodeInfo = selectNodeInfo
+    },
+    isUserNode(data) {
+      // 当前节点不是公司节点，节点类型是用户类型时，表示点击的是用户节点
+      return data.id !== this.tenantNodeId && data.nodeType && data.nodeType === 'USER'
+    },
+    confirmSelectUser() {
+      if (this.selectNodeInfo) {
+        $emit(this, 'result', this.selectNodeInfo)
+      } else {
+        this.$alert(this.$t('imatrixUIMessage.pleaseSelectPersonnel'), this.$t('imatrixUIMessage.tips'), {
+          confirmButtonText: this.$t('imatrixUIPublicModel.sure')
+        })
+      }
+    },
+    // 是否选中了公司节点
+    isSelectTenantNode(dataId) {
+      return dataId === this.tenantNodeId && (!this.departmentInfo || this.departmentInfo.length === 0)
+    },
+    // 初始化树 或 点击三角展开节点时动态加载子节点
+    loadNode(node, resolve) {
+      var parentId = 0
+      var parentNodeId = '0'
+      if (node.level === 0) {
+        // 表示初始化树
+        parentId = 0
+        parentNodeId = parentId + ''
+      } else {
+        parentId = node.data.id
+        parentNodeId = node.data.nodeId
+      }
+      var checkedKeys = []
+      if (this.$refs.deparmentUserTree) {
+        checkedKeys = this.$refs.deparmentUserTree.getCheckedKeys()
+      }
+      // 初始化部门人员树
+      this.initLoadDepartment(parentId, node, resolve, checkedKeys, parentNodeId)
+    },
+    // renderContent(h, {node, data, store}) {
+    // 	var className
+    // 	if (node.data.id === -1 || node.data.branch) {
+    // 		// node.id ===-1表示公司节点，node.branch表示是分支机构节点
+    // 		className = 'Menu'
+    // 	} else if (node.data.id === -2 || node.data.id === -3) {
+    // 		// node.id ===-2表示集团公司无部门用户节点,node.id ===-3表示是分支机构无部门用户节点
+    // 		className = 'Tickets'
+    // 	} else if (node.data.nodeType === 'USER') {
+    // 		className = 'User'
+    // 	} else {
+    // 		className = 'Date'
+    // 	}
+    // 	return h(
+    // 			'span',
+    // 			h('el-icon', h(className)),
+    // 			h('span', {title: node.label}, node.label)
+    // 	)
+    // 	// return (
+    // 	//   `<span>
+    // 	//     <i class={className}></i>
+    // 	//     <span title={node.label}>{node.label}</span>
+    // 	//   </span>`
+    // 	// )
+    // },
+    getSelectUser(selectUser) {
+      // console.log('getSelectUser==', selectUser)
+      this.selectUser = selectUser
+      // 搜索选中记忆
+      this.setMemoryCacheData(selectUser, 'departmentUser')
+      // true参数表示是否是勾选单选框，是勾选单选框时不关闭弹框
+      this.packageSelectResult(selectUser)
+    },
+    resultRowDblclick(user) {
+      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']
 }
 </script>
 
 <style>
 .searchResult {
-	color: red;
+  color: red;
 }
 
 .inline-select-custom {
-	width: 100px;
+  width: 100px;
 }
 
 .inline-input-custom {
-	width: 98%;
+  width: 98%;
 }
 
 .searchDepartmentUser {
-	width: 250px;
+  width: 250px;
 }
 
 .el-autocomplete-suggestion.el-popper {
-	min-width: 300px;
+  min-width: 300px;
 }
 </style>