agilebuilder-ui 1.0.7 → 1.0.8

package/packages/department-user-tree-mobile/src/dept-result.vue

@@ -0,0 +1,58 @@
+
+<template>
+<el-drawer v-model="isShowForm" direction="btt" size="80%" class="organization-tree">
+    <template #header>
+        <div style="text-align: center;">
+            {{$t('departmentTreeInline.selectResultTitle')}}
+        </div>
+    </template>
+    <template #default>
+        <el-tree
+        v-if="isShowForm"
+        ref="orgResultTreeRef"
+        :data="selectUsers"
+        node-key="nodeId"
+        >
+        <template #default="{ node, data }">
+            <div class="item-row">
+            <div class="item-label">{{ data.showName }}
+            <span v-if="data.nodeType && data.nodeType ==='USER'" style="color:#999">({{ data.loginName }}{{ getUserMainDeptName(data) ? '/'+getUserMainDeptName(data): ''}})</span>
+            <span v-if="data.parentNodeId !== '-1' && getDeptNamePath(data)" style="color:#999">({{ getDeptNamePath(data) }})</span>
+            </div>
+            <div class="item-side" @click="removeDept(data)">
+                <el-icon><DeleteFilled /></el-icon>
+            </div>
+            </div>
+        </template>
+        </el-tree>
+    </template>
+</el-drawer>
+</template>
+<script  setup lang="ts">
+import {
+  DeleteFilled
+} from '@element-plus/icons-vue'
+import { reactive,ref,onMounted, defineEmits } from 'vue'
+import { getUserMainDeptName, getDeptNamePath} from '../../utils/organization.ts'
+const props = defineProps({
+    selectUsers: {
+        type: Array<any>,
+        default: null
+    }
+})
+let isShowForm = ref(false)
+// onMounted(()=>{
+//     treeData.value = props.selectUsers.concat(props.selectDepts)
+// })
+const emits = defineEmits(['removeResult'])
+function removeDept (item) {
+    emits('removeResult', item )
+}
+
+function showResult() {
+    isShowForm.value = true
+}
+
+defineExpose({showResult})
+
+</script>

package/packages/index.js

@@ -33,6 +33,10 @@ import MultipartUpload from './multipart-upload'
 import RichEditor from './rich-editor'
 import SecretInfo from './secret-info'
 import IntervalSelection from './IntervalSelection'
+import DepartmentTreeMobile from './department-tree-mobile'
+import DepartmentUserTreeMobile from './department-user-tree-mobile'
+import SuperIcon from './super-icon'
+import * as ElementPlusIconsVue from "@element-plus/icons-vue"
 // 将所有组件都存储起来,方便后续统一注册
 const components = [
   Breadcrumb,
@@ -65,6 +69,9 @@ const components = [
   RichEditor,
   SecretInfo,
   IntervalSelection,
+  DepartmentTreeMobile,
+  DepartmentUserTreeMobile,
+  SuperIcon
 ]
 
 // 定义 install 方法，接收 Vue 作为参数。如果使用 use 注册插件，则所有的组件都将被注册
@@ -79,6 +86,10 @@ const install = function (Vue) {
   })
   // 将弹出页面方法注册到window对象上
   window['$plateform_openPage'] = openPage
+  // 注册Element UI所有图标
+  for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
+    Vue.component(key, component)
+  }
 }
 
 //  判断是否是直接引入vue的js文件，即全局引用可自动安装所有组件
@@ -115,6 +126,9 @@ export {
   MultipartUpload,
   RichEditor,
   SecretInfo,
+  DepartmentTreeMobile,
+  DepartmentUserTreeMobile,
+  SuperIcon
 }
 
 export default {

package/packages/super-icon/index.js

@@ -0,0 +1,6 @@
+import SuperIcon from './src/index.vue'
+SuperIcon.install = function (Vue) {
+  Vue.component('SuperIcon', SuperIcon)
+}
+
+export default SuperIcon

package/packages/super-icon/src/index.vue

@@ -0,0 +1,37 @@
+<template>
+  <span>
+    <template v-if="iconType === 'ElementUI'">
+    <el-icon><component 
+        :is="iconValue"
+      ></component></el-icon> 
+   </template>
+    <template v-else>
+      <i v-if="iconValue.indexOf('fa-')===0" :class="'fa '+iconValue"></i>
+      <img v-if="iconValue.indexOf('svg-')===0" :src="defaultShowImageAction+iconValue.substring(iconValue.indexOf('-')+1)"/>
+    </template>
+  </span>
+</template>
+<script  lang="ts">
+export default {
+  name: 'SuperIcon'
+}
+</script>
+
+<script  setup lang="ts">
+import { ref } from 'vue'
+const props = defineProps({
+  // 值为：ElementUI、custom
+    iconType: {
+      type: String,
+      default: 'custom'
+    },
+    iconValue: {
+      type: String,
+      required: true,
+      default: '',
+    }
+})
+const defaultShowImageAction = ref(window.$vueApp.config.globalProperties.baseAPI + '/component/super-form/show-image?serverPath=')
+
+</script>
+

package/packages/utils/organization.ts

@@ -0,0 +1,157 @@
+// 将选中的部门节点添加到结果集合中
+export function addSelectedUserInfo (selectNodeInfo, userData, containBranch) {
+  if (selectNodeInfo.userIds.indexOf(userData.id) < 0) {
+    // 表示集合中不存在该用户
+    selectNodeInfo.userIds.push(userData.id)
+    selectNodeInfo.loginNames.push(userData.loginName)
+    if (userData.email && userData.email !== '') {
+      selectNodeInfo.emails.push(userData.email)
+    }
+    if (userData.telephone && userData.telephone !== '') {
+      selectNodeInfo.telephones.push(userData.telephone)
+    }
+    if (userData.user) {
+      selectNodeInfo.users.push(userData.user)
+    } else {
+      selectNodeInfo.users.push(userData)
+    }
+    var name = userData.name
+    if (userData.enName && userData.enName !== '') {
+      name = name + '(' + userData.enName + ')'
+    }
+    // if (containBranch && userData.subCompanyName) {
+    //   // 如果包含分支机构，则拼接分支机构名称
+    //   name = name + '（' + userData.subCompanyName + '）'
+    // }
+    selectNodeInfo.userNames.push(name)
+    selectNodeInfo.userZhNames.push(userData.name)
+    selectNodeInfo.userEnNames.push(userData.enName ? userData.enName : '')
+  }
+}
+export function packageSelectResult (user, containBranch) {
+  let name = user.name
+  if (user.enName && user.enName.trim() !== '') {
+    name = name + '(' + user.enName + ')'
+  }
+  // if (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: containBranch,
+    user: user,
+    enName: user.enName ? user.enName : '',
+    subCompanyName: user.subCompanyName
+  }
+  // 表示是勾选单选按钮或 选中树节点
+  return selectNodeInfo
+}
+// 根据指定用户信息获得用户集合
+function getSelectUsers (searchField, selectUserInfo, separator) {
+  return new Promise((resolve, reject) => {
+    if (!searchField) {
+      resolve([])
+    } else if (!selectUserInfo) {
+      resolve([])
+    } else {
+      window['$vueApp'].config.globalProperties.$http.get(window['$vueApp'].config.globalProperties.baseAPI + '/component/organization-trees/select-users-mobile?searchField=' + searchField + '&selectUserInfo=' + selectUserInfo + '&separator=' + separator).then(users => {
+        resolve(users)
+      }).catch(error => {
+        reject(error)
+      })
+    }
+  })
+}
+// 部门人员树选中了组织结构树的根节点
+function packageAllUser () {
+  // 表示集合中不存在该用户，则封装该用户
+  const tenantNodeId = -1
+  var allUser = {
+    id: tenantNodeId,
+    name: '所有用户'
+  }
+  return allUser
+}
+// 工作组人员树选中了组织结构树的根节点
+function packageAllWgUser () {
+  // 表示集合中不存在该用户，则封装该用户
+  const tenantNodeId = -1
+  var allUser = {
+    id: tenantNodeId,
+    name: '所有工作组人员'
+  }
+  return allUser
+}
+export function initSelectUsers (searchField, selectUserInfo, separator) {
+  return new Promise((resolve, reject) => {
+    const selectDepts = []
+    if (selectUserInfo) {
+      if (selectUserInfo === '所有用户') {
+        // 表示已选择所有用户
+        selectDepts.push(packageAllUser())
+        resolve(selectDepts)
+      } else if (selectUserInfo === '所有工作组人员') {
+        selectDepts.push(packageAllWgUser())
+        resolve(selectDepts)
+      } else {
+        // 表示不是选择的所有用户
+        getSelectUsers(searchField, selectUserInfo, separator).then(users => {
+          resolve(users)
+        }).catch(error => {
+          reject(error)
+        })
+      }
+    } else {
+      resolve(selectDepts)
+    }
+  })
+}
+
+
+// import {getLanguageWithLocale} from '../../../src/utils/util'
+export function resizeScrollTargetHeightUtil () {
+  const pagePadding = 16
+  let height = window.innerHeight - pagePadding
+  const header = document.querySelector('.el-page-header')
+  const footer = document.querySelector('.mobile-tab')
+  if (header) {
+    height = height - 50
+  }
+  if (footer) {
+    height = height - 56
+  }
+  return height
+}
+
+
+export function  getUserMainDeptName (user) {
+let deptShowName = ''
+if (user && user.data) {
+  const userData = JSON.parse(user.data)
+  if (userData.mainDepartmentEnName && userData.mainDepartmentEnName !== '' && window['$locale'] && window['$locale'] !== 'cn') {
+    deptShowName = userData.mainDepartmentEnName
+  } else {
+    if (userData.mainDepartmentName && userData.mainDepartmentName !== '') {
+      deptShowName = userData.mainDepartmentName
+    }
+  }
+}
+return deptShowName
+}
+
+
+
+export function  getDeptNamePath (dept) {
+let deptShowName = ''
+if (dept && dept.data) {
+  const deptData = JSON.parse(dept.data)
+  deptShowName = deptData.namePath
+}
+return deptShowName
+}

package/src/i18n/langs/cn.js

@@ -133,6 +133,11 @@ const cn = {
         removeDepartment: '移除部门',
         selectedDept: '已选部门',
         namePath: '名称路径',
+        allCheck: '全选',
+        pleaseInputNameOrCode: '请输入名称/编码',
+        selectResultInfoHasSelect: '已选择:',
+        selectResultInfo: '{num}个部门(含子部门)',
+        selectResultTitle: '已选择信息'
     },
     // 用户树
     departmentUserTree: {
@@ -144,6 +149,8 @@ const cn = {
         searchFieldTelephone: '手机号',
         searchFieldJobNumber: '工号',
         searchFieldHonorificName: '尊称',
+        selectUserResultInfo: '{userNum}个用户',
+        selectDeptResultInfo: '{deptNum}个部门(含子部门)'
     },
     // 嵌入用户树
     departmentUserTreeInline: {

package/src/i18n/langs/en.js

@@ -135,6 +135,11 @@ const en = {
         removeDepartment: 'Remove Department',
         selectedDept: 'Selected Departments',
         namePath: 'Name Path',
+        allCheck: 'Check All',
+        pleaseInputNameOrCode: 'Please Input Name Or Code',
+        selectResultInfoHasSelect: 'Has select:',
+        selectResultInfo: '{num} departments (including sub departments)',
+        selectResultTitle: 'Has Select Result'
     },
     // 用户树
     departmentUserTree: {
@@ -146,6 +151,8 @@ const en = {
         searchFieldTelephone: 'Telephone',
         searchFieldJobNumber: 'Job Number',
         searchFieldHonorificName: 'Honorific',
+        selectUserResultInfo: '{useNum} Users',
+        selectDeptResultInfo: '{num} departments(including sub departments)'
     },
     // 嵌入用户树
     departmentUserTreeInline: {