@jari-ace/element-plus-component 0.5.5 → 0.5.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@jari-ace/element-plus-component",
3
3
  "private": false,
4
- "version": "0.5.5",
4
+ "version": "0.5.7",
5
5
  "main": "lib/index.umd.cjs",
6
6
  "module": "lib/index.js",
7
7
  "types": "dist/index.d.ts",
@@ -27,7 +27,7 @@
27
27
  "pretty-bytes": "^7.1.0",
28
28
  "vue-pdf-embed": "^2.1.3",
29
29
  "vue-router": "^5.0.1",
30
- "@jari-ace/app-bolts": "0.7.8"
30
+ "@jari-ace/app-bolts": "0.7.9"
31
31
  },
32
32
  "devDependencies": {
33
33
  "@types/lodash-es": "^4.17.12",
@@ -368,7 +368,7 @@ const handleForward = async () => {
368
368
  width: 100%;
369
369
  height: 100%;
370
370
  background-color: #f5f7fa;
371
- z-index: 2000;
371
+ z-index: 300;
372
372
  display: flex;
373
373
  flex-direction: column;
374
374
  }
@@ -5,7 +5,7 @@ import {getValue, setValue} from "../../utils/objectUtils";
5
5
  import Uploader from "./uploader.vue";
6
6
 
7
7
  export interface JaUploaderProps {
8
- /**
8
+ /**
9
9
  * 应用名
10
10
  */
11
11
  serviceName: string,
@@ -18,7 +18,7 @@ export interface JaUploaderProps {
18
18
  */
19
19
  attachToken?: string,
20
20
  /**
21
- * 数据密级
21
+ * 数据密集
22
22
  */
23
23
  classificationLevel?: number,
24
24
  /**
@@ -28,7 +28,31 @@ export interface JaUploaderProps {
28
28
  /**
29
29
  * 文件列表最大高度
30
30
  */
31
- maxHeight?: string | number
31
+ maxHeight?: string | number,
32
+ /**
33
+ * 是否允许上传, 为空表示采用应用里的附件设置
34
+ */
35
+ allowUpload?: boolean,
36
+ /**
37
+ * 是否允许下载,为空表示采用应用里的附件设置
38
+ */
39
+ allowDownload?: boolean,
40
+ /**
41
+ * 是否允许删除,为空表示采用应用里的附件设置
42
+ */
43
+ allowDelete?: boolean,
44
+ /**
45
+ * 是否允许预览,为空表示采用应用里的附件设置
46
+ */
47
+ allowPreview?: boolean,
48
+ /**
49
+ * 布局方式: list-列表布局(默认), inline-行内布局
50
+ */
51
+ layout?: 'list' | 'inline',
52
+ /**
53
+ * 是否隐藏下载所有按钮
54
+ */
55
+ hideDownloadAll?: boolean
32
56
  }
33
57
 
34
58
  const props = defineProps<JaUploaderProps>();
@@ -61,8 +85,18 @@ defineExpose({
61
85
  </script>
62
86
 
63
87
  <template>
64
- <uploader :service-name="serviceName" :max-height="maxHeight" :height="height" :config-key="configKey"
65
- :attach-token="attachToken" :classification-level="classificationLevel"
88
+ <uploader :service-name="serviceName"
89
+ :max-height="maxHeight"
90
+ :height="height"
91
+ :config-key="configKey"
92
+ :attach-token="attachToken"
93
+ :classification-level="classificationLevel"
94
+ :allow-delete="allowDelete"
95
+ :allow-download="allowDownload"
96
+ :allow-preview="allowPreview"
97
+ :layout="layout"
98
+ :hide-download-all="hideDownloadAll"
99
+ :allow-upload="allowUpload"
66
100
  v-model="mv"
67
101
  @change="onChange"></uploader>
68
102
  </template>
@@ -92,9 +92,18 @@ const props = withDefaults(defineProps<{
92
92
  /**
93
93
  * 布局方式: list-列表布局(默认), inline-行内布局
94
94
  */
95
- layout?: 'list' | 'inline'
95
+ layout?: 'list' | 'inline',
96
+ /**
97
+ * 是否隐藏下载所有按钮
98
+ */
99
+ hideDownloadAll?: boolean
96
100
  }>(), {
97
- layout: 'list'
101
+ layout: 'list',
102
+ allowUpload: undefined,
103
+ allowDownload: undefined,
104
+ allowDelete: undefined,
105
+ allowPreview: undefined,
106
+ hideDownloadAll: false
98
107
  });
99
108
  const attachId = defineModel<string>({
100
109
  required: false
@@ -178,15 +187,6 @@ const emits = defineEmits<{
178
187
  let uppy: Uppy | undefined;
179
188
  curAttachToken.value = props.attachToken;
180
189
 
181
- onMounted(async () => {
182
- await updateAllowedClassificationLevels();
183
- if (props.attachToken) {
184
- await initLoad();
185
- } else {
186
- await initNew();
187
- }
188
- });
189
-
190
190
  onUnmounted(() => {
191
191
  if (uppy) uppy.destroy();
192
192
  uppy = undefined;
@@ -198,7 +198,7 @@ async function updateAllowedClassificationLevels() {
198
198
  classificationLevels.value = await useSystemClassificationLevels();
199
199
  classificationLevelMap.value = await useSystemClassificationLevelMap();
200
200
  allowedClassificationLevels.value = classificationLevels.value.filter(l => l.value >= cl);
201
- highestClassificationLevel.value = Math.min(...allowedClassificationLevels.value.map(l=>l.value))
201
+ highestClassificationLevel.value = Math.min(...allowedClassificationLevels.value.map(l => l.value))
202
202
  console.log(`附件控件密级调试:
203
203
  表单密级:`, props.classificationLevel, `
204
204
  用户密级:`, user.value?.classifiedLevel, `
@@ -326,6 +326,7 @@ function createUppyInstance() {
326
326
  }
327
327
 
328
328
  async function onUploadBtnClick() {
329
+ console.log('upload btn clicked')
329
330
  const cfg = uploadInitParams.value?.fileConfig;
330
331
  if (cfg) {
331
332
  uppy?.setMeta({
@@ -514,9 +515,13 @@ watch(() => props.attachToken, () => {
514
515
  } else {
515
516
  initNew();
516
517
  }
518
+ }, {
519
+ immediate: true
517
520
  });
518
521
 
519
- watch(()=> props.classificationLevel, updateAllowedClassificationLevels)
522
+ watch(() => props.classificationLevel, updateAllowedClassificationLevels, {
523
+ immediate: true
524
+ })
520
525
 
521
526
  function getFileIcon(fileName: string) {
522
527
  if (!fileName) return Document;
@@ -557,7 +562,7 @@ function getFileIcon(fileName: string) {
557
562
  :disabled="loading" size="small" v-if="allowedClassificationLevels.length <= 1 && checkAllowUpload()">
558
563
  上传{{ uploadInitParams?.fileConfig.enableClassifiedLevel ? "(非密)" : "" }}
559
564
  </el-button>
560
- <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload()" :loading="loading"
565
+ <el-button plain :icon="Download" @click="downloadAll" v-if="checkAllowDownload() && !hideDownloadAll" :loading="loading"
561
566
  :disabled="loading || files?.length === 0" size="small">
562
567
  全部下载
563
568
  </el-button>
@@ -582,13 +587,15 @@ function getFileIcon(fileName: string) {
582
587
  <span class="loader-shimmer">正在上传,已完成{{ uploadingProgress }}%...</span>
583
588
  </p>
584
589
  </div>
585
-
590
+
586
591
  <div v-if="layout === 'inline'" class="inline-files">
587
- <div v-for="file in files" :key="file.id" class="inline-file-item">
592
+ <div v-for="file in files" :key="file.id" class="inline-file-item">
588
593
  <el-popover placement="top" :width="300" trigger="hover">
589
594
  <template #reference>
590
595
  <div class="inline-file-icon-wrapper">
591
- <el-icon class="file-icon" size="20"><component :is="getFileIcon(file.fileName)" /></el-icon>
596
+ <el-icon class="file-icon" size="20">
597
+ <component :is="getFileIcon(file.fileName)" />
598
+ </el-icon>
592
599
  </div>
593
600
  </template>
594
601
  <div class="file-popover-content">
@@ -596,38 +603,43 @@ function getFileIcon(fileName: string) {
596
603
  <span class="label">文件名:</span>
597
604
  <span class="value">{{ file.fileName }}</span>
598
605
  </div>
599
- <div class="popover-row">
606
+ <div class="popover-row">
600
607
  <span class="label">大小:</span>
601
608
  <span class="value">{{ prettyBytes(file.fileSize) }}</span>
602
609
  </div>
603
- <div class="popover-row">
610
+ <div class="popover-row">
604
611
  <span class="label">密级:</span>
605
612
  <span class="value">
606
- <el-tag size="small"
613
+ <el-tag size="small"
607
614
  :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
608
615
  {{ classificationLevelMap?.get(file.classifiedLevel) }}
609
616
  </el-tag>
610
617
  </span>
611
618
  </div>
612
619
  <div class="popover-actions">
613
- <el-button link type="primary" @click="previewFile(file.token)"
620
+ <el-button link type="primary" @click="previewFile(file.token)"
614
621
  v-if="checkAllowPreview(file)">预览
615
622
  </el-button>
616
- <el-button link type="primary" @click="downloadFile(file.token)" v-if="checkAllowDownload()">下载
623
+ <el-button link type="primary" @click="downloadFile(file.token)"
624
+ v-if="checkAllowDownload()">下载
617
625
  </el-button>
618
- <el-button link type="danger" @click="delUploadedFile(file)" v-if="checkAllowDelete()">删除
626
+ <el-button link type="danger" @click="delUploadedFile(file)"
627
+ v-if="checkAllowDelete()">删除
619
628
  </el-button>
620
629
  </div>
621
630
  </div>
622
631
  </el-popover>
623
- </div>
632
+ </div>
624
633
  </div>
625
634
  </div>
626
- <div v-if="layout === 'list'" class="file-list" :style="{ height: typeof props.height === 'number' ? props.height + 'px' : props.height, maxHeight: typeof props.maxHeight === 'number' ? props.maxHeight + 'px' : props.maxHeight }">
627
- <div v-if="files.length === 0" class="empty-text">暂无文件</div>
635
+ <div v-if="layout === 'list'" class="file-list"
636
+ :style="{ height: typeof props.height === 'number' ? props.height + 'px' : props.height, maxHeight: typeof props.maxHeight === 'number' ? props.maxHeight + 'px' : props.maxHeight }">
637
+ <div v-if="files?.length === 0" class="empty-text">暂无文件</div>
628
638
  <div v-for="file in files" :key="file.id" class="file-item">
629
639
  <div class="file-main">
630
- <el-icon class="file-icon"><component :is="getFileIcon(file.fileName)" /></el-icon>
640
+ <el-icon class="file-icon">
641
+ <component :is="getFileIcon(file.fileName)" />
642
+ </el-icon>
631
643
  <span class="file-name" :title="file.fileName">{{ file.fileName }}</span>
632
644
  </div>
633
645
  <div class="file-info-right">
@@ -637,9 +649,10 @@ function getFileIcon(fileName: string) {
637
649
  :type="file.classifiedLevel < 50 ? (file.classifiedLevel < 30 ? 'danger' : 'warning') : 'info'">
638
650
  {{ classificationLevelMap?.get(file.classifiedLevel) }}
639
651
  </el-tag>
640
- <el-tooltip v-if="file.classifiedLevel < highestClassificationLevel" content="文件密级已高于当前许可范围,请立即删除">
652
+ <el-tooltip v-if="file.classifiedLevel < highestClassificationLevel"
653
+ content="文件密级已高于当前许可范围,请立即删除">
641
654
  <el-icon color="#F56C6C" class="warning-icon">
642
- <warning-filled/>
655
+ <warning-filled />
643
656
  </el-icon>
644
657
  </el-tooltip>
645
658
  </div>
@@ -687,7 +700,7 @@ function getFileIcon(fileName: string) {
687
700
  flex-wrap: wrap;
688
701
  gap: 8px;
689
702
  margin-left: 8px;
690
-
703
+
691
704
  .inline-file-item {
692
705
  .inline-file-icon-wrapper {
693
706
  cursor: pointer;
@@ -697,7 +710,7 @@ function getFileIcon(fileName: string) {
697
710
  padding: 4px;
698
711
  border-radius: 4px;
699
712
  color: var(--el-text-color-regular);
700
-
713
+
701
714
  &:hover {
702
715
  background-color: var(--el-fill-color-light);
703
716
  color: var(--el-color-primary);
@@ -763,23 +776,23 @@ function getFileIcon(fileName: string) {
763
776
  flex-direction: column;
764
777
  gap: 8px;
765
778
  font-size: 14px;
766
-
779
+
767
780
  .popover-row {
768
781
  display: flex;
769
782
  align-items: flex-start;
770
-
783
+
771
784
  .label {
772
785
  color: var(--el-text-color-secondary);
773
786
  width: 60px;
774
787
  flex-shrink: 0;
775
788
  }
776
-
789
+
777
790
  .value {
778
791
  color: var(--el-text-color-primary);
779
792
  word-break: break-all;
780
793
  }
781
794
  }
782
-
795
+
783
796
  .popover-actions {
784
797
  display: flex;
785
798
  justify-content: flex-end;
@@ -794,7 +807,7 @@ function getFileIcon(fileName: string) {
794
807
  overflow-y: auto;
795
808
  border: 1px solid var(--el-border-color-lighter);
796
809
  border-radius: 4px;
797
-
810
+
798
811
  .empty-text {
799
812
  text-align: center;
800
813
  padding: 20px;
@@ -854,7 +867,7 @@ function getFileIcon(fileName: string) {
854
867
  display: flex;
855
868
  align-items: center;
856
869
  gap: 4px;
857
-
870
+
858
871
  .warning-icon {
859
872
  margin-left: 4px;
860
873
  cursor: help;
@@ -864,7 +877,7 @@ function getFileIcon(fileName: string) {
864
877
  .file-actions {
865
878
  display: flex;
866
879
  gap: 8px;
867
-
880
+
868
881
  .el-button {
869
882
  padding: 0;
870
883
  height: auto;