three-trees-ui 1.0.0

package/packages/OrgSelector/src/OrgSelectorMobileDialog.vue

@@ -0,0 +1,307 @@
+<template>
+  <van-action-sheet
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    class="org-mobile__selector"
+    :cancel-text="sureButtonText"
+    :closeable="false"
+    get-container="body"
+    @cancel="handleDialogSure"
+    @close="handleDialogClose"
+    @click-overlay="handleDialogClose"
+  >
+    <template #description>
+      <span class="org-mobile__title">{{ title }}</span>
+      <ht-icon
+        class="org-mobile__close"
+        name="close"
+        @click="handleDialogClose"
+      />
+    </template>
+
+    <van-search
+      v-model="searchWord"
+      :placeholder="searchPlaceholder"
+      @search="onRefresh"
+      @clear="reset"
+    />
+    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
+      <van-list
+        v-model="isLoading"
+        class="org-data__list"
+        :finished="finished"
+        finished-text="没有更多了"
+        @load="loadMore"
+      >
+        <van-checkbox-group v-model="selectIds">
+          <van-cell
+            v-for="item in data"
+            :key="item[primaryFieldProp]"
+            clickable
+            @click="rowClick(item, null, $event)"
+          >
+            <template #icon>
+              <van-checkbox
+                :name="item[primaryFieldProp]"
+                :shape="single ? 'round' : 'square'"
+              />
+            </template>
+            <div class="org-list__container">
+              <ht-icon
+                name="org-tree2"
+                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 class="selector-detail__desc">
+                  <span :title="item.pathName">
+                    {{ item.pathName || '无' }}
+                  </span>
+                </div>
+              </div>
+            </div>
+          </van-cell>
+        </van-checkbox-group>
+      </van-list>
+    </van-pull-refresh>
+  </van-action-sheet>
+</template>
+<script>
+  import styles from '@/styles/index.scss'
+  import Locale from '@/mixins/locale'
+
+  export default {
+    name: 'OrgSelectorMobileDialog',
+    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: 'fullname',
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: '选择组织',
+      },
+      primaryField: {
+        type: String,
+        default: '',
+      },
+    },
+    data() {
+      return {
+        dialogVisible: false,
+        isLoading: false,
+        finished: false,
+        searchWord: null,
+        selectIds: [],
+        selectedData: [],
+      }
+    },
+    computed: {
+      primaryColor() {
+        return styles.primary_color
+      },
+      sureButtonText() {
+        const selectedText =
+          this.selectIds.length > 0 ? `(${this.selectIds.length})` : ''
+        return `${this.$t('ht.common.confirm')}${selectedText}`
+      },
+      primaryFieldProp: function() {
+        return this.primaryField ? this.primaryField : 'id'
+      },
+    },
+    watch: {
+      pagination: function(newVal, oldVal) {
+        this.isLoading = false
+        if (newVal !== oldVal) {
+          const { page, pageSize, total } = newVal
+          if (page > 0 && pageSize > 0 && total > 0) {
+            this.finished = page * pageSize >= total
+          } else {
+            this.finished = true
+          }
+        }
+      },
+    },
+    methods: {
+      onRefresh() {
+        this.isloading = true
+        this.$emit('search', this.searchWord)
+      },
+      reset() {
+        this.$emit('reset')
+      },
+      loadMore() {
+        if (this.data && this.data.length > 0) {
+          this.$emit('page-change', ++this.pagination.page)
+        } else {
+          this.isLoading = false
+        }
+      },
+      showDialog() {
+        if (this.value && this.value.length > 0) {
+          this.selectIds = this.value.map((item) => item[this.primaryFieldProp])
+          this.selectedData = this.value
+        }
+        this.dialogVisible = true
+      },
+      handleDialogSure() {
+        this.$emit('input', this.selectedData)
+        this.$emit('select-data', this.selectedData)
+        this.selectIds = []
+        this.selectedData = []
+        this.dialogVisible = false
+      },
+      handleDialogClose() {
+        this.dialogVisible = false
+        this.selectIds = []
+        this.selectedData = []
+      },
+      select(selection, row) {
+        this.$emit('select', selection, row)
+      },
+      rowClick(row, column, event) {
+        // 单选
+        if (this.single) {
+          this.selectIds = [row[this.primaryFieldProp]]
+          this.selectedData = [row]
+        } else {
+          // 多选
+          if (this.selectIds.some((m) => m == row[this.primaryFieldProp])) {
+            this.selectIds.remove(row[this.primaryFieldProp])
+            this.selectedData = this.selectedData.filter(
+              (item) =>
+                item[this.primaryFieldProp] !== row[this.primaryFieldProp]
+            )
+          } else {
+            this.selectIds.push(row[this.primaryFieldProp])
+            this.selectedData.push(row)
+          }
+        }
+        this.$emit('row-click', row, column, event)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .org-mobile__selector {
+    ::v-deep {
+      .van-tab--active {
+        font-weight: bold;
+        color: $base-color-blue;
+      }
+    }
+    .org-mobile__title {
+      font-size: 18px;
+      color: #1a1a1a;
+    }
+    .org-mobile__close {
+      float: right;
+    }
+    .org-demensions__container {
+      padding: 0 12px;
+    }
+    .org-demensions__group {
+      margin-right: 6px;
+      color: #999999;
+      max-width: 72px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+
+      &::before {
+        border-width: 0;
+      }
+
+      &.current {
+        color: $base-color-blue;
+      }
+
+      &.current::before {
+        border-width: 1px;
+      }
+    }
+    .org-list__container {
+      display: flex;
+      align-items: center;
+
+      .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;
+            white-space: nowrap;
+            overflow: hidden;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+    }
+    .org-data__list {
+      min-height: 400px;
+    }
+    .van-action-sheet__cancel {
+      padding: 5px;
+      background: $base-color-blue;
+      color: $base-color-white;
+    }
+  }
+</style>

package/packages/OrgSelector/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('loadOrg', 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/OrgSelector/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-org', 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>