@jzt-packages/components 1.0.0

package/src/JztLeftRightMode/index.vue

@@ -0,0 +1,494 @@
+<script setup lang="tsx" name="JztLeftRightMode">
+import { JztButtonList, JztEmpty, JztLabelTitle, JztQueryTable, JztSvgIcon } from '@jzt-spd/components'
+import { default as CollapseButton } from './components/CollapseButton.vue'
+import { default as LeftLayout } from './components/LeftLayout.vue'
+import { default as RightLayout } from './components/RightLayout.vue'
+
+import { isEmpty, removeEmpty } from '@jzt-spd/utils'
+import { reactiveComputed, reactiveOmit, useElementSize, useVModel } from '@vueuse/core'
+import { cloneDeep } from 'lodash-es'
+import { computed, nextTick, ref, useSlots, watch } from 'vue'
+import { useCollapse } from './hooks/useCollapse'
+import { useLeftProps, useRightProps } from './hooks/useDefaultProps'
+import { useMode } from './hooks/useMode'
+import { usePrevNext } from './hooks/usePrevNext'
+
+import { type ProTableInstance } from '../JztQueryTable/interface'
+import { type Emits, type LeftLayoutInstance, type Props, type RightLayoutInstance } from './types/index'
+
+const GUIDNoneValue = '00000000-0000-0000-0000-000000000000'
+const props = withDefaults(defineProps<Props>(), {
+  mode: 'detail',
+  showHeader: true
+})
+const emits = defineEmits<Emits>()
+const slots = useSlots()
+
+const tableRef = ref<ProTableInstance>()
+const leftLayoutRef = ref<LeftLayoutInstance | any>()
+const rightLayoutRef = ref<RightLayoutInstance | any>()
+const rightContainerRef = ref<HTMLDivElement>()
+const loading = useVModel(props, 'loading', emits, { passive: true })
+const rightData = useVModel(props, 'rightData', emits, { passive: true })
+const tabActive = useVModel(props, 'tabActive', emits, { passive: true })
+
+const leftWidth = computed(() => {
+  const { leftWidth = 360 } = props
+  if (Number.isNaN(Number(leftWidth))) {
+    return leftWidth
+  } else {
+    return `${leftWidth}px`
+  }
+})
+const showEmpty = computed(() => !leftLayoutRef.value?.list.length)
+const tableProps = reactiveComputed(() => {
+  const { initParams, queryItems } = props?.searchProps ?? {}
+  const { columns, requestApi, headerButtonList = [], footerButtonList = [] } = props.leftProps ?? {}
+  return {
+    tableConfig: {
+      topList: [...headerButtonList, ...footerButtonList],
+      columns: columns ?? [],
+      queryItems: queryItems ?? []
+    },
+    requestApi: async (params: any) => {
+      return await requestApi?.({
+        ...params,
+        ...formatterForm({
+          ...initParams,
+          ...tableRef.value?.searchParam
+        })
+      })
+    },
+    initParam: initParams,
+    tabIsTop: true,
+    ...reactiveOmit(props?.searchProps ?? ({} as any), ['initParams', 'queryItems'])
+  }
+})
+// 详情模式左侧布局组件 Props 定义
+const computedLeftProps = reactiveComputed(() => {
+  const { initParams } = props?.searchProps ?? {}
+  const { backTopProps, showSelected, requestApi } = props.leftProps ?? {}
+  const yValue = showSelected || slots.leftFooter ? -60 : -20
+  return {
+    ...useLeftProps(),
+    ...props?.leftProps,
+    requestApi: async (params: any) => {
+      return await requestApi?.({
+        ...params,
+        ...formatterForm({
+          ...initParams,
+          ...tableRef.value?.searchParam
+        })
+      })
+    },
+    backTopProps: {
+      x: -20,
+      y: yValue,
+      size: 54,
+      threshold: 500,
+      container: '.left-aside',
+      scrollContainer: '.left-aside-scrollbar',
+      ...(backTopProps ?? {})
+    }
+  }
+})
+// 详情模式右侧布局组件 Props 定义
+const computedRightProps = reactiveComputed(() => {
+  const { rowKey } = computedLeftProps ?? {}
+  return {
+    ...useRightProps(),
+    ...props.rightProps,
+    showEmpty,
+    rowKey
+  }
+})
+
+const { modelMode, options, onChange: onModeChange } = useMode({ props, emits })
+const { isCollapse, onCollapse } = useCollapse()
+const { prevNextButtonList } = usePrevNext({
+  leftProps: computedLeftProps,
+  rightProps: computedRightProps,
+  leftLayoutRef,
+  rightLayoutRef,
+  emits
+})
+const { height } = useElementSize(rightContainerRef)
+
+const formatterForm = form => {
+  let searchForm = cloneDeep(form)
+  props?.searchProps?.queryItems?.forEach(item => {
+    if (item?.search && item.search?.isSetEmptyData && isEmpty(searchForm[item.prop])) {
+      searchForm[item.prop] = item.search.emptyNullValue || GUIDNoneValue
+    }
+    if (item.search && item.search?.startField && item.search?.endField) {
+      const { startField, endField } = item.search
+      const timeList = searchForm[item.prop] || []
+      if (item?.search?.el !== 'JztNumericalRange' && item?.search?.el !== 'JztDateSelect') {
+        searchForm[startField] = timeList[0] ?? ''
+        searchForm[endField] = timeList[1] ?? ''
+      }
+      delete searchForm[item.prop]
+    }
+  })
+  const endFrom = removeEmpty(searchForm)
+  return endFrom
+}
+
+const onSearch = () => {
+  isCollapse.value = false
+  leftLayoutRef.value?.search()
+}
+
+const onReset = () => {
+  isCollapse.value = false
+  leftLayoutRef.value?.search()
+}
+
+const onTabChange = (val: string) => {
+  emits('tabChange', val)
+}
+
+const onCardClick = async (row: any, isInit = false) => {
+  rightData.value = row
+  await nextTick()
+  if (rightLayoutRef?.value) {
+    const { search } = rightLayoutRef?.value
+    await search?.()
+  }
+  emits('cardClick', row)
+}
+
+const onButtonClick = (fun: Function) => {
+  const searchParams = formatterForm({
+    ...tableRef.value?.searchParam,
+    ...props?.searchProps?.initParams
+  })
+  fun?.({ searchParams, leftData: { ...leftLayoutRef.value }, rightData: { ...rightLayoutRef.value } })
+}
+
+watch(
+  () => tableRef.value?.searchParam,
+  newVal => {
+    newVal && emits('update:searchData', newVal)
+  },
+  { deep: true, immediate: true }
+)
+
+watch(
+  () => props.searchData,
+  newVal => {
+    Object.assign(tableRef?.value?.searchParam as any, newVal)
+  },
+  { deep: true }
+)
+
+const expose = {
+  tableRef,
+  leftLayoutRef,
+  rightLayoutRef,
+  setLoading: (val: boolean) => (loading.value = val),
+  search: () => tableRef.value?.searchAndClear()
+}
+
+defineExpose(expose)
+
+export type Expose = typeof expose
+</script>
+
+<template>
+  <div class="jzt-left-right-mode">
+    <jzt-query-table
+      ref="tableRef"
+      v-model:tab-active="tabActive"
+      v-bind="tableProps"
+      :table-loading="loading"
+      @search="onSearch"
+      @reset="onReset"
+      @tab-change="onTabChange"
+    >
+      <template v-if="mode === 'list'" #toolBtnRight="scope">
+        <slot name="tool-btn-right" v-bind="scope"></slot>
+      </template>
+      <template v-if="mode === 'list'" #tableTops>
+        <div v-if="showHeader" class="container-header">
+          <div class="container-header_left" :style="{ width: leftWidth }">
+            <jzt-label-title class="title" :title="title"></jzt-label-title>
+            <slot name="header-left">
+              <div v-show="!showEmpty" class="button-list">
+                <jzt-button-list
+                  v-if="computedLeftProps?.headerButtonList"
+                  :button-list="computedLeftProps.headerButtonList"
+                  @onClick="onButtonClick"
+                ></jzt-button-list>
+              </div>
+            </slot>
+          </div>
+          <div class="container-header_right">
+            <slot name="header-right"></slot>
+            <el-segmented v-if="showMode" v-model="modelMode" :options="options" @change="onModeChange">
+              <template #default="{ item }: { item: any }">
+                <el-space :size="2">
+                  <el-icon size="16"><jzt-svg-icon :name="item.icon" /></el-icon>
+                  <span>{{ item.label }}</span>
+                </el-space>
+              </template>
+            </el-segmented>
+          </div>
+        </div>
+      </template>
+      <div v-if="mode === 'detail'" v-loading="loading" class="container spd-card">
+        <div v-if="showHeader" class="container-header">
+          <div class="container-header_left" :style="{ width: leftWidth }">
+            <jzt-label-title class="title" :title="title"></jzt-label-title>
+            <slot name="header-left">
+              <div v-show="!showEmpty" class="button-list">
+                <jzt-button-list
+                  v-if="computedLeftProps?.headerButtonList"
+                  :button-list="computedLeftProps.headerButtonList"
+                  @onClick="onButtonClick"
+                ></jzt-button-list>
+              </div>
+            </slot>
+          </div>
+          <div class="container-header_right">
+            <slot name="header-right"></slot>
+            <el-segmented v-if="showMode" v-model="modelMode" :options="options" @change="onModeChange">
+              <template #default="{ item }: { item: any }">
+                <el-space :size="2">
+                  <el-icon size="16"><jzt-svg-icon :name="item.icon" /></el-icon>
+                  <span>{{ item.label }}</span>
+                </el-space>
+              </template>
+            </el-segmented>
+          </div>
+        </div>
+        <div class="container-content">
+          <div
+            v-show="!showEmpty"
+            class="container-left"
+            :class="{ 'is-collapse': isCollapse }"
+            :style="{ width: leftWidth }"
+          >
+            <transition name="el-fade-in-linear">
+              <div class="container-left__main" v-show="!isCollapse">
+                <slot name="left">
+                  <left-layout
+                    ref="leftLayoutRef"
+                    v-model:loading="loading"
+                    v-bind="computedLeftProps"
+                    @load="emits('load', $event)"
+                    @query="emits('query', $event)"
+                    @reset="emits('reset', $event)"
+                    @init="onCardClick($event, true)"
+                    @card-click="onCardClick"
+                    @card-selected="emits('cardSelected', $event)"
+                  >
+                    <template v-if="slots['left-header']" #header="scope">
+                      <slot name="left-header" v-bind="scope"></slot>
+                    </template>
+                    <template v-if="slots['left-footer']" #footer="scope">
+                      <slot name="left-footer" v-bind="scope"></slot>
+                    </template>
+                    <template v-if="computedLeftProps?.footerButtonList?.length" #footer-right="scope">
+                      <slot name="left-footer-right" v-bind="scope">
+                        <div class="button-list">
+                          <jzt-button-list
+                            :button-list="computedLeftProps.footerButtonList"
+                            @onClick="onButtonClick"
+                          ></jzt-button-list>
+                        </div>
+                      </slot>
+                    </template>
+                    <template v-if="slots['left-card']" #card="scope">
+                      <slot name="left-card" v-bind="scope"></slot>
+                    </template>
+                    <template v-if="slots['left-card-title-left']" #card-title-left="scope">
+                      <slot name="left-card-title-left" v-bind="scope"></slot>
+                    </template>
+                    <template v-if="slots['left-card-title-center']" #card-title-center="scope">
+                      <slot name="left-card-title-center" v-bind="scope"></slot>
+                    </template>
+                    <template v-if="slots['left-card-title-right']" #card-title-right="scope">
+                      <slot name="left-card-title-right" v-bind="scope"></slot>
+                    </template>
+                    <template v-if="slots['left-card-footer']" #card-footer="scope">
+                      <slot name="left-card-footer" v-bind="scope"></slot>
+                    </template>
+                  </left-layout>
+                </slot>
+              </div>
+            </transition>
+            <collapse-button :is-collapse="isCollapse" :text="collapseText" @click="onCollapse"></collapse-button>
+          </div>
+          <div v-if="!showEmpty" ref="rightContainerRef" class="container-right">
+            <slot name="right" :height="height">
+              <right-layout
+                ref="rightLayoutRef"
+                v-model="rightData"
+                v-bind="computedRightProps"
+                @right-reset="$emit('rightReset')"
+              >
+                <template #main-header="scope">
+                  <slot name="right-main-header" v-bind="scope"></slot>
+                </template>
+                <template v-if="slots['right-table-main']" #table-main="scope">
+                  <slot name="right-table-main" v-bind="scope"></slot>
+                </template>
+                <template #header-title="scope">
+                  <slot name="right-header-title" v-bind="scope"></slot>
+                </template>
+                <template #table-header="scope">
+                  <slot name="right-table-header" v-bind="scope"></slot>
+                </template>
+                <template #header-extra="scope">
+                  <slot name="right-header-extra" v-bind="scope"></slot>
+                </template>
+                <template #descriptions="scope">
+                  <slot name="descriptions" v-bind="scope"></slot>
+                </template>
+                <template #footer="scope">
+                  <slot name="right-footer" v-bind="scope">
+                    <div v-if="rightProps?.showFooter" class="container-right-footer">
+                      <jzt-button-list
+                        v-if="rightProps?.showPrevNext"
+                        :button-list="prevNextButtonList"
+                        @onClick="onButtonClick"
+                      ></jzt-button-list>
+                      <jzt-button-list
+                        v-if="rightProps?.buttonList"
+                        :button-list="rightProps.buttonList"
+                        @onClick="onButtonClick"
+                      ></jzt-button-list>
+                    </div>
+                  </slot>
+                </template>
+              </right-layout>
+            </slot>
+            <slot v-if="slots.right" name="right-footer">
+              <div v-if="rightProps?.showFooter" class="container-right-footer">
+                <jzt-button-list
+                  v-if="rightProps?.showPrevNext"
+                  :button-list="prevNextButtonList"
+                  @onClick="onButtonClick"
+                ></jzt-button-list>
+                <slot name="right-footer-right"></slot>
+              </div>
+            </slot>
+          </div>
+          <div v-show="showEmpty" class="container-empty">
+            <jzt-empty :empty-text="emptyText" />
+            <slot v-if="!loading" name="empty">
+              <jzt-button-list
+                v-if="leftProps?.headerButtonList?.length"
+                :button-list="leftProps.headerButtonList"
+                @onClick="onButtonClick"
+              ></jzt-button-list>
+            </slot>
+          </div>
+        </div>
+      </div>
+    </jzt-query-table>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.jzt-left-right-mode {
+  height: 100%;
+}
+.container {
+  flex: 1;
+  height: 100%;
+  overflow: hidden;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  padding: 8px !important;
+  box-sizing: border-box;
+  &-header {
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    margin-bottom: 4px;
+    min-height: 30px;
+    &_left {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+    }
+    &_right {
+      flex: 1;
+      display: flex;
+      justify-content: flex-end;
+      align-items: center;
+    }
+    :deep(.title) {
+      width: fit-content;
+      padding: 0;
+    }
+  }
+  &-content {
+    flex: 1;
+    display: flex;
+    overflow: hidden;
+    gap: 8px;
+  }
+  &-left {
+    box-sizing: border-box;
+    height: 100%;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    background: linear-gradient(180deg, #3475fa1a 7.000000000000001%, #3475fa03 100%);
+    flex-shrink: 0;
+    transition: width 0.3s ease-in-out;
+    position: relative;
+    overflow: hidden;
+    &__main {
+      height: 100%;
+    }
+    &.is-collapse {
+      width: 32px !important;
+    }
+    &:hover .collapse-button:not(.is-collapse) {
+      right: 8px;
+    }
+  }
+  &-right {
+    height: 100%;
+    border-radius: 8px;
+    border: 1px solid #dee2e6;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+    position: relative;
+    flex: 1;
+    &-footer {
+      display: flex;
+      justify-content: center;
+      padding: 0 12px 8px;
+      margin-top: -4px;
+    }
+    :deep(.table-main .el-table .el-scrollbar) {
+      min-height: auto !important;
+    }
+  }
+  &-empty {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    gap: 8px;
+  }
+}
+
+.button-list {
+  display: flex;
+  gap: 8px;
+  :deep(.el-button) {
+    margin: 0;
+  }
+}
+</style>