create-jnrs-template-vue 1.1.14 → 1.1.15

package/jnrs-template-vue/src/components/base/JnFileUpload.vue

@@ -0,0 +1,433 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : JnFileUpload.vue
+ @Date   : 2025/12/25
+ @Desc.  : 通用上传 & 回显组件 上传类型为File类型 二进制
+ -->
+
+<script setup lang="ts">
+import type { UploadRawFile, UploadFile, FormInstance } from 'element-plus'
+import type { Attachment } from '@/types'
+import { ElMessage } from 'element-plus'
+import { ref, computed, nextTick } from 'vue'
+import { downloadFile } from '@/utils/packages'
+import iconUnknown from '@/assets/images/fileIcon/iconUnknown.png'
+import iconCode from '@/assets/images/fileIcon/iconCode.png'
+import iconWord from '@/assets/images/fileIcon/iconWord.png'
+import iconWps from '@/assets/images/fileIcon/iconWps.png'
+import iconText from '@/assets/images/fileIcon/iconText.png'
+import iconPpt from '@/assets/images/fileIcon/iconPpt.png'
+import iconPdf from '@/assets/images/fileIcon/iconPdf.png'
+import iconArchive from '@/assets/images/fileIcon/iconArchive.png'
+import iconWindows from '@/assets/images/fileIcon/iconWindows.png'
+import iconMac from '@/assets/images/fileIcon/iconMac.png'
+import iconVideo from '@/assets/images/fileIcon/iconVideo.png'
+import iconAudio from '@/assets/images/fileIcon/iconAudio.png'
+import iconFlash from '@/assets/images/fileIcon/iconFlash.png'
+import iconGif from '@/assets/images/fileIcon/iconGif.png'
+import iconImage from '@/assets/images/fileIcon/iconImage.png'
+import iconFile from '@/assets/images/fileIcon/iconFile.png'
+import iconExcel from '@/assets/images/fileIcon/iconExcel.png'
+import iconOfd from '@/assets/images/fileIcon/iconOfd.png'
+
+type MixedUploadFile = Attachment | UploadRawFile
+
+interface Props {
+  /**
+   * 绑定的模型值（文件列表），默认为空数组
+   */
+  modelValue: MixedUploadFile[]
+
+  /**
+   * 接受的文件类型（如 'image/*'），默认为空字符串
+   */
+  accept?: string
+
+  /**
+   * 是否启用拖拽上传，默认为 false
+   */
+  drag?: boolean
+
+  /**
+   * 单个文件大小限制（单位：MB），默认为 0（不限制）
+   */
+  fileSizeMb?: number
+
+  /**
+   * 最大上传文件数量，0 表示不限制，默认为 0
+   */
+  limit?: number
+
+  /**
+   * Element Plus 组件的尺寸，默认为 'small'
+   */
+  size?: '' | 'small' | 'default' | 'large'
+
+  /**
+   * 父级组件的表单引用（用于触发校验），默认为 null
+   */
+  formRef?: FormInstance
+
+  /**
+   * 父级表单中用于校验的字段名（需配合 formRef 使用），默认为空字符串
+   */
+  validateFieldName?: string
+}
+
+const {
+  modelValue,
+  accept = '',
+  drag = false,
+  fileSizeMb = 100,
+  limit = 0,
+  size = 'small',
+  formRef = null,
+  validateFieldName = ''
+} = defineProps<Props>()
+
+const emit = defineEmits(['update:modelValue'])
+
+const loading = ref(false)
+const uploadRef = ref()
+const isDisable = computed(() => {
+  return limit && modelValue && modelValue.length >= limit
+})
+
+const fileSizeFmt = (value: number) => {
+  const units = ['B', 'KB', 'MB', 'GB']
+  let size = value
+  let unitIndex = 0
+
+  while (size >= 1024 && unitIndex < units.length - 1) {
+    size /= 1024
+    unitIndex++
+  }
+
+  const fixedDigits = unitIndex === 0 ? 0 : unitIndex === 1 ? 0 : 1
+  return size.toFixed(fixedDigits) + ' ' + units[unitIndex]
+}
+
+const getAccessoryIcon = (type: string) => {
+  let icon = iconUnknown
+  if (type.includes('code')) {
+    icon = iconCode
+  } else if (type.includes('text')) {
+    icon = iconText
+  } else if (type.includes('wps')) {
+    icon = iconWps
+  } else if (type.includes('word')) {
+    icon = iconWord
+  } else if (type.includes('ppt')) {
+    icon = iconPpt
+  } else if (type.includes('pdf')) {
+    icon = iconPdf
+  } else if (type.includes('archive')) {
+    icon = iconArchive
+  } else if (type.includes('x-msdownload')) {
+    icon = iconWindows
+  } else if (type.includes('x-apple-aspen-config')) {
+    icon = iconMac
+  } else if (type.includes('video')) {
+    icon = iconVideo
+  } else if (type.includes('audio')) {
+    icon = iconAudio
+  } else if (type.includes('flash')) {
+    icon = iconFlash
+  } else if (type.includes('gif')) {
+    icon = iconGif
+  } else if (type.includes('image')) {
+    icon = iconImage
+  } else if (type.includes('file')) {
+    icon = iconFile
+  } else if (type.includes('excel')) {
+    icon = iconExcel
+  } else if (type.includes('ofd')) {
+    icon = iconOfd
+  }
+  return icon
+}
+
+const loadingProgress = () => {
+  loading.value = true
+}
+
+const handleChange = (uploadFile: UploadFile) => {
+  const { status, raw } = uploadFile
+
+  if (status === 'ready' && raw) {
+    // 数量校验
+    if (limit && modelValue && modelValue.length >= limit) {
+      ElMessage({
+        message: `最多只能上传 ${limit} 个文件!`,
+        type: 'warning',
+        grouping: true,
+        duration: 3000
+      })
+      return false
+    }
+
+    // 文件类型校验
+    if (accept && accept.split(',').length > 0) {
+      let flag = false
+      accept.split(',').forEach((element) => {
+        if (raw.name.indexOf(element) > -1) {
+          flag = true
+        }
+      })
+      if (!flag) {
+        ElMessage({
+          message: `上传文件只能是 ${accept} 格式！`,
+          type: 'warning',
+          grouping: true,
+          duration: 3000
+        })
+        return false
+      }
+    }
+
+    // 文件大小校验
+    if (fileSizeMb && raw.size / 1024 / 1024 > fileSizeMb) {
+      ElMessage({
+        message: `上传的文件大小不能超过 ${fileSizeMb} MB!`,
+        type: 'warning',
+        grouping: true,
+        duration: 3000
+      })
+      return false
+    }
+
+    const temp = modelValue
+    temp.push(uploadFile.raw as UploadRawFile)
+    emit('update:modelValue', temp)
+
+    nextTick(() => {
+      if (formRef && validateFieldName) {
+        formRef.validateField(validateFieldName)
+      }
+      uploadRef.value?.clearFiles()
+      loading.value = false
+    })
+  }
+}
+
+const deleteFile = (file: MixedUploadFile) => {
+  const temp = modelValue
+  const index = modelValue.findIndex((item) => {
+    // Attachment 类型
+    if ('id' in file && 'id' in item) {
+      return item.id === file.id
+    }
+    // UploadRawFile 类型
+    if ('uid' in file && 'uid' in item) {
+      return item.uid === file.uid
+    }
+  })
+
+  if (index !== -1) {
+    temp.splice(index, 1)
+  }
+
+  emit('update:modelValue', temp)
+
+  nextTick(() => {
+    if (formRef && validateFieldName) {
+      formRef.validateField(validateFieldName)
+    }
+  })
+}
+</script>
+
+<template>
+  <div class="jnFileUpload">
+    <el-upload
+      ref="uploadRef"
+      :http-request="() => {}"
+      :show-file-list="false"
+      :multiple="true"
+      :drag="drag"
+      :accept="accept"
+      :disabled="isDisable"
+      :on-progress="loadingProgress"
+      :on-change="handleChange"
+    >
+      <el-button type="primary" :size="size" :loading="loading" :disabled="isDisable">
+        上传
+        <span v-if="limit" style="display: inline-block; margin-left: 5px">
+          ({{ modelValue ? modelValue.length : 0 }}/{{ limit }})
+        </span>
+      </el-button>
+    </el-upload>
+
+    <div class="uploadTips" :class="{ uploadTips_isDrag: drag }">
+      <span v-if="accept">
+        文件类型为
+        <b>{{ accept }}</b>
+      </span>
+      <span v-if="accept">
+        文件大小为
+        <b>{{ fileSizeMb }}MB</b>
+        以内
+      </span>
+    </div>
+
+    <div class="fileList" v-show="modelValue && modelValue.length > 0" v-loading="loading">
+      <div class="fileLis_item" v-for="(item, index) in modelValue" :key="index">
+        <!-- Attachment 类型 -->
+        <template v-if="'id' in item">
+          <div class="fileLis_item_left">
+            <span class="fileLis_item_index">{{ index + 1 }}</span>
+            <img class="fileLis_item_icon" v-if="item.fileType" :src="getAccessoryIcon(item.fileType)" />
+            <span class="fileLis_item_name">{{ item.fileName }}</span>
+            <span class="fileLis_item_size">
+              {{ fileSizeFmt(item.fileSize) }}
+            </span>
+          </div>
+          <div class="fileLis_item_right">
+            <span class="fileLis_item_btn" @click="downloadFile(item.uniqueFileName, item.fileName)">
+              <el-icon><Download /></el-icon>
+            </span>
+            <span class="fileLis_item_btn fileLis_item_btn_danger" @click="deleteFile(item)">
+              <el-icon><Delete /></el-icon>
+            </span>
+          </div>
+        </template>
+
+        <!-- UploadRawFile 类型 -->
+        <template v-if="'uid' in item">
+          <div class="fileLis_item_left">
+            <span class="fileLis_item_index">{{ index + 1 }}</span>
+            <img class="fileLis_item_icon" v-if="item.type" :src="getAccessoryIcon(item.type)" />
+            <span class="fileLis_item_name">{{ item.name }}</span>
+            <span class="fileLis_item_size">
+              {{ fileSizeFmt(item.size) }}
+            </span>
+          </div>
+          <div class="fileLis_item_right">
+            <span class="fileLis_item_btn fileLis_item_btn_danger" @click="deleteFile(item)">
+              <el-icon><Delete /></el-icon>
+            </span>
+          </div>
+        </template>
+      </div>
+    </div>
+  </div>
+</template>
+
+<style lang="scss" scoped>
+.jnFileUpload {
+  position: relative;
+  width: 100%;
+  color: var(--jnrs-font-primary-06);
+
+  :deep(.el-upload-dragger) {
+    padding: 30px 0 10px;
+  }
+
+  .uploadTips {
+    display: block;
+    width: 100%;
+    margin-top: 5px;
+    line-height: 1.2em;
+    span {
+      display: inline-block;
+      margin-right: 10px;
+    }
+    b {
+      color: var(--el-color-danger, #ff3300);
+    }
+  }
+
+  .uploadTips_isDrag {
+    position: absolute;
+    top: 4px;
+    left: 0;
+    text-align: center;
+  }
+
+  .fileList {
+    width: 100%;
+
+    .fileLis_item {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      width: 100%;
+      margin-top: 8px;
+      padding: 5px 0;
+      border: 1px solid var(--jnrs-font-primary-03);
+      background: var(--jnrs-background-primary);
+
+      .fileLis_item_left {
+        flex: 1;
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: flex-start;
+        padding-right: 50px;
+        line-height: 1.1em;
+      }
+
+      .fileLis_item_right {
+        flex-shrink: 0;
+        width: 60px;
+        display: flex;
+        align-items: center;
+        justify-content: flex-end;
+        padding-right: 4px;
+      }
+
+      .fileLis_item_index {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+        line-height: 20px;
+        text-align: center;
+      }
+
+      .fileLis_item_icon {
+        flex-shrink: 0;
+        width: 20px;
+        height: 20px;
+      }
+
+      .fileLis_item_name {
+        padding: 0 4px;
+        word-break: break-all;
+      }
+
+      .fileLis_item_size {
+        position: absolute;
+        right: 0;
+        width: 50px;
+        color: #999;
+        white-space: nowrap;
+        text-align: right;
+      }
+
+      .fileLis_item_btn {
+        flex-shrink: 0;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: 20px;
+        height: 20px;
+        margin: 0 2px;
+        border-radius: 3px;
+        font-size: 16px;
+        color: var(--el-color-primary, #5887f7);
+        transition: all 0.3s ease;
+        cursor: pointer;
+
+        &:hover {
+          background-color: var(--jnrs-card-primary);
+        }
+      }
+
+      .fileLis_item_btn_danger {
+        color: var(--el-color-danger, #ff3300);
+      }
+    }
+  }
+}
+</style>

package/jnrs-template-vue/src/components/base/PdfView.vue

@@ -0,0 +1,106 @@
+<script lang="ts" setup>
+import type { FileItem } from '@jnrs/shared'
+import type { Attachment } from '@/types'
+import { ref, watch, onActivated, onDeactivated, onBeforeUnmount } from 'vue'
+import { blobToUrl } from '@jnrs/shared'
+import { FileApi } from '@/api/common'
+
+import { JnPdfView } from '@jnrs/vue-core/components'
+
+interface Props {
+  /**
+   * 要加载的文件列表 ｜ 文件名唯一标识 uniqueFileName
+   */
+  loadKeys: Attachment[] | string | undefined
+}
+
+const { loadKeys } = defineProps<Props>()
+
+// 存储每个 URL 对应的 URL 对象
+const fileList = ref<FileItem[]>([])
+
+// 存储每个 URL 对应的 revoke 函数用于副作用清理
+const revokeFns = ref<(() => void)[]>([])
+
+// 清理当前所有 Object URL
+const clearUrls = () => {
+  revokeFns.value.forEach((revoke) => revoke())
+  revokeFns.value = []
+  fileList.value = []
+}
+
+const loadFiles = async (keys: Props['loadKeys']) => {
+  clearUrls()
+
+  // 如果是字符串
+  if (typeof keys === 'string') {
+    try {
+      const blob = await FileApi(keys)
+      const { url, revoke } = blobToUrl(blob)
+      fileList.value = [{ src: url, fileName: keys }]
+      revokeFns.value = [revoke]
+    } catch (err) {
+      console.warn(keys, err)
+    }
+    return
+  }
+
+  // 如果是对象
+  if (keys !== null && typeof keys === 'object' && !Array.isArray(keys)) {
+    const { uniqueFileName, fileName } = keys
+    try {
+      const blob = await FileApi(uniqueFileName)
+      const { url, revoke } = blobToUrl(blob)
+      fileList.value = [{ src: url, fileName: fileName || uniqueFileName }]
+      revokeFns.value = [revoke]
+    } catch (err) {
+      console.warn(uniqueFileName, err)
+    }
+    return
+  }
+
+  // 如果是数组
+  if (Array.isArray(keys) && keys.length > 0) {
+    const res = await Promise.all(
+      keys.map(async ({ uniqueFileName, fileName }) => {
+        try {
+          const blob = await FileApi(uniqueFileName)
+          const { url, revoke } = blobToUrl(blob)
+          return { url, fileName, revoke }
+        } catch (err) {
+          console.warn(uniqueFileName, err)
+          return { url: '', fileName: '', revoke: () => {} }
+        }
+      })
+    )
+    fileList.value = res.map(({ url, fileName }) => ({ src: url, fileName }))
+    revokeFns.value = res.map((d) => d.revoke)
+  }
+}
+
+watch(
+  () => loadKeys,
+  (nv) => {
+    loadFiles(nv)
+  },
+  { deep: true, immediate: true }
+)
+
+onActivated(() => {
+  loadFiles(loadKeys)
+})
+
+// 副作用清理
+onDeactivated(() => {
+  clearUrls()
+})
+
+// 副作用清理
+onBeforeUnmount(() => {
+  clearUrls()
+})
+</script>
+
+<template>
+  <jn-pdf-view :fileList="fileList"></jn-pdf-view>
+</template>

package/jnrs-template-vue/src/components/common/JnDatetime.vue

@@ -0,0 +1,37 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : JnDatetime.vue
+ @Date   : 2025/12/25
+ @desc.  : 显示时间格式化，第一行是日期，第二行是时间
+ -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+
+interface Props {
+  value: string
+  color?: string
+}
+const { value = '', color = '' } = defineProps<Props>()
+
+const datetime = computed(() => {
+  if (value && value.split('T').length === 2) {
+    return value.split('T')
+  }
+  if (value && value.split(' ').length === 2) {
+    return value.split(' ')
+  }
+  return false
+})
+</script>
+
+<template>
+  <template v-if="datetime">
+    <div style="line-height: 1.2em" :style="{ color: color }">
+      <div>{{ datetime[0] }}</div>
+      <span style="opacity: 0.7; font-size: 0.9em">{{ datetime[1] }}</span>
+    </div>
+  </template>
+  <span v-else>{{ value }}</span>
+</template>

package/jnrs-template-vue/src/components/common/JnDictTag.vue

@@ -0,0 +1,70 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : JnDictTag.vue
+ @Date   : 2025/12/25
+ @Desc.  : 带颜色的字典标签
+ -->
+
+<script setup lang="ts">
+import { computed } from 'vue'
+import { getDictLabel, getDictColor } from '@/utils/packages'
+
+interface Props {
+  dictName: string
+  value: string | number
+  /**
+   * 是否使用颜色
+   */
+  showColor?: boolean
+  /**
+   * 是否使用 popover
+   */
+  popover?: string
+  /**
+   * 消息放置位置
+   */
+  placement?: 'top' | 'top-left' | 'top-right' | 'bottom' | 'bottom-left' | 'bottom-right'
+}
+
+const { dictName = '', value = '', showColor = true, popover = '' } = defineProps<Props>()
+
+const computedColor = computed(() => {
+  return showColor ? getDictColor(dictName, value) : 'unset'
+})
+</script>
+
+<template>
+  <el-popover :content="popover" placement="top" :disabled="!popover">
+    <template #reference>
+      <span
+        class="dictTag"
+        :style="{
+          backgroundColor: computedColor
+        }"
+      >
+        <span
+          :class="{ dictTag_label_showColor: showColor }"
+          :style="{
+            color: computedColor
+          }"
+        >
+          {{ getDictLabel(dictName, value) }}
+        </span>
+      </span>
+    </template>
+  </el-popover>
+</template>
+
+<style lang="scss" scoped>
+.dictTag {
+  padding: 2px 8px;
+  border-radius: 8px;
+  white-space: nowrap;
+
+  .dictTag_label_showColor {
+    font-size: 0.8em;
+    filter: invert(0.6) brightness(0.6);
+  }
+}
+</style>

package/jnrs-template-vue/src/components/common/JnEdit.vue

@@ -0,0 +1,68 @@
+<!--
+ @Author : TanRui
+ @WeChat : Tan578853789
+ @File   : JnEdit.vue
+ @Date   : 2025/12/25
+ @Desc.  : 表格编辑组件
+ -->
+
+<script setup lang="ts">
+import { ref } from 'vue'
+
+interface Props {
+  /**
+   * 对话框的宽度，默认值为 50%
+   */
+  title?: string
+  /**
+   * 对话框的宽度，默认值为 50%
+   */
+  width?: string | number
+}
+
+const { width = '50%', title = '' } = defineProps<Props>()
+
+const emit = defineEmits<{
+  closed: []
+}>()
+
+const dialogVisible = ref(false)
+
+const open = () => {
+  dialogVisible.value = true
+}
+
+const close = () => {
+  dialogVisible.value = false
+}
+
+const handleClosed = () => {
+  emit('closed')
+}
+
+defineExpose({
+  open,
+  close,
+  handleClosed
+})
+</script>
+
+<template>
+  <el-dialog
+    v-model="dialogVisible"
+    :title="title"
+    :width="width"
+    :close-on-click-modal="true"
+    :close-on-press-escape="true"
+    draggable
+    overflow
+    @closed="handleClosed"
+  >
+    <slot></slot>
+    <template #footer>
+      <slot name="footer"></slot>
+    </template>
+  </el-dialog>
+</template>
+
+<style lang="scss" scoped></style>