@jzt-packages/components 1.0.0

package/src/JztTime/comm/dateSelect.vue

@@ -0,0 +1,292 @@
+<template>
+  <div :class="timeTypeConfig.className" class="mb8 ml8 mr4">
+    <div v-if="timeTypeConfig.isShow && timeDataConfig.isScopeType" class="type flx-left-center">
+      <el-select
+        class="select"
+        v-model="timeType"
+        :placeholder="''"
+        :style="{ width: '60px' }"
+        @change="dateSelectChangeHandle"
+        @focus="setActive(true)"
+        @blur="setActive(false)"
+      >
+        <el-option v-for="item in getDateOptions" :key="item.name" :label="item.name" :value="item.value" />
+      </el-select>
+      <div class="separator"></div>
+    </div>
+    <el-date-picker
+      v-bind="$attrs"
+      v-model="timeData"
+      :unlink-panels="timeTypeConfig.isShow ? false : true"
+      :type="pickerType"
+      suffix-icon="Calendar"
+      :style="timeTypeConfig.style"
+      :value-format="timeDataConfig.format"
+      :format="timeDataConfig.format"
+      :disabled-date="disableFutureDate"
+      range-separator="至"
+      :shortcuts="timeTypeConfig.shortcuts"
+      :clearable="clearable"
+      :editable="false"
+      @change="changeTime"
+      @focus="setActive(true)"
+      @blur="setActive(false)"
+      @calendar-change="calendarChange"
+      @visible-change="visibleChange"
+    />
+  </div>
+</template>
+
+<script setup lang="ts" name="JztTime">
+/**
+ * @component 类型日期选择组件
+ */
+import { computed, onMounted, ref, watch } from 'vue'
+import { isEmpty, formatDateRange } from '@jzt-spd/utils'
+import { dateOptions, monthShortcuts, dayShortcuts, getDateConfig, getDefaultDateRange, showTool } from '../index'
+import { DateTypeProps, DateType, TimeTypeProps, ToolTypeProps } from '../interface/index'
+import dayjs from 'dayjs'
+export interface DateSelectProps {
+  showToolType?: ToolTypeProps[] | boolean // 需要展示的工具类型
+  width?: string // 宽度
+  defaultTimeType?: DateType // 默认日期类型
+  defaultTimeDate?: TimeTypeProps // 默认日期
+  valueFormat?: string // 日期格式
+  disabledDate?: Function //日期禁止函数
+  isCurrent?: boolean // 是否取到当前日期
+  clearable?: boolean // 是否可清空
+  dateType?: DateTypeProps // 日期选择器类型
+  showTimeType?: DateType[]
+}
+// 默认值
+const props = withDefaults(defineProps<DateSelectProps>(), {
+  defaultTimeType: 'month',
+  valueFormat: 'YYYY-MM-DD HH:mm:ss',
+  isCurrent: true, // 是否取到当前日期 默认：false
+  dateType: 'monthrange',
+  clearable: false,
+  defaultTimeDate: () => [],
+  showTimeType: () => [] // 允许的日期类型
+})
+
+// 初始化时间数据
+const initTimeData = () => {
+  if (props.defaultTimeDate && Array.isArray(props.defaultTimeDate) && props.defaultTimeDate.length) {
+    timeData.value = props.defaultTimeDate
+    changeTime(props.defaultTimeDate)
+  }
+}
+
+const emit = defineEmits(['update:defaultTimeDate', 'update:dateType', 'dateSelectChange'])
+
+// 是否选中-- 用于样式修改
+const isActive = ref(false)
+// 日期类型
+const timeType = ref<DateType>('month')
+// 日期类型配置信息
+const timeTypeConfig = computed(() => {
+  const isShow = showTool(props.showToolType, 'show-dateSelect')
+  const shortcuts = timeType.value == 'month' ? monthShortcuts : timeType.value == 'custom' ? dayShortcuts : undefined
+  return {
+    isShow,
+    className: isShow ? ['select-date flx-left-center', isActive.value ? 'is-active' : ''] : '',
+    shortcuts: isShow ? shortcuts : undefined,
+    style: isShow ? { width: `calc(${props.width} - 70.5px)` } : { width: `${props.width}` }
+  }
+})
+// 日期类型选中项信息
+const getDateOptions = computed(() => {
+  if (props.showTimeType && props.showTimeType.length) {
+    return dateOptions.filter(item => props.showTimeType.includes(item.value))
+  } else {
+    return dateOptions
+  }
+})
+// 日期类型选中项信息
+const typeSelectedItem = computed(() => {
+  return dateOptions.filter(item => item.value == timeType.value)[0]
+})
+// 日期选择器类型
+const pickerType = ref<DateTypeProps>(props.dateType)
+// 日期选择器信息
+const dateInfo = ref({
+  startTime: '', // 开始日期
+  endTime: '', // 结束日期
+  endTimeAdd: '' // 结束日期加1s--第二天00:00:00
+})
+// 日期选择器数据
+const timeData = computed({
+  get() {
+    return props.defaultTimeDate
+  },
+  set(val) {
+    emit('update:defaultTimeDate', val)
+    // changeTime(val)
+  }
+})
+// 日期选择器配置信息
+const timeDataConfig = computed(() => {
+  return getDateConfig(pickerType.value)
+})
+// 设置激活状态
+const setActive = (val: boolean) => {
+  isActive.value = val
+}
+// 日期类型选择框改变
+const dateSelectChangeHandle = (val: string) => {
+  pickerType.value = typeSelectedItem.value?.type
+  timeData.value = []
+}
+// 范围选择时所选的开始时间
+const curDate = ref<string | number>('')
+const calendarChange = (val: Date[]) => {
+  curDate.value = val[0].getTime()
+  if (val[1]) {
+    curDate.value = ''
+  }
+}
+const visibleChange = (val: boolean) => {
+  if (timeTypeConfig.value.isShow && !val) {
+    setActive(false)
+    curDate.value = ''
+  }
+}
+// 日期禁用函数
+const disableFutureDate = (time: Date) => {
+  // 自定义函数
+  if (props.disabledDate) {
+    return props.disabledDate(time)
+  }
+  // 禁用今天之后的日期
+  // 禁用今天（含）之后的日期
+  if (dayjs(time).isSame(dayjs(), 'day') || dayjs(time).isAfter(dayjs(), 'day')) {
+    return true
+  }
+  // 根据类型禁用相关日期
+  const { unit, maxValue } = typeSelectedItem.value?.disableInfo || {}
+  const { isShow } = timeTypeConfig.value
+  if (isShow && curDate.value && !isEmpty(maxValue)) {
+    const isDay = timeType.value == 'custom' || timeType.value == 'quarter'
+    const dateGap = maxValue - (isDay ? 0 : 1)
+    let minDate = dayjs(curDate.value).subtract(dateGap, unit).endOf('day')
+    let maxDate = dayjs(curDate.value).add(dateGap, unit).endOf('day')
+    // 如果是天，则-1天 特殊处理
+    if (isDay) {
+      maxDate = maxDate.subtract(1, 'day')
+      minDate = minDate.subtract(1, 'day')
+    }
+    const currentDate = dayjs(time).endOf('day')
+    return currentDate < minDate || currentDate > maxDate
+  }
+}
+
+// 日期处理与格式化
+const formatDateInfo = (startDate: string, endDate: string) => {
+  const type: DateType = timeDataConfig.value.type
+  dateInfo.value = formatDateRange({
+    formatStr: props.valueFormat,
+    startTime: startDate,
+    endTime: endDate,
+    type,
+    isCurrent: props.isCurrent
+  })
+}
+// 日期选择框改变
+const changeTime = (timeList: any) => {
+  if (isEmpty(timeList)) {
+    dateInfo.value = {
+      startTime: '',
+      endTime: '',
+      endTimeAdd: ''
+    }
+  } else {
+    let startDate: any = ''
+    let endDate: any = ''
+    if (timeTypeConfig.value.isShow || timeDataConfig.value.isScopeType) {
+      startDate = timeList?.[0]
+      endDate = timeList?.[1]
+    } else if (!timeDataConfig.value.isScopeType) {
+      startDate = timeData.value
+      endDate = timeData.value
+    }
+    dateInfo.value.startTime = startDate
+    dateInfo.value.endTime = endDate
+    formatDateInfo(startDate, endDate)
+    emit('dateSelectChange', {
+      ...dateInfo.value,
+      ...(timeTypeConfig.value.isShow ? { timeMode: timeType.value } : {})
+    })
+  }
+}
+// 初始化
+const initData = () => {
+  if (timeTypeConfig.value.isShow && isEmpty(props.defaultTimeDate)) {
+    // timeData.value = getDefaultDateRange('month')
+    const def = getDefaultDateRange('month', true)
+    emit('update:defaultTimeDate', def)
+    changeTime(def)
+  } else {
+    // timeData.value = props.defaultTimeDate
+    changeTime(timeData.value)
+  }
+}
+
+// 监听 defaultTimeType 变化
+watch(
+  () => props.defaultTimeType,
+  val => {
+    if (val) {
+      timeType.value = val
+      pickerType.value = typeSelectedItem.value?.type
+    }
+  },
+  {
+    immediate: true
+  }
+)
+onMounted(() => {
+  initTimeData()
+  initData()
+})
+</script>
+
+<style lang="scss" scoped>
+.select-date {
+  height: 30px;
+  box-shadow: 0 0 0 1px var(--el-border-color) inset;
+  border-radius: var(--el-border-radius-base) !important;
+  padding: 1.5px;
+  background-color: #fff;
+  .type {
+    height: 100%;
+  }
+  :deep(.el-select),
+  :deep(.el-input--default) {
+    height: 27px;
+  }
+  :deep(.el-select__wrapper) {
+    box-shadow: none !important;
+    text-align: center;
+    padding: 0 0 0 10px;
+    height: 27px !important;
+    min-height: 27px;
+    margin-left: 1px;
+  }
+  :deep(.el-input__wrapper) {
+    height: 27px;
+    box-shadow: none !important;
+  }
+  .separator {
+    width: 1.5px;
+    height: 50%;
+    background-color: var(--el-border-color);
+    margin: 0 10px;
+  }
+}
+.select-date:hover {
+  box-shadow: 0 0 0 1px var(--el-border-color-hover) inset;
+}
+.select-date.is-active {
+  box-shadow: 0 0 0 1px var(--el-color-primary) inset;
+}
+</style>

package/src/JztTime/comm/deptSelect.vue

@@ -0,0 +1,193 @@
+<template>
+  <div class="mb8 pl8 flx-left-center">
+    <span v-if="deptLabelText" class="title">{{ deptLabelText }}</span>
+    <el-select
+      v-if="showTool(showToolType, 'show-warehouseLevel')"
+      class="mr12"
+      v-model="WarehouseLevel"
+      :style="{ width: width }"
+      :placeholder="selectPla"
+      :disabled="!selectDisabled"
+      :empty-values="[null, undefined]"
+      :value-on-clear="''"
+      filterable
+      style="width: 120px"
+    >
+      <el-option
+        v-for="item in warehouseLevelOptions"
+        :key="'warehouseLevel' + item.value"
+        :label="item.label"
+        :value="item.value"
+      />
+    </el-select>
+    <el-select
+      v-if="showTool(showToolType, 'show-dept')"
+      class="mr4"
+      v-model="deptSelectId"
+      :style="{ width: width }"
+      :placeholder="selectPla"
+      :disabled="!selectDisabled"
+      @change="selectChangeHandle"
+      :empty-values="[null, undefined]"
+      :value-on-clear="''"
+      filterable
+      style="width: 200px"
+    >
+      <el-option label="全部科室" value=""></el-option>
+      <el-option
+        v-for="item in options"
+        :key="item[fieldNames.value]"
+        :label="item[fieldNames.label]"
+        :value="item[fieldNames.value]"
+      />
+    </el-select>
+  </div>
+</template>
+
+<script setup lang="ts" name="JztTime">
+import { computed, ref, watch, nextTick } from 'vue'
+import { isEmpty } from '@jzt-spd/utils'
+import { getDeptList } from '@jzt-spd/utils/commonApi'
+import { ToolTypeProps } from '../interface/index'
+import { showTool, getWarehouseLevelOptions } from '../index'
+
+export interface AgencySelectProps {
+  agencyId?: string // 机构ID
+  width?: string // 宽度
+  selectPla?: string // 机构选择框提示语
+  selectValue?: string | number // 选择框默认值
+  selectNames?: {
+    label: string // label字段名称
+    value: string // value字段名称
+  }
+  selectApi?: (params: any) => Promise<any> // 选择框数据接口
+  selectParams?: any // 选择框接口参数
+  selectDisabled?: boolean //是否置灰
+  showToolType?: ToolTypeProps[] | boolean // 需要展示的工具类型
+  warehouseLevels?: number[] // 仓库等级下拉选项
+  WarehouseLevel?: number // 仓库等级
+  deptLabelText?: string // 科室选择框label文本
+}
+// 默认值
+const props = withDefaults(defineProps<AgencySelectProps>(), {
+  agencyId: '',
+  selectPla: '请选择科室',
+  selectDisabled: true,
+  selectParams: {},
+  dateSelectProps: () => ({}),
+  deptLabelText: ''
+})
+// 机构默认传参
+const userParams = ref({
+  agencyId: props.agencyId,
+  isActive: true
+})
+const emit = defineEmits(['update:selectValue', 'deptChange', 'update:WarehouseLevel'])
+// 获取机构层级
+const warehouseLevelOptions = computed(() => {
+  const { options } = getWarehouseLevelOptions(props.warehouseLevels)
+  return options
+})
+// 下拉框选项
+const options = ref<any[]>([])
+// 下拉框字段
+const fieldNames = computed(() => {
+  return {
+    label: props.selectNames?.label ?? 'deptName',
+    value: props.selectNames?.value ?? 'id'
+  }
+})
+
+const selectInfo = ref({})
+// 下拉框值
+const deptSelectId = computed({
+  get() {
+    return props.selectValue
+  },
+  set(val) {
+    emit('update:selectValue', val)
+  }
+})
+// 下拉框值
+const WarehouseLevel = computed({
+  get() {
+    return props.WarehouseLevel
+  },
+  set(val) {
+    emit('update:WarehouseLevel', val)
+    initDeptData(val)
+  }
+})
+const allSelectOption = ref({
+  id: '',
+  deptName: '全部',
+  isAll: true
+})
+// 全部选项包含的id集合
+const allDeptIds = ref<string>()
+
+// 下拉框改变
+const selectChangeHandle = (val?: number) => {
+  const isAll = isEmpty(val)
+
+  const selectItem = isAll ? allSelectOption : options.value.find(item => item[fieldNames.value.value] === val)
+  deptSelectId.value = isAll ? '' : selectItem?.[fieldNames.value.value]
+  selectInfo.value = selectItem
+
+  emit('deptChange', {
+    deptId: deptSelectId.value,
+    deptInfo: selectInfo.value,
+    deptIds: allDeptIds.value
+  })
+}
+
+// 初始化
+const initDeptData = async (val?: number) => {
+    const fn = props.selectApi ?? getDeptList
+    const res = await fn({
+      WarehouseLevel: val ?? WarehouseLevel.value,
+      ...userParams.value,
+      ...props.selectParams
+    })
+    options.value = res?.result ?? []
+    const ids = options.value.map(item => item[fieldNames.value.value])
+    allDeptIds.value = ids.join(',')
+    const selectId = props.selectValue
+    const hasVal = selectId && ids.includes(selectId as any)
+
+    selectChangeHandle(hasVal ? selectId : '')
+}
+
+watch(
+  () => props.WarehouseLevel,
+  val => {
+    initDeptData(val)
+  }
+)
+
+watch(
+  () => props.agencyId,
+  newVal => {
+    if (newVal) {
+      nextTick(() => {
+        userParams.value.agencyId = newVal
+        initDeptData()
+      })
+    }
+  },
+  {
+    immediate: true
+  }
+)
+</script>
+
+<style lang="scss" scoped>
+.title {
+  display: inline-block;
+  // width: 75px;
+  color: #333333;
+  text-align: right;
+  font-size: 14px;
+  // padding-left: 4px;
+}
+</style>

package/src/JztTime/comm/typeSelect.vue

@@ -0,0 +1,97 @@
+<template>
+  <!-- <span> -->
+  <!-- <div class="flx-left-center"> -->
+  <div class="select-item flx-left-center" v-if="showTool(showToolType, 'show-isCharging')">
+    <span class="title">计费类型：</span>
+    <el-select
+      v-model="typeList.isCharging"
+      :style="{ width: '120px' }"
+      :empty-values="[null, undefined]"
+      :value-on-clear="''"
+      @change="selectChangeHandle"
+    >
+      <el-option v-for="item in getTypeEnum('计费', '不')" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
+  <div class="select-item flx-left-center" v-if="showTool(showToolType, 'show-isCollect')">
+    <span class="title">集采类型：</span>
+    <el-select
+      v-model="typeList.isCollect"
+      :style="{ width: '120px' }"
+      :empty-values="[null, undefined]"
+      :value-on-clear="''"
+      @change="selectChangeHandle"
+    >
+      <el-option v-for="item in getTypeEnum('集采')" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
+  <div class="select-item flx-left-center" v-if="showTool(showToolType, 'show-isTempPurch')">
+    <span class="title">临采类型：</span>
+    <el-select
+      v-model="typeList.isTempPurch"
+      :style="{ width: '120px' }"
+      :empty-values="[null, undefined]"
+      :value-on-clear="''"
+      @change="selectChangeHandle"
+    >
+      <el-option v-for="item in getTypeEnum('临采')" :key="item.value" :label="item.label" :value="item.value" />
+    </el-select>
+  </div>
+  <!-- </div> -->
+  <!---->
+  <!-- </span> -->
+</template>
+<script setup lang="ts" name="JztTime">
+import { computed, onMounted, ref } from 'vue'
+import { getTypeEnum } from '../index'
+import { ToolTypeProps } from '../interface/index'
+import { showTool } from '../index'
+export interface AgencySelectProps {
+  selectFrom?: any // 选择框默认值
+  isCollect?: number | string //集采类型
+  isTempPurch?: number | string //临采类型
+  showToolType?: ToolTypeProps[] | boolean // 需要展示的工具类型
+}
+// 默认值
+const props = withDefaults(defineProps<AgencySelectProps>(), {
+  isCollect: 0,
+  isTempPurch: 0,
+  showToolType: () => []
+})
+interface TypeListProps {
+  isCharging?: number | string
+  isCollect?: number | string
+  isTempPurch?: number | string
+}
+const typeList = ref<TypeListProps>({
+  isCharging: props.isCollect,
+  isCollect: props.isCollect,
+  isTempPurch: props.isTempPurch
+})
+const emit = defineEmits(['typeChange', 'update:isCollect', 'update:isTempPurch'])
+
+const selectChangeHandle = () => {
+  emit('typeChange', typeList.value)
+}
+onMounted(() => {
+  selectChangeHandle()
+})
+</script>
+
+<style lang="scss" scoped>
+.title {
+  display: inline-block;
+  // width: 75px;
+  color: #333333;
+  text-align: right;
+  font-size: 14px;
+  // padding-left: 4px;
+}
+.flx-left-center {
+  flex-wrap: nowrap;
+}
+.select-item {
+  margin: 0 4px 8px 8px;
+  // padding-left: 8px;
+}
+</style>