@jzt-packages/components 1.0.0

package/src/JztGrid/index.vue

@@ -0,0 +1,179 @@
+<template>
+  <div :style="style">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup lang="ts" name="Grid">
+import {
+  ref,
+  watch,
+  useSlots,
+  computed,
+  provide,
+  onBeforeMount,
+  onMounted,
+  onUnmounted,
+  onDeactivated,
+  onActivated,
+  VNodeArrayChildren,
+  VNode
+} from 'vue'
+import type { BreakPoint } from './interface/index'
+
+type Props = {
+  cols?: number | Record<BreakPoint, number>
+  collapsed?: boolean
+  collapsedRows?: number
+  gap?: [number, number] | number
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  cols: () => ({ xs: 1, sm: 2, md: 3, lg: 4, xl: 5, xxl: 6 }),
+  collapsed: false,
+  collapsedRows: 2,
+  gap: 0
+})
+
+onBeforeMount(() => props.collapsed && findIndex())
+onMounted(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent)
+  window.addEventListener('resize', resize)
+})
+onActivated(() => {
+  resize({ target: { innerWidth: window.innerWidth } } as unknown as UIEvent)
+  window.addEventListener('resize', resize)
+})
+onUnmounted(() => {
+  window.removeEventListener('resize', resize)
+})
+onDeactivated(() => {
+  window.removeEventListener('resize', resize)
+})
+
+// 监听屏幕变化
+const resize = (e: UIEvent) => {
+  let width = (e.target as Window).innerWidth
+  //   768 992 1200 1920 2560 /  768 1100 1440 1920 2560
+  switch (!!width) {
+    case width < 768:
+      breakPoint.value = 'xs'
+      break
+    case width >= 768 && width < 1130:
+      breakPoint.value = 'sm'
+      break
+    case width >= 1130 && width < 1440:
+      breakPoint.value = 'md'
+      break
+    case width >= 1440 && width < 1920:
+      breakPoint.value = 'lg'
+      break
+    case width >= 1920 && width < 2560:
+      breakPoint.value = 'xl'
+      break
+    case width >= 2560:
+      breakPoint.value = 'xxl'
+      break
+  }
+}
+
+// 注入 gap 间距
+provide('gap', Array.isArray(props.gap) ? props.gap[0] : props.gap)
+
+// 注入响应式断点
+let breakPoint = ref<BreakPoint>('xl')
+provide('breakPoint', breakPoint)
+
+// 注入要开始折叠的 index
+const hiddenIndex = ref(-1)
+provide('shouldHiddenIndex', hiddenIndex)
+
+// 注入 cols
+const gridCols = computed(() => {
+  if (typeof props.cols === 'object') return props.cols[breakPoint.value] ?? props.cols
+  return props.cols
+})
+provide('cols', gridCols)
+
+// 寻找需要开始折叠的字段 index
+const slots = useSlots().default!()
+// emit
+const emit = defineEmits<{
+  hiddenIndex: [value: number]
+}>()
+const findIndex = () => {
+  let fields: VNodeArrayChildren = []
+  let suffix: VNode | null = null
+  slots.forEach((slot: any) => {
+    // suffix
+    if (typeof slot.type === 'object' && slot.type.name === 'GridItem' && slot.props?.suffix !== undefined)
+      suffix = slot
+    // slot children
+    if (typeof slot.type === 'symbol' && Array.isArray(slot.children)) fields.push(...slot.children)
+  })
+
+  // 计算 suffix 所占用的列
+  let suffixCols = 0
+  if (suffix) {
+    suffixCols =
+      ((suffix as VNode).props![breakPoint.value]?.span ?? (suffix as VNode).props?.span ?? 1) +
+      ((suffix as VNode).props![breakPoint.value]?.offset ?? (suffix as VNode).props?.offset ?? 0)
+  }
+  try {
+    let find = false
+    fields.reduce((prev = 0, current, index) => {
+      prev +=
+        ((current as VNode)!.props![breakPoint.value]?.span ?? (current as VNode)!.props?.span ?? 1) +
+        ((current as VNode)!.props![breakPoint.value]?.offset ?? (current as VNode)!.props?.offset ?? 0)
+      if (Number(prev) > props.collapsedRows * gridCols.value - suffixCols) {
+        hiddenIndex.value = index
+        find = true
+        // 不能注释，会导致表单自定隐藏出问题
+        throw 'find it'
+      }
+      return prev
+    }, 0)
+    if (!find) hiddenIndex.value = -1
+   
+  } catch (e) {
+    console.warn(e)
+  }finally { 
+    emit('hiddenIndex', hiddenIndex.value)
+  }
+}
+
+// 断点变化时执行 findIndex
+watch(
+  () => breakPoint.value,
+  () => {
+    if (props.collapsed) findIndex()
+  }
+)
+
+// 监听 collapsed
+watch(
+  () => props.collapsed,
+  value => {
+    if (value) return findIndex()
+    hiddenIndex.value = -1
+  }
+)
+
+// 设置间距
+const gridGap = computed(() => {
+  if (typeof props.gap === 'number') return `${props.gap}px`
+  if (Array.isArray(props.gap)) return `${props.gap[1]}px ${props.gap[0]}px`
+  return 'unset'
+})
+
+// 设置 style
+const style = computed(() => {
+  return {
+    display: 'grid',
+    gridGap: gridGap.value,
+    gridTemplateColumns: `repeat(${gridCols.value}, minmax(0, 1fr))`
+  }
+})
+
+defineExpose({ breakPoint })
+</script>

package/src/JztGrid/interface/index.ts

@@ -0,0 +1,6 @@
+export type BreakPoint = 'xs' | 'sm' | 'md' | 'lg' | 'xl'|'xxl'
+
+export type Responsive = {
+  span?: number
+  offset?: number
+}

package/src/JztImportExcel/index.scss

@@ -0,0 +1,46 @@
+.tips {
+  margin-left: 30px;
+  margin-bottom: 20px;
+
+  .el-icon {
+    margin-top: 3px;
+  }
+}
+.el-upload__tip {
+  color: #666666;
+  margin-top: 0px;
+  font-weight: normal;
+}
+.upload {
+  width: 100%;
+  :deep(.el-upload-dragger) {
+    width: 100%;
+    padding: 24px 10px;
+  }
+  :deep(.el-upload-dragger .el-icon--upload) {
+    color: #666666;
+  }
+  :deep(.el-icon--close) {
+    background: url('./assets/delete.png') 100% 100%;
+    width: 16px;
+    height: 16px;
+  }
+  :deep(.el-icon--close svg) {
+    display: none;
+  }
+}
+.box {
+  padding: 16px 16px;
+  border-radius: 4px;
+  background: #f7f9fc;
+  font-family: PingFang SC;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 22px;
+  .result {
+    font-weight: 400;
+    &-failure {
+      color: #fa2c2d;
+    }
+  }
+}

package/src/JztImportExcel/index.vue

@@ -0,0 +1,430 @@
+<template>
+  <!-- <span class="ml10">请上传 .xls , .xlsx 标准格式文件，文件最大为 {{ parameter.fileSize }}M</span>  -->
+  <jzt-dialog
+    v-model="dialogVisible"
+    :title="parameter.title"
+    :destroy-on-close="true"
+    :width="parameter.width"
+    :confirm-text="parameter.confirmText"
+    :cancel-text="parameter.cancelText"
+    :disabled="disabled"
+    @close="handleClose"
+    @confirm="handleConfirm"
+  >
+    <!-- <div class="tips flx-left-center">
+      <el-icon :size="16" color="#888888"><WarningFilled /></el-icon>
+      <span style="margin-left: 5px; color: red">
+        {{ parameter.tips }}
+      </span>
+    </div> -->
+    <div v-loading="uploadLoading" class="box">
+      <p class="mb8 flx-left-center">
+        <label>1.下载模板</label>
+        <el-button type="primary" link @click="downloadTemp">点击下载模板</el-button>
+      </p>
+      <p class="mb8 flx-left-center">2.上传完善后的模板</p>
+      <el-upload
+        action="#"
+        class="upload"
+        ref="uploadRef"
+        v-model:file-list="fileList"
+        :drag="parameter.isDrag"
+        :limit="excelLimit"
+        :multiple="true"
+        :show-file-list="true"
+        :http-request="uploadExcel"
+        :before-upload="beforeExcelUpload"
+        :on-exceed="handleExceed"
+        :on-success="excelUploadSuccess"
+        :on-error="excelUploadError"
+        :on-remove="excelUploadRemove"
+        :accept="parameter.fileType!.join(',')"
+      >
+        <slot name="empty">
+          <div v-if="parameter.isDrag">
+            <el-icon class="el-icon--upload">
+              <upload-filled />
+            </el-icon>
+            <div class="el-upload__text">
+              将文件拖到此处或
+              <em>点击上传</em>
+            </div>
+          </div>
+          <div v-else class="flx-left-center">
+            <el-button type="primary" icon="UploadFilled">选择文件</el-button>
+            <div class="el-upload__tip flx-left-center ml10">
+              <el-icon :size="16" color="#888888"><WarningFilled /></el-icon>
+              <span class="ml6">{{ parameter.tips }}</span>
+            </div>
+          </div>
+          <div v-if="parameter.isDrag" class="el-upload__tip flx-center-center mt4">
+            <el-icon v-if="parameter.isIcon" :size="16" color="#888888"><WarningFilled /></el-icon>
+            <span class="ml6">{{ parameter.tips }}</span>
+            <span></span>
+          </div>
+        </slot>
+        <!-- <template #tip>
+            <slot v-if="!isDrag" name="tip">
+              <div class="el-upload__tip flx-left-center">
+                <el-icon :size="16" color="#888888"><WarningFilled /></el-icon>
+                <span class="ml6">{{ parameter.tips }}</span>
+              </div>
+            </slot>
+          </template> -->
+      </el-upload>
+      <div
+        class="result pl8 flx-between-center"
+        v-show="parameter.isShowCount && fileList.length && fileList.length > 0"
+      >
+        <div>
+          <span v-if="allCount > 0">
+            导入数据 {{ allCount }} 条,
+            <el-text class="mx-1" type="danger">失败 {{ importData.failCount }} 条</el-text>
+          </span>
+          <el-text v-else class="mx-1" type="danger">导入失败</el-text>
+        </div>
+        <div>
+          <el-button v-if="importData.errorMsg && importData.errorMsg != ''" type="info" link @click="downErrorFile">
+            下载错误数据
+            <i class="iconfont icon-xiazai"></i>
+          </el-button>
+        </div>
+      </div>
+    </div>
+    <div v-if="tableConfig.columns && tableConfig.columns.length" class="table-main" style="margin-top: -10px">
+      <JztTable
+        ref="jztTableRef"
+        :pagination="false"
+        :tool-button="false"
+        :table-data="tableData"
+        :table-config="tableConfig"
+        @radioChange="radioChange"
+      />
+    </div>
+    <slot name="footer"></slot>
+  </jzt-dialog>
+</template>
+
+<script setup lang="tsx" name="ImportExcel">
+import { isFullUrl, useDownload, localGetServer } from '@jzt-spd/utils'
+import { ElNotification, genFileId, UploadInstance, UploadRawFile, UploadRequestOptions } from 'element-plus'
+import { computed, nextTick, ref } from 'vue'
+import JztDialog from '../JztDialog/index.vue'
+import JztTable from '../JztTable/index.vue'
+import type { TableConfigProps } from '../JztTable/interface/index'
+
+export interface ExcelParameterProps {
+  title?: string // 标题
+  tips: string // 说明
+  fileSize?: number // 上传文件的大小
+  fileType?: File.ExcelMimeType[] // 上传文件的类型
+  tempApi?: (params: any) => Promise<any> // 下载模板的Api,
+  tempParams?: any // 下载模板的入参
+  importApi?: (params: any) => Promise<any> // 批量导入的Api
+  importParams?: any // 批量导入的入参
+  getTableList?: (response?: Record<string, any>) => void // 获取表格数据的Api
+  columns?: any[]
+  tableData?: any[]
+  isDrag?: boolean // 是否可拖拽上传
+  isIcon?: boolean // 是否展示提示图标
+  width?: string // 弹框宽度
+  fileName: string // 文件流的名称 excelFormData
+  confirmText?: string | boolean // 确定按钮的文字
+  cancelText?: string | boolean // 取消按钮的文字
+  confirmFun?: (params: any) => void // 确定按钮的执行函数
+  autoClose?: boolean // 导入成功后是否自动关闭弹框
+  importCallBack?: (params: any) => void // 导入成功的回调函数
+  onRemove?: (params: { val: any; fileList: any[] }) => void // 文件移除时的函数
+  isReplace?: boolean // 是否可以在选中时自动替换上一个文件，必须设置limit=1
+  suffix?: string // 后缀
+  isNotify?: boolean
+  isShowCount?: false // 是否展示导入结果
+  downErrorFile?: (params: any) => void // 下载错误数据的回调函数
+}
+
+// 父组件传过来的参数
+const parameter = ref<ExcelParameterProps>({
+  title: '文件导入',
+  tips: '请上传.xls,.xlsx 标准格式文件，文件最大为 5 M',
+  fileSize: 5,
+  fileType: ['application/vnd.ms-excel', 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet'],
+  isDrag: true,
+  width: '520px',
+  fileName: 'file',
+  autoClose: true,
+  isReplace: false,
+  confirmText: '确认',
+  isShowCount: false,
+  cancelText: false
+})
+
+//  是否覆盖数据
+// const isCover = ref(false)
+// 最大文件上传数
+const excelLimit = ref(1)
+// 文件列表
+const fileList = ref([])
+// 表格实例
+const jztTableRef = ref()
+// dialog 禁用状态
+const disabled = ref<boolean>(true)
+// dialog状态
+const dialogVisible = ref(false)
+
+const tableData = ref<any[]>([])
+const uploadRef = ref<UploadInstance>()
+
+const tableConfig = ref<TableConfigProps>({
+  topList: [],
+  columns: []
+})
+const importData = ref({
+  successCount: 0,
+  failCount: 0,
+  errorMsg: ''
+})
+// 导出结果数量
+const allCount = computed(() => importData.value.successCount + importData.value.failCount)
+
+// const emit = defineEmits([''])
+// 接收父组件参数
+const acceptParams = (params: ExcelParameterProps) => {
+  Object.keys(params).forEach(key => {
+    parameter.value[key] = params[key] ?? parameter.value[key]
+  })
+  dialogVisible.value = true
+  if (params.columns && params.columns.length) {
+    tableConfig.value.columns = params.columns || []
+  } else {
+    tableConfig.value.columns = []
+  }
+  tableData.value = []
+}
+// 关闭dialog，并清空数据
+const handleClose = () => {
+  dialogVisible.value = false
+  tableConfig.value.columns = []
+  clearFileData()
+}
+const importResponse = ref<any>(null) // 批量导入返回的数据
+
+// 确定按钮功能执行函数
+const handleConfirm = async () => {
+  if (parameter.value.confirmFun) {
+    const selected = getTableSelected()
+    await parameter.value.confirmFun({
+      importRes: importResponse.value,
+      selected: selected,
+      radioValue: radioInfo.value,
+      fileList: fileList.value
+    })
+  }
+  parameter.value.getTableList && parameter.value.getTableList()
+  handleClose()
+}
+// 获取table的选择数据 -- 多选
+const getTableSelected = () => {
+  let selected = {
+    isSelected: null,
+    selectedList: null,
+    selectedListIds: null
+  }
+  if (jztTableRef.value) {
+    jztTableRef.value.handleButtonClick(row => {
+      selected = row
+    })
+  }
+  return selected
+}
+const radioInfo = ref({
+  rowKey: null,
+  row: null
+})
+// 获取table的选择数据 -- 单选
+const radioChange = (rowKey, row) => {
+  radioInfo.value.rowKey = rowKey
+  radioInfo.value.row = row
+}
+// const templateUrl = 'http://10.4.4.133:30993'
+const templateUrl = localGetServer()?.fileWebUrl || ''
+// import.meta.env.VITE_TEMPLATE_BASE_URL as string;
+// Excel 导入模板下载
+const downloadTemp = () => {
+  if (!parameter.value.tempApi) return
+  if (typeof parameter.value.tempApi === 'string') {
+    const a = document.createElement('a')
+    if (isFullUrl(parameter.value.tempApi)) {
+      //  完整地址
+      a.href = templateUrl
+    } else {
+      let searchParams = new URLSearchParams(parameter.value.tempParams || {})
+      let url = parameter.value.tempApi + '?' + searchParams.toString()
+      if (url.startsWith('/')) {
+        url = url.substring(1, url.length)
+      }
+      a.href = templateUrl + url
+    }
+    a.download = `${parameter.value.title}模板`
+    document.body.appendChild(a)
+    a.click()
+    document.body.removeChild(a)
+    return
+  }
+  useDownload({
+    api: parameter.value.tempApi,
+    tempName: `${parameter.value.title}模板`,
+    params: parameter.value.tempParams,
+    isNotify: parameter.value.isNotify,
+    fileType: parameter.value.suffix
+  })
+}
+// 上传loading状态
+const uploadLoading = ref(false)
+
+// 文件上传
+const uploadExcel = async (param: UploadRequestOptions) => {
+  try {
+    uploadLoading.value = true
+    let excelFormData = new FormData()
+    excelFormData.append(parameter.value.fileName || 'file', param.file)
+    // 合并importParams参数
+    if (parameter.value.importParams) {
+      Object.keys(parameter.value.importParams).forEach(key => {
+        excelFormData.append(key, parameter.value.importParams[key])
+      })
+    }
+    // excelFormData.append('isCover', isCover.value as unknown as Blob)
+    const response = await parameter.value.importApi!(excelFormData)
+    // 展示导入结果
+    if (parameter.value.isShowCount && response) {
+      const { failCount, errorMsg, successCount } = response
+      importData.value = {
+        failCount,
+        errorMsg,
+        successCount
+      }
+    }
+    console.log(excelFormData, response)
+    // 存储导入成功的接口数据
+    importResponse.value = response
+    return response
+  } catch (error: any) {
+    importData.value = {
+      successCount: 0,
+      failCount: 0,
+      errorMsg: error.message || '导入失败'
+    }
+    console.log(error)
+  } finally {
+    uploadLoading.value = false
+  }
+}
+
+/**
+ * @description 文件上传之前判断
+ * @param file 上传的文件
+ * */
+const beforeExcelUpload = (file: UploadRawFile) => {
+  const isExcel = parameter.value.fileType!.includes(file.type as File.ExcelMimeType)
+  const fileSize = file.size / 1024 / 1024 < parameter.value.fileSize!
+  if (!isExcel)
+    ElNotification({
+      title: '温馨提示',
+      message: '上传文件只能是 xls / xlsx 格式！',
+      type: 'warning'
+    })
+  if (!fileSize)
+    setTimeout(() => {
+      ElNotification({
+        title: '温馨提示',
+        message: `上传文件大小不能超过 ${parameter.value.fileSize}MB！`,
+        type: 'warning'
+      })
+    }, 0)
+  return isExcel && fileSize
+}
+
+// 文件数超出提示
+const handleExceed = files => {
+  // 判断是否可以替换
+  if (parameter.value.isReplace && excelLimit.value == 1) {
+    // 清空并替换操作
+    clearFileData()
+    uploadRef.value!.clearFiles()
+    const file = files[0] as UploadRawFile
+    file.uid = genFileId()
+    uploadRef.value!.handleStart(file)
+    console.log('handleExceed', files)
+    //执行上传
+    uploadRef.value!.submit()
+  } else {
+    // 温馨提示
+    ElNotification({
+      title: '温馨提示',
+      message: '最多只能上传一个文件！',
+      type: 'warning'
+    })
+  }
+}
+
+// 上传错误提示
+const excelUploadError = (error: any) => {
+  // ElNotification({
+  //   title: '温馨提示',
+  //   message: error.message || '上传失败',
+  //   type: 'error'
+  // })
+}
+// 文件列表移除文件时的钩子
+const excelUploadRemove = val => {
+  nextTick(() => {
+    if (fileList.value && !fileList.value.length) {
+      clearFileData()
+    }
+    const params = { val: val, fileList: fileList.value }
+    parameter.value.onRemove && parameter.value.onRemove(params)
+  })
+}
+// 清空数据
+const clearFileData = () => {
+  tableData.value = [] // 清空表格
+  fileList.value = [] // 清空文件列表
+  importResponse.value = null
+  radioInfo.value.rowKey = null
+  radioInfo.value.row = null
+  disabled.value = true
+}
+
+// 导入成功的函数,response是 uploadExcel() return的值
+const excelUploadSuccess = response => {
+  console.log(response, 'response')
+  if (!response) return
+  // 必须文件上传成功之后才能点击确定按钮
+  disabled.value = false
+  if (parameter.value.columns && parameter.value.columns.length && response.result) {
+    // 如果接口返回的表格数据不是response.result或者格式不对，就需要自己在importApi中处理数据与结构
+    tableData.value = response.result || []
+  }
+  if (parameter.value.autoClose) {
+    // 如果需要自动关闭弹框，则关闭与刷新
+    handleClose()
+    parameter.value.getTableList && parameter.value.getTableList(response)
+  }
+  // 如果需要自定义成功回调，则执行自定义回调
+  parameter.value.importCallBack && parameter.value.importCallBack(response)
+}
+
+//下载错误数据
+const downErrorFile = () => {
+  parameter.value?.downErrorFile && parameter.value?.downErrorFile(importData.value)
+}
+
+defineExpose({
+  acceptParams,
+  handleClose,
+  jztTableRef
+})
+</script>
+<style lang="scss" scoped>
+@use './index';
+</style>

package/src/JztImportExcel/interface/index.ts

@@ -0,0 +1,25 @@
+export interface ExcelParameterProps {
+  title?: string; // 标题
+  tips: string; // 说明
+  fileSize?: number; // 上传文件的大小
+  fileType?: File.ExcelMimeType[]; // 上传文件的类型
+  tempApi?: (params: any) => Promise<any>; // 下载模板的Api,
+  tempParams?: any; // 下载模板的入参
+  importApi?: (params: any) => Promise<any>; // 批量导入的Api
+  importParams?: any; // 批量导入的入参
+  getTableList?: (response?: Record<string, any>) => void; // 获取表格数据的Api
+  columns?: any[];
+  tableData?: any[];
+  isDrag?: boolean; // 是否可拖拽上传
+  isIcon?: boolean; // 是否展示提示图标
+  width?: string; // 弹框宽度
+  fileName: string; // 文件流的名称 excelFormData
+  confirmText?: string | boolean; // 确定按钮的文字
+  confirmFun?: (params: any) => void; // 确定按钮的执行函数
+  autoClose?: boolean; // 导入成功后是否自动关闭弹框
+  importCallBack?: (params: any) => void; // 导入成功的回调函数
+  onRemove?: (params: { val: any; fileList: any[] }) => void; // 文件移除时的函数
+  isReplace?: boolean; // 是否可以在选中时自动替换上一个文件，必须设置limit=1
+  suffix?: string; // 后缀
+  isNotify?: boolean;
+}