@jzt-packages/components 1.0.0

package/src/JztTable/index.vue

@@ -0,0 +1,353 @@
+<template>
+  <div :class="['spd-card jzt-table-card', isFullscreen ? 'fullscreen-page' : '', isFullHeight ? 'is-fullHeight' : '']">
+    <div class="table-header flx-between-center">
+      <div class="header-button-lf">
+        <slot name="headerButton">
+          <JztButtonList :buttonList="topList" @onClick="handleButtonClick" />
+        </slot>
+      </div>
+      <div v-if="toolButton" class="header-button-ri">
+        <slot name="toolButton">
+          <el-button
+            v-if="showToolButton('refresh')"
+            :icon="Refresh"
+            title="刷新"
+            class="tool_btn"
+            @click="onRefresh"
+          />
+          <el-button
+            v-if="showToolButton('fullScreen')"
+            :title="isFullscreen ? '退出全屏' : '全屏'"
+            class="tool_btn"
+            @click="isFullscreen = !isFullscreen"
+          >
+            <i :class="['iconfont', isFullscreen ? 'icon-shiyingchuangkou' : 'icon-manping']"></i>
+          </el-button>
+          <!-- <ColumnsSetting
+            v-if="showToolButton('setting') && tableColumns.length"
+            v-model:columns="tableColumns"
+            :column-types="columnTypes"
+          >
+            <template #reference>
+              <el-button title="列设置" :icon="Setting" class="tool_btn" />
+            </template>
+          </ColumnsSetting> -->
+        </slot>
+      </div>
+    </div>
+    <div class="table-content-box">
+      <el-table
+        ref="jztTableRef"
+        v-bind="$attrs"
+        :id="uuid"
+        :data="tableData"
+        :border="false"
+        :row-key="rowKey"
+        @selection-change="selectionChange"
+        @header-dragend="headerDragend"
+        :height="isFullscreen ? '100%' : tableHeight"
+      >
+        <!-- 默认插槽 -->
+        <slot />
+        <template v-for="(item, index) in selectColumns" :key="item">
+          <el-table-column
+            v-if="item.type && columnTypes.includes(item.type)"
+            v-bind="item"
+            :align="item.align ?? 'center'"
+            :reserve-selection="item.type == 'selection'"
+          >
+            <template #default="scope">
+              <template v-if="item.type == 'expand'">
+                <component :is="item.render" v-bind="scope" v-if="item.render" />
+                <slot v-else :name="item.type" v-bind="scope" />
+              </template>
+
+              <el-radio
+                v-if="item.type == 'radio'"
+                v-model="radio"
+                :name="'radio' + index"
+                :label="scope.row[rowKey]"
+                @change="radioChange(scope.row[rowKey], scope.row)"
+              >
+                <i></i>
+              </el-radio>
+
+              <el-tag v-if="item.type == 'sort'" class="move" size="small">
+                <el-icon><DCaret /></el-icon>
+              </el-tag>
+            </template>
+          </el-table-column>
+        </template>
+        <template v-for="item in tableColumns" :key="item">
+          <!-- other -->
+          <TableColumn v-if="item.prop !== 'operation'" :column="item">
+            <template v-for="slot in Object.keys($slots)" #[slot]="scope">
+              <slot :name="slot" v-bind="scope" />
+            </template>
+          </TableColumn>
+          <!-- 自定义表格操作列 -->
+          <el-table-column
+            v-else-if="item.prop === 'operation' && item.isShow"
+            v-bind="item"
+            :align="item.align ?? 'left'"
+          >
+            <template #default="{ row }">
+              <template v-for="(btnItem, index) in item.btnLList" :key="index">
+                <span v-if="(btnItem.hideFun ? !btnItem.hideFun(row) : true) && hasPermission(btnItem.hasPerm)">
+                  <component v-if="btnItem.render" :is="btnItem.render" v-bind="row" style="margin: 0 12px" />
+                  <span v-else-if="btnItem.slotName">
+                    <slot :name="btnItem.slotName" v-bind="row" />
+                  </span>
+                  <el-button
+                    v-else
+                    @click="btnItem.fun && tableOperationFn(btnItem, row)"
+                    :disabled="btnItem.disabledFn && btnItem.disabledFn(row)"
+                    :link="btnItem.link === false ? false : true"
+                    :type="btnItem.type || ''"
+                    :icon="btnItem.icon || ''"
+                    v-bind="(btnItem as any).$attr"
+                    style="margin: 0 6px"
+                  >
+                    <span>{{ btnItem.text }}</span>
+                  </el-button>
+                </span>
+              </template>
+            </template>
+          </el-table-column>
+        </template>
+        <!-- 插入表格最后一行之后的插槽 -->
+        <template #append>
+          <slot name="append" />
+        </template>
+        <!-- 无数据 -->
+        <template #empty>
+          <div class="table-empty">
+            <slot name="empty">
+              <JztEmpty />
+            </slot>
+          </div>
+        </template>
+      </el-table>
+      <!-- 分页组件 -->
+      <slot v-if="pagination" name="pagination">
+        <jzt-pagination v-model:pageable="pageQuery" @changePageable="onPageableChange" />
+      </slot>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts" name="ProTable">
+import { ElTableColumn, ElTable, ElMessageBox, ElMessage } from 'element-plus'
+import { ref, watch, provide, onMounted, unref, computed, reactive } from 'vue'
+import { useTable } from '../JztQueryTable/hooks/useQueryTable'
+import { useSelection } from '../JztQueryTable/hooks/useSelection'
+import {
+  ColumnProps,
+  PageableProps,
+  TypeProps,
+  TopButtonProps,
+  TableConfigProps
+} from '../JztQueryTable/interface/index'
+import { Refresh, Setting, Search } from '@element-plus/icons-vue'
+import { generateUUID } from '../utils/index'
+import JztPagination from '../JztPagination/index.vue'
+// import ColumnsSetting from '../JztQueryTable/components/ColumnsSetting.vue'
+import TableColumn from '../JztQueryTable/components/TableColumn.vue'
+import JztButtonList from '../JztButtonList/index.vue'
+import Sortable from 'sortablejs'
+import JztEmpty from '../JztEmpty/index.vue'
+// import { hasPermission } from '../hooks/useAuthButtons'
+import { hasPermission } from '@jzt-spd/utils'
+import { useTableEvents } from '../hooks/useTableEvents'
+
+const { useButtonClickFn } = useTableEvents()
+
+export interface ProTableProps {
+  tableConfig: TableConfigProps // 列配置项  ==> 必传
+  tableData?: any[] // 静态 table data 数据
+  pagination?: boolean // 是否需要分页组件 ==> 非必传（默认为true）
+  border?: boolean // 是否带有纵向边框 ==> 非必传（默认为false）
+  toolButton?: ('refresh' | 'setting' | 'fullScreen')[] | boolean // 是否显示表格功能按钮 ==> 非必传（默认为true）
+  rowKey?: string // 行数据的 Key，用来优化 Table 的渲染，当表格数据多选时，所指定的 id ==> 非必传（默认为 id）
+  pageable?: PageableProps // 分页数据
+  tableHeight?: string
+  isFullHeight?: boolean // 是否
+}
+
+// 接受父组件参数，配置默认值
+const props = withDefaults(defineProps<ProTableProps>(), {
+  tableData: () => [],
+  pagination: true,
+  border: false,
+  toolButton: true,
+  rowKey: 'id',
+  tableHeight: '100%',
+  isFullHeight: false,
+  pageable: () => {
+    return {
+      pageIndex: 1, // 当前页
+      pageSize: 10, // 每页显示条数
+      total: 0 // 总条数s
+    }
+  }
+})
+// 分页
+const pageQuery = computed({
+  get() {
+    return props.pageable
+  },
+  set(val: PageableProps) {
+    emit('update:pageable', val)
+  }
+})
+
+// 表格全屏
+const isFullscreen = ref(false)
+// table 实例
+const jztTableRef = ref<InstanceType<typeof ElTable>>()
+
+// 生成组件唯一id
+const uuid = ref('id-' + generateUUID())
+
+// 接收 topList 并设置为响应式 TopButtonProps
+const topList = computed<TopButtonProps[]>(() => props.tableConfig.topList || [])
+// column 列类型
+const columnTypes: TypeProps[] = ['selection', 'radio', 'index', 'expand', 'sort']
+// 控制 ToolButton 显示
+const showToolButton = (key: 'refresh' | 'setting' | 'fullScreen') => {
+  return Array.isArray(props.toolButton) ? props.toolButton.includes(key) : props.toolButton
+}
+
+// 单选值
+const radio = ref('')
+const tableColumns = ref<ColumnProps[]>([])
+
+watch(
+  () => props.tableConfig.columns,
+  columns => {
+    flatColumnsFunc(columns)
+  },
+  {
+    deep: true
+  }
+)
+
+// 扁平化 columns 的方法 处理字典数据 、 过滤表格部分渲染数据
+const flatColumnsFunc = (columns: ColumnProps[], flatArr: ColumnProps[] = []) => {
+  tableColumns.value = []
+  columns.forEach(async col => {
+    if (col.prop && !col.type) {
+      tableColumns.value.push(col)
+      if (col._children?.length) flatArr.push(...flatColumnsFunc(col._children))
+      flatArr.push(col)
+      // column 添加默认 isShow && isSetting && isFilterEnum 属性值
+      col.isShow = col.isShow ?? true
+      col.isSetting = col.isSetting ?? true
+      col.isFilterEnum = col.isFilterEnum ?? true
+    }
+  })
+  return flatArr.filter(item => !item._children?.length)
+}
+flatColumnsFunc(props.tableConfig.columns)
+
+// 表格多选 Hooks
+const { selectionChange, selectedList, selectedListIds, isSelected, headerDragend } = useSelection(props.rowKey)
+
+const onPageableChange = (pageable: PageableProps) => {
+  const { pageIndex, pageSize } = pageable
+  emit('refresh', { pageIndex, pageSize })
+}
+
+// 刷新表格】
+const onRefresh = () => {
+  const { pageIndex, pageSize } = pageQuery.value
+  emit('refresh', { pageIndex, pageSize })
+}
+
+// 清空选中数据列表
+const clearSelection = () => jztTableRef.value!.clearSelection()
+
+// 初始化表格数据 && 拖拽排序
+onMounted(() => {
+  dragSort()
+})
+
+// 列表操作列 'index', 'selection', 'radio', 'expand', 'sort'
+const selectColumns = computed<ColumnProps[]>(() => {
+  return props.tableConfig.columns.filter(item => item.isShow !== false && item.type && columnTypes.includes(item.type))
+})
+
+// 定义 emit 事件
+const emit = defineEmits<{
+  dragSort: [{ newIndex?: number; oldIndex?: number }]
+  radioChange: [string, any]
+  tabChange: [any]
+  refresh: [PageableProps]
+  'update:pageable': PageableProps
+}>()
+// 单选change
+const radioChange = (rowKey, row) => {
+  emit('radioChange', rowKey, row)
+}
+
+// 表格拖拽排序
+const dragSort = () => {
+  const tbody = document.querySelector(`#${uuid.value} tbody`) as HTMLElement
+  Sortable.create(tbody, {
+    handle: '.move',
+    animation: 300,
+    onEnd({ newIndex, oldIndex }) {
+      // const [removedItem] = processTableData.value.splice(oldIndex!, 1);
+      // processTableData.value.splice(newIndex!, 0, removedItem);
+      emit('dragSort', { newIndex, oldIndex })
+    }
+  })
+}
+// 是否显示表格操作按钮
+// const hasPermission = (item: any) => {
+//   // return false;
+//   return !!item.hasPerm;
+// };
+// 操作列点击操作
+const tableOperationFn = (item: any, row: any) => {
+  useButtonClickFn(item, row)
+  // if (item.id === 'delete') {
+  //   ElMessageBox.confirm('确定删除该条数据吗?', '警告', {
+  //     confirmButtonText: '确定',
+  //     cancelButtonText: '取消',
+  //     type: 'warning'
+  //   })
+  //     .then(() => {
+  //       item.fun(row)
+  //     })
+  //     .catch(() => {
+  //       console.log(12)
+  //     })
+  // } else {
+  //   item.fun(row)
+  // }
+}
+// 按钮点击
+const handleButtonClick = fun => {
+  fun &&
+    fun({
+      isSelected: isSelected.value,
+      selectedList: selectedList.value,
+      selectedListIds: selectedListIds.value
+    })
+}
+// 暴露给父组件的参数和方法 (外部需要什么，都可以从这里暴露出去)
+defineExpose({
+  element: jztTableRef,
+  radio,
+  isSelected,
+  selectedList,
+  selectedListIds,
+
+  // 下面为 function
+  clearSelection
+})
+</script>
+<style lang="scss" scoped>
+@use './index';
+</style>

package/src/JztTable/interface/index.ts

@@ -0,0 +1 @@
+export * from "../../JztQueryTable/interface/index";

package/src/JztTime/comm/agencySelect.vue

@@ -0,0 +1,112 @@
+<template>
+  <el-select
+    class="select mb8"
+    v-model="selectAgentId"
+    :style="{ width: width }"
+    :placeholder="selectPla"
+    :disabled="!selectDisabled"
+    @change="selectChangeHandle"
+    filterable
+  >
+    <el-option
+      v-for="item in options"
+      :key="item[fieldNames.value]"
+      :label="item[fieldNames.label]"
+      :value="item[fieldNames.value]"
+    />
+  </el-select>
+</template>
+
+<script setup lang="ts" name="JztTime">
+import { computed, onMounted, ref } from 'vue'
+import { isEmpty, localGetUserId, localGetUserType } from '@jzt-spd/utils'
+import { getUserAgencySupplierApi } from '@jzt-spd/utils/commonApi'
+import { localGetAgencyId } from '@jzt-spd/utils'
+
+// 机构默认传参
+const userParams = ref({
+  UserId: localGetUserId() || '',
+  Key: '',
+  EnterpriseType: localGetUserType()
+})
+
+export interface AgencySelectProps {
+  width?: string // 宽度
+  selectPla?: string // 机构选择框提示语
+  selectValue?: string | number // 选择框默认值
+  selectNames?: {
+    label: string // label字段名称
+    value: string // value字段名称
+  }
+  selectApi?: (params: any) => Promise<any> // 选择框数据接口
+  selectParams?: any // 选择框接口参数
+  selectDisabled?: boolean //是否置灰机构 -- 非医共体置灰
+}
+// 默认值
+const props = withDefaults(defineProps<AgencySelectProps>(), {
+  selectPla: '请选择机构',
+  selectDisabled: true,
+  selectParams: {},
+  dateSelectProps: () => ({})
+})
+const emit = defineEmits(['update:modelValue', 'update:selectValue', 'selectChange'])
+
+// 下拉框选项
+const options = ref<any[]>([])
+// 下拉框字段
+const fieldNames = computed(() => {
+  return {
+    label: props.selectNames?.label ?? 'enterpriseIdName',
+    value: props.selectNames?.value ?? 'enterpriseId'
+  }
+})
+
+const selectInfo = ref({})
+// 下拉框值
+const selectAgentId = computed({
+  get() {
+    return props.selectValue
+  },
+  set(val) {
+    emit('update:selectValue', val)
+  }
+})
+// 下拉框改变
+const selectChangeHandle = (val: string | number | undefined) => {
+  const selectItem = options.value?.filter((item: any) => item[fieldNames.value.value] === val)[0] || null
+  selectAgentId.value = selectItem?.[fieldNames.value.value]
+  selectInfo.value = selectItem
+  emit('selectChange', {
+    agencyId: selectAgentId.value,
+    agencyInfo: selectInfo.value
+  })
+
+  // emit('selectChange', 'agencySelectChange', { selectInfo: selectInfo.value })
+}
+// 初始化
+const initData = async () => {
+  try {
+    // 默认值
+    const fn = props.selectApi ? props.selectApi : getUserAgencySupplierApi
+    const res = await fn({ ...userParams.value, ...props.selectParams })
+    options.value = res?.result || []
+    setTimeout(async () => {
+      const defaultSelectId = !isEmpty(props.selectValue) ? props.selectValue : localGetAgencyId()
+      selectAgentId.value = defaultSelectId
+      selectChangeHandle(defaultSelectId)
+    }, 200)
+  } catch (error) {}
+}
+
+onMounted(() => {
+  initData()
+})
+defineExpose({
+  selectInfo
+})
+</script>
+
+<style lang="scss" scoped>
+.select {
+}
+</style>

package/src/JztTime/comm/collapseRow.vue

@@ -0,0 +1,132 @@
+<template>
+  <div class="auto-collapse-row" :style="showToggle ? { paddingBottom: '24px' } : {}">
+    <div ref="containerRef" class="content" :class="{ collapsed: isCollapsed }" :style="collapsedStyle">
+      <slot />
+    </div>
+
+    <div v-if="showToggle" class="toggle" @click="toggle">
+      {{ isCollapsed ? expandText : collapseText }}
+      <el-icon class="el-icon--right">
+        <component :is="isCollapsed ? ArrowDownBold : ArrowUpBold"></component>
+      </el-icon>
+    </div>
+  </div>
+</template>
+
+<script setup lang="ts">
+import { debounce } from 'lodash-es'
+import { ref, nextTick, onMounted, onUnmounted, computed, watch } from 'vue'
+import { ArrowDownBold, ArrowUpBold } from '@element-plus/icons-vue'
+
+interface Props {
+  defaultCollapsed?: boolean
+  expandText?: string
+  collapseText?: string
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  defaultCollapsed: true,
+  expandText: '展开',
+  collapseText: '收起'
+})
+
+const containerRef = ref<HTMLElement | null>(null)
+const isCollapsed = ref(props.defaultCollapsed)
+const showToggle = ref(false)
+const collapsedHeight = ref(40)
+
+const collapsedStyle = computed(() => {
+  if (!isCollapsed.value) return {}
+  return {
+    height: collapsedHeight.value + 'px',
+    overflow: 'hidden'
+  }
+})
+
+const toggle = () => {
+  isCollapsed.value = !isCollapsed.value
+}
+
+const calculate = async () => {
+  await nextTick()
+  const container = containerRef.value
+  if (!container) return
+  const children = Array.from(container.children) as HTMLElement[]
+  if (!children.length) {
+    showToggle.value = false
+    return
+  }
+  // 第一行高度
+  const firstRowTop = children[0].offsetTop
+  const secondRowElement = children.find(el => el.offsetTop > firstRowTop)
+  if (secondRowElement) {
+    showToggle.value = true
+    collapsedHeight.value = secondRowElement.offsetTop - 4
+  } else {
+    showToggle.value = false
+  }
+}
+//  创建一个稳定的防抖函数（不要放在 observer 里面）
+const debounceCalculate = debounce(() => {
+  calculate()
+}, 300)
+let observer: ResizeObserver
+
+onMounted(() => {
+  observer = new ResizeObserver(() => {
+    debounceCalculate()
+  })
+
+  if (containerRef.value) {
+    observer.observe(containerRef.value)
+  }
+
+  calculate()
+})
+
+onUnmounted(() => {
+  observer?.disconnect()
+  debounceCalculate.cancel()
+})
+</script>
+
+<style scoped lang="scss">
+.auto-collapse-row {
+  position: relative;
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  // align-items: flex-start;
+  // justify-content: flex-start;
+}
+
+.content {
+  display: flex;
+  flex-wrap: wrap;
+  transition: height 0.3s ease;
+}
+
+.toggle {
+  width: 100%;
+  height: 24px;
+  line-height: 24px;
+  position: absolute;
+  bottom: 0px;
+  left: 50%;
+  transform: translate(-50%, 0);
+  // padding: 0 20px;
+  color: #999;
+  text-align: center;
+  font-size: 12px;
+  cursor: pointer;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  user-select: none;
+  // border-radius: 10px;
+  border-bottom-left-radius: 8px;
+  border-bottom-right-radius: 8px;
+  background: linear-gradient(180deg, #ffffff00 0%, #ffffff 40%);
+  color: var(--el-color-primary);
+  // background: #fff;
+}
+</style>