@jzt-packages/components 1.0.0

package/src/JztLeftRightMode/components/RightLayout.vue

@@ -0,0 +1,235 @@
+<script setup lang="tsx" name="RightLayout">
+import { JztButtonList, JztEmpty, JztFormGrid, JztQueryTable } from '@jzt-spd/components'
+import { default as RightHeader } from './RightHeader.vue'
+import { default as RightTableHeader } from './RightTableHeader.vue'
+
+import { useElementSize, watchOnce } from '@vueuse/core'
+import { useSlots } from 'vue'
+import { useCollapse } from '../hooks/useCollapse'
+import { useRightProps } from '../hooks/useDefaultProps'
+import { useRightLayout } from '../hooks/useRightLayout'
+
+import { type RightLayoutEmits, type RightLayoutProps } from '../types/index'
+
+const props = withDefaults(defineProps<RightLayoutProps>(), {
+  ...useRightProps(),
+  headerProps: () => ({}),
+  tableProps: () => ({
+    tableConfig: { queryItems: [], topList: [], columns: [] },
+    toolButton: ['refresh', 'setting']
+  })
+})
+const emits = defineEmits<RightLayoutEmits>()
+
+const slots = useSlots()
+const { isCollapse, onCollapse } = useCollapse()
+
+const {
+  tableRef,
+  formGridRef,
+  rightLayoutRef,
+  loading,
+  background,
+  headerData,
+  mergedTotalProps,
+  totalData,
+  expose,
+  descriptionsProps,
+  onSortChange,
+  onGetTableData
+} = useRightLayout(props, emits)
+
+const { height } = useElementSize(rightLayoutRef)
+
+watchOnce(
+  () => height.value,
+  newVal => {
+    isCollapse.value = newVal > (props.overHeight ?? 400)
+  }
+)
+
+defineExpose(expose)
+
+export type Expose = typeof expose
+</script>
+
+<template>
+  <div
+    ref="rightLayoutRef"
+    class="right-aside"
+    :class="{ 'is-over-height': height < overHeight, 'is-bg-color': showBgColor }"
+  >
+    <template v-if="!showEmpty">
+      <slot name="main">
+        <div class="right-aside-main">
+          <jzt-query-table
+            ref="tableRef"
+            v-bind="{ ...tableProps, requestApi: onGetTableData }"
+            :table-card="false"
+            :request-auto="false"
+            :table-loading="loading"
+            :page-height="height < overHeight ? `${overHeight}px` : '100%'"
+            @sort-change="onSortChange"
+            @get-end-columns="tableRef?.searchAndClear"
+            @reset="$emit('rightReset')"
+          >
+            <template #formTopSlot>
+              <slot name="main-header"></slot>
+            </template>
+            <template #tableTops>
+              <slot v-if="showHeader" name="header">
+                <right-header
+                  v-bind="props"
+                  v-model:background="background"
+                  :data="headerData"
+                  :is-collapse="isCollapse"
+                  @collapse="onCollapse"
+                >
+                  <template #header-title>
+                    <slot name="header-title" :data="headerData"></slot>
+                  </template>
+                  <template #header-extra>
+                    <slot name="header-extra" :data="headerData"></slot>
+                  </template>
+                </right-header>
+              </slot>
+              <el-collapse-transition v-if="showDescriptions">
+                <div class="pl4 pr4" v-show="showHeader && showCollapse ? isCollapse : true">
+                  <slot name="descriptions">
+                    <jzt-form-grid
+                      ref="formGridRef"
+                      v-bind="{
+                        ...descriptionsProps,
+                        showOverflowTooltip: (descriptionsProps as any)?.showOverflowTooltip ?? true,
+                        groupProps: { fontSize: '14px' }
+                      }"
+                    />
+                  </slot>
+                </div>
+              </el-collapse-transition>
+            </template>
+            <template #headerTitle>
+              <right-table-header :title="tableProps.title">
+                <template #table-header-left>
+                  <slot name="table-header-left" :data="headerData"></slot>
+                </template>
+                <template #table-header-right>
+                  <slot name="table-header-right" :data="headerData"></slot>
+                </template>
+              </right-table-header>
+            </template>
+            <template #toolBtnRight>
+              <el-space v-if="mergedTotalProps?.length && !tableProps.isHideTotal">
+                <div v-for="config in mergedTotalProps" :key="config.type" class="flx-left-center">
+                  <el-text class="flex-shrink-0">{{ config.label }}</el-text>
+                  <span class="count" :style="{ color: config?.color }">
+                    <EllipsisTooltip :content="totalData[config?.type || ''] + ''" />
+                  </span>
+                  <el-text v-if="config.unit">{{ `${config.unit}` }}</el-text>
+                </div>
+              </el-space>
+            </template>
+            <template #tableHeader>
+              <slot name="table-header"></slot>
+            </template>
+            <template v-if="slots['table-main']" #queryTableMain>
+              <div style="flex: 1">
+                <slot name="table-main"></slot>
+              </div>
+            </template>
+            <template #pageFooter="{ loading }">
+              <slot name="footer" :data="headerData" :loading="loading">
+                <div v-if="showFooter" class="right-aside-footer p12">
+                  <jzt-button-list
+                    v-if="buttonList"
+                    :button-list="buttonList"
+                    @onClick="$event?.(expose)"
+                  ></jzt-button-list>
+                </div>
+              </slot>
+            </template>
+          </jzt-query-table>
+        </div>
+      </slot>
+    </template>
+    <div v-else class="position-center">
+      <jzt-empty></jzt-empty>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.right-aside {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  position: relative;
+  &.is-bg-color {
+    background: v-bind(background);
+  }
+  &.is-over-height &-main {
+    overflow: auto;
+  }
+
+  &:not(.is-over-height) &-main {
+    overflow: auto;
+    flex: 1;
+  }
+
+  &-footer {
+    text-align: center;
+    margin: 0 -12px;
+    border-top: 1px solid #e5e5e5;
+    display: flex;
+    justify-content: center;
+    gap: 12px;
+    :deep(.el-button) {
+      margin-left: 0 !important;
+      margin-right: 0 !important;
+    }
+  }
+}
+
+:deep(.header-button-ri) {
+  flex: 1;
+}
+:deep(.check-total) {
+  padding-left: 12px;
+}
+
+.position-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+</style>
+
+<style lang="scss">
+:not(.el-dialog) .right-aside {
+  .table-header {
+    padding: 0 12px;
+    align-items: center !important;
+  }
+
+  .el-table {
+    width: calc(100% - 24px);
+    margin: 0 12px;
+  }
+
+  .el-pagination {
+    padding: 0 12px 12px 0;
+  }
+}
+
+.el-dialog:has(.right-aside) {
+  .el-dialog__body {
+    padding: 0 12px !important;
+  }
+
+  .el-dialog__header {
+    border-bottom: none !important;
+  }
+}
+</style>

package/src/JztLeftRightMode/components/RightTableHeader.vue

@@ -0,0 +1,43 @@
+<script setup lang="tsx" name="RightTableHeader">
+import { JztLabelTitle } from '@jzt-spd/components'
+
+const props = defineProps<{
+  title?: string
+}>()
+</script>
+
+<template>
+  <div class="right-aside-table-header">
+    <slot name="table-header-left"></slot>
+    <jzt-label-title
+      v-if="title"
+      :title="title"
+      font-size="14px"
+      style="padding: 0; padding-right: 12px; width: fit-content"
+    />
+    <slot name="table-header-right"></slot>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.el-text:not(.el-text--primary) {
+  color: #333333;
+}
+.right-aside-table-header {
+  border-radius: 4px;
+  display: flex;
+  align-items: center;
+  height: 36px;
+  margin-top: 2px;
+  gap: 20px;
+  transition: all 0.2s ease-in-out;
+  .title {
+    color: #333333;
+    font-size: 16px;
+    font-weight: 500;
+  }
+  .flex-shrink-0 {
+    flex-shrink: 0;
+  }
+}
+</style>

package/src/JztLeftRightMode/hooks/useCollapse.ts

@@ -0,0 +1,17 @@
+import { ref } from 'vue'
+
+export const useCollapse = () => {
+  /** 是否折叠侧边栏 */
+  const isCollapse = ref<boolean>(false)
+  /**
+   * 切换侧边栏折叠状态
+   */
+  const onCollapse = () => {
+    isCollapse.value = !isCollapse.value
+  }
+
+  return {
+    isCollapse,
+    onCollapse
+  }
+}

package/src/JztLeftRightMode/hooks/useDefaultProps.ts

@@ -0,0 +1,19 @@
+import { type LeftLayoutProps, type RightLayoutProps } from '../types'
+
+export const useLeftProps = () =>
+  ({
+    rowKey: 'id',
+    showBackTop: true,
+    debounceTime: 100
+  }) as Omit<LeftLayoutProps, 'statusEnum' | 'headerButtonList' | 'footerButtonList'>
+
+export const useRightProps = () =>
+  ({
+    rowKey: 'id',
+    showHeader: true,
+    showBgColor: true,
+    showCollapse: true,
+    showDescriptions: true,
+    showScrollAnimation: true,
+    overHeight: 400
+  }) as Omit<RightLayoutProps, 'descriptionsProps' | 'buttonList'>

package/src/JztLeftRightMode/hooks/useLeftLayout.ts

@@ -0,0 +1,201 @@
+import { reactiveComputed, reactivePick, useDebounceFn, useVModel } from '@vueuse/core'
+import { nextTick, reactive, ref, toRefs, watch } from 'vue'
+
+import { type LeftLayoutProps } from '../types/index'
+
+export type Row = { selected: boolean; options: any }
+
+export const useLeftLayout = (props: LeftLayoutProps, emits: any) => {
+  /** 滚条实例 */
+  const scrollbarRef = ref<any>()
+  /** 列表元素实例列表 */
+  const itemRefs = ref<HTMLElement[]>([])
+  /** 加载动画实例 */
+  const loading = useVModel(props, 'loading', emits, { passive: true })
+  /** 数据行列表 */
+  const rows = ref<Row[]>([])
+  /** 当前选中行 */
+  const currentRow = ref<Row['options']>({})
+  /** 当前选中行索引 */
+  const currentIndex = ref<number>(0)
+  /** 是否全选 */
+  const isSelectedAll = ref<boolean>(false)
+
+  /** 分页信息 */
+  const page = reactive({
+    pageIndex: 0,
+    pageSize: 20,
+    total: 0
+  })
+  const more = reactive({
+    loading: false,
+    text: '正在加载中'
+  })
+
+  /** 数据列表 */
+  const dataList = reactiveComputed(() => rows.value.map((item: any) => item.options))
+
+  /** 选中数据列表 */
+  const selectedList = reactiveComputed(() =>
+    rows.value.filter((item: any) => item.selected).map((item: any) => item.options)
+  )
+
+  /** 选中数据ID列表 */
+  const selectedIds = reactiveComputed(() => selectedList.map((item: any) => item[props?.rowKey || 'id']))
+
+  /** 插槽绑定数据 */
+  const slotBind = reactiveComputed(() => ({
+    page,
+    item: currentRow.value,
+    index: currentIndex.value,
+    list: [...dataList],
+    selectedList: [...selectedList],
+    selectedIds: [...selectedIds]
+  }))
+
+  /** 暴露方法 */
+  const expose = {
+    ...toRefs(slotBind),
+    search: () => onResetList(),
+    scrollToIndex: (index: number) => onScrollToIndex(index),
+    setCurrentRow: (val: Row['options']) => (currentRow.value = val),
+    setCurrentIndex: (val: number) => (currentIndex.value = val)
+  }
+
+  /**
+   * 查询列表数据
+   */
+  const onQueryList = async () => {
+    try {
+      const { requestApi } = props
+      const { result, totalCount } = await requestApi?.(reactivePick(page, ['pageIndex', 'pageSize']))
+      rows.value = rows.value.concat(result.map((item: any) => ({ checked: false, options: item })))
+      page.total = totalCount
+      emits('query', slotBind)
+    } finally {
+      more.loading = false
+      loading.value = false
+    }
+  }
+
+  /**
+   * 重置列表数据
+   */
+  const onResetList = async () => {
+    page.pageIndex = 0
+    page.total = 0
+    more.loading = true
+    more.text = '正在加载中'
+    rows.value = []
+    currentRow.value = {}
+    isSelectedAll.value = false
+    loading.value = true
+    await onQueryList()
+    emits('reset', slotBind)
+  }
+
+  /**
+   * 加载更多数据
+   */
+  const onLoadList = async ({ scrollTop }) => {
+    const { clientHeight, scrollHeight } = scrollbarRef.value?.wrapRef
+    const isBottom = scrollTop + clientHeight >= scrollHeight - 250
+    const isLoadMore = rows.value.length < page.total
+    if (!more.loading && isBottom && isLoadMore) {
+      more.loading = true
+      more.text = '正在加载中'
+      page.pageIndex++
+      await onQueryList()
+      emits('load', slotBind)
+    }
+  }
+
+  /**
+   * 全选/取消全选
+   */
+  const onSelectedAllChange = (val: any) => {
+    rows.value.forEach((item: any) => (item.selected = val))
+  }
+
+  /**
+   * 卡片点击事件
+   */
+  const onCardClick = useDebounceFn((val: Row, index: number) => {
+    const { options } = val
+    currentRow.value = options
+    currentIndex.value = index
+    emits('cardClick', options)
+  }, props?.debounceTime)
+
+  /**
+   * 选中/取消选中
+   */
+  const onCardSelect = (val: Row) => {
+    val.selected = !val.selected
+    emits('cardSelected', val.options)
+  }
+
+  /**
+   * 批量存 ref
+   */
+  const onSetItemRef = (el: any, index: number) => {
+    if (el) itemRefs.value[index] = el
+  }
+
+  /**
+   * 滚动到指定 index
+   */
+  const onScrollToIndex = async (index: number, offset: number = 8) => {
+    await nextTick()
+    const el = itemRefs.value[index]
+    scrollbarRef.value?.scrollTo({ top: el.offsetTop - offset, behavior: 'smooth' })
+  }
+
+  /**
+   * 监听数据列表变化
+   */
+  watch(
+    () => dataList.length,
+    (newVal, oldVal) => {
+      if (newVal > 0 && oldVal === 0) {
+        currentIndex.value = 0
+        currentRow.value = [...dataList]?.[0]
+        emits('init', currentRow.value)
+      }
+      if (newVal === page.total) {
+        more.text = '没有更多单据了'
+      }
+    }
+  )
+
+  /**
+   * 监听数据列表和选中列表变化，更新全选状态
+   */
+  watch(
+    [() => dataList.length, () => selectedIds.length],
+    ([dataListLength, selectedKeysLength]) => (isSelectedAll.value = selectedKeysLength === dataListLength)
+  )
+
+  return {
+    scrollbarRef,
+    isSelectedAll,
+    rows,
+    currentRow,
+    currentIndex,
+    page,
+    more,
+    dataList,
+    selectedList,
+    selectedIds,
+    slotBind,
+    expose,
+    itemRefs,
+    onQueryList,
+    onResetList,
+    onLoadList,
+    onSelectedAllChange,
+    onCardClick,
+    onCardSelect,
+    onSetItemRef
+  }
+}

package/src/JztLeftRightMode/hooks/useMode.ts

@@ -0,0 +1,20 @@
+import { useVModel } from '@vueuse/core'
+import { reactive } from 'vue'
+
+import type { Emits, Props, Mode } from '../types'
+
+export const useMode = ({ props, emits }: { props: Props; emits: Emits }) => {
+  const modelMode = useVModel(props, 'mode', emits, { passive: true })
+  const options = reactive([
+    { label: '列表模式', value: 'list', icon: `list-mode` },
+    { label: '详情模式', value: 'detail', icon: `detail-mode` }
+  ])
+  const onChange = (value: Mode) => {
+    emits('modeChange', value)
+  }
+  return {
+    modelMode,
+    options,
+    onChange
+  }
+}

package/src/JztLeftRightMode/hooks/usePrevNext.ts

@@ -0,0 +1,60 @@
+import { reactiveComputed } from '@vueuse/core'
+
+import { type Ref } from 'vue'
+import { type Emits, type LeftLayoutInstance, type Props, type RightLayoutInstance } from '../types/index'
+
+export const usePrevNext = ({
+  leftProps,
+  rightProps,
+  leftLayoutRef,
+  rightLayoutRef,
+  emits
+}: {
+  leftProps: Props['leftProps']
+  rightProps?: Props['rightProps']
+  leftLayoutRef: Ref<LeftLayoutInstance>
+  rightLayoutRef: Ref<RightLayoutInstance>
+  emits: Emits
+}) => {
+  const prevNextButtonList = reactiveComputed<any[]>(() => {
+    const { index: pageIndex, page: { total = 0 } = {} } = leftLayoutRef.value ?? {}
+    return [
+      {
+        text: '上一个',
+        type: 'primary',
+        disabledFn: () => pageIndex === 0,
+        fun: () => onQueryList(pageIndex - 1)
+      },
+      {
+        text: '下一个',
+        type: 'primary',
+        disabledFn: () => pageIndex === total - 1,
+        fun: () => onQueryList(pageIndex + 1)
+      }
+    ]
+  })
+
+  const onQueryList = async (pageIndex: number) => {
+    const { requestApi } = leftProps
+    const { showScrollAnimation = true } = rightProps ?? {}
+    const { search, setData, setLoading } = rightLayoutRef.value ?? {}
+    const { scrollToIndex, setCurrentRow, setCurrentIndex } = leftLayoutRef.value ?? {}
+    try {
+      setLoading?.(true)
+      emits?.('nextPrev-before')
+      const { result: [row] = [{}] } = await requestApi?.({ pageIndex, pageSize: 1 })
+      setData?.(row)
+      search?.()
+      setCurrentRow(row)
+      setCurrentIndex(pageIndex)
+      showScrollAnimation && scrollToIndex?.(pageIndex)
+      emits?.('nextPrev-after', { row, index: pageIndex })
+    } finally {
+      setLoading?.(false)
+    }
+  }
+
+  return {
+    prevNextButtonList
+  }
+}