swordpass-ui 1.0.0

package/packages/UserSelector/src/main.vue

@@ -0,0 +1,746 @@
+<template>
+  <div
+    v-if="permission !== 'n'"
+    :class="[
+      'inputs',
+      formInputsDisplay == 'block'
+        ? 'cl-form-inputs__block'
+        : 'cl-form-inputs__inline',
+    ]"
+  >
+    <div
+      class="el-select"
+      style="width: 100%; min-width: 180px"
+      @click="showDialog"
+    >
+      <div
+        ref="tagSpans"
+        style="width: calc(100% - 25px)"
+        :class="{
+          'el-select__tags_readonly': !inputWriteable,
+          'el-select__tags': inputWriteable,
+        }"
+      >
+        <span>
+          <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.fullname }}</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">
+            <cl-icon name="user" />
+          </span>
+        </span>
+      </div>
+    </div>
+    <cl-field-tail :field-name="inputName" :input-value="value" />
+
+    <el-dialog
+      width="80%"
+      :title="title"
+      :visible.sync="dialogVisible"
+      class="dialog-selector__wrapper"
+      :class="{ 'mobile-dialog': isMobile }"
+      :top="isMobile ? '0px' : '8vh'"
+      :before-close="handleClose"
+      :close-on-click-modal="false"
+      :append-to-body="appendToBody"
+    >
+      <el-tabs
+        v-model="activeGroupVal"
+        class="dialog-selector__tabs"
+        @tab-click="handleTabClick"
+      >
+        <el-tab-pane label="常用联系人" name="contact">
+          <el-container v-if="activeGroupVal == 'contact'">
+            <el-aside v-if="!isMobile" :width="el_aside_w" class="left-aside">
+              <el-card class="box-card org-find-card" shadow="never">
+                <div slot="header" class="clearfix">
+                  <span>按群组查找</span>
+                </div>
+                <cl-radio
+                  v-model="defaultContactGroupVal"
+                  display-style="block"
+                  option-layout="vertical"
+                  :props="{ key: 'id', value: 'name' }"
+                  :options="contactGroups"
+                ></cl-radio>
+              </el-card>
+            </el-aside>
+            <el-container>
+              <el-main>
+                <cl-selector
+                  ref="selector"
+                  v-model="selectors"
+                  :data="data"
+                  :pagination="pagination"
+                  :table-columns="tableColumns"
+                  :select-label="selectLabel"
+                  :quick-search-props="quickSearchProps"
+                  :single="single"
+                  :search-placeholder="searchPlaceholder"
+                  :primary-field="primaryField"
+                  @load="load"
+                  @select="select"
+                  @row-click="rowClick"
+                />
+              </el-main>
+            </el-container>
+          </el-container>
+        </el-tab-pane>
+        <el-tab-pane label="所有用户" name="all">
+          <el-container v-if="activeGroupVal == 'all'">
+            <el-aside v-if="!isMobile" :width="el_aside_w" class="left-aside">
+              <el-card class="box-card org-find-card" shadow="never">
+                <div slot="header" class="clearfix">
+                  <span>按组织查找</span>
+                </div>
+                <cl-select
+                  v-model="currentDemension"
+                  size="small"
+                  :options="demensions"
+                  display-style="block"
+                  :props="{ key: 'id', value: 'demName' }"
+                  :remote-method="loadDemensions"
+                  @change="changeDemension"
+                />
+                <cl-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="nodeKey"
+                  :default-expanded-keys="defaultExpandedKeys"
+                  class="org-tree"
+                  accordion
+                  @node-click="handleNodeClick"
+                />
+              </el-card>
+            </el-aside>
+            <el-container>
+              <el-main>
+                <cl-selector
+                  class="user-selector"
+                  ref="selector"
+                  v-model="selectors"
+                  :data="data"
+                  :pagination="pagination"
+                  :table-columns="tableColumns"
+                  :select-label="selectLabel"
+                  :quick-search-props="quickSearchProps"
+                  :single="single"
+                  :search-placeholder="searchPlaceholder"
+                  :primary-field="primaryField"
+                  @load="load"
+                  @select="select"
+                  @row-click="rowClick"
+                />
+              </el-main>
+            </el-container>
+          </el-container>
+        </el-tab-pane>
+      </el-tabs>
+
+      <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>
+  </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 ClFieldTail from '../../FieldTail/index'
+  import ClSelector from '../../Selector/index'
+  import { setTimeout } from 'timers'
+
+  export default {
+    name: 'ClUserSelector',
+    components: {
+      ClFieldTail,
+      ClSelector,
+    },
+    mixins: [inputName, permission, mobileMode],
+    props: {
+      searchPlaceholder: {
+        type: String,
+        default: '用户名称、账号',
+      },
+      demensions: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      contactGroups: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      orgs: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      loadOrgTree: {
+        type: Function,
+      },
+      roles: {
+        type: Array,
+        default: () => {
+          return []
+        },
+      },
+      loadRoleTree: {
+        type: Function,
+      },
+      value: String,
+      single: {
+        type: Boolean,
+        default: false,
+      },
+      roleTreeSupportFilter: {
+        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,
+          }
+        },
+      },
+      selectLabel: {
+        type: String,
+        default: 'fullname',
+      },
+      defaultDemension: {
+        type: [String, Number],
+        default: '',
+      },
+      defaultContactGroup: {
+        type: [String, Number],
+        default: '',
+      },
+      quickSearchProps: {
+        type: String,
+        required: true,
+      },
+      nodeKey: {
+        type: String,
+        default: 'id',
+      },
+      defaultExpandedKeys: {
+        type: Array,
+        default() {
+          return []
+        },
+      },
+      appendToBody: {
+        type: Boolean,
+        default: false,
+      },
+      activeGroup: {
+        type: String,
+        default: 'contact',
+      },
+      formInputsDisplay: {
+        type: String,
+        default: 'inline',
+      },
+      title: {
+        type: String,
+        default: '选择用户',
+      },
+    },
+    data() {
+      return {
+        el_aside_w: '210px',
+        inputSuffixHeight: 30,
+        selectors: [],
+        dialogVisible: false,
+        currentDemension: null,
+        primaryField: this.selectLabel,
+      }
+    },
+    computed: {
+      activeGroupVal: {
+        get: function () {
+          return this.activeGroup
+        },
+        set: function (val) {
+          this.$emit('update:activeGroup', val)
+        },
+      },
+      defaultContactGroupVal: {
+        get: function () {
+          return this.defaultContactGroup
+        },
+        set: function (val) {
+          this.$emit('update:defaultContactGroup', val)
+        },
+      },
+    },
+    watch: {
+      // 当所选择的数据发生变化时，同步到v-model中
+      selectors: function (newVal) {
+        let ary = [],
+          idAry = [],
+          fullnameAry = [],
+          mobileAry = [],
+          emailAry = [],
+          postNameAry = [],
+          orgNameAry = [],
+          accountAry = []
+
+        if (newVal && newVal.constructor === Array && newVal.length > 0) {
+          newVal.forEach((m) => {
+            ary.push(m.fullname)
+            if (m.hasOwnProperty('id')) {
+              idAry.push(m.id)
+            }
+            if (m.hasOwnProperty('fullname')) {
+              fullnameAry.push(m.fullname)``
+            }
+            if (m.hasOwnProperty('account')) {
+              accountAry.push(m.account)
+            }
+            if (m.hasOwnProperty('mobile')) {
+              mobileAry.push(m.mobile)
+            }
+            if (m.hasOwnProperty('email')) {
+              emailAry.push(m.email)
+            }
+            if (m.hasOwnProperty('postName')) {
+              postNameAry.push(m.postName)
+            }
+            if (m.hasOwnProperty('orgName')) {
+              orgNameAry.push(m.orgName)
+            }
+          })
+        }
+        if (this.config) {
+          // 配置了id的绑定关系，则回填到指定属性上
+          if (this.config.hasOwnProperty('id')) {
+            utils.setValueByConfigKey(this, this.config, 'id', idAry.join(','))
+            this.primaryField = 'id'
+          }
+          // 配置了fullname的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('fullname')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'fullname',
+              fullnameAry.join(',')
+            )
+          }
+          // 配置了account的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('account')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'account',
+              accountAry.join(',')
+            )
+            this.primaryField = this.primaryField == 'id' ? 'id' : 'account'
+          }
+          // 配置了mobile的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('mobile')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'mobile',
+              mobileAry.join(',')
+            )
+          }
+          // 配置了email的绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('email')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'email',
+              emailAry.join(',')
+            )
+          }
+
+          // 配置了post绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('postName')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'postName',
+              postNameAry.join(',')
+            )
+          }
+
+          // 配置了org绑定关系，则回填到指定的属性上
+          if (this.config.hasOwnProperty('orgName')) {
+            utils.setValueByConfigKey(
+              this,
+              this.config,
+              'orgName',
+              orgNameAry.join(',')
+            )
+          }
+        }
+        // 通过valueChange事件发布值变更消息
+        setTimeout(() => {
+          this.$emit('valueChange', ary.join(','), newVal)
+          this.calacInputSuffixHeight()
+          if (this.$refs.inputEl) {
+            this.$refs.inputEl.focus()
+            this.$refs.inputEl.blur()
+          }
+        }, 10)
+      },
+      value: function () {
+        // 父级传递进来的value发生变更时，需要同步到当前所选数据中
+        this.valueInit()
+      },
+      defaultDemension: function (newVal, oldVal) {
+        if (newVal && newVal != oldVal) {
+          this.currentDemension = newVal
+          this.changeDemension()
+        }
+      },
+      defaultContactGroupVal: function (newVal, oldVal) {
+        if (newVal !== oldVal) {
+          // 没有常用联系人分组时，显示全部用户
+          if (newVal === null) {
+            this.activeGroupVal = 'all'
+          }
+        }
+      },
+    },
+    mounted() {
+      // 组件第一次挂载时，同步value到当前所选数据中
+      this.valueInit()
+    },
+    created() {
+      if (this.$smallScreenDialog) {
+        this.el_aside_w = '180px'
+      }
+      this.loadFilterGroup('all')
+    },
+    methods: {
+      handleTabClick(tab) {
+        this.loadFilterGroup(tab.name)
+      },
+      // 同步value到当前所选数据中
+      valueInit() {
+        let tmpAry = []
+        if (this.value) {
+          let idAry = [],
+            accountAry = [],
+            fullnameAry = [],
+            mobileAry = [],
+            postNameAry = [],
+            orgNameAry = [],
+            emailAry = []
+          if (this.config) {
+            // 配置了id绑定关系，则获取id的值
+            if (this.config.hasOwnProperty('id')) {
+              let idVal = utils.getValueByConfigKey(this, this.config, 'id')
+              if (idVal) {
+                idAry = idVal.split(',').trim()
+              }
+            }
+            // 配置了fullname绑定关系，则获取fullname的值
+            if (this.config.hasOwnProperty('fullname')) {
+              let fullnameVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'fullname'
+              )
+              if (fullnameVal) {
+                fullnameAry = fullnameVal.split(',').trim()
+              }
+            }
+
+            // 配置了account绑定关系，则获取account的值
+            if (this.config.hasOwnProperty('account')) {
+              let accountVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'account'
+              )
+              if (accountVal) {
+                accountAry = accountVal.split(',').trim()
+              }
+            }
+
+            // 配置了mobile绑定关系，则获取mobile的值
+            if (this.config.hasOwnProperty('mobile')) {
+              let mobileVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'mobile'
+              )
+              if (mobileVal) {
+                mobileAry = mobileVal.split(',').trim()
+              }
+            }
+
+            // 配置了post绑定关系，则获取post的值
+            if (this.config.hasOwnProperty('postName')) {
+              let postVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'postName'
+              )
+              if (postVal) {
+                postNameAry = postVal.split(',').trim()
+              }
+            }
+
+            // 配置了org绑定关系，则获取org的值
+            if (this.config.hasOwnProperty('orgName')) {
+              let orgVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'orgName'
+              )
+              if (orgVal) {
+                orgNameAry = orgVal.split(',').trim()
+              }
+            }
+
+            // 配置了email绑定关系，则获取email的值
+            if (this.config.hasOwnProperty('email')) {
+              let emailVal = utils.getValueByConfigKey(
+                this,
+                this.config,
+                'email'
+              )
+              if (emailVal) {
+                emailAry = emailVal.split(',').trim()
+              }
+            }
+          }
+          // 将fullname、id、code从逗号分割的字符串解析为json对象格式的数组
+          let valAry = this.value.split(',').trim()
+          valAry.forEach((m, index) => {
+            let item = { fullname: m }
+            if (idAry.length > index) {
+              item['id'] = idAry[index]
+            }
+            if (accountAry.length > index) {
+              item['account'] = accountAry[index]
+            }
+            if (fullnameAry.length > index) {
+              item['fullname'] = fullnameAry[index]
+            }
+            if (mobileAry.length > index) {
+              item['mobile'] = mobileAry[index]
+            }
+            if (emailAry.length > index) {
+              item['email'] = emailAry[index]
+            }
+            if (postNameAry.length > index) {
+              item['postName'] = postNameAry[index]
+            }
+            if (orgNameAry.length > index) {
+              item['orgName'] = orgNameAry[index]
+            }
+            tmpAry.push(item)
+          })
+        }
+        // 对数组做深度对比，如果值不完全相等，则进行赋值操作
+        if (!utils.arrayEquals(tmpAry, this.selectors)) {
+          this.selectors = tmpAry
+        }
+      },
+      showDialog() {
+        if (!this.inputWriteable) {
+          return
+        }
+        this.loadFilterGroup()
+        this.dialogVisible = true
+        setTimeout(() => {
+          this.$refs.selector.onShow()
+        })
+      },
+      loadFilterGroup(tabName) {
+        const selectTabName = tabName || this.activeGroupVal
+        if (selectTabName == 'all') {
+          this.loadDemensions()
+          // 处理切换Tab时，组织树不加载问题
+          this.currentDemension && this.changeDemension()
+        } else {
+          // 处理不加载树的问题
+          this.changeDemension()
+          this.loadContactGroup()
+        }
+      },
+      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()
+      },
+      handleRemove(item) {
+        this.selectors.remove(item)
+      },
+      clear() {
+        this.selectors = []
+      },
+      // 更新当前输入框的高度来适配已选数据的高度
+      calacInputSuffixHeight() {
+        if (!this.$refs.tagSpans) return
+        if (this.$refs.tagSpans.offsetHeight) {
+          this.inputSuffixHeight = this.$refs.tagSpans.offsetHeight + 5
+        } else {
+          this.inputSuffixHeight = 30
+        }
+      },
+      load(param, cb) {
+        this.$emit('load', param, cb)
+      },
+      changeDemension() {
+        this.$emit('changeDemension', this.currentDemension)
+      },
+      handleNodeClick(data) {
+        this.$emit('loadOrgUser', data)
+      },
+      handleRoleNodeClick(data) {
+        this.$emit('loadRoleUser', data)
+      },
+      loadDemensions() {
+        this.$emit('loadDemensions')
+      },
+      loadContactGroup() {
+        this.$emit('loadContactGroup')
+      },
+      select(selection, row) {
+        this.$emit('select', selection, row)
+      },
+      rowClick(row, column, event) {
+        this.$emit('row-click', row, column, event)
+      },
+    },
+  }
+</script>
+<style lang="scss" scoped>
+  @import '~@/styles/selector.scss';
+  .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;
+  }
+  ::v-deep .el-main {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  ::v-deep .el-scrollbar__wrap {
+    overflow-x: hidden;
+  }
+
+  ::v-deep .el-collapse-item__wrap {
+    height: calc(100% -500px);
+  }
+
+  div.org-find-card ::v-deep .el-card__body {
+    padding: 10px;
+    max-height: 520px;
+    overflow: auto;
+  }
+  .el-input__suffix {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  .dialog-selector__tabs {
+    height: calc(100% - 2px);
+
+    ::v-deep {
+      .el-tabs__content {
+        height: calc(100% - 45px);
+        padding: 0;
+      }
+      .el-tab-pane {
+        height: 100%;
+      }
+    }
+  }
+  .user-selector {
+    ::v-deep {
+      .el-table::before {
+        background-color: transparent;
+      }
+    }
+  }
+</style>