free-fe-core-modules 0.0.55 → 0.1.2
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/components/Basic/EIcon.vue +4 -14
- package/components/Dialog/index.js +1 -1
- package/free-field/Fields/AgreementCheck.js +3 -3
- package/free-field/Fields/DateRange.js +4 -3
- package/free-field/Fields/DynamicList.js +1 -2
- package/free-field/Fields/File.vue +46 -152
- package/free-field/Fields/FileList.vue +47 -156
- package/free-field/Fields/FixedList.vue +17 -49
- package/free-field/Fields/FreeFieldList.vue +17 -64
- package/free-field/Fields/Image.vue +50 -128
- package/free-field/Fields/ImageList.vue +42 -107
- package/free-field/Fields/Number.js +0 -1
- package/free-field/Fields/Permission.vue +8 -20
- package/free-field/Fields/Search.vue +51 -109
- package/free-field/Fields/Select.vue +49 -130
- package/free-field/Fields/SingleList.vue +19 -28
- package/free-field/Fields/YearRange.vue +22 -36
- package/free-field/Fields/pdfviewer.js +5 -6
- package/free-field/composible/fieldWrapper.js +1 -2
- package/free-field/composible/useUploader.js +5 -5
- package/index.js +8 -9
- package/package.json +1 -1
- package/view/dict/index.vue +27 -66
|
@@ -1,21 +1,11 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<span class="e-icon justify-center items-center">
|
|
3
|
-
<q-icon
|
|
4
|
-
|
|
5
|
-
class="full-width full-height"
|
|
6
|
-
:name="name"
|
|
7
|
-
></q-icon>
|
|
8
|
-
<q-img
|
|
9
|
-
v-else
|
|
10
|
-
class="full-width full-height"
|
|
11
|
-
style="display: block;"
|
|
12
|
-
:src="imgPath"
|
|
13
|
-
round
|
|
14
|
-
>
|
|
3
|
+
<q-icon v-if="isIcon" class="full-width full-height" :name="name"></q-icon>
|
|
4
|
+
<q-img v-else class="full-width full-height" style="display: block;" :src="imgPath" round>
|
|
15
5
|
<slot></slot>
|
|
16
6
|
<template v-slot:error v-if="!hideError">
|
|
17
7
|
<div class="error-slot column absolute-full justify-center text-center">
|
|
18
|
-
<span class="no-picture-text full-width">{{noImageText}}</span>
|
|
8
|
+
<span class="no-picture-text full-width">{{ noImageText }}</span>
|
|
19
9
|
</div>
|
|
20
10
|
</template>
|
|
21
11
|
</q-img>
|
|
@@ -23,7 +13,7 @@
|
|
|
23
13
|
</template>
|
|
24
14
|
|
|
25
15
|
<script>
|
|
26
|
-
import { ref, computed, defineComponent, getCurrentInstance, watchEffect
|
|
16
|
+
import { ref, computed, defineComponent, getCurrentInstance, watchEffect } from 'vue';
|
|
27
17
|
|
|
28
18
|
export default defineComponent({
|
|
29
19
|
name: 'EIcon',
|
|
@@ -14,7 +14,7 @@ MsgDialog.install = (app) => {
|
|
|
14
14
|
|
|
15
15
|
dialogApp.config.globalProperties = app.config.globalProperties;
|
|
16
16
|
|
|
17
|
-
const {
|
|
17
|
+
const { ...appContext } = app._context;
|
|
18
18
|
Object.assign(dialogApp._context, appContext);
|
|
19
19
|
|
|
20
20
|
MsgDialogInstance = dialogApp.mount('#free-dialog');
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import { defineComponent, h, ref, getCurrentInstance } from 'vue';
|
|
2
|
-
import { QCheckbox } from 'quasar';
|
|
1
|
+
import { defineComponent, h, ref, getCurrentInstance, defineExpose } from 'vue';
|
|
2
|
+
import { QCheckbox, QIcon } from 'quasar';
|
|
3
3
|
import { useFreeField, freeFieldProps } from '../composible/useFreeField';
|
|
4
4
|
|
|
5
5
|
export default defineComponent({
|
|
@@ -21,7 +21,7 @@ export default defineComponent({
|
|
|
21
21
|
...freeFieldProps,
|
|
22
22
|
},
|
|
23
23
|
emits: ['input'],
|
|
24
|
-
setup(props, { emit
|
|
24
|
+
setup(props, { emit }){
|
|
25
25
|
if (!props.Field) return {};
|
|
26
26
|
|
|
27
27
|
const { proxy:vm } = getCurrentInstance();
|
|
@@ -1,8 +1,9 @@
|
|
|
1
1
|
import { ref, defineComponent, getCurrentInstance, h, computed, watch, watchEffect } from 'vue';
|
|
2
2
|
import { QInput, QIcon, QPopupProxy, QDate } from 'quasar';
|
|
3
|
-
import { useFreeField, freeFieldProps } from '../composible/useFreeField';
|
|
4
|
-
import freeFieldLabel from '../composible/freeFieldLabel';
|
|
5
|
-
import { useFormValidator} from '../../composible/useFormValidator';
|
|
3
|
+
import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
|
|
4
|
+
import freeFieldLabel from '../composible/freeFieldLabel.js';
|
|
5
|
+
import { useFormValidator} from '../../composible/useFormValidator.js';
|
|
6
|
+
import ReadonlyContent from '../composible/readonlyContent.js';
|
|
6
7
|
|
|
7
8
|
export default defineComponent({
|
|
8
9
|
name: 'InputFieldDateRange',
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import { ref, defineComponent,
|
|
1
|
+
import { ref, defineComponent, h, computed, watchEffect } from 'vue';
|
|
2
2
|
import { QTable, QTh, QTd, QTr, QIcon } from 'quasar';
|
|
3
3
|
import { useFreeField, freeFieldProps } from '../composible/useFreeField';
|
|
4
4
|
import freeFieldLabel from '../composible/freeFieldLabel';
|
|
@@ -247,7 +247,6 @@ export default defineComponent({
|
|
|
247
247
|
const showCell = (p) => {
|
|
248
248
|
const colNum = Number(p.col.name);
|
|
249
249
|
|
|
250
|
-
// eslint-disable-next-line no-restricted-globals
|
|
251
250
|
if (isNaN(colNum)) return true;
|
|
252
251
|
|
|
253
252
|
if (p.row.rowSize !== void 0) {
|
|
@@ -1,87 +1,35 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="row free-field-file" v-if="Field">
|
|
3
|
-
<span
|
|
4
|
-
:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<q-tooltip
|
|
9
|
-
v-if="Field.Description"
|
|
10
|
-
anchor="top right"
|
|
11
|
-
>{{Field.Description}}</q-tooltip>
|
|
12
|
-
{{Field.Label || ''}}
|
|
13
|
-
<span
|
|
14
|
-
v-if="Field.Required"
|
|
15
|
-
class="required-mark"
|
|
16
|
-
>*</span>
|
|
3
|
+
<span :class="`field-label ${(Field.Label && Field.Label.trim().length)
|
|
4
|
+
? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`" v-if="Field.Label !== void 0">
|
|
5
|
+
<q-tooltip v-if="Field.Description" anchor="top right">{{ Field.Description }}</q-tooltip>
|
|
6
|
+
{{ Field.Label || '' }}
|
|
7
|
+
<span v-if="Field.Required" class="required-mark">*</span>
|
|
17
8
|
</span>
|
|
18
9
|
|
|
19
|
-
<q-uploader
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
@rejected="filesRejected"
|
|
23
|
-
ref="uploader"
|
|
24
|
-
:factory="factoryFn"
|
|
25
|
-
auto-upload
|
|
26
|
-
:max-file-size="maxFileSize"
|
|
27
|
-
:accept="acceptedFileTypes"
|
|
28
|
-
:class="`q-ma-xs ${hasError ? 'free-field--error' : ''}`"
|
|
29
|
-
>
|
|
10
|
+
<q-uploader @uploaded="uploaded" @removed="removeFile" @rejected="filesRejected" ref="uploader" :factory="factoryFn"
|
|
11
|
+
auto-upload :max-file-size="maxFileSize" :accept="acceptedFileTypes"
|
|
12
|
+
:class="`q-ma-xs ${hasError ? 'free-field--error' : ''}`">
|
|
30
13
|
<template v-slot:list="scope">
|
|
31
|
-
<div
|
|
32
|
-
|
|
33
|
-
class="
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
class="row ellipsis full-width"
|
|
37
|
-
v-for="(file, index) in fieldData.value"
|
|
38
|
-
:key="index"
|
|
39
|
-
>
|
|
40
|
-
<q-btn
|
|
41
|
-
icon="cloud_download"
|
|
42
|
-
dense
|
|
43
|
-
flat
|
|
44
|
-
></q-btn>
|
|
45
|
-
<a
|
|
46
|
-
class="ellipsis"
|
|
47
|
-
target="_blank"
|
|
48
|
-
:href="$filter('serverPath', file.id)"
|
|
49
|
-
:download="file.name"
|
|
50
|
-
>
|
|
14
|
+
<div v-if="Field.Options && Field.Options.AsLink && !!fieldData.value?.id"
|
|
15
|
+
class="file-link row full-width ellipsis items-center">
|
|
16
|
+
<div class="row ellipsis full-width" v-for="(file, index) in fieldData.value" :key="index">
|
|
17
|
+
<q-btn icon="cloud_download" dense flat></q-btn>
|
|
18
|
+
<a class="ellipsis" target="_blank" :href="$filter('serverPath', file.id)" :download="file.name">
|
|
51
19
|
{{ file.name }}
|
|
52
20
|
<q-tooltip>{{ file.name }}</q-tooltip>
|
|
53
21
|
</a>
|
|
54
22
|
</div>
|
|
55
23
|
</div>
|
|
56
24
|
<div v-else>
|
|
57
|
-
<div
|
|
58
|
-
|
|
59
|
-
v-if="!dense
|
|
60
|
-
|
|
61
|
-
<q-spinner
|
|
62
|
-
v-if="scope.isUploading"
|
|
63
|
-
class="q-uploader__spinner"
|
|
64
|
-
/>
|
|
65
|
-
<q-btn
|
|
66
|
-
v-if="!scope.isUploading && !Field.ReadOnly"
|
|
67
|
-
type="a"
|
|
68
|
-
icon="cloud_upload"
|
|
69
|
-
dense
|
|
70
|
-
flat
|
|
71
|
-
class="upload-btn"
|
|
72
|
-
label="点击上传"
|
|
73
|
-
>
|
|
25
|
+
<div class="uploader-btns row no-wrap items-center" v-if="!dense">
|
|
26
|
+
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
|
|
27
|
+
<q-btn v-if="!scope.isUploading && !Field.ReadOnly" type="a" icon="cloud_upload" dense flat
|
|
28
|
+
class="upload-btn" label="点击上传">
|
|
74
29
|
<q-uploader-add-trigger v-if="!Field.ReadOnly" />
|
|
75
30
|
</q-btn>
|
|
76
|
-
<q-btn
|
|
77
|
-
|
|
78
|
-
icon="clear"
|
|
79
|
-
@click="scope.abort"
|
|
80
|
-
class="clear-btn"
|
|
81
|
-
round
|
|
82
|
-
dense
|
|
83
|
-
flat
|
|
84
|
-
></q-btn>
|
|
31
|
+
<q-btn v-if="scope.isUploading && !Field.ReadOnly" icon="clear" @click="scope.abort" class="clear-btn" round
|
|
32
|
+
dense flat></q-btn>
|
|
85
33
|
<slot name="warning"></slot>
|
|
86
34
|
</div>
|
|
87
35
|
|
|
@@ -94,51 +42,28 @@
|
|
|
94
42
|
</q-item-section>
|
|
95
43
|
|
|
96
44
|
<q-item-section side>
|
|
97
|
-
<q-btn
|
|
98
|
-
|
|
99
|
-
type="a"
|
|
100
|
-
icon="cloud_upload"
|
|
101
|
-
class="upload-btn"
|
|
102
|
-
dense
|
|
103
|
-
flat
|
|
104
|
-
>
|
|
45
|
+
<q-btn v-if="!scope.isUploading && !Field.ReadOnly" type="a" icon="cloud_upload" class="upload-btn" dense
|
|
46
|
+
flat>
|
|
105
47
|
<q-uploader-add-trigger v-if="!Field.ReadOnly" />
|
|
106
48
|
</q-btn>
|
|
107
49
|
</q-item-section>
|
|
108
50
|
</q-item>
|
|
109
51
|
|
|
110
|
-
<div
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
<q-card
|
|
115
|
-
flat
|
|
116
|
-
class="file-list-item"
|
|
117
|
-
>
|
|
118
|
-
<e-icon
|
|
119
|
-
class="file-image"
|
|
120
|
-
:name="fileThumb(fieldData.value)"
|
|
121
|
-
thumb
|
|
122
|
-
:relative="filePreviewType(fieldData.value) !== 'image'"
|
|
123
|
-
@click="preview(fieldData.value)"
|
|
124
|
-
>
|
|
52
|
+
<div v-else-if="!!fieldData.value?.id" class="file-list row items-start justify-start">
|
|
53
|
+
<q-card flat class="file-list-item">
|
|
54
|
+
<e-icon class="file-image" :name="fileThumb(fieldData.value)" thumb
|
|
55
|
+
:relative="filePreviewType(fieldData.value) !== 'image'" @click="preview(fieldData.value)">
|
|
125
56
|
<div class="view-btn-wrapper absolute-full justify-center text-center">
|
|
126
|
-
<q-btn
|
|
127
|
-
flat
|
|
128
|
-
class="view-btn full-height full-width"
|
|
129
|
-
>查看</q-btn>
|
|
57
|
+
<q-btn flat class="view-btn full-height full-width">查看</q-btn>
|
|
130
58
|
</div>
|
|
131
59
|
</e-icon>
|
|
132
60
|
<span class="file-name full-width ellipsis">
|
|
133
|
-
<a
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
:href="$filter('serverPath', fieldData.value.id)"
|
|
137
|
-
:download="fieldData.value.name">
|
|
138
|
-
{{ fieldData.value.name }}
|
|
61
|
+
<a v-if="fieldData.value && fieldData.value.id" target="_blank"
|
|
62
|
+
:href="$filter('serverPath', fieldData.value.id)" :download="fieldData.value.name">
|
|
63
|
+
{{ fieldData.value.name }}
|
|
139
64
|
</a>
|
|
140
65
|
<span v-else-if="fieldData.value && fieldData.value.name">
|
|
141
|
-
{{fieldData.value.name}}
|
|
66
|
+
{{ fieldData.value.name }}
|
|
142
67
|
</span>
|
|
143
68
|
<q-tooltip>{{ fieldData.value.name }}</q-tooltip>
|
|
144
69
|
</span>
|
|
@@ -147,58 +72,28 @@
|
|
|
147
72
|
Size: {{ fieldData.value.sizeLabel || fieldData.value.__sizeLabel }}
|
|
148
73
|
</span>
|
|
149
74
|
|
|
150
|
-
<q-btn
|
|
151
|
-
|
|
152
|
-
dense
|
|
153
|
-
round
|
|
154
|
-
class="delete-btn"
|
|
155
|
-
icon="close"
|
|
156
|
-
@click="scope.removeFile(fieldData.value)"
|
|
157
|
-
v-if="!Field.ReadOnly"
|
|
158
|
-
/>
|
|
75
|
+
<q-btn flat dense round class="delete-btn" icon="close" @click="scope.removeFile(fieldData.value)"
|
|
76
|
+
v-if="!Field.ReadOnly" />
|
|
159
77
|
</q-card>
|
|
160
78
|
</div>
|
|
161
|
-
<div
|
|
162
|
-
class="free-field--error-tag"
|
|
163
|
-
v-if="hasError"
|
|
164
|
-
>
|
|
79
|
+
<div class="free-field--error-tag" v-if="hasError">
|
|
165
80
|
<e-icon name="error"></e-icon>
|
|
166
81
|
</div>
|
|
167
82
|
</div>
|
|
168
83
|
</template>
|
|
169
84
|
</q-uploader>
|
|
170
|
-
<q-dialog
|
|
171
|
-
|
|
172
|
-
flat
|
|
173
|
-
full-width
|
|
174
|
-
full-height
|
|
175
|
-
v-model="showPreview"
|
|
176
|
-
style="background: rgba(0,0,0,0)"
|
|
177
|
-
>
|
|
85
|
+
<q-dialog class="image-preview-dialog" flat full-width full-height v-model="showPreview"
|
|
86
|
+
style="background: rgba(0,0,0,0)">
|
|
178
87
|
<div class="image-preview">
|
|
179
|
-
<q-icon name="close"
|
|
180
|
-
|
|
181
|
-
|
|
182
|
-
|
|
183
|
-
|
|
184
|
-
<q-img
|
|
185
|
-
v-if="previewType=== 'image'"
|
|
186
|
-
fit="contain"
|
|
187
|
-
:src="previewFile"
|
|
188
|
-
@click="showPreview=false"
|
|
189
|
-
style="height: 100%; max-width: 100%;"
|
|
190
|
-
>
|
|
88
|
+
<q-icon name="close" class="absolute cursor-pointer bg-white text-primary"
|
|
89
|
+
style="border-radius: 6px;border: 1px solid primary;right: 0;" round size="20px"
|
|
90
|
+
@click="showPreview = false"></q-icon>
|
|
91
|
+
<q-img v-if="previewType === 'image'" fit="contain" :src="previewFile" @click="showPreview = false"
|
|
92
|
+
style="height: 100%; max-width: 100%;">
|
|
191
93
|
</q-img>
|
|
192
94
|
|
|
193
|
-
<pdf-viewer
|
|
194
|
-
|
|
195
|
-
v-model="showPreview"
|
|
196
|
-
@click="showPreview=false"
|
|
197
|
-
:src="previewFile"
|
|
198
|
-
:version="Field?.Options?.PdfViewerVersion"
|
|
199
|
-
type="pdfjs"
|
|
200
|
-
style="height: 100%; max-width: 100%;"
|
|
201
|
-
/>
|
|
95
|
+
<pdf-viewer v-if="previewType === 'pdf'" v-model="showPreview" @click="showPreview = false" :src="previewFile"
|
|
96
|
+
:version="Field?.Options?.PdfViewerVersion" type="pdfjs" style="height: 100%; max-width: 100%;" />
|
|
202
97
|
</div>
|
|
203
98
|
</q-dialog>
|
|
204
99
|
</div>
|
|
@@ -206,10 +101,10 @@
|
|
|
206
101
|
|
|
207
102
|
<script>
|
|
208
103
|
import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
|
|
209
|
-
import { useFreeField, freeFieldProps } from '../composible/useFreeField';
|
|
210
|
-
import { useFormValidator} from '../../composible/useFormValidator';
|
|
211
|
-
import { useUploader } from '../composible/useUploader';
|
|
212
|
-
import PdfViewer from './pdfviewer';
|
|
104
|
+
import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
|
|
105
|
+
import { useFormValidator} from '../../composible/useFormValidator.js';
|
|
106
|
+
import { useUploader } from '../composible/useUploader.js';
|
|
107
|
+
import PdfViewer from './pdfviewer.js';
|
|
213
108
|
|
|
214
109
|
export default defineComponent({
|
|
215
110
|
name: 'InputFieldFile',
|
|
@@ -329,7 +224,6 @@ export default defineComponent({
|
|
|
329
224
|
if (res && res.msg === 'OK') {
|
|
330
225
|
setFieldData({
|
|
331
226
|
id: res.data.id,
|
|
332
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
333
227
|
sizeLabel: file.__sizeLabel,
|
|
334
228
|
name: file.name,
|
|
335
229
|
size: file.size,
|
|
@@ -1,55 +1,21 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div class="row free-field-file-list" v-if="Field">
|
|
3
|
-
<span
|
|
4
|
-
:
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
<q-tooltip
|
|
9
|
-
v-if="Field.Description"
|
|
10
|
-
anchor="top right"
|
|
11
|
-
>{{Field.Description}}</q-tooltip>
|
|
12
|
-
{{Field.Label || ''}}
|
|
13
|
-
<span
|
|
14
|
-
v-if="Field.Required"
|
|
15
|
-
class="required-mark"
|
|
16
|
-
>*</span>
|
|
3
|
+
<span :class="`field-label ${(Field.Label && Field.Label.trim().length)
|
|
4
|
+
? '' : 'field-label-empty'} ${Field.Required ? 'required' : ''}`" v-if="Field.Label !== void 0">
|
|
5
|
+
<q-tooltip v-if="Field.Description" anchor="top right">{{ Field.Description }}</q-tooltip>
|
|
6
|
+
{{ Field.Label || '' }}
|
|
7
|
+
<span v-if="Field.Required" class="required-mark">*</span>
|
|
17
8
|
</span>
|
|
18
|
-
<q-uploader
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
@rejected="filesRejected"
|
|
23
|
-
:factory="factoryFn"
|
|
24
|
-
multiple
|
|
25
|
-
:auto-upload="Field && Field.Options && Field.Options.Auto"
|
|
26
|
-
:max-file-size="maxFileSize"
|
|
27
|
-
:max-total-size="maxTotalSize"
|
|
28
|
-
:accept="acceptedFileTypes"
|
|
29
|
-
:class="`q-ma-xs ${hasError ? 'free-field--error' : ''}`"
|
|
30
|
-
ref="uploader"
|
|
31
|
-
>
|
|
9
|
+
<q-uploader @added="localFiles.push(...$event)" @uploaded="uploaded" @removed="removeFile" @rejected="filesRejected"
|
|
10
|
+
:factory="factoryFn" multiple :auto-upload="Field && Field.Options && Field.Options.Auto"
|
|
11
|
+
:max-file-size="maxFileSize" :max-total-size="maxTotalSize" :accept="acceptedFileTypes"
|
|
12
|
+
:class="`q-ma-xs ${hasError ? 'free-field--error' : ''}`" ref="uploader">
|
|
32
13
|
<template v-slot:list="scope">
|
|
33
|
-
<div
|
|
34
|
-
|
|
35
|
-
class="
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
class="row ellipsis full-width"
|
|
39
|
-
v-for="(file, index) in allFiles || []"
|
|
40
|
-
:key="index"
|
|
41
|
-
>
|
|
42
|
-
<q-btn
|
|
43
|
-
icon="cloud_download"
|
|
44
|
-
dense
|
|
45
|
-
flat
|
|
46
|
-
></q-btn>
|
|
47
|
-
<a
|
|
48
|
-
class="ellipsis"
|
|
49
|
-
target="_blank"
|
|
50
|
-
:href="$filter('serverPath', file.id)"
|
|
51
|
-
:download="file.name"
|
|
52
|
-
>
|
|
14
|
+
<div v-if="Field.Options && Field.Options.AsLink && Array.isArray(allFiles) && allFiles.length"
|
|
15
|
+
class="file-link row full-width ellipsis items-center">
|
|
16
|
+
<div class="row ellipsis full-width" v-for="(file, index) in allFiles || []" :key="index">
|
|
17
|
+
<q-btn icon="cloud_download" dense flat></q-btn>
|
|
18
|
+
<a class="ellipsis" target="_blank" :href="$filter('serverPath', file.id)" :download="file.name">
|
|
53
19
|
{{ file.name }}
|
|
54
20
|
<q-tooltip>{{ file.name }}</q-tooltip>
|
|
55
21
|
</a>
|
|
@@ -57,43 +23,17 @@
|
|
|
57
23
|
</div>
|
|
58
24
|
<div v-else>
|
|
59
25
|
<div class="uploader-btns row no-wrap items-center">
|
|
60
|
-
<q-spinner
|
|
61
|
-
|
|
62
|
-
class="
|
|
63
|
-
/>
|
|
64
|
-
<q-btn
|
|
65
|
-
v-if="scope.canAddFiles && !Field.ReadOnly && canHaveMore"
|
|
66
|
-
type="a"
|
|
67
|
-
icon="add_box"
|
|
68
|
-
label="点击添加"
|
|
69
|
-
class="add-btn"
|
|
70
|
-
dense
|
|
71
|
-
flat
|
|
72
|
-
>
|
|
26
|
+
<q-spinner v-if="scope.isUploading" class="q-uploader__spinner" />
|
|
27
|
+
<q-btn v-if="scope.canAddFiles && !Field.ReadOnly && canHaveMore" type="a" icon="add_box" label="点击添加"
|
|
28
|
+
class="add-btn" dense flat>
|
|
73
29
|
<q-uploader-add-trigger v-if="!Field.ReadOnly" />
|
|
74
30
|
</q-btn>
|
|
75
|
-
<q-btn
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
class="upload-btn"
|
|
82
|
-
label="点击上传"
|
|
83
|
-
dense
|
|
84
|
-
flat
|
|
85
|
-
></q-btn>
|
|
86
|
-
|
|
87
|
-
<q-btn
|
|
88
|
-
v-if="scope.isUploading && !Field.ReadOnly"
|
|
89
|
-
type="a"
|
|
90
|
-
icon="clear"
|
|
91
|
-
@click="scope.abort"
|
|
92
|
-
class="abort-btn"
|
|
93
|
-
round
|
|
94
|
-
dense
|
|
95
|
-
flat
|
|
96
|
-
></q-btn>
|
|
31
|
+
<q-btn v-if="!Field.ReadOnly
|
|
32
|
+
&& scope.canUpload && !(Field && Field.Options && Field.Options.Auto)" type="a" icon="cloud_upload"
|
|
33
|
+
@click="scope.upload" class="upload-btn" label="点击上传" dense flat></q-btn>
|
|
34
|
+
|
|
35
|
+
<q-btn v-if="scope.isUploading && !Field.ReadOnly" type="a" icon="clear" @click="scope.abort"
|
|
36
|
+
class="abort-btn" round dense flat></q-btn>
|
|
97
37
|
<slot name="warning"></slot>
|
|
98
38
|
</div>
|
|
99
39
|
|
|
@@ -134,36 +74,18 @@
|
|
|
134
74
|
</q-list>
|
|
135
75
|
</div> -->
|
|
136
76
|
|
|
137
|
-
<div
|
|
138
|
-
|
|
139
|
-
class="file-list file
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
flat
|
|
143
|
-
class="file-list-item"
|
|
144
|
-
v-for="(file, index) in allFiles || []"
|
|
145
|
-
:key="index"
|
|
146
|
-
>
|
|
147
|
-
<e-icon
|
|
148
|
-
class="file-image"
|
|
149
|
-
:name="fileThumb(file)"
|
|
150
|
-
thumb
|
|
151
|
-
:relative="filePreviewType(file) !== 'image'"
|
|
152
|
-
@click="preview(file)"
|
|
153
|
-
>
|
|
77
|
+
<div v-if="Array.isArray(allFiles) && allFiles.length"
|
|
78
|
+
class="file-list file-list-card row items-start justify-start q-gutter-xl">
|
|
79
|
+
<q-card flat class="file-list-item" v-for="(file, index) in allFiles || []" :key="index">
|
|
80
|
+
<e-icon class="file-image" :name="fileThumb(file)" thumb :relative="filePreviewType(file) !== 'image'"
|
|
81
|
+
@click="preview(file)">
|
|
154
82
|
<div class="view-btn-wrapper absolute-full justify-center text-center">
|
|
155
|
-
<q-btn
|
|
156
|
-
flat
|
|
157
|
-
class="view-btn full-height full-width"
|
|
158
|
-
>查看</q-btn>
|
|
83
|
+
<q-btn flat class="view-btn full-height full-width">查看</q-btn>
|
|
159
84
|
</div>
|
|
160
85
|
</e-icon>
|
|
161
86
|
<span class="file-name full-width ellipsis">
|
|
162
|
-
<a
|
|
163
|
-
|
|
164
|
-
:href="$filter('serverPath', file.id)"
|
|
165
|
-
:download="file.name">
|
|
166
|
-
{{ file.name }}
|
|
87
|
+
<a target="_blank" :href="$filter('serverPath', file.id)" :download="file.name">
|
|
88
|
+
{{ file.name }}
|
|
167
89
|
</a>
|
|
168
90
|
<q-tooltip>{{ file.name }}</q-tooltip>
|
|
169
91
|
</span>
|
|
@@ -172,58 +94,28 @@
|
|
|
172
94
|
Size: {{ file.sizeLabel || file.__sizeLabel }}
|
|
173
95
|
</span>
|
|
174
96
|
|
|
175
|
-
<q-btn
|
|
176
|
-
|
|
177
|
-
dense
|
|
178
|
-
round
|
|
179
|
-
class="delete-btn"
|
|
180
|
-
icon="close"
|
|
181
|
-
@click="scope.removeFile(file)"
|
|
182
|
-
v-if="!Field.ReadOnly"
|
|
183
|
-
/>
|
|
97
|
+
<q-btn flat dense round class="delete-btn" icon="close" @click="scope.removeFile(file)"
|
|
98
|
+
v-if="!Field.ReadOnly" />
|
|
184
99
|
</q-card>
|
|
185
100
|
</div>
|
|
186
|
-
<div
|
|
187
|
-
class="free-field--error-tag"
|
|
188
|
-
v-if="hasError"
|
|
189
|
-
>
|
|
101
|
+
<div class="free-field--error-tag" v-if="hasError">
|
|
190
102
|
<e-icon name="error"></e-icon>
|
|
191
103
|
</div>
|
|
192
104
|
</div>
|
|
193
105
|
</template>
|
|
194
106
|
</q-uploader>
|
|
195
|
-
<q-dialog
|
|
196
|
-
|
|
197
|
-
flat
|
|
198
|
-
full-width
|
|
199
|
-
full-height
|
|
200
|
-
v-model="showPreview"
|
|
201
|
-
style="background: rgba(0,0,0,0)"
|
|
202
|
-
>
|
|
107
|
+
<q-dialog class="image-preview-dialog" flat full-width full-height v-model="showPreview"
|
|
108
|
+
style="background: rgba(0,0,0,0)">
|
|
203
109
|
<div class="image-preview">
|
|
204
|
-
<q-icon name="close"
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
<q-img
|
|
210
|
-
v-if="previewType=== 'image'"
|
|
211
|
-
fit="contain"
|
|
212
|
-
:src="previewFile"
|
|
213
|
-
@click="showPreview=false"
|
|
214
|
-
style="height: 100%; max-width: 100%;"
|
|
215
|
-
>
|
|
110
|
+
<q-icon name="close" class="absolute cursor-pointer bg-white text-primary"
|
|
111
|
+
style="border-radius: 6px;border: 1px solid primary;right: 0;" round size="20px"
|
|
112
|
+
@click="showPreview = false"></q-icon>
|
|
113
|
+
<q-img v-if="previewType === 'image'" fit="contain" :src="previewFile" @click="showPreview = false"
|
|
114
|
+
style="height: 100%; max-width: 100%;">
|
|
216
115
|
</q-img>
|
|
217
116
|
|
|
218
|
-
<pdf-viewer
|
|
219
|
-
|
|
220
|
-
v-model="showPreview"
|
|
221
|
-
@click="showPreview=false"
|
|
222
|
-
:src="previewFile"
|
|
223
|
-
:version="Field?.Options?.PdfViewerVersion"
|
|
224
|
-
type="pdfjs"
|
|
225
|
-
style="height: 100%; max-width: 100%;"
|
|
226
|
-
/>
|
|
117
|
+
<pdf-viewer v-if="previewType === 'pdf'" v-model="showPreview" @click="showPreview = false" :src="previewFile"
|
|
118
|
+
:version="Field?.Options?.PdfViewerVersion" type="pdfjs" style="height: 100%; max-width: 100%;" />
|
|
227
119
|
</div>
|
|
228
120
|
</q-dialog>
|
|
229
121
|
</div>
|
|
@@ -231,10 +123,10 @@
|
|
|
231
123
|
|
|
232
124
|
<script>
|
|
233
125
|
import { computed, defineComponent, getCurrentInstance, ref } from 'vue';
|
|
234
|
-
import { useFreeField, freeFieldProps } from '../composible/useFreeField';
|
|
235
|
-
import { useFormValidator} from '../../composible/useFormValidator';
|
|
236
|
-
import { useUploader } from '../composible/useUploader';
|
|
237
|
-
import PdfViewer from './pdfviewer';
|
|
126
|
+
import { useFreeField, freeFieldProps } from '../composible/useFreeField.js';
|
|
127
|
+
import { useFormValidator} from '../../composible/useFormValidator.js';
|
|
128
|
+
import { useUploader } from '../composible/useUploader.js';
|
|
129
|
+
import PdfViewer from './pdfviewer.js';
|
|
238
130
|
|
|
239
131
|
export default defineComponent({
|
|
240
132
|
name: 'InputFieldFileList',
|
|
@@ -375,7 +267,6 @@ export default defineComponent({
|
|
|
375
267
|
if (res && res.msg === 'OK') {
|
|
376
268
|
uploadedFiles.push({
|
|
377
269
|
id: res.data.id,
|
|
378
|
-
// eslint-disable-next-line no-underscore-dangle
|
|
379
270
|
sizeLabel: file.__sizeLabel,
|
|
380
271
|
name: file.name,
|
|
381
272
|
size: file.size,
|