imeik-bizui 1.7.7 → 1.7.9

package/dist/bizui/api/permission.js

@@ -11,3 +11,15 @@ export function departmentSelector(params) {
     params
   })
 }
+
+/**
+ * 部门列表，包含虚拟节点
+ * /permissioncenter-admin/department/listDepartmentWithVirtual
+ */
+export function listDepartmentWithVirtual(params) {
+  return request({
+    url: '/permissioncenter-admin/department/listDepartmentWithVirtual',
+    method: 'get',
+    params
+  })
+}

package/dist/bizui/src/CommonDepartmentCascader/index.vue

@@ -0,0 +1,326 @@
+<template>
+  <div :class="!isView ? 'w-full' : 'inline'">
+    <template v-if="isView">
+      <div v-if="isWxWorkMobile && needShowMore" class="mobile-text-container">
+        <span v-if="!plantText">-</span>
+        <div v-else-if="showAll" :id="`plantText-${random}`" class="show-all-text">
+          {{ plantText }}
+          <div class="btn-text" @click="showMore">
+            收起
+            <img class="icon-retract" src="https://imeikud.oss-cn-beijing.aliyuncs.com/pcUploads/1724846415100/icon-retract.png" />
+          </div>
+        </div>
+        <div v-else class="show-limit-text">
+          {{ plantText }}
+          <div class="btn-text show-more" @click="showMore">
+            展开
+            <img class="icon-show-more" src="https://imeikud.oss-cn-beijing.aliyuncs.com/pcUploads/1724846420511/icon-show-more.png" />
+          </div>
+        </div>
+      </div>
+      <template v-else-if="plantText">
+        <span v-if="showAll" class="viewText showAll">{{ plantText }}</span>
+        <el-popover v-else trigger="hover">
+          <div class="departmentPopover">{{ plantText }}</div>
+          <span slot="reference" class="viewText">{{ plantText }}</span>
+        </el-popover>
+      </template>
+      <span v-else>-</span>
+    </template>
+
+    <el-cascader
+      v-else
+      ref="select"
+      v-model="myValue"
+      popper-class="loading"
+      class="w-full"
+      v-bind="$attrs"
+      :props="cascaderProps"
+      :options="options"
+      :placeholder="$attrs.placeholder || (optionsLoading ? '加载中...' : '请选择部门')"
+      :collapse-tags="$attrs.collapseTags || collapseTags"
+      :clearable="$attrs.clearable !== false"
+      :filterable="$attrs.filterable !== false"
+      @change="handleChange"
+    >
+    </el-cascader>
+  </div>
+</template>
+
+<script>
+import emitter from 'element-ui/src/mixins/emitter'
+import { listDepartmentWithVirtual } from '../../api/permission'
+import { tree2Array, getLabelByValue } from '../../utils/index'
+
+export default {
+  name: 'CommonDepartmentCascader',
+  mixins: [emitter],
+  props: {
+    value: {
+      type: [String, Number, Array],
+      default: undefined
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    emitPath: {
+      type: Boolean,
+      default: false
+    },
+    propValue: {
+      type: String,
+      default: 'departmentCode'
+    },
+    expandTrigger: {
+      type: String,
+      default: 'click'
+    },
+    checkStrictly: {
+      type: Boolean,
+      default: false
+    },
+    extra: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 是否仅展示文字
+    isView: {
+      type: Boolean,
+      default: false
+    },
+    // 查看的时候是否展示全部
+    showAll: {
+      type: Boolean,
+      default: true
+    },
+    // 是否仅展示主公司
+    onlyMainCompany: {
+      type: Boolean,
+      default: true
+    }
+  },
+  data() {
+    return {
+      myValue: undefined,
+      options: [],
+      optionsLoading: false,
+      childHasUnChecked: false,
+      showAll: true,
+      needShowMore: true,
+      random: Math.random() * 100
+    }
+  },
+  computed: {
+    /**
+     * 判断当前环境是否为企业微信移动端，企微移动端禁止了浏览器的下载功能
+     * 这时候不展示下载按钮即可
+     */
+    isWxWorkMobile() {
+      const userAgent = window.navigator.userAgent.toLowerCase()
+      const result = /wxwork/i.test(userAgent) && /iphone|android/i.test(userAgent)
+      // 企业微信移动端
+      return result
+    },
+    cascaderProps() {
+      return {
+        multiple: this.multiple,
+        label: 'departmentName',
+        value: this.propValue,
+        children: 'childDepartments',
+        emitPath: this.emitPath,
+        expandTrigger: this.expandTrigger,
+        checkStrictly: this.checkStrictly
+      }
+    },
+    plantText() {
+      const arr = tree2Array(this.options, { key: 'childDepartments' })
+      const vals = [].concat(this.myValue) // 单选的时候也转成数组
+      const list = []
+
+      vals.map((i) => {
+        list.push(getLabelByValue(arr, i, { labelKey: 'departmentName', valueKey: this.propValue }))
+        return i
+      })
+
+      return list.join(', ')
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        this.setMyValue()
+      }
+    },
+    plantText: {
+      immediate: true,
+      handler(val) {
+        this.$nextTick(() => {
+          const divElement = document.getElementById(`plantText-${this.random}`)
+          if (divElement) {
+            const style = window.getComputedStyle(divElement, null)
+            const height = style.height.replace('px', '')
+            const lineHeight = style.lineHeight.replace('px', '')
+            if (height / lineHeight >= 2) {
+              this.needShowMore = true
+              this.showAll = false
+            } else {
+              this.needShowMore = false
+              this.showAll = true
+            }
+          }
+        })
+      }
+    }
+  },
+  created() {
+    this.getOptions()
+  },
+  methods: {
+    showMore() {
+      this.showAll = !this.showAll
+      this.$emit('showMore', this.showAll)
+    },
+
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = this.value
+      }
+    },
+
+    getOptions() {
+      const params = {
+        ...this.extra
+      }
+      this.optionsLoading = true
+      listDepartmentWithVirtual(params)
+        .then((res) => {
+          if (res.code === 200) {
+            if (!res.data) {
+              return
+            }
+            let resData = res.data || []
+            if (this.onlyMainCompany) {
+              resData = resData.filter(item => {
+                return item.orgCode === 'virtual-201'
+              })
+            }
+            this.options = this.dealList(resData || [])
+          }
+        })
+        .finally(() => {
+          this.optionsLoading = false
+        })
+    },
+
+    dealList(arr) {
+      return arr.map((i) => {
+        if (i.childDepartments && i.childDepartments.length) {
+          this.dealList(i.childDepartments)
+        } else {
+          delete i.childDepartments
+        }
+        return i
+      })
+    },
+
+    handleChange() {
+      this.$emit('input', this.myValue)
+      this.$emit('change', this.myValue)
+      this.dispatch('ElFormItem', 'el.form.change', this.myValue)
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+.mobile-text-container {
+  position: relative;
+  .show-more {
+    position: absolute;
+    bottom: 0 !important;
+    right: 0;
+    &::before {
+      content: '';
+      position: absolute;
+      bottom: 0;
+      right: 48px;
+      background: linear-gradient( 270deg, #FFFFFF 0%, rgba(255,255,255,0) 100%);
+      width: 60px;
+      height: 31px;
+    }
+  }
+  .btn-text {
+    position: absolute;
+    bottom: -28px;
+    right: 0;
+    display: flex;
+    align-items: center;
+    background: #fff;
+    font-family: PingFangSC, PingFang SC;
+    font-weight: 500;
+    font-size: 14px;
+    color: #3285F6;
+    // line-height: 31px;
+    .icon-retract, .icon-show-more {
+      width: 16px;
+      height: 16px;
+      margin-left: 4px;
+    }
+  }
+}
+.show-limit-text {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+.viewText {
+  max-width: max-content;
+  overflow: hidden;
+  display: block;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  cursor: pointer;
+
+  &.showAll {
+    text-overflow: unset;
+    overflow: visible;
+    white-space: break-spaces;
+  }
+}
+
+.labelItem {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  transform: translate(6px, 0px);
+  justify-content: space-between;
+
+  .label {
+    width: max-content;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+  .selecter {
+    font-size: 14px;
+    cursor: pointer;
+  }
+}
+
+.departmentPopover {
+  max-width: 300px;
+  max-height: 200px;
+  overflow: auto;
+  padding-right: 12px;
+  line-height: 24px;
+  cursor: pointer;
+}
+</style>

package/dist/bizui/src/CommonEmployeeSelect/SelectShape.vue

@@ -0,0 +1,110 @@
+<template>
+  <label :style="{ width: `${selectWidth}px` }" class="shape-check-box el-checkbox" :class="{'is-checked': checked}">
+    <span v-if="multiple" class="el-checkbox__input" :class="{'is-checked': checked}">
+      <span class="el-checkbox__inner"></span>
+    </span>
+
+    <span class="el-checkbox__label">
+      <slot></slot>
+    </span>
+  </label>
+
+  <!-- <span v-else :style="{ width: `${selectWidth}px` }" class="el-checkbox__label">
+    <slot></slot>
+  </span> -->
+</template>
+
+<script>
+// 模拟cascader，改变下拉组件多选时的展示样式 - 在每行前面加checkbox
+export default {
+  props: {
+    // 是否多选
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    // 是否 checked
+    checked: {
+      type: Boolean,
+      default: false
+    },
+    // 下拉框宽度
+    selectWidth: {
+      type: Number,
+      default: undefined
+    }
+  }
+}
+</script>
+
+<style lang="scss">
+  .el-select-dropdown.is-multiple {
+    .el-select-dropdown__item {
+      padding-right: 20px;
+
+      // &:last-of-type {
+      //   margin-bottom: 4px;
+      //   text-overflow: inherit;
+      // }
+
+      .el-checkbox__input {
+        transform: translate(0px, 1px);
+      }
+
+      &.selected {
+        .shape-check-box.is-checked {
+          width: 100%;
+          background: #ECF2FE;
+          transform: translate(-8px, 0px);
+          padding: 0 8px;
+        }
+
+        &:has(.shape-check-box)::after {
+          display: none;
+        }
+
+        &.hover {
+          background-color: #fff;
+        }
+      }
+
+      &.is-disabled {
+        .shape-check-box {
+          cursor: not-allowed;
+          color: #c0c4cc;
+        }
+        .el-checkbox__inner {
+          background-color: #f5f7fa;
+          border-color: #d1dbe5;
+        }
+      }
+
+      &.hover {
+        background-color: #fff;
+      }
+    }
+  }
+
+  .el-select-dropdown {
+    .el-select-dropdown__item {
+      &:not(:last-of-type) {
+        margin-bottom: 2px;
+      }
+    }
+
+    .shape-check-box {
+      display: flex;
+      align-items: center;
+      height: 34px;
+
+      .el-checkbox__label {
+        // width: 100%;
+        flex: 1;
+        display: inline-block;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+</style>

package/dist/bizui/src/CommonEmployeeSelect/index.vue

@@ -0,0 +1,174 @@
+<template>
+  <div :class="!isView ? 'w-full' : 'inline'">
+    <ImOneLineDot v-if="isView" :text="plantText || '-'"></ImOneLineDot>
+    <el-select
+      v-else
+      ref="select"
+      v-model="myValue"
+      class="w-full"
+      :placeholder="placeholder"
+      :multiple="multiple"
+      :filterable="filterable"
+      :allow-create="allowCreate"
+      reserve-keyword
+      clearable
+      remote
+      :remote-method="remoteMethod"
+      :loading="loading"
+      popper-class="select-class"
+      :collapse-tags="collapseTags"
+      v-bind="$attrs"
+      @change="onChange"
+      @visible-change="visibleChange"
+    >
+      <el-option v-for="item in options" :key="item[prop.value]" :label="item.name || item.employeeNo" :value="item[prop.value]">
+        <slot name="item" :item="item">
+          <SelectShape :multiple="multiple" :checked="Array.isArray(myValue) && myValue.includes(item[prop.value])">
+            <span>{{ item.name || item.employeeNo }}<span v-if="item.orgName">（{{ item.orgName }}）</span></span>
+          </SelectShape>
+        </slot>
+      </el-option>
+    </el-select>
+  </div>
+</template>
+
+<script>
+import { employeeSelectOption } from '../../api/user'
+import { getLabelByValue } from '../../utils/index'
+import SelectShape from './SelectShape.vue'
+export default {
+  name: 'CommonEmployeeSelect',
+  components: { SelectShape },
+  props: {
+    prop: {
+      type: Object,
+      default() {
+        return {
+          value: 'objectCode'
+        }
+      }
+    },
+    value: {
+      type: [Number, String, Array],
+      default: undefined
+    },
+    placeholder: {
+      type: String,
+      default: '请选择'
+    },
+    multiple: {
+      type: Boolean,
+      default: false
+    },
+    filterable: {
+      type: Boolean,
+      default: true
+    },
+    allowCreate: {
+      type: Boolean,
+      default: false
+    },
+    collapseTags: {
+      type: Boolean,
+      default: false
+    },
+    extra: {
+      type: Object,
+      default() {
+        return {}
+      }
+    },
+    // 是否仅展示文字
+    isView: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      myValue: undefined,
+      loading: true,
+      selectName: undefined,
+      options: []
+    }
+  },
+  computed: {
+    plantText() {
+      const list = []
+      const vals = [].concat(this.myValue) // 单选的时候也转成数组
+      vals.map(i => {
+        list.push(getLabelByValue(this.options, i, { labelKey: 'name', valueKey: 'objectCode' }))
+        return i
+      })
+      return list.join(',')
+    }
+  },
+  watch: {
+    value: {
+      immediate: true,
+      handler() {
+        if (JSON.stringify(this.value) !== JSON.stringify(this.myValue)) {
+          this.getOptions()
+        }
+        this.setMyValue()
+      }
+    }
+  },
+  created() {
+    this.getOptions()
+  },
+  methods: {
+    maskPhoneNumber(phoneNumber) {
+      // 假设手机号格式为11位数字
+      const maskedNumber = phoneNumber.substring(0, 3) + '****' + phoneNumber.substring(7)
+      return maskedNumber
+    },
+
+    setMyValue() {
+      try {
+        this.myValue = JSON.parse(JSON.stringify(this.value))
+      } catch (error) {
+        this.myValue = undefined
+      }
+    },
+
+    remoteMethod(query) {
+      this.loading = true
+      this.selectName = query
+      this.getOptions()
+    },
+
+    visibleChange(val) {
+      if (!val) {
+        this.selectName = ''
+        this.getOptions()
+      }
+    },
+    getOptions() {
+      const params = {
+        name: this.selectName,
+        ...this.extra
+      }
+      if (!this.selectName && this.value) {
+        params.objectCodeList = Array.isArray(this.value) ? this.value : [this.value]
+        params.selectStatus = !this.value || !this.value.length ? '0' : '1'
+      }
+      this.loading = true
+      employeeSelectOption(params).then((res) => {
+        if (res.code === 200) {
+          this.options = res.data || []
+        } else {
+          this.$message.error(res.message)
+        }
+        this.loading = false
+      })
+    },
+
+    onChange() {
+      console.log('onChange', this.myValue, this.plantText)
+      this.$emit('input', this.myValue, this.plantText)
+      this.$emit('change', this.myValue, this.plantText)
+    }
+  }
+}
+</script>

package/dist/bizui/src/CommonEnumShow/index.vue

@@ -0,0 +1,63 @@
+<template>
+  <span class="enum-show">{{ enumLabel }}</span>
+</template>
+<script>
+export default {
+  name: 'CommonEnumShow',
+  props: {
+    enumKey: {
+      required: true,
+      type: String,
+      default: ''
+    },
+    enumValue: {
+      required: true,
+      type: [String, Array, Number],
+      default: ''
+    }
+  },
+  computed: {
+    enums() {
+      return this.$bizui.enums
+    },
+    enumLabel() {
+      if (!this.enumValue) {
+        return '-'
+      }
+      if (Array.isArray(this.enumValue)) {
+        const lables = []
+        for (let i = 0; i < this.enumValue.length; i++) {
+          const value = this.enumValue[i]
+          const label = this.getLabelByValue(this.enumKey, value)
+          lables.push(label)
+        }
+        return lables.join(',') || '-'
+      } else {
+        return this.getLabelByValue(this.enumKey, this.enumValue)
+      }
+    }
+  },
+  methods: {
+    getLabelByValue(key, value) {
+      const item = this.getOptionsItemByValue(key, value)
+      return item.label || '-'
+    },
+
+    getOptionsItemByValue(optionKey, value) {
+      const enums = this.enums
+      let result = {}
+      const options = enums[optionKey] || []
+      if (!options || options.length === 0) {
+        return result
+      }
+      for (let i = 0; i < options.length; i++) {
+        const item = options[i]
+        if (item.value === value + '') {
+          result = item
+        }
+      }
+      return result
+    }
+  }
+}
+</script>

package/dist/bizui/utils/index.js

@@ -41,3 +41,20 @@ export function getLabelByValue(options = [], value, opt = {}) {
 
   return (el && el[opt.labelKey || 'label']) || ''
 }
+
+// tree 转成数组
+export function tree2Array(tree, opt = {}) {
+  if (!Array.isArray(tree) || !tree.length) {
+    return []
+  }
+
+  const res = []
+  tree.forEach(v => {
+    res.push(v)
+    if (v[opt.key || 'children']) {
+      res.push(...tree2Array(v[opt.key || 'children'], opt))
+    }
+  })
+
+  return res
+}