@jzt-packages/components 1.0.0

package/src/JztCharts/index.vue

@@ -0,0 +1,317 @@
+<template>
+  <div class="Jzt-charts" v-bind="$attrs">
+    <div :style="{ height, width }" :id="id" ref="eChartRef" />
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztCharts">
+import * as echarts from 'echarts' // 引入echarts
+import { useResizeObserver } from '@vueuse/core'
+import { debounce } from 'lodash-es'
+import { onMounted, onBeforeUnmount, onActivated, nextTick, watch, ref, markRaw, computed, reactive } from 'vue'
+import { notData } from '@jzt-spd/styles/assets'
+const props = defineProps({
+  options: {
+    type: Object,
+    default: () => ({})
+  },
+  id: {
+    type: String,
+    default: () => Math.random().toString(36).substring(2, 8)
+  },
+  theme: {
+    type: String,
+    default: ''
+  },
+  // 是否显示空数据
+  isEmpty: {
+    type: [Boolean, Function],
+    default: false
+  },
+  description: {
+    type: String,
+    default: '无数据'
+  },
+  className: {
+    type: String,
+    default: 'Jzt-charts-container'
+  },
+  width: {
+    type: String,
+    default: '100%'
+  },
+  height: {
+    type: String,
+    default: '100%'
+  },
+  loading: {
+    type: Boolean,
+    default: true
+  },
+  // 是否获取zr实例
+  isGetZr: {
+    type: Boolean,
+    default: false
+  },
+  // 是否是横向柱状图
+  isCrossBar: {
+    type: Boolean,
+    default: false
+  }
+})
+// 空数据图配置
+const emptyImgWidth = ref(150)
+const emptyImgSize = ref(16)
+const emptyData = ref({
+  graphic: {
+    elements: [
+      {
+        type: 'group',
+        left: 'center',
+        top: 'center',
+        children: [
+          {
+            type: 'image',
+            left: -emptyImgWidth.value / 2,
+            top: -emptyImgWidth.value / 2,
+            style: {
+              image: notData,
+              width: emptyImgWidth.value,
+              height: emptyImgWidth.value
+            }
+          },
+          {
+            type: 'text',
+            left: -(emptyImgSize.value * (props.description.length / 2)), // 与图片同一中心点
+            top: emptyImgWidth.value / 2 + 24, // 与图片同一中心点
+            style: {
+              text: props.description,
+              fontSize: emptyImgSize.value,
+              fill: '#333333'
+            },
+            transform: 'translate(-50%, -50%)'
+          }
+        ]
+      }
+    ]
+  },
+  xAxis: { show: false },
+  yAxis: { show: false },
+  series: [],
+  tooltip: { show: false },
+  legend: { show: false },
+  grid: { top: 0, bottom: 0, left: 0, right: 0 }
+})
+const eChartRef = ref<HTMLDivElement>()
+const myChart = ref()
+const emits = defineEmits()
+
+// 图表初始化
+const renderChart = () => {
+  myChart.value = markRaw(echarts.init(eChartRef.value, props.theme))
+
+  setOption(props.options)
+
+  // 返回chart实例
+  emits('chart', myChart.value)
+
+  // 事件监听  图形点击
+  onClick()
+  // 空白/区域点击
+  if (props.isGetZr) {
+    onGetZr()
+  }
+
+  // 监听元素变化
+  useResizeObserver(eChartRef.value, resizeChart)
+  // 如果不想用vueuse，可以使用下边的方法代替，但组件使用v-show时，不会触发resize事件
+  // window.addEventListener('resize', resizeChart)
+}
+// 事件监听
+const onClick = () => {
+  myChart.value.on(
+    'click',
+    debounce(function (params: any) {
+      console.log(props.options)
+      if (props.options?.type === 'pie' || props.options?.series[0]?.type === 'pie') {
+        clickSeriesSelect(params)
+        emits('pieSelect', {
+          activeIndex: activeIndex,
+          params: params
+        })
+      }
+      if (params.seriesId) {
+        emits('onClick', params)
+      }
+    }),
+    500,
+    true
+  )
+}
+let activeIndex = null
+const onGetZr = () => {
+  // myChart.value.getZr().off('click') //防止触发两次点击事件
+  myChart.value.getZr().on(
+    'click',
+    debounce(function (params: any) {
+      const point = [params.offsetX, params.offsetY]
+      if (props.options?.type === 'pie' || props.options?.series[0]?.type === 'pie') {
+        // 饼图单选
+        if (!myChart.value.containPixel('series', point) && activeIndex !== null) {
+          // 点击空白触发
+          pieSelectHandle('pieUnSelect', 0, activeIndex)
+          activeIndex = null
+          emits('pieSelect', {
+            activeIndex: activeIndex,
+            params: params
+          })
+        }
+      } else if (
+        ['bar', 'line'].includes(props.options?.type) ||
+        ['bar', 'line'].includes(props.options?.series[0]?.type)
+      ) {
+        // 柱状
+        if (myChart.value.containPixel('grid', point)) {
+          // 正常柱状图坐标
+          let xIndex = Math.abs(myChart.value.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[0])
+          // 横向柱状图坐标
+          let yIndex = Math.abs(myChart.value.convertFromPixel({ seriesIndex: 0 }, [params.offsetX, params.offsetY])[1])
+          emits('onClickCol', props.isCrossBar ? yIndex : xIndex)
+        }
+      }
+    }),
+    500,
+    { leading: true, trailing: false }
+  )
+}
+// 饼图单选
+const clickSeriesSelect = params => {
+  if (params.componentType !== 'series') return
+  const { dataIndex, seriesIndex } = params
+  //  再点当前 → 取消
+  if (activeIndex === dataIndex) {
+    pieSelectHandle('unSelect', seriesIndex, dataIndex)
+    activeIndex = null
+    return
+  }
+  // 取消上一个
+  if (activeIndex !== null) {
+    pieSelectHandle('unSelect', seriesIndex, activeIndex)
+  }
+  // 选中当前
+  pieSelectHandle('pieSelect', seriesIndex, dataIndex)
+  activeIndex = dataIndex
+}
+const pieSelectHandle = (type: 'pieSelect' | 'unSelect' | 'pieUnSelect', seriesIndex, dataIndex) => {
+  const chart = myChart.value
+  chart.dispatchAction({
+    type: type,
+    seriesIndex: seriesIndex,
+    dataIndex: dataIndex
+  })
+}
+
+// 重绘图表函数
+const resizeChart = debounce(() => {
+  myChart.value?.resize()
+}, 300)
+
+// 设置图表函数
+const setOption = debounce(async data => {
+  if (!myChart.value) return
+  myChart.value.setOption(formatEmpty.value ? emptyData.value : data, true, true)
+  await nextTick()
+  resizeChart()
+}, 300)
+const setLoading = (isLOading: boolean) => {
+  if (isLOading) {
+    myChart.value.showLoading({
+      text: '加载中...', //提示文字
+      showSpinner: true,
+      fontSize: 14,
+      color: '#409eff',
+      textColor: '#409eff',
+      zlevel: 5,
+      // 旋转动画（spinner）的半径。
+      spinnerRadius: 8,
+      // 旋转动画（spinner）的线宽。
+      lineWidth: 3
+    })
+  } else {
+    myChart.value.hideLoading()
+  }
+}
+// 为空时
+const formatEmpty = computed(() => {
+  if (typeof props.isEmpty === 'function') {
+    return props.isEmpty(props.options)
+  }
+  return props.isEmpty
+})
+
+watch(
+  () => props.options,
+  async nw => {
+    await nextTick()
+    setOption(nw)
+  },
+  { deep: true }
+)
+
+watch(
+  () => props.theme,
+  async () => {
+    await nextTick()
+    myChart.value.dispose()
+    renderChart()
+  }
+)
+
+const refreshChart = () => {
+  myChart.value.clear()
+  myChart.value.setOption(props.options)
+}
+onMounted(() => {
+  nextTick(() => {
+    renderChart()
+  })
+})
+onBeforeUnmount(() => {
+  // 取消监听
+  // window.removeEventListener('resize', resizeChart)
+  // 销毁echarts实例
+  myChart.value.dispose()
+  myChart.value = null
+})
+onActivated(() => {
+  // 激活时重新渲染图表
+  myChart.value?.resize()
+})
+defineExpose({
+  refreshChart,
+  setLoading,
+  myChart
+})
+</script>
+
+<style lang="scss" scoped>
+.Jzt-charts {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+
+  &-container {
+    width: 100%;
+    height: 100%;
+  }
+}
+:deep(.empty) {
+  width: 100%;
+  height: 100%;
+}
+.isShow {
+  display: none;
+}
+</style>

package/src/JztClassTabs/index.vue

@@ -0,0 +1,156 @@
+<template>
+  <div class="tabs ml8 mt8">
+    <span
+      v-for="option in typeOptions"
+      :key="option.productClassId"
+      @click="handleTypeChange(option)"
+      :class="[
+        'btn flx-center px-4 py-1 text-sm font-medium rounded-md transition-all duration-200',
+        tabsType === option?.productClassId ? 'btn-active' : 'btn-hover'
+      ]"
+    >
+      {{ option?.productClassName || '' }}
+    </span>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztTime">
+import { ref, onMounted, computed } from 'vue'
+import { isEmpty } from '@jzt-spd/utils'
+import { getProductClassByUser } from '@jzt-spd/utils/commonApi'
+import { ProductCodeKeys } from '@jzt-spd/utils/consts'
+
+interface ClassType {
+  productClassId: string
+  productClassName: string
+}
+interface PropsType {
+  hasAll?: boolean // 是否包含全部选项
+  classList?: ClassType[] // 固定大类类型集合
+  authList?: ProductCodeKeys[] // 固定大类中,根据权限判断
+  productClassId?: string // 大类Id
+  productClassCode?: string //大类Code  'G' | 'D' | 'J' | 'M' | 'K' | 'H' | 'Y'
+  isInit?: boolean // 是否初始化调用一次
+}
+const props = withDefaults(defineProps<PropsType>(), {
+  hasAll: true,
+  productClassId: '',
+  authList: () => [],
+  classList: () => [],
+  isInit: true
+})
+const emit = defineEmits(['onChange', 'onPermission', 'update:productClassId'])
+// 全部选项
+const all = [
+  {
+    productClassId: '',
+    productClassName: '全院',
+    isAll: true
+  }
+]
+// 全部选项包含的id集合
+const allClassIds = ref<string[]>([])
+const tabsType = computed({
+  get() {
+    return props.productClassId
+  },
+  set(val) {
+    emit('update:productClassId', val)
+  }
+})
+
+// 选项
+const typeOptions = ref<ClassType[]>(all)
+
+const getClassType = async () => {
+  try {
+    const res = await getProductClassByUser()
+    if (!isEmpty(res.result)) {
+      let result = res.result || []
+      // 过滤指定的大类
+      if (!isEmpty(props.authList) && Array.isArray(props.authList)) {
+        result = result.filter(item => props.authList?.includes(item.productClassCode))
+      }
+      // 把全部的id 赋值：全部选项
+      allClassIds.value = result.map((item: any) => item.productClassId) // 过滤后的大类ID集合
+      const authLen = result.length //  过滤后大类长度
+      if (authLen == 0) {
+        typeOptions.value = []
+      } else if (authLen == 1) {
+        typeOptions.value = [...result]
+        tabsType.value = result[0]?.productClassId
+      } else {
+        initSetValue(result)
+      }
+      // 是否有权限
+      emit('onPermission', authLen != 0)
+      props.isInit && handleTypeChange(typeOptions.value[0])
+    }
+  } catch (error) {
+    allClassIds.value = []
+    emit('onPermission', true)
+    handleTypeChange({})
+  }
+}
+const handleTypeChange = (option: any) => {
+  tabsType.value = option?.productClassId
+  // if (option?.isAll) {
+  //   emit('onChange', {
+  //     ...option,
+  //     productClassId: allClassIds.value
+  //   })
+  // } else {
+  emit('onChange', {
+    ...option,
+    productClassIdList: allClassIds.value
+  })
+  // }
+}
+// 初始化赋值
+const initSetValue = classList => {
+  typeOptions.value = props.hasAll ? [...all, ...classList] : [...classList]
+  if (!props.hasAll && isEmpty(props.productClassId)) {
+    tabsType.value = classList?.[0]?.productClassId
+  }
+}
+onMounted(() => {
+  if (!isEmpty(props.classList)) {
+    initSetValue(props.classList)
+  } else {
+    getClassType()
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.tabs {
+  background-color: #ffffff;
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  padding: 4px;
+  border-radius: 4px;
+  cursor: pointer;
+  display: inline-block;
+}
+.btn {
+  display: inline-block;
+  height: 26px;
+  line-height: 25px;
+  text-align: center;
+  padding: 0 16px;
+  color: #00000099;
+  border-radius: 4px;
+  margin-right: 8px;
+  transition: all 0.2s ease;
+}
+.btn:last-child {
+  margin-right: 0;
+}
+.btn-active {
+  background: #3475fa;
+  color: #ffffff;
+}
+.btn-hover:hover {
+  background: #e5e7eb;
+  color: #111827;
+}
+</style>

package/src/JztDateSelect/dateSelect.vue

@@ -0,0 +1,186 @@
+<template>
+  <div class="flx-left-center">
+    <el-date-picker
+      v-bind="$attrs"
+      v-model="timeDate"
+      :type="pickerType"
+      suffix-icon="Calendar"
+      :style="{ flex: 1.5, 'min-width': '80px', 'flex-shrink': 0 }"
+      :value-format="timeDataConfig"
+      :format="timeDataConfig"
+      :disabled-date="disableFutureDate"
+      range-separator="至"
+      :clearable="clearable"
+      :editable="false"
+      @change="changeTime"
+      @calendar-change="handleCalendarChange"
+    />
+    <el-select
+      v-if="timeType == 'halfYear'"
+      v-model="halfYear"
+      :placeholder="''"
+      :style="{ flex: 1, 'flex-shrink': 0, marginLeft: '4px' }"
+      @change="changeDateType"
+    >
+      <el-option v-for="item in allHalfYear" :key="'half' + item.value" :label="item.label" :value="item.value" />
+    </el-select>
+    <el-select
+      v-if="timeType == 'quarter'"
+      v-model="quarterType"
+      :placeholder="''"
+      :style="{ flex: 1, 'flex-shrink': 0, marginLeft: '4px' }"
+      @change="changeDateType"
+    >
+      <el-option v-for="item in allQuarters" :key="'quarter' + item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztDateSelect">
+/**
+ * @component 类型日期选择组件
+ */
+import { computed, onMounted, ref, watch } from 'vue'
+import { dateOptions, allQuarters, allHalfYear, getChangeDateType, getDataRangeByType } from './index'
+import { DateTypeProps, DateType } from './interface/index'
+import { QueryItemsProps, SearchProps } from '../JztSearchForm/interface/index'
+import dayjs from 'dayjs'
+export interface DateSelectProps {
+  timeMode?: string // 日期模式
+  disabledDate?: Function //日期禁止函数
+  clearable?: boolean // 是否可清空
+  disabled?: boolean // 是否禁用
+  searchProp?: SearchProps
+  queryItem: QueryItemsProps<Record<string, any>>
+  searchParam: Record<string, any>
+}
+// 默认值
+const props = withDefaults(defineProps<DateSelectProps>(), {
+  timeMode: 'timeMode',
+  clearable: false,
+  searchParam: () => ({}),
+  disabled: false
+})
+const timeDate = ref(props.searchProp?.defaultValue || '')
+const startField = ref(props.searchProp?.startField)
+const endField = ref(props.searchProp?.endField)
+const getCurrentQuarterType = (): 1 | 2 | 3 | 4 => (Math.floor(dayjs().month() / 3) + 1) as 1 | 2 | 3 | 4
+const getCurrentHalfYearType = (): 1 | 2 => (dayjs().month() < 6 ? 1 : 2)
+const quarterType = ref<1 | 2 | 3 | 4>(getCurrentQuarterType())
+const halfYear = ref<1 | 2>(getCurrentHalfYearType())
+
+// 日期类型
+const timeType = ref<DateType>('month')
+// 日期选择器类型
+const pickerType = ref<DateTypeProps>('month')
+
+// 日期类型选中项信息
+const typeSelectedItem = computed(() => {
+  return dateOptions.filter(item => item.value == timeType.value)[0]
+})
+
+// 日期选择器配置信息
+const timeDataConfig = computed(() => {
+  // return getDateConfig(pickerType.value)
+  const dateType = pickerType.value
+  if (dateType === 'year') {
+    return 'YYYY'
+  } else if (['month'].includes(dateType)) {
+    return 'YYYY-MM'
+  } else {
+    return 'YYYY-MM-DD'
+  }
+})
+
+const syncCurrentPeriodType = (type: DateType) => {
+  if (type === 'quarter') {
+    quarterType.value = getCurrentQuarterType()
+  } else if (type === 'halfYear') {
+    halfYear.value = getCurrentHalfYearType()
+  }
+}
+// 日期类型选择框改变
+const dateSelectChangeType = (val: DateType) => {
+  timeType.value = val
+  pickerType.value = typeSelectedItem.value?.type as DateTypeProps
+  syncCurrentPeriodType(val)
+  const newDefault = getChangeDateType(val)
+  timeDate.value = newDefault as string
+  changeDateType()
+}
+// 日期选择框改变
+const changeTime = val => {
+  timeDate.value = val
+  changeDateType()
+}
+// 季度 // 半年
+const changeDateType = () => {
+  const timeDefault = timeDate.value || getChangeDateType(timeType.value)
+  // console.log(timeDefault)
+  const str = getDataRangeByType({
+    timeMode: timeType.value,
+    typeNum: timeType.value === 'halfYear' ? halfYear.value : quarterType.value,
+    value: timeDefault
+  })
+  const { startTime, endTime, timeValue } = str
+  timeDate.value = timeValue
+  if (startField.value) {
+    props.searchParam[startField.value] = startTime
+  }
+  if (endField.value) {
+    props.searchParam[endField.value] = endTime
+  }
+}
+
+// 日期禁用函数
+const rangeStartDate = ref<Date | null>(null)
+
+const disableFutureDate = (time: Date) => {
+  // daterange 模式下限制最多选两年
+  if (pickerType.value === 'daterange' && rangeStartDate.value) {
+    const minDate = dayjs(rangeStartDate.value).subtract(2, 'year').add(1, 'day')
+    const maxDate = dayjs(rangeStartDate.value).add(2, 'year').subtract(1, 'day')
+    if (dayjs(time).isBefore(minDate) || dayjs(time).isAfter(maxDate)) {
+      return true
+    }
+  }
+  // 自定义函数
+  if (props.disabledDate) {
+    return props.disabledDate(time)
+  }
+  return false
+}
+
+// daterange 选中第一个日期时记录，选完第二个后清除
+const handleCalendarChange = (val: [Date, Date] | null) => {
+  if (pickerType.value !== 'daterange') return
+  if (val && val[0] && !val[1]) {
+    rangeStartDate.value = val[0]
+  } else {
+    rangeStartDate.value = null
+  }
+}
+
+// 监听 timeMode 变化
+watch(
+  () => props.searchParam?.[props.timeMode],
+  val => {
+    if (val) {
+      dateSelectChangeType(val)
+    }
+  },
+  {
+    immediate: true
+  }
+)
+watch(
+  () => props.searchParam?.[props.queryItem.prop] || halfYear.value || quarterType.value,
+  val => {
+    if (val && val.length) {
+      timeDate.value = val
+      changeDateType()
+    }
+  },
+  { deep: true, immediate: true }
+)
+</script>

package/src/JztDateSelect/dateType.vue

@@ -0,0 +1,54 @@
+<template>
+  <div class="flx-left-center">
+    <el-select
+      class="select"
+      v-model="searchParam[queryItem.prop]"
+      :placeholder="''"
+      :clearable="false"
+      :disabled="disabled"
+      @change="dateSelectChangeType"
+    >
+      <el-option v-for="item in getDateOptions" :key="item.name" :label="item.name" :value="item.value" />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztDateType">
+/**
+ * @component 类型日期选择组件
+ */
+import { computed } from 'vue'
+import { dateOptions } from './index'
+import { DateType } from './interface/index'
+import { QueryItemsProps } from '../JztSearchForm/interface/index'
+
+export interface DateSelectProps {
+  clearable?: boolean // 是否可清空
+  disabled?: boolean // 是否禁用
+  showTimeType?: DateType[] //  允许的日期类型 
+  queryItem: QueryItemsProps<Record<string, any>> // 配置项
+  searchParam: Record<string, any> // 表单参数
+}
+// 默认值
+const props = withDefaults(defineProps<DateSelectProps>(), {
+  clearable: false, // 是否可清空  放在search.props 中
+  showTimeType: () => [], // 允许的日期类型 放在search.props 中
+  searchParam: () => ({}),// 查询表单
+  disabled: false // 是否禁用  放在search.props 中
+})
+
+// 日期类型选中项信息
+const getDateOptions = computed(() => {
+  if (props.showTimeType && props.showTimeType.length) {
+    return dateOptions.filter(item => props.showTimeType.includes(item.value))
+  } else {
+    return dateOptions
+  }
+})
+// 日期类型选择框改变
+const dateSelectChangeType = (val: DateType) => {
+  props.searchParam[props.queryItem.prop] = val
+}
+</script>
+
+<style lang="scss" scoped></style>