@jzt-packages/components 1.0.0

package/src/JztPageCard/comm/export.vue

@@ -0,0 +1,24 @@
+<template>
+  <div class="flx-right-center item export">
+    <el-button @click="exportHandler">导出</el-button>
+    <!-- <el-icon :size="18" color="#409EFF"><Upload /></el-icon>
+    <el-button type="primary" link>导出</el-button> -->
+  </div>
+</template>
+
+<script setup lang="ts" name="JztPageCard_Export">
+/**
+ * @component 导出组件
+ */
+const emit = defineEmits(['export'])
+
+const exportHandler = () => {
+  emit('export')
+}
+</script>
+<style lang="scss" scoped>
+.export {
+  cursor: pointer;
+  margin: 0 4px 0 10px;
+}
+</style>

package/src/JztPageCard/comm/tabs.vue

@@ -0,0 +1,94 @@
+<template>
+  <div class="flx-left-center tabs" v-if="isShow && list.length && list.length > 0">
+    <div
+      v-for="(item, idx) in list"
+      class="tabs-box"
+      :key="`tabs-${idx}`"
+      :class="item[fieldNames.value] == activeValue ? 'is-active' : ''"
+      @click="handleTabClick(item)"
+      @keydown.enter="handleTabClick(item)"
+    >
+      <div class="label">{{ item[fieldNames.label] }}</div>
+    </div>
+    <!-- <el-radio-group v-model="activeValue">
+      <el-radio-button
+        v-for="(item, idx) in list"
+        :key="'radio' + idx"
+        :label="item[fieldNames.label]"
+        :value="item[fieldNames.value]"
+      />
+    </el-radio-group> -->
+  </div>
+</template>
+
+<script setup lang="ts" name="JztPageCard_Tabs">
+/**
+ * @component tab切换组件
+ */
+import { computed } from 'vue'
+interface ProTableProps {
+  isShow?: boolean
+  list?: any[]
+  names?: {
+    label: string // label字段名称
+    value: string // value字段名称
+  }
+  activeValue?: string | number // 选中项
+}
+const props = withDefaults(defineProps<ProTableProps>(), {
+  isShow: false,
+  list: () => [],
+  activeValue: ''
+})
+const emits = defineEmits(['update:activeValue', 'tabClick'])
+const activeValue = computed({
+  get() {
+    return props.activeValue
+  },
+  set(val) {
+    emits('update:activeValue', val)
+  }
+})
+const fieldNames = computed(() => {
+  return {
+    label: props.names?.label ?? 'label',
+    value: props.names?.value ?? 'value'
+  }
+})
+// 切换tab
+const handleTabClick = tab => {
+  activeValue.value = tab[fieldNames.value.value]
+  emits('tabClick', tab)
+}
+</script>
+<style lang="scss" scoped>
+.tabs {
+  height: 34px;
+  padding: 0 4px;
+  border-radius: 4px;
+  background: #fafafa;
+
+  :deep(.el-radio-button__inner) {
+    padding: 6px 8px;
+  }
+  &-box {
+    // height: 28px;
+    padding: 0 8px;
+    opacity: 1;
+    color: #00000066;
+    cursor: pointer;
+    .label {
+      line-height: 28px;
+      text-align: center;
+      font-size: 14px;
+      font-weight: 500;
+    }
+
+    &.is-active {
+      background: var(--el-color-primary);
+      color: #ffffff;
+      border-radius: 4px;
+    }
+  }
+}
+</style>

package/src/JztPageCard/comm/tooltip.vue

@@ -0,0 +1,31 @@
+<template>
+  <div class="flx-left-center" v-if="isShow">
+    <el-tooltip class="box-item" effect="dark" :content="iconText" :disabled="iconText == ''" :raw-content="true">
+      <el-icon class="title-icon" :size="15" :color="iconColor"><Warning /></el-icon>
+    </el-tooltip>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztPageCard_Tooltip">
+/**
+ * @component tip提示组件
+ */
+interface ProTableProps {
+  isShow?: boolean
+  iconText?: string // tip文案
+  iconColor?: string //标题图标颜色
+}
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  isShow: false,
+  iconText: '更多详情',
+  iconColor: '#666666'
+})
+</script>
+<style lang="scss" scoped>
+.title-icon {
+  font-weight: bold;
+  margin-left: 5px;
+  margin-top: 2px;
+}
+</style>

package/src/JztPageCard/index.vue

@@ -0,0 +1,287 @@
+<template>
+  <div
+    v-if="hasPerm"
+    v-loading="loading"
+    :class="[showHeader ? 'header_card' : 'content_card', 'card', cardClassName]"
+    :style="cardStyle"
+  >
+    <JztLabelTitle
+      :title="title"
+      v-if="showHeader"
+      :is-label="headerProps?.isLabel"
+      :fontSize="headerProps?.titleSize"
+      :className="'flx-between-center header_title'"
+    >
+      <template #icon>
+        <slot name="titleLeft"></slot>
+        <Tooltip
+          :isShow="showToolButton('show-icon')"
+          :icon-color="headerProps?.iconColor"
+          :icon-text="headerProps?.iconText"
+        />
+      </template>
+      <template #titleRight>
+        <div class="flx-right-center">
+          <slot name="titleRight-left"></slot>
+          <Details
+            v-show="showToolButton('show-details')"
+            :title="headerProps?.detailsText"
+            :is-radius="headerProps?.isRadius"
+            @goDetails="goDetails"
+          />
+          <DatePicker
+            :is-show="showToolButton('show-date-picker')"
+            :time-list="timeList"
+            :date-type="dateType"
+            :value-format="valueFormat"
+            v-model:time-info="timeData"
+            @changeTime="changeTime"
+          />
+          <Export v-if="showToolButton('show-export')" :timeData="timeData" @export="onExport" />
+          <Tabs
+            :is-show="showToolButton('show-tabs')"
+            v-model:active-value="activeValue"
+            :list="tabsList"
+            :names="tabNames"
+            @tabClick="tabClick"
+          />
+          <slot name="titleRight-right"></slot>
+        </div>
+      </template>
+    </JztLabelTitle>
+
+    <div
+      :class="[contentClassName, 'card_content', isCardContent ? 'spd-content-card' : 'content-card1']"
+      :style="contentStyle"
+    >
+      <slot></slot>
+    </div>
+  </div>
+  <div v-else class="error_card card" :style="cardStyle">
+    <JztErrorPage :code="403" />
+  </div>
+</template>
+
+<script setup lang="ts" name="JztPageCard">
+// import { hasPermission } from '../hooks/useAuthButtons'
+import { hasPermission } from '@jzt-spd/utils'
+import JztLabelTitle from '../JztLabelTitle/index.vue'
+import Details from './comm/details.vue'
+import DatePicker from './comm/datePicker.vue'
+import Export from './comm/export.vue'
+import Tooltip from './comm/tooltip.vue'
+import Tabs from './comm/tabs.vue'
+import JztErrorPage from '../JztErrorPage/index.vue'
+import { ref, CSSProperties, onBeforeMount, computed } from 'vue'
+/**
+ *show-icon 显示标题图标
+ *show-tabs  显示tabs
+ *show-details 显示【更多详情】
+ *show-export 显示导出按钮
+ *show-date-picker 显示日期选择器
+ */
+export type ToolTypeProps = 'show-tabs' | 'show-export' | 'show-icon' | 'show-details' | 'show-date-picker'
+
+interface ProTableProps {
+  title?: string //卡片标题
+  loading?: boolean // 是否加载
+  // iconColor?: string //标题图标颜色
+  // iconText?: string //标题图标内容
+  showHeader?: boolean // 是否显示表头
+  cardStyle?: CSSProperties // 卡片整体样式
+  cardClassName?: string // 卡片样式类名
+  contentClassName?: string // 卡片内容样式类名
+  contentStyle?: CSSProperties // 卡片内容样式
+  // detailsText?: string //  详情文字
+  // showDatePicker?: boolean // 是否显示时间选择器
+  timeList?: string | string[] // 时间选择器初始时间
+  dateType?: 'year' | 'monthRange' // 时间选择器类型
+  tabsList?: any[] // tabs 数据
+  tabNames?: {
+    label: string // label字段名称
+    value: string // value字段名称
+  }
+  tabActiveValue?: string | number // tabs 默认选中项
+  toolButton?: ToolTypeProps[] | boolean // 工具按钮
+  requestApi?: any // 接口请求函数（用于判断权限，无权限不请求数据）
+  hasPerm?: string //权限字符串 为空则无需判断权限
+  valueFormat?: string //时间需要返回的格式
+  isCardContent?: boolean
+  headerProps?: {
+    iconText?: string //标题图标内容
+    iconColor?: '#666666' //标题图标颜色
+    detailsText?: string // 详情文字
+    isRadius?: boolean // 是否圆角类型
+    isLabel?: boolean // JztLabelTitle 是否需要label
+    titleSize?: string // 详情文字大小
+    // value: string // value字段名称
+  }
+}
+const props = withDefaults(defineProps<ProTableProps>(), {
+  title: '',
+  // iconText: '',
+  // detailsText: '查看更多',
+  timeList: '',
+  showHeader: true,
+  className: '',
+  // iconColor: '#666666',
+  cardStyle: () => ({}),
+  contentStyle: () => ({}),
+  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  loading: false,
+  isCardContent: true,
+  tabNames: () => ({
+    label: 'label', // label字段名称
+    value: 'value' // value字段名称
+  })
+})
+const headerProps = computed(() => {
+  return {
+    iconText: props.headerProps?.iconText || '',
+    iconColor: props.headerProps?.iconColor || '#666666',
+    detailsText: props.headerProps?.detailsText || '查看更多',
+    isRadius: props.headerProps?.isRadius ?? true,
+    isLabel: props.headerProps?.isLabel ?? true,
+    titleSize: props.headerProps?.titleSize ?? '16px'
+  }
+})
+const emit = defineEmits(['changeTime', 'export', 'goDetails', 'tabClick', 'update:tabActiveValue'])
+// 最终的时间数据
+const timeData = ref(['', ''])
+// tab 选中值
+const activeValue = computed({
+  get() {
+    return props.tabActiveValue
+  },
+  set(val) {
+    emit('update:tabActiveValue', val)
+  }
+})
+
+// 控制 ToolButton 显示
+const showToolButton = (key: ToolTypeProps) => {
+  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton
+}
+// 更多详情
+const goDetails = () => {
+  emit('goDetails')
+}
+// 导出
+const onExport = () => {
+  emit('export')
+}
+// 时间选择变动
+const changeTime = timeInfo => {
+  emit('changeTime', timeInfo)
+}
+// tabs切换
+const tabClick = val => {
+  emit('tabClick', val, activeValue.value)
+}
+//。当前模块是否有权限访问
+const hasPerm = ref(false)
+
+// 获取当前模块数据根据权限控制
+const getChatDataByAuth = () => {
+  if (hasPerm.value) {
+    props.requestApi && props.requestApi()
+  } else {
+    console.log('暂无访问权限----->')
+  }
+}
+// 获取当前模块的模块权限
+const getPagePermission = () => {
+  if (props.hasPerm) {
+    hasPerm.value = hasPermission(props.hasPerm)
+  } else {
+    hasPerm.value = true
+  }
+  // console.log('访问权限:', hasPerm.value)
+}
+onBeforeMount(() => {
+  getPagePermission()
+  function fun() {
+    var count = 1
+    function fun2() {
+      //条件1：函数嵌套
+      //形成条件2：内部函数引用外部函数
+      // console.log(77777, count)
+    }
+  }
+  fun()
+})
+
+defineExpose({
+  getChatDataByAuth
+})
+</script>
+<style lang="scss" scoped>
+.header_title {
+  height: 45px;
+  // ::deep(.group-header) {
+  padding-bottom: 0px;
+  // }
+}
+.header_card {
+  background-color: #f3f7fa;
+  overflow: hidden;
+
+  & > .card_content {
+    margin: 12px;
+    height: 100%;
+    flex: 1;
+    height: calc(100% - 66px);
+    box-sizing: border-box;
+    border-radius: 6px;
+  }
+  :deep(.label-tittle) {
+    margin-bottom: 0;
+    width: auto;
+    .labelLine {
+      height: 24px;
+      border-radius: 0;
+    }
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    border-bottom: 1px solid #e4e7ed;
+    box-sizing: border-box;
+    padding: 0px 16px;
+    height: 50px;
+    line-height: 50px;
+  }
+}
+.content_card {
+  height: 100%;
+  & > .card_content {
+    // padding: 12px;
+    height: 100%;
+    box-sizing: border-box;
+    border-radius: 6px;
+  }
+}
+.error_card {
+  height: 100%;
+  background-color: #fff;
+}
+.card {
+  height: 100%;
+  overflow: hidden;
+  border-radius: 8px;
+  // margin-top: 8px;
+  border: 1px solid #fff;
+  // background-color: #fff;
+  // padding: 10px;
+}
+
+.spd-content-card {
+  box-sizing: border-box;
+  padding: 12px;
+  // overflow: hidden;
+  background-color: var(--el-bg-color) !important;
+  border-radius: 8px;
+  // box-shadow: 0 0 12px rgb(0 0 0 / 5%);
+  border: none;
+}
+</style>

package/src/JztPagination/index.vue

@@ -0,0 +1,70 @@
+<template>
+  <!-- 分页组件 -->
+  <el-pagination
+    :background="true"
+    :current-page="pageQuery.pageIndex"
+    :page-size="pageQuery.pageSize"
+    :page-sizes="[10, 25, 50, 100]"
+    :total="pageQuery.total"
+    layout="total, prev, pager, next,sizes, jumper"
+    @size-change="handleSizeChange"
+    @current-change="handleCurrentChange"
+  ></el-pagination>
+</template>
+
+<script setup lang="ts" name="JztPagination">
+import { computed } from 'vue'
+import { PageableProps } from '../JztQueryTable/interface/index'
+export interface ProTableProps {
+  pageable?: PageableProps // 分页数据
+}
+const props = withDefaults(defineProps<ProTableProps>(), {
+  pageable: () => {
+    return {
+      pageIndex: 1, // 当前页
+      pageSize: 10, // 每页显示条数
+      total: 0 // 总条数
+    }
+  }
+})
+
+const pageQuery = computed({
+  get() {
+    return props.pageable
+  },
+  set(val) {
+    emit('update:pageable', val)
+  }
+})
+
+const emit = defineEmits(['update:pageable', 'changePageable'])
+/**
+ * @description 每页条数改变
+ * @param {Number} val 当前条数
+ * @return void
+ * */
+const handleSizeChange = (val: number) => {
+  const pagination = {
+    pageIndex: 1,
+    pageSize: val,
+    total: props.pageable.total
+  }
+  emit('update:pageable', pagination)
+  emit('changePageable', pagination)
+}
+
+/**
+ * @description 当前页改变
+ * @param {Number} val 当前页
+ * @return void
+ * */
+const handleCurrentChange = (val: number) => {
+  const pagination = {
+    pageIndex: val,
+    pageSize: props.pageable.pageSize,
+    total: props.pageable.total
+  }
+  emit('update:pageable', pagination)
+  emit('changePageable', pagination)
+}
+</script>