@jzt-packages/components 1.0.0

package/src/JztDateSelect/index.ts

@@ -0,0 +1,135 @@
+import dayjs from 'dayjs'
+import { DateType, DateTypeProps, IDateOptions } from './interface/index'
+
+export const dateOptions: IDateOptions<DateTypeProps>[] = [
+  {
+    name: '年',
+    value: 'year',
+    type: 'year'
+    // disableInfo: {
+    // unit: 'month'
+    // maxValue: 4 * 12 //(5年) 需要-1
+    // }
+  },
+  {
+    name: '季度',
+    value: 'quarter',
+    type: 'year'
+    // disableInfo: {
+    // unit: 'month'
+    // maxValue: 1 * 12 // (2年)  需要-1
+    // }
+  },
+  {
+    name: '半年',
+    value: 'halfYear',
+    type: 'year'
+    // disableInfo: {
+    // unit: 'month'
+    // maxValue: 1 * 12 // (2年)  需要-1
+    // }
+  },
+  {
+    name: '月',
+    value: 'month',
+    type: 'month'
+    // disableInfo: {
+    // unit: 'month'
+    // maxValue: 12
+    // }
+  },
+  {
+    name: '日',
+    value: 'custom',
+    type: 'daterange',
+    disableInfo: {
+      unit: 'month',
+      maxValue: 24
+    }
+  }
+]
+
+export function getChangeDateType(type: DateType) {
+  let dateRange: string | Array<string> = ''
+  switch (type) {
+    case 'month':
+      dateRange = dayjs().format('YYYY-MM')
+      break
+    case 'year':
+      dateRange = dayjs().format('YYYY')
+      break
+    case 'halfYear':
+      dateRange = dayjs().format('YYYY')
+      break
+    case 'custom':
+      const start = dayjs().startOf('day').format('YYYY-MM-DD')
+      const end = dayjs().endOf('day').format('YYYY-MM-DD')
+      dateRange = [start, end]
+      break
+    case 'quarter':
+      dateRange = dayjs().format('YYYY')
+      break
+    default:
+      break
+  }
+
+  return dateRange
+}
+
+// 季度级别
+export const allQuarters = [
+  { label: '第一季度', value: 1 },
+  { label: '第二季度', value: 2 },
+  { label: '第三季度', value: 3 },
+  { label: '第四季度', value: 4 }
+]
+// 半年度级别
+export const allHalfYear = [
+  { label: '上半年', value: 1 },
+  { label: '下半年', value: 2 }
+]
+
+export const getDataRangeByType = params => {
+  const { timeMode, typeNum, value } = params
+  let startTime = ''
+  let endTime = ''
+  let timeValue
+
+  if (timeMode == 'month') {
+    startTime = dayjs(value).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+    endTime = dayjs(value).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+    timeValue = dayjs(value).format('YYYY-MM')
+    // console.log('获取的开始时间是：', startTime, endTime)
+  } else if (timeMode == 'year') {
+    // 返回选择年的第一天和最后一天
+    startTime = dayjs(value).startOf('year').format('YYYY-MM-DD HH:mm:ss')
+    endTime = dayjs(value).endOf('year').format('YYYY-MM-DD HH:mm:ss')
+    timeValue = dayjs(value).format('YYYY')
+    // console.log(startTime, endTime)
+  } else if (timeMode == 'halfYear') {
+    // typeNum: 1 上半年, 2 下半年
+    if (typeNum === 1) {
+      startTime = dayjs(value).month(0).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      endTime = dayjs(value).month(5).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+    } else {
+      startTime = dayjs(value).month(6).startOf('month').format('YYYY-MM-DD HH:mm:ss')
+      endTime = dayjs(value).month(11).endOf('month').format('YYYY-MM-DD HH:mm:ss')
+    }
+    timeValue = dayjs(value).format('YYYY')
+  } else if (timeMode == 'quarter') {
+    // typeNum: 1-4 对应第一到第四季度
+    startTime = dayjs(value).quarter(typeNum).startOf('quarter').format('YYYY-MM-DD HH:mm:ss')
+    endTime = dayjs(value).quarter(typeNum).endOf('quarter').format('YYYY-MM-DD HH:mm:ss')
+    timeValue = dayjs(value).format('YYYY')
+  } else {
+    // 返回指定数组的开始时间和结束时间
+    const start = value[0] || ''
+    const end = value[1] || ''
+    console.log(start, end);
+    
+    startTime = dayjs(start).startOf('day').format('YYYY-MM-DD HH:mm:ss')
+    endTime = dayjs(end).endOf('day').format('YYYY-MM-DD HH:mm:ss')
+    timeValue = [dayjs(start).format('YYYY-MM-DD'), dayjs(end).format('YYYY-MM-DD')]
+  }
+  return { startTime, endTime,timeValue }
+}

package/src/JztDateSelect/interface/index.ts

@@ -0,0 +1,13 @@
+export type DateType = 'year' | 'month' | 'quarter' | 'custom' | 'halfYear'
+export type DateTypeProps = 'year' | 'month' | 'date' | 'daterange'
+import { UnitType } from '@jzt-spd/utils'
+export interface IDateOptions<T = any> {
+  name: string
+  value: string
+  type: T
+  disableInfo?: {
+    // 禁用信息
+    unit?: UnitType // 时间单位
+    maxValue?: number // 最大值
+  }
+}

package/src/JztDialog/index.vue

@@ -0,0 +1,249 @@
+<script lang="ts" setup name="Dialog">
+import { Close } from '@element-plus/icons-vue'
+import { debounce } from 'lodash-es'
+import { computed, ref, unref, useAttrs, useSlots, nextTick } from 'vue'
+const slots = useSlots()
+const props = defineProps({
+  modelValue: {
+    type: Boolean,
+    default: true
+  },
+  title: {
+    type: String,
+    default: '标题'
+  },
+  appendToBody: {
+    type: Boolean,
+    default: true
+  },
+  // 宽度
+  width: {
+    type: String,
+    default: '50%'
+  },
+  // 全屏
+  fullscreen: {
+    type: Boolean,
+    default: false
+  },
+  // 拖拽功能
+  draggable: {
+    type: Boolean,
+    default: true
+  },
+  // 是否显示全屏功能
+  isShowFullscreen: {
+    type: Boolean,
+    default: true
+  },
+  // 确定按钮
+  confirmText: {
+    type: [String, Boolean],
+    default: '确定'
+  },
+  // 确定按钮 是否禁用
+  disabled: {
+    type: Boolean,
+    default: false
+  },
+  // 取消按钮
+  cancelText: {
+    type: [String, Boolean],
+    default: '取消'
+  },
+  // 是否显示footer
+  showFooter: {
+    type: Boolean,
+    default: true
+  },
+  dialogClass: {
+    type: String,
+    default: ''
+  },
+  // 是否弹框全屏高度自适应
+  fullContent: {
+    type: Boolean,
+    default: false
+  },
+  // 按钮是否在中间
+  footerCenter: {
+    type: Boolean,
+    default: false
+  },
+  height: {
+    type: String,
+    default: '75vh'
+  }
+})
+
+const emit = defineEmits(['close', 'confirm', 'changeFullscreen'])
+// const slot = defineSlots()
+const getBindValue = computed(() => {
+  const delArr: string[] = ['fullscreen', 'title', 'appendToBody']
+  const attrs = useAttrs()
+  const obj: { [key: string]: any } = { ...attrs, ...props }
+  for (const key in obj) {
+    if (delArr.indexOf(key) !== -1) {
+      delete obj[key]
+    }
+  }
+  return obj
+})
+const isFullscreen = ref(props.fullscreen)
+const toggleFull = () => {
+  isFullscreen.value = !unref(isFullscreen)
+  emit('changeFullscreen', isFullscreen.value)
+}
+
+// 取消
+const onClose = async () => {
+  emit('close')
+}
+// 确定
+const onConfirm = debounce(
+  async () => {
+    emit('confirm')
+  },
+  1000,
+  {
+    leading: true
+  }
+)
+const getClassName = computed(() => {
+  return 't-dialog' + ' ' + props.dialogClass
+})
+const handleClick = event => {
+  event.stopPropagation()
+}
+
+// 获取头部高度的方法
+const getHeaderHeight = () => {
+  const headerElement: any = document.querySelector('.getHeaderHeight')
+  const contentPadding: any = document.querySelector('.el-dialog__body')
+  if (contentPadding && headerElement) {
+    const computedStyle = window.getComputedStyle(contentPadding)
+    // console.log(parseInt(headerElement.offsetHeight), parseInt(computedStyle.paddingTop), parseInt(computedStyle.paddingBottom))
+    return (
+      parseInt(headerElement.offsetHeight) + parseInt(computedStyle.paddingTop) + parseInt(computedStyle.paddingBottom)
+    )
+  }
+  return 0
+}
+const headerHeight = ref<any>()
+// 在组件挂载后获取头部高度
+const opened = () => {
+  headerHeight.value = getHeaderHeight() + 'px'
+}
+// footer高度
+const footerHeight = computed(() => {
+  return props.showFooter || slots.footer ? '58px' : '0px'
+})
+defineExpose({
+  isFullscreen
+})
+</script>
+
+<template>
+  <el-dialog
+    v-bind="getBindValue"
+    :fullscreen="isFullscreen"
+    :width="width"
+    destroy-on-close
+    :append-to-body="appendToBody"
+    :show-close="false"
+    :draggable="draggable"
+    :close-on-click-modal="false"
+    class="t-dialog"
+    :before-close="onClose"
+    header-class="getHeaderHeight"
+    :class="getClassName"
+    @close="onClose"
+    @opened="opened"
+    @click.native.stop="handleClick"
+  >
+    <template #header>
+      <div class="header flx-between-center">
+        <slot name="title">
+          <span class="title">{{ title }}</span>
+        </slot>
+        <div class="cursor-pointer flx-between-center pl15">
+          <div v-if="isShowFullscreen" class="is-hover mr15 cursor-pointer screen flx-center" @click="toggleFull">
+            <i :class="['iconfont', isFullscreen ? 'icon-shiyingchuangkou fontS-22' : 'icon-manping fontS-20']"></i>
+          </div>
+          <el-icon class="is-hover cursor-pointer" hover-color="#377dff" style="font-size: 24px" @click="onClose">
+            <Close />
+          </el-icon>
+        </div>
+      </div>
+    </template>
+    <div
+      class="jzt-dialog-body"
+      :style="{
+        height: fullContent
+          ? isFullscreen
+            ? `calc(100vh - ${headerHeight} - ${footerHeight})`
+            : `calc(${height} - ${headerHeight}  - ${footerHeight})`
+          : undefined
+      }"
+    >
+      <slot></slot>
+    </div>
+    <template v-if="showFooter || slots.footer" #footer>
+      <div v-if="showFooter" :class="[footerCenter ? 'flx-center' : 'flx-between-center']">
+        <div>
+          <slot name="footer_left"></slot>
+        </div>
+        <div class="dialog-footer">
+          <slot name="button_left"></slot>
+          <el-button v-if="cancelText" plain @click="onClose">
+            {{ cancelText }}
+          </el-button>
+          <el-button v-if="confirmText" :disabled="disabled" type="primary" @click="onConfirm">
+            {{ confirmText }}
+          </el-button>
+        </div>
+      </div>
+      <slot v-else-if="slots.footer" name="footer"></slot>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped>
+.title {
+  cursor: default;
+  user-select: text;
+}
+
+.jzt-dialog-body {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  height: 100%;
+}
+
+:deep(.el-dialog__footer) {
+  display: flex !important;
+  flex-direction: row !important;
+  justify-content: center !important;
+}
+
+.dialog-footer {
+  .el-button {
+    margin-left: 10px;
+  }
+}
+</style>
+<style lang="scss">
+.t-dialog.is-fullscreen {
+  display: flex;
+  flex-direction: column;
+  .el-dialog__body {
+    flex: 1;
+  }
+}
+.t-dialog {
+  .el-dialog__body {
+    padding: 8px 12px 12px !important;
+  }
+}
+</style>

package/src/JztEllipsisTooltip/index.vue

@@ -0,0 +1,61 @@
+<template>
+  <el-tooltip :disabled="!isEllipsis" :content="content" :placement="placement" :popper-style="{ maxWidth: '60vw'}">
+    <span ref="textRef" class="ellipsis-text" :style="{ maxWidth: maxWidth, ...style }" @mouseenter="checkEllipsis">
+      <slot>{{ content }}</slot>
+    </span>
+  </el-tooltip>
+</template>
+
+<script setup lang="ts">
+import { ref, onMounted, nextTick } from 'vue'
+
+interface Props {
+  content?: string
+  placement?:
+    | 'top'
+    | 'top-start'
+    | 'top-end'
+    | 'bottom'
+    | 'bottom-start'
+    | 'bottom-end'
+    | 'left'
+    | 'left-start'
+    | 'left-end'
+    | 'right'
+    | 'right-start'
+    | 'right-end'
+  maxWidth?: number | string
+  style?: any,
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  placement: 'top-start',
+  maxWidth: '100%'
+})
+
+const textRef = ref<HTMLElement>()
+const isEllipsis = ref(false)
+
+const checkEllipsis = () => {
+  nextTick(() => {
+    if (textRef.value) {
+      isEllipsis.value = textRef.value.scrollWidth > textRef.value.clientWidth
+    }
+  })
+}
+
+onMounted(() => {
+  checkEllipsis()
+})
+</script>
+
+<style scoped>
+.ellipsis-text {
+  display: inline-block;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  cursor: default;
+  vertical-align: bottom;
+}
+</style>

package/src/JztEmpty/index.vue

@@ -0,0 +1,45 @@
+<template>
+  <div class="empty">
+    <slot name="empty">
+      <img :src="notData" class="notData" alt="notData" />
+      <div class="empty-text">{{ emptyText }}</div>
+      <slot name="empty-button"></slot>
+    </slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { notData } from '@jzt-spd/styles/assets'
+interface ProTableProps {
+  emptyText?: string
+  fontSize?: string
+  subTitle?: string
+}
+
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  emptyText: '暂无内容',
+  fontSize: '14px',
+  isLabel: true,
+  subTitle: ''
+})
+</script>
+
+<style lang="scss" scoped>
+.empty {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  img {
+    width: 100px;
+    object-fit: contain;
+  }
+  .empty-text {
+    color: #333333;
+    line-height: 30px;
+    margin-top: 16px;
+  }
+}
+</style>

package/src/JztErrorPage/403.vue

@@ -0,0 +1,30 @@
+<template>
+  <div class="errorPage">
+    <img src="./assets/403.png" class="not-img" alt="403" />
+    <div class="not-detail">
+      <div class="typeText">暂无{{ text }}权限</div>
+      <div class="descText">请联系相关运营人员</div>
+      
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { useRoute } from 'vue-router'
+import { computed } from 'vue'
+const route = useRoute()
+// 接受父组件参数，配置默认值
+const props = withDefaults(
+  defineProps<{
+    type?: string
+  }>(),
+  {
+    type: ''
+  }
+)
+const text = computed(() => route.query?.type || '')
+</script>
+
+<style scoped lang="scss">
+@use './index';
+</style>

package/src/JztErrorPage/404.vue

@@ -0,0 +1,19 @@
+<template>
+  <div class="errorPage">
+    <img src="./assets/404.png" class="not-img" alt="404" />
+    <div class="not-detail">
+      <div class="typeText">您访问的页面不存在</div>
+      <div class="descText">错误码：404</div>
+      <!-- <el-button type="primary" @click="router.back">返回上一页</el-button> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="404">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+
+<style scoped lang="scss">
+@use './index';
+</style>

package/src/JztErrorPage/500.vue

@@ -0,0 +1,18 @@
+<template>
+  <div class="errorPage">
+    <img src="./assets/500.png" class="not-img" alt="500" />
+    <div class="not-detail">
+      <div class="typeText">网络不佳，请检查网络设置</div>
+      <!-- <el-button type="primary" @click="router.back">重新加载</el-button> -->
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="500">
+import { useRouter } from 'vue-router'
+const router = useRouter()
+</script>
+
+<style scoped lang="scss">
+@use './index';
+</style>

package/src/JztErrorPage/index.scss

@@ -0,0 +1,35 @@
+.errorPage {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-direction: column;
+  width: 300px;
+  height: 100%;
+  .not-img {
+    width: 150px;
+    height: 150px;
+  }
+  .not-detail {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+    width: 100%;
+
+    .typeText {
+      text-align: center;
+      font-size: 14px;
+      color: #333333;
+      margin-top: 16px;
+    }
+    .descText {
+      text-align: center;
+      color: #999999;
+      font-size: 14px;
+      margin-top: 12px;
+    }
+    .el-button {
+      margin-top: 16px;
+    }
+  }
+}

package/src/JztErrorPage/index.vue

@@ -0,0 +1,35 @@
+<template>
+  <div class="error flx-center">
+    <page403 v-if="code == 403" :type="type" />
+    <page404 v-else-if="code == 404" />
+    <page500 v-else-if="code == 500" />
+  </div>
+</template>
+
+<script setup lang="ts" name="403">
+import { useRouter } from 'vue-router'
+import page403 from './403.vue'
+import page404 from './404.vue'
+import page500 from './500.vue'
+
+const router = useRouter()
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(
+  defineProps<{
+    code:  401 | 403 | 404 | 500
+    type?: string
+  }>(),
+  {
+    code: 404,
+    type: ''
+  }
+)
+</script>
+
+<style scoped lang="scss">
+.error {
+  width: 100%;
+  height: 100%;
+}
+</style>