@jzt-packages/components 1.0.0

package/src/JztTime/index.ts

@@ -0,0 +1,216 @@
+import dayjs from 'dayjs'
+import { DateType, DateTypeProps, IDateOptions, ToolTypeProps } from './interface/index'
+
+export const dateOptions: IDateOptions<DateTypeProps>[] = [
+  {
+    name: '年',
+    value: 'year',
+    type: 'yearrange',
+    disableInfo: {
+      unit: 'month',
+      maxValue: 4 * 12 //(5年) 需要-1
+      // accountUnit: 'year' // 以年为单位展示,
+    }
+  },
+  {
+    name: '季度',
+    value: 'quarter',
+    type: 'yearrange',
+    disableInfo: {
+      unit: 'month',
+      maxValue: 1 * 12 // (2年)  需要-1
+    }
+  },
+  {
+    name: '月',
+    value: 'month',
+    type: 'monthrange',
+    disableInfo: {
+      unit: 'month',
+      maxValue: 12
+    }
+  },
+  {
+    name: '日',
+    value: 'custom',
+    type: 'daterange',
+    disableInfo: {
+      unit: 'month',
+      maxValue: 2
+    }
+  }
+]
+export const monthShortcuts = [
+  {
+    text: '本月',
+    value: () => {
+      const start = dayjs().subtract(1, 'day').startOf('month')
+      const end = dayjs().subtract(1, 'day').endOf('day')
+      return [start.toDate(), end.toDate()]
+    }
+  },
+  {
+    text: '今年至今',
+    value: () => {
+      const start = dayjs().subtract(1, 'day').startOf('year')
+      const end = dayjs().subtract(1, 'day').endOf('day')
+      return [start.toDate(), end.toDate()]
+    }
+  },
+  {
+    text: '最近六个月',
+    value: () => {
+      const end = dayjs().subtract(1, 'day').endOf('day')
+      const start = dayjs().subtract(5, 'month').startOf('day')
+      return [start.toDate(), end.toDate()]
+    }
+  }
+]
+export const dayShortcuts = [
+  {
+    text: '最近一周',
+    value: () => {
+      const end = dayjs().subtract(1, 'day').endOf('day')
+      const start = dayjs().subtract(7, 'day').startOf('day')
+      return [start.toDate(), end.toDate()]
+    }
+  },
+  {
+    text: '最近一个月',
+    value: () => {
+      const end = dayjs().subtract(1, 'day').endOf('day')
+      const start = dayjs().subtract(1, 'month').startOf('day')
+      return [start.toDate(), end.toDate()]
+    }
+  },
+  {
+    text: '最近二个月',
+    value: () => {
+      const end = dayjs().subtract(1, 'day').endOf('day') // 昨天结束时间
+      const start = dayjs().subtract(2, 'month').startOf('day') // 两个月前开始
+      return [start.toDate(), end.toDate()]
+    }
+  }
+]
+// 返回对应日期配置
+export function getDateConfig(dateType) {
+  let format = 'YYYY-MM-DD' //时间格式
+  let type: DateType = 'month' // 时间类型
+  let isScopeType = true // 是否范围选择
+
+  if (['year', 'month', 'date'].includes(dateType)) {
+    isScopeType = false
+  }
+
+  if (['year', 'yearrange'].includes(dateType)) {
+    format = 'YYYY'
+    type = 'year'
+  } else if (['month', 'monthrange'].includes(dateType)) {
+    format = 'YYYY-MM'
+    type = 'month'
+  } else {
+    format = 'YYYY-MM-DD'
+    type = 'custom'
+  }
+  return { format, type, isScopeType }
+}
+
+// 返回对应的默认时间范围 -- 目前是只有默认月份
+export function getDefaultDateRange(type: DateType, isBefore = false) {
+  let dateRange = ['', '']
+  switch (type) {
+    case 'month':
+      let nowDay = ''
+      // if (isBefore) {
+      //   // 只能选择到昨天
+      //   nowDay = dayjs().subtract(1, 'day').format('YYYY-MM')
+      // } else {
+      nowDay = dayjs().format('YYYY-MM')
+      // }
+      // 默认12个月
+      dateRange = [dayjs(nowDay).subtract(11, 'month').format('YYYY-MM'), dayjs(nowDay).format('YYYY-MM')]
+      break
+    case 'year':
+    case 'custom':
+    case 'quarter':
+      dateRange = ['', '']
+      break
+    default:
+      break
+  }
+  return dateRange
+}
+
+// 工具展示
+export const showTool = (showToolType, key: ToolTypeProps) => {
+  return Array.isArray(showToolType) ? showToolType.includes(key) : showToolType
+}
+
+// 获取enum值
+export const getTypeEnum = (typeName: string, negationStr: string = '非') => {
+  return [
+    {
+      label: '全部',
+      value: ''
+    },
+    {
+      label: typeName,
+      value: 1
+    },
+    {
+      label: negationStr + `${typeName}`,
+      value: 0
+    }
+  ]
+}
+
+// 判断两个数组相等，不考虑顺序 比如需要[1,2]=[1,2]=[2,1]=true
+const isSameArray = (a?: number[], b?: number[]) => {
+  if (!a || !b) return false
+  if (a.length !== b.length) return false
+  const aa = [...a].sort()
+  const bb = [...b].sort()
+  return aa.every((v, i) => v === bb[i])
+}
+
+// 仓库级别
+const allWarehouseLevels = [
+  { label: '全部', value: 0 },
+  { label: '一级库', value: 1 },
+  { label: '二级库', value: 2 },
+  { label: '三级库', value: 3 }
+]
+export const getWarehouseLevelOptions = (warehouseLevels?: number[]) => {
+  if (isSameArray(warehouseLevels, [2, 3])) {
+    return {
+      options: [
+        { label: '全部', value: 5 },
+        { label: '二级库', value: 2 },
+        { label: '三级库', value: 3 }
+      ],
+      defaultValue: 5
+    }
+  } else if (isSameArray(warehouseLevels, [2])) {
+    return {
+      options: [
+        // { label: '全部', value: 2 },
+        { label: '二级库', value: 2 }
+      ],
+      defaultValue: 6
+    }
+  } else if (isSameArray(warehouseLevels, [1, 2])) {
+    return {
+      options: [
+        { label: '全部', value: 6 },
+        { label: '一级库', value: 1 },
+        { label: '二级库', value: 2 }
+      ],
+      defaultValue: 6
+    }
+  } else {
+    return {
+      options: allWarehouseLevels,
+      defaultValue: 0
+    }
+  }
+}

package/src/JztTime/index.vue

@@ -0,0 +1,303 @@
+<template>
+  <div class="jztTime" ref="jztTimContainerRef">
+    <slot name="topSlot"></slot>
+    <!-- <div class="jztTime-left flx-left-center"> -->
+    <AutoCollapseRow>
+      <slot name="leftSlot"></slot>
+      <DeptSelect
+        v-if="showTool(showToolType, 'show-warehouseLevel') || showTool(showToolType, 'show-dept')"
+        style="flex-shrink: 0"
+        ref="agencySelectRef"
+        :agency-id="selectFrom.agencyId"
+        v-bind="{
+          ...deptSelectProps,
+          width
+        }"
+        v-model:selectValue="selectFrom.deptId"
+        v-model:WarehouseLevel="selectFrom.WarehouseLevel"
+        :warehouseLevels="warehouseLevels"
+        :show-tool-type="showToolType"
+        @dept-change="deptChange"
+      />
+      <slot name="leftCenter"></slot>
+      <!-- 时间选择框 -->
+      <DateSelect
+        style="flex-shrink: 0"
+        v-if="showTool(showToolType, 'show-dateSelect') || showTool(showToolType, 'show-date')"
+        :default-time-date="timeData"
+        :default-time-type="selectFrom.timeMode"
+        @update:defaultTimeDate="emit('update:timeData', $event)"
+        :showTimeType="showTimeType"
+        v-bind="{
+          ...$attrs,
+          ...dateSelectProps,
+          width,
+          showToolType
+        }"
+        @dateSelectChange="dateSelectChange"
+      />
+      <slot name="rightCenter"></slot>
+      <!-- 集采/临采/计费选择框 -->
+      <TypeSelect
+        style="flex-shrink: 0"
+        v-if="
+          showTool(showToolType, 'show-isTempPurch') ||
+          showTool(showToolType, 'show-isCollect') ||
+          showTool(showToolType, 'show-isCharging')
+        "
+        :show-tool-type="showToolType"
+        :isCollect="selectFrom.isCollect"
+        :isTempPurch="selectFrom.isTempPurch"
+        @type-change="typeChange"
+      />
+      <slot name="rightSlot"></slot>
+    </AutoCollapseRow>
+    <!-- </div> -->
+    <slot name="bottomSlot"></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztTime">
+import { intersection } from 'lodash-es'
+import { ref, computed, onMounted } from 'vue'
+import { localGetAgencyId, isEmpty } from '@jzt-spd/utils'
+import DateSelect from './comm/dateSelect.vue'
+// import AgencySelect from './comm/agencySelect.vue'
+import DeptSelect from './comm/deptSelect.vue'
+import TypeSelect from './comm/typeSelect.vue'
+import { TimeTypeProps, ToolTypeProps, DateType } from './interface/index'
+import { showTool, getWarehouseLevelOptions, getDateConfig } from './index'
+import { AgencySelectProps } from './comm/agencySelect.vue'
+import { DateSelectProps } from './comm/dateSelect.vue'
+import AutoCollapseRow from './comm/collapseRow.vue'
+import { useRoute } from 'vue-router'
+import dayjs from 'dayjs'
+
+interface ProTableProps {
+  width?: string // 宽度
+  showToolType?: ToolTypeProps[] | boolean // 需要展示的工具类型
+  dateSelectProps?: DateSelectProps // 时间选择器参数
+  agencySelectProps?: AgencySelectProps // 机构选择框参数
+  deptSelectProps?: AgencySelectProps // 机构选择框参数
+  // 所选信息
+  timeData?: TimeTypeProps // 时间选择器数据
+  modelValue?: {
+    timeData?: TimeTypeProps // 时间选择器数据
+    agencyId?: string // 选择框默认值
+    deptId?: string // 科室选择框默认值
+    isCharging?: number | string // 计费类型
+    isCollect?: number | string //集采类型
+    isTempPurch?: number | string //临采类型
+    startTime?: string // 开始时间
+    endTime?: string // 结束时间
+    timeMode?: DateType //'year' | 'quarter' | 'month' | 'custom' | undefined // 结束时间
+    WarehouseLevel?: number
+  }
+  warehouseLevels?: number[] // 仓库等级
+  showTimeType?: DateType[] // 允许的日期类型
+}
+const sameChange0 = ['show-warehouseLevel', 'show-dept']
+const sameChange1 = ['show-dateSelect', 'show-date']
+const sameChange2 = ['show-isCharging', 'show-isTempPurch', 'show-isCollect']
+
+const lenCount = computed(() => {
+  const showToolType = props.showToolType
+  if (Array.isArray(showToolType)) {
+    let length = showToolType?.length || 0
+    const sameLen0 = intersection(sameChange0, showToolType).length || 0
+    if (sameLen0 > 1) {
+      length -= sameLen0 - 1
+    }
+    const sameLen1 = intersection(sameChange1, showToolType).length || 0
+    if (sameLen1 > 1) {
+      length -= sameLen1 - 1
+    }
+    const sameLen2 = intersection(sameChange2, showToolType).length || 0
+    if (sameLen2 > 1) {
+      length -= sameLen2 - 1
+    }
+    return length
+  } else {
+    return 0
+  }
+})
+// 默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  width: '297px',
+  showToolType: () => [
+    'show-date',
+    // 'show-agency',
+    'show-dateSelect',
+    'show-isCharging',
+    'show-isCollect',
+    'show-isTempPurch',
+    'show-dept'
+  ],
+  timeData: () => [],
+  modelValue: () => ({
+    // timeData: undefined,
+    agencyId: localGetAgencyId() || ''
+    // deptId: '',
+    // isCharging: '',
+    // isCollect: 0,
+    // isTempPurch: 0,
+    // startTime: '',
+    // endTime: ''
+  }),
+  agencySelectProps: () => ({
+    selectPla: '请选择机构',
+    selectDisabled: true,
+    selectParams: {},
+    dateSelectProps: () => ({})
+  }),
+  showTimeType: () => [] // 允许的日期类型
+})
+const emit = defineEmits([
+  'update:timeData',
+  'update:modelValue',
+  'update:selectValue',
+  'selectChange',
+  'dateSelectChange',
+  'agencySelectChange',
+  'typeChange',
+  'deptSelectChange'
+])
+
+// 仓库等级
+const WarehouseLevel = computed(() => {
+  if (!isEmpty(props.modelValue.WarehouseLevel)) {
+    return props.modelValue.WarehouseLevel
+  }
+  const { defaultValue } = getWarehouseLevelOptions(props.warehouseLevels)
+  return defaultValue
+})
+
+// 所选信息集
+const selectFrom = computed({
+  get() {
+    return {
+      ...props.modelValue,
+      WarehouseLevel: WarehouseLevel.value
+    }
+  },
+  set(val) {
+    // 确保时间数据正确传递
+    const timeData = val.timeData || []
+    emit('update:modelValue', {
+      ...val,
+      WarehouseLevel: WarehouseLevel.value,
+      timeData
+    })
+  }
+})
+
+// 日期选择框改变
+const dateSelectChange = val => {
+  if (val.timeMode && showTool(props.showToolType, 'show-dateSelect')) {
+    // 日的时候，接口叫：custom
+    // const timeMode = val.timeMode == 'custom' ? 'day' : val.timeMode
+    // const timeMode = val.timeMode == 'day' ? 'custom' : val.timeMode
+    selectFrom.value.timeMode = val.timeMode
+  } else {
+    delete selectFrom.value.timeMode
+  }
+  selectFrom.value.startTime = val.startTime
+  selectFrom.value.endTime = val.endTime
+  selectFrom.value.timeData = [val.startTime, val.endTime]
+  selectChange(val)
+}
+// const allDeptIds = ref('') //  全部部门id
+// 日期选择框改变
+const deptChange = val => {
+  // allDeptIds.value = val.deptIds || ''
+  selectChange(val)
+}
+
+// 集采/临采选择框改变
+const typeChange = typeVal => {
+  if (showTool(props.showToolType, 'show-isCharging')) {
+    selectFrom.value.isCharging = typeVal.isCharging
+  }
+  if (showTool(props.showToolType, 'show-isCollect')) {
+    selectFrom.value.isCollect = typeVal.isCollect
+  }
+  if (showTool(props.showToolType, 'show-isTempPurch')) {
+    selectFrom.value.isTempPurch = typeVal.isTempPurch
+  }
+  selectChange(typeVal)
+}
+const initCount = ref(0)
+const selectChange = val => {
+  initCount.value++
+
+  if (initCount.value >= lenCount.value) {
+    // const { timeData, ...form } = selectFrom.value
+    emit('selectChange', selectFrom.value)
+
+    // emit('selectChange', form, {
+    //   allDeptIds: allDeptIds.value
+    // })
+  }
+}
+const route = useRoute()
+interface RouteQuery {
+  startTime?: string
+  endTime?: string
+  timeMode?: DateType | 'custom'
+}
+import { formatDateRange } from '@jzt-spd/utils'
+onMounted(() => {
+  selectFrom.value.agencyId = props.modelValue?.agencyId || localGetAgencyId()
+  if (route.query) {
+    const { startTime, endTime, timeMode } = route.query as RouteQuery
+    if (startTime && endTime && timeMode) {
+      console.log(startTime && endTime && timeMode)
+
+      if (props.showTimeType.includes(timeMode)) {
+        emit('update:timeData', [startTime, endTime])
+        selectFrom.value.startTime = startTime ? startTime : selectFrom.value.startTime
+        selectFrom.value.endTime = endTime ? endTime : selectFrom.value.endTime
+        selectFrom.value.timeMode = timeMode
+      } else {
+        const defaultStart = startTime ? startTime : selectFrom.value.startTime
+        const defaultEnd = endTime ? endTime : selectFrom.value.endTime
+        // console.log(getDateConfig(timeMode))
+
+        const { format, type } = getDateConfig(timeMode)
+        //         const startTime1 =  dayjs(defaultStart).format(format)//defaultStart?.format(formatStr) || ''
+        //         const endTime1 = dayjs(defaultEnd).format(format)
+
+        emit('update:timeData', [startTime, endTime])
+        selectFrom.value.startTime = defaultStart
+        selectFrom.value.endTime = defaultEnd
+        selectFrom.value.timeMode = 'month'
+        console.log(defaultStart, defaultEnd)
+        // const type: DateType = timeDataConfig.value.type
+        const res = formatDateRange({
+          formatStr: format,
+          startTime: defaultStart,
+          endTime: defaultEnd,
+          type,
+          isCurrent: true
+        })
+        console.log(res)
+      }
+    }
+  }
+})
+</script>
+
+<style lang="scss" scoped>
+.jztTime {
+  display: flex;
+  flex-wrap: wrap;
+  // min-width: 1320px;
+  font-size: 14px;
+  border-radius: 8px;
+  color: #00000066;
+  border-radius: 8px;
+  padding-top: 8px;
+  // background: #f3f7fa;
+  padding-left: 0 !important; // 不能设置左边距
+}
+</style>

package/src/JztTime/interface/index.ts

@@ -0,0 +1,23 @@
+export type DateType = 'year' | 'month' | 'day' | 'quarter' | 'custom' | undefined
+export type DateTypeProps = 'year' | 'month' | 'date' | 'yearrange' | 'monthrange' | 'daterange'
+export type TimeTypeProps = number | string | Date | Array<any>
+export type ToolTypeProps =
+  | 'show-warehouseLevel'
+  | 'show-date'
+  | 'show-agency'
+  | 'show-dept'
+  | 'show-dateSelect'
+  | 'show-isCharging'
+  | 'show-isCollect'
+  | 'show-isTempPurch'
+import { UnitType } from '@jzt-spd/utils'
+export interface IDateOptions<T = any> {
+  name: string
+  value: string
+  type: T
+  disableInfo: {
+    // 禁用信息
+    unit: UnitType // 时间单位
+    maxValue: number // 最大值
+  }
+}

package/src/JztTreeFilter/index.scss

@@ -0,0 +1,44 @@
+.filter {
+  box-sizing: border-box;
+  width: 220px;
+  height: 100%;
+  padding: 18px;
+  margin-right: 10px;
+  .title {
+    margin: 0 0 15px;
+    font-size: 18px;
+    font-weight: bold;
+    color: var(--el-color-info-dark-2);
+    letter-spacing: 0.5px;
+  }
+  .search {
+    display: flex;
+    align-items: center;
+    margin: 0 0 15px;
+    .el-icon {
+      cursor: pointer;
+      transform: rotate(90deg) translateY(-8px);
+    }
+  }
+  .el-scrollbar {
+    :deep(.el-tree) {
+      height: 80%;
+      overflow: auto;
+      .el-tree-node__content {
+        height: 33px;
+      }
+    }
+    :deep(.el-tree--highlight-current) {
+      .el-tree-node.is-current > .el-tree-node__content {
+        background-color: var(--el-color-primary);
+        .el-tree-node__label,
+        .el-tree-node__expand-icon {
+          color: white;
+        }
+        .is-leaf {
+          color: transparent;
+        }
+      }
+    }
+  }
+}