@jzt-packages/components 1.0.0

package/src/JztLabelTitle/index.vue

@@ -0,0 +1,65 @@
+<template>
+  <div class="group-header flx-left-center" :class="className" :style="style">
+    <div class="label-title flx-left-center">
+      <span v-if="isLabel" class="label"></span>
+      <slot name="title">
+        <span class="title">{{ title }}</span>
+      </slot>
+      <slot name="icon"></slot>
+    </div>
+    <div v-if="subTitle" class="sub-title">{{ subTitle }}</div>
+    <slot name="titleRight"></slot>
+  </div>
+</template>
+<script setup lang="ts" name="JztLabelTitle">
+import { CSSProperties } from 'vue'
+
+interface ProTableProps {
+  isLabel?: boolean
+  title?: string
+  fontSize?: string
+  subTitle?: string
+  className?: string //类名
+  style?: CSSProperties // 样式
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  title: '',
+  fontSize: '16px',
+  isLabel: true,
+  subTitle: '',
+  style: () => ({}),
+  noPadding: false
+})
+</script>
+
+<style lang="scss" scoped>
+.group-header {
+  width: 100%;
+  padding: 10px 12px;
+  flex-shrink: 0;
+}
+.label-title {
+  font-weight: 600;
+  color: var(--el-text-color-primary);
+  text-align: left;
+  flex-shrink: 0;
+  .label {
+    display: inline-block;
+    width: 4px;
+    height: 16px;
+    background: var(--el-color-primary);
+    margin-right: 8px;
+    border-radius: 4px;
+  }
+
+  .title {
+    font-size: v-bind(fontSize);
+  }
+}
+.sub-title {
+  margin-left: 10px;
+  font-weight: 400;
+}
+</style>

package/src/JztLeftRightMode/components/CollapseButton.vue

@@ -0,0 +1,80 @@
+<script setup lang="tsx" name="CollapseButton">
+import { DArrowLeft, DArrowRight } from '@element-plus/icons-vue'
+import { computed } from 'vue'
+
+export type Props = {
+  /**
+   * 是否折叠
+   */
+  isCollapse: boolean
+  /**
+   * 折叠时显示的文本
+   * @default 主单详细
+   */
+  text?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  isCollapse: false,
+  text: '主单详细'
+})
+
+const emits = defineEmits<{
+  /** 点击时触发 */
+  (e: 'click'): void
+}>()
+
+const texts = computed(() => props.text?.split(''))
+</script>
+
+<template>
+  <div class="collapse-button" :class="{ 'is-collapse': isCollapse }" @click="emits('click')">
+    <transition name="el-fade-in-linear">
+      <div v-show="isCollapse" class="collapse-button__text">
+        <el-text v-for="item in texts" :key="item" type="primary">{{ item }}</el-text>
+      </div>
+    </transition>
+    <div class="collapse-button__icon">
+      <el-text type="primary">
+        <el-icon size="14">
+          <DArrowRight v-if="isCollapse" />
+          <DArrowLeft v-else />
+        </el-icon>
+      </el-text>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.collapse-button {
+  cursor: pointer;
+  &:not(.is-collapse) {
+    position: absolute;
+    top: 50%;
+    right: -50%;
+    transform: translateY(-50%);
+    transition: right 0.3s ease-in-out;
+  }
+  &.is-collapse {
+    width: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    gap: 6px;
+  }
+  &__text {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+  }
+  &__icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+}
+</style>

package/src/JztLeftRightMode/components/LeftCard.vue

@@ -0,0 +1,203 @@
+<script setup lang="tsx" name="Card">
+import { computed, ref } from 'vue'
+
+import JztEllipsisTooltip from '../../JztEllipsisTooltip/index.vue'
+import { type LeftLayoutProps } from '../types/index'
+// 卡片属性
+const props = defineProps<{
+  row: any
+  isSelected: boolean
+  showSelected: LeftLayoutProps['showSelected']
+  showStatus: LeftLayoutProps['showStatus']
+  statusProp?: LeftLayoutProps['statusProp']
+  statusEnum?: LeftLayoutProps['statusEnum']
+  cardProps: LeftLayoutProps['cardProps']
+}>()
+// 卡片事件
+const emits = defineEmits<{
+  (e: 'click'): void
+  (e: 'select'): void
+}>()
+// 卡片元素
+const root = ref<any>()
+// 内容配置
+const contentConfig = computed<any>(() => {
+  const { row, cardProps } = props
+  return cardProps?.content.map((item: any) => {
+    const arr = Array.isArray(item.props) ? item.props : [item.props]
+    return {
+      ...item,
+      values: arr.map((key: string) => row.options[key]).filter(Boolean)
+    }
+  })
+})
+// 状态项
+const statusItem = computed(() => {
+  const {
+    row: { options },
+    statusProp,
+    statusEnum
+  } = props
+  return statusEnum?.find(item => [item.value, item.name, item.label].includes(options[statusProp || '']))
+})
+
+defineExpose({
+  root
+})
+</script>
+
+<template>
+  <div ref="root" class="order-item">
+    <div v-if="showSelected" class="order-checkbox" @click.stop="emits('select')">
+      <el-checkbox :model-value="row.selected" @update:model-value="emits('select')" @click.stop></el-checkbox>
+    </div>
+    <div class="order-card" @click.stop="emits('click')" :class="{ 'is-selected': isSelected }">
+      <slot name="title">
+        <div class="order-title">
+          <slot name="title-left"></slot>
+          <slot name="title-center">
+            <div v-if="cardProps?.title" class="order-title-content">
+              <jzt-ellipsis-tooltip
+                placement="top-start"
+                :content="`${row.options[cardProps?.title] ?? ''}`"
+              ></jzt-ellipsis-tooltip>
+            </div>
+          </slot>
+          <slot name="title-right"></slot>
+          <div
+            v-if="showStatus && statusItem?.name"
+            :class="cardProps?.title ? 'order-title-status' : 'order-title-status-float'"
+          >
+            <el-tag :type="statusItem?.type || 'primary'" size="small">
+              {{ statusItem?.name || '' }}
+            </el-tag>
+          </div>
+        </div>
+      </slot>
+      <template v-if="contentConfig?.length">
+        <div
+          class="order-content"
+          v-for="(item, index) in contentConfig"
+          :key="index"
+          :style="{ width: item.width ? `calc(${item.width} - 2px)` : '100%' }"
+        >
+          <el-text v-if="item.label" class="order-content-label" :style="{ color: item.labelColor }">
+            {{ item.label }}：
+          </el-text>
+          <div class="order-content-value">
+            <template v-if="item.render">
+              <component :is="item.render(row,item)"></component>
+            </template>
+            <template v-else v-for="(value, valueIndex) in item.values" :key="valueIndex">
+              <jzt-ellipsis-tooltip
+                placement="top-start"
+                :content="`${value}`"
+                :max-width="`${100 / item.values?.length}%`"
+                :style="
+                  Number(valueIndex) + 1 == item.values.length
+                    ? { flex: 1, maxWidth: 'unset', color: item.valueColor && item.valueColor(row.options) }
+                    : { color: item.valueColor && item.valueColor(row.options) }
+                "
+              ></jzt-ellipsis-tooltip>
+              <el-divider v-if="Number(valueIndex) < (item.values?.length ?? 0) - 1" direction="vertical" />
+            </template>
+          </div>
+        </div>
+      </template>
+      <slot name="footer"></slot>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.order-item {
+  display: flex;
+}
+.order-card {
+  position: relative;
+  padding: 8px 12px;
+  height: 100%;
+  cursor: pointer;
+  border-radius: 4px;
+  background-color: #ffffff;
+  user-select: none;
+  flex: 1;
+  overflow: hidden;
+  display: flex;
+  // flex-direction: column;
+  flex-wrap: wrap;
+  gap: 0 4px;
+  &.is-selected {
+    box-shadow: inset 0 0 0 1px rgba(52, 117, 250, 0.6);
+  }
+}
+.order-checkbox {
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  padding-right: 8px;
+  padding-left: 12px;
+}
+.order-title {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+  overflow: hidden;
+  flex: 1;
+  .order-title-content {
+    font-size: 14px;
+    font-weight: 600;
+    line-height: 22px;
+    color: #333333;
+    overflow: hidden;
+  }
+  .order-title-status {
+    flex: 1;
+    display: flex;
+    justify-content: flex-end;
+  }
+  .order-title-status-float {
+    position: absolute;
+    right: 12px;
+    top: 4px;
+  }
+  .el-tag {
+    border: none;
+    padding: 0 4px;
+  }
+}
+.order-content {
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 22px;
+  color: #333333;
+  display: flex;
+  align-items: center;
+  .order-content-label {
+    flex-shrink: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: #999999;
+    line-height: 20px;
+  }
+  .order-content-value {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    overflow: hidden;
+    :deep(.ellipsis-text) {
+      flex-shrink: 0;
+      font-size: 12px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 20px;
+    }
+    :deep(.el-divider) {
+      margin: 0 4px;
+      border-left-width: 1.5px;
+      border-left-color: #333333;
+    }
+  }
+}
+</style>

package/src/JztLeftRightMode/components/LeftLayout.vue

@@ -0,0 +1,173 @@
+<script setup lang="tsx" name="LeftLayout">
+import { JztBackTop as BackTop } from '@jzt-spd/components'
+import { default as Card } from './LeftCard.vue'
+
+import { computed } from 'vue'
+import { useLeftProps } from '../hooks/useDefaultProps'
+import { useLeftLayout } from '../hooks/useLeftLayout'
+import { useFilterSlots } from '../hooks/useSlots'
+
+import { type LeftLayoutEmits, type LeftLayoutProps } from '../types/index'
+
+const props = withDefaults(defineProps<LeftLayoutProps>(), {
+  ...useLeftProps(),
+  backTopProps: () => ({}),
+  topList: () => [],
+  columns: () => [],
+  cardProps: () => ({ title: '', subTitle: [], content: [] })
+})
+
+const emits = defineEmits<LeftLayoutEmits<typeof slotBind>>()
+
+const {
+  scrollbarRef,
+  rows,
+  currentIndex,
+  isSelectedAll,
+  page,
+  more,
+  selectedIds,
+  slotBind,
+  expose,
+  onLoadList,
+  onSelectedAllChange,
+  onCardClick,
+  onCardSelect,
+  onSetItemRef
+} = useLeftLayout(props, emits)
+
+const { slots, onFilterSlots } = useFilterSlots()
+
+const wrapClass = computed(() => {
+  const { showSelected } = props
+  return `left-aside-scrollbar ${showSelected ? 'pr12' : 'pl12 pr12'} ${slots.header ? '' : 'pt12'}`
+})
+
+defineExpose(expose)
+
+export type Expose = typeof expose
+</script>
+
+<template>
+  <div class="left-aside">
+    <slot name="header" v-bind="slotBind"></slot>
+    <slot name="main" v-bind="slotBind">
+      <el-scrollbar v-if="page.total > 0" ref="scrollbarRef" height="100%" :wrap-class="wrapClass" @scroll="onLoadList">
+        <div class="left-aside-list">
+          <template v-for="(item, index) in rows" :key="index">
+            <slot name="card" :row="item.options" :index="index" :rows="rows">
+              <card
+                :ref="(el:any) => onSetItemRef(el?.root, index)"
+                :key="index"
+                :row="item"
+                :is-selected="index === currentIndex"
+                :card-props="cardProps"
+                :status-prop="statusProp"
+                :status-enum="statusEnum"
+                :show-status="showStatus"
+                :show-selected="showSelected"
+                @click="onCardClick(item, index)"
+                @select="onCardSelect(item)"
+              >
+                <template v-for="slot in onFilterSlots('card-')" #[slot.templateName]>
+                  <slot :name="slot.slotName" :row="item.options" :index="index" :rows="rows"></slot>
+                </template>
+              </card>
+            </slot>
+          </template>
+        </div>
+        <div class="left-aside-more">
+          <el-button text type="info" :loading="more.loading">
+            {{ more.text }}
+          </el-button>
+        </div>
+      </el-scrollbar>
+    </slot>
+    <slot name="footer" v-bind="slotBind">
+      <div v-if="page.total > 0 && showSelected" class="left-aside-footer">
+        <el-checkbox
+          v-if="showSelected && footerButtonList"
+          v-model="isSelectedAll"
+          :class="{
+            'align-items-start': footerButtonList.length >= 2,
+            'align-items-center': footerButtonList.length < 2
+          }"
+          @change="onSelectedAllChange"
+        >
+          <el-text>全选</el-text>
+          <el-text v-if="footerButtonList.length < 2">
+            ，已勾选
+            <el-text type="warning">{{ ` ${selectedIds.length} ` }}</el-text>
+            项
+          </el-text>
+          <div v-else>
+            <el-text type="info" size="small">
+              已勾选
+              <el-text type="warning" size="small">
+                {{ ` ${selectedIds.length} ` }}
+              </el-text>
+              项
+            </el-text>
+          </div>
+        </el-checkbox>
+        <slot name="footer-right" v-bind="slotBind"></slot>
+      </div>
+    </slot>
+    <back-top
+      v-if="showBackTop && page.total > 0"
+      ref="backTopRef"
+      v-bind="backTopProps"
+      position="absolute"
+    ></back-top>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.left-aside {
+  position: relative;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+
+  &-list {
+    display: flex;
+    flex-direction: column;
+    gap: 8px;
+  }
+  &-more {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 12px;
+    gap: 2px;
+    .el-button {
+      height: fit-content;
+      padding: 0;
+    }
+  }
+  &-footer {
+    padding: 12px;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background: #ffffff;
+    gap: 8px;
+  }
+}
+:deep(.el-checkbox) {
+  --el-checkbox-border-radius: 50%;
+  --el-checkbox-input-width: 16px;
+  --el-checkbox-input-height: 16px;
+  &.align-items-start {
+    align-items: start;
+  }
+  &.align-items-center {
+    align-items: center;
+  }
+  .el-checkbox__inner::after {
+    left: 50%;
+    top: 49%;
+    transform: translate(-50%, -50%) rotate(45deg) scaleY(1);
+  }
+}
+</style>

package/src/JztLeftRightMode/components/RightHeader.vue

@@ -0,0 +1,186 @@
+<script setup lang="tsx" name="RightHeader">
+import { ArrowDown, ArrowUp, WarningFilled } from '@element-plus/icons-vue'
+
+import { useElementSize } from '@vueuse/core'
+import { computed, ref, watch } from 'vue'
+
+import { type RightLayoutProps } from '../types'
+
+const props = defineProps<
+  {
+    data: any
+    background?: string
+    isCollapse: boolean
+  } & RightLayoutProps
+>()
+
+const emits = defineEmits(['collapse', 'update:background'])
+const reasonRef = ref<HTMLDivElement>()
+const { width } = useElementSize(reasonRef)
+
+const HeaderBgColorEnum = {
+  primary: ['#eaf1fd', '#fdfdff'],
+  danger: ['#ff3a301a', '#ff3a3003'],
+  success: ['#44cc771a', '#44cc7703'],
+  info: ['#6666661a', '#66666603'],
+  warning: ['#ffa00c1a', '#ffa00c03']
+}
+
+const statusItem = computed(() => {
+  const { data } = props
+  const { statusProp, statusEnum } = props.headerProps ?? {}
+  return statusEnum?.find(item => [item.value, item.name, item.label].includes(data[statusProp || '']))
+})
+
+const background = computed(() => {
+  const size = 52
+  const { showSyncBg, headerProps } = props
+  const type = showSyncBg ? statusItem.value?.type : headerProps?.bgType
+  const [startColor, endColor] = HeaderBgColorEnum[type || 'primary']
+  return `linear-gradient(180deg, ${startColor} ${size * 0.1}px, ${endColor} ${size * 0.99}px)`
+})
+
+const title = computed(() => {
+  const { data } = props
+  const { titleProp } = props.headerProps ?? {}
+  return data?.[titleProp || ''] || ''
+})
+
+const subTitle = computed(() => {
+  const { data } = props
+  const { subTitleProp } = props.headerProps ?? {}
+  return data?.[subTitleProp || ''] || ''
+})
+
+const reason = computed(() => {
+  const { data } = props
+  const { reasonProp } = props.headerProps ?? {}
+  return data?.[reasonProp || '']?.replace(/\|/g, '；') || ''
+})
+
+watch(
+  () => background.value,
+  newVal => {
+    emits('update:background', newVal)
+  },
+  { immediate: true }
+)
+</script>
+
+<template>
+  <div
+    v-if="showHeader"
+    class="right-aside-header right-aside-header_bg"
+    :class="{ 'is-reason': headerProps?.reasonProp }"
+  >
+    <div class="flex align-center">
+      <div class="right-aside-header_left" style="flex: 1">
+        <slot name="header-title">
+          <span v-if="title" class="right-aside-header_title">
+            {{ title }}
+          </span>
+          <span v-if="subTitle">|</span>
+          <div v-if="subTitle" class="right-aside-header_subTitle">
+            <ellipsis-tooltip :content="subTitle" />
+          </div>
+        </slot>
+        <el-tag v-if="showStatus && statusItem?.name" :type="statusItem?.type" size="small">
+          {{ statusItem?.name || statusItem?.name || '' }}
+        </el-tag>
+        <slot name="header-extra"></slot>
+      </div>
+      <div v-if="showCollapse && showDescriptions" class="right-aside-header_right">
+        <el-text type="primary" class="right-aside-header_toggle" @click="emits('collapse')">
+          {{ isCollapse ? '收起信息' : '更多信息' }}
+          <el-icon class="el-icon--right ml2">
+            <component :is="isCollapse ? ArrowUp : ArrowDown"></component>
+          </el-icon>
+        </el-text>
+      </div>
+    </div>
+    <div ref="reasonRef" v-if="showReason && headerProps?.reasonProp" class="flex align-center">
+      <el-text type="danger" class="mr2">
+        <el-icon><WarningFilled /></el-icon>
+      </el-text>
+      <el-tooltip effect="dark" placement="bottom" :popper-style="{ width: `${width || '200'}px` }">
+        <template #content>
+          <el-text class="right-aside-header_reason">{{ reason }}</el-text>
+        </template>
+        <el-text class="right-aside-header_reason is-overflow">驳回原因：{{ reason }}</el-text>
+      </el-tooltip>
+    </div>
+  </div>
+  <div v-else class="right-aside-header_bg pt8"></div>
+</template>
+
+<style lang="scss" scoped>
+.right-aside-header {
+  position: relative;
+  box-sizing: border-box;
+  border-radius: 8px 8px 0 0;
+  font-size: 14px;
+  padding: 14px 12px;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  &.is-reason {
+    padding-bottom: 8px;
+  }
+  &_left,
+  &_right {
+    position: relative;
+    z-index: 1;
+  }
+  &_left {
+    display: flex;
+    align-items: baseline;
+    gap: 4px;
+    font-size: 14px;
+    width: 100%;
+    flex: 1;
+  }
+  &_title {
+    flex-shrink: 0;
+    color: #333333;
+    font-weight: 500;
+  }
+  &_subTitle {
+    overflow: hidden;
+    flex: 0 1 auto;
+    color: #333333;
+    font-weight: 500;
+  }
+  &_right {
+    flex-shrink: 0;
+    display: flex;
+    align-items: center;
+  }
+  &_toggle {
+    flex-shrink: 0;
+    font-weight: 500;
+    font-size: 13px;
+    cursor: pointer;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    .el-icon {
+      margin-left: 2px;
+    }
+  }
+  &_reason {
+    color: #999999;
+    font-size: 13px;
+    &.is-overflow {
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+.flex {
+  display: flex;
+}
+.align-center {
+  align-items: center;
+}
+</style>