three-trees-ui 1.0.0

package/packages/JobSelectorInput/src/main.vue

@@ -0,0 +1,166 @@
+<template>
+  <div
+    v-if="permission != 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <ht-job-selector
+      v-model="value"
+      :title="title"
+      :form-inputs-display="formInputsDisplay"
+      :validate="validate"
+      select-label="name"
+      :placeholder="placeholder"
+      :permission="permission_sub"
+      :single="single"
+      :config="config"
+      :name="inputName"
+      :data="data"
+      :pagination="pagination"
+      :quick-search-props="quickSearchProps"
+      :mode="mode"
+      :append-to-body="appendToBody"
+      @valueChange="valueChange"
+      @change="handleChange"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+    ></ht-job-selector>
+  </div>
+</template>
+<script>
+  import permission from '@/mixins/permission.js'
+  import inputName from '@/mixins/inputName.js'
+  import form from '@/mixins/form.js'
+  import mobileMode from '@/mixins/mobileMode.js'
+
+  export default {
+    name: 'HtJobSelectorInput',
+    mixins: [permission, inputName, form, mobileMode],
+    props: {
+      value: String,
+      single: Boolean,
+      config: Object,
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      title: {
+        type: String,
+        default: '选择职务',
+      },
+      pageSize: {
+        type: Number,
+        default: 20,
+      },
+      quickSearchProps: {
+        type: String,
+        default: 'name,code',
+      },
+    },
+    data() {
+      return {
+        data: [],
+        mode: 'search', // 搜索模式
+        searchWord: null,
+        pagination: {
+          page: 1,
+          pageSize: this.pageSize,
+          total: 0,
+          showTotal: true,
+        },
+      }
+    },
+    mounted() {
+      if (!this.data || this.data.length == 0) {
+        this.handleLoad()
+      }
+    },
+    methods: {
+      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
+      },
+      handleLoad(page) {
+        const param = this.getQueryFilter(page)
+        this.data = this.data || []
+        this.loadAllJob(param)
+      },
+      // 加载全部岗位
+      loadAllJob(param) {
+        this.$requestConfig.getJobList(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)
+        })
+      },
+      valueChange(value) {
+        this.$emit('input', value)
+      },
+      handleChange(data) {
+        this.$emit('change', data)
+      },
+      handleSearch(word) {
+        if (!word || !word.trim()) {
+          this.handleReset()
+          return
+        }
+        // 存储搜索关键词
+        this.searchWord = word
+        // 进入搜索模式
+        this.mode = 'search'
+        this.handleLoad()
+      },
+      handleReset() {
+        // 置空搜索关键词
+        this.searchWord = null
+        // 退出搜索模式
+        this.mode = 'search'
+        this.handleLoad()
+      },
+      handlePageChange(page) {
+        // 搜索模式下或者未进行过滤时，查询所有数据
+        this.handleLoad(page)
+      },
+      // 获取查询参数中的分页信息(不传page时默认查询第一页)
+      getPageBean(page) {
+        const pageBean = { ...this.pagination }
+        delete pageBean['total']
+        pageBean.page = page || 1
+        return pageBean
+      },
+    },
+  }
+</script>

package/packages/ListSelector/index.js

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

package/packages/ListSelector/src/ListSelector.vue

@@ -0,0 +1,499 @@
+<template>
+  <el-row class="list-selector__container" :gutter="20">
+    <el-col
+      v-show="!isSearchMode"
+      class="list-selector__range"
+      :span="rangeSpan"
+    >
+      <slot name="range"></slot>
+    </el-col>
+    <el-col class="list-selector__main" :span="mainSpan">
+      <el-card shadow="hover">
+        <div slot="header" class="selector-main__header">
+          <span>{{ `${title}${userListCount}` }}</span>
+        </div>
+        <div class="selector-main__body">
+          <el-scrollbar v-if="data.length > 0" class="selector-list__scroll">
+            <ul
+              class="selector-main__list"
+              :class="{ 'two-columns': isSearchMode }"
+            >
+              <li
+                v-for="(item, index) in data"
+                :key="item[primaryFieldProp] + index + item.code"
+              >
+                <div class="selector-main__item" @click="handleRowClick(item)">
+                  <el-radio
+                    v-if="single"
+                    v-model="singleSelectedPrimary"
+                    :label="item[primaryFieldProp]"
+                  ></el-radio>
+                  <el-checkbox
+                    v-else
+                    v-model="multipleSelectedPrimary"
+                    :label="item[primaryFieldProp]"
+                  ></el-checkbox>
+                  <slot name="detail" :item="item"></slot>
+                </div>
+              </li>
+            </ul>
+          </el-scrollbar>
+          <div v-else class="list-selector__nodata">
+            <el-image :src="noDataImg"></el-image>
+            <span>{{ t('el.table.emptyText') }}</span>
+          </div>
+          <div v-if="data.length > 0" class="selector-main__pager">
+            <el-pagination
+              layout="prev, pager, next"
+              :disabled="loading"
+              :page-sizes="pageSizeArr"
+              :page-size="pagination.pageSize"
+              :pager-count="5"
+              :total="pagination.total"
+              :current-page="pagination.page"
+              @current-change="handleCurrentChange"
+            ></el-pagination>
+          </div>
+        </div>
+      </el-card>
+    </el-col>
+    <el-col class="list-selector__selected" :span="7">
+      <el-card shadow="hover">
+        <div slot="header" class="selector-selected__header">
+          <span>已选择({{ selectsCount }})</span>
+          <el-button type="text" @click="clearAllSelects">
+            {{ $t('ht.common.clear') }}
+          </el-button>
+        </div>
+        <el-scrollbar v-if="selectsCount > 0" class="selector-selected__scroll">
+          <draggable
+            v-model="selects"
+            class="selector-selected__wrap"
+            tag="ul"
+            v-bind="dragOptions"
+            handle=".list-selector__handle"
+            @start="isDragging = true"
+            @end="isDragging = false"
+          >
+            <transition-group type="transition" name="flip-list">
+              <li
+                v-for="(select, selectIndex) in selects"
+                :key="select[primaryFieldProp] + selectIndex"
+                class="selector-selected__item"
+              >
+                <div
+                  class="selector-selected__item-left"
+                  @dblclick="removeSelected(select)"
+                >
+                  <ht-icon
+                    v-if="!single"
+                    name="sort"
+                    class="list-selector__handle"
+                  />
+                  <slot name="selected" :select="select"></slot>
+                </div>
+                <ht-icon
+                  name="close"
+                  class="selector-selected__remove"
+                  :title="t('ht.common.remove')"
+                  @click="removeSelected(select)"
+                />
+              </li>
+            </transition-group>
+          </draggable>
+        </el-scrollbar>
+        <div v-else class="el-tree__empty-block">
+          <span class="el-tree__empty-text">{{ t('el.table.emptyText') }}</span>
+        </div>
+      </el-card>
+    </el-col>
+  </el-row>
+</template>
+<script>
+  import Locale from '@/mixins/locale'
+  import mobileMode from '@/mixins/mobileMode.js'
+  import { debounce } from 'lodash'
+  const draggable = require('vuedraggable')
+
+  export default {
+    name: 'HtListSelector',
+    components: { draggable },
+    mixins: [Locale, mobileMode],
+    props: {
+      selectLabel: {
+        type: String,
+        default: 'name',
+      },
+      tableColumns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      title: {
+        type: String,
+      },
+      value: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      data: Array,
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      //服务端分页
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      //唯一标识字段
+      primaryField: {
+        type: String,
+        default: '',
+      },
+      mode: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        isDragging: false,
+        loading: false,
+        selects: [],
+        currentSelectData: [],
+        noDataImg: require('@/assets/no-data.png'),
+        pageSizeArr: [10, 50, 100, 200, 300],
+      }
+    },
+    computed: {
+      isSearchMode: function() {
+        return this.mode && this.mode == 'search'
+      },
+      singleSelectedPrimary: {
+        get() {
+          return this.selects && this.selects.length == 1
+            ? this.selects[0][this.primaryFieldProp]
+            : null
+        },
+        set() {},
+      },
+      multipleSelectedPrimary: {
+        get() {
+          return this.selects.map((select) => select[this.primaryFieldProp])
+        },
+        set() {},
+      },
+      primaryFieldProp: function() {
+        return this.primaryField ? this.primaryField : 'id'
+      },
+      dragOptions() {
+        return {
+          animation: 0,
+          group: 'description',
+          disabled: false,
+          ghostClass: 'ghost',
+        }
+      },
+      rangeSpan() {
+        return this.isSearchMode ? 0 : 7
+      },
+      mainSpan() {
+        return this.isSearchMode ? 17 : 10
+      },
+      currentPageSelectedCount() {
+        return this.single
+          ? this.singleSelectedPrimary
+            ? 1
+            : 0
+          : this.multipleSelectedPrimary.length > 0 && this.data.length > 0
+          ? this.data.filter(
+              (d) =>
+                this.multipleSelectedPrimary.indexOf(d[this.primaryFieldProp]) >
+                -1
+            ).length
+          : 0
+      },
+      selectsCount() {
+        return this.selects && this.selects.length > 0 ? this.selects.length : 0
+      },
+      userListCount() {
+        return this.pagination.total > 0
+          ? `(${this.currentPageSelectedCount}/${this.pagination.total})`
+          : ''
+      },
+    },
+    watch: {
+      selects: {
+        handler(val) {
+          this.currentSelectData = val
+          this.$emit('current-selected', val)
+        },
+        deep: true,
+      },
+    },
+    methods: {
+      getSelectedData() {
+        return this.currentSelectData
+      },
+      // 同步已选行到已选数据中去
+      syncSelection2selects(row) {
+        // 当前在已选数组中，则移除选中状态
+        const index = this.selects.findIndex(
+          (select) =>
+            select[this.primaryFieldProp] == row[this.primaryFieldProp]
+        )
+        if (index > -1) {
+          this.selects.splice(index, 1)
+        } else {
+          // 复制一份当前已选数据
+          let tmpSelects = [...this.selects]
+          // 将剩余的已选数据与当前选中的数据合并
+          tmpSelects = [...tmpSelects, row]
+          // 数组去重
+          this.selects = tmpSelects.unique(this.primaryFieldProp)
+        }
+      },
+      onShow(initSelectors) {
+        // 每一次显示选择器时，重置当前选中数据为外部的v-model对象
+        if (!initSelectors) {
+          this.selects = [...this.value]
+        } else {
+          this.selects = initSelectors
+        }
+      },
+      onHide(sure) {
+        // 在隐藏选择器时，如果点击的是确定按钮，则将当前选中数据更新到外部的v-model对象上
+        if (sure) {
+          this.$emit('input', this.selects)
+        }
+      },
+      // 处理单击数据行的事件(加上防抖，避免用户点击复选框时因为连续触发2次导致无法选中)
+      handleRowClick: debounce(function(row) {
+        if (this.single) {
+          this.selects = [row]
+        } else {
+          this.syncSelection2selects(row)
+        }
+        this.$emit('row-click', row)
+      }, 10),
+      handleCurrentChange(currentPage) {
+        this.$emit('page-change', currentPage)
+      },
+      removeSelected(item) {
+        this.selects.remove(item)
+      },
+      clearAllSelects() {
+        this.selects = []
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .list-selector__container {
+    height: 100%;
+
+    ::v-deep {
+      .el-card__header {
+        background-color: #fcfcfc;
+        padding: 0 20px;
+        height: 48px;
+        line-height: 48px;
+      }
+      .el-card__body {
+        height: 480px;
+        padding: 0;
+      }
+      .el-scrollbar {
+        height: 100%;
+
+        .el-scrollbar__wrap {
+          overflow-x: hidden;
+        }
+      }
+    }
+
+    .list-selector__range {
+      height: 100%;
+    }
+    .list-selector__main {
+      height: 100%;
+
+      .list-selector__nodata {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+
+        .el-image {
+          width: 80%;
+          margin-top: 20px;
+        }
+        span {
+          color: #909399;
+          font-size: 12px;
+        }
+      }
+
+      .selector-main__header {
+        span {
+          color: #333;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+      .selector-main__body {
+        height: 100%;
+
+        .selector-list__scroll {
+          height: calc(100% - 42px);
+        }
+
+        .selector-main__list {
+          list-style: none;
+          padding: 10px 20px;
+
+          li + li {
+            margin-top: 10px;
+          }
+
+          li {
+            line-height: 20px;
+            break-inside: avoid;
+          }
+
+          &.two-columns {
+            columns: 2;
+          }
+        }
+
+        .selector-main__item {
+          cursor: default;
+          display: flex;
+          align-items: center;
+
+          &:hover {
+            background-color: #f8f8f8;
+          }
+
+          .el-checkbox,
+          .el-radio {
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            margin-right: 0;
+          }
+
+          .el-radio {
+            ::v-deep {
+              .el-radio__label {
+                display: none;
+              }
+            }
+          }
+          .el-checkbox {
+            ::v-deep {
+              .el-checkbox__label {
+                display: none;
+              }
+            }
+          }
+
+          .vue-avatar--wrapper {
+            margin-left: 10px;
+          }
+        }
+
+        .selector-main__pager {
+          border-top: 1px solid #e6e6e6;
+          height: 42px;
+
+          .el-pagination {
+            height: 38px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
+            ::v-deep {
+              .el-pager {
+                line-height: 25px;
+              }
+            }
+          }
+        }
+      }
+    }
+    .list-selector__selected {
+      height: 100%;
+
+      .selector-selected__header {
+        display: flex;
+        justify-content: space-between;
+
+        span {
+          color: #333;
+          font-size: 14px;
+          font-weight: bold;
+        }
+      }
+
+      .selector-selected__wrap {
+        list-style: none;
+        width: calc(100% - 20px);
+        padding: 10px;
+
+        li {
+          line-height: 20px;
+        }
+
+        li + li {
+          margin-top: 10px;
+        }
+
+        .selector-selected__item {
+          height: 36px;
+          padding: 0 6px;
+          display: flex;
+          align-items: center;
+          justify-content: space-between;
+
+          &:hover {
+            background-color: #f8f8f8;
+          }
+
+          .selector-selected__remove {
+            &:hover {
+              color: #dd6161;
+            }
+          }
+
+          .selector-selected__item-left {
+            display: flex;
+            align-items: center;
+
+            .list-selector__handle {
+              cursor: move;
+            }
+
+            div {
+              margin-left: 10px;
+            }
+          }
+        }
+      }
+      .el-tree__empty-block {
+        height: 80px;
+      }
+    }
+    .flip-list-move {
+      transition: transform 0.5s;
+    }
+  }
+</style>

package/packages/Map/index.js

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