three-trees-ui 1.0.0

package/packages/UserDialog/src/main.vue

@@ -0,0 +1,393 @@
+<template>
+  <div class="inputs">
+    <user-selector-dialog
+      v-if="!isMobile"
+      ref="userSelectorDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      :mode="mode"
+      @filter-type-change="handleFilterTypeChange"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @contact-group-change="loadContactUser"
+      @load-org-user="loadOrgUser"
+      @load-policy-user="loadPolicyUser"
+      @load-role-user="loadRoleUser"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('on-confirm', data)"
+    />
+    <user-selector-mobile-dialog
+      v-else
+      ref="userSelectorMobileDialog"
+      v-model="selectors"
+      :title="title"
+      :append-to-body="appendToBody"
+      :data="data"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :single="single"
+      :search-placeholder="searchPlaceholder"
+      :primary-field="primaryField"
+      @search="handleSearch"
+      @reset="handleReset"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('on-confirm', data)"
+      @page-change="handlePageChange"
+    />
+  </div>
+</template>
+<script>
+  import mobileMode from '@/mixins/mobileMode.js'
+  import UserSelectorDialog from '../../UserSelector/src/UserSelectorDialog.vue'
+  import UserSelectorMobileDialog from '../../UserSelector/src/UserSelectorMobileDialog.vue'
+  export default {
+    name: 'HtUserDialog',
+    components: {
+      UserSelectorDialog,
+      UserSelectorMobileDialog,
+    },
+    mixins: [mobileMode],
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '用户名称、账号',
+      },
+      value: String,
+      single: Boolean,
+      config: Object,
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      selectCurrent: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: '选择用户',
+      },
+      quickSearchProps: {
+        type: String,
+        default: 'fullname,account',
+      },
+      pageSize: {
+        type: Number,
+        default: 20,
+      },
+      selectLabel: {
+        type: String,
+        default: 'fullname',
+      },
+      currentSelectUsers: Array,
+    },
+    data() {
+      return {
+        mode: null, // 搜索模式
+        filterType: 'contact', //过滤类型(contact:联系人，org:组织，policy:策略，role:角色)
+        currentGroup: null,
+        currentOrg: null,
+        currentPolicy: null,
+        currentRole: null,
+        searchWord: null,
+        data: [],
+        pagination: {
+          page: 1,
+          pageSize: this.pageSize,
+          total: 0,
+          showTotal: true,
+        },
+        selectors: [],
+      }
+    },
+    computed: {
+      primaryField: function() {
+        return this.config && this.config.hasOwnProperty('id')
+          ? 'id'
+          : this.config && this.config.hasOwnProperty('account')
+          ? 'account'
+          : this.selectLabel
+      },
+    },
+    mounted() {
+      if (!this.data || this.data.length == 0) {
+        this.handleLoad()
+      }
+    },
+    methods: {
+      handleSearch(word) {
+        if (!word || !word.trim()) {
+          this.handleReset()
+          return
+        }
+        // 存储搜索关键词
+        this.searchWord = word
+        // 进入搜索模式
+        this.mode = 'search'
+        this.handleLoad()
+      },
+      handleReset() {
+        // 置空搜索关键词
+        this.searchWord = null
+        // 退出搜索模式
+        this.mode = null
+        this.handleLoad()
+      },
+      handlePageChange(page) {
+        // 搜索模式下或者未进行过滤时，查询所有数据
+        if (this.mode != 'filter') {
+          this.handleLoad(page)
+        } else {
+          // 过滤模式下，根据过滤类型查询数据
+          switch (this.filterType) {
+            case 'contact':
+              this.loadContactUser(this.currentGroup, page)
+              break
+            case 'org':
+              this.loadOrgUser(this.currentOrg, page)
+              break
+            case 'policy':
+              this.loadPolicyUser(this.currentPolicy, page)
+              break
+            case 'role':
+              this.loadRoleUser(this.currentRole, page)
+              break
+          }
+        }
+      },
+      // 处理过滤类型变化的事件
+      handleFilterTypeChange(type) {
+        this.filterType = type
+      },
+      showDialog() {
+        this.selectors = this.currentSelectUsers ? this.currentSelectUsers : []
+        if (this.isMobile) {
+          this.$refs.userSelectorMobileDialog.showDialog()
+        } else {
+          this.$refs.userSelectorDialog.showDialog()
+        }
+      },
+      // 获取查询参数中的分页信息(不传page时默认查询第一页)
+      getPageBean(page) {
+        const pageBean = { ...this.pagination }
+        delete pageBean['total']
+        pageBean.page = page || 1
+        return pageBean
+      },
+      handleLoad(page) {
+        const param = this.getQueryFilter(page)
+        this.data = this.data || []
+        this.loadAllUser(param)
+      },
+      getQueryFilter(page) {
+        const queryFilter = {
+          querys: [],
+          pageBean: this.getPageBean(page),
+        }
+
+        if (
+          this.quickSearchProps &&
+          this.quickSearchProps.constructor == String &&
+          this.searchWord
+        ) {
+          const props = this.quickSearchProps.split(',')
+          props.forEach((item) => {
+            let query = {
+              property: item,
+              value: this.searchWord,
+              group: 'main',
+              operation: 'LIKE',
+              relation: 'OR',
+            }
+            queryFilter.querys.push(query)
+          })
+        }
+        return queryFilter
+      },
+      // 加载全部用户
+      loadAllUser(param) {
+        this.$requestConfig.getUserList(param).then((data) => {
+          const { rows, page, pageSize, total } = data
+          if (this.isMobile && page > 1) {
+            this.data = this.data.concat(rows)
+          } else {
+            this.data = rows
+          }
+          const paginationResult = {
+            page,
+            pageSize,
+            total,
+          }
+          this.$set(this, 'pagination', paginationResult)
+        })
+      },
+      // 加载常用联系人
+      loadContactUser(group, page) {
+        this.mode = 'filter'
+        this.currentGroup = group
+        const param = {
+          pageBean: this.getPageBean(page),
+        }
+        if (group != 'all') {
+          param.contactGroupId = group
+        }
+        if (this.$requestConfig.getContactUser) {
+          this.$requestConfig.getContactUser(param).then((data) => {
+            if (data.state && data.value) {
+              const { rows, page, pageSize, total } = data.value
+
+              if (this.isMobile && page > 1) {
+                this.data = this.data.concat(rows)
+              } else {
+                this.data = rows
+              }
+              const paginationResult = { page, pageSize, total }
+              this.$set(this, 'pagination', paginationResult)
+            }
+          })
+        }
+      },
+      // 通过组织查询用户
+      loadOrgUser(org, page) {
+        this.mode = 'filter'
+        this.currentOrg = org
+        let queryFilter = {
+          pageBean: this.getPageBean(page),
+          querys: [],
+        }
+        let query = {
+          property: 'uo.path_',
+          value: org.path,
+          group: 'main',
+          operation: 'RIGHT_LIKE',
+          relation: 'AND',
+        }
+        if (org.path) {
+          queryFilter.querys.push(query)
+        }
+        this.loadAllUser(queryFilter)
+      },
+      // 按照角色查询用户
+      loadRoleUser(role, page) {
+        this.mode = 'filter'
+        this.currentRole = role
+        let queryFilter = {
+          pageBean: this.getPageBean(page),
+          querys: [],
+        }
+        if (role) {
+          queryFilter.params = {
+            role_id_: role,
+          }
+        }
+        this.loadAllUser(queryFilter)
+      },
+      // 通过策略查询用户
+      loadPolicyUser(params, page) {
+        this.mode = 'filter'
+        this.currentOrg = params
+        let queryFilter = {
+          pageBean: this.getPageBean(page),
+          querys: [],
+        }
+        let query = null
+        const { type, ids, paths } = params
+        switch (type) {
+          // 所在主部门
+          case '1':
+            query = {
+              property: 'uo.id_',
+              value: params.id,
+              group: 'main',
+              operation: 'EQUAL',
+              relation: 'AND',
+            }
+            queryFilter.querys.push(query)
+            this.loadAllUser(queryFilter)
+            break
+          // 所在主部门及下级部门
+          case '2':
+            query = {
+              property: 'uo.path_',
+              value: params.path,
+              group: 'main',
+              operation: 'RIGHT_LIKE',
+              relation: 'AND',
+            }
+            queryFilter.querys.push(query)
+            this.loadAllUser(queryFilter)
+            break
+          // 所在部门
+          case '3':
+            ids.forEach((id) => {
+              query = {
+                property: 'uo.id_',
+                value: id,
+                group: 'main',
+                operation: 'EQUAL',
+                relation: 'OR',
+              }
+              queryFilter.querys.push(query)
+            })
+            this.loadAllUser(queryFilter)
+            break
+          // 所在部门及下级部门
+          case '4':
+            paths.forEach((path) => {
+              query = {
+                property: 'uo.path_',
+                value: path,
+                group: 'main',
+                operation: 'RIGHT_LIKE',
+                relation: 'OR',
+              }
+              queryFilter.querys.push(query)
+            })
+            this.loadAllUser(queryFilter)
+            break
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~@/styles/selector.scss';
+  .inputs {
+    display: block;
+  }
+
+  .el-select__tags {
+    background: #fff;
+    margin-left: 1px;
+  }
+
+  .el-select__tags_readonly {
+    position: relative;
+    top: 50%;
+  }
+
+  .el-input__inner[aria-invalid='true'] {
+    border-color: #f56c6c;
+  }
+
+  ::v-deep .el-main {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  div.org-find-card ::v-deep .el-card__body {
+    padding: 10px;
+    max-height: 520px;
+    overflow: auto;
+  }
+</style>

package/packages/UserSelector/index.js

@@ -0,0 +1,7 @@
+import UserSelector from './src/main.vue'
+
+UserSelector.install = function(Vue) {
+  Vue.component(UserSelector.name, UserSelector)
+}
+
+export default UserSelector

package/packages/UserSelector/src/Organization.vue

@@ -0,0 +1,131 @@
+<template>
+  <div class="organization-container">
+    <div class="demension__container">
+      <ht-select
+        v-model="currentDemension"
+        size="small"
+        :clearable="false"
+        :options="demensions"
+        display-style="block"
+        :props="{ key: 'id', value: 'demName' }"
+      />
+    </div>
+    <el-scrollbar class="organization-list__scroll">
+      <ht-tree
+        ref="tree"
+        lazy
+        display-style="block"
+        :load="loadOrgTree"
+        :data="orgs"
+        :default-expand-all="false"
+        :highlight-current="true"
+        :props="{
+          children: 'children',
+          label: 'name',
+          isLeaf: 'leaf',
+        }"
+        node-key="id"
+        class="org-tree"
+        accordion
+        @node-click="(org) => $emit('load-org-user', org)"
+      />
+    </el-scrollbar>
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+
+  export default {
+    name: 'Organization',
+    props: {
+      mode: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        demensions: [],
+        currentDemension: '',
+        orgs: [],
+      }
+    },
+    watch: {
+      mode: function(newVal, oldVal) {
+        if (newVal !== oldVal && newVal == 'search') {
+          this.$refs.tree.setCurrentKey(null)
+        }
+      },
+      currentDemension: function(newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          this.changeDemension(newVal)
+        }
+      },
+    },
+    mounted() {
+      this.loadDemensions()
+    },
+    methods: {
+      // 加载维度数据
+      loadDemensions() {
+        if (!this.demensions || this.demensions.length == 0) {
+          this.$requestConfig.getAllDemensions().then((data) => {
+            this.demensions = data
+            data.forEach((element) => {
+              if (element.isDefault == 1) {
+                this.currentDemension = element.id
+              }
+            })
+            if (!this.currentDemension) {
+              this.currentDemension = data[0].id
+            }
+          })
+        }
+      },
+      // 维度改变 重新获取组织
+      changeDemension(currentDemensionId) {
+        this.$requestConfig
+          .getOrgTree({
+            demId: currentDemensionId
+              ? currentDemensionId
+              : this.currentDemension,
+          })
+          .then((data) => {
+            this.orgs = utils.tile2nest(data)
+          })
+      },
+      // 加载组织数据
+      loadOrgTree(node, resolve) {
+        if (node && node.data && node.data.isParent) {
+          if (node.data.children) {
+            resolve(node.data.children)
+          } else {
+            this.$requestConfig
+              .getOrgTree({
+                demId: node.data.demId,
+                parentId: node.data.id,
+              })
+              .then((data) => {
+                resolve(data)
+              })
+          }
+        } else {
+          resolve([])
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .organization-container {
+    height: 100%;
+
+    .demension__container {
+      padding: 0 10px;
+    }
+
+    .organization-list__scroll {
+      margin-top: 10px;
+      height: calc(100% - 50px);
+    }
+  }
+</style>

package/packages/UserSelector/src/PolicyUser.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="policy-user__container">
+    <el-scrollbar v-if="policies.length > 0" class="selector-list__scroll">
+      <ht-radio
+        v-model="currentPolicy"
+        display-style="block"
+        option-layout="vertical"
+        :props="{ key: 'id', value: 'name' }"
+        :options="policies"
+      ></ht-radio>
+    </el-scrollbar>
+    <div v-else class="el-tree__empty-block">
+      <span class="el-tree__empty-text">{{ t('el.table.emptyText') }}</span>
+    </div>
+  </div>
+</template>
+<script>
+  import Locale from '@/mixins/locale'
+
+  export default {
+    name: 'PolicyUser',
+    mixins: [Locale],
+    props: {
+      mode: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        policies: [
+          { id: '1', name: '我的主部门' },
+          { id: '2', name: '我的主部门及下属部门' },
+          { id: '3', name: '我的所有部门' },
+          { id: '4', name: '我的所有部门及下属部门' },
+        ],
+        currentPolicy: '',
+        currentUserOrgs: [],
+      }
+    },
+    watch: {
+      mode: function(newVal, oldVal) {
+        if (newVal !== oldVal && newVal == 'search') {
+          this.currentPolicy = ''
+        }
+      },
+      currentPolicy: function(newVal, oldVal) {
+        if (newVal && newVal !== oldVal) {
+          this.loadUserWithPolicy(newVal)
+        }
+      },
+    },
+    methods: {
+      // 按照指定策略加载数据
+      loadUserWithPolicy(policy) {
+        this.loadCurrentUserOrgs()
+          .then(() => {
+            const param = this.getOrgIdWithPolicy(policy)
+            this.$emit('load-policy-user', param)
+          })
+          .catch(() => {
+            this.$message.error(
+              '未获取到当前用户的部门信息，无法按照该策略加载数据。'
+            )
+            this.currentPolicy = ''
+          })
+      },
+      // 根据策略构建不同的查询参数
+      getOrgIdWithPolicy(policy) {
+        let result = { type: policy }
+        const masterOrg = this.currentUserOrgs.find((org) => org.isMaster == 1)
+        switch (policy) {
+          case '1':
+            result.id = masterOrg ? masterOrg.id : null
+            break
+          case '2':
+            result.path = masterOrg ? masterOrg.path : null
+            break
+          case '3':
+            result.ids = this.currentUserOrgs.map((org) => org.id)
+            break
+          case '4':
+            result.paths = this.currentUserOrgs.map((org) => org.path)
+            break
+        }
+        return result
+      },
+      // 获取当前用户所属部门数据
+      loadCurrentUserOrgs() {
+        return new Promise((resolve, reject) => {
+          if (this.currentUserOrgs && this.currentUserOrgs.length > 0) {
+            resolve()
+          } else if (
+            this.$requestConfig.getUserId() &&
+            this.$requestConfig.getOrgListByUserId
+          ) {
+            this.$requestConfig
+              .getOrgListByUserId(this.$requestConfig.getUserId())
+              .then((orgs) => {
+                if (orgs && orgs.constructor == Array && orgs.length > 0) {
+                  this.currentUserOrgs = orgs
+                  resolve()
+                } else {
+                  reject()
+                }
+              })
+              .catch(() => reject())
+          } else {
+            reject()
+          }
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .policy-user__container {
+    height: 100%;
+
+    ::v-deep {
+      .el-radio-group {
+        width: 100%;
+      }
+      .el-radio-vertical {
+        padding: 8px;
+        margin-right: 0;
+
+        &:hover {
+          background-color: #f8f8f8;
+        }
+
+        .el-radio__input {
+          display: none;
+        }
+
+        .el-radio__label {
+          font-size: 14px;
+        }
+      }
+    }
+  }
+</style>