three-trees-ui 1.0.0

package/packages/PostSelector/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-post', 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/PostSelector/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-post', 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>

package/packages/PostSelector/src/PostSelectorDialog.vue

@@ -0,0 +1,342 @@
+<template>
+  <el-dialog
+    width="900px"
+    :title="title"
+    class="postdialog-selector__wrapper"
+    :visible.sync="dialogVisible"
+    :before-close="handleClose"
+    :close-on-click-modal="false"
+    :append-to-body="appendToBody"
+  >
+    <div class="dialog-selector__body">
+      <el-input
+        v-model="searchWord"
+        size="small"
+        clearable
+        :placeholder="searchPlaceholder"
+        @clear="reset"
+        @keyup.enter.native="search"
+      >
+        <i
+          slot="prefix"
+          :title="t('ht.common.search')"
+          class="el-input__icon el-icon-search"
+          @click="search"
+        />
+      </el-input>
+      <ht-list-selector
+        ref="selector"
+        v-model="selectors"
+        class="post-selector"
+        title="岗位列表"
+        :data="data"
+        :pagination="pagination"
+        :select-label="selectLabel"
+        :quick-search-props="quickSearchProps"
+        :single="single"
+        :search-placeholder="searchPlaceholder"
+        :primary-field="primaryField"
+        :mode="mode"
+        @reset="reset"
+        @row-click="(row) => $emit('row-click', row)"
+        @page-change="(page) => $emit('page-change', page)"
+      >
+        <el-card slot="range" class="selector-range__card" shadow="hover">
+          <el-tabs v-model="activeRange">
+            <el-tab-pane label="组织" name="org">
+              <organization
+                :mode="mode"
+                @load-org-post="(org) => $emit('load-org-post', org)"
+              />
+            </el-tab-pane>
+            <el-tab-pane label="策略" name="policy">
+              <policy-user
+                :mode="mode"
+                @load-policy-post="
+                  (policy) => $emit('load-policy-post', policy)
+                "
+              />
+            </el-tab-pane>
+          </el-tabs>
+        </el-card>
+        <template #detail="{ item }">
+          <ht-icon
+            name="post"
+            class="follow-theme-color"
+            style="margin-left:15px;width:36px;height:36px;"
+          />
+          <div class="selector-item__detail">
+            <div class="selector-detail__name">
+              <label>{{ item[selectLabel] }}</label>
+              <span>({{ item['code'] }})</span>
+            </div>
+            <div v-if="item.orgName" class="selector-detail__desc">
+              <span :title="item.orgName">
+                <ht-icon name="org-tree" />
+                {{ item.orgName }}
+              </span>
+            </div>
+          </div>
+        </template>
+        <template #selected="{ select }">
+          <ht-icon
+            name="post"
+            class="follow-theme-color"
+            style="margin-left:15px;width:36px;height:36px;"
+          />
+          <p
+            class="selector-selected__label"
+            :title="`${select[selectLabel]}(${select['code']})`"
+          >
+            {{ `${select[selectLabel]}(${select['code']})` }}
+          </p>
+        </template>
+      </ht-list-selector>
+    </div>
+
+    <div slot="footer" class="dialog-footer">
+      <el-button type="primary" size="small" @click="handleDialogSure">
+        确 定
+      </el-button>
+      <el-button size="small" @click="handleDialogCancel">取 消</el-button>
+    </div>
+  </el-dialog>
+</template>
+<script>
+  import Locale from '@/mixins/locale'
+  import HtListSelector from '../../ListSelector/index'
+  import Organization from './Organization.vue'
+  import PolicyUser from './PolicyUser.vue'
+
+  export default {
+    name: 'PostSelectorDialog',
+    components: {
+      HtListSelector,
+      Organization,
+      PolicyUser,
+    },
+    mixins: [Locale],
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '名称、编码、路径',
+      },
+      value: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      selectLabel: {
+        type: String,
+        default: 'jobName',
+      },
+      quickSearchProps: {
+        type: String,
+        required: true,
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: '选择组织',
+      },
+      primaryField: {
+        type: String,
+        default: '',
+      },
+      mode: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        activeRange: 'org',
+        searchWord: null,
+        loading: false,
+      }
+    },
+    computed: {
+      selectors: {
+        get: function() {
+          return this.value
+        },
+        set: function(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    watch: {
+      activeRange: function(newVal, oldVal) {
+        if (newVal !== oldVal) {
+          this.$emit('filter-type-change', newVal)
+        }
+      },
+    },
+    methods: {
+      search() {
+        if (this.loading) {
+          return
+        }
+        this.$emit('search', this.searchWord)
+      },
+      reset() {
+        this.$emit('reset')
+        this.searchWord = null
+      },
+      showDialog() {
+        this.dialogVisible = true
+        setTimeout(() => {
+          this.$refs.selector.onShow()
+        })
+      },
+      handleClose(done) {
+        this.$refs.selector.onHide()
+        done && done()
+      },
+      handleDialogSure() {
+        this.$emit('select-data', this.$refs.selector.getSelectedData())
+        this.dialogVisible = false
+        this.$refs.selector.onHide(true)
+      },
+      handleDialogCancel() {
+        this.dialogVisible = false
+        this.$refs.selector.onHide()
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  div.org-find-card ::v-deep .el-card__body {
+    padding: 10px;
+    max-height: 520px;
+    overflow: auto;
+  }
+  .postdialog-selector__wrapper {
+    ::v-deep {
+      .el-dialog__header {
+        span {
+          font-weight: bold;
+          color: #222;
+        }
+      }
+
+      .el-dialog__body {
+        padding: 0 20px;
+        border-top-width: 0;
+        max-height: 600px;
+        overflow: hidden;
+      }
+
+      .el-dialog__footer {
+        text-align: center;
+        border-top-width: 0;
+      }
+    }
+    .dialog-selector__body {
+      .el-icon-search {
+        cursor: pointer;
+      }
+    }
+
+    .post-selector {
+      margin-top: 10px;
+    }
+
+    .selector-range__card {
+      ::v-deep {
+        .el-card__body {
+          height: 530px;
+
+          .el-tabs {
+            height: 100%;
+
+            .el-tabs__content {
+              height: calc(100% - 63px);
+              padding: 0;
+
+              .el-tab-pane {
+                height: 100%;
+              }
+            }
+          }
+        }
+        .el-tabs__nav-wrap {
+          background-color: #fcfcfc;
+          padding-left: 8px;
+        }
+        .el-tabs__item {
+          padding: 0 10px;
+          height: 48px;
+          line-height: 48px;
+        }
+      }
+    }
+    .selector-item__detail {
+      display: flex;
+      flex-direction: column;
+      margin-left: 10px;
+
+      .selector-detail__name {
+        max-width: 220px;
+
+        label {
+          color: #111;
+          font-size: 14px;
+        }
+        span {
+          margin-left: 10px;
+          color: #777;
+        }
+      }
+
+      .selector-detail__desc {
+        margin-top: 5px;
+
+        span {
+          display: inline-block;
+          font-size: 12px;
+          color: #777;
+          max-width: 94px;
+          white-space: nowrap;
+          overflow: hidden;
+          text-overflow: ellipsis;
+        }
+
+        span + span {
+          margin-left: 10px;
+        }
+      }
+    }
+    .selector-selected__label {
+      margin-left: 10px;
+      width: 109px;
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+  }
+</style>