@lx-frontend/wrap-element-ui 1.0.0-beta.8 → 1.0.1-7.beta-2

package/src/components/EditableTable/{types.ts → types/index.ts}

@@ -1,116 +1,176 @@
-export enum IEditType {
-  INPUT = 'input',
-  SELECT = 'select',
-  DATE_ONLY = 'date'
-}
-
-export interface IColumnConfigRequired {
-  prop: string;
-  label: string;
-  editType?: IEditType; // 编辑格式
-  sortable?: boolean; // 该列是否允许排序，ture则表头弹窗会显示升降序按钮
-  slotName?: string; // 如果要自定义，传入 slotName
-  isAlwaysShow?: boolean; // 不可隐藏，显示设置中，该列不允许隐藏
-  /** 默认隐藏，显示设置中，该列默认隐藏 */
-  defaultHide?: boolean;
-  /** 列是否允许搜索，true则表头弹窗会多一个搜索框，一列中有多个搜索字段时传数组进行配置 */
-  search?: boolean | ISearchOptions
-  summary?: boolean; // 是否可以显示该列的统计
-  summaryMethod?: (values: any[]) => string | number; // 这一列的统计方法，values为该列的所有值
-  /** 过滤，传数组时默认复选框 */
-  filters?: {
-    type?: 'checkbox' | 'radio',
-    options: FiltersOption[]
-    default?: string | number | string[] | number[]
-  } | FiltersOption[]
-  // 透传el-table column有的属性， https://element.eleme.cn/#/en-US/component/table#table-column-attributes
-  [key: string]: any;
-}
-
-type FiltersOption = { value: string | number; text: string; [key: string]: any }
-
-type ISearchOptions = {
-  prop: string,
-  label: string,
-  validator?: (value: string) => boolean
-}[]
-
-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;
-  [k: string]: any;
-}
-
-export interface IProps {
-  dataList: ITableDataItem[];
-  columnConfig: IColumnConfig[];
-  hasExpandRow?: boolean;
-  hasIndexColumn?: boolean;
-  hasSelectionColumn?: boolean;
-  rowDragAble?: boolean;
-  total: number;
-  defaultOperations?: IDefaultOperationType[];
-  colorList?: IColorList;
-  leftFixedCount?: number;
-  dragSemiRange?: number;
-  loading?: boolean;
-  settingStorgeKey?: string
-  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
-}
+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 IFilterDoubleDatePicker {
+  type: 'doubleDatePicker',
+  prop: [string, string],
+  label?: string,
+	pickerOptions?: DatePicker['pickerOptions']
+}
+
+/** 筛选组件 - 月日选择器 */
+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 type FilterItem = IFilterInput | IFilterSelect | IFilterDoubleDatePicker | IFilterMonthDayPicker | IFilterColorRadio
+
+/** 筛选组件类型 */
+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;
+}
+
+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 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
+  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/SearchForm/index.vue

@@ -8,7 +8,7 @@
       v-for="({
         isEmpty = true, key, type, prop, label, placeholder, candidate, filterable=false, withoutAll=false, collapseTags=false,
         clearable=false, multiple=false, multipleLimit=0, changeCb, inputLimitCallback, slotName, dateType='date',
-        doubleIsInline = true,
+        doubleIsInline = true, maxlength = 255,
       }) in config"
       :key="label"
       :label="showLabel ? label : ''"
@@ -18,6 +18,7 @@
         v-if="type === 'input'"
         :placeholder="placeholder ? placeholder : showLabel ? '请输入' : label"
         :value="formData[prop]"
+        :maxlength="maxlength"
         @input="val => handleInput(val, prop, inputLimitCallback)"
       />
       <div
@@ -54,7 +55,7 @@
         />
         <el-option
           v-for="({name, value, code, id}) in candidate"
-          :key="id || name"
+          :key="value || code || id"
           :value="value || code || id"
           :label="name"
         />
@@ -65,6 +66,7 @@
         @change="(...args) => changeCb && changeCb(...args)"
         :value="formData[prop]"
         format="yyyy-MM-dd"
+        value-format="yyyy-MM-dd"
         :type="dateType"
         range-separator="到"
         :placeholder="dateType == 'date' ? placeholder || '选择日期' : '选择日期范围'"
@@ -100,7 +102,7 @@
           class="is-empty"
         >
           空白
-        </el-checkbox> 
+        </el-checkbox>
       </div>
       <slot
         v-if="type === 'slot'"
@@ -218,6 +220,7 @@ export default {
         this.checkedIds[k] = false
       })
       this.$emit('update:formData', { ...this.formData, ...this.initialData })
+      this.$emit('clear')
     },
 
     handleFormClose () {
@@ -241,4 +244,4 @@ export default {
     }
   }
 }
-</style>
+</style>

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

@@ -0,0 +1,63 @@
+type BaseOption = {
+  label: string
+  prop: string
+  clearable?: boolean
+  placeholder?: string
+  key?: string
+  changeCb?: (value: any) => any
+}
+
+type SlotOption = Omit<BaseOption, 'prop'> & {
+  prop?: string
+  type: 'slot'
+  slotName: string
+}
+
+type InputOption = BaseOption & {
+  type: 'input'
+  inputLimitCallback?: (value: string) => boolean
+  maxlength?: number
+}
+
+type SelectOption = BaseOption & {
+  type: 'select'
+  multiple?: boolean
+  filterable?: boolean
+  multipleLimit?: number
+  collapseTags?: boolean
+  withoutAll?: boolean
+  candidate: {
+    name: string
+    value?: string | number
+    id?: string | number
+    code?: string | number
+  }[]
+}
+
+type DatePickerOption = BaseOption & {
+  type: 'datePicker'
+  dateType?: string
+}
+
+type BaseDoubleOption = Omit<BaseOption, 'prop'> & {
+  doubleIsInline?: boolean
+  prop: [string, string]
+}
+
+type DoubleInputOption = BaseDoubleOption & {
+  type: 'doubleInput'
+  inputLimitCallback?: (value: string) => boolean
+}
+
+type DoubleDatePickerOption = BaseDoubleOption & {
+  type: 'doubleDatePicker'
+  isEmpty?: boolean
+}
+
+export type SearchFormConfigOption =
+  | InputOption
+  | SelectOption
+  | DatePickerOption
+  | DoubleInputOption
+  | DoubleDatePickerOption
+  | SlotOption