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

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

@@ -1,212 +0,0 @@
-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

@@ -1,141 +0,0 @@
-<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

@@ -1,119 +0,0 @@
-<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>