ff-ui-plus 2.0.7

package/packages/components/table/src/singleEditCell.vue

@@ -0,0 +1,303 @@
+<template>
+  <component
+    :is="isShowRules ? 'el-form-item' : 'div'"
+    :prop="prop"
+    :rules="configEdit.rules"
+    :class="[
+      configEdit.className,
+      { single_edit_cell_rules: configEdit.rules },
+      'single_edit_cell'
+    ]"
+    v-bind="$attrs"
+  >
+    <!-- 编辑组件自定义插槽 -->
+    <template v-if="configEdit.editSlotName">
+      <div :class="[prop, 'slot_edit_name']" @keyup="keyUpHandle">
+        <slot :name="configEdit.editSlotName" :scope="scope" />
+      </div>
+    </template>
+    <template v-if="configEdit.isSelfCom">
+      <component
+        v-if="configEdit.editComponent === 't-select-table'"
+        :ref="(el:any) => handleRef(el,configEdit)"
+        :is="configEdit.editComponent"
+        :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
+        v-bind="
+          typeof configEdit.bind == 'function'
+            ? configEdit.bind(scope)
+            : { clearable: true, filterable: true, ...configEdit.bind }
+        "
+        :style="{ width: configEdit.width || '100%' }"
+        v-on="cEvent(configEdit, 't-select-table')"
+      />
+      <component
+        v-else
+        :is="configEdit.editComponent"
+        v-model="childValue"
+        :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
+        :ref="(el: any) => getRefs(el, configEdit)"
+        v-bind="
+          typeof configEdit.bind == 'function'
+            ? configEdit.bind(scope)
+            : { clearable: true, filterable: true, ...configEdit.bind }
+        "
+        @change="handleEvent(configEdit.event)"
+        :style="{ width: configEdit.width || '100%' }"
+        v-on="cEvent(configEdit)"
+      />
+    </template>
+    <component
+      v-if="!configEdit.editSlotName && !configEdit.isSelfCom"
+      :is="configEdit.editComponent || 'el-input'"
+      v-model="childValue"
+      :type="configEdit.type"
+      :placeholder="configEdit.placeholder || getPlaceholder(configEdit)"
+      :ref="(el: any) => getRefs(el, configEdit)"
+      :class="prop"
+      @change="handleEvent(configEdit.event)"
+      @keyup="keyUpHandle"
+      :style="{ width: configEdit.width || '100%' }"
+      v-on="cEvent(configEdit)"
+      v-bind="
+        typeof configEdit.bind == 'function'
+          ? configEdit.bind(scope)
+          : { clearable: true, filterable: true, ...configEdit.bind }
+      "
+    >
+      <!-- 前置文本 -->
+      <template #prepend v-if="configEdit.prepend">{{ configEdit.prepend }}</template>
+      <!-- 后置文本 -->
+      <template #append v-if="configEdit.append">{{ configEdit.append }}</template>
+      <!-- 子组件自定义插槽 -->
+      <!-- <template v-if="configEdit.childSlotName">
+        <slot />
+      </template>-->
+      <template v-if="!configEdit.editComponent.includes('date')">
+        <component
+          :is="compChildName(configEdit)"
+          v-for="(value, key) in selectListType(configEdit)"
+          :key="key"
+          :disabled="value.disabled"
+          :label="compChildLabel(configEdit, value)"
+          :value="compChildValue(configEdit, value, key)"
+          >{{ compChildShowLabel(configEdit, value) }}</component
+        >
+      </template>
+    </component>
+  </component>
+</template>
+
+<script setup lang="ts">
+import { computed, ref, watch } from "vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+defineOptions({
+  name: "SingleEditCell"
+})
+const props = defineProps({
+  /** 编辑配置项说明
+   * label: '爱好', // placeholder显示
+   * editComponent: 'el-select', // 组件
+   * type: 'select-arr', // option显示
+   * list: 'hobbyList', // 下拉选择数据源
+   * arrLabel: 'label', // 下拉选择中文显示
+   * arrKey: 'value' // 下拉选择number显示（最终传后台）
+   * bind:{} // 组件衍生属性（即第三方组件属性）
+   */
+  configEdit: {
+    type: Object as any,
+    default: () => ({})
+  },
+  // 下拉选择数据源
+  listTypeInfo: {
+    type: Object,
+    default: () => ({})
+  },
+  scope: {
+    type: Object,
+    default: () => ({})
+  },
+  prop: {
+    type: String,
+    default: "prop"
+  },
+  // 是否走表单验证（表头合并不校验）
+  isShowRules: {
+    type: Boolean,
+    default: true
+  },
+  modelValue: {
+    type: [String, Number, Array, Boolean, Date, Object]
+  },
+  // 列for index
+  indexColumns: [String, Number]
+})
+// 抛出事件
+const emits = defineEmits(["handleEvent", "update:modelValue", "keyupHandle", "getRefs"])
+// vue3 v-model简写
+let childValue: any = computed({
+  get() {
+    return props?.modelValue
+  },
+  set(val) {
+    emits("update:modelValue", val)
+  }
+})
+watch(
+  () => props.modelValue,
+  data => {
+    childValue.value = data
+  }
+)
+// 绑定的相关事件
+const handleEvent = (type: string) => {
+  setTimeout(() => {
+    // console.log("组件", type, childValue.value)
+    emits("handleEvent", { type, val: childValue.value })
+  }, 0)
+}
+// 键盘事件
+const keyUpHandle = ($event: any) => {
+  emits("keyupHandle", $event, props.scope.$index, props.prop)
+}
+// 引用第三方事件
+const cEvent: any = computed(() => {
+  return ({ eventHandle }: any, type = "") => {
+    let event = { ...eventHandle }
+    let changeEvent = {} as any
+    Object.keys(event).forEach(v => {
+      changeEvent[v] = (e: any, ids: any) => {
+        if (type === "t-select-table") {
+          const argument = {
+            row: e,
+            ids: ids,
+            prop: props.prop,
+            scope: props.scope
+          }
+          event[v] && event[v](argument)
+        } else {
+          if ((typeof e === "number" && e === 0) || e) {
+            event[v] && event[v]({ val: e, prop: props.prop, scope: props.scope })
+          } else {
+            event[v] && event[v]({ prop: props.prop, scope: props.scope })
+          }
+        }
+      }
+    })
+    return { ...changeEvent }
+  }
+})
+
+const selectListType = computed(() => {
+  return (item: { list: string | number }) => {
+    if (props.listTypeInfo) {
+      return props.listTypeInfo[item.list]
+    } else {
+      return []
+    }
+  }
+})
+// 子组件名称
+const compChildName = computed(() => {
+  return (configEdit: { type: any }) => {
+    switch (configEdit.type) {
+      case "checkbox":
+        return "el-checkbox"
+      case "radio":
+        return "el-radio"
+      case "select-arr":
+      case "select-obj":
+        return "el-option"
+    }
+  }
+})
+// 子子组件label
+const compChildLabel = computed(() => {
+  return (configEdit: { type: any; arrLabel: any }, value: { [x: string]: any; value: any }) => {
+    switch (configEdit.type) {
+      case "radio":
+      case "checkbox":
+        return value[configEdit.arrLabel || "label"]
+      case "el-select-multiple":
+      case "select-arr":
+        return value[configEdit.arrLabel || "label"]
+      case "select-obj":
+        return value
+    }
+  }
+})
+// 子子组件value
+const compChildValue = computed(() => {
+  return (
+    configEdit: { type: any; arrKey: any },
+    value: { [x: string]: any; value: any },
+    key: any
+  ) => {
+    switch (configEdit.type) {
+      case "radio":
+      case "checkbox":
+        return value[configEdit.arrKey || "key"]
+      case "el-select-multiple":
+      case "select-arr":
+        return value[configEdit.arrKey || "key"]
+      case "select-obj":
+        return key
+    }
+  }
+})
+// 子子组件文字展示
+const compChildShowLabel = computed(() => {
+  return (configEdit: { type: any; arrLabel: any }, value: { [x: string]: any; label: any }) => {
+    switch (configEdit.type) {
+      case "radio":
+      case "checkbox":
+        return value[configEdit.arrLabel || "label"]
+      case "el-select-multiple":
+      case "select-arr":
+        return value[configEdit.arrLabel || "label"]
+      case "select-obj":
+        return value
+    }
+  }
+})
+// 获取所有ref
+const getRefs = (el: any, item: any) => {
+  emits("getRefs", el, item)
+}
+// 下拉选择表格组件 ref
+const tselecttableref: any = ref({})
+// 下拉选择表格组件 动态ref
+const handleRef = (el: any, item: any) => {
+  emits("getRefs", el, item)
+  if (el) {
+    tselecttableref.value[`tselecttableref-${props.indexColumns}`] = el
+  }
+}
+// 重置下拉表格
+const resetTselectTableFields = () => {
+  // 获取所有下拉选择表格组件
+  const refList = Object.keys(tselecttableref.value).filter(item =>
+    item.includes("tselecttableref")
+  )
+  if (refList.length > 0 && tselecttableref.value) {
+    refList.map(val => {
+      tselecttableref.value[val].clear()
+    })
+  }
+}
+// placeholder的显示
+const getPlaceholder = (row: any) => {
+  if (!row.editComponent || typeof row.editComponent !== "string") {
+    return row.label
+  }
+  const componentType = row.editComponent.toLowerCase()
+  if (componentType.includes("input")) {
+    return t("plus.table.pleaseEnter") + row.label
+  } else if (componentType.includes("select") || componentType.includes("date")) {
+    return t("plus.table.pleaseSelect") + row.label
+  }
+  return row.label
+}
+
+defineExpose({ resetTselectTableFields })
+</script>

package/packages/components/table/src/tableProps.ts

@@ -0,0 +1,162 @@
+import type { PropType, ExtractPropTypes } from "vue"
+import type { ComponentSize } from "element-plus/es/constants"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+export const tableProps = {
+  // table所需数据
+  table: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+    required: true
+  },
+  // 表头数据
+  columns: {
+    type: Array,
+    default: () => {
+      return []
+    }
+    // required: true
+  },
+  // 按钮权限数据集
+  btnPermissions: {
+    type: Array,
+    default: () => {
+      return []
+    }
+  },
+  // 表格标题
+  title: {
+    type: String
+  },
+  tableTitle: String,
+  // table对齐方式
+  align: {
+    type: String as PropType<"left" | "center" | "right">,
+    default: "center"
+  },
+  // 是否开启Tree-table
+  isTree: {
+    type: Boolean,
+    default: false
+  },
+  // 是否开启行拖拽
+  isRowSort: {
+    type: Boolean,
+    default: false
+  },
+  // 开启行拖拽，第一列是否显示拖拽图标
+  isRowSortIcon: {
+    type: Boolean,
+    default: false
+  },
+  // 显示拖拽列的配置
+  rowSortIconBind: {
+    type: Object,
+    default: () => {
+      return {}
+    }
+  },
+  // 是否复制单元格
+  isCopy: {
+    type: Boolean,
+    default: false
+  },
+  // 是否开启点击整行选中单选框
+  rowClickRadio: {
+    type: Boolean,
+    default: true
+  },
+  // 是否开启点击整行选中多选框
+  rowClickCheckbox: {
+    type: Boolean,
+    default: false
+  },
+  // 设置默认选中项（单选）defaultRadioCol值必须大于0！
+  defaultRadioCol: Number,
+  // 序列号显示是否分页累加
+  isPaginationCumulative: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示分页
+  isShowPagination: {
+    type: Boolean,
+    default: true
+  },
+  // 是否开启编辑保存按钮
+  isShowFooterBtn: {
+    type: Boolean,
+    default: false
+  },
+  // 是否显示设置（隐藏/显示列）
+  columnSetting: {
+    type: Boolean,
+    default: false
+  },
+  // 是否高亮选中行
+  highlightCurrentRow: {
+    type: Boolean,
+    default: false
+  },
+  // 如果设置为 'custom'，则代表用户希望远程排序，需要监听 Table 的 sort-change 事件
+  sortable: {
+    type: [Boolean, String]
+  },
+  // 单元格编辑是否开启键盘事件
+  isKeyup: {
+    type: Boolean,
+    default: false
+  },
+  // TAdaptivePage组件是否使用了Toolbar插槽
+  isSlotToolbar: Boolean,
+  // TAdaptivePage组件是否使用了title插槽
+  isSlotTitle: Boolean,
+  // 是否开启边框
+  border: {
+    type: Boolean,
+    default: false
+  },
+  // table loading
+  tableLoading: {
+    type: Boolean,
+    default: false
+  },
+  loadingTxt: {
+    type: String,
+    default: () => t("plus.table.loadingTxt")
+  },
+  // 是否开启虚拟列表
+  useVirtual: Boolean,
+  // 虚拟列表的渲染行数
+  virtualShowSize: {
+    type: Number,
+    default: 30
+  },
+  footerBtnAlign: {
+    type: String,
+    default: "right"
+  },
+  /**
+   * 空数据时表头是否显示校验红点
+   */
+  isEmptyDataRequired: {
+    type: Boolean,
+    default: false
+  },
+  saveBtnTxt: {
+    type: String,
+    default: () => t("plus.table.saveBtnTxt")
+  },
+  defaultSize: {
+    type: String as PropType<ComponentSize>,
+    default: "default"
+  },
+  densitySeting: {
+    type: Boolean,
+    default: true
+  }
+}
+
+export type TTableProps = ExtractPropTypes<typeof tableProps>

package/packages/components/table/src/useExpose.ts

@@ -0,0 +1,74 @@
+import { ref } from "vue"
+
+export function useExpose() {
+  // 获取el-table ref
+  const TTable = ref<HTMLElement | any>(null)
+  // 清空复选框
+  const clearSelection = () => {
+    return TTable.value.clearSelection()
+  }
+  // 返回当前选中的行
+  const getSelectionRows = () => {
+    return TTable.value.getSelectionRows()
+  }
+  // 取消某一项选中项
+  const toggleRowSelection = (row: any, selected = false) => {
+    return TTable.value.toggleRowSelection(row, selected)
+  }
+  // 全部选中
+  const toggleAllSelection = () => {
+    return TTable.value.toggleAllSelection()
+  }
+  // 用于可扩展的表格或树表格，如果某行被扩展，则切换。 使用第二个参数，您可以直接设置该行应该被扩展或折叠。
+  const toggleRowExpansion = (row: any, expanded: any) => {
+    return TTable.value.toggleRowExpansion(row, expanded)
+  }
+  // 用于单选表格，设定某一行为选中行， 如果调用时不加参数，则会取消目前高亮行的选中状态。
+  const setCurrentRow = (row: any) => {
+    return TTable.value.setCurrentRow(row)
+  }
+  // 清空排序条件
+  const clearSort = () => {
+    return TTable.value.clearSort()
+  }
+  // 传入由columnKey 组成的数组以清除指定列的过滤条件。 如果没有参数，清除所有过滤器
+  const clearFilter = (columnKey: any) => {
+    return TTable.value.clearFilter(columnKey)
+  }
+  //  Table 进行重新布局
+  const doLayout = (columnKey: any) => {
+    return TTable.value.doLayout(columnKey)
+  }
+  //  手动排序表格。 参数 prop 属性指定排序列，order 指定排序顺序。
+  const sort = (prop: string, order: string) => {
+    return TTable.value.sort(prop, order)
+  }
+  //  滚动到一组特定坐标。
+  const scrollTo = (options: any, yCoord: any) => {
+    return TTable.value.scrollTo(options, yCoord)
+  }
+  //  设置垂直滚动位置
+  const setScrollTop = (top: any) => {
+    return TTable.value.setScrollTop(top)
+  }
+  //  设置水平滚动位置
+  const setScrollLeft = (left: any) => {
+    return TTable.value.setScrollLeft(left)
+  }
+  return {
+    TTable,
+    clearSelection,
+    getSelectionRows,
+    toggleRowSelection,
+    toggleAllSelection,
+    toggleRowExpansion,
+    setCurrentRow,
+    clearSort,
+    clearFilter,
+    doLayout,
+    sort,
+    scrollTo,
+    setScrollTop,
+    setScrollLeft
+  }
+}

package/packages/components/table/src/useVirtualized.ts

@@ -0,0 +1,70 @@
+import { nextTick, ref } from "vue"
+import type { Ref } from "vue"
+export function useVirtualized() {
+  // 渲染实际高度的容器
+  const actualHeightContainerEl = ref<HTMLElement | any>(null)
+  // 用于偏移的元素选择器
+  const translateContainerEl = ref<HTMLElement | any>(null)
+  // 滚动容器的元素选择器
+  const scrollContainerEl = ref<HTMLElement | any>(null)
+  // 所有数据
+  const saveDATA: Ref<any[]> = ref([])
+  // 缓存已渲染元素的高度
+  const RenderedItemsCache: any = {}
+  // 获取dom元素
+  const getDom = () => {
+    actualHeightContainerEl.value = document.querySelector(
+      ".t_table_use_virtual .el-scrollbar__view"
+    )
+    translateContainerEl.value = document.querySelector(".t_table_use_virtual .el-table__body")
+    scrollContainerEl.value = document.querySelector(".t_table_use_virtual .el-scrollbar__wrap")
+  }
+  // 获取缓存高度，无缓存，取配置项的 itemHeight
+  const getItemHeightFromCache = (index: number | string) => {
+    const val = RenderedItemsCache[index]
+    return val === void 0 ? 50 : val
+  }
+  // 更新实际高度
+  const updateActualHeight = () => {
+    let actualHeight = 0
+    saveDATA.value.forEach((_, i) => {
+      actualHeight += getItemHeightFromCache(i)
+    })
+    actualHeightContainerEl.value!.style.height = actualHeight + "px"
+  }
+  // 更新偏移值
+  const updateOffset = (offset: number) => {
+    if (translateContainerEl.value && translateContainerEl.value.style) {
+      translateContainerEl.value!.style.transform = `translateY(${offset}px)`
+    }
+  }
+  // 更新已渲染列表项的缓存高度
+  const updateRenderedItemCache = (index: number) => {
+    // 当所有元素的实际高度更新完毕，就不需要重新计算高度
+    const shouldUpdate = Object.keys(RenderedItemsCache).length < saveDATA.value.length
+    if (!shouldUpdate) return
+    nextTick(() => {
+      // 获取所有列表项元素
+      const Items: HTMLElement[] = Array.from(
+        document.querySelectorAll(".t_table_use_virtual .el-table__row")
+      )
+      // 进行缓存
+      Items.forEach(el => {
+        if (!RenderedItemsCache[index]) {
+          RenderedItemsCache[index] = el.offsetHeight
+        }
+        index++
+      })
+      // 更新实际高度
+      updateActualHeight()
+    })
+  }
+  return {
+    scrollContainerEl,
+    updateRenderedItemCache,
+    updateOffset,
+    getDom,
+    getItemHeightFromCache,
+    saveDATA
+  }
+}

package/packages/components/table/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-table.css"

package/packages/components/table/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/table.scss"

package/packages/components/tabs/index.ts

@@ -0,0 +1,4 @@
+import Tabs from "./src/index.vue"
+export type { TTabsProps } from "./src/index.vue"
+
+export const TTabs = Tabs

package/packages/components/tabs/src/index.vue

@@ -0,0 +1,50 @@
+<template>
+  <div class="t_tabs">
+    <el-tabs v-model="activeName" v-bind="$attrs">
+      <template v-for="(_index, name) in slots" v-slot:[name]="data">
+        <slot :name="name" v-bind="data" />
+      </template>
+      <el-tab-pane
+        v-for="tab in tabs"
+        :key="tab.key"
+        v-bind="{
+          name: tab.key,
+          label: tab.title,
+          ...tab.bind
+        }"
+      >
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data" />
+        </template>
+        <slot :name="tab.key"></slot>
+      </el-tab-pane>
+    </el-tabs>
+  </div>
+</template>
+<script setup lang="ts">
+import { ref, useSlots } from "vue"
+defineOptions({
+  name: "TTabs"
+})
+export interface TabItem {
+  key?: string
+  title?: string
+  bind?: Record<string, any>
+}
+
+export interface TTabsProps {
+  tabs: TabItem[]
+}
+const props = withDefaults(defineProps<TTabsProps>(), {
+  tabs: () => []
+})
+const slots = useSlots()
+const activeName = ref(props.tabs && props.tabs[0].key)
+const emit = defineEmits(["tabsChange"])
+const setSelectedTab = (key: any) => {
+  activeName.value = key
+}
+defineExpose({
+  setSelectedTab
+})
+</script>

package/packages/components/tabs/style/css.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/t-tabs.css"

package/packages/components/tabs/style/index.ts

@@ -0,0 +1 @@
+import "@ff-ui-plus/theme-chalk/src/tabs.scss"

package/packages/components/timer-btn/index.ts

@@ -0,0 +1,4 @@
+import TimerBtn from "./src/index.vue"
+export type { TTimerBtnProps } from "./src/index.vue"
+
+export const TTimerBtn = TimerBtn