@xilonglab/vue-main 1.5.1 → 1.5.3
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 +1 -1
- package/packages/form/XlFile.vue +137 -137
package/package.json
CHANGED
package/packages/form/XlFile.vue
CHANGED
|
@@ -1,137 +1,137 @@
|
|
|
1
|
-
<script setup>
|
|
2
|
-
defineOptions({ name: "XlFile" })
|
|
3
|
-
|
|
4
|
-
import { ref, computed } from 'vue';
|
|
5
|
-
import { ElMessage } from 'element-plus'
|
|
6
|
-
|
|
7
|
-
const emits = defineEmits(['change', 'update:modelValue'])
|
|
8
|
-
|
|
9
|
-
const props = defineProps({
|
|
10
|
-
modelValue: {
|
|
11
|
-
type: String,
|
|
12
|
-
default: "",
|
|
13
|
-
},
|
|
14
|
-
api: {
|
|
15
|
-
type: Function,
|
|
16
|
-
default: () => { },
|
|
17
|
-
},
|
|
18
|
-
params: {
|
|
19
|
-
type: Object,
|
|
20
|
-
default() {
|
|
21
|
-
return {};
|
|
22
|
-
},
|
|
23
|
-
},
|
|
24
|
-
allowedTypes: {
|
|
25
|
-
type: Array,
|
|
26
|
-
default() {
|
|
27
|
-
return [];
|
|
28
|
-
},
|
|
29
|
-
},
|
|
30
|
-
disabled: {
|
|
31
|
-
type: Boolean,
|
|
32
|
-
default: false,
|
|
33
|
-
},
|
|
34
|
-
width: {
|
|
35
|
-
default: 100,
|
|
36
|
-
},
|
|
37
|
-
l: {
|
|
38
|
-
type: String,
|
|
39
|
-
default: "",
|
|
40
|
-
},
|
|
41
|
-
});
|
|
42
|
-
|
|
43
|
-
const value = computed({
|
|
44
|
-
get() {
|
|
45
|
-
return props.modelValue;
|
|
46
|
-
},
|
|
47
|
-
set(data) {
|
|
48
|
-
emits('change', data)
|
|
49
|
-
emits('update:modelValue', data)
|
|
50
|
-
},
|
|
51
|
-
});
|
|
52
|
-
|
|
53
|
-
const headers = { token: localStorage.getItem("accessToken") }
|
|
54
|
-
const loading = ref(false)
|
|
55
|
-
|
|
56
|
-
const handlers = {
|
|
57
|
-
validateFileType(fileType) {
|
|
58
|
-
const { allowedTypes } = props;
|
|
59
|
-
if (allowedTypes.length == 0) {
|
|
60
|
-
return true;
|
|
61
|
-
} else {
|
|
62
|
-
if (allowedTypes.indexOf(fileType) < 0) {
|
|
63
|
-
return false;
|
|
64
|
-
} else {
|
|
65
|
-
return true;
|
|
66
|
-
}
|
|
67
|
-
}
|
|
68
|
-
},
|
|
69
|
-
beforeUpload(file) {
|
|
70
|
-
loading.value = true;
|
|
71
|
-
},
|
|
72
|
-
upload(option) {
|
|
73
|
-
const { params } = props
|
|
74
|
-
let formData = new FormData();
|
|
75
|
-
const file = option.file;
|
|
76
|
-
const filename = file.name;
|
|
77
|
-
const fileType = file.type;
|
|
78
|
-
if (!handlers.validateFileType(fileType)) {
|
|
79
|
-
ElMessage.error(`文件类型错误`)
|
|
80
|
-
loading.value = false;
|
|
81
|
-
return;
|
|
82
|
-
}
|
|
83
|
-
formData.append("file", file);
|
|
84
|
-
formData.append("filename", filename);
|
|
85
|
-
for (let key in params) {
|
|
86
|
-
formData.append(key, params[key]);
|
|
87
|
-
}
|
|
88
|
-
return props.api(formData);
|
|
89
|
-
},
|
|
90
|
-
onSuccess(data, file, filelist) {
|
|
91
|
-
loading.value = false;
|
|
92
|
-
// 后端返回的是 uri 字符串，直接更新 modelValue
|
|
93
|
-
value.value = data;
|
|
94
|
-
},
|
|
95
|
-
onError(err, file, filelist) {
|
|
96
|
-
loading.value = false;
|
|
97
|
-
ElMessage.error('文件上传失败');
|
|
98
|
-
},
|
|
99
|
-
}
|
|
100
|
-
</script>
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
<template>
|
|
104
|
-
<div class="xl-file xl-form-item" :style="{ width: `${width}px` }">
|
|
105
|
-
<el-upload class="xl-file-upload" ref="uploader" action="" :headers="headers" :http-request="handlers.upload"
|
|
106
|
-
:before-upload="handlers.beforeUpload" :on-success="handlers.onSuccess" :on-error="handlers.onError" :show-file-list="false"
|
|
107
|
-
:disabled="disabled">
|
|
108
|
-
<xl-button :loading="loading" :disabled="disabled">
|
|
109
|
-
{{ l || '上传' }}
|
|
110
|
-
</xl-button>
|
|
111
|
-
</el-upload>
|
|
112
|
-
<span v-if="value" class="uploaded-text">已上传</span>
|
|
113
|
-
</div>
|
|
114
|
-
</template>
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
<style lang="less" scoped>
|
|
118
|
-
.xl-file {
|
|
119
|
-
display: inline-flex;
|
|
120
|
-
align-items: center;
|
|
121
|
-
gap: 8px;
|
|
122
|
-
|
|
123
|
-
.xl-file-upload {
|
|
124
|
-
display: inline-block;
|
|
125
|
-
|
|
126
|
-
.el-upload {
|
|
127
|
-
display: inline-block;
|
|
128
|
-
}
|
|
129
|
-
}
|
|
130
|
-
|
|
131
|
-
.uploaded-text {
|
|
132
|
-
color: var(--el-color-success);
|
|
133
|
-
font-size: 14px;
|
|
134
|
-
}
|
|
135
|
-
}
|
|
136
|
-
</style>
|
|
137
|
-
|
|
1
|
+
<script setup>
|
|
2
|
+
defineOptions({ name: "XlFile" })
|
|
3
|
+
|
|
4
|
+
import { ref, computed } from 'vue';
|
|
5
|
+
import { ElMessage } from 'element-plus'
|
|
6
|
+
|
|
7
|
+
const emits = defineEmits(['change', 'update:modelValue'])
|
|
8
|
+
|
|
9
|
+
const props = defineProps({
|
|
10
|
+
modelValue: {
|
|
11
|
+
type: String,
|
|
12
|
+
default: "",
|
|
13
|
+
},
|
|
14
|
+
api: {
|
|
15
|
+
type: Function,
|
|
16
|
+
default: () => { },
|
|
17
|
+
},
|
|
18
|
+
params: {
|
|
19
|
+
type: Object,
|
|
20
|
+
default() {
|
|
21
|
+
return {};
|
|
22
|
+
},
|
|
23
|
+
},
|
|
24
|
+
allowedTypes: {
|
|
25
|
+
type: Array,
|
|
26
|
+
default() {
|
|
27
|
+
return [];
|
|
28
|
+
},
|
|
29
|
+
},
|
|
30
|
+
disabled: {
|
|
31
|
+
type: Boolean,
|
|
32
|
+
default: false,
|
|
33
|
+
},
|
|
34
|
+
width: {
|
|
35
|
+
default: 100,
|
|
36
|
+
},
|
|
37
|
+
l: {
|
|
38
|
+
type: String,
|
|
39
|
+
default: "",
|
|
40
|
+
},
|
|
41
|
+
});
|
|
42
|
+
|
|
43
|
+
const value = computed({
|
|
44
|
+
get() {
|
|
45
|
+
return props.modelValue;
|
|
46
|
+
},
|
|
47
|
+
set(data) {
|
|
48
|
+
emits('change', data)
|
|
49
|
+
emits('update:modelValue', data)
|
|
50
|
+
},
|
|
51
|
+
});
|
|
52
|
+
|
|
53
|
+
const headers = { token: localStorage.getItem("accessToken") }
|
|
54
|
+
const loading = ref(false)
|
|
55
|
+
|
|
56
|
+
const handlers = {
|
|
57
|
+
validateFileType(fileType) {
|
|
58
|
+
const { allowedTypes } = props;
|
|
59
|
+
if (allowedTypes.length == 0) {
|
|
60
|
+
return true;
|
|
61
|
+
} else {
|
|
62
|
+
if (allowedTypes.indexOf(fileType) < 0) {
|
|
63
|
+
return false;
|
|
64
|
+
} else {
|
|
65
|
+
return true;
|
|
66
|
+
}
|
|
67
|
+
}
|
|
68
|
+
},
|
|
69
|
+
beforeUpload(file) {
|
|
70
|
+
loading.value = true;
|
|
71
|
+
},
|
|
72
|
+
upload(option) {
|
|
73
|
+
const { params } = props
|
|
74
|
+
let formData = new FormData();
|
|
75
|
+
const file = option.file;
|
|
76
|
+
const filename = file.name;
|
|
77
|
+
const fileType = file.type;
|
|
78
|
+
if (!handlers.validateFileType(fileType)) {
|
|
79
|
+
ElMessage.error(`文件类型错误`)
|
|
80
|
+
loading.value = false;
|
|
81
|
+
return;
|
|
82
|
+
}
|
|
83
|
+
formData.append("file", file);
|
|
84
|
+
formData.append("filename", filename);
|
|
85
|
+
for (let key in params) {
|
|
86
|
+
formData.append(key, params[key]);
|
|
87
|
+
}
|
|
88
|
+
return props.api(formData);
|
|
89
|
+
},
|
|
90
|
+
onSuccess(data, file, filelist) {
|
|
91
|
+
loading.value = false;
|
|
92
|
+
// 后端返回的是 uri 字符串，直接更新 modelValue
|
|
93
|
+
value.value = data;
|
|
94
|
+
},
|
|
95
|
+
onError(err, file, filelist) {
|
|
96
|
+
loading.value = false;
|
|
97
|
+
ElMessage.error('文件上传失败');
|
|
98
|
+
},
|
|
99
|
+
}
|
|
100
|
+
</script>
|
|
101
|
+
|
|
102
|
+
|
|
103
|
+
<template>
|
|
104
|
+
<div class="xl-file xl-form-item" :style="{ width: `${width}px` }">
|
|
105
|
+
<el-upload class="xl-file-upload" ref="uploader" action="" :headers="headers" :http-request="handlers.upload"
|
|
106
|
+
:before-upload="handlers.beforeUpload" :on-success="handlers.onSuccess" :on-error="handlers.onError" :show-file-list="false"
|
|
107
|
+
:disabled="disabled">
|
|
108
|
+
<xl-button type="primary" :loading="loading" :disabled="disabled">
|
|
109
|
+
{{ l || '上传' }}
|
|
110
|
+
</xl-button>
|
|
111
|
+
</el-upload>
|
|
112
|
+
<span v-if="value" class="uploaded-text">已上传</span>
|
|
113
|
+
</div>
|
|
114
|
+
</template>
|
|
115
|
+
|
|
116
|
+
|
|
117
|
+
<style lang="less" scoped>
|
|
118
|
+
.xl-file {
|
|
119
|
+
display: inline-flex;
|
|
120
|
+
align-items: center;
|
|
121
|
+
gap: 8px;
|
|
122
|
+
|
|
123
|
+
.xl-file-upload {
|
|
124
|
+
display: inline-block;
|
|
125
|
+
|
|
126
|
+
.el-upload {
|
|
127
|
+
display: inline-block;
|
|
128
|
+
}
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
.uploaded-text {
|
|
132
|
+
color: var(--el-color-success);
|
|
133
|
+
font-size: 14px;
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
</style>
|
|
137
|
+
|