@lx-frontend/wrap-element-ui 1.0.26 → 1.0.27

package/src/components/EditableTable/types/index.ts

@@ -0,0 +1,212 @@
+import type { TableColumn, DatePicker } from 'element-ui'
+
+export enum IEditType {
+  INPUT = 'input',
+  SELECT = 'select',
+  DATE_ONLY = 'date'
+}
+
+export interface ISortOption {
+  prop: string
+  label: string
+}
+
+/** 筛选组件 - 输入框 */
+export interface IFilterInput {
+  type: 'input'
+  prop: string,
+  label?: string,
+  validator?: (value: string) => boolean
+  placeholder?: string
+}
+
+export interface IFilterSelectOptions {
+  value: any;
+  text: string;
+  [key: string]: any;
+}
+
+/** 筛选组件 - 单选/多选 */
+export interface IFilterSelect {
+  type: 'radio' | 'checkbox'
+  prop: string
+  options: IFilterSelectOptions[]
+  label?: string
+  defaultValue?: any | any[]
+}
+
+/** 筛选组件 - 日期范围（拆分两个日期选择器） */
+export interface IFilterDoubleDatePickerBase {
+  type: 'doubleDatePicker',
+  prop: [string, string],
+  label?: string,
+}
+
+export interface IFilterDoubleDatePicker extends IFilterDoubleDatePickerBase {
+  pickerOptions?: {
+    start?: DatePicker['pickerOptions']
+    end?: DatePicker['pickerOptions']
+  }
+}
+
+export interface IFilterDoubleDatePickerLimit extends IFilterDoubleDatePickerBase {
+  /** 限制天数范围 */
+  limit?: number
+}
+
+/** 筛选组件 - 月日选择器 */
+export interface IFilterMonthDayPicker {
+  type: 'monthDayPicker',
+  prop: [string, string],
+  label?: string,
+  /** 可选择的范围 */
+  limit: number,
+}
+
+/** 筛选组件 - 颜色选择器 */
+export interface IFilterColorRadio {
+  type: 'colorRadio',
+  prop: string,
+  label?: string,
+  options: Array<IFilterSelectOptions & { color: string }>
+}
+
+export interface IFilterSlot {
+  type: 'slot',
+  slotName: string,
+  active: () => boolean
+}
+
+export type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterDoubleDatePickerLimit | IFilterMonthDayPicker | IFilterColorRadio | IFilterSlot
+
+/** 筛选组件类型 */
+export type FilterListType = Array<FilterItem>
+
+type _IColumnConfigRequired = {
+  prop: string;
+  label: string;
+  editType?: IEditType; // 编辑格式
+  editSlotName?: string; // 编辑时，自定义编辑组件的slotName
+  sortable?: boolean | ISortOption[]; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
+  _sortable?: _IColumnConfigRequired['sortable']; // 内部使用，el-table 的 sortable 不支持数组，用来同步 sortable
+  /** 内部使用， */
+  isColumnSortable?: boolean;
+  slotName?: string; // 如果要自定义，传入 slotName
+  hoverSlotName?: string; // 悬浮时，自定义悬浮组件的slotName
+  isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
+  /** 默认隐藏，显示设置中，该列默认隐藏 */
+  defaultHide?: boolean;
+  summary?: boolean; // 是否可以显示该列的统计
+  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
+  /** 格式化函数，用于自定义渲染 */
+  formatter?: (row: any, column: IColumnConfig, value: any, index: number) => string | number;
+  width?: number | string;
+  minWidth?: number | string;
+  /** 自定义颜色表头label */
+  customColorLabel?: boolean;
+  filters?: FilterListType;
+  selectOptions?: any
+}
+
+export type IColumnConfigRequired = _IColumnConfigRequired & Partial<Omit<TableColumn, keyof _IColumnConfigRequired>>
+
+type IInputColumn = IColumnConfigRequired & {
+  inputType: string | number;
+}
+
+type ISelectColumn = IColumnConfigRequired & {
+  options: { key: string; value: string | number;[key: string]: any }[];
+}
+
+type IDateOnlyColumn = IColumnConfigRequired
+type IDateTimeColumn = IColumnConfigRequired
+
+export type IColumnConfig = IInputColumn | ISelectColumn | IDateOnlyColumn | IDateTimeColumn
+
+export type IColorList = {
+  name: string; // 颜色名称
+  textColor: string; // 颜色弹窗中文本颜色
+  sampleColor: string; // 颜色弹窗中样例的颜色
+  bgColor: string; // 选中颜色后，行背景色
+  id: number; // 颜色id
+  default?: boolean // 是否是默认色，默认色需要显示颜色图标
+}[]
+
+type IPointLoc = {
+  x: number;
+  y: number;
+}
+export type IDraggingData = {
+  isDragging?: boolean
+  startPosition?: IPointLoc
+  draggingRow?: HTMLElement | HTMLElement[]
+  draggingIndex?: number
+  dropIndex?: number
+  rowDoms?: Record<number, HTMLElement[]>
+  rowHeight?: number
+  rowsRange?: ([number, number] | undefined)[]
+  hiddenTds?: HTMLElement[]
+  fullScreenDiv?: HTMLElement
+}
+
+export type IDefaultOperationType = 'edit' | 'delete' | 'top'
+
+export type ITableDataItem = {
+  colorId?: number;
+  isPinned?: boolean;
+  // 固定背景色：如果行数据中有该值，行背景色将以该值为准，优先级大于colorId指定的背景色（颜色实例不受影响）
+  __static_bg_color__?: string;
+  [k: string]: any;
+}
+
+export type SettingStorgeConfig = {
+  version: string,
+  config: {
+    fields: Record<string, { hidden: boolean, order: number }>,
+    leftFixedColumnCount: number
+  }
+}
+
+export type SettingStorgeMigrationConfigs = {
+  schemaVersion?: number
+  version: {
+    form: string
+    to: string
+  }
+  migration: (currentConfig: any, columns: IColumnConfig[]) => SettingStorgeConfig
+}[]
+
+export interface IProps {
+  dataList: ITableDataItem[];
+  columnConfig: IColumnConfig[];
+  hasExpandRow?: boolean;
+  hasIndexColumn?: boolean;
+  hasSelectionColumn?: boolean;
+  rowDragAble?: boolean;
+  total: number;
+  defaultOperations?: IDefaultOperationType[];
+  colorList?: IColorList;
+  colorFilterConfig?: IColumnConfig
+  leftFixedCount?: number;
+  dragSemiRange?: number;
+  loading?: boolean;
+  settingStorgeKey?: string
+  settingStorgeMigrationConfigs?: SettingStorgeMigrationConfigs
+  localSort?: boolean
+  localFilter?: boolean
+  currentPage: number
+}
+
+export interface IEmits {
+  (e: 'selection-change', selection: any): void
+  (e: 'row-bg-change', param: { colorId: number; row: ITableDataItem; rowIndex: number }): void
+  (e: 'row-drag-drop', param: { row: any; fromIndex: number; toIndex: number; page: number; size: number; }): void
+  (e: 'row-delete', param: { row: any; index: number; page: number; size: number; }): void
+  (e: 'row-edit', param: { row: any, index: number; page: number; size: number; }): void
+  (e: 'row-pin-to-top', param: { row: any, rawIndex: number; page: number; size: number; }): void
+  (e: 'row-edit-save', param: { page: number; size: number; row: any; changedData: Record<string, any>; }): void
+  (e: 'row-edit-cancel', param: { row: any; page: number; size: number; }): void
+  (e: 'page-change', param: { page: number, size: number }): void
+  (e: 'search', param: Record<string, any>): void
+  (e: 'sort-change', param: { order: 'descending' | 'ascending' | null, prop: string }): void
+}

package/src/components/Ellipsis/MultilineEllipsis.vue

@@ -0,0 +1,141 @@
+<template>
+  <div class="ellipsis">
+    <div class="ellipsis__container" :style="{ 'font-size': `${fontSize}px`, 'line-height': lineHeight, color }">
+      <div class="ellipsis__content" ref="contentEl" :style="{ height: `${preHeight}px`, 'align-items': alignItems }">{{ preContent }}</div>
+      <div class="ellipsis__last-line" ref="lastLineEl" :style="{ height: `${lastLineHeight}px` }">{{ restContent }}
+        <span v-if="isShowIconMethod()" :class="iconName"></span>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'MultilineEllipsis',
+  props: {
+    fontSize: {
+      type: Number,
+      default: 12
+    },
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    lineCount: {
+      type: Number,
+      default: 1
+    },
+    content: {
+      type: String,
+      default: ''
+    },
+    isOverflow: {
+      type: Boolean,
+      default: false
+    },
+    iconName: {
+      type: String,
+      default: 'el-icon-arrow-down'
+    },
+    overCountTip: {
+      type: Object,
+    },
+    showIconObj: {
+      type: Object,
+      default: () => {
+        return {
+          isShowIcon: false,
+          length: 0,
+        }
+      },
+    },
+  },
+  data () {
+    return {
+      restContent: '',
+      preContent: '',
+      lastLineHeight: 0,
+      alignItems: 'center'
+    }
+  },
+  computed: {
+    preHeight () {
+      return (this.fontSize + 2) * (this.lineCount - 1)
+    },
+    lineHeight () {
+      return `${this.fontSize + 2}px`
+    }
+  },
+  mounted () {
+    // 由于在 element table 中，渲染计算时的宽度可能与实际展示时的宽度可能存在偏差，在此把宽度固定为组件挂载时获取到的宽度
+    this.$refs.contentEl.style.width = `${this.$refs.contentEl.offsetWidth}px`
+    // 处理长度为1的数据不用走截取逻辑减少计算
+    if (this.content.length === 1) {
+      this.restContent = this.content;
+      this.$refs.contentEl.remove();
+      this.lastLineHeight = (this.fontSize + 2);
+      return;
+    }
+    this.bsearch(this.content)
+    this.lastLineHeight = (this.fontSize + 2)
+  },
+  methods: {
+    bsearch (data, pre = 0) {
+      const len = data.length
+      const half = Math.floor((len - pre) / 2) + pre
+      if (len - pre <= 1) {
+        const restContent = pre === 0 ? this.content.slice(pre) : this.content.slice(pre + 1)
+        this.preContent = pre === 0 ? '' : data.slice(0, pre + 1)
+        if (!restContent) {
+          this.lastLineHeight = 0
+          this.$emit('update:isOverflow', false)
+          return false
+        }
+        this.restContent = restContent
+        this.$nextTick(() => {
+          this.$emit('update:isOverflow', this.$refs.lastLineEl.scrollWidth !== this.$refs.lastLineEl.offsetWidth)
+        })
+        return true
+      }
+      this.preContent = data.slice(0, half + 1)
+      this.$nextTick(() => {
+        const isEqual = this.$refs.contentEl.scrollHeight === this.preHeight
+        if (isEqual) {
+          this.alignItems = 'center'
+          return this.bsearch(data, half)
+        }
+        this.alignItems = 'flex-start'
+        return this.bsearch(data.slice(0, half), pre)
+      })
+      return true
+    },
+    isShowIconMethod() {
+      /**
+       * 1、isShowIcon--是否展示icon; length-- 所有传入数据总数量
+       * 2、this.overCountTip.index === this.overCountTip.length 当前列表展示个数(最后一个列)
+       * 3、length > this.overCountTip.length 满足总个数大于当前列表展示个数
+      **/ 
+      const { isShowIcon, length } = this.showIconObj;
+      return (isShowIcon && this.overCountTip.index === this.overCountTip.length && this.content.length && (length > this.overCountTip.length));
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .ellipsis {
+    width: 100%;
+    margin: 5px auto;
+    &__content {
+      width: 100%;
+      overflow: hidden;
+      display: flex;
+    }
+    &__last-line {
+      width: 100%;
+      overflow: hidden;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+    }
+  }
+</style>

package/src/components/Ellipsis/index.vue

@@ -0,0 +1,119 @@
+<template>
+  <div class="ellipsis-popover">
+    <ElPopover
+      :disabled="showPopover === 'off' || (showPopover !== 'always' && !isOverflow)"
+      :popper-class="popoverName"
+      placement="top-start"
+      trigger="hover"
+    >
+      <div class="popover-content">
+        <slot name="popover">
+          <div v-for="(item, index) in contentArr" :key="getKey(item, index)">{{ item }}</div>
+        </slot>
+      </div>
+      <div slot="reference">
+        <div v-for="(item, index) in contentArr" :key="getKey(item, index)">
+          <MultilineEllipsis
+            :content="item"
+            :fontSize="fontSize"
+            :color="color"
+            :lineCount="lineCount"
+            :iconName="iconName"
+            :showIconObj="{
+              isShowIcon: showIconObj.isShowIcon,
+              length: showIconObj.length,
+            }"
+            :overCountTip="{
+              index: index + 1,
+              length: contentArr.length,
+            }"
+            :isOverflow.sync="overflowArr[index]">
+          </MultilineEllipsis>
+        </div>
+      </div>
+    </ElPopover>
+  </div>
+</template>
+
+<script>
+import MultilineEllipsis from './MultilineEllipsis.vue'
+
+export default {
+  name: 'Ellipsis',
+  components: {
+    MultilineEllipsis
+  },
+  props: {
+    fontSize: {
+      type: Number,
+      default: 12
+    },
+    color: {
+      type: String,
+      default: '#000000'
+    },
+    lineCount: {
+      type: Number,
+      default: 1
+    },
+    iconName: {
+      type: String,
+      default: 'el-icon-arrow-down'
+    },
+    overCountTip: {
+      type: Object
+    },
+    showIconObj: {
+      type: Object,
+      default: () => {
+        return {
+          isShowIcon: false,
+          length: 0
+        }
+      },
+    },
+    content: {
+      type: [String, Array],
+      default: ''
+    },
+    popoverName: String,
+    showPopover: {
+      type: String,
+      default: 'auto' // 可选值 auto, always, off
+    }
+  },
+  data () {
+    return {
+      overflowArr: []
+    }
+  },
+  computed: {
+    contentArr () {
+      return typeof (this.content) === 'string' ? [this.content] : [...this.content]
+    },
+    isOverflow () {
+      return this.overflowArr.includes(true)
+    }
+  },
+  watch: {
+    contentArr (val) {
+      this.overflowArr.length = val.length
+    }
+  },
+  methods: {
+    getKey (item, index) {
+      return btoa(escape(`${item}_${index}`))
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .ellipsis-popover {
+    width: 100%;
+  }
+
+  .popover-content {
+    padding: 18px 20px;
+  }
+</style>