three-trees-ui 1.0.0

package/packages/RoleSelector/src/RoleSelectorMobileDialog.vue

@@ -0,0 +1,293 @@
+<template>
+  <van-action-sheet
+    v-if="dialogVisible"
+    v-model="dialogVisible"
+    class="role-mobile__selector"
+    :cancel-text="sureButtonText"
+    :closeable="false"
+    get-container="body"
+    @cancel="handleDialogSure"
+    @close="handleDialogClose"
+    @click-overlay="handleDialogClose"
+  >
+    <template #description>
+      <span class="role-mobile__title">{{ title }}</span>
+      <ht-icon
+        class="role-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="role-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="role-list__container">
+              <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>
+            </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: 'RoleSelectorMobileDialog',
+    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: 'name',
+      },
+      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>
+  .role-mobile__selector {
+    ::v-deep {
+      .van-tab--active {
+        font-weight: bold;
+        color: $base-color-blue;
+      }
+    }
+    .role-mobile__title {
+      font-size: 18px;
+      color: #1a1a1a;
+    }
+    .role-mobile__close {
+      float: right;
+    }
+    .role-demensions__container {
+      padding: 0 12px;
+    }
+    .role-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;
+      }
+    }
+    .role-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;
+          }
+        }
+      }
+    }
+    .role-data__list {
+      min-height: 400px;
+
+      .van-cell {
+        padding: 20px 16px;
+      }
+    }
+    .van-action-sheet__cancel {
+      padding: 5px;
+      background: $base-color-blue;
+      color: $base-color-white;
+    }
+  }
+</style>

package/packages/RoleSelector/src/main.vue

@@ -0,0 +1,367 @@
+<template>
+  <div
+    v-if="permission !== 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'ht-form-inputs__block'
+        : 'ht-form-inputs__inline',
+    ]"
+  >
+    <div
+      style="width: 100%; min-width:180px;"
+      class="el-select"
+      :class="{ 'has-value': selectors.length > 0 }"
+      @click="showDialog"
+    >
+      <div
+        ref="tagSpans"
+        style="width: calc(100% - 25px);"
+        :class="{
+          'el-select__tags_readonly': !inputWriteable,
+          'el-select__tags': inputWriteable,
+        }"
+      >
+        <span class="tag-wrap">
+          <span
+            v-for="(item, index) in selectors"
+            :key="index"
+            class="el-tag el-tag--info el-tag--small"
+            @click.stop
+          >
+            <span class="el-select__tags-text">{{ item.name }}</span>
+            <i
+              v-if="inputWriteable"
+              class="el-tag__close el-icon-close"
+              @click="handleRemove(item)"
+            ></i>
+          </span>
+        </span>
+      </div>
+      <div v-if="inputWriteable" class="el-input el-input--suffix">
+        <input
+          ref="inputEl"
+          v-model="value"
+          v-validate="inputValidate"
+          type="text"
+          readonly="readonly"
+          :name="inputName"
+          autocomplete="off"
+          class="el-input__inner"
+          :placeholder="placeholder"
+          :style="{
+            height: inputSuffixHeight + 'px',
+            lineHeight: inputSuffixHeight + 'px',
+          }"
+        />
+        <span class="el-input__suffix">
+          <span class="el-input__suffix-inner">
+            <i class="el-icon-circle-close clear-icon" @click.stop="clear"></i>
+            <ht-icon name="users" class="user-icon" />
+          </span>
+        </span>
+      </div>
+    </div>
+    <ht-field-tail :field-name="inputName" :input-value="value" />
+    <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="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+    />
+    <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"
+      @filter-type-change="(type) => $emit('filter-type-change', type)"
+      @search="(word) => $emit('search', word)"
+      @reset="() => $emit('reset')"
+      @row-click="(row) => $emit('row-click', row)"
+      @select-data="(data) => $emit('select-data', data)"
+      @page-change="(page) => $emit('page-change', page)"
+    />
+  </div>
+</template>
+<script>
+  import utils from '@/utils.js'
+  import inputName from '@/mixins/inputName.js'
+  import permission from '@/mixins/permission.js'
+  import mobileMode from '@/mixins/mobileMode.js'
+  import HtFieldTail from '../../FieldTail/index'
+  import { setTimeout } from 'timers'
+  import RoleSelectorDialog from './RoleSelectorDialog.vue'
+  import RoleSelectorMobileDialog from './RoleSelectorMobileDialog.vue'
+
+  export default {
+    name: 'HtRoleSelector',
+    components: {
+      HtFieldTail,
+      RoleSelectorDialog,
+      RoleSelectorMobileDialog,
+    },
+    mixins: [inputName, permission, mobileMode],
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '角色名称、编码',
+      },
+      value: String,
+      selectLabel: String,
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      config: Object,
+      data: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      tableColumns: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      pagination: {
+        type: Object,
+        default: () => {
+          return {
+            page: 1,
+            pageSize: 50,
+            total: 0,
+          }
+        },
+      },
+      quickSearchProps: {
+        type: String,
+        required: true,
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      formInputsDisplay: {
+        type: String,
+        default: 'inline',
+      },
+      title: {
+        type: String,
+        default: '选择角色',
+      },
+      mode: {
+        type: String,
+      },
+    },
+    data() {
+      return {
+        inputSuffixHeight: 30,
+        selectors: [],
+      }
+    },
+    computed: {
+      primaryField: function() {
+        return this.config && this.config.hasOwnProperty('id')
+          ? 'id'
+          : this.config && this.config.hasOwnProperty('code')
+          ? 'code'
+          : this.selectLabel
+      },
+    },
+    watch: {
+      // 当所选择的数据发生变化时，同步到v-model中
+      selectors: function(newVal) {
+        let ary = [],
+          idAry = [],
+          nameAry = [],
+          codeAry = []
+        if (newVal && newVal.constructor === Array && newVal.length > 0) {
+          newVal.forEach((m) => {
+            ary.push(m.name)
+            if (m.hasOwnProperty('id')) {
+              idAry.push(m.id)
+            }
+            if (m.hasOwnProperty('code')) {
+              codeAry.push(m.code)
+            }
+            if (m.hasOwnProperty('name')) {
+              nameAry.push(m.name)
+            }
+          })
+        }
+        if (this.config) {
+          // 配置了id的绑定关系，则回填到指定属性上
+          if (this.config.hasOwnProperty('id')) {
+            utils.setValueByConfigKey(this, this.config, 'id', idAry.join(','))
+          }
+          // 配置了code的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('code')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'code',
+              codeAry.join(',')
+            )
+          }
+          // 配置了name的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('name')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'name',
+              nameAry.join(',')
+            )
+          }
+        } else {
+          this.$emit('change', newVal)
+        }
+        // 通过valueChange事件发布值变更消息
+        this.$emit('valueChange', ary.join(','), newVal)
+        setTimeout(() => {
+          if (newVal.length > 0) {
+            this.calacInputSuffixHeight()
+          } else {
+            this.inputSuffixHeight = 30
+          }
+          if (this.$refs.inputEl) {
+            this.$refs.inputEl.focus()
+            this.$refs.inputEl.blur()
+          }
+        }, 10)
+      },
+      value: function() {
+        // 父级传递进来的value发生变更时，需要同步到当前所选数据中
+        this.valueInit()
+      },
+    },
+    mounted() {
+      // 组件第一次挂载时，同步value到当前所选数据中
+      this.valueInit()
+    },
+    methods: {
+      // 同步value到当前所选数据中
+      valueInit() {
+        let tmpAry = []
+        if (this.value) {
+          let idAry = [],
+            nameAry = [],
+            codeAry = []
+          if (this.config) {
+            // 配置了id绑定关系，则获取id的值
+            if (this.config.hasOwnProperty('id')) {
+              let idVal = utils.getValueByConfigKey(this, this.config, 'id')
+              if (idVal) {
+                idAry = idVal.split(',').trim()
+              }
+            }
+            // 配置了code绑定关系，则获取code的值
+            if (this.config.hasOwnProperty('code')) {
+              let codeVal = utils.getValueByConfigKey(this, this.config, 'code')
+              if (codeVal) {
+                codeAry = codeVal.split(',').trim()
+              }
+            }
+            // 配置了name绑定关系，则获取name的值
+            if (this.config.hasOwnProperty('name')) {
+              let nameVal = utils.getValueByConfigKey(this, this.config, 'name')
+              if (nameVal) {
+                nameAry = nameVal.split(',').trim()
+              }
+            }
+          }
+          // 将name、id、code从逗号分割的字符串解析为json对象格式的数组
+          let valAry = this.value.split(',').trim()
+          valAry.forEach((m, index) => {
+            let item = { name: m }
+            if (idAry.length > index) {
+              item['id'] = idAry[index]
+            }
+            if (codeAry.length > index) {
+              item['code'] = codeAry[index]
+            }
+            if (nameAry.length > index) {
+              item['name'] = nameAry[index]
+            }
+            tmpAry.push(item)
+          })
+        }
+        // 对数组做深度对比，如果值不完全相等，则进行赋值操作
+        if (!utils.arrayEquals(tmpAry, this.selectors)) {
+          this.selectors = tmpAry
+        }
+      },
+      showDialog() {
+        if (!this.inputWriteable) {
+          return
+        }
+        if (this.isMobile) {
+          this.$refs.roleSelectorMobileDialog.showDialog()
+        } else {
+          this.$refs.roleSelectorDialog.showDialog()
+        }
+      },
+      handleRemove(item) {
+        this.selectors.remove(item)
+      },
+
+      clear() {
+        this.selectors = []
+        this.inputSuffixHeight = 30
+      },
+      // 更新当前输入框的高度来适配已选数据的高度
+      calacInputSuffixHeight() {
+        if (!this.$refs.tagSpans) return
+        if (this.$refs.tagSpans.offsetHeight) {
+          this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+        } else {
+          this.inputSuffixHeight = 30
+        }
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  .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;
+  }
+  .el-input__suffix {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+</style>

package/packages/RoleSelectorInput/index.js

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