@wlydfe/pro-ui 0.2.21 → 0.2.23

package/packages/components/table/src/table-action-bar.vue

@@ -1,425 +0,0 @@
-<template>
-  <el-table-column
-    key="actionBar"
-    class-name="plus-table-action-bar"
-    :label="unref(label) || t('plus.table.action')"
-    :fixed="fixed || 'right'"
-    :width="width || 200"
-    v-bind="actionBarTableColumnProps"
-  >
-    <template #default="{ row, $index, ...rest }">
-      <!-- 显示出来的按钮 -->
-      <template v-for="buttonRow in getSubButtons(row, $index).preButtons" :key="buttonRow.text">
-        <component :is="render(row, buttonRow, $index, rest)" />
-      </template>
-
-      <!-- 隐藏的按钮 -->
-      <el-dropdown
-        v-if="getSubButtons(row, $index).showMore"
-        v-bind="triggerMoreProps"
-        class="plus-table-action-bar__dropdown"
-        :hide-on-click="hideOnClick"
-      >
-        <span class="plus-table-action-bar__dropdown__link">
-          <span class="plus-table-action-bar__more-text"> {{ t('plus.table.more') }}</span>
-          <slot name="action-bar-more-icon">
-            <el-icon>
-              <ArrowDownBold />
-            </el-icon>
-          </slot>
-        </span>
-
-        <!-- 下拉按钮 -->
-        <template #dropdown>
-          <el-dropdown-menu>
-            <el-dropdown-item
-              v-for="buttonRow in getSubButtons(row, $index).nextButtons"
-              :key="(unref(buttonRow.text) as string)"
-            >
-              <component :is="render(row, buttonRow, $index, rest)" />
-            </el-dropdown-item>
-          </el-dropdown-menu>
-        </template>
-      </el-dropdown>
-    </template>
-  </el-table-column>
-</template>
-
-<script lang="ts" setup>
-import type { VNode, AppContext, Ref, ComputedRef, Component } from 'vue'
-import { h, unref, withDirectives, inject, ref } from 'vue'
-import { ArrowDownBold } from '@element-plus/icons-vue'
-import type { ElMessageBoxOptions } from 'element-plus'
-import {
-  ElButton,
-  ElIcon,
-  ElLink,
-  ElTooltip,
-  ElMessageBox,
-  ElTableColumn,
-  ElDropdown,
-  ElDropdownItem,
-  ElDropdownMenu,
-  ElPopconfirm
-} from 'element-plus'
-import type { RecordType } from '@wlydfe/pro-ui-types'
-import { isFunction, isPlainObject } from '@wlydfe/pro-ui-components/utils'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import { TableFormRefInjectionKey } from '@wlydfe/pro-ui-constants'
-import type {
-  ButtonsCallBackParams,
-  ActionBarButtonsRow,
-  TableFormRefRow,
-  ActionBarProps
-} from './type'
-
-export interface PlusTableActionBarEmits {
-  (e: 'clickAction', data: ButtonsCallBackParams): void
-  (e: 'clickActionConfirmCancel', data: ButtonsCallBackParams): void
-}
-
-type Params = {
-  text: string
-  row: RecordType
-  buttonRow: ActionBarButtonsRow
-  index: number
-  rest: RecordType
-}
-
-defineOptions({
-  name: 'PlusTableActionBar'
-})
-
-const props = withDefaults(defineProps<ActionBarProps>(), {
-  label: '',
-  fixed: 'right',
-  type: 'link',
-  buttons: () => [],
-  width: 200,
-  showNumber: 3,
-  triggerMoreProps: () => ({
-    trigger: 'click'
-  }),
-  actionBarTableColumnProps: () => ({
-    align: 'center'
-  }),
-  confirmType: 'messageBox',
-  showLimitIncludeMore: false
-})
-const emit = defineEmits<PlusTableActionBarEmits>()
-
-const { t } = useLocale()
-
-// 控制下拉不隐藏，防止气泡定位异常
-const hideOnClick = ref(true)
-
-const formRefs = inject(TableFormRefInjectionKey) as Ref<Record<string | number, TableFormRefRow[]>>
-
-const getSubButtons = (row: RecordType, index: number) => {
-  const data = props.buttons.filter(item => {
-    if (isFunction(item.show)) {
-      const tempFunction = item.show as (
-        row: RecordType,
-        index: number,
-        button: ActionBarButtonsRow
-      ) => boolean | Ref<boolean> | ComputedRef<boolean>
-      const isShow = tempFunction(row, index, item)
-      return unref(isShow) !== false
-    }
-    return unref(item.show) !== false
-  })
-  const showNumber = isFunction(props.showNumber) ? props.showNumber(row, index) : props.showNumber
-  //  显示更多
-  const showMore = data.length > showNumber
-  if (!showMore) {
-    return {
-      showMore,
-      preButtons: data,
-      nextButtons: []
-    }
-  }
-  if (props.showLimitIncludeMore) {
-    return {
-      showMore,
-      preButtons: data.slice(0, showNumber - 1),
-      nextButtons: data.slice(showNumber - 1)
-    }
-  }
-  return {
-    showMore,
-    preButtons: data.slice(0, showNumber),
-    nextButtons: data.slice(showNumber)
-  }
-}
-
-/**
- * 获取确认按钮参数
- * @param buttonRow
- * @param callbackParams
- */
-const getConfirmParams = (params: Params, e?: MouseEvent) => {
-  const { row, buttonRow, index, rest, text } = params
-  const callbackParams = {
-    /**
-     * 解析后的按钮数据中的text
-     * @version v0.1.17
-     */
-    text,
-    row,
-    buttonRow,
-    index,
-    rowIndex: index,
-    e,
-    formRefs: formRefs.value[index],
-    ...rest
-  } as ButtonsCallBackParams
-
-  let message = t('plus.table.confirmToPerformThisOperation')
-  let title = t('plus.table.prompt')
-  let options: ElMessageBoxOptions | undefined = undefined
-  let appContext: AppContext | undefined | null = null
-
-  if (isPlainObject(buttonRow.confirm)) {
-    const tempTitle = isFunction(buttonRow.confirm.title)
-      ? buttonRow.confirm.title(callbackParams)
-      : (buttonRow.confirm.title as string)
-
-    if (tempTitle) {
-      title = tempTitle
-    }
-
-    const tempMessage = isFunction(buttonRow.confirm.message)
-      ? buttonRow.confirm.message(callbackParams)
-      : (buttonRow.confirm.message as string)
-
-    if (tempMessage) {
-      message = tempMessage
-    }
-
-    options = buttonRow.confirm?.options
-    appContext = buttonRow.confirm?.appContext
-  }
-
-  return { msg: { message, title, options, appContext }, callbackParams }
-}
-
-// 渲染
-const render = (
-  row: RecordType,
-  buttonRow: ActionBarButtonsRow,
-  index: number,
-  rest: RecordType
-): VNode => {
-  /**
-   *button props新增计算属性和函数类型支持
-   */
-  const buttonRowProps = isFunction(buttonRow.props)
-    ? buttonRow.props(row, index, buttonRow)
-    : unref(buttonRow.props)
-
-  const text = isFunction(buttonRow.text)
-    ? unref(buttonRow.text(row, index, buttonRow))
-    : unref(buttonRow.text)
-
-  const params: Params = {
-    text,
-    row,
-    buttonRow,
-    index,
-    rest
-  }
-
-  const { msg, callbackParams } = getConfirmParams(params)
-
-  if (props.type === 'icon') {
-    return h(
-      ElTooltip,
-      { placement: 'top', content: text as string, ...buttonRow.tooltipProps },
-      () =>
-        props.confirmType === 'popconfirm' && buttonRow.confirm
-          ? h(
-              'span',
-              {
-                class: 'el-icon'
-              },
-              h(
-                ElPopconfirm,
-                {
-                  trigger: 'click',
-                  ...(isPlainObject(buttonRow.confirm) ? buttonRow.confirm?.popconfirmProps : {}),
-                  title: msg.message,
-                  onConfirm: (event: MouseEvent) =>
-                    handleConfirm({ ...callbackParams, e: event, formRefs: formRefs.value[index] }),
-                  onCancel: (event: MouseEvent) =>
-                    handleCancel({ ...callbackParams, e: event, formRefs: formRefs.value[index] })
-                },
-                {
-                  reference: () =>
-                    withDirectives(
-                      h(
-                        ElIcon,
-                        {
-                          size: 16,
-                          style: { margin: 0 },
-                          ...buttonRowProps,
-                          onClick: () => {
-                            // 控制下拉不隐藏，防止气泡定位异常
-                            hideOnClick.value = false
-
-                            if (isFunction(buttonRow.onClick)) {
-                              buttonRow.onClick({
-                                ...callbackParams,
-                                formRefs: formRefs.value[index]
-                              })
-                            }
-                          }
-                        },
-                        () => (buttonRow.icon ? h(buttonRow.icon) : '')
-                      ),
-                      buttonRow.directives || []
-                    )
-                }
-              )
-            )
-          : withDirectives(
-              h(
-                ElIcon,
-                {
-                  size: 16,
-                  ...buttonRowProps,
-                  onClick: (event: MouseEvent) =>
-                    handleClickAction(
-                      { ...callbackParams, e: event, formRefs: formRefs.value[index] },
-                      msg
-                    )
-                },
-                () => (buttonRow.icon ? h(buttonRow.icon) : '')
-              ),
-              buttonRow.directives || []
-            )
-    )
-  } else {
-    const Tag: Component = props.type === 'button' ? ElButton : ElLink
-
-    // FIXME: fix SSR click it auto scrollTo page top
-    const defaultProps = props.type === 'link' ? { href: 'javaScript:;' } : {}
-
-    return props.confirmType === 'popconfirm' && buttonRow.confirm
-      ? h(
-          ElPopconfirm,
-          {
-            trigger: 'click',
-            ...(isPlainObject(buttonRow.confirm) ? buttonRow.confirm?.popconfirmProps : {}),
-            title: msg.message,
-            onConfirm: (event: MouseEvent) =>
-              handleConfirm({ ...callbackParams, e: event, formRefs: formRefs.value[index] }),
-            onCancel: (event: MouseEvent) =>
-              handleCancel({ ...callbackParams, e: event, formRefs: formRefs.value[index] })
-          },
-          {
-            reference: () =>
-              withDirectives(
-                h(
-                  Tag,
-                  {
-                    size: 'small',
-                    ...defaultProps,
-                    ...buttonRowProps,
-                    onClick: () => {
-                      // 控制下拉不隐藏，防止气泡定位异常
-                      hideOnClick.value = false
-
-                      if (isFunction(buttonRow.onClick)) {
-                        buttonRow.onClick({ ...callbackParams, formRefs: formRefs.value[index] })
-                      }
-                    }
-                  },
-                  () => text
-                ),
-                buttonRow.directives || []
-              )
-          }
-        )
-      : withDirectives(
-          h(
-            Tag,
-            {
-              size: 'small',
-              ...defaultProps,
-              ...buttonRowProps,
-              onClick: (event: MouseEvent) =>
-                handleClickAction(
-                  { ...callbackParams, e: event, formRefs: formRefs.value[index] },
-                  msg
-                )
-            },
-            () => text
-          ),
-          buttonRow.directives || []
-        )
-  }
-}
-
-// 气泡确认
-const handleConfirm = (callbackParams: ButtonsCallBackParams) => {
-  if (isFunction(callbackParams.buttonRow.onConfirm)) {
-    callbackParams.buttonRow.onConfirm(callbackParams)
-  }
-  emit('clickAction', callbackParams)
-}
-
-// 气泡取消
-const handleCancel = (callbackParams: ButtonsCallBackParams) => {
-  if (isFunction(callbackParams.buttonRow.onCancel)) {
-    callbackParams.buttonRow.onCancel(callbackParams)
-  }
-  emit('clickActionConfirmCancel', callbackParams)
-}
-
-// 分发按钮事件
-const handleClickAction = (callbackParams: ButtonsCallBackParams, msg: RecordType) => {
-  hideOnClick.value = true
-  const { buttonRow } = callbackParams
-
-  /**
-   * add self onClick event support
-   * @version v0.1.8
-   */
-  if (isFunction(buttonRow.onClick)) {
-    buttonRow.onClick(callbackParams)
-  }
-
-  if (buttonRow.confirm) {
-    // 二次确认类型是 messageBox
-    if (props.confirmType === 'messageBox') {
-      const { message, title, options, appContext } = msg
-
-      ElMessageBox.confirm(message, title, options, appContext)
-        .then(() => {
-          /**
-           * add self onConfirm event support
-           * @version v0.1.8
-           */
-          if (isFunction(buttonRow.onConfirm)) {
-            buttonRow.onConfirm(callbackParams)
-          }
-
-          emit('clickAction', callbackParams)
-        })
-        .catch(() => {
-          /**
-           * add self onCancel event support
-           * @version v0.1.8
-           */
-          if (isFunction(buttonRow.onCancel)) {
-            buttonRow.onCancel(callbackParams)
-          }
-
-          emit('clickActionConfirmCancel', callbackParams)
-        })
-    }
-  } else {
-    emit('clickAction', callbackParams)
-  }
-}
-</script>

package/packages/components/table/src/table-column-drag-sort.vue

@@ -1,78 +0,0 @@
-<template>
-  <el-table-column
-    key="dragSort"
-    :label="t('plus.table.sort')"
-    width="60"
-    class-name="plus-table-column-drag-sort"
-    v-bind="dragSortableTableColumnProps"
-  >
-    <span class="plus-table-column-drag-icon">
-      <slot name="drag-sort-icon">☷</slot>
-    </span>
-  </el-table-column>
-</template>
-
-<script lang="ts" setup>
-import type { SortableEvent, Options as SortableOptions } from 'sortablejs'
-import Sortable from 'sortablejs'
-import { isPlainObject } from '@wlydfe/pro-ui-components/utils'
-import { watch } from 'vue'
-import { useLocale } from '@wlydfe/pro-ui-hooks'
-import type { RecordType } from '@wlydfe/pro-ui-types'
-import { ElTableColumn } from 'element-plus'
-import type { TableInstance } from 'element-plus'
-
-export interface PlusTableColumnDragSortProps {
-  sortable: SortableOptions | boolean
-  tableInstance: TableInstance | null
-  dragSortableTableColumnProps: RecordType
-}
-export interface PlusTableColumnDragSortEmits {
-  (e: 'dragSortEnd', newIndex: number, oldIndex: number): void
-}
-
-defineOptions({
-  name: 'PlusTableColumnDragSort'
-})
-
-const props = withDefaults(defineProps<PlusTableColumnDragSortProps>(), {
-  sortable: true,
-  tableInstance: null,
-  dragSortableTableColumnProps: () => ({})
-})
-const emit = defineEmits<PlusTableColumnDragSortEmits>()
-
-const { t } = useLocale()
-
-watch(
-  () => props.tableInstance,
-  val => {
-    if (val && props.sortable) {
-      rowDrop()
-    }
-  }
-)
-
-// 行拖拽
-const rowDrop = () => {
-  const tbody = props.tableInstance?.$el?.querySelector('.el-table__body-wrapper tbody')
-  if (!tbody) return
-
-  let config: Sortable.Options = {
-    handle: '.plus-table-column-drag-icon',
-    animation: 150,
-    group: 'box',
-    easing: 'cubic-bezier(1, 0, 0, 1)',
-    chosenClass: 'sortable-chosen',
-    forceFallback: true,
-    onEnd({ newIndex, oldIndex }: SortableEvent) {
-      emit('dragSortEnd', newIndex as number, oldIndex as number)
-    }
-  }
-  if (isPlainObject(props.sortable)) {
-    config = { ...config, ...(props.sortable as Sortable.Options) }
-  }
-
-  Sortable.create(tbody as HTMLElement, config)
-}
-</script>

package/packages/components/table/src/table-column-index.vue

@@ -1,82 +0,0 @@
-<template>
-  <el-table-column
-    key="index"
-    label="序号"
-    fixed="left"
-    type="index"
-    class-name="plus-table-column-index"
-    width="60"
-    align="center"
-    :index="getTableIndex"
-    v-bind="indexTableColumnProps"
-  >
-    <template #default="{ row, $index }">
-      <div
-        v-if="isFunction(getTableIndex)"
-        class="plus-table-column-index__content"
-        :style="indexContentStyle(row, $index)"
-      >
-        {{ getTableIndex($index) }}
-      </div>
-      <div v-else class="plus-table-column-index__content" :style="indexContentStyle(row, $index)">
-        {{ getTableIndex }}
-      </div>
-    </template>
-  </el-table-column>
-</template>
-
-<script lang="ts" setup>
-import { DefaultPageInfo } from '@wlydfe/pro-ui-constants'
-import type { PageInfo, RecordType } from '@wlydfe/pro-ui-types'
-import { computed, type CSSProperties } from 'vue'
-import { isFunction, isPlainObject } from '@wlydfe/pro-ui-components/utils'
-import { ElTableColumn } from 'element-plus'
-import { isNumber } from 'lodash-es'
-import type { TableColumnCtx } from 'element-plus'
-
-export interface PlusTableTableColumnIndexProps {
-  pageInfo?: PageInfo
-  indexTableColumnProps?: Partial<TableColumnCtx<any>>
-  indexContentStyle?:
-    | Partial<CSSProperties>
-    | ((row: RecordType, index: number) => Partial<CSSProperties>)
-}
-
-defineOptions({
-  name: 'PlusTableTableColumnIndex'
-})
-
-const props = withDefaults(defineProps<PlusTableTableColumnIndexProps>(), {
-  pageInfo: () => ({ ...DefaultPageInfo }),
-  indexContentStyle: () => ({}),
-  indexTableColumnProps: () => ({})
-})
-
-// 修改序号生成方法
-const getTableIndex = isNumber(props.indexTableColumnProps?.index)
-  ? computed(() => props.indexTableColumnProps?.index)
-  : isFunction(props.indexTableColumnProps?.index)
-  ? props.indexTableColumnProps?.index
-  : (index: number) => {
-      const i =
-        ((props.pageInfo?.page || DefaultPageInfo.page) - 1) *
-          (props.pageInfo?.pageSize || DefaultPageInfo.page) +
-        index +
-        1
-      return +i
-    }
-
-// index样式
-const indexContentStyle = (row: RecordType, index: number): CSSProperties => {
-  if (isFunction(props.indexContentStyle)) {
-    return (props.indexContentStyle as (row: RecordType, index: number) => CSSProperties)(
-      row,
-      index
-    )
-  } else if (isPlainObject(props.indexContentStyle)) {
-    return props.indexContentStyle as CSSProperties
-  } else {
-    return {}
-  }
-}
-</script>