agilebuilder-ui 1.1.65-tmp3 → 1.1.65-tmp30

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

@@ -1,619 +0,0 @@
-<template>
-  <span style="width: 100%" class="organization-input">
-    <template v-if="disabled">
-      <el-input
-        :disabled="true"
-        :model-value="value"
-        :readonly="true"
-        :size="size"
-        type="text"
-        :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-      >
-        <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"
-        :placeholder="$t('imatrixUIMessage.pleaseSelect')"
-        @click="showOrganizationTree(false)"
-        @change="changeEvent"
-      >
-        <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"
-      :limit-filter-column="limitFilterColumn"
-      @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"
-      :department-info="departmentInfo"
-      :select-department-info="selectOrganizationInfo"
-      :separator="separator"
-      :limit-filter-column="limitFilterColumn"
-      width="30%"
-      @close="closeOrganizationTree"
-    />
-    <!-- 工作组树 -->
-    <workgroup-tree
-      v-if="treeType && treeType === 'WgTree' && showOrganizationTreeFlag"
-      :multiple="typeof multiple === 'undefined' ? false : multiple"
-      :branch-info="departmentInfo"
-      :search-field="searchField"
-      :select-workgroup-info="selectOrganizationInfo"
-      :separator="separator"
-      :limit-filter-column="limitFilterColumn"
-      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"
-      :limit-filter-column="limitFilterColumn"
-      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 Vue from 'vue'
-import { getPropNameWhenJoinTable, setEntityFieldValue } from '../../../src/utils/util'
-import DepartmentUserTree from '../../department-user-tree/src/department-user-tree.vue'
-import DepartmentTree from '../../department-tree/src/department-tree.vue'
-export default {
-  components: {
-    ElIconSearch,
-    ElIconDelete,
-    DepartmentUserTree,
-    DepartmentTree
-  },
-  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: ','
-    },
-    // 是否打开树
-    openTree: {
-      type: Boolean,
-      default: true
-    },
-    // 当前表单变量数据信息
-    pageModels: {
-      type: Object,
-      default: null
-    },
-    // 根据变量限制部门时，根据部门表的哪个字段进行过滤，默认是code
-    limitFilterColumn: {
-      type: String,
-      default: 'code'
-    }
-  },
-  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: {
-    // change事件
-    changeEvent(value) {
-      this.$emit('change', value)
-    },
-    // 打开组织树
-    showOrganizationTree() {
-      if (this.openTree) {
-        let isMulti = this.multiple
-        if (typeof isMulti === 'undefined') {
-          isMulti = false
-        }
-        if (isMulti === true) {
-          // 多选时才需要显示结果集合
-          this.getSelectInfo()
-        }
-        this.$emit('focus')
-        this.showOrganizationTreeFlag = true
-        this.$emit('show-tree')
-      }
-    },
-    getPropName(prop, isJoinTable, tableName) {
-      if (prop && prop.startsWith('${')) {
-        // 格式是：${page.xxx} 或 ${data.xxx}
-        prop = prop.substring(prop.indexOf('.') + 1, prop.length - 1)
-      }
-      return getPropNameWhenJoinTable(prop, isJoinTable, tableName)
-    },
-    getPropType(prop) {
-      let type = 'data'
-      if (prop && prop.startsWith('${')) {
-        // 格式是：${page.xxx} 或 ${data.xxx}
-        type = prop.substring(2, prop.indexOf('.'))
-      }
-      return type
-    },
-    // 清空已选的结果
-    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)
-          const propType = this.getPropType(orgField.model)
-          this.setValue(model, null, propType)
-        })
-        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)
-          const propType = this.getPropType(orgField.model)
-          this.getOrgDataModel(model, orgSelectData, isMulti, orgDataType, isRemove, removeItems, propType)
-        })
-      }
-    },
-    /**
-     * @param orgDataType 字段属性：id、name、loginName、code、email、telephone
-     */
-    getOrgDataModel(model, orgSelectData, isMulti, orgDataType, isRemove, removeItems, propType) {
-      if (isMulti) {
-        // 表示是替换或添加操作
-        const orgResult = this.getModelValue(model, propType)
-        // 表示替换结果
-        this.selectOrganizationAllInfo[orgDataType] = orgSelectData
-        this.setValue(model, orgSelectData, propType)
-        // 参数分别为：属性名、原来的值、新替换的值
-        this.$emit('replace', model, orgResult, orgSelectData)
-      } else {
-        this.setValue(model, orgSelectData, propType)
-      }
-    },
-    getModelValue(model, propType) {
-      let models = this.models
-      if (propType && propType === 'page') {
-        models = this.pageModels
-      }
-      let modelValue = ''
-      if (this.isJoinTable === false && model && model.indexOf('.') > 0) {
-        const parentObj = this.getParentObject(model, models)
-        modelValue = parentObj[model.substring(model.lastIndexOf('.') + 1)]
-      } else {
-        const name = this.getPropName(model)
-        if (propType && propType === 'page') {
-          modelValue = models ? models[name] : null
-        } else {
-          modelValue = models[name]
-        }
-      }
-      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' || orgDataType === 'mainDeptName') {
-          // 正职部门code或名称
-          // 这里的orgDataType是mainDeptCode或mainDeptName
-          // 需要根据orgDataType来判断返回的值
-          // 如果是mainDeptCode，则返回mainDepartmentCode，如果是mainDeptName，则返回mainDepartmentName
-          const mainDeptColumn = []
-          const key = orgDataType === 'mainDeptCode' ? 'mainDepartmentCode' : 'mainDepartmentName'
-          if (isUserTree) {
-            const users = selectNodeInfo.users
-            if (users) {
-              users.forEach((user) => {
-                if (user[key]) {
-                  mainDeptColumn.push(user[key])
-                }
-              })
-            }
-          }
-          return mainDeptColumn.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' || orgDataType === 'subCompanyCode') {
-          // 分支id或code
-          const branchDeptInfos = []
-          if (isUserTree) {
-            const users = selectNodeInfo.users
-            if (users) {
-              users.forEach((user) => {
-                if (user[orgDataType]) {
-                  branchDeptInfos.push(user[orgDataType])
-                }
-              })
-            }
-          }
-          return branchDeptInfos.join(this.separator)
-        } else if (orgDataType === 'divisionManager' || orgDataType === 'divisionManagerName') {
-          let divisionManagerArr = []
-          if (isUserTree) {
-            if (selectNodeInfo[orgDataType] && selectNodeInfo[orgDataType].length > 0) {
-              divisionManagerArr = selectNodeInfo[orgDataType]
-            }
-          }
-          if (divisionManagerArr && divisionManagerArr.length > 0) {
-            return divisionManagerArr.join(this.separator)
-          }
-          return null
-        }
-      } 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' || orgDataType === 'mainDeptName') {
-          // 正职部门code或名称
-          // 这里的orgDataType是mainDeptCode或mainDeptName
-          // 需要根据orgDataType来判断返回的值
-          // 如果是mainDeptCode，则返回mainDepartmentCode，如果是mainDeptName，则返回mainDepartmentName
-          const key = orgDataType === 'mainDeptCode' ? 'mainDepartmentCode' : 'mainDepartmentName'
-          // 正职部门code
-          let mainDeptColumn = null
-          if (isUserTree) {
-            const user = selectNodeInfo.user
-            if (user) {
-              mainDeptColumn = user[key]
-            }
-          }
-          return mainDeptColumn
-        } 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 propType = this.getPropType(fieldSetting.model)
-              const selectInfo = this.getModelValue(model, propType)
-              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, propType) {
-      if (!propType) {
-        propType = this.getPropType(model)
-      }
-      let models = this.models
-      if (propType && propType === 'page') {
-        models = this.pageModels
-      }
-      this.setEntityValue(model, finallyOrgResult, models)
-    },
-    setEntityValue(model, finallyOrgResult, models) {
-      if (models) {
-        if (this.isJoinTable === false && model && model.indexOf('.') > 0) {
-          const parentObj = this.getParentObject(model, models)
-          if (parentObj) {
-            setEntityFieldValue(parentObj, model.substring(model.lastIndexOf('.') + 1), finallyOrgResult)
-          }
-        } else {
-          const name = this.getPropName(model)
-          setEntityFieldValue(models, name, finallyOrgResult)
-        }
-        console.log('this.value===models=', 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', 'change']
-}
-</script>
-<style lang="css">
-.organization-input .el-input-group__append {
-  padding: 0 10px 0 0;
-}
-</style>