agilebuilder-ui 1.0.0

package/packages/organization-input/src/organization-input.vue

@@ -0,0 +1,579 @@
+<template>
+  <span style="width: 100%">
+    <template v-if="disabled">
+      <el-input
+		      :disabled="true"
+		      :model-value="value"
+		      :readonly="true"
+		      :size="size"
+		      type="text"
+      >
+        <template v-slot:append>
+	        <el-icon v-slot:suffix class="el-input__icon"><el-icon-search/></el-icon>
+	        <el-icon v-slot:suffix class="el-input__icon"><el-icon-delete/></el-icon>
+        </template>
+      </el-input>
+    </template>
+    <template v-else>
+      <el-input
+		      :model-value="value"
+		      :readonly="true"
+		      :size="size"
+		      type="text"
+		      @click="showOrganizationTree(false)"
+      >
+        <template v-slot:append>
+          <el-icon class="el-input__icon" @click="showOrganizationTree(false)"><el-icon-search/></el-icon>
+          <el-icon class="el-input__icon" @click="emptyOrganizationResult()"><el-icon-delete/></el-icon>
+        </template>
+      </el-input>
+    </template>
+	  <!-- 部门人员树 -->
+    <department-user-tree
+		    v-if="treeType && treeType === 'DeptUserTree' && showOrganizationTreeFlag"
+		    :department-info="departmentInfo"
+		    :multiple="typeof multiple === 'undefined' ? false : multiple"
+		    :search-field="searchField"
+		    :select-user-info="selectOrganizationInfo"
+		    :separator="separator"
+		    @close="closeOrganizationTree"
+    />
+	  <!-- 部门树 -->
+    <department-tree
+		    v-if="treeType && treeType === 'DeptTree' && showOrganizationTreeFlag"
+		    :check-strictly="
+        typeof checkStrictly === 'undefined' ? false : checkStrictly
+      "
+		    :multiple="typeof multiple === 'undefined' ? false : multiple"
+		    :search-field="searchField"
+		    :select-department-info="selectOrganizationInfo"
+		    :separator="separator"
+		    width="30%"
+		    @close="closeOrganizationTree"
+    />
+	  <!-- 工作组树 -->
+    <workgroup-tree
+		    v-if="treeType && treeType === 'WgTree' && showOrganizationTreeFlag"
+		    :multiple="typeof multiple === 'undefined' ? false : multiple"
+		    :search-field="searchField"
+		    :select-workgroup-info="selectOrganizationInfo"
+		    :separator="separator"
+		    width="30%"
+		    @close="closeOrganizationTree"
+    />
+	  <!-- 工作组人员树 -->
+    <workgroup-user-tree
+		    v-if="treeType && treeType === 'WgUserTree' && showOrganizationTreeFlag"
+		    :branch-info="departmentInfo"
+		    :multiple="typeof multiple === 'undefined' ? false : multiple"
+		    :search-field="searchField"
+		    :select-user-info="selectOrganizationInfo"
+		    :separator="separator"
+		    width="30%"
+		    @close="closeOrganizationTree"
+    />
+	  <!-- <remove-user
+						v-if="treeType && (treeType === 'DeptUserTree' || treeType === 'WgUserTree') && showRemoveComponent"
+						:select-user-info="selectOrganizationInfo"
+						:search-field="searchField"
+						:separator="separator"
+						@close="closeRemoveComponent"
+					/>
+					<remove-department
+						v-if="treeType && treeType === 'DeptTree' && showRemoveComponent"
+						:select-department-info="selectOrganizationInfo"
+						:search-field="searchField"
+						:separator="separator"
+						@close="closeRemoveComponent"
+					/> -->
+	  <!-- <remove-workgroup
+						v-if="treeType && treeType === 'WgTree' && showRemoveComponent"
+						:select-workgroup-info="selectOrganizationInfo"
+						:search-field="searchField"
+						:separator="separator"
+						@close="closeRemoveComponent"
+					/> -->
+  </span>
+</template>
+
+<script>
+import {Delete as ElIconDelete, Search as ElIconSearch,} from '@element-plus/icons-vue'
+import {$emit} from '../../utils/gogocodeTransfer'
+// import Vue from 'vue'
+import {getPropNameWhenJoinTable, setEntityFieldValue,} from '../../../src/utils/util'
+
+export default {
+	components: {
+		ElIconSearch,
+		ElIconDelete,
+	},
+	name: 'OrganizationInput',
+	model: {
+		prop: 'value',
+		event: 'input',
+	},
+	props: {
+		value: {
+			type: String,
+			default: '',
+		},
+		// 是否多选
+		multiple: {
+			type: Boolean,
+			default: false,
+		},
+		// 是否 “不选中” 子部门
+		checkStrictly: {
+			type: Boolean,
+			default: false,
+		},
+		// 树类型 部门人员树DeptUserTree、部门树DeptTree、工作组树WgTree、工作组人员树WgUserTree
+		treeType: {
+			type: String,
+			default: 'DeptUserTree',
+		},
+		// 是否禁用
+		disabled: {
+			type: Boolean,
+			default: false,
+		},
+		// 字段与组织结构对应信息集合，格式为：[{type:'loginName',model:'字段名'}]
+		// 人员树时，type的可选值有：id、name、loginName、email、telephone、mainDeptName、mainDeptId、subCompanyName、subCompanyId
+		// 部门/工作组树时：type的可选值有：id、name、code
+		fields: {
+			type: Array,
+			default: null,
+		},
+		// 当前表单数据信息
+		models: {
+			type: Object,
+			default: null,
+		},
+		// 文本框大小large/medium/small/mini
+		size: {
+			type: String,
+			default: '',
+		},
+		// 列表组件行编辑使用，sql查询时数据表名称，用于自定义系统中列表组件中字段多表查询带有别名时，将点"."改成两个下划线"__"时使用
+		tableName: {
+			type: String,
+			default: null,
+		},
+		// 列表组件行编辑使用，是否是关联表，用于确定属性名是否需要拼接tableName
+		isJoinTable: {
+			type: Boolean,
+			default: false,
+		},
+		// 指定部门或者工作组
+		departmentInfo: {
+			type: Array,
+			default: null,
+		},
+		// 多选树时结果之间的分隔符，默认是逗号分隔
+		separator: {
+			type: String,
+			default: ',',
+		},
+	},
+	data() {
+		return {
+			showOrganizationTreeFlag: false, // 选择组织树所用
+			isAppendResult: false, // 是否添加用户、部门、工作组，默认是替换，false表示替换选择的结果，true表示追加选择的结果
+			showRemoveComponent: false, // 实现显示移除用户、部门、工作组组件
+			selectOrganizationInfo: null, // 已选择集合，多个信息之间以逗号隔开
+			searchField: null, // 已选的集合是什么内容，id、loginName(登录名)、name(用户名称/部门名称/工作组名称)、code(部门编码/工作组编码)、email(邮箱)、telephone(电话)等等
+			selectOrganizationAllInfo: {}, // 选择的所有信息,{id:'xx',name:'xx',loginName:'xx',code:'xx',email:'xx',telephone:'xx'}
+		}
+	},
+	created() {
+	},
+	methods: {
+		// 打开组织树
+		showOrganizationTree() {
+			let isMulti = this.multiple
+			if (typeof isMulti === 'undefined') {
+				isMulti = false
+			}
+			if (isMulti === true) {
+				// 多选时才需要显示结果集合
+				this.getSelectInfo()
+			}
+			this.$emit('focus')
+			this.showOrganizationTreeFlag = true
+		},
+		getPropName(prop, isJoinTable, tableName) {
+			return getPropNameWhenJoinTable(prop, isJoinTable, tableName)
+		},
+		// 清空已选的结果
+		emptyOrganizationResult() {
+			const orgFields = this.fields
+			if (orgFields && orgFields.length > 0) {
+				orgFields.forEach((orgField) => {
+					// orgDataType的值：
+					// 人员时：id、name、loginName、email、telephone
+					// 部门或工作组时：id、name
+					const model = this.getPropName(orgField.model)
+					this.setValue(model, null)
+				})
+				this.selectOrganizationAllInfo = {}
+				this.selectOrganizationInfo = null
+				this.searchField = null
+			}
+		},
+		// 关闭组织树
+		closeOrganizationTree(selectNodeInfo) {
+			if (selectNodeInfo) {
+				// 是否是多选树
+				this.setOrganizationData(selectNodeInfo)
+			}
+			this.showOrganizationTreeFlag = false
+		},
+		setOrganizationData(orgData, isRemove, removeItems) {
+			let isMulti = this.multiple
+			if (typeof isMulti === 'undefined') {
+				isMulti = false
+			}
+			const treeType = this.treeType
+			const orgFields = this.fields
+			if (orgFields && orgFields.length > 0) {
+				orgFields.forEach((orgField) => {
+					// orgDataType的值：
+					// 人员时：id、name、loginName、email、telephone
+					// 部门或工作组时：id、name、code
+					const orgDataType = orgField.type
+					const orgSelectData = this.getOrgSelectData(
+							orgDataType,
+							orgData,
+							this.isUserTree(treeType),
+							isMulti
+					)
+					const model = this.getPropName(orgField.model)
+					this.getOrgDataModel(
+							model,
+							orgSelectData,
+							isMulti,
+							orgDataType,
+							isRemove,
+							removeItems
+					)
+				})
+			}
+		},
+		/**
+		 * @param orgDataType 字段属性：id、name、loginName、code、email、telephone
+		 */
+		getOrgDataModel(
+				model,
+				orgSelectData,
+				isMulti,
+				orgDataType,
+				isRemove,
+				removeItems
+		) {
+			if (isMulti) {
+				// 表示是替换或添加操作
+				const orgResult = this.getModelValue(model)
+				// 表示替换结果
+				this.selectOrganizationAllInfo[orgDataType] = orgSelectData
+				this.setValue(model, orgSelectData)
+				// 参数分别为：属性名、原来的值、新替换的值
+				this.$emit('replace', model, orgResult, orgSelectData)
+			} else {
+				this.setValue(model, orgSelectData)
+			}
+		},
+		getModelValue(model) {
+			let modelValue = ''
+			if (this.isJoinTable === false && model && model.indexOf('.') > 0) {
+				const parentObj = this.getParentObject(model, this.models)
+				modelValue = parentObj[model.substring(model.lastIndexOf('.') + 1)]
+			} else {
+				model = this.getPropName(model)
+				modelValue = this.models[model]
+			}
+			return modelValue
+		},
+		// 是否是人员树
+		isUserTree(treeType) {
+			return treeType === 'DeptUserTree' || treeType === 'WgUserTree'
+		},
+		// 获得组织树选择的结果
+		getOrgSelectData(orgDataType, selectNodeInfo, isUserTree, isMulti) {
+			if (isMulti === true) {
+				// 多选树时
+				if (orgDataType === 'id') {
+					if (isUserTree) {
+						return selectNodeInfo.userIds.join(this.separator)
+					} else {
+						return selectNodeInfo.ids.join(this.separator)
+					}
+				} else if (orgDataType === 'name') {
+					if (isUserTree) {
+						return selectNodeInfo.userNames.join(this.separator)
+					} else {
+						return selectNodeInfo.names.join(this.separator)
+					}
+				} else if (orgDataType === 'code') {
+					if (!isUserTree) {
+						return selectNodeInfo.codes.join(this.separator)
+					}
+				} else if (orgDataType === 'loginName') {
+					return selectNodeInfo.loginNames.join(this.separator)
+				} else if (orgDataType === 'email') {
+					return selectNodeInfo.emails.join(this.separator)
+				} else if (orgDataType === 'telephone') {
+					return selectNodeInfo.telephones.join(this.separator)
+				} else if (orgDataType === 'mainDeptName') {
+					// 正职部门名称
+					const mainDeptNames = []
+					if (isUserTree) {
+						const users = selectNodeInfo.users
+						if (users) {
+							users.forEach((user) => {
+								mainDeptNames.push(user.mainDepartmentName)
+							})
+						}
+					}
+					return mainDeptNames.join(this.separator)
+				} else if (orgDataType === 'mainDeptId') {
+					// 正职部门id
+					const mainDeptIds = []
+					if (isUserTree) {
+						const users = selectNodeInfo.users
+						if (users) {
+							users.forEach((user) => {
+								if (user.mainDepartmentId) {
+									mainDeptIds.push(user.mainDepartmentId)
+								}
+							})
+						}
+					}
+					return mainDeptIds.join(this.separator)
+				} else if (orgDataType === 'mainDeptCode') {
+					// 正职部门code
+					const mainDeptCodes = []
+					if (isUserTree) {
+						const users = selectNodeInfo.users
+						if (users) {
+							users.forEach((user) => {
+								if (user.mainDepartmentCode) {
+									mainDeptCodes.push(user.mainDepartmentCode)
+								}
+							})
+						}
+					}
+					return mainDeptCodes.join(this.separator)
+				} else if (orgDataType === 'subCompanyName') {
+					// 分支名称
+					const branchNames = []
+					if (isUserTree) {
+						const users = selectNodeInfo.users
+						if (users) {
+							users.forEach((user) => {
+								if (user.subCompanyName) {
+									branchNames.push(user.subCompanyName)
+								}
+							})
+						}
+					}
+					return branchNames.join(this.separator)
+				} else if (orgDataType === 'subCompanyId') {
+					// 分支id
+					const branchDeptIds = []
+					if (isUserTree) {
+						const users = selectNodeInfo.users
+						if (users) {
+							users.forEach((user) => {
+								if (user.subCompanyId) {
+									branchDeptIds.push(user.subCompanyId)
+								}
+							})
+						}
+					}
+					return branchDeptIds.join(this.separator)
+				}
+			} else {
+				// 单选树时
+				if (orgDataType === 'mainDeptName') {
+					// 正职部门名称
+					let mainDeptName = null
+					if (isUserTree) {
+						const user = selectNodeInfo.user
+						if (user) {
+							mainDeptName = user.mainDepartmentName
+						}
+					}
+					return mainDeptName
+				} else if (orgDataType === 'mainDeptId') {
+					// 正职部门id
+					let mainDeptId = null
+					if (isUserTree) {
+						const user = selectNodeInfo.user
+						if (user) {
+							mainDeptId = user.mainDepartmentId
+						}
+					}
+					return mainDeptId
+				} else if (orgDataType === 'mainDeptCode') {
+					// 正职部门code
+					let mainDeptCode = null
+					if (isUserTree) {
+						const user = selectNodeInfo.user
+						if (user) {
+							mainDeptCode = user.mainDepartmentCode
+						}
+					}
+					return mainDeptCode
+				} else if (orgDataType === 'subCompanyName') {
+					// 分支名称
+					let branchName = null
+					if (isUserTree) {
+						const user = selectNodeInfo.user
+						if (user) {
+							branchName = user.subCompanyName
+						}
+					}
+					return branchName
+				} else if (orgDataType === 'subCompanyId') {
+					// 分支id
+					let branchId = null
+					if (isUserTree) {
+						const user = selectNodeInfo.user
+						if (user) {
+							branchId = user.subCompanyId
+						}
+					}
+					return branchId
+				} else {
+					return selectNodeInfo[orgDataType]
+				}
+			}
+		},
+		// 显示移除用户、部门、工作组组件
+		showMyRemoveComponent() {
+			this.getSelectInfo()
+			if (
+					!this.selectOrganizationInfo ||
+					this.selectOrganizationInfo === null ||
+					this.selectOrganizationInfo === ''
+			) {
+				this.$message({
+					showClose: true,
+					type: 'warning',
+					message: this.$t(
+							'imatrixUIMessage.organizationTreeNoResultNotRemove'
+					),
+				})
+			} else {
+				this.showRemoveComponent = true
+			}
+		},
+		getSelectInfo() {
+			const searchFields = [
+				'id',
+				'code',
+				'loginName',
+				'email',
+				'telephone',
+				'name',
+			]
+			const keys = Object.keys(this.selectOrganizationAllInfo)
+			if (keys.length === 0) {
+				// 表示是初始化时，从表单对象中获得信息
+				for (let i = 0; i < searchFields.length; i++) {
+					const prop = searchFields[i]
+					const fieldSettings = this.fields.filter((field) => {
+						return field.type === prop
+					})
+					if (fieldSettings && fieldSettings.length > 0) {
+						const fieldSetting = fieldSettings[0]
+						if (fieldSetting) {
+							const model = this.getPropName(fieldSetting.model)
+							const selectInfo = this.getModelValue(model)
+							if (selectInfo && selectInfo !== null && selectInfo !== '') {
+								this.selectOrganizationInfo = selectInfo
+								this.searchField = prop
+								break
+							}
+						}
+					}
+				}
+			} else {
+				// 表示是选择用户后
+				for (let i = 0; i < searchFields.length; i++) {
+					const prop = searchFields[i]
+					const selectInfo = this.selectOrganizationAllInfo[prop]
+					if (selectInfo && selectInfo !== null && selectInfo !== '') {
+						this.selectOrganizationInfo = selectInfo
+						this.searchField = prop
+						break
+					}
+				}
+			}
+		},
+		setValue(model, finallyOrgResult) {
+			if (this.models) {
+				if (this.isJoinTable === false && model && model.indexOf('.') > 0) {
+					const parentObj = this.getParentObject(model, this.models)
+					if (parentObj) {
+						setEntityFieldValue(
+								parentObj,
+								model.substring(model.lastIndexOf('.') + 1),
+								finallyOrgResult
+						)
+						// Vue.set(parentObj, model.substring(model.lastIndexOf('.') + 1), finallyOrgResult)
+					}
+				} else {
+					model = this.getPropName(model)
+					setEntityFieldValue(this.models, model, finallyOrgResult)
+					// Vue.set(this.models, model, finallyOrgResult)
+				}
+				console.log('this.value', this.models)
+				// 调用setValue事件
+				this.$emit('setValue', model, finallyOrgResult)
+				if (
+						finallyOrgResult === undefined ||
+						finallyOrgResult === null ||
+						finallyOrgResult === ''
+				) {
+					this.$emit( 'clear', model)
+				}
+			}
+		},
+		getParentObject(prop, models) {
+			const nestedProp = prop.split('.')
+			// 属性只有一个时父对象就是models
+			if (nestedProp.length === 1) {
+				return models
+			} else {
+				let parentObject
+				// 属性超过2个时先找到最后一层属性的父对象
+				for (let i = 0; i < nestedProp.length - 1; i++) {
+					if (i === 0) {
+						parentObject = this.getParentModelProp(nestedProp[i], models)
+					} else {
+						parentObject = this.getParentModelProp(nestedProp[i], parentObject)
+					}
+				}
+				return parentObject
+			}
+		},
+		getParentModelProp(prop, parentObj) {
+			if (!parentObj) {
+				parentObj = {}
+			}
+			if (!parentObj[prop]) {
+				parentObj[prop] = {}
+			}
+			return parentObj[prop]
+		},
+	},
+	emits: [
+		'replace',
+		'setValue',
+		'clear',
+		'focus',
+		'update:value',
+	],
+}
+</script>