ff-ui-plus 2.0.7

package/packages/components/select-table/src/renderCol.vue

@@ -0,0 +1,20 @@
+<template>
+  <component :is="renderComponent" />
+</template>
+<script lang="ts" setup>
+defineOptions({
+  name: "RenderCol"
+})
+const props: any = defineProps({
+  row: Object,
+  render: Function,
+  index: Number,
+  column: {
+    type: Object,
+    default: null
+  }
+})
+const renderComponent = () => {
+  return props.render(props?.row[props?.column?.prop], props.row, props.index)
+}
+</script>

package/packages/components/select-table/src/type.ts

@@ -0,0 +1,56 @@
+export interface TSelectTableProps {
+  modelValue?: any
+  inputValue?: any
+  defaultSelectVal?: any[]
+  radioSelectValLabel?: string
+  table: {
+    data: any[]
+    currentPage: number
+    pageSize: number
+    total: number
+    [key: string]: any
+  }
+  keywords?: {
+    value: any
+    label: string
+  }
+  value?: any
+  columns: any[]
+  multiple?: boolean
+  filterable?: boolean
+  remote?: boolean
+  remoteMethod?: Function
+  filterMethod?: Function
+  isShowInput?: boolean
+  inputAttr?: Record<string, any>
+  inputWidth?: number
+  selectWidth?: number
+  tableWidth?: number
+  isShowQuery?: boolean
+  isShowBlurBtn?: boolean
+  btnBind?: Record<string, any>
+  align?: "left" | "center" | "right"
+  reserveSelection?: boolean
+  selectable?: Function
+  multipleFixed?: string | boolean
+  radioTxt?: string
+  radioFixed?: string | boolean
+  tableSize?: "" | "large" | "default" | "small"
+  border?: boolean
+  isShowFirstColumn?: boolean
+  useVirtual?: boolean
+  virtualShowSize?: number
+  isShowPagination?: boolean
+  paginationSize?: "" | "large" | "default" | "small"
+  selfExpanded?: boolean
+  isClearQuery?: boolean
+  isRadioEchoLabel?: boolean
+  defaultValIsOpenRadioChange?: boolean
+  radioSameIsCancel?: boolean
+  rowClickRadio?: boolean
+  isKeyup?: boolean
+  isExpanded?: boolean
+  multipleDisableDelete?: boolean
+  tableLoading?: boolean
+  loadingTxt?: string
+}

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

@@ -0,0 +1,86 @@
+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 isMultiple = ref<boolean>(false)
+  // 所有数据
+  const saveDATA: Ref<any[]> = ref([])
+  // 缓存已渲染元素的高度
+  const RenderedItemsCache: any = {}
+  // 获取dom元素
+  const getDom = (props: { multiple: boolean }) => {
+    const getElements = (className: string) => {
+      actualHeightContainerEl.value = document.querySelector(`${className} .el-scrollbar__view`)
+      translateContainerEl.value = document.querySelector(`${className} .el-table__body`)
+      scrollContainerEl.value = document.querySelector(`${className} .el-scrollbar__wrap`)
+    }
+    isMultiple.value = props.multiple
+    if (props.multiple) {
+      getElements(".t_select_table_multiple")
+    } else {
+      getElements(".t_select_table_radio")
+    }
+    // console.log('actualHeightContainerEl.value', actualHeightContainerEl.value)
+    // console.log('translateContainerEl.value', translateContainerEl.value)
+    // console.log('scrollContainerEl.value', scrollContainerEl.value)
+  }
+  // 获取缓存高度，无缓存，取配置项的 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)
+    })
+    // if (actualHeightContainerEl.value && actualHeightContainerEl.value.style) {
+    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(
+          `${
+            isMultiple.value ? `.t_select_table_multiple` : `.t_select_table_radio`
+          } .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/select-table/style/css.ts

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

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

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

package/packages/components/step-wizard/index.ts

@@ -0,0 +1,4 @@
+import StepWizard from "./src/index.vue"
+export * from "./src/type"
+
+export const TStepWizard = StepWizard

package/packages/components/step-wizard/src/index.vue

@@ -0,0 +1,99 @@
+<template>
+  <div class="t_step-wizard">
+    <el-steps :active="active" finish-status="success" v-bind="$attrs">
+      <el-step
+        v-bind="$attrs"
+        v-for="(item, index) in stepData"
+        :key="index"
+        :title="`${index + 1} ${item.title}`"
+        :icon="item.icon ? item.icon : ''"
+        :description="item.description ? item.description : ''"
+      >
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data" />
+        </template>
+      </el-step>
+    </el-steps>
+    <div class="content-step-main step-content">
+      <div
+        class="step-first flex-box flex-col flex-ver-h"
+        v-for="(val, key) in stepContent()"
+        :key="key"
+        v-show="active === key"
+      >
+        <template v-if="val.slotName">
+          <slot :name="val.slotName"></slot>
+        </template>
+        <div class="step_btn">
+          <el-button
+            v-for="(val1, key1) in val.btnArr"
+            :key="key1"
+            :type="val1.type || 'danger'"
+            @click="val1.fn(val1)"
+            :disabled="val.disable || false"
+            >{{ val1.btnTitle }}</el-button
+          >
+        </div>
+      </div>
+      <div
+        class="step-last flex-box flex-col flex-ver"
+        v-if="active === stepData.length && isShowLastSuccess"
+      >
+        <div class="icon-success">
+          <el-icon>
+            <CircleCheck />
+          </el-icon>
+        </div>
+        <h2 class="success-margin" v-html="successTitle"></h2>
+        <div class="step_btn">
+          <el-button
+            v-if="!stepData[stepData.length - 1].lastBtnArr"
+            type="danger"
+            @click="complete"
+            >{{ lastBtnTitleText }}</el-button
+          >
+          <el-button
+            v-else
+            v-for="(item, key) in stepData[stepData.length - 1].lastBtnArr"
+            :key="key"
+            :type="item.type || 'danger'"
+            @click="item.fn(item)"
+            :disabled="item.disable || false"
+            >{{ item.btnTitle }}</el-button
+          >
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { useSlots, computed } from "vue"
+import { CircleCheck } from "@element-plus/icons-vue"
+import type { TStepWizardProps } from "./type"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+defineOptions({
+  name: "TStepWizard"
+})
+
+const props = withDefaults(defineProps<TStepWizardProps>(), {
+  stepData: () => [],
+  successTitle: "",
+  lastBtnTitle: "",
+  active: 0,
+  isShowLastSuccess: true
+})
+const lastBtnTitleText = computed(() => props.lastBtnTitle || t("plus.stepWizard.lastBtnTitle"))
+const slots = useSlots()
+const stepContent = () => {
+  return props.isShowLastSuccess
+    ? props.stepData && props.stepData.slice(0, props.stepData.length - 1)
+    : props.stepData
+}
+const emits = defineEmits(["complete"])
+// 第四步完成
+const complete = () => {
+  emits("complete", props.active)
+}
+</script>

package/packages/components/step-wizard/src/type.ts

@@ -0,0 +1,17 @@
+export interface StepItem {
+  title?: string
+  icon?: string
+  description?: string
+  slotName?: string
+  btnArr?: Array<{ type?: string; fn: Function; btnTitle: string }>
+  lastBtnArr?: Array<{ type?: string; fn: Function; btnTitle: string; disable?: boolean }>
+  disable?: boolean
+}
+
+export interface TStepWizardProps {
+  stepData?: StepItem[]
+  successTitle?: string
+  lastBtnTitle?: string
+  active?: number
+  isShowLastSuccess?: boolean
+}

package/packages/components/step-wizard/style/css.ts

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

package/packages/components/step-wizard/style/index.ts

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

package/packages/components/table/index.ts

@@ -0,0 +1,5 @@
+import Table from "./src/index.vue"
+export * from "./src/tableProps"
+export * from "./src/useExpose"
+
+export const TTable = Table

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

@@ -0,0 +1,176 @@
+<template>
+  <el-dropdown trigger="click" popper-class="column_set">
+    <el-button v-bind="columnBind">{{ columnBind.btnTxt }}</el-button>
+    <template #dropdown>
+      <div class="title" v-if="columnBind.isShowTitle">{{ columnBind.title }}</div>
+      <el-dropdown-menu>
+        <el-dropdown-item :divided="columnBind.isShowTitle">
+          <el-tree
+            ref="treeRef"
+            class="t_table_column_setting_dropdown"
+            :data="state.columnSet"
+            node-key="prop"
+            :props="{ label: 'label', children: 'children', disabled: 'checkBoxDisabled' }"
+            show-checkbox
+            draggable
+            default-expand-all
+            check-strictly
+            :allow-drag="allowDrag"
+            :allow-drop="allowDrop"
+            :default-checked-keys="defaultCheckedKeys"
+            @check="onTreeCheck"
+            @node-drop="handleDrop"
+          >
+          </el-tree>
+        </el-dropdown-item>
+      </el-dropdown-menu>
+    </template>
+  </el-dropdown>
+</template>
+
+<script setup lang="ts">
+import { watch, onMounted, reactive, computed, useAttrs, ref } from "vue"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+defineOptions({
+  name: "ColumnSet"
+})
+export interface Column {
+  label: string
+  prop: string
+  checkBoxDisabled?: boolean
+  hidden?: boolean
+}
+
+export interface ColumnSetProps {
+  columns: Column[]
+  title?: string
+  name?: string
+  columnSetBind?: Record<string, any>
+}
+
+const props = withDefaults(defineProps<ColumnSetProps>(), {
+  columns: () => [],
+  title: "",
+  name: "",
+  columnSetBind: () => ({})
+})
+const treeRef = ref()
+const $attrs: any = useAttrs()
+const columnBind = computed(() => {
+  const columnSetBind = {
+    btnTxt: t("plus.table.columnBind.btnTxt"),
+    title: t("plus.table.columnBind.title"),
+    ...props.columnSetBind
+  }
+  return { size: "default", icon: "Setting", isShowTitle: true, ...$attrs, ...columnSetBind }
+})
+
+const emits = defineEmits(["columnSetting"])
+const state = reactive({
+  columnSet: [] as Column[]
+})
+const defaultCheckedKeys = ref<string[]>([])
+
+const getColumnSetCache = () => {
+  let value =
+    localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`) || "[]"
+  let columnOption = initColumnSet()
+  let valueArr = (JSON.parse(value) as any[]) || []
+  columnOption.forEach(item => {
+    let findEle = valueArr.find(
+      (ele: { label: any; prop: any }) => ele.label === item.label && ele.prop === item.prop
+    )
+    item.hidden = findEle ? findEle.hidden : false
+  })
+  value = JSON.stringify(valueArr.length ? valueArr : columnOption)
+  return value ? JSON.parse(value) : initColumnSet()
+}
+const initColumnSet = () => {
+  return props.columns.map((col: any) => ({
+    label: col.label,
+    prop: col.prop,
+    checkBoxDisabled: false,
+    hidden: false
+  }))
+}
+
+onMounted(() => {
+  state.columnSet = getColumnSetCache()
+  defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
+  emits("columnSetting", state.columnSet)
+})
+
+watch(
+  () => state.columnSet,
+  val => {
+    emits("columnSetting", val)
+    localStorage.setItem(
+      `t-ui-plus:TTable.columnSet-${props.name || props.title}`,
+      JSON.stringify(val)
+    )
+    defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
+  },
+  { deep: true }
+)
+
+const reSetColumnSet = () => {
+  let value: any = localStorage.getItem(`t-ui-plus:TTable.columnSet-${props.name || props.title}`)
+  state.columnSet = JSON.parse(value)
+  defaultCheckedKeys.value = state.columnSet.filter(c => !c.hidden).map(c => c.prop)
+  emits("columnSetting", state.columnSet)
+}
+
+const onTreeCheck = () => {
+  // 获取最新勾选的key
+  const checkedKeys = treeRef.value?.getCheckedKeys() || []
+  state.columnSet.forEach(col => {
+    col.hidden = !checkedKeys.includes(col.prop)
+  })
+  // 至少保留一个可见列
+  const visibleCols = state.columnSet.filter(col => !col.hidden)
+  if (visibleCols.length < 2) {
+    visibleCols.forEach(col => (col.checkBoxDisabled = true))
+  } else {
+    state.columnSet.forEach(col => (col.checkBoxDisabled = false))
+  }
+}
+// 限制拖拽结点
+const allowDrag = () => {
+  return true
+}
+const allowDrop = (draggingNode: any, dropNode: any, type: any) => {
+  // 只允许同级节点之间的拖拽
+  if (draggingNode.level !== dropNode.level) {
+    return false
+  }
+  // 如果是同级节点，还需要判断是否是前后节点的拖拽
+  if (type !== "prev" && type !== "next") {
+    return false
+  }
+  return true
+}
+// 拖拽排序
+const handleDrop = (draggingNode: any, dropNode: any, dropType: string, ev: Event) => {
+  // 只允许拖拽到同级（禁止拖为子级）
+  if (dropType === "inner") {
+    ev.preventDefault()
+    return
+  }
+  const draggingIndex = state.columnSet.findIndex(col => col.prop === draggingNode.data.prop)
+  const dropIndex = state.columnSet.findIndex(col => col.prop === dropNode.data.prop)
+  if (draggingIndex === -1 || dropIndex === -1) return
+  const item = state.columnSet.splice(draggingIndex, 1)[0]
+  if (dropType === "before") {
+    // 如果拖拽项在目标项后面，直接插入；如果在前面，dropIndex要减1
+    const insertIndex = draggingIndex < dropIndex ? dropIndex - 1 : dropIndex
+    state.columnSet.splice(insertIndex, 0, item)
+  } else if (dropType === "after") {
+    state.columnSet.splice(dropIndex + 1, 0, item)
+  }
+}
+
+defineExpose({
+  reSetColumnSet
+})
+</script>

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

@@ -0,0 +1,100 @@
+<template>
+  <el-table-column
+    v-if="typeof item.isShowCol == 'function' ? item.isShowCol(item) : !item.isShowCol"
+    :prop="item.prop"
+    :label="item.label"
+    :type="item.type"
+    :align="item.align || align"
+    :min-width="item['min-width'] || item.minWidth"
+    :width="item.width"
+    :fixed="item.fixed"
+  >
+    <template #header v-if="item.renderHeader">
+      <render-header :column="item" :render="item.renderHeader" />
+    </template>
+    <template v-for="(val, index) of item.children">
+      <t-table-column v-if="val.children" :key="index" :item="val" v-bind="$attrs">
+        <template v-for="(_index, name) in slots" v-slot:[name]="data">
+          <slot :name="name" v-bind="data"></slot>
+        </template>
+      </t-table-column>
+      <el-table-column
+        v-else
+        :key="val.prop"
+        :prop="val.prop"
+        :label="val.label"
+        :min-width="val['min-width'] || val.minWidth"
+        :width="val.width"
+        :sortable="val.sortable || val.sort || sortable"
+        :align="val.align || align"
+        :fixed="val.fixed"
+        :formatter="val.formatter"
+        v-if="typeof val.isShowCol == 'function' ? val.isShowCol(val) : !val.isShowCol"
+        v-bind="{ 'show-overflow-tooltip': true, ...val.bind, ...$attrs }"
+      >
+        <template #header v-if="val.renderHeader">
+          <render-header :column="val" :render="val.renderHeader" />
+        </template>
+        <template #default="scope">
+          <!-- render渲染 -->
+          <template v-if="val.render">
+            <render-col :column="val" :row="scope.row" :render="val.render" :index="scope.$index" />
+          </template>
+          <!-- 自定义插槽 -->
+          <template v-if="val.slotNameMerge">
+            <slot :name="val.slotNameMerge" :scope="scope"></slot>
+          </template>
+          <!-- 单个单元格编辑 -->
+          <template v-if="val.canEdit">
+            <single-edit-cell
+              :isShowRules="false"
+              :configEdit="val.configEdit"
+              v-model="scope.row[val.prop]"
+              :prop="val.prop"
+              :scope="scope"
+              @handleEvent="({ type, val }:any) => emits('handleEvent', type, val, scope.$index)"
+              v-bind="$attrs"
+            >
+              <template v-for="(_index, name) in slots" v-slot:[name]="data">
+                <slot :name="name" v-bind="data"></slot>
+              </template>
+            </single-edit-cell>
+          </template>
+          <div v-if="!val.render && !val.slotNameMerge && !val.canEdit && !val.formatter">
+            {{ scope.row[val.prop] }}
+          </div>
+        </template>
+      </el-table-column>
+    </template>
+  </el-table-column>
+</template>
+
+<script setup lang="tsx">
+import SingleEditCell from "@ff-ui-plus/components/table/src/singleEditCell.vue"
+import RenderCol from "@ff-ui-plus/components/table/src/renderCol.vue"
+import RenderHeader from "@ff-ui-plus/components/table/src/renderHeader.vue"
+import { useSlots } from "vue"
+defineOptions({
+  name: "TTableColumn"
+})
+defineProps({
+  item: {
+    type: Object,
+    default: () => {
+      return {}
+    },
+    required: true
+  },
+  align: {
+    type: String,
+    default: "center"
+  },
+  sortable: {
+    type: [Boolean, String]
+  }
+})
+// 抛出事件
+const emits = defineEmits(["handleEvent"])
+// 获取所有插槽
+const slots = useSlots()
+</script>

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

@@ -0,0 +1,91 @@
+<template>
+  <el-dropdown trigger="click" popper-class="density_set">
+    <el-button v-bind="densityBind">
+      <template #icon>
+        <el-icon
+          :size="densityBind.iconSize"
+          :color="densityBind.iconColor"
+          class="density_set__toolbar__icon"
+        >
+          <svg
+            viewBox="0 0 1024 1024"
+            focusable="false"
+            data-icon="column-height"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              d="M840 836H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zm0-724H184c-4.4 0-8 3.6-8 8v60c0 4.4 3.6 8 8 8h656c4.4 0 8-3.6 8-8v-60c0-4.4-3.6-8-8-8zM610.8 378c6 0 9.4-7 5.7-11.7L515.7 238.7a7.14 7.14 0 00-11.3 0L403.6 366.3a7.23 7.23 0 005.7 11.7H476v268h-62.8c-6 0-9.4 7-5.7 11.7l100.8 127.5c2.9 3.7 8.5 3.7 11.3 0l100.8-127.5c3.7-4.7.4-11.7-5.7-11.7H548V378h62.8z"
+            />
+          </svg>
+        </el-icon>
+      </template>
+      {{ densityBind.btnTxt }}
+    </el-button>
+    <template #dropdown>
+      <div class="density_set_list">
+        <el-button
+          v-for="item in buttonNameDensity"
+          :key="item.size"
+          :plain="defaultSize !== item.size"
+          type="primary"
+          size="small"
+          @click="handleClickDensity(item.size)"
+        >
+          {{ unref(item.text) }}
+        </el-button>
+      </div>
+    </template>
+  </el-dropdown>
+</template>
+<script lang="ts" setup>
+import { computed, unref, useAttrs } from "vue"
+import type { ComputedRef } from "vue"
+import type { ComponentSize } from "element-plus/es/constants"
+import { useLocale } from "@ff-ui-plus/hooks"
+const { t } = useLocale()
+defineOptions({
+  name: "DensitySet"
+})
+
+export interface ButtonNameDensity {
+  size: ComponentSize
+  text: string | ComputedRef<string>
+}
+export interface DensitySetProps {
+  defaultSize?: ComponentSize
+  densitySetBind?: Record<string, any>
+}
+const emit = defineEmits<{
+  (e: "clickDensity", size: ComponentSize): void
+}>()
+const props = withDefaults(defineProps<DensitySetProps>(), {
+  defaultSize: "default",
+  densitySetBind: () => ({})
+})
+const attrs = useAttrs()
+const densityBind = computed(() => {
+  const densitySetBind = {
+    btnTxt: t("plus.table.density"),
+    ...props.densitySetBind
+  }
+  return { size: "default", iconSize: 18, iconColor: "", ...attrs, ...densitySetBind }
+})
+const buttonNameDensity: ButtonNameDensity[] = [
+  {
+    size: "default",
+    text: computed(() => t("plus.table.default"))
+  },
+  {
+    size: "large",
+    text: computed(() => t("plus.table.loose"))
+  },
+  {
+    size: "small",
+    text: computed(() => t("plus.table.compact"))
+  }
+]
+const handleClickDensity = (size: ComponentSize) => {
+  emit("clickDensity", size)
+}
+</script>