three-trees-ui 1.0.0

package/packages/RoleDialog/src/main.vue

@@ -0,0 +1,198 @@
+<template>
+  <div class=" inputs ht-job-dialog">
+    <role-selector-mobile-dialog
+      v-if="isMobile"
+      ref="roleSelectorMobileDialog"
+      v-model="selectors"
+      :search-placeholder="searchPlaceholder"
+      :single="single"
+      :data="data"
+      :table-columns="tableColumns"
+      :pagination="pagination"
+      :select-label="selectLabel"
+      :quick-search-props="quickSearchProps"
+      :append-to-body="appendToBody"
+      :title="title"
+      :primary-field="primaryField"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('on-confirm', data)"
+    />
+    <role-selector-dialog
+      v-else
+      ref="roleSelectorDialog"
+      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"
+      @search="handleSearch"
+      @reset="handleReset"
+      @page-change="handlePageChange"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('on-confirm', data)"
+    />
+  </div>
+</template>
+<script>
+  import mobileMode from '@/mixins/mobileMode.js'
+  import RoleSelectorDialog from '../../RoleSelector/src/RoleSelectorDialog.vue'
+  import RoleSelectorMobileDialog from '../../RoleSelector/src/RoleSelectorMobileDialog.vue'
+  export default {
+    name: 'HtRoleDialog',
+    components: {
+      RoleSelectorDialog,
+      RoleSelectorMobileDialog,
+    },
+    mixins: [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',
+      },
+      searchPlaceholder: {
+        type: String,
+        default: '角色名称、编码',
+      },
+      selectLabel: {
+        type: String,
+        default: 'name',
+      },
+      currentSelectRole: Array,
+    },
+    data() {
+      return {
+        selectors: [],
+        mode: 'search', // 搜索模式
+        searchWord: null,
+        data: [],
+        pagination: {
+          page: 1,
+          pageSize: this.pageSize,
+          total: 0,
+          showTotal: true,
+        },
+      }
+    },
+    computed: {
+      primaryField: function() {
+        return this.config && this.config.hasOwnProperty('id')
+          ? 'id'
+          : this.config && this.config.hasOwnProperty('code')
+          ? 'code'
+          : this.selectLabel
+      },
+    },
+    mounted() {
+      if (!this.data || this.data.length == 0) {
+        this.handleLoad()
+      }
+    },
+    methods: {
+      showDialog() {
+        this.selectors = this.currentSelectRole ? this.currentSelectRole : []
+        if (this.isMobile) {
+          this.$refs.roleSelectorMobileDialog.showDialog()
+        } else {
+          this.$refs.roleSelectorDialog.showDialog()
+        }
+      },
+      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
+      },
+      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.loadAllRole(param)
+      },
+      // 加载全部角色
+      loadAllRole(param) {
+        this.$requestConfig.getRoleList(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)
+        })
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped></style>

package/packages/RoleSelector/index.js

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

package/packages/RoleSelector/src/RoleSelectorDialog.vue

@@ -0,0 +1,307 @@
+<template>
+  <el-dialog
+    :title="title"
+    width="900px"
+    class="roledialog-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)"
+      >
+        <template #detail="{ item }">
+          <ht-icon
+            name="role"
+            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>
+        </template>
+        <template #selected="{ select }">
+          <ht-icon
+            name="role"
+            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'
+
+  export default {
+    name: 'RoleSelectorDialog',
+    components: {
+      HtListSelector,
+    },
+    mixins: [Locale],
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '角色名称、编码',
+      },
+      value: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      tableColumns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      selectLabel: {
+        type: String,
+        default: 'name',
+      },
+      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,
+        searchWord: null,
+        loading: false,
+      }
+    },
+    computed: {
+      selectors: {
+        get: function() {
+          return this.value
+        },
+        set: function(val) {
+          this.$emit('input', val)
+        },
+      },
+    },
+    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>
+  .roledialog-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>